@charset "utf-8";
/* CSS Document */
html { 
	height: 100%;
	margin:0;
	padding:0;
}
body {
	height: 100%;
	padding:0;
	margin: auto;            /* you'll see why later */
	letter-spacing: -0.31em;/* webkit: collapse white-space between units */
	*letter-spacing: normal;/* reset IE < 8 */
	word-spacing: -0.43em;  /* IE < 8 && gecko: collapse white-space between units */
}

.grid-block {
	letter-spacing: normal; /* reset */
	word-spacing: normal;   /* reset */
	text-align: left;        /* reset */
	display: inline-block;   /* styling all grid-wrapper as inline blocks */
	vertical-align: top;     /* aligning those boxes at the top */
	*display: inline;        /* IE hack to mimic inline-block */
	zoom: 1;                 /* part of the above hack for IE */
	width: 100%;             /* boxes would shrink-wrap  */
}
hr {
	background-color: #000000;
	color: #000000;
	height: 4px;
}
a img {
	border: none; 			/* removes blue border that appears in IE  */
}
#buttonbar button{
	color: #093;
	background: #033;
	border: none;
	position: absolute;
	top: 120px;
	left: 200px;
	z-index: 2;
	}
.clear {
	clear: both;
}


/******************************************
Default and portrait iPhones 3 - 5, small screen phones landscape and portrait
******************************************/




#website {
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
#home {
	position: relative;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
 	background-image: url(../images/home_mesh.png);
	background-repeat: repeat;
}
#home .bylogo_white {
	height: 76px;
	width: 76px;
	margin: 5% 0% 0% 5%;  
	padding: -5% 0% -0% -5%; /* 0% padding-right for Safari 4 bug */
}
#home hr.belowlogo {
	display: block;
	margin: 5% 5% 0% 5%;
	padding: -5% -5% -0% -5%;
	background-color: #FFFFFF;
	color: #FFFFFF;
	text-align: left; /* needed to left align in IE */
}
#home p {
	width: 90%;
	margin: 5% 5% 0% 5%;
	padding: -5% -5% -0% -5%;
    letter-spacing: normal; /* reset */
    word-spacing: normal; /* reset */
    font-family: 'quicksandbold';
	color: #ffffff;
	font-size: 14px;
}
#home #longerintro {
	display: none;
}
#home #clickintro {
	display: none;
}
#home a img.clickdown {
	display: none;
}


/**
Central Columns
**/


#wrapper_scroll_bg { /* overflow and max-height removed as no scrollbars on touchscreen */
	top: 100%;
	background-color: #FFF;
}
#logonav {
    font-family: 'source_sans_prolight';
	color: #000000;
	margin-bottom: 3%;
	padding-bottom: -3%;
}
#logonav .toppanel {
	float: left;
	height: 76px;
	width: 76px;
	margin: 5% 0 2% 5%;
	padding: -5% 0 -2% -5%;
}
/* See thumbnails section below for fading rollover state on BY logo in toppanel */
#logonav hr {
	margin: 0;
	padding: 0;
}
#logonav hr.belowlogo {
	display: none;
}
#logonav hr.belowparagraph {
	display: none;
}
#logonav p {
	display: none;
}
#logonav p a {
	color: #000000;
}


/**
Navigation
**/


#navigation {
	float: right;
	height: 76px;
	width: 210px;
	margin: 5% 5% 0 0;
	padding: -5% -5% 0 0;
}
#navigation ul {
	list-style: none;
	font-size: 16px;
	margin: -2px;
	padding: 0px;
}
/* CSS for each Parent Item */
#navigation ul li {
	clear: both;
}
#navigation ul li a {
	float: right;
	display: block;
	line-height: 14px;
	font-family: 'source_sans_prolight';
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	margin: 0px;
	padding: 3px;
}
#navigation ul li a.nav_arrow {
	display: block;
	width: 9px;
	height: 20px;
	background-image: url(../images/nav_arrow_blackwhite_back.gif);
	background-position: bottom;
	text-indent: -99999px;
}
.nav_up {
	color: #000;
	background-color: transparent;
}
.nav_over {
	color: #fff;
	background-color: #000;
}
.nav_clicked {
	color: #fff;
	background-color: #000;
}
/* CSS for filter menu */
#navigation ul ul {
	margin-top: 0px;
	float: right;  /* For Safari iOS to make child items inline with parent */
	*float: right;  /* IE6&7 hack to make child items inline with parent */
	*margin: 0px;   /* IE6&7 hack to make child items inline with parent */
	*padding: 0px;  /* IE6&7 hack to make child items inline with parent */
	display: none;
}
#navigation  ul ul li {
	float: right;
	clear: none;
}
#navigation  ul ul li a{
	font-size: 11px;
	text-transform: uppercase;
	color: #888;
	background: #000;
}
/* Change font color of filter menu items when mouse hover */
#navigation ul ul li:hover a,
#navigation ul ul li a:hover {
	color: #fff;
}
#navigation a.filter-current {
	color: #fff;
}
/* CSS for sub menu */
#navigation .brand,
#navigation .digital,
#navigation .print {
	display: none;	
}
#navigation .brand a,
#navigation .digital a,
#navigation .print a {
	text-transform: none;
	font-size: 14px;
}


