/*
// Theme Name: PlainVanilla - HTML5 
// Theme URI: http://qasimalyas.co.uk
// Description: A simple plain theme which I named PlainVanilla, plus I'm not a graphic designer
// Version: 1.0
// Author: Qasim Alyas
// Author URI: http://qasimalyas.com
// Tags: plain, vanilla, naked, clean, basic
*/
/*------------------------------------------------------------------
[Master Stylesheet] 
 
Project:		qasimalyas.co.uk
Version:		1.0
Author:			Qasim Alyas
Last change:	17/09/09 [last bug fixed, your initials] 
Assigned to:	Qasim Alyas (qa)
Primary use:	Wordpress blog
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]
 
1. Resets
2. Site defaults
		Define your basic tags here i.e. body, p, ul, ol, dl, links, forms and tables
3. Utility styles
		Define your utility classes i.e. float, clear, hide, alignLeft, alignRight, button
4. Colours
		Text, heading colours
5. Shell
		The shell is the outer layer of the site that exists on every page. The shell will have the site container, the header and the footer. Frequently, an important job of the shell is to set the width of the website.
6. Layout
		Column widths, layout styles
7. Modulars
		Small portions of areas which are across many pages and locations i.e. extras, spin, formbox
8. Section/page specific
		Styles that are unique to a page or section
 
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Color codes] 
 
Content:		#50514B (light black)
Header h1:		#50514B (light black)
Header h2:		#50514B (light black)
Header h3:		#50514B (light black)
Header h4:		#50514B (light black)
Header h5:		#50514B (light black)
Header h6:		#50514B (light black)
Footer:			
 
a (standard):	#b31b1b (dark blue)
a (visited):	
a (hover):		
a (active):		
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Typography] 
 
Body copy:			14px/20px Cambria, Georgia, Sans-Serif;
Headers:			2.7em/20px Cambria, Georgia, Sans-Serif;
Input, textarea:	14px/normal Cambria, Georgia, Sans-Serif; 
Sidebar heading:	30px/31px Cambria, Georgia, Sans-Serif;
 
Notes:  All fonts are being applied at 10px base font and 13px line height (62.5% method applied on the body)
-------------------------------------------------------------------*/
/* -----------------------------------------
RESETS
----------------------------------------- */
ul, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, img, blockquote, form, fieldset {
	margin: 0;
	padding: 0;
	border: 0 none;
}
 
/* -----------------------------------------
DEFAULTS
----------------------------------------- */
body {
	font-size: 62.5%;
	font-family: cambria, georgia, serif;
	background-color: #d5d5d5;
}

/* HTML 5 elements*/
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}


ul li p, ol li p, ul li .date, ol li .date {
	font-size: 1em;
}
 
p, ul, ol, span, dl, .meta {
	font-size: 1.4em;
	line-height: 20px; 
}
 
h1, h2, h3, h4, h5, h6 {
	margin-bottom:10px;
	font-weight: normal;
	font-style: italic;
	font-family: cambria, georgia, serif;
}
 
h1 {
	font-size: 5em;
}
 
h2 {
	font-size: 3em;
}
 
h3 {
	font-size: 2em;
}
 
h4 {
	font-size: 1.5em;
}
 
dl:after {
	content: ".";
	visibility: hidden;
	height: 0;
	display: block;
	clear: both;
}
 
dl {
	margin-top:5px;
	display: block;
}
 
	dt {
		float:left;
		width: 4em;
	}
 
	dd {
		float:left;
		width: 88%;
	}

 
/* Form elements */
/* ----------------------------------------- */

input[type=text], input[type=search], input[type=password], textarea {
	border: 1px solid #ccc;
	padding: 2px;
	width: 14em;
	font-style: italic;
	font-size:1.4em;
	font-family:cambria, georgia, serif;
}

textarea {
	margin-bottom: 10px;
	font-size: 1.4em;
	font-family: cambria, georgia, serif;
}

 
/* -----------------------------------------
ELEMENTS
----------------------------------------- */
p {
	margin-bottom: 10px;
}

a:not([href*=qasimalyas]) {
	padding-right: 12px;
	background:url(assets/images/link.png) no-repeat right;
} 

	a:hover {
		text-decoration: none;
	}
 
blockquote {
	-moz-border-radius: 5px; /* adds rounded border to gecko browser only */
	-webkit-border-radius: 5px; /* adds rounded border to webkit browser only */
	padding: 10px 20px;
	margin: 10px 0;
		background-color: #f0f0f0;
}
 
	blockquote p {
		border-left: 5px solid #abd876;
		margin: 0;
		padding-left: 10px;
	}
 
	blockquote .source {
		font-size: 1.2em;
		font-style: italic;
		text-align: right;
	}
 
code {
	white-space: pre-line;
	background-color: #ffffb7;
	}
 
pre {
	display:block;
	margin: 5px 0;
	width: 574px;
	font-size: 1.352em;
}
pre * {
	font-size: 1em;
}
 
