@charset "UTF-8";
/* CSS Document */
/* ---------------------------------------------------------------------------------------- */

body {
	margin: 0;
	padding: 0;
}
/* --------------------------------------------
	CLEARFIX
-------------------------------------------- */


.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: inline-block;
}
html[xmlns] .clearfix {
	display: block;
}
* html .clearfix {
	height: 1%;
}

/* --------------------------------------------
	MAIN BLOCKS
-------------------------------------------- */

#container {
	display: block;
	min-width: 1012px;
	width: auto;
	margin: 0;
	padding: 0;
}
#header {
	height: 390px;
	display: block;
	clear: both;
	margin: 0;
	padding: 0; /* was 1em */
}
#main {
	position: relative;
	display: block;
	min-width:930px;
	width:auto !important;
	width:930px;
	float: left;
	margin: 0 40px 40px 0;
}
#subheader {
	display: block;
	position: relative;
	float: left;
	width: 90px;
	height: inherit; /* was 1em */
	margin: 0 0 0 40px;
}


/* --------------------------------------------
	HEADER
-------------------------------------------- */


#header .topnav {
	display: block;
}
#header {
	clear: none;
	min-width:900px;
	width:auto !important;
	width:900px;
	
}
#header p {
	float: left;
	clear: none;
}
.topnav {
	display: block;
	height: 40px;
	padding: 0 0 0 40px;
	margin: 0;
}
#header .topnav ul {
	margin: 0;
	padding: 0;
}
#header .topnav li {
	list-style: none;
	display: block;
	float: left;
	line-height: 1;
}
#header .topnav li a {
	display: block;
	border-bottom: 5px solid transparent;
	width: 75px;
	height: 20px;
	padding: 15px 27px 5px 3px;
}
#header .topnav:hover li.active a {
	border-bottom: none;
}
#header .topnav li a:hover, #header .topnav li.active a, #header .topnav:hover li.active a:hover {
	background: inherit;
	border-bottom: 5px solid black;
}
#header .topnav li.hidden{
	display: none;
}

#so {
	font-family: 'Lucida Grande', Lucida, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 5;
}

#so a{
	border-bottom: 5px solid transparent;
	color: black;
	display: block;
	height: 20px;
	padding: 15px 27px 5px 3px;
	text-decoration: none;
	width: 90px;
}
#so a:hover {
	background: none;
	border-bottom: 5px solid black;
}
/* --------------------------------------------
	SUBHEADER (CATEGORIES IN WORK PAGES)
-------------------------------------------- */


li a.collapse /*NONE*/
li.active a.current  /*SHOWS*/
 #subheader h4 {
	cursor: pointer;
}
#subheader ul {
	margin: 0 0 0 -5px;
	padding: 0;
}
#subheader li {
	display: block;
	list-style: none;
	padding: 6px 0;
}
#subheader li a {
	text-decoration: none;
	font-weight: bold;
	margin: 0;
	padding: 5px;
	line-height: 16px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-opera-border-radius: 3px;
	-moz-border-radius: 3px;
}


/* --------------------------------------------
	TRANSPARENT BACKGROUNDS
-------------------------------------------- */


.trans {
	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	background-color: #E9E8EA;
	opacity: 0.7;
}



/* --------------------------------------------
	GRID
-------------------------------------------- */

.columns_end {
	margin-right: 0!important;
	padding-right: 0!important;
}
.columns1 {
	display: block;
	width: 75px!important;
}
#footer .columns1{
	width: 90px!important;
}

.columns2 {
	display: block;
	width: 165px!important;
}
.columns3 {
	display: block;
	width: 270px;
}
.columns4 {
	width: 375px;
}
.columns5 {
	width: 480px;
}
.columns6 {
	width: 585px;
}
.columns7 {
	width: 690px;
}




/* --------------------------------------------
	WORK
-------------------------------------------- */

.all_work ul {
	list-style: none;
}

/* --------------------------------------------
	MAIN
-------------------------------------------- */

