/*  
Theme Name: Tutorial
Theme URI: http://www.wpdesigner.com
Description: This is my theme for a tutorial.
Version: 1.0
Author: Edward Hum
Author URI: http://www.djericthetutor.com/

*/

body,h1,h2,h3,h4,h5,h6,blockquote,p{
		margin:0;
		padding:0;
		}

body{
		margin:0px;
		font-family:Arial, Helvetica, Georgia, Sans-serif;
		font-size:12px;
		text-align:center;
		vertical-align:top;
		background:#231f20;
		color:#ffffff;
}
	
h1{
		font-family:Georgia, Sans-serif;
		font-size:24px;
		padding: 0 0 10px 0;
		}	

a:link, a:visited{
		text-decoration: none;
		color: #6ea5cc;
}

a:hover{
		text-decoration:none;
		color: #597e9a;
}

p{
		padding:10px 0 0 0;
		}

#wrapper{
		margin: 0 auto 0 auto;
		width: 800px;
		text-align: left;
		height: 340px;
		background: url(http://www.djericthetutor.com/blog/images/background1.jpg)

}

#header{
		float:left;
		width:800px;
		height: 340px;
		}
		
#container{
		float: left;
		width: 591px;
		
		margin: 0 0 0 0px;
		
		background: #231f20;
		}
		
.sidebar{
		float:left;
		width:200px;
		background:#231f20;
		margin:0 0 0 0px;
		border-left: 0;
		display:inline;
		color:#6ea5cc;font-family: Georgia, Sans-serif;
		font: 10px;
color:#ffffff;
				}
		
.sidebar ul{
		list-style-type: none;
		margin: 0;
		padding: 0px 10px 0 10px;

		
		}
		
.sidebar ul li{
		padding: 20px 0 10px 0;
		}
		
.sidebar ul li h3{
		font-family: Georgia, Sans-serif;
		font: 10px;
		}
		
.sidebar ul ul li{
		padding:0;
		line-height:24px;
		}
		
		

.post{
		padding: 10px 10px 10px 10px;
		border-bottom: 1px solid #6ea5cc;
		}
		
.post h2{
		font-family:Georgia, Sans-serif;
		font-size:18px;
		}
		
.entry {
		line-height:18px;
		}
		
p.date{
		text-align:right;
		}
		
p.postmetadata{
		margin:10px 0 0 0;
		text-align:right;
		}

.navigation{
		padding:10px 0 0 10px;
		font-size:14px;
		font-weight: bold;
		line-height:18px;
		}

#footer{
		clear:both;
		float:left;
		width:800px;
		padding: 20px 0 0 0;
		text-align:center;
		}
		
#footer p{
		line-height:24px;
		}
		
.comments-template{
	margin: 10px 0 0;
	border-top: 1px solid #ccc;
	padding: 10px 0 0;
}
 
.comments-template ol{
	margin: 0;
	padding: 0 0 15px;
	list-style: none;
}
 
.comments-template ol li{
	margin: 10px 0 0;
	line-height: 18px;
	padding: 0 0 10px;
	border-bottom: 1px solid #ccc;
}
 
.comments-template h2, .comments-template h3{
	font-family: Georgia, Sans-serif;
	font-size: 16px;
}
 
.commentmetadata{
	font-size: 12px;
}
 
.comments-template p.nocomments{
	padding: 0;
}
 
.comments-template textarea{
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
}


#navigation ul {
	width: 523px; 
	height: 41px; 
	position: absolute;
	top:290px;
	
	background: url(images/menu1.gif) no-repeat 0 0;
	list-style: none; 
	padding: 0; margin-left:175px;
}
#navigation li {
	display: inline;
}

#navigation li.blog a:link, #navigation li.blog a:visited {
	width: 105px;
	}

#navigation li.contact a:link, #navigation li.contact a:visited {
	width: 135px;
	}
	
#navigation li.photos a:link, #navigation li.photos a:visited {
	width: 125px;
	}	

#navigation li.facebook a:link, #navigation li.facebook a:visited {
	width: 158px;
	}	

#navigation li a:link, #navigation li a:visited {
	border: none;
	;
	 /*
 width of the button in active state 
*/
	height: 41px; /*
 height of the button in active state 
*/
	display: block; 
	position: absolute; 
	top: 0; 
	text-indent: -7000px; /*
 Removes li text from the screen 
*/
	outline: none;
}
#navigation li.blog a:link, #navigation li.blog a:visited { 
	left: 0;
}
#navigation li.contact a:link, #navigation li.contact a:visited { 
	left: 105px  /*
 how many px left of the first button i.e blue 
*/
}
#navigation li.photos a:link, #navigation li.photos a:visited { 
	left: 240px  /*
 how many px left of the first button i.e blue 
*/
}
#navigation li.facebook a:link, #navigation li.facebook a:visited { 
	left: 365px  /*
 how many px left of the first button i.e blue */

}
 
#navigation li.blog a:hover {
	background: url(images/menu1.gif) no-repeat 0 -41px; /*
 moves image up 30px showing the rollover states 
*/ 
}
#navigation li.contact a:hover {
	background: url(images/menu1.gif) no-repeat -105px -41px; /*
 moves image up 30px and right 80px showing the rollover states 
*/
}
#navigation li.photos a:hover {
	background: url(images/menu1.gif) no-repeat -240px -41px;
}
#navigation li.facebook a:hover {
	background: url(images/menu1.gif) no-repeat -365px -41px;
}