/*
Theme Name: Tom Hirst
Theme URI: http://tomhirst.co.uk
Description: Responsive HTML5/CSS3 based WordPress theme.
Version: 3.0
Author: Tom Hirst
Author URI: http://tomhirst.co.uk
Tags: 
*/

@import "css/reset.css";

body
{
	background: url(images/bg.jpg) repeat #DCDCDC;
	color: #333;
	font: 100% 'Droid Serif', Georgia, serif;
	line-height: 1.75;
	transition: all .2s linear; 
    -o-transition: all .2s linear; 
    -moz-transition: all .2s linear; 
    -webkit-transition:all .2s linear;
}

.clear-float
{
	clear: both;
}

*:focus
{
	outline: none; 
}

textarea
{
	resize: none; 
}

strong
{
	font-weight: bold;
}

em
{
	font-style: italic;
}

h1, h2, h5, p, ul, blockquote, img, span
{
	margin-bottom: 2em;
}

h3, h4
{
	margin-bottom: 1em;
}

h1, h2, h3, h4, h5
{
	font-weight: normal;
}

img, embed, object, video 
{
	max-width: 100%;
	height: auto;
}

img
{
	width: auto\9; /* ie8 */
}

img.alignnone, img.aligncenter, img.alignleft, img.alignright
{
	border: 1px solid #DCDCDC;
	-webkit-box-shadow: 0 1px 10px #DCDCDC;
	-moz-box-shadow: 0 1px 10px #DCDCDC;
	box-shadow: 0 1px 10px #DCDCDC; 
	margin-bottom: 2em;
	padding: 0.5em;
	background: #FFFFFF;
}

li
{
	list-style: disc;
	list-style-position: outside;
	font-size: 0.9375em;
	margin-left: 1em;
}

h1
{
	color: #BD3636;
	font: 1.3125em 'Oswald', sans-serif;
	text-transform: capitalize;
}

h1 a
{
	font-size: 0.6725em !important;
	text-transform: uppercase;
	float: right;
	margin: 0.5em;
		
}

h2
{
		font-size: 1.0625em; 
}

h3
{
	color: #BD3636;
	font: 1.3125em 'Oswald', sans-serif; 
	text-transform: capitalize;
}

h4, li h3
{
	color: #A9A9A9;
	font: 1.3125em 'Oswald', sans-serif; 
	text-transform: capitalize;
}

p
{
	font-size: 0.9375em; 
}

