@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: 1010px;
	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;
}


/* --------------------------------------------
	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;
}

/* --------------------------------------------
	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;
}
#pane_element #tagslist 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 { /* 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;
}