/* --- Import Sitewide Styles
-------------------------------------------------------*/


/* --- Common Elements
-------------------------------------------------------*/

* { margin: 0; padding: 0; outline: none; }
html {overflow-y: scroll;}

body {
	font-size: 12px;
	color: #333;
	letter-spacing: 0;
	background: #fff;
	/*background: #fff url(../pics/bg_main_01.png) top center no-repeat;*/
	}

ul { list-style-type: none; }
img { border: 0; }
p { display: block; padding-bottom: 10px; }
p ul.lista { display: block; padding-bottom: 10px; background: #F00; }
b { font-weight: normal; color: #000; }
.fineprint2 { font-weight: normal; color: #777; font-size: 10px; display: block; }
.fineprint3 { font-weight: normal; color: #777; display: block; }

/* --- Fonts
-------------------------------------------------------*/

body,
input,
option,
select,
.projinfo,
.twitterStatus,
textarea, 
.year,
h2 .hsmall, h3 .hsmall { font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; }

h3,
.fineprint2,
.infotable_index .td_yr  { font-family: Arial, Verdana, Helvetica, "Lucida Grande", "Lucida Sans Unicode", sans-serif; }

h1,
h2,
.ingress,
.ingress2,
.search_left,
/*#photos_page .thumbs dt a,
#photos_page .thumbs dt a:hover, */
#pufflink { font-family: Georgia, "Times New Roman", Times, serif; }

.sIFR-replaced a:link { color: #f33; text-decoration: none; }

/* --- Anchors
-------------------------------------------------------*/
a {
	outline: none;
	text-decoration: none;
	}
a:link, a:visited {
	color: #00afce;
	}
a:hover {
	color: #000;	
	}

/* --- Headers
-------------------------------------------------------*/

h1, 
h2 {
	font-weight: normal;
	font-size: 20px;
	color: #000;
	padding-bottom: 10px;
	}
h1 .color {
	color: #ff6e8d;
	/*color: #ff00cc;*/
	}
#workthumbs h2 { width: 800px; }
h2 .hsmall, h3 .hsmall {
	font-weight: normal;
	color: #000;
	font-size: 12px;
	}

h3 {
	font-weight: bold;
	font-size: 14px;
	color: #000;
	padding-bottom: 5px;
	margin-bottom: 2px;
	}
.ingress, .ingress h1 {
	font-size: 40px;
	}
#home_page .ingress2 {
	font-size: 18px;
	line-height: 1.4em;
	width: 700px;
	padding-left: 2px;
	}
.ingress2 {
	font-size: 13px;
	}
#pufflink {
	float:left; 
	padding: 25px 0 0 75px;
	}	
#pufflink a {
	font-size: 20px; 
	display: block;
	width: 220px;
	color: #000;
	}	
#pufflink a:hover { color: #000; text-decoration: underline; }	

	
/* --- General Layout
-------------------------------------------------------*/
/* --- | logo | --- */
#logo {
	float: left;
	clear: both;
	display: block;
	position: relative;
	margin-bottom: 80px;
	margin-top: 10px;
	margin-left: 15px;
	padding: 0;
	}
#logo a {
	float: left;
	clear: both;
	position: relative;
	margin: 0;
	padding: 0;
	display: block;
	}
#logo a img {
	margin: 0;
	padding: 0;
	}

/* --- | xpanders | --- */

.xpanderheader, .showsearch {cursor: pointer;}
.xpander, .searchfield {
	float: left;
	clear: both;
	}

#search {
	width: 960px;
	margin: 0 auto 0;
	background: #fff;
	overflow: hidden;
	display:none;
	border-top: 2px solid #000;
	}
#toggle {
	float: right;
	margin-right: 20px;
	}
#header_search {
	float:right;
	line-height: 10px;
	}
#search .search_left, .search_right { float: left; padding: 20px 15px 20px; }

#search .search_left {
	text-align: left;
	width: 350px;
	font-size: 30px;
	}
#search .search_right {
	width: 420px;
	text-align: left;
	}
#search .search_right .searchfield_left, #footer .search_right .searchfield_left {
	width: 17px;
	height: 37px;
	float: left;
	background: transparent url(../pics/searchfield_leftcap.gif) no-repeat;
	}	
