body {background-color: #eff0f1; margin-left: 0; margin-right: 0; margin-top: 0; height: 100%;}

/* a:link {color: #304d90; text-decoration: none; transition: all 0.4s ease-in-out;}
a:visited {color: #304d90; text-decoration: none;}
a:hover {color: #327FD2; text-decoration: none; text-decoration: none; -o-transition:.4s; -ms-transition:.4s; -moz-transition:.4s; -webkit-transition:.4s; transition:.4s;}
a:active {color: #304d90;  text-decoration: none;}
  
a.type2:link {color: #404040; text-decoration: none; transition: all 0.8s ease-in-out;}
a.type2:visited {color: #404040; text-decoration: none;}
a.type2:hover {color: #59a276; text-decoration: none; -o-transition:.4s; -ms-transition:.4s; -moz-transition:.4s; -webkit-transition:.4s; transition:.4s;}
a.type2:active {color: #59a276;  text-decoration: none;} */
 
/* FONTS */
/* h1 {
 font-family: 'Cinzel', serif;
 font-size: 36pt;
 color: #827f7f;
 text-align: center;
 margin: 0 0 0 0;
 padding: 0;} 
 
h3 {
font-family: 'Cinzel', serif;
 font-size: 18pt;
 color: #d50606;
 text-align: center;
 margin: 0 0 20px 0;
 padding: 0;}
 
h3.accord {
 font-family: 'Cinzel', serif;
 font-size: 12pt;
 font-weight: 400;
 color: #d50606;
 text-align: left;
 margin: 0 0 0 0;
 padding: 0;}
 
h3.options {
font-family: 'Cinzel', serif;
 font-size: 18pt;
 color: #827f7f;
 text-align: center;
 margin: 10px 0 10px 0;
 padding: 0;}

h5 {
 /* font-family: 'Cormorant SC', serif; */
 /* font-family: 'Open Sans Condensed', sans-serif; */
 /* font-family: 'Rajdhani', sans-serif; 
 font-family: 'Jura', sans-serif;
 font-size: 12pt;
 color: #827f7f;
 text-align: center;
 margin: 0 0 0 20px;
 padding: 0 200px 0 200px;} */
 
h5.selectors {
 /* font-family: 'Cormorant SC', serif; */
 /* font-family: 'Open Sans Condensed', sans-serif; */
 /* font-family: 'Rajdhani', sans-serif; */
 font-family: 'Jura', sans-serif;
 font-size: 10pt;
 font-weight: 400;
 color: #827f7f;
 text-align: center;
 margin: 0 0 0 20px;
 padding: 10px 0 0 0;}
 
 h5.option-subhead {
 /* font-family: 'Cormorant SC', serif; */
 /* font-family: 'Open Sans Condensed', sans-serif; */
 /* font-family: 'Rajdhani', sans-serif; */
 font-family: 'Jura', sans-serif;
 font-size: 12pt;
 color: #827f7f;
 text-align: center;
 margin: 10px 0 0 0;
 padding: 0 0 0 0;}
 
h5.caroptions {
 font-family: 'Jura', sans-serif;
 font-size: 9pt;
 font-weight: 400;
 color: #827f7f;
 text-align: right;
 margin: 0 0 0 5px;
 padding: 0 0 0 0;}
 
h5.caroptions-right {
 font-family: 'Jura', sans-serif;
 font-size: 9pt;
 font-weight: 400;
 color: #827f7f;
 text-align: right;
 margin: 0 5px 0 0;
 padding: 0 0 0 0;}
 
/* CONTAINERS */  
#header-wrapper {
 width: 100%;
 height: 65px;
 text-align: center;
 padding: 0 0 0 0;
 margin: 0 0 40px 0;
 border: 0 solid #09C;
 box-shadow: 0 3px 3px #d7d4d4;
 background-color: #ffffff;}
 
#header-left {
 width: 35%;
 height: auto;
 float: left;
 display: inline-block;
 border: 0 solid #CCC;}
 
#header-center {
 width: 10%;
 height: auto;
 float: none;
 display: inline-block;
 border: 0 solid #CCC;}
 
#header-right {
 width: 35%;
 height: auto;
 float: right;
 display: table;
 border: 0 solid #CCC;}
 
#carcontainer {
 width: 100%;
 height: auto;
 text-align: center;
 margin: 20px auto 0 auto;
 padding: 0;
 border: 0 solid #933;
 overflow: visible;
 display: inline-block;}
 
