/* ================ $modal ================ */
/* ================ open effects ================ */
/* == body effects when modal is opened == */
/**
*	Tried using -webkit-filter: blur(3px) grayscale(.7); but it made the modals too slow to open
*/
.modal-is-open #container{ opacity: .9; }


/* == transitions == */
.modal-is-open #container,
.ui-widget-overlay{
	transition: all .3s ease-out;
}





/* ================ overlay ================ */
.ui-widget-overlay{
	position:fixed; 
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(0,0,0,.75);
}

.ui-dialog + .ui-widget-overlay{
	z-index: 500;
}





/* ================ generic modal styles ================ */
/* == dialog title == */
/* wrapper */
.ui-dialog-titlebar{
	text-align: right;
}

/* title */
.ui-dialog-title{ display: none; }

/* close & drag buttons */
.ui-dialog-titlebar-close,
.ui-draggable .ui-dialog-titlebar:before{
	width: 72px;
	height: 72px;
	border: solid 5px #fff;
	box-shadow: 0 0 14px rgba(0,0,0,.5);
	border-radius: 36px;
	-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

.ui-dialog-titlebar-close{
	display: inline-block;
	background: url(../images/magnifying-glass-minus.svg) no-repeat 50% 50%, -webkit-linear-gradient(top, rgba(226,236,211,1) 0%,rgba(194,209,170,1) 100%);
}

.ui-dialog-titlebar:before{
	content: '';
	background: url(../images/move-hand.svg) no-repeat 50% 50%, -webkit-linear-gradient(top, rgba(226,236,211,1) 0%,rgba(194,209,170,1) 100%);
	background-size: contain;
	position: absolute;
	right: 90px;
	cursor: pointer;
}

.kids .ui-dialog-titlebar-close,
.kids-body .ui-dialog-titlebar-close{
	/*background: url(../images/magnifying-glass-minus-kids.svg) no-repeat 50% 50%, -webkit-linear-gradient(top,  rgba(235,240,251,1) 0%,rgba(158,181,235,1) 100%);*/
	background: url(../images/magnifying-glass-minus-kids.svg) no-repeat 50% 50%, -webkit-linear-gradient(top, rgba(235,240,251,.5) 0%,rgba(55,63,82,1) 100%);
	background-color: #fff;
}

.kids .ui-dialog-titlebar:before,
.kids-body .ui-dialog-titlebar:before{
	background: url(../images/move-hand-kids.svg) no-repeat 9px 6px, -webkit-linear-gradient(top, rgba(235,240,251,.5) 0%,rgba(55,63,82,1) 100%);
	background-size: contain;
	background-color: #fff;
}

.blank-modal .ui-dialog-titlebar-close{ top: 0 !important; }



/* == dialog outer content wrapper == */
/**
*	"overflow" changes how the dialog opens.
	If set to overflow:visible, then the dialog opens to whatever height the content is at and then resizes the width.
	If set to overflow:hidden, the default setting, then dialog opens at final width and height and doesn't change size.
*/
/*.ui-widget-content{ padding: 0 0 45px 0; }*/


/* == content wrappers == */
/* standard background for text, feeds etc */
.std-modal-background{
	height: 100%;
	/*overflow-y: scroll;*/
	box-shadow: 0 0 30px 0 #000;
	background: -webkit-linear-gradient(-45deg,  rgba(238,244,230,1) 0%,rgba(255,255,255,1) 75%);
	position: relative;
	z-index: 1;
}

.kids-1st-level .std-modal-background,
.kids-body .std-modal-background{
	background: -webkit-linear-gradient(top,  rgba(223,230,248,1) 0%,rgba(255,255,255,1) 75%);
}





/* ================ specific modal styles ================ */
/* == 1st level modal styles == */
/**
*	Padding gives space around the modal content so the drop shadow doesn't get cut off by the dialog's overflow:hidden
	and the move and close buttons can be position bottom right and overlap the content background slightly.
*/
/* == adult & kid 1st level == */
.adult-1st-level,
.kids-1st-level{
	max-width: 1720px;
	max-height: 880px;
	height: 880px !important;
	padding: 20px 30px 30px 20px;
}
/* modal wrapper */
/*
.adult-1st-level,
.kids-1st-level{
	max-height: 480px !important;
	overflow-y: scroll !important;
	outline: solid 10px #f00;
}
*/
/* outer container */
.adult-1st-level .modal-outer-container,
.kids-1st-level .modal-outer-container,
.adult-2nd-level .modal-outer-container{
	width: 100% !important;
	height: 100% !important;
}

/* title bar */
.adult-1st-level .ui-dialog-titlebar,
.adult-2nd-level .ui-dialog-titlebar,
.photos-1st-level .ui-dialog-titlebar,
.kids-1st-level .ui-dialog-titlebar,
.simple-modal .ui-dialog-titlebar,
.blank-modal .ui-dialog-titlebar{
	position: absolute;
	z-index: 10;
}

.adult-1st-level .ui-dialog-titlebar,
.adult-2nd-level .ui-dialog-titlebar,
.kids-1st-level .ui-dialog-titlebar,
.simple-modal .ui-dialog-titlebar{
	bottom: 0;
	right: 5px;
}

.blank-modal .ui-dialog-titlebar{
	top: 0;
	right: 5px;
}

.photos-1st-level .ui-dialog-titlebar{
	position: absolute;
	bottom: 0;
	right: 10px;
	z-index: 1000;
}

.highlight-box{
	display: inline-block;
	margin: 40px 0;
	background: #f6f9f2;
	border: solid 2px #fff;
	box-shadow: 0 0 6px rgba(0,0,0,.6);
	border-radius: 7px;
	padding: 15px;
}

p.highlight-box a{
	/*padding-left: 30px;*/
	/*font-family: "IndieFlower", "Brush Script MT", cursive;*/
	font-family: "Comic Sans MS", cursive, sans-serif;
	text-decoration: underline;
}

/* inner content*/
.adult-1st-level .std-modal-background .std-modal-background,
#replaceTooHotFish .std-modal-background,
.std-modal-background.cold-fish-photos{
	height: auto;
	background: none;
	position: relative;
	box-shadow: none;
}

#replaceTooHotFish{ padding: 20px 0; }


/* == 2nd level modal styles == */
.photos-1st-level{ margin-top: 200px; }

.adult-2nd-level{
/* 	The Multi sensor unit page inside of real time monitoring breaks with these rules.
	max-height: 700px;
	height: 700px !important; */
	padding: 20px 30px 30px 20px;
}

.adult-2nd-level .ui-dialog-titlebar{
	width: 40%;
	cursor: pointer;
}

.adult-2nd-level .alpha-header{ background: url(../images/adult-header-level-2-background.jpg) no-repeat 50% 50%; }

/* == blank modal == */
.blank-modal{
	z-index: 1000;
}

.blank-modal .std-modal-background{
	box-shadow: none;
	background: none;
	position: relative;
	z-index: 1;
}

.blank-modal .page-content{
	padding: 0;
	float: none;
}

.blank-modal .page-content p{
	padding: 0;
	margin: 0 0 10px 0;
	/*text-align: center;*/
}

.blank-modal .alpha-header,
.blank-modal .visibily-hidden{
	display: none;
}


/* == simple modal == */
.simple-modal{ padding: 20px 30px 30px 20px; }

.simple-modal .alpha-header{ display: none; }


/* == secondary modal classes == */
.secondary-modal{ background: rgba(0,0,0,.35); }

/*
.close,
.close:visited{
	color: #fff;
	position: relative;
	z-index: 150;
}

.ui-widget-overlay{
	background: rgba(0,0,0,.65);
	position: absolute;
	top: 0;
	left: 0;
}

.ui-dialog-buttonpane{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10000;
}
*/





/* ================ $buttons ================ */
.close-2nd-level-button{
	position: absolute;
	bottom: 10px;
	right: 50px;
	z-index: 5000;
	background-image: url(../images/magnifying-glass-minus.svg);
}





/* ================ map ================ */
.map-wrapper{
	width: 940px;
	height: 820px;
	padding: 20px 20px 90px 20px;
	margin: 0 auto;
	background: #fff url(../images/map-legend.png) no-repeat 50% 98%;
}





/* ================ video ================ */
/* == individual videos == */
/* == video wrapper == */
.video-wrapper{
	width: 100%;
	height: 0;
	padding-bottom: 57%;
	border: solid 10px #fff;
	margin: 0 auto;
	position: relative;
}

.video-wrapper video{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
}

/* citizen monitoring */
.citizen-monitoring-video{
	width: 940px;
	margin: 0 auto;
}

.citizen-monitoring-video .video-wrapper{ padding-bottom: 55%; }


/* enough light */
.trout-eating,
.kids-eating-blindfold,
.caddis-fly-living,
.mayfly-grazing,
.net-building-caddis-fly,
.video-fish,
.video-stone-fly,
.video-black-fly,
.video-may-fly-stream,
.video-may-fly-dish,
.video-leuckedod-spawn,
.video-sandhill-crane,
.video-chorus-frog,
.video-mayfly-hatch,
.video-heron,
.video-dragonfly{
	width: 660px;
	margin: 0 auto;
	background: #000;
}

.video-salamander{
	width: 560px;
	margin: 0 auto;
	background: #000;
}

.trout-eating .video-wrapper,
.kids-eating-blindfold .video-wrapper,
.caddis-fly-living .video-wrapper,
.mayfly-grazing .video-wrapper,
.net-building-caddis-fly .video-wrapper,
.video-fish .video-wrapper,
.video-stone-fly .video-wrapper,
.video-black-fly .video-wrapper,
.video-may-fly-stream .video-wrapper,
.video-may-fly-dish .video-wrapper,
.video-leuckedod-spawn .video-wrapper,
.video-dragonfly .video-wrapper{
	padding-bottom: 72.5%;
	margin: 0 auto;
}

.video-sandhill-crane .video-wrapper,
.video-chorus-frog .video-wrapper,
.video-heron .video-wrapper{
	padding-bottom: 54.5%;
	margin: 0 auto;
}

.video-salamander .video-wrapper,
.video-mayfly-hatch .video-wrapper{
	padding-bottom: 65%;
	margin: 0 auto;
}

.video-dragon-fly{
	width: 374px;
	margin: 0 auto;
	background: #000;
}

.video-dragon-fly .video-wrapper{
	padding-bottom: 55.5%;
	margin: 0 auto;
}




/* ================ dashboard content ================ */
#replaceDashboardContent .alpha-header{
	background: transparent;
	font-size: 2em;
	padding: 20px 20px 0 20px;
	margin: 0;
}

