/**
*
*  Modular Emergency Mesh ~ MeM Project
*
*/

/* Open Sans Font Face */

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

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-BoldItalic-webfont.eot');
    src: url('../fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg');
    font-weight: 700;
    font-style: italic;
}

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

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot');
    src: url('../fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic') format('svg');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-Italic-webfont.eot');
    src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: 500;
    font-style: italic;
}

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

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-LightItalic-webfont.eot');
    src: url('../fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-LightItalic-webfont.svg#open_sanslight_italic') format('svg');
    font-weight: 200;
    font-style: italic;
}

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

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

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot');
    src: url('../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg');
    font-weight: 600;
    font-style: italic;
}


body{
	width: 90%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	font-family: "Open Sans", Helvetica, sans-serif;
	line-height: 1.26rem;
	background-color: #FFFFF0;
	color: #989975;
}

#header {
	position: relative;
	margin: 0 0 1rem 0;
}

#header h1 {
	font-size: 3.5rem;
	line-height: 3.4rem;
	font-weight: 100;
	display: inline-block;
	letter-spacing: -.02ex;
}

#header .tagline{
	display: inline-block;
	margin: -1rem 0 0 0;

}

h2{
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: 100;
	letter-spacing: .1ex;
}


iframe{
	border:none;
	width: 100%;
}


#main {
	position: relative;
	float: left;
	width: 75%;
	padding: 0;

}

#nav {
	position: relative;
	float: left;
	width: 25%;
}

#nodes, #lights{
	margin: 0 0 1.5rem 1.5rem;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: .5rem;
	padding: 0 1.5rem;
}

#footer {
	clear: left;
	text-align: center;
}


nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

nav ul a {
	display: inline-block;
	font-size: 80%;
	text-decoration: none;
	padding: .1rem .6rem;
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: -.02ex;
	color: #151515;
	background-color: #DCDCDC;
	margin: 0 0 .5rem 0;
	border-radius: .1rem;
}

nav ul a:hover {
	color: #FFF;
	background-color: #151515;
}

#lights .led-control,
#lights .blink-control,{
	display: inline-block;
}

#lights{
	position: relative;
}

#lights .led-control label{
	display: inline-block;
	width: 4rem;
	text-align: right;
	text-transform: uppercase;
	font-size: 60%;
	font-weight: 900;
	vertical-align: top;
}

#lights .light-monitor{
	position: absolute;
	top: 2.5rem;
	right: 1.5rem;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 50%;
	width: 90px;
	height: 90px;
}

#lights button{
	position: absolute;
	right: 0;
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: -.02ex;
	color: #151515;
	background-color: #DCDCDC;
	margin: 0 0 .5rem 0;
	border-radius: .1rem;
	border: none;
	width: 14rem;
	font-size: 1rem;
	padding: .5rem 1rem;
}

#lights button:hover{
	background-color: #151515;
	color: #FFF;
}

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

/* Responsive */

@media (max-width: 600px) {
	#main, #nav{
		width: 100%;
	}
	#nodes, #lights{
		margin: 0 0 1.5rem 0;
	}
}