/* -----------------------------------------
UTILITY
----------------------------------------- */
.date {
	display:block;
	margin: 5px 0;
}
 
.alt {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: #f0f0f0;
}
 
.youtube {
	display: block;
	margin:0 auto;
	text-align: center;
}
 
.aligncenter {
	display: block;
	margin:0 auto; 
}
 
.alignleft {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
 
.alignright {
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}
 
.wp-caption {
	border: 1px solid #b3b3b3;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	margin-bottom: 15px;
	padding: 10px;
	text-align:center;
	background: #f0f0f0;
}
 
	.wp-caption p {
		margin: 0;
	}
.alert {
	background-color: #ffff7b;
}
	.alert p {
		padding: 1em;
		font-size: 3em;
		line-height: 32px;
	}
.ajaxLoading {
	background: url(assets/images/ajaxLoading.gif) no-repeat 50% 50%;
}

/* -----------------------------------------
MISC
----------------------------------------- */
section > ol {
	padding-left: 25px;
}
 
/* -----------------------------------------
COLOURS
----------------------------------------- */
body {
	color: #50514b;
}
 
h1, h2, h3, h4, h5, h6 {
	color: #50514b;
}
 
a {
	color: #b31b1b;
}
 
input[type=text]:focus, input[type=search]:focus, input[type=password]:focus, input[type=password]:focus, textarea:focus {
	background-color: #ffc;
}
 
.date {
	color: #7f8f85;
}
 
/* ========================================= LAYOUT ========================================= */

/* -----------------------------------------
LAYOUT
----------------------------------------- */
#wrapper {
	border: 1px solid #aaa;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	margin: 10px auto 0;
	width: 80%;
	min-width: 860px;
	max-width: 1200px;
	background-color: #fff;
}
 
	#wrapper:after {
		content: ".";
		visibility: hidden;
		height: 0;
		display: block;
		clear: both;
	}
 
#mainContent {
	float: left;
	padding: 10px 15px;
	width: 67%;
}
 
#sidebar {
	float: right;
	padding: 10px;
	width: 27%;
}
 
footer {
	clear: both;
	margin: 15px 0 0;
	padding: 10px 15px;
}
	footer p {
		margin: 0;
		font-size: 1.1em;
	}
 
/* -----------------------------------------
HEADER
----------------------------------------- */
header {
	padding: 10px 15px;
}

	header hgroup h2 {
		font-size: 1.4em;
		font-style: normal;
	}

/* -----------------------------------------
MAINNAV
----------------------------------------- */

nav {
	border: solid #aaa;
	border-width: 1px 0;
	margin: 15px 0 0;
	padding: 3px 0;
}
 
	nav:after {
		content: ".";
		visibility: hidden;
		height: 0;
		display: block;
		clear: both;
	}

	nav ul {
		float: left;
		margin: 0;
		padding: 0 3px;
		list-style: none;
	}
 
		nav ul li {
			float: left;
			margin-right: 2px;
		}
 
			nav ul li a {
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				float: left;
				padding: 10px 15px;
				background-color: #fff;
				-webkit-transition: background-color 200ms linear; /* webkit only - off hover animates bg colour back to normal*/
			}
 
				nav ul li a:hover, nav ul li.current_page_item a {
					-webkit-transition: background-color 200ms linear;
					background-color: #f0f0f0;
				}
 
/* -----------------------------------------
SEARCH
----------------------------------------- */
#search {
	float: right;
	padding-top: 9px;
	width: 27em;
}
 
	#search:after {
		content: ".";
		visibility: hidden;
		height: 0;
		display: block;
		clear: both;
	}
 
	#search label {
		position: absolute;
		left: -9999px;
	}
 
	#search div {
		float: left;
		margin-bottom: 0;
	}
 
		#search div.button {
			padding-top: 2px;
			padding-left: 5px;
		}
 
/* -----------------------------------------
SIDEBAR
----------------------------------------- */
#sidebar ul {
	padding-left: 15px;
}
 
#sidebar section {
	margin-bottom: 15px;
}
 
/* ========================================= MODULARS ========================================= */

/* -----------------------------------------
MEDIA
----------------------------------------- */
.media {
	border-top: 1px solid #aaa;
	margin: 15px 0 10px;
	padding-top: 15px;
}
 
	.media ul, .media ol {
		margin: 0 auto;
		padding: 0;
		width: 750px;
	}
 
	.media ul:after {
		content: ".";
		visibility: hidden;
		height: 0;
		display: block;
		clear: both;
	}
 
	.media ol:after {
		content: ".";
		visibility: hidden;
		height: 0;
		display: block;
		clear: both;
	}
 
	.media li {
		float: left;
		list-style: none;
	}
		.media li a {
			padding: 0;
			background: none;
		}
 
/* -----------------------------------------
FLICKR
----------------------------------------- */
#flickr a {
	padding: 0;
	background: none;
}
 
/* -----------------------------------------
LAST.FM
----------------------------------------- */
img.cdcover {
	height: 75px;
	width: 75px;
}
 
