/* 
	Document:				styles.css
	Modified date: 			8 Feb 2010
	Created by:				Gemma @ Poke. http://www.pokelondon.com
	Deployment version:		virginracing/static/css/styles.css
	Notes:					Sitewide styles.
	
	
	Stylesheet content:
	- Typography
	- Links
	- Headings 
	- Text styles
	
	- Header
	- Navigation
	- Main Content
	
	- Form styles
	
	- Homepage
	- Drivers landing
	- Drivers detail
	- Partners
	- Launch party
	- Contact Us
	- Static pages
	
	- Background poster image
	- Content slider
	- Footer
	
	- Video Player
	
	- error / deathpage
*/


/* =Typography
-----------------------------------------------------------------------------*/
html, 
body {
	height:100%;
	background: #212121;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:62.5%;
}


/* =Links
-----------------------------------------------------------------------------*/
a           { color: #FFF; text-decoration: none; outline: none; }
a:hover     { color:  #cc0000; }

p a         { text-decoration: underline;}

/* Arrows with changing backrounds */
a.btn { 
    height: 60px; 
    display: block;
    float: left;
    width: auto;
    font-size: 16px;
    line-height: 12px;
    text-transform: uppercase;
    color: #FFF;
}
a.btn:hover{
    color: #000;
}

a.btn:hover .btn-bg,
a.btn:hover .tip,
a.btn:hover .tail { background-position: 0px -60px !important; }

a.btn .btn-bg   { background: url(../images/btn-bg.png) top left repeat-x; height: 60px; float: left;}
a.btn .tip      { background: url(../images/btn-tip.png) top left no-repeat; width: 32px; height: 60px; float: left;}
a.btn .tail     { background: url(../images/btn-tail.png) top left no-repeat; width: 31px; height: 60px; float: left;}

a.btn .btn-text { float: left; height: 25px; margin-top: 22px;}


/* =Headings
-----------------------------------------------------------------------------*/
h1{
    position: static;
    line-height: 0;
}
h1 strong{
    display: block;
    color:#fff;
    text-transform: uppercase;
    font-size: 80px;
    height:64px;
    line-height: 0;
    overflow: hidden;
    letter-spacing: -1px;
}
h1 strong.white{
    color: #FFF;
}
h1 strong.red{
    color: #ca0000;
}
h1 strong.black{
    color: #000;
}

/* Mid 60px text */
#home .wrapper.news h1 strong,
#magazine .wrapper.news h1 strong,
#season-list h1 strong{
    line-height: 0;
    font-size: 60px;
    height: 48px;
}
.news h2{
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
    color: #FFF;
    margin: 0 150px 0 0;
    padding: 7px 0 4px 0;
}


h3 { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 1.1em; 
    font-weight: bold; 
    text-transform: uppercase; 
    color: #FFF; 
}

h4 { font-size: 1em; font-weight:bold;}

p { 
    font-size: 1.4em;
    color: #b1b1b1;
}

ul li {
    color: #b1b1b1;
}

/* =Containers
-----------------------------------------------------------------------------*/
/* Set min/max page width */
#container{
    min-width: 980px;
    max-width: 100%;
    min-height: 100%;
    height: auto!important;
    height: 100%;
    position: relative; 
}

.wrapper {
	left:0;
	height:78%;
	position:relative;
	top:0;
	width:100%;
	z-index:1;
	overflow:hidden;
	clear: both;
}

#news .wrapper {
   height:338px;
}

#news .posterwall {
    position:absolute;
}

