@charset utf-8;
/*
Theme Name: Spencer Murphy V1.1
Author: Coquo
Author URI: http://www.coquo.co.uk
Description: Custom theme for Spencer Murphy
Version: 1.1
*/
/* @license
 * MyFonts Webfont Build ID 2563119, 2013-05-23T09:37:10-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Avenir 45 Book by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/avenir/45-book/
 * Copyright: Part of the digitally encoded machine readable outline data for producing the Typefaces provided is copyrighted © 1981 - 2007 Linotype GmbH, www.linotype.com. All rights reserved. This software is the property of Linotype GmbH, and may not be repro
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2563119
 * 
 * © 2013 MyFonts Inc
*/

@import url("//hello.myfonts.net/count/271c2f");

  
@font-face {font-family: 'AvenirLT-Book';src: url('webfonts/271C2F_0_0.eot');src: url('webfonts/271C2F_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/271C2F_0_0.woff') format('woff'),url('webfonts/271C2F_0_0.ttf') format('truetype');}
@import url(http://fonts.googleapis.com/css?family=Muli);

/* Resets */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figure,figcaption,hgroup,menu,header,footer,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0}article,aside,canvas,figure,figure img,figcaption,hgroup,footer,header,nav,section,audio,video{display:block}a img{border:0}figure{position:relative}figure img{width:100%}

/*
	general styles
 */
 
html, body {
    margin:0;
    padding:0;
    height:100%;
}

.normal,
body {
	font-family: 'AvenirLT-Book';
	font-size: 12px;
}
#wrapper{
    min-height:98%;
    position:relative;
}
#footer {
    position:absolute;
    bottom:5px;
    width:100%;
    height:auto; /* Height of the footer */
}

.serif,
cite,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'AvenirLT-Book';
}

.post h2,
.post h3,
.post h4,
.post h5,
.post h6 {
	margin: 24px 12px 12px;
}

.monospace,
var,
code {
	font-family: 'AvenirLT-Book';
}

.amp {
	font-style: italic;
	font-family: 'AvenirLT-Book';
}
a {
	-webkit-transition: color .3s linear;
	-o-transition: color .3s linear;
	-moz-transition: color .3s linear;
	text-decoration: none;
	outline: none;	
	cursor: pointer;
}
button {
	cursor: pointer;	
}
a:link {
	color: #c2c2c2;
}
a:visited {
	color: #c2c2c2;
}
a:hover,a:active {
	color: #808080;
}
a:active,
a:focus {
	text-decoration: underline;
}
p {
	margin-bottom: 10px;	
}

#post-wrapper, .post {
	width: 70%;
	float: left;	
}

.post-content ul,
.post-content ol {
	padding-left: 24px;
}

input,
textarea { 
	border: 1px #aaa solid;
	padding: 5px;
	outline: none;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
	border: 1px #444 solid;
}
input:focus,
textarea:focus {
	box-shadow:inset 0px 0px 10px rgba(0,0,0,.2);
	-webkit-box-shadow:inset 0px 0px 10px rgba(0,0,0,.2);
	-moz-box-shadow:inset 0px 0px 10px rgba(0,0,0,.2);
}
textarea {
	min-height: 150px;
	width: 96%;
}

article {
	margin-top: 50px;
}

.goFullscreen {
	position: absolute;
	right:30px;
	top: 30px;	
}


/*
	layout styles
 */


body {
	background: #FFFFFF;
	color: #808080;
	letter-spacing: 0.5px;
}

#main {
	padding: 30px 0 0 0;	
}

