/*
	name: navigation.css

	type: stylesheet
	description: Bear Creel Log Cabin - Navigation styles

	created: 01/01/2008
	last rev: 01/20/2008
*/

/*

Navigation Structure
--------------------------

<#header>
	<#banner>
		<#topmenu>
		</#topmenu>
	</#banner>
<#header>


<#footer>
	<#bottommenu>
	</#bottommenu>
</#footer>

*/



/* ----  begin:  #header  ---- */

#header {
	/* absolute positioning */
	/*
	z-index: 1;
	position: absolute;
	top: 0px;
    left:  16px;
	*/

	/* relative positioning */
	float: left;
	margin-left: 16px;



	width: 870px;
	height: 150px;
}
.debug #header {
	/* pale rose */
	background-color: #FFCCFF;
}



/* ----  begin:  #banner  ---- */

#banner {
	position: relative;
	float: left;
	width: 870px;
	height: 150px;
	background: url(../images/navigation/Banner.png) no-repeat;
}
.debug #banner {
	/* pale blue */
	background-color: #CCFFFF;
}



/* ----  begin:  #homeanchor  ---- */

#banneroval {
	position: relative;
	width: 200px;
	height: 143px;
	margin: 7px 0 0 336px;
}

a#homeanchor {
	float: left;
	width: 200px;
	height: 143px;
}

a#homeanchor:hover {
	background: url(../images/navigation/BannerOval.png) no-repeat;
}

/* ----  end:  #homeanchor  ---- */


/* ----  begin:  #topmenu  ---- */

/* absolute positioning */

#topmenu {
	z-index: 0;
	position: absolute;
	left: 0px;
	top: 102px;

	width: 862px;
	height: 24px;
	font-size: .1px;
    border: 0px solid #3333CC;
}

#topmenu div {
	z-index: 0;
	position: absolute;
	top: 102 px;
	height: 22px;
	border: 0px solid #CC33CC;
}


/* note that each <a> is contained within an absolutely positioned <div> */

#topmenu a {
	float: left;
	height: 24px;
}


#tm_home {
	left: 10px;	
	width: 54px;
}

#tm_thingstodo {
	left: 87px;	
	width: 116px;
}

#tm_rentalrates {
	left: 224px;	
	width: 116px;
}

#tm_contactus {
	left: 538px;	
	width: 102px;
}

#tm_testimonials {
	left: 665px;	
	width: 186px;
}



/* relative positioning */

/*

#topmenu {
	float: left;
	margin-top: 102px;

	width: 862px;
	height: 24px;
	font-size: .1px;
}


#topmenu div {
	float: left;
	height: 22px;
	background-color: #F30;
}


#topmenu a {
	float: left;
	height: 24px;
}


#tm_home {
	margin-left: 11px;
	width: 54px;
}

#tm_thingstodo {
	margin-left: 21px;
	width: 116px;
}

#tm_rentalrates {
	margin-left: 21px;
	width: 116px;
}

#tm_contactus {
	margin-left: 198px;
	width: 102px;
}

#tm_testimonials {
	margin-left: 26px;
	width: 186px;
}

*/



#tm_home a#current, #tm_home a:hover {
	background: url(../images/navigation/tm_home.png) no-repeat;
}

#tm_thingstodo a#current, #tm_thingstodo a:hover {
	background: url(../images/navigation/tm_thingstodo.png) no-repeat;
}

#tm_rentalrates a#current,  #tm_rentalrates a:hover {
	background: url(../images/navigation/tm_rentalrates.png) no-repeat;
}

#tm_contactus a#current, #tm_contactus a:hover {
	background: url(../images/navigation/tm_contactus.png) no-repeat;
}

#tm_testimonials a#current, #tm_testimonials a:hover {
	background: url(../images/navigation/tm_testimonials.png) no-repeat;
}



/* ----  end:  #topmenu  ---- */



/* ----  end:  #banner  ---- */



/* ----  end:  #header  ---- */



/* ----  begin:  #footer  ---- */

#footer {
	float: left;
	clear: both;
	width: 880px;
	height: 50px;
	margin-top: 12px;
	margin-left: 16px;
	background: url(../images/navigation/Footer.png) no-repeat;
	/* background-color: #88FF33; */
}


/* ----  begin:  #bottommenu  ---- */

/*

This is essentially a duplicate of the "top menu", except that in this case, it is not necessary (and not feasible, due to variable page height) to use absolute positioning,
since there is no "central oval" anchor (for "Home") to conflict (in IE6 only) with the menu div's anchors (absolute positioning is required for the z-index use needed to resolve this).
Note also that the overall background graphics are *.PNGs for Firefox, but it is necessary to use *.GIFs for IE6 in order to have functional anchors on top of the graphics.
The only downsides re IE6's appearance are barely-noticeable jaggies on the upper rounded corners, and of course the loss of alpha transparency.  But hey...

*/


/* absolute positioning */

/*

#bottommenu {
	z-index: 0;
	position: absolute;
	left: 0px;
	top: 10px;

	width: 862px;
	height: 24px;
	font-size: .1px;
	background-color: #CCCCFF;
}

#bottommenu div {
	z-index: 0;
	position: absolute;
	top: 10 px;
	height: 24px;
}

#bottommenu a {
	float: left;
	height: 24px;
}

#bm_home {
	left: 10px;	
	width: 54px;
}

#bm_thingstodo {
	left: 87px;	
	width: 116px;
}

#bm_rentalrates {
	left: 224px;	
	width: 116px;
}

#bm_contactus {
	left: 538px;	
	width: 102px;
}

#bm_testimonials {
	left: 665px;	
	width: 186px;
}

*/


/* relative positioning */

#bottommenu {
	float: left;
	width: 868px;
	height: 40px;
	margin-left: 0px;
	margin-top: 0;
	font-size: .1px;
}

#bottommenu div {
	float: left;
	height: 24px;
}

#bottommenu a {
	float: left;
	margin-top: 11px;
	height: 24px;
}

#bm_home {
	margin-left: 10px;	
	width: 54px;
}

#bm_thingstodo {
	margin-left: 23px;	
	width: 116px;
}

#bm_rentalrates {
	margin-left: 22px;	
	width: 116px;
}

#bm_webdesign {
	margin-left: 10px;	
	margin-top: 0;
	width: 170px;
	height: 40px;
	/* border: 1px solid #FF3; */
}
#bm_webdesign a {
	margin-top: 3px;
	height: 40px;
}


#bm_contactus {
	margin-left:  12px;
	width: 102px;
}

#bm_testimonials {
	margin-left: 34px;	
	width: 186px;
}



#bm_home a#current, #bm_home a:hover {
	background: url(../images/navigation/tm_home.png) no-repeat;
}

#bm_thingstodo a#current, #bm_thingstodo a:hover {
	background: url(../images/navigation/tm_thingstodo.png) no-repeat;
}

#bm_rentalrates a#current,  #bm_rentalrates a:hover {
	background: url(../images/navigation/tm_rentalrates.png) no-repeat;
}

#bm_webdesign a#current,  #bm_webdesign a:hover {
	background: url(../images/navigation/tm_webdesign.png) no-repeat;
}

#bm_contactus a#current, #bm_contactus a:hover {
	background: url(../images/navigation/tm_contactus.png) no-repeat;
}

#bm_testimonials a#current, #bm_testimonials a:hover {
	background: url(../images/navigation/tm_testimonials.png) no-repeat;
}



/* ----  end:  #bottommenu  ---- */


/* ----  end: #footer  ---- */