.section-navigation {
	position:absolute;
	top:540px;
	left:0;
}

.section-navigation, .section-navigation li {
	padding:0;
	margin:0;
	list-style: none;
	height:46px;
	width:960px;
	display: block;
    z-index: 100;
}
.section-navigation li {
	float:left;
	width:188px;
	margin-left:5px;
	text-transform: uppercase;
}
.section-navigation li a {
    /*without position:relative chrome ignores z-indexing *sigh* */
    position:relative;

	width:100%;
	height:100%;
	line-height: 46px;
	display:block;
	cursor: pointer;

    text-align:center;

    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    z-index: 100;

    text-decoration: none;

}

.section-navigation li a:hover, .section-navigation li.active a {
	box-shadow: 0 0 8px #000;
    -moz-transform: scale(1.05,1.05);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
}
.section-navigation li a:hover {

    z-index: 105;
    -webkit-transform: scale(1.05,1.05);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
}
.section-navigation li.active {
    z-index: 110;
}
.section-navigation li.active a {
	z-index: 110;
	-webkit-transform: scale(1.12,1.12);
    -moz-transform: scale(1.12,1.12);
}

a.link-drivers,
a.link-pressures,
a.link-impacts,
a.link-state,
a.link-response {
    padding: 0 0.2em;
}

#button-drivers {
	margin-left:0;
}
#button-drivers a, #button-drivers a:hover, a.link-drivers {
	background-color: #E2F2F0;
}
#button-pressures a, #button-pressures a:hover, a.link-pressures {
	background-color: #A7B6BF;
}
#button-impacts a, #button-impacts a:hover, a.link-impacts {
	background-color: #92D6E3;
}
#button-state a, #button-state a:hover, a.link-state {
	color:#fff;
	background-color: #007F7E;
}
#button-response a, #button-response a:hover, a.link-response {
	color:#fff;
	background-color: #5E2B82;
}

#animation {
	position:relative;
	width:960;
	height:700;
}
#section-background {
	position:absolute;
	top:0;
	left:0;
}
#animation .sections section {
	position:absolute;
	top:0;
	left:0;
	width:960px;
	height:540px;
	display:none;
	z-index:900;
}
#animation .sections section.active {
	display:block;
}

.section-image {
	position:absolute;
	top:0;
	left:0;
	z-index:1000;
    cursor:pointer;
}

/**
 *Drivers images positioning
 **/
#section-image-drivers-geology {
    left: 188px;
    top: 162px;
}

#section-image-drivers-climate {
    left: 460px;
    top: 25px;
}

#section-image-drivers-land {
    left: 540px;
    top: 180px;
}

#section-image-drivers-hydrology {
    left: 348px;
    top: 239px;
}

/* #section-image-drivers-coal {
    left: 530px;
    top: 145px;
}

#section-image-drivers-csg {
    left: 30px;
    top: 180px;
} */

#section-image-drivers-groundcover {
    left: 60px;
    top: 280px;
}

/**
 *Impacts images positioning
 **/

#section-image-impacts-salinisation {
    left: 119px;
    top: 181px;
}

#section-image-impacts-sedimentation {
    left: 362px;
    top: 278px;
}

#section-image-impacts-eutrophication {
    left: 270px;
    top: 295px;
}

#section-image-impacts-acidification {
    left: 390px;
    top: 320px;
}

#section-image-impacts-biota {
    left: 661px;
    top: 176px;
}

/**
 * Pressures images positioning
 **/
#section-image-pressures-use {
    left: 12px;
    top: 159px;
}

#section-image-pressures-grazing {
    left: 340px;
    top: 250px;
}

#section-image-pressures-cropping {
    left: 190px;
    top: 134px;
}

#section-image-pressures-barriers {
    left: 422px;
    top: 146px;
}
#section-image-pressures-discharges {
    left: 533px;
    top: 128px;
}

/**
 * State images positioning
 **/

#section-image-state-connectivity {
    left: 638px;
    top: 232px;
}
#section-image-state-flows {
    left: 248px;
    top: 301px;
}
#section-image-state-mangroves {
    left: 422px;
    top: 372px;
}
#section-image-state-riparian {
    left: 210px;
    top: 161px;
}
#section-image-state-waterquality {
    left: 686px;
    top: 173px;
}
#section-image-state-waterquantity {
    left: 448px;
    top: 177px;
}

/**
 * Response images positioning
 **/

#section-image-response-information {
    left: 211px;
    top: 332px;
}
#section-image-response-landmgmt {
    left: 409px;
    top: 116px;
}
#section-image-response-regulations {
    left: 557px;
    top: 166px;
}
#section-image-response-rehab {
    left: 25px;
    top: 175px;
}
#section-image-response-stp {
    left: 305px;
    top: 158px;
}
#section-image-response-waterrestrictions {
    left: 624px;
    top: 250px;
}