.container {
	background: #fff;
	padding: 0;
	width: 97%;
	min-width: 750px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}
	#header {
		float: left;
		width: 112px;
		word-wrap: break-word;
		position: relative;
		min-height: 370px;
	}
	#content {
		display: none;
		padding-left: 0;
		padding-right: 0;
		margin-left: 60px;
		float: left;
		position: relative;
		padding-top: 22px;
		overflow: hidden;
	}
	.project-controls {
		display: none;	
	}
	.mobile-controls {
		display: none;	
		margin-top: 10px;
		width: 100%;
	}
		#title {
			position: relative;
			height: 50px;
		}
			#logo,
			#tagline {
				position: relative;
			}
			#logo {
				left: 0;
				font-size: 24px;
				line-height: normal;
				letter-spacing: 0;
			}
			
			#logo img {
				width: 112px;	
				height: auto;
			}
			#header-image.container {
				padding: 0;
			}
	.menu-toggle {
		display: none;
		cursor: pointer;	
	}
	#nav-primary {
		float:left;
		width: 100%;
		padding: 0 0px;
		margin-bottom: 30px;
		display: block;
	}
		#nav-primary ul,
		#nav-primary li {
			list-style: none;
			width: 100%;
			float: left;
		}
		
		#nav-primary li {
			padding: 0 0 4px 0;	
		}
		
		#nav-primary ul li ul li a {
			margin: 3px 0;
		}
		
		#nav-primary ul li ul li a:before{
		   content: "/ ";
		}
		
		#nav-primary ul li ul li {
			text-indent: -0.5em;
			padding: 0px 0 0px 10px;
		}
		
		#nav-primary li.current_page_item a,
		#nav-primary li.current_menu_item a,
		#nav-primary li a.active
		{
			color: #808080;
		}
			#nav-primary a {
				float: left;
				display: block;
				padding: 0 0px;
				text-align:left;
				width: 100%;
				font-size: 12px;
			}
			
			#nav-primary li ul {
				display: none; 
			}
			
			#nav-primary li.current-menu-parent ul {
				display: block; 
			}
		.post-single {
			padding-bottom: 20px;
			margin-bottom: 20px;
			border-bottom: 1px #dedede solid;
		}
	#footer .container {
		font-size:10px;
		text-align:right;
		background: none;
	}
	
	#footer .container .goFullscreen {
		display: none;	
	}
		#footer-content {
		}
			#footer ul,
			#footer li {
				display: inline;
				list-style: none;
			}
				#footer li a {
					padding: 0 10px;
				}
				
				#footer-content p {
					margin: 0;
				}
				

/* Slider */

 .loader {
	width: 100%;
	height: 1px;
	float:left;
	background: url(images/loader.gif) no-repeat;
	display: block;
 }

 .bx-controls-direction {
		padding: 0;  
 }
 
 .bx-wrapper .bx-controls-direction-img a {
	 height:98%;
	 position:absolute;
	 top:0;
	 width:100%;
	 z-index:999;
 }
 
 .bx-wrapper .bx-controls-direction-img .bx-prev-img {
	 left: 0;
 }
 
 .bx-wrapper .bx-controls-direction-img .bx-next-img {
	 left: 25%;
 }
 
 html.touch .bx-controls-direction-img {
    display: none !important;
 }
 
 .bxslider ul {
	 margin: 0;
 }
 
 .bxslider li {
	height: auto; 
    margin: 0 -1px 0 -1px;
 }	
 
 a.bx-next-img {
	 cursor: url(images/arrow-next.png), auto;
 }
 
 a.bx-prev-img {
	 cursor: url(images/arrow-prev.png), auto;
 }
 
 .bx-next {
	margin-left: 10px; 
 }
 
 .bx-prev {
	margin-right: 10px; 
 }
 
 .bx-wrapper .slide-counter, .bx-prev, .bx-next {
	display: none; 
 }
		 
 .slide-counter, .go-next, .go-prev, .bx-pager, .mobile-controls .info-link {
	display: inline;
	bottom:0;
 }
 
 .bx-wrapper {
	position: relative;
	margin: 0 auto;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

.captions {
	position: absolute;
	bottom: 25px;	
	left: 0;
}

.bx-caption, .bx-caption-bottom {
	color: #c2c2c2;	
}

.bx-caption {
	visibility:hidden;
}

.bx-caption-bottom {
	margin-top: 10px;
	z-index: 1;	
}

.bx-caption-l {
	position: absolute;
	left: -40px;
	bottom: 0;	
}

.caption-l, .caption-l a, .bx-controls-direction, .bx-controls-direction a {
	color: #808080 !important;	
}

#header a.info-link {
	display: block;
	margin-top: 10px;
	float: left;	
}

#content a.info-link {
	display: none;	
}

.info-text, .thumb-container {
	display: none;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	left: 0;
	position: absolute;
	background: rgba(255,255,255,0.9);
	padding: 2%;
	z-index: 1000;	
	top: 22px;
}

.info-text .project, .info-text .image {
	max-width: 500px;
	overflow-y: auto;	
}

.thumb-container, #thumb-grid {
	width: 100%;
	height: 100%;
	padding: 0;
	background: #fff;
	overflow-y: auto;
}

#thumb-grid li {
	height: 11% !important;
	margin: 0.5%;
	list-style: none;
	display:inline-block;
	float:left;
}

#thumb-grid li a img {
	display: block;
	max-height: 100%;
	max-width: auto;
	height: auto;
	width: auto;
}

