/* @override 
	http://www.twfoam.co.uk/css/layoutStyles.css
	http://twfoam.co.uk/css/layoutStyles.css
*/

body{
	background-color: #61834c;
}

#QtyMessage {
	color: red;
	font-weight: bold;
}

#wrapper{
	width: 972px;
	margin: 0 auto;
}

#mainBody{
	min-height: 450px;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	background: #AAD98B url(../images/background.jpg) no-repeat 0 bottom;
	padding: 20px;
	text-align: center;
}

#header{
	text-align: left;
}

#copywrite{
	font: 10px Lucida, Verdana, sans-serif;
	height: 30px;
	padding-top: 10px;
	text-align: center;
}

#copywrite a{
	color: #c8d675;
}
#copywrite a:hover{
	color: silver;
}

p {
	margin-top: 5px;
	margin-bottom: 5px;
}

ul {
	margin-top: 5px;
	margin-left: 40px;
	margin-bottom: 20px;
}

li {
	margin-top: 5px;
	margin-bottom: 5px;
}

h1 {
	margin-top: 0px;
	text-shadow: 0px 0px #aaaaaa;
	letter-spacing: -1px;
	font-weight: bold;
	font-size: 22px;
	font-family: Verdana, Arial, sans-serif;

}

h2 {
	margin-top: 5px;
	text-shadow: 0px 0px #aaaaaa;
	letter-spacing: -1px;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	font-family: Verdana, Arial, sans-serif;
	margin-bottom: 10px;
}
h3 {
	text-shadow: 0px 0px #aaaaaa;
	letter-spacing: -1px;
	font: bold 12px Verdana, Arial, sans-serif;
	text-align: center;
}

h4 {
	text-shadow: 0px 0px #aaaaaa;
	letter-spacing: -1px;
	font: bold 12px Verdana, Arial, sans-serif;
	text-align: left;
	margin-bottom: 10px;
	margin-top: 5px;
}
.clearAllDiv {
	clear: both;
}

.centreContent {
	margin-left: auto;
    margin-right: auto;
    width: 750px;
}

.leftIndent {
	margin-left: 10px;
}


.rightAlign {
	margin-right: 10px;
	text-align: right;
}

.centreAlign {
	text-align: center;
}

/* @group CSS Menus */
/* zeroing padding/margin for all elements */
#NavigationMenu,
#NavigationMenu * { margin:0;padding:0;}
#NavigationMenu {
	background: url(../images/ButtonBG.jpg) repeat-x;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-top: 1px solid black;
	padding-bottom: 0;
	padding-bottom: 0;
	padding-top: 0;
	height: 25px;
	margin: 0px;
}
/* sub-menu ULs */
#NavigationMenu  li ul {
	width:11em !important;/* leaves room for padding */
	position:absolute;
	height:auto;
	display:none;
	left:-10px;
	padding:1px 10px 10px 10px;
	background:url(../images/clear.gif);
}
/* All LIs */
#NavigationMenu li {
	position:relative;
	float:left;
	list-style-type:none;
	font-weight:bold;
	
}
/* sub-menu LIs */
#NavigationMenu  li ul li {
	width:10em/*FF*/;
	padding:0;
	max-width:120%;
}
/* All anchors */
#NavigationMenu li a {
	color:#666;
	text-decoration:none;
	display:block;
	float:left;
	padding:0 .4em;
	font: bold 16px Tahoma;
	color: silver;
	text-align: left;
	padding-left: 20px;