.pattern {
	position:absolute;
    background:url(../images/VR_Pattern_20.png);
	z-index:4;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
.logo {
	position:absolute;
	top:0;
	right:0;
	z-index:5;
}

/* Category & date */
.wrapper .info {
	position:absolute;
	left:20px;
	top:19px;
	z-index:5;
}
.wrapper .info .category,
.wrapper .info .date{
    font-weight: bold;
    text-transform: uppercase;
    line-height: 12px;
}
.wrapper .info .category{
    color: #ca0000;
    font-size: 16px;
    margin-left: -1px;
}
.wrapper .info .description{
    color: #c4c4c4;
    font-size: 11px;
    line-height: 16px;
    text-transform: uppercase;
}

.wrapper .info .category p{
    color: #FFF;
    font-size: 16px;
}
.wrapper .info .date{
    color: #FFF;
    font-size: 11px;
}
.wrapper .extranet {
    position:absolute;
    z-index:5;
    top:16px;
    left:20px;
    color:#CA0000;
    font-size:14px;
}

.wrapper .extranet a {
    color:#CA0000;
}


/* =Grid layout
-----------------------------------------------------------------------------*/
.grid-wrapper {
	left:0;
	position:relative;
	top:0;
	width:100%;
	z-index:1;
	overflow:hidden;
	margin-left:0px;
}
.grid-row{
    width:101%;
    float:left;
}
.grid-row .box{
    width:33.33%;
    height:200px;
    float:left;
    background:#999;
    position:relative;
    overflow:hidden;
}
.grid-row .box .pattern{
    z-index: 3;
}

.grid-row .box a{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
}

.grid-row .box a.partners:hover {
    background:url(../images/background/partner-grid-rollover.png);
}

.grid-row .box .box-summary{
    width: 252px;
    height: 50px;
    background: url(../images/box-summary-bg.png) top left no-repeat;
    position: absolute;
    left: 0;
    bottom: 10px;
    z-index: 3;
}

.grid-row .box .box-summary h2,
.grid-row .box .box-summary p{
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 5px;
    line-height: 14px;
}

.grid-row .box .box-summary h2{
    width: 210px;
    text-transform: none;
    padding:0 0 2px 5px;
    margin: 4px 0 0px 0;
    font-size: 12px;
    overflow: hidden;
    font-weight: bold;
    color: #FFF;
}

.grid-row .box .box-summary p{
    text-transform: uppercase;
    font-size: 11px;
    color: #cc0000;
}

/* Hover state  - Use js */
.grid-row .hover .box-summary{
    background: url(../images/box-summary-bg.png) bottom left no-repeat;
}
.grid-row .hover .box-summary h2{
   color: #FFF;
}
.grid-row .hover .box-summary p{
   color: #000;
}


/* =Navigation
-----------------------------------------------------------------------------*/
#nav{
    position: fixed;
    left: 0;
    top: 0;
    width: 160px;
    height: 100%;
    background: #000;
    z-index: 10;
} 
#nav ul,
#nav ul li {
    width: 160px;
}
#nav ul li{
    background:none;
    color: #FFF;
}
#nav ul li a{
    padding: 2px 0 0 10px;
    display: block;
    width: 150px;
    height: 19px;
    font-size: 11px;
}
#nav ul li a:hover{
    background: #212121;
}

/* Blocked nav sections */
#nav ul li.block {
    padding-bottom: 0;
}
#nav ul li.block a{
    padding: 7px 0 20px 10px;
    background: url(../images/nav-block-bg.jpg) top left no-repeat;
    height: 15px;
    line-height: 12px;
}
#nav ul li.block a:hover{
    background: url(../images/nav-block-bg.jpg) 0px -42px no-repeat;
}
#nav ul li.block a.active{
    color: #FFF;
    background: url(../images/nav-block-bg.jpg) 0px -84px no-repeat;
}
/* Put active class on link */
#nav ul li a.active,
#nav ul li.hygeine a.active{
    background: #cc0000;
    color: #FFF;
}

#nav ul li a { 
    color: #FFF; 
    text-transform: uppercase;
}
#nav ul li.hygeine a{ color: #333;}
#nav ul li.newsletter a{ color: #cc0000;}
#nav ul li.newsletter a.active  { color: #FFF;}

#nav #logo-carousel ul{
   position:absolute;
   left:0px;
   bottom: 10px;
   height: 80px;
   overflow: hidden;
}
#nav #logo-carousel ul li {
    width:100%;
    height:80px;
    background:none;
    overflow:hidden;
    position:absolute;
    display:none;
    text-align:center;
}
#nav #logo-carousel ul li a {
    padding:0;
    width:100%;
}
#nav #logo-carousel ul li a:hover{
    background: none;
}