#replaceDashboardContent .alpha-header{
	color: #485a43;
	text-shadow: none;
}

.kids #replaceDashboardContent .alpha-header{ color: #3d81a7;	}

#replaceDashboardContent .alpha-header:before,
#replaceDashboardContent .alpha-header:after{
	display: none;
}

#replaceDashboardContent .page-content{ padding: 10px 0 10px 20px; }

#replaceDashboardContent .content-template [class*="ep-col"]{
	padding-right: 20px;
}

#dashboard-content .get-involved-link{ margin-bottom: 10px; }




/* ================ graphs ================ */
.typical-graph-wrapper{ position: relative; }

/*.typical-graph-image,*/
.blank-modal .flow-summer,
.blank-modal .flow-winter,
.blank-modal .water-temp-summer,
.blank-modal .water-temp-winter,
.blank-modal .dissolved-oxygen-summer,
.blank-modal .dissolved-oxygen-winter,
.blank-modal .ph-summer,
.blank-modal .measured-flow,
.blank-modal .measured-water-temp,
.blank-modal .measured-dissolved-oxygen,
.blank-modal .measured-ph,
.blank-modal .measured-specific-conductance,
.blank-modal .measured-water-clarity{
	width: 710px;
	height: 650px;
	overflow: visible;
	margin: 0 auto;
	padding: 20px 30px;
	text-align: left;
	background: #fff;
}

