/* ######################################################################### */
/* ## CSS Author: Sam Swanson for any help please mail martin@juretic.com ## */
/* ######################################################################### */

#container { width: 100%; height: 100%; display: table; }
#position { display: table-cell; vertical-align: middle; width: 100%; text-align: center;}

/* ####### Main site area styling ####### */
/* ###################################### */

#site {
background: transparent;
margin: 10px auto;
width: 920px;
padding: 20px;
border: 1px solid #bababa;
height: 585px;
text-align: left;
}


/* ####### Masthead ####### */
/* ######################## */

#masthead {
float: left;
width: 915px;
height: 70px;
background: transparent;
margin-top: 10px;
overflow: hidden;
}

#logo {
float: left;
width: 133px;
height: 58px;
}

#logo a:hover, #logo a:focus {
outline: 0;
}

/* ####### Top Navigation ####### */
/* ############################## */

#top-navigation {
float: right;
width: 597px;
height: 31px;
background: url('../images/_navigation/navigation.gif') no-repeat;
margin-bottom: 0;
list-style: none;
font-size: 1em;
line-height: 1em;
margin-top: 14px; 
padding-left: 83px;
}

#top-navigation li {
float: left;
display: block;
}

#top-navigation li a {
float: left;
color: #333;
height: 31px;
}

#top-navigation li a span {
display: none;
}

#top-navigation li a:hover, #top-navigation li a:focus {
text-decoration: none;
}

#top-navigation li#profile a {
width: 78px;
}

#top-navigation li#approach a {
width: 95px;
}

#top-navigation li#residential a {
width: 104px;
}

#top-navigation li#commercial a {
width: 104px;
}

#top-navigation li#press a {
width: 71px;
}

#top-navigation li#news-nav a {
width: 71px;
}

#top-navigation li#contact a {
width: 74px;
}

.profile #top-navigation li#profile a, #top-navigation li#profile a:hover, #top-navigation li#profile a:focus {
background: url('../images/_navigation/navigation.gif') no-repeat -83px -31px;
outline: none;
}

.approach #top-navigation li#approach a, #top-navigation li#approach a:hover, #top-navigation li#approach a:focus {
background: url('../images/_navigation/navigation.gif') no-repeat -161px -31px;
outline: none;
}

.residential #top-navigation li#residential a, #top-navigation li#residential a:hover, #top-navigation li#residential a:focus {
background: url('../images/_navigation/navigation.gif') no-repeat -256px -31px;
outline: none;
}

.commercial #top-navigation li#commercial a, #top-navigation li#commercial a:hover, #top-navigation li#commercial a:focus {
background: url('../images/_navigation/navigation.gif') no-repeat -360px -31px;
outline: none;
}

.press #top-navigation li#press a, #top-navigation li#press a:hover, #top-navigation li#press a:focus {
background: url('../images/_navigation/navigation.gif') no-repeat -464px -31px;
outline: none;
}

.news #top-navigation li#news-nav a, #top-navigation li#news-nav a:hover, #top-navigation li#news-nav a:focus {
background: url('../images/_navigation/navigation.gif') no-repeat -535px -31px;
outline: none;
}

.contact #top-navigation li#contact a, #top-navigation li#contact a:hover, #top-navigation li#contact a:focus {
background: url('../images/_navigation/navigation.gif') no-repeat -606px -31px;
outline: none;
}

/* ####### Home slideshow styling ####### */
/* ###################################### */

#homeSlideShow img {
	position: absolute; 
	z-index: 10;
}

#homeSlideShow {  
	clear: both;
	float: left;
	height: 505px;
	width: 920px;
	background: #fff /*url('../images/_pf/ajax-loader.gif') no-repeat center*/;
}

/* ####### Content ####### */
/* ####################### */

#content {
clear: both;
float: left;
height: 505px;
width: 925px;
background: #fff;
overflow: hidden;
}

/* ####### Project styling ####### */
/* ############################### */

.project-item {
float: left;
width: 137px;
height: 155px;
overflow: hidden;
position: relative;
margin-right: 20px;
margin-bottom: 20px;
background: transparent;
}

.project-item a {text-decoration: none; display:block;}

