/*****************
browsers interpret margin and padding a little differently, 
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
outline: none;
}

body, html
{height:100%;}

/*
Set initial font styles
*/
body {
   text-align: left;
   font-family:Arial, Verdana, Geneva,  Helvetica, sans-serif;
   font-size: 75.01%;
   line-height: 1em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div {
   font-size: 1em;
}

/*
if img is inside "a" it would have 
borders, we don't want that
*/
img {
   border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link, 
a:active {
   text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit; 
   color: #18507C; 
}

a:visited {
   text-decoration: underline;
   background-color: inherit;
  color: #18507C;                /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
a:hover {
   text-decoration: none;
   background-color: #C3D4DF;
   color: #385C72;
}

/*****************
basic layout 
*****************/
body {
   /*background: url("http://www.toy-ota.co.nz/images/template/header_main_bg.jpg") repeat-x  #fff  ;*/
   background: url("http://www.toy-ota.co.nz/uploads/header-bg.jpg") repeat-x  #fff  ;
color: #333;
   margin:0em; /* gives some air for the pagewrapper */
}

.intro
{color:#000;
text-align:center;
font-size:0.8em;}

/* center wrapper, min max width */
div#pagewrapper {
    width: 930px;
margin: 0 auto;
    background: #333333;
    height: auto !important;
    min-height: 100%;
position:relative;

}

#inner
{background:#fff;}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/




div#number {
    background: url("http://www.toy-ota.co.nz/images/template/numbers.gif.png") no-repeat scroll 0 0 transparent;
    bottom: 0;
    display: block;
    font-size: 0;
    height: 189px;
    line-height: 0;
    position: absolute;
    right: 5px;
    width: 145px;
}


div#header {
   height: 145px; /* adjust according your image size */
        position:relative;
 background:url("http://www.toy-ota.co.nz/uploads/header-bg.jpg") repeat-x;
}

div#header #logo a {
    background: url("http://www.toy-ota.co.nz/uploads/images/logo-white.png") no-repeat scroll 15px 10px transparent;
    display: block;
    font-size: 0;
    height: 145px;
    line-height: 0;
    text-decoration: none;
    text-indent: -999em;
}

div#header #logo{
    display: inline;
    float: left;
    font-size: 0;
    line-height: 0;
    width: 560px;
}

#search .button {
display:inline;
float:right;
font-size:0;
height:27px;
line-height:0;
text-indent:-4000px;
width:30px;
}

.field-focused {
    color: #969696;
}
.field {
    border: 1px solid #333;
background:#E2B1AC;
    color: #222;
    float: left;
    height: 17px;
    margin-right: 0px;
    padding: 4px 5px;
    width: 175px;
}

#search {
    position: absolute;
    right: 10px;
    top: 98px;
    width: 217px;
}


#search .button {
background:url("http://www.toy-ota.co.nz/images/template/search-button.gif.png") no-repeat scroll 0 0 transparent;
border:0 none;
}

div.breadcrumbs {
   padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;             /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   margin: 0 1em;              /* css shorthand rule will be opened to be "0 1em 0 1em" */
   border-bottom: 1px dotted #000;
}

div#content {
position:relative;
   margin: 1.5em auto 2em 0; /* some air above and under menu and content */
margin-bottom:0px;
padding-bottom:30px;
min-height:400px;
}

div#main {
margin-left:15px;

float:left;
width:650px;
}


div#sidebar {
margin:0px;
position:relative;
z-index:10;

width:250px;
float:right;
}




/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
   height: 1px;
   margin: 1em;
   border-bottom: 1px dotted black;
}

/* relational links under content */
div.left49 {
  float: left;
  width: 49%;  /* 50% for both left and right might lead to rounding error on some browser */
  font-size:0.7em;
}

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
  font-size:0.7em;
}




/********************
CONTENT STYLING
*********************/
div#content {

}

/* HEADINGS */
div#content h1 {
    color: #333333;
    font-size: 1.5em;
    letter-spacing: 0.1em;
    line-height: 1.5em;
    margin: 0 0 0.5em;
    padding-bottom: 1px;
    text-align: left;
    text-transform: uppercase;
}
div#content h2 {
	color: #333; 
	font-size: 1.4em; 
	text-align: left; 
	padding-bottom: 1px;
        line-height: 1.5em;
        margin: 0 0 0.5em 0;
}
div#content h3 {
   color: #333; 
   font-size: 1.3em;
   line-height: 1.3em;
   margin: 0 0 0.5em 0;
}
div#content h4 {
   color: #294B5F; 
   font-size: 1.2em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
div#content h5 {
   font-size: 1.1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
h6 {
   font-size: 1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
/* END HEADINGS */

/* TEXT */
p {
   font-size: 1em;
   margin: 0 0 1.5em 0;  /* some air around p elements */
   line-height:1.5em;
   padding: 0;
}
blockquote {
   border-left: 10px solid #ddd;
   margin-left: 10px;
}
pre {
   font-family: monospace;
   font-size: 1.0em;
}
strong, b {
/* explicit setting for these */
   font-weight: bold;
}
em, i {
/* explicit setting for these */
   font-style:italic;
}



/* END TEXT */

/* LISTS */
div#main ul,
div#main ol,
div#main dl {
  font-size: 1.0em;
   line-height:1.4em;
   margin: 0 0 1.5em 0;
}
div#main ul li,
div#main ol li {
   margin: 0 0 0.25em 3em;
}

