/*= Core Structure 
======================================================== */
*{
	margin:0;
	padding:0;
}

html, body {
	margin:15px 0 0 0;
	padding:0;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:90%;
	background-color:#333333;
}

#wrapper {
	margin:0 auto;
	padding:0;
	width:900px;
	text-align:left;
    position: relative;
}

#border{
	position:relative;
	padding:0 4px;
	width:892px;
	background:url(../Images/Core/BackgroundBorder2.gif) 0 0 repeat-y;
}
	
#topborder{
	width:100%;
	height:8px;
	background: url(../Images/Core/TopBorder.gif) 0 0 repeat-x;
}

/* Left and right border corners*/
.lftCrnr{
	position:absolute;
	top:0;
	left:0;
}
.rghtCrnr{
	position:absolute;
	top:0;
	right:0;
}
	
#floatwrapper{
	margin-top:25px;
	background:url(../Images/Core/Guitar.jpg) bottom left no-repeat;
}

#bottomBorder{
	width:100%;
	height:6px;
	background:url(../Images/Core/bottomBorder.gif) repeat-x 0 0;
}

/* =Header Elements 
===================================================== */
#Logo{
	margin:10px 0 10px 10px;
}
#Header{
	height:136px;
	width:100%;
	background:url(../Images/Core/HeaderBackgr.gif) 0 0 repeat-x;
}
#Header img{
	margin-top:2px;
}

#Header .middle{
	margin-left:110px;
}

#bookmikeTop{width:200px; height:60px; position: absolute; top:10px; right:10px;}
#bookmikeTop #badgelink{width:60px; height:60px; float:left; margin-right: 10px;}
#bookmikeTop p{margin-top: 10px;}

/* = Left Column
   = Navigation 
===============================================*/
#LeftColumn{
	float:left;
	width:190px;
	margin-bottom:130px;
}

#nav{
	width:170px;
	font-size:85%;
	margin:0 0 10px 7px; 
	list-style:none;
}

#nav li {
	width:170px;
	margin-bottom:0.5em;
}

#nav .home{
	display:block;
	width:169px;
	height:26px;
	background:url(../Images/Core/Home.gif) no-repeat left top;
}
#nav .home:hover{
	background-position:right top;
}
#nav .biog{
	display:block;
	width:170px;
	height:26px;
	background:url(../Images/Core/biography.gif) no-repeat left top;
}
#nav .biog:hover{
	background-position:right top;
}
#nav .albums{
	display:block;
	width:168px;
	height:26px;
	background:url(../Images/Core/albums.gif) no-repeat left top;
	margin-bottom:3em;
}
#nav .intromike{
	display:block;
	width:170px;
	height:26px;
	background:url(../Images/Core/introducingmike.gif) no-repeat left top;
}
#nav .intromike:hover{
	background-position:right top;
}

#nav .contacts{
	display:block;
	width:170px;
	height:26px;
	background:url(../Images/Core/contacts.gif) no-repeat left top;
}
#nav .contacts:hover{
	background-position:right top;
}

#nav .groov8{
    display:block;
    width:170px;
    height:26px;
    background:url(../Images/Core/groov8.gif) no-repeat left top;
}
#nav .groov8:hover{
    background-position:right top;
}

#nav .wedding{
    display:block;
    width:170px;
    height:26px;
    background:url(../Images/Core/wedding_link.gif) no-repeat left top;
}
#nav .wedding:hover{
    background-position:right top;
}

#nav .diary{
    display:block;
    width:170px;
    height:26px;
    background:url(../Images/Core/diary.gif) no-repeat left top;
}
#nav .diary:hover{
    background-position:right top;
}

/* --- Sub nav links */
#nav .albums #albumList{
	list-style:none;
	padding-top:25px;
	margin-left:5px;
}
#nav .albums #albumList li a{
	display:block;
	margin-bottom:3px;
	text-decoration:none;
	color:#000;
}
#nav .albums #albumList li a:hover{
	text-decoration:underline;
	color:#990000;
}

#nav .albums{margin-bottom:35px;}

/* = Main Content 
========================================================== */
#RightColumn{
	float:right;
	width:650px;
	margin-bottom:80px;
	border-left:1px solid #B0AFAF;
}
#ContentContainer{
	width:620px;
	margin:0 10px 20px 10px;
}