.generic-right {
 width: 78%;
 height: auto;
 float: right;
 border: 0 solid #d7d4d4;
 border-radius: 7px;
 display: inline-block;
 margin: 0 10px 0 0;
 padding: 0;
 overflow: hidden;}
 
.generic-left {
 width: 19%;
 height: auto;
 float: left;
 border: 0 solid #d7d4d4;
 border-radius: 7px;
 display: inline-block;
 margin: 0 0 0 10px;
 padding: 0;
 overflow: hidden;}
 
#car {
 width: 78%;
 height: auto;
 float: right;
 border: 1px solid #d7d4d4;
 border-radius: 7px;
 display: inline-block;
 margin: 0 10px 0 0;
 padding: 0;
 overflow: hidden;
 background-color: #ffffff;}
 
#caroptions {
 width: 19%;
 height: auto;
 float: left;
 border: 0 solid #d7d4d4;
 border-radius: 7px;
 display: inline-block;
 margin: 0 0 0 10px;
 padding: 0;
 
 overflow: scroll;}
 
#options-left {
 width: 71%;
 height: auto;
 float: left;
 border: 0 solid #d7d4d4;
 border-radius: 5px;
 display: inline-block;
 margin: 5px 0 5px 0;
 padding: 0;
 background-color: #ffffff;
 text-align: left;}
 
#options-right {
 width: 27%;
 height: auto;
 float: right;
 border: 0 solid #999966;
 border-radius: 5px;
 display: inline-block;
 margin: 5px 0 5px 0;
 padding: 0;
 background-color: #ffffff;
 text-align: right;}
 
/* - - - - - - - - - TABLE STUFF - - - - - - - - - - - */
table.display {
 width: 95%;
 float: none;
 border: 0 solid #bababa;
 border-collapse: collapse;
 /* background: -moz-linear-gradient(top, #ffffff, #dedbde); */
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 display: block;
 margin: 0 auto;
 padding: 0;
 overflow: visible;}
 
