/* ================ $template ================ */
/**
* Template HTML styles e.g. header, footer, structural styling for content - generic padding etc

*	1. Core
		HTML
		Body
		Container

*	2. Header
		
*	3. Content
		Spacing
		Columns
		Additional content styles
		
*	4. Content Templates

*/





/* ================ html / body / container ================ */
/* == html == */
html { height: 100%; }


/* == body == */
body{
	/*height: 100%;*/
	width: 1920px;
	height: 1080px;
	margin: 0 auto;
	-webkit-user-select: none;
	user-select: none;
}


/* == container == */
#container{
	width: 100%;
	height: 100%;
	position: relative;
}

/* main home page background */
.home{
	background: url(../images/background.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	background-size: cover;
}

/* kids home page background */
.kids{
	background: url(../images/background-kids.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	background-size: cover;
}

/* river home page */
.river{
	background: url(../images/background-river.svg) no-repeat 0 0;
	background-size: contain;
	position: relative;
}

.river-lowlight:before{
	width: 100%;
	height: 100%;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(255,255,255,.5);
}

.river .reset-page-link{
	position: absolute;
	left: 10px;
	bottom: 156px;
	opacity: 1;
	z-index: 11000;
}

.background-images img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.background-images .transparent{
	opacity: 0;
}








/* ================ header ================ */
/* == logo == */
/* main style */
header{ text-align: center; }

.logo{
	line-height: 1;
	font-size: 5em;
	display: inline-block;
	color: #fff;
	text-shadow: 0 0 6px rgba(0,0,0,.6);
	margin: 0 0 100px 0;
	padding: 15px 0;
	/*background: #fff none;
	border-right: solid 6px #d0e0b8;
	border-bottom: solid 6px #d0e0b8;
	-moz-box-shadow: 0 0 20px 5px #666;
	-webkit-box-shadow: 0 0 20px 5px #666;
	box-shadow: 0 0 20px 5px #666;*/
	position: relative;
	z-index: 10;
}

.river .logo{ margin-bottom: 20px; }

.kids .logo,
.kids .tag-line{
	color: #fff;
}

.logo:before{
	width: 100%;
	height: 4px;
	content: '';
	/*background: #ffe66a;*/
	background: #fff;
	box-shadow: 0 0 6px 0 rgba(0,0,0,.6);
	position: absolute;
	bottom: -5px;
	left: 0;
}

.tag-line{
	color: #fff;
	margin: 0;
	padding: 0;
	line-height: 1.3;
	text-shadow: 0 0 8px rgba(0,0,0,.7), 0 0 3px rgba(0,0,0,1);
	text-align: center;
}

footer .tag-line{
	width: 100%;
	position: absolute;
	bottom: 100px;
	font-size: 2em;
}

footer{
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 35px;
}

header .cool-fact{
	display-inline-block;
	position: absolute;
	top: 149px;
	left: 582px;
	padding: 20px;
	background: #373f52;
}

header .cool-fact h4{ margin-bottom: 0; }

footer .cool-fact{
	display: inline-block;
	padding: 20px;
	background: #373f52;
	position: absolute;
	left: 120px;
	bottom: 311px;
}

/*
.kids .logo{
	border-right: solid 6px #abc0ed;
	border-bottom: solid 6px #abc0ed;
}
*/
/* link style */
/*
.logo a{
	color: #485a43;
	text-decoration: none;
	padding: 70px 20px 20px 45px;
	display: block;
	background-image: none;
}

.kids .logo a{ background: none; } 

.logo a:visited{ color: #485a43; }

.logo a:hover{
	color: #d0e0b8;
	text-decoration: none;
	text-shadow: none;
}

.logo a:active,
.logo a:focus{
	margin: -10px 0 0 -10px;
}*/


/* == "back to start" button == */
.home-btn{
	width: 161px;
	height: 76px;
	/*width: 106px;
	height: 50px;*/
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 20000;
	text-align: right;
	padding: 10px 5px 0 0;
	/*text-indent: -9999px;*/
	background: url(../images/home-button.png) no-repeat 0 0 !important;
	background-size: contain !important;
	color: #fff;
	font-size: 1.3em;
	line-height: 1;
}

.home-btn,
.home-btn:visited,
.kids-body .home-btn,
.kids-body .home-btn:visited,
.home-btn:visited{ color: #fff; }


/* ================ content ================ */
/* == grid structure == */
.content-template [class*='ep-col'],
.page-content,
.additional-content{
	float: left;
	min-height: 25px;
}


/* == images == */
.page-content img,
.additional-content img,
.content-template img,
.content-template input[type='image']{
	width: 100%;
	max-width: 100%;
	height: auto;
	border: solid 10px #fff;
	box-shadow: 0 0 20px rgba(0,0,0,.4);
	margin: 0 0 10px 0;
	padding: 0;
}

.kids-body .page-content img,
.kids-body .additional-content img,
.kids-body .content-template img,
.kids-body .content-template input[type='image']{
	border-width: 4px;
}

.no-style-image img{
	border: none;
	box-shadow: none;
}


.content-template input[type='image'],
.content-template input[type='image']:active
.content-template input[type='image']:focus,
.content-template input[type='image']:hover{
	outline: none;
}

.no-scale-image,
.page-content .no-scale-image{
	width: auto;
	height: auto;
	max-width: none;
}


/* == styles for layouts that have both page content and additional content, eg Dashboard, 1st level with photo album groups == */
/* page content column */
.page-content{ padding: 20px 20px 30px 60px; }

/* additional content column */
.additional-content{ padding: 0 60px 30px 100px; }


/* == content templates == */
/* wrapper */
/*.content-template{ padding: 0 20px 0 60px; }*/

/* column padding */
.content-template [class*='ep-col']{ padding-right: 40px; }

/* styles for hard coded content templates */
.content-templates{ margin: 0 200px 40px 200px; }

.content-templates .content-template{
	margin: 0 30px 0 60px;
	padding: 0 0 40px 0;
}

.content-template .background{
	height: 20px;
	background: #ccc;
}


/* == single page layout (menu on left, content swaps out on right) == */
.plain-background{
	/*height: 100%;*/
	background: #fff;
}

.plain-background .std-modal-background{
	background: none;
	box-shadow: none;
}

#singlePageContent .alpha-header{ display: none; }


/* == data tables == */
#replaceMonitoringContent{ margin-top: 20px; }

.data-table{
	text-align: left;
	border: solid 2px #485a43;
}

.dashboard-data{
	display: inline-block;
	vertical-align: top;
	margin: 0 20px 40px 0;
	border-spacing: 0;
}

#replaceMonitoringContent .dashboard-data{ margin: 0; }

.data-table *{
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

.data-table tr:nth-child(even){ background-color: rgba(226,236,211,1); }

.data-table th,
.data-table td{
	border: solid 1px #485a43;
	padding: 5px 8px;
}

.blank-modal .data-table{
	border: solid 5px #fff;
	margin: 0 auto;
	display: block;
	background: #fff;
}

.unit-definitions{
	font-size: .9em;
}


/* == graphs == */
.graph{ text-align: center; }

.graph img{ width: 800px; }


/* == replace content inside modal == */
#replaceContent{ 
	margin: 40px 0 0 0;
}


/* blank modal links == */
.blank-modal-link img{
	width: 90%;
	max-width: 90%;
	height: auto;
	border: none;
	box-shadow: none;
	margin: 0 auto 40px;
	padding: 0;	
}





/* ================ video placeholder ================ */
.video-placeholder{
	width: 330px;
	height: 253px;
	background: url(../images/video-placeholder.png) no-repeat 50% 50%;
	background-size: contain;
}