
/* International Hydraulics, Inc.  Style Sheet - Structure + Typography + Styles
	Copyright 2007 - International Hydraulics, Inc.
	Updated: Thu 12.29.07 @ 1:06 p.m.
	Author:     Gerald Pratt
	Author URL: www.578media.com
   ----------------------------------------------------*/

/******* SITE STRUCTURE & CORRESPONDING ELEMENTS *******/
/*---------------------------------------
          General Settings
  ---------------------------------------*/

body {
	margin:0;
	background:#BEBEBE url(assets/bg-main.jpg) 0 -25px repeat-x;
	font:14px Tahoma, Arial, Helvetica, sans-serif;
	margin-bottom:8px;
	color:#382A2A;
	line-height: 20px;
}

/* Headings
-------------------------------------------------------------- */
h1 {
	margin:0; 
	background:url(assets/title.gif) 0 -2px no-repeat transparent;
	padding-left: 21px;
	font-family:Arial, Helvetica, sans-serif;
	color: #aa1f1f;
	font-size:22px;
	font-weight:normal;
}
h1 a {display:block; float:left;width:275px; 	height:143px;	text-indent:-9999px;	overflow:hidden;}
h2 {
	margin:0; 
	background:transparent;
	font-family:Arial, Helvetica, sans-serif;
	color: #000000;
	font-size:19px;
	font-weight:normal;
}
	h2.home-title {background:url(assets/title.gif) no-repeat;}
	h2.quick-cat-title {background:url(assets/quick-cat-title.gif) no-repeat;}
	h2.contact-title {background:url(assets/contactus.gif) no-repeat;}
	h2.links-title {background:url(assets/links.gif) no-repeat;}
	h2.careers-title {background:url(assets/careers.gif) no-repeat;}
	h2.products-title {background:url(assets/products.gif) no-repeat;}
	h2.quality-title {background:url(assets/quality.gif) no-repeat;}
	h2.news-title {background:url(assets/news.gif) no-repeat;}
	h2.profile-title {background:url(images/profile.gif) no-repeat;}
	h2.whatsnew-title {background:url(assets/whatsnew.gif) no-repeat;}
	h2.quick-links-title {background:url(assets/quick-links-title.gif) no-repeat;}
	h2.corporate-title {background:url(assets/corprofile.gif) no-repeat;}
	h2.sitemap-title {background:url(assets/sitemap.jpg) no-repeat;}
h3 {margin:0 auto; height:22px; text-indent:-9999px;}
	h3.hydro-title {background:url(assets/hydraulics-title.gif) no-repeat; width:100px;}
	h3.industrial-title {background:url(assets/indust-supply-title.gif) no-repeat; width:156px;}
h4{
	font-family:Tahoma, Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold; 
	color:#000;
	margin-bottom:3px;
}
h6 {font-size: 1em; font-weight: bold; margin-bottom:2px;}

img {
	display:block;
	float:left;
	border:0;
}