th.display-narrow {
 width: 25%;
 background-color: #0766be;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0766be), to(#074783));
 background: -webkit-linear-gradient(top, #0766be, #074783);
 background: -moz-linear-gradient(top, #0766be, #074783);
 background: -ms-linear-gradient(top, #0766be, #074783);
 background: -o-linear-gradient(top, #0766be, #074783);
 border-right: 1px solid #6babfa;}
 
th.display-wide {
 width: 7%;
 background-color: #0766be;
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0766be), to(#074783));
 background: -webkit-linear-gradient(top, #0766be, #074783);
 background: -moz-linear-gradient(top, #0766be, #074783);
 background: -ms-linear-gradient(top, #0766be, #074783);
 background: -o-linear-gradient(top, #0766be, #074783);}
 
td.desc {
 padding: 2px;
 border-right: 0 solid #bababa;
 width: 67%;}
 
td.cost {
 border-right: 0 solid #bababa;
 width: 27%;}
 
td.form {
 border-right: 0 solid #bababa;
 width: 5%;}
   
tr.display, td.display {
 border: 1px solid #bec0c1;}
   
tr.highlight:hover {
 background-color: #e6ebf9;
 border-top: 0 solid #3e79c2;
 border-right: 0 solid #3e79c2;
 border-bottom: 0 solid #ffffff;
 border-left: 0 solid #3e79c2;
 /* box-shadow: 1px 1px 1px #adabab inset; */}
	 
.heading {
 font-family: Arial;
 font-size: 10pt;
 font-weight: normal;
 text-align: center;
 color: #fff;
 padding: 0 0 0 0;
 margin: 0 0 0 0;}
 
h5.data-left {
 font-family: 'Cinzel', serif;
 font-weight: normal;
 text-align: left;
 display: block;
 font-size: 10pt;
 color: #393935;
 padding: 0 0 0 5px;
 margin: 0 0 0 0;}
 
h5.data-right {
 font-family: 'Cinzel', serif;
 font-weight: normal;
 text-align: right;
 display: block;
 font-size: 10pt;
 color: #393935;
 padding: 0 5px 0 0;
 margin: 0 0 0 0;}

h5.exhaustheading {
 font-family: 'Cinzel', serif;
 font-weight: normal;
 text-align: center;
 display: inline-block;
 font-size: 10pt;
 color: #ffffff;
 padding: 5px 0 0 0;
 margin: 0 0 0 0;}
/* - - - - - - - - - - END TABLE STUFF - - - - - - - - - - - - */

 
::-webkit-scrollbar-track {
      background-color: #b46868;
} /* the new scrollbar will have a flat appearance with the set background color */
 
::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2); 
} /* this will style the thumb, ignoring the track */
 
::-webkit-scrollbar-button {
      background-color: #7c2929;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 
::-webkit-scrollbar-corner {
      background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */ 
 
.swatch {
 width: 35px;
 height: 35px;
 border: 1px solid #CCCCCC;
 border-radius: 4px;
 display: inline-block;
 margin: 5px;
 padding: 0;
 overflow: hidden;
 /* background-image: url(images/checkmark.png);
 background-repeat: no-repeat;
 background-position: 100% 100%;*/}
 
.swatch:hover {
 box-shadow: 0 0 3px #d7d4d4;}
 
.swatch:active, .swatch:focus {
 border: 1px solid #ff0000;
 box-shadow: 0 0 3px #ff0000;}
 
#exterior-swatch1 {
 background-image: url(images/swatches/exterior/exterior-color1.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch2 {
 background-image: url(images/swatches/exterior/exterior-color2.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch3 {
 background-image: url(images/swatches/exterior/exterior-color3.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch4 {
 background-image: url(images/swatches/exterior/exterior-color4.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch5 {
 background-image: url(images/swatches/exterior/exterior-color5.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch6 {
 background-image: url(images/swatches/exterior/exterior-color6.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch7 {
 background-image: url(images/swatches/exterior/exterior-color7.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch8 {
 background-image: url(images/swatches/exterior/exterior-color8.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch9 {
 background-image: url(images/swatches/exterior/exterior-color9.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch10 {
 background-image: url(images/swatches/exterior/exterior-color10.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch11 {
 background-image: url(images/swatches/exterior/exterior-color11.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch12 {
 background-image: url(images/swatches/exterior/exterior-color12.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch13 {
 background-image: url(images/swatches/exterior/exterior-color13.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch14 {
 background-image: url(images/swatches/exterior/exterior-color14.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch15 {
 background-image: url(images/swatches/exterior/exterior-color15.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#exterior-swatch16 {
 background-image: url(images/swatches/exterior/exterior-color16.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
 /* - - - - - - - - - - - BEGIN INTERIOR SWATCHES - - - - - - - - - - - - - */
#interior-swatch1 {
 background-image: url(images/swatches/interior/color1.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#interior-swatch2 {
 background-image: url(images/swatches/interior/color2.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#interior-swatch3 {
 background-image: url(images/swatches/interior/color3.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#interior-swatch4 {
 background-image: url(images/swatches/interior/color4.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#interior-swatch5 {
 background-image: url(images/swatches/interior/color5.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#interior-swatch6 {
 background-image: url(images/swatches/interior/color6.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#interior-swatch7 {
 background-image: url(images/swatches/interior/color7.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#interior-swatch8 {
 background-image: url(images/swatches/interior/color8.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#interior-swatch9 {
 background-image: url(images/swatches/interior/color9.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#interior-swatch10 {
 background-image: url(images/swatches/interior/color10.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
#interior-swatch11 {
 background-image: url(images/swatches/interior/color11.png);
 background-repeat: no-repeat;
 background-position: 50% 50%;}
 
.clear {
 clear: both;}
 
/* IMAGES */ 
#carerra { 
 width: 100%;
 height: auto;
 margin: 0 auto;
 padding: 0;
 float: none;
 display: inline-block;}
 
.triangle {
 width: 10px;
 height: 17px;
 margin: 0;
 padding: 0 10px 0 0;
 display: inline-block;}
 
.wheels {
 width: 45px;
 height: 45px;
 display: inline-block;
 float: none;
 margin: 0 auto;
 padding: 0;}
 
#logo-porsche {
 width: 87px;
 height: 90px;
 float: none;
 margin: 0 auto;
 padding: 0;
 display: inline-block;}
 
/* FORM STUFF */
.formstyles {
 border: 1px solid #e5e1e1;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 -khtml-border-radius: 3px;
 height: 25px;
 clear: both;
 margin: 0;
 padding: 0 0 0 5px;
 font-size: 14pt;
 width: 65%;
 color: #5b5d5e;
 font-family: 'Quicksand', Verdana, sans-serif;}
 
input[type=text], textarea {
 -webkit-transition: all 0.30s ease-in-out;
 -moz-transition: all 0.30s ease-in-out;
 -ms-transition: all 0.30s ease-in-out;
 -o-transition: all 0.30s ease-in-out;
 outline: none;}
 
input[type=text]:focus, textarea:focus {
 box-shadow: 0 0 5px #336699;
 border: 1px solid #336699;
 background-color: #eef2f6;}
 
/* ACCORDIAN STUFF */
.loading {
 display: none;}
            
.accordion {
 border: 1px solid #ccc;
 border-radius: 5px;
 width:  99%;
 padding: 0 0 0 0;
 margin: 0 auto;}
                
.accordion li h3 a {
 background: #666;
 background: #666 -webkit-gradient(linear, left top, left bottom, from(#b4b3b3), to(#666)) no-repeat;
 background: #666 -moz-linear-gradient(top,  #b4b3b3,  #666) no-repeat;
 border-bottom: 1px solid #333;
 border-top: 1px solid #ccc;
 border-radius: 4px;
 color: #fff;
 display: block;
 font-style: normal;
 margin: 0;
 padding: 2px 0 2px 10px;
 text-shadow: 0 -1px 2px #333, #ccc 0 1px 2px;}
	
.accordion li.active h3 a {
 background: #369;
 background: #369 -webkit-gradient(linear, left top, left bottom, from(#69c), to(#369)) no-repeat;
 background: #369 -moz-linear-gradient(top,  #69c,  #369) no-repeat;
 border-bottom: 1px solid #036;
 border-top: 1px solid #9cf;
 border-radius: 4px;
 box-shadow: 0 3px 3px #aeabab;
 text-shadow: 0 -1px 2px #036, #9cf 0 1px 2px;}
   
.accordion li.locked h3 a {
 background: #963;
 background: #963 -webkit-gradient(linear, left top, left bottom, from(#c96), to(#963)) no-repeat;
 background: #963 -moz-linear-gradient(top,  #c96,  #963) no-repeat;
 border-bottom: 1px solid #630;
 border-top: 1px solid #fc9;
 border-radius: 4px;
 text-shadow: 0 -1px 2px #630, #fc9 0 1px 2px;}
  
.accordion li h3 {
 margin: 0;
 padding: 0;}
  
.accordion .panel {
 padding: 10px 0 10px 0;
 background-color: #ffffff;}
 
/* DOCUMENT FADE IN */

#main-container {
 width: 100%;
 height: auto;
 text-align: center;
 margin: 0 auto;
 padding: 0;
 border: 0 solid #933;
 /* background-image: url(images/bg-stripe.png);
 background-repeat: repeat-y;
 background-position: 7% 0%; */

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}