/* General styles that apply globally to all pages */

/* remember to apply this style to the head section of all pages:

[if IE]>
<style type="text/css">
body { zoom: 1; }

</style>
<![endif] 

*/

html {border: 0; margin: 0;}

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	line-height: 135%;
	font-weight: normal;
	color: #301d00;
	background-image: url(images/bgv1.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #510400;
}

.emphasis a:link {
	font-size: 1.0em;
	font-weight: bold;
	color: #301d00;
}

a:link img{
	border: none;
}

a:visited img {
	border: none;
}

a:hover img {
	border: none;
}

a:active img {
	border: none;
}

.emphasis a:visited {
	font-size: 1.0em;
	font-weight: bold;
	color: #301d00;
}

.emphasis a:hover {
	font-size: 1.0em;
	font-weight: bold;
	color: #301d00;
	background-color: #f9de9b;
}

.emphasis /* Use this class to provide uniform emphasis to any body text throughout the site. */ {
	font-size: 1.2em;
	font-weight: bold;
	color: #301d00;
}

.emphasisnohover a:visited {
	font-size: 1.0em;
	font-weight: bold;
	color: #301d00;
}

.emphasisnohover /* Use this class to provide uniform emphasis to any body text throughout the site. */ {
	font-size: 1.2em;
	font-weight: bold;
	color: #301d00;
}

#banner {
	background-image: url(images/banner_nopic.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 165px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	overflow: hidden;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

.bannerheader {
	height: 160px;
	overflow: hidden;
}

/* wrappers and containers. */

#wrapper {
	background-color: #FFFFFF;
	padding: 10px;
	height: auto;
	width: 880px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

#header {
}

#navcontainer {
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#contentcontainer {
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	height: auto;
	width: 880px;
}


#footercontainer {
	background-color: #510400;
	height: 15px;
	width: 866px;
	padding: 7px;
	clear: both;
	list-style-image: none;
	margin-top: 10px;
}

#copyright {
	text-align: center;
	font-size: .85em;
	color: #FFFFFF;
}

#copyright a:link {
	text-decoration: none;
	color: #fff;
}

#copyright a {
	text-decoration: none;
	color: #fff;
}


h1 {
}

#headline {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 2em;
	font-weight: bolder;
	color: #301d00;
	line-height: 175%;
	margin-top: 10px;
}

h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	color: #301d00;
}

.hooks {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.2em;
	font-weight: bold;
	color: #301d00;
	line-height: 150%;
}


#nav /* This style is to be applied to the <ul> */{
	padding: 0;
	height: 40px;  /* Height should be set to the height of the image replacement */
	list-style: none;
	display: inline;
	overflow: hidden;
	margin: 0;
	}

#nav li {
	padding: 0;
	list-style: none;
	display: inline;
	}

#nav a {
	float: left;
	padding: 40px 0 0 0; /* Height should be set to the height of the image replacement */
	overflow: hidden;
	height: 0px !important; 
	height /**/:20px; /* for IE5/Win only */
	}
#nav   a:hover    {
	background-position: 0 -40px;
	}
#nav a:active, #nav a.selected  /* The selected class was included in the HTML for each page and applied as a class to the <li> for that page.  It worked on ikandi creations, so it should remain in the template. */{
	background-position: 0px -80px; /* The -140px should be replaced with a value that is 2x the height of one image replacement. */
}


/* For all of the following link styles, change the id name to represent the actual main nav links used on the site.  Change the width to equal the specific width of each replacement image.  Change the background-image url to one that matches the replacement image. */
	
#home a  {
	width: 128px;
	background-image: url(images/home.png);
	background-repeat: no-repeat;
	background-position: left top;
	}

#recent a  {
	width: 125px;
	background-image: url(images/recent.png);
	background-repeat: no-repeat;
	background-position: left top;
	}
	
#trade a  {
	width: 125px;
	background-image: url(images/trade.png);
	background-repeat: no-repeat;
	background-position: left top;
	}
	
#shop a  {
	width: 125px;
	background-image: url(images/shop.png);
	background-repeat: no-repeat;
	background-position: left top;
	}
	