.item_container {
}
.item_container ul {
	position: relative !important;
	display: block !important;
}
.item_container ul li {
	display: list-item !important;
	float: none;
}


/* --------------------------------------------
	ITEM TYPES
-------------------------------------------- */

.accordion_content .item_title {
	margin: 0 1em 0 0;
}
.item_container {
	display: block !important;
	float: left !important;
	clear: both !important;
	padding: 0;
	margin: 0 0 6ex 0;
}
.item_meta, #tagstoggle, #grouptoggle {
	display: block;
	margin: 0;
	clear: both;
}
.item_meta {
	padding-top: 0.4ex!important;
}
#tagstoggle, #grouptoggle {
	padding: 1ex 0 0 0;
}
.item_meta div, .item_description {
	display: block;
	clear: both;
	padding: 0;
}
.item_description {
	width: 510px;
}
.item {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}
.text p {
	display: block;
	clear: both;
	margin: 0 0 10px 0;
	padding: 0;
	width: 510px;
}
.item_title, .item_title a {
	color: #9E9E9E;
}
.text .item_title {
	display: none;
}
.text .item_meta {
	display: none;
}
.item div {
	float: left;
}
.quote div {
	float: left;
}
.image div {
	float: left;
}
.text div {
	float: left;
	margin: 2ex 0 0.5ex 0;/*	border-top: 3px solid #00F;
	border-bottom: 3px dashed #F00;*/
}



/* --------------------------------------------
	MOOTOOLS ACCORDION
-------------------------------------------- */


#accordion {
	margin: 0;
}
h3.toggler {
	cursor: pointer;
}
div.element p, div.element h4 {
	margin: 0;
}
div.element {
	margin: 0 0 0.5em 0;
}
blockquote {
}


/* --------------------------------------------
	FOOTER
-------------------------------------------- */


#footer {
	display: block;
	clear: both;
	padding: 40px;
	  min-width:980px;
	  width:auto !important;
	  width:840px;
}
#footer div {
	display: block;
	float: left;
	width: 195px;
	margin: 0 15px 6px 0;
}

#bottomnav {
	display: block;
	clear: both;
	background: #F2F2F2;
	padding: 40px 40px 40px 145px;
	margin-top: 40px;
	min-width:905px;
	width:auto !important;
	width:800px;
}

#bottomnav h4 {
	display: block;
	clear: none;
	width: 200px;
	margin: 0 15px 15px 0;
}
#bottomnav div {
	float: left;
}
#bottomnav ul {
	display: block;
	float: left;
	width: 420px;
	padding: 0 0 0 0;
	margin: 0;
}
#bottomnav ul li {
	display: block;
	float: left;
	width: 195px;
	margin: 0 15px 10px 0;
	white-space:nowrap;
	overflow: visible;
}
#bottomnav ul li a {
	background-color: #F2F2F2;
	color:#999999;
	text-decoration: none;
	font-weight: bold;
	padding: 5px;
	margin-left: -5px;
	vertical-align: middle;
}
#bottomnav ul li a.current {
	background: #FFF;
	color:#999999;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-opera-border-radius: 3px;
	-moz-border-radius: 3px;
}
#bottomnav ul li a:hover {
	background-color: #FFFFFF;
	color:#000;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-opera-border-radius: 3px;
	-moz-border-radius: 3px;
}
/*redundant for js smooth hovers */
#bottomnav ul li a.current:hover {
	background-color: #FFFFFF;
	color:#000;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-opera-border-radius: 3px;
	-moz-border-radius: 3px;
}
#bottom_contact {
	display: block;
	clear: both;
	padding: 40px;
}
#bottom_contact div {
	display: block;
	float: left;
	width: 195px;
	margin: 0 15px 6px 0;
}

/* --------------------------------------------
	TAGS PAGE
-------------------------------------------- */


