/*################################## W3C #################################*/
body, div, 
h1, h2, h3, h4, 
h5, h6,ol, p, 
ul, hr   { display: block }
li              { display: list-item }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { padding: 8px; line-height: 1.33 }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .83em 0 }
h3              { font-size: 1.17em; margin: 1em 0 }
h4, p,
ul,
blockquote  { margin: 1.33em 0 }
h5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
h6              { font-size: .67em; margin: 2.33em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
hr              { border: 1px inset }
ol, ul { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
a[href]         { text-decoration: underline }
:focus          { outline: thin dotted invert }
@media print {
@page         { margin: 10% }
h1, h2, h3,
h4, h5, h6    { page-break-after: avoid; page-break-inside: avoid }
blockquote, 
pre           { page-break-inside: avoid }
ul, ol, dl    { page-break-before: avoid }
}
@media aural {
h1, h2, h3, 
h4, h5, h6    { voice-family: paul, male; stress: 20; richness: 90 }
h1            { pitch: x-low; pitch-range: 90 }
h2            { pitch: x-low; pitch-range: 80 }
h3            { pitch: low; pitch-range: 70 }
h4            { pitch: medium; pitch-range: 60 }
h5            { pitch: medium; pitch-range: 50 }
h6            { pitch: medium; pitch-range: 40 }
li, dt, dd    { pitch: medium; richness: 60 }
dt            { stress: 80 }
pre, code, tt { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
em            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
strong        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
dfn           { pitch: high; pitch-range: 60; stress: 60 }
s, strike     { richness: 0 }
i             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
b             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
u             { richness: 0 }
a:link        { voice-family: harry, male }
a:visited     { voice-family: betty, female }
a:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}
/*################################## /W3C #################################*//*################################## DEFAULT #################################*/
body
{
position:relative;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
color:#262626;
padding: 0;
margin: 0;
text-align: center;
}
th,td,p,div,span,ul
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
color:#262626;
text-align: left;
}
img {
border: 0;
}
.nodisplay { display: none; }
h1{
padding: 0px;
margin: 0px;
color:#262626;
}
h2{
padding: 0px;
margin: 0px;
color:#262626;
}
p{
padding: 0px;
margin: 0px;
padding-bottom:16px;
}
.content p:first-child{
padding-top:0;
margin: 0px;
padding: 0px;
}
.clearALL
{
display:block;
clear: both;
margin: 0;
padding: 0;
width: 0;
height:0;
}
a{ 
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
}
.debug
{
background-color: yellow;
width: 250px;
}
#server_message{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1000;
}
.server_message
{
display: block;
position: relative;
margin: 100px auto 100px auto;
color:#262626;
width: 400px;
background-color: #ccc;
border-color: grey;
border-width: thin;
border-style: outset;
text-align:center;
}
#nojs{
display: block;
width: 100%;
background-color: #ccc;
}
.nojs
{
display: block;
position: relative;
margin: 0 auto 0 auto;
padding: 0 0 20px 0;
width: 664px;
}
#message
{
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1000;
}
.message
{
display: block;
position: relative;
margin: 25% auto 0 auto;
background-color: #ccc;
width: 50%;
padding: 20px;
}
.raquo
{
clear: both;
float: left;
width: 25px;
margin: 0;
text-align: center;
padding: 0;
}
.content
{
clear: both;
display: block;
position: relative;
margin: 0 auto 0 auto;
padding: 0;
width: 700px;
text-align: left;
}
#footer
{
clear:both;
display: block;
position: relative;
margin: 20px auto 20px auto;
padding: 0px;
padding-top:16px;
padding-bottom:16px;
width: 700px;
text-align: center;
}
.footer{
/*padding:10px;*/
text-align: center;
clear:both;
font-size:10px;
}
a.footerNav{
font-size:10px;
}
.enlarge{
display:block;
}
div#htmlMail{
/*
background-color: #fff;
color:#000;
*/
}
.horzLine{
padding: 1px 0 0 0;
background-image: url(/assets/images/dots_horizontal.gif);
background-repeat: repeat-x;
}
.vertLine{
background-image: url(/assets/images/dots_vertical.gif);
background-repeat: repeat-y;
}
/*################################## /DEFAULT #################################*//* global */
#cluetip-close img {
border: 0;
}
#cluetip-title #cluetip-close {
float: right;
position: relative;
}
#cluetip-waitimage {
width: 43px;
height: 11px;
position: absolute;
background-image: url(wait.gif);
}
/***************************************
=cluetipClass: 'default' 
-------------------------------------- */
.cluetip-default {
background-color: #d9d9c2;
}
.cluetip-default #cluetip-outer {
position: relative;
margin: 0;
background-color: #d9d9c2;
}
.cluetip-default h3#cluetip-title {
margin: 0 0 5px;
padding: 8px 10px 4px;
font-size: 1.1em;
font-weight: normal;
background-color: #87876a;
color: #fff;
}
.cluetip-default #cluetip-title a {
color: #d9d9c2;
font-size: 0.95em;
}  
.cluetip-default #cluetip-inner {
padding: 10px;
}
.cluetip-default div#cluetip-close { 
text-align: right;
margin: 0 5px 5px;
color: #900;
}
/***************************************
=cluetipClass: 'jtip'
-------------------------------------- */
.cluetip-jtip {
background-color: #fff;
}
.clue-right-jtip {
background-image: url(arrowleft.gif);
background-repeat: no-repeat;
padding-left: 10px;
}
.clue-left-jtip {
background-image: url(arrowright.gif);
background-repeat: no-repeat;
padding-right: 10px;
}
.cluetip-jtip #cluetip-outer {
border: 2px solid #ccc;
position: relative;
background-color: #fff;
}
.cluetip-jtip h3#cluetip-title {
margin: 0 0 5px;
padding: 2px 5px;
font-size: 16px;
font-weight: normal;
background-color: #ccc;
color: #333;
}
.cluetip-jtip #cluetip-inner {
padding: 0 5px 5px;
display: inline-block;
}
.cluetip-jtip div#cluetip-close { 
text-align: right;
margin: 0 5px 5px;
color: #900;
}
/***************************************
=cluetipClass: 'rounded'
-------------------------------------- */
.cluetip-rounded {
background: transparent url(bl.gif) no-repeat 0 100%;
margin-top: 10px;
}
.cluetip-rounded #cluetip-outer {
background: transparent url(tl.gif) no-repeat 0 0;
margin-top: -12px;
}
.cluetip-rounded #cluetip-title {
background: transparent url(tr.gif) no-repeat 100% 0;
padding: 12px 12px 0;
margin: 0 -12px 0 0;
position: relative;
}
.cluetip-rounded #cluetip-inner {
background: url(br.gif) no-repeat 100% 100%;
padding: 5px 12px 12px;
margin: 0 -12px 0 0;
position: relative;
}
.cluetip-rounded div#cluetip-close { 
text-align: right;
margin: 0 5px 5px;
color: #009;
background: transparent;
}
.cluetip-rounded div#cluetip-close a {
color: #777;
}
/* stupid IE6 HasLayout hack */
.cluetip-rounded #cluetip-title,
.cluetip-rounded #cluetip-inner {
zoom: 1;
}@media projection, screen { .ui-tabs-hide { display:none; } }
@media print { .ui-tabs-nav { display: none; } }
.dark .ui-tabs-nav,
.dark.ui-tabs-nav {
padding-left:6px;
border-bottom:1px solid #333;
float:left;
width:99%;
margin:0;
}
.dark .ui-tabs-nav li,
.dark.ui-tabs-nav li {
list-style:none;
float:left;
}
.dark .ui-tabs-nav a,
.dark.ui-tabs-nav a {
display:block;
padding:2px 0 1px;
text-decoration:none!important;
border:1px solid #444;
margin:1px 1px 0 0;
font:9pt Verdana;
color:#FFF;
background:#444;
}
.dark .ui-tabs-nav span,
.dark.ui-tabs-nav span {
padding:2px 13px 2px;
color:#FFF;
background:#333;
}
.dark .ui-tabs-nav a:hover,
.dark .ui-tabs-nav a:hover span,
.dark.ui-tabs-nav a:hover,
.dark.ui-tabs-nav a:hover span {
border-color:#181818;
color:#FFF;
background:#111;
}
.dark .ui-tabs-nav .ui-tabs-selected a,
.dark.ui-tabs-nav .ui-tabs-selected a {
background:#222;
border-color:#333;
}
.dark .ui-tabs-nav .ui-tabs-selected a span,
.dark.ui-tabs-nav .ui-tabs-selected a span {
margin-bottom:0;
color:#FFF;
background:#181818;
border-bottom:1px solid #181818;
cursor:default;
}
.dark .ui-tabs-nav .ui-tabs-disabled a,
.dark .ui-tabs-nav .ui-tabs-disabled a span,
.dark.ui-tabs-nav .ui-tabs-disabled a,
.dark.ui-tabs-nav .ui-tabs-disabled a span {
background:#161616;
color:#333;
border-color:#161616;
cursor:default;
}
.dark .ui-tabs-container {
background:#181818;
border-bottom:1px solid #222;
clear:both;
padding:10px 10px 8px 10px;
*padding-top:3px;
*margin-top:-24px;
clear:left;
}/*################################## CLIENT #################################*/
/* 
This is the css template client.css. 
Put css code in here that is specific to
this project.
*/
body{
background-image: url(/assets/images/background.jpg);
background-repeat: repeat-x;
background-color: #272425;
color:#f6b034;
}
th,td,p,div,span,ul{
color:#f6b034;
}
#footer{
width: 699px;
}
.content{
width: 699px;
}
.body{
background-color: #000;
}
a:link {
color:#f6b034;
text-decoration: none;
}
a:active {
color:#f6b034;
text-decoration: none;
}
a:visited {
color:#f6b034;
text-decoration: none;
}
a:hover {
color:#f6b034;
text-decoration: underline;
}
.homeHead{
display: block;
position:relative;
float:left; 
width: 223px;
height:15px;
margin: 0;
padding: 0;
}
.orangeBox
{
display: block;
position: relative;
width: 193px;
padding: 10px 15px 0 15px;
margin: 0;
background-repeat: no-repeat;
text-decoration: none;
float: left;
z-index: 20;
line-height:15px;
}
#orangeBox1
{
height: 183px;
color: #000;
background-image: url(/assets/images/buttons/browse_products-off.gif);
}
#orangeBox1:hover
{
text-decoration: none;
background-image: url(/assets/images/buttons/browse_products-on.gif);
}
#orangeBox2
{
height: 183px;
color: #000;
background-image: url(/assets/images/buttons/our_company-off.gif);
}
#orangeBox2:hover
{
text-decoration: none;
background-image: url(/assets/images/buttons/our_company-on.gif);
}
#orangeBox3{
height: 183px;
color: #000;
background-image: url(/assets/images/buttons/faq-off.gif);
}
#orangeBox3:hover{
text-decoration: none;
background-image: url(/assets/images/buttons/faq-on.gif);
}
.orangeBox div{
line-height:20px;
font-size:20px;
color:#fff;
}
.footer pre, .footer pre a{
font-family: Arial, Verdana, Helvetica, sans-serif;
text-transform:uppercase;
text-align: center;
font-size:10px;
margin:0;
padding:0;
}
#gallery
{
display: block;
clear: both;
width: 678px;
background-color: #000;
padding: 0 0 21px 21px;
margin: 0;
}
.project_gallery
{
float: left;
padding: 21px 21px 0 0;
}
.product_gallery
{
float: left;
padding: 1px 1px 0 0;
}
.infoBox
{
display: block;
clear: both;
background-color: #000;
padding: 10px 25px 15px 25px;
color: #000;
background-image: url(/assets/images/orange_gradation.jpg);
background-repeat: repeat-y;
margin: 10px 0 10px 0;
}
.infoBox div,.infoBox div div a{
color: #000;
}
.infoBox div a{
color: #fff;
}
/*
.infoBox div h1{
color: #fff;
margin-bottom:16px;
}
*/
.header_text{
position:absolute;
top:20px;
color:#aaa;
text-transform:uppercase;
font-size:10px;
background-color: transparent;
}
.footer_mast{
clear:both;
margin: 20px auto 0 auto;
width: 699px;
text-align:center;
}
/*############ FLASH ############*/
h1{
font-size:52px;
line-height:42px;
color:#ffffff;
margin: 0;
padding: 0;
}
h2{
/*font-size:30px;
display: inline;*/
line-height:35px;
color:#ffffff;
margin: 0;
padding: 0;
/*background-color: #ccc;*/
}
.body div h2
{
/*font-size:30px;*/
line-height: 30px;
color: #ffffff;
margin: -5px 0 0 -2px;
padding: 0;
/*background-color: #ccc;*/
}
.contactHead{
font-size:30px;
line-height:40px;
color:#ffffff;
margin: 0;
margin-left: -2px;
padding: 0;
/*background-color: #ccc;*/
}
h4.homeHead 
{
font-size: 50px;
line-height: 50px;
color: #ffffff;
/*margin: 25px 0 0 12px;*/
padding: 0;
white-space: nowrap;
}
.footer_mast h3{
line-height:30px;
font-size:35px;
color:#f6b034;
margin: 0;
padding: 0;
text-align:center;
}
.flash-replaced .alt {
display: block;
height: 0;
position: absolute;
overflow: hidden;
width: 0;
}
/*############ /FLASH ############*/
/*############ CLUETIPS ############*/
/* global */
#cluetip-close img {
border: 0;
}
#cluetip-title #cluetip-close {
float: right;
position: relative;
}
#cluetip-waitimage {
width: 43px;
height: 11px;
position: absolute;
background-image: url(/assets/images/cluetip/wait.gif);
}
/***************************************
=cluetipClass: 'default' 
-------------------------------------- */
#cluetip-waitimage {
background-image: none;
}
.cluetip-default {
background-color: transparent;
}
.cluetip-default #cluetip-outer {
position: relative;
margin: 0;
background-color: #fff;
}
.cluetip-default h3#cluetip-title {
margin: 0 0 5px;
padding: 8px 10px 4px;
font-size: 1.1em;
font-weight: normal;
background-color: #87876a;
color: #fff;
}
.cluetip-default #cluetip-title a {
color: #fff;
font-size: 0.95em;
}  
.cluetip-default #cluetip-inner {
padding: 0px;
}
.cluetip-default div#cluetip-close { 
text-align: right;
margin: 0 5px 5px;
color: #900;
}
.cluetip-text
{
background: #f6b034;
color: #000;
padding: 10px;
text-align: center;
border-color: #CCC;
border-width: 1px 0 0 0;
border-style: double;
}
/*############ /CLUETIPS ############*/
/*############ TABS ############*/
.dark .ui-tabs-nav,
.dark.ui-tabs-nav {
padding-left:0px;
border-bottom:0 solid #333;
float:left;
width:699px;
margin:0;
background-color: #403c3d;
}
.dark .ui-tabs-nav li,
.dark.ui-tabs-nav li {
list-style:none;
float:left;
}
.dark .ui-tabs-nav a,
.dark.ui-tabs-nav a
{
display: block;
padding: 0;
text-decoration: none!important;
border: 0px solid #444;
margin: 1px 0 0 0;
color: #FFF;
}
.dark .ui-tabs-nav span,
.dark.ui-tabs-nav span
{
display: block;
padding: 12px;
color: #999;
background-color: #575757;
font-size: 12px;
text-align:center;
}
.dark .ui-tabs-nav a:hover,
.dark .ui-tabs-nav a:hover span,
.dark.ui-tabs-nav a:hover,
.dark.ui-tabs-nav a:hover span {
border-color:#000;
color:#f6b034;
background-color:#000;
}
.dark .ui-tabs-selected a:hover,
.dark .ui-tabs-selected a:hover span,
.dark.ui-tabs-selected a:hover,
.dark.ui-tabs-selected a:hover span {
border-color:#000;
color:#000;
background-color:inherit;
}
.dark .ui-tabs-nav .ui-tabs-selected a span,
.dark.ui-tabs-nav .ui-tabs-selected a span {
color:#f6b034;
background-color:#000;
border:0 solid #000;
cursor:default;
}
.dark .ui-tabs-nav .ui-tabs-selected a,
.dark.ui-tabs-nav .ui-tabs-selected a {
background-color:transparent;
border-color:inherit;
}
.dark .ui-tabs-container {
background-color:transparent;
border:0 solid #222;
clear:both;
padding:0;
margin:0;
*padding-top:0;
*margin-top:0;
}
.ui-tabs-container{
clear:both;
padding:0;
margin:0;
}
.dark{
background-color:transparent;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-transform:uppercase;
text-align: center;
font-size:10px;
line-height:28px;
padding:0;
margin:0;
background-color:#000;
}
.ui-tabs-loading em {
padding: 0;
background: none;
}
/*############ /TABS ############*/
/*############ NAV ############*/
.sitenav{
position:relative;
z-index:99;
width:700px;
background-color: transparent;
}
.nav,.current_nav
{
display: block;
float: left;
margin: 0;
z-index: 99;
padding: 10px 0 11px 0;
width: 135px;
text-align: center;
background-color: #000;
}
a.nav:focus,   a.nav:hover,  a.nav:active{
background-color:#f6b034;
}
.nav_header{
float:left;
padding-top:42px;
width:272px;
background-color:transparent;
}
/*############ /NAV ############*/
body.products a#nav_products,
body.projects a#nav_projects,
body.company a#nav_company,
body.contacts a#nav_contacts
{
background-color:#f6b034;
color:#000;
text-decoration: none;
}
/*
body.products #roof_tab,
body.projects #residential_tab,
body.company #about_tab,
*/
#roof #roof_tab,
#timber #timber_tab,
#overhangs #overhangs_tab,
#residential #residential_tab,
#commercial #commercial_tab,
#specialty #specialty_tab,
#about #about_tab,
#employment #employment_tab,
#faqs #faqs_tab,.current_tab
{
background-color:#000;
color:#f6b034;
text-decoration: none;
}
.floatimage {
float: left; /* Floating causes this box to shrinkwrap around sized content elements. */
margin: 0;
display: inline; /* IE doubled margin bug is defeated via this fixer rule. */
}
.float_left
{
display: block;
float: left;
padding-right: 25px;
}
/*
.body div *,.body div * p{
float: left;
margin-left: 25px;
}
*/
/*############ DIALOGS ############*/
/*
#chooseLang{
z-index:1000;
}
*/
.jqmWindow {
display: none;
position: absolute;
top: 15%;
left: 50%;
margin-left: -100px; /*1/2 of width*/
width: 200px;
border: 1px solid #f16323;
}
.jqmOverlay { background-color: #272425; }
/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
width: expression(this.parentNode.offsetWidth+'px');
height: expression(this.parentNode.offsetHeight+'px');
}
.title{
display: block;
background-color: #f16323;
padding:5px;
color:#fff;
font-weight:bold;
margin:0;
font-size:20px;
}
.modal{
background-color: #000;
padding:16px;
text-align:center;
font-weight:bold;
}
.modal button
{
background-color: #f16323;
color: #fff;
font-weight: bold;
border-color: #f16323;
/*
border-color: #f5832a #f16323 #f16323 #f5832a;
*/
border-width: 2px;
border-style: outset;
}
/*############ /DIALOGS ############*/
/*################################## /CLIENT #################################*/