/**
Thumbnails
**/


#fourthcolumn {
	display: none;
}

#secondcolumn .toppanel,
#thirdcolumn .toppanel,
#fourthcolumn .toppanel {
	display: none;
}
#secondcolumn hr {
	margin: 5%;
	padding: -5%;
}
#thirdcolumn hr,
#fourthcolumn hr {
	display: none;
}
#secondcolumn ul,
#thirdcolumn ul {
	margin: 0;
	padding: 0;
	border: 0;
}
#fourthcolumn ul {
	display: none;
}
#secondcolumn li,
#thirdcolumn li,
#fourthcolumn li {
	width: 90%;
	margin: 0% 5% 10% 5%;
	padding: 0% -5% -10% -5%;
	border: 0;
	list-style: none;
	background-color:#000;
}
#secondcolumn li a,
#thirdcolumn li a {
	margin: 0;
	padding: 0;
	border: 0;
}
#fourthcolumn li a {
	margin: 0;
	padding: 0;
	border: 0;
}
#thirdcolumn .socialMediaIcon {
	display: block;
	float: right;
	height: 32px;
	width: 32px;
	margin: 44px 0 0 8px;
	padding: -44px 0 0 -8px;
}
#secondcolumn img.thumb-infopanel ,
#thirdcolumn img.thumb-infopanel ,
#fourthcolumn img.thumb-infopanel  {
	vertical-align: bottom; /* removes unwanted space below thumbnails */
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}
#logonav .socialpanel a img,
#logonav .toppanel a img,
#secondcolumn a img,
#thirdcolumn a img,
#fourthcolumn a img {
	vertical-align: bottom; /* removes unwanted space below thumbnails */
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 1.0;
	-ms-filter: "progid:DXImageTransform.Microsoft. »
	Alpha(Opacity=25)"; /* IE 8 hack */
	filter: alpha(opacity = 100); /* IE 5-7 hack */
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}
#logonav .socialpanel a:hover img,
#logonav .socialpanel a:focus img, 
#logonav .toppanel a:hover img,
#logonav .toppanel a:focus img, 
#secondcolumn a:hover img,
#secondcolumn a:focus img, 
#thirdcolumn a:hover img,
#thirdcolumn a:focus img,
#fourthcolumn a:hover img,
#fourthcolumn a:focus img {
	opacity: 0.7;
	-ms-filter: "progid:DXImageTransform.Microsoft. »
	Alpha(Opacity=60)"; /* IE 8 hack */
	filter: alpha(opacity = 70); /* IE 5-7 hack */
}
#thirdcolumn li.thumb-half-width-lhs,
#fourthcolumn li.thumb-half-width-lhs {
	float: left;
	width: 40%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0% 5% 10% 5%;
	padding: 0% -5% -10% -5%;
	text-wrap: none;
}
#thirdcolumn li.thumb-half-width-rhs,
#fourthcolumn li.thumb-half-width-rhs {
	float: right;
	width: 40%;
	margin: 0% 5% 10% 5%;
	padding: 0% -5% -10% -5%;
	border: 0;
}


/**
About & Contact & Project
**/


#fullwidthcolumn {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}


/**
About & Contact
**/


