/* reseting browser default styles */
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, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

@font-face {
    font-family: BerkshireSwashFont;
    src: url(../fonts/BerkshireSwash.otf);
}

body
{
	background-color:#000000;
	overflow: hidden;
	
	font-family: 'BerkshireSwashFont';
    -webkit-text-size-adjust: none; /* prevent font increase on mobile safari */
}



.content
{
	position:absolute;
	
	width: 1024px;
	height: 768px;
	
	z-index: 5;
}

.templates
{
	position: absolute;
	display: none;
	
	z-index: -1000;
}

.template_font
{
    font-family:"BerkshireSwashFont";
    font-size: 12px;
    fill:#205058;
    text-anchor:middle;
}

.page
{
	position:absolute;
	overflow:visible;
	
	width: 1024px;
	height: 768px;
	
	z-index: -1;
}

.noselect
{
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
	cursor: default;
}


.bgImg
{
	position:absolute;
	overflow:hidden;
	
	width:1792px;
	height:768px;
	
    background-repeat: no-repeat;
    background-position: center center;
	
	z-index: -1;
}


#home.bgImg 
{
	background-image : url("../img/bg_home.png");
}

#game.bgImg
{
	background-image : url("../img/bg_game.png");
}

#bg.bgImg
{
	background-image : url("../img/bg.png");
}

.home_header
{
	margin:0px auto;
	width: 100%;
	text-align:center;
	vertical-align:middle;
	margin:50px 0px;
}

.home_header_text
{
	display: inline;
	margin:0px 30px;
	font-size:90px;
	color:#FFFFFF;
}

.home_header_image
{
	width:190px;
	height:42px;
	padding-bottom:10px;
}

.content_page_holder
{
	width:660px;
	margin:45px auto;
	text-align:center
}

.content_page_header_text
{
	font-size:40px;
	color:#FFFFFF;
}

.howtoplay_instruction_text
{
	font-size:24px;
	color:#FFFFFF;	
	padding-top:180px;
}


.content_page_holder_about
{
	width:750px;
	margin:45px auto;
	text-align:center
}
.about_text
{
	font-size:23px;
	color:#FFFFFF;	
	padding-top:100px;
}

.about_spacing
{
    font-size:10px;
}










.game_arrow
{
	width:30px;
	height:40px;
	margin:0px 20px;
}

.game_clock
{
	width:40px;
	height:40px;
}

.timer_container
{
	position:absolute;
	height:40px;
}

.game_timer
{
	display: inline-block;
	margin-left:10px;
	font-size:33px;
	color:#FFFFFF;
	
	line-height: 35px;
	vertical-align:top;

    width:80px;
    overflow:visible;
}


.game_question
{
    /*display:inline-block;*/
    width:680px;
    color:#FFFFFF;
    font-size:31px;
    text-align:center;
    /*position:relative;*/
}

.game_answer
{
    /*position:relative;*/
}



.game_meta_holder
{
    position:absolute;
    font-size:33px;
	color:#FFFFFF;
}

.game_meta_text
{
	display: inline-block;
	margin-left:5px;
	font-size:33px;
	color:#FFFFFF;
	
	line-height: 35px;
	vertical-align:top;
}

#award_value.game_meta_text
{
    width:50px;
    overflow:visible;
}


.star_icon
{
    width:35px;
    height:33px;
}











.game_complete_score_holder
{
    position:absolute;
    font-size:40px;
	color:#FFFFFF;
}

.game_complete_meta_text
{
	display: inline-block;
	margin-left:5px;
	
	line-height: 40px;
	vertical-align:top;
}

.yellow
{
    color:#FDE600;
}


.white
{
    color:#FFFFFF;
}


.game_complete_input_form {
    position: absolute;
    display:block;
    width:200px;
}

.input_underline
{
    width:200px;
    height:2px;
    float:left;
}

.input_spacer
{
    float:left;
    height:20px;
}

.game_complete_input_form input[type="text"]{
    outline: 0;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    font-size: 18pt;
    text-decoration: none;
    font-family: BerkshireSwashFont;
    width: 200px;
}

::-webkit-input-placeholder {
  color: #FDE600;
}


.game_complete_button_text
{
    display: inline-block;

    font-size:24px;
    color:#FFFFFF;

    vertical-align:top;
	line-height: 40px;
}

.game_complete_button
{
    white-space: nowrap;
}

.game_complete_arrow
{
	width:30px;
	height:40px;
	margin:0px 5px;
}





.highscore_table
{
    position:absolute;
    width:550px;
}

.self_result
{
    display:inline-block;
    height: 32px;
    width: 100%;
}

.self_arrow
{
	width:30px;
	height:40px;
	margin-left: 10px;
    margin-top: -4px;
    float:left;
}


.self
{
    padding: 0;
    margin-left: 0px;
    margin-right: 0px;
    left: 0;
    right: 0;
    list-style-type: none;

    color:#ffffff;
    font-size:24px;

    float:right;
    width:500px;
}

.highscore_list
{
    padding: 0;
    margin-left: 50px;
    margin-right: 0px;
    left: 0;
    right: 0;
    list-style-type: none;

    color:#ffffff;
    font-size:24px;
}


ul li{
    clear: both;
}

ul li span:first-child
{
    float: left;
    padding: 0 5px 0 0;
    margin: 0;
}

ul li span + span
{
    float: right;
    padding: 0 0 0 5px;
    margin: 0;
}

ul li::after
{
    content: "";
    display: block;
    overflow: hidden;
    height: 0.8em;
    border-bottom: 2px dotted;
}

.highscore_separator
{
    padding-left:50px;
    width:500px;
    height:3px;
    margin-top:15px;
    margin-bottom:25px;
}


.mute
{
	position:absolute;
	
	width: 42px;
	height: 42px;
	
	z-index: 10;
    cursor: pointer;
}

.overlay
{
	position:absolute;
	
	width: 1792px;
	height: 768px;

	z-index:10;
	
	left:-384px;
	top:0;
	
	background-color: rgba(0, 0, 0, 0.8);

    overflow:visible;

}

.overlay_message
{
    position:absolute;

    width:350px;
    font-size:24px;

	color: #FFFFFF;
	text-align:center;
}







.cookie_note
{
	position:absolute;
	
	width: 1792px;
	height: 90px;
	
	z-index:10;
	
	left:-384px;
	top:678px;
	
	background-color: rgba(0, 0, 0, 0.7);
	
	
	font-family: 'Ubuntu', sans-serif;
}

.cookie_text
{
	color: #FFFFFF;
	margin: 15px;
	text-align:center;
}

.cookie_button_holder
{
	width:190px;
	height:25px;
	margin:0px auto;
}

.cookie_button
{
	width:85px; 
	height:25px;
	font-weight:bold;
    
    cursor: pointer;
}

.cookie_button_text
{
    color: #000000;
	font-weight:bold;
    
    cursor: pointer;
}





#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#000000; 
    z-index:99; /* makes sure it stays on top */
}

#preloader_icon {
    width:400px;
    height:400px;
    position:absolute;
    left:50%; 
    top:50%; 
    background-image:url(../img/loader.gif); 
    background-repeat:no-repeat;
    background-position:center;
    margin:-200px 0 0 -200px; /* is width and height divided by two */
}





/* unvisited link */
a:link {
    color: #a3db2b;
    text-decoration:none;
}

/* visited link */
a:visited {
    color: #a3db2b;
    text-decoration:none;
}

/* mouse over link */
a:hover {
    color: #a3db2b;
    text-decoration:underline;
}

/* selected link */
a:active {
    color: #a3db2b;
    text-decoration:underline;
}