body.Tags #main {
	width: 930px;
	padding: 0 40px;
	margin: 0;
}
body.Tags .group_item_container {
	border-top: 4px #000 solid;
	padding: 40px 0;
	margins: 0 40px;
	width: 930px;
}
body.Tags .item{
	width: 825px;
}
body.Tags .item img {
	margin: 0 15px 15px 0;
	vertical-align: top;
}
body.Tags .item_meta {
	display: block;
	position: relative;
	float: left;
	width: 90px;
	height: inherit; /* was 1em */
	margin: 0 15px 0 0;
}


/* --------------------------------------------
	WORK PAGES
-------------------------------------------- */

img.web {
	margin-left: -23px;
}

/* --------------------------------------------
	Case Studies PAGES
-------------------------------------------- */
#sidebar {
	display: block;
	width: 165px;
	padding-left: 15px;
	overflow: hidden;
}

/* --------------------------------------------
	HOMEPAGE PANES
-------------------------------------------- */

#home_stage {
	position: absolute;
	width: 45%;
	height: 550px;
	clear: both;
	top: 0px;
	right: 0px;
	margin-left: 400px;
}

#home_stage img {
	display: block;
	position: absolute;
	z-index: 101;
	right: -5%;
	top: 0;
	margin-left: 400px;
	opacity: 1;
}
#home_stage img:hover{
	opacity: .75;
}
#home_stage img:active{
	opacity: .5;
}
/* SAME THING AS .TOPNAV in LAYOUT.css */
#menu {
	display: block;
	height: 40px;
	padding: 0 0 0 40px;
	margin: 0;
}
#menu li {
	list-style: none;
	display: block;
	float: left;
	line-height: 1;
}
#menu li:hover {
	cursor: pointer;
}
#menu li.menulink {
	display: block;
	border-bottom: 5px solid transparent;
	width: 75px;
	height: 20px;
	padding: 15px 27px 5px 3px;
}

#menu:hover li.active {
	border-bottom: none;
}
#pane_element {
	clear: both;
	margin: 15px 0 30px 0;
}
#pane_element ul {
	margin: 0 0 0 105px;
}
#pane_element h4 {
	float: left;
	padding: 0;
}
#pane_element ul {
	padding: 0;
}
#pane_element li {
	display: block;
	list-style: none;
	float: left;
	margin: 5px 3px;
	padding: 0 0;
}
/*Attempt to make medthumbs flex width by abs position and margin*/
.thumbs, .all_work .thumbs {
	min-width:980px;
	width:auto !important;
	width:980px;
}
.all_work ul.work_med { /* styles thumbs names */
	font-size: 15px;
	font-weight: bold;
	line-height: 1.2;
}
body.Workhome #grouplist li{
	white-space: nowrap;
}
#pane_element #tagslist li a, #pane_element #grouplist li a { /* styles categories */
	font-size: 15px;
	margin: 3px 0;
	padding: 5px 7px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-opera-border-radius: 3px;
	-moz-border-radius: 3px;
	text-decoration: none;
	font-weight: bold;
/*	line-height: 1.9;
*/	font-weight: bold;
}
#pane_element #tagslist li a:hover, #pane_element #grouplist li a:hover { /* styles categories */
	background: #FC3; /*test ORANGE*/
}
.all_work ul.work_med li {
	display: block;
	position: relative;
	float: left;
	list-style: none;
	margin: 0 15px 15px 0!important;
	height: 135px;
	width: 195px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-opera-border-radius: 5px;
	-moz-border-radius: 5px;
}
.all_work ul {
	list-style: none;
}
.all_work ul.work_med li a {
	display: block;
	visibility: visible;
	overflow: hidden;
	height: 135px;
	width: 195px;
	color: #FFFFFF;
/* move hacks to ie alt sheet? */
/* filter: alpha(opacity=0); /* MSIE/PC */
/* filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); */
	opacity: .01;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-opera-border-radius: 5px;
	-moz-border-radius: 5px;
}
.all_work ul.work_med li a:hover {
/* move hacks to ie alt sheet? */
/*	filter: alpha(opacity=80); /* MSIE/PC */
/* filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); */
	opacity: .85;
}
.all_work ul.work_med li .work_link {
	margin: .5em;
}
.pane {
	float: left;		/* you need that!!! */
	display: none;	/* you need that - if you remove this, at load the page will have height of the heighest pane, see more instructions in html-file */
	width:1010px;		/* set the width of your content here, it's not necessary if you dont wanna have fixed with */
	padding:20px 40px;
	clear: none;
}
#content {
	overflow:hidden;	/*you need that!!! */
}
#paneContainer {
	display: block;
	z-index: 50;
	float:left;
}