/*  uncomment the declaration below if you want to go "full width"*/
/*	width:7.47em; */
	line-height:25px;
	border-left-width: 1px;
	border-left-color: #333;
}
/* sub-menu Anchors */
#NavigationMenu li ul li a {
	width:9em/*FF*/;
	position:relative !important; /* ie Mac */
	white-space:nowrap;
	line-height:1.7em;
	height:1.7em;
	font-weight:normal;
	border: 1px solid black;
	color: white;
	background: #38818a 0 50%;
	font-size: 12px;
	border-top-style: none;
}
/* :hover and stuff */
#NavigationMenu li a:hover,
#NavigationMenu li a:focus,
#NavigationMenu li a:active {color:#000}
/* move the declarations from the rule below the one above if you want a background swap on *all* anchors, including the top level ones */
#NavigationMenu ul a:hover,
#NavigationMenu ul a:focus,
#NavigationMenu ul a:active {color:#fff !important;background: #a4c657}
/* display and z-index for the sub-menus */
#NavigationMenu li:hover ul,
#NavigationMenu li.msieFix ul {display:block;z-index:10;top:2em !important;}
/* safari: users can keep sub-menus up by from sub-menus to next top level  */
/* didn't find a solution for users going back from the last one. I prefer  */
/* to leave it like that vs. taking the last sub-menu *out of* the wrapper  */
#NavigationMenu li {z-index:6;}

/* Current location - class on Body must match LI's id */
.A #NavigationMenu li#A a,
.B #NavigationMenu li#B a,
.C #NavigationMenu li#C a,
.D #NavigationMenu li#D a,
.E #NavigationMenu li#E a {color:#000;}
/* Keeping current menu accessible to JAWS */
.A #NavigationMenu li#A ul,
.B #NavigationMenu li#B ul,
.C #NavigationMenu li#C ul,
.D #NavigationMenu li#D ul,
.E #NavigationMenu li#E ul {display:block;top:-1000px}

/* background colors */
#A,#B li a {}
/* "trigger" and "msieFix" classes */
#NavigationMenu li.msieFix a {}
/* last nested UL. keeping it in */
#NavigationMenu li ul {left:-2.3em !important;}

/* If JS is OFF we need to style the links in the sub-menu of the current page     */
/* so they are accessible to keyboard users. Using a class on each link would let  */
/* us stick each link in the same place, but we would have to plug a lot of        */
/* attributes in the markup and many rules here, so...                             */
.A #NavigationMenu li#A ul li a:focus,
.A #NavigationMenu li#A ul li a:active,
.B #NavigationMenu li#B ul li a:focus,
.B #NavigationMenu li#B ul li a:active,
.C #NavigationMenu li#C ul li a:focus,
.C #NavigationMenu li#C ul li a:active,
.D #NavigationMenu li#D ul li a:focus,
.D #NavigationMenu li#D ul li a:active,
.E #NavigationMenu li#E ul li a:focus,
.E #NavigationMenu li#E ul li a:active {position:absolute !important;top:1028px !important;}


/* @end */

/* @group CartConfirmationPanel */

#cartAdded {
	background-color: #f29c00;
	min-height:46px;
	width: 150px;
	border: 3px solid black;
	color: black;
	font: 15px Lucida, Verdana, sans-serif;
	text-align: center;
	padding: 5px;
	letter-spacing: -1px;
	position: absolute;
}

#cartAdded img{
	float: left;
	margin-right: 5px;
}

#cartAdded a{
	font: bold 12px Lucida, Verdana, sans-serif;
	color: navy;
}



/* @end */

/* @group Header Styles */
#logo{
	float: left;
}
#headerWrapper{
	height: 118px;
}
#topSpace{
	height: 18px;
}
#smallCart{
	border: 1px solid black;
	margin-bottom: 5px;
	height: 46px;
	width: 558px;
	float: right;
	font: 14px Lucida, Verdana, sans-serif;
}
#cards{
	right: 5px;
	position: relative;
	width: 160px;
	float: right;
}
#deliveryImg{
	float: right;
}

.cartContentsHeading {
	font-weight: bold;
}

#cartContents{
	width: 390px;
	height: 46px;
	line-height: 46px;
}
#cartContents img{
	float: left;
	margin-right: 10px;
}
#cartData img{
	float: left;
	margin-left: 120px;
	margin-top: 7px;
}
#smallCartLoading {
	position: relative;
	left: 175px;
	top: -40px;
}

