/*  
Theme Name: stina.co.uk
Theme URI: http://philthompson.co.uk
Description: T
Version: 2.0
Tags: 
Author: Phil Thompson
Author URI: http://philthompson.co.uk


	Table of Contents
	
	
	1 CSS resets
		1.1 HTML5 elements
		
	2 HTML tags
	
		
	3 Common classes
		3.1 Generic
		3.2 WordPress required classes
		
	4 Layout
	
		
	5 Page/template specific styles
		5.1 Homepage
		5.2 Search
		5.3 Work
		5.4 Contact
		
	6 Device specific styles
		6.1 Layouts smaller than 600px, iPhone and mobiles
			6.1.1 iPhone Protrait
			6.1.2 iPhone Landscape
		
		
*/



/**
 *	1 CSS resets 
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/**
 *	1.1 HTML elements 
 */
aside, 
footer, 
header, 
nav, 
section{
	display: block;
}


/**
 *	2 HTML tags 
 */
html{
     overflow: -moz-scrollbars-vertical;
} 

body{
	background: transparent url(images/wallpaper.jpg) 0 0 repeat;
	color: #1F1F1F;
	font: 16px/1.5 Vollkorn, Georgia, "Helvetica Neue", Arial, Helvetica, sans-serif;
	text-rendering: optimizeLegibility;
	width: 100%;
	-webkit-font-smoothing: antialiased;
}

a{
	background: rgb(46, 101, 255);
	background: rgba(46, 101, 255, 0.5);
	color: #FFF;
	padding: 1px 2px;
	text-decoration: none;
	text-shadow: none;
}

	a:visited{
		font-style: italic;
	}
	
	a:hover,
	a:focus{
		background: rgb(89, 152, 186);
		background: rgb(89, 152, 186, 0.5);
		color: #FFF;
	}
	
	a:active{
		outline: none;
		text-decoration: underline;
	}
	
h1, h2, h3, h4, h5, h6{
	font-size: 22px;
	font-weight: normal;
	letter-spacing: -0.01em;
	line-height: 1.3;
	padding: 30px 20px 10px;
}

h1{
	font-size: 38px;
	letter-spacing: -0.03em;
	line-height: 1;
	padding: 21px 20px 40px;
}

h2{
	font-size: 28px;
}

h4, h5, h6{
	font-size: 14px;
	padding-top: 1em;
}

p{
	padding: 0 20px 25px;	
}

ul, ol, dl{
	padding: 20px 20px;
}

li{
	margin: 0 0 .5em 2em;
}

dt{
	font-weight: bold;
}

dd{
	padding-bottom: 1em;
}

div.hr,
hr{
	
}

blockquote p{
	font-family: Georgia;
}

form{
	padding: 20px;
}

	form input,
	form select,
	form textarea, 
	form button{
		display: block;
		font-family: Arial, Helvetica, sans-serif;
	}
	

table{
	border-collapse: collapse;
	border-spacing: 0;
	padding: 20px;
}

/**
 *	3 Common classes 
 */


.off-screen{
	left: -9999999px;
	position: absolute;
	top: -999999px;
}

.column{
	float: left;
	width: 50%;
}

.inner{
	margin: 0 auto;
	width: 960px;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}


