/*
-------------------------------------------------
URI: http://www./
Created by Forte Trinity
-------------------------------------------------

CONTENTS

1: SITE MASTER SETUP (including reset from Tripoli)

2: TYPOGRAPHY/DESIGN 

3: LAYOUT
	3.1 main form
	3.2 container
	3.3 header
	3.4 content
	3.5 primary content
	3.6 secondary content
	3.7 tertiary content
	3.8 footer
	3.9 page banner
	
4: GLOBAL ELEMENTS / CONTROLS
	4.1 accessibility
	
5: TEMPLATE / PAGE SPECIFIC
	
6: USEFUL CLASSES

/* -----------------------------------------------
1. SITE MASTER SETUP
----------------------------------------------- */

/* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */
* { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:top } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal }
/* end of import */
body { height:100%; text-align:center; min-width:775px; background:url(../images/background/temp-flash-bg.jpg) no-repeat 54% 0% #000 }
ul { list-style:disc outside }
ol { list-style:decimal outside }

/* -----------------------------------------------
2. TYPOGRAPHY / DESIGN
----------------------------------------------- */

html { font-size:62.5%; font-family:verdana, arial, "microsoft sans serif", helvetica, sans-serif; line-height:1.4em; color:#000 }
code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size:1.1em; font-family:monaco, "Lucida Console", courier, mono-space }
h1 { font-size:1.6em; color:#000; margin:0 0 12px 0 }
h2 { font-size:1.5em; color:#000; margin:0 0 12px 0 }
h3 { font-size:1.4em; color:#000; margin:0 0 12px 0 }
h4 { font-size:1.3em; color:#000; margin:0 0 12px 0 }
h5 { font-size:1.2em; color:#000; margin:0 0 12px 0 }
h6 { font-size:1.1em; color:#000; margin:0 0 12px 0 }
p {  font-size:1.1em; color:#fafafa; margin:0 0 12px 0; line-height:160% }
a {  color:#fff; text-decoration:none  }
a:hover {  color:#333;  }
a:visited {  }
a:active {  }
ul { margin:0 0 12px 0; font-size:1.1em }
ol { margin:0 0 12px 0; font-size:1.1em }
dl { margin:0 0 12px 0; font-size:1.1em }
hr { display:block; background:#aaa; color:#aaa; width:100%; height:1px; border:none }
address { font-size:1.1em; color:#000 }
blockqoute {  }
table { border-top:1px solid #ccc;  border-left:1px solid #ccc }
th, td { border-bottom:1px solid #ddd; border-right:1px solid #ccc }
fieldset { border:1px solid #ccc; }
legend { background:#fff; }
label { font-size:1.1em }
textarea, input[type='text'], select { border:1px solid #000; background:#fff; font-size:11px; color:#000 }


/* -----------------------------------------------
3. LAYOUT
----------------------------------------------- */

/* 3.1 - main form */
form.main { width:100%; height:100% }

/* 3.2 - container */
div#container { position:relative; text-align:left }

/* 3.3 - header */
div#header-outer { border-bottom:1px solid #404447 }
div#header { width:953px; margin:0 auto;}

/* 3.4 - content */
div#content { width:953px; margin:0 auto; }

/* 3.5 - primary content */
div#primary-content { width:616px; float:right; margin:auto }
div#primary-content h1 { font-size:1.8em; color:#fff }

/* 3.6 - secondary content */
div#secondary-content { width:303px; height:560px; float:left; background:#000 }

/* 3.7 - tertiary content */
div#tertiary-content {  }

/* 3.8 - footer */
div#footer-outer { background:#000; border-top:1px solid #414142 }
div#footer { width:953px; margin:0 auto; background:#000; padding-bottom:20px }

/* 3.9 - page banner */
div#page-banner { margin-top:20px }

/* -----------------------------------------------
4. GLOBAL ELEMENTS / CONTROLS
----------------------------------------------- */

/* 4.1 - accessibility */
ul#skiplinks { display:none }
ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden } 
ul#skiplinks a:active, ul#skiplinks a:focus { position:static; width:auto; height:auto }

/* 4.2 - primary navigation */
ul#primary-navigation {}
ul#primary-navigation li { float:left; padding:0; margin:0; list-style:none }
ul#primary-navigation li a:hover { background-position:0% 100% }

/* Buttons */
#index-nav { width:71px; text-indent:-9999px }
#index-nav a { width:71px; height:52px; background:url(../images/buttons/home-btn.jpg) no-repeat; display:block }

#terms-nav { width:60px; text-indent:-9999px }
#terms-nav a { width:60px; height:52px; background:url(../images/buttons/terms-btn.jpg) no-repeat; display:block }

#service-nav { width:94px; text-indent:-9999px }
#service-nav a { width:94px; height:52px; background:url(../images/buttons/service-btn.jpg) no-repeat; display:block }

#contact-nav { width:78px; text-indent:-9999px }
#contact-nav a { width:78px; height:52px; background:url(../images/buttons/contact-btn.jpg) no-repeat; display:block }

/* Accordian Start */
ul { list-style: none; margin: 0; padding: 0; }
li a { text-decoration:underline; color: #999; width:304px}
li a:hover {  }
li.drawer {width:303px }
li.drawer ul { padding:15px }
li.drawer ul li { width:120px; float:left; font-size:0.8em; color:#fff; border-left:2px solid #fff; margin-bottom:10px; padding:0 0 0 5px }
h2.drawer-handle { font-size:1.4em; color:#fff; font-weight:normal; margin: 0 }

#secondary-navigation { width:304px }
#secondary-navigation h2 { font-size:1.2em; font-weight:bold  }
#secondary-navigation a:hover { color:#fff }

#remote-controls-nav { width:284px }
#remote-controls-nav a { width:284px; height:29px; background:url(../images/buttons/remote-controls-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

#security-nav { width:284px }
#security-nav a { width:284px; height:29px; background:url(../images/buttons/security-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }
    
#reversing-sensor-kits-nav { width:284px }
#reversing-sensor-kits-nav a { width:284px; height:29px; background:url(../images/buttons/reversing-sensor-kits-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

#car-kits-nav { width:284px }
#car-kits-nav a { width:284px; height:29px; background:url(../images/buttons/car-kits-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

#tow-bars-nav { width:284px }
#tow-bars-nav a { width:284px; height:29px; background:url(../images/buttons/tow-bars-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

#window-tinting-nav { width:284px }
#window-tinting-nav a { width:284px; height:29px; background:url(../images/buttons/window-tinting-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

#gadget-page-nav { width:284px }
#gadget-page-nav a { width:284px; height:29px; background:url(../images/buttons/gadget-page-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

#additional-products-nav { width:284px }
#additional-products-nav a { width:284px; height:29px; background:url(../images/buttons/additional-products-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

#offer-page-nav { width:284px }
#offer-page-nav a { width:284px; height:29px; background:url(../images/buttons/offer-page-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

#engine-nav { width:284px }
#engine-nav a { width:284px; height:29px; background:url(../images/buttons/remote-controls-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

#cruise-nav { width:284px }
#cruise-nav a { width:284px; height:29px; background:url(../images/buttons/security-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

#window-nav { width:284px }
#window-nav a { width:284px; height:29px; background:url(../images/buttons/reversing-sensor-kits-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

#heated-nav { width:284px }
#heated-nav a { width:284px; height:29px; background:url(../images/buttons/car-kits-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

#air-con-nav { width:284px }
#air-con-nav a { width:284px; height:29px; background:url(../images/buttons/tow-bars-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

#trade-nav { width:284px }
#trade-nav a { width:284px; height:29px; background:url(../images/buttons/pink-btn.png) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }

/* Accordian End */


/* 4.3 - footer links */
ul#footer-links { float:right; list-style:none }
ul#footer-links li {float:left; margin:10px 0 0 10px}
ul#footer-links li a {color:#9b9b9b; text-decoration:none }
ul#footer-links li a:hover {color:#d03427} 
div#footer span {float:left; font-size:1.1em; margin:10px 0 0 0}
div#footer span a {color:#9b9b9b; text-decoration:none }
div#footer span a:hover {color:#d03427}

/* 4.3 - basescript */
#base-script { width:900px; margin:0 auto; margin-top:350px; text-align:left }
#base-script h1 { color:#999999 }

/* basewords */
div#basewords { width:900px; margin:0 auto; text-align:left }
div#basewords dl { width:175px; padding:20px 20px 10px 16px; float:left }
div#basewords dt { font-size:1.1em; color:#333333; font-weight:bolder; letter-spacing:-1px; padding-bottom:5px; }
div#basewords dd { font-size:0.9em; color:#666666; line-height:150%; padding:0 20px 0 0px; background:url(../images/global/dot.png) no-repeat top left;  }
div#basewords strong { font-weight:normal!important }


.pdf-icon { float:right; }
.pdf-left { float:left; }
.pdf-synopsis { float:left; }

/* -----------------------------------------------
5. TEMPLATE/PAGE SPECIFIC
----------------------------------------------- */

ul#top-cart { width:285px; float:right; margin-top:20px }
ul#top-cart li { height:39px; background:url(../images/background/top-cart-bg.jpg) no-repeat top left; font-size:1.0em; color:#fff; list-style:none; padding:10px 0 0 40px }
ul#top-cart li span { color:#999 }
ul#top-cart li a { color:#fff; text-decoration:none }
ul#top-cart li a:hover { color:#ccc; text-decoration:underline }

.main-ttl { font-size:2.2em; font-weight:bold; color:#fff; margin-top:15px; padding-bottom:20px; border-bottom:1px solid #4a6278 }
.sub-ttl { font-size:1.8em; font-weight:bold; color:#fff; margin-top:15px; padding-bottom:20px; border-bottom:1px solid #4a6278 }

ul#index-ctas { margin-bottom:82px }
ul#index-ctas li { width:153px; float:left; padding-bottom:6px }

div#lower-ctas-outer { background:#000; border-top:1px solid #414142; }
ul#lower-ctas { width:953px; margin:0 auto; background:url(../images/ctas/lower-cta-bg.jpg) #000 no-repeat }
ul#lower-ctas li { width:317px; float:left; border-right:1px solid #000 }
ul#lower-ctas li.last { border-right:none }
ul#lower-ctas h2 { font-size:2.2em; color:#4b4848; margin:20px 0 0 7px }
ul#lower-ctas p { margin:20px 0 0 7px; color:#9a9a9a }
ul#lower-ctas a { width:147px; height:27px; background:url(../images/ctas/lower-cta-button.jpg) no-repeat; font-size:1.4em; padding:4px 0; text-align:center; display:block; text-decoration:none; font-weight:bold; margin:15px 0 0 8px }
ul#lower-ctas a:hover { color:#2681d6 }

/* colour classes */
h1.white { font-size:2.2em; font-weight:bold; color:#fff; margin:15px 0 30px 0; padding:0 0 0 5px; border-left:4px solid #fff }

h1.pink { font-size:2.2em; font-weight:bold; color:#fff; margin-top:15px; padding:0 0 0 5px; border-left:4px solid #ab22a9 }
li.pink h2 a { width:284px; height:29px; background:url(../images/buttons/pink-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }
li.pink ul li { padding:0 0 0 5px; border-left:4px solid #ab22a9 }
ul#product-list .pink { border-left:4px solid #ab22a9 }
ul#product-details .pink h2 { color:#000; background:#ab22a9 }

h1.purple { font-size:2.2em; font-weight:bold; color:#fff; margin-top:15px; padding:0 0 0 5px; border-left:4px solid #5b29c7 }
li.purple h2 a { width:284px; height:29px; background:url(../images/buttons/purple-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }
li.purple ul li { padding:0 0 0 5px; border-left:4px solid #5b29c7 }
ul#product-list .purple { border-left:4px solid #5b29c7  }
ul#product-details .purple h2 { color:#000; background:#5b29c7  }

h1.light-purple { font-size:2.2em; font-weight:bold; color:#fff; margin-top:15px; padding:0 0 0 5px; border-left:4px solid #3734ff }
li.light-purple h2 a { width:284px; height:29px; background:url(../images/buttons/light-purple-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }
li.light-purple ul li { padding:0 0 0 5px; border-left:4px solid #3734ff }
ul#product-list .light-purple { border-left:4px solid #3734ff  }
ul#product-details .light-purple h2 { color:#000; background:#3734ff  }

h1.blue { font-size:2.2em; font-weight:bold; color:#fff; margin-top:15px; padding:0 0 0 5px; border-left:4px solid #0182ff }
li.blue h2 a { width:284px; height:29px; background:url(../images/buttons/blue-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }
li.blue ul li { padding:0 0 0 5px; border-left:4px solid #0182ff }
ul#product-list .blue { border-left:4px solid #0182ff  }
ul#product-details .blue h2 { color:#000; background:#0182ff }

h1.light-blue { font-size:2.2em; font-weight:bold; color:#fff; margin-top:15px; padding:0 0 0 5px; border-left:4px solid #01fefc }
li.light-blue h2 a { width:284px; height:29px; background:url(../images/buttons/light-blue-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }
li.light-blue ul li { padding:0 0 0 5px; border-left:4px solid #01fefc }
ul#product-list .light-blue { border-left:4px solid #01fefc  }
ul#product-details .light-blue h2 { color:#000; background:#01fefc }

h1.green { font-size:2.2em; font-weight:bold; color:#fff; margin-top:15px; padding:0 0 0 5px; border-left:4px solid #3afa11 }
li.green h2 a { width:284px; height:29px; background:url(../images/buttons/green-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }
li.green ul li { padding:0 0 0 5px; border-left:4px solid #3afa11 }
ul#product-list .green { border-left:4px solid #3afa11  }
ul#product-details .green h2 { color:#000; background:#3afa11 }

h1.yellow { font-size:2.2em; font-weight:bold; color:#fff; margin-top:15px; padding:0 0 0 5px; border-left:4px solid #fffb00 }
li.yellow h2 a { width:284px; height:29px; background:url(../images/buttons/yellow-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }
li.yellow ul li { padding:0 0 0 5px; border-left:4px solid #fffb00 }
ul#product-list .yellow { border-left:4px solid #fffb00  }
ul#product-details .yellow h2 { color:#000; background:#fffb00 }

h1.orange { font-size:2.2em; font-weight:bold; color:#fff; margin-top:15px; padding:0 0 0 5px; border-left:4px solid #fea700 }
li.orange h2 a { width:284px; height:29px; background:url(../images/buttons/orange-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }
li.orange ul li { padding:0 0 0 5px; border-left:4px solid #fea700 }
ul#product-list .orange { border-left:4px solid #fea700  }
ul#product-details .orange h2 { color:#000; background:#fea700 }

h1.red { font-size:2.2em; font-weight:bold; color:#fff; margin-top:15px; padding:0 0 0 5px; border-left:4px solid #ff1200 }
li.red h2 a { width:284px; height:29px; background:url(../images/buttons/red-btn.jpg) no-repeat; display:block; text-decoration:none; padding:13px 0 0 19px }
li.red ul li { padding:0 0 0 5px; border-left:4px solid #ff1200 }
ul#product-list .red { border-left:4px solid #ff1200  }
ul#product-details .red h2 { color:#000; background:#ff1200 }


/* product-list */
ul#product-list { border-top:1px solid #345776; padding-top:30px }
ul#product-list li { height:64px; background:url(../images/background/product-list-bg.jpg) repeat-x; margin-bottom:6px }
ul#product-list li img { margin-right:10px }
ul#product-list li h2 { color:#fff; font-size:1.2em; margin:0; padding:8px 0 5px 0 }
ul#product-list li p { color:#b3b3b3; font-size:0.8em; margin:0; padding:0 }

/* product-details */
ul#product-details { background:#000; padding:15px }
ul#product-details li { margin-bottom:15px }
ul#product-details h2 { width:376px; float:right; padding:10px }
ul#product-details p { width:396px; float:right }

ul#product-details-info { width:595px }
ul#product-details-info li { width:170px; float:left; border-left:none; padding-right:20px; margin-top:20px }
ul#product-details-info li.last { width:190px; float:left; border-left:none; padding-right:0px; margin-top:20px }
ul#product-details-info p { font-size:0.8em;}
ul#product-details-info dt { color:#fff; font-size:1.3em; font-weight:bold; margin-bottom:15px }
ul#product-details-info dd { font-size:0.7em; color:#b3b3b3; margin-bottom:10px }
ul#product-details-info dd.price { font-size:1.8em; color:#d03427; font-weight:bold; margin-bottom:20px }


ul#product-details-info fieldset { border:none }
ul#product-details-info fieldset ul li { width:140px}
ul#product-details-info legend { text-indent:-9999px }

ul#basket-buttons { float:right; margin-top:10px}
ul#basket-buttons li { width:180px; float:right }
ul#basket-buttons .checkout a { width:160px; height:28px; background:url(../images/buttons/checkout-btn.gif) no-repeat; display:block; text-indent:-9999px }
ul#basket-buttons .checkout a:hover { background-position:0% 100% }
ul#basket-buttons .continue a { width:160px; height:28px; background:url(../images/buttons/continue-shopping-btn.gif) no-repeat; display:block; text-indent:-9999px }
ul#basket-buttons .continue a:hover { background-position:0% 100% }

#basketContents { width:100%; background:#f7f5f1 }
#basketContents th, td { text-align:left; padding:.8em}
#basketContents th { background:#12181a; font-size:1.4em; color:#fff; font-weight:bold }
#basketContents td { font-size:1.2em; border-bottom:1px solid #ccc }
#basketContents p { color:#FF0000; font-size:1.0em; padding-top:30px}
#basketContents li { list-style:none; padding:10px; font-size:1.2em  }
#basketContents label { margin-right:5px }
#basketContents legend { background:none; border:none; text-indent:-9999px }
#basketContents fieldset { border:none; padding:0; margin:0 }
#basketContents td.subtotal { font-size:1.8em; font-weight:bold; color:#9ec3a3; padding:30px 20px; line-height:180% }
#basketContents td.subtotal span { color:#9a0101 }
#basketContents td.postage { font-size:1.4em; font-weight:bold; color:#9ec3a3; padding:30px 20px }
#basketContents td.grandtotal { font-size:2.0em; font-weight:bold; color:#3b3b3b; padding:30px 20px }
#basketContents td input { border:1px solid #ccc}

/* terms */
div#terms { background:#000; padding:10px }
div#terms ol { margin-left:20px }
div#terms ol li { line-height:180%; padding-bottom:10px; font-size:0.9em; color:#fff }
div#terms h2 { color:#ee4735 }
div#terms h3 { color:#ee4735 }

/* services */
div#service { background:#000; padding:10px }

/* breadcrumb */
.crumb { font-size:1.2em; color:#fff; font-weight:bold; margin-top:15px }
.crumb a { color:#fff }
.crumb a:hover { color:#d03427 }

/* -----------------------------------------------
6. USEFUL CLASSES
----------------------------------------------- */

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden }
.clr { overflow:hidden; clear:both; height:1px; margin-top:-1px }
.la { text-align:left }
.ra { text-align:right }
.ca { text-align:center }
.fl { float:left }
.fr { float:right }
.vt { vertical-align:top }
.vm { vertical-align:middle }
.vb { vertical-align:bottom }
.nb { border:0 none }
.clearBoth { clear:both }