/* @override 
	http://mister.mayfielddigital.co.uk/wp-content/themes/mister/_css/default.css
	http://dev.stevenbonner.com/wp-content/themes/mister/_css/default.css
	http://dev.precoded.com/wp-content/themes/mister/_css/default.css
	http://www.precoded.com/wp-content/themes/mister/_css/default.css
	http://www.somnermacdonald.co.uk/dev/wp-content/themes/mister/_css/default.css
	http://dev.studiomister.com/wp-content/themes/mister/_css/default.css */

/* RESET */

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, nav, section, article, header, footer, section, header, footer, article, aside, hgroup { margin: 0; padding: 0; border: 0; outline: 0; font-size: 1em; vertical-align: baseline; background: transparent; font-weight: normal; } 
body{ line-height: 1; }
ol, ul{ list-style: none; }
blockquote, q{ quotes: none;  }
blockquote:before, blockquote:after, q:before, q:after{ content: ''; content: none; }
:focus{ outline: 0; }
ins{ text-decoration: none; }
del{ text-decoration: line-through; }
table{ border-collapse: collapse; border-spacing: 0; }
a{ text-decoration: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display: block; }

html{ font-family: Helvetica, Arial, sans-serif; font-size: 62.5%; background-color: #ffffff; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; }
/* allows us to specify font sizes as EMs - 1em = 1px */

input, textarea, button{ font-family: Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-border-radius: 0px; border-radius: 0px; margin: 0px; line-height: 1; }
/* inputs seem to need font family specified separately, and iOS seems to like to do its own thing */

input[type=submit], button{
	cursor: pointer;
}

input[type=text], input[type=email], input[type=search], input[type=submit], button, textarea{ -webkit-appearance: none; }

img { -ms-interpolation-mode: bicubic; }
/* takes care of image resizing issues in Internet Explorer */

a{ color: inherit; }

p, h1, h2, h3, h4, h5, h6, h7, li, li li, li ul, li ul li, label, dd, dt, input, a { font-size: 1em; }
/* helps take care of unexpected effects due to inheritence of font sizes */ 

/*
Reminders:

-webkit-transition: opacity .4s; -moz-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s;
transform:rotate(7deg); -ms-transform:rotate(7deg); -moz-transform:rotate(7deg); -webkit-transform:rotate(7deg); -o-transform:rotate(7deg);

opacity: 0.4; filter: alpha(opacity = 40);

-moz-border-radius: 3px; border-radius: 3px;

-webkit-transform: translate3D(0px,0px,0px);

input::-webkit-input-placeholder
input:-moz-placeholder

box-sizing: content-box

-moz-box-shadow: 		inset 0px 1px 5px rgba(0,0,0,0.15);
-webkit-box-shadow: 	inset 0px 1px 5px rgba(0,0,0,0.15);
box-shadow: 			inset 0px 1px 5px rgba(0,0,0,0.15);

CSS gradient generator: http://www.colorzilla.com/gradient-editor/
*/


/* ************************************** COMMON ELEMENTS ************************************** */

html{
	background-color:  #f2f2f2;
}

/* ************************************** HEADER ELEMENTS ************************************** */

#banner{
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;
	width: 100%;
	padding: 25px 20px 25px 20px;
	text-align: center;
}

/*
Using a spacer graphic would normally be poor practice, but in this case it's necessary
to preserve the flexible column widths in the banner as we position elements aligned to
the bottom of the banner panel. If you have a better solution we'd love to hear from you:
support@precoded.com
*/

.spacer{
	display: none;
}

/* portfolio grid / list toggle button */

#portfolio_grid_swapper{
	display: none;
}

/* banner logo */

#banner_logo{
	margin-bottom: 25px;
	max-width: 240px; height: auto;
}

/* main navigation menu */

#banner_main_nav{
	margin-bottom: 20px;
	font-size: 1.1em; text-transform: uppercase; color: #666666; line-height: 1.4;
}

#banner_main_nav li{
	display: inline-block;
	margin: 2px 10px;
}

#banner_main_nav a{
	 color: #666666;
}

#banner_main_nav .current_page_item a, #banner_main_nav .current-menu-item a{
	color: #000000;
}

/* contact details text */

#banner_contact_list{
	font-size: 1.1em; text-transform: uppercase; color: #666666; line-height: 1.4;
}