/* 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;
}

.curve{
	border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.curve-top{
	border-radius: 10px 10px 0 0;
	-khtml-border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
}

.curve-light{
	border-radius: 5px;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.clear{
	clear: both;
}


	
table.default{
	margin: 0 0 40px;
	width: 100%;
}

	table.default thead th{
	 	border-bottom: 1px dotted #666;
	 	font-weight: bold;
	 	padding: 7px 10px;
	 	text-align: left;
	 	white-space: nowrap;
	}
	 
	table.default td{
	 	border-bottom: 1px dotted #666;
	 	padding: 7px 10px;
	 	text-align: left;
	}
	
	table.default tr:hover td{
		background: #F2F2F2;
		border-color: #000;
	}
	
span.number{	
	color:#c03;
	font-size: 32px;
	text-shadow:1px 1px 0 rgba(0,0,0,0.1);
	vertical-align: -10%;
} 

.clickable{
	cursor: pointer;
}

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

.alignleft {
   float: left;
   margin: 0 15px 20px 0;
}

.alignright {
   float: right;
   margin: 0 0 20px 15px;
}

img.aligncenter,
img.alignleft,
img.alignright{
	background: transparent url(images/white.png) 0 0 repeat;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid #DDD;
	border-color: #DDD #BBB #BBB #DDD;
	padding: 5px;
}

img.aligncenter{
	margin: 30px auto;
}

.wp-caption{
	background: transparent url(images/white.png) 0 0 repeat;
	background: rgba(255, 255, 255, 0.7);
	margin: 0 auto 40px;
	padding: 10px;
   	text-align: center;	
}

	.wp-caption a{
		background: transparent;
		display: inline-block;
	}
	
	.wp-caption img {
	   	
		display: block;
		float: none !important;
		margin: 0 auto !important;
	}
	
		.wp-caption a:hover img{
			background: rgba(255, 255, 255, 0.9);
		}
	
	.wp-caption p.wp-caption-text {
		font-style: italic;
	   	padding: 5px 0 0;
	   	margin: 0;
	   	text-align: center;
	}


.column-one .syntaxhighlighter{
	margin: 0 0 2em!important;
}

.ddsg-pagenav{
	background: transparent url(images/squares-white.gif) 0 0 repeat-x;
	color: #666;
}

	.ddsg-pagenav p{
		background: transparent url(images/squares-white.gif) 0 bottom repeat-x;
		font-size: 16px;
		padding: 15px 0;
		text-align: center;
	}
	
	.ddsg-pagenav p a{
		padding: 0 .25em;
	}

/* 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{}


/**
 *	4 Layout 
 */
 
#Container{
	float: left;
	margin: 0 auto;
	width: 100%;
}

#Header{
	background: transparent url(images/white.png) 0 0 repeat;
	background: rgba(255, 255, 255, 0.7);
	float: left;
	padding: 20px 0 0;
	width: 100%;
}

#Branding{
	float: left;
	width: 621px;	
}

	#Logo{
		background: transparent;
		display: block;
		color: #111;
		margin: 0 0 20px;
		overflow: hidden;
		padding: 0;
		font-size: 28px;
		font-style: normal;
		height: 49px;
		letter-spacing: -0.03em;
		line-height: 1;
		text-decoration: none;
		text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
		text-transform: lowercase;
		width: 215px;
	}
	
	#Logo:visited{
		color: inherit;
	}
	
		#Logo span{
			color: #555;
			display: block;
			font-size: 18px;
		}	

#Menu{
	float: right;
	margin: -8px 0 0;
	max-width: 413px;
	padding: 10px 0 0;
	text-align: right;
}

	#Menu li{
		float: left;
		list-style: none;
		margin: 0;
	}
	
		#Menu li a{
			background: transparent;
			border-radius: 3px;
			color: #333;
			display: block;
			float: left;
			font-size: 14px;
			font-style: normal;
			padding: 5px 5px 3px;
			text-align: center;
			text-decoration: none;
			width: 46px;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
		}
		
		#Menu li.current_page_item a,
		#Menu li.current_page_parent a,
		#Menu li.current_page_ancestor a,
		#Menu li a:hover,
		#Menu li a:focus{
			background: rgb(46, 101, 255);
			background: rgba(46, 101, 255, 0.5);
			color: #FFF;
		}

#Content{
	clear: both;
	float: left;
	padding: 20px 0;
	width: 100%;
}

