/*
      Created by Rupert Jefferies of Web Guru Africa on 15 Nov 2011
	  Web: www.webguruafrica.com
	  E-Mail: rupert@webguruafrica.com
*/

* {margin: 0px; padding: 0px;}

body {
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 font-size: 14px;
 color: #000;
 background-color:#fff;
 background-image:url(../images/bg-background.jpg); background-position:bottom center; background-repeat:no-repeat;
}

a { outline: none; }

/*----------------- Tabs -----------------*/

#tabs_bg {
 width: 100%;
 background-color: #ffffff;

 }

#tabs_wrapper {
 height: 25px;
 width: 960px;
 padding-top: 5px;
 margin-right: auto;
 margin-left: auto;
 }
 
#tabs_wrapper a { display:block; text-align:center; font-size:8px; background-color:#bebebe;  text-decoration:none; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; 
 border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 3px 8px 3px 8px; text-transform:uppercase; color:#FFFFFF; letter-spacing:1px; font-weight:bolder; margin-right:8px; margin-top:6px; float:left;}
 
#tabs_wrapper a:hover {background-color:#0ca8e3;}

#tabs_wrapper a.active{
 background-color: #0ca8e3;
} 


/*----------------- TOP STRIP -----------------*/

#top_bg {
 width: 100%;
 background-color:#f1f2f4;
 border-bottom: 1px solid #d7d7d7;
 }

#top_wrapper {
 height: 35px;
 width: 960px;
 padding-top: 5px;
 margin-right: auto;
 margin-left: auto;
 }

/*----------------- HEADER -----------------*/

#header_bg {
 width: 100%;
 background-color:#fff;
 }

#header_wrapper {
 height: 177px;
 width: 960px;
 margin-right: auto;
 margin-left: auto;
 }
 
.logoxl {margin: -20px 0 0 0;}
 
#header_wrapper a.logo { float:left; display:block; width:414px; height:123px; background: url(../images/jachris-logo.gif) bottom; text-indent: -99999px; }
#header_wrapper a.logo:hover{ background-position: 0 0; }
 
/*----------------- HEADER NAV -----------------*/
 
#headernavtabs{
 float: right;
 padding: 0px;
 list-style-type: none;
}

#headernavtabs li{
 float:left;
 display: inline;
 margin: -9px 0 0 0;
 width: 143px;
 height: 116px; 
 padding: 0px 8px;
}

#headernavtabs li a{
 text-decoration: none;
 outline: none;
 margin: 0 0 0 2px;
 color: #000;
}

ul#headernavtabs li:hover{  background-position: center -116px; }
 
#headernavtabs li.products { position:relative; background-image:url(../images/nav-products.png); background-position:top center; background-repeat:no-repeat;}
#headernavtabs li.products span { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1 }

#headernavtabs li.contact { position:relative; background-image:url(../images/nav-contact.png); background-position:top center; background-repeat:no-repeat;}
#headernavtabs li.contact span { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1 }

#headernavtabs li.catalogue { position:relative; background-image:url(../images/nav-catalogue.png); background-position:top center; background-repeat:no-repeat;}
#headernavtabs li.catalogue span { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1 }
 
/*----------------- HERO -----------------*/

#hero_bg {
 width: 100%;
 height: 317px;
 background-color:#f1f2f4;
 border-top: 1px solid #d7d7d7;
 border-bottom: 1px solid #d7d7d7;
 }
 
#hero_wrapper {
 width: 998px;
 height: 350px;
 padding: 0px 20px;
 margin: -8px auto 0 auto;
 background-image:url(../images/bg-hero.png); background-position:top center; background-repeat:no-repeat;
}

#hero_slider {
 float: left;
 width: 960px;
 height: 300px;
 padding-left:19px;
}

#hero img {margin: 0px;}

/* HERO SUB PAGES */

#subhero_bg {
 width: 100%;
 height: 219px;
 background-color:#f1f2f4;
 border-top: 1px solid #d7d7d7;
 border-bottom: 1px solid #d7d7d7;
 }

#subhero_wrapper {
 width: 998px;
 height: 235px;
 padding: 0px 20px;
 margin: -8px auto 0 auto;
 background-image:url(../images/bg-subhero.png); background-position:top center; background-repeat:no-repeat;
}

#subhero_slider {
 float: left;
 width: 960px;
 height: 195px;
 padding-left:19px;
}

#subhero img {margin: 0px;}

/*----------------- HERO MENU -----------------*/

#hero_nav {
 float: left; 
 padding: 3px 0px 2px 25px;
}
 
#hero_nav ul {
 list-style-type: none;
 display: inline;
 text-align:center;
 font: bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: #fff;
 text-transform:uppercase;
}