.blank-modal p.typical-graph-image{
	color: #fff;
	text-align: left;
}

/* == typical data links == */
.typical-data-link{
	position: absolute;
	opacity: .9;
}

.typical-data-link:hover,
.typical-data-link:focus,
.typical-data-link:active{
	opacity: 1;
	color: transparent;
	text-shadow: none;
}


.flow-summer-link{
	top: 160px;
	left: 237px;
}

.flow-winter-link{
	bottom: 150px;
	left: 408px;
}


.temp-summer-link{
	top: 116px;
	left: 350px;
}

.temp-winter-link{
	bottom: 143px;
	left: 80px;
}


.do-summer-link{
	top: 251px;
	left: 360px;
}

.do-winter-link{
	top: 170px;
	left: 80px;
}


.ph-summer-link{
	top: 185px;
	left: 347px;
}





/* ================ 1st level modals - lift content above header image ================ */
.what-makes-up-the-east-canyon-creek-watershed-,
.how-do-people-impact-east-canyon-creek-,
.real-time-monitoring .additional-content,
.build-a-bug .additional-content{
	margin-top: -100px;
	position: relative;
	z-index: 100;
}





/* ================ kids - how oxygen affects animals ================ */
.how-oxygen-affects-animals .alpha-header{ display: none; }

