/* ==================== 



Title:          Site name - main stylesheet

Author:         Benjamin Tollady (http://www.thirststudios.com)

Contact:        ben@thirststudios.com

Version:        1.0

Last Updated:   04/10/2010



==================== */



/* Eric Meyer reset rules v1.0 | 20080212 */



html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    font-size: 100%;

    vertical-align: baseline;

    background: transparent;

}

body {

    line-height: 1;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}



/* remember to define focus styles! */

:focus {

    outline: 0;

}



/* remember to highlight inserts somehow! */

ins {

    text-decoration: none;

}

del {

    text-decoration: line-through;

}



/* tables still need 'cellspacing="0"' in the markup */

table {

    border-collapse: collapse;

    border-spacing: 0;

}



/* @group Grid */

/*.container_16{margin-left:auto;margin-right:auto;width:960px}*/

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16,.grid_17{display:inline;float:left;position:relative;margin-right:10px}.alpha{margin-left:0}.omega{margin-right:0}
.container_16 .grid_1{width:40px}
.container_16 .grid_2{width:100px}
.container_16 .grid_3{width:160px}.container_16 .grid_4{width:220px}.container_16 .grid_5{width:280px}
.container_16 .grid_6{width:340px}.container_16 .grid_7{width:400px}.container_16 .grid_8{width:460px}
.container_16 .grid_9{width:520px}.container_16 .grid_10{width:580px}
.container_16 .grid_11{width:640px}.container_16 .grid_12{width:700px}.container_16 .grid_13{width:583px}.container_16 .grid_14{width:820px}
.container_16 .grid_15{width:880px}.container_16 .grid_16{width:940px}.container_16 .grid_17{width:608px}
.container_16 .prefix_1{padding-left:60px}.container_16 .prefix_2{padding-left:120px}.container_16 .prefix_3{padding-left:180px}.container_16 .prefix_4{padding-left:240px}.container_16 .prefix_5{padding-left:300px}.container_16 .prefix_6{padding-left:360px}.container_16 .prefix_7{padding-left:420px}.container_16 .prefix_8{padding-left:480px}.container_16 .prefix_9{padding-left:540px}.container_16 .prefix_10{padding-left:600px}.container_16 .prefix_11{padding-left:660px}.container_16 .prefix_12{padding-left:720px}.container_16 .prefix_13{padding-left:780px}.container_16 .prefix_14{padding-left:840px}.container_16 .prefix_15{padding-left:900px}.container_16 .suffix_1{padding-right:60px}.container_16 .suffix_2{padding-right:120px}.container_16 .suffix_3{padding-right:180px}.container_16 .suffix_4{padding-right:240px}.container_16 .suffix_5{padding-right:300px}.container_16 .suffix_6{padding-right:360px}.container_16 .suffix_7{padding-right:420px}.container_16 .suffix_8{padding-right:480px}.container_16 .suffix_9{padding-right:540px}.container_16 .suffix_10{padding-right:600px}.container_16 .suffix_11{padding-right:660px}.container_16 .suffix_12{padding-right:720px}.container_16 .suffix_13{padding-right:780px}.container_16 .suffix_14{padding-right:840px}.container_16 .suffix_15{padding-right:900px}.container_16 .push_1{left:60px}.container_16 .push_2{left:120px}.container_16 .push_3{left:180px}.container_16 .push_4{left:240px}.container_16 .push_5{left:300px}.container_16 .push_6{left:360px}.container_16 .push_7{left:420px}.container_16 .push_8{left:480px}.container_16 .push_9{left:540px}.container_16 .push_10{left:600px}.container_16 .push_11{left:660px}.container_16 .push_12{left:720px}.container_16 .push_13{left:780px}.container_16 .push_14{left:840px}.container_16 .push_15{left:900px}.container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px}.container_16 .pull_3{left:-180px}.container_16 .pull_4{left:-240px}.container_16 .pull_5{left:-300px}.container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px}.container_16 .pull_8{left:-480px}.container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px}.container_16 .pull_11{left:-660px}.container_16 .pull_12{left:-720px}.container_16 .pull_13{left:-780px}.container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px}.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
.clearfix{display:block}* html .clearfix{height:1%}

/* @end Grid */



/* CSS Starts */



html, body {

    height: 100%;

    overflow: auto;

}



body {

    background:#fff;

   

    font-size: 11px;

    line-height: 1.3;

}