#search .search_right .search_input { width: 350px; }
#footer .search_right .search_input { width: 200px; }
#search .search_right .search_input, #footer .search_right .search_input {
	height: 37px;
	float: left;
	background: transparent url(../pics/searchfield_middle.gif) repeat-x;
	text-align: left;
	border: 0;
	}
#footer .search_right .search_input input { color: #999; }
#search .search_right .search_input input, #footer .search_right .search_input input {
	padding: 5px 0 0 0;
	height: 27px;
	background: transparent;
	border: 0;
	}
#search .search_right .search_input input { width: 350px; }
#footer .search_right .search_input input { width: 200px; }

#search .search_right .search_button input, #footer .search_right .search_button input {
	width: 39px;
	height: 37px;
	float: left;
	background: transparent url(../pics/searchfield_rightcap.gif) no-repeat;
	border: 0;
	text-indent: -9999px;
	cursor: pointer;
	}

/* --- | nav | --- */

#nav {
	float: left;
	clear: both;
	display: block;
	margin: 0;
	width: 960px;
	}

/* - - - ADxMenu: BASIC styles - - - */
ul.menu {
	float: left;
	clear: both;
	}
/* remove all list stylings */
.menu, .menu ul {
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
}
.menu li.devis {
	padding-right: 0px;
	padding-left: 15px;
	width: 350px;
	color: #aaa;
	}
.menu li.devis a, .menu li.devis a:hover, .menu li.devis:hover>a {
	color: #aaa;
	}
.menu li.devis a {
	padding-left: 0;
	padding-right: 0;
	}
.menu li {
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;	/* move all main list items into one row, by floating them */
	position: relative;	/* position each LI, thus creating potential IE.win overlap problem */
	z-index: 5;		/* thus we need to apply explicit z-index here... */
	border-bottom: 1px solid #ccc;
	width: 119px;
}
.menu li.nav_selected { border-bottom: 1px solid #000; }
.menu li.nav_sub_selected a { color: #000; }
.menu li:hover {
	z-index: 100;	/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu li li {
	float: none;/* items of the nested menus are kept on separate lines */
	border-bottom: none;
	padding: 0;
	margin: 0;
	width: 170px;
}

.menu ul {
	visibility: hidden;	/* initially hide all submenus. */
	position: absolute;
	z-index: 10;
	left: 0;	/* while hidden, always keep them at the bottom left corner, */
	bottom: 0;		/* 		to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
	visibility: visible;	/* display submenu them on hover */
	bottom: 100%;	/* 1st level go above their parent item */
	width: 170px;
}

/* -- float.clear --
	force containment of floated LIs inside of UL */
.menu:after, .menu ul:after {
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.menu, .menu ul {	/* IE7 float clear: */
	min-height: 0;
}
/* -- float.clear.END --  */

/* sticky submenu: it should not disappear when your mouse moves a bit outside the submenu
	YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
	if you do it, make sure you 110% know what you do */
.menu ul {
	background-image: url(../pics/pix.gif);	/* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
	padding: 0 30px 10px 0px;
	margin: 0 0 -10px 0px;
	/*background: #ccc;*/	/* uncomment this if you want to see the "safe" area.
								you can also use to adjust the safe area to your requirement */
}
.menu ul ul {
	padding: 0 30px 30px 10px;
	margin: 0 0 -30px -10px;
}


/* - - - ADxMenu: DESIGN styles - - - */

.menu, .menu ul li {
	color: #000;
}

.menu ul { width: 100px }

.menu li a {
	text-decoration: none;
	color: #000;
	padding: 5px 5px 10px;
	display: block;
	position: relative;
}

#nav ul .menu li a:visited { color: #000; }

.menu a:hover, .menu li:hover>a { color: #999; }
.menu li li a {
	color: #999;
	padding: 2px 5px 2px;
	}
.menu li li a:hover { color: #000; }

/* --- | wrappers | --- */

#wrapper {
	width: 960px;
	margin: 0 auto 0;
	}
.container, .container_bc, .container_tighter, .container_tags {
	clear: both;
	float: left;
	margin-left:auto;
	margin-right:auto;
	width:930px;
	border-bottom: 1px solid #ccc;
	}
.container { padding: 40px 15px; }
.container_bc { padding: 5px 15px 40px; }
.container_tighter {
	padding: 10px 15px;
	font-size: 11px;
	color: #ccc;
	}
.container_tags { padding: 40px 15px 20px; }
#footer_menu a, #footer_menu a:link, #footer_menu a:active { color: #999; padding: 0 2px; font-size: 10px;}
#footer_menu a:hover { color: #000; }

#breadcrumbs { padding-bottom: 35px; }
#breadcrumbs, #breadcrumbs a {color: #ccc;}
#breadcrumbs a:hover {color: #000;}

#contents {
	clear: both;
	float: left;
	width: 960px;
	min-height:300px;
  	height:auto !important;
  	height:300px;
	padding-top: 20px;
	}

#header {
	clear: both;
	float: left;
	width: 960px;
	padding: 0;
	margin: 0;
	border-top: 2px solid #000;
	}

/* --- | footer | --- */

#footer {
	clear: both;
	float: left;
	margin-left:auto;
	margin-right:auto;
	padding: 15px 15px 30px;
	width:930px;
	font-size: 10px;
	color: #999;
	line-height: 15px;
	}
#footer .footer_left {
	width: 430px;
	float: left;
	padding: 10px 0 0 0;
	}
#footer .search_right {
	width: 260px;
	float: right;
	padding: 10px 0 0 0;
	margin: 0;
	}