a.single-image {
    display: none;
}

a.thumbnails img, a.single-image img {
	vertical-align: middle;
	cursor: pointer;
}

.caption .bx-caption {
	visibility: hidden;	
}

.fullscreen-toggle-mobile, .fullscreen-toggle-exit-mobile, .fullscreen-menu-mobile, .fullscreen-toggle, .fullscreen-exit-toggle {
	display: none;
	cursor: pointer;
}

.fullscreen-toggle, .fullscreen-exit-toggle {
	position: absolute;
	top: 0;
	right: 0; 	
}

.desktop-controls {
	position:absolute;
	bottom: 0;
	width: 100%;
	height: 12px;
}
  
 /* About page */
 
 .about {
	width: 70%;
	float: left; 
 }
 
 .about-profile {
	width: 27%;
	margin-left: 3%;
	float: left; 
 }
 .about-profile img {
	width: 100%;
	height: auto; 
 }
 
 /* Contact */
 
 .contact-text {
	width: 30%;
	float: left; 
 }
 
 .contact-form {
	width: 65%;
	margin-left: 5%;
	float: left; 
 }
 
 /* Print and Booklet Sales */
 
 .booklet, .poster {
	 width: 100%;
	 float: left;
	 margin-bottom: 20px;
 }
 
 .booklet img, .poster img {
	float: left;
	width: 100px;
	height: auto;
	margin-right: 3%; 
 }
 
 .booklet p, .poster p {
	float: left;
	width: 72%; 
 }
 
 /* Tumblr */
 
 .tumblr {
	font-family: 'Muli', sans-serif !important; 
 }
 
.tumblr h3 {
	margin: 0 0 20px 0;
	font-size: 16px !important;
	font-family: 'Muli', sans-serif; 
}
#post-wrapper, .post {
	width: 100%;
	max-width: 700px;
	float: none;
	dsiplay: inline-block;
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid #f4f4f4;
	list-style: none;	
}
 
 .photoset_div, .tumblr .video .fluid-width-video-wrapper, .photo_div {
	margin-bottom: 20px; 
 }
 
 .tumblr .regular, .tumblr .video{
	max-width: 1000px; 
 }
 
  .tumblr .regular img {
	margin: 10px 0;
	max-width: 100%;
	height: auto;  
  }
  
  .tumblr .caption, .tumblr q {
	 width: 100%;
  }
 
 .photoset_div img, .photo_div img {
	max-width: 100%;
	hieght: auto; 
 }
 
 .tumblr .date {
	 margin-top: 20px;  
 }
 
 .tags li {
	list-style: none;
	display:inline; 
 }
 
 #post_notes, #pagers {
	margin-bottom: 20px; 
 }
 
#post_notes ol li {
	list-style: none;	
}
 
#post_notes img.avatar { 
	position: relative; 
	bottom: -4px;
	margin-right: 5px;
}

.tumblr #ajax {
	float: left;
	width: 112px;	
	min-width: 112px;
}

@media only screen 
and (min-width : 0px) 
and (max-width : 1280px) 
{
	
	/* Tumblr */
 
	.tumblr #header {
		margin-top: 30px;	
	}
	
}


@media only screen and (min-width: 1212px) {
	.slider img {
		height: 100%;	
	}
	.slider li {
		height: 552px;
	}
}

@media only screen and (min-width: 767px) {
	
	.container {
		padding: 0;
		width: 97%;
		max-width: 2500px;
	}
	
	a.thumbnails, a.single-image {
		float:right;
	}
	
	.slide-counter, .go-next, .go-prev, .bx-pager, .mobile-controls .info-link {
		float: left;	
	}
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
	.fullscreen-mobile .container {
		 padding: 15px 0 0 0;
		 width: 90%;
		 margin: 0 auto;
		 min-width: 0;
	}
	
	.bx-caption-bottom {
		display: none;	
	}
	
	
}