/* =Homepage variants
-----------------------------------------------------------------------------*/
.wrapper{
    position: relative;
}
.wrapper h1{
    position: absolute;
    left: 0;
    bottom: 67px;
    z-index: 4;
}
.wrapper h2{
    position: static;
}
.wrapper a.btn{
    position: absolute;
    z-index: 5;
}

/* Magazine - Feature left */
#main-content .feature-left h1{ 
    text-align: left;
    left: 20px; 
}
#main-content .feature-left a.btn{
    position: absolute;
    bottom: 35px;
    left: 10px;
    text-align: right;
}

/* Magazine - Feature right */
#main-content .feature-right h1{ 
    text-align: right;
    right: 22px; 
}
#main-content .feature-right a.btn{
    position: absolute;
    bottom: 35px;
    right: 12px;
    text-align: right;
}

/* Loading bar */
#main-content .loading {
    height:40px;
    background:red;
    color:#fff;
    background:url(../images/background/loading-bg.jpg);
    display:none;
}

#main-content .loading p {
    float:left;
    color:#fff;
    font-size:1.8em;
    line-height:36px;
    margin:0 0 0 10px;
}

#main-content .loading p.no-content {
    margin:0 0 0 26px;
}

#main-content .loading .snake {
    float:left;
    margin:12px 0 0 16px;
}

/* News - Left aligned, h1 and intro*/
#main-content .news .news-headline{
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 4; 
}
#main-content .news .news-headline h1{ 
   position: static;
}
#main-content .news .news-headline h2{
    position: static;
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase;
    color: #FFF;
    display: block;
    width: 450px;
    padding: 5px 0 8px 0;
}
#main-content .news .news-headline a.btn{
    position: relative;
    top: -15px;
    left: -10px;
}

/* Race Results */
#main-content .results .content{
    width: 800px;
    position: absolute;
    left: 50px;
    top: 120px;
    z-index: 4;
}
#main-content .results a.btn{
    position: absolute;
    left: 550px;
    top: 400px;
}

#main-content .results .content .racer {
    width: 750px;
    float: left;
    clear: both;
    overflow: hidden;
    height: 125px;
    margin-bottom: 40px;
}

#main-content .results h1{
    position: static;
    margin-bottom: 40px;
    text-align: right;
    width: 480px;
    float: left;
}
#main-content .results h1 strong.finish{
    color: #490000;
}

#main-content .results .position{
    width: 250px;
    float: right;
    text-align: left;
}

/* Tiny race results - within grid */
#main-content .box h1 {
   width: 175px;
}

#main-content .box #racer-timo h1 {
    position: absolute;
    left: 10px;
    z-index: 2;
    top: 10px;
}
#main-content .box #racer-lucas h1 {
    position: absolute;
    left: 10px;
    z-index: 2;
    top: 55px;
}
#main-content .box .position{
    width: 80px;
    height: 60px;
    float: left;
    text-align: left;
}
#main-content .box .position img{
    position: absolute;
    left: 165px;
}
#main-content .box #racer-timo .position img {
    z-index: 3;
    top: 12px;
}
#main-content .box #racer-lucas .position img {
    z-index: 3;
    top: 57px;
}


#main-content .box h1{
    text-align: right;
    width: 145px;
    float: left;
    margin-top: 5px;
}
#main-content .box h1 strong{
    font-size: 40px;
    height: 38px;
}
/*#main-content .box .position{
    width: 80px;
    height: 60px;
    margin-left: 10px;
    float: left;
    text-align: left;
}
*/


/* =Overview pages - News, Team, Car, Partners.
-----------------------------------------------------------------------------*/

#news.overview h1{
    top: 120px;
    left: 20px;
}
/* Intro text */
#news.overview .wrapper .content{
    width: 600px;
    position:absolute;
    left:20px;
    top: 260px;
    z-index:5; 
    text-transform: uppercase;
    font-size: 11px;
    color:#C4C4C4;
}
#news.overview .wrapper #latest-tweet{
    position: static;
}
#news.overview .wrapper #latest-tweet .category {
    color:#CA0000;
    font-size:12px;
    line-height: 12px;
    margin-left:-1px;
}
#news.overview .wrapper #latest-tweet .description{
    line-height: 12px;
    color: #c4c4c4;
}
#news.overview .wrapper #latest-tweet .description a{
    color: #c4c4c4;
}