.cartLink a {
	font-weight: bold;
	color: orange;
	text-decoration: underline;
}
.cartLink a:hover{
	font-weight: bold;
	color: yellow;
	text-decoration: underline;
}


/* @end */

/* @group Links */

#linksBar{
	background: url(../images/ButtonBG.jpg) repeat-x;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-top: 1px solid black;
	height: 25px;
	font: bold 16px Tahoma;
	color: silver;
	text-align: left;
	padding-left: 20px;
	padding-bottom: 0;
	padding-top: 0;
	line-height: 25px;
}
#linksBar a{
	color: silver;
	text-decoration: none;
}
#linksBar a:hover{
	color: orange;
	text-decoration: underline;
}


/* @end */

/* @group PreCutDeals */

/* Have to use a container so centre the divs that float left */

#highLightSectionContainer {
	margin-top: 25px;
}

#highLightSection {
	margin-left: auto;
    margin-right: auto;
    width: 880px;

}

#highLightItem {
	width: 270px;
	min-height:150px;
	background-color: #f3f5a5;
	border: 1px solid black;
	margin-right: 20px;
	float: left;
}

#highLightItemTitle {
	border-bottom: 1px solid black;
	font: bold 15px Lucida, Verdana, sans-serif;
	height: 20px;
	background-color: #f29c00;
	padding-left: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
}

#highLightItemContents{
	padding: 5px;
	font: 12px Lucida, Verdana, sans-serif;
	color: black;
	word-spacing: -1px;
}
#highLightItemContents strong{
	font-size: 13px;
}
.redHeader{
	font-weight: bold;
	color: red;
	text-align: center;
	margin-bottom: 5px;
	margin-top: 5px;
}
#highLightItemContents img{
	float: left;
}

/* @end */

/* @group IndexStyles */

#indexTextContent {
	width: 350px;
	float: left;
	margin-right: 25px;
	margin-left: 5px;
}

p {
	text-align: left;
	font-size: 12px;
	font-family: Verdana, Arial, sans-serif;
	padding-bottom: 10px;
}

p a{
	color: maroon;
}
p a:hover{
	color: #f29c00;
}

ul {
	font-size: 12px;
	font-family: Verdana, Arial, sans-serif;
}
ol {
	font-size: 12px;
	font-family: Verdana, Arial, sans-serif;
	margin-left: 20px
}

#banner{
	margin-bottom: 10px;
	text-align: center;

}

/* @end */

/* @group QuoteInputPanel */

/* @group Size Feilds */

#sizes {
	margin: 5px 5px 5px 20px;
}

	#sizes label{
		display: block;
		float: left;
		margin-bottom: 5px;
		/* Custom Layout */
		text-align: right;
		width: 75px;
		padding-right: 5px;

	}
	#sizes input{
		display: block;
		float: left;
		margin-bottom: 5px;
	}
	
	#sizes br {
		clear: left;
	}

#units {
	color: #000;
	font-weight: bold;
	font-size: 11px;
	text-align: left;
	padding: 2px 2px 2px 5px;
	border-width: 1px;
	border-style: dotted;
}

/* @end */

          

#quoteSystem {
	float: left;
	padding: 15px;
	background-color: #d3ff70;
	width: 500px;
	
	border-color: black;
	border-style: dashed;
	border-width: 1px;
	
	text-shadow: 0px 0px #585858;
	text-align: left;
	font-size: 12px;
	font-family: Verdana, Arial, sans-serif;
}

/* @group chooseShapeSmall */

#chooseShapeSmall {
	background-color: #f29c00;
	color: #000;
	border-width: 1px;
	border-style: dotted;
	padding-left: 10px;
	padding-bottom: 5px;
	padding-top: 5px;
	text-align: center;
	margin-bottom: 10px;
	margin-top: 10px;
}

#chooseShapeSmall a {
	color: #008500;
	font-size: 12px;
	font-weight: bold;
}

#chooseShapeSmall a:hover {
	color: #3936cf;
	font-weight: bold;
	font-size: 12px;
}



