/* Sound in Motion, Master CSS */
/* Coded by Rich Slezak, rich (at) tentoden (dot) com */

/* Global CSS */
html, body {background: #f2f2f2; font-size: 90%; font-family: Arial,Trebuchet MS,Verdana,sans-serif; color: #666;}
html, body a:focus {outline: 0;}
h1,h2,h3,h4 {margin: 0 20px;}
h1 {font-size: 250%; color: #FF9600;}
h2 {font-size: 200%; color: #f0f0f0;}
h3 {font-size: 150%; color: #1188DD;}
h4 {font-size: 120%; color: #1188DD; font-style: oblique;}
p {padding-bottom: 1.2em; line-height: 1.4em;}

ol, ul {list-style: none;}

a, a:visited, a:link {color: #336699; text-decoration: none;}
a:hover {color: #bd0000;}

/* page container */
#page {width: 682px; margin: 0 auto;}

/* layout border color */
#header, #navBar, #content, #addy {border: 1px solid #999; /* specific widths defined in individual declerations */}


/* Header */		
#header	{height: 79px; margin-top: 20px; background: #fff url(../img/header.jpg) 10px 0 no-repeat; border-bottom: 0; border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0;}
#header h2 {text-indent: -9999px;}		
		 
/* Navigation Bar */
#navBar {height: 27px; border-width: 0 1px; list-style-type: none;}
#navBar li {float: left;}
#navBar li a {display: block; height: 27px; text-indent: -9999px;}
#navBar li a:focus {outline: 0;}

#navBar li#home a {width: 67px; background-image: url(../img/navbar/menu.gif); background-repeat: no-repeat; background-position: 0 0;}
#navBar li#home a:hover {background-position: 0 -27px;}
#navBar li#home.on a {background-position: 0 -27px;}

#navBar li#about a {width: 76px; background-image: url(../img/navbar/menu.gif); background-repeat: no-repeat; background-position: 0 -54px;}
#navBar li#about a:hover {background-position: 0 -81px;}
#navBar li#about.on a {background-position: 0 -81px;}

#navBar li#installs a {width: 84px; background-image: url(../img/navbar/menu.gif); background-repeat: no-repeat; background-position: 0 -108px;}
#navBar li#installs a:hover {background-position: 0 -135px;}
#navBar li#installs.on a {background-position: 0 -135px;}

#navBar li#products a {width: 131px; background-image: url(../img/navbar/menu.gif); background-repeat: no-repeat; background-position: 0 -162px;}
#navBar li#products a:hover {background-position: 0 -189px;}
#navBar li#products.on a {background-position: 0 -189px;}

#navBar li#testimonials a {width: 119px; background-image: url(../img/navbar/menu.gif); background-repeat: no-repeat; background-position: 0 -216px;}
#navBar li#testimonials a:hover {background-position: 0 -243px;}
#navBar li#testimonials.on a {background-position: 0 -243px;}

#navBar li#publications a {width: 120px; background-image: url(../img/navbar/menu.gif); background-repeat: no-repeat; background-position: 0 -270px;}
#navBar li#publications a:hover {background-position: 0 -297px;}
#navBar li#publications.on a {background-position: 0 -297px;}

#navBar li#contact a {width: 83px; background-image: url(../img/navbar/menu.gif); background-repeat: no-repeat; background-position: 0 -324px;}
#navBar li#contact a:hover {background-position: 0 -351px;}
#navBar li#contact.on a {background-position: 0 -351px;}



/*  Container and Main Content divs */ 
#content {padding-top: 40px; border-width: 0 1px; background: #fff url(../img/backFade.gif) 0 0 repeat-x;}	

	

/*left side divs */
.boxLeft {width: 50%; padding: 20px;}
.boxLeft h4 {margin: 0;}


/* right side divs */
.boxRight {width: 50%; padding: 20px 20px 20px 0; float: right; clear: right;}


/* 3 column div */
#threeColDiv {margin-top: 20px; padding: 20px;}
#threeColDiv H4 {margin: 0; padding-bottom: 0; border-bottom: 1px solid #d46c6c; line-height: 1.5em;}
#threeColDiv ul {float: left; clear: right; margin: 25px 0 0 0;}
#threeColDiv ul strong {display: block; font-weight: normal; color: #1188DD; padding-bottom: 0.3em;}
#threeColDiv ul span {display: block; font-size: 80%; line-height: 1.4em; padding-bottom: 10px; margin: 0; color: #666;}
#threeColDiv .left {width: 230px;}
#threeColDiv .mid {width: 230px;}
#threeColDiv .right {width: 150px; margin-left: 23px;}


/* address bar */		
#addy {background: #e6e6e6; padding: 5px 0; height: 25px; border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px;}
#addy ul {list-style-type: none; width: 96%; margin: 3px auto 0 auto;}
#addy li {float: left; background: url(../img/menuLine.gif) no-repeat right 4px;}
#addy li.last {background: none;}
#addy li span {margin: 0 5px; font-size: 90%; color: #333;} 


/* Footer */			
#footer	{margin-top: 15px; text-align: right; height: 25px;}
#footer span {margin-right: 27px;}



.hdr {text-indent: -9999px;}


/* Home page content */
.homePage .boxLeft {width: 400px; height: 370px; padding: 20px 0 0 30px;}
.homePage .boxLeft h4 {margin-bottom: 15px;}
.homePage .boxLeft a {font-size: 90%; /*cursor: default;*/}
.homePage .boxLeft a:hover {/*color: #336699;*/} 
.homePage .boxRight {width: 225px; height: 350px; padding-top: 20px;}
.homePage .boxRight p {color: #c6260c;}

.whatWeOffer {background: url(../img/titleWhatWeOffer.gif) no-repeat 0 0; width: 339px; height: 32px;}
.showcaseInstall {background: url(../img/titleShowcaseInstall.gif) no-repeat top right; height: 40px;}
.carouselFadeL {background: url(../img/carouselFade.png) no-repeat -15px 0; width: 15px; height: 100px; position: absolute; z-index: 416;}
.carouselFadeR {background: url(../img/carouselFade.png) no-repeat 0 0; width: 15px; height: 100px; margin-left: 665px; position: absolute; z-index: 604;}

/* Advertisements on home page */
#porscheUpgrades {margin-top: 13px; width: 215px; height: 125px; background: url(../img/porscheUpgrades.gif) no-repeat 0 0; -moz-border-radius:3px; -webkit-border-radius: 3px; border-radius: 3px; border: 2px solid #e1e1e1;}
#porscheUpgrades a {width: 190px; height: 85px; margin: 35px 0 0 15px; display: block;}
#porscheUpgrades a span {display: block; text-indent: -9999px;}

/* awards logo on home page */
#aList {margin-top: 28px; width: 215px; height: 125px; background: url(../img/awardBox.gif) no-repeat 0 0; -moz-border-radius:3px; -webkit-border-radius: 3px; border-radius: 3px; border: 2px solid #e1e1e1;}
#aList a {width: 180px; height: 85px;  margin: 20px 0 0 20px; display: block;}
#aList a span {display: block; text-indent: -9999px;}

/* facebook link on home page */
#facebook {margin: 30px 7px 0 0; float: right;}
#facebook a {width: 197px; height: 25px; display: block; background: url(../img/facebook.gif) no-repeat top left;}
#facebook a:hover {background-position: bottom left;}
#facebook a span {display: block; text-indent: -9999px;}


/* About Page Content */
.aboutPage .boxLeft {width: 338px; height: 590px; padding: 0;}
.aboutPage .boxRight {width: 310px; padding-top: 0;}

.aboutPage .boxLeft p {display: block; margin: 0; border: 0; padding: 20px 20px 0 20px;	line-height: 1.38em;}
.aboutPage .boxLeft p.first {padding-top: 0;}
.aboutPage .boxLeft a {font-weight: bold;}

.bio {margin: 33px 5px 5px 5px; padding: 0; clear: left; width: auto; height: 60px; border: 0;}
.bio.first {margin-top:0;}
.bio ul {display: block; margin: 0 0 0 60px; padding: 0 0 0 0.5em;}	
.bio li {display: block; list-style: none; text-align: left; font-size: 90%; color: #333;}
.bio a.crewpic {float: left; width: 50px; margin: 0; clear: right;}
	
a.crewpic img {border: 1px solid #666;}		
a:hover.crewpic img {border: 1px solid #cc3333;}		
a.aboutpic img {border: 0; border-width: 0;}



/* Installs Page Content */
.installsPage #content {padding-bottom: 20px;}
.installsPage .boxLeft {width: 310px;}
.installsPage .boxRight {width: 300px; height: 300px; padding-top: 25px;}
#categoryImage {width: 300px; height: 300px; -moz-border-radius:3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #666; background-position: 0 0; background-repeat: no-repeat;}
.fullSystem {background: url(../img/installList/001.jpg);}
.ipod {background: url(../img/installList/002.jpg);}


/* full system install page */
.installContainer {margin: 30px 25px 20px 5px; background: white;}
.installContainer a img {float: left; width: 175px; height: 100px;}
.installContainer.last {margin-bottom: 50px;}
/*.installContainer.last .installText {border-bottom: none;}*/
.installText {margin-left: 185px; border-bottom: 1px solid #999; min-height: 87px; padding-bottom: 5px; font-size: 90%;}
.installText p {padding: 8px 0 3px; min-height: 60px; color: #333;}
.installText span {font-weight: bold; color: #333;}
.installText a {margin-right: 10px; color: #CC3333; text-decoration: none;}



/* now the individual installs*/
#installDescription {padding: 10px 20px 30px 20px;}
#installsGallery {margin-bottom: 60px;}
.installDetailContainer {margin: 20px 20px 35px 20px; background: white;}
.installDetailContainer a {float: left; width: 200px; height: 150px; border: 1px solid #666; -moz-border-radius:3px; -webkit-border-radius: 3px; border-radius: 3px;}
.installDetailContainer a:hover {border: 1px solid #CC3333;}
.installDetailText {margin-left: 220px; border-bottom: 1px solid #999; min-height: 151px;}
.installDetailText p {line-height: 1.2; min-height: 45px;}
.goBackLink {display: block; text-align: center; margin-bottom: 10px;}


/* Product Lines Page Content */
.productsPage .boxLeft {height: 1620px; padding: 0;}
.productsPage .boxRight {height: 1620px; padding: 0;}

.productsPage .boxLeft h4 {display: block; margin: 0; border: 0; padding: 0 0 0 22px;}		
.productsPage .boxLeft img {display: block; margin: 0 0 25px 50px; border: 0;}

.productsPage .boxRight h4 {display: block; margin: 0; border: 0; padding: 15px 0 10px 22px;}
.productsPage .boxRight h4.first {padding-top: 0;}
.productsPage .boxRight img {display: block; margin: 0 0 25px 50px; border: 0;}


/* Testimonials Page Content */
.testimonialsPage #content {padding-bottom: 40px;}
.testimonialsContainer {margin: 20px; padding: 5px 7px; background: white;}
.testimonialsContainer ul {min-height: 70px; padding-bottom: 5px;}
.testimonialsContainer li {font-weight: bold;}
.testimonialsContainer li.info {font-weight: normal; padding-top: 4px;}
.testimonialsContainer a {color: #CC3333; text-decoration: none; font-weight: bold;}
.testimonialsContainer.odd {background: #f2f2f2; -moz-border-radius:3px; -webkit-border-radius: 3px; border-radius: 3px;}
.testimonialsContainer.odd.first {margin-top: 5px;}
.testimonialsContainer.odd.last {margin-bottom: 0;}

/* now the form section on comments page */
.testimonialsContainer form ul.left {float: left; width: 180px; margin-left: 10px;}
.testimonialsContainer form ul.right {margin: 40px 0 0 210px;}
.testimonialsContainer form li {font-size: 85%;}
.testimonialsContainer form li input {background: #fff; color: #111; border: 1px solid #aaa; width: 175px; margin-bottom: 5px; -moz-border-radius:2px; -webkit-border-radius: 2px; border-radius: 2px;}
.testimonialsContainer form li textarea {background: #fff; color: #111; border: 1px solid #aaa; width: 403px; margin-bottom: 11px; -moz-border-radius:2px; -webkit-border-radius: 2px; border-radius: 2px;}
.testimonialsContainer form li.buttons {text-align: right; padding-right: 13px;}
.testimonialsContainer form li input[type="submit"],
.testimonialsContainer form li input[type="reset"]{width: 60px; margin-left: 5px; background-color:#ddd; cursor: hand; cursor: pointer;}
.testimonialsContainer form li input[type="submit"] {font-weight: bold;}

/* Publications Page Content */
.pubPage #content {height: 2565px;}
.pubMain {margin: 0 43px 40px 43px; width: 140px; height: 245px; float: left; clear: right;}
.pubMain p {width: 132px; padding: 5px 0 5px 5px; line-height: 1.2em; color: #666; font-size: 85%;}

/* Contact Page Content */
.contactPage #content {padding: 30px 20px 40px 20px;}	
.contactPage #content ul {list-style: none; width: 230px; margin: 45px 0 0 0; padding: 10px 0;}
.contactPage #content ul.first {margin-top: 0;}		 
.contactPage #content li {display: block; margin: 0; border: 0; padding: 0; font-size: 16px; color: #666;}
.contactPage #content li a {font-weight: normal; color: #bd0000;}
.contactPage #content p {display: block; margin: 0; border: 0; padding: 17px 0 0 0; line-height: 1.4em; font-size: 13px; color: #666;}		
.contactPage #content h4.first {margin: 0; padding-top: 0;}			
#gmap {float: right; margin-top: 15px;}
#gmap iframe {border: 1px solid #999;}
#gmap small {font-size: 85%;}
.directions {background: #f2f2f2; -moz-border-radius:3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 20px; margin-top: 85px;}


/* Advertisement Page */
.adPage #content {height: 1015px;}
.adPage .Adcontent {margin: 20px 0;}
.adPage .Adcontent.first {margin: 0;}
.adPage .Adcontent h4 {margin: 0 20px 15px 20px;}
.adPage .Adcontent p {margin: 10px 20px 0 0; width: 410px; float: right;}
.adPage .Adcontent img {margin: 15px 0 20px 20px;}

.adPage .Adcontent a.thumb {display: block; width: 200px; height: 150px; margin: 30px 0 20px 20px; border: 1px solid #666; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}		
.adPage .Adcontent a.thumb:hover {border: 1px solid #cc3333;}
.adPage .Adcontent a.thumb span {display: block; text-indent: -9999px;}

.cup {background: url(../img/installThumbs/porscheCup/003.jpg) no-repeat 0 0;}
.sub {background: url(../img/installThumbs/porscheSub/002.jpg) no-repeat 0 0;}
.speaker {background: url(../img/installThumbs/porscheSpeakerFix/005.jpg) no-repeat 0 0;}
.door {background: url(../img/installThumbs/porscheDoorFix/002.jpg) no-repeat 0 0;}



/* Plaque Awards Page */
#awardtxt {float: left; margin-top: 0; padding: 2em 0 0 0; clear: left; width: 350px; height: 225px;}       
#plaquepic {float: right; margin-top: 0; padding: 3em 0 0 0; clear: right; width: 230px;}	  
#plaquepic img {border: 1px solid #333; float: left; margin: 0 10px 35px 0;}
div.info {margin: 20px;	padding: 0 10px; width: auto;}		
div.info ul {margin: 0;	padding: 0;}	
div.info li {display: block; list-style: none;}
div.info li.name {font-weight: bold; padding-top: 0; border-bottom: 1px solid;}	
div.info li.title {text-align: right; color: #c33; padding-bottom: 2em;}


/* Purchase SIM Products page */
.simProduct {float: left; width: 160px; height: 420px; margin: 20px 0 20px 20px; padding: 20px; background: #f2f2f2; -moz-border-radius:3px; -webkit-border-radius: 3px; border-radius: 3px;}
.simProduct h4 {margin: 5px 0 0 0; font-size: 110%; font-style: normal;}
.simProduct div.info {height: 100px; margin: 0; padding: 0; width: auto;}
.simProduct p {margin-top: 15px; padding: 0;}
.simProduct .price p {font-size: 230%; line-height: 1em; padding-bottom: 0.3em;}
.simProduct .price p sup {font-size: 50%; line-height: 1.2em; vertical-align: top;}
.simProduct form {margin-top: 10px;}
.simProduct form input[type="image"] {margin-top: 20px;}
#paypalSeal {display: block; float: right; margin: 20px;}