div#dl dt {
   font-weight: bold;
   margin: 0 0 0.25em 3em;
}
div#dl dd {
   margin: 0 0 0 3em;
}

.hidden
{display:none;}

.image
{padding:5px;}


div#bottom {
    background: url("http://www.toy-ota.co.nz/images/template/capricorn-logo.png") no-repeat scroll 720px center #cf1500;
    color: #fff;
    font-size: 16px;
    margin: 0 auto;
    padding: 10px 190px 10px 0;
    position: relative;
    text-align: center;
    width: 740px;
}

div#bottom a
{color: #fff;}

#bottom p
{margin-bottom:10px;}

#wrap
{
    background: url("http://www.toy-ota.co.nz/images/template/bottomTop.gif.png") no-repeat scroll left top #E5E5E5;
    height: 8px;
    margin: 0 auto;
    padding: 0px;
    position: relative;
    width: 930px;
line-height:0px;
font-size:0px;
}

#Topwrap
{
    background: url("http://www.toy-ota.co.nz/images/template/TopBorder.png") no-repeat scroll left top #E5E5E5;
    height: 8px;
    margin: 0 auto;
    padding: 0px;
    position: relative;
    width: 930px;
line-height:0px;
font-size:0px;
}



div#footer {
 width: 900px;
margin: 0 auto;
clear:both;
color:#ccc;
}
div#footer {
font-size:0.8em;
padding:1.5em;
text-align:center;
padding-top:10px;
}
div#footer p a {
color:#ccc;
}
.footertable
{vertical-align:top;}

.footertable a, .footertable a:visited 
{text-decoration:none;
background-color:transparent;
color:#ccc;}

.footertable a:hover
{text-decoration:underline;
background-color:transparent;
color:#ccc;}



#facebooklink {
    background: url("http://www.toy-ota.co.nz/images/template/facebook-and-twitter.png") no-repeat scroll 0 0 transparent;   
display: block;
    font-size: 0;
    height: 63px;
    line-height: 0;
    margin: 0 auto;
    text-decoration: none;
    text-indent: -999em;
    width: 185px;
margin-bottom:20px;
}

#twitterlink {
  
background: url("http://www.toy-ota.co.nz/images/template/facebook-and-twitter.png") no-repeat scroll 0 -63px transparent; 
    display: block;
    font-size: 0;
    height: 63px;
    line-height: 0;
    margin: 0 auto;
    text-decoration: none;
    text-indent: -999em;
    width: 185px;
}

#social
{text-align:center;
}

p.quote_name{
font-size:0.9em;
font-weight:bold;
}

#contact
{
margin:0 auto;
width:165px;
padding:10px;
background: #FFF7E5;
-webkit-border-radius:8px;
border-radius: 8px; 
-webkit-box-shadow: 0px 0px 2px 2px #c9c9c9;
box-shadow: 0px 0px 2px 2px #c9c9c9; 
}

.clear
{clear:both;display:block;
width:99%;
height:1px;}

/* END LISTS */

#cinfo {

    display: block;   
   position: absolute;
    right: 10px;
    top: 23px;
width:88px;
height:56px;
float:right;
 background: url("http://www.toy-ota.co.nz/images/template/capricorn-logo-small.png") no-repeat  transparent ;
background-size:80px 60px;
}

#cinfo p{
font-size:16px;
margin-bottom:0px;
}


.wrecklist
{margin-bottom:20px;
border-bottom:1px solid #ccc;
padding-bottom:20px;}


#contactWrapper { 
  left: 0px;
  position: absolute;
  margin-left: 25px;
  width: 280px;
}

#contact {
  position: absolute;
  top: 0;
  margin-top: 20px;
}

#contact.fixed {
  position: fixed;
  top: 0;
}

.partsform
{
width:210px;
float:right;
}

.partsform .formbuilderform
{width:210px;}

.partsform .formbuilderform textarea
 {width:200px;
height:100px;}

.partsform .formbuilderform  input,
.partsform .formbuilderform  textarea
{margin-bottom:10px;}

.partsform .formbuilderform  p
{margin-bottom:5px;}

.newused
{float:left;
width:48%;
margin-bottom:10px;
margin-right:10px;
border-bottom:1px solid #ccc;
padding-bottom:10px;
}


.newused img
{float:left;
margin-right:15px;}

a.youtube
 {  
 background: url("http://www.toy-ota.co.nz/images/template/youtube.jpg") no-repeat ; 
height:50px; 
width:130px; 
float:right;
top:0;

}
a.youtube2
 {  
 background: url("http://www.toy-ota.co.nz/images/template/youtube.jpg") no-repeat ; 
height:50px; 
width:130px; 
float:right;
top:0;
position:relative;
padding-right: 20px;
}

div.wrecklist h2{ width:300px; }