/* =Shared styles - Article template & season list template  
-----------------------------------------------------------------------------*/
/* Gradient at top of page */
#container #container-gradient{
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/background/gradient.png) top left repeat-x;
    height: 549px;
    width: 100%;
    z-index: 3;
}

/* Background swirls */
#container .background-swirl-top{
    position: absolute;
    right: 0;
    top: 0;
    background: #212121 url(../images/background/container.gif) top right repeat-y; 
    width: 1081px;
    height: 1042px;
    z-index: 2;
}
#container .background-swirl-bott{
    position: absolute;
    right: 0;
    top: 0;
    background: #212121 url(../images/background/related-content.gif) top right repeat-y; 
    width: 1050px;
    height: 1211px;
    z-index: 3;
    margin-top: 1200px;
}

#container #main-content,
#related-content{
    float: left;
    width: auto;
    clear: both;
    overflow: visible;
    padding-left: 160px;
    min-width: 820px;
    display: inline; /* for IE6 */
    position: relative;
    z-index: 8; /* Sit this content above backgrounds */
    background: url(../images/background/faux-column.gif) top left repeat-y;
}

#article #main-content .content{
    margin-left: 60px;
}


/* =Article template 
-----------------------------------------------------------------------------*/
#article .article-nav-wrapper,
#article .info,
#article h1,
#article h2,
#article .subhead,
#article .article-content,
#article .caption { margin-left: 60px; clear: both;}

#article .info{
    color: #FFF;
}
#article .article-date{
     color: #cc0000;
}

/* Article content - heading & text */
#article h1{
    margin: 30px 0 30px 60px;
}
#article h1 strong{
    width: 755px;
}

#article h2{
    width: 560px;
    font-size: 18px;
    line-height: 20px;
    color: #b1b1b1;
    margin-bottom:70px;
}

/* Subheaders */
#article .subhead {
    margin: 45px 0 45px 60px;
}
#article .subhead strong{
    display: block;
    color:#fff;
    font-size:55px;
    line-height: 0;
    font-weight: normal;
    letter-spacing: -1px;
    text-transform: uppercase;
    width:800px;
}
#article .subhead strong .cufon-canvas{
    height: 40px;
}
#article .subhead strong.red{
    color: #cc0000;
}

/* Article text */
#article .article-content {
    width: 650px;
    margin: 30px 0 30px 60px;
}
#article .article-content p{
    margin: 0 100px 20px 0;
}
#article .article-content p strong{
    font-weight: bold;
    color:#fff;
}

/* Images with captions */
#article .wrapper{
    margin-left: 0;
}

#article .caption{
    width: 755px;
}
#article .caption p{
    width: 75%;
    margin-top: 10px;
    font-size: 11px;
    font-style: italic;
}

/* Article navigation */
#article .article-nav-links{
    float: left;
    width: 520px;
    margin-left: 60px;
    display: inline; /* for IE6 */
    margin-bottom: 40px;
    background: url(../images/article-nav.png) bottom left no-repeat;
}
#article .article-nav-links li,
#article .article-nav-links a{
    display: block;
    color: #696969;
    text-transform: uppercase;
}

#article .article-nav-links a:hover{
    color: #FFF;
}
#article .article-nav-links ul{
    width: 70%;
    float: right;
    padding-bottom: 11px;
}
#article #related-content .article-nav-links ul{
    padding-bottom: 0;
}

#article .article-nav-links ul li{
    width: auto;
    float: left;
    margin: 12px 0 0 0;
    padding: 0 12px;
    line-height: 16px;
}
#article .article-nav-links .nav-bottom ul li {
    margin:6px 0;
}
#article .article-nav-links .article-all{
    margin: 12px 0 0 0;
    padding-left: 25px;
    width: 100px;
    line-height: 16px;
    float: left;
    background: url(../images/icons/article-all.png) center left no-repeat;
}
#article .article-nav-links .nav-bottom .article-all {
    margin:6px 0;
}
#article .article-nav-links ul .article-prev a{
     padding-right: 25px;
     background: url(../images/icons/article-prev.png) center right no-repeat;
}
#article .article-nav-links ul .article-next a{
     width: 75px;
     display: block;
     padding-left: 25px;
     background: url(../images/icons/article-next.png) center left no-repeat;
}

