@charset "utf-8";
/* CSS Document */



body { 
	margin:0;
	padding:0;
	border:0;
	background-color:#f9f9f9;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666666;
	line-height:normal;
}


main-text { 
	font-size:12px;
	color:#666666;
}


.flash_container { 
	margin-left:65px;
	width:1101px;
}

h1 {
	font-family:Myriad Pro, Arial,sans-serif;
	font-size:24px;
	color:#00a0e3;
	font-weight:normal;
}
h2 {
	font-family:Myriad Pro, Arial,sans-serif;
	font-size:16px;
	color:#FF6600;
	font-weight:bold;
}

h4 {
	color:#00a0e3;
	font-size:14px;
	font-weight:bold;
}

h5 {
	color:#00a0e3;
	font-size:16px;
	font-weight:bold;
}

h6 {
	color:#FF6600;
	font-size:16px;
	font-weight:bold;
}


h7 {
	color:#FF6600;
	font-size:13px;
	font-weight:bold;
}

.retail_product {
	font-family:Myriad Pro, Arial,sans-serif;
	font-size:20px;
	color:#666666;
	font-weight:normal;
	text-decoration:underline;
}
	
.retail_header {
	font-family:Myriad Pro, Arial,sans-serif;
	font-size:24px;
	color:#666666;
	font-weight:normal;
	text-decoration:underline;
}
	
	
.wrapper{
	margin:0 auto;
	width:1101px;
	height:auto;
}


a:link{
	text-decoration:none;
	color:#FF6600;
}
a:visited{
	text-decoration:none;
	color:#FF6600;
}
a:hover{
	text-decoration:underline;
}
a.footer_link:link{
	text-decoration:none;
	color:#666666;
}

a.footer_link:visited {
	text-decoration:none;
	color:#666666;
}

a.footer_link:hover{
	text-decoration:underline;
}

a.accident_link:link{
	text-decoration:none;
	color:#666666;
}

a.accident_link:visited{
	text-decoration:none;
	color:#666666;
}

a.accident_link:hover{
	text-decoration:underline;
	color:#FF6600;
}

a.tab_link:link{
	text-decoration:none;
	color:#333333;
}

a.tab_link:visited {
	text-decoration:none;
	color:#333333;
}

a.tab_link:hover{
	text-decoration:none;
}

a.about { 
	color:#FF6600;
	font-weight:bold;
}

a.about:hover{
	text-decoration:underline;
}

span.big_font {
	font-size:20px;
	color:#FF6600;
}

img.img_margin {
	margin:10px;
}
div#div_img {
	float:right;
}

.blue_font {
	color:#00a0e3;
	font-weight:bold;
	font-size:16px;
}

.orange_font {
	color:#FF6600;
	font-weight:bold;
}

.tnc_font {
	font-size:9px;
}

.tnc_font2 {
	font-size:8px;
}

.tnc_box {
	padding:10px;
	background-color:#CCCCCC;
	}

li.site_map {
	list-style:square;
}

#privilege {
	width:20px;
}


/******************** header-navi (flash-navi) **********************/
.header-navi {
	width:970px;
	height:140px;
	margin:0 auto;
	/*background-image:url(../images/spark_navi_bg1.jpg);
	background-repeat:no-repeat;*/	
}

/******************** banner_bg **********************/
.header-banner{
	width:1101px;
	height:186px;
	margin:o auto;
	background-image:url(../images/spark_about_banner.jpg);
}

.header-banner-contact1{
	width:1101px;
	height:186px;
	background-image:url(../images/spark_contact1_banner.jpg);
}

.header-banner-contact2{
	width:1101px;
	height:186px;
	background-image:url(../images/spark_contact2_banner.jpg);
}
.header-banner-accident{
	width:1101px;
	height:186px;
	background-image:url(../images/spark_accident_banner.jpg);
}
.header-banner-grooming {
	width:1101px;
	height:186px;
	background-image:url(../images/spark_grooming_banner.jpg);
}
.header-banner-engine {
	width:1101px;
	height:186px;
	background-image:url(../images/spark_engine_banner.jpg);
}
.header-banner-towing {
	width:1101px;
	height:186px;
	background-image:url(../images/spark_towing_banner.jpg);
}
.header-banner-tyres {
	width:1101px;
	height:186px;
	background-image:url(../images/spark_Tyres_banner.jpg);
}