.project-item .overlay {
top:0px;
left:0px;
position: absolute;
width: 137px;
z-index: 999;
display: block;
height: 155px;



}
.projectTextWrap
{
	width: 137px;
	float:left;
	height: 50px;
	top:0px;
	left:0px;
	overflow: hidden;	
	position: absolute;
}

.projectText{
float: left;
width: 123px;
height: 36px;
padding: 7px;
background: url('../images/_pf/bg-white-trans.png');
z-index: 10;
position: relative;
}

p.topLine {
margin-bottom: 0;
font-size: 11px;
line-height: 15px;

color: #333;
}

.bottomLine {

color: #666;
}

#project-content {
	float: right;
	width: 692px;
	height: 505px;
	margin-right: 3px;
	padding: 0;
	overflow: hidden; 
	background: transparent;
}

#project-content #big-text {
float: left;
width: 672px;
padding: 63px 0 0 0;
height: 442px;
margin-left: 20px;
}

#project-content .left
{
	float:left;
	width: 426px;
	height: 437px;
}

#project-content .right
{
	width: 200px;
	margin-left: 40px;
	height: 240px;
	overflow: hidden;
	float:left;
	margin-bottom: 20px;
}

#project-content .before-img {
	width: 200px;
	height: 150px;
	float: left;
	margin-left: 40px;
	overflow: hidden;
	margin-bottom: 15px;
}

#project-content .before-txt {
float: left;
	width: 200px;
	height: 12px;
	color:#333333;
	font-size: 12px;
	line-height:1.1em;
	margin-bottom:0;
	margin-left: 40px;
	overflow: hidden;
}

#project-content h3
{
	color:#666;
	font-weight: normal;
}
#project-content .title
{
	color:#777;
	margin-top: 5px;
	font-size: 11px;
	margin-bottom: 10px;
}

#project-content .date
{
	color:#999;
	margin-top:0px;
	font-size: 12px;

}

#project-content .quote
{

font-style: italic;
	margin-top:0;
	color:#555;
}

#project-content .copy
{

	line-height: 18px;
	padding-top: 00px;
	color:#333;
	font-size: 11px;
  	line-height: 15px;

}
#project-content .position
{

	position: relative;
}

#project-content .top
{
	position:absolute;
	left:0px;
	top: 0px;
}
#project-left {
float: left;
width: 210px;
height: 460px;
overflow: hidden;
margin-right: 20px;
margin-bottom: 15px;
}


.project-image {
float: left;
width: 95px;
height: 76px;
margin-right: 20px;
margin-bottom: 20px;
background: transparent;
}

#project-title {
clear: left;
float: left;
width: 210px;
height: 30px;
overflow: hidden;
margin-right: 20px;
margin-bottom: 0;
}

#project-title h1 {
margin-bottom: 0;
}

p.topLine2 {
margin-bottom: 0;
font-size: 1.2em;
line-height: 1.1em;
color: #333;
}

p.bottomLine2 {
margin-bottom: 0;
font-size: 1.2em;
line-height: 1.1em;
color: #666;
}

.text-info {
float: left;
width: 380px;
height: 437px;
padding: 63px 0 0 0;
background: #fff;
margin-right: 20px;
}

#publications {
float: left;
width: 272px;
height: 437px;
padding: 63px 0 0 0;
}

blockquote {
margin-top: 1em;
font-size: 11px;
line-height: 15px;
font-style: italic;
color: #555;
}


/* ####### Press Styling ####### */
/* ############################# */

.press-item {
float: left;
width: 97px;
height: 111px;
overflow: hidden;
margin-right: 20px;
margin-bottom: 20px;
background: transparent;
}

#press-left {
float: left;
width: 210px;
height: 437px;
padding: 63px 0 0 0;
overflow: hidden;
margin-right: 20px;
margin-bottom: 15px;
}

#press-content {
float: right;
width: 692px;
height: 437px;
padding: 63px 0 0 0;
margin-right: 0;
overflow: hidden; 
background: transparent;
text-align: center;
}

/* ####### Practice styling ####### */
/* ################################ */

#practice-left {
float: left;
width: 382px;
height: 480px;
padding: 20px 0 0 0;
overflow: hidden;
margin-right: 20px;
margin-bottom: 15px;
}