#banner_contact_list li{
	margin: 2px;
}

#banner_contact_list strong{
	color: #000000;
}

#banner_contact_list a{
	color: #666666;
}
/* ************************************** MAIN PANEL ************************************** */

#main{
	margin: 20px 20px 0px 20px;
	
}

/* ************************************** COMMON ELEMENTS  ************************************** */

body.landing #main > h2, body.article #main > h2{
	margin-bottom: 15px; margin-top: 60px;
	font-size: 1.1em; color: #666666; text-transform: uppercase;
}

div.blank_h2{
	padding-top: 16px;
}

body.landing #main > h2:first-of-type, body.article #main > h2:first-of-type{
	margin-top: 0;
}

/* intro panel – landing pages */

.intro h1, .intro h3{
	font-size: 2.4em; font-weight: bold; line-height: 1.2; color: #000000;
}

.intro a h1, .intro a h3{
	text-decoration: underline; color: #000000;
}

.intro p{
	margin-top: 25px;
	font-size: 1.8em; font-weight: bold; line-height: 1.2; color: #000000;
}

header.intro a{
	display: inline; font-weight: bold; text-decoration: underline; color: #000000;
}

/* articles list */

.articles_list > ul > li{
	border-bottom: 1px solid #000000; padding-bottom: 16px; padding-top: 16px;
}

.articles_list > ul > li:first-of-type{
	padding-top: 0;
}

.articles_list h3{
	font-size: 2.4em; font-weight: bold;  line-height: 1.2;
}

.articles_list h3 a{
	font-weight: bold; color: #000000;
}

.articles_list .article_meta{
	margin-top: 14px;
	font-size: 1.1em; text-transform: uppercase; color: #666666;
}

.articles_list .article_meta li{
	line-height: 1.1;
	margin-bottom: 5px;
}

.articles_list .article_meta a{
	color: #666666;
}

.articles_list p{
	margin-top: 14px;
	font-size: 1.6em; font-weight: bold;  line-height: 1.2;
}

.articles_list p a{
	color: #000000; font-weight: bold;
}

/* category list (sub class of article list) */

.category_list{
	overflow: hidden;
}

.category_list.articles_list ul{
	overflow: hidden;
}

.category_list.articles_list li{
	float: left;
	border-bottom: none; padding: 0 8px 0 0;
	white-space: nowrap;
}

.category_list.articles_list a:after{
	content: " / ";
}

.category_list.articles_list li:first-of-type{
	padding-top: 0;
}

.category_list.articles_list li:last-of-type a:after{
	content: "";
}

/* ************************************** HOMEPAGE ELEMENTS ************************************** */

#highlighted_projects{
	
}

.highlighted_projects li{
	margin-bottom: 60px;
}

.highlighted_projects li:last-of-type{
	margin-bottom: 0;
}

.highlighted_projects img{
	max-width: 100%; height: auto;
}

.highlighted_projects iframe, .highlighted_projects object, .highlighted_projects video, .highlighted_projects embed{
	width: 100%;
}

.highlighted_project_meta h3{
	margin-top: 25px;
	font-size: 2.4em; font-weight: bold;  line-height: 1.2;
}

.highlighted_project_meta h3 a{
	font-weight: bold; color: #000000;
}

.highlighted_project_meta p{
	margin-top: 15px;
	line-height: 1.2; font-size: 1.5em; color: #666666;
}

/* highlighted projects slideshow */

.highlighted_projects_slideshow img{
	max-width: 100%; height: auto;
}

/* latest tweets */

#latest_tweets li{
	margin-bottom: 30px;
	padding-top: 38px;
	background: transparent url(../_img/tweet_bg_large.png) left top no-repeat;
}

#latest_tweets li:last-of-type{
	margin-bottom: 0px;
}

#latest_tweets h3{
	font-size: 1.4em; font-weight: bold; color: #666666;
}

#latest_tweets h3 a{
	font-weight: bold; color: #666666;
}

#latest_tweets p{
	margin-bottom: 15px;
	font-size: 2.4em; font-weight: bold; line-height: 1.2em; color: #000000;
}

#latest_tweets p a{
	font-weight: bold; color: #000000;
}

/* mailchimp newsletter sign up */

#mailing_list_signup h3{
	margin-bottom: 15px;
	font-size: 2.4em; font-weight: bold; line-height: 1.2em; color: #000000;
}

