/*
*	The main MesoWest Style Sheet
*
*	October 2015
*	Author: Joe Young;
*	Email: joe.young@utah.edu;
*
*/
*, *:before, *:after {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
 
html,body {
	font-family:"Open Sans",arial,'Helvetica Neue',sans-serif !important;
	width:100%;
	height:100%;
	
}
/*html.noscroll {
	overflow:hidden;
}*/

html.noscroll
{
    position: fixed; 
    width: 100%;
}
html.noscroll.withscrollbar {
	overflow-y:scroll;
}
body.noscroll {
	position:fixed;
}
body {
	top:0; 
	background-color:#F5F5F5;
	position:absolute;
	margin:0;
	padding:55px 0 0 0;
	font-weight:300;
}
body.noNav {
	padding:0;
}

/*
*	HYPERLINKS
*	
*/
a {
 	color:#01579B;
 	text-decoration:none;
}

a:hover {
	color:#03A9F4;
	text-decoration:underline;
}

/*
*	PRIMARY NAVIGATION ENTITIES
*	
*/
header {
 	background-color:#B71C1C;
 	padding-top:0;
 	display:block;
 	color:#FFF;
 	clear:both;
 	position:fixed;
 	left:0;
 	font-weight:400;
 	font-size:1.15em;
 	height:55px;
 	width:100%;
 	top:0;
 	z-index:10000; /*this is super high, but just below the blanket utility*/
 	line-height:55px;
 	box-shadow: 1px 2px 3px rgba(0,0,0,.3);
 }
 header img {
 	/* This is the application logo */
 	height:50px;
 	
 }
 header a, .header-clear-inline a {
 	display:inline-block;
 	width:120px;
 	text-align: center;
 	color:#FFF;
 	line-height:55px;

 	
 }
 header a.icon-menu, .header-clear-inline a.icon-menu {
 	/*the dropdown bars*/
 	width:70px;
 }
 header a.applogo {
 	width:auto;
 	padding-right:15px;
 }
 header a.applogo:hover {
 	background-color: transparent;
 }

 header a:hover, header a:active, header a:focus {
 	color:#FFF;
 	text-decoration:none;
 	background-color:#D50000;
 }
 header .service_logo {
 	height:50px;
 }
 header .nav-dropdown {
 	position:fixed;
 	top:55px;
 	left:0;width:100%;
 	color:#000;
 	height:500px;
 	background-color:#FFF;
 	overflow:auto;
 	display:none;
 	text-align:center;
 }
 header .nav-dropdown a {
 	color:#000;
 	display:block;
 	width:100%;
 	text-align:center;
 	font-weight: 600;
 }
 header .nav-dropdown a:hover {
 	background-color:#ddd;
 }
 header .actionitems{
 	/*	A right-justified div that the nav.js will display as long as it fits
 	*/
 	float:right;
 	height:55px;
 }
 .header-clear-inline {
 	text-align:left;
 	background-color:rgba(0,0,0,.2);
 	padding-top:0;
 	display:block;
 	color:#FFF;
 	text-shadow:none;
 	clear:both;
 	overflow:auto;
 	position:relative;
 	left:0;
 	font-weight:400;
 	font-size:1.15em;
 	height:55px;
 	width:100%;
 	top:0;
 	line-height:55px;
 }
 .header-clear-inline img {
 	height:50px;

 }
.blanket {
 	/*blanket is a div that covers absolutely everything*/
 	width:100%;
 	height:100%;
 	position:fixed;
 	top:0;
 	left:0;
 	z-index: 10001;
 	opacity:.2;
	background-color: #000;

 }
.blanket .link_popup {
 	position:fixed;
 	top:55px;
 	width:300px;
 	max-width:100%;
 	background-color: #fff;
 	min-height:40px;
 	box-shadow: 2px 2px 10px #444;
 	z-index:5;
 	color:#000;
 	right:0;
 	padding:10px;
 }
 .nav-dropdown {
 	position:fixed;
 	top:55px;
 	right:0;
 	z-index:10002;
 	background-color:#FFF;
 	min-width:300px;
 	min-height:80px;
 	box-shadow: 2px 2px 4px rgba(0,0,0,.5);
 }



.transitional {
	/*
	*	All the possible styles to make an element have nice, gpu-enhanced css animations
	*/
	-webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    transition-delay: 0.1s;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.show-drawer {
	visibility: visible;
	-webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
}
.show-drawer .wrapper {
	display:block;
}
.hide-drawer { 
	visibility: hidden;
    -webkit-transform: translateX(-241px);
    -moz-transform: translateX(-241px);
    -ms-transform: translateX(-241px);
    -o-transform: translateX(-241px);
    transform: translateX(-241px);
}
.hide-drawer .wrapper {
	display:none;
	/*The downside of this is that their scroll position gets reset.*/
}
#drawer {
	position:fixed;
	top:0;
	left:0;
	width:240px;
	background-color:#FFF;
	z-index: 100024;
	overflow-y:auto;
	-webkit-overflow-y-scrolling: touch;
	color: #000;
	height:100%;
	padding:0;
	box-shadow: 5px 0px 6px rgba(0,0,0,.2);

	/* Motion CSS -  in additino to .transitional*/
	-webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    transition-property: transform;
	/*
	webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);*/

    
    /*And the styles to disengage*/
    
}
#drawer .wrapper {
	position:relative;
	min-height:100%;
	padding-bottom:130px;
}
#drawer a, #drawer a.hasmore .hmddL {
	display:block;
	position:relative;
	padding:10px 0 10px 20px;
	color:#333;
	font-size:.9em;
	font-weight:600;
	-webkit-transition-property: color background-color;
    -moz-transition-property: color background-color;
	transition-proprty: color, background-color;
	-webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
	transition-duration: .2s;
}
#drawer a.hasmore .hmddL {
	position:absolute;
	right:0;
	top:0;
	font-size: 1em;
	width:60px;
	padding:10px;
	background-color:#FFF;
	text-align:center;
}
#drawer a.hasmore a.hmddL:hover {
	background-color: #999;
	color:#FFF;
}
/*#drawer a.hasmore:hover .hmddL {
	background-color: inherit;
}*/
#drawer .menu-level-1 a {
	padding-left:40px;
	color:#777;
}
#drawer .menu-level-2 a {
	padding-left:60px;
	color:#777;
}
#drawer a:hover, #drawer a:hover .hmddL {
	color: #000;
	background-color: #ccc;
}
#drawer a .icon-up-open {
	color:#bbb;
}
#drawer a:hover .icon-up-open {
	color: #eee;
}
@media screen and (min-width:700px){
	/* this is for the special circumstance where the drawer is to be kept visible in all but the most extreme situations */
	body.smallAutoDrawer #drawer.hide-drawer {
		visibility:visible;
		-webkit-transform: translateX(0px);
	    -moz-transform: translateX(0px);
	    -ms-transform: translateX(0px);
	    -o-transform: translateX(0px);
	    transform: translateX(0px);
	}
	body.smallAutoDrawer .hide-drawer .wrapper {
		display:block;
	}
	
	body.smallAutoDrawer {
		padding-left:240px;
	}
	
	body.smallAutoDrawer header {
		padding-left: 280px;
	}
	body.smallAutoDrawer .icon-menu {
		/* no need to see the menu dropdown icon */
		display:none;
	}
}
@media screen and (min-width: 950px) {
	/*	
		Drawer and title modifications for larger screens!
	*/
	#drawer.hide-drawer {
		visibility:visible;
		-webkit-transform: translateX(0px);
	    -moz-transform: translateX(0px);
	    -ms-transform: translateX(0px);
	    -o-transform: translateX(0px);
	    transform: translateX(0px);
	}
	.hide-drawer .wrapper {
		display:block;
	}
	
	body {
		padding-left:240px;
	}
	
	header {
		padding-left: 280px;
	}
	.icon-menu {
		/* no need to see the menu dropdown icon */
		display:none;
	}

	body.noAutoDrawer {
		padding-left:0;
	}
	body.noAutoDrawer header {
		padding-left:0;
	}
	body.noAutoDrawer .icon-menu {
		display:inline-block;
	}
	body.noAutoDrawer #drawer.hide-drawer {
		visibility:hidden;
		-webkit-transform: translateX(-241px);
	    -moz-transform: translateX(-241px);
	    -ms-transform: translateX(-241px);
	    -o-transform: translateX(-241px);
	    transform: translateX(-241px);

	}
	body.noAutoDrawer .hide-drawer .wrapper {
		display:none;
	}
} /*end of larger screens*/
@media screen and (max-device-width: 500px) {
	header {
		padding:0px;
	}
}
#drawer .wrapper .foot {
	font-size:13px;
	padding:30px;
	border-top:1px solid #ddd;
	position:absolute;
	bottom:0;
	height:100px;
	margin:0 30px;
	width:180px;
	text-align:center;

}
.form-control {
	font-weight:400;
}
footer {
 	color:#444;
 	clear:both;
 	overflow:hidden;
 	padding:30px 15px 10px 15px;
 	font-size:.8em;
 	line-height:1.6em;
 }
 footer a {
 	color:rgba(0,0,0,.9);
 	line-height:2em;

 }
 table {
 	border-collapse:collapse;
 	border-right:1px solid #fff;
 	border-top:1px solid #fff;
 	width:100%;
 }
 table th {
 	background-color:#B0BEC5;
 }

table.striped tr:nth-child(odd) td {
	background-color:#eee;
}
 table tr td, table th {
 	border-left: 1px solid #fff;
 	border-bottom:1px solid #fff;
 	padding:5px;
 }
 .content {
 	padding:20px;
 	background-color: #fff;
 	overflow:auto;
 }
 .textbloc {
 	max-width:700px;
 }