.section-image-popup {
	display:none;
	position:absolute;
	top:0;
	left:0;
	z-index:2000;
	background:white;
	padding:0.6em 0.5em;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#text-popup {
    position:absolute;
    bottom: 10px;
    left:10px;
    z-index:2000;
    width:400px;
    background:white;
    padding:0.6em 0.5em;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#text-popup div {
    text-align:center;
}

#text-popup a {
    text-decoration: none;
}

/*so the title doesnt bump into the cose button */
.section-image-popup h4 {
    margin-right:50px;
}

.section-image-popup:after {
    border-color: #fff rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 15px 15px 0;
    bottom: -15px;
    content: "";
    display: block;
    left: 10px;
    position: absolute;
    width: 0;
}
.section-image-popup.top:after {
    border-color: #fff rgba(0, 0, 0, 0);
    border-width: 0 15px 15px;
    bottom: auto;
    left: auto;
    right: 15px;
    top: -15px;
}
.section-image-popup.left:after {
    border-color: rgba(0, 0, 0, 0) #fff;
    border-width: 15px 15px 15px 0;
    bottom: auto;
    left: -14px;
    top: 10px;
}
.section-image-popup.right:after {
    border-color: rgba(0, 0, 0, 0) #fff;
    border-width: 15px 0 15px 15px;
    bottom: auto;
    left: auto;
    right: -15px;
    top: 10px;
}

.section-image-popup.top {
	margin:15px 0 0 0;
}
.section-image-popup.right {
	margin:0 15px 0 0;
}
.section-image-popup.bottom {
	margin:0 0 15px 0;
}
.section-image-popup.left {
	margin:0 0 0 15px;
}

/**
 *Drivers popup positioning
 **/
#section-image-drivers-geology-popup {
    left: 298px;
    top: 145px;
    width: 420px;
}

#section-image-drivers-climate-popup {
    left: 519px;
    top: 39px;
}

#section-image-drivers-land-popup {
    left: 592px;
    top: 163px;
}

#section-image-drivers-hydrology-popup {
    left: 400px;
    top: 233px;
}

#section-image-drivers-coal-popup {
    left: 586px;
    top: 163px;
}

#section-image-drivers-csg-popup {
    left: 71px;
    top: 171px;
}

#section-image-drivers-groundcover-popup {
    left: 137px;
    top: 269px;
}

/**
 *Impacts popup positioning
 **/

#section-image-impacts-salinisation-popup {
    left: 242px;
    top: 174px;
    width:400px;
}

#section-image-impacts-sedimentation-popup {
    left: 507px;
    top: 128px;
    width:400px;
}
#section-image-impacts-sedimentation-popup:after {
    top:284px;
}

#section-image-impacts-eutrophication-popup {
    left: 311px;
    top: 278px;
    width:400px;
}

#section-image-impacts-acidification-popup {
    left: 452px;
    top: 154px;
    width:400px;
}
#section-image-impacts-acidification-popup:after {
    top:170px;
}

#section-image-impacts-biota-popup {
    left: 275px;
    top: 162px;
    width: 400px;
}

/**
 * Pressures popup positioning
 **/

#section-image-pressures-use-popup {
    left: 86px;
    top: 152px;
    width: 400px;
}

#section-image-pressures-grazing-popup {
    left: 406px;
    top: 250px;
    width: 400px;
}

#section-image-pressures-cropping-popup {
    left: 294px;
    top: 129px;
    width: 400px;
}

#section-image-pressures-barriers-popup {
    left: 465px;
    top: 130px;
    width: 400px;
}
#section-image-pressures-discharges-popup {
    left: 175px;
    top: 162px;
    width: 400px;
}
/**
 * State popup positioning
 **/

#section-image-state-connectivity-popup {
    left: 638px;
    top: 232px;
}
#section-image-state-flows-popup {
    left: 277px;
    top: 222px;
    width: 400px;
}
#section-image-state-flows-popup:after {
    top:80px;
}

#section-image-state-mangroves-popup {
    left: 460px;
    top: 362px;
    width: 400px;
}
#section-image-state-riparian-popup {
    left: 242px;
    top: 160px;
    width: 400px;
}
#section-image-state-waterquality-popup {
    left: 276px;
    top: 166px;
    width: 400px;
}
#section-image-state-waterquantity-popup {
    left: 475px;
    top: 177px;
    width: 400px;
}

/**
 * Response popup positioning
 **/

