/*
(c) Andy Higgs & Si Jobling 2009-2012
[d] The Higgs Design Co.
[w] http://andyhiggs.co.uk + http://sijobling.com
[t] @aajhiggs + @si
*/

/* behavior: url('pie.php'); */

/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.1
*/
html{color:#000;background:#171717;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;text-rendering: optimizeLegibility;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
strong{font-weight:bold;}em{font-style:italic;}#access{position:absolute;left:-9999px;}a:active,a:hover{outline:0;}

/* MAIN STYLES */
/*-webkit-text-size-adjust: none;*/
html,body {background: #171717 url(../img/tile-bg.png) repeat-x 50% 0;color: #fff;font: 13px/1 "Lucida Grande", Arial, sans-serif;width:100%;}

p {line-height:1.5;}

a {color:#FFF;}

/* WRAPPER */

#wrapper {margin:0 auto;padding: 0 40px;max-width:800px;position: relative;}

/* HEADER */

#branding {text-align: center;margin-bottom:-40px;height:216px;font-family: Gill Sans, sans-serif;text-transform: uppercase;letter-spacing: 2pt;padding-top:3px;}
#branding h1 {background: url(/img/f1-badge.png) no-repeat 50% 5px;height:216px;font-size: 18px;line-height:1.6;text-shadow:0px 0px 5px #000;-webkit-text-shadow:0px 0px 5px #000;-moz-text-shadow:0px 0px 5px #000;}
#branding a {text-decoration: none;display: block;padding-top:120px;overflow:hidden;zoom:1;text-align: center;}
#branding a span.title {display: block;}
#branding a span.strap {display: block;font-size:12px;}
#branding a span.dash {display: none;}


/* FOOTER */

#footer {text-align: center;font-size: 10px;padding:24px;color:#666;}
#footer p {line-height:1.75;}
#footer a {color:#888;text-decoration: none;background:rgba(255,255,255,0.05);border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;padding:3px 6px;position:relative;margin-top:-3px;margin-bottom:-3px;transition:0.1s ease-in-out;-webkit-transition:0.1s ease-in-out;-moz-transition:0.1s ease-in-out;}
#footer a:hover,
#footer a:focus {background:rgba(255,0,0,0.4);color:#FFF;box-shadow:0px 0px 7px rgba(20,0,0,0.7);-moz-box-shadow:0px 0px 7px rgba(20,0,0,0.7);-webkit-box-shadow:0px 0px 7px rgba(20,0,0,0.7);}
#footer a.twitter:hover,
#footer a.twitter:focus {background:rgba(40,160,215,0.4);}



/* CONTENT */

/* INSTALL SCREEN */
#install {position: absolute;left:50%;bottom:5%;width:230px;margin-left:-125px;color:#FFF;padding:110px 6px 0;font-size:12px;text-align: center;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;text-shadow:0px -1px 1px #000, 0px 1px 1px #FFF;-webkit-text-shadow:0px -1px 1px #000, 0px 1px 1px #FFF;-moz-text-shadow:0px -1px 1px #000, 0px 1px 1px #FFF;border:3px solid #FFF;background: #000 url(/img/add-to-homescreen.png) no-repeat 50% 6px;box-shadow: 0 0 15px rgba(0,0,0,1);-moz-box-shadow: 0 0 15px rgba(0,0,0,1);}
#install::after {
	content:"";
	position:absolute;
	bottom:-15px; /* value = - border-top-width - border-bottom-width */
	left:105px; /* controls horizontal position */
	border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
	border-style:solid;
	border-color:#FFF transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

.ipad #install {bottom:auto;top:5%;left:10%;margin-left:0;}
.ipad #install::after {
	bottom:auto;
	top:-15px;
	left:40px;
	border-width:0 15px 15px;
	border-color:#FFF transparent;
}

#install p {padding: 10%;}
#install strong,
#install button {display:block;margin:0 auto;}
#install button {font-size: 26px;margin-top:60px;height:80px;width:300px;overflow:hidden;}
#install button span {display:block;font-size:14px;padding:6px 0;}
#install_fade {top:0;right:0;left:0;bottom:0;position:fixed;width:100%;}

/* SOCIAL */


#wrapper {position: relative;}
#social {position:fixed;top:-1px;left:-1px;background:rgba(255,255,255,0.8);border:1px solid rgba(255,255,255,0.9);padding:4px 4px 4px 12px;float: left;-webkit-border-bottom-right-radius: 3px;-moz-border-radius-bottomright: 3px; border-bottom-right-radius: 3px;}
#social li {float: left;width:100px;}
#social li.twitter {padding-top:1px;}
#social li.gplus {padding-top:3px;width:70px;}
.standalone #social {display: none;}

/* LINKS */

.link-space {text-align: center;font-size: 13px;padding:1em 0;}


/* TIMEZONE */

.js #settings,
.standalone #settings,
.standalone #show_download_subscribe {display:none;}
#settings {opacity:0.8;background-color: #FFF;padding:6px 12px;overflow:hidden;zoom:1;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;margin-top: 12px;box-shadow: 2px 0 10px rgba(0,0,0,0.8);-webkit-box-shadow: 2px 0 10px rgba(0,0,0,0.8);-moz-box-shadow: 2px 0 10px rgba(0,0,0,0.8);margin-bottom: 16px;}
#settings.loading {background: #FFF url(/img/loading.gif) no-repeat 90% 50%;}
#timezone_form {float:left;}
#timezone_form label {color:#000;
font:9px/13px Verdana, Arial, sans-serif;
text-transform: uppercase;
letter-spacing:1pt;}
#timezone_name {text-align: center;color:#888;padding:10px 0 12px;}
#timezone_name a {color:#CCC;}
.js #timezone_form button {position:absolute;top:0;left:-9999px;overflow: hidden;}
.js #close_settings {float:right;}

/* RACE TABLE */

table#formula_one_events {
	color: #CCC;
	font-size:13px;
	margin:8px auto 16px;
	width:100%;
	border-collapse:collapse;
}
table#formula_one_events thead {
	line-height: 32px;
	background: url(../img/tile-table-header.png);
	height: 32px;
	color: #FFF;
	margin: 0;
	border-top: 1px solid #600;
	border-bottom: 1px solid #111;
}

