@charset "utf-8";
/* CSS Document */


/*----------------------------ANIMATIONS----------------------------*/




/*----------------------------RESET----------------------------*/
* {
	-webkit-box-sizing: border-box;/* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;/* Firefox, other Gecko */
	ms-box-sizing: border-box;
    box-sizing: border-box;/* Opera/IE 8+ */
	margin: 0;
	padding: 0;
}

/*----------------------------LAYOUT----------------------------*/

html{-webkit-font-smoothing: none;}

body{
	background-image:url(../img/bg_1.jpg);
	/*-webkit-background-size: cover;
 	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;*/
	background-position:center bottom;
	font-family:Arial, Helvetica, sans-serif;
}

header{
	background-color:#FFF;
	width:100%;
	margin:0px;
	height:80px;
	background-image:url(../img/fmilogo.jpg);
	background-position: center left;
	background-repeat:no-repeat;
	font-family: 'DroidRegular', Arial, sans-serif; 
	font-weight:700;
	color: #464646;
	text-align:right;   
	position: relative;    
	z-index: 100; 
}



/*----------------------------MOBILE NAVIGATION----------------------------*/

.mobile{z-index: 200; position: relative; width:100%; left:0; right:0; top:0; margin: 5px auto 0px auto;}
/* nav */
nav.mobile {
	text-align:center;
	min-height: 40px;
	width:85%;
	margin-left:auto;
	margin-right:auto;
}
nav.mobile ul {
	width: 100%;
	padding: 5px 0;
	border: solid 1px #aaa;
	background: #fff url(../img/mobile_menu_icon.png) no-repeat 10px 11px;
	background-position:center left;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

nav.mobile li {
	margin: 0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	display: none; /* hide all <li> items */
	margin: 0;
}

nav.mobile .current {display: block; /* show only current <li> item */}


nav.mobile a {
	padding: 3px 12px;
	text-decoration: none;
	color: #999;
	line-height: 100%;
	display: block;
	padding: 5px 5px 5px 32px;
	text-align: left;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

nav.mobile .current a {
	background: #999;
	color: #fff;
	border-radius: 5px;
	background: none;
	color: #666;
}

nav.mobile a:hover {
	color: #000;
	-webkit-transition:color 0.5s ease-in;  
   	-moz-transition:color 0.5s ease-in;  
   	-o-transition:color 0.5s ease-in;  
   	transition:color 0.5s ease-in;
}

nav.mobile ul:hover {background-image: none;}
	
nav.mobile ul:hover li {display: block;margin: 0 0 5px;}
	
nav.moble ul:hover .current {background: url(../img/mobile_menu_icon.png) no-repeat; background-position:center left; }


/*----------------------------MAIN NAVIGATION----------------------------*/
nav.main {
	width:100%;
	height: 50px;
	border: none;
	display:block;
	position:relative;
	}
 
nav.main ul, nav.front ul {
    list-style: none;
	margin:0px;
	padding:0px;
}

nav.main ul{height: 50px;}

nav.main li{
	width:11.1%;
	height: 50px;
	display:inline-block;
	background-position:center center;
	background-color:#464646;
	background-repeat:no-repeat;
	float:left;
	border-right: thick solid #cadaf1;
}

#page_home #home, #page_about #about, #page_visibility #visibility, #page_frost #frost, #page_snowdrift #snowdrift, #page_temp #temperature, 
#page_wind #wind, #page_humidity #humidity, #page_cameras #cameras {background-color:#0873ba;}
#page_home #home a:hover, #page_about #about a:hover, #page_visibility #visibility a:hover, #page_frost #frost a:hover, #page_snowdrift #snowdrift a:hover, #page_temp #temperature a:hover, #page_wind #wind a:hover, #page_humidity #humidity a:hover, #page_cameras #cameras a:hover {-moz-opacity:0; -webkit-opacity:0;filter: alpha(opacity=0);opacity: 0;}
#page_home #home:after, #page_about #about:after, #page_visibility #visibility:after, #page_frost #frost:after, #page_snowdrift #snowdrift:after, #page_temp #temperature:after, #page_wind #wind:after, #page_humidity #humidity:after, #page_cameras #cameras:after  {opacity:1;}

nav.main li:after{
	content:"";
	width: 0; 
	height: 0; 
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-top: 0.5em solid #0873ba;
	z-index: 100;
	opacity:0;
	display:table;
}

nav.main li a {
    width: 100%;
	height:100%;
	display:block;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}

nav.main li a:hover{
	background-color: #8f9d9d;
	-moz-opacity:0.5; 
	-webkit-opacity:0.5;
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.5;
	-webkit-transition:background-color 0.5s ease-in;  
   	-moz-transition:background-color 0.5s ease-in;  
   	-o-transition:background-color 0.5s ease-in;  
   	transition:background-color 0.5s ease-in;
}

nav.main li:last-child {border: none;}

#home{background-image:url(../img/navhome.png);}
#about{background-image:url(../img/navabout.png);}
#visibility{background-image:url(../img/navsnowheight.png);}
#frost{background-image:url(../img/navempty.png);}
#snowdrift{background-image:url(../img/navempty.png);}
#temperature{background-image:url(../img/navtemp.png);}
#wind{background-image:url(../img/navempty.png);}
#humidity{background-image:url(../img/navempty.png);}
#cameras{background-image:url(../img/navcameras.png);}


/*----------------------------FRONT PAGE NAVIGATION----------------------------*/
nav.front{
	padding:0px;
	overflow:hidden;
	border-collapse: collapse;
	border: none;
	float:left;
	display:block;
	height:91.5%;
	position:relative;
	margin: 37px 0px 0px 18px;
}

nav.front ul{height: 100%;}

nav.front li{
	display:inline-block;
	background-position:top center;
	background-repeat:no-repeat;
	margin-bottom:20px;
	float:left;
}

nav.front a{
	height: 100%;
	width: 100%;
	display: block;
	text-decoration:none;
	font-family: 'droid_sansbold', Arial, sans-serif;
	color:white;
	text-align:center;
	position:relative;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}

nav.front a:hover{
	background-color: #464646;
	-moz-opacity:0.5; 
	-webkit-opacity:0.5;
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.5;
	-webkit-transition:background-color 0.5s ease-in;  
   	-moz-transition:background-color 0.5s ease-in;  
   	-o-transition:background-color 0.5s ease-in;  
   	transition:background-color 0.5s ease-in;
}

.fronta{
	width:100%;
	position: absolute;
	bottom:20px;
	left: auto;
	right: auto;
}

nav.front li:last-child {margin: none !important;}

#front_visibility{background-image:url(../img/frontnavsnowheight1.png);}
#front_humidity{background-image:url(../img/frontnavempty.png);}

/*----------------------------COLORS----------------------------*/

.orange{background-color:#f29023;}
.lime{background-color:#acc50b;}
.blue{background-color:#52b6e7;}
.lightblue{background-color:#63b8e8;}

.bluetext{color:blue;}
.redtext{color:red;}
.greentext{color:green;}
.yellowtext{color:yellow;}
.blacktext{color:black;}

/*----------------------------PAGE LAYOUT----------------------------*/

#page_wrap{
	position:absolute;
	padding:0px;
	width:100%;
	border:none;
}

#content_wrap{
	height:91.5%;
	float:right;
	position:relative;
}

.content_box{
	background-color:#464646;
	width:100%;
	background-repeat:no-repeat;
	background-position:center center;
	margin-bottom: 20px; 
}

#front_temperatureview, #friction_indicator_text, #condition{
	font-family: 'droid_sansbold', Arial, sans-serif;
	font-weight:600;
	color:white;
	text-align:center;	
}

#air_temp h1, #road_temp h1{
	font-family: 'amaranthregular', Arial, sans-serif;
	font-weight:900;
}	


#front_roadview{
	background-image:url(../img/road.png);
}
	
#friction, #condition{
	width:50%;
	height:100%;
	display:block;
	margin:0;
	text-align:center;
	position:relative;
}