#mailing_list_signup p{
	margin-bottom: 14px;
	font-size: 1.5em; font-weight: bold;  line-height: 1.2; color: #666666;
}

#mailing_list_signup_form{
	margin-top: 40px;
}

#mailing_list_signup input[type=text]{
	border: none;
	margin-right: 12px;
	-webkit-border-radius: 6px; -o-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
	padding: 9px;
	background: #ffffff;
	font-size: 1.4em; color: #666666; line-height: 1;
}

#mailing_list_signup input[type=submit]{
	border: none;
	-webkit-border-radius: 6px; -o-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
	padding: 9px;
	background: #000000;
	font-size: 1.5em; color: #ffffff; line-height: 1; font-weight: bold;
}

#mailing_list_signup_form p{
	 margin-top: 40px;
}

/* ************************************** BLOG INDEX / ARCHIVE ELEMENTS ************************************** */

#intro_pagination_arrows{
	display: inline;
	margin-left: 10px;
}

#intro_pagination_arrows a{
	position: relative; top: 10px;
}

#intro_pagination_arrows img{
	width: 40px; height: 40px;
}

#pagination{
	overflow: hidden;
}

#pagination a{
	float: left;
	position: relative;
	width: 62px;
	margin-right: 30px; padding-top: 82px;
	font-size: 1.1em; color: #666666; text-transform: uppercase; text-align: center; line-height: 1.4;
}

#pagination .arrow{
	position: absolute; top: 0px; left: 0px;
}

/* ************************************** ARTICLE PAGE ELEMENTS ************************************** */

#article_gallery{
	margin-bottom: 10px;
}

#article_gallery img{
	max-width: 100%; width: auto; height: auto;
	margin-bottom: 20px;
}

#article_gallery iframe, #article_gallery object, #article_gallery video, #article_gallery embed{
	max-width: 100%;
	margin-bottom: 20px;
}

#main_article header h1 a, #main_article #article_social_share a{
	text-decoration: none;
}

#main_article a{
	text-decoration: underline;
}

#main_article header h1{
	margin-bottom: 35px;
	font-size: 2.4em; font-weight: bold; line-height: 1.2;
}

#main_article h1 a{
	font-weight: bold; color: #000000;
}

/* article body */

#article_body h2, #article_body h1{
	margin-bottom: 14px; margin-top: 28px;
	font-size: 2.4em; font-weight: bold; line-height: 1.2;
}

#article_body h3{
	margin-bottom: 14px; margin-top: 28px;
	font-size: 2em; font-weight: bold; line-height: 1.2;
}

#article_body h4{
	margin-bottom: 14px; margin-top: 28px;
	font-size: 1.6em; font-weight: bold; line-height: 1.2;
}

#article_body h5{
	margin-bottom: 14px; margin-top: 28px;
	font-size: 1.6em; font-weight: bold; line-height: 1.2; color: #000000;
}

#article_body h6{
	margin-bottom: 14px; margin-top: 28px;
	font-size: 1.6em; font-weight: bold; line-height: 1.2; color: #666666;
}

#article_body h2 a, #article_body h3 a, #article_body h4 a, #article_body h5 a, #article_body h6 a{
	font-weight: bold;
}

#article_body p, #article_body ul, #article_body ol, #article_body pre{
	color: #666666;
	margin-bottom: 14px;
	font-weight: normal; line-height: 1.2; font-size: 1.6em; 
}

#article_body pre{
	font-size: 2em;
}

hr{
	border: none; border-top: 1px solid #999999; padding: none; margin: 28px 0; 
}

#article_body ul, #article_body ol{
	margin-top: 28px; margin-bottom: 28px;
}

#article_body li{
	margin-left: 22px; margin-bottom: 14px;
}

#article_body li strong{
	color: #000000;
}

#article_body ul li{
	list-style: disc;
}

#article_body ol li{
	list-style: decimal;
}

#article_body blockquote{
	margin-top: 28px; margin-bottom: 28px; padding-top: 42px;
	background: transparent url(../_img/tweet_bg_large.png) left top no-repeat;
}

#article_body blockquote p{
	font-size: 1.8em; font-weight: bold; color: #000000;
}

#article_body blockquote em{
	font-size: 0.8em; font-weight: normal; color: #666666; font-style: normal;
}

