/*This is the header section but also contains the body and div wrapper styles*/

body {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #666666;
	background-image: url(../images/flowers.gif);
	padding: 0px;
	width: 760px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-position: left top;
}
/*Sets font (plus size and colour) for whole site, a web safe width of 760px, centres everything in the body, bg image (optimized istockphoto) tiles across in background*/



div#wrapper {
	background-color: #e2effb;
	padding: 0px;
	width: 760px;
	border: 1px solid #999999;
	position: absolute;
	left: auto;
	right: auto;
	margin-top: 100px;
	margin-right: 0px;
	margin-bottom: 50px;
	margin-left: 0px;
}
/* Div is 'wrapped' around the body, positioned absolutley, enables anything postioned absolutley within to stay in relation to this, as left and right are 'auto' this and anything in it will alwys be in the browser centre, a grey websafe border and and a background pastel blue based on the 'flower' image */



h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #006699;
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: -50px;
	font-size: x-large;
	font-weight: bold;
	left: 0px;
}
/* Recreates the Boho Beads logo heading without using a graphic, bold italic on Georgia produced a good effect, colour for this is a websafe dark blue, positioned out of the wrapper on the top left with -px */



h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	color: #006699;
	margin: 0px;
	padding: 0px;
	position: absolute;
	top: -20px;
	font-size: 9px;
	left: 0px;
}
/* Used Verdana here as the font size needed to be very small and this is the easiest to read */



ul#mainNav {
	width: 390px;
	list-style-type: none;
	position: absolute;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 370px;
	padding: 0px;
	height: 20px;
}
/* Places the main navigation list on the top right of the wrapper and removes the bullet icons, this was the style I had to re-order, as the style sheets cascade and inherit properties the order is very important. Width set to 390px (there are six li's which will be 65px each,) also 760-390 = 370px hence margin to move to the right hand side */



ul#mainNav li {
	float: left;
	width: 63px;
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	height: 20px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	border: 1px solid #FFFFFF;
} 
/* Border either side of 1px, 65-2 = 63px hence width, float places li's next to each other*/



ul#mainNav li a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	text-decoration: none;
	display: block;
	margin: 0px;
	height: 17px;
	text-align: center;
	background-color: #ECF6FF;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
/* Hyperlink li's are set so they do not change when clicked on or have been visited, block makes whole box area a link with a blue bg colour, top 3px padding centres the text vertically within box area, height adjusted to 17px accordingly */



ul#mainNav li a:hover {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #D4EDFF;
}
/* When hovered over 65px x 20px box, bg colour changes to different shade of blue and text to web safe white */



ul#shopNav {
	list-style-type: none;
	position: absolute;
	width: 498px;
	top: -55px;
	margin: 0px;
	padding: 0px;
	right: 0px;
}
ul#shopNav li {
	float: left;
	width: 80px;
	height: 40px;
	text-align: center;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 0px;
	border-left-width: 2px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
}
ul#shopNav li a {
	width: 80px;
	height: 26px;
	display: block;
	background-color: #E2EFFB;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: x-small;
	padding-top: 14px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
ul#shopNav li a:hover {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #B9E1FB;
}
/* Same styles as mainNav with the exeception of absolute positioning to pull it out of the ul and -px to place outside of div wrapper */