#body {

    position: relative;
	background-color: #3a3a3a;
    padding: 16px 0;
	margin-left:20px;
    float: left;
	width:830px;
    height: 408px;
	opacity: 0.8;
	/*
	 background: transparent url(../images/trans-90w.png);
	*/
}
#body_about {

    position: relative;
  background-color: #3a3a3a;
	padding: 16px 0;
	margin-left:20px;
    float: left;
	width: 670px;
    height: 408px;
	/*
	 background: transparent url(../images/trans-90w.png);
	 background: transparent url(../images/trans-90w.png);
	*/
}

#body_about .grid_2{
}


#body_project .grid_2{
margin: 0;

    padding: 0;
}

#body_project {
	background-color: #3a3a3a;
    position: relative;
	
    padding: 16px 0;
	margin-left:20px;
    float: left;
	width:840px;
    height: 408px;
	/*
	background: transparent url(../images/trans-90w.png);
	*/
}
.backg{
background: transparent url(../images/trans-90w.png);
}

#body_project_cat {

    position: relative;

    padding: 16px 0;
	margin-left:10px;
    float: left;
	width:865px;
    height: 408px;
	background-color: #3a3a3a;
	/*
		background: transparent url(../images/trans-90w.png);
	*/
}
#body1 {

    position: relative;
    background: transparent url(../images/trans-90w.png);
    padding: 16px 0;
	margin-left:20px;
    float: left;
	width:665px;
    height: 408px;

}

#body2 {

    position: relative;

    background: transparent url(../images/trans-90w.png);

    padding: 16px 0;

	margin-left:20px;

    float: left;

	width:152px;

    height: 408px;

}

#body3 {

    position: relative;
background-color: #3a3a3a;
    

    padding: 16px 0;

	margin-left:20px;

    float: left;

	width:750px;

    height: 408px;
	/*
	background: transparent url(../images/trans-90w.png);
	*/

}

#body .grid_9 {

    margin: 0;

    padding: 0;

    width: 660px;

}
#body_project .grid_9 {

    margin: 0;

    padding: 0;

    width: 350px;
	
	
}

.backGBody{

background-color:transparent;
/*
background: transparent url(../images/trans-90w.png);
opacity:0.4;
*/
}

#slider1_container{
margin-top: 0px;
 
 /*width: 380px;
 height: 410px;
 
 */
 float:right;
 text-align: center;
 margin-right: 5px;
}
#slider2_container{


 /*width: 380px;
 height: 410px;
   background: transparent url(../images/trans-90w.png);
 */
float:left;
 text-align: center;

}

#body .grid_91 {

    margin: 0;

    padding: 0;

    width: 350px;

}

.projects #body {

    background: transparent;

    padding: 0;

}

.project-detail #content {

    top: 66px;

}



#blocker {

    background: #fff;

    height: 1000px;

    width: 1000px;

    position: fixed;

    margin-top: -1000px;

    z-index: 200;

}



#imageContainer {

    position: fixed;

    top: 50%;

    left: 50%;

    width: 1000px; 

    height: 668px; 

    margin-left: -500px;

    margin-top: -335px;

    z-index: 1;

}



#footer {

    width: 1000px;

    background: transparent url(../images/trans-70b.png);

}



#contentContainer {

    position: absolute;

    top: 50%;

    left: 0;

    width: 100%;

    margin-top: -335px;

    text-align: center;

    min-width: 1000px; 

    z-index: 2;

}

#contentWrapper {

    margin: 0px auto;

    position: relative;

    text-align: left;

    width: 1000px;

}

#content {

    position: relative;

    z-index: 3;

    left: 116px;

    top: 112px;

    min-height: 450px; 

    width: 880px;

    height: auto;

}

#content1 {

    position: relative;

    z-index: 3;

    left: 116px;

    top: 112px;

    min-height: 450px; 

    width: 860px;

    height: auto;

}

#header {

    

    position: fixed;

	padding-top:4px;

    height: 36px;

    width: 1001px;

    z-index: 6;
	
	/*
	background: transparent url(../images/trans-70b.png);
	*/
}

.home #header {

    background: transparent url(../images/trans-70b.png);

}

/* @group Navigation */



#nav a,

#nav-sub a {

	text-align: right;

    text-transform: uppercase;

    line-height: 2;

    padding-bottom: 1px;

    font-size: 11px;

    display: block;

}

#nav1-sub a {

	text-align: right;

    line-height: 2;

    padding-bottom: 1px;

    font-size: 11px;

    display: block;

}

