/* CSS Document */

/*	Description: KABELJOU WESITE STYLE SHEET
	Author: Margaret Grobler
	Date: 23 October 2008 */
	
* {
	margin: 0;
	padding: 0;
}

html, body 
{
	text-align:center;
	background: #252525;
	font: 14px/160% Arial, Helvetica, Tahoma, Geneva, sans-serif;
	letter-spacing: 0.4px;
	color: #cecece;
}

#maincontainer
{
	margin: 0 auto;
	text-align: left;
	width: 977px;
}

/* ---- GENERAL STYLES */

.clearing
{
	clear: both;
}

.hide
{
	display: none;
}

a
{
	color: #6a9cc9;
}

a:hover
{
	color: #83bcef;
}

h2
{
	border-bottom: 1px solid #535658;
	padding-bottom: 14px;
	margin-bottom: 7px;
	text-transform: uppercase;
	color: #FFFFFF;
	font-size: 17.7px;
	letter-spacing: -0.2px;
}

h3
{
	margin: 17px 0 9px;
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: -0.2px;
}

h4
{
	margin: 9px 0 7px;
	color: #67abeb;
	font-size: 16px;
	letter-spacing: -0.2px;
	border-bottom: 1px solid #535658;
	padding-bottom: 3px;
	font-weight: normal;
}


ul
{
	list-style-type: none;
}

p
{
	margin-bottom: 8px;
}

img
{
	border: 0;
}

.intro, .intro-index
{
	margin-bottom: 15px;
	color: #FFF;
	font-size: 16px;
}

.intro-index
{
	margin-top: 20px;
	font-size: 17px;
}

.sub-intro
{
	color: #8c8c8c;
	font-style: italic;
	margin-bottom: 5px;
	font-size: 14px;
}

.sub-intro a
{
	background: none !important;
	display: inline  !important;
	padding: 0 !important;
	margin: 0 0 15px 0 !important; 
}

.sub-intro a:hover
{
	color: #83bcef !important;
}

.uppercase 
{
	text-transform: uppercase;
}

.basic
{
	color: #67abeb;
	font-weight: bold;
}

.italic
{
	font-style: italic;
}

.grey-italic
{
	color: #8c8c8c;
	font-style: italic;
}

.grey
{
	color: #8c8c8c;
}

.blue
{
	color: #67abeb;
}

.orange
{
	color: #fac03b;
}

.white
{
	color: #fff;
}

.pic-right
{
	float: right;
	margin: 15px 0 15px 20px;
}

.pic-left
{
	float: left;
	margin: 15px 20px 15px 0;
}

* html .pic-right
{
	float: right;
	margin: 15px 0 15px 10px;
	padding: 0;
	clear: none;
}

* html .pic-left
{
	float: left;
	margin: 15px 10px 15px 0;
	padding: 0;
	clear: none;
}

a.read-more
{
	float:right; 
	clear: none;
	color: #67abeb;
	font-size: 13px;
	background: url(images/bullet-arrow.gif) no-repeat 100% 8px;
	padding: 0 15px 0 0;
}

a.read-more:hover
{
	color: #83bcef;
}


/* ---- HEADER SECTION */

h1
{
	background: transparent url(images/basic-hydraulics-logo.gif) no-repeat 0 22px;
	height: 96px;
	width: 287px;
	float: left ;
}

h1 a
{
	display: block;
	height: 96px;
	width: 287px;
}

	/* ---- nav */

ul#nav
{
	float: left;
	width: 683px; /*690 - 7*/
	height: 45px;
	margin: 51px 7px 0 0;
	text-decoration:none;
	list-style-type: none;
}

ul#nav li {
	float: left;
	height: 45px;
}

ul#nav li a {
	display: block;
	height: 45px;
	border: 0 !important;
}

ul#nav li.home {
	width: 77px;
}

ul#nav li.home a {
	background: transparent url(images/btn-home.gif) no-repeat 0 -45px;
}

ul#nav li.home  a:hover {
	background: transparent url(images/btn-home.gif) no-repeat 0 -90px;
}

ul#nav li.home, ul#nav li.home  a:active, ul#nav li.home  a.active {
	background: transparent url(images/btn-home.gif) no-repeat 0 0;
}