/* Text elements
-------------------------------------------------------------- */
a {color:#EF5B5B;}
a:hover {text-decoration:none;}

p {margin:0 0 11px 0; text-align:left;}

ul {padding:0; margin:0; list-style:none;}

/* Some default classes
-------------------------------------------------------------- */
.column {float: left; margin-right: 10px;}
.span-5   {width: 200px;}

/* Border with more whitespace, spans one column. */
.colborder {
  padding-right: 24px;
  margin-right: 25px;
}

/* The last column in a row needs this class. */
.last { margin-right: 0; }

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear { display: inline-block; }   
.clear:after, .container:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
* html .clear { height: 1%; }
.clear { display: block; }

/* Misc classes and elements
-------------------------------------------------------------- */
/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin: 0 0 1.4em;
  border: none; 
}
hr.divide {
  background: #ddd; 
  color: #ddd;
  clear: both; 
  float: none; 
  width: 100%; 
  height: .1em;
  margin-top: 25px;
  border: none; 
}
hr.space {background: #fff; color: #fff;}


#main {
	width:772px;
	margin:0 auto;
}
.top-box {
	line-height:19px;
	width:772px;
	float:left;
	background:url(assets/bg-top-nav.jpg);
	font-size:8px;
	color:#fff;
	text-transform:uppercase;
	padding:0 9px;
	letter-spacing:1px;
	font-family:Arial, Helvetica, sans-serif;
}
#center {
	width:770px;
	float:left;
	margin:0 1px;
	display:inline;
	padding-bottom:10px;
}
#header {
	width:770px;
	float:left;
	background:url(assets/bg-header.jpg);
	height:333px;
}
.top-right-box {
	width:461px;
	float:right;
	padding-right:9px;
}
.cite {
	width:307px;
	float:left;
	font:italic 16px "Trebuschet MS", Arial, Helvetica, sans-serif;
	padding:15px 0 0 155px;
	color:#fff;
	height:54px;
}
.cite span {
	width:139px;
	float:left;
	display:block;
	padding-left:168px;
	font-size:13px;
}
.big-bn {
	width:461px;
	height:158px;
	float:right;
}
.call-now {
	width:235px;
	float:left;
	height:49px;
	background:url(assets/call-now.jpg);
	color:#fff;
	padding-top:57px;
}
.call-now li {
	width:213px;
	float:left;
	padding-left:10px;
	background:url(assets/row.gif) no-repeat 11px 5px;
}
.call-now li a {
	color:#fff;
	text-decoration:none;
	font-size:10px;
}
.call-now li a:hover {
	text-decoration:underline;
}
.center {
	width:732px;
	float:left;
	background:#E5E5E5;
	margin:0 9px;
	display:inline;
	padding:0 0 0 20px;
}
#left {
	width:489px;
	float:left;
	border-left:1px solid #C8C8C8;
	border-right:1px solid #C8C8C8;
	background:#fff url(assets/bg-left.jpg) no-repeat 0 100%;
	padding:0 0 27px 15px;
}
.home-box,
.quick-cat-box {
	width:489px;
	float:left;
	padding-bottom:17px;
}
.quick-cat-box p {
	padding-left:11px;
	margin:0;
}
.video-box {
	width:247px;
	float:left;
}
.video {
	width:218px;
	height:188px;
	float:left;
	background:url(assets/bg-video.gif) no-repeat;
	padding:8px 8px 7px 7px;
}
.text-box-index {
	width:430px;
	float:right;
	padding:5px 25px 0 0;
}

.text-box {
	width:460px;
	float:left;
	padding:5px 25px 0 0;
}


/* Home Page - Online Store Notice*/
	#requestdrivers { clear: both; float: left; width: 450px; height: 280px; background: url(assets/onlinestore.jpg) top left no-repeat; margin: 0 0 15px 0; }
	#requestdrivers p { color: #666; margin: 0; padding: 140px 10px 5px 60px; width: 350px; }
	
/*---------------------------------------
          Forms
  ---------------------------------------*/	
/** Contact Form **/
.contactleft {
	width:200px;
	float:left;
	padding:5px;
}

.contactright {
	width:200px;
	float:left;
	padding:5px;
}

#form_contact {
	width: 400px;
	float: left;
	margin-left: 25px;
}

#form_contact label {
	display: block;
	font: 18px Georgia, "Times New Roman", Times, serif;
	margin-bottom: 8px;
	color: #666666;
}
#form_contact .input input, #form_contact textarea {
	padding: 5px;
	margin-bottom: 15px;
	font: 14px Arial, Helvetica, sans-serif;
	border: 1px solid #CCCCCC;
	color: #999999;
}
#form_contact textarea {
	line-height: 20px;
}
#form_contact .input input:hover, #form_contact textarea:hover {
	background-color: #F2FBFF;
	border-color: #3399CC;
	color: #000000;
}
#form_contact .input input:focus, #form_contact textarea:focus {
	background-color: #FFFFCC;
	border-color: #999999;
	color: #000000;
}
#form_contact .submit input {
	padding: 4px;
	font: 17px Georgia, "Times New Roman", Times, serif;
	color: #666666;
}
#form_contact .submit input:hover{color: #CC0000;}


