/*
Rough comp for "Mark in Japan" site
HFWD Chapter 2
http://headfirslabs.com/books/hfwd/ch02/stylesheets/screen.css
*/

body {
	margin: 0;
	background: #112b63;
	font-family: Arial, serif;
	line-height: 1.0 em;
}

h1, p, ul {
	margin: 0;
	padding: 5px;
}

ul {
	padding: 5px;
	list-style-type: none;
}

ul li {
	margin: 0 0 10px 0;
	padding: 0;
}

h4 {
   margin: 0 0 10px 0;
   padding: 0 0 5px 0;
   font-weight:bold;
   border-bottom: 1px solid #ccc
   }

#wrap {
	margin: 0 auto;
	padding: 10px 20px 20px 20px;
	width: 880px;
	background: #0b204c;
	border-top: 10px solid #091a3f;
}

#header {
	background: url(../MODlogo.jpg) no repeat;
	height: 150px;
}

#nav {
	float: left;
	width: 880px;
	height: 75px;
	font-size: 1.1em;
}

#nav li {
	display: inline;
}
#nav li a {
	float: left;
	width: 113px;
	height: 45px;
	padding: 15px 0 0 10px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #777;
}

#nav li a.active, #nav li a:hover{
	background: #a6560f;
    border-top: 5px;
	color: #eee;
}
#subnav {
	margin: 0;
	padding: 0;
	background: #d2dbc0;
	height: 46px;
}

#subnav ul li {
	float: left;
	margin: 0;
	padding: 15px 10px 15px 10px;
	font-size: .7em;
}

#subnav li.option {
	text-transform: uppercase;
	background: #b2bf99 url('../images/option_li_bg.gif') no-repeat right;
	padding: 15px 25px 15px 10px;
	color: #7f8e62;
}

#subnav li a {
	padding: 10px 0 10px 35px;
	color: #333;
	text-decoration: none;
}

/*
Each of the subnav items is classes so that it can recieve
matching icon as it's background.
*/
#subnav li a.webdesign {
	background: url('../images/webdesign_icon.png') no-repeat left center;
}

#subnav li a.animation {
	background: url('../images/animation_icon.png') no-repeat left center;
}

#subnav li a.game {
	background: url('../images/game_icon.png') no-repeat left center;
}

#subnav li a.writing {
	background: url('../images/writing_icon.png') no-repeat left center;
}

.page #subnav li a {
	padding: 15px;
}

.page #subnav li a.active {
	background: #b2bf99;
}
/* Each column is floated left right gutter on 20px */
#content-left, #content-center {
	float: left;
	width: 280px;
	margin: 20px 20px 20px 0;
	background: #fff;
    font-family: @Arial Unicode MS;font-size: 10;font-weight: 200;word-spacing: -1px;line-height: 8px;border-left: 0px inset;

}
/* Same with the far right column, just a different color */
#sidebar {
	float: right;
	width: 280px;
	margin: 20px 0 20px 0;
	background: #ccc;
}

#pic {
     word-spacing: 15px;
     line-height: 1.0 em;
     
      }
      
#link {
      word-spacing:-2px;
      line-height: 1.0 em;
       }

/* 
When all the columns above the footer are being floated, make
sure you push the footer <div> below the columns using "clear: both"
*/
#footer {
	clear: both;
	background: #ead9b8;
    margin-top: 20px;
}