/* --- | columns | --- */

.four_col, .four_col_first {
	float: left;
	width: 210px;
	padding-top: 0px;
	}
.four_col {
	margin-left: 25px;
	}
.four_col_first {
	margin-left: 0;
	}
#footer .four_col, #footer .four_col_first {
	padding-top: 0;
	}
#footer .four_col_first {
	}

.two_col, .two_col_first {
	float: left;
	width: 450px;
	padding-top: 0px;
	}
.two_col {
	margin-left: 25px;
	}
.three_col, .three_col_first {
	float: left;
	width: 293px;
	padding-top: 0px;
	}
.three_col {
	margin-left: 25px;
	}

/* --- | twitter | --- */


.twitters {
	margin-bottom: 20px;
	}

.twitters span, .twitters span a {
	padding-top: 0;
	}
span.twitterTime, span.twitterTime a {
	color: #999;
	padding-bottom: 5px;
	display: block;
	}

/* --- | thumbs | --- */

.thumbs {
	float: left;
	clear: both;
	padding-top: 0px;
	}
.thumbs img { width: 170px; height: 150px; }

.thumbs ul {
	float: left;
	clear: both;
	}

.thumbs ul li {
	float: left;
	width: 170px;
	height: 150px;
	padding: 8px;
	background: url(../pics/thumbs_bg.jpg) center bottom no-repeat;
	position: relative;
	display: block;
	overflow: hidden;
	}

.thumbs .a_thumb {
	display: block;
	width: 170px;
	height: 150px;
	position: absolute; 
	z-index: 1;
	}

.thumbs li:hover a.a_thumb { z-index: 0;  }
.thumbs li:hover dl { z-index: 2; }
/*.thumbs dl { display: block; position: absolute; width: 170px; top: 4px; height: 150px; background: url(../pics/opacity.png) left top repeat; }*/
.thumbs dl { display: block; position: absolute; width: 170px; height: 150px; }
.thumbs dt { width: 170px; height: 150px; text-align: left; }
/*.thumbs dl:hover { width: 180px; height: 160px; top: 0; left: 0; }*/
.thumbs dl:hover { width: 170px; height: 150px; }
.thumbs dt a { position: relative; display: block; text-decoration: none; overflow: hidden; width: 150px; height: 130px; padding: 10px; font-size: 13px; }
.thumbs dd { position: absolute; bottom: 0px;  }
.thumbs dd a, .thumbs dd a:hover { display: block; color: #999; padding: 10px; text-decoration: none; font-size: 10px; }
#photos_page .thumbs dd a, #photos_page .thumbs dd a:hover { color: #333;}
.thumbs dt a, .thumbs dt a:hover { color: #fff; }
.thumbs dl, .thumbs dl:hover { background: #000; }
#photos_page .thumbs dl, #photos_page .thumbs dl:hover { background: #ff6e8d; }
/*#photos_page .thumbs dt a, #photos_page .thumbs dt a:hover { color: #fff; font-size: 11px; font-style: italic; }*/

/* --- | jFlow | --- */
#myController {
	float: left; 
	clear: both;
	width: 930px;
	text-align: center;
	}
#myController span, .jFlowPrev, .jFlowNext {
	cursor: pointer;
	color: #00afce;
	padding: 2px 5px;
	text-align: center;
	vertical-align: middle;
	text-align: center;
	}
#myController span.jFlowSelected {
	color: #000;
	}