table#formula_one_events tbody {
	border-bottom: 1px solid #222;
}

table#formula_one_events tbody.next-event tr td {
	color:#fff1aa !important;
}

table#formula_one_events tbody.tbc tr td {
	color:#AA0F0F !important;
}

table#formula_one_events tbody.next-event img {position:relative;top:1px;margin-left:6px;}

table#formula_one_events tbody.in-past tr td {
	color:#777;
}

table#formula_one_events tbody.in-past tr.race td {
	color:#999;
}

table#formula_one_events tbody.even td  {
	background: rgba(255,255,255,0.03);
}

table#formula_one_events tr.race {
	color: #CCC;
}
table#formula_one_events tr.hide td {
    color: #EEE !important;
    
}
.js table#formula_one_events tr.race {
	cursor:pointer;
}
table#formula_one_events td {
	padding: 8px 0;
}
table#formula_one_events tr.qualifying td {
	padding-bottom:12px;
}
table#formula_one_events th.event-column {
	padding-left: 32px;
	width: 240px;
}
table#formula_one_events td.event-column {
	padding-left: 34px;
	width: 240px;
}

table#formula_one_events th {
    font-size:9px;
    font-family: Verdana, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing:1pt;
    border-left:none;
    border-right:none;
}

table#formula_one_events td.date-column,
table#formula_one_events td.time-column {
    font:9px/13px Verdana, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing:1pt;
}

table#formula_one_events th.date-column,
table#formula_one_events td.date-column {
	width: 114px;
    text-align: right;
    padding-right:12px;
}
table#formula_one_events th.time-column,
table#formula_one_events td.time-column {
	width: 54px;
	padding-right:12px;
    text-align: right;
}

table#formula_one_events tr.race td.event-column span.bullet {
	background-image: url(/img/plus-minus.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	display:block;
	width:17px;
	height:15px;
	overflow:hidden;
	zoom:1;
	float: left;
	text-indent:-9999px;
	margin-left: -32px;
	margin-top: -3px;
}
table#formula_one_events tr.race.hide td.event-column span.bullet {
	background-position: 2px -20px;
}
table#formula_one_events tr:hover td.event-column span.bullet,
table#formula_one_events tr:focus td.event-column span.bullet {
	background-position: 0px -36px;
}

table .geo, table caption, table .extra, table .uid, table .organizer  {position: absolute;left:-9999px;overflow: hidden;}

.js table#formula_one_events tr.first-practice,
.js table#formula_one_events tr.second-practice,
.js table#formula_one_events tr.third-practice,
.js table#formula_one_events tr.qualifying {display:none;}

table#formula_one_events tr.first-practice td.event-column,
table#formula_one_events tr.second-practice td.event-column,
table#formula_one_events tr.third-practice td.event-column,
table#formula_one_events tr.qualifying td.event-column {padding-left:44px;}

/* Download */

