/*  
Theme Name: GWM
Theme URI: http://www.gordonwrightmusic.com/
Description: Gordon Wright Music version 1.0 beta
Version: 1.0b
Author: J. Gordon Wright
Author URI: http://www.gordonwrightmusic.com/
*/


/****************************************************/
	/* Foundation */
/****************************************************/

body {
	text-align: center; /* Allows centering in IE */
	min-width: 800px; /* Fixes Netscape 6 bug */
	font-size: 62.5%; /* Sizes 1em at 10px when browser set to "medium" font size */
	font-family: Arial, Helvetica, sans-serif;
	margin:0; 
	padding:0; 
	background: #3C2713 url(images/body_bg.gif);
}

#frame {
	background-color: #EED;
	width: 76em;
	margin: 0 auto;
	border: 1px solid #963;
	border-top: none;
	border-bottom: none;
	padding: 0;
}

#container {
	margin: 0 auto;
	position: relative; /* So teaser can be absolutely positioned relative to this element */
	width: 75em;
	background: white; 
	border: 1px solid #963;
	border-top:none; border-bottom: none;
	padding:0;
	padding-top: 2.5em;
}

#content {
	width: 47em;
	float: left;
	padding: 0; /* Avoid IE box-model probs */
	text-align: left; /* Resets from IE-centering fix */
	margin: 2em 0 0 2em;
	display: inline; /* Fix IE double-margin */
}

#sidebar {
	width: 22em;
	float: right;
	display: inline; /* Fix IE double-margin */
	padding: 0; /* Avoid IE box-model probs */
	text-align: left; /* Resets from IE-centering fix */
	margin: 2em 2em 0 0;
}

#footer {
	clear: both;
	padding-top: 40px;
}

a:link {
	color: #D5968A;
	text-decoration: none;
}

a:visited {
	color: #B07A70;
	text-decoration: none;
}

a:hover, a:active {
	text-decoration: underline;
}




/* Reset Em-size */
p, li, dt, dd, h1, h2, h3, h4, h5, input, select, table {
	font-size: 1em;
}



/****************************************************/
	/* Header */
/****************************************************/

#masthead {
	width: 72em;
	height: 100px;
	position: relative; /* So h1 can be absolutely positioned */
	margin: 0 auto;
	text-align: left; /* Resets from IE-centering fix */
	background: url(/images/cotswold-1000x586.jpg) 0 36%;
	padding: 0;
}

#masthead h1 { /* GORDONWRIGHTMUSIC.COM */
	position: absolute;
	top: 100px;
	margin: 0; 
	padding: 0;
}

#masthead h1 a { /* GORDONWRIGHTMUSIC.COM */
	color: #694623;
	text-decoration: none;
	font-size: 1.5em;
	font-weight: bold;
	text-transform: uppercase;
	display: block;
	cursor: pointer;
	margin: 0;
	padding: 0;
}

div#nav {
	width: 100%;
	height: 1.5em;
}

div#nav ul {
	list-style-type: none;
	float: right;
	margin: 0;
	padding: 0;
	margin-right: 2.2em; /* Flush with masthead image */
	display: inline; /* Fixes IE margin bug */
}

div#nav ul li {
	float: left;
	margin: 0;
	padding: 0;
	padding-left: 1.5em;
}

div#nav ul li a {
	float: left;
	display: block;
	margin: 0;
	padding: 0;
	color: #694623;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	font-size: 1.5em;
}

dl#teaser {
	position: absolute;
	text-align: left;
	float: left;
	text-transform: uppercase;
	color: red;
	top: 0;
	left: 1.5em;
	margin: 0;
	padding: .2em 0 0;
}

dl#teaser dt, dl#teaser dd {
	float: left;
	margin: 0;
	padding: 0;
	font-size: 1em;
	line-height: 2.3em;
}

dl#teaser dt {
	padding-right: 3px;
}

dl#teaser a:link,
dl#teaser a:visited {
	text-decoration: none;
	color: #694623;
}

dl#teaser a:hover {color: red;}