#myController span.jFlowControl {
	}
#jFlowSlide { }
.jFlowPrev, .jFlowNext { cursor:pointer; }
#myController span.jFlowControl:hover, #myController span.jFlowPrev:hover, #myController span.jFlowNext:hover {
	color: #000;
	}

/* --- INDEX
-------------------------------------------------------*/


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

.left_550 {
	float: left;
	width: 550px;
	}
.right_350 {
	float: left;
	width: 350px;
	padding-left: 30px;
	}
.left_450 {
	float: left;
	width: 450px;
	}
.right_450 {
	float: left;
	width: 450px;
	padding-left: 30px;
	}
.projinfo {
	/*font-size: 15px;*/
	}
.casecontainer {
	clear: both;
	float: left;
	margin-left:auto;
	margin-right:auto;
	padding: 30px 0px;
	width: 960px;
	border-bottom: 1px solid #ccc;
	}

.fineprint ul {
	float: left; 
	padding-bottom: 3px;
	width: 350px;
	}
.fineprint li {
	float: left;
	}
li.fineprint_headline {
	color: #999;
	width: 60px;
	text-align: right;
	padding-right: 15px;
	}
li.fineprint_content {
	color: #000;
	width: 275px;
	}
.casetags a { 
	padding: 0 12px 3px 0;
	display: inline;
	float: left;
	}
.nobr { white-space: nowrap; }
#browsetags li { 
	float: left;
	}
#browsetags li.chosen, #browsetags li a {
	display: block;
	margin: 0 5px 5px 0;
	padding: 5px 10px;
	/*
	background: #f48c6f;
	*/
	}
#browsetags li.chosen {
	background: #00afce;
	color: #fff;
	border: 1px solid #00afce;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
	}
#browsetags li a {
	background: #fff;
	color: #00afce;
	border: 1px solid #fff;
	}
#browsetags li a:hover {
	background: #eee;
	color: #000;
	border: 1px solid #eee;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
	}
#workprevnext {
	position: relative;
	float: right;
	width: 100px;
	}
#workprevnext a#prevtag, #workprevnext p#prevtag, #workprevnext a#nexttag, #workprevnext p#nexttag {
	width: 47px;
	height: 26px;
	padding: 0;
	background: transparent url(../pics/workprevnext.gif) no-repeat;
	text-indent:-9999px;
	}
#workprevnext p#prevtag, #workprevnext a#prevtag { float: left; }
#workprevnext p#nexttag, #workprevnext a#nexttag { float: right; }
#workprevnext p#prevtag { background-position: 0px 0px; }
#workprevnext a#prevtag { background-position: 0px -26px; }
#workprevnext a#prevtag:hover { background-position: 0px -52px; }
#workprevnext p#nexttag { background-position: -47px 0px; }
#workprevnext a#nexttag { background-position: -47px -26px; }
#workprevnext a#nexttag:hover { background-position: -47px -52px; }

.casenav {
	float: left; 
	clear: both;
	width: 930px;
	text-align: center;
	padding: 20px 0 0 0;
	}
.casenav .nolink { color: #ccc; }

.container_bc img { background: transparent url(../pics/img_loading.gif) 50% 50% no-repeat; }

/* --- ABOUT
-------------------------------------------------------*/

ul.lista {
	padding-left: 3em;
	margin-bottom: 10px;
	}

ul.lista li {
	list-style-type: disc;
	}

ul.lista2 {
	padding-left: 0;
	}
ul.lista2 li {
	list-style-type: none;
	padding-bottom: 5px;
	}
.year {
	display: inline;
	padding: 0;
	color: #999;
	margin-right: 7px;
	font-weight: normal;
	}
span.year + p {
	padding-bottom: 2px;
	}





/* --- PHOTOS
-------------------------------------------------------*/
a.photothumb {
	float: left; 
	width: 60px;
	height: 60px;
	margin: 0 5px 5px 0;
	border: 6px solid #fff;
	background-position: 50% 50%;
	}
a.photothumb:hover {
	border: 0px solid #ccc;
	padding: 5px;
	border: 1px solid #000;
	background-position: 50% 50%;
	}

ul#photoslider li a {
	width: 930px;
	height: 350px;
	display: block;
	margin-bottom: 5px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-khtml-border-radius: 8px;
	}