.header-banner-appointment {
	width:1101px;
	height:186px;
	background-image:url(../images/spark_booking_banner.jpg);
}
.header-banner-special{
	width:1101px;
	height:186px;
	background-image:url(../images/spark_special_banner.jpg);
}
.header-banner-fleet{
	width:1101px;
	height:186px;
	background-image:url(../images/spark_fleet_banner.jpg);
}

.header-banner-servicing{
	width:1101px;
	height:186px;
	background-image:url(../images/spark_servicing_banner.jpg);
}

.header-deadening-banner{
	width:1101px;
	height:186px;
	margin:o auto;
	background-image:url(../images/spark_deadening_banner.jpg);
}

/******************** end of banner_bg **********************/
/******************** header_banner **********************/
.banner-title {
	padding-top:86px;
	padding-left:72px;
	width:1025px;
	height:auto;
}

/******* new addon for servicing section ********/
.banner-title-image {
	width:1000px;
	height:auto;
	padding-top:70px;
	padding-left:72px;
	float:left;
}

.banner-title-about {
	padding-left:19px;
	width:181px;
	height:auto;
	float:left;
	font-family:Myriad Pro, Arial,sans-serif;
	font-size:28px;
	color:#00a0e3;
}

.banner-title_services {
	width:250px;
	height:auto;
	float:left;
	font-family:Myriad Pro, Arial,sans-serif;
	font-size:28px;
	color:#00a0e3;
}

.banner-title-contact {
	width:200px;
	height:auto;
	float:left;
	font-family:Myriad Pro, Arial,sans-serif;
	font-size:28px;
	color:#00a0e3;
}

.banner-title-appointment {
	padding-left:20px;
	width:180px;
	height:auto;
	float:left;
	font-family:Myriad Pro, Arial,sans-serif;
	font-size:28px;
	color:#00a0e3;
}

.banner-title-quotation {
	padding-left:5px;
	width:195px;
	height:auto;
	float:left;
	font-family:Myriad Pro, Arial,sans-serif;
	font-size:28px;
	color:#00a0e3;
}

.banner-title-mailinglist{
	width:200px;
	height:auto;
	float:left;
	font-family:Myriad Pro, Arial,sans-serif;
	font-size:28px;
	color:#00a0e3;
}
.banner-title_sitemap {
	padding-left:20px;
	width:180px;
	height:auto;
	float:left;
	font-family:Myriad Pro, Arial,sans-serif;
	font-size:28px;
	color:#00a0e3;
}
.banner-title-all {
	width:1000px;
	height:auto;
	float:left;
	font-family:Myriad Pro, Arial,sans-serif;
	font-size:28px;
	color:#00a0e3;
	padding-left:10px;
}

.banner-text {
	width:700px;
	height:auto;
	
	font-size:22px;
	font-family:Myriad Pro, Arial,sans-serif;
	color:#ff5833;
	
	}
.banner-text2 {
	font-size:12px;
	color:#00a0e3;
	font-weight:normal;
}

/******************** end of header_banner **********************/

/*********************** left-navi + Jquery menu********************************/

.left-navi {
	width:175px;
	height:auto;
	float:left;
}

ul#menu, ul#menu ul {
	  margin: 0;
	  padding: 0;
	  list-style-type:none;

  
}
ul#menu a {
  display: block;
  text-decoration: none;	
}

ul#menu li {
	width:171px;	
	heigh:30px;
}

ul#menu li a {
	background-image:url(../images/spark_navi_bar.jpg);
	color:#fff;
	font-family:Arial,sans-serif;
	font-size:11px;
	padding:8px 10px;
}