#search {
	position: absolute;
	text-align: right;
	float: right;
	text-transform: uppercase;
	top: 0;
	right: 1.5em;
	margin: 0; 
	padding: .2em 0 0;
}

#search form {
	margin: 0;
	padding: 0;
}

#search form input {
	font-size: 1em;
	color: #963;
}


/****************************************************/
	/* Entries */
/****************************************************/

div.entry {
	margin: 0 0 2.5em;
	padding: 0; /* For IE's sake, no padding on elements with defined width */
	border: .1em solid ; /* When javascript is unsupported */
	float: left;
	width: 47em; /* Same as div#content */
}

div.entry h2 {
	font-size: 2.4em;
	color: #694623;
	margin: .5em .5em 0;
	padding: 0;
}

div.entry h2 a:link {color: #694623;}

div.entry p.entrydate, 
div.entry p.entrytags, 
div.entry div.entryfooter {
	font-size: 1.1em;
	color: #C4AA91;
	margin: 0 1.1em 1em;
	padding: 0;
}

div.entry p.entrydate {
	float: left;
	display: inline; /* Fix IE double-margin */
}

div.entry p.entrytags {
	float: right;
}

div.entryfooter {
	float: right;
	margin: 0;
	display: inline;
}

div.entryfooter p {
	margin: 0;
	padding: 0;
}

div.entrytext, div.entry dl {
	margin: 0;
	padding: 0;
	clear: both;
	width: 100%;
}

div.entrytext p {
	color: #3C2713;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.3em;
	padding: 0;
	margin: 0 2em .7em;
	text-align: left;
}

div.entry dl {
	color: #3C2713;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.2em;
	padding: 0 2em;
}

div.entry dl dt {
	font-size: 1.1em;
	font-weight: bold;
	margin: 0;
	padding: .5em 0 0;
}

div.entry dl dd {
	margin: 0;
	padding: .1em 0 .3em;
}

div.table {
	float: left;
	width: 44.6em; /* div.entry is 47em, subtract margin */
	font-family: Arial, Helvetica, sans-serif;
	margin: 3em 1.2em 1em;
	display: inline; /* Fix IE double-margin */
	padding: 0;
	border-top: .1em solid #E2C6A9;
}

div.table div.tablerow {
	border-bottom: .1em solid #E2C6A9;
	margin: 0;
	padding: 0;
	float: left;
	width: 44.6em; /* Same as div.table */
}

div.table div.tablerow:hover {
	background-color: #E2C6A9;
}

div.tablerow div.firstcol {
	float: left;
	margin: 0;
	padding: 0;
	width: 9em;
}

div.tablerow div.firstcol p {
	padding: 1.2em .5em 1.2em .1em;
	margin: 0;
	font-size: 1.3em;
	color: #963;
	font-weight: bold;
	text-align: center;
}

div.tablerow div.secondcol {
	float: left;
	width: 27.6em;
	margin: 0;
	padding: 0;
}

div.tablerow div.secondcol p,
div.tablerow div.secondcol a {
	padding: 1.2em 0;
	margin: 0;
	font-size: 1.3em;
	color: #694623;
	text-decoration: none;
	cursor: pointer;
}

div.tablerow div.secondcol a {
	font-size: 1em;
}

div.tablerow div.thirdcol {
	float: right;
	width: 8em;
	margin: 0;
	padding: 0;
}

div.tablerow div.thirdcol p {
	padding: 1.6em .3em;
	margin: 0;
	color: #694623;
	text-align: right;
}



/****************************************************/
	/* Images & Alignment */
	/* (Borrowed from Kubrick template) */
/****************************************************/

		p img {
			padding: 0;
			max-width: 100%;
			}
		
		/*	Using 'class="alignright"' on an image will (who would've
			thought?!) align the image to the right. And using 'class="centered',
			will of course center the image. This is much better than using
			align="center", being much more futureproof (and valid) */
		
		img.centered {
			display: block;
			margin-left: auto;
			margin-right: auto;
			}
		
		img.alignright {
			padding: 4px;
			margin: 0 0 2px 7px;
			display: inline;
			}
		
		img.alignleft {
			padding: 4px;
			margin: 0 7px 2px 0;
			display: inline;
			}
		
		.alignright {
			float: right;
			}
		
		.alignleft {
			float: left
			}

	/* Blogging from Flickr */
		div.entry p.photoblog {
			height: 30em;
			cursor: pointer;
			font-style: italic; 
			color: #555;
			text-align: center;
		/*  background: transparent url('{photo_src}') no-repeat center top; (Set this in Flickr) */
			margin: 0 1.8em .7em;
			border: .2em solid black;
			}

		div.entry p.photoblog + p {
			font-style: italic; 
			color: #555;
			text-align: center;
			}


/****************************************************/
/* Entry Navigation Links */
/****************************************************/


.entrynav {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 1.1em;
}

h2.topicpage {
	font-size: 2.1em;
	color: white;
	margin: 0 .1em .5em;
	padding: 0;
	text-align: center;
	background: #D5968A;
	border: 1px solid #694623;
	border-left: none;
	border-right: none;
}




/****************************************************/
				/* Comments */
/****************************************************/

.comment {
	margin: 0;
	padding: 0; /* For IE's sake, no padding on elements with defined width */
	float: left;
	width: 47em; /* Same as div#content & div.entry */
}

.comment h3 {
	float: left;
	display: inline; /* Fix IE double-margin */
	font-size: 1.2em;
	padding: .2em .6em;
	margin: .5em .2em .5em 1.1em;
	border-bottom: 1px solid #C4AA91;
	background-color: #C4AA91;
	color: #694623;
}

.comment p {
	font-size: 1.1em;
	color: #3C2713;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin: 0 2em .7em;
	padding: 0;
	text-align: justify;
}

p.commenter {
	font-size: 1.2em;
	font-weight: bold;
	border-bottom: 1px solid #C4AA91;
	padding: .2em .6em;
	margin: .5em 1.1em .5em;
	color: #694623;
	font-family: Arial, Helvetica, sans-serif;
}

p.commentdate {
	float: right;
	color: #C4AA91;
	margin: -2em 1.1em 0;
	padding: 0 .6em;
	line-height: 1.2em;
	font-family: Arial, Helvetica, sans-serif;
}

p.commentreply {
	font-style: italic;
	border-top: 1px dashed #C4AA91;
	color: #AE8B68;
	padding-top: 2px;
}

p.commentreply + p.commentreply,
p.commentdate + p.commentreply {
	border-top: none; 
	padding-top: 0;
}

* html p.commentreply {border: none}



/****************************************************/
				/* Sidebar */
/****************************************************/

.mod {
	margin: 0 0 2em;
	padding: 0;
	float: left;
	width: 100%;
	border: .1em solid #D5968A;
}

.mod h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.8em;
	border-bottom: .1em solid white;
	font-weight: bold;
	color: #D5968A;
	margin: 0;
	padding: .2em .4em .1em;
	line-height: 1em;
	text-transform: uppercase;
}

