﻿/* Hanworth Timber Company Ltd website CSS styles */

/* **** Main Styles ******* */

* {
	padding: 0;
	margin: 0;
	}

body {
	font-family: Arial, Helvetica, Tahoma, Geneva, sans-serif;
	font-size: 100%;
	color: #333;
	text-align: center;
	}

div#wrapper {
	width: 960px;
	margin: 5px auto;
	text-align: left;
	position: relative;
	}

h1, h2, h3, h4 {
	font-weight: normal;
	font-size: 1em;
	}

.w3c {
	left: -8000px;
	top: -8000px;
	position: absolute;
	}	

a img {
	border: none;
	}

.clearLeft {
	clear: left;
	}

.clearRight {
	clear: right;
	}

.clear {
	clear: both;
	}

/* ********** Header area styles  ******* */

div.header {
	background: #6da303 url('../../Content/images/master/backgrounds/bg_header.jpg') top left repeat-x;
	height: 120px;
	margin-bottom: 10px;
	}

div.header img {
	margin: 10px 0 0 15px;
	}

div.floatRight {
	float: right;
	}

div.header div.floatRight p {
	text-align: right;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.25em;
	padding: 20px 15px 12px 0;
	color: #000;
	}
	
div.header div.floatRight p span {
	font-size: 1.2em;
	}	
	
div.search form fieldset {
	display: inline;
	border: none;
	margin-right:15px;
	}	

div.search label {
	font-size: 0.8em;
	color: #000;
	}
		
div.search input.text {
	border: 1px solid #888;
	height: 1.2em;
	width: 15em;
	padding: 2px;
	overflow: hidden;
	}

div.search input.btn {
	margin-bottom: -6px;
	}	

/* ********** Main navigation styles ********* */

.mainNav {
	display: inline;
	margin: 0 0 10px 0;
	padding: 0;
	background: #f3f1c3;
	width: 960px;
	float: left; 
}

.mainNav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.mainNav a {
	text-decoration: none;
	color: #333;
	float: left;
	text-align: center;
	line-height: 2.5;
	font-weight: bold;
}

.mainNav a:hover {
	color: #73a70c;
	}

.mainNav li {
	font-size: 1.1em;
	float: left;
	text-align: center;
	padding: 0 28px;
	border-left: 1px solid #bababa;
}

.mainNav li:first-child
{
	border-left: none;
}

/*.mainNav li.firstNavItem {
	border-left: none;
}*/

/* ***** Styles for "you are here" navigation ***** */
/* NOTE: these are controlled by the addition of an id to the body tag: 
ul_about = about us page
ul_prod = products page
ul_trade = trade accounts page
ul_sroom = visit our showroom page
ul_contact = contact us page */

#ul_home #nav_home a, #ul_about #nav_about a, #ul_prod #nav_prod a, #ul_trade #nav_trade a, #ul_sroom #nav_sroom a, #ul_contact #nav_contact a {
	color: #73a70c;
	}
	
/* ******** Main horizontal promotional area styles ******** */

div.promoArea {
	border: 1px solid #bababa;
	padding: 15px;
	font-size: 60%;
	}

div.promoArea img {
	padding-right: 10px;
	}

div.promoArea img.lastImage {
	padding-right: 0;
	}

/* ********** Styles for Main Content Area ********** */

div.mainContent {
	padding: 15px 0 15px 15px;
	}

/* ******** Styles for main text area ****** */

div.mainText {
	float: left;
	width: 600px; /*920px;*/
	}

div.mainText h2 {
	font-size: 1.5em;
	padding: 10px 0;
	}

div.mainText p {
	font-size: 0.75em;
	padding-bottom: 10px;
	line-height: 1.5em;	
	}

div.mainText h3 {
	font-size: 1.1em;
	padding: 10px 0;
	}

div.mainText a {
	color: #333;
	text-decoration: underline;
	}

div.mainText a:hover {
	text-decoration: none;
	}

div.mainText a.ctaLink {
	text-decoration: none;
	font-weight: bold;
	color: #333;
	background: url('../../Content/images/master/ro_wht-gry.gif') center right no-repeat;
	padding-right: 13px;
	font-size: 1.1em;
	}

div.mainText a.ctaLink:hover {
	text-decoration: underline;
	}

div.imageContainer {
	float: right;
	border: 1px solid #bababa;
	padding: 15px 15px 0 15px;
	margin: 0 0 5px 15px;
	width: 245px;
	}

div.imageContainer p {
	text-align: center;
	}
	
/* ******** Styles for Product Listing page ******** */

/* breadcrumbs and pagination */

p.breadcrumbs {
	padding-top:10px;
	}

div.pagination-results {
	float: left;
	}

div.pagination-results p {
	padding: 0;
	}
	
div.pagination-pages {
	float: right;
}

div.pagination-pages ul {
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: 0.85em;
	}

