/*
    Filename:   common.css
    Author:     Steve Smith, stephen.smith@akqa.com
    Description:    Common styles for Ferrari f149 site
                    Also contains page-specific styles at bottom
                    Please ensure any updates maintain document's validity
                    Test validity at http://jigsaw.w3.org/css-validator/validator
    Pantone:
            black:#000;
            white:#FFF;
            red:#E2001A;
            light grey 1:#333333;   (input backgrounds and button hover)
            light grey 2:#666666    (button text) 
            dark grey:#2F3035;  (button backgrounds)
            mid grey:#454545;   (button borders)
*/


/* generic selectors */

body                {font-family: Arial, Helvetica, sans-serif; font-size:0.8em; color:#FFF; background-color:#000; margin:0; padding:0;}
form                {margin:0; padding:0;}
a                   {color:#FFF;}
a:active, a:focus   {outline: 0;} /* to remove outlines from a and dropdowns in FireFox*/
h1                  {display:none;}
h2                  {font-size:0.9em; text-transform:uppercase; font-weight:normal; margin-bottom:4px;}
h3                  {font-size:0.9em; font-weight:bold;}
h4                  {font-size:0.9em; font-weight:bold;}
fieldset            {border:none; width:515px; margin:0 auto; padding-top:13px;}
fieldset legend     {display:none;}     
fieldset label      {width:270px; text-align:left; display:block; padding-bottom:3px; font-size:0.9em; left:0; margin-top:6px; color:#666;}
fieldset input, 
fieldset select,
fieldset textarea   {width:312px; font-family: Arial, Helvetica, sans-serif; background-color:#333;  border:solid 1px #454545; color:#FFF; padding:3px; display:block; margin:0 0 2px 0; }
fieldset input.setBg{background:#333 none repeat scroll 0% !important;}
fieldset textarea   {width:303px;}
fieldset select     {width:278px; float:left;}
fieldset textarea   {height:85px; color:#CCC;}
a img               {border:none;}


/* generic styles */

.clear              {clear:both;}
.hidden             {display:none !important;}
.showWithClientScriptOn {display:none;}
.hideWithClientScriptOn {display:block;}
.greyColor          {color:#666 !important;}
.lightGreyColor     {color:#999 !important;}
.redAnchor          {color:#E2001A; text-decoration:none;}
.noPadding          {padding:0 !important;}
.noMargin           {margin:0 !important;}
.floatLeft          {float:left !important;}
.floatRight         {float:right !important;}
.positionRelative   {position:relative;}
.centre             {margin:0 auto;}
.centredText        {text-align:center;}
.asImage            {background-repeat:no-repeat; background-position:left top; display:block !important;}
.asImage span       {visibility:hidden; width:100%; padding-right:100px;}
div.hr              {height:1px; background:#000 url(../images/img-horizontal-gradient.jpg) no-repeat center top; margin:10px 0; }
div.thick           {height:3px; background-repeat:repeat-y; margin-bottom:0;}
.fixedWidthContainer{width:960px; margin:0 auto !important; text-align:center;}
.fullWidthContainer {width:100%;}
h2.pageHeader       {width:100%; height:104px; text-align:center; background:url(../images/bg-language-selector-header.gif) no-repeat top center; margin:0; padding:41px 0 7px 0;}
h2.pageHeader span  {border-bottom:solid 1px red; padding-bottom:3px; line-height: 23px;}
h3.subHeader        {width:100%; height:14px; text-align:left; background-repeat: no-repeat; background-position:top left; margin:0; padding:0;}
h3.subHeader span   {visibility:hidden;}

p.introPara         {margin:0 auto 20px auto; padding:0; width:450px; color:#666;}
p#ErrorMessage      {color:#FF0000;}
.validationMarker   {position:absolute; right:110px; top:2px;}
.button             {border:none; background:#333 url(../images/bg-button.gif) no-repeat top left; color:#7D7D7D; width:101px; height:24px; text-align:left; text-transform:uppercase; margin:30px 0; float:right; font-size:0.9em; padding:0 0 3px 10px;}
.button:hover,
.buttonExpandable:hover         {cursor:pointer;}
.buttonExpandable               {text-transform:uppercase; text-decoration:none; font-size:0.9em; color:#7D7D7D;}
.buttonExpandable span          {float:left;height:24px;}
.buttonExpandable .left         {background:url(../images/bg-btn-left.gif) no-repeat; width:9px;}
.buttonExpandable .middle       {background:url(../images/bg-btn-middle.gif) no-repeat;padding:4px 10px 0 0;}
.buttonExpandable .rightNext    {background:url(../images/bg-btn-right.gif) no-repeat; width:17px;}
.buttonExpandable .rightClose   {background:url(../images/bg-btn-right-close.gif) no-repeat; width:16px;}
.buttonExpandable .rightBack    {background:url(../images/bg-btn-right-back.gif) no-repeat; width:17px;}
fieldset div.clear              {height:5px;}
fieldset textarea.small         {font-size:8pt;}
.semiTransparentBG              {background:url(../images/bg-semi-transparant.png);}
fieldset.halfWidth              {width:320px; margin:0; padding:0; float:left; text-align:left;} 
fieldset.halfWidth label        {width:320px;}
fieldset.quartWidth             {width:160px; margin:0; padding:0; float:left;}
fieldset.quartWidth label       {width:160px;}
fieldset.quartWidth input       {width:152px;}
fieldset.quartWidth select      {width:160px;} 
ul.acceptDeclineList            {list-style:none; width:100%; margin:12px 0 0 0; padding:0; position:relative;} 
ul.acceptDeclineList li         {width:80px !important; margin-right:30px !important; display:block; float:left; padding:0; text-align:left; font-size:0.8em; color:#666;}
ul.acceptDeclineList li input   {background:none; border:none; width:20px; height:20px; float:right; position:relative; top:-3px;}


/* custom selector (the css/dhtml select box used in place of the system select element) */

.customSelectContainer                  {width:320px; margin:0 !important;}
.customSelectContainer .explodedSelectContainer   {position:relative; z-index:100;}
.customSelectContainer a.collapsedSelect{display:block; width:320px; height:26px; background:url(../images/bg-custom-select.gif) no-repeat top left; text-decoration:none; text-align:left; padding:4px 4px 0 4px;}
.customSelectContainer ul               {display:none; width:318px; position:absolute; left:0; top:-5px; list-style:none; text-align:left; margin:0; padding:0; background-color:#242424; border:solid 1px #454545; overflow:hidden; z-index:100;}
.customSelectContainer ul li a          {text-decoration:none; display:block; width:320px; line-height:1.3em; padding:5px 3px;}       
.customSelectContainer ul li a:hover,
.customSelectContainer ul li a.hover    {background-color:#333;}        
/* for small column */
.quartWidth .customSelectContainer      {width:160px;}
.quartWidth .customSelectContainer a.collapsedSelect{width:160px; background-image:url(../images/bg-custom-select-sml.gif);}
.quartWidth .customSelectContainer ul   {width:158px;}


/* page footer */

ul#Footer               {list-style:none; margin:0 auto 0 auto; text-transform:uppercase; font-size:0.8em; width:650px; text-align:center;}
ul#Footer li            {display:block; margin:0 10px 0 0; padding:15px 0 0 0; position:relative; color:#666;}
ul#Footer li a          {padding:10px 0 0 30px; text-decoration:none; color:#666;}
ul#Footer li a:hover    {color:#FFF; cursor:pointer;}
ul#Footer li#LanguageSelectorItem       {float:left;}
ul#Footer li#LanguageSelectorItem p     {position:absolute; top:15px; left:0;}
ul#Footer ul#LanguageSelectorList       {position:absolute; margin:0; padding:0 0 0 0; bottom:-18px; left:0px; width:100%; list-style:none; background:url(../images/bg-up-arrow.gif) no-repeat left bottom;}
ul#Footer ul.languageSelectorListCollapsed{height:25px;}
ul#Footer ul.languageSelectorListExpanded{height:126px;}
ul#Footer ul#LanguageSelectorList li    {width:85px; display:none; padding:0; margin:0; height:17px; text-align:left;}
ul#Footer ul#LanguageSelectorList li.currentLocale  {display:block; position:absolute; left:0px; bottom:4px;}
ul#Footer ul#LanguageSelectorList li a  {padding:2px 0 0 31px; display:block;width:69px; height:15px; text-align:left !important;}
ul#Footer li#LanguageSelectorItem a.noScript   {padding:7px 0 0 31px; display:block;width:69px; height:24px; text-align:left;background:url(../images/bg-right-arrow.gif) no-repeat left top !important;}
ul#Footer li#LanguageSelectorItem p.noScript   {padding:0; margin:0; position:relative; top:-7px;}  
ul#Footer li#QuickLinks                 {float:left; margin:0 35px 0 17px;}
ul#Footer li#QuickLinks ul              {padding:0; margin:0; height:38px; list-style:none; background:url(../images/bg-footer.jpg) repeat top left;}
ul#Footer li#QuickLinks li.lastItem     {background-image:none !important;}
ul#Footer li#QuickLinks li              {float:left;text-align:left;background:url(../images/bg-footer-spacer.gif) no-repeat top right;margin:0; padding:15px 15px 0 15px;}
ul#Footer li#QuickLinks li a            {padding:0;}
ul#Footer li#SendToFriendLink           {padding-top:6px !important; float:left;}
ul#Footer li#SendToFriendLink a         {background:url(../images/bg-send-to-friend.gif) no-repeat top left; padding:9px 0 0 31px !important; display:block; width:120px; height:25px; text-align:left;}


/* set width of footer items per locale for varying length copy */

ul.footer_en_GB                             {width:668px !important;}
ul.footer_en_GB li#QuickLinks               {width:355px;}
ul.footer_en_GB li#QuickLinks li.firstItem  {width:110px;}
ul.footer_en_GB li#SendToFriendLink a       {width:90px;}
ul.footer_en_GB li#LanguageSelectorItem     {width:85px;}
ul.footer_fr_FR                             {width:765px !important;}
ul.footer_fr_FR li#QuickLinks               {width:448px;}
ul.footer_fr_FR li#QuickLinks li.firstItem  {width:175px;}
ul.footer_fr_FR li#SendToFriendLink a       {width:120px;}
ul.footer_fr_FR li#LanguageSelectorItem     {width:92px;}
ul.footer_es_ES                             {width:720px !important;}
ul.footer_es_ES li#QuickLinks               {width:405px;}
ul.footer_es_ES li#QuickLinks li.firstItem  {width:140px;}
ul.footer_es_ES li#LanguageSelectorItem     {width:90px;}
ul.footer_it_IT                             {width:700px !important;}
ul.footer_it_IT li#QuickLinks               {width:385px;}
ul.footer_it_IT li#QuickLinks li.firstItem  {width:135px;}
ul.footer_it_IT li#SendToFriendLink a       {width:100px;}
ul.footer_it_IT li#LanguageSelectorItem     {width:89px;}
ul.footer_cn_CN                             {width:590px !important;}
ul.footer_cn_CN li#QuickLinks               {width:275px;}
ul.footer_cn_CN li#QuickLinks li.firstItem  {width:50px;}
ul.footer_cn_CN li#SendToFriendLink a       {width:50px;}
ul.footer_cn_CN li#LanguageSelectorItem     {width:61px;}
ul.footer_jp_JP                             {width:655px !important;}
ul.footer_jp_JP li#QuickLinks               {width:360px;}
ul.footer_jp_JP li#QuickLinks li.firstItem  {width:115px;}
ul.footer_jp_JP li#SendToFriendLink a       {width:80px;}
ul.footer_jp_JP li#LanguageSelectorItem     {width:71px;}
ul.footer_de_DE                             {width:720px !important;}
ul.footer_de_DE li#QuickLinks               {width:405px;}
ul.footer_de_DE li#QuickLinks li.firstItem  {width:140px;}
ul.footer_de_DE li#LanguageSelectorItem     {width:90px;}


/* flash and flash alternative styles */

#TopMenu                                        {list-style:none; margin:0px auto 30px auto; padding:0; width:580px; text-align:center;}
#TopMenu li                                     {float:left; padding:5px; margin:0 5px 5px 5px; height:85px; background-color:#333; border:solid 1px #3B3C3E;}      
#TopMenu li a                                   {display:block; text-decoration:none; text-transform:uppercase; padding:45px 0 7px 0; font-weight:bold;}
#TopMenu li a span                              {border-bottom:solid 1px #E2001A; padding-bottom:5px;}
#TopMenu li ul#Phases                           {list-style:none; padding:0; margin:0;}
#TopMenu li ul#Phases li                        {border:none; padding:0; width:60px; }
#TopMenu li ul#Phases li.notLive                {width:110px;}
#TopMenu li ul#Phases li.notLive span.label     {border:none; padding-top:5px; text-transform:uppercase; color:#666; font-weight:bold;}
#TopMenu li ul#Phases li.notLive span.countDown {display:block; width:108px; height:40px; background:url(../images/bg-countdown.jpg) no-repeat top left; padding-top:15px; margin-top:10px;}
#TopMenu li#DownloadFlash,
#TopMenu li#EnableJavascript                    {width:170px; font-size:0.8em;}
#TopMenu li#DownloadFlash a,
#TopMenu li#EnableJavascript a                  {text-decoration:none; text-transform:none; font-weight:normal; text-align:left; padding-top:10px;}
#TopMenu li#DownloadFlash img,
#TopMenu li#EnableJavascript img                {float:left; margin:0 10px 40px 0;}
div.flashAlternativeContainer                   {height:500px;}


/* language selector page */

#LanguageSelector                                           {background:#000 url(../images/bg-car-abstract-language.jpg) no-repeat top center;}
#LanguageSelector div#LanguageSelectorContainer             {background:#000 url(../images/bg-language-list.jpg) no-repeat top center; width:100%; height:87px; margin:140px 0 270px 0;} 
#LanguageSelector ul#DefaultLanguageSelectorList            {list-style:none; width:532px; margin:0 auto; padding:35px 0 0 0;}
#LanguageSelector ul#DefaultLanguageSelectorList li         {display:block; float:left; width:76px; height:50px; text-align:center; position:relative;}
#LanguageSelector ul#DefaultLanguageSelectorList li a       {text-transform:uppercase; text-decoration:none; color:#666; font-size:0.8em;}
#LanguageSelector ul#DefaultLanguageSelectorList li a:hover {color:#FFF;}
#LanguageSelector ul#DefaultLanguageSelectorList li a.subScript {position:relative; top:1px;}
#LanguageSelector ul#DefaultLanguageSelectorList li#DefaultLanguage-Chinese {position:relative; left:-15px;}
#LanguageSelector ul#DefaultLanguageSelectorList li#DefaultLanguage-Japanese {position:relative; left:-30px;}


/* registration page (phase 1 teaser) */

#RegistrationPhase1 h2                              {width:629px; height:18px; background-position:center top; margin:0 auto 5px auto;}
#RegistrationPhase1 div#FormContainer               {background:url(../images/bg-car-abstract-rear-light.jpg) no-repeat top center; padding-top:170px;}
#RegistrationPhase1 fieldset .button                {margin-top:10px;}
#RegistrationPhase1 fieldset.floatRight label       {width:320px;}
#RegistrationPhase1 fieldset.floatRight div.clear   {margin:0px;}
#RegistrationPhase1 #Footer                         {height:60px;}


/* registration page (phase 2) styles can be found in registration.css  */

#RegistrationComplete h2                    {width:165px; height:15px; background-position:center top; margin:0 auto 5px auto;}
#RegistrationComplete div#FormContainer     {background:url(../images/bg-car-abstract-rear-light.jpg) no-repeat top center; padding:170px 0;}
#RegistrationComplete #Footer               {height:60px;}

#RegistrationConfirmation h2                {width:226px; height:17px; background-position:center top; margin:0 auto 5px auto;}
#RegistrationConfirmation div#FormContainer {background:url(../images/bg-car-abstract-rear-light.jpg) no-repeat top center; padding:170px 0;}
#RegistrationConfirmation #Footer           {height:60px;}

#RegistrationFailed h2                      {width:629px; height:18px; background-position:center top; margin:0 auto 5px auto;}
#RegistrationFailed div#FormContainer       {background:url(../images/bg-car-abstract-rear-light.jpg) no-repeat top center; padding:170px 0;}
#RegistrationFailed #Footer                 {height:60px;}


/* send to friend page */

#SendToFriend h2                                    {width:629px; height:18px; background-position:center top; margin:0 auto 5px auto;}
#SendToFriend p.introPara                           {width:470px;}
#SendToFriend div#FormContainer                     {background:url(../images/bg-car-abstract-door.jpg) no-repeat top center; padding-top:170px;}
#SendToFriend fieldset.parentFieldSet               {width:675px;}
#SendToFriend fieldset legend                       {margin:0 0 10px 0; width:205px !important; height:13px; position:relative; left:-6px;}  
#SendToFriend fieldset select                       {width:320px;}
#SendToFriend fieldset#AcceptConditions             {padding:0 !important; margin:0;}
#SendToFriend fieldset#AcceptConditions ul          {list-style:none; margin:12px 0 0 0; padding:0;}
#SendToFriend fieldset#AcceptConditions li          {width:250px; display:block; float:left; margin:0; padding:0; text-align:left;}
#SendToFriend fieldset#AcceptConditions li#FirstItem{width:405px;}
#SendToFriend fieldset .button                      {margin-top:20px;}
#SendToFriend #Footer                               {height:60px;}

#SendToFriendComplete h2                        {width:450px; height:15px; background-position:center top; margin:0 auto 5px auto;}
#SendToFriendComplete div#FormContainer         {background:url(../images/bg-car-abstract-rear-light.jpg) no-repeat top center; padding:170px 0;}
#SendToFriendComplete p.introPara a             {display:block; margin:0 auto;}
#SendToFriendComplete p#ButtonContainer_de_DE   {width:260px !important;}
#SendToFriendComplete p#ButtonContainer_jp_JP   {width:150px !important;}
#SendToFriendComplete p#ButtonContainer_it_IT   {width:180px !important;}
#SendToFriendComplete p#ButtonContainer_fr_FR   {width:175px !important;}
#SendToFriendComplete p#ButtonContainer_es_ES   {width:175px !important;}
#SendToFriendComplete p#ButtonContainer_en_GB   {width:190px !important;}
#SendToFriendComplete p#ButtonContainer_cn_CN   {width:140px !important;}


/* legal notes page */

#PrivacyPolicy h2                           {font-weight:bold; margin:20px 0 15px 0;}
#PrivacyPolicy p,
#PrivacyPolicy hr                           {color:#CCC;}
#PrivacyPolicy h2,
#PrivacyPolicy h3,
#PrivacyPolicy h4,
#PrivacyPolicy p,
#PrivacyPolicy div.hr                       {margin-left:10px;}
#PrivacyPolicy .fixedWidthContainer         {width:420px; text-align:left; margin:0 !important;}
#PrivacyPolicy .buttonExpandable            {background-color:#000 !important; text-decoration:none; float:left; margin:10px;}
#PrivacyPolicy #CloseButton   {display:none;}


/* utility pages (e.g. 404 */

.utilityContent     {margin-bottom:150px !important;}
.utilityContent h3  {font-size:0.9em; text-transform:uppercase; font-weight:normal;}
.utilityContent h3,
.utilityContent p   {margin:0 0 3px 0;}
.utilityContent p   {color:#666;}
.utilityContent a   {text-decoration:none; color:#E2001A;}


/* test page */

#TestPage div#FormContainer     {width:505px !important; text-align:left;}
#TestPage div#FormContainer ul  {margin:20px 30px 20px 0; width:200px; float:left; border:solid 1px #666;padding:10px; list-style:none;}