#fullwidthcolumn .toppanel {
	display: none;
}
#fullwidthcolumn .socialMediaIcon {
	display: block;
	float: right;
	height: 32px;
	width: 32px;
	margin: 44px 0 0 8px;
	padding: -44px 0 0 -8px;
}
#contactpanel .socialMediaIcon {
	float: left;
	margin: 4px 8px 0 0;
	padding: -4px -8px 0 0;
}
#contactpanel {
	position: relative;
	margin: 5%;
	padding: -5%;
	background-color: #e83121;
}
#contactpanel .RHSimage {
	position: relative;
	vertical-align: bottom;
	visibility: hidden;
	width: 83%;
	margin:  4% 0% 0% 17%;
	padding: -4% -0% -0% -17%;
}
#contactpanel .LHStxtblock {
	position: absolute;
	bottom: 5%;
	left: 5%;
	margin: 0%;
	padding: -0%;
	width: 90%;
}
.aboutpanel_all {
	position: relative;
}
#aboutpanel_history {
	margin: 5% 5% 0% 5%;
	padding: -5% -5% -0% -5%;
	background-color: #da943e;
}
#aboutpanel_awards {
	margin: 0% 5% 0% 5%;
	padding: -0% -5% -0% -5%;
	background-color: #e9cacd;
}
#aboutpanel_education {
	margin: 0% 5% 0% 5%;
	padding: -0% -5% -0% -5%;
	background-color: #40618a;
}
#aboutpanel_skills {
	margin: 0% 5% 0% 5%;
	padding: -0% -5% -0% -5%;
	background-color: #e8e8e6;
}
#aboutpanel_experience {
	margin: 0% 5% 5% 5%;
	padding: -0% -5% -5% -5%;
	background-color: #439e9f;
}
.aboutpanel_all .RHSimage,
.aboutpanel_all .LHSimage {
	position: relative;
	vertical-align: bottom;
	visibility: hidden;
}
#aboutpanel_skills .LHSimage {
	width: 75%;
	margin:  1% 0% 0% 0%;
	padding: -1% -0% -0% -0%;
}
#aboutpanel_experience img {
	position: absolute;
	width: 60%;
	margin: 0% 0% 0% 40%;
	padding: -0% -0% -0% -40%;
	visibility: hidden;
}
.aboutpanel_all .LHStxtblock {
	position: absolute;
	bottom: 5%;
	left: 5%;
	margin: 0%;
	padding: -0%;
	width: 90%;
}
.aboutpanel_all .RHStxtblock {
	position: absolute;
	text-align: right;
	bottom: 5%;
	right: 5%;
	margin: 0%;
	padding: -0%;
	width: 90%;
}
#contactpanel h2 {
	font-family: 'source_sans_prolight';
	font-size: 35px;
	line-height: 35px;
	color: #ffec94;
	margin: 0% 0% 2% 0%;
	padding: -0% -0% -2% -0%;
}
.aboutpanel_all h2 {
	font-family: 'source_sans_prolight';
	font-size: 35px;
	line-height: 35px;
	color: #FFF;
	margin: 0% 0% 2% 0%;
	padding: -0% -0% -2% -0%;
}
#contactpanel p {
	font-family: 'source_sans_prolight';
	font-size: 14px;
	color: #ffec94;
	margin: 0% 0% 2% 0%;
	padding: -0% -0% -2% -0%;
}
.aboutpanel_all p {
	font-family: 'source_sans_prolight';
	font-size: 14px;
	margin: 0% 0% 2% 0%;
	padding: -0% -0% -2% -0%;
}
#aboutpanel_skills h2 {
	margin: 0% 5% 0% 5%;
	padding: -0% -5% -0% -5%;
	text-align: right;
}
#aboutpanel_skills ul {
	list-style-type: none;
	margin: 0%;
	padding: -0%;
}
#aboutpanel_skills li {
	list-style-type: none;
	margin: 0% 5% 0% 5%;
	padding: -0% -5% -0% -5%;
}
#aboutpanel_skills p {
	display: inline-block;
	text-align: right;
	width: 25%;
	margin: 0%;
	padding: -0%;
}
#aboutpanel_experience h2 {
	margin: 0% 25% 0% 5%;
	padding: -0% -25% -0% -5%;
}
#aboutpanel_experience h3 {
	font-family: 'source_sans_prolight';
	font-size: 14px;
	font-weight: bold;
	margin: 0% 25% 0% 5%;
	padding: -0% -25% -0% -5%;
}
#aboutpanel_experience p {
	margin: 0% 25% 0% 5%;
	padding: -0% -25% -0% -5%;
}
#aboutpanel_experience #spacerdiv {
	height: 166px;
	margin: 0%;
	padding: -0%;
}
#aboutpanel_experience div:last-child,
#aboutpanel_skills div:last-child {
	height: 1px;
	margin: 4% 0% 0% 0%;
	padding: -4% -0% -0% -0%;
}
#aboutpanel_skills div:first-child {
	height: 1px;
	margin: 0% 0% 10% 0%;
	padding: -0% -0% -10% -0%;
}


/**
Project 
**/