ul#menu li.long_name a {
	background-image:url(../images/spark_navi_bar.jpg);
	color:#fff;
	font-family:Arial,sans-serif;
	font-size:11px;
	padding:2px 10px 0 10px;
}

ul#menu li a:hover {
	font-weight:bold;
}

ul#menu li ul li a {
  width:137px;	
  background: #ccc;
  color: #000;
  padding-left:25px;
  background:url(../images/spark_navi_bullet.jpg) no-repeat #CCCCCC;
  background-position:left center;
}

ul#menu li ul li a:hover {
  background: #aaa;
}

/************************ New Add-on for sub sub menu **************************/
ul#menu li ul li ul li a {
  width:127px;	
  background: #ccc;
  color: #000;
  padding-left:35px;
  background:url(../images/spark_navi_bullet2.jpg) no-repeat #CCCCCC;
  background-position:left center;
}

ul#menu li ul li ul li a:hover {
  background: #aaa;
}

ul#menu li ul li ul li ul li a {
  width:117px;	
  background: #ccc;
  color: #000;
  padding-left:45px;
  background:url(../images/spark_navi_bullet3.jpg) no-repeat #CCCCCC;
  background-position:left center;
}

ul#menu li ul li ul li ul li a:hover {
  background: #aaa;
}
/************************ Content-text **************************/

td.divider {
	background-image:url(../images/spark_divider.jpg);
	background-repeat:repeat-y;

}

.content-container {
	width:970px;
	padding-left:72px;
}

.content_box {
	width:800px;
	height:auto;
	padding-left:100px;
}

.content-text {
	width:790px;
	height:auto;
	float:left;	
}

.content-text-fleet {
	width:761px;
	height:auto;
}


.construction {
	margin:0 auto;
}

td.tyres {
	vertical-align:top;
	font-size:14px;
}

td.top_align {
	vertical-align:top;
	}


/*************** fleet_login **********************************/
.fleet_login {
	background-image:url(../images/spark_fleet_bg.jpg);
	background-repeat:no-repeat;
	width:160px;
	height:209px;
	padding:15px 0px 15px 15px;
	color:#FFFFFF;
	float:left;
}

/**************** footer **********************/
.footer {
	background-image:url(../images/spark_footer_bg.jpg);
	width:970px;
	height:131px;
	margin:0 auto;
	clear:both;
}

.copyright{
	/*margin-left:680px;*/
	margin-left:380px;
	padding-top:15px;
	font-size:10px;
}


/******************************* table_background_color CSS **********************************************/
td.grooming_bg_light {
	padding:5px;
	background-color:#ffeee0;
}

td.grooming_bg_dark {
	padding:5px;
	background-color:#fee0c8;
}

/******************************* Form CSS **********************************************/
div#feedback_form table td {
	vertical-align:top;
	font-weight:bold;
	font-size:11px;
	
}

tr#table_bg1 { 
	background-color:#CCCCCC;
}



/****************************** tab content Css set 1(jquery) ******************************/

#content-desc-fulltab {
	width:698px;
	}


/** catalogue tab **/
ul.catalogue_tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 66px; /*--Set height of tabs--*/
	border-bottom: 1px solid #f9f9f9;
	width: 100%;
	background-image:url(../images/spark_tab_top3.jpg);
	background-repeat:no-repeat;
	
}

ul.catalogue_tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 66px; /*--Set height of tabs--*/
	
	width: 100%;
	background-image:url(../images/spark_tab_top.jpg);
	background-repeat:no-repeat;
	
}

ul.catalogue_tabs li {
	float: left;
	margin: 37px 2px 0 7px;
	padding: 0;
	width:106px;
	height: 30px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #f9f9f9;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #e0e0e0;

}

