/*============================== */
/* ! Layout for desktop version   */
/* ============================== */

	body {
		font-family: 'Muli', sans-serif;
		font-weight: 300;
		padding: 2% 0 3% 3%;
	}
/*	.row {
		background-color: #cccccc;
	}
	.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol { 
		background-color: white;
	}
*/
	p {
		font-family: 'Muli', sans-serif;
		font-weight: 300;
		margin-bottom: 2%;
	}
	div {
		font-family: 'Muli', sans-serif;
		font-weight: 300;
	}
	div.content {
		padding-top: 0;
		font-size: 90%;
	}


	/* footer */
	div.footer {
		margin-top: 2%;
		padding-top: 1%;
		text-align: center;
		font-size: 80%;
		border-top: 1px solid #AC9873;
	}

	/* Banner, logos and menu */
	img.rightlogo {
		float: right;
	}
	img.leftlogo {
		float: left;
	}
	div.leftlogo img{
	}
	h1.logo {
		transform: translate(-999em);
		text-indent: -999em;
		font-size:18pt;
		float: left;
		clear: none;
	}

	div.topmenu{
		height:100%;
		padding:4% 0 0 0;
		-moz-transform: translateY(-30%);
	}
	div.menuoption {
		vertical-align: middle;
		text-align: center;
		line-height: 110%;
		margin-right: 4%;
		float: left;
		min-height: 1px;
		width: 16%;
/*		padding: 1% 0 1% 0; */
	}
	div.thismenuoption {
		color: #777777;
		border-bottom: 1px solid #37B7BC; /*#E5CC9A; */
/*		background-color: #E5CC9A;
		color: white; */
	}
	h2.menuoption {
		font-size:90%;
		font-family: 'Muli', sans-serif;
		font-weight: 400;
	}
	div.menuoption:hover {
		text-decoration: underline;
	}
	div.thismenuoption:hover {
		text-decoration: none;
	}

	div.banner div.row {
		margin: 0;
	}
	div.banner {
		display: block;
	}
	div.hhbanner, div.hhwbanner, div.hhnbanner, hr.hhdivider {
		display: none;
	}


	/* Quotes */
	div.introquote {
		font-family: 'Muli', sans-serif;
		font-weight: 300;
		float: left;
		text-align: right;
		width: 3%
	}
	div.quotebody {
		font-family: 'Muli', sans-serif;
		font-weight: 300;
		float: left;
		text-align: left;
		width: 97%;
	}
	div.prominentquote {
		font-weight: 400;
		font-size: 105%;
	}
	div.attribution {
		font-family: 'Muli', sans-serif;
		font-weight: 300;
		font-style: italic;
		font-size: 85%;
		text-align: right;
		width: 100%;
		margin-bottom: 2%;
	}

	/* Elipsis list */
	div.elipsis {
		float: left;
		text-align: right;
		width: 6%;
	}
	div.elistContent {
		float: left;
		text-align: left;
		width: 94%;
	}
	div.elist {
		padding: 1% 0 0 1%;
	}


	/* News items */
	div.announce {
		border: 1px outset #AC9873;
		padding: 1% 3% 2% 3%;
		margin: 0 0 4% 0;
	}

	div.newstitle {
		font-size: 120%;
		font-weight: 400;
		padding-bottom: 2%;
	}

	div.news {
		padding: 1.5% 0 1.5% 0;
		border-top:1px solid #AC9873;
	}

	/* links */
	a {
		text-decoration: none;
		color: #2B9094;
	}

	a:visited {
		color: #AC8B4E;
	}
	a:hover {
		text-decoration: underline;
		cursor: pointer;
	}
	img.imagebutton {
		border:1px solid white;
	}
	img.imagebutton:hover {
		border:1px outset #E5CA98;
	}

	/* quickstarts */
	div.quickstart {
		width: 100%;
		float: left;
	}
	.quickstarttitle {
		font-weight: 400;
	}
	div.quickstarttitle {
		width: 100%;
		float: left;
	}
	.quickstartimg {
		width:30%; 
		float: right; 
		text-align: right; 
		margin-left: 2%;
	}
	
	div.quickstarttxt {
		margin-bottom: 3%;
/*		width: 65%;
		float: left; */
	}

	/* Roles, quotes */
	h3.quotecategory {
		font-family: 'Muli', sans-serif;
		font-weight: 300;
		font-size: 90%;
		font-style: italic;
		margin-bottom: 2%;
	}
	.roleheader {
		float: left;
		padding-bottom: 1%;
	}
	.gototop {
		float: right;
		padding: 0 0 0 0;
		margin: 0;
	}
	.backto {
		font-size: 80%;
	}
	.spaciouslink {
		padding: 1% 0 1% 0;
	}
	div.roletitle {
		font-family: 'Muli', sans-serif;
		font-weight: 400;
		padding-bottom: 2%;
	}
		
	/* about */
	div.abouttech {
		width:90%;
		float:right;
		border:2px solid #dd8742;
		padding:2% 1% 2% 3%;
		margin-right:-9.7%;
	}

	div.aboutexec {
		width:110%;
		float:left;
		border:2px solid #37b7bc;
		padding:2% 1% 2% 3%;
		margin-left:-17.5%;
		margin-top:10%;
	}
	span.aboutexecintro {
		color: #37b7bc;
		font-weight: bold;
	}

	div.aboutvis {
		width:110%;
		float:left;
		border:2px solid #9c66a1;
		padding:2% 1% 2% 3%;
		margin-left:-17.5%;
		margin-top:25%;
	}
	span.aboutvisintro {
		color: #9c66a1;
		font-weight: bold;
	}
	div.aboutsyntrackintro {
		/*padding-left: 5%;*/
	}
	h2.abouttitle {
		font-size: 130%;
		font-weight: 400;
		margin-bottom: 0.5%;
	}
	div.abouttitle {
		margin-top: 2%;
	}
	div.contactlist {
		padding-left: 3%;
	}

	/* notes */
	div.note {
		margin-top: 5%;
	}
	p.note {
		font-style: italic;
		font-size: 95%;
	}

	/* utility */
	.centered {
		text-align: center;
	}

	div.rightalign {
		text-align: right;
		width: 100%;
	}
	div.hhhide {
		display: block;
	}
	div.hhshow{
		display: none;
	}

 	div.float150in5 {
		width:33%; 
		float:right; 
		text-align: right; 
		margin-left: 2%;
	}

	li {
		font-family: 'Muli', sans-serif;
		font-weight: 300;
		list-style-position: inside;
		margin-bottom: 1%;
	}

	h2 {
		font-family: 'Muli', sans-serif;
		font-weight: 400;
	}

	h3.prominentintro {
		font-family: 'Muli', sans-serif;
		font-weight: 400;
		font-size: 100%;
		margin-bottom: 3%;
	}

	ul.indentedlist {
		margin: 0 0 2% 3%;
		padding: 0;
	}
	ul.indentedlist > li {
		margin-bottom: 0%;
	}
	
	div.mobilehide {
		display: block;
	}

	div.mobileshow {
		display: none;
	}