#PrimaryContent{
	width: 601px;
}

	#PrimaryContent div.section{
		background: transparent url(images/white.png) 0 0 repeat;
		background: rgba(255, 255, 255, 0.4);
		color: #333;
		float: left;
		margin: 0 0 20px;
		text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
		width: 100%;
	}
	
	#PrimaryContent div.sub-section{
		background: transparent url(images/white.png) 0 0 repeat;
		background: rgba(255, 255, 255, 0.5);
		margin: 0 0 20px 20px;
		width: 187px;
	}
	
	#PrimaryContent div.sub-section-first{
		margin-left: 0;
	}
	
		#PrimaryContent div.sub-section h2{
			font-size: 24px;
		}

	#PrimaryContent div.highlight,
	#PrimaryContent form{
		background: transparent url(images/white.png) 0 0 repeat;
		background: rgba(255, 255, 255, 0.5);
		float: left;
		margin: 20px;
		padding: 0;
		width: 561px;
	}

	#PrimaryContent .post{
		margin: 0 0 60px;
	}

		#PrimaryContent .entry{
			
		}
		
			#PrimaryContent .entry ul,
			#PrimaryContent .entry ol,
			#PrimaryContent .entry dl{
				overflow: auto; /* nobody quite knows why this fixes a floating image bug */
			}
		
		#PrimaryContent .postmetadata{
			color: #000;
			font-size: 14px;
			padding: 20px 0 10px;
		}
		
		#PrimaryContent .post .postmetadata{
			margin: 0 20px 20px;
		}
		
			#PrimaryContent .postmetadata div{
				display: inline;
			}
			
			#PrimaryContent .postmetadata div ul.post-categories{
				display: inline;
				padding: 0 5px;
			}
			
			#PrimaryContent .postmetadata div ul.post-categories li{
				display: inline;
				margin: 0 .25em 0 0;
			}
		
		#PrimaryContent .tags{
			clear: both;
			float: left;
			margin: 0 20px 20px;
			width: 100%;
		}
		
			#PrimaryContent .tags h2{
				color: #666;
				font-size: 16px;
				padding: 0;
			}
			
				#PrimaryContent .tags ul{
					overflow: visible;
					padding: 0;
				}
				
					#PrimaryContent .tags ul li{
						float: left;
						list-style: none;
						margin: 0 10px 0 0;
					}
					
						#PrimaryContent .tags ul li a{
							display: block;
							float: left;
						}
						
						#PrimaryContent .tags ul li a:hover{
							
						}
		
		
	
	
	#PrimaryContent .navigation{
		border: 2px solid #1F1F1F;
		border-width: 2px 0;
		clear: both;
		float: left;
		margin: 20px 0;
		padding: 20px 0;
		width: 100%;
	}
	
	#PrimaryContent .navigation li{
		display: block;
		float: left;
		margin: 0;
		text-align: center;
		width: 50%;
	}
	
	#PrimaryContent .navigation li.next{
		float: right;
	}
	
	#PrimaryContent .navigation li span{
		display: block;
	}
	
		#PrimaryContent .navigation li span.wording{
			color: #999;
		}
	
	
	div#PrimaryContent form div.field{
		margin: 0 20px 10px;
	}	

	
	div#PrimaryContent form input[type="text"]{
		font-size: 16px;
		padding: 3px 5px;
		width: 351px;
	}
	
	
	div#PrimaryContent form textarea{
		padding: 5px;
		width: 508px;
	}
	
	div#PrimaryContent form button{
		background: #1F1F1F url(images/black.png) 0 0 repeat;
		background: rgba(0, 0, 0, 0.5);
		border: none;
		color: #FFF;
		font-size: 18px;
		margin: 20px 0 0;
		padding: 5px 10px;
		text-align: center;
		text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
	}
	
		div#PrimaryContent form button:focus,
		div#PrimaryContent form button:active{
			border-width: 1px 0 0 1px;
		}