ul.catalogue_tabs li.tab1 {background:url(../images/spark_tab_menu.jpg) no-repeat 0 0; border:0; }
ul.catalogue_tabs li.tab2 {background:url(../images/spark_tab_menu.jpg) no-repeat 0 0; border:0; }
ul.catalogue_tabs li.tab3 {background:url(../images/spark_tab_menu.jpg) no-repeat 0 0; border:0; }
ul.catalogue_tabs li.tab4 {background:url(../images/spark_tab_menu.jpg) no-repeat 0 0; border:0; }
ul.catalogue_tabs li.tab5 {background:url(../images/spark_tab_menu.jpg) no-repeat 0 0; border:0; }
ul.catalogue_tabs li.tab6 {background:url(../images/spark_tab_menu.jpg) no-repeat 0 0; border:0; }
ul.catalogue_tabs li.tab7 {background:url(../images/spark_tab_orangetab_.jpg) no-repeat 0 0; border:0; }



ul.catalogue_tabs li.tab1.active,
ul.catalogue_tabs li.tab2.active,
ul.catalogue_tabs li.tab3.active,
ul.catalogue_tabs li.tab4.active,
ul.catalogue_tabs li.tab5.active,
ul.catalogue_tabs li.tab6.active, 
{
	background-position:0 -30px;
	border-bottom: 2px solid #f9f9f9; /*--Makes the active tab look like it's connected with its content--*/
}


ul.catalogue_tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 12px;
	padding:  5px;
	line-height:10px;
	outline: none;
	text-align:center;

	
}
ul.catalogue_tabs li a:hover {}

