/*
  CREATIVE LICENSE PORTFOLIO
  Layout Stylesheet
  By James Barnsley
  July 2012
*/



* {
	margin: 0;
	padding: 0;
	border: 0; }

html {
	/*background: url('../images/page-background.gif') top center repeat-y #F9F9F9;*/
	background: #FFFFFF;}


	
	

	
/* ===================================================================================== */
/* ==================================================================== STRUCTURE ====== */
/* ===================================================================================== */

.inner {
	width: 96%;
	margin: 0 auto;
	background: #FFFFFF;}

.wide-layout .inner { width: 988px;}

.clear {
	height: 1px;
	clear: both;}

.hr {
	height: 1px;
	background: #000000;
	width: 100%;
	clear: both;}
	
.hr.padding {
	height: 35px;
	border-bottom: 1px solid #000000;
	background: none;
	margin-bottom: 35px;}
	
.hr.light-padding {
	height: 10px;
	border-bottom: 1px solid #000000;
	background: none;
	margin-bottom: 10px;}

.page-content {
	padding-bottom: 35px;}
	
	
	
	
/* --- article split (left/middle) --- */
	
article #left {
	float: left;
	width: 26%;}
	
article #middle {
	float: right;
	width: 72%;}
	
	
	
	
	
	
/* ===================================================================================== */
/* ========================================================================= HEAD ====== */
/* ===================================================================================== */


#head .inner {
	height: 100px;
	position: relative;}

#branding {
	display: block;
	position: absolute;
	top: 30px;
	left: 0px;
	width: 410px;
	height: 60px;
	background: url('../images/head-branding.gif') 0 0 no-repeat;}

	
/* --- fluid layouts --- */
	
.tiny-layout #head .inner {
	height: auto;
	padding-top: 60px;}
	
.narrow-layout #branding {
	width: 165px;}
	
.tiny-layout #branding {
	width: 115px;
	height: 40px;
	top: 12px;
	background: url('../images/head-branding-small.gif') 0 0 no-repeat;}
	



/* ================================= MAIN MENU ===== */


#menu-primary {
	position: absolute;
	top: 56px;
	right: -8px;}
	
	
	
/* --- sticky menu --- */

#page.sticky {
	padding-top: 100px;}
	
#page.sticky #head {
	width: 100%;
	position: fixed;
	top: 0;
	height: 50px;
	border-bottom: 1px solid #000000;
	background: #FFFFFF;
	z-index: 99;
	box-shadow: 0px 3px 4px rgba(0,0,0,0.1);}
	
#page.sticky #head .inner {
	height: 50px; }
	
#page.sticky #branding {
	background-image: url('../images/head-branding-skinny.gif'); 
	top: 13px;
	width: 180px;
	height: 30px;}
	
#page.sticky #menu-primary {
	top: 8px;}

	
	
	
	
/* --- mobile menu --- */

.tiny-layout #menu-primary {
	display: none;
	position: static;}

.tiny-layout #menu-primary.expanded {
	display: block;
	padding: 10px 0;
	background: #EEEEEE;
	border-top: 1px solid #000000;}
	
.tiny-layout #menu-primary a {
	display: block;
	padding: 8px;
	text-align: center;
	width: 100%;}
	
.tiny-layout #menu-primary .divider {
	display: none;}
	
	
	
	
	
/* ============================ MENU EXPANDER ======== */

.tiny-layout #menu-expander {
	display: block;}

#menu-expander {
	display: none;
	width: 32px;
	height: 32px;
	position: absolute;
	top: 0px;
	right: 0px;
	border: 14px solid #FFFFFF;
	background: url('../images/menu-expander.gif') 0 0 no-repeat;}
	
#menu-expander.expanded {
	background-position: 0 -32px;}
	
	

	

	
/* ===================================================================================== */
/* ========================================================================= BODY ====== */
/* ===================================================================================== */


table, td, tr {
	vertical-align: top;}
	


