/****************************************
| ** METAL DRIFT CSS **
|
| Created by: Adam Foster
| Date Created: 15-07-2009
| Copyright 2009 METAL DRIFT
|
****************************************/

/* CSS RESET */

* {	margin: 0px; padding: 0px; text-indent: 0px; }
:focus{ -moz-outline-style: none; }
img { border: none; padding: 0px; }
ol, ul { list-style: none; }
.left { float: left!important}
.right { float: right!important}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
.row { width: 100%; }
p { padding-bottom: 12px; }
:link, :visited { color: #007eff; text-decoration: none; }
a:hover { color: #fff; }

h2 { background: url(../img/titles.gif) no-repeat; overflow: hidden; text-indent: -1000px; }

/** LAYOUT **/

body { background: #000 url(../img/background.jpg) no-repeat top; color: #759dce; font-size: 11px; line-height: 13px; font-family: Arial, Helvetica, sans-serif; }

#header { background: url(../img/background-header.png) no-repeat top; width: 100p%; height: 308px; }
#header-content { width: 625px; margin: 0 auto;}
#logo { width: 625px; height: 162px; padding-top: 16px; font-size: 1px; }

#nav { width: 750px; height: 60px;  position: relative; top: -23px; left: -66px; }
#nav :link, #nav :visited { height: 60px; background-image: url(../img/nav.png); display: block; text-indent: -9999px; position: relative; }
#nav li { float: left; position:relative; }
.n-t :link, .n-t :visited { width: 137px; background-position: 0 -80px; }
.n-s :link, .n-s :visited { width: 194px; background-position: -137px -80px; }
.n-m :link, .n-m :visited  { width: 89px; background-position: -331px -80px; }
.n-l :link, .n-l :visited { width: 192px; background-position: -420px -80px; }
.n-b :link, .n-b :visited { width: 137px; background-position: -612px -80px; }

#nav span { display: block; height: 60px; position: absolute; background-image: url(../img/nav.png); top: 0; opacity: 0;  }
.n-t span { width: 144px; background-position: 0px 0; left: 0; }
.n-s span { width: 201px; background-position: -162px 0; left: -5px; } 
.n-m span { width: 96px; background-position: -388px 0; left: -3px; }
.n-l span { width: 202px; background-position: -505px 0; left: -5px; }
.n-b span { width: 140px; background-position: -729px 0; left: -3px; }

#content { width: 935px; margin: 250px auto 0; position: relative; }

.about { float: left; background: url(../img/background-content.png); height: 137px; width: 342px; text-align: center; padding: 40px 34px; }
.trailers { float: right; background: url(../img/background-content.png); height: 217px; width: 456px; background-position: -410px 0; padding: 0 34px; }
.welcome { height: 23px; width: 100%; margin-bottom: 12px; }
.s-button { display: block; float: left; height: 194px; width: 244px; background: url(../img/background-links.png); overflow: hidden; text-indent: -500px; position: relative; }
.t-button { display: block; float: right; height: 194px; width: 212px; background: url(../img/background-links.png) -244px 0; overflow: hidden; text-indent: -500px; position: relative; }

.s-button span { display: none; height: 123px; width: 129px; background: url(../img/background-links-over.png); left:33px; position:absolute; top:32px; }
.t-button span { display: none; height: 123px; width: 162px; background: url(../img/background-links-over.png) -149px 0; position:absolute; left:17px; top: 33px; }

.s-button:hover span, .current span, .t-button:hover span { display: block; }

#signup { float: right; width: 295px; height: 130px; }
#signup * { float: left; }
#signup p { padding-bottom: 0px; width:280px; }
.sign { width: 228px; height: 12px; background-position: 0 -30px; margin:27px 0 6px 0px;  }
#email { width: 164px; height: 24px; background: url(../img/background-input.gif); border: 0 none; height: 18px; padding: 18px 22px; color: #759dce; position: relative; left: -12px; }
#sign-button { width: 86px; height: 18px; background: url(../img/titles.gif) 0 -52px; border: 0 none; color: #000; font-size: 0; cursor:pointer; margin-top:18px; }

#footer { background: url(../img/background-footer.gif) no-repeat; width: 1050px; height: 157px; margin: 0 auto; position: relative; }
#footer ul { width: 585px; padding: 35px 0 30px 380px; }
#footer li { float: left; padding-right: 40px; }
#footer p { color: #6d6d6d; }
#footer span { color: #fff; }
.fi { position: absolute; bottom:18px; right:72px; }
.bjs { position: absolute; left: 72px; bottom: 18px; }
.fi :link, .fi :visited { padding-right:40px; }

#media { width: 843px; height: 339px; background: url(../img/background-media.png); top:-340px; left: 35px; position: absolute; padding: 21px 11px; display: none; }
#screenshot { float:left; height:339px; position:relative; width:603px; z-index:5; }
#thumbsholder { float:right; height:289px; width:240px; }
#thumbsholder ul { width:240px; }
#thumbsholder li { float: left; width: 119px; height: 67px; margin: 1px 0 0 1px; position: relative; }

#thumbsholder li span, #thumbsholder li span { display:block; height:61px; left:0; position:absolute; top:0; width:113px; }
#thumbsholder li a:hover span, #thumbsholder li .activethumbnail span, .athumbnail span { border:3px solid #FFFFFF; }

#ajaxloader { left:240px;position:absolute;top:188px;z-index:2; }
#playtrailer { cursor: pointer; }

.red { color: #c11717; }
.blue { color: #007EFF; }

#features { float: left; width: 630px; }
.feat { width: 620px; height: 12px; background-position: 0 -81px; margin:27px 0 6px 10px;  }
#features ul { float: left; width: 300px; margin-left: 10px; }
#features li { background: url(../img/bullet.gif) 0px 3px no-repeat; padding: 0 0 0 15px; }