#project_titlevidpanel {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #000;
}
#project_titlevidpanel #videocover {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
#project_titlevidpanel #videocover img {
   	position: absolute;
   	top: 50%;
   	width: 100%;
   	margin-top: -50%; 
}
#project_titlevidpanel .proj_playbutn_panel { 
	position: absolute; 
	z-index: 5; 
	width: 20%; 
	height: 64px; 
	top: 38%; 
	left: 40%; 
	text-align: center;
}
.centrevid {
	position: relative;
	width: 100%    !important;
	height: auto   !important;
	max-width: 640px;
	margin: 0px auto;
}
.centrevid_wider_withoutCanvas {
	position: static;
	height: 56.25%;
}
.centrevid_narrower_withoutCanvas {
	position: static;
	height: 74.895397489%;
	max-width: 478px;
}
.proj_titlevid {
	position: absolute;
	width: 100%    !important;
	height: 100%   !important;
	max-width: 640px;
}
.proj_titlevid_wider_withoutCanvas { 
	position: static;
	height: 56.25%;
}
.proj_titlevid_narrower_withoutCanvas { 
	position: static;
	height: 74.895397489%;
	max-width: 478px;
}
.canvasforvid { /* canvas div required to make elastic video work in ios 6 and 7 */
	width: 100%    !important;
	height: auto   !important;
	max-width: 640px;
}
#project_titlebuttons {
	position: absolute; 
	z-index: 5;
	width: 95%;
	margin-top: 5%;
	padding-top: -5%;
}
#project_titlebuttons a {
	float: right;
	width: 32px;
	height: 32px;
	margin-left: 4px;
	padding-left: -4px;
}
#project_titlebuttons a img,
#project_titleblock a img { 
	opacity: 1.0;
	-ms-filter: "progid:DXImageTransform.Microsoft. »
	Alpha(Opacity=25)"; /* IE 8 hack */
	filter: alpha(opacity = 100); /* IE 5-7 hack */
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}
#project_titlebuttons a:hover img,
#project_titlebuttons a:focus img,
#project_titleblock a:hover img,
#project_titleblock a:focus img { 
	opacity: 0.7;
	-ms-filter: "progid:DXImageTransform.Microsoft. »
	Alpha(Opacity=60)"; /* IE 8 hack */
	filter: alpha(opacity = 70); /* IE 5-7 hack */
}
.inactive_projButn {
	background-color: #fff;
}
#project_titleblock {
	position: relative;
	z-index: 5;
	margin-top: -50px;
	padding-top: 50px;
}
#project_titleblock h2 {
	font-family: 'source_sans_prolight';
	font-size: 50px;
	line-height: 46px;
	font-weight: 100;
	color: #FFFFFF;
	margin: -40px 0 0 4%;
	padding: 40px 0 0 -4%;
}
#project_titleblock h3 {
	font-family: 'source_sans_prolight';
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	margin: 28px 0 0 4.5%;
	padding: -28px 0 0 -4.5%;
}
#project_titleblock p {
	font-family: 'source_sans_prolight';
	font-size: 14px;
	color: #FFFFFF;
	margin: 8px 33.33% 0 4.5%;
	padding: -8px -33.33% 0 -4.5%;
}
/*#project_titleblock p a {
	font-family: 'source_sans_prolight';
	font-size: 14px;
	text-decoration: none;
	text-transform:uppercase;
	font-weight:bold;
	color: #FFFFFF;
}*/
.project_image {
	position: relative;
	z-index: 4;
	display: block;
}
#image_rhs {
	text-align: right;
	width: 100%;
}
#image_lhs {
	text-align: left;
	width: 100%;
}
#image_rhs img{
	max-width: 80%; /**/
}
#image_lhs img{
	max-width: 80%;
}
#image_rhs .image_caption{
	margin: -7% 0 15% 20%;
	padding: 7% 0 -15% -20%;
}
#image_lhs .image_caption{
	margin: -7% 20% 15% 0;
	padding: 7% -20% -15% 0;
}
.project_image p {
	font-family: 'source_sans_prolight';
	font-size: 12px;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
}
#image_rhs p {
	text-align: left;
}
#image_lhs p {
	max-width: 800px;
	text-align: right;
}
.project_image .project_horizline {
	height: 1px;
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
}
#image_lhs .project_horizline {
	max-width: 800px;
}

#demovid {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #000;
}
#demovid .duplexflythrough {
	width: 800px;
	margin: 0 auto;

}/**/
#demovid .demovid_vid {
	width: 100%;
}

.proj01 {
	background-image: url(../images/work_title_proj01_mesh.png);
	background-repeat: repeat-x;
}
.proj01 h3 {
	color: #CF0;
}
.proj01_column {
	background-color: #016c98;
}
.proj02 {
	background-image: url(../images/work_title_proj02_mesh.png);
	background-repeat: repeat-x;
}
.proj02 h3 {
	color: #ddd911;
}
.proj02_column {
	background-color: #272511;
}
.proj03 {
	background-image: url(../images/work_title_proj03_mesh.png);
	background-repeat: repeat-x;
}
.proj03 h3 {
	color: #2db1e1;
}
.proj03_column {
	background-color: #023664;
}
.proj04 {
	background-image: url(../images/work_title_proj04_mesh.png);
	background-repeat: repeat-x;
}
.proj04 h3 {
	color: #c8d700;
}
.proj04_column {
	background-image: url(../images/work_doyles_bgtile.jpg);
	background-repeat: repeat;
}
.proj05 {
	background-image: url(../images/work_title_proj05_mesh.png);
	background-repeat: repeat-x;
}
.proj05 h3 {
	color: #d2ab30;
}
.proj05_column {
	background-image: url(../images/work_wedding_bgtile.jpg);
	background-repeat: repeat;
}
.proj06 {
	background-image: url(../images/work_title_proj06_mesh.png);
	background-repeat: repeat-x;
}
.proj06 h3 {
	color: #65cbc9;
}
.proj06_column {
	background-color: #0a2a3b; 
}/**/
.proj07 {
	background-image: url(../images/work_title_proj07_mesh.png);
	background-repeat: repeat-x;
}
.proj07 h3 {
	color: #ced54b;
}
.proj07_column {
	background-image: url(../images/work_growproj_bgtile.jpg);
	background-repeat: repeat;
}
.proj08 {
	background-image: url(../images/work_title_proj08_mesh.png);
	background-repeat: repeat-x;
}
.proj08 h3 {
	color: #cdbd76;
}
.proj08_column {
	background-color: #175375;
}
.proj09 {
	background-image: url(../images/work_title_proj09_mesh.png);
	background-repeat: repeat-x;
}
.proj09 h3 {
	color: #f0b72b;
}
.proj09_column {
	background-color: #911b1d;
}
.proj10 {
	background-image: url(../images/work_title_proj10_mesh.png);
	background-repeat: repeat-x;
}
.proj10 h3 {
	color: #dfffdd;
}
.proj10_column {
	background-color: #637162;
}
.proj11 {
	background-image: url(../images/work_title_proj11_mesh.png);
	background-repeat: repeat-x;
}
.proj11 h3 {
	color: #ffff78;
}
.proj11_column {
	background-image: url(../images/work_3drender_bgtile.jpg);
	background-repeat: repeat;
}
.proj12 {
	background-image: url(../images/work_title_proj12_mesh.png);
	background-repeat: repeat-x;
}
.proj12 h3 {
	color: #ffa839;
}
.proj12_column {
	background-color: #457c8a;
}