/* ================================= PAGE INTRO ===== */

#main header {
	padding: 30px 0;
	position: relative;}
	
#main header.has-background {
	padding: 45px 30px;}
	
#main header.project {
	padding-bottom: 10px;}
	
	
	
/* --- SERVICES --- */

#website-life-cycle {
	height: 200px;
	position: relative;}
	
#website-life-cycle * {
	z-index: 2;
	position: relative;}
	
#website-life-cycle img {
	position: absolute;
	z-index: 1;}
	
#website-life-cycle h1 {
	font-size: 28px;
	color: #FFFFFF;
	position: absolute;
	top: 66px;
	left: 30px;}
	
#website-life-cycle .steps {
	position: absolute;
	top: 20px;
	cursor: hand;
	cursor: pointer;
	width: 160px;}
	
#website-life-cycle .step-1 {	right: 500px;}
#website-life-cycle .step-2 {	right: 340px;}
#website-life-cycle .step-3 {	right: 180px;}
#website-life-cycle .step-4 {	right: 20px;}

#website-life-cycle .steps .step-background {
	opacity: 0;
	z-index: -1;}
	
#website-life-cycle .steps.current .step-background.white,
#website-life-cycle .steps:hover .step-background.white {
	opacity: 1;}
	

/* content */

.website-life-cycle.content {
	opacity: 0;}
	
.website-life-cycle.parent.content {
	opacity: 1;}
	

	
	

/* ================================= PAGE CONTENT ===== */
	
	
#main article {
	padding-top: 25px;
}

#main #project-grid {
	padding-top: 25px;
	padding-bottom: 25px;
}
	

/* --- columns --- */	
	
.column.third {
	width: 31.8%;
	padding-right: 2.2%;
	float: left;
	position: relative;}

.column.third.last {
	padding-right: 0;
	float: right;}
	
.column.two-third {
	width: 63.6%;
	padding-right: 2.2%;
	float: left;
	position: relative;}
	
.tiny-layout .column.third,
.tiny-layout .column.two-third {
	width: 100%;
	padding-right: 0;
	padding-bottom: 15px;
	float: none;}
	
	
.content-blurb {
	padding-top: 10px;}
	
.content-blurb.blog-item {
	padding-left: 25px;
	position: relative;}
	
.content-blurb.blog-item .blog-item-icon {
	position: absolute;
	top: 10px;
	left: 0;
	display: block;
	width: 16px;
	height: 16px;
	background-position: 0 0;
	background-repeat:no-repeat;}

	

/* === BODY SHOT IMAGE === */

.page-content img.james-barnsley-body-shot {
	position: absolute;
	top: -185px;
	right: 30px;
	pointer-events: none;}
	
	
	
	
	
	
/* ====================================== BLOG (resources) === */

.blog-summary {
	padding-bottom: 25px;}


	
/* ====================================== SMALL PROJECT GRID (3x projects in 1 col) === */

#small-project-grid .item {
	width: 47%;
	height: 110px;
	display: block;
	float: left;
	margin: 0 6% 6% 0;
	background-size: cover;}
	
#small-project-grid .item.last {
	margin-right: 0;}
	
#small-project-grid .item.title {
	background: #000000;}
	
#small-project-grid .item.title h3 {
	padding: 25px 20px;
	color: #FFFFFF;
	font-size: 22px;}
	
#small-project-grid .item.project h3 {
	display: none;}





/* ============================================= PROJECT GRID SLIDER ===== */
/* ======================================================================= */



/* --- pagination --- */

#project-grid {
	position: relative; }
	
#project-grid.pagination {
	height: 555px; }
	
.project-grid-page {
	position: absolute;
	left: 0;
	top: 25px;
	opacity: 0;
	width: 100%; }
	
.project-grid-page:first-child {
	opacity: 1;
	z-index: 9;
	left: 0; }
	
	
	
	
	
	
/* ============================== ITEM THUMBNAILS === */
		
