/* THEME CONTROL */
html {background: #000; height: auto;}
body {background: #000 url(../img/page_bg_black_noise.jpg) no-repeat top center; height: 100%; font-family: Arial, Helvetica, sans-serif; color: #ccc;}

#page {width: 678px;margin: 0px auto 0;}
#page h1 {padding: 40px 0 20px 0; text-align: center; display: block; }

/* LINKS COLOUR DEPENDING ON THEME */
#page a {color: #00d8ff;}
body.green #page a {color: #00ff30;}
body.yellow #page a {color: #f0ff00;}
body.pink #page a {color: #ff00f0;}
body.red #page a {color: #ff0000;}

/* COUNTDOWN LAYOUT CONTROL */
#countdown {background: url(../img/pad_bg.png) no-repeat left; width: 678px; height: 110px; margin: 0 auto; padding: 80px 0 0 0;}
#countdown div {float: left; width: 62px;}

#countdown.true div.days {width: 93px; margin: 0 84px 0 48px;}
#countdown.false div.days {width: 62px; margin: 0 100px 0 63px;}

#countdown.false div.centos {display: none;}
#countdown div.days div.false {display: none;}

#countdown div.hours {margin: 0 99px 0 0px;}
#countdown div.minutes {margin: 0 100px 0 0;}
#countdown div.seconds {margin: 0;}

#countdown div div {float: left; height: 61px; background: url(../img/digits.png) no-repeat 0px 0px;} 
#countdown div.image0 {background-position: -0px 0px; width: 31px;} 
#countdown div.image1 {background-position: -31px 0px; width: 31px;} 
#countdown div.image2 {background-position: -62px 0px; width: 31px;} 
#countdown div.image3 {background-position: -93px 0px; width: 31px;} 
#countdown div.image4 {background-position: -124px 0px; width: 31px;} 
#countdown div.image5 {background-position: -155px 0px; width: 31px;} 
#countdown div.image6 {background-position: -186px 0px; width: 31px;} 
#countdown div.image7 {background-position: -217px 0px; width: 31px;} 
#countdown div.image8 {background-position: -248px 0px; width: 31px;} 
#countdown div.image9 {background-position: -279px 0px; width: 31px;} 

/* PROGRESS BAR / BATTERY CONTROL */
#battery {width: 344px;	height: 133px; margin: 30px auto 40px; background: url(../img/battery.png)}
#battery .fuel_left {width: 25px; height: 133px; float: left; background: url(../img/fuel_left.png) no-repeat left;}

body.green #battery .fuel_left {background: url(../img/fuel_left_green.png) no-repeat left;}
body.yellow #battery .fuel_left {background: url(../img/fuel_left_yellow.png) no-repeat left;}
body.pink #battery .fuel_left {background: url(../img/fuel_left_pink.png) no-repeat left;}
body.red #battery .fuel_left {background: url(../img/fuel_left_red.png) no-repeat left;}

#battery .fuel_right {float: left; width: 18px; height: 133px; background: url(../img/fuel_right.png) no-repeat right;}
body.green #battery .fuel_right {background: url(../img/fuel_right_green.png) no-repeat right;}
body.yellow #battery .fuel_right {background: url(../img/fuel_right_yellow.png) no-repeat right;}
body.pink #battery .fuel_right {background: url(../img/fuel_right_pink.png) no-repeat right;}
body.red #battery .fuel_right {background: url(../img/fuel_right_red.png) no-repeat right;}

/* PERCENT INDICATOR */
.percent {width: 54px; height: 31px; background: url(../img/percent.png) no-repeat top; background-position: 0 -775px; margin: 53px 0 0 123px; display:none;}

/* SHOW DIFFERENT PARTS OF PNG FILE FOR DIFFERENT VALUES */
.percent.p0 {background-position: 0 0;} .percent.p1 {background-position: 0 -31px;} .percent.p2 {background-position: 0 -62px;} .percent.p3 {background-position: 0 -93px;} .percent.p4 {background-position: 0 -124px;} .percent.p5 {background-position: 0 -155px;} .percent.p6 {background-position: 0 -186px;} .percent.p7 {background-position: 0 -217px;} .percent.p8 {background-position: 0 -248px;} .percent.p9 {background-position: 0 -279px;} .percent.p10 {background-position: 0 -310px;} .percent.p11 {background-position: 0 -341px;} .percent.p12 {background-position: 0 -372px;} .percent.p13 {background-position: 0 -403px;} .percent.p14 {background-position: 0 -434px;} .percent.p15 {background-position: 0 -465px;} .percent.p16 {background-position: 0 -496px;} .percent.p17 {background-position: 0 -527px;} .percent.p18 {background-position: 0 -558px;} .percent.p19 {background-position: 0 -589px;} .percent.p20 {background-position: 0 -620px;} .percent.p21 {background-position: 0 -651px;} .percent.p22 {background-position: 0 -682px;} .percent.p23 {background-position: 0 -713px;} .percent.p24 {background-position: 0 -744px;} .percent.p25 {background-position: 0 -775px;} .percent.p26 {background-position: 0 -806px;} .percent.p27 {background-position: 0 -837px;} .percent.p28 {background-position: 0 -868px;} .percent.p29 {background-position: 0 -899px;} .percent.p30 {background-position: 0 -930px;} .percent.p31 {background-position: 0 -961px;} .percent.p32 {background-position: 0 -992px;} .percent.p33 {background-position: 0 -1023px;} .percent.p34 {background-position: 0 -1054px;} .percent.p35 {background-position: 0 -1085px;} .percent.p36 {background-position: 0 -1116px;} .percent.p37 {background-position: 0 -1147px;} .percent.p38 {background-position: 0 -1178px;} .percent.p39 {background-position: 0 -1209px;} .percent.p40 {background-position: 0 -1240px;} .percent.p41 {background-position: 0 -1271px;} .percent.p42 {background-position: 0 -1302px;} .percent.p43 {background-position: 0 -1333px;} .percent.p44 {background-position: 0 -1364px;} .percent.p45 {background-position: 0 -1395px;} .percent.p46 {background-position: 0 -1426px;} .percent.p47 {background-position: 0 -1457px;} .percent.p48 {background-position: 0 -1488px;} .percent.p49 {background-position: 0 -1519px;} .percent.p50 {background-position: 0 -1550px;} .percent.p51 {background-position: 0 -1581px;} .percent.p52 {background-position: 0 -1612px;} .percent.p53 {background-position: 0 -1643px;} .percent.p54 {background-position: 0 -1674px;} .percent.p55 {background-position: 0 -1705px;} .percent.p56 {background-position: 0 -1736px;} .percent.p57 {background-position: 0 -1767px;} .percent.p58 {background-position: 0 -1798px;} .percent.p59 {background-position: 0 -1829px;} .percent.p60 {background-position: 0 -1860px;} .percent.p61 {background-position: 0 -1891px;} .percent.p62 {background-position: 0 -1922px;} .percent.p63 {background-position: 0 -1953px;} .percent.p64 {background-position: 0 -1984px;} .percent.p65 {background-position: 0 -2015px;} .percent.p66 {background-position: 0 -2046px;} .percent.p67 {background-position: 0 -2077px;} .percent.p68 {background-position: 0 -2108px;} .percent.p69 {background-position: 0 -2139px;} .percent.p70 {background-position: 0 -2170px;} .percent.p71 {background-position: 0 -2201px;} .percent.p72 {background-position: 0 -2232px;} .percent.p73 {background-position: 0 -2263px;} .percent.p74 {background-position: 0 -2294px;} .percent.p75 {background-position: 0 -2325px;} .percent.p76 {background-position: 0 -2356px;} .percent.p77 {background-position: 0 -2387px;} .percent.p78 {background-position: 0 -2418px;} .percent.p79 {background-position: 0 -2449px;} .percent.p80 {background-position: 0 -2480px;} .percent.p81 {background-position: 0 -2511px;} .percent.p82 {background-position: 0 -2542px;} .percent.p83 {background-position: 0 -2573px;} .percent.p84 {background-position: 0 -2604px;} .percent.p85 {background-position: 0 -2635px;} .percent.p86 {background-position: 0 -2666px;} .percent.p87 {background-position: 0 -2697px;} .percent.p88 {background-position: 0 -2728px;} .percent.p89 {background-position: 0 -2759px;} .percent.p90 {background-position: 0 -2790px;} .percent.p91 {background-position: 0 -2821px;} .percent.p92 {background-position: 0 -2852px;} .percent.p93 {background-position: 0 -2883px;} .percent.p94 {background-position: 0 -2914px;} .percent.p95 {background-position: 0 -2945px;} .percent.p96 {background-position: 0 -2976px;} .percent.p97 {background-position: 0 -3007px;} .percent.p98 {background-position: 0 -3038px;} .percent.p99 {background-position: 0 -3069px;} 

.percent.p100 {width: 65px;	height: 31px; background: url(../img/percent100.png) no-repeat top; background-position: 0 0;}


/* PAGE CONTENT CLASSES */
#page h2 {font-family: 'Lato', Arial, Helvetica, sans-serif; font-style: italic; font-size: 24px; color: #4b4b4b; margin: 0 0 40px 0;}
#page .content {width: 628px; margin: 0 auto;}
#signup {margin: 0 auto 40px; text-align: center;}
#tweet {background: url(../img/ico_tweet.png) no-repeat left; margin: 0 0 15px 0; padding: 5px 0 0 40px; min-height: 27px; font-size: 12px;}
#tweet span {width: 100%; display: block; color: #555; font-size: 11px; font-style: italic;}
#social { margin: 0 0 20px 0; height: 32px; display: block;}


/* FOOTER SOCIAL ICONS */
#social li a {float: left; width: 32px; height: 32px; margin: 0 10px 0px 0; background: url(../img/social_icons.png) no-repeat top left;}

#social li.youtube a {background-position: 0 0;}
#social li.blogger a {background-position: -32px 0;}
#social li.facebook a {background-position: -64px 0;}
#social li.flickr a {background-position: -96px 0;}
#social li.lastfm a {background-position: -128px 0;}
#social li.linkedin a {background-position: -160px 0;}
#social li.myspace a {background-position: -192px 0;}
#social li.rss a {background-position: -224px 0;}
#social li.skype a {background-position: -256px 0;}
#social li.tumblr a {background-position: -288px 0;}
#social li.twitter a {background-position: -320px 0;}
#social li.vimeo a {background-position: -352px 0;}
#social li.wordpress a {background-position: -384px 0;}
#social li.foursquare a {background-position: -416px 0;}

#social li.youtube a:hover {background-position: 0 -32px;}
#social li.blogger a:hover {background-position: -32px -32px;}
#social li.facebook a:hover {background-position: -64px -32px;}
#social li.flickr a:hover {background-position: -96px -32px;}
#social li.lastfm a:hover {background-position: -128px -32px;}
#social li.linkedin a:hover {background-position: -160px -32px;}
#social li.myspace a:hover {background-position: -192px -32px;}
#social li.rss a:hover {background-position: -224px -32px;}
#social li.skype a:hover {background-position: -256px -32px;}
#social li.tumblr a:hover {background-position: -288px -32px;}
#social li.twitter a:hover {background-position: -320px -32px;}
#social li.vimeo a:hover {background-position: -352px -32px;}
#social li.wordpress a:hover {background-position: -384px -32px;}
#social li.foursquare a:hover {background-position: -416px -32px;}

#social li.email a {background: url(../img/email.png) no-repeat top; width: 52px; float: right;}
#social li.email a:hover {background-position: 0px -32px;}

/* NEWSLETTER SIGNUP */
#newsletter {margin: 0 auto 20px; text-align: center; height: 40px;}

#newsletter input.email {width: 250px; height: 40px; font-family: 'Lato', Arial, Helvetica, sans-serif; font-weight: normal; font-size: 21px; letter-spacing: -0.5px; color: #4b4b4b; text-align: center; border: none; -moz-border-radius: 5px 5px 5px 5px; background: #fff; margin: 0 10px 0 0; vertical-align: top;}

#newsletter input.submit {width: 140px; height: 40px; border: none; cursor: pointer; background: url(../img/signup.png) no-repeat top; vertical-align: top;}
body.green #newsletter input.submit {background: url(../img/signup_green.png) no-repeat top;}
body.yellow #newsletter input.submit {background: url(../img/signup_yellow.png) no-repeat top;}
body.pink #newsletter input.submit {background: url(../img/signup_pink.png) no-repeat top;}
body.red #newsletter input.submit {background: url(../img/signup_red.png) no-repeat top;}

#newsletter input.submit:hover {background-position: 0 -40px;}
#feedback {height:30px;	margin: 0 auto 20px; display: block; width: 400px;}
#feedback .info {width: 400px; height: 30px; text-align: center;}

/* LOADING BARS WHICH APPEAR DURING AJAX CALLS */
.bar {display:none; background:url(../img/loading.gif) no-repeat center; margin-top:100px; height:40px; width:100%;}
.signupbar{display:none; background:url(../img/loadingsignup.gif) no-repeat center; height:40px; width:230px; margin: 0 auto; text-align: center;}	
.signuploader {width: 400px; text-align: center; margin: 0 auto;}

/* CONTACT US FORM */
#contactus {color: #000;}
#contactus p.intro {margin: 0 0 20px 0; font-size: 13px; color: #444; line-height: 21px; background: url(../img/envelope.png) no-repeat left top; padding: 0 0 0 92px; min-height: 55px;}
#contactus p.intro a {color: #444;}
#contactus input {width: 400px; -moz-border-radius: 2px 2px 2px 2px; background: url(../img/form_bg.png) repeat-x scroll left top #FFFFFF; border: 1px solid #DFDFDF; color: #333333; font-size: 20px; padding: 5px;}
#contactus textarea {width:400px;height:100px; -moz-border-radius: 2px 2px 2px 2px;background:url(../img/form_bg.png) repeat-x scroll left top #FFFFFF;border:1px solid #DFDFDF;color:#333333; font-size: 20px; padding: 5px;}
#contactus_fields {font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 21px; color: #555555;}
#contactus_fields li {padding: 0 0 5px 0;}
#contactus_fields li.border {border-bottom: 1px solid #EFEFEF; color: #666666; font-size: 20px; padding: 0 0 15px 0; margin: 0 0 10px 0;}
#contactus_fields .submit {width: 131px; height: 44px; border: none; margin: 0; padding: 0; background: url(../img/sendit.gif) no-repeat top; cursor: pointer; text-indent: -9999px; font-size: 1px;}
#contactus_fields .submit:hover {background-position: 0 -44px;}

#confirmation h3 {font-size: 24px; font-style: italic; margin: 40px 0 10px 92px;}
#confirmation p {margin: 0 0 0 92px; color: #444444; font-size: 16px; line-height: 24px;}

/* ERROR MESSAGES */
.contactUsForm span {display:none; font-size:12px; line-height:10px; padding-left:20px; color:#ff0000;}
.signup_error {display: none; text-align: center;}