html,body{
	background-color:#000;
	margin:0px;
	padding:0px;
	color:#fff;
	font-family:Arial;
	height:100%;
}

p{
	line-height:24px;
}

a{
	color:#fff;
	text-decoration:none;
}

html.non-touch a:hover{
	color:#0096D3;
}

div#page-container{
	position:relative;
	min-height:100%;
	background-image:url("/resources/images/fakeorfoto/image_background.png");
	min-width:320px;
	width:100%;
}

div#body{
	padding-bottom:60px;
}

div#page-container.black-backround{
	background-color:#000;
	background-image:none;
}

div#header-container{
	background-color:#484848;
	height:60px;
}

div#header-logo{
	margin-top:10px;
	margin-bottom:4px;
}

div.inner-wrapper{
	margin-right:auto;
	margin-left:auto;
	background-color:none;
	position: relative;
	overflow:hidden;
	max-width:1180px;
	padding-right:20px;
	padding-left:20px;
}

div.outer-wrapper{
	width:100%;
}

div#logo-container{
	position:absolute; 
	top:0px; 
	left:0px; 
	bottom:0px; 
	right:0px
}

div#logo{
	margin-right:auto; 
	margin-left:auto; 
	width:420px; 
	margin-top:100px;
}

div#banner{
	position:relative; 
	width:100%; 
	height:500px;
	overflow:hidden;
}

div.banner-image{
	height:100%;
	width:50%; 
	float:left; 
	overflow:hidden;
}

div.button, button{
	border:1px solid #777;
	text-transform: none;
	padding-left:100px;
	padding-right:100px;
	padding-top:20px;
	padding-bottom:20px;
	color:#fff;
	cursor:pointer;
	position:relative;
	display:inline-block;
	font-weight:bold;
	text-transform:uppercase;
	font-size:30px;
	background-color:#000;
	box-sizing:border-box;
}

html.non-touch div.button:hover, html.non-touch button:hover{
	background-color:#0096D3;
	color:#fff;
	border-color:#0096D3;
}

div.button a{
	top:0px;bottom:0px;left:0px;right:0px;
	position:absolute;
}

div#image-container{
	background-image:url("/resources/images/fakeorfoto/image_background.png");
}


div#image-container-outer{
	max-width:904px; 
	width:100%;
	margin-right:auto; 
	margin-left:auto; 
	position:relative;
}

td#image-container-inner{
	max-width:800px; 
	width:100%;
	height:600px; 
	overflow:hidden; 
	vertical-align:middle; 
	background-color:#000; 
	padding:0px;
}


div#image{
	max-width: 800px;
	width:100%;
    height: 100%;
    overflow: hidden;
    position: relative;
	font-size:0px;
}

div#image img{
	width:100%;
	position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto; 
    height: auto;
}


div#arrow-left{
	width:32px;
	height:70px;
	background-image:url("/resources/images/fakeorfoto/arrow_left.png");
	margin-right:20px;
	cursor:pointer;
}

html.non-touch div#arrow-left:hover{
	background-position:0px 70px;
}

div#arrow-right{
	width:32px;
	height:70px;
	background-image:url("/resources/images/fakeorfoto/arrow_right.png");
	margin-left:20px;
	cursor:pointer;
}

html.non-touch div#arrow-right:hover{
	background-position:0px 70px;
}

div#thumbnail-container{
	background-color:#000;
}

div.thumbnail-images{
	margin-top:20px;
	margin-left:0px;
	text-align:center;
	margin-bottom:60px;
}

div.image-thumbnail{
	width:80px;
	height:80px;
	display:inline-block;
	margin-right:20px;
	cursor:pointer;
	position:relative;
	border:1px solid #000;
	margin-bottom:20px;
	opacity:0.5;
}

div.image-thumbnail:last-of-type{
	margin-right:0px;
}

div.image-thumbnail.selected{
	border:1px solid #fff;
	opacity:1;
	width:80px;
	height:80px;
}

div.image-thumbnail img{
	width:100%;
}

div.image-thumbnail div.marker, div.answer-image div.marker{
	position:absolute;
	top:5px;
	left:5px;
	height:20px;
	width:20px;
	border-radius: 50%;
	display:none;
}

div.image-thumbnail div.marker.cg, div.answer-image div.marker.cg{
	background-image:url("/resources/images/fakeorfoto/cg_icon_small.png");
	display:block;
}

div.image-thumbnail div.marker.photo, div.answer-image div.marker.photo{
	background-image:url("/resources/images/fakeorfoto/photo_icon_small.png");
	display:block;
}


div.button-box{
	float:left;
	text-align:center;
	cursor:pointer;
	text-shadow: 1px 1px #000;
}

div.or-box{
	float:left;
	text-align:center;
	text-shadow: 1px 1px #000;
}


div.cg-button{
	width:80px;
	height:80px;
	background-image:url("/resources/images/fakeorfoto/cg_icon.png");
	margin-bottom:4px;
}

