﻿/*

NEW PROJECT CSS 
To be deleted on integration of design 

*/

body{
    background: #fff url(body-background.png) repeat-x top center;
    font: 14px/1.5em Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

form{margin:0;padding:0;}

img{border:0}

#wrapper {
	width: 940px;
	margin: 0 auto;
}

a{color:#333333;text-decoration:underline;}

/* header */
header{
    
    height: 120px;
}

hgroup
{
 width:235px;
 height:53px;
 float:left;    }

header h1{margin:0;margin-bottom:20px;}

.logo a
{
    width:232px;
    height:53px;
    background:url(traxion-logo.png) no-repeat;
    margin-top:7px;
    display:block;
    text-indent:-9000px;
    }

.tagline{display:none;}

/* nav */

#main-nav{float:right;}

#main-nav ul{
    margin: 0;
    padding: 45px 0 0;
    margin: 0;
    width:705px;
    list-style: none;
}

#main-nav ul li{
    padding: 0;
    list-style: none;
    float: left;
}

#main-nav ul li:first-child{margin-left:0px;}

#main-nav ul li a{
    font-size:12px;
    text-transform:uppercase;
    font-weight:bold;
    text-decoration:none;
    color:#17226f;
    padding:8px 5px;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
} 

#main-nav ul li a:hover{ background:#17226F; color:#fff; }

#main-nav li a strong{
    font-weight: normal;
}

/* main */

#main{
    min-height:500px;
    margin: 0 auto 10px;
    
}* html #main{ height: 400px; } #main:after { content: "."; height: 0; visibility: hidden; clear: both; display: block; }

#content{
    width: 940px;
    min-height: 1px;
    float: left;
} * html #content{ height: 1px; } #content:after { content: "."; height: 0; visibility: hidden; clear: both; display: block; }

#breadcrumb{
    font-size: 11px;
    line-height: 1.4em;
    color: #999;
    padding: 0 0 10px;
    border-bottom: solid 1px #eee;
    width: 940px;
    float: left;
} #breadcrumb a{ color: #999; }

/* sidebar */

#sidebar{
    width: 220px;
    float: left;
    margin: 2em 20px 0 0;
}


/* footer */

footer{
    width: 100%;
    margin: 0 auto;
    border-top: solid 1px #d0d0d0;
    border-bottom: solid 1px #d0d0d0;
    color: #333333;
    font-size: .75em;
    background:#f4f4f4;
    height:280px;
}

footer div{width:940px;margin:auto;}

footer nav
{
    margin-left:10px;
    height:95px;
    width:940px;
    border-bottom:1px solid #d0d0d0;
    margin:auto;
    margin-top:0px;
    
}

footer nav ul{
    margin: 40px auto;
    width: 900px;
    list-style: none;
    float:right;
}

footer nav ul li{
    margin: 0 10px 0 10px;
    padding: 0;
    list-style: none;
    float: left;
}

footer nav ul li a{
    font-size:14px;
    text-transform:uppercase;
    text-decoration:none;
    color:#737373;
    font-weight:normal;
} 

footer nav ul li a:hover{ text-decoration:underline; }

footer nav li a strong{
    font-weight: normal;
}


footer section{float:left;margin-left:10px;padding-right:20px;margin-top:38px;}
footer section h2{float:left;font-size:14px;}
footer section ul{float:left;height:90px;padding:10px;margin:0;}
footer section ul li{list-style-type:none;font-size:12px;}

footer .products{border-right:1px solid #d0d0d0;padding-right:40px;margin-left:40px;}
footer .quick-contact{padding-left:30px;}


/*product range page styles*/
.products-range
{
    margin-top:170px;
    position:relative;
    z-index:200;
    }

.ie8 .products-range
{
    margin-top:220px;
    position:relative;
    z-index:200;
    }

.ie8 section.dealer-list, .ie8 section.towing-links, .ie8 section.page-text, .ie8 .form {
    margin-top:220px;
    display: block;
}

.products-range ul
{
    width:100%;
    border-bottom:1px solid #F3F3F3;
    margin:0;
    padding:0;
    height:200px;
    position:relative;
    }
    
.products-range ul li
{
    display:block;
    width:300px;
    height:200px;
    float:left;
    border-left:1px solid #F3F3F3;
    position:relative;
    }
    
.products-range ul li:last-child
{
    border-right:1px solid #F3F3F3;
}  
.products-range ul li:first-child{margin-left:20px;}


.products-range li a
{
    display: block;
    float: left;
    height:180px;
    line-height: 1.2;
    padding: 10px;
    position: relative;
    z-index: 1;
    color:#333;
    text-decoration:none;
    background:#FFF;
   
    }
    
.products-range li a:hover
{
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.65);
    margin: -15px;
    padding: 15px;
    z-index: 2;
    }