/* @end */

/* @group chooseShape */

#shapeChooser {
	background-color: silver;
}

#chooseShape {
	background-color: #f29c00;
	color: #000;
	border-width: 1px;
	border-style: dotted;
	margin-top: 5px;
	margin-bottom: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
}

#chooseShape p {
	color: #000;
	font-size: 14px;
	font-weight: bold;
}

#chooseShape a {
	color: #008500;
	font-size: 12px;
}

#chooseShape a:hover {
	color: #3936cf;
	font-weight: bold;
	font-size: 12px;
}



/* @end */



/* @end */

/* @group QuoteSystemResults */

#shapeDetails {
	width: 200px;
	float: left;
	background-color: white;
	border: 1px solid black;
	margin: 2px 30px 2px 40px;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	padding: 10px;
}

#quoteSystemResults {
	padding: 15px;
	background-color: #d3ff70;
    
	border-color: black;
	border-style: dashed;
	border-width: 1px;
	
	text-shadow: 0px 0px #585858;
	text-align: left;
	font-size: 12px;
	font-family: Verdana, Arial, sans-serif;
}

#quoteSystemResults h3 {
	text-shadow: 0px 0px #aaaaaa;
	font-weight: bold;
	font-size: 14px;
	text-align: left;
	letter-spacing: -1px;
	color: #d3ff70;
	background-color: #4b5b3a;
	padding: 5px 5px 5px 15px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	margin: 10px -15px;
}

#orderDetals {
	border: 1px dotted #7a7a7a;
	padding: 5px;
	margin-bottom: 10px;
	background-color: #ccc;
	margin-top: 10px;
}

#priceRecommended{
	border: 1px dotted #7a7a7a;
	background-color: #b0a5ec;
	padding: 5px;
	margin-bottom: 10px;
}

#priceRecommended:hover{
	background-color: #baadf8;
}

#recommendedFoamHighlight {
	padding: 2px 2px 2px 5px;
	font-style: italic;
	background-color: #383a9f;
	color: #ececec;
	border: 1px solid black;
	margin-right: -6px;
	margin-left: -6px;
	margin-top: -5px;
}

#price{
	border: 1px dotted #7a7a7a;
	padding: 5px;
	margin-bottom: 10px;
}
#price:hover{
	background-color: #c5ff7b;
}

#quoteSystemResults form {
	//margin-top: -10px;
}

p.foamName {
}

p.foamPrice{
}

#priceRecommended p.foamPrice {
	border-style: dotted;
	border-width: 1px;
	padding: 3px;
}

p.foamPrice b{
	color: #a00000;
	font-weight: bold;
	font-style: italic;
	margin-right: 3px;
	margin-left: 2px;
}

#stockingNetFree {
	padding: 3px;
	font-weight: bold;
	color: orange;
	font-size: 12px;
	text-transform: uppercase;
	background-color: #000;
}

#postageClear {
	padding: 3px;
	font-weight: bold;
	color: silver;
	font-size: 12px;
	text-transform: uppercase;
	background-color: #2a356b;
	text-align: center;
	border: 1px solid black;
}
#orderDiscount{
	padding: 3px;
	font-weight: bold;
	color: black;
	font-size: 12px;
	text-transform: uppercase;
	background-color: red;
}

/* @end */

/* @group shapeQuoteSystem */

#shapeImage {
	width: 350px;
	float: left;
	margin-right: 25px;
	margin-left: 5px;
	margin-top: 10px;
	text-align: center;
}

#shapePageContainer {
	margin-right: 5px;
	margin-left: 5px;
	
	border-color: black;
	border-style: dashed;
	border-width: 1px;
	background-color: white;
	padding: 10px;
}

/* @group Size Feilds */

#sizes {
	margin: 5px 5px 5px 20px;
}

	#sizes label{
		display: block;
		float: left;
		margin-bottom: 5px;
		/* Custom Layout */
		text-align: right;
		width: 100px;
		padding-right: 5px;

	}
	#sizes input{
		display: block;
		float: left;
		margin-bottom: 5px;
	}
	
	#sizes br {
		clear: left;
	}

