/* CSS Document */
body
{
	background-color: #E8FEB9;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	padding-bottom:20px;
	}

#outercontainer
/*This is the container that makes sure that all the elements contained within it are centered on the page. The width has been determined by taking the max width in that is displayed at the screen resolution 800x600, and allowing a slight space each side so the background is still visible at this size*/
{
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: #ffffff;
	background: url(images/main_back.gif) 0 0 repeat;
	/*border-right: solid 1px #b58d87;
	border-left: solid 1px #b58d87;*/
	color: #666666;
}

#header
/*The header uses an image that has been designed in photoshop. This has enabled me to get curved edges at the top in order to take the boxy feel away. A background color has been specified to make sure that if the image takes a long time to load, there is something shown in it's place.*/
{
	height: 80px;
	background: url(images/auburn/header_cap.gif) no-repeat;
	background-color:#B91900;
	color:#000000;
}

#navbar, #navbotbar
/*This sets the background colour for the navigation bar. The padding has been done using em's to make sure the padding is relative to the font size that is being used.*/
{
	background-color:#fef1b9;
	color:#000000;
	padding-top: 0.25em;
	padding-left:0.25em;
	padding-bottom: 0.25em;
	background: url(images/nav_repeat.gif) 0 0 repeat;
}

#navitems ul, #navitems ul li, #navbotitems ul, #navbotitems ul li
/*The inline value means that a list can be used to display the navigation items horizontally rather than vertically*/ 
{
	display:inline;
	margin: 0;
	padding	: 0;
	
}

#navitems ul li a, #navbotitems ul li a
/*This sets the padding that is set around each navigation link. And uses are border on the right to act as a seperation line between each item. The background colour is set to the same as the nav bar and the text colour is set to take on the cream colour that is also used for 'Walcot Upholstery in the header.*/
{
	padding-left:10px;
	padding-right: 10px;
	border-right: solid 2px #b58d87;
	background-color: #fef1b9;
	color: #7A3328;
	
}

#navitems ul, #navitems li, #navitems a, #navitems a:hover, #navitems a:visited, #navbotitems ul, #navbotitems li, #navbotitems a, #navbotitems a:hover, #navbotitems a:visited
/*Makes sure none of the a link text is displayed with an underline, and makes it oblique, and specified a font family*/
{
	text-decoration:none;
	font-style:oblique;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 95%;
	font-weight: bold;
}

html>body #navitems ul, #navitems li, #navitems a, #navitems a:hover, #navitems a:visited, #navbotitems ul, #navbotitems li, #navbotitems a, #navbotitems a:hover, #navbotitems a:visited
{
font-size: 100%;
}



#navitems ul li a:hover, #navbotitems ul li a:hover
/*Set color for items on the navigation bar when the mouse is placed over them*/
{
	color: #000000;
	background-color:#f5d7b4;
}

#pagebar
/*The page bar is just used for decorative purposes*/
{
	background-color:#999999;
	color:#000000;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	border-top: solid 1px #f5d7b4;
	border-bottom: solid 1px #f5d7b4;
	clear:both;
}

#titlecontainer{
margin: 0px;
padding:0px;
}
#pagetitle
/*This is used for each page title, e.g. Welcome to Walcot Street. The height is set with min-height - which doesn't work in IE - haven't found a get around that one yet. However, using min-height in Safari, Firefox means the title text doesn't overlap the page text if the text size is enlarged*/
{
	float: left;
	min-height: 140px;
	width: 300px;
	padding-bottom: 10px;
}

#picturearea
/*This is the area used to display the first line of pictures. The dimensions are put in to as then the browser application doesn't have to download this data- meaning a quicker load time.*/
{
	float:right;
	width: 420px;
	height: 150px;
	background-color: #ffffff;
	margin-right:10px;
	color:#000000;
	margin-bottom: 0px;
	padding-top: 0px;
}

#picturearea2
/*This is picture area along the side, which is also floated to the right. The value clear:right has been set so that this set of pictures appears below the first set of pictures*/
{
	float: right;
	width: 140px;

	height: 280px;
	color:#000000;
	background-color: #ffffff;
	clear:right;
	margin-right:10px;
	margin-left: 10px;
	padding-bottom:0px;
}

#cmspicturearea{
clear: right;
float:right;
padding: 10px;
margin: 0px;
}

#cmspicturearea p{
text-align:right;
padding-right:0px;

}

#cmspicturearea a{
font-size: 90%;
}

html>body #cmspicturearea a{
font-size: 100%;
}


#column_contain
/*container used to set padding for all the stock items on the furniture page*/
{
padding-left: 10px;
padding-right: 10px;
width: 760px;
}


#map_contain, #fabric_contain
/*container used for both the location map and the contact details*/
{
padding-left: 10px;
padding-right: 0px;
margin-right:0px;
width: 595px;

}

html>body #map_contain, #fabric_contain{
width:595px;
float:left;
}

#map_contain h4
/*Makes the text that appears next to each picture of furniture appear to the right hand side of it rather than below*/
{
color: #7A3328;
padding-left: 10px;
margin-bottom:0px;
padding-bottom: 0px;
display:inline;
font-size:80%;
}

#fabric_contain h4
/*Makes the text that appears next to each picture of furniture appear to the right hand side of it rather than below*/
{
color:#999999;
padding-left: 10px;
margin-bottom:0px;
padding-bottom: 0px;
display:inline;
font-size:80%;
}

#map_contain li{
font-size: 80%;
}

html>body #map_contain li{
font-size: 95%;
}

.map_text
/*Makes the text that appears next to each picture of furniture appear to the right hand side of it rather than below*/
{
float: left;
padding: 10px;
padding-top:0px;
}