#hero_nav ul li {
 float: left;
 display: block;
 padding: 5px 11px;
 outline: none;
 background-image:url(../images/bg-topnav.gif); background-position:bottom right; background-repeat: no-repeat;
}

#hero_nav ul li a { 
 color: #fff; 
 outline: none; 
 text-decoration: none;
}

#hero_nav a:hover {color:#252525; text-decoration:none;}
 
 /*----------------- CONTENT -----------------*/

#content_bg {
 width: 100%;
 background-color:#fff;
 }

#content_wrapper {
 width: 960px;
 margin: 10px auto 0px auto;
 padding-top: 30px;
 background-image:url(../images/bg-hero-shadow.png); background-position: top center; background-repeat:no-repeat;
 }

#copy {
 width: 940px;
 padding: 10px;
 line-height:150%; 
 text-align:left; 
 color:#7d7d7d;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 line-height:175%;
}

#copy h1 { color:#221e1f; font-size:20px; margin: 10px 5px; }
#copy h2 { color:#221e1f; font-size:16px; margin: 10px 5px; }
#copy h3{ color:#221e1f; font-size:15px; margin: 0px 5px -20px 0px; border-bottom: 1px solid #19b6f1;  }
#copy p {  font-size:14px; margin: 10px 5px;}
#copy p strong { color:#221e1f; }
#copy ul { font-size:14px; margin: 10px;}
#copy li { font-size:14px; margin: 10px 10px 10px 10px;}
#copy a {color:#00aeef; font-size:14px; text-decoration:none; font-weight:bold; }
#copy a:hover {text-decoration:underline;}

#copy a.button {
 margin: 0px; 
 padding: 5px 15px;
 border: 1px solid #bdc0c2;	
 background-color:#f7f8f9;
 color: #00aeef;
 font-size:12px;
 font-weight: bold;
 text-transform:uppercase;
 text-decoration:none;
 }
 
#copy a.button:hover { background-color:#00aeef; border: 1px solid #029ed8;	color:#fff;}

#copy img { margin:10px; padding: 10px; border: 1px solid #ebebeb;}

.maps{ width:170px;  float:right; padding-right:150px; }
/*----------------- HOME INTRO -----------------*/

#home_intro {
 float: left;
 width: 630px;
 padding:5px;
}

/*----------------- HOME PRODUCTS LIST -----------------*/

#home_products {
 float: left;
 width: 200px;
 padding:5px;
} 

/*----------------- HOME CONTACT LIST -----------------*/

#home_contact {
 float: left;
 width: 280px;
 padding: 5px;
}

.contact_phone {
 border-top: 1px solid #d7d7d7;
 background-image:url(../images/icon-phone.gif); background-position: left 70%; background-repeat:no-repeat;
 padding-left: 40px;
}

.contact_cell {
 border-top: 1px solid #d7d7d7;
 background-image:url(../images/icon-cell.gif); background-position: left 70%; background-repeat:no-repeat;
 padding-left: 40px;
}

.contact_email {
 border-top: 1px solid #d7d7d7;
 background-image:url(../images/icon-email.gif); background-position: left 70%; background-repeat:no-repeat;
 padding-left: 40px;
}

#head_contact {
 float: left;
 width: 300px;
 padding: 0px 5px 5px 5px;
}

#contact_detail {
 float: right;
 width: 250px;
 padding: 65px 190px 5px 5px;

}
/*----------------- PRODUCT RANGE -----------------*/

#product {
 border: 1px solid #e1e1e1;
 margin: 5px 0px;
 padding: 10px 0px;
 float: left;
 width: 620px;
}

#product:hover {border: 1px dashed #00aeef;}

#product h2 { line-height:150%; text-align:left; margin: 5px 20px;}
#product p { line-height:175%; text-align:left; margin: 5px 20px;}
#product ul { margin-left: 20px; }
#product li { margin-left: 30px; list-style:none; list-style-image:url(../images/icon-adobe-pdf.png);}
#product a { color:#7d7d7d; font-size: 12px; margin: 5px 20px;}
#product a:hover { text-decoration:underline; font-weight:bold; color:#00aeef;}
#product a.show { color:#00aeef; font-size: 12px;}
#product img { margin: 6px 20px; padding: 2px; border: 1px solid #ebebeb; }
#product .rightcolheader { list-style: none; color:#221e1f; font-size:13px; text-align:left; }
/*----------------- SHOW & HIDE -----------------*/

p.trigger a {
	text-decoration: none;
	display: block;
	cursor:pointer;
}

.toggle_container {
	margin-top: -10px;
	padding: 0px;
	overflow: hidden;
	clear: both;
}

