/*
    HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:
	
	Eric Meyer					:: http://ericmeyer.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com
	
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* disable scrollbars because we don't need them! */
html {overflow: hidden;}

/* we use a lot of ULs that aren't bulleted. 
	don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
	white-space: pre; /* CSS2 */
	white-space: pre-wrap; /* CSS 2.1 */
	white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
	word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}
 
/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {outline: none;}

small {font-size: 85%;}

strong, th {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* Fonts used: 
	Sans-serif > OpenSansRegular (Local), Helmet, Freesans, sans-serif
	Serif > Georgia, serif
	Display > CoustardRegular (Local), Georgia, serif
	Icons > IconicFill */

@font-face {
    font-family: 'Georgia';
    src: url('webfonts/georgia.eot');
    src: url('webfonts/georgia.eot?#iefix') format('embedded-opentype'),
         url('webfonts/georgia.woff') format('woff'),
         url('webfonts/georgia.ttf') format('truetype'),
         url('webfonts/georgia.svg#georgia') format('svg');
    font-weight: normal;
    font-style: normal;
}
   
@font-face {
    font-family: 'OpenSansRegular';
    src: url('webfonts/OpenSans-Regular-webfont.eot');
    src: url('webfonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('webfonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('webfonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {
	font-size: 16px;
	font-family:'OpenSansRegular', Helmet, Freesans, sans-serif;
}

/* we like off-black for text */
body, select, input, textarea {color: #333333;}

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

/*    j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* General styles!
-------------------------------------------------------------------------------*/

/* body */
html, body {
    height: 100%; 
    background-color: #333333;
}

/* wrapper */
#wrapper {min-height: 100%;}

/* headers 
-------------------------*/
h1 {font: 36px 'CoustardRegular', Georgia, serif;}
h2 {font: 18px Georgia, serif;}
h3 {font: 18px Georgia, serif;}
h4 {font: italic 18px Georgia, serif;}

/* body copy 
-------------------------*/
p {
    line-height: 1.5em;
}

/* link styles 
-------------------------*/
a, a:visited {
    color: #535353; 
    text-decoration: none;
}
a:hover, a:active {
    color: black;
    text-decoration: underline;
}

/* text styles 
-------------------------*/

.highlight {
    color: #fcd700;
}

.emphasis {
	font-style: italic;
}

.title {
	font-family: 'CoustardRegular', Georgia, serif;
}

.title_alt {
	font-family: Georgia, serif;
}

.text_small {
	font-size: 14px;
}

.text_medium {
	font-size: 18px;
}

.text_large {
	font-size: 22px;
}

.text_huge {
	font-size: 30px;
}

/* alignment
-------------------------*/

.align_center {
	margin: 0 auto;
}

/* grid
-------------------------*/

.grid {
	display: table;
	border-spacing: 10px;
	color: #eeeeee;
}

.grid ul {
	display: table-row;
}

.grid li {
	display: table-cell;
	text-align: center;
	padding: 10px;
}

.grid_compartment {
	border: 1px #dddddd solid; 
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.grid_cell_inner {
	width: 100px;
	margin: 0 auto;
}

.grid_cell_inner_circle {
	width: 100px;
	height: 100px;
	-moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
	overflow: hidden;
}

.grid p {
	margin: 5px 0;
}

.grid img {
	margin: 0 auto;
}

/* score
-------------------------*/

.score_counter {
	vertical-align: bottom;
}

.score_count {
	font-family: Georgia, serif;
	font-size: 32px;
}

.score_count_under {
	color: #aaaaaa;
	font-size: 20px;
}

.score_count_highlight {
	color: #fcd700;
}

.score_label {
	color: #aaaaaa;
	font-size: 13px;
}

.score_divider {
	width: 75%;
	border: 1px #aaaaaa dotted;
	margin: 5px auto;
}

/* info panel 
-------------------------*/

.info_panel {
	display: table;
	padding: 10px;
    overflow: auto;
	background: #222222;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
}

.info_panel_nobg {
   background: none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow:  none;
}

.info_panel header {
    text-align: center;
    color: #ffffff;
}

.info_panel p {
    text-align: center;
    color: #eeeeee;
}

.info_panel a, .info_panel a:visited {
    color: #fee972;
}
.info_panel a:hover, .info_panel a:active {
    color: #fcd700;
}

/* errors 
-------------------------*/

.error {
    width: 540px; 
    height: 315px;
    position: absolute; 
    left: 50%; 
    top: 50%;
    margin: -197px 0 0 -270px;
	pointer-events: auto;
}
.error a, .error a:visited {
    color: #fee972;
}
.error a:hover, .error a:active {
    color: #fcd700;
}
.error header {
    padding: 20px 20px 5px 20px;
}
.error_explanation {
    padding: 10px 20px 20px 20px;
}

.nerdtalk {
	font-size: 13px;
    padding: 0px 20px 20px 20px;
}

.browsers {
    position: relative;
    overflow: hidden;
    height: 156px;
    margin: 0 20px 0 20px;
}

.browsers_each {
    width:165px;
    height:95px;
    text-decoration:none;
    text-align:center;
    background-position: 50% 0;
    background-repeat:no-repeat;
    position:absolute;
}

.chrome {
    background-image:url(../assets/icons/browsers_chrome.png);
    top:18px;
    left:0px;
    padding-top:95px;
}

.firefox {
    background-image:url(../assets/icons/browsers_firefox.png);
    top:16px;
    left:165px;
    padding-top:95px;
}

.safari {
    background-image:url(../assets/icons/browsers_safari.png);
    top:14px;
    left:330px;
    padding-top:95px;
}

/* preloading 
-------------------------*/

#preloading {
	position: fixed;
	margin-left: -192px;
	margin-top: -102px;
	top: 50%;
	left: 50%;
}

/* footer 
-------------------------*/
.sticky_footer {
	position: relative; 
    width: 650px;
    height: 130px;
	margin: 0 auto;
	margin-top: -130px;
    clear: both;
}
footer {
    color: #eeeeee;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.85);
}
footer a, footer a:visited {
    color: #eeeeee;
}

footer a:hover, footer a:active {
    color: #ffffff;
}

footer header {
    float: left;
	margin-top: 0;
}

footer nav {
    overflow: auto; 
    width: 100%;
	min-width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
    margin: 0 auto;
    font-size: 18px;
}

footer nav span {
    float: left; 
    padding-left: 20px;
	padding-right: 20px;
    margin: 14px 10px 0 10px;
}

footer #logo_icona {
	width: 48px;
	height: 48px;
	margin-left: -30px;
	margin-right: -5px;
	margin-top: -4px;
}

footer #logo_iconb {
	width: 48px;
	height: 48px;
	margin-left: -20px;
	margin-right: -32px;
	margin-top: -9px;
}

footer #logo_iconc {
	width: 32px;
	height: 32px;
	margin-left: -16px;
	margin-right: -32px;
	margin-top: 7px;
}

footer nav .icon {
    padding: 0;
	margin: 10px 25px 0 -20px;
    border: none;
}

footer .copyright {
    clear:both; 
    text-align: center;
}

/* TipTip jQuery plugin
-------------------------*/

#tiptip_holder {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99999;
}