#section-image-response-information-popup {
    left: 255px;
    top: 338px;
    width: 400px;
}
#section-image-response-landmgmt-popup {
    left: 499px;
    top: 106px;
    width: 400px;
}
#section-image-response-regulations-popup {
    left: 178px;
    top: 160px;
    width: 400px;
}
#section-image-response-rehab-popup {
    left: 59px;
    top: 193px;
    width: 400px;
}
#section-image-response-stp-popup {
    left: 317px;
    top: 157px;
    width: 400px;
}

#section-image-response-waterrestrictions-popup {
    left: 245px;
    top: 261px;
    width: 400px;
}


/**
 *  Sprites and animation frame styles!
 **/

#plume-sprite div {
    background:url('../img/animation/plume-sprite.png') no-repeat top left;
    display:block;
    position:absolute;
    bottom:1px;
    opacity:1;
    right:-48px;
}
#plume-sprite .plume1 {
    background-position:0 -0px;
    width: 646px;
    height: 262px;
}
#plume-sprite .plume2 {
    background-position:0 -262px;
    width: 646px;
    height: 262px;
}
#plume-sprite .plume3 {
    background-position:0 -524px;
    width: 646px;
    height: 262px;
}
#river-sprite div {
    background:url('../img/animation/river-sprite.png') no-repeat top left;
    display:block;
    position:absolute;
    bottom:98px;
    opacity:1;
    right:356px;
}
#river-sprite .river1 {
    background-position:0 -0px;
    width: 160px;
    height: 306px;
}
#river-sprite .river2 {
    background-position:0 -306px;
    width: 160px;
    height: 306px;
}
#river-sprite .river3 {
    background-position:0 -612px;
    width: 160px;
    height: 306px;
}
#river-sprite .river4 {
    background-position:0 -918px;
    width: 160px;
    height: 306px;
}
#river-sprite .river5 {
    background-position:0 -1224px;
    width: 160px;
    height: 306px;
}
#river-sprite .river6 {
    background-position:0 -1530px;
    width: 160px;
    height: 306px;
}
#river-sprite .river7 {
    background-position:0 -1836px;
    width: 160px;
    height: 306px;
}

#rain-sprite  div {
    background:url('../img/animation/rain-sprite.png') no-repeat top left;
    display:block;
    position:absolute;
    opacity:1;
    right: 449px;
    top: 29px;
}
#rain-sprite .rain1 {
    background-position:0 -0px;
    width: 68px;
    height: 32px;
}
#rain-sprite .rain4 {
    background-position:0 -173px;
    width: 68px;
    height: 125px;
}

#fence-sprite {
    background:url('../img/animation/fence-sprite.png') no-repeat top left;
    display:block;
    position:absolute;
    opacity:1;
    width:60px;
    height:51px;
    right: 492px;
    top: 116px;
}
#grade-sprite div {
    background:url('../img/animation/grade-sprite.png') no-repeat top left;
    display:block;
    position:absolute;
    opacity:1;
    width:160px;
    height:160px;
    right: 267px;
    top: 149px;
}
#grade-sprite .gradeD {
    background-position:0 -0px;
}
#grade-sprite .gradeB {
    background-position:0 -160px;
}

#dirt-sprite div {
    background: url("../img/animation/dirt-sprite.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    display: block;
    height: 38px;
    left: 418px;
    opacity: 1;
    position: absolute;
    top: 129px;
    width: 95px;
}

#paddock-sprite div {
    background:url('../img/animation/paddock-sprite.png') no-repeat top left;
    display:block;
    position:absolute;
    opacity:1;
    top:140px;
    left:456px;
}
#paddock-sprite .paddock1 {
    background-position: 0 0;
    height: 20px;
    left: 435px;
    top: 122px;
    width: 24px;
}
#paddock-sprite .paddock2 {
    background-position:0 -20px;
    width: 24px;
    height: 20px;
    top:123px;
    left:485px;
}
#paddock-sprite .paddock3 {
    background-position:0 -40px;
    width: 24px;
    height: 20px;
    top:150px;
    left:466px;
}
#paddock-sprite .paddock4 {
    background-position:0 -60px;
    width: 24px;
    height: 20px;
    top:125px;
    left:476px;
}
#paddock-sprite .paddock5 {
    background-position:0 -80px;
    width: 24px;
    height: 20px;
    top:145px;
    left:486px;
}
#paddock-sprite .paddock6 {
    background-position: 0 -120px;
    height: 20px;
    left: 450px;
    top: 141px;
    width: 24px;
}

#paddock-sprite .paddock7 {
    background-position: 0 -96px;
    height: 20px;
    left: 450px;
    top: 111px;
    width: 24px;
}