/* Stu's additional styling for the WQIP website */
/* This will be rolled into the main trunk once we have everything sorted */
/* Author: Stuart Harcourt (Almost Anyting Web & Graphic Design) */
/* Last Update: 13/11/2015 */

/*****************************/
/* Let's play us some Tetris  */
/*****************************/

/* General Content Styling */
/* This should fix up the behaviour of the bulleted lists on pages with indented menus on pages that need it*/

body#page4287 .page_content ul, body#page2557 .page_content ul, body#page2559 .page_content ul, body#page2623 .page_content ul {display:inline-block;}


/* Home Page Splash Container - Text stored in Global Content Block on WQIP Home */

.SplashCont {padding:5px 20px 20px; text-align:center;}

.SplashCont strong {color:#FFF;}

.SplashCont a, .SplashCont a:visited {color:#FFF; text-decoration:underline;}

.SplashCont a:hover {color:#5f7e23; text-decoration:underline;}

.SplashCont p.ExtraPad {margin-top:10px;}

/* Quicklinks Page */

/* Here i'm cancelling out some default styles */
/* They wont afftect the main website as everything I am doing has it's own class */

li.WQIP-ql-item:before, li.WQIP-info-item:before {
	list-style:none;
	padding-right:0;
	content:"";
}

ul.QuickLinksContainer, ul.QuickLinksContainer li {
	list-style:none;
	margin:0;
	padding:0;
	text-indent:0;
}

/* Here's the custom stuff for the Quick Links Page */

ul.QuickLinksContainer {
	width:100%;
	display:flex;  
	flex-flow: row wrap;
	align-content: flex-start;	
	margin-bottom:20px;
}

/* WQIP Quicklinks */

li.WQIP-ql-item {
	width:19%;
}

li.WQIP-ql-item a {
	display:block;
	padding:0 10px 0;
	text-align:center;
	font-size:16px;
	line-height: 1.3em;
	color:#ca9233;
}

li.WQIP-ql-item a:hover {
	color:#5f7e23;
	text-decoration:underline;
}

li.WQIP-ql-item img {
	width:100%; 
	max-width:90%;
	height: auto;
	display:block;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 15px;
}

li.WQIP-ql-item img:hover {transform: rotate(.004turn);}

@media (max-width:700px) {

li.WQIP-ql-item {
	width:33%;
	margin-top:20px!important;
}

}

@media (max-width:580px) {

li.WQIP-ql-item {
	width:50%;
	margin-top:20px!important;
}

}

/* Information about the Fitzroy Basin Quicklinks */

li.WQIP-info-item {
	width:19%;
}

li.WQIP-info-item a {
	display:block;
	padding:0 10px 0;
	text-align:center;
	font-size:16px;
	line-height: 1.3em;
	color:#ca9233;
}

li.WQIP-info-item a:hover {
	color:#5f7e23;
	text-decoration:underline;
}

li.WQIP-info-item img {
	width:100%; 
	max-width:90%;
	height: auto;
	display:block;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 15px;
}

li.WQIP-info-item img:hover {transform: rotate(.004turn);}

@media (max-width:700px) {

li.WQIP-info-item {
	width:33%;
	margin-top:20px!important;
}

}


@media (max-width:580px) {

li.WQIP-info-item {
	width:50%;
	margin-top:20px!important;
}

}

/* Starfish Chart */

.starfish-container {
	width:100%;
	display:flex;  
	flex-flow: row wrap;
	align-content: flex-start;	
}

.starfish-img {width:47%; margin-right:2%;}

.starfish-popup-container {width:47%;
   min-height: 400px; 
   height:auto !important; 
   height: 400px;}

/* This code contols entry animation of the Starfish and it's arms */

g#Centre {
	opacity:0;
	-webkit-animation: fadein 2s ease-in forwards; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s ease-in forwards; /* Firefox < 16 */
        -ms-animation: fadein 2s ease-in forwards; /* Internet Explorer */
         -o-animation: fadein 2s ease-in forwards; /* Opera < 12.1 */
            animation: fadein 2s ease-in forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.starfish-img path.st3 {
	opacity:0;
	-webkit-animation: fadein 2s ease-in 0.5s forwards; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s ease-in 0.5s forwards; /* Firefox < 16 */
        -ms-animation: fadein 2s ease-in 0.5s forwards; /* Internet Explorer */
         -o-animation: fadein 2s ease-in 0.5s forwards; /* Opera < 12.1 */
            animation: fadein 2s ease-in 0.5s forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.starfish-img path.st4 {
	opacity:0;
	-webkit-animation: fadein 2s ease-in 1s forwards; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s ease-in 1s forwards; /* Firefox < 16 */
        -ms-animation: fadein 2s ease-in 1s forwards; /* Internet Explorer */
         -o-animation: fadein 2s ease-in 1s forwards; /* Opera < 12.1 */
            animation: fadein 2s ease-in 1s forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.starfish-img path.st5 {
	opacity:0;
	-webkit-animation: fadein 2s ease-in 1.5s forwards; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s ease-in 1.5s forwards; /* Firefox < 16 */
        -ms-animation: fadein 2s ease-in 1.5s forwards; /* Internet Explorer */
         -o-animation: fadein 2s ease-in 1.5s forwards; /* Opera < 12.1 */
            animation: fadein 2s ease-in 1.5s forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.starfish-img path.st6 {
	opacity:0;
	-webkit-animation: fadein 2s ease-in 2s forwards; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s ease-in 2s forwards; /* Firefox < 16 */
        -ms-animation: fadein 2s ease-in 2s forwards; /* Internet Explorer */
         -o-animation: fadein 2s ease-in 2s forwards; /* Opera < 12.1 */
            animation: fadein 2s ease-in 2s forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.starfish-img path.st7 {
	opacity:0;
	-webkit-animation: fadein 2s ease-in 2.5s forwards; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s ease-in 2.5s forwards; /* Firefox < 16 */
        -ms-animation: fadein 2s ease-in 2.5s forwards; /* Internet Explorer */
         -o-animation: fadein 2s ease-in 2.5s forwards; /* Opera < 12.1 */
            animation: fadein 2s ease-in 2.5s forwards;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* This is the Starfish Mouseovers and Connected content styling */

g#Where, g#What, g#How, g#Who, g#Why {
	cursor:pointer;
}

g#Where:hover, g#What:hover, g#How:hover, g#Who:hover, g#Why:hover {opacity:0.8;}

.starfish-popup-what, .starfish-popup-where, .starfish-popup-how, .starfish-popup-who, .starfish-popup-why, starfish-text {
	display:none;
	background: #5f7e23;
	padding: 5px 10px 5px;
	color: #fff;
	border-radius: 10px;
	margin-top:15%;
	margin-bottom:20px;
}

.starfish-text h3 {
	color:#FFF;
	margin-top:0;
}

.starfish-text a {text-decoration:underline; color:#FFF;}
.starfish-text a:hover {text-decoration:underline; color:#ddb426;}

/* Map Button */
/* Used to highlight the enhance functionality of iframe maps */ 

.mapbutton, .mapbutton:visited {background:#5f7e23; border-radius:3px; padding:5px 10px; color:#FFF; text-decoration:none; display:inline-block; margin:10px 0 10px;}
.mapbutton:hover {background:#ca9233; color:#FFF;}

/* On Page Button */
/* Used to highlight the enhance items that are more than just text links  */ 

.pagebutton, .pagebutton:visited {background:#5f7e23; border-radius:3px; padding:5px 10px; color:#FFF; text-decoration:none; display:inline-block; margin:10px 0 10px;}
.pagebutton:hover {background:#ca9233; color:#FFF;}

/* Environmental Values Page Formatting */
h3.EV {
	display: block;
	border-bottom: none;
	padding: 0;
	margin-top:60px;
}

/* Map Page Formatting */
/* Clear any default styles */
ul.Map_Container, ul.Map_Container li {
	list-style:none;
	margin:0;
	padding:0;
	text-indent:0;
}
	
ul.Map_Container li:before, li {
	list-style:none;
	padding-right:0;
	content:"";
}

ul.Map_Container {
	width:100%;
	display:flex;  
	flex-flow: row wrap;
	align-content: flex-start;		
}

li.Map_item {
	width:28%;
	padding:0 15px 0!important;
	text-align:center;
}

li.Map_item img {width:100%; display:block; margin:0 auto;}

li.Map_item h3.EV {
	display: block;
	border-bottom: none;
	padding: 0;
	margin: 10px 0 10px;
	line-height: 1.1;
}

li.Map_item p {max-width:90%; margin: 0 auto;}

@media (max-width:715px) {
	li.Map_item {width:41%;}
}

/* iframe Map Elements */
/* Using Global Content Blocks for maps - just some custom styling to space them correctly */

.GlobalContentBlock h2 {margin-bottom:0;}

.GCB-Map-Container {margin-bottom:20px; border:1px solid #CCC; padding:5px 7px 7px 5px;}

.GCB-Map-Container iframe {border:1px solid #ccc;}

/* Process Chart */

.process-cont {
	width:100%;
	position:relative;
	margin:10px 0 20px;
	min-height: 1000px; 
   	height:auto !important; 
   	height: 1000px;
	}

#ProcessOverlay {
	position: absolute;
	top: 0%;
	text-align: center;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background: rgba(0, 0, 0, 0.3);
	display:none;
	z-index:1;
}

.process-cont .inner {
	position: relative;
	width: 70%;
	text-align: center;
	display: block;
	margin: 40% auto 0;
	background: rgba(255,255,255,0.95);
	padding: 10px;
	border: 2px solid #1d8594;
	border-radius: 10px;
	box-shadow: 0 0 10px #000;
	z-index:2;
	}
	
	@media (max-width:768px) {
	
	.process-cont .inner {
	margin: 20% auto 0;
	}
}
	
g#system-understanding, g#grazing, g#sediment, g#management, g#wetland, g#fishway, g#management2, g#planning, g#delivery, g#monitoring, g#review {cursor:pointer;}

g#system-understanding:hover .st5, g#grazing:hover .st5, g#sediment:hover .st5, g#management:hover .st5, g#wetland:hover .st5, g#fishway:hover .st5, g#management2:hover .st5, g#planning:hover .st5, g#delivery:hover .st5, g#monitoring:hover .st5, g#review:hover .st5 {fill:#25b5c9;}

#systemunderstandingtxt, #grazingtxt, #sedimenttxt, #managementtxt, #wetlandtxt, #fishwaytxt, #management2txt, #planningtxt, #deliverytxt, #monitoringtxt, #reviewtxt {display:none; margin:0 10px 10px;}

#CloseProcess {position:absolute; top:-20px; right:-20px; width:40px; height:40px; text-indent:-9999px; background:url(../img/AAcloseicon.png) center center no-repeat; background-size:contain;}

#CloseProcess:hover {cursor:pointer; top:-25px; right:-25px; width:50px; height:50px;}

.process-cont .inner h2 {margin:5px;}

#systemunderstandingtxt a:hover, #grazingtxt a:hover, #sedimenttxt a:hover, #managementtxt a:hover, #wetlandtxt a:hover, #fishwaytxt a:hover, #management2txt a:hover, #planningtxt a:hover, #deliverytxt a:hover, #monitoringtxt a:hover, #reviewtxt a:hover {text-decoration:underline; color:#000;}

/* Gives map images a nice border and a bit of padding */
img.map-image {border:1px solid #CCC}

/* Lets add some margin above the comments box */
#comments {margin-top:2.5em;}

/* Two Column Flex Box */

.TwoColFlex {
	width:100%;
	display:flex;  
	flex-flow: row wrap;
	align-content: flex-start;	
	clear:both;
	margin-bottom:20px;
	}

.TwoColFlexItem {
	width:47%;
}

@media (max-width:600px) {
	.TwoColFlexItem {width:100%; display:block;}
}


/* TARGETS PAGE */

/*Setting a height for the table so when there isn't a lot of text the button doesn't get overlapt */

.Table-Container-Outer {position:relative;}

#Targets-table td {height:70px; position:relative;}

@media (max-width:600px) {
	#Targets-table td {padding-bottom: 20px;}
}

td.InfoContainer, th.InfoContainer {position:relative;}

div.InfoButton {position:absolute; bottom:0; right:0; background:#0F464E; color:#FFF; cursor:pointer; padding:2px 5px 2px 10px; border-top-left-radius:6px;}

div.InfoButton:hover {background:#1b7886;}

th div.InfoButton {position:absolute; bottom:0; right:0; background:#FFF; color:#0F464E; cursor:pointer; padding:2px 5px 2px 10px; border-top-left-radius:6px;}

th div.InfoButton:hover {background:#1b7886; color:#FFF;}

div.InfoButton {font-size:11px;}

.Table-Container-Outer .inner {
	position: relative;
	width: 70%;
	text-align: center;
	display: block;
	margin: 40% auto 0;
	background: rgba(255,255,255,0.8);
	padding: 10px;
	border: 2px solid #1d8594;
	border-radius: 10px;
	box-shadow: 0 0 10px #000;
	z-index:2;
	}
	
	@media (max-width:768px) {
	
	.Table-Container-Outer .inner {
	margin: 20% auto 0;
	}
}

#DIN-TXT, #DIN-TXT2, #SED-TXT, #PART-TXT, #PEST-TXT, #PEST-TXT2, #BMP-TXT, #GC-TXT, #RIP-TXT, #WETLANDS-TXT, #YR-TXT {display:none;}

/* Video Formating */

iframe.youtube {width:100%!important; height:450px!important; border: 6px solid #CCC!important;}

/* Current Trends */
/* Here we're adding some classes to the table to highlight individual cells */

.Status-Table tr {border-bottom:2px solid #FFF!important;}

td.status {text-align:center!important;}
td.status-very-poor {background:#f7000f!important; text-align:center!important; color:#FFF!important;}
td.status-poor {background:#fbc301!important; text-align:center!important;}
td.status-moderate {background:#feff00!important; text-align:center!important;}
td.status-good {background:#97d34e!important; text-align:center!important;  color:#FFF!important;}
td.status-very-good {background:#208200!important; text-align:center!important;  color:#FFF!important;}

td.status-mixed-good-poor {
	text-align:center!important;
	color:#FFF!important;
	background: rgb(32,130,0)!important; /* Old browsers */
	background: -moz-linear-gradient(left, rgba(32,130,0,1) 0%, rgba(251,195,1,1) 100%)!important; /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(32,130,0,1) 0%,rgba(251,195,1,1) 100%)!important; /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(32,130,0,1) 0%,rgba(251,195,1,1) 100%)!important;/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#208200', endColorstr='#fbc301',GradientType=1 )!important; /* IE6-9 */
}

td.status-species {text-align:center!important; background:#CCC!important;}

ul.status-key, ul.status-key li {list-style:none!important; text-indent:0!important; padding:0!important; margin:0!important}

li.swatch-very-good {border-left:20px solid #208200;}
li.swatch-good {border-left:20px solid #97d34e;}
li.swatch-moderate {border-left:20px solid #feff00;}
li.swatch-poor {border-left:20px solid #fbc301;}
li.swatch-very-poor {border-left:20px solid #f7000f;}
li.swatch-species {border-left:20px solid #ccc;}

li.swatch-very-good:before, li.swatch-good:before, li.swatch-moderate:before, li.swatch-poor:before, li.swatch-very-poor:before, li.swatch-species:before {content:""!important;}

ul.status-key {margin-bottom:10px!important; display:flex; flex-flow: row wrap; align-content: flex-start;	}

ul.status-key li {margin-bottom:4px!important; width:30%;}

/* Comments */
/* Comments need to be hidden from view */

#commentform {display:none;}

/* Fix weird Z-index issue for the list on the background page */

ul.AckTable {position:relative; z-index:-1;}

/* Feedback Form Styling */

.gform_wrapper ul, .gform_wrapper ul li {list-style:none!important; margin:0; padding:0; text-indent:0; background-image:none!important;}

.page_content .gform_wrapper ul li:before {display:none;}

.gform_wrapper input[type=email], .gform_wrapper input[type=number], .gform_wrapper input[type=password], .gform_wrapper input[type=tel], .gform_wrapper input[type=text], .gform_wrapper input[type=url] {border:1px solid #000; margin:0;}

.gform_wrapper textarea {border: 1px solid #000;}

input.gform_button {
	display: inline-block;
font-weight: bold;
font-family: Arial, sans-serif;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 0 5px 5px 0;
line-height: 17px;*
float: left;
-webkit-box-shadow: inset 1px 0px 0px rgba(255, 255, 255, .3);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, .3);
padding: 7px 14px;
font-size: 14px;
border: 1px solid #e6bd4c;
background-image: linear-gradient(bottom, #FCCC73 0%, #FAE198 100%);
background-image: -o-linear-gradient(bottom, #FCCC73 0%, #FAE198 100%);
background-image: -moz-linear-gradient(bottom, #FCCC73 0%, #FAE198 100%);
background-image: -webkit-linear-gradient(bottom, #FCCC73 0%, #FAE198 100%);
background-image: -ms-linear-gradient(bottom, #FCCC73 0%, #FAE198 100%);
background-color: #FCCC73;
color: #754c00;
text-shadow: 1px 1px 0px #ffebb7;
filter: dropshadow(color=#ffebb7, offx=1, offy=1);
	}
	
.gform_wrapper {
	padding: 20px 20px 10px 20px;
	border: solid 1px #ccc;
	background: #f5f5f5;
	border-radius: 3px;
	box-shadow: 0 0 3px rgba(0, 0, 0, .3);
	}