#nav2-sub a {

	text-align: left;

    text-transform: uppercase;

    line-height: 2;

    padding-bottom: 1px;

    font-size: 11px;

    display: block;

}
#nav3-sub a {

	text-align: left;

    text-transform: uppercase;

    padding-bottom: 10px;

    font-size: 11px;

    display: inline;

}
#nav4-sub a {

	text-align: right;

    text-transform: uppercase;

 

    font-size: 11px;

  display: inline;

}

#nav { 

    margin-top: 112px;

    padding: 16px 0px 12px 0;

    list-style: none;

    position: fixed;

    

    z-index: 10;

	width:120px;
	    background-color: #3a3a3a;
		/*
		background: transparent url(../images/trans-80b.png);
		*/
}

#nav a:link, #nav a:visited {

    color:#fffefe;

    width: 100px;

	height:183;

    text-align: right;

}

#nav .here a:visited, #nav a:hover, #nav a:active {

    color: #333;

	background: transparent url(../images/bg-hover.jpg);

	width:100px;

	padding-right:20px;

}

#body #nav-sub,

#body #nav-sub li {

    list-style: none;

    margin: 0;

}

#body #nav2-sub,

#body #nav2-sub li {

    list-style: none;

    margin: 0;

}
#body #nav3-sub,

#nav3-sub li {

    list-style: none;
 padding-bottom: 10px;
    margin: 0;

}
#nav4-sub,

#nav4-sub li {

  text-align: right;
	 padding-bottom: 10px;
    list-style: none;

}

#body_project #nav-sub,

#body_project #nav-sub li {

    list-style: none;

    margin: 0;

}
#nav-sub a:link, #nav-sub a:visited {

    color: #333;

    overflow:hidden;

}

#nav2-sub a:link, #nav-sub a:visited {

    color: #333;

    overflow:hidden;

}

#nav-sub a span {

    background: transparent url(../images/nav-arrow.png) 0 4px no-repeat;

    position:absolute;

    left:0px;

    display: block;

    width: 10px;

    height: 10px;

}

#nav2-sub a span {

    background: transparent url(../images/nav-arrow.png) 0 4px no-repeat;

    position:absolute;

    left:0px;

    display: block;

    width: 10px;

    height: 10px;

}

.projects #nav-sub a:link, .projects #nav-sub a:visited {

    color: #333;

}

#nav-sub a span {

    visibility: hidden;

}

#nav-sub .here a:visited, #nav-sub a:hover, #nav-sub a:active,

#nav2-sub .here a:visited, #nav-sub a:hover, #nav-sub a:active,

.projects #nav-sub .here a:visited, .projects #nav-sub a:active {

    color: #333;

}

#nav-sub a:hover{

	color: #fc5f12;

}

#nav-sub .here a span {

    visibility: visible;

}

#nav2-sub a:hover{

	color: #fc5f12;

}

#nav2-sub .here a span {

    visibility: visible;

}

/* @end Navigation */



/* @group Header */

h1 a {

    position: absolute;

    display: block;

    text-indent: -999.9em;

    top: 100px;

    left: 100px;

    height: 50px;

    width: 192px;

    

}

#site-search {

    position: absolute;

	margin-top:5px;

    right: 48px;

    top: 5px;

    vertical-align: middle;

	color:#fc5f12;

}

#site-search input {

    font-size: 11px;

    background: none;

    border: 1px;

	border-color:#fc5f12;

	border-style:ridge;

    padding: 4px;

    color: #fc5f12;

    width: 180px;

    margin-right: 5px;

    margin-top: -2px;

}

#site-search button {

	background:none;

    border: 0;

    color: #333;

	font-weight:bold;

    font-size: 10px;

    text-transform: uppercase;

    cursor: pointer;

}

#body-search {

    border-bottom: 1px dotted #ccc;

    margin-bottom:20px;

    padding:10px 0 0;

    overflow:hidden;

}

#body-search p {

    overflow:hidden;

}

#body-search fieldset {

    padding-bottom: 10px;

    overflow:hidden;

}

#body-search input {

    font-size: 20px;

    border: 1px solid #ccc;

	color: #fc5f12;

    padding: 4px;

    width: 350px;

    margin-bottom: 3px;

    float:left;

    display:block;

    margin-right:5px;

}

#body-search button {

    padding: 5px;

    cursor: pointer;

    float:left;

}

#body-search label, #site-search label {

    display: none;

}