/* =Hygeine pages
-----------------------------------------------------------------------------*/
/* =Generic page, like article page (not using #article)
-----------------------------------------------------------------------------*/
#page #main-content .content{
    margin-left: 60px;
}
#page .info{
    color: #FFF;
}
#page .article-date{
     color: #cc0000;
}

#page h1{
    margin: 30px 0 30px 60px;
}
#page h1 strong{
    width: 755px;
}
#page h2{
    width: 560px;
    font-size: 18px;
    line-height: 20px;
    color: #b1b1b1;
    margin-bottom:70px;
}
#page h1{
    background: url(../images/article-nav.png) top left no-repeat;
    margin: 40px 0 60px 60px;
    padding-top: 80px;
}
#page h2{
    margin:  0;
    font-weight: bold;
    font-size: 14px;
    color: #FFF;
}
#page h2.intro{
    font-weight: normal;
    font-size: 18px;
    line-height: 20px;
    color: #b1b1b1;
}
#page .content{
    width: 750px;
    margin-bottom: 100px;
}
#article.error .content{
    margin-bottom: 0;
}
#page .content p,
#page .content ul{
    font-size: 11px;
    margin-bottom: 15px;
}
#page .content ul li{
    line-height: 16px;
    background: url(../images/bullet.gif) 0px 5px no-repeat;
    padding-left: 15px;
}

#page .content p a{
    text-decoration: none;
    color:#cc0000;
}
#page .content p a:hover{
    color: #FFF;
}

/* =Related content
-----------------------------------------------------------------------------*/
#related-content #related-links ul,
#related-content #sharing ul,
#related-content #partners ul{
    width: 755px;
    float: left;
    clear: both;
    padding: 0 0 100px 0;
}
#related-content li{
    float: left;
    margin-bottom: 10px;
}

#related-content #related-links,
#related-content #sharing,
#related-content #partners,
#related-content .article-nav-wrapper{
   margin-left: 60px;
}
#related-content h3{
    float: left;
    clear: both;
    overflow: hidden;
    width: 755px;
    background: url(../images/divider.png) bottom left no-repeat;
    margin-bottom: 20px;
    padding-bottom: 8px;
}

/* Related content links */
#container #related-links{
    padding-top: 100px;
    width: 755px;
}
#container #related-links ul,
#container #related-links ul li{
    width: 75%;
    clear: both;
}
#container #related-links li a{
   font-size: 1.8em;
   line-height: 19px;
   color: #b1b1b1;
}
#container #related-links li a:hover{
    color: #FFF;
}
#container #related-links li p{
    font-size: 1.1em;
    line-height: 19px;
    font-style: italic;
    color: #6b6b6b;
}


/* Partners links */
#container #partners li{ 
    width: 24.9%; 
    float: left;
    margin-bottom: 20px;
}

#container #partner-list li a {
    display:block;
    width:180px;
    height:101px;
    overflow: hidden;
    text-indent: -1000px;
    background-repeat: no-repeat;
    background-position: top right;
}
#container #partner-list li a:hover{
    background-position:top left;
}

#partner-list li a#partners-bridgestone {
    background-image:url('../images/partners/horizontal/bridgestone.png');
}
#partner-list li a#partners-carbon-green {
    background-image:url('../images/partners/horizontal/carbon-green.png');
}
#partner-list li a#partners-clear {
    background-image:url('../images/partners/horizontal/clear.png');
}
#partner-list li a#partners-csc {
    background-image:url('../images/partners/horizontal/csc.png');
}
#partner-list li a#partners-fxpro {
    background-image:url('../images/partners/horizontal/fxpro.png');
}
#partner-list li a#partners-kappa {
    background-image:url('../images/partners/horizontal/kappa.png');
}
#partner-list li a#partners-marussia {
    background-image:url('../images/partners/horizontal/marussia.png');
}
#partner-list li a#partners-nexa {
   background-image:url('../images/partners/horizontal/nexa-autocolor.png');
}
#partner-list li a#partners-oxigen {
    background-image:url('../images/partners/horizontal/oxigen.png');
}


