@charset "utf-8";
body {
	font-family:Geneva, Arial, Helvetica, sans-serif;
	background: url(images/body_bg.gif) top center no-repeat;
	text-align:center;
	margin: 0;
	padding: 0;
	color:#333333;
}

#header {
width: 800px;
height:100px;
margin: 0 auto;
}

.logo {
float:left;
margin: 5px 0 0 5px;
}

.navi {
display: inline;
margin: 75px 0 0 0;
float:right;
bottom: 15px;
}

.navi li {
display: inline;
margin: 0 3px;
padding: 0;
}

.navi a {
color: #106640;
font-size:.9em;
font-weight:bold;
text-decoration:none;
}

ul.navi a:hover {
text-decoration:underline;
color:#fcb11f;}

#contentwrap {
background: url(images/contentwrap_bg.png) top center no-repeat;
width: 808px;
margin:0 auto;
height:439px;
}

#contenthead {
background: url(images/contenthead_bg.png) top center no-repeat;
width: 800px;
height:51px;
margin:0 auto;
text-align:center;
}

#contentfoot {
background: url(images/contentfoot_bg.png) top center no-repeat;
width: 800px;
height:43px;
margin:0 auto;
text-align:left;
}


img.slide {border:0}


#slidenavi {
list-style-type:none;
margin: 0;
padding: 0;
}

#slidenavi li {
float:left;
display: inline;
margin: 15px 10px 0;
width:50px;
}

#slidenavi li a {
display:block;
color:#fff;
text-indent:-9000px;
height:20px;
outline:none;
padding:0;
}

#navMedical a{ background:url(images/nav_medical.gif) top center no-repeat}
#navProfessional a{ background:url(images/nav_professional.gif) top center no-repeat}
#navCommercial a{ background:url(images/nav_commercial.gif) top center no-repeat}
#navRestaurants a{ background:url(images/nav_restaurants.gif) top center no-repeat}
#navResidential a{ background:url(images/nav_residential.gif) top center no-repeat}
#navStructural a{ background:url(images/nav_structural.gif) top center no-repeat}
#navPlanning a{ background:url(images/nav_planning.gif) top center no-repeat}

#navMedical a:hover, #navProfessional a:hover, #navCommercial a:hover, #navRestaurants a:hover, #navResidential a:hover, #navStructural a:hover, #navPlanning a:hover { background-position: center -20px; }

/* Step 10 - Clearing the float */
#menu {display:block; width:430px; height:130px;}

/* Step 3 - get rid of the bullets and margin */
#menu ul {margin:0; padding:0; list-style-type:none;}

/* Step 4 and 7 - make the list horizontal and giving a 1px gap */
#menu li {float:left; margin-right:1px;}

/* Step 5 - Adding the initial images */

#menu li.list1 {background:transparent url(../images/gainsborough_s.jpg);}
#menu li.list2 {background:transparent url(../images/matisse_s.jpg);}
#menu li.list3 {background:transparent url(../images/monet_s.jpg);}
#menu li.list4 {background:transparent url(../images/renoir_s.jpg);}
#menu li.list5 {background:transparent url(../images/picasso_s.jpg);} 

/* Step 6 - General link styling */

#menu a {display:block; width:83px; height:0; padding-top:128px; color:#000; overflow:hidden;}

/* hack for older versions of IE with incorrect box model */

* html #menu a:link, * html #menu a:visited {height:128px; he\ight:0;}

/* Step 8 - Adding the background images to the link tags */

#menu a#item1 {background:transparent url(../images/gainsborough_c.jpg) -130px -90px no-repeat;}
#menu a#item2 {background:transparent url(../images/matisse_c.jpg) -130px -90px no-repeat;}
#menu a#item3 {background:transparent url(../images/monet_c.jpg) -130px -90px no-repeat;}
#menu a#item4 {background:transparent url(../images/renoir_c.jpg) -130px -90px no-repeat;}
#menu a#item5 {background:transparent url(../images/picasso_c.jpg) -130px -90px no-repeat;}

/* Step 9 - Adding the :hover style */

#menu a#item1:hover {background-position:0 0; z-index:50;}
#menu a#item2:hover {background-position:0 0; z-index:50;}
#menu a#item3:hover {background-position:0 0; z-index:50;}
#menu a#item4:hover {background-position:0 0; z-index:50;}
#menu a#item5:hover {background-position:0 0; z-index:50;}

* html #menu a:hover {height:128px; he\ight:0;}