div.photo-button{
	width:80px;
	height:80px;
	background-image:url("/resources/images/fakeorfoto/photo_icon.png");
	margin-bottom:4px;
}

html.non-touch div.button-box:hover, div.button-box.selected{
	font-weight:bold;
}

html.non-touch div.button-box:hover div.cg-button, div.button-box.selected div.cg-button{
	background-position:0px 80px;
}

html.non-touch div.button-box:hover div.photo-button, div.button-box.selected div.photo-button{
	background-position:0px 80px;
}

div.error-message{
	color:#FF0000; 
	font-size:14px; 
	background:#fce1e1; 
	padding:20px; 
	border:1px solid #ff0000; 
	margin:0px 0px 5px 0px; 
	text-align:center
}

div#outer-footer{
	background-color:#484848; 
	height:60px;
	position:absolute;
	bottom:0px;
}


div#footer-links{
	float:left;
	text-align:left;
}

div#footer-links ul{
	list-style:none;
	padding-left:0px;
}

div#footer-links ul li{
	display:inline-block;
	font-size:12px;
}

div#footer-logo{
	float:right; 
	margin-top:18px; 
	margin-bottom:18px; 
	font-size:0px;
	text-align:center;
}

div#results{
	margin-top:40px;
}

div#results div#column-one{
	float:left;
	width:560px;
	margin-right:40px;
}

div#results div#column-one div#sub-column-one{
	float:left;
	width:390px;
}
div#results div#column-one div#sub-column-two{
	float:left;
	width:170px;
}

div#results div#column-two{
	float:left;
	width:560px;
}

div#results div#share-container{
	text-align:left;
}

div#results div#try-again-container{
	margin-bottom:20px;
}


div#results div#answer-images-bar{
	background-color:#000;
	padding-top:10px;
	padding-bottom:8px;
	font-weight:bold;
	text-transform:uppercase;
	padding-left:10px;
	margin-bottom:10px;
	cursor:pointer;
}

html.non-touch div#results div#answer-images-bar:hover{
	background-color:#0096D3;
}

div.answer-images{
	background-color:#000;
	padding-left:10px;
	padding-top:20px;
	text-align:center;
}

div.answer-images div.answer-image{
	width:100px;
	height:100px;
	display:inline-block;
	margin-right:10px;
	margin-bottom:10px;
	font-size:0px;
	position:relative;
}

div.answer-images div.answer-image img{
	width:100%;
}

div.answer-images div.answer-image div.result-icon-container-outer{
	position:absolute;
	width:100%;
	height:100%;
	display:table;
}

div.answer-images div.answer-image div.result-icon-container-inner{
	display:table-cell;
	vertical-align:middle;
}

div.answer-images div.answer-image div.result-icon{
	height:45px;
	width:45px;
	margin-right:auto;
	margin-left:auto;
}

div.answer-images div.answer-image div.result-icon.correct{
	background-image:url("/resources/images/fakeorfoto/correct_icon.png");
}

div.answer-images div.answer-image div.result-icon.wrong{
	background-image:url("/resources/images/fakeorfoto/wrong_icon.png");
}

div#expand-icon{
	height:17px;
	width:18px;
	background-image:url("/resources/images/fakeorfoto/expand_icon.png");
	float:right;
	margin-right:10px;
}

div#expand-icon.opened{
	background-position:0px 0px;
}

div#expand-icon.closed{
	background-position:0px 17px;
}

ul.share-icons{
	list-style:none;
	padding-left:0px;
}

ul.share-icons li{
	
}

ul.share-icons div.share-icon{
	height:36px;
	width:34px;
	background-image:url("/resources/images/fakeorfoto/share_icons.png");
	display:inline-block;
	margin-right:10px;
}

ul.share-icons div.share-icon.facebook{
	background-position:0px 0px;
}
html.non-touch ul.share-icons div.share-icon.facebook:hover{
	background-position:0px 36px;
}

ul.share-icons div.share-icon.linkedin{
	background-position:-34px 0px;
}
html.non-touch ul.share-icons div.share-icon.linkedin:hover{
	background-position:-34px 36px;
}

ul.share-icons div.share-icon.twitter{
	background-position:-68px 0px;
}
html.non-touch ul.share-icons div.share-icon.twitter:hover{
	background-position:-68px 36px;
}

ul.share-icons div.share-icon.google{
	background-position:-102px 0px;
}
html.non-touch ul.share-icons div.share-icon.google:hover{
	background-position:-102px 36px;
}

ul.share-icons div.share-icon.pinterest{
	background-position:-136px 0px;
}
html.non-touch ul.share-icons div.share-icon.pinterest:hover{
	background-position:-136px 36px;
}

div#result-percentage-label{
	font-size:40px; 
	text-transform:uppercase; 
	font-weight:bold;
}

div#result-percentage{
	font-size:140px; 
	text-transform:uppercase; 
	font-weight:bold; 
	color:#0096D3;
}