ul#nav li.engineering {
	width: 158px;
}

ul#nav li.engineering a {
	background: transparent url(images/btn-engineering.gif) no-repeat 0 -45px;
}

ul#nav li.engineering  a:hover{
	background: transparent url(images/btn-engineering.gif) no-repeat 0 -90px;
}

ul#nav li.engineering, ul#nav li.engineering  a:active, ul#nav li.engineering  a.active {
	background: transparent url(images/btn-engineering.gif) no-repeat 0 0;
}

ul#nav li.products {
	width: 177px;
}

ul#nav li.products a {
	background: transparent url(images/btn-products.gif) no-repeat 0 -45px;
}

ul#nav li.products  a:hover {
	background: transparent url(images/btn-products.gif) no-repeat 0 -90px;
}

ul#nav li.products, ul#nav li.products  a:active, ul#nav li.products  a.active {
	background: transparent url(images/btn-products.gif) no-repeat 0 0;
}

ul#nav li.market {
	width: 121px;
}

ul#nav li.market a {
	background: transparent url(images/btn-market.gif) no-repeat 0 -45px;
}

ul#nav li.market  a:hover {
	background: transparent url(images/btn-market.gif) no-repeat 0 -90px;
}

ul#nav li.market, ul#nav li.market  a:active, ul#nav li.market  a.active {
	background: transparent url(images/btn-market.gif) no-repeat 0 0;
}

ul#nav li.contact {
	width: 150px;
}

ul#nav li.contact a {
	background: transparent url(images/btn-contact.gif) no-repeat 0 -45px;
}

ul#nav li.contact  a:hover{
	background: transparent url(images/btn-contact.gif) no-repeat 0 -90px;
}

ul#nav li.contact, ul#nav li.contact  a:active, ul#nav li.contact  a.active {
	background: transparent url(images/btn-contact.gif) no-repeat 0 0;
}

	/* ---- mainpic */

#mainpic
{
	background: transparent url(images/bg-cape-town-pic.jpg) no-repeat 0 0;
	height: 223px;
	width: 943px;
	padding: 8px 17px 0 17px;
}

#bg-left-sub
{
	background: transparent url(images/bg-left-sub.jpg) no-repeat 0 0;
	height: 25px;
	width: 312px;
	float: left;
}

#bg-left-main
{
	background: transparent url(images/bg-left-main.jpg) no-repeat 0 0;
	height: 25px;
	width: 312px;
	float: left;
}

#bg-right-main, #bg-right-main-single
{
	background: transparent url(images/bg-right-main.jpg) no-repeat 0 0;
	height: 25px;
	width: 665px;
	float: right;

}

* html #bg-right-main
{
	margin-top: -25px;
	clear: none;
	padding:0;
}

/* ---- LEFT Content */

#left-column
{
	background: url(images/bg-side.gif) repeat-y 0 0;
	float: left;
	width: 312px;
	color: #fff;
}

#left-column h2
{
	margin: 10px 43px 18px;
}

ul#subnav
{
	background: url(images/bg-side-bottom.gif) no-repeat 0 100%;
	padding: 0 0 40px 40px;
	font-size: 13.7px;
}

ul#subnav li
{
	padding-right: 45px;
}

ul#subnav li.dropdown
{	
	background: #3b3e40;
}

ul#subnav li a.active
{	
	background: url(images/bg-subnav-active.gif) no-repeat 0 0;
	color: #252525;
	font-size: 13.7px;
	display: block;
	width: 228px; /*237-12-9*/
	padding: 5px 9px 0 12px;
	text-decoration: none;
	margin-top: 5px;
	margin-bottom: 5px;
	letter-spacing: -0.3px;
}

ul#subnav li a.active:hover
{	
	color: #fff !important;
}

ul#subnav li a
{
	display: block;
	height: 29px; /*35-6*/
	width: 228px; /*237-12-9*/
	padding: 5px 9px 0 12px;
	text-decoration: none;
	color: #fff;
	letter-spacing: -0.3px;
}	

ul#subnav li a:hover
{
	background:  url(images/bg-subnav-hover2.gif) no-repeat 0 0;
	
}

ul#subnav li a:active
{
	background: url(images/bg-subnav-down.gif) no-repeat 0 0;
}		
		