.mod dl, .mod ul {
	color: #774422;
	margin: .4em .7em;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
}

.mod dl dt, .mod ul li {
	font-size: 1.3em;
	font-weight: bold;
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.mod dl dt span.raquo {
	float: left;
	width: 1em;
	margin-top: -.1em;
}

.mod dl dd {
	font-size: 1em;
	padding: 0;
	margin: 0;
	margin-left: 1.3em;
}

.mod a {
	color: #742;
}


	/* Flickr Insert
	Images are wrapped in divs classed "flickr_badge_image" with ids "flickr_badge_imageX" where "X" is an integer specifying ordinal position:
	<div id="flickr_badge_image1" class="flickr_badge_image">
		<a href="[the photo page]">
		<img width="[xx]" height="[xx]" src="[the url]" title="[The photo's title]" alt="A photo on Flickr" />
		</a>
	</div>
	*/

	#photos {
		float: left;
		margin-bottom: 1.2em;}

	#flickr_badge_image1,
	#flickr_badge_image3,
	#flickr_badge_image5 {
		float: left; 
		clear: left;
		margin: 1em 0 0 1.2em;
		padding: 0;
		display: inline;}

	#flickr_badge_image2,
	#flickr_badge_image4,
	#flickr_badge_image6 {
		float: right; 
		margin: 1em 1.2em 0 0;
		padding: 0;
		display: inline;}
		
	.flickr_badge_image img {width: 8.6em; height: 8.6em;}

	.color1 #photos a:link img, .color1 #photos a:visited img,
	.color2 #photos a:link img, .color2 #photos a:visited img {
		border: .3em solid #E4B9B1;}
	.color1 #photos a:hover img, .color1 #photos a:active img,
	.color2 #photos a:hover img, .color2 #photos a:active img {
		border: .3em solid #D5968A;}
	.color3 #photos a:link img, .color3 #photos a:visited img,
	.color4 #photos a:link img, .color4 #photos a:visited img {
		border: .3em solid #F1DCD8;}
	.color3 #photos a:hover img, .color3 #photos a:active img,
	.color4 #photos a:hover img, .color4 #photos a:active img {
		border: .3em solid #FAF1F0;}
	