#friction{float:left;}
#condition{float:right;}

#friction_indicator, #condition_indicator{
	height: 57px;
	width:57px;
	-moz-border-radius: 28.5px;
	-webkit-border-radius: 28.5px;
	border-radius: 28.5px;
}

#friction_indicator{margin:10px auto 0px auto;}


#friction_condition_text{
	font-family:Arial, Helvetica, sans-serif;
	color:white;
	font-size:24px;
	}
	
#friction_condition_text h1, #condition_indicator_text{
	color: #acc50b;	
	font-family: 'droid_sansbold', Arial, sans-serif;
}

#front_cameraview{margin-bottom:0px !important;}

#front_cameraview img{
	position:relative;
	z-index:50;
}

#front_cameratext{
	display:block;
	color:white;
	z-index:100;
	position:absolute;
}

#headings{
	margin:20px auto 0px auto;
	padding: 20px;
	height:auto;
	width:80%;
	padding:10px;
	background-image:url(../img/boxbg.png);
	background-repeat:no-repeat;
	background-position:center center;
	color: white;
	text-align:center;
}

p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	text-align:center;
	padding-top:20px;
}

h1{
	
	font-family: 'droid_sansbold', Arial, sans-serif;
	font-weight:600;
	font-size:24px;
}

h2{
	font-family: 'droid_sansbold', Arial, sans-serif;
	font-weight:600;
	font-size:20px;
}