div.pagination-pages ul li {
	float: left;
	margin: 0 3px;
	}

div.pagination-pages ul li a {
	display: block;
	text-decoration: none;
	}

div.pagination-pages ul li a:hover {
	text-decoration: underline;
	}

div.pagination-pages ul li.activePage a {
	color: #73a70c;
	font-weight: bold;
	}

div.pagination-pages ul li.activePage a:hover {
	text-decoration: none;
	}

div.pagination-pages ul li img {
	margin-top: 2px;
	}

.pageBtm div.pagination-results p {
	padding-bottom: 15px;
	padding-top:10px;
	} 
	

/* product listing area */

div.productContainer {
	padding-top: 15px;
	}

div.thumbnail {
	float: left;
	width: 170px;
	}

div.thumbnail img {
	padding:3px;
	border: 1px solid #bababa;
	}

div.productDescription {
	float: right;
	width: 420px;
	}

div.productDescription h3 {
	padding: 0 0 5px 0;
	}	
	
div.productDescription p {
	padding: 0 0 5px 0;
	}

div.productSpec {
	float: left;
	width: 250px;
	}

div.productSpec ul {
	list-style: none;
	font-size: 0.75em;
	}

div.pricing {
	float: right;
	width: 150px;
	}

div.productSpec p, div.pricing p {
	padding-bottom: 0;
	}

ul.productLinks {
	clear: both;
	list-style: none;
	font-size: 0.75em;
	padding-top: 5px;
	}

ul.productLinks li {
	float: left;
	border-left: 1px solid #333;
	padding: 0 5px 10px;
	text-align: center;
	}
	
ul.productLinks li a {
	text-align: center;
	font-weight: bold;
	}
	
ul.productLinks li a:hover {
	color: #73a70c;
	text-decoration: underline;
	font-weight: bold;
	}
	
ul.productLinks li.firstNavItem	{
	border-left: none;
	padding-left: 0;
	}

/* ********* Styles for right hand column (Secondary Content) ****** */

div.secondaryContent {
	float: right;
	width:320px;
	}

div.callOutWrapper {
	border: 1px solid #bababa;
	padding:15px;
	margin-bottom: 15px;
	}

/* **** trade customer account login box ***** */

div.tradeLogin {
	background: #6da303 url('../../Content/images/master/backgrounds/bg_tradeLogin.jpg') top left repeat-x;
	width: 285px;
	padding-bottom: 5px;
	}
	
div.tradeLogin h3, div.callOut h3, div.adminMenu h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.4em;
	padding: 15px 10px 10px 10px;
	color: #000;
	word-spacing: 0.1em;
	}
	
div.tradeLogin fieldset {
	border: none;
	padding-bottom: 10px;
	}

div.tradeLogin p {
	padding: 5px 10px;
	color: #000;
	font-size: 0.8em;
	}	
	
div.tradeLogin form input.txt {
	border: 1px solid #888;
	padding: 2px;
	width: 170px;
	overflow: hidden;
	}

div.tradeLogin form input.btn {
	float: right;
	padding-right: 15px;
	}	
	
div.tradeLogin form p {
	clear: left;
	}

div.tradeLogin form p label {
	float: left;
	width: 28%;
	}
	
div.tradeLogin p a {
	color: #000;
	text-decoration: none;
	background: url('../../Content/images/master/ro_grn-gry.gif') center right no-repeat;
	padding-right: 13px;
	font-weight: bold;
	}	

div.tradeLogin p a:hover {
	text-decoration: underline;
	}
	
/* ******* Text call out box styles **** */

div.callOut {
	background: #f3f1c3;
	width: 285px;
	}
	
div.callOut h3 {
	color: #333;
	}

div.callOut p {
	font-size: 0.8em;
	padding: 0 10px 15px 10px;
	}

div.callOut p span {
	color: #73a70c;
	font-weight: bold;
	}


/* ********* Admin Menu Formatting ********* */
div.adminMenu
{
 	background: #f3f1c3;
	width: 285px;
}

div.adminMenu h3
{
    color: #333;
}

div.adminMenu p
{
	font-size: 0.8em;
	padding: 0 10px 15px 10px;
}

div.adminMenu p span
{
	color: #73a70c;
	font-weight: bold;
}

div.adminMenu ul
{
    margin: 10px 0 0 25px;
    padding: 0 4px 10px 0;
}

div.adminMenu li
{
    padding: 2px;   
}


/* ********* Toolbar Formatting ********* */
td.toolbar
{
    height: auto;
}

td.toolbar a
{
    display: inline-block;
    vertical-align: middle;
}



/* ********* Footer area styles ********** */

div.footer {
	clear: both;
	border-top: 1px solid #bababa;
	padding: 7px 0 0 0;
	}

div.footer p {
	font-size: 0.70em;
	float: right;
	margin-bottom: 10px;
	}

div.footer ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

div.footer a {
    color: #333333;
    text-decoration: underline;
    font-weight: normal;
}