#image_rhs_70percent {
	text-align: right;
	width: 100%;
}
#image_rhs_70percent img{
	max-width: 70%;
	margin-right: 5%;
	padding-right: -5%;
}
.image_shiftup {
	margin: 2% 0 -25% 0;
	padding: -2% 0 25% 0;
}
#image_lhs_70percent {
	text-align: left;
	width: 100%;
}
#image_lhs_70percent img{
	max-width: 70%;
}
#image_lhs_55percent {
	text-align: left;
	width: 100%;
}
#image_lhs_55percent img{
	max-width: 55%;
	margin-left: 5%;
	padding-left: -5%;
}
#image_rhs_35percent {
	text-align: right;
	width: 100%;
}
#image_rhs_35percent img{
	width: 35%;
	margin-right: 5%;
	padding-right: -5%;
}
#image_rhs_35percent .image_caption{
	margin: -7% 0 -15% 60%;
	padding: 7% 0 15% -60%;
}
#image_rhs_35percent p {
	text-align: left;
}
#image_lhs_92percent {
	text-align: left;
	width: 100%;
}
#image_lhs_92percent img{
	width: 92%;
}
#image_lhs_92percent .image_caption {
	margin: -7% 8% 15% 0;
	padding: 7% -8% -15% 0;
}
#image_lhs_92percent p {
	text-align: right;
}


/**
Footer 
**/


#footer {
	background-color: #000000;
}
#footer .toppanel {
	margin-top: 5%;
}
#footer ul {
	margin: 0;
	padding: 0;
}
#footer li { 
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
    font-family: 'source_sans_prolight';
	font-size: 14px;
	color: #FFFFFF;
	text-decoration: none;
	text-transform: none;
}
#footer h2 {
	margin: 0 0 8px 0;
	padding: 0 0 -8px 0;
    font-family: 'source_sans_prolight';
	font-size: 14px;
	color: #FFFFFF;
	text-decoration: none;
	text-transform: uppercase;
}
#footer a {
	margin: 0;
	padding: 0;
    font-family: 'source_sans_prolight';
	font-size: 14px;
	color: #FFFFFF;
	text-decoration: none;
	text-transform: none;
}
#footer p {
	margin: 0 20% 0 0;
	padding: 0 -20% 0 0;
    font-family: 'source_sans_prolight';
	font-size: 14px;
	color: #FFFFFF;
	text-decoration: none;
	text-transform: none;
}
#logonav .socialpanel {
	height: 76px;
	float: right;
	margin: 5% 5% 0 0;
	padding: -5% -5% 0 0;
}
#logonav .socialpanel h2 {
	text-align: right;
	margin: 0 0 8px 8px;
	padding: 0 0 -8px -8px;
}
#logonav .socialpanel a img {
	display: block;
	float: right;
	height: 32px;
	width: 32px;
	margin: 0 0 0 8px;
	padding: 0 0 0 -8px;
}
#secondcolumn .toppanel a img {
	display: block;
	float: left;
	height: 32px;
	width: 32px;
	margin: 0 8px 0 0;
	padding: 0 -8px 0 0;
}
}


/**
Landscape orientation styles - if less than 470 wide in landscape mode
**/


@media only screen and (max-width: 469px) and (orientation: landscape) {
#home #shorterintro {
	display: block;
}
#home #nonessentialintro {
	display: none;
}
}



/******************************************
470 - portrait iPad, landscape iPhones 3 to 5, most android phones 
******************************************/



@media only screen and (min-width: 470px) and (max-width: 849px) {
#home_info {
	display:block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
}
#home hr.belowlogo {
	width: 42.5%;
}
#home p {
	width: 42.5%;
}
#home #shorterintro {
	display: block;
}


/**
Central Columns
**/


#wrapper_work {
	display: block;
	margin: auto;
}


/**
Navigation
**/


#navigation ul ul li a {
	font-size: 12px;
}


/**
Thumbnails
**/


#secondcolumn {
	float: left;
	width: 47.5%;
	margin-left: 2.5%;
	padding-left: -2.5%;
}
#secondcolumn hr {
	margin: 10% 5%;
	padding: -10% -5%;
}
#thirdcolumn {
	width: 47.5%;
}
#thirdcolumn hr {
	display: block;
	margin: 10% 5%;
	padding: -10% -5%;
}

/**
About & Contact
**/