html ul.catalogue_tabs li.active { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background-position:0 -30px;
}
/** catalogue tab content **/
.catalogue_tab_container {
	border: 0px solid #dcdcdc;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #f9f9f9;
}
.catalogue_tab_content {
	/*padding: 40px;*/
	font-size: 12px;
	color:#333;
}
.catalogue_tab_content .content_wrap {padding:40px; font-size:14px; }
.catalogue_tab_content h4.grey {color:#666; }
.catalogue_tab_content h3 {color:#333; }
.catalogue_tab_content h5 { font-weight:bold; }
.catalogue_tab_content .floatright{ clear:left; float:right; margin-left:50px; }
.catalogue_tab_content .floatleft { float:left; margin-right:30px; }
.catalogue_tab_content .small{ font-size:11px; color:#666; }
.catalogue_tab_content .small a { font-size:11px; color:#0066cc; }




/****************************** tab content Css set 2(jquery) ******************************/

#content-desc-fulltab {
	width:698px;
	}


/** catalogue tab **/
ul.catalogue_tabs1 {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 66px; /*--Set height of tabs--*/
	width: 100%;
	background-image:url(../images/spark_tab_top3.jpg);
	background-repeat:no-repeat;	
}


ul.catalogue_tabs1 li {
	float: left;
	margin: 35px 2px 0 10px;
	padding: 0;
	width:106px;
	height: 30px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #dcdcdc;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #e0e0e0;

}

ul.catalogue_tabs1 li.tab1 {background:url(../images/spark_tab_menu.jpg) no-repeat 0 0; border:0; }
ul.catalogue_tabs1 li.tab2 {background:url(../images/spark_tab_menu.jpg) no-repeat 0 0; border:0; }
ul.catalogue_tabs1 li.tab3 {background:url(../images/spark_tab_menu.jpg) no-repeat 0 0; border:0; }
ul.catalogue_tabs1 li.tab4 {background:url(../images/spark_tab_menu.jpg) no-repeat 0 0; border:0; }
ul.catalogue_tabs1 li.tab5 {background:url(../images/spark_tab_menu.jpg) no-repeat 0 0; border:0; }
ul.catalogue_tabs1 li.tab6 {background:url(../images/spark_tab_menu.jpg) no-repeat 0 0; border:0; }
ul.catalogue_tabs1 li.tab7 {background-color:transparent; no-repeat 0 0; border:0; }



ul.catalogue_tabs1 li.tab1.active,
ul.catalogue_tabs1 li.tab2.active,
ul.catalogue_tabs1 li.tab3.active,
ul.catalogue_tabs1 li.tab4.active {
	background-position:0 -30px;
	border-bottom: 2px solid #f9f9f9; /*--Makes the active tab look like it's connected with its content--*/
}


ul.catalogue_tabs1 li a {
	color:#00000;
	display:block;
	font-size:12px;
	padding:5px;
	line-height:10px;
	outline: none;
	text-align:center;
	text-decoration:none;	
}


ul.catalogue_tabs1 li a:hover {}

html ul.catalogue_tabs1 li.active { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background-position:0 -30px;
}
/** catalogue tab content **/
.catalogue_tab_container {
	border: 0px solid #dcdcdc;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #f9f9f9;
}
.catalogue_tab_content {
	/*padding: 40px;*/
	font-size: 12px;
	color:#333;
}
.catalogue_tab_content .content_wrap {padding:20px; font-size:14px; }
.catalogue_tab_content h4.grey {color:#666; }
.catalogue_tab_content h3 {color:#333; }
.catalogue_tab_content h5 { font-weight:bold; }
.catalogue_tab_content .floatright{ clear:left; float:right; margin-left:50px; }
.catalogue_tab_content .floatleft { float:left; margin-right:30px; }
.catalogue_tab_content .small{ font-size:11px; color:#666; }
.catalogue_tab_content .small a { font-size:11px; color:#0066cc; }




/*********************** toggle jquery ***************************/
h2.dropdown {
	padding: 5px 0 0 0;
	margin: 0 0 5px 0;
	background:url(../images/dropdown.jpg);
	height: 115px;
	/*line-height: 46px;*/
	width: 700px;
	font-size:16px;
	font-weight: normal;
	float: left;

}
h2.dropdown a {
	color: #0099FF;
	text-decoration: none;
}

h2.active1 {
	background-position:0 -116px;
} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/

h2.dropdown a:hover { 
	color: #FF6600; 
	text-decoration: none;
}

.toggle_container {
	margin: 0 0 5px;
	padding: 0;
	background: #f9f9f9;
	overflow: hidden;
	font-size: 12px;
	width: 700px;
	clear: both;
}
.toggle_container .block {
	padding: 20px; /*--Padding of Container--*/
	background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}

h2.trigger {
	padding: 5px 0 0 50px;
	margin: 0 0 5px 0;
	background:url(../images/spark_aboutus_08.jpg);
	height: 65px;
	/*line-height: 46px;*/
	width: 640px;
	font-size:14px;
	font-weight: normal;
	float: left;

}
h2.trigger a {
	color: #0099FF;
	text-decoration: none;
	
}
h2.trigger a:hover { color: #666; }
h2.active {background-position:0 -103px;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/


.toggle_container {
	margin: 0 0 5px;
	padding: 0;
	background: #f9f9f9;
	overflow: hidden;
	font-size: 12px;
	width: 700px;
	clear: both;
}
.toggle_container .block {
	padding: 20px; /*--Padding of Container--*/
	background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}


/************************************************

/*********************** toggle jquery ***************************/
h2.trigger1 {
	padding: 10px 0 0 70px;
	margin: 0 0 3px 0;
	height: 30px;
	/*line-height: 46px;*/
	width: 630px;
	font-size:18px;
	font-weight: normal;
	float: left;
	

}
h2.trigger1 a {
	font-size:18px;	
	color:#FFFFFF;
	text-decoration: none;
}

/* For IE6 */
h2#trig1_1 a,
h2#trig1_2 a,
h2#trig1_3 a,
h2#trig1_4 a,
h2#trig1_5 a,
h2#trig1_6 a,{
	font-size:18px;	
	color:#FFFFFF;
	text-decoration: none;
}



h2.trigger1 a:hover { color: #00a0e3; }
h2.active {background-position:0 -103px;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/

.toggle_container {
	margin: 0 0 5px;
	padding: 0;
	background: #f9f9f9;
	overflow: hidden;
	font-size: 14px;
	width: 700px;
	clear: both;
}
.toggle_container .block {
	padding: 20px; /*--Padding of Container--*/
	background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}