ul.sub-subnav
{	
	background: #414446 url(images/bg-subsub-bottom.gif) no-repeat 0 100%;
	padding: 7px 0;
	margin-bottom: 8px;
	font-size: 13px;
	width:220px;
}

ul.sub-subnav li.sub-active
{	
	background-color: #535658;
	width: 220px;
}

ul.sub-subnav li a, ul.sub-subnav li.sub-active
{
	display: block;
	height: 29px;
	width: 180px !important; /*220-30-30*/
	padding: 5px 20px 0 !important;
	text-decoration: none;
	color: #c5c5c5 !important;
}	

ul.sub-subnav li a:hover
{
	background-image: none !important;
	background-color: #636668 !important;
	color: #fff;
}		

h2.second-sub-heading {
	margin-left:0 !important; 
	padding-top:20px; 
	clear: both;
}



/* ---- RIGHT Content */
#single-column
{
	text-align: justify;
	margin: 10px 20px 20px 15px;
}

#right-column
{
	float: right;
	clear: none;
	text-align: justify;
	width: 630px; /*665-20-15*/
	margin: 10px 20px 0 15px;
}

* html #right-column
{
	width: 610px;

}

#right-column ul, #single-column ul
{
	margin-bottom: 13px;
	font-size: 13px;
}

#right-column ul li, #single-column ul li
{
	background: transparent url(images/bullet-arrow.gif) no-repeat scroll 0 8px;
	padding-left: 20px;
	margin-left: 10px;
}

ul#contact-details
{
	margin-bottom: 35px;
	margin-top: 25px;
	font-style: italic;
	line-height: 210%;
}

ul#contact-details li
{
	background: none;
}

.item-heading 
{
	color: #cecece;
}

li .item-heading, .address-heading, .postal-heading, .phone-heading, .fax-heading, .email-heading
{
	display: block;
	color: #cecece;
	float: left;
	font-weight: bold;
	color: #fff;
	width: 55px;
	margin-right: 20px;
	padding-right: 40px;
	border-right: 1px solid #6a9cc9;
	text-align: right;
}

.address-heading
 {
	background: url(images/icon-address.gif) no-repeat 100% 0;
} 

.postal-heading
 {
	background: url(images/icon-postal.gif) no-repeat 100% 3px;
} 

.phone-heading
 {
	background: url(images/icon-phone.gif) no-repeat 100% 3px;
} 

.fax-heading
 {
	background: url(images/icon-fax.gif) no-repeat 100% 3px;
} 

.email-heading
 {
	background: url(images/icon-email.gif) no-repeat 100% 4px;
} 

ul#crumbs
{
	list-style-type: none;
	font-style: normal;
	font-size: 11px;
	float: left;
	padding-top:4px;
	color: #8c8c8c;
}

ul#crumbs li
{
	float: left;
	background: none;
	padding-left: 0;
	margin-left: 0;
}

ul#crumbs li a
{
	display: block;
	background: url(images/bullet-arrow.gif) no-repeat 100% 8px;
	padding: 0 15px 0 0;
	margin: 0 10px 0 0;
}

ul#crumbs a, #print a
{
	color: #8c8c8c;
}

ul#crumbs a:hover,  #print a:hover
{
	color: #83bcef;
}

#print
{
	font-size: 11px;
	float: right;
	background: url(images/icon-print.gif) no-repeat 100% 0;
	padding: 4px 45px 0 0;	
}

/* ---- FOOTER */

#footer
{
	border-top: 1px solid #535658;
	padding: 8px 0 9px;
	margin: 22px 20px 0 17px;	
}

#footer a
{
	font-size: 11px;
}

#footer address
{
	font-style: normal !important;
	font-size: 11px;
	float: left;
	color: #fff;
}

#footer address a.blue
{
	font-size: 12px !important;
	font-weight: bold  !important;
	text-decoration: none;
	text-transform: uppercase;
}

#footer address .item-heading
{
	font-style: normal;
	font-size: 11px;
	padding-left: 7px;
	margin-left: 6px;
	border-left: 1px solid #6a9cc9;
}

.design
{
	font-size: 11px;
	padding-top:1px;
	float: right;
}