#contact a  {
	width: 125px;
	background-image: url(images/contact.png);
	background-repeat: no-repeat;
	background-position: left top;
	}
	
#rhs a {
	width: 252px;
	background-image: url(images/rhs2.png);
	background-repeat: no-repeat;
	background-position: left top;
	}

.selected /* This class has been added as extra protection for the  :active styling */{
	background-position: 0px -140px; /* The -140px should be replaced with a value that is 2x the height of one image replacement. */
}

/* Calls to Action */

#calltoaction {
	height: 40px;
	list-style: none;
	overflow: hidden;
	display: inline;
	}

#calltoaction li {
	list-style: none;
	display: block;
	padding: 0px;
	margin: 0px;
}

#calltoaction a {
	overflow: hidden;
	height: 0px !important;
	height /**/:20px;
	display: block;
	padding-top: 40px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

#calltoaction a:hover    {
	background-position: 0px -40px;
}

#gobutton a  {
	width: 128px;
	background-image: url(images/contactbutton.png);
	background-repeat: no-repeat;
	background-position: center top;
}


/* h1 image replacements.  Try including all id names into the same style list, with the exception of the background image.  This might cut down on code lines. */


/* h2 image replacements */

.subhead {
	height: 35px;
	overflow: hidden;
}


#whychoose {
	background-image: url(images/Headings/whychoose.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin: 0px;
}

#recentwork {
	background-image: url(images/Headings/recentwork.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

#specialist {
	background-image: url(images/Headings/specialist.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

#supplies {
	background-image: url(images/Headings/supplies.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

#remember {
	background-image: url(images/Headings/remember.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
}

#thumbnail {
	background-image: url(images/Headings/thumbnail.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin: 0px;
}

#ontime {
	background-image: url(images/Headings/ontime.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin: 0px;
}

#quality {
	background-image: url(images/Headings/quality.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin: 0px;
}

#clients {
	background-image: url(images/Headings/clients.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin: 0px;
}

#store {
	background-image: url(images/Headings/stock.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin: 0px;
}

#contactme {
	background-image: url(images/Headings/contactme.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin: 0px;
}

#byemail {
	background-image: url(images/Headings/email.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin: 0px;
}

#byphone {
	background-image: url(images/Headings/phone.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin: 0px;
}

#bypost {
	background-image: url(images/Headings/bypost.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-top: 35px;
	overflow: hidden;
	margin: 0px;
}







/* Styles for each individual page including all content containers needed within the global containers specified above. */

/* Index Page */


#indexleftcontainer {
	background-color: #FFFFFF;
	padding: 10px;
	float: left;
	height: 730px;
	width: 608px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}

#indexrightcontainer {
	background-color: #ffdf99;
	float: left;
	height: 740px;
	width: 229px;
	text-align: center;
	padding: 10px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#indexrightlist {
	text-align: left;
	font-weight: bold;
	line-height: 150%;
	margin-right: 5px;
}


.indexbelowbutton {
	margin-top: 10px;
	height: 35px;
	overflow: hidden;
}

#indexrightcontainer img {
	float: right;
	border: 1px solid #301d00;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	margin-top: 20px;
}

#indexleftcontainer img {
	float: right;
	border: 1px solid #301d00;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 10px;
	margin-top: 5px;
}


.indexlower {
	background-color: #FFFFFF;
	float: left;
	height: 200px;
	width: 180px;
	padding: 10px;
	border-right-width: thin;
	border-right-style: dotted;
	border-right-color: #301d00;
	text-align: center;
}

#usp {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	line-height: 135%;
	font-weight: lighter;
	color: #301d00;
	text-align: center;
	float: right;
	padding-top: 0px;
	padding-right: 15px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#usp a:link, #usp a:visited,  {
	color: #301d00;
}

#upper {
	border-bottom-width: thin;
	border-bottom-style: dotted;
	border-bottom-color: #301d00;
	padding-bottom: 10px;
	height: 505px;
}

#services {
	text-align: left;
}	



.indexlowerright {
	background-color: #FFFFFF;
	float: left;
	height: 200px;
	width: 180px;
	padding: 10px;
	text-align: center;
}

#casestudyp {
	text-align: left;
}



/* Contact Form */