#show_download_subscribe {font-weight: bold;display: block;width:100%;color:#222;padding:7px 0;margin:0 auto;text-align: center;text-decoration: none;font-size: 12px;background-color: #EEE;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.1, rgb(161,161,161)),
        color-stop(0.78, rgb(181,181,181))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(161,161,161) 10%,
        rgb(181,181,181) 78%
    );
overflow:hidden;zoom:1;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;margin-top: 12px;box-shadow: 2px 0 10px rgba(0,0,0,0.8);-webkit-box-shadow: 2px 0 10px rgba(0,0,0,0.8);-moz-box-shadow: 2px 0 10px rgba(0,0,0,0.8);}
#show_download_subscribe p {text-shadow:0px 1px 1px #DDD;-webkit-text-shadow:0px 1px 1px #DDD;-moz-text-shadow:0px 1px 1px #DDD;}					
#show_download_subscribe:hover,
#show_download_subscribe:focus {background:#FFF;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.1, rgb(181,181,181)),
        color-stop(0.78, rgb(201,201,201))
    );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(181,181,181) 10%,
        rgb(201,201,201) 78%
    );
}
#download_subscribe {background:#000;background:rgba(0,0,0,0.8);padding:24px 32px;margin: 0 4px 8px;position:relative;overflow:hidden;zoom:1;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.js #download_subscribe {display:none;}
#download_subscribe label {
    font:10px/13px Verdana, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing:1pt;
}
#download_subscribe p {
    margin-bottom: 8px;
}
#download_subscribe fieldset {margin:0 auto 16px;width:90%;overflow:hidden;zoom:1;}
#download_subscribe .field {float:left;width:20%;}
#download_subscribe .buttons {clear:both;text-align: center;}
#download_subscribe .field input {position:relative;top:1px;margin-right:3px;}
#download_subscribe h3 {text-align: center;margin-bottom: 24px;}
#download_subscribe h2 {font: 12px/1 "Gill Sans", "p22-underground-1","p22-underground-2", sans-serif;text-transform: uppercase;letter-spacing:1pt;text-align: center;margin-bottom: 16px;text-shadow:0px 0px 2px #000;-webkit-text-shadow:0px 0px 2px #000;-moz-text-shadow:0px 0px 2px #000;}
#download_options {width:100%;overflow:hidden;zoom:1;}
#download_options li {float:left;margin:0;text-align: center;width:33.3%;}
#download_options li > a,
#download_options li > div {display:block;padding:16px 4px;position: relative;text-decoration: none;margin:0 10px;}
#download_options li > a h2,
#download_options li > div h2 {display:block;margin-bottom:13px;font: 13px/1 "Gill Sans", "p22-underground-1","p22-underground-2", sans-serif;padding-bottom:4px;border-bottom:1px solid #222;}
#download_options li > a p,
#download_options li > div p {display:block;margin-bottom:0;line-height:1.5em;color:#999;text-align: center;}
#download_options li > div:hover h2,
#download_options li > a:hover h2 {color:#fff1aa;border-bottom:1px solid #FFF;}
#download_subscribe button {margin-top:16px;}
#selection_advice {margin-bottom:16px;text-align: center;}
.js #selection_advice h2 {display:none;}


#set_alarms .field {width:100%;}
#alarm-mins {width:3em;margin:0 .45em 0 .25em !important;}