html>body #map_contain h4, #fabric_contain h4{
font-size:95%;
}

#column_contain h3, #map_contain h3, #fabric_contain h3
/*Setting the h3 format when used within the column or map containters. This formating results in the heading 3 looking like it is a seperating bar*/
{
font-weight: bold;
padding: 0px;
padding-left:10px;
margin: 0px;
margin-bottom: 10px;
background-color: #fef1b9;
border-top: solid 1px;
border-bottom: solid 1px;
border-color: #999999;
clear:both;
font-size: 90%;
}

html>body #column_contain h3, #map_contain h3, #fabric_contain h3{
font-size: 100%;
}

.stock_text
/*Makes the text that appears next to each picture of furniture appear to the right hand side of it rather than below*/
{
float: left;
padding: 10px;
padding-top:20px;
}

.stock_text_sold
/*Makes the text that appears next to each picture of furniture appear to the right hand side of it rather than below*/
{
float: left;
background: url(images/sold.gif) no-repeat;
padding: 10px;
padding-top:20px;
padding-bottom:20px;
}


.stock_text p, .map_text p
/*The inline attribute makes it possible to have two different types of font on the same line*/
{
display: inline;
padding-top: 0px;
}

.stock_text h4, .stock_text_sold h4

/* This text sets style and padding for the h4 text used within the stock text div class*/
{
color: #7A3328;
padding-left: 10px;
margin-bottom:0px;
padding-bottom: 0px;
display:inline;
font-size:80%;
}

html>body .stock_text h4, .stock_text_sold h4
{
font-size: 95%;
}

.stock_text_sold p
/*The inline attribute makes it possible to have two different types of font on the same line*/
{
display: inline;
padding-top: 0px;
}

label{
font-size: 100%;
padding-bottom: 0px;
margin-bottom: 0px;
}
html>body label{
font-size: 80%;
}

form{
padding-bottom: 0px;
margin-bottom: 0px;
}

html>body label{
font-size: 95%;
}

select{
font-size: 80%;
}


.furn_pics
/*This is used for the furniture pics and the map pic. It floats the picture to the left, so that text can then be displayed to the right of it*/
{
float: left;
padding: 10px;
padding-top: 0px;
}



#btmline
/*Used for decorative purposes to have some seperation before the page footer. Also 'clear:both;' value is impoertant to make sure that the footer appears after all content on the page - no matter whether the longest item is the pictures on the right or the page text.*/
{
	/*width: 698px;*/
	background-color:#999999;
	color:#000000;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
	border-top: solid 1px #f5d7b4;
	clear:both;
	overflow: auto;
}

.hide {
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute; 
}

#lfooter
/*This is the left hand corner image of the footer*/
{
background: url(images/auburn/lfooter.gif);
height: 25px;
width: 26px;
float:left;
z-index: 2;
}

#footer
/*This used a 1px wide graphic and repeats it horizontally to fill in the gap between the right hand and left hand corner graphics*/
{
	height: 25px;
	width: 728px;
	background: url(images/auburn/footerline.gif) repeat-x;
	background-color:#7A3328;
	color: #ffffff;
	float: left;
	z-index: 1;
}

#rfooter
/*This is the right hand corner image*/
{
background: url(images/auburn/rfooter.gif);
height:25px;
width:26px;
float: left;
}

h1, h2, h3
/*This sets the padding for all fonts that are used in the main page, so that they are all aligned the same*/
{
	padding-right: 10px;
	padding-left: 10px;
}

h1
/*The style for heading 1 that is used for the title of each page is defined here*/
{
font-size: 135%;
color: #7a3328;
padding-top: 0px;
margin-top: 10px;
}

/*Hack that IE doesn't recognise to get around padding issues*/
html>body h1{
font-size: 180%;
}

h2
/*Heading two styles*/
{
font-style:italic;
font-size:90%;
color: #7A3328;
padding-bottom: 0px;
margin-bottom:0px;
}

html>body h2{
font-size: 110%;
}

p
/*p styles - important that clear:left is set - so that the content appears below the title- otherwise small words at the beginning would go into the gap between the page title and the pictures*/
{
	clear: left;
	padding-right: 10px;
	padding-left: 10px;
	font-size: 80%;
	padding-top: 0px;
	margin-top:0px;
	margin-bottom:10px;
}

html>body p{
font-size: 95%;
}

#furn_text p{
clear:right;
}


a
/*Setting the style for the navigational links*/
{
color: #7A3328
}

a:hover
{
color:#648dc7;
}


/*The foolowing items set the style that is used for the form on the contact page*/
form p
{

margin: 0;
padding: 0;
padding-top: 5px;
}

form p label
{
float: left;
width: 30%;
}

hr{
clear:both;
height:2px;
color:#999999;
background-color:#999999;
margin-right:10px;
margin-left:10px;
}
.button
{
float: right;
padding-bottom: 10px;
padding-right: 10px;
}

#search
{
float: right;
padding: 5px;
margin: 0px 10px 10px 10px;
border: solid 1px #7A3328;
background-color: #fef1b9;
}

#search p{
padding:0px;
margin:0px;
text-align:right;
font-size:70%;
}

html>body #search p{
padding:0px;
margin:0px;
text-align:right;
font-size:80%;
}

.fabric_text p{
font-size: 80%;
display:inline;

}

.error{
color:#FF0000;
background-color:inherit;
}

fieldset{
background-color: #ececec;
color:#333333;
}

legend{
color: #333333;
}

.blank_fieldset fieldset{
background-color: #ffffff;
}