#tabs {
	position:absolute;
	bottom:0px;
	left:0px;
	margin:2px;
	width:924px;
	height:36px;
	background-image:url(../images/tabs/tab_bg.gif);
	background-position:bottom;
	background-repeat:repeat-x;
}
#header-photo {
	position:relative;
	width:928px;
	height:147px;
	margin:0px 0px 0px 20px;
	background-repeat:no-repeat;
}

#callus {
	position:relative;
	float:right;
}

.mountain {
	background-image:url(../images/headers/mountain.jpg);
}
.camping {
	background-image:url(../images/headers/camping.jpg);
}
.skiing {
	background-image:url(../images/headers/skiing.jpg);
}
.snowboarding {
	background-image:url(../images/headers/snowboarding.jpg);
}
.climbing {
	background-image:url(../images/headers/climbing.jpg);
}
.walking {
	background-image:url(../images/headers/walking.jpg);
}

#tabs {
font-size:15px;/* set the font size */
}
#tabs ul {
line-height: 1em; /* setting the line height now so we don't have any headaches*/
margin: 0px; /* let's keep the margin set to 0 for the same reasons as above*/
list-style-type: none; /* we remove the UL's default disc bullets */
float: left; /* we float the list to the left like we will all the elements inside*/
padding: 0px 5px 0px 0px; /* give it a left padding of 5px to counter the effect of margin -5px below for left overlap or right padding for right overlap */
}

#tabs ul li {
display: block; /* we display this text as block so that we can apply padding/margin without problems */
float: left; /* floatin' left, to make the menu horizontal */
background: url(../images/tabs-left.png) no-repeat left top; /* we link to the tabs image, no tiling, showing the top left part of it */
margin-right: -5px; /* this is important for the overlapping part - we are overlapping the tabs by 5 px */
z-index: 0; /* keep it on layer 0 (default) */
position: relative; /* very important as this enables the z-index to work for us and keeps the tabs where they should be */
color: #303030; /* color of the tab text */
padding:0px 7px 0px 7px; /*add left and/or right margins set to the width of the end graphics*/
}
#tabs ul li a {
text-decoration: none; /* remove the default underline off the anchor text */
color: #303030; /* color of the tab text */
display: block; /* we display this text as block so that we can apply padding/margin without problems */
float: left; /* floatin' left, to make the menu horizontal */
background: url(../images/tabs.png) no-repeat center top; /* we link to the tabs image, no tiling, showing the top middle part of it */
margin-left:0px;
}
#tabs ul li a strong {
font-weight: normal; /* remove the bold effect */
display: block; /* display the strong element as a block so we can pad it, etc. */
float: left; /* float it left as well */
background: url(../images/tabs-right.png) no-repeat right top; /* now we show the right part of the tab and we complete the "puzzle" */
padding: 6px 20px 15px 15px; /* important, as through this you define the position of the text within the tab, right padding should be the width of the overlap less than the left padding */
cursor: pointer; /* this makes the browser show the "hand" cursor when hovering over the tab */
margin-right:-7px; /* negative the width of the right end graphic */
}
#tabs ul li:hover {
position: relative; /* again, keep things relative */
z-index: 100; /* we show this tab over all other tabs in the menu, which would be on layer 0, thus overlapping occurs */
background: url(../images/tabs-left.png) no-repeat left bottom; /* now we show the bottom part of the tabs image, the "hover" instance */
}
#tabs ul li a:hover {
position: relative;
z-index: 100;
color: #000000; /* we color the hovered tab's text black */
background: url(../images/tabs.png) no-repeat center bottom; /* we link to the tabs image, no tiling, showing the top middle part of it */
}
#tabs ul li a:hover strong {
background-image: url(../images/tabs-right.png) no-repeat;
position: relative; /* keep it relative */
z-index: 100; /* show this on layer 5 as well */
background-position: right bottom; /* we show the right bottom part of the tabs image (the hover instance) */
}

#tabs ul li.tab-selected {
position: relative;
z-index: 100;
background: url(../images/tabs-left.png) no-repeat left bottom;
}

#tabs ul li.tab-selected a {
position: relative;
z-index: 100;
color: #000000; 
background: url(../images/tabs.png) no-repeat center bottom; /* we link to the tabs image, no tiling, showing the top middle part of it */
}

#tabs ul li.tab-selected a strong {
background-image: url(../images/tabs-right.png) no-repeat;
position: relative;
z-index: 100;
background-position: right bottom; 
}