/*  
Theme Name: Dylan
Theme URI: http://dylan.philthompson.co.uk/
Description: Simple, elegant, easy to use
Version: 1.11
Tags: white, two-columns, fixed-width, threaded-comments, sticky-post
Author: Phil Thompson
Author URI: http://philthompson.co.uk/

	WordPress Theme 'Dylan'
	
	Global CSS
	
	pages: all
	media: all
	
	@created: Phil Thompson hello@philthompson.co.uk November 2007
	@edited: Phil Thompson 06/01/2009
	
	# 
	# 
	# CUSTOMISING DYLAN
	# To customise the colours used in this theme
	# edit the values in customise.css
	# 
	#
	#
	
	Table of contents
	
	HTML Tags/Elements
		body
		a
			a img
		h1-h6
		p
		ul
		ol
		dl
	
	Common classes
		.hide (accessibility)
		navigation
			home navigation (one column)
		highlight
		pullquote
		intro
		img float
		WordPress required classes
	
	Layout
		Container 
		Header
			Branding - logo/site name + description
			Global menu - links to pages
		Content container
			Primary content
				body.post style
				.date
				.postmetadata
				opening p style
				sticky post style (homepage)
			Secondary content
				Search
				Lists
				Subscribe links
				Columns	
					Widgets
		Footer
			copyright
			footer menu
			address (vcard)
			

*/


/*
	HTML Tags/Elements
*/

/* Body */

body{
	background: #EEE;
	color: #151515;
	font: 87.5%/170% Georgia, Times, "Times New Roman", serif;
	margin: 0 auto;
	width: 960px;
}

/* 
Links 
*/

a{
	color: #00F;
	text-decoration: underline;
}
	/* Linked images */
	a img{
		border: none;
	}
/* Visited */
a:visited{
	color: #800080;
}
/* Hover: mouseover */
a:hover{
	text-decoration: none;
}
/* Active: currently being clicked on */
a:active{
	color: #33F;
}

/* 
Headings:
h1-h6
 */
h1, span#logo, h2, h3, h4, h5, h6{
	color: #444;
	font: bold 130%/150% Georgia, Times, "Times New Roman", serif;
	padding: .5em 10px .25em;
}

h1, h2.h1{
	padding: 10px 10px 20px;
}

h1{
	color: #151515;
	font-size: 200%;
}

	h1 a,
	h1 a:visited{
		color: #2F2F2F;
		text-decoration: none;
	}


/* Paragraphs */
p{
	padding: 0 10px 1em;
}

/* Lists */

ul, ol, dl{
	padding: .5em 10px 1em;
}

	li{
		margin: 0 0 0 20px;
	}
	

/* Definition lists */	
dt{
	font-weight: bold;
}

dd{
	margin-left: 20px;
}

/* PRE FORMATTED */
pre{
	overflow: auto;
	padding: 0 10px 1em;
}

/* HORIZONTAL RULE */

hr{
	background: #DFDFDF;
	border: none;
	clear: both;
	height: 1px;
	margin: .5em 10px;
}

/*
	COMMON CLASSES
*/

/*
####################################### 
Hide items:
Accessibility/Screen reader friendly 
way of hiding items off screen
####################################### */

.hide{
	left: -9999px;
	position: absolute;
	top: -9999px;
}

/*
####################################### 
Navigation:
Previous and Next article links
#######################################
 */
ul.navigation{
	border: 1px solid #EEE;
	border-width: 1px 0;
	clear: both;
	float: left;
	margin: 2em auto;
	padding: 1em 10px;
	text-align: center;
	width: 940px;
}

ul.navigation li{
	float: left;
	font-size: 120%;
	list-style: none;
	margin: 0;
	padding: 0 10px;
	text-align: center;
	width: 450px;
}

	ul.navigation li.next{
		border-left: 1px solid #EEE;
		width: 449px;
		
	}
	
	ul.navigation li span{
		display: block;

	}
	
	ul.navigation li span.wording{
		font-size: 55%;
		margin: 0 0 -1em;
		text-transform: uppercase;
	}
	
	
	/* Home page navigation */
	body.home div#primarycontent ul.navigation,
	body.category div#primarycontent ul.navigation,
	body.page div#primarycontent ul.navigation{
		margin-left: 10px;
		width: 599px;
	}
	
	body.home div#primarycontent ul.navigation li,
	body.category div#primarycontent ul.navigation li,
	body.page div#primarycontent ul.navigation li{
		width: 279px;
	}
	
	body.home div#primarycontent ul.navigation li.next,
	body.category div#primarycontent ul.navigation li.next,
	body.page div#primarycontent ul.navigation li.next{
		width: 278px;
	}