#tiptip_holder.tip_top {
	padding-bottom: 5px;
}

#tiptip_holder.tip_bottom {
	padding-top: 5px;
}

#tiptip_holder.tip_right {
	padding-left: 5px;
}

#tiptip_holder.tip_left {
	padding-right: 5px;
}

#tiptip_content {
	font-size: 15px;
	color: #eeeeee;
	padding: 4px 8px;
	background-color: #222222;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.25);
}

#tiptip_content .disabled {
	font-size: 11px;
	color: #fcd700;
    text-align: center;
}

#tiptip_arrow, #tiptip_arrow_inner {
	position: absolute;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
	height: 0;
	width: 0;
}

#tiptip_holder.tip_top #tiptip_arrow {
	border-top-color: #fff;
	border-top-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_bottom #tiptip_arrow {
	border-bottom-color: #fff;
	border-bottom-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_right #tiptip_arrow {
	border-right-color: #fff;
	border-right-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_left #tiptip_arrow {
	border-left-color: #fff;
	border-left-color: rgba(255,255,255,0.35);
}

#tiptip_holder.tip_top #tiptip_arrow_inner {
	margin-top: -7px;
	margin-left: -6px;
	border-top-color: #222222;
}

#tiptip_holder.tip_bottom #tiptip_arrow_inner {
	margin-top: -5px;
	margin-left: -6px;
	border-bottom-color: #222222;
}

#tiptip_holder.tip_right #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -5px;
	border-right-color: #222222;
}

#tiptip_holder.tip_left #tiptip_arrow_inner {
	margin-top: -6px;
	margin-left: -7px;
	border-left-color: #222222;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {	
	#tiptip_content {
		padding: 4px 8px 5px 8px;
		background-color: #222222;
	}
	#tiptip_holder.tip_bottom #tiptip_arrow_inner { 
		border-bottom-color: #222222;
	}
	#tiptip_holder.tip_top #tiptip_arrow_inner { 
		border-top-color: #222222;
	}
}

/* image replacements 
-------------------------*/
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* unselectable 
-------------------------*/
.unselectable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;   
}

/* hidden elements 
-------------------------*/

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Print styles!
-------------------------------------------------------------------------------*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}


/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {
	
		
}

@media all and (orientation: portrait) {
	
}

@media all and (orientation: landscape) {
	
}