@media only screen and (max-device-width: 767px) and (orientation : landscape) {
	 html.touch .video-swipe-mobile {
		 display: none;
	 }
	 
	 html.touch .video-swipe {
		 display: block;
	 }
	 
	 #header {
		margin-bottom: 0px;
	 }
	 .fullscreen-mobile #main {
			padding-top: 0 !important; 
	 }
	 .fullscreen-mobile .container {
		  padding: 0;
		  width: 100%;
	  }
	  
	  .fullscreen-mobile .bxslider li img{
	    margin: 0 auto;  
	  }
	  
	  .fullscreen-mobile .bx-caption-bottom {
		  display: none; 
	  }
  
  .fullscreen-toggle-mobile, .fullscreen-toggle-exit-mobile, .fullscreen-menu-mobile {
	padding: 0;
	border: 0;
	background: none; 
	margin: 0 5px 0 0;
  }
  
  .fullscreen-toggle-mobile {
	  display: inline;
  }
  
  .fullscreen-toggle-mobile img {
		vertical-align: middle;
  }
  .fullscreen-toggle-exit-mobile {
	  position: absolute;
	  left: 5px;
	  bottom: 5px;
	  z-index: 9999;  
  }
  
  .fullscreen-menu-mobile {
	  position: absolute;
	  right: 5px;
	  top: 15px;
	  z-index: 9999; 
  }
  .fullscreen-menu-mobile img {
	  width: 100%;
	  height: auto;
  }
  
  .projects-list li {
		width: 49%;
		margin: 0 2% 30px 0; 
	}

  .projects-list li:nth-child(2n) {
		margin-right: 0; 
	}
	
	

}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
	.container {
		padding: 0;
		width: 90%;
		min-width: 0;
		-webkit-text-size-adjust: 100%; /* Prevents Mobile Safari from bumping up font sizes in landscape */
	}
		#header {
			padding-top: 0 !important;
		}
		#header .container {
			padding-top: 40px;
			padding-bottom: 12px;
		}
			#title {
				height: 45px !important;
			}
			
			#logo img {
				width: 125px;
				height: auto; 	
			}
			
		#content {
			float: none;
			padding: 0;
			width: 100% !important;
		}
	
	#main {
		padding-top: 10px;	
	}
	article {
		margin-top: 0;
	}
	#footer {
		position: relative;
	}
	#header {
		min-height: 0;	
		height: auto !important;
	}
	#header, #content {
		width: 100%;
		margin-left: 0;	
	}
		#logo,
		#tagline {
			position: relative;
			line-height: 30px;
		}
		#title {
			width: 55%;
			float: left;	
		}
		#logo {
			font-size: 42px;
			text-align:left;
		}
		.menu-toggle {
			display: block;
			width: 10%;
			float: right;
			text-align:right;
			padding-top: 5px;		
		}
		#nav-primary {
			margin-bottom: 20px;
			display: none;
			min-height: auto;	
		}
		#nav-primary a{
			text-align: left;	
		}
		
		#content {
			float: none;
			padding-top: 0px;
		}
		#footer .container {
			padding-top: 0;
		}
			#footer-content {
				border: 0;
				padding: 10px;
			}
		.slider {
			margin-top: 30px;	
		}
		.slider li {
			width: 100%;
			height: 265px;	
		}
		
		.contact-text, .contact-form {
			margin: 0;
			width: 100%; 
		 }
		 
		.bx-controls-direction {
			display: inline;
		}
		 
		.desktop-controls {
			display: none; 
		 }
		 
		 .bx-wrapper .slide-counter, .bx-prev, .bx-next, #content a.info-link {
			display: inline; 
		 }
		 #header a.info-link {
			display: none;
		 }
		 
		 .goFullscreen {
			 display: none;
		 }
		 
		.mobile-controls {
			display: block;	
		}
  
  .info-text, .thumb-container {	
		top: 0px;
	}
	
	.tumblr #ajax {
		width: 100%;
		margin-bottom: 20px;
	}
	
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	#nav-primary {
		display: block !important;
	}
	
	/* Tumblr */
 
	.tumblr #header {
		margin-top: 0px;	
	}

}