#article_body strong{
	font-weight: bold;
}

#article_body a{
	color: #000000;
}

#article_body img{
	max-width: 100%; width: auto; height: auto;
}

#article_body iframe, #article_body object, #article_body video, #article_body embed{
	max-width: 100%;
}

#article_meta, #article_categories, #article_tags{
	margin-bottom: 6px;
	font-size: 1.1em; text-transform: uppercase; color: #666666; line-height: 1.2;
}

#article_meta a, #article_categories a, #article_tags a{
	color: #666666;
}

#article_social_share{
	margin-bottom: 35px; margin-top: 35px;
	font-size: 1.6em; color: #000000; font-weight: bold;
}

#article_social_share a{
	font-weight: bold; color: #000000;
}

/* next / previous article */

#main_article #pagination{
	margin-top: 60px;
}

#main_article #pagination h2{
	margin-bottom: 45px;
	font-weight: bold; font-size: 1.6em; 
}

#main_article #pagination a{
	text-decoration: none;
}

#main_article #pagination img{
	max-width: auto; height: auto;
}

/* related articles */

#main_article .articles_list{
	margin-top: 90px; margin-bottom: none;
}

#main_article .articles_list h2{
	margin-bottom: 45px; margin-top: 0;
	font-weight: bold; font-size: 1.6em; line-height: 1;
}

#main_article .articles_list a{
	text-decoration: none;
}
/*
#main_article .articles_list p{
	margin-bottom: 0;
}
*/

/* people list */

#people_list{
	margin-top: 28px; margin-bottom: 28px;
}

.person{
	margin-bottom: 50px;
}

.person img{
	max-width: 100%; height: auto;
	margin-bottom: 32px;
}

.person h4{
	margin-bottom: 9px;
	font-size: 1.8em; font-weight: bold; color: #000000; 
}

.person h5{
	margin-bottom: 30px;
	font-size: 1.4em; line-height: 1.2; color: #666666; font-weight: bold;
}

.person p{
	font-size: 1.4em; line-height: 1.2; color: #666666;
}

#people_list hr{
	display: none;
}

/* ************************************** PORTFOLIO LIST / GRID ************************************** */

/* portfolio */

.portfolio{
	overflow: hidden;
	margin-left: -20px; margin-right: -20px;
}

.portfolio ul{
	background-color:  #f2f2f2;
}

.portfolio li{
	position: relative;
	float: left;
	line-height: 0;
}

.portfolio li a{
	display: block;
}

.portfolio li img{
	width: 100%; height: auto;
}

.portfolio .project_list_item_meta{
	padding: 18px;
}

.portfolio .project_list_item_meta h3{
	margin-bottom: 13px;
	line-height: 1.2; font-size: 1.4em; text-transform: uppercase; font-weight: bold;
}

.portfolio .project_list_item_meta p{
	display: none;
	line-height: 1.2; font-size: 1.2em;
}

.portfolio .project_list_item_meta .view_project_link{
	display: block;
}

/* portfolio grid */

.portfolio.grid .project_list_item_meta{
	display: none;
}

.portfolio.grid li{
	width: 50%;
}

/* portfolio list */

.portfolio.list li{
	width: 100%;
}

.portfolio.list li img{
	width: 50%;
}

.portfolio.list .project_list_item_meta{
	position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 0;
	padding-bottom: 0px;
	background-color: none;
	-webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none;
}

.portfolio.list .project_list_item_meta_container{
	position: absolute; bottom: 0px; left: 50%; right: 18px;
}

.portfolio.list .project_list_item_meta h3{
	padding-left: 18px;
	color: #000000;
}

.portfolio.list .project_list_item_meta p{
	display: none;
	padding-left: 18px;
	margin-bottom: 13px;
	line-height: 1.2; color: #666666; font-size: 1.2em;
}

.portfolio.list .project_list_item_meta p.view_project_link{
	display: block;
	color: #000000;
	margin-bottom: 4px;
}

/* portfolio peeper */

#portfolio_list{
	display: none;
}

/* portfolio page */

body.projects #portfolio_list{
	display: block;
	margin: 0;
}

body.projects #show_hide_portfolio{
	display: none;
}