/* -----------------------------------------
TWITTER
----------------------------------------- */
.twitter-item {
	word-wrap:
	break-word;
}
 
.twitter-timestamp {
	font-size: 1em;
		color: #7f8f85;
}
 
#sidebar section:first-child h2 a {
	display: block;
	width: 230px;
	height: 94px;
	padding: 0;
	text-indent: -9999px;
	background: url(assets/images/twitter.png) no-repeat left;
}
 
/* -----------------------------------------
PAGING
----------------------------------------- */
#paging {
	list-style: none;
}
 
	#paging:after {
		content: ".";
		visibility: hidden;
		height: 0;
		display: block;
		clear: both;
	}
 
	#paging a {
		padding: 10px 15px;
	}
 
		#paging a:hover {
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			background-color: #f0f0f0;
		}

/* -----------------------------------------
LIGHTER
----------------------------------------- */
.post .standardLighter {
	overflow: visible;
	margin: 15px 0;
}
	.post .standardline {
		margin-bottom: 0;
	}
	.post .standardline.alt {
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
	}
	.post .standardLighter .standardlast {
		padding-bottom: 0;
	}
	.post .standardLighter span {
		font-size: 11px;
	}

/* -----------------------------------------
MILKBOX
----------------------------------------- */
#mbNavigation a {
	padding: 0;
}

/* ========================================= SECTIONS ========================================= */

/* -----------------------------------------
POSTS
----------------------------------------- */
.post {
	border-bottom: 1px dashed #50514b;
	margin-bottom: 20px;
	padding-bottom: 20px;
}
 
	.post:after {
		content: ".";
		visibility: hidden;
		height: 0;
		display: block;
		clear: both;
	}
 
	.post ul, .post ol {
		margin-bottom: 15px;
		padding-left: 25px;
	}
 
	.post ul li, .post ol li {
		margin-bottom: 10px;
		clear: left;
	}
	.post li:after {
		content: ".";
		visibility: hidden;
		height: 0;
		display: block;
		clear: both;
	}
 
.category span {
	font-size: 1em;
}
 
.postinfo {
	margin-top: 10px;
	font-size: 1.2em;
	line-height: 16px;
}
 
/* -----------------------------------------
CONTACT FORM
----------------------------------------- */
.contactform:after {
	content: ".";
	visibility: hidden;
	height: 0;
	display: block;
	clear: both;
}
 
.contactform label {
	clear: both;
	display: block;
	float: left;
	width: 150px;
	font-size: 1.4em;
}
 
.contactform input {
	float: left;
	margin: 2px 5px 2px 0;
}
 
.contactform textarea {
	margin: 2px 5px 10px 0;
	padding: 1px;
}
 
.contactform #contactsubmit {
	margin-top: 20px;
	width: 100px;
	clear: both;
}
 
/* -----------------------------------------
COMMENTS MADE
----------------------------------------- */
.comments {
	padding-left: 20px;
}
 
	.comments li {
		margin: 10px 0 0;
		padding: 10px;
		list-style: none;
	}
 
		.comments li.alt .odd {
			background-color: #fff;
		}
 
		.comments li .even {
			border: 1px solid #aaa;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			background-color: rgba(255, 255, 255, 0.6);
		}
 
	.comments .children {
		font-size: 1em;
	}
 
	.comments .comment #respond {
		border-top: 1px dashed #50514B;
		padding-top: 10px;
	}
 
		.comments .comment #respond * {
			font-size: 1em;
		}
 
		.comments .comment #respond h3 {
			font-size: 1.45em;
		}
 
		.comments .comment #respond textarea {
			width: 96%;
		}
 
		.comments .comment #respond #submit {
			font-size: .786em;
		}
 
	.comments .avatar {
		float: left;
		margin-right: 5px;
	}
 
	.comments .says {
		font-size: 1em;
	}
 
.comment .comment-meta {
	clear: both;
}
 
#respond {
	margin: 15px 0;
}
 
/* -----------------------------------------
COMMENTS FORM
----------------------------------------- */
#commentform div {
	margin-bottom: 5px;
}
 
#commentform label {
	display: inline-block;
	width: 20em;
	font-size: 1.4em;
}
 
#commentform #comment {
	width: 85%;
}
 
#commentform code {
	font-size: 1em;
}
 
/* ========================================= PAGE SPECIFIC ========================================= */

/* -----------------------------------------
PORTFOLIO
----------------------------------------- */
.portfolio > div {
	margin: 0 auto;
	padding-top: 2px;
	padding-bottom: 5px;
	text-align: center;
}
 
.portfolio img {
	border: 1px solid #aaa;
}
 
.clientinfo dl {
	border-bottom: 1px dashed #50514b;
	margin-bottom: 20px;
	margin-left: 2px;
	padding-bottom: 10px;
	text-align: left;
}

/* -----------------------------------------
CV
----------------------------------------- */

#CV section {
	width: 96%;
}

/* -----------------------------------------
SEARCH RESULTS
----------------------------------------- */
.search-no-results ol a {
	background: none;
	padding: 0;
}