.project-thumbnail {
	display: block;
	float: left;
	width: 309px;
	height: 235px; 
	margin: 0 30px 30px 0;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover; 
	opacity: 1; 
	overflow: hidden;
	position: relative;}
	
.project-thumbnail.end {
	margin-right: 0; }
	
.project-slider-image .title {
	display: none;}
	
.project-thumbnail .title {
	position: absolute;
	bottom: 0px;
	height: auto;
	left: 0;
	width: 100%;
	padding: 8px 0 8px 14px;
	background: rgba(0,0,0,0.7);
	color: #FFFFFF;
	font-size: 18px;
	font-family: 'Archivo Narrow', Arial, sans-serif;}

.project-thumbnail .title .readmore {
	position: absolute;
	right: 0;
	padding-right: 40px;
	height: 20px;
	width: 20px;
	opacity: 0;
	background: url('../images/project-thumbnail-arrow.png') 0 0 no-repeat;}



/* --- NEXT/PREVIOUS PAGE BUTTONS --- */

.project-grid-control {
	width: 200px;
	height: 50px;
	cursor: hand;
	cursor: pointer;
	background-repeat: no-repeat;
	position: absolute;
	bottom: -25px;}
	
.project-grid-control .label {
	display: inline-block;
	font-family: 'Archivo Narrow',Arial,sans-serif;
	font-size: 22px;
	padding: 11px 75px 0;}
	
.project-grid-control.next {
	background-image: url('../images/project-slider-controls-next.png'); 
	background-position: 100% 19%;
	right: 0;
	text-align: right;}
	
.project-grid-control.previous {
	background-image: url('../images/project-slider-controls-previous.png'); 
	background-position: 0% 19%;
	left: 0;
	text-align: left;}
	
.project-grid-control.previous:hover {	background-position: 0% 81%; }
.project-grid-control.next:hover {		background-position: 100% 81%; }
	
	




/* =========================================== SINGLE-PROJECT SLIDER ===== */
/* ======================================================================= */

#project-slider {
	position: relative;
	height: 378px;
	width: 100%;
}
	
.HomePage #project-slider {
	margin-top: 25px;}
	
.project-slider-image {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: 1;
	width: 100%;}
	
.project-slider-image img {					width: 87%; }
.wide-layout .project-slider-image img {	width: auto; }
	
.project-slider-image:first-child {
	z-index: 9;
	opacity: 1;
	left: 0; }


/* homepage */

.project-slider-image.featured-project:hover img {
	opacity: 0.7;}
	
.project-slider-image.featured-project:hover h2 {
	display: block;
	position: absolute;
	top: 44%;
	left: 35%;
	padding: 14px 20px;
	background: #333333;
	color: #FFFFFF;
	font-size: 26px;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.3);}
	

	

/* --- FULL-VIEW IMAGE NAVIGATION --- */
	
.project-slider-control {
	display: block;
	height: 126px;
	right: 3px;
	position: absolute;
	/*background-color: #413e3c;*/
	cursor: hand;
	cursor: pointer;
	background-position: 50% 0%;
	background-repeat: no-repeat;
	z-index: 10; }
	
.project-slider-control {				width: 10%; }
.wide-layout .project-slider-control {	width: 126px; }
	
.project-slider-control:hover {
	background-position: 50% 100% }

.project-slider-control.next {
	background-image: url('../images/project-slider-controls-next.png'); 
	top: 0px; }
	
.project-slider-control.previous {
	background-image: url('../images/project-slider-controls-previous.png');
	top: 126px; }

.project-slider-control.launch {
	background-image: url('../images/project-slider-controls-launch.png');
	top: 252px;}

.project-slider-control.launch.view-all-work {
	background-image: url('../images/project-slider-controls-view-all-work.png');}

	
	

	
/* ===================================================================================== */
/* ========================================================================= FOOT ====== */
/* ===================================================================================== */
	
#foot .inner {
	background: none;
	padding-top: 35px;
	padding-bottom: 35px;}