/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
	body {
		background: #ffffff url('../images/main_bg.jpg') repeat-y center top;
	}
	p {
		font-family: 'MuseoSans500', sans-serif;
		font-size: 16px;
		font-weight: 100;
		line-height: 22px;
	}
	h1 {
		font-family: 'MuseoSans500', sans-serif;
		font-size: 20px;
		font-weight: 900;
		line-height: 32px;
	}
	.sectionBreak {
		background: url('../images/separator.jpg') no-repeat center center;
		margin: 0 auto;
		height: 32px;
		width: 900px;
		display: block;
		border: none;
		margin-bottom: 20px;
	}
	.section {
		position: relative;
		margin: 0 auto;
		width: 850px;
	}
	.section img {
		margin-bottom: 6px;
	}
	#headerImage {
		margin: 0 !important;
	}
	.largeLetter {
		font-size: 70px;
		position: relative;
		top: 20px;
		left: -6px;
		height: 60px;
		width: 11px;
		float: left;
		font-weight: 100;
	}
	.singleDisc {
		text-indent: -1em;
		padding-left: 1em;
	}
	.leftImage {
		float: left;
		margin-bottom: 20px;
	}
	.rightImage {
		float: right;
		margin-bottom: 20px;
	}
	.centerImage {
		display: block;
		margin: 0 auto 20px auto;
	}
	img {
		margin-bottom: 20px;
	}
	.womenLabel {
		position: absolute;
		left: -220px;
		top: 120px;
	}
	.menLabel {
		position: absolute;
		left: -140px;
		top: 280px;
	}
	.largeImage {
		position: relative;
		left: -60px;
	}
	.compareResults {
		position: relative;
		left: -20px;
	}
	.endText {
		font-size: 10px;
		text-align: right;
	}
	.endText a {
		color: #2782fb;
	}
	#mosaicContainer {
		display: block;
		margin: 0 auto;
		width: 700px;
		height: 930px;
	}
	#return {
		position: fixed;
		bottom: 30px;
		right: 30px;
	}
	#return a {
		width: 40px;
		height: 40px;
		display: block;
		font-family: 'MuseoSans500', sans-serif;
		font-weight: bold;
		font-size: 16px;
		line-height: 40px;
		text-align: center;
		text-decoration: none;
		color: #fff;
		background-color: #000;
		-webkit-transition: 1s;
		-moz-transition: 1s;
		transition: 1s;
		-webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
		-moz-box-shadow:    0px 0px 5px rgba(50, 50, 50, 0.75);
		box-shadow:         0px 0px 5px rgba(50, 50, 50, 0.75);
	}
	#return a:hover {
		background-color: #999;
	}
	#embed-container {
		display: block;
		position: fixed;
		left: -280px;
		bottom: 10%;
		width: 310px;
		height: 180px;
		z-index: 10;
		background: url('../images/embed.png') left -3px no-repeat;
	}
	
	#embed-container .handle {
		position: absolute;
		display: block;
		top: 50%;
		margin-top: -43px;
		right: 0;
		width: 30px;
		height: 80px;
		cursor: pointer;
	}
	#embed-container textarea {
		position: absolute;
		font-size: 10px;
		line-height: 16px;
		left: 8px;
		top: 11px;
		width: 240px;
		height: 130px;
		margin: 0;
		padding: 10px;
		resize: none;
		border: 1px solid #e2e2e2;
	}
 	.navContainer {
		width: 100%;
		height: 30px;
		padding-left: 170px;
		margin-bottom: 0 !important;
	}
	.navContainer li {
		display: inline-block;
		width: 200px;
		margin-bottom: 0 !important;
		text-align: center;
	}
	.navContainer li a {
		display: inline-block;
		color: #124cf2;
		margin: 0 auto;
		line-height: 30px;
		font-size: 18px;
		font-weight: 700;
		text-decoration: none;
		-webkit-transition: all 200ms ease-in;  
		-moz-transition: all 200ms ease-in;  
		-o-transition: all 200ms ease-in;  
		transition: all 200ms ease-in;  
	}
	.navContainer li a:hover {
		color: #f16de0;
	}
	#infographic img {
		margin: 0 auto;
		width: 848px;
		height: 5919px;
	}
/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}

	/* iPhone Portrait Size */
	@media only screen and (max-width: 320px) {}

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

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