/* this is the box sizing model for all elements */
* { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	background-color: #fff;
	margin:0px;
}

/* summary of id/class structure for normal pages 
  z1-back <stars>
  z3-banner [+chopped] <seethru/cover>
  "hamburger" z5-toggle 
    "bun" but showmenu()
  "nav" [overt] 
    z5-menubar 
      but
	  dropdown
	    but
		submenu <a>
  "contentwrap"
    "content"
*/


h2 {
	font-size: 17px;
	line-height: 21px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;	
}

/* default backing for menu. page contents scroll under it */
.back {
	position: fixed;
	top: 0px;
	height: 90px;
	overflow: hidden;
	width:100%;
	z-index: 1;
}
.back img {
	width:100%;
	float:right;
	z-index: 1;
}

/* page banner, scrolls with contents but overlays default backing for menu */
.banner {
	position:relative;
	top: 0px;
    background-position: right;
    background-repeat: no-repeat;
	z-index: 3;
}
.banner img {
	width:100%;
	margin:0px;
	float:right;
	z-index: 3;
}
/* when banner class is also chopped it is same size as backing (and may be transparent)*/
.chopped {
	overflow: hidden;
	height: 90px;
}

/* a hamburger is used to invoke the menu - not displayed unless device is in portrait mode - see below*/
.toggle {
	display:none;
	position: absolute;
	top: 15px;
	right: 10px;
	font-weight:bold;
	z-index: 5;
}

/* a div, encloses the menubar div and its components
this is only used in portrait mode, see below

the menubar contains buttons and dropdowns -
in horizontal or vertical profile for landscape or portrait viewports */
.menubar {
	position: fixed;
	top: 20px;
	right: 70px;
	z-index: 5;
	font-family: Arial,Verdana,sans-serif;
	font-weight: bold;
	color:#fff;	 
}
/* top level menu is a button or dropdown */
.but, .dropdown{
	float: left;
	cursor: pointer;
	font-size: 16px;
	min-width: 100px;
}
.but {
	padding: 6px 0px 3px 0px;
}
.but p {
	margin: 0px;
}
/* add on class makes curved outline for BLOG button */
.ring {
	border:2px solid white;
	border-radius:19px;
}
/* dropdown button reveals a sub-menu */
.dropdown{
	width: 120px;
}
.dropdown p {
	margin: 6px 0px 3px 0px;
    width: 125px;
}
.submenu {
	display: none;
	padding: 0px;
	font-size: 14px;
	line-height: 22px;
	text-align: left;
    width: 120px;
    background-color: #000;
/*  box-shadow: 0px 8px 16px 0px #777; */
} 
.but a, .submenu a{
	display: block;
	padding: 6px 2px 3px 2px;
	text-align: center;
	text-decoration: none;
	color: #fff;
}
.submenu a{
	width: 116px;
}
/*item in a submenu */
.menubar .dropdown .submenu a { 
	display: block;
}
	
/* DYNAMIC EFFECTS 	
 highlight buttons on hover ...
*/
.but:hover a {
	color: #0ff;
}
/* and show submenu. Then ...
*/
.dropdown:hover .submenu { 
	display: block;
}
/* ...highlight submenu items on hover */
.submenu a:hover { 
	color: #0ff;
}	

/* DETECT AND CHANGE CLASSES FOR PORTRAIT e.g. phone*/
@media (max-aspect-ratio: 1/1) {
	/* in effect we only use the right hand half of the banner image */
	.banner img {
		width:200%;
	}
	/* The hamburger is displayed (within toggle div) and when the hamburger is clicked 
	javascript adds "overt" class to the div surrounding the menubar, with the effect 
	that the menubar and submenus are displayed overlaying the hamburger*/
	.toggle, .overt .menubar, .overt .submenu {
		display: block;
	}
	/* Menu becomes vertical and scaled up */
	.menubar {
		width: 196px;
		right: 10px;
		padding: 0px 10px 15px 10px;
		background-color: #444;
		display: none;
	}
	/* buttons */
		.but a {
		font-size: 24px;
		padding: 0px;
		margin: 9px auto 5px auto;
		width: 174px;
	}
	.ring {
		border:3px solid white;
		border-radius:28px;
	}
	.submenu {
		font-size: 20px;
		line-height: 32px;
		width: 176px;
	}
	.submenu a {
		width: 174px;
		padding: 0px;
		margin: 9px auto 5px auto;
	}
	.dropdown { 
		width: 176px;
	}
	.dropdown .but a:hover { 
		color: #fff;
	}
	.banner img {
		width:200%;
	}
}