#contactpanel .RHSimage {
	visibility: visible;
	width: 65%;
	margin: 10% 0% 2% 35%;
	padding: -10% -0% -2% -35%;
}
#contactpanel .LHStxtblock {
	bottom: 20%;
	left: 5%;
	margin: 0%;
	padding: -0%;
	width: 55%;
}
.aboutpanel_all .RHSimage,
.aboutpanel_all .LHSimage {
	visibility: visible;
}
#aboutpanel_history .RHSimage {
	width: 40%;
	margin: 8% 0% 0% 60%;
	padding: -8% -0% -0% -60%;
}
#aboutpanel_awards .LHSimage {
	width: 40%;
	margin: 8% 60% 0% 0%;
	padding: -8% -60% -0% -0%;
}
#aboutpanel_education .RHSimage {
	width: 40%;
	margin: 8% 0% 0% 60%;
	padding: -8% -0% -0% -60%;
}
#aboutpanel_experience img {
	visibility: visible;
}
.aboutpanel_all .LHStxtblock {
	position: absolute;
	bottom: 5%;
	left: 5%;
	margin: 0%;
	padding: -0%;
}
#aboutpanel_history .LHStxtblock,
#aboutpanel_awards .RHStxtblock,
#aboutpanel_education .LHStxtblock {
	margin: 0%;
	padding: -0%;
	width: 53%;
}



/**
Project
**/

	
	
}



/**
Landscape orientation - between 470 and 849 wide when in landscape mode
**/

@media only screen and (min-width: 470px) and (max-width: 849px) and (orientation: landscape) {
#home #longerintro {
	display: none;
}
#home #shorterintro {
	display: block;
}
#home #nonessentialintro {
	display: none;
}

}



/******************************************
850 - Landscape iPad, Desktop, landscape large screen android phones
******************************************/



@media only screen and (min-width: 850px) and (max-width: 1359px) {
html {
	overflow-y: hidden;  /* remove vertical scrollbar (has to be on html tag in ie6&7) */
}
#home_info {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
}
#home .bylogo_white {
	margin: 10% 0% 0% 3.333%;
	padding: -10% 0% -0% -3.333%; /* 0% padding-right for Safari 4 bug */
}
#home hr.belowlogo {
	display: block;
	width: 28.333%;
	margin: 3% 3.333% 0% 3.333%;
	padding: -3% -3.333% -0% -3.333%;
}
#home p {
	width: 28.333%;
	margin: 3% 3.333% 0% 3.333%;
	padding: -3% -3.333% -0% -3.333%;
}
#home #shorterintro,
#home #longerintro {
	display: block;
}
#home #clickintro {
	display: inline;
}
#home #scrollintro {
	display: none;
}
#home a img.clickdown {
	height: 32px;
	width: 32px;
	margin: 3% 3.333% 0% 3.333%;
	padding: -3% -3.333% -0% -3.333%;
	display: block;
}


/**
Central Columns
**/


.no-touch #wrapper_scroll_bg { /* .no-touch is a Modernizr class to detect non touch screens - the two styles below add a vertical scrollbar */
	max-height: 100%;
	overflow-y: auto;
}
#wrapper_work {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
	padding-bottom: 0%;
}
#logonav {
	width: 33.333%;
}
#logonav .toppanel {
	float: none;
	margin:  30% 10% 0 10%;
	padding:  -30% -10% 0 -10%;
}
#logonav hr {
	margin: 9% 5% 0 10%;
	padding: -9% -5% 0 -10%;
}
#logonav hr.belowlogo {
	display: block;
	margin: 10% 5% 0 10%;
	padding: -10% -5% 0 -10%;
}
#logonav hr.belowparagraph {
	display: block;
	margin: 9% 5% 9% 10%;
	padding: -9% -5% -9% -10%;
}
#logonav p {
	display: block;
	margin: 9% 5% 0 10%;
	padding: -9% -5% 0 -10%;
	font-size: 16px;
}


/**
Navigation
**/


#navigation {
	float: none;
	width: 90%;
	height: 100%;
	margin: 0 0 0 10%;
	padding: 0 0 0 -10%;
}
#navigation ul li a {
	float: left;
}
#navigation ul li a.nav_arrow {
	background-image: url(../images/nav_arrow_blackwhite_fwd.gif);
}
#navigation ul ul {
	*float: left;  /* IE6&7 hack to make child items inline with parent */
	float: left;  /* For Safari iOS to make child items inline with parent */
}
#navigation ul ul li {
	float: left;
}
#navigation ul ul li a {
	font-size: 12px;
}
#navigation .brand,
#navigation .digital,
#navigation .print {
	display: block;
}


/**
Thumbnails
**/


#secondcolumn,
#thirdcolumn {
	width: 33.333%;
}
#thirdcolumn .toppanel,
#secondcolumn .toppanel {
	display: block;
	height: 76px;
	margin: 30% 5% 10% 5%;
	padding: -30% -5% -10% -5%;
}
#secondcolumn hr {
	display: block;
	margin: 10% 5%;
	padding: -10% -5%;
}
#thirdcolumn hr {
	display: block;
	margin: 10% 5%;
	padding: -10% -5%;
}


/**
About & Contact & Project
**/


#fullwidthcolumn {
	width: 63.3333%;
	margin: 0% 0% 0% 1.6666%;
	padding: -0% -0% -0% -1.6666%;
}


/**
About & Contact 
**/