ul#photoslider li p {
	color: #999;
	}
#centeredmenu h2 {
	padding: 0;
	margin: 0;
	}
#centeredmenu {
   float:left;
   width:100%;
   background:#fff;
   overflow:hidden;
   position:relative;
}
#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin-left: 0;
   padding:0;
   position:relative;
   right:50%;
}
#centeredmenu ul li:first-child a {
	background: none;
	margin-left: 0px;
}
#centeredmenu ul li a {
   display:block;
   margin:0px;
   padding: 10px 20px;
   background: transparent url(../pics/gradient_01.jpg) left 50% no-repeat;
   color:#999;
   /*
   min-height: 40px;
   text-decoration:none;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -khtml-border-radius: 8px;
   */
}
#centeredmenu ul li a:hover {
   /*background:#ff6e8d;*/
   color:#000;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}
	
/* --- CONTACT
-------------------------------------------------------*/
.container_left, .container_right {
	float: left;
	width: 50%;
	}
/* Contact form */

#contactform-area { margin-top: 10px; }
#contactform-area input, #contactform-area textarea { width: 268px; }
#contactform-area select { width: 280px; }
#contactform-area input, #contactform-area textarea, #contactform-area select {
	border: 1px dashed #999;
	background: #fff;
	color: #555;
	font-size: 11px;
	}
#contactform-area input, #contactform-area textarea, #contactform-area select {
	padding: 5px;
	}
#contactform-area select {
	padding: 3px;
	}
#contactform-area textarea { height: 120px; }
#contactform-area option {
	background: #f9f9f9;
	color: #555;
	padding: 1px 5px;
	}
#contactform-area option.nostyle {
	background: #f9f9f9;
	color: #999;
	padding: 0 5px;
	}
#contactform-area textarea:focus, #contactform-area input:focus {
	border: 1px solid #aaa;
	background: #fff;
	color: #000;
	}
#contactform-area input.submit-button {
	width: 280px;
	height: 77px;
	border: none;
	background: #fff url(../pics/btn_send_01.gif) top center no-repeat;
	color: #fff;
	cursor: pointer;
	margin: 0;
	padding: 0;
	}
#contactform-area input.submit-button:hover {
	border: none;
	}
#contactform-area img { margin-bottom: 10px; }
#contactform-area fieldset {
	width: 280px;
	border: 0;
	margin: 0;
	padding: 0;
	float: left;
	}
#contactform-area fieldset label {
	display: block;
	padding-bottom: 5px;
	}
#contactform-area fieldset#pt2 {
	margin: 0 45px;
	}
#contactform-area fieldset#pt3 p.disclaimer {
	font-size: 10px;
	color: #999;
	}
#contactform-area fieldset h3 {
	display: block;
	width: 280px;
	height: 70px;
	padding: 0;
	float: left;
	color: #000;
	}
#contactinfo-area {}
#contactinfo-area table {
	float: left;
	width: 450px;
	}
#contactinfo-area tbody td {
	padding-bottom: 5px;
	color: #000;
	}
#contactinfo-area th {
	padding-right: 10px;
	text-align: right;
	vertical-align: top;
	width: 100px;
	font-weight: normal;
	color: #999;
	}

#contactform-area li { color: #ff6e8d; }
#contactform-area .error textarea, #contactform-area .error input {border-color: #ff6e8d;}
#contactform-area option.opt_odd, #contactform-area option.opt_even {
	
	}
#contactform-area option.opt_odd {
	background-color: #eee;
	color: #000;
	}
#contactform-area option.firstbreaker {
	border-top-style:solid;
	border-color:#ddd;
	border-width:1px;
	}
/* --- SEARCH
-------------------------------------------------------*/

#search_page ol {
	margin-left: 30px;
	width: 600px;
	}
#search_page ol li {
	padding-bottom: 10px;
	margin-bottom: 10px;
	}
.searchresltsview { padding-bottom: 20px; }