.borderimage{
	background: rgba(70, 70, 70, 0.5);
	background-image:url(../img/boxbg.png);
}

.borderimage{
	width:282px;
	height: 242px;
	padding: 20px;
	background-repeat:no-repeat;
	background-position:center center;
	display:inline-block;
}

.images, .diagrams_with_text, .diagrams{margin: 20px auto 0px auto; font-family:Arial, Helvetica, sans-serif; color:#333;}
	
.images{text-align: center;}

/*--------------------------------------------LIGHTBOX GALLERY FOR ROAD CAMERAS--------------------------------------------*/


   #lightbox_gallery{margin: 30px auto 0px auto; width:100%;}

   figure.tabimg {  
        position: relative;   
		margin:10px auto 0px auto;  
        width: 70%; 
		padding: 20px; 
		background: rgba(70, 70, 70, 0.5);
        -webkit-box-shadow: 0 3px 10px #ccc;  
        -moz-box-shadow: 0 3px 10px #ccc;  
        box-shadow: 0 3px 10px #ccc;  
		border: #333 thin solid;
		cursor:pointer;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
    } 
	

	
	figure.overlayimg { 
		visibility: hidden;
		width: 0%;
        position: absolute;  
        float: none;  
        z-index: 100; 
		padding: 20px; 
		background:#FFF;
        -webkit-box-shadow: 0 3px 10px #636363;  
        -moz-box-shadow: 0 3px 10px #636363;  
        box-shadow: 0 3px 10px #636363;  
		border: #333 thin solid;
		-webkit-transition: all 1s ease;  
        -moz-transition: all 1s ease;  
        -o-transition: all 1s ease;  
        transition: all 1s ease;
		cursor:pointer;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		left: 0;
		right: 0;
		top: 0;
    } 
	 
    figure.tabimg img {  
        width: 100%;  
    } 
	
	figure.overlayimg img {  
        width: 100%;  
    } 
	
	
    figure.tabimg figcaption {
		padding: 10px 0px 0px 0px;
		font-family:Arial, Helvetica, sans-serif;  
        font-size: 1.1em;  
        text-align: center;  
        color: #fff;  
    }  
	figure.tabimg figcaption .small{font-size: 12px; font-style:italic;}
	
	#blackoverlay{
		position:fixed;
		left:0;
		top:0;
		margin: 0;
		background: rgba(0, 0, 0, 0.8); 
		opacity: 0; 
		width:100%; 
		height:100%;
		-webkit-transition: all 1s ease;  
        -moz-transition: all 1s ease;  
        -o-transition: all 1s ease;  
        transition: all 1s ease;
		z-index:-100;
		
		}
	
	#img1_big, #img2_big{margin: 30px auto 0px auto;}
	
/*--------------------------------------------FONTS--------------------------------------------*/

/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2012 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      Typodermic Fonts Inc.
 * License URL: http://www.fontspring.com/fflicense/typodermic
 *
 *
 */

@font-face {
    font-family: 'DroidRegular';
    src: url('../fonts/droid-webfont.eot');
    src: url('../fonts/droid-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/droid-webfont.woff') format('woff'),
         url('../fonts/droid-webfont.ttf') format('truetype'),
         url('../fonts/droid-webfont.svg#DroidRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 17, 2013 */



@font-face {
    font-family: 'amaranthregular';
    src: url('../fonts/amaranth-bold-webfont.eot');
    src: url('../fonts/amaranth-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/amaranth-bold-webfont.woff') format('woff'),
         url('../fonts/amaranth-bold-webfont.ttf') format('truetype'),
         url('../fonts/amaranth-bold-webfont.svg#amaranthregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'droid_sansbold';
    src: url('../fonts/droidsans-bold-webfont.eot');
    src: url('../fonts/droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/droidsans-bold-webfont.woff') format('woff'),
         url('../fonts/droidsans-bold-webfont.ttf') format('truetype'),
         url('../fonts/droidsans-bold-webfont.svg#droid_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}