/* --------------------------------------------
  NEW	HOMEPAGE PANES
-------------------------------------------- */
body.Homepage{
	background: #1A1A1A;
	color: white;
}
body.Homepage h2.title{
	display: none;
}
/*
body.Homepage h2{
	margin: 0;
	padding: 0;
	line-height: 42px;
	position: absolute;
	top: 5px;
}
*/
body.Homepage h2{
	position: relative;
	margin: 233px 0 0 43px !important;
	padding: 0 !important;
	font-size: 50px;
	line-height: 60px;
	font-weight: bold;
}
body.Homepage h3{
line-height: 20px;
margin: 5px 45px 0px;	padding: 0;
	font-size: 18px;
}
body.Homepage #header{
	height: auto;
}
body.Homepage #main{
	min-width: 100%;
	width: 100%;
}
body.Homepage .flipper{
	margin-top: 0;
	padding: 0;
	position: relative;
	float: left;
	min-width: 1070px;
	width:100%;
	height: 650px;
}
body.Homepage .slide{
	min-height: 650px;
	margin-top: 0;
	padding: 0;
	background: #1A1A1A;
	position: absolute;
	top: 0;
	width: 100%;
}
body.Homepage .hidden {
	opacity: .01;
}
body.Homepage .slide p{
	margin-left: 45px;
}
body.Homepage .slide a, body.Homepage .slide a:visited{
	color: #CC9034;
	-webkit-transition: color 250ms linear;
}
body.Homepage .slide a:hover{ color: #F8AD3B; }
body.Homepage .slide a:active{ color: #674D26; }

/*
body.Homepage p{
	width: 350px;
	margin-top: 400px;
	font-size: 16px;
}
*/
/*
.Homepage h2 {
	margin: 40px !important;
	padding: 0 !important;
	font-size: 50px;
	line-height: 60px;
	font-weight: bold;
}
*/
body.Homepage p{
	width: 350px;
	margin-top: 0;
	font-size: 16px;
}


body.Homepage #athena{
	background: #1A1A1A url(images/slides/slide_athena.jpg) no-repeat top right;
}
body.Homepage #athena a{ color: #75AEB9; }
body.Homepage #athena a:hover{ color: #8CD3E1; }
body.Homepage #athena a:active{ color: #425B5F; }

body.Homepage #blueprint{
	background: #1A1A1A url(images/slides/slide_blueprint.png) no-repeat top right;
}
body.Homepage #blueprint a{ color: #1B75BC; }
body.Homepage #blueprint a:hover{ color: #259FF2; }
body.Homepage #blueprint a:active{ color: #259FF2; }

body.Homepage #lucia{
	background: #1A1A1A url(images/slides/slide_lucia.png) no-repeat top right;
}
body.Homepage #lucia a{ color: #E977AF; }
body.Homepage #lucia a:hover{ color: #FF85C5; }
body.Homepage #lucia a:active{ color: #FF85C5; }

body.Homepage #deorchis{
	background: #1A1A1A url(images/slides/slide_deorchis.jpg) no-repeat top right;
}
body.Homepage #deorchis a{ color: #898989; }
body.Homepage #deorchis a:hover{ color: #CCCCCC; }
body.Homepage #deorchis a:active{ color: #CCCCCC; }

body.Homepage #weil{
	background: #1A1A1A url(images/slides/slide_weil.jpg) no-repeat top right;
}
body.Homepage #weil a{ color: #058E45; }
body.Homepage #weil a:hover{ color: #00AB50; }
body.Homepage #weil a:active{ color: #114D2D; }