div.footer a:hover {
	color: #73a70c;
	}

div.footer li {
	font-size: 0.70em;
	float: left;
	text-align: center;
	padding: 0 10px;
	border-left: 1px solid #bababa;
}

div.footer li.firstNavItem {
	border-left: none;
	padding-left: 15px;
}

div.footer li a {
	text-decoration: none;
	color: #333;
	float: left;
	text-align: center;
}

div.footer li a:hover {
	color: #73a70c;
	}




/* Validation Display Styles */
ul.validation-summary-errors
{
	margin: 10px;
	padding: 6px;
	
	font-weight: bold;
	background-color: White;
	color: Red;
	
	border: solid 3px Red;
}

ul.validation-summary-errors li
{
	margin: 4px 4px 4px 15px;
}


/* ********* Additional Classes added for body content eye-catching notifications ********* */
div.bodyCallOut
{
	background: #f3f1c3;
	width: auto;
	padding: 10px;
	/* font-weight: bold; */
}

div.bodyCallOut h2
{
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #333;
	font-weight: bold;
}

div.bodyCallOut table.modifyObject
{
    width: 548px;
    border-spacing: 0;
    padding: 0;
    table-layout: fixed;
}

div.bodyCallOut td
{
    padding: 2px 2px 4px 2px;
    vertical-align: top;
    text-align: left;
}

div.bodyCallOut td.label
{
    color: #73a70c;
    font-weight: bold;
    text-align: right;
    padding-right: 8px;
    vertical-align: top;
    width: 40%;
}

div.bodyCallOut td.label-left
{
    color: #73a70c;
    font-weight: bold;
    text-align: left;
    padding-right: 8px;
}

div.bodyCallOut td.example-view
{
    background-color: White;
    padding: 10px;
    border: solid 1px #73a70c;
}

div.bodyCallOut td.thumbnail
{
    width: 160px;
    height: 160px;
    text-align: center;
    vertical-align: middle;
}

div.bodyCallOut input[type=text]
{
    padding: 2px;
    width: 96%;
    overflow: hidden;
}

div.bodyCallOut textarea
{
    padding: 2px;
    width: 96%;
    overflow: auto;
}

div.bodyCallOut input[type=submit]
{
    background-color: #73a70c;
    border: solid 2px #73a70c;
    padding: 4px;
    font-weight: bold;
    color: White;
}

div.bodyCallOut input[type=submit]:hover
{
    background-color: white;
    border: solid 2px #73a70c;
    padding: 4px;
    font-weight: bold;
    color: Black;
}

td ul, li ul
{
    margin: 2px 0 4px 15px;
}

span.underline
{
    text-decoration: underline;
}

div.productDetailsPricingContainer
{
    clear: left;
	border: 1px solid #bababa;
	padding: 15px 15px 0 15px;
	margin: 0 0 5px 15px;
	width: 260px;
}

div.productDetailsPricingContainer p
{
    font-size: 1.1em;
}

div.productThumbnails
{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/*div.thumbnailContainer {
	float: right;
	border: 1px solid #bababa;
	padding: 15px 15px 0 15px;
	margin: 0 0 5px 15px;
	width: 245px;
	}

div.thumbnailContainer p 
{
    text-align: center;
}*/

table.variantPricing
{
    
}

table.contactDetails
{
    padding: 5px;
    width: 600px;
}

table.contactDetails td
{
    vertical-align: top;
}

table.contactDetails td.address
{
    width: 55%;
    padding: 5px;
}

table.contactDetails td.telephone
{
    width: 45%;
    padding: 5px;
}

hr.paddedBoth
{
    margin-top: 15px;
    margin-bottom: 15px;
}

div.callOutWrapper p.noTrailingPadding
{
    font-size: 0.85em;
    padding: 0 0 0 0;
    text-align: center;
}

/* Contact Form Settings */
div.bodyCallOut form p label
{
	float: left;
	width: 35%;
	text-align: right;
	padding-top: 2px;
    padding-right: 8px;
	
    color: #73a70c;
    font-weight: bold;
}

span.field-validation-error
{
    clear: left;
    margin-left: 35%;
    font-weight: bold;
    color: Red;
}

div.bodyCallOut form input[type=text]
{
	border: 1px solid #888;
	padding: 2px;
	width: 260px;
	overflow: hidden;
}

div.bodyCallOut form textarea
{
	border: 1px solid #888;
	padding: 2px;
    width: 536px;
    padding: 5px;
}

div.bodyCallOut form button[type=submit]
{
    background-color: #73a70c;
    border: solid 2px #73a70c;
    padding: 4px;
    margin-left: 35%;
    font-weight: bold;
    color: White;
}

div.bodyCallOut form button[type=submit]:hover
{
    background-color: white;
    border: solid 2px #73a70c;
    padding: 4px;
    font-weight: bold;
    color: Black;
}