.mail {
	color: #301d00;
}

/* General Form Styling */

#formleftcontainer {
	background-color: #FFFFFF;
	margin: 0px;
	padding: 10px;
	float: left;
	height: auto;
	width: 608px;
}

fieldset {
	background-color: #ffdf99;
	padding-top: 20px;
	padding-bottom: 20px;
	border: 1px solid #301d00;
}


legend {
	
}

label {
	text-align: right;
	clear: left;
	float: left;
	width: 20em;
	margin-right: 5px;
	position: relative;
}

fieldset ol {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	list-style-type: none;
}
fieldset li {
	padding-bottom: 1em;
	position: relative;
}




/* Recent Work Page */

#recentleftcontainer {
	background-color: #FFFFFF;
	margin: 0px;
	padding: 10px;
	float: left;
	height: 625px;
	width: 608px;
}

#recentrightcontainer {
	background-color: #ffdf99;
	float: left;
	height: 640px;
	width: 232px;
	text-align: center;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#recentrightcontainer p {
	padding: 10px;
}

#recentmain {
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.85em;
	font-weight: bold;
	color: #301d00;
}

#recentmain img {
	margin: 0px;
	padding: 5px;
	border: 1px double #301d00;
}

#thumbnails {
	list-style: none;
	float: left;
	height: 60px;
	margin: 0px;
	padding: 0px;
}

#thumbnails li {
	float: left;
	margin: 0px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 25px;
}


.btn {
 	border: none;
	cursor: pointer;
}



/* Trade Services Page */

#traderightcontainer {
	background-color: #ffdf99;
	float: left;
	height: 640px;
	width: 229px;
	text-align: center;
	padding: 10px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#clienticons {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#clienticons img {
	margin-top: 10px;
	margin-bottom: 10px;
}

#clienticons img a {
	border: 0;
}




/* Online Store Page */

.storeitem {
	width: 190px;
	text-align: center;
	padding: 5px;
	float: left;
	margin: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#storeleftcontainer {
	background-color: #FFFFFF;
	margin: 0px;
	padding: 10px;
	float: left;
	height: auto;
	width: 610px;
}

#storerightcontainer {
	background-color: #ffdf99;
	float: left;
	height: 640px;
	width: 227px;
	text-align: center;
	padding: 10px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}


/* Footer Links. These styles are designed to be used with four <ul> to make the links sit nicely centred and equally spaced at the bottom of the page.  The other way would be to put them all inside one div, float the links inside and set a fixed width? */

#footerleft {
	margin: 0px;
	padding: 0px;
	float: left;
	width: 200px;
	text-align: right;
	list-style-type: none;
}

#footercentre {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 220px;
	text-align: right;
	list-style-type: none;

}

#footerright {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 220px;
	text-align: center;
	list-style-type: none;
}

#footershare {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 220px;
	text-align: left;
	list-style-type: none;
}

#footercontainer a {
	color: #ffffff;
}

#footercontainer a:hover {
	color: #f9de9b;
}

/* Contact Page */

#contactcontainer {
}




/* Sitemap */

#sitemaplist a {
	color: #301d00;
}

#sitemaplist a:hover {
	background-color: #f9de9b;
}
/* Terms and Conditions */




/* The following styles have been stored here in case any drop shadows are needed for page items.  Remember to remove all of this text etc if not needed. The names of each of these classes could do with some revision. */

.smallfeature {
	background-image: url(temp/images/drop_shadow.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	height: 135px; /* The height and width values relate to the size of the image to shadow.  The values inserted here will limit the extent of the shadow thereby ensuring that they remain relative to the image itself.  Obviously the drop_shadow.gif will need to be designed and included in the images file.  Also, its dimensions should be such that it can easily be applied to any page element. */
	width: 180px;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.smallfeature img {
	left: -5px;  /* The left and top values relate to how much you want to lift the image up and away to reveal the shadow beneath.  The amount of 'lift' should be larger for big images, and quite small for little ones. */
	top: -5px;
	margin: 0px;
	position: relative;
}
.smallfeatureitem {  /* this is the container to be used for the image + shadow */
	width: 180px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	text-align: center;
	padding: 10px;
	float: left;
}