/*
#homepage_gallery{
	overflow: hidden;
}

#homepage_gallery li{
	position: relative;
	float: left;
	width: 50%;
	line-height: 0;
}

#homepage_gallery li a{
	display: block;
}

#homepage_gallery li img{
	width: 100%; height: auto;
}

#homepage_gallery .project_list_item_meta{
	display: none;
}
*/


/* portfolio peeper */

/*
#portfolio_list li{
	position: relative;
	float: left;
	width: 50%;
	line-height: 0;
}

#portfolio_list li a{
	display: block;
}

#portfolio_list li img{
	width: 100%; height: auto;
}

#portfolio_list .project_list_item_meta{
	display: none;
}
*/

/* ************************************** PROJECT ELEMENTS ************************************** */

#main.project_main{
	margin-left: 0; margin-right: 0;
}

/* project header */

#project_header{
	/* position: absolute; top: 45px; left: 45px; z-index: 5000; */
	margin-left: 20px; margin-right: 20px; margin-bottom: 15px;
}

#project_header h2{
	font-size: 1.1em; text-transform: uppercase; line-height: 1.4;
}

#project_header h2 a{
	color: #000000;
}

#project_header h1{
	font-size: 1.1em; text-transform: uppercase; color: #666666;  line-height: 1.4;
}

#project_header h1 a{
	color: #666666;
}

/* project information */

#project_info{

}

#project_info_contract_btn{
	display: none;
}

#project_info h2{
	display: none;
	margin: 45px 20px 18px 20px;
	font-size: 1.1em; text-transform: uppercase; color: #666666;
}

#project_info_container{
	overflow: hidden;
	padding: 18px 20px;
	background-color: #e74513;
	background-color: rgba(231,69,19,0.85);
}

#project_info_container h3{
	font-size: 1.8em; text-transform: uppercase; line-height: 1.2;	
}

#project_info_container h3 a{
	color: #000000;
}

#project_info_container h4{
	margin-top: 2px;
	font-size: 1.8em; text-transform: uppercase; color: #ffffff; line-height: 1.2;
}

#project_info_container p, #project_info_container h1, #project_info_container h2, #project_info_container h5, #project_info_container h6, #project_info_container ul, #project_info_container ol, #project_info_container pre{
	margin-top: 13px;
	color: #ffffff; font-size: 1.3em; line-height: 1.4em;
}

#project_info_container li{
	margin-left: 22px;
}

#project_info_container ul li{
	list-style: disc;
}

#project_info_container ol li{
	list-style: decimal;
}

#project_info_container strong{
	font-weight: bold;
}

#project_info_container a{
	color: #ffffff;
}







/*
#project_info_contract_btn{
	position: absolute; top: 18px; right: 18px;
	
	width: 8px; height: 15px;
	border: none; padding: 0; margin: 0;
	background: transparent url(/_img/project-info-contract-expand-btn.png) 0px 0px no-repeat;
	line-height: 0;
}
*/
/* slides navigation buttons */

#slides_nav{
	display: none;
}

#previous_image_btn, #next_image_btn{
	display: none;
}

/* slides */

#slides{
	overflow: hidden;
}

#slides li{
	overflow: hidden;
	position: relative;
}

#slides img{
	width: 100%; height: auto;
	vertical-align: middle;
}

#slides iframe, #slides object, #slides video, #slides embed{
	width: 100%;
}

.slide_video_embed{
	display: none;
}

.slide_video_link{
	display: block;
	-webkit-box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	position: absolute; bottom: 0px;
	width: 100%;	
	padding: 30px;
	text-align: center;
}

#slides .slide_video_link img{
	max-width: 100px; width: auto; height: auto;
}

/* ************************************** FOOTER ELEMENTS ************************************** */

.site_footer{
	clear: both;
	padding: 25px 20px;
}

.site_footer a{
	color: #000000;
}

#main .site_footer{
	margin-top: 60px;
	clear: both;
	border-top: 1px solid #aaaaaa;
	padding: 25px 0px;
}

.site_footer p{
	font-size: 1.1em; text-transform: uppercase; color: #666666; line-height: 1.2;
}

/* ************************************** ADAPTIVE LAYOUT ******************************************* */

/* the flexible column widths are 300px minimum, so the natural break points are multiples of 300px */

/* 600px and up */
@media only screen and (min-width : 550px) {

	.portfolio.list .project_list_item_meta p{
		display: block;
	}


}