#SecondaryContent{
	background: transparent url(images/black.png) 0 0 repeat;
	background: rgba(0, 0, 0, 0.4);
	color: #FFF;
	float: right;
	min-height: 482px;
	width: 343px;
}

	#SecondaryContent h2{
		font-size: 22px;
		font-weight: normal;
	}
	
	#SecondaryContent h3{
		font-size: 18px;
		font-weight: normal;
		padding: 0 20px 20px;
	}
	
	#SecondaryContent p img{
		margin: 0 auto;
	}
	
	#SecondaryContent li{
		list-style: none;
		margin-left: 0;
	}
	
	#SecondaryContent ul.nav{
		
	}
	
		#SecondaryContent ul.nav li{

		}
		
			#SecondaryContent ul.nav li a{
				background: transparent url(images/black.png) 0 0 repeat;
				background: rgba(0, 0 , 0, 0.2);
				display: block;
				padding: 5px 10px;
			}
			
				#SecondaryContent ul.nav li a:hover{
					background: rgba(255, 255, 255, 0.6) url(images/white.png) 0 0 repeat;
					color: #000;
				}
				
				#SecondaryContent ul.nav li.current_page_item a{
					background: transparent url(images/white.png) 0 0 repeat;
					background: rgba(0, 0, 0, 0.5);
					color: #FFF;
				}


#Footer{
	background: transparent url(images/white.png) 0 0 repeat;
	background: rgba(255, 255, 255, 0.7);
	clear: both;
	float: left;
	font-size: 12px;
	padding: 10px 0 20px;
	width: 100%;
}

	#Copyright{
		text-align: center;
	}
	
	#Footer p{
		
	}
	
	#Footer #Wallpaper{
		float: left;
		padding-left: 0;
		text-align: left;
	}
	
	#Footer #Stina{
		float: right;
		font-style: italic;
		padding-right: 0;
		text-align: right;
	}

		
		
/**
 *	5.0 Page specific styles
 */
 
/**
 *	5.1. Homepage
 */
.post-13 h1{
	font-size: 61px;
}

/**
 *	5.2 Search results (search.php)
 */
body.search #SearchListings h2{
	font-size: 18px;
}		


/**
 *	5.3 Work
 */
body.work div#PrimaryContent ul{
	
}
	
	body.work div#PrimaryContent ul li{
		background: transparent url(images/white.png) 0 0 repeat;
		background: rgba(255, 255, 255, 0.5);
		float: left;
		font-size: 110%;
		list-style: none;
		margin: 0 0 20px;
		min-height: 280px;
		padding: 10px;
		width: 255px;
	}
	
		body.work div#PrimaryContent ul li:hover{
			background: transparent url(images/white.png) 0 0 repeat;
			background: rgba(255, 255, 255, 0.7);
			cursor: pointer;
		}
	
	body.work div#PrimaryContent ul li.odd,
	body.work div#PrimaryContent ul li:nth-child(odd){
		margin-right: 10px;
	}
	
		body.work div#PrimaryContent ul li img{
			display: block;
			margin-bottom: 10px;
			max-width: 255px;
		}
	
	body.work div#PrimaryContent ul li a{
		background: transparent;
		color: #333;
	}
	
body.work div#PrimaryContent #WorkGallery ul li{
	margin: 0 0 20px;
	text-align: center;
	width: 540px;
}

	body.work div#PrimaryContent #WorkGallery ul li span.gallery-icon,
	body.work div#PrimaryContent #WorkGallery ul li span.gallery-icon a{
		display: block;
	}

	body.work div#PrimaryContent #WorkGallery ul li img{
		margin: 0 auto;
		max-width: 540px;
	}
	
body.addleshaw-and-goddard-manchester h1{
	font-size: 38px;
}

/**
 *	5.4 Contact
 */
			
#ContactThanks{
	display: none;
	padding: 10px 20px;
}

span.wpcf7-not-valid-tip{
	background: #F7E700 !important;
	border: none !important;
	color: #000 !important;
	font-size: 14px !important;
	font-style: italic !important;
	margin: 5px 0 !important;
	padding: 2px !important;
	position: static !important;
}

div.wpcf7-validation-errors{
	background: #F7E700 !important;
	border: none !important;
}


/**
 *	6 Different Devices
 */
 
