html, body {
	margin: 0;
	padding: 0;
	font-family: Arial, Sans Serif;
	font-size: 12px;
	color: #666;
	line-height:15px;
	background: #000 url('../img/jhbkg.jpg') top left repeat;
}

.none {
	display: none;
}

.clear {
	clear: both;
}

#wrapper {
	background: transparent url('../img/hbar.gif') top left repeat-x;
}

#wrapper .pgwidth {
	width: 925px;
	margin-left: auto;
	margin-right: auto;
}

.pgwidth .pgleft {
	width: 400px;
	margin-left: 62px;
	float:left;
}

.pgwidth .pgright {
    float:right;
	width: 400px;
	margin-right: -10px;
	border:0px solid #cc0000;
}

#wrapper .pgright li a {
    display:block;
	width: 16px;
	margin-right: 5px;
	text-align:left;
	float:right;
}


#wrapper #hdr {
	height: 121px;
	background: transparent url('../img/johnharrelson.png') bottom right no-repeat;
}

#wrapper #hdr ul {
	float: right;
}

#wrapper #hdr ul li {
	height: 35px;
	float: left;
	margin-top: 48px;
	margin-left: 30px;
}

#wrapper #hdr ul li a {
	display: block;
	height: 35px;
	overflow: hidden;
	text-indent: -500px;
}

#wrapper #hdr ul li a#mhome {
	width: 57px;
	background: transparent url('../img/jhmenu.gif') 0 0 no-repeat;
}

#wrapper #hdr ul li a#mbio {
	width: 34px;
	background: transparent url('../img/jhmenu.gif') -108px 0 no-repeat;
}

#wrapper #hdr ul li a#mmusic {
	width: 62px;
	background: transparent url('../img/jhmenu.gif') -180px 0 no-repeat;
}

#wrapper #hdr ul li a#mmedia {
	width: 158px;
	background: transparent url('../img/jhmenu.gif') -288px 0 no-repeat;
}

#wrapper #hdr ul li a#mblog {
	width: 52px;
	background: transparent url('../img/jhmenu.gif') -504px 0 no-repeat;
}

#wrapper #page {
	background-color: #000;
}

#wrapper #page #front {
	height: 441px;
	background: transparent url('../img/johnpic.jpg') center left no-repeat;
}
#wrapper #page #front #wrap {
	position: relative;
	height: 441px;
	background: transparent url('../img/front.gif') top right no-repeat;
}

#wrapper #page #front #wrap a {
	position: absolute;
	display: block;
	top: 190px;
	right: 0;
}

#wrapper #page #front h2, #wrapper #page #front p {
	display: none;
}

#wrapper #page #inside #wrap {
	overflow: auto;
	padding-bottom: 25px;
}

#wrapper #page #inside #wrap h2 {
	display: block;
	height: 25px;
	overflow: hidden;
	text-indent: -500px;
}

#wrapper #page #inside #wrap h2#h2_bio {
	background: transparent url('../img/h2_bio.gif') top right no-repeat;
}

#wrapper #page #inside #wrap h2#h2_music {
	background: transparent url('../img/h2_music.gif') top right no-repeat;
}

#wrapper #page #inside #wrap h2#h2_media {
	background: transparent url('../img/h2_media.gif') top right no-repeat;
}

#wrapper #page #inside #wrap .side {
	width: 250px;
	height: 300px;
	float: left;
	overflow: hidden;
	text-indent: -1000px;
}

#wrapper #page #inside #wrap #side_bio {
	background: transparent url('../img/side_bio.gif') top right no-repeat;
}

#wrapper #page #inside #wrap #main {
	width: 645px;
	float: right;
	color: #ccc;
	font-size: 12px;
	line-height: 18px;
}

#wrapper #page #inside #wrap #main p {
	margin-bottom: 20px;
}

#main p a, #main p a:visited {
	color:#006699;
	text-decoration:none;
}

#main p a:hover {
	color:#006699;
	text-decoration:underline;
}

#wrapper #footer {
	padding-top: 5px;
	color: #cdbca7;
	font-size: 11px;
	line-height: 20px;
	margin-bottom: 10px;
}

#wrapper #footer a{
	color: #cdbca7;
	text-decoration: none;
}

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

/* Album Images */
a.album {
	display: block;	
	width: 315px;
	height: 276px;
	float: left;
	overflow: hidden;
	line-height: 276px;
	text-align: center;
	margin-bottom: 10px;
	text-decoration: none;
}

a.album span {
	display: none;
	text-indent: 0;
	color: #fff;
	text-decoration: none;
	background-color: #000;
	padding: 10px;
	font-size: 15px;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	box-shadow: 2px 2px 3px #333;
	-moz-box-shadow: 2px 2px 3px #333;
	-webkit-box-shadow: 2px 2px 3px #333;

}

a.album:hover {
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
}

a.album:hover span {
	display: inline;
}

a.aspace {
	margin-right: 10px;
}

a#a1 {
	background: transparent url('../img/a_streetsofheartandlust.jpg') 0 0 no-repeat;
}

a#a2 {
	background: transparent url('../img/a_mojave.jpg') 0 0 no-repeat;
}

a#a3 {
	background: transparent url('../img/a_feralangel.jpg') 0 0 no-repeat;
}

a#a4 {
	background: transparent url('../img/a_cottonmouthrevelator.jpg') 0 0 no-repeat;
}

a#a5 {
	background: transparent url('../img/a_doc.jpg') 0 0 no-repeat;
}

/* Social footer */

li a.myspace {
    width:16px; height:16px;
    background: url('../img/social/myspace.png') top left no-repeat;
}

li a.youtube {
    width:16px; height:16px;
    background: url('../img/social/youtube.png') top left no-repeat;
}

li a.facebook {
    width:16px; height:16px;
    background: url('../img/social/facebook.png') top left no-repeat;
}

li a.twitter {
    width:16px; height:16px;
    background: url('../img/social/twitter.png') top left no-repeat;
}

/* Extra body styles */

#main hr {
    width:645px; 
    height:3px;
    background-color:#674c2b;
    border:0px;
    margin-bottom: 20px;
    } 
   
    
.folder_left {
    width:300px; height:136px;
    text-align:right;
    margin-right:20px;
    background: url('../img/gallery/folder_inspiration.gif') top right no-repeat;
    float:left;
    }    
    
.folder_right {
    width:300px; height:136px;
    text-align:left;
    background: url('../img/gallery/folder_jh.gif') top left no-repeat;
    float:left;
    }   

.folder_left a, .folder_right a  {
    display:block;
    width:196px; height:136px;
    border:0px solid #cc0000;
    }    
    
.folder_left a {
    float:right;
    }    
    
/* Gallery */

.photobox {
	overflow: auto;
    }

.photobox div.pic {
	padding: 5px;
	background-color: #ccc;
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
    }    

/* File box */
#main ul.filelist {
	border: #3d88bd 0px solid;
	background: #272827;
	padding: 30px;
	overflow: auto;
	
	/*
-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
*/
	margin: 0;
}

#main ul.filelist li {
	float: left;
	width: 290px;
	height: 20px;
	overflow: hidden;
}

#main ul.filelist li a {
	display: block;
	padding-left: 25px;
	padding-right: 25px;
	line-height: 20px;
	color: #ccc;
	background: url('../img/audio.png') left center no-repeat;
	color:#ccc;
	height: 20px;
	overflow: hidden;
}

#main ul.filelist li a:hover {
	text-decoration: none;
	color: #eee;
}