/* Highlight */
.highlight{
	background: #FFB;
	color: #000;
}

p.highlight{
	margin: 5px 10px;
	padding: 5px;
}

span.highlight{
	padding: 0 2px;
}

/* Pullquote */
span.pullquote{
	color: #666;
	float: right;
	font-size: 170%;
	font-style: italic;
	margin: 0 0 10px 10px;
	width: 45%;
}



/* Images */

img.left{
	float: left;
	margin: 5px 10px 10px 0;
}

img.right{
	float: right;
	margin: 5px 0 10px 10px;
}

img.centre,
img.center{
	display: block;
	margin: 10px auto;
}

/*
WordPress required classes
WP needs these classes
*/
.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #EEE;
   text-align: center;
   margin: 10px;
}

.wp-caption img {
   float: none !important;
   margin: 0 !important;
   padding: 5px 5px 0;
   border: none;
}

.wp-caption p.wp-caption-text {
   padding: 0 5px;
   margin: 0;
}

/* WordPress class tags */
.categories{}
.cat-item{}
.current-cat{}
.current-cat-parent{}
.pagenav{}
.page_item{}
.current_page_item{}
.current_page_parent{}
.widget{}
.widget_text{}
.blogroll{}
.linkcat{}

/* End WordPress required classes */

/* Vcard */
div.vcard{
	display: block;
	margin: 10px;
}

/* Codelist - code examples */

ol.codelist{
	border: 1px solid #EEE;
	border-width: 1px 0;
	margin: 10px;
	padding: 10px 10px 5px;
}

	ol.codelist li{
		margin-left: 10px;
	}
	
		ol.codelist li:hover{
			background: #EEE;
		}

		ol.codelist li code{
			font-family: monospace;
			font-size: 130%;
		}
	
	/* code list: link to actual code file */
	ol.codelist li.sourcelink{
		list-style: none;
		margin: 0;
		padding: 5px 0;
		text-align: right;
	}

		ol.codelist li.sourcelink:hover{
			background: transparent;
		}


/* warning */
p.warning{
	background: #FDD;
	margin: 10px;
	padding: 5px;
}


/* Acrhives list */
ul#archives-list{
	float: left;
}

ul#archives-list li{
	border: 1px solid #EEE;
	float: left;
	height: 100px;
	list-style: none;
	margin: 0 10px 10px 0;
	padding: 10px;
	width: 91px;
}


/*
	Layout
*/

/*
#######################################
Container
#######################################
*/

div#container{
	background: #EEE;
	float: left;
	margin: 10px auto 20px;
	width: 960px;
}

/*
#######################################
Header 
#######################################
*/

div#header{
	background: #EEE;
	float: left;
	width: 960px;
}

	/*
	#######################################
	Branding
	#######################################
	 */
	
	div#branding{
		float: left;
		width: 640px;
	}	
	
		/* 
		Logo
		*/
		h1#logo, span#logo{
			color: #151515;
			font-size: 200%;
			margin: 0;
			padding: 0;
		}
			/* Logo link */
			h1#logo a, span#logo a{
				color: #151515;
				text-decoration: none;
			}
		
		/* 
		#######################################
		Description: 
		Site description
		#######################################
		*/
		p#description{
			margin: 0;
			padding: 0 0 10px;
		}
	
	/* 
	#######################################
	Global menu: 
	Pages list
	#######################################
	*/
	div#header div.menu ul,
	div#header div#menu ul{
		clear: none;
		float: right;
		margin: 0 10px;
		padding: 3em 0 10px;
		text-align: left;
		width: 300px;
	}
	
		div#header div.menu ul li,
		div#header div#menu ul li{
			display: inline;
			list-style: none;
			margin: 0 10px 0 0;
		}
		
		div#header div.menu ul li ul,
		div#header div#menu ul li ul{
			display: inline;
			margin: 0;
			padding: 0;
		}
		
			div#header div.menu ul li.current_page_item a,
			div#header div#menu ul li.current_page_item a{
				text-decoration: none;
			}

/* Content container */