/**
 *	6.1 Layouts smaller than 600px, iPhone and mobiles
 */
@media handheld and (max-width: 480px), screen and (max-device-width: 480px){

	body{
		-webkit-text-size-adjust: none;
	}

	img,
	.wp-caption,
	.wp-caption img{
		max-width: 300px;
	}
	
	
	.inner{
		width: 100%;
	}
	
	div#Header{
	
	}
	
		div#Header #Branding{
			clear: both;
			width: 100%;
		}
	
		div#Header ul{
			float: left;
			clear: both;
			margin: 0 10px 10px;
			width: 100%;
		}
		
			ul#Menu li a{
				margin-right: 5px;
				padding: 2px;
				width: auto;
			}
		
	#Logo, h1, h2, h3, h4, h5, h6, p, ul, ol, dl{
		padding-left: 10px;
		padding-right: 10px;
	}
	
	div#PrimaryContent,
	div#PrimaryContent div.section,
	div#SecondaryContent{
		clear: both;
		width: 100%;
	}
	
	div#PrimaryContent div.sub-section{
		clear: both;
		margin: 0 0 10px;
		width: 100%;
	}
	
	
	#PrimaryContent div.highlight{
		margin: 10px;
		width: 300px;
	}
	
	div#Footer #Wallpaper,
	div#Footer #Stina{
		float: none;
		padding: 10px;
		text-align: left;
	}
	
	
	
	/* Home */
	.post-13 h1{
		font-size: 46px;
	}


	/* Work */
	
	body.work div#PrimaryContent ul li,
	body.work div#PrimaryContent ul li.odd, 
	body.work div#PrimaryContent ul li:nth-child(2n+1),
	body.work div#PrimaryContent #WorkGallery ul li{
		clear: both;
		float: none;
		margin: 0;
		text-align: center;
		width: 280px;
	}
	
	body.work div#PrimaryContent ul li a{
		display: block;
	}
	
	body.work div#PrimaryContent ul li a span{
		display: block;
	}

	
	body.work div#PrimaryContent ul li img,
	body.work div#PrimaryContent #WorkGallery ul li img{
		display: inline; 
		margin: 0 auto 10px;
		max-width: 280px;
	}
	
	/* Forms - Blog post and Contact page */
	
	div#PrimaryContent form{
		margin: 10px;
		width: 300px;
	}
	
	div#PrimaryContent form div.field{
		margin: 0 10px 10px;
	}
	
	div#PrimaryContent form input[type="text"],
	div#PrimaryContent form input[type="email"],
	div#PrimaryContent form input[type="tel"],
	div#PrimaryContent form input[type="url"],
	div#PrimaryContent form textarea{
		width: 260px;
	}	
	
	
}

/* 6.1.2 iPhone Landscape - @todo gotta try and get this to apply in < iOS4 */
@media screen and (max-device-width: 480px) and (orientation:landscape) {

	body,
	.inner{
		width: 480px;
	}
	
	img,
	.wp-caption,
	.wp-caption img{
		max-width: 460px;
	}
	
	body.work div#PrimaryContent ul li img,
	body.work div#PrimaryContent #WorkGallery ul li img{
		max-width: 440px;
	}
	
	ul#Menu li a{
		font-size: 22px;
		padding: 5px 10px 5px 5px;
	}
	
	div#PrimaryContent div.highlight,
	body.work div#PrimaryContent ul li,
	body.work div#PrimaryContent ul li.odd, 
	body.work div#PrimaryContent ul li:nth-child(2n+1),
	div#PrimaryContent form{
		width: 460px;
	}
	
	div#PrimaryContent form input[type="text"],
	div#PrimaryContent form input[type="email"],
	div#PrimaryContent form input[type="tel"],
	div#PrimaryContent form input[type="url"],
	div#PrimaryContent form textarea{
		width: 400px;
	}

	
	div#SecondaryContent p img{
		width: 460px;
	}
		
		
	}
	
}