/* css for Rolaway Hose Systems by Dinkum Web Solutions, http://www.dinkumweb.com.au */
/* All associated graphics copyright 2005, Rolaway Hose Systems */

/* IMPORTANT */
/* This design is not a template. You may not reproduce it elsewhere without the 
   designer's written permission. However, feel free to study the CSS and use 
   techniques you learn from it elsewhere. */

/*
-----------------------------------------------------------------------------------------
Body Formatting	
----------------------------------------------------------------------------------------- 
*/

body {
	margin: 0;
	padding: 0;
	background: #60c2ff url(../images/bg-body.gif) repeat-x;
}

body>#containter 
	{
	margin-left: -375px;
	}

.clear {
 	clear: both;
 	height: 10px;
 	overflow: hidden;
 	margin-bottom: -1px;
}

/*
-----------------------------------------------------------------------------------------
Wrapper/Div Formatting	
----------------------------------------------------------------------------------------- 
*/

#wrapper_container {
	position: absolute;
	width: 750px; /* total width of the object */
	left: 50%;
	margin-left: -375px; /* width/2 */
	margin-top: 0px; /* height/2 */
	padding: 0px;	
	text-align: left;
}

#menu_coffs {
	position: absolute;
	width: 300px;
	height: 50px;
	margin: 5px 0 0 5px;
	padding: 0;
}


#wrapper_banner {
	position: relative;
	width: 750px;
	height: 123px;
	margin: 0;
	padding: 0;
	background: url(../images/bg-banner.jpg);
}

#wrapper_middle {
	position: relative;
	width: 750px;
	margin: 0;
	padding: 0;
	background: url(../images/bg-middle.gif);
}

#middle_sidepanel {
	position: relative;
	width: 282px;
	margin: 0;
	padding: 0;
	float: left;
}

#middle_sidepanel img { border: none; }

#middle_content {
	position: relative;
	width: 468px;
	margin: 0;
	padding: 0;
	background: url(../images/bg-content.gif) no-repeat;
	float: left;
}

#wrapper_footer {
	position: relative;
	width: 750px;
	height: 62px;
	margin: 0;
	padding: 0;
	background: url(../images/bg-footer.gif);
}


#wrapper_menu span {
	display: none;
}

/*
-----------------------------------------------------------------------------------------
Text/Content Formatting	
----------------------------------------------------------------------------------------- 
*/

p {
	font: 11px/16px Verdana, Arial, Helvetica, sans-serif;
	margin: 10px 50px 0 15px;
	color: #1e0685;
}

p.indent {
	font: 11px/16px Verdana, Arial, Helvetica, sans-serif;
	margin: 10px 50px 0 60px;
	color: #1e0685;
}

#middle_content p {
	font: 12px/16px Verdana, Arial, Helvetica, sans-serif;
}

#wrapper_footer p {
	font: 10px/14px Verdana, Arial, Helvetica, sans-serif;
	padding: 0 5px 0 5px;
	color: #1e0685;
}

#middle_sidepanel p {
	margin: 10px 15px 0 15px;
	text-align: center;
}

#copyright_right p {
	margin: 10px 0 0 65px;
}

li {
	font: 11px/16px Verdana, Arial, Helvetica, sans-serif;
}

.credits {
	font: 12px/14px Verdana, Arial, Helvetica, sans-serif;
	padding: 10px 5px 0 5px;
	color: #ffffff;
}

h1 {
	font: bold 16px/20px Verdana, Arial, Helvetica, sans-serif;
	color: #1e0685;
	margin: 0;
	text-align: center;
}

h2 {
	font: bold 15px/22px Verdana, Arial, Helvetica, sans-serif;
	color: #1e0685;
	padding: 0 0 3px 25px;
	border-bottom: 1px dashed #b6d2e7;
	background: url(../images/image-star.gif) no-repeat 0 30%;
}

#middle_sidepanel h2 {
	margin: 5px 15px 0 15px;
}

#middle_content h2 {
	margin: 5px 50px 0 15px;
}

h3 {
	font: bold 13px/20px Verdana, Arial, Helvetica, sans-serif; 
	color: #1e0685;
	margin: 0;
	padding: 10px 0 0 23px;
}

h4 {
	font: bold 13px/20px Verdana, Arial, Helvetica, sans-serif; 
	color: #1e0685;
	margin: 5px 50px 0 15px;
	padding: 5px 0 0 0;
	border-top: 1px dashed #b6d2e7;

}

h4.front {
	border-top: 0;

}



/*
-----------------------------------------------------------------------------------------
Menu/Navigation Formatting	
----------------------------------------------------------------------------------------- 
*/

#wrapper_menu {
	position: relative;
	width: 750px;
	height: 138px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 80%;
	text-align: left;
	background: url(../images/bg-menu.jpg);
}
	
