/* CSS Document */

/* global */
* { margin:0; padding:0; }
html { height:100%; }
body { background:#fff; }

/* headings */
h1 { font-size:200%; font-weight:normal; padding:0 0 40px 0; color:#f00; }
h2,
h3,
h4,
h5,
h6 { font-weight:normal; margin:1em 0; color:#f00; }

h2 { font-size:160%; }
h3 { font-size:140%; font-weight:bold; }
h4 { font-size:120%; }

#content_header { width:754px; height:155px; margin-top:25px; margin-left:6px; background:left top no-repeat; }
.banner { width:960px; height:80px; position:relative; float:left; top:0; margin-bottom:20px; clear:both; }

a { color:#f00; text-decoration:underline; }
a:hover { text-decoration:none; color:#f00; }

p,
address,
li,
td { font-family:Tahoma, Geneva, sans-serif; font-style:normal; font-size:130%; color:#555; line-height:1.6em; }
li { }
.square { list-style:square; }

img { border:0px; }
.imageRight { float:right; clear:both; padding:1px; margin:10px 0 10px 20px; }
.imageLeft { float:left; clear:both; padding:1px; margin:10px 20px 10px 0; }

#imageRotate { list-style:none; float:right; right:0; width:200px; height:200px; padding:20px; }

.column { float:left; }
.clear { clear:both; }
.firstPara {font-weight:bold; color:#f00;}

#main { width:1000px; margin:0 auto; font-family:Tahoma; font-size:11px; line-height:15px; color:#888; }
#content { background:#fff; padding:0 20px 20px; }
#pdfContent { padding:0; margin:0; z-index:0; }
textarea,
input { margin:0px; text-align:left; font-family:Tahoma; font-size:11px; line-height:15px; color:#545454; }

#header { width:960px; height:91px; overflow:hidden; padding:40px 0 0 0; margin:0 auto; }
#header p { margin:0; padding:0; }
#header p a,
#header p a:visited { width:212px; height:91px; background:url("presentation/steelplan_logo.gif") left top no-repeat; display:block; text-indent:-9000px; }
:focus {outline:none;}

.logo { float:left; position:relative; }

.form { height:23px; margin:0px }
.form input { width:244px; height:19px; border:1px solid #959595; background:#FFFFFF; }
textarea { width:450px; height:110px; padding-left:5px; overflow:auto; margin-top:0px; border:1px solid #959595; background:#FFFFFF; }

/*Content Area*/
#shadowBG { width:1000px; margin:0 auto;  background:url(images/layout/shadow_bg.gif) center top repeat-y; }
#mainContent { width:960px; margin:0 auto; }
#content { line-height:2.3em; }
#content ul { margin:0 0 0 20px;}
#content ol { margin:0 20px;}
#content ol img { float:right; border:#CCC 1px solid; margin:0 0 20px 20px; clear:both; }
#content ol li { margin:0 0 20px 0;}

/*Comment Form*/
#contactDetails { float:left; width:350px;}
#contactForm, commentForm { float:right; width: 500px; padding:0 0 0 20px; border-left:#000 solid 1px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 20px; color:#F00; }

#footer { height:59px; width:960px; background:url(images/layout/footerBG.gif) top no-repeat; margin:0 0 40px 0; } /* Chrome needs top and bottom padding specified, otherwise white bottom border */
#footer p {color:#333;}
#footer_left { float:left; padding: 5px 20px 0; text-align:left; }
#footer_right { float:right; padding: 5px 20px 0; text-align:right; }
#footer .left,
#footer .right { float:left; position:relative; top:-13px; }
#footer .right { float:right; }	
#footer a { color:#333; text-decoration:none;}


/* SLIDER */

/* root element for the whole scrollable setup */
div.scrollable { position:relative; overflow:hidden; width:646px; height:360px; margin-bottom:40px; }

/* 
	root element for scrollable items. It is 
	absolutely positioned with large width. 
*/
#thumbs { position:absolute; width:20000em; clear:both; border:1px solid #222; }

/* custom positioning for navigational links */
a.prev,
a.next { margin-top:135px; }
a.prev { margin-left:100px; }

/* single item */
#thumbs div { float:left; width:214px; height:340px; background:#333 url(../presentation/h150.png) repeat-x 0 250px; color:#fff; border-right:1px solid #333; cursor:pointer; line-height:1em;  }

/* style when mouse is over the item */
#thumbs div.hover { background-color:#444; }

/* style when element is active (clicked) */
#thumbs div.active { background-color:#066; cursor:default; }

#thumbs h3,
#thumbs p,
#thumbs span { margin:13px; font-size:13px; color:#fff; }

#thumbs h3 a,
#thumbs h3 a:visited { text-decoration:none; font-size:120%; color:#fff;}

/* Pop ups */
#popups {visibility:hidden; height:0; width:0; position:relative;}
fieldset {border:none;}

/* Menu div */
	#menu { width:960px; height:42px; background:url(images/layout/menuBarBG.gif) no-repeat top left; position:relative; z-index:800;float:right; }

/* DROPDOWN MENUS */    

#menu { font-size:130%; margin:0; padding:0; line-height:100%; }
    
.dropdown-menu {
	float:left;
	width:192px;
	height:43px;
    position:relative;
    font-size:100%;
    color:#333;
    cursor:pointer;
    margin-left:0px;
    z-index:400;
	text-align:center;
}

.dropdown-menu a:link, .dropdown-menu a:visited {	
    color:#333 !important;
    display:block !important;
    text-decoration:none !important; 
    margin:0 !important;
}

.dropdown-menu a:hover, .dropdown-menu a:hover p {
    color:#f00 !important;
}

.dropdown-menu .slide-down {
    background:url(images/red-dd-down-button.png) no-repeat right bottom;
}

.menu-first, .menu-single {
    background:transparent url(images/red-dd-button.png) no-repeat right bottom;
    line-height:15px;
    padding:10px 0px 10px 0px;
	border-right:1px solid #ccc;
}

.menu-single {
    background:none;
}

.menu-end { border-right:none; }

.down-list {
	margin:0;
    margin-left:1px;
	padding-bottom:0;
}
.down-list li {
	list-style:none;
    padding:5px 5px 5px 5px;
    background:#d9d9d9 url(images/list-divider.gif) no-repeat bottom;
	font-size:14px;
}
.down-list .lastLI { background:#d9d9d9; }

/*PDF Slider Panel*/
#pdfSlider { position:relative; top:0px; width:215px; height:0px; float:right; text-align:left; /*For IE*/ z-index:950; }
#panel-wrapper { position:relative; width:215px; top:0px; z-index:960; margin:0px; background:url(images/layout/PDFbg.gif) bottom left no-repeat; }
#panel-wrapper a, #panel-wrapper a:visited { color:#666; }
#panel-wrapper a:hover { color:#f00; }
#panel-wrapper hr { width:170px; }
#panel-wrapper ul li { text-decoration:none; list-style:none; }
#panel-wrapper .panel-contents { display:none; padding:10px; }
#panel-wrapper .panel-contents p { color:#333; }
#panel-wrapper form textarea { width:200px; height:120px; font:inherit; }
#mail { margin:0 0 10px 0; }
#mail p { padding:0; margin:5px 0 0; }
#mail input { margin-bottom:10px; }
.openPDF { float:right; position:relative; cursor:pointer; top:40px; z-index:0; overflow:visible; }
.closePDF { width:215px; height:50px; position:relative; float:left; bottom:0; }

/* Tables */

.tableProducts { text-align:center; width:920px; margin-bottom:20px; }
.tableProducts tr { width: 100%; }
.tableProducts td { width: 220px; }

.tableProductsSteeltops {width:920px; margin-bottom:20px; }
.tableProductsSteeltops tr {width:100%; }
.tableProductsSteeltops td {border-bottom:#eee 1px solid; }

.tableProductsSinks {width:920px; margin-bottom:20px; }
.tableProductsSinks tr {width:100%; }
.tableProductsSinks td {border-bottom:#eee 1px solid; }
.tableProductsSinks th { background:#ddd; color:#f00; }

.tableProductsTaps {width:920px; margin-bottom:20px; text-align:center; }
.tableProductsTaps tr {width:100%; }
.tableProductsTaps td {border-bottom:#eee 1px solid; }
.tableProductsTaps th { background:#ddd; color:#f00; }

.tableProductsHandles {width:920px; margin-bottom:20px; text-align:center; }
.tableProductsHandles tr {width:100%; }
.tableProductsHandles td { padding:0 0 10px 0; }
.tableProductsHandles th { background:#ddd; color:#f00; }

.tableProductsAccessories {width:920px; margin-bottom:20px; }
.tableProductsAccessories tr { width:100%; }
.tableProductsAccessories td { padding:0 10px 10px 0; }
.tableProductsAccessories th { background:#ddd; color:#f00; }

.tableProductsAppliances {width:920px; margin-bottom:20px; }
.tableProductsAppliances tr { width:100%; }
.tableProductsAppliances td { padding:0 10px 10px 0; }
.tableProductsAppliances th { background:#ddd; color:#f00; }

.tablePopup th { background-color:#eee; }
.tablePopup { }
.tablePopup tr td { text-transform:uppercase; padding:0 1em; }

.colours { text-align:center; }
.colours td { margin:10px 0; }
.colours img { border:#CCC 1px solid; }

/* Styling */
#unitDesc { margin:0 0 40px 0; padding:0; float:left; }
#unitDesc img { float:left;  }
#unitDesc h2 { margin:0;  }
#unitDesc h3 { text-align:center;  }

em { color:#f00; font-style:normal; }

.whyUse { list-style:none; }
.whyUse li { clear:both; padding:20px 0; }
.whyUse li P { display:block; float:left; }
.whyUse img { float:left; vertical-align:top; margin:0 20px 0 0; }

/*cols*/
#col1 { width:50%; border-right:#CCC 1px solid; float:left; }
#col2 { width:49%; float:right; }

.seminar img { float:left; border:none;}
.seminar div { padding: 10px; margin:20px 0; border:#CCC 1px solid; }

/* Gallery */

#imagevue { height:600px; }

/* Product Buttons */
.productButtonImg { text-align:center; }
.productButton { border:#CCC 1px solid; margin:0 0 20px 0; padding:10px; background:#eee;}
.productButton { display:block; width:900px; height:100%; }
.productButton a:hover { border:f00 1px solid; }

/* Wood Doors */
.woodDoors {width:280px; margin:10px; float:left;}
.woodDoors th, 
.woodDoors td { border:#ccc 1px solid; padding:0 5px; }
.woodDoors img { margin:0 auto; }