.paginate {

    width: 100%;

    overflow: hidden;

    padding: 10px 0;

}

.paginate .page {

    float: left;

    display:block;

    line-height: 27px;

}

.paginate .links strong,

.paginate .links a {

    float: left;

    display: block;

    line-height: 25px;

    padding: 0 5px;

    border: 1px solid #ccc;

    background: #eee;

    margin-left: 4px;

}

.person {

    float: left;

    display: block;

    width: 63px;

    text-align: center;

    position: relative;

    z-index:5;

    padding-right: 17px;

    background: transparent url(../images/people_black_bar.gif) 0 68px repeat-x;

}

.person span {

    display: block;

    background: transparent url(../images/people_black_bar.gif) 0 0 repeat-x;   

    z-index: 9;

    height: 10px;

    width: 100%;

    position: absolute;

    top: 68px;

}

.person.last {

    padding-right: 0;

}

.person p {

    padding:3px 0;

    line-height: 1;

    height: 20px;

    font-size: 9px;

}

.lang_ch .person p {

    height: 35px;

}

.person .description p {

    font-size: 12px;

}

.person img {

    display: block;

}

.people .first,

.people .last {

    width:63px;

}

.people .first img {

    padding-left: 0;

}

.people .last img {

    padding-right: 0;

}



.person .description {

    position: absolute;

    width: 270px;

    top: 0;

    left: 83px;

    background: transparent url(../images/people-bg.png) 0 100% no-repeat;

    border-top: 1px solid #ccc;

    color: #000;

    z-index: 100;

    text-align: left;

    padding: 15px;

    display: none;

}

.person.last-row .description {

    top: auto;

    bottom: 20px;

}

.person .description p {

    height: auto;

    line-height: 1.3;

}

.person .arrow {

    position: absolute;

    top: 15px;

    left: 73px;

    display: block;

    width: 11px;

    height: 26px;

    background: transparent url(../images/people-arrow-right.png) 0 0 no-repeat;

    z-index: 101;

    display: none;

}

.right .arrow {

    left: -6px;

    background: transparent url(../images/people-arrow-left.png) 0 0 no-repeat;

}

.right .description {

    left: -305px;

}

.first {

    margin-left: 0;

}

.last {

    margin-right: 0;

}

.row-start {

    clear: both;

}

/* @end Header */





/* @group Text */

p,

#body ul,

#body ol {

    padding: 0 0 10px;

}

a:link, a:visited {

    text-decoration: none;

    color: #ffffff;

}

a.search-url:link, a.search-url:visited {

    color: #AAA;

    font-size: 11px;

}

.person a:link, .person a:visited {

    color:#000;

}

a:hover, a:active,

a.search-url:hover, a.search-url:active,

.person a:hover, .person a:active  {

    color: #fc5f12;

}

#body li {

    margin-left: 20px;

    list-style: square;

}

#body ol li {

    list-style: decimal;

}

h2 {

    font-weight: 100;

    font-size: 20px;

    margin: 0;

    padding: 0;

    margin-bottom: 10px;

    line-height: 1;

}

h3 {

    text-transform: uppercase;

}

/* @end Fixed */



/* @group Body */

#body .nav-col {

    width: 150px;

    margin: 0;
	padding: 0;
    
	
	/*
	padding-right: 20px;
	
	*/

}

#body2 .nav-col {

    width: 145px;

    margin: 0;

    padding: 0;

}

#body .nav-col ul,

#body .nav-col-proj ul {

    padding: 0 16px;

    

}

.projects #body .grid_13 {

    padding: 0;

    margin: 0;

    width: 620px;

}

.projects #body .grid_6 {

    border-left: 1px dotted #333;

}

.projects #body .grid_4 ul {

    padding-left: 0;

}

.projects #body .grid_4.nav-col-proj {

    border: none;

}

.projects #body .nav-col-proj {

    margin: 16px 0 0 0;

    padding: 0;

    border-left: 1px dotted #aaa;

}

.padding { 

    padding: 0 16px;

    border-left: 1px dotted #aaa;

    overflow: hidden;

    zoom:1;

}

.padding12 { 

    padding: 0 16px;

    border-left: 1px dotted #aaa;

    zoom:1;

}

.contact #body .grid_11 {

    margin: 0;

    border-left: 1px dotted #aaa;

    width: 658px;

}

.people #body .grid_11 {

    margin: 0;

    width: 658px;

}

.contact #body .grid_4 {

    margin: 0;

    width: 254px;

}