#wrapper_menu ul#menu	{
	position: absolute;	
	width: 576px;
	height: 126px;
	margin: 57px 0 0 135px;
	padding: 0;
	list-style: none;
}

#wrapper_menu ul#menu li {
	height: 63px;
	padding: 0;
	position: absolute;
	top: 0;
}
	
ul#wrapper_menu li, ul#menu a {
	height: 63px;
	/*\*/overflow: hidden;/**/
	display: block;
}
	
#wrapper_menu ul#menu li a {
	text-indent: -9999px;
	text-decoration: none;
}
	
#menuAbout		{left: 0px; top: 0px; width: 76px; background: url(../images/menu/menu-about.gif) top left no-repeat;}
#menuNew		{left: 76px; top: 0px; width: 99px; background: url(../images/menu/menu-new.gif) top left no-repeat;}
#menuUsed		{left: 175px; top: 0px; width: 105px; background: url(../images/menu/menu-used.gif) top left no-repeat;}
#menuOutboards	{left: 280px; top: 0px; width: 92px; background: url(../images/menu/menu-outboards.gif) top left no-repeat;}
#menuAccess		{left: 372px; top: 0px; width: 107px; background: url(../images/menu/menu-access.gif) top left no-repeat;}
#menuContact	{left: 479px; top: 0px; width: 97px; background: url(../images/menu/menu-contact.gif) top left no-repeat;}
#menuHome		{left: 0px; top: 0px; width: 210px; background: url(../images/menu/menu-home.gif) top left no-repeat;}

#menuAbout a:hover		{background: url(../images/menu/menu-about.gif) 0 -63px no-repeat;}
#menuNew a:hover 		{background: url(../images/menu/menu-new.gif) 0 -63px no-repeat;}
#menuUsed a:hover 		{background: url(../images/menu/menu-used.gif) 0 -63px no-repeat;}
#menuOutboards a:hover	{background: url(../images/menu/menu-outboards.gif) 0 -63px no-repeat;}
#menuAccess a:hover		{background: url(../images/menu/menu-access.gif) 0 -63px no-repeat;}
#menuContact a:hover	{background: url(../images/menu/menu-contact.gif) 0 -63px no-repeat;}
#menuHome a:hover		{background: url(../images/menu/menu-home.gif) 0 -63px no-repeat;}

/*
-----------------------------------------------------------------------------------------
Elements Formatting	eg hr, lists, form items, links etc
----------------------------------------------------------------------------------------- 
*/

a:link { color: #ff0000; text-decoration: none; }
a:visited { color: #ff0000; text-decoration: none; }
a:active { color: #ff0000; text-decoration: none; }
a:hover { color: #ff0000; text-decoration: underline; }

a.link-footer:link { color: #1e0685; text-decoration: none; }
a.link-footer:visited { color: #1e0685; text-decoration: none; }
a.link-footer:active { color: #1e0685; text-decoration: none; }
a.link-footer:hover { color: #ff0000; text-decoration: underline; }

input, textarea, select {
  margin: 0 0 5px 0;
  padding: 4px;
  font-family: verdana, arial, sans-serif;
  font-size: 1em;
  background: #d4eeff;
  border: 1px solid #1e0685;
}

input:focus, textarea:focus, select:focus {
  border: 1px dashed #ff0000;
}

input.button {
  background: #4E2E0C;
  border-color: #795D40 #371C00 #371C00 #795D40;
}

hr {
	clear: both;
	border: 0;
	color: #ffffff;
	width: 423px;
}

#middle_content img {
	float: right;
	border: 1px dotted #b6d2e7;
	padding: 2px;
	margin-left: 10px;
	
}

/*
-----------------------------------------------------------------------------------------
Validation Formatting	eg xhtml, css buttons etc
----------------------------------------------------------------------------------------- 
*/

#wrapper_copyright {
	position: relative;
	width: 750px;
	height: 16px;
	margin: 0;
	padding: 0;
}

#copyright_left {
	position: relative;
	width: 550px;
	height: 16px;
	margin: 0;
	padding: 0;
	float: left;
}

#copyright_right {
	position: relative;
	width: 180px;
	height: 16px;
	margin: 0;
	padding: 0;
	float: left;
}

.validXHTML {width: 38px; height: 16px; background: url(../images/image-xhtml.gif) top left no-repeat; float: left; display: block;}
.validXHTML:hover {background-position: 0 -16px;}
.validXHTML span { display: none; }

.validCSS {width: 38px; height: 16px; background: url(../images/image-css.gif) top left no-repeat; float: left; display: block;}
.validCSS:hover {background-position: 0 -16px;}
.validCSS span { display: none; }

.dws {width: 38px; height: 16px; background: url(../images/image-dws.gif) top left no-repeat; float: left; display: block;}
.dws:hover {background-position: 0 -16px;}
.dws span { display: none; }


/* end of css */