﻿

/* Common Classes */
.opac {background:#E0DED8;bottom:0;left:0;opacity:1; filter:alpha(opacity=100);	-moz-opacity:1;position:absolute;right:0;top:0;z-index:2;}
.opacBox {background:#FFF;bottom:0;left:0;opacity:0.3; filter:alpha(opacity=30);	-moz-opacity:0.3; position:absolute;right:0;top:0;z-index:2;}
.madeto {background:transparent url('/content/img/made-to-order.png') no-repeat; width:120px; height:120px; display:block;}
.message{font-family:Georgia; font-style:italic; background:#D4E2A6 url(/content/admin/true.png) no-repeat 4px 4px; padding:12px 10px 12px 60px; float:left; width:870px;}
.error{font-family:Georgia; font-style:italic; background:#F14D45 url(/content/admin/false.png) no-repeat 4px 4px; padding:12px 10px 12px 60px; float:left; color:#FFF;}



/* Structure */
body {background:#211C1D;}
#wrap{width:1280px; height:708px; display:block;}
#holder {width:935px; margin: 70px auto 0px auto; }

/* Home Page */
#wrap.bghome {background:transparent }
#wrap.bghome #content {background:transparent;}
#wrap.bghome .opac {background:#E0DED8;bottom:0;left:0;opacity:0.7; filter:alpha(opacity=70); -moz-opacity:0.7; position:absolute;right:0;top:0;z-index:2;}

#box {width:500px; margin:230px 0 0 280px; float:left; z-index:2; }
#box .contentBox {width:470px; float:left; position:relative; color:#E0DED8; font-weight:bold;  font-size:12px;    padding:15px 15px 0 15px;  }
#box .contentBox .boxContent {text-transform:uppercase; position:relative; z-index:5; color:#515151; }
#box .contentBox .boxContent p {line-height:160%; letter-spacing:0.03em;}
#box .contentBox .close {position:absolute; top:7px; right:7px; background:transparent url('/Content/Img/cross.png') no-repeat; display:block; height:12px; width:12px; z-index:6;}
#box .bottom { width:500px; background:transparent url('/Content/Img/box-logo.png') no-repeat; height:50px; float:left;}

/*Page Specific */
#wrap.bgother-furniture #content {border-right:26px solid #EEEEEE; width:769px;}
#wrap.bglinks #content {border-right:26px solid #EEEEEE; width:769px;}
#wrap.bgmailing-list #content{border-right:26px solid #EEEEEE; width:769px;}
#wrap.bgmakers-mark #content {border-right:26px solid #EEEEEE; width:769px;}
#wrap.bgcontact-us #content {border-right:26px solid #EEEEEE; width:769px;}
#wrap.bgcontact-us #content div {float:left;}
#wrap.bgcontact-us #content div div {float:left; width:210px;padding:0 0 0 10px; font-size:90%}
#wrap.bgcontact-us #content div div h1 {margin:20px 0 3px 0;  font-weight:bold; font-size:100%;}
#wrap.bgnewsletter #content {border-right:26px solid #EEEEEE; width:769px;}
#wrap.bgmakers-mark #pagecontent p { width:700px;  }
#wrap.bgmakers-mark #pagecontent div.floatRight { width:104px;  }
#wrap.bgmakers-mark #pagecontent div.floatRight img {margin-top:-20px; margin-left:30px;}


/* Navigation */
#nav {width:140px; height:565px; background:transparent; display:block; position:relative; float:left;}
#nav #homeLogo {width:116px; height:71px; background:transparent url('/Content/Img/logo-tablemakers.png') no-repeat; float:left; margin:15px 0 0 10px; z-index:5; position:relative;}
#nav .navContent {position:relative; z-index:5; margin:15px 0 0 10px; float:left;}
#nav .navContent a {text-transform:uppercase; color:#515151; float:left; font-weight:normal; font-size:90%; margin-bottom:5px; } 
#nav .navContent a.on, #nav .navContent a:hover {color:#FFF;}
#nav #oneLogo {height:37px; width:37px; background:transparent url('/Content/Img/one-mark.png') no-repeat; position:absolute; left:10px; bottom:10px; z-index:6;}
#nav #oneLogo:hover { background-position:0px -37px;}
/* Content */
#content img{float:left;}
#content .bottomText{float:left; width:745px; padding:15px; color:#898989; }
#content {background:#FFF; height:565px; float:left; width:795px;} 
#content .item .imgHolder {height:163px; overflow:hidden;}
#content .item {float:left; width:190px; height:180px; display:block; position:relative; text-align:center;}
#content .item img {margin:20px auto 10px auto; display:block; float:none; }
#content .item a {font-weight:bold; text-transform:uppercase; letter-spacing:0.01em; font-size:80%; }
#content .item a:hover {color:#53ABCF;}
#content .madeto {margin:40px auto 0 auto;}

/* Footer */
#footer {color:#E0DED8; margin-top:10px; font-weight:bold; font-size:80%; width:935px; float:left;}
#footer span{float:right;}
#footer a {color:#FFF;}
#footer a:hover {color:#53ABCF;}

/* Nav Slider */
#slideshow{float:left; position:relative; width:795px; height:565px; overflow:hidden;}
#slides { position: absolute; top: 0px; left: 0px; width: 795px; height: 565px; overflow: hidden; }
#slides .slide { position: absolute; top: 0px; width: 743px; height:565px; background-color:#FFF; overflow:hidden; }
#slideshow img { float:left;}
#slideshow p {color:#898989; font-size:90%; width:690px;}
#slides .slide a {display:block;}
#slideshow div.summary { float:left; padding:0px 15px 15px 15px; width:705px; margin-top:10px;}
#slideshow div.summary h1 {margin:0 0 10px 0;}
#slideshow div.summary p {margin-left:2px;}

#slides .jScrollPaneContainer {width:705px !important; margin-top:10px;}
#slides .jScrollPaneContainer p {width:650px !important; margin-top:10px; margin-left:2px;}

#slides .slide .slidebutton { display: block; position: absolute; top: 0px; right: 0px; height: 567px; width: 26px;  text-decoration: none; background-color:#000;}
#slides .slide .slidebutton img { position: absolute; top: auto; display: block; }
#slides .slide .slidebutton:hover {}

/* Manually place slides to begin */
#slide-1 { position: absolute; top: 0; right: 52px; z-index: 3; }
#slide-2 { position: absolute; top: 0; right: 26px; z-index: 2; }
#slide-3 { position: absolute; top: 0; right: 0px; z-index: 1; }

/* Set the slide states & opacities */
#slides .slidebutton { background-position:-26px 0px;}
#slides .slide.open .slidebutton { background-position:0px 0px; }
#slides .slide.active .slidebutton {background-position:-78px 0px; }
#slides .slide.open.active .slidebutton{background-position:-52px 0px; }
#slides .slide .slidebutton:hover { background-position:-78px 0px; }
#slides .slide.open .slidebutton:hover { background-position:-52px 0px; }


/* Slide Images - About */
.aboutUs  #slides #slide-1 .slidebutton {background-image:url('/content/img/slidenav/history.jpg')}
.aboutUs  #slides #slide-2 .slidebutton {background-image:url('/content/img/slidenav/people.jpg')}
.aboutUs  #slides #slide-3 .slidebutton {background-image:url('/content/img/slidenav/orderprocess.jpg')}

/* Slide Images - Materials */
.materials  #slides #slide-1 .slidebutton {background-image:url('/content/img/slidenav/timber.jpg')}
.materials  #slides #slide-2 .slidebutton {background-image:url('/content/img/slidenav/glass.jpg')}
.materials  #slides #slide-3 .slidebutton {background-image:url('/content/img/slidenav/caring.jpg')}


/* File List */
#files {position:relative;}
#files .holder #uploads div {float:left; width:135px; height:250px; padding:20px 0px 5px 15px  }
#files .holder img {float:left;   }
#files .holder #uploads a {float:left; background:#333; }
#files .holder a:hover img { opacity:0.6; filter:alpha(opacity=60); -moz-opacity:0.6;  }
#files .holder{float:left; width:794px; margin:10px 0 0 0 ;}
#files .holder #uploads{ width:794px; margin:0 0 15px 0px; overflow:auto; height:545px; float:left; }
#files h2 {margin:5px 0 0 0;}
#files span {font-size:70%;}

/* News */
#news {position:relative;}
#news .holder{float:left; width:640px; margin:10px 0 0 0 ;}
#news #articles{ width:640px; margin:15px 0 15px 15px; overflow:auto; height:545px; float:left; }
#news #articles h2 {color:#262729; font-size:100%; margin:10px 0 5px 0; width:600px;}
#news #articles h2 span {color:#CACACA; font-size:70%; text-transform:uppercase; margin-left:5px;}
#news #articles h2 a {color:#53ABCF; font-size:70%; float:right; text-transform:none; margin-right:35px;}
#news #articles div {margin: 0 0 30px 0;}
#news #articles p {color:#A1A0A0; font-size:90%; width:560px; line-height:1.4em;}

#news #newsNav {float:left; margin:15px;}
#news #newsNav  a { text-transform:uppercase; font-size:80%;}
#news #newsNav  a:hover {color:#53ABCF;}
#news #newsNav h2 {color:#262729; font-size:100%;}


/*Press Page */
#wrap.bgpress #content {background:#000;}
#wrap.bgpress #content h2 {color:#FFF;}
#wrap.bgpress #content span {color:#FFF;}

/* Product Page */
#product {height:565px;}
#product p {color:#898989; font-size:90%;}
#product #scrollOut {width:359px; height:565px; background-color:transparent; position:absolute; top:0; left:766px; }
#product #scrollOut .slidebutton { background-position:0px 0px; background:transparent url('/content/img/slidenav/productinfo.png') no-repeat; float:left; width:29px; height:567px;  }
#product #scrollOut.open .slidebutton { background-position:-29px 0px; opacity:0.9; filter:alpha(opacity=90); -moz-opacity:0.9; }
#product #scrollOut .slideNav {float:left; width:300px; height:25px; background-color:#E0DED8; margin-bottom:5px; border-right:#E9E8E4 30px solid; }
#product #scrollOut .slideNav a {float:right; margin:4px 10px; text-transform:uppercase; font-size:80%;}
#product #scrollOut .slideNav a:hover {color:#53ABCF;}
#product #scrollOut .slideText {background-color:#E5E6E1; float:left; width:330px; height:565px;}
#product #scrollOut .inner {padding:0 0px 20px 10px; float:left; width:300px;}
#product #scrollOut .inner a {color:#23B0E5; font-size:90%;}
#product #scrollOut .inner a:hover {color:#9AD4E9;}
#product #scrollOut .inner .top {float:left; border-bottom:3px solid #6B6C73; padding: 0 0 15px 0;}
#product #scrollOut .inner .top h2 {font-weight:bold; font-size:100%; margin-top:0; margin-bottom:5px;}
#product #scrollOut .inner .top #summary {height:110px; width:290px; }
#product #scrollOut .inner .top .jScrollPaneContainer {margin-bottom:5px;}
#product #scrollOut .inner .top .jScrollPaneContainer p {padding-right:10px;}

#product #scrollOut .inner .madetopics {position:relative;}
#product #scrollOut .inner .madetopics h2 { font-size:80%; font-weight:normal;}
#product #scrollOut .inner .madetopics { float:left;  border-bottom:3px solid #6B6C73;  padding: 0 0 5px 0; width:290px;}
#product #scrollOut .inner .madetopics img{ float:left}
#product #scrollOut .inner .madetopics div {position:absolute; width:77px; height:77px; background:transparent url(/content/img/materials-logo.png) no-repeat; bottom:-30px; right:-10px; z-index:4;}

/* More Pics */
#product .morepics {position:absolute; top:432px; right:48px; z-index:2;}
#product .morepics h2 {margin:5px 0 5px 10px; font-size:80%; font-weight:bold; z-index:3; color:#44454B; position:relative;}
#product .morepics .holder {position:relative; height:72px; width:254px; overflow:hidden; float:left; z-index:3; margin:0 10px 0 10px; }
#product .morepics .holder #pics {width:600px; height:72px; position:relative; margin:0 0 0 0px; }
#product .morepics a {float:left; position:relative;}
#product .morepics img {float:left; position:relative;}
#product .morepics #left{color:#44454B; font-weight:bold; z-index:3; font-size:80%; margin:5px 0 5px 10px; float:left; text-transform:uppercase;}
#product .morepics #left:hover {color:#53ABCF;} 
#product .morepics #left:hover span {color:#53ABCF;} 

#product .morepics #right{color:#333; font-weight:bold; z-index:3; font-size:80%; margin:5px 10px 5px 10px; float:right; text-transform:uppercase;}
#product .morepics #right:hover {color:#53ABCF;} 

/* Products Nav */
#product #navOuter {position:absolute; top:0px; right:29px; height:25px; width:300px;}
#product #navProd {position:relative;height:25px; width:300px; z-index:2;}
#product #nextProd {text-transform:uppercase; font-size:80%; font-weight:bold; z-index:3; color:#44454B; position:relative; margin-top:5px; margin-right:10px; float:right;}
#product #allProd {text-transform:uppercase; font-size:80%; font-weight:bold; z-index:3; color:#44454B; position:relative; margin-top:5px; margin-right:15px; margin-left:10px; float:left;} 
#product #nextProd:hover {color:#53ABCF;}
#product #allProd:hover {color:#53ABCF;} 


/*Page Content */
#pagecontent {padding:0 15px 15px 15px; float:left; width:739px}
#pagecontent h3 {margin:15px 0 5px 0;}

#pagecontent div {float:left; margin:0 20px 20px 0px;}
#pagecontent div.floatLeft {width:45%;}
#pagecontent a {color:#73AFC8;}
#pagecontent label {width:100px; margin-bottom:5px; float:left; color:#898989; font-size:90%;}
#pagecontent input {margin-bottom:7px; width:205px;  }
#pagecontent p { color:#898989; font-size:90%; margin-bottom:20px; margin-left:2px;}
#pagecontent .btn {width:auto; border:0; background-color:#53ABCF; color:#FFF; padding:2px 5px; }
#pagecontent .btn:hover {background-color:#44454B;}