#fullwidthcolumn .toppanel {
	display: block;
	height: 76px;
	margin: 16.25% 0% 0% 0%;
	padding: -16.25% -0% -0% -0%;
}
#fullwidthcolumn hr {
	display: block;
	margin: 4.75% 0%;
	padding: -4.75% -0%;
}
#contactpanel {
	margin: 0% 0% 4.75% 0%;
	padding: -0% -0% -4.75% -0%;
}
#contactpanel .RHSimage {
	visibility: visible;
	width: 60%;
	margin: 5.75% 0% 3.75% 40%;
	padding: -5.75% -0% -3.75% -40%;
}
#contactpanel .LHStxtblock {
	bottom: 25%;
	left: 4.75%;
	margin: 0%;
	padding: -0%;
	width: 50%;
}
#aboutpanel_history,
#aboutpanel_awards,
#aboutpanel_education,
#aboutpanel_skills {
	margin: 0%;
	padding: -0%;
}
#aboutpanel_experience {
	margin: 0% 0% 4.75% 0%;
	padding: -0% -0% -4.75% -0%;
}
.aboutpanel_all .RHSimage,
.aboutpanel_all .LHSimage {
	visibility: visible;
}
#aboutpanel_history .RHSimage {
	width: 30%;
	margin: 4.75% 0% 0% 70%;
	padding: -4.75% -0% -0% -70%;
}
#aboutpanel_awards .LHSimage {
	width: 30%;
	margin: 4.75% 70% 0% 0%;
	padding: -4.75% -70% -0% -0%;
}
#aboutpanel_education .RHSimage {
	width: 30%;
	margin: 4.75% 0% 0% 70%;
	padding: -4.75% -0% -0% -70%;
}
#aboutpanel_experience img {
	visibility: visible;
}
.aboutpanel_all .LHStxtblock {
	bottom: 4.75%;
	left: 4.75%;
}
#aboutpanel_history .LHStxtblock,
#aboutpanel_awards .RHStxtblock,
#aboutpanel_education .LHStxtblock {
	margin: 0%;
	padding: -0%;
	width: 60.5%;
}
#contactpanel h2,
.aboutpanel_all h2 {
	font-size: 45px;
	line-height: 45px;
}
#aboutpanel_experience #spacerdiv {
	height: 200px;
}


/**
Project 
**/




/**
Footer 
**/


#logonav .socialpanel {
	display: none;
}
#footer .toppanel {
	margin-top: 10%;
	padding-top: -10%;
}
	
	
}



/**
Landscape orientation - between 850 and 1020 wide when in landscape mode 
**/


@media only screen and (min-width: 850px) and (max-width: 1020px) and (orientation: landscape) {
#home #longerintro {
	display: none;
}
#home #shorterintro {
	display: block;
}
#home #nonessentialintro {
	display: inline;
}


}



/******************************************
1360 - Widescreen laptops and desktops 
******************************************/



@media only screen and (min-width: 1360px) {
html {
	overflow-y: hidden;  /* remove vertical scrollbar (has to be on html tag in ie6&7) */
}
#home_info {
	display:block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
}
#home .bylogo_white {
	margin: 8.5% 0% 0% 2.8333%;
	padding: -8.5% 0% -0% -2.8333%; /* 0% padding-right for Safari 4 bug */
}
#home hr.belowlogo {
	display: block;
	width: 24.2857%;
	margin: 2.55% 2.8333% 0% 2.8333%;
	padding: -2.55% -2.8333% -0% -2.8333%;
}
#home p {
	width: 24.2857%;
	margin: 2.55% 2.8333% 0% 2.8333%;
	padding: -2.55% -2.8333% -0% -2.8333%;
}
#home #shorterintro,
#home #longerintro {
	display: block;
}
#home #clickintro {
	display: inline;
}
#home #scrollintro {
	display: none;
}
#home a img.clickdown {
	height: 50px;
	width: 50px;
	margin: 2.55% 2.8333% 0% 2.8333%;
	padding: -2.55% -2.8333% -0% -2.8333%;
	display: block;
}


/**
Central Columns
**/


#wrapper_scroll_bg {  /* The two styles below add a vertical scrollbar */
	max-height: 100%;
	overflow-y: auto;
}
#wrapper_work {
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: auto;
	padding-bottom: 0%;
}
#logonav {
	display: block;
	float: left;
	width: 25%;
}
#logonav .toppanel {
	float: none;
	margin: 30% 10% 0 10%;
	padding: -30% -10% 0 -10%;
}
#logonav hr {
	margin: 10% 5% 10% 10%;
	padding: -10% -5% -10% -10%;
}
#logonav hr.belowlogo {
	display: block;
}
#logonav hr.belowparagraph {
	display: block;
}
#logonav p {
	display: block;
	margin: 10% 5% 10% 10%;
	padding: -10% -5% -10% -10%;
}


/**
Navigation
**/


#navigation {
	float: none;
	width: 90%;
	height: 100%;
	margin: 0 0 0 10%;
	padding: 0 0 0 -10%;
}
#navigation ul li a {
	float: left;
}
#navigation ul li a.nav_arrow {
	background-image: url(../images/nav_arrow_blackwhite_fwd.gif);
}
#navigation ul ul {
	*float: left;  /* IE6&7 hack to make child items inline with parent */
	float: left;  /* For Safari iOS to make child items inline with parent */
}
#navigation ul ul li {
	float: left;
}
#navigation ul ul li a {
	font-size: 12px;
}
#navigation .brand,
#navigation .digital,
#navigation .print {
	display: block;
}


/**
Thumbnails
**/