/* Sharing links */
#related-content #sharing{
    margin-top: 100px;
}
#container #sharing ul{
    padding: 20px 0 100px 0;
}
#container #sharing li{ 
    width: 16.5%;
    text-align: left;
}
#container #sharing li span.icon{
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    margin-right: 10px;
    float: left;
}
#container #sharing li a{
    font-size: 1.1em;
    line-height: 1.4;
    display: block;
    color: #ccc;
}
#container #sharing li a:hover{
    color: #FFF;
}
#container #sharing li.facebook span.icon{
    background: url(../images/icons/sharing.gif) 0 0 no-repeat;
}
#container #sharing li.facebook a:hover span.icon{
    background: url(../images/icons/sharing.gif) 0 -30px no-repeat;
}
#container #sharing li.twitter span.icon{
    background: url(../images/icons/sharing.gif) -30px 0 no-repeat;
    height: 30px;
}
#container #sharing li.twitter a:hover span.icon{
    background: url(../images/icons/sharing.gif) -30px -30px no-repeat;
}
#container #sharing li.email span.icon{
    background: url(../images/icons/sharing.gif) -60px 0 no-repeat;
    height: 30px;
}
#container #sharing li.email a:hover span.icon{
    background: url(../images/icons/sharing.gif) -60px -30px no-repeat;
}
#container #sharing li.delicious span.icon{
    background: url(../images/icons/sharing.gif) -90px 0 no-repeat;
    height: 30px;
}
#container #sharing li.delicious a:hover span.icon{
    background: url(../images/icons/sharing.gif) -90px -30px no-repeat;
}

#container #sharing li.stumbleupon span.icon{
    background: url(../images/icons/sharing.gif) -120px 0 no-repeat;
    height: 30px;
}
#container #sharing li.stumbleupon a:hover span.icon{
    background: url(../images/icons/sharing.gif) -120px -30px no-repeat;
}
#container #sharing li.digg span.icon{
    background: url(../images/icons/sharing.gif) -150px 0 no-repeat;
    height: 30px;
}
#container #sharing li.digg a:hover span.icon{
    background: url(../images/icons/sharing.gif) -150px -30px no-repeat;
}

/* Article navigation */
#related-content #article-nav{
    clear: both;
    float: left;
    width: 755px;
    background: url(../images/divider.png) top left no-repeat;
    margin-left: 60px;
    display: inline; /* for IE6 */
}
#related-content #article-nav .article-nav-links{
    margin-left: 0;
    float: left;
    width: 755px;
    background: url(../images/divider.png) bottom left no-repeat;
}
#related-content #article-nav .article-nav-footer{
    height: 1px;
    line-height: 0;
    background: url(../images/divider.png) bottom left no-repeat;
}
#related-content #article-nav .article-nav-links ul{
    width: 50%;
}


/* =Season list template 
-----------------------------------------------------------------------------*/
/* Page title */
#season-list #main-content .content{
    margin-left: 60px;
}
#season-list #main-content .content h1{
    margin-top: 42px;
}

/* Season list */
#season-list ul.season-info{ 
    width: 755px;
    float: left;
    overflow: hidden;
    margin-top: 110px; 
    padding-bottom: 50px;
}
#season-list ul.season-info li  {
    float: left;
    overflow: hidden;
    width: 755px;
    background: url(../images/divider.png) bottom left no-repeat;
}

/* Season list - Country/City/Date */
#season-list .location{
    float: left; 
    width: 385px;
    padding-top: 20px;
    padding-bottom: 20px;
}
#season-list .location strong{ 
    position: relative;
    top: -4px;
    display: block;
    color: #FFF; 
    font-size: 60px !important;
    height: 52px;
    line-height: 0;
    overflow: hidden;
}
#season-list .description,
#season-list .date{
    font-size: 18px; 
    line-height: 18px;
}
#season-list .description { color: #FFF;}
#season-list .date{ color: #cc0000;}

/* Race/Qualifying/Practice */
#season-list .race{
    float: right; 
    width: 370px;
    overflow: hidden;
    padding-top: 20px;
}
#season-list .race-type{
    width: 190px; 
    float: left;
}
#season-list .race-type .race-btn{
    width: 190px !important;
    float: left;
    clear: both;
    background: none !important;
    height: 35px !important;
    padding: 0 !important;
    overflow: hidden;
    margin-left: -15px;
}
#season-list .race-type .race-btn .btn-active{
    margin: -12px 0 -10px 0;
}