.color1, .color1 .i3 {background-color: #FAF1F0;}
.color2, .color2 .i3 {background-color: #F1DCD8;}
.color3, .color3 .i3 {background-color: #E4B9B1;}
.color4, .color4 .i3 {background-color: #D5968A;}

.color3 h2, 
.color4 h2
{color: #fff;}



/****************************************************/
	/* Drop-Shadows from 456 Berea Street */
/****************************************************/

/* Basic styling, used when JavaScript is unsupported */
.cbb {}
.cbb h2 {}

/* Normal styling */
div.cb {border: none;}
div.cb h2 {margin-top: 0;}

	/* Top corners and border */
.bt {
	height:11px;
	margin:0 0 0 11px;
	background: url(images/shadowbox.gif) no-repeat 100% 0;
}
.bt div {
	position:relative;
	left:-11px;
	width:11px;
	height:11px;
	background: url(images/shadowbox.gif) no-repeat 0 0;
	font-size:0;
	line-height:0;
}

	/* Bottom corners and border */
.bb {
	height:11px;
	margin:0 0 0 11px;
	background: url(images/shadowbox.gif) no-repeat 100% 100%;
}
.bb div {
	position:relative;
	left:-11px;
	width:11px;
	height:11px;
	background: url(images/shadowbox.gif) no-repeat 0 100%;
	font-size:0;
	line-height:0;
}

	/* Left border */
.i1 {
	padding:0 0 0 1px;
	background: url(images/shadowborder1.gif) repeat-y -2px 0;
}
	/* Right border */
.i2 {
	padding:0 3px 0 0;
	background: url(images/shadowborder1.gif) repeat-y 100% 0;
}
	/* Wrapper for the content. Use it to set the background colour and insert some padding between the borders and the content. */
.i3 {
	display:block;
	margin:0;
	padding:0;
}

div#masthead div.i3 {
	height: 78px;
	background: transparent;
}

div#masthead.cbb {
	background-color: transparent;
}

div.entry div.i3 {background: white;}

div.mod div.i3 h2 {
	padding-top: 0;
	position: relative;
	top: -4px;
}

	/* Make the content wrapper auto clearing so it will contain floats (see http://positioniseverything.net/easyclearing.html). */
.i3:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
}
.i3 {display:inline-block;}
.i3 {display:block;}


/****************************************************/
	/* Footer */
/****************************************************/

#footer p {}


/****************************************************/
	/* Homepage Template */
/****************************************************/

div#homepage {margin-top: 0;}

div#homepage #masthead {
	height: 300px;
}

div#homepage #masthead div.i3 {height:278px;}

div#homepage #masthead h1 {top: 1em;}
div#homepage #masthead h1 a {
	color: white;
	font-size: 2em;
	margin-left: .5em;
}

div#homepage #content,
div#homepage #contentright,
div#homepage div.entry {width: 34em;}

div#homepage #contentright {
	float: right;
	padding: 0; /* Avoid IE box-model probs */
	text-align: left; /* Resets from IE-centering fix */
	margin: 2em 2em 0 0;
	display: inline; /* Fix IE double-margin */
	position: relative;
}