#units {
	color: #000;
	font-weight: bold;
	font-size: 11px;
	text-align: left;
	padding: 2px 2px 2px 5px;
	border-width: 1px;
	border-style: dotted;
}

/* @end */

          

#shapeQuoteSystem {
	float: left;
	padding: 15px;
	background-color: #d3ff70;
	width: 450px;
	
	border-color: black;
	border-style: dashed;
	border-width: 1px;
	
	text-shadow: 0px 0px #585858;
	text-align: left;
	font-size: 12px;
	font-family: Verdana, Arial, sans-serif;
	margin-top: 10px;
}



/* @end */

/* @group Logon Page */

#logonContainer {
	width: 660px;
	margin: 0 auto;
	padding-top: 5px;
	padding-left: 2px;
}

.logonPage {
	width: 300px;
	border: 1px solid black;
	background-color: #d2bedc;
	padding: 5px;
	margin-bottom: 20px;
	float: left;

}

.logonPage h2 {
	margin-top: 2px;
	margin-bottom: 10px;
}

#logonerrormessage {
	font: bold 12px Verdana, Lucida, sans-serif;
	background-color: red;
	color: black;
	padding: 3px;
	border: 1px dotted black;
}

#existingCustomers {
	margin-right: 20px;
	height: 140px;
	background-color: #c7e6d0;
}

#userFoundPanel {
	background-color: #ea878c;
	border: 1px solid black;
	padding: 5px;
	width: 638px;
	margin: 5px auto;
}

#forgottenPassword {
	height: 140px;
}

#changeEmail {
}

#newCustomer {
	padding-top: 1px;
	float: right;
}

#christmas h2{
	color: #f00;
}
/* @end */

p.heading {
	font-size: 16px;
	color: black;
	padding-bottom: 0;
}

#delivery {
	background-color: red;
	padding: 10px;
	border: solid white;
}

#delivery h1{
	color: white;
	font-weight: bold;
}

#delivery p {
	color: white;
	font-weight: bold;
	font-size: 14px;
}

/* @group Sheets Page */

#foamSheetPage {
	background-color: #d4feaa;
	padding: 5px;
}

#smallSheetsHeader {
	background-color: #e9e9a8;
	border: 1px solid #000;
	text-align: center;
	font: bold 16px Lucida, Verdana, sans-serif;
	margin-bottom: 5px;
	padding: 5px;
}

#largeSheetsHeader {
	background-color: #d3d57b;
	border: 1px solid #000;
	text-align: center;
	font: bold 16px Lucida, Verdana, sans-serif;
	margin-bottom: 5px;
	padding: 5px;
}

div.foamSheetGroup {
	padding-left: 5px;
	padding-bottom: 5px;
	margin-bottom: 5px;
	text-align: left;
	font: 12px Verdana, sans-serif;
	border-bottom-style: none;
}


#foamSheetPage div.foamSheetGroup h4 {
	font-size: 15px;
	color: #000;
	margin-top: 29px;
	margin-bottom: -5px;
}

#foamSheetPage h3 {
	font-size: 19px;
	margin-bottom: 27px;
}

#foamSheetPage div.foamSheetGroup p {
	padding-bottom: 0;
	margin: 8px 0 0;
}

span.orderbutton{
	position: relative;
	float: none;
	text-align: right;
	margin-left: 40px;
}

#foamSheetPage div.foamSheetGroup p.sheetDesc {
	padding-left: 20px;
	margin: 0;
	border-bottom: 1px solid gray;
	padding-bottom: 5px;
}

#foamSheetPage span#price {
	
}


#foamSheetPage span.price {
	font-weight: bold;
	color: maroon;
}

/* @end */

#foamNotes {
	color: black;
	font: 12px Georgia, "Times New Roman", Times, serif;
	margin: 5px;
}