.google-map #map {

    border: 1px solid #aaa;

    margin-right:3px;

    overflow:hidden;

}

#gallery {

    position: absolute;

    right: 0;

}

#gallery a {

    float: left;

    display: block;

    padding-left:4px;

}

/*

.project-detail #content {

    padding-top: 90px;

}

*/

.project-detail #body {

    color: #fff;

}

.project-detail h2 {

    margin-bottom: 0;

    padding-bottom: 0;

    font-size: 20px;

    padding-left: 0;

}

.location {

    color: #666;

    font-size: 11px;

}

.projects .location {

    padding: 0;

    padding-left: 0px;

    font-size: 10px;

}

.projects .back-category {

    padding-left: 16px;

}

.article {

    border-top: 1px dotted #ccc;

    padding: 20px 0 10px;

    overflow: hidden;

}

.directions img {

    float: left;

}

.directions p, .directions h3 {

    padding-left: 100px;

}

.no-border {

    padding-top: 10px;

    border-top: 0px;

}

.body-text {

    position: absolute;

	margin-left:15px;

	left: 0px;

    width: 210px;

    font-size: 10px;

}

.body-text .showhide {

    padding: 10px 10px;

    font-size: 10px;

    display: none;

    background: transparent url(../images/trans-70b.png);

    overflow: hidden;

    zoom:1;

}

.body-text .article {

    border-top: 1px dotted #333;

    padding: 10px 16px 10px;

    background: transparent url(../images/trans-70b.png);

    margin-bottom: 2px;

}

.project-title {

    height: 30px;

}

.indent {

    padding-left: 16px;

}

/* @end Body */



/* @group Footer */

#footer {

    background: transparent url(../images/trans-70b.png);

    height: 36px;

	top: -36px;

	padding-top:3px;

    position: relative;

    font-size: 11px;

    z-index: 100;

}

#footer p {

    line-height: 36px;

}

#tagline {

    position: absolute;

    top: -584px;

    left: 900px;

    height: 91px;

    width: 91px;

    text-indent: -999.99em;

   

}

#footer a:link, #footer a:visited {

    color: #666;

}

#footer a:hover, #footer a:active {

    color: #fff;

}

/* @end Footer */

#jCycle {

    height: 668px;

    z-index: -1;

}



/* Form */



#subForm input {

    border:  1px solid #aaa;

    padding: 3px;

    width: 200px;

    margin-bottom: 7px;

}

#subForm input#button {

    width: auto;

    background: #00ADF4;

    color: #fff;

    border: none;

    text-transform: uppercase;

    padding: 3px 10px;

    cursor: pointer;

}



.languages {

    position: absolute;

    top: 8px;

    right: 250px;

	margin-top:5px;

	color: #fc5f12;

    font-size: 11px;

}

.languages a {

    color: #fc5f12;

    margin: 0 5px;

}

.languages a:hover {

    color: #333;

}

.languages a.selected {

    border-bottom: 2px solid #fc5f12;

}

.project_title {

    position: absolute;

    bottom: 50px;

    color: #fff;

    right: 41px;

    width: 600px;

	font-size:12px;

    text-align: right;

}



/* iPad [portrait + landscape] */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {



    #wrapper{ 

        height:auto; 

    }

    #content-wrapper {

        height: auto;

    }

    .home #wrapper{ 

        height:100%; 

    }

    .home #content-wrapper {

        min-height: 100%;

    }



}



/* iPhone [portrait + landscape] */

@media only screen and (max-device-width: 480px) {



    #wrapper{ 

        height:auto; 

    }

    #content-wrapper {

        height: auto;

    }

    .home #wrapper{ 

        height:100%; 

    }

    .home #content-wrapper {

        min-height: 100%;

    }

	div#title{
		margin-top: 4px;
	}

}

@media only screen and (max-device-width: 380px) {



    #wrapper{ 

        height:auto; 

    }

    #content-wrapper {

        height: auto;

    }

    .home #wrapper{ 

        height:100%; 

    }

    .home #content-wrapper {

        min-height: 100%;

    }

	div#title{
		margin-top: 4px;
	}

}

@media only screen and (max-device-width: 280px) {



    #wrapper{ 

        height:auto; 

    }

    #content-wrapper {

        height: auto;

    }

    .home #wrapper{ 

        height:100%; 

    }

    .home #content-wrapper {

        min-height: 100%;

    }

	div#title{
		margin-top: 20px;
	}

}