/* Results */
#season-list .results{ 
    width: 180px; 
    float: right;
    margin-bottom: 9px;
}
#season-list .results .racer {
    width: 180px;
    float: left;
    height: 54px;
}
#season-list .results p{
    color: #7d7d7d;
    font-size: 11px;
    text-transform: uppercase;
    margin: -2px 0 10px 0;
    margin-bottom: 10px;
}
#season-list .results .racer p{
    text-align: left;
    width: 60px;
    float: left;
    color: #FFF;
}
#season-list .results .position{
    width: 112px;
    float: left;
    /** hmm */
    margin-top:-4px;
}
#season-list .results .position img{
    height: 54px;
}
#season-list .race .btn-preview{
    float: right;
    margin-top: -15px;
}

/* Fixed width arrows with changing backrounds */
.btn-active { 
    width: 200px;
    height: 60px; 
    display: block;
    text-indent: -10000px;
    float: left;
    position: relative;
    left: -5px;
    overflow: hidden;
}
a.btn-active:hover { background-position:bottom left; position: relative; top: -3px;}

#season-list .btn-race{
    background-image: url(../images/buttons/btn-race.png);
}
#season-list .btn-qualifying{
    background-image: url(../images/buttons/btn-qualifying.png);
}
#season-list .btn-practice{
    background-image: url(../images/buttons/btn-practice.png);
}
#season-list a.btn-preview{
    width: 187px;
    background-image: url(../images/buttons/btn-preview.png);
}
#season-list a.btn-preview:hover{ position: relative; top: 0;}

#season-list img.btn-inactive{ width: 187px;}

/* =Video Player 
-----------------------------------------------------------------------------*/

.wrapper a.play {
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-80px;
	margin-top:-80px;
	z-index:5;
}

.video .controls { 
	margin:0;
	padding:0;
	left:0;
	bottom:0px;
	position:absolute;
	width:192px;
	height:33px;
	z-index:10;
}

.video .controls li {
	position:absolute;
	list-style:none;
	bottom:0;
	left:0;
}

/** Control Placement ***/
.video .controls li.restart             { left:0px; width:68px; }
.video .controls li.playToggle			{ left:33px; width:68px; }
.video .controls li.playToggle	a		{ padding-left:28px; }
.video .controls li.stop				{ left:78px; width:68px; }
.video .controls li.stop a              { padding:7px 0 0 28px;height:26px; }
.video .controls li.stop img            { margin-top:2px; }
.video .controls li.soundToggle         { left:123px; width:74px; }
.video .controls li.soundToggle a	    { padding:8px 0 0 19px; }
.video .controls li.soundToggle img     { margin:-2px 0 0 6px; }
.video .controls li.last a              { width:26px; }

/** Control Overlays / Links **/
.video .controls li a {
    background:url(../images/video_control_sprite.png) 0px 0px no-repeat;
    color:#fff;
    height:25px;
    display:block;
    text-transform: uppercase; 
    text-decoration: none; 
    font-size:13px; 
    padding: 8px 0 0 14px;
}

.video .controls li a:hover {
    background:url(../images/video_control_sprite.png) 0px -38px no-repeat;
}

.video .controls li.restart a       { background-position:-30px 0px; }
.video .controls li.restart a:hover { background-position:-30px -38px; }

.video .controls li.last {
    background:url(../images/video_control_sprite.png) right -76px no-repeat;
}

/** Timer Placement **/
.video .timer {
	margin:0;
	padding:0;
	left:0;
	bottom:0px;
	position:absolute;
	width:336px;
	height:20px;
	z-index:9;
	background:url(../images/video-timer-bg.png) repeat-x;
	color:#666;
	font-size:10px;
}

.video .timer .cufon {
    float:left;
}

.video .timer .times {
	margin:5px 0 0 199px;
	float:left;
	display:inline;
}

.video .timer .times .currTime {
	color:#fff;
	float:left;
	width:36px;
	height:10px;
}