@media only screen and (max-device-width: 767px) and (min-device-width: 480px) {
	
	.container {
		padding: 0;
		width: 90%;
		min-width: 0;
		-webkit-text-size-adjust: 100%; /* Prevents Mobile Safari from bumping up font sizes in landscape */
	}
		#header {
			padding-top: 0 !important;
		}
		#header .container {
			padding-top: 40px;
			padding-bottom: 12px;
		}
			#title {
				height: 45px !important;
			}
			
			#logo img {
				width: 125px;
				height: auto; 	
			}
				#tagline {
					line-height: 20px !important;
				}
			#header-image {
				height: 150px !important;
				padding: 0;
			}
				#header-image img {
					width: 534px;
					height: 150px;
					margin-left: -69px;
				}
		#content {
			float: none;
			padding: 0 10px;
			width: 100% !important;
		}
	
	#main {
		padding-top: 10px;	
	}
	article {
		margin-top: 0;
	}
	#footer {
		position: relative;
	}
	#header {
		min-height: 0;	
		height: auto !important;
	}
	#header, #content {
		width: 100%;
		margin-left: 0;	
	}
		#logo,
		#tagline {
			position: relative;
			line-height: 30px;
		}
		#title {
			width: 55%;
			float: left;	
		}
		#logo {
			font-size: 42px;
			text-align:left;
		}
		.menu-toggle {
			display: block;
			width: 10%;
			float: right;
			text-align:right;
			padding-top: 5px;		
		}
		#nav-primary {
			margin-bottom: 20px;
			display: none;
			min-height: auto;	
		}
		#nav-primary a{
			text-align: left;	
		}
		
		#content {
			float: none;
			padding-top: 0px;
		}
		#footer {
			display: none;
		}
		#footer .container {
			padding-top: 0;
		}
			#footer-content {
				border: 0;
				padding: 10px;
			}
		.slider {
			margin-top: 30px;	
		}
		.slider li {
			width: 100%;
			height: 265px;	
		}
		
		.contact-text, .contact-form {
			margin: 0;
			width: 100%; 
		 }
		 
		 .bx-controls-direction {
			display: inline;
		}
		 
		.bx-controls-direction-img {
			display: none;
		}
		
		 .desktop-controls {
			display: none; 
		 }
		 
		 .bx-wrapper .slide-counter, .bx-prev, .bx-next, #content a.info-link {
			display: inline; 
		 }
		 
		 #header a.info-link {
			display: none;
		 }
		 
		 .goFullscreen {
			 display: none;
		 }

		.mobile-controls {
			display: block;	
		}
		.info-text, .thumb-container {	
		top: 0px;
	}
	
	.tumblr #ajax {
		width: 100%;
		margin-bottom: 20px;
	}
	
	.bx-caption {
		visiblity: hidden;	
	}
}


@media only screen and (max-device-width: 479px) {
	
	.container {
		padding: 0;
		width: 90%;
		min-width: 0;
		-webkit-text-size-adjust: 100%; /* Prevents Mobile Safari from bumping up font sizes in landscape */
	}
		#header {
			padding-top: 0 !important;
			height: auto !important;	
		}
		#title {
			height: 45px !important;
		}
			#logo img {
				width: 125px;
				height: auto; 	
			}
		
		#content {
			float: none;
			width: 100% !important;
		}
	
	#main {
		padding-top: 10px;	
	}

	#if-logged-in {
		height: 40px;
		line-height: 20px;
	}
		#if-logged-in .right {
			float: left;
			clear: left;
		}
	
	.container {
		min-width: 0px;
	}
	
	article {
		margin-top: 0;
	}
	
	.menu-toggle {
		display: block;	
		width: 10%;
		float: right;
		text-align:right;	
		padding-top: 7px;	
	}
	
	#title {
		width: 85%;
		float: left;	
	}
	
	#header {
		min-height: 0;	
	}
	
	#nav-primary {
		display: none;
		min-height: auto;		
	}
	
	#nav-primary a{
		text-align: left;	
	}
	
	#footer {
		display: none;
	}
	
	#header, #content {
		width: 100%;	
		margin-left: 0;
	}
		#logo,
		#tagline {
			position: relative;
			line-height: 30px;
		}
		#logo {
			font-size: 42px;
			text-align: left;
		}
		#tagline {
			font-size: 16px;
		}
		
		#content {
			float: none;
			padding-top: 0px;
		}
		#footer .container {
			padding-top: 0;
		}
			#footer-content {
				border: 0;
				padding: 10px;
			}
		.slider {
			margin-top: 30px;	
		}
		.slider li {
			width: 100%;
			height: auto;	
		}
		
		.slider img {
			width: 100%;
			height: auto;	
		}
		
		.contact-text, .contact-form {
			margin: 0;
			width: 100%; 
		 }
		 
		 .bx-controls-direction {
			display: inline;
		}
		 
		.bx-controls-direction-img {
			display: none;
		}	
		
		 .desktop-controls {
			display: none; 
		 }
		 
		 .bx-wrapper .slide-counter, .bx-prev, .bx-next, #content a.info-link {
			display: inline; 
		 }
		 
		 #header a.info-link {
			display: none;
		 }
		 
		  .goFullscreen {
			 display: none;
		 }
		
		.mobile-controls {
			display: block;	
		}
		
		.info-text, .thumb-container {	
		top: 0px;
	}
	
	.tumblr #ajax {
		width: 100%;
		margin-bottom: 20px;
	}
	
	.bx-caption {
		visiblity: hidden;	
	}
}