#secondcolumn {
	display: block;
	float: left;
	width: 25%;
}
#thirdcolumn {
	display: block;
	float: right;
	width: 25%;
}
#fourthcolumn {
	display: block;
	float: right;
	width: 25%;
}
#secondcolumn .toppanel,
#thirdcolumn .toppanel,
#fourthcolumn .toppanel {
	display: block;
	height: 76px;
	margin:  30% 5% 0 5%;
	padding:  -30% -5% 0 -5%;
}
#secondcolumn hr,
#thirdcolumn hr,
#fourthcolumn hr {
	display: block;
	margin: 10% 5%;
	padding: -10% -5%;
}
#fourthcolumn ul {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}
#thirdcolumn li,
#fourthcolumn li {
	float: right;
}


/**
About & Contact & Project
**/


#fullwidthcolumn {
	width: 72.5%;
	margin: 0% 0% 0% 1.25%;
	padding: -0% -0% -0% -1.25%;
}


/**
About & Contact 
**/


#fullwidthcolumn .toppanel {
	display: block;
	height: 76px;
	margin: 10.33% 0% 0% 0%;
	padding: -10.33% -0% -0% -0%;
}
#fullwidthcolumn hr {
	display: block;
	margin: 3.5% 0%;
	padding: -3.5% -0%;
}
#contactpanel {
	margin: 0% 0% 3.5% 0%;
	padding: -0% -0% -3.5% -0%;
}
#contactpanel .RHSimage {
	visibility: visible;
	width: 60%;
	margin: 4.5% 0% 2.5% 40%;
	padding: -4.5% -0% -2.5% -40%;
}
#contactpanel .LHStxtblock {
	bottom: 40%;
	left: 3.5%;
	margin: 0%;
	padding: -0%;
	width: 50%;
}
#aboutpanel_history,
#aboutpanel_awards,
#aboutpanel_education,
#aboutpanel_skills {
	margin: 0%;
	padding: -0%;
}
#aboutpanel_experience {
	margin: 0% 0% 3.5% 0%;
	padding: -0% -0% -3.5% -0%;
}
.aboutpanel_all .RHSimage,
.aboutpanel_all .LHSimage {
	visibility: visible;
}
#aboutpanel_history .RHSimage {
	width: 30%;
	margin: 3.5% 0% 0% 70%;
	padding: -3.5% -0% -0% -70%;
}
#aboutpanel_awards .LHSimage {
	width: 30%;
	margin: 3.5% 70% 0% 0%;
	padding: -3.5% -70% -0% -0%;
}
#aboutpanel_education .RHSimage {
	width: 30%;
	margin: 3.5% 0% 0% 70%;
	padding: -3.5% -0% -0% -70%;
}
#aboutpanel_skills .LHSimage {
	width: 66%;
}
#aboutpanel_experience img {
	visibility: visible;
}
.aboutpanel_all .LHStxtblock {
	bottom: 3.5%;
	left: 3.5%;
}
#aboutpanel_history .LHStxtblock,
#aboutpanel_awards .RHStxtblock,
#aboutpanel_education .LHStxtblock {
	margin: 0%;
	padding: -0%;
	width: 63%;
}
#contactpanel h2,
.aboutpanel_all h2 {
	font-size: 50px;
	line-height: 50px;
}
#contactpanel p,
.aboutpanel_all p {
	font-size: 16px;
}
#aboutpanel_skills p {
	width: 34%;
}
#aboutpanel_experience #spacerdiv {
	height: 333px;
}


/**
Project
**/


#project_titlebuttons {
	width: 96.5%;
	margin-top: 3.5%;
	padding-top: -3.5%;
}
#project_titleblock h2 {
	margin: -40px 0 0 3%;
	padding: 40px 0 0 -3%;
}
#project_titleblock h3 {
	margin: 28px 0 0 3.5%;
	padding: -28px 0 0 -3.5%;
}
#project_titleblock p {
	margin: 8px 33.33% 0 3.5%;
	padding: -8px -33.33% 0 -3.5%;
}
#image_rhs .image_caption{
	float: right; 
	max-width: 800px; 
	min-width: 760px; 
	margin: -4% 0 15% 20%; /* Mar 2016 - changed margin left from 0 to 20% and margin top from -5% to -4% */
	padding: 4% 0 -15% 20%; /* Mar 2016 - changed padding left from 0 to 20% and padding top from 5% to 4% */
}
#image_lhs .image_caption{
	margin: -4% 20% 15% 0; /* Mar 2016 - changed margin top from -5% to -4% */
	padding: 4% -20% -15% 0; /* Mar 2016 - changed padding top from 5% to 4% */
}


/**
Footer 
**/


#logonav .socialpanel {
	display: none;
}
#footer .toppanel {
	margin-top: 10%;
	padding-top: -10%;
	margin-bottom: 20%;
	padding-bottom: -20%;
}
}










/******************************************
BigVideo CSS
******************************************/




* { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; *behavior:url(boxsizing.htc); }
pre {
	white-space:pre-wrap;       /* css-3 */
	white-space:-moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space:-pre-wrap;      /* Opera 4-6 */
	white-space:-o-pre-wrap;    /* Opera 7 */
	word-wrap:break-word;       /* Internet Explorer 5.5+ */
}