blockquote
{
	display: block;
	background: #F0F0F0;
	padding: 1em;
	font-size: 1.0625em;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

span.client
{
	padding: 1em;
	background: #DCDCDC;
	display: block;
	font-size: 0.9375em;
	text-align: center;
	margin-top: -2.3em;
	margin-bottom: 3em;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

a
{
	color: #666;
	text-decoration: none;
	border-bottom: 1px dotted #A9A9A9;
	padding: 1px;
	transition: all .2s ease;
    -o-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -webkit-transition:all .2s ease;
}

a:hover
{
	text-decoration: none;
	border-bottom: 1px solid #666;
}

.button
{
	background: #BD3636;
	display: block;
	color: #FFF;
	margin-bottom: 2em;
	
	padding: 1em;
	font: 1.1875em 'Oswald', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	clear: both;
	width: 98%;
	border: none;
	transition: all .2s ease;
    -o-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -webkit-transition: all .2s ease;
    -webkit-appearance: none;
}

.button:hover, .button:focus
{
	background: #FF4A4F;
	cursor: pointer;
	border: 0;
}

.button:active
{
	top: 1px;
	position: relative;
}

pre
{
	background: url(images/code_bg.jpg) repeat-x #f0f0f0;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 0em;
	margin-bottom: 2em;
	width: auto;
	overflow-x: auto;
}

input[type="submit"]
{
	-webkit-appearance: none;
}

input, textarea
{
	padding: 1em;
	margin-bottom: 1em;
	width: 92.5%;
	border: 1px solid #DCDCDC;
	background: #FFF;
	font: 0.9375em 'Droid Serif', Georgia, serif;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: inset 0 1px 1px #DCDCDC;
	-webkit-box-shadow: inset 0 1px 1px #DCDCDC;
	-moz-box-shadow: inset 0 1px 1px #DCDCDC;
	transition: border .2s ease;
    -o-transition: border .2s ease; 
    -moz-transition: border .2s ease; 
    -webkit-transition: border .2s ease;
 	-webkit-appearance: none;
}

input:focus, textarea:focus
{
	border: 1px solid #B0B0B0;	
	background: #F1F1F1;
}

section#page
{
	background: #FFFAFA;
	margin: 40px auto;
	width: 90%;
	border-top: 6px solid #BD3636;
	border-bottom: 6px solid #BD3636;
	max-width: 960px;
	min-width: 320px;
	overflow: hidden;
	box-shadow: 0 0 10px #B0B0B0;
	-webkit-box-shadow: 0 0 10px #B0B0B0;
	-moz-box-shadow: 0 0 10px #B0B0B0;
}

header#top
{
	padding: 0 4.1666667% 0 4.1666667%;
}

header#top nav
{
	width: 100%;
	text-align: center;
}

header#top nav ul
{
	margin-bottom: 0;
	background: url(images/nav-bg.jpg) repeat-x center;
}

header#top nav li
{
	display: inline-block;
	margin-left: 0;
}

header#top nav a
{
	color: #BD3636;
	font: 1.3125em 'Oswald', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	background: #FFFAFA;
	display: block;
	padding: 0.5em;
	border-bottom: 0;
	transition: all .2s ease;
    -o-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -webkit-transition:all .2s ease;
}

header#top nav a:hover
{
	color: #FF4A4F;
	background: #E3E3E3;
	border-bottom: 0;
}

header#top nav li.current_page_item a, header#top nav li.current_page_parent a
{
	color: #333;
	background: #DCDCDC;
}

section#page-feature
{
	max-height: 280px;
	overflow: hidden;
}

section#page-feature h2, section#page-feature img
{
	margin: 0;
}

section#page-feature img
{
	position: relative;
	z-index: 1;
}

#logo
{
	width: 19.270833%;
	position: relative;
	z-index: 10;
	padding: 4.1666667%;
	margin-top: -31.6%;
	margin-bottom: 0;
}

section#main
{
	clear: both;
	float: left;
	width: 66.5%;
}

section#sidebar
{
	float: left;
	width: 33.5%;
}

section#left-half
{
	float: left;
	width: 50%;
}

section#right-half
{
	float: left;
	width: 50%;
}

article
{
	padding: 6.25%;
	padding-bottom: 0;
}

aside
{
	padding: 12.5%;
}

aside ul li
{
	list-style: none;
	margin-left: 0;
}

aside ul.bullets li
{
	list-style: disc;
	margin-left: 1em;
}

aside ul li ul li
{
	list-style: disc;
	margin-left: 1em;
}

.half-padding
{
	padding: 8.3333333%;
}

.featured-project
{
	max-height: 345px;
	min-height: 345px;
	overflow: hidden;
	padding: 2%;
	padding-top: 0;
	border-bottom: 4px double #DCDCDC;
}

.portfolio-item
{
	width: 42%;
	padding: 4%;
	float: left;
	max-height: 380px;
	min-height: 380px;
	overflow: hidden;
	background: url(images/portfolio-item-bg.jpg) repeat-x bottom;
}

.portfolio-item a, .featured-project a
{
	border-bottom: 0;
}

.portfolio-item h3, .featured-project h3
{
	margin-bottom: 0.25em;
	text-align: center;
}

.portfolio-item em, .featured-project em
{
	font-size: 0.8125em;
	margin-bottom: 1em;
	display: block;
	font-style: normal;
	text-align: center;
}

.portfolio-item em a, .featured-project em a
{
	color: #666;
	text-decoration: none;
	border-bottom: 1px dotted #A9A9A9;
}

.portfolio-item em a:hover, .featured-project em a:hover
{
	text-decoration: none;
	border-bottom: 1px solid #666;
}


.portfolio-item img, .featured-project img
{
	margin-bottom: 0;
	transition: all .2s ease;
    -o-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -webkit-transition:all .2s ease;
	-webkit-box-shadow: 0 1px 10px #DCDCDC;
	-moz-box-shadow: 0 1px 10px #DCDCDC;
	box-shadow: 0 1px 10px #DCDCDC;
}

.portfolio-item img:hover, .featured-project img:hover
{
	-webkit-box-shadow: 0 1px 10px #C6C6C6;
	-moz-box-shadow: 0 1px 10px #C6C6C6;
	box-shadow: 0 1px 10px #C6C6C6;
}

#social-links
{
	margin-bottom: 2em;
}

#social-links img
{
	margin-bottom: 0;
}

#social-links a
{
	padding-left: 5px;
	padding-right: 5px;
	border-bottom: 0;
	transition: all .2s ease;
    -o-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -webkit-transition:all .2s ease;
}

#social-links a:hover
{
	border-bottom: 0;
	opacity: 0.8;
}

article header h2
{
	color: #BD3636;
	font: 1.4375em 'Oswald', sans-serif;
	text-transform: capitalize;
	margin-bottom: 0.5em;
}

article header h2 a
{
	color: #BD3636;
	border-bottom: 0;
}

article header h2 a:hover
{
	border-bottom: 0;
}

article p.post-info
{
	font-size: 0.8125em;
	margin-bottom: 2em;
}

footer#social div
{
	float: left;
	margin-right: 1em;
}

footer#social
{
	margin-bottom: 2em;
	float: left;
}

h3#comments-title
{
	clear: both;
}

footer#bottom
{
	background: #333;
	color: #FFF;
	clear: both;
	text-align: center;
	padding: 4.1666667%;
}

footer#bottom p
{
	font-size: 0.8125em;
	margin-bottom: 0;
}

footer#bottom p a
{
	color: #FFF;
	text-decoration: none;
	border-bottom: 0;
}

footer#bottom p a:hover
{
	border-bottom: 1px solid #666;
	border-bottom: 0;
}

footer#bottom nav ul
{
	margin-bottom: 1em;
	background: url(images/footer-bg.jpg) center repeat-x;
}

footer#bottom nav li
{
	display: inline-block;
	margin-left: 0;
}

footer#bottom nav a
{
	color: #FFF;
	font: 1.0625em 'Oswald', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	background: #333;
	display: block;
	padding: 0.25em;
	-webkit-transition: all .2s ease;
	border-bottom: 0;
}

footer#bottom nav a:hover
{
	color: #CCC;
	border-bottom: 0;
}

footer#bottom nav li.current_page_item a, footer#bottom nav li.current_page_parent a
{
	color: #B0B0B0;
}

#disqus_thread a
{
	border-bottom: 0;
	margin: 0;
}

a.dsq-commenter-name
{
	font-weight: normal;
	font-size: 1.3125em;
}

#dsq-global-toolbar
{
	display: none;
}

.wpcf7-response-output
{
	margin-bottom: 2em;
	font-size: 0.8em;
	padding: 0.5em;
	width: 95%;
}

div.wpcf7 img.ajax-loader
{
	display: none;
}

/* MEDIA QUERIES */

@media screen and (max-width: 768px) {

	body
	{
		font-size: 0.9em;
	}
	
	section#page
	{
		position: relative;
		margin: 0 0;
		width: auto;
	}
	
	section#main, section#sidebar, section#left-half, section#right-half, .portfolio-item
	{
		width: auto;
		float: none;
	}
	
	header#top nav ul
	{
		background: none;
	}
	
	footer#bottom nav ul
	{
		background: none;
	}
	
	article
	{
		padding: 4.1666667%;
		padding-bottom: 0;
	}
	
	aside
	{
		padding: 4.1666667%;
		padding-bottom: 0;
	}
	
	.half-padding
	{
		padding: 4.1666667%; 
		padding-bottom: 0;
	}
	
}


@media screen and (max-width: 520px) {

	header#top nav ul
	{
		font-size: 1.1em;
	}
	
	header#top nav a
	{
		padding-left: 0.7em;
		padding-right: 0.7em;
	}
	
}

 
@media only screen and (max-device-width: 960px) { 
 
 
    html 
    { 
        -webkit-text-size-adjust:none; 
    }
    
    body
	{
		font-size: 0.7em;
	}
	
 }