@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);
/*@import url(reset.css);*/

body{
	font-family:"Josefin Sans", sans-serif;
	margin:0px;
	padding:0px;
	background-color:#93532d;
	background-image:url(bg.jpg);
	text-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
	font-size:100%;
}

h3{
	font-style:italic;
	font-size:18px;
	font-weight:600;
}

#header{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	height:15px;
	padding:5px;
	font-size:16px;
	color:#fff;
	line-height:5px;
	text-shadow:0px 1px 0px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow:0px 4px 7px rgba(0,0,0,0.2);
	-moz-box-shadow:0px 4px 7px rgba(0,0,0,0.2);
}

#footer{
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	height: 10px;
	color:#fff;
	text-shadow:0px 1px 0px rgba(0, 0, 0, 0.7);
	font-size:12px;
	line-height:4px;
	padding:5px;
}

#card{
	background-color:#bbb;
	background-image:url(card.jpg);
	margin:50px auto 0px auto;
	padding:10px;
	width:800px;
	height:400px;
	font-size:12px;
	-moz-border-radius-topleft:30px;
	-webkit-border-top-left-radius:30px;
	-o-border-top-left-radius:30px;
	border-top-left-radius:30px;
	-moz-border-radius-bottomright:30px;
	-webkit-border-bottom-right-radius:30px;
	-o-border-bottom-right-radius:30px;
	border-bottom-right-radius:30px;
	-moz-box-shadow:0px 2px 5px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow:0px 2px 5px 2px rgba(0,0,0,0.5);
	-o-box-shadow:0px 2px 5px 2px rgba(0,0,0,0.5);
	box-shadow:0px 2px 5px 2px rgba(0,0,0,0.5);
	border:1px solid rgba(255, 255, 255, 0.4);
	position:relative;
	z-index: 10;
}

#ID{
	position:absolute;
	top:20px;
	right:20px;
}

#ID:before{
	content: "Question ID: ";
}

#options{
	background-color:#bbb;
	background-image:url(card.jpg);
	padding:10px;
	width:300px;
	height:100px;
	margin:0px auto;
	-moz-border-radius-bottomleft:30px;
	-webkit-border-bottom-left-radius:30px;
	border-bottom-left-radius:30px;
	-moz-border-radius-bottomright:30px;
	-webkit-border-bottom-right-radius:30px;
	border-bottom-right-radius:30px;
	-moz-box-shadow:0px 2px 5px 2px rgba(0,0,0,0.5);
	-webkit-box-shadow:0px 2px 5px 2px rgba(0,0,0,0.5);
	-o-box-shadow:0px 2px 5px 2px rgba(0,0,0,0.5);
	box-shadow:0px 2px 5px 2px rgba(0,0,0,0.5);
	border:1px solid rgba(255, 255, 255, 0.4);
	-webkit-transition: -webkit-transform 500ms ease-in-out 400ms;
	-webkit-transform: translate(0px, -105px);
	-moz-transition: -moz-transform 500ms ease-in-out 400ms;
	-moz-transform: translate(0px, -105px);
	-o-transition: -o-transform 500ms ease-in-out 400ms;
	-o-transform: translate(0px, -105px);
	position:relative;
}

#options:after{
	display:inline-block;
	content: "";
	position:absolute;
	bottom:0px;
	left:50%;
	margin-left: -10px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom:0px;
	border-top: 10px solid black;
}

#options:hover{
	-webkit-transition: -webkit-transform 500ms ease-in-out;
	-webkit-transform: translate(0px, 0px);
	-moz-transition: -moz-transform 500ms ease-in-out;
	-moz-transform: translate(0px, 0px);
	-o-transition: -o-transform 500ms ease-in-out;
	-o-transform: translate(0px, 0px);
}

.bar{
	background: #969696;
	background: -moz-linear-gradient(top, #555 0%, #333 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#333));
	text-align:center;
}

.backlink{
	position:absolute;
	top:4px;
	left:4px;
	text-decoration:none;
	font-weight:600;
	color:#ddd;
	height:14px;
	margin-right:10px;
}

.backlink:before{
	content: "<<"
}

.backlink:hover{
	color:#fff;
}

#answers {
	list-style-type:none;
	padding:0px;
	margin-bottom:50px;
	margin-left:20px;
}

#answers li{
	margin: 5px 0px;
	font-size:18px;
	border-radius:15px;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
	padding-left:10px;
}

#answers li.on{
	-webkit-transition:background-color 250ms ease-in-out;
	background-color:white;
	background-color:rgba(255, 255, 255, 0.5);
	font-weight:bold;
}

#answers li.invisible{
	visibility:hidden;
}

#next.button{
	-webkit-border-bottom-right-radius:25px;
	-o-border-bottom-right-radius:25px;
	border-bottom-right-radius:25px;
	-moz-border-radius-bottomright:25px;
}

#prev{
	float:left;
	width:395px;
	height:50px;
	position:absolute;
	bottom:10px;
}

#button.next{
	float:right;
	width:395px;
	position:absolute;
	bottom:10px;
	right:10px;
}

#next{
	float:right;
	width:395px;
	height:50px;
}

.button{
	background-color:rgb(215, 215, 215);
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(230, 230, 230)), to(rgb(200,200,200)));
	background: -moz-linear-gradient(center bottom, rgb(200,200,200) 0%, rgb(230,230,230) 100%);
	border:1px solid #ddd;
	width:auto;
	text-shadow:0px 1px 0px white;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
	border-radius:5px;
	float:left;
	min-width:50px;
	text-align:center;
	-webkit-box-shadow:0px 2px 5px rgba(0,0,0,0.5);
	-moz-box-shadow:0px 2px 5px rgba(0,0,0,0.5);
	-o-box-shadow:0px 2px 5px rgba(0,0,0,0.5);
	box-shadow:0pc 2px 5px rgba(0,0,0,0.5);
	text-decoration:none;
	color:#222;
}

.button:hover{
	background-color:rgb(230, 230, 230);
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(230, 230, 230)), to(rgb(210,210,210)));
	background: -moz-linear-gradient(center bottom, rgb(210,210,210) 0%, rgb(230,230,230) 100%);
	cursor:pointer;
	-webkit-box-shadow:0px 3px 5px rgba(0,0,0,0.6);
	-moz-box-shadow:0px 3px 5px rgba(0,0,0,0.6);
	-o-box-shadow:0px 3px 5px rgba(0,0,0,0.6);
	box-shadow:0px 3px 5px rgba(0,0,0,0.6);
}

.button:active{
	background-color:rgb(210, 210, 210);
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(230,230,230)));
	background: -moz-linear-gradient(center bottom, rgb(230,230,230) 0%, rgb(210,210,210) 100%);
	text-shadow:0px -1px 0px white;
	-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.7);
	-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.7);
	-o-box-shadow:0px 1px 3px rgba(0,0,0,0.7);
	box-shadow:0px 1px 3px rgba(0,0,0,0.7);
}