/* CONTENTS - GENERAL PAGE CONTENTS */

.contentwrap {
	position: absolute;
	width: 100%;
} 
.content {
	max-width: 685px; 
	margin: 1em auto 0px auto;
	color: #4c4c4c;
	font-family: Arial, sans-serif;
	font-size: 15px;
	letter-spacing: 0px;
	line-height: 25px;
	font-style: normal;
	font-weight: 400;
	padding-bottom: 16px;
} 
a {
	text-decoration:none; 
	color:#f63;
	font-weight:bold;
}
a:hover {
	color: #0ff;
}
li, tr {
	margin-bottom: 0px;
}
/* H2 moved from here */
.lc {
	text-transform: none;	
} 
h3, b {
	font-size: 16px;
	text-transform: none;
	color: #222;
}
h3 {
	margin-bottom:-.5em;
}
p i {
	color:#222;
}

/* CASE STUDY CLASSES */

.caselink{
	display: inline-block;
	vertical-align:top;
	width:215px;
	height:210px;
	margin: 15px 10px 10px 0px;
	padding: 0px;
	overflow:hidden;
}
.caselink img{
	border:3px solid navy;
	width: 210px;
	height:158px;
	margin: 0px;
	object-fit:cover;
}
.caselink img:hover {
	border:2px solid #0ff;
}
.before-caselink {
	content:"<p></p>";
}
.caselink p{
	text-align: center;
	margin: 0px 6px;
	font-size: 14px;
}

/* PAGE FOOTERS */
.foot {
	background-color:#ddd;
	font-size:12px;
}
.foot a {
	color:#444;
	font-weight:normal;
}

/* TO INDICATE FIELDS IN ERROR IN CONTACT FORM */
.err {border: 1px solid red;}

/* SPECIAL ELEMENTS FOR BLOG */

/* date of posting   */
.date {
	font-size:12px;
}
.date:before {
	content:"Posted on: ";
}
/* left or right subcolumn for images   */
.pl2, .pr2, .pl3, .pr3 {
	width:48%;
	text-align:center;
	font-size:14px;
	font-style:italic;
}
.pl3, .pr3 {
	width:30%;
}
.pl2, .pl3 {
	float:left;
	margin:5px 9px 5px 0px;
}
.pr2, .pr3 {
	float:right;
	margin:5px 0px 5px 9px;
}
.pl2 img, .pr2 img, .pl3 img, .pr3 img {
	width:100%;
}

/* SPECIAL ELEMENTS FOR BLOG EDITOR */

.editpane {
	position: fixed;
	top: 0px;
	height: 300px;
	width:1000px;
	margin-left: -500px;
	left: 50% ;
/*	padding-left: 15px;*/
	background-color:#dfd;
	z-index: 1;
	font-family: Arial,Verdana,sans-serif;
	font-size:12px;
}
.controls {
	position: relative;
	width:365px;
	float:right;
}
.blogpic {
	position: relative;
	margin: 0px auto;
	width: 200px;
	height: 120px;	
}
.menustrip {
	position:fixed;
	left:50%;
	margin-left:135px;
	top:262px;
	width:355px;
}
.doctext {
	position: relative;
	width:620px;
	height:300px;
	float:left;
	padding: 5px 15px;
	overflow:scroll;
}
.doctext a {
	float:right;
}
.spacer {
	height: 320px;
	width:100%;	
}