.toggle_container .block {
	padding: 0px; /*--Padding of Container--*/
	margin: 0px;
}

.toggle_container img { margin-right: 3px; }

/*----------------- QUICK LINKS -----------------*/

#quicklinks {
 margin: 5px 0px;
 padding: 0px;
 float: right;
 width: 300px;
 background-color:#00aeef;
}

#quicklinks h2 { line-height:150%; text-align:left; margin: 0px;}
#quicklinks ul { margin-left: 5px; }
#quicklinks li { margin-left: 15px; list-style:none; line-height: 100%;}
#quicklinks a { color:#fff; font-size: 12px;}
#quicklinks a:hover { text-decoration:none; }
#quicklinks a.show { color:#00aeef; font-size: 12px;}
#quicklinks img { margin: 6px 20px; padding: 2px; border: 1px solid #C80000; }


/*----------------- BACK TO TOP -----------------*/

#backtotop {
 margin: 10px 0px;
 padding: 0px;
 float: left;
 width: 190px;
 background-color:#00aeef;
}

#backtotop a { color:#fff; font-size: 14px; font-weight:bold; margin-left: 20px;}

/*----------------- BLOCKS -----------------*/

#blocks_bg {
 width: 100%;
 background-color:#f1f2f4;
 border-top: 1px solid #d7d7d7;
 margin-top: 110px;
 }
 
#blocks_wrapper {
 width: 965px;
 height: 290px; /*hieght increased by 60px to accommodate the extra copy*/
 margin: 0 auto 0 auto;
 }

#blocks {
 width: 965px;
 height: 172px;
 float: left;
 margin: -82px 0 0 0;
 position:relative;
 line-height:150%; 
 text-align:left; 
 color:#7d7d7d;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
 line-height:175%;
}

#blocks h2 { color:#00aeef; font-size:18px; margin: 180px 20px 10px 20px; }
#blocks p {  font-size:14px; margin: 10px 15px 10px 20px;}
#blocks p strong { color:#221e1f; }
#blocks a {color:#7d7d7d; font-size:14px; text-decoration:none; }
#blocks a:hover {text-decoration:none;}
#blocks ul { margin-left: 10px;  }
#blocks li { margin-left: 30px; list-style:none; list-style-image:url(../images/icon-adobe-pdf.png); }
#blocks span { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1 }
.header {padding: 0px 0px 0px 300px; color:#221e1f; font-size:18px;}


#blocks.hose { background-image:url(../images/bg-blocks-furnace-door-coolant.jpg); background-position:left top; background-repeat:no-repeat; }
#blocks.hose:hover { background-position: left -284px;}

#blocks.coupling { background-image:url(../images/bg-blocks-mineral-recovery.jpg); background-position:left top; background-repeat:no-repeat;}
#blocks.coupling:hover { background-position: left -284px;}

#blocks.victaulic { background-image:url(../images/bg-blocks-concrete-hose.jpg); background-position:left top; background-repeat:no-repeat; } 
#blocks.victaulic:hover { background-position: left -284px;}
 
/*----------------- FOOTER -----------------*/
	
#footer_bg {
 width: 100%;
 border-top: 1px solid #0180af;
 background-color:#00aeef;
 margin-bottom: 265px;
 background-image:url(../images/bg-footer.gif); background-position:top left; background-repeat:repeat-x;
 }

#footer_wrapper {
 height: 72px;	
 width: 960px;
 margin: 10px auto 0 auto;
 font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: #fff;
 }
 
/*----------------- FOOTER MENU -----------------*/

#footernavleft ul {
 float: left;
 list-style-type: none;
 display: inline;
 text-align:center;
 color: #fff;
}

#footernavleft ul li {
 float: left;
 display: block;
 padding: 10px 20px 0px 10px;
 outline: none;
}

#footernavleft ul li a { 
 color: #fff; 
 outline: none; 
 text-decoration: none;
 font: bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#footernavleft ul li a.sub { 
 color: #ebebeb; 
 outline: none; 
 text-decoration: none;
 font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#footernavleft a:hover {color:#252525; text-decoration:none;}
#footernavleft a.sub:hover {color:#252525; text-decoration:none;}

#footernavright ul {
 float: right;
 margin-top: 0px;
 list-style-type: none;
 display: inline;
 text-align:center;
 font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: #fff;
}

#footernavright ul li {
 display: block;
 padding: 10px 10px 0px 10px;
 outline: none;
}

#footernavright ul li a { 
 color: #fff; 
 outline: none; 
 text-decoration: none;
 font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#footernavright a:hover {color:#252525; text-decoration:none;}