body {
	color: #304146;
	margin: 0px;
	height: 100%;
	width: 100%;
	background: #fff url(../img/background.gif) repeat-x; /* This ensures that the background and menu are continuous even when the browser window is small. */
}
a:link {
	color: #00b52d;
	text-decoration: none;
}
a:visited {
	color: #00b52d;
	text-decoration: none;
}
a:hover {
	color: #046519;
	text-decoration: underline;
}
.text { /* This is a general text container */
	color: #304146;
	font: 15px "Trebuchet MS","Lucida Grande", Lucida, Verdana, sans-serif;
}
#menu { /* This is the top menu div */
	height: 52px;
	background: #607b80 url(../img/menu.gif) repeat-x;
	padding-left: 20px; /* Where the actual menu items start */
}
#menu ul { /* The unordered tag that contains the menu items */
	width: 940px; /* This must be higer than the sum of the item sizes to ensure that the menu items stay in the right position even when the window size is smaller than the actual menu bar and the paddings */
	margin: 0;
	padding: 0;
	white-space: nowrap;
	overflow: visible;
	position: absolute;
}
#menu li { /* These are the actual menu items with the default background style */
	list-style-type: none;
	display: inline;
	height: 52px;
	width: 167px; /* If you change the size of the items, you must also modify the menu background images and the size in #menu li a */
	float: left;
	text-align: center;
	color: #fff;
	font: 20px "Lucida Grande", Lucida, Verdana, sans-serif;
	margin-left: 15px; /* Here you can change the space between each menu item */
	background: url(../img/menu_item.gif) no-repeat;
}
#menu li.active {
	background: url(../img/menu_active.jpg) no-repeat;
}
#menu li a { /* The actual link in the menu*/
	text-decoration: none;
	display: block; /* We use the links as blocks to get a full hover effect when the mouse enters the div and not only in the text */
	height: 52px;
	width: 167px; /* This must always be the same as the one in #menu li */
	padding-top: 13px; /* The vertical position of the text*/
	color: #fff;
}
#menu li a:visited {
	color: #fff;
}
#menu li a:hover {
	background: url(../img/menu_hover.jpg) no-repeat; /* Because the link is handled as a block, we can use the hover image here and the effect works everywhere without scripting */
	color: #cff0f7;
}
#master { /* This is the whole page after the menu bar */
	height: 100%;
	width: 100%;
	background: url(../img/master.gif) repeat-x;
	top: 52px;
	position: absolute;
}
#container { /* This is the container used to center the product and page divs */
	width: 960px; /* This is always the sum of product and page width */
	height: 100%;
	top: 0;
	margin: 0px auto;
	position: relative;
}
#product { /* This is the left product page reserved for a product image */
	background: url(../img/sparkle.jpg) no-repeat;
	width: 400px; /* If you modify this, recreate or resize the sparkle.jpg image to ensure it won't get cut */
	height: 495px;
	top: 0;
	position: absolute;
	left: 0;
}
#product .image { /* This contains the actual product image in the left product div*/
	padding-left: 68px; /* These padding are used to align the product image to its correct place */
	padding-top: 0px;
}
#page { /* This is the right side of the site with the actual text */
	background: url(../img/page.jpg) no-repeat;
	width: 560px; /* To ensure the cleanest possible code, the background image including the shadows is made of one jpg file, meaning that if you need to change this you must modify the page.jpg file to mach in size */
	height: 657px;
	top: 0;
	position: absolute;
	left: 437px;
	padding-top: 15px; /* Padding of the actual content */
	padding-left: 50px; /* Same thing here */
}
#page .text {
	width: 460px; /* This is the size of #page-padding, set here to force the text to break down in every situation */
	text-align: justify;
}
#page h1 { /* Style of product name in #page */
	color: #556c72;
	font-size: 40px;
	font-weight: bold;
	margin: 20px 0 0;
	text-align: left;
}
#page h2 { /* Style of product slogan in #page */
	color: #e06c0f;
	font-style: italic;
	margin: 0 0 0 20px;
	font-size: 20px;
	text-align: left;
}
#product .button { /* This is the big button on the product div, it's a class and can be used in other places too, this section only sets the position after the product image */
	position: absolute;
	top: 420px; /* You can change the position with these values */
	left: 230px;
}
.button a { /* The text in the */
	background: url(../img/button.gif) no-repeat;
	font: bolder 24px "Trebuchet MS","Lucida Grande", Lucida, Verdana, sans-serif;
	text-decoration: none;
	width: 165px; /* These are static sizes, if you change these you must modify button.gif and button_hover.gif accordingly */
	height: 45px;
	display: block; /* Again we use block to get the right hover effect */
	text-align: center;
	padding-top: 5px; /* Vertical position of the text */
}
.button a:link {
	color: #fff1c2;
}
.button a:visited {
	color: #fff1c2;
}
.button a:hover {
	color: #fff7dc;
	background: url(../img/button_hover.gif) no-repeat; /* Because the link is handled as a block, we can use the hover image here and the effect works everywhere without scripting */
}
#page .text img {
	border: 5px solid #dadada;
}
.text form {
	text-align: right;
}
.text label {
	margin-right: 2px;
}
.text input { /* These are the input styles used in forms */
	background: #f7f7f7 url(../img/input.gif) repeat-x;
	border: 1px solid #d0d0d0;
	width: 350px;
	margin-bottom: 6px;
	color: #5f6c70;
	font-size: 16px;
	font-weight: bold;
	padding-top: 11px;
	padding-bottom: 11px;
	padding-left: 11px;
}
.text textarea { /* This is the textarea in the contact page */
	background-color: #f7f7f7;
	background: #f7f7f7 url(../img/input.gif) repeat-x;
	color: #5f6c70;
	font-size: 16px;
	font-weight: bold;
	border: 1px solid #d0d0d0;
	width: 350px;
	height: 170px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-top: 6px;
}
.text .button { /* Form submit button */
	width: 100px;
}
.text .selector { /* Radio and check buttons need special modifications after .text input */ 
	background: none;
	width: 350px;
	width: 15px;
	height: 15px;
	margin: 0;
	padding: 0;
	border-style: none;
}