/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* done reset  */


/* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 24, 2012 12:54:20 PM America/New_York */



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

}

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

}

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

}

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

}

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

}

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

}

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

}







body {
	background-image: url(/images/measurecamera-icon.png), url(/images/ie-bg-gradient.png), url(/images/measurecamera-site-bg.png); 
	background-image: url(/images/measurecamera-icon.png), linear-gradient(0deg, rgba(0,0,0,0.85) 100%, rgba(0,0,0,0.85) 100%), url(/images/measurecamera-site-bg.png); 
	background-image: url(/images/measurecamera-icon.png), -moz-linear-gradient(0deg, rgba(0,0,0,0.85) 100%, rgba(0,0,0,0.85) 100%), url(/images/measurecamera-site-bg.png); 
	background-image: url(/images/measurecamera-icon.png), -webkit-linear-gradient(rgba(0,0,0,0.85) 100%, rgba(0,0,0,0.85) 100%), url(/images/measurecamera-site-bg.png);
	background-image: 
	/*	-webkit-linear-gradient(0deg, rgba(0,0,0,0.85) 0%,  rgba(0,0,0,0.8) 20%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.85) 100%), */
	-Webkit-image-set(url(/images/measurecamera-icon.png) 1x, url(/images/measurecamera-icon@2x.png) 2x),
	-webkit-linear-gradient(rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.85) 100%),
		-Webkit-image-set(url(/images/measurecamera-site-bg.png) 1x, url(/images/measurecamera-site-bg@2x.png) 2x);
		
				
	background-repeat: no-repeat, repeat, repeat;
	background-position: -150px -100px, left top, left top;
	background-attachment: fixed, fixed, fixed;
	
	padding:1em 0 4em 0;
	
	font-family: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: lighter;
	
	
	font-size:118%;	
	
	color:#efefef;
	
}


a:link {
	color:#efefef;
	text-decoration:none;
}

a:visited {
	color:#efefef;
}
a:active, a:focus, a:hover {
	color:#fff;
}


.group:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


header {
	display:block;
	padding-bottom:0.75em;

	margin: 1em 5em 0 300px;
}

header.home {
	margin-top:5em;
}

header .explanation {
	font-weight: 100;
	line-height:1.5em;
	
	margin:1em 0;
	
	font-family: QuicksandLight;
	
}

header h1 {
	font-size:218%;
}

.home header h1 {
	font-size:145%;
	float:none;
}

header h2 {
	font-size:218%;
	line-height:1.2em;
	margin:0.5em 0;
}

header hgroup {
	display:block;
	line-height:2em;
	
}

.home header .badgelink {
	display:block;
	position:fixed;
	left:0;
	top:320px;
	margin:0 0 0 5px;
}

.content h2 {
	font-size:164%;
	margin:1em 0;	
}

.home .content h2 {
	margin-bottom:0;
}

.content h3 {
	font-size:145%;
	margin:1em 0;
}

.content p {
	line-height:1.2em;
	margin:1em 0;
}

article ul li {
	list-style-type: disc;
	line-height:1.2em;
	margin:1em 0;
}

article ul,
article dl,
.content p {
	font-family: QuicksandLight;
}

.faq {
	line-height:1.2em;
}
.faq dt {
	font-family:QuicksandBold;
	margin-top:1.5em;
}

.faq dd {
	margin-bottom:1.5em;
}



.mainnav {
	display:block;
	position:fixed;
	left:0;
	bottom:0;
	right:0;
	height:3em;
	padding-left:300px;
	
	border-top:1px solid rgba(200,200,200,0.4);
	background:rgba(0,0,0,0.85);
}
.mainnav li {
	display:inline-block;
	padding:0;
	margin:0 2em 0 0;
	text-align:left;

/*	width:15%;
	min-width:4em;
*/
	
	line-height:3em;
	font-weight: 100;
	
	font-family: QuicksandDash;
}

.mainnav a:link,
.mainnav a:visited,
.content a:link,
.content a:visited {
	border-bottom:1px dotted #efefef;
}
.mainnav a:active,
.mainnav a:focus,
.mainnav a:hover,
.content a:active,
.content a:focus,
.content a:hover {
	border-bottom:1px solid #fff;
}

.content a.badgelink {
	border-bottom:none;
}

.videoContainer {
	width:100%;
	margin-bottom:2em;
	clear:both;
}
.videoWrapper {
  position: relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
  font-size:.9em;
}
* html .videoWrapper {
  margin-bottom: 30px;
  margin-bot\tom: 0;
}
.videoWrapper div,
.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
}



.content {
/*	width:45em; */
	margin: 0 5em 0 300px;
}

footer {
	margin:3em 5em 0 300px;
}

footer small {
	font-size:66%;
	font-weight:lighter;
	color:#bbb;
}


.home article {
	margin:6em 0;
}

.home .content>article:first-child {
	margin-top:3em;
}

.step {
	clear:both;
	margin:2em 0;
	padding:3em 0;
}

.step img {
	float:right;
	margin-left:1em;
	margin-top:-3em;
	margin-bottom:-3em;
}

.step p {
	line-height:1.2em;
}

.step h4 {
	font-size:118%;
	margin-bottom:1.5em;
	padding-top:2em;
}

.step-1 {
	margin-top:0;
	padding-top:0;
}

.step-1 h4 {
	padding-top:1em;
}

.step-2 {
	padding:0;
	margin-top:-1em;
	margin-bottom:-1em;
}
.step-2 img {
	float:left;
	margin-left:0;
	margin-right:1em;
}




@media screen and (max-width:1024px) {
	.mainnav {
		padding-left:0;
		text-align:center;
	}
	
	.step {
		padding:0;
	}
	.step img {
	/*	float:none;  */
		margin-top:0;
		margin-bottom:0;
	}
}


@media screen and (max-device-width: 1024px) , (max-width:640px) {
	body {
		background-position: -250px -315px, left top, left top;
		padding-top:0;
		padding-bottom:0;
		font-size:66%;
	}
	
		

	header {
		margin-left:80px;
		margin-top:1em;
		width:auto;
	}
	
	.content,
	footer {
		margin-left:80px;
		width:auto;
	}
	
	footer {
		background:rgba(0,0,0,0.85); /* same as mainnav */
		margin:0;
		padding:2em 0 0.5em 80px;
		
		
	}

	header h2 {
		line-height:1.2em;
		margin:0.75em 0;
		font-size:218%;
	}

	.mainnav {
		padding-left:80px;
	}
	
	.mainnav {
		position:static;
		height:auto;
		margin-top:3em;
	}
	.mainnav li {
		display:block;
	}
	
	header .explanation,
	.mainnav li,
	article ul,
	article dl,
	.content p {
		font-family: "Heiti SC";
	}
	
	.home header .badgelink, 
	.home header .badgelink img,
	.home article .badgelink,
	.home article .badgelink img {
		width:100%;
		position: static;
		margin:1em 0;
		
	}
		
}

@media screen and (max-width:400px) {
	.step {
		margin-bottom:3em;
	}
	.step img {
		float:none;
		display:block;
		margin:1em 0;
		width:100%;
	}
	.step h4 {
		padding-top:0;
	}
}