/* New Tabs */
#tabs {float:left; width:100%;}
#tabs ul{text-align: left; padding: 0; margin: 0; height:33px; z-index:999;}
#tabs ul li{position:relative; display: block; padding: 0!important; margin: 0!important; width:204px; height:33px; float:left; z-index:999;}

.tabs{margin:10px 15px 15px 0;}

/* In general, style all links in the tab navigation area. In practice, this allows us to differentiate between active tabs and inactive tabs. */

.ui-tabs-nav a{position:relative; border: none; width:204px; height:33px; padding:0 180px 20px 0; z-index:999;}
.ui-tabs-nav a:hover { text-decoration: none; }
/* A margin at the bottom allows us to put padding at the bottom of the tab headers */

.ui-tabs-nav{margin-bottom: 0;}
.ui-tabs-selected{}
.ui-tabs-unselect{}

/* Style the selected tab header link (which overwrites the 'ui-tabs-nav a'style) */

.ui-tabs-selected  {position:relative; border: none; text-decoration:none;}

#tabs ul li.tab-installation { background:url(/images/buttons/tab-installation.png) 0 -33px no-repeat;}
#tabs ul li.tab-features {background:url(/images/buttons/tab-features.png) 0 -33px no-repeat; margin-left:-10px;}

#tabs ul li.tab-installation.ui-tabs-selected  { background:url(/images/buttons/tab-installation.png) 0 0 no-repeat !important;}
#tabs ul li.tab-features.ui-tabs-selected  {background:url(/images/buttons/tab-features.png) 0 0 no-repeat !important; margin-left:-10px;}


.ui-tabs-disabled{}
.ui-tabs-panel{padding: 20px; border: none; background-color: #853f16;}
.ui-tabs-hide{display: none;}



/*Tabbed Panels*/
.tabArea {float:left; width:697px;}
.tabArea ul.tabTop {float:left; width:697px; height:33px; margin:0; padding:0;}
.tabArea ul.tabTop li{float:left; text-indent:-999em; display:inline; padding:0; margin:0; width:204px; height:33px;}

#bodyRight .content .tabArea ul li{background:none; margin:0; padding:0;}

	.hotbox{cursor:pointer;}

    #interviews {background:url(/images/buttons/tab-interviews.png) 0 -33px no-repeat !important; }
    #photos {background:url(/images/buttons/tab-photos.png) 0 -33px no-repeat !important;}
    #reviews {background:url(/images/buttons/tab-reviews.png) 0 -33px no-repeat !important;}
    
    #wallcalc {background:url(/images/buttons/tab-wall.jpg) 0 -33px no-repeat !important;}
    #roofcalc {background:url(/images/buttons/tab-roof.jpg) 0 -33px no-repeat !important;}
    
	#interviews.selected, #photos.selected, #reviews.selected, #wallcalc.selected, #roofcalc.selected{background-position: 0 0 !important;}
	
	
.tabArea .tabContent {float:left; width:697px; background:#853f16;}
.tabArea .tabContent .tabVideo{float:left; width:450px; height:332px; margin:12px 0 15px 15px;}
.tabArea .tabContent .tabPhotos{float:left; margin:12px 0 15px 15px; border:1px solid #fff;}
/*.tabArea .tabContent .tabPhotos img{width:450px;}*/
.tabArea .tabContent .tabVideo-text, .tabArea .tabContent .tabPhotos-text{float:left; width:200px; margin:20px 0 0 15px; color:#fff;}
.tabArea .tabContent .tabVideo-text h2, .tabArea .tabContent .tabPhotos-text h2{text-transform:none; font-size:16px; color:#fff;}

.tabArea .tabContent .tabReviews{float:left; width:650px; margin:20px 0 0 15px; color:#fff;}
.tabArea .tabContent .tabReviews .review{float:left; border-bottom:1px solid #fff; margin-bottom:10px; padding:5px 0 15px 0; width:650px;}
.tabArea .tabContent .tabReviews .review .review-img{float:left; width:140px; border:1px solid #fff; margin:0 10px 10px 0;}
.tabArea .tabContent .tabReviews .review .review-img img{width:140px;}


.tabArea .tabThumbs {float:left; width:693px; padding-bottom:15px; border:2px solid #853f16; background:#e3e3e3;}
.tabArea .tabThumbs .thumb { float: left; width: 141px; height: 139px; padding:3px; margin: 12px 0 10px 21px; background:#fff; color: #000; font-size: 10px; font-weight: bold; line-height:12px; text-align:center;}
.tabArea .tabThumbs .thumb p{padding:2px; text-align:left;}

.tabArea .tabContent .tabWall{float:left; width:693px; margin:20px 0 0 15px; color:#fff;}
.tabArea .tabContent .tabRoof{float:left; width:693px; margin:20px 0 0 15px; color:#fff;}

.dotsNav {float:left; width:693px;}
#dotsBar {float:left; width:80px; margin-left:175px;}
#dotsBar a.mediadot {float:left; width:12px; height: 12px; margin:25px 0 0 2px; overflow:hidden; background: url(/images/media-dot.gif) no-repeat 0 0; text-indent: -9999px; }
/*#dotsBar { text-align: center; float:left; width: 100px; margin:0; padding-top:25px; border:1px solid red;}
#dotsBar a.mediadot { float: left; width:12px; height: 12px; margin: 0 2px; overflow:hidden; background: url(/images/media-dot.gif) no-repeat 0 0; text-indent: -9999px; }*/
#dotsBar a.mediadot:hover, #dotsBar a.mediadot.selected { background: url(/images/media-dot.gif) 0 -12px no-repeat;}