body.Homepage #pmp{
	background: #1A1A1A url(images/slides/slide_pmp.png) no-repeat top right;
}
body.Homepage #pmp a{ color: #058E45; }
body.Homepage #pmp a:hover{ color: #00AB50; }
body.Homepage #pmp a:active{ color: #114D2D; }

body.Homepage #hl{
	background: #1A1A1A url(images/slides/slide_hl.png) no-repeat top right;
}
body.Homepage #hl a{ color: #8EA333; }
body.Homepage #hl a:hover{ color: #1ABBB5; }
body.Homepage #hl a:active{ color: #8EA333; }

body.Homepage #os{
	background: #1A1A1A url(images/slides/slide_os.png) no-repeat top right;
}
body.Homepage #os a{ color: #75AEB9; }
body.Homepage #os a:hover{ color: #8CD3E1; }
body.Homepage #os a:active{ color: #425B5F; }

body.Homepage #os h2{
	display: block;
	width: 612px;
	height: 188px;
	background: url(images/slogan.png) no-repeat top left;
	overflow: hidden;
	margin: 88px 0 19px 45px!important;
	text-indent: -1500px;
	font-size: 12px;

}
body.Homepage:hover #os h2{
}

.Homepage .arrow{
	position: absolute;
/* 	top: 550px; */
	top: 470px;
	width: 55px;
	height: 55px;
	z-index: 999;
	opacity: .75;
	-moz-transition: opacity 250ms linear;
	-webkit-transition: opacity 250ms linear;
	transition: opacity 250ms linear;
}
.Homepage .arrow:hover{
	opacity: 1;
	cursor: pointer;
}
.Homepage .arrow:active{
	opacity: .25;
}

.Homepage #arrleft{
	left: 26px;
	background: url(images/arrleft.png) no-repeat 50% 50%;
}
.Homepage #arrright{
	left: 68px;
	background: url(images/arrright.png) no-repeat 50% 50%;
}

.Homepage #footer .columns1 a{
	background: url(images/bg_white_90_sm.png) no-repeat 0 0;
}

/*
@media only screen and (max-width: 600px) {
	body.Homepage{
	}
	.Homepage #header{
		min-width: 320px!important;
		width: 100%!important;
		padding: 0;
		background: white;
	}
	.Homepage #header ul{
		min-width: 320px;
		width: 100%;
	}
	.Homepage #header ul li{
		width: 65px;
		padding: 0;
		margin-left: 10px;
	}
	.Homepage #header #so{
		display: none;
	}
	.Homepage .topnav{
		width: 100%;
		padding: 0;
	}
	.Homepage #main{
		min-width: 100%!important;
		width: 100%!important;
		margin-right:0;
	}
	body.Homepage .flipper{
		min-width: 320px;
		width: 320px!important;
		min-height: 320px!important;
		height: 320px!important;
	}
	.Homepage .slide{
		width: 300px;
		min-height: 320px!important;
		height: 320px!important;
		background-size: 120%
	}
	body.Homepage h2 {
		font-size: 30px;
		line-height: 30px;
		margin-top: 230px!important;
		margin-left: 10px!important;
		text-align: center;
	}
	body.Homepage p{
		width: 264px;
		font-size: 14px;
		margin-top: 0;
		margin-left: 10px!important;
		display: none;
	}
	.Homepage .arrow{
		top: 275px;
	}
	.Homepage #arrleft{
		left: 105px;
	}
	.Homepage #arrright{
		left: 150px;
	}
  	.Homepage #footer{
		min-width: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
	}
  	.Homepage #footer div{
		margin: 10px 10px;
		clear: both;
	}
}
*/

@media screen and (min-width: 1200px) {
	body.Homepage{
	}
	body.Homepage p{
		width: 450px;
		font-size: 20px;
		margin-top: 0;
	}
  body.Homepage h2 {
    font-size: 60px;
    line-height: 60px;
  }
}