/* = Pages 
============================================================ */
/* = Album ------------------------------------- */
.CDcover{
	border:1px solid #000;
	margin-bottom:15px;
}

#TrackList{
	float:right;
	width:250px;
	padding:0 0 5px 5px;
	margin-left:10px;
	margin-bottom:10px;
	border-left:1px solid #CCCCCC;
}

#TrackList ol{
	margin-left:35px;
	margin-bottom:15px;
}

/* = Contacts ---------------------------------- */
#Form input, #Form textarea, #Form select{
	background-color:#FFFFF5;
	border:1px solid #999999;
	height:20px;
}
#Form textarea{
	height:200px;
	width:330px;
}
#Form select{
	width:17em;
}

#Form input:focus, #Form textarea:focus{
	background-color:#F7E1E1;
}

#Form .submit{
	background-color:#882121;
	border:1px solid #000;
	color:#FFF;
	font-weight:bold;
	width:90px;
	height:25px;
	vertical-align:middle;
}

#Form .submit:hover, #Form .submit:focus{
	background-color:#FFFFF5;
	border:1px solid #000;
	color:#000;
	cursor:hand;
}

#ErrorMessage{
	font-weight:bold;
	color:#CC0000;
}
#ErrorMessage ul{
	margin-left:25px;
	margin-bottom:10px;
	list-style:square;
}
	
/* = Footer ------------------------ */
#FooterLinks{
	color:#fff;
	font-weight:bold;
	margin-top:5px;
	margin-bottom:3px;
	font-size:85%;
}
#FooterLinks a{
	color:#fff;
	font-weight:bold;
	text-decoration:none;
}
#FooterLinks a:hover{
	text-decoration:underline;
}

#CopyRight{
	color:#fff;
	font-size:85%;
}

/* Site map ----------------------------- */
#sitemap{
	list-style:square;
	margin-left:30px;
}
#sitemap li{
	margin-bottom:10px;
}

.contentbox{padding:5px; margin:10px 0; background-color:#DFDFDF; border:1px solid #999999; clear:both;}


/* = Page elements 
================================================ */

h1, h2{
	font-size:140%;
	margin-bottom:0.6em;
	color:#990000;
}

h2{font-size:120%; color:#000;}

p{margin-bottom:1em;}
#ContentContainer ul{list-style-type:square; margin:10px 0 20px 25px;}
#ContentContainer ul li{margin:5px 0;}

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

a img{border:none;}

.Left{float:left;}
.imgBrd{border: 1px solid #990000;}
.imgLeft{float:left; margin: 0 10px 10px 0;}
.imgRight{float:right; margin: 0 0 10px 10px;}
.Right{float:right;}

.hide{
	position:absolute;
	left:-9000px;
}
.clear-with-space{clear: both; margin:10px 0 0 0;}
.errorList{
	list-style:square;
	color:#B00102;
	font-weight:bold;
	margin-bottom:10px;
}
/* CLEARING FLOATS -------------------------------------------------------------------------------------------------------------- */
/* The following selectors keep floats from overflowing out of their parent elements. This is done by generating a character within the parent but after the float, so that the parent must expand to hold the generated character, appearing to contain the floats in the process. */
.clearfix:after {
	content: "."; /* This dot is the actual content that will be appended to the end any div this class is applied to. */
	clear: both; /* Makes the generated content appear after the floats. */
	height: 0; /* Sets its height to zero so it doesn't show. */
	visibility: hidden; /* Sets its visibility to hidden so it doesn't show. */
	display: block; /* Overwrites the default inline display of the generated content. Needed because only blocks can have clear set on them. */
}
 
.clearfix {
	display: inline-block; /* Makes it work in MacIE. MacIE does not support generated content but will automatically contain a float if the container has this display property. */
	}

/* The first selector below makes it work in WinIE. WinIE does not support generated content, but will automatically contain a float if the container has a width or height assigned. "height: 1%" can be used because WinIE will not honor this height and will expand the div to whatever height necessary to show the content. */
/* The second selector below overwrites the inline-block display used to help MacIE. */
/* Hides from MacIE \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
	}
/* End hide from MacIE */

.clear
{
     height:0;
     line-height:0;
     font-size:0;
     clear:both;
}