/*
      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; }

/*----------------- 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 }
 
/*----------------- 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 12px "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;
 }

/*----------------- 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: 260px; /*hieght increased by 60px to accommodate the extra copy*/
 margin: 0 auto 0 auto;
 }

#blocks {
 width: 320px;
 height: 100px;
 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: 100px 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-WE-ER-QR-couplings.jpg); background-position:top left; background-repeat:no-repeat; }
#blocks.hose:hover { background-position: left -284px;}

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

#blocks.victaulic { background-image:url(../images/bg-blocks-storz.jpg); background-position:top left; 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;}