#practice-images {
float: left;
width: 523px;
height: 480px;
padding: 20px 0 0 0;
}

#practice-left h1 {
margin-bottom: 1em;
}

/* ####### End Styling (keep at end of stylesheet) ####### */
/* ####################################################### */

.grey {
color: #999;
font-family:Georgia,Times,serif;
font-size: 1.4em;
}

.end {
margin-right: 0;
}


.basic-left
{
	float:left;
	width: 460px;
	height: 385px;
	padding: 60px 0;
}


.basic-right
{
	margin-left: 10px;
	width: 450px;
	height: 505px;
	overflow: hidden;
float:left;
}

#press-content {
float: left;
width: 920px;
height: 445px;
padding: 60px 0 0 0;
text-align: left;
}

#press-content .left
{
	float:left;
	width: 210px;
	margin-right: 30px;
}

#press-content .press-quote
{
	float:left;
	width: 210px;
	height: 415px;
	overflow: hidden;
}

#press-content .right
{
	float:left;
	width: 680px;
}


#press-content .title
{
	color:#666;
	font-size: 13px;
}


#press-content .author
{
	color:#999;
	font-size: 13px;
	padding-bottom: 10px;

}

#press-content .date
{


}

#press-content .synopsis
{	
	font-style: italic;
	margin-bottom: 20px;
}

#press-content .copy
{
	font-style: italic;
	margin-top:5px;
	color:#555;
	font-size: 10px;
	height:  310px;
	margin-bottom: 20px;
	overflow: hidden;
}

#press-content .copy p {
	font-size: 10px;
}

#press-content .quote
{
	float:left;
	margin-bottom: 10px;
}

#news #right
{
	padding-right: 50px;
	float:left;
	height: 500px;
	overflow-x: hidden;
	overflow-y: auto;
	width: 710px;
	font-size: 1.1em;

}


#news #left
{
	width: 150px;
	
	float:left;
	font-size: 0.8em;
	line-height: 6px;
	
}
#news #left h2
{
		color: #444!important;
		margin-bottom: 10px;
}
#news #right h2 
{
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 20px;

}


#news #right h2 a{
	color: #555!important;


}

#news li li 
{
	padding-left: 10px;
}


.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	background: url('/images/scroll-track.gif') 2px repeat-y;
	right: 0;
	top: 0;
	height: 100%;

}
.jScrollPaneDrag {
	position: absolute;
	background: #bababa;
	cursor: pointer;
	width: 7px!important;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
	background: url('/images/scroll-up-arrow.gif') 0px 1px no-repeat;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
	background: url('/images/scroll-down-arrow.gif') 0px 2px no-repeat;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}

.quote-mark {
color: #999;
font-family: times;
font-size: 14px;
}

#project-content .quote-mark, #profile-quotes .quote-mark {
color: #c60;
}

/* ####### Contact page ####### */
/* ############################ */

.contact .basic-left {
	float:left;
	width: 310px;
	height: 180px;
	padding: 325px 0 0 0;
	margin-right: 20px;
	overflow: hidden;
}

.contact .basic-left h2 {
	margin-bottom: 0;
}

.contact .basic-right {
	float: right;
	width: 570px;
	height: 505px;
}

/* ####### Profile Page ####### */
/* ############################ */

.profile-image {
float: left;
width: 333px;
height: 505px;
}

.profile-text {
float: left;
width: 344px;
height: 465px;
margin-left: 20px;
margin-top: 40px;
}

#profile-quotes {
float: left;
width: 200px;
height: 465px;
margin-left: 20px;
margin-top: 40px;
}

#profile-quotes .title
{
color:#777;
font-size:11px;
margin-bottom:10px;
margin-top:5px;
}

#profile-quotes .date
{
	color:#999;
	margin-top:0px;
	font-size: 12px;
}

#profile-quotes .quote
{
	font-style: italic;
	margin-top:5px;
	color:#c60;
}

/* ####### Approach styling ####### */
/* ################################ */

#slideShow img {
	position: absolute; 
	z-index: 10;
}

#slideShow {  
	float: left;
	height: 505px;
	width: 570px;
	background: #fff;
}

#approach-text {
float: left;
width: 330px;
height: 465px;
margin-right: 20px;
margin-top: 40px;
}