.enough-oxygen #replaceContent{ margin: 0; }





/* ================ about the watershed ================ */
.adult-1st-level .view-the-watershed-map.std-modal-background{
	width: 100%;
	height: 732px;
	overflow: hidden;
}

/* hide divs */
.view-the-watershed-map .alpha-header,
.view-the-watershed-map .visibily-hidden,
.view-the-watershed-map .page-content{
	display: none;
}

/* page content padding */
/*.view-the-watershed-map .page-content{ padding: 0; }*/

/* map wrapper */
/*.view-the-watershed-map .map-wrapper{ padding: 0; }*/

.view-the-watershed-map .additional-content{
	width: 100%;
	height: 100%;
	padding: 0;
}





/* ================ replace content in 1st level modal ================ */
.what-is-dissolved-oxygen- .std-modal-background,
.build-a-bug .std-modal-background,
.stormwater-activity .std-modal-background{
	box-shadow: none;
	background: none;
	overflow: visible;
}

.what-is-dissolved-oxygen- #replaceContent,
.stormwater-activity #replaceContent{
	margin: 0;
	padding: 0 0 0 10px;
}

.what-is-dissolved-oxygen- #replaceContent .page-content,
.build-a-bug #bugReplaceContent .page-content,
.stormwater-activity #replaceContent .page-content{
	padding: 0;
}

.what-is-dissolved-oxygen- #replaceContent .visibily-hidden,
.build-a-bug #bugReplaceContent .visibily-hidden{
	display: none;
}

.stormwater-activity #replaceContent .alpha-header{
	display: none;
}

.replace-content-template{
	width: 650px;
}

.replace-content-template h1,
.replace-content-template h2,
.replace-content-template h3,
.replace-content-template h4{
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-weight: bold;
}

.replace-content-template p,
.replace-content-template li{
	font-family: "Comic Sans MS", cursive, sans-serif;
}




/* ================ build a bug ================ */
.blank-modal .native-habitat{
	width: 1700px;
	height: 880px;
	margin: 0 auto;
}

.build-a-bug-native-habitat{
	width: 100%;
}





/* ================ vertical scroll bars ================ */
.stone-fly.std-modal-background,
.black-fly.std-modal-background,
.may-fly.std-modal-background,
.trout.std-modal-background{
	overflow-y: scroll;
}





/* ================ kids temperature - cold fish photos ================ */
.cold-fish-photos .page-content{
	/*width: 55%;
	float: left;
	margin: 0 10% 0 0;
	padding: 0;*/
	float: none;
}

.cold-fish-photos .additional-content{
	/*width: 35%;
	float: right;*/
	margin: 0;
	padding: 0;
	float: none;
}

.cold-fish-photos .group-wrapper{
	width: auto;
	height: auto;
	float: none;
	display: inline-block;
	background: #f6f9f2;
	border: solid 2px #fff;
	box-shadow: 0 0 4px rgba(0,0,0,.3);
	border-radius: 5px;
	position: relative;
	padding: 10px 10px 10px 60px;
	margin: 0 0 0 50px;
	text-decoration: none;
}

.cold-fish-photos .group-wrapper:before{
	width: 75px;
	height: 75px;
	left: -20px;
	background: transparent url(../images/photo-tour-icon-sm.png) no-repeat 0 0;
	background-size: contain;
	-webkit-transform: rotate(-15deg);
	z-index: 5000;
	border: none;
	box-shadow: none;
}

.cold-fish-photos .group-wrapper:after{ display: none; }

.cold-fish-photos .group-title{
	width: auto;
	height: auto;
	float: none;
	display: inline-block;
	color: #f00;
	position: relative;
	top: 0;
	left: 0;
	-webkit-transform: rotate(0deg);
	padding: 0;
	margin: 0;
	background: none;
	color: #373f52;
	font-family: "Comic Sans MS", cursive, sans-serif;
}

.cold-fish-photos .group-wrapper:hover .group-title{
	background: transparent;
	color: #373f52;
}

.cold-fish-photos .group-thumbnail{ display: none; }

.cold-fish-photos p{
	clear: both;
}