/* CSS Document */
/* Author: Sean Gilbert, PCG www.pilotagecreativegroup.com */

img {
vertical-align:top;
border:none;
}

object, embed {
display:block;
}

body {
margin:0;
padding:0;
color:#333;
font:12px "Lucida Grande", Arial, sans-serif;
}

#threeColumn {
background:#000 url(images/bg2.jpg) repeat-x fixed;
}

#twoColumn {
background:#000 url(images/bg2.jpg) repeat-x fixed;
}

#oneColumn {
background:#000 url(images/bg2.jpg) repeat-x fixed;
}

#wrapper {
width:850px;
margin:0 auto;
background-color:#000;
padding:0;
}

/* #header {
width:850px;
height:172px;
background:url(images/psheader.jpg) no-repeat;
margin:10px 0 0 0;
}

*/

h1, h2, h3, h4, h5, h6, p, li, dt, dd, address {
text-shadow: 0 0 0 #000;/* safari hack */
}


h1 {
margin:0;
padding:0;
font-size:150%;
color:#990000;
text-indent: -9000px;
}

h2 {
color:#990000;
font-size:160%;
margin:5px 0 5px 15px;
}

h3 {
color:#333;
margin:5px 0 5px 15px;
}

h4 {
color:#000;
margin:5px 0 5px 15px;
}

/* --------------- main navigation 
#mainNav
{
margin:80px 0 0 0;
padding: 0;
width: 850px;
height:20px;
font-weight: bold;
}

#mainNav ul
{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#mainNav li
{
display: block;
margin: 0;
padding: 0;
float: left;
width: auto;
}

#mainNav a
{
color:#FFF;
display: inline;
width: auto;
text-decoration: none;
margin: 0;
padding: 5px 6px;
border-right: 1px solid #666;
}

#mainNav a:hover, #mainNav a:active {color:#FFF;text-shadow:0 0 12px #FFF;}

#mainNav a.active:link, #mainNav a.active:visited
{
position: relative;
z-index: 102;
background: #BBB;
color:#FFF;
font-weight: bold;
}
------------------- */


/* Highlighting the current page 

body.home #mainNav a#home,
body.maintenance #mainNav a#maintenance,
body.inspections #mainNav a#inspections,
body.repairs #mainNav a#repairs,
body.paint #mainNav a#paint,
body.cat #mainNav a#cat,
body.testimonials #mainNav a#testimonials,
body.team #mainNav a#team,
body.trailer #mainNav a#trailer,
body.testimonials #mainNav a#testimonials,
body.contact #mainNav a#contact { 
color: #FFF;
text-decoration: underline;
}
*/

/* ------------------------------- primary content ------------------------------------------------------------ */

#page {
width:850px;
padding:0;
margin:15px 0 0 0;
background:#FFF url(images/page_bg.gif);
background-position:top;
background-repeat:no-repeat;
/* #AD161C */
}

#primaryContent {
float:left;
width:850px;
display:inline;
margin:15px 0 0 0;
}

#twoColumn #primaryContent {
float:left;
width:684px;
margin: 15px 0 0 165px;
border-left:1px dotted #333;
}

#threeColumn #primaryContent {
float:left;
width:396px;
margin: 15px 0 0 165px;
border:none;
}

#secondaryContent{
float:left;
width:274px;
margin:15px 0 0 15px;
border:none;
font-size:130%;
}

#twoColumn #secondaryContent {
display:none;
}

#sideContent {
float:left;
width:150px;
margin:15px 0 20px -850px;
}

.box {
color:#333;
margin: 15px 0 0 0;
padding: 5px 0 5px 0;
}

.cbb {
margin: 0 10px 0 10px;
padding: 5px 0 5px 0;
line-height: 170%;
background:transparent;
}

.cbb p, .cbb h3 {
margin: 0;
padding: 0 5px 5px 15px;
color:#333;
}

.cbSide {
margin: 0 10px 0 10px;
font-size:130%;
padding: 5px 0 5px 0;
line-height: 170%;
background:#FFF;
}

.cbSide ul {
margin:0 10px 0 10px;
list-style:none;
padding: 5px 0 5px 0;
line-height: 170%;
}

.default {
font-size:130%;
}

.default img {
float:right;
}

.default h2 {
margin:20px 0 0 15px;
}

.content {
font-size:130%;
}

.content p {
margin-bottom:10px;
}

.content img {
float:left;
}

.ourteam {
font-size:130%;
}

.ourteam p {
margin-bottom:10px;
}

.ourteam h3 {
padding:0;
}

.ourteam ul {
padding-left:0;
}

.ourteam li {
list-style:none;
margin-left:0;
}

.ourteam img {
float:left;
margin: 0 15px 2px 0;
}

.right {
font-size:130%;
}

.right p {
margin-bottom:10px;
}

.right img {
float:right;
}

.left img {
float:left;
margin:0 10px 10px 0;
}
.left h3 {
color:#350304;
}

.testimonials p {
margin-top:30px;
}

table {
float:left;
display:block;
}

/* drop shadow effect for the gallery thumbnails. Sadly this requires a div to be wrapped around the image markup, which is a shame */

.img-wrapper {
margin: 20px 40px 0 0;
background: url(images/shadow.gif) no-repeat bottom right;
float:left;
line-height:0;
}
 
.img-wrapper img {
float:none;
margin:0;
background:#fff;
padding:4px;
position:relative;
left:-5px;
top:-5px;
}

/* used to ensure all our floated thumbnails stay the right width away from the left side of the box */

.thumbnails {
margin: 0 0 20px 15px;
}

.thumbnails p {
font-weight:bold;
}

.trailer-thumbnails {
margin: 15px 0 20px 0;
}

.trailer-thumbnails img {
padding:0;
margin:10px 0 0 0;
}

.trailer-wrap {
width:265px;
text-align:center;
float:left;
}

.trailer-thumbnails p {
font-weight:bold;
}

.wrapper {
width: 273px;
text-align:center;
margin: 20px 40px 0 0;
padding: 4px 4px 10px 4px;
float:left;
line-height:0;
display:inline;
border:1px solid #999;
}

.wrapper img {
float:left;
margin:0 0 10px 0;
background:transparent;
padding:0;
position:relative;
}

/* footer */

#footer{
clear:both;
width: 850px;
text-align:center;
padding:40px 0 25px 0;
margin-bottom:20px;
}
#footer img {
margin:0;
padding:0 20px 0 20px;
}
#footer a:link, #footer a:visited {
color:#333;
}
#footer a:hover {
color:#333;
}

/*FORM*/

form {
margin: 0;
padding: 0;
font-size: 80%;
}

fieldset {
width: 146px;
border: 0;
margin: 0 0 10px 0;
padding:2px;
}

#survey {
width:700px;
padding:0 20px 20px 20px;
}

#survey p {
margin-top:20px;
}

#survey label {
width:750px;
}

legend {
text-transform: uppercase;
font-size: 110%;
font-weight: bold;
margin: 10px 0 2px 0px;
padding: 2px;
background: #D72E2E;
color: #FFF;
}

label {
display: block;
font-weight: bold;
}

input {
margin-top:0;
padding: 2px;
}

textarea {
margin-top:0;
padding: 2px;
color: #333;
}