/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	div.mobilehide {
		display: none;
	}

	div.mobileshow {
		display: block;
	}

	body {
		padding: 0;
	}

	/* Select banner elements (and order) */
	div.banner {
		display: none;
	}
	div.hhbanner {
		display: block;
	}
	div.hhwbanner {
		display: block;
	}
	div.hhnbanner {
		display: none;
	}

	/* takes up v-space on mobile */
	h1.logo {
		display: none;
	}

	/* adjust banner/logo/menu elements */
	div.topmenu {
		padding: 1% 0 0 0;
	}
	div.menuoption {
		margin-right: 0;
		width: 20%;
	}
	div.littlewider {
		width: 22%;
	}
	div.littlenarrower {
		width: 18%;
	}
	h2.menuoption {
		font-size: 90%;
		font-weight: 400;
	}
	img.hhlogo {
		float: none;
	
	}
	div.hhlogo {
		text-align: center;
		padding: 1% 0 0 0;
		margin: 0;
	}

	div.content {
		padding-top: 3%;
	}

	hr.hhdivider {
		display: block;
		height: 1px;
		color: #E5CA98;
	}

	div.hhhide {
		display: none;
	}
	div.hhshow{
		display: block;
	}

	.quickstartimg {
		width: 17%;
		float: left;
		margin: 0 2% 0 0;
	}

	.spaciouslink {
		padding: 2% 0 2% 0;
	}
	div.roletitle {
		float: left;
		width: 38%;
		text-align: right;
		padding: 1% 2% 0 0;
	}
	div.rolelist {
		float: left;
		width: 57%;
		border-left: 1px solid #AC8B4E;
		padding-left: 2%;
	}
	div.note {
		width: 100%;
	}

	.hhsectiondiv {
		border-top: 1px solid #AC8B4E;
		padding-top: 2%;
	}

	div.aboutvis, div.aboutexec, div.abouttech {
		width: 100%;
		float: none;
		border: none;
		padding: 0;
		margin: 0;
	}

}

@media handheld, only screen and (max-width: 479px) {

	/* refine banner element selection/ordering */
	div.hhwbanner {
		display: none;
	}
	div.hhnbanner {
		display: block;
	}
	div.hhlogo {
		padding: 3% 0 0 0;
	}
	h2.menuoption {
		font-size: 70%;
	}
	.quickstartimg {
		margin: 0 0 0 2%;
		width: 33%;
		float: right;
	}
 	div.float150in5 {
		width: 45%; 
	}
	div.roletitle {
		text-align: left;
		padding: 2% 2% 0 0;
	}
}

/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}