/** List Boxes **/
.list-box {
	width:436px;
	float:left;
	padding:20px 0 0 20px;
	background:url(assets/bg-list-box.gif) no-repeat 206px 20px;
}
.list-box ul {
	display:block;
	float:left;
	text-align:center;
}
.list-box ul li {
	line-height:18px;
}
.list-box ul.hydro {
	width:186px;
}
.list-box ul.industrial {
	width:250px;
}
#right {
	width:226px;
	float:left;
	margin-top:-106px;
	position:relative;
}
#right ul.black {
	background:#222;
	float:left;
	width:225px;
}
#right ul.black li {
	width:221px;
	float:left;
	padding:0 0 0 4px;
	margin-top:2px;
}
#right ul.black li a {
	display:block;
	float:left;
	width:206px;
	background:url(assets/link.gif) repeat-y;
	text-decoration:none;
	padding:2px 0 2px 15px;
	color:#fff;
	font-size:12px;
}
#right ul.black li a:hover,
#right ul.black li a.active {
	background:url(assets/hover-link.gif) repeat-y;
}
.button {
	display: inline;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF !important;/*EDIT for style*/
	text-decoration: none !important;
	background: #CC0000; /*EDIT for style*/
	padding: 3px 8px 3px 8px; 
	margin: 2px 0 2px 0;
	height: 25px; /*EDIT for style*/
}
.button:hover {
	color: #CC0000 !important;/*EDIT for style*/
	background: #FFFFFF;/*EDIT for style*/
	border: 1px solid #CC0000;/*EDIT for style*/
}
/* do not edit the styles below pertaining to the validation summary */
.validationSummary, .validationSummary ul {
	font-family:Verdana, geneva, "helvetica neue", arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FF0000;
	line-height: 1.4em;
	margin: 0.2em 0 0 3em;
	padding: 0;	
}
.validationSummary li {
	color: #FF0000 !important;
	list-style-type: disc;
	list-style-position: outside;
}
.validationSummary li b{
	font-family:Verdana, geneva, "helvetica neue", arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FF0000;
}
/*---------------------------------------
          Contact Page Info Side Bar
  ---------------------------------------*/

.cInfosidebar {
	padding:0 15px;
}

* html .quick-links {
	height:115px;
}
.quick-links {
	width:210px;
	float:left;
	background:#fff url(assets/bg-quick-links.gif) repeat-x;
	min-height:115px;
	padding:15px 0 0 15px;
}
.quick-links ul {
	padding:10px 0 0 8px;
	width:202px;
	float:left;
}
.quick-links ul li {
	width:202px;
	float:left;
	padding:1px 0;
}
.quick-links ul li a {
	padding-left:8px;
	background:url(assets/black-row.gif) no-repeat 0 5px;
}
.advert {
	width:206px;
	float:left;
	padding:13px 0 0 19px;
}
.advert a {
	display:block;
	float:left;
	padding:5px;
	width:180px;
	height:180px;
	background:url(assets/bg-advert.gif);
}
.advert a img {
	border:1px solid #fff;
	width:180px;
	height:180px;
}
.bottom-nav {
	width:748px;
	float:left;
	height:33px;
	border:1px solid #AB2525;
	display:inline;
	background:url(assets/bg-bottom-nav.gif) repeat-x;
	margin:21px 1px 1px -19px;
	text-align:center;
}
.bottom-nav ul {
	display:inline;
}
.bottom-nav ul li {
	padding:0 28px 0 18px;
	background:url(assets/bg-bottom-link.gif) no-repeat 100% 2px;
	line-height:33px;
	display:inline;
}
.bottom-nav ul li.last {
	background:none;
}
.bottom-nav ul li a {
	color:#fff;
	font-weight:bold;
	text-decoration:none;
}	
.bottom-nav ul li a:hover {
	text-decoration:underline;
}

/*---------------------------------------
          Footer
  ---------------------------------------*/
* html #footer {
	height:35px;
}
#footer {
	min-height:35px;
	background:transparent;
	font:11px Verdana, Arial, Helvetica, sans-serif;
	color:#382A2A;
	width:688px;
	margin:0 auto;
	clear:both;
}
.top-footer {
	background:url(assets/bg-top-footer.gif) no-repeat;
	padding-top:4px;
	float:left;
	width:688px;
}
* html .bottom-footer {
	height:27px;
}
.bottom-footer {
	background: transparent;
	padding-bottom:4px;
	float:left;
	min-height:27px;
	line-height:24px;
	width:688px;
	text-align:center;
}