.video .timer .times .duration {
    float:left;
    width:34px;
}

.video .timer .times .slash {
    float:left;
    width:10px;
    text-align:center;
}

.video .timer .share {
	float:right;
	margin:5px 10px 0 0;
	display:inline;
}

.video .timer .share a{
	text-decoration:none;
	color:#666;
}

.video .timer .share a:hover {
	color:#fff;
}

/* =Forms
-----------------------------------------------------------------------------*/
/* Contact us */
form{
    margin-top: 20px;
    background: #0c0c0c;
    width: 500px;
    padding: 30px;
}
form input,
form textarea{
    font-size: 12px;
    font-family: Arial;
    line-height: 16px;
    background: #ccc;
    color: #000;
    border: 0;
    padding: 4px 0 4px 4px;
}

form .form-row{ 
    width: 100%; 
    float: left; 
    clear: both; 
    margin-bottom: 15px;
}
form .form-row label{ 
    display: block; 
    float: left; 
    width: 50px; 
    font-size: 12px;
    line-height:18px;
    color: #ccc;
}
form .form-row input,
form .form-row textarea{ 
    float: left; 
    width: 200px;
}
form .form-row textarea{ 
    width: 300px;
}
form a.btn{
    position: relative;
    top: -10px;
    margin-left: 230px;
}

/* Newsletter signup */
#newsletter input { padding: 2px; background:#ccc; border: 0;}
#newsletter label { width: 130px; text-align: right; padding-right: 15px; color:#fff}

/* Name*/
#newsletter #title{ 
    float: left;
}
form input#full-name { 
    width:203px; 
    margin-right: 0; 
}
form input#first-name,
form input#last-name { width: 90px;}
form input#last-name { margin-right: 0;}

/* Date of birth / Where you live*/
form input,
form select   { margin-right: 3px; font-size: 1.3em;font-weight: bold; }

form .optional-info input    { width: 20%;}
form .optional-info select   { width: 20%;}

/* Date of birth */
form label{ display: block; float: left; width: 95px;}
form .optional-info select#dob-day   { width: 17%;}
form .optional-info select#dob-month { width: 20%;}
form .optional-info select#dob-year  { width: 22%; margin-right: 0;}

/* Country*/
form select#country { width: 50%;}

form input.address { 
    width:127px !important;
    margin-bottom:5px;
    margin-right: 5px;
    background:#cccccc;
    border:0;
    padding:2px;
}
form fieldset.full-address{
    width: 300px;
    float: left;
}

/* Opt-ins */
#page #newsletter .required {
    font-size:12px;
    color:#fff;
}

#newsletter .red {
    color:#cc0000;
}

#newsletter .opt-in { 
    color: #ccc;
    display: inline; /* for ie6 */
    margin-left: 80px; 
    width:350px;
    font-size: 1.1em;
    line-height: 1.6em;
}

#newsletter .opt-in a {
    color:#cc0000;
}

#newsletter .opt-in a:hover {
   color:#fff;
}

#newsletter .form-row .checkbox { 
    width: auto;
    float: left; 
    margin: 0 10px 10px 0;
    background: none;
}
#newsletter a.btn{
    position: relative;
    top: -10px;
    margin-left:300px;
    display: inline; /* for ie6 */
}

/* Form errors */
form .error-message { 
    display:none !important;
}
form .error .error-message { 
    display:block !important;
    clear:both;
    color:#cc0000;
    margin:0 0 0 146px;
}

form .opt-in .error-message {
    margin:0;
}

/*form #form-submit {
    display:none;
}
*/
/* Helpers */
.hidden{ display: none !important;}


/* =Error / Deathpage
-----------------------------------------------------------------------------*/
#error_page #container #main-content { 
    background:none;
    color:#fff;
}

#error_page #container #main-content #error_message {
    margin:120px 0 0 60px;
}

#error_page #container #main-content #error_message h1 {
    margin-bottom:20px;
}

#error_page #container #main-content #error_message p {
    width:370px;
    font-family:Arial, Helvetica, Sans-Serif;
    font-size:14px;
    color:#b1b1b1;
    padding:0;
    margin:0 0 30px 0;
    line-height:20px;
}