/* Smartphones - max 480 × 320 */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    #branding {margin-bottom:-54px;}
    #branding h1 {font-size:12px;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;letter-spacing:1pt;}
    #branding h1 span.strap {font-size:10px;}
	#show_download_subscribe {width:80%;margin:0 5% 8px;padding-left:5%;padding-right:5%;}
	#wrapper #change_time {display: block;float: none;clear: both;margin-left:auto;margin-right:auto;width:50%;}
    table#formula_one_events {width:100%;}
    table#formula_one_events th {line-height:1.3;padding-top:6px;padding-bottom:6px;font-weight: bold;}
    table#formula_one_events th.event-column {padding-left:4px;text-indent: -9999px;}
    table#formula_one_events td.event-column {line-height:1.3;padding-left:20px;}
    table#formula_one_events td.event-column .location,
    table#formula_one_events td.event-column .comma {display:none;}
    table#formula_one_events td.event-column img {margin-left:0;}
    table#formula_one_events tr.race td.event-column span.bullet {margin-left:-24px;margin-top:-1px;}
    table#formula_one_events td.date-column span {display: none;}
    #social {right:-1px;width:100%;}
    #wrapper {padding:28px 0 0;}
    #install p {font-size:20px;}
    #install button {font-size:20px;width:100%;}
    #install button span {font-size:11px;}
    #footer p {line-height:2;}
    #settings label {display:none;}
    #timezone_name button {display: block;margin:8px auto 0;}
    #timezone_name {padding:0 0 4px;}
    #download_options li#download_option {display:none;}
}
/* iPhone 4 - 960 × 640 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    #branding {margin-bottom:-54px;}
    #branding h1 {font-size:12px;letter-spacing:1pt;}
    #branding h1 span.strap {font-size:10px;}
	#show_download_subscribe {width:80%;margin:0 5% 8px;padding-left:5%;padding-right:5%;}
	#wrapper #change_time {display: block;float: none;clear: both;margin-left:auto;margin-right:auto;width:50%;}
    table#formula_one_events {width:100%;}
    table#formula_one_events th {line-height:1.3;padding-top:6px;padding-bottom:6px;font-weight: bold;}
    table#formula_one_events th.event-column {padding-left:4px;text-indent: -9999px;}
    table#formula_one_events td.event-column {line-height:1.3;padding-left:20px;}
    table#formula_one_events td.event-column .location,
    table#formula_one_events td.event-column .comma {display:none;}
    table#formula_one_events td.event-column img {margin-left:0;}
    table#formula_one_events tr.race td.event-column span.bullet {margin-left:-24px;margin-top:-1px;}
	table#formula_one_events td.date-column span {display: none;}
	#social {right:-1px;width:100%;}
    #wrapper {padding:28px 0 0;}
    #install p {font-size:20px;}
    #install button {font-size:20px;width:100%;}
    #install button span {font-size:11px;}
    #footer p {line-height:2;}
    #settings label {display:none;}
    #timezone_name button {display: block;margin:8px auto 0;}
    #timezone_name {padding:2px 0 4px;}
    #show_download_subscribe {margin:0 3%;width:88%;padding:7px 3%;}
    #download_subscribe .field {float:none;margin-bottom:8px;clear:both;width:75%;padding-left:25%;}
    #download_subscribe button {margin-top:0;}
    #download_options li button {margin-top:8px;}
    #download_options li {clear:both;width:100%;float:none;overflow:hidden;zoom:1;}
    #download_options li#download_option {display:none;}
}
/* iPads (landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    #wrapper {max-width:100%;}
    #branding {height:126px;margin-bottom:-50px;margin:0 0 -52px;padding-top:10px;}
    #branding h1 {background-position:0 5px;height:126px;}
    #branding a {padding-top:20px;}
    table#formula_one_events {font-size:16px;width:944px;text-shadow:0px 0px 2px #000;-webkit-text-shadow:0px 0px 2px #000;-moz-text-shadow:0px 0px 2px #000;font-family: "Gill Sans", "p22-underground-1","p22-underground-2", sans-serif;}
    table#formula_one_events th {font-size:13px;font-family: "Gill Sans", "p22-underground-1","p22-underground-2", sans-serif;} 
    table#formula_one_events td.time-column,
    table#formula_one_events td.date-column {font-weight: bold;font-size:13px;font-family: "Gill Sans", "p22-underground-1","p22-underground-2", sans-serif;}
    #timezone_name {font-size:14px;padding-bottom:14px;}
    #settings {margin-top:50px;}
    #settings label {font-size:12px;font-family: "Gill Sans", "p22-underground-1","p22-underground-2", sans-serif;margin-right:6px;}
    #show_download_subscribe {width:60%;}
    #download_options li {width:50%;}
    #download_options li#download_option {display:none;}
}

/* iPads (portrait) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    #wrapper {max-width:100%;}
    #branding {margin-bottom:-45px;padding-top:10px;}
	table#formula_one_events {font-size:18px;width:668px;text-shadow:0px 0px 2px #000;-webkit-text-shadow:0px 0px 2px #000;-moz-text-shadow:0px 0px 2px #000;font-family: "Gill Sans", "p22-underground-1","p22-underground-2", sans-serif;}
    table#formula_one_events th {font-size:13px;font-family: "Gill Sans", "p22-underground-1","p22-underground-2", sans-serif;} 
    table#formula_one_events td.time-column,
    table#formula_one_events td.date-column {font-weight: bold;font-size:14px;font-family: "Gill Sans", "p22-underground-1","p22-underground-2", sans-serif;}
    #timezone_name {font-size:13px;}
    #settings {margin-left:12px;margin-right:12px;}
    #settings label {font-size:12px;font-family: "Gill Sans", "p22-underground-1","p22-underground-2", sans-serif;margin-right:6px;}
    #settings.loading {background-position: 82% 50%;}
    #timezone_name {padding-bottom:8px;}
    #download_options li {width:50%;}
    #download_options li#download_option {display:none;}
}