div#content_container{
	background: #FFF;
	clear: both;
	float: left;
	width: 960px;
}


		/* 
		#######################################
		Primary content: 
		Where blog posts, search results, etc go
		#######################################
		*/
		div#primarycontent{
			border-right: 1px solid #EEE;
			float: left;
			margin: 10px 0;
			min-height: 500px;
			padding: 0 0 10px;
			width: 639px;
		}
		
			/* Style for main content area when looking at a post */
			body.post div#primarycontent{
				border: none;
				width: 960px;
			}


			a.more-link{
				display:block;
			}
			
			/* Date */
			p.date{
				color: #555;
				font-size: 90%;
				margin: 0 0 -1em;
			}
			
			/* Post metadata - when it was written, by whom etc */
			p.postmetadata{
				border-top: 1px solid #EEE;
				clear: both; color: #999;
				font-size: 80%;
				margin: 0 10px 10px;
				padding: 5px 0 10px;
			}
			
			/* A post introductory paragraph */
			body.post div.entry p.intro,
			body.post div.entry p:first-child,
			body.page div.entry p:first-child{
				border: 1px solid #EEE;
				border-width: 1px 0;
				color: #666;
				font: italic 150%/130% Georgia;
				margin: 0px 10px 20px;
				padding: 10px 0;
			}
			
				body.post div.entry p.intro:after,
				body.post div.entry p:first-child:after,
				body.page div.entry p:first-child:after{
					clear: both;
					content: "."; 
					display: block; 
					height: 0;  
					visibility: hidden;
				}
				/* Image inside the post introductory paragraph */
				div.entry img{
					float: left;
					margin: 10px 10px 10px 0;
				}
				
				body.post div.entry p.intro img,
				body.post div.entry p:first-child img,
				body.page div.entry p:first-child img{
					float: left;
					margin: 5px 20px 10px 0;
				}

				/* Homepage 'sticky' post */
				body.home div.sticky{
					background: #EEE;
					font-size: 150%;
					margin: 0 10px 30px;
				}

				body.home div.sticky p.postmetadata{
					font-size: 60%;
				}

				body.home div.sticky div.entry p:first-child{
					line-height: 150%;
				}

				div.post h2 a{
					color: #444; 
					text-decoration: none;
				}
				
				h2.h1{
					padding-bottom: .25em;
				}
				
				div.entry ul, div.entry ol,
				div.entry p.highlight{
					overflow: auto; /* shrink the list to sit beside floats in compliant browsers */
				}

		
		/* 
		#######################################
		Secondary content: 
		Where blogroll, search box, etc goes 
		#######################################
		*/
		div#secondarycontent{
			background: #FFF;
			float: left;
			margin: 10px 0;
			padding: 0 0 10px;
			width: 320px;
		}
		
			/* Search */
			form#searchform{
				background: #FFF;
				border-bottom: 1px solid #EEE;
				margin: 0 10px 10px;
				padding: 0 0 10px;
			}
			
				form#searchform fieldset{
					border: none;
					padding: 0;
				}
				
				/* Seach box text input */
				form#searchform input{
					width: 200px;
				}
			
		/* list items */	
		 div#secondarycontent ul li{
		 	list-style: none;
			margin-left: 0;
		 }
		 
		 
		 /* Subscribe links */
		 div#subscribe ul{
		 	padding-top: 0;
		 }

			div#subscribe ul li a{
				background: url("images/rss_feed.gif") no-repeat left center;
				font-size: 130%;
				padding-left: 22px;
			}
		 
		 /* Columns e.g. categoies, archives, blog roll */
		 div.column{
		 	float: left;
			width: 160px;
		 }

		/* Widgets - dynamic sidebars */
		div.widget{}
		
		div.widget form#searchform input{
			width: 130px;
		}
		
		div.widget table{
			margin: 10px;
		}
		
		div.widget_tag_cloud{
			padding: 10px;
			width: 140px;
		}
		
			div.widget_tag_cloud h2{
				padding: 0 0 10px;
			}

	/* FOOTER */
	div#footer{
		background: #EEE;
		clear: both;
		color: #151515;
		float: left;
		font-size: 90%;
		text-align: center;
		width: 960px;
	}
	
		p#copyright{
			padding: 10px 10px 0;
		}
	
		div#footer ul{
			padding: 0 10px 0;
		}
		
			div#footer ul li{
				display: inline;
				padding: 0;
			}
			
				div#footer ul li a{
					background: url("images/rss_feed.gif") no-repeat left center;
					padding-left: 22px;
				}
				
				div#footer ul li.selected a{
					
				}
				
				div#footer ul li a:hover{
					
				}
				
		/* vcard */
		div#footer div.vcard{
			clear: left;
			float: left;
			margin: -10px 10px 10px;
		}
		
			div#footer div.vcard br{
				display: none;
			}