/* BENSJOHNSON ||||| HOUSEBOATSTUDIO CSS */

* { padding:0; margin:0; }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
a img,:link img,:visited img { border:none }

html { overflow-y : scroll; } 

body,td,th {
	background-color: #f4f3f1;
	background-image: url(../images/500x500_textureBg1.jpg);
	background-repeat: repeat;
	font-family: "Trebuchet MS", "Lucida Sans Unicode", Verdana, sans-serif;
	font-size:14px;
	line-height:18px;
	color: #3f3c34; 
	}

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

/* gloabal styles */	

#wrapper { width:760px; margin-left:auto; margin-right:auto; display:block; }

#header { width:760px; height:210px; display:block }
	#headerLogo { margin-left:0px; margin-top:20px; position:absolute }
	#headerContactInfo { text-align:right; float:right; width:350px; height:100px; margin-top:97px; line-height: 25px; }
	.darkBrownText { color:#2e2c27; font-weight:bold; }
	#headerMap { width:350px; height:180px; position:absolute; margin-left:410px;}
	
#homeSlideshow { width:760px; height:150px; display:block; }

.brownBar {height:10px; width:760px; display:block; background-color:#615d53; background-image:url(../images/760x10_brownBarBg.gif); margin-left:auto; margin-right:auto}

.clearer { clear:both }

h1 {font-size:18px; color:#3f3c34; margin-bottom:5px; line-height:20px}
h2 {font-size:18px; color:#3f3c34; margin-bottom:10px; line-height:20px}
h3 {font-size:15px; color:#3f3c34; margin-bottom:5px; line-height:16px}
h4 {font-size:10px; color:#3f3c34; margin-bottom:5px; line-height:12px}		

/* nav menu styles */

#menuWrapper { width:760px; height:40px; background-image:url(../images/760x40_navBg1.jpg); }

	.menu {
		margin-left: 160px;
		padding: 0;
		list-style: none;
		background: none;
	}
	.menu li {
		padding: 0px 0px 0px 0px;
		margin: 0;
		height: 40px;
		list-style: none;
		background-repeat: no-repeat;
	}
	.menu li a, .menu li a:visited {
		display: block;
		text-decoration: none;
		text-indent: -1000px;
		height: 40px;
		background-repeat: no-repeat;
	}
	.home {background-image: url(../images/menu_home1.png); width: 80px;}
	.home a {background-image: url(../images/menu_home2.png);}
	.homeOn {background-image: url(../images/menu_home1.png); width: 80px;}
	.services {background-image: url(../images/menu_services1.png); width: 104px;}
	.services a {background-image: url(../images/menu_services2.png);}
	.servicesOn {background-image: url(../images/menu_services1.png); width: 104px;}
	.gallery {background-image: url(../images/menu_gallery1.png); width: 95px;}
	.gallery a {background-image: url(../images/menu_gallery2.png);}
	.galleryOn {background-image: url(../images/menu_gallery1.png); width: 95px;}
	.faq {background-image: url(../images/menu_faq1.png); width: 63px;}
	.faq a {background-image: url(../images/menu_faq2.png);}
	.faqOn {background-image: url(../images/menu_faq1.png); width: 63px;}
	.contact {background-image: url(../images/menu_contact1.png); width: 99px;}
	.contact a {background-image: url(../images/menu_contact2.png);}
	.contactOn {background-image: url(../images/menu_contact1.png); width:99px;}
	ul.menu li a:hover {background: none;}
	.menu li {float: left;}
	.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

/* content styles */

#content { width:760px; background-image:url(../images/760x10_contentDropShadpwBg.jpg); background-repeat:no-repeat; }
	#contentColumnLeft { width:359px; float:left; padding: 20px 20px 20px 0px; border-right:dashed; border-right-color:#565037; border-right-width:1px;}
	#contentColumnRight { width:350px; float:left; padding: 20px 0px 20px 30px; }
	
	.contentList { line-height:22px; list-style-position:inside; font-weight:bold; color:#3e4d38}
	
	.faqQuestion { font-style:italic; color:#3e4d38; font-weight:bold; }
	
	#galleryRightColumn { width:379px; float:left; border-right:dashed; border-bottom-color:#565037; border-right-width:1px; }
	#galleryBottomBar { width:379px; height:16px; float:left }
	#galleryButtonLeft { width:70px; height:60px; float: left; margin-left:120px; }
	#galleryButtonRight { width:70px; height:60px; float: left; margin-left:0px; }

#bottomSlogan { text-align:center; font-style:italic; font-weight:bold; }
	
#testimonial { width:600px; height: 130px; background-image:url(../images/760x240_testimonialBg.jpg); background-repeat:no-repeat; padding: 30px 80px 20px 80px; }
	#testimonialText { width:760px; padding: 20px; } 	

/* footer styles */

#footerBrownBar {height:10px; width:100%; display:block; background-color:#615d53; background-image:url(../images/760x10_brownBarBg.gif)}
#footer {width:100%; background-image:url(../images/500x500_textureBg-grey.jpg); display:block }
	#footerText { width:700px; padding:30px; text-align:center; margin-left:auto; margin-right:auto; font-size: 12px; }

/* gallery slider styles */

	noscript p, noscript ol { color: #a00; font-size: 12px; line-height: 1.5em; text-align: left; padding:20px }
	noscript a { color: #a00; text-decoration: underline }
	noscript ol { margin-left: 20px; }
	
	.stripViewer .panelContainer .panel ul {
		text-align: left;
		margin: 0px 0px 0px 0px;
	}
	
	.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
		margin: 0px 0;
		position: relative;
		width: 100%;
	}

	/* These 2 lines specify style applied while slider is loading */
	.csw {width: 100%; height: 284px; background: #b9b9b9; overflow: scroll}
	.csw .loading {margin: 120px 0 130px 0; text-align: center}

	.stripViewer { /* This is the viewing window */
		position: relative;
		overflow: hidden; 
		border: 0px solid #000; /* this is the border. should have the same value for the links */
		margin: auto;
		width: 379px; /* Also specified in  .stripViewer .panelContainer .panel  below */
		height: 284px;
		clear: both;
		background: #b9b9b9;
	}
	
	.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
		position: relative;
		left: 0; top: 0;
		width: 100%;
		list-style-type: none;
		/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
	}
	
	.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
		float:left;
		height: 100%;
		position: relative;
		width: 379px; /* Also specified in  .stripViewer  above */
	}
	
	.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
		padding: 0px;
	}
	
	.stripNavL, .stripNavR { /* The left and right arrows */
		position: absolute;
		top: 304px;
/*		text-indent: -9000em;
*/	}
	
	.stripNavL a, .stripNavR a {
		display: block;
		height: 60px;
		width: 70px;
	}
	
	.stripNavL {
		left: 120px;
	}
	
	.stripNavR {
		right: 120px;
	}
	
	.stripNavL {
		background: url("../images/gallery/70x60_leftArrowButton1.png") no-repeat center;
	}
	
	.stripNavR {
		background: url("../images/gallery/70x60_rightArrowButton1.png") no-repeat center;
	}