/* CSS Document */

* {margin:0; padding:0;}

/*helpers*/

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/*primary divisions*/


body {
background:rgb(70,71,105);
margin-top:40px; margin-bottom:40px;
text-align: center;

}
#container {
margin:0 auto; 
text-align:left;
width: 700px;
background:rgb(156,133,88);
border:3px solid white;
} 

#header{
height:195px;
background: url(images/banner.jpg) no-repeat top left;
border-bottom:1px solid white;
}

#footer {
color:rgb(156,133,88);
margin-top:15px;
font:normal 11px/14px lucida grande, helvetica, sans-serif;
}


#footer a {

color:rgb(156,133,88);
text-decoration:none;
}

#footer a:hover {
text-decoration:underline;
}


a:link, a:visited, a:hover, a:active {
color: black;
}

h1 {
display:block;
text-indent:-9999px;
height:195px;
line-height:195px;
background:url(images/logo.gif) no-repeat bottom left;
}

#colA h2 {
display:block;
text-indent:-9999px;
height:30px;
margin-top:80px;
margin-left:60px;
margin-bottom:10px;
}


#colA h3 {
font:bold 11px/14px lucida grande, helvetica, sans-serif;
margin-bottom:10px; margin-top:20px; margin-left:60px;
}

.about {
background:url(images/title_about.gif) no-repeat bottom left;
}

.board {
background:url(images/title_board.gif) no-repeat bottom left;
}

.work {
background:url(images/title_work.gif) no-repeat bottom left;
}

.contact {
background:url(images/title_contact.gif) no-repeat bottom left;
}

#colA {
float:left;
width:464px;
margin-bottom:50px;
padding-bottom:50px;
}

#colA p {
font:normal 11px/14px lucida grande, helvetica, sans-serif;
margin-bottom:13px;
margin-left:60px;
margin-right:40px;
}

#colA h3 {
font-size:16px;
line-height:1.3em;
}

#colA ul {
font:normal 11px/14px lucida grande, helvetica, sans-serif;
margin-bottom:13px;
margin-left:80px;
margin-right:60px;
}

#colA li {
margin-bottom:10px;
}


#colA_home {
float:left;
width:463px; height:233px;
background:url(images/photo.jpg) no-repeat top left;
border-right:1px solid white;
border-bottom:1px solid white;
}

#colB {
float:right;
width:236px; height:233px;
background: url(images/tag.gif) no-repeat top left;
margin-bottom:50px;
}

#colB p{
font:normal 11px/14px lucida grande, helvetica, sans-serif;
color:#0000000;
margin-top:150px;
margin-left:20px; margin-right:20px;
}

/* navigation */

ul#nav {
position:relative;
width:407px;
height:46px;
line-height:46px;
float:left;
margin:0; padding: 0; 
list-style: none;
}

#nav li {
float:left;
}

#about {
	width:89px;
	height: 46px;
	line-height: 46px;
}
#about a {
	display: block;
	text-indent: -9999px;
	width:89px;
	height: 46px;
	line-height: 46px;
	background: url(images/about.gif) no-repeat 0 0;
}

#about a:hover {
	background-position: 0 -46px;
}
	
#board {
	width:141px;
	height: 46px;
	line-height: 46px;
}
#board a {
	display: block;
	text-indent: -9999px;
	width:141px;
	height: 46px;
	line-height: 46px;
	background: url(images/board.gif) no-repeat 0 0;
}
#board a:hover {
	background-position: 0 -46px;
	}
	
#work {
	width:78px;
	height: 46px;
	line-height: 46px;
}
#work a {
	display: block;
	text-indent: -9999px;
	width:78px;
	height: 46px;
	line-height: 46px;
	background: url(images/work.gif) no-repeat 0 0;
}
#work a:hover {
	background-position: 0 -46px;
	}
	
#contact {
	width:99px;
	height: 46px;
	line-height: 46px;
}
#contact a {
	display: block;
	text-indent: -9999px;
	width:99px;
	height: 46px;
	line-height: 46px;
	background: url(images/contact.gif) no-repeat 0 0;
}
#contact a:hover {
	background-position: 0 -46px;
	}