/* ####### Press Choice styling ####### */
/* #################################### */

#press-choice-left {
clear: left;
float: left;
width: 250px;
height: auto;
margin: 90px 60px 90px 150px;
}

#press-choice-right {
float: left;
width: 250px;
height: auto;
margin: 90px 150px 90px 60px;
}

/* ####### News Page styling ####### */
/* ################################# */

#news-wrapper {
clear: both;
float: left;
width: 570px;
margin-left: 350px;
height: 505px;
overflow: hidden;
}

#news-content {
float: left;
width: 570px;
height: 505px;
}

#news-content h2 {
color: #333333;
margin-bottom: 0;
}

#news-content img {
margin-bottom: 10px;
}

/*#news-content .news-item {
float: left;
width: 515px;
height: auto;
margin-bottom: 20px;
}*/

.news-item {
margin-bottom: 20px;
}

#press-content .right {
float: left;
width: 680px;
}

#press-content #leftRight {
float: right;

}

#press-content #leftRight a {
cursor: pointer;
}

#back-button {
color:#333333;
float:left;
font-size:12px;
height:12px;
line-height:1.1em;
margin-bottom:0;
overflow:hidden;
width:200px;
}

#back-button a {
color: #c60;
}

.cut
{
	width: 679px;
	height: 407px;
	overflow: hidden;
}


#content a {
color: #fff;
}

/* Scroll Bar Master Styling Starts Here */
/* All comments can be freely removed from the css */

.scrollgeneric {line-height: 1px;font-size: 1px;position: absolute;top: 0; left: 0;}

.vscrollerbase {
width: 15px;
background: #ccc url('../images/_pf/basebarcaps_verticalbarbody.png') 0px 0px repeat-y;
}

.vscrollerbar {
width: 15px;
background: transparent url('../images/_pf/basebarcaps_verticalbarbody.png') -15px 0px repeat-y;
}

.hscrollerbase {
height: 15px;
background: transparent url('../images/_pf/horizontalbarbody_cornerjog.png') 0px -15px repeat-x;
}
.hscrollerbar {
height: 15px;
background: transparent url('../images/_pf/horizontalbarbody_cornerjog.png') 0px -30px repeat-x;
}

.vscrollerbar, .hscrollerbar {
padding: 10px;
z-index: 2;
}
.vscrollerbarbeg {
background: url('../images/_pf/basebarcaps_verticalbarbody.png') -45px -30px no-repeat;
width: 15px;
height: 15px !important;
}
.vscrollerbarend {
background: url('../images/_pf/basebarcaps_verticalbarbody.png') -45px 0px no-repeat;
width: 15px;
height: 15px;
}
.hscrollerbarbeg {
background: url('../images/_pf/basebarcaps_verticalbarbody.png') -60px -15px no-repeat;
height: 15px;
width: 15px !important;
}
.hscrollerbarend {
background: url('../images/_pf/basebarcaps_verticalbarbody.png') -30px -15px no-repeat;
height: 15px;
width: 15px;
}

.scrollerjogbox {
width: 15px;
height: 15px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background: transparent url('../images/_pf/horizontalbarbody_cornerjog.png') 0px 0px;
}
.vscrollerbasebeg {
background: url('../images/_pf/basebarcaps_verticalbarbody.png') -30px -30px no-repeat;
width: 15px;
height: 15px !important;
}
.vscrollerbaseend {
background: url('../images/_pf/basebarcaps_verticalbarbody.png') -60px -30px no-repeat;
height: 15px;
width: 15px;
}

.hscrollerbasebeg {
background: url('../images/_pf/basebarcaps_verticalbarbody.png') -60px 0px no-repeat;
height: 15px;
width: 15px !important;
}

.hscrollerbaseend {
height: 15px;
width: 15px;
background: url('../images/_pf/basebarcaps_verticalbarbody.png') -30px 0px no-repeat;
}
.scrollerjogbox:hover {
background: transparent url('../images/_pf/basebarcaps_verticalbarbody.png') -45px -15px;
}
/* Scroll Bar Master Styling Ends Here */


#content .left a {
color: #c60;
}

#project-content .quote {
color: #c60;
line-height: 14px;
}