.products-range .product-logo {
    height: 50px;
    width: 100%;
    position:relative;
    text-align:center;
    margin:10px 0 10px 0;
    }
    


.products-range .product-logo img
{
  height:35px;
}

 
/*product page styles*/

.header-image
{
    position:absolute;
    width:100%;
    z-index:100;
    top:150px;
    left:0;
    height:139px;
    border:0;
    background:#000;
    background-position:center center;
    background-repeat:no-repeat;
    }
    
.product-gradient
{
    position:absolute;
    width:100%;
    z-index:110;
    bottom:0px;
    left:0;
    height:28px;
    border:0;
    background:url(product-gradient.png) no-repeat center bottom;
    overflow:hidden;
    }
    
.product-info
{
    width:940px;
    height:130px;
    margin:auto;
    position:relative;
    bottom:10px;
    }

.product section{width:100%;height:auto;}



header h2{position:absolute;z-index:3;color:#FFF;font-size:30px;left:20px;top:10px;}
header .subtitle{position:absolute;z-index:3;color:#FFF;font-size:25px;left:20px;top:50px;font-weight:lighter;}

.product section article
{
    width:345px;
    height:auto;
    float:left;
    padding-left:10px;
    margin-left:10px;
    margin-top:150px;
    margin-bottom:20px;
    }

a.button, a.button:hover{background:url(product-button.png) no-repeat;}
    
.product .button
{
    display:block;
    background-position:0px 0px;
    width:202px;
    height:33px;
    text-transform:uppercase;
    color:#FFF;
    padding-top:17px;
    padding-left:15px;
    text-decoration:none;
    font-weight:bold;
    margin-top:20px;
    font-size:11px;
    }    

.product .button:hover{background-position:0px -50px;}

.product section aside
{
    width:530px;
    height:auto;
    float:right;
    margin-top:150px;
    }
    
.product section aside #slideshow{position:relative;margin-top:20px;}
    
    
.product section aside ul{margin-top:25px;height:75px;padding:0;}
   
.product section aside ul li
{
    display:inline-block;
    float:left;
    width:95px;
    height:64px;
    border:1px solid #acacac;
    margin-left:5px;
    }

#nav li.activeSlide
{
   border:1px solid #0970b2;
}
   
.copyright{height:50px;width:940px;padding-top:20px;color:#3c3a37;margin:auto;}

.copyright p{width:400px; float:left;margin:0;}
.copyright p:last-child{float:right;text-align:right;}

.copyright a{color:#3c3a37;font-weight:bold;}



.paging
{
    height:70px;
    border-bottom:none;
    position:relative;
    margin-bottom:-10px;
    clear:both;
    background:none;}
    
    
.paging .prev-item, .paging .next-item, .paging .back-to-range
{
    width:300px;
    height:20px;
    position:absolute;
    top:25px;
}

.paging .prev-item
{
    
    background:url(left-arrow.gif) no-repeat left center;
    left:20px;
    padding-left:15px;
    
    }
    
.paging .back-to-range
{
    width:270px;
    text-align:center;
    height:31px;
    left:320px;
    top:19px;
   }

.paging .back-to-range img{opacity:0.8;}
.paging .back-to-range img:hover{opacity:1}
    
.paging .next-item
{
    background:url(right-arrow.gif) no-repeat right center;
    right:25px;
    text-align:right;
    padding-right:15px;
    }
    
.paging p 
{
    text-transform:uppercase;
    font-size:16px;
    margin:0;
    padding-top:2px;}

.paging p a
{
    color:#737373;
    text-decoration:none;
    }

.paging p a:hover{text-decoration:underline;}

/*about us page*/

.history
{
    width:550px;
    text-align:justify;
    float:left;
    margin-right:25px;
    }
    
h2{color:#514f4d;text-transform:uppercase;font-size:20px;}

blockquote{font-style:italic;font-size:14px;color:#17226F;}

blockquote:before{content:url(before-blockquote.png);margin-right:10px;}
blockquote:after{content:url(after-blockquote.png);margin-left:10px;}


/*bargain basement*/

.page-text{margin-top:170px;}