/* CSS Document */
/* background-color: transparent; has been used in some of the selectors, this is the default and it is not strictly necessary to declare this info - it does serve a purpose in that it supplies information for you to see*/
body {/* set everything to zero for a good cross-browser starting point */
	margin: 0;/*zeroes the margins on the body*/
	padding: 0;/*zeroes the padding on the body ** Opera carries a default padding and requires this zeroing*/
	border: 0;/*zeroes off any existing border*/
	background-color: #397363;/*sets the body background colour*/
	color: #000000; /*set the default text color */
	text-align: center; /* Hack to centre the wrapper in IE5.x pc */
	font-family: Verdana, Arial, Helvetica, sans-serif;/*set the default fonts */
	font-size: 100.01%;/* Sets default font size. This odd value compensates for several browser bugs. First, setting a default font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. Current "best" suggestion is to use the 100.01% value for this property */
	min-width: 778px; /* Prevents the body becoming narrower than our wrapper div - keeps the content from disappearing off the left edge with Gecko browsers */
	list-style-position: inside;
}

#wrapper {
	margin: 2px auto;
	width: 776px;
	position: relative;
	background-color: #FFF;
	text-align: left;
	
}

#banner {
	background-image: url(BannerSM.gif);
	width: 776px;
	position: relative;
	z-index:10;
	top: 1px;
	left: 0px;
	height: 152px;
	border-left-color: 0;
	border-bottom: 0;
	background-color: #D4D0C8;
}

#basic {
	width: 776px;
	position: relative;
	z-index:10;
	top: 1px;
	left: 0px;
	height: 75px;
	border-left-color: 0;
	border-bottom: 0;
	background-color: #3E7B7B;
}


#banner .right {/* Float the right hand image to the right in the banner */
	float: right;/*Floats the image to the right*/
}

#banner .right {/* Float the right hand image to the right in the banner */
	float: right;/*Floats the image to the right*/
}


#content .left {/* Floats the images in the main content area to the left */
	float: left;/*Floats the image to the left*/
	margin: 5px 20px 2px 0;/*sets the margins so the image sits nicely in the p elements*/
	border: 1px solid #000;/*sets a border on the image*/
}


#content .right {/* Floats the images in the main content area to the right */
	float: right;/*Floats the image to the right*/
	margin: 5px 0 2px 20px;/*sets the margins so the image sits nicely in the p elements*/
	border: 1px solid #000;/*sets a border on the image*/
}

/* Set the navigation container */
/* The relative positioning on the banner allows us to set this div absolutely in relation to its containing element - the banner div. This div holds the image tabs */
#banner #navcontainer {
	position: absolute;/* absolute positioning takes this element out of the document flow and places it in relation to the containing element by using top & right values in this instance*/
	/*top: 185px;/* set the distance from the top of the containing element - in this case the banner div*/
	/*right: 25px;/* set the distance from the right edge of the containing element*/
	background-color: #FFFFFF;/* allows the banner image to show through */
} 


#contact {
	float: left;
	width: 150px;
	margin-top: 10px;
	margin-left: 4px;
	background-repeat: no-repeat;
	background-image: none;
	background-color: #000000;
}
#navigation {
	background-repeat: no-repeat;
	margin-top: 5px;
	padding-top: 2px;
	line-height: 50%;
	width: 135px;
	margin-left: 5px;
	padding-left: 5px;
	margin-right: 5px;
	background-color:#397364;
	margin-bottom: 5px;
	letter-spacing: normal;
	left: 20px;
}
#navigation ul {
	background-color: #FF9933;/* no background colour required*/
	list-style-type: none;/* removes the bullets from our list navigation */
	margin: 2 0 40px 0; /* Moves the "where" div down 40px from the bottom of the navigation list */
	padding: 0;/* zeroes off the padding */
	font-size: 100%;/* scales the font to 80% of the body font declaration*/
	border-bottom: 3px solid #FF9933;/* These borders create the box affect on the navigation */
	border-left: 3px solid #FF9933;/* These borders create the box affect on the navigation */
	border-right: 3px solid #FF9933;/* These borders create the box affect on the navigation */
 }
 

 #navigation ul li {
	padding: 0;
	margin-top: 0px;
	margin: /**/ 0;
	margin: 0;
	background-color: #FF9900;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-decoration: none;
	border-bottom-width: thin;
	list-style-type: none;
}
.tablelayout a,  a:visited {
	background-color: #FF9900;
	/* border-bottom: 1px solid #000000;
	border-left: 1px solid #323C55;
	border-right: 1px solid #000000;
	color: #333399;
	display: block; */
	padding: 2px 2px 2px 2px;
	text-decoration: none;
	
	
	
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	
}
#table a: hover, #table :focus a:focus {
	background-color: #FF9900;
	/*border-right: 1px solid #fff;
	border-bottom: 1px solid #fff; */
	color: #000000;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	
}
.first {
	border-top: 1px solid #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000066;
	font-style: normal;
	border-left-color: #333333;
	border-left-style: solid;
	border-left-width: thin;
	border-color: #000000;
	border-width: 1 pixel;
	border-right-color: #000000;
	border-right-style: solid;
	border-right-width: thin;
	border-bottom-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: thin;
}

/*Begin styling the link lists - visited is styled the same as link, not absolutely necessary to decalre visited but its there.
Note that the reference is to "a" and not "a:link". This makes the link act as a button in a cross-browser way. */
/*You will notice that I have set two selectors on this rule. This is fine when the occasion arises - saves time and space*/
#contact #navigation a, #contact #navigation a:visited {
	background-color: #333333;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #323C55;
	border-right: 1px solid #000000;
	color: #FFFFFF;
	display: block;
	padding: 2px 2px 2px 2px;
	text-decoration: none;
	
	
	
	
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	
}

/* sets the link styles for hover and focus*/
/*You will notice that I have set two selectors on this rule, this is fine when the occasion arises - saves time and space*/
#contact #navigation a:hover, #contact #navigation a:focus {
	background-color: #FF9900;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	color: #000000;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	list-style-type: none;
}

#contact #navigation h3 {
	font-size: 70%;
	padding: 3px 3px 3px 7px;
	color: #FFFFFF;
	margin: 1px;
	border-left: 0;
	background-color: #397364;
}

#content h2 {
	font-size: 90%;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin: 0 0 100px 30px;
	padding-top: 20px;
	color: #00CC33;
	font-style: italic;
	font-weight: 500;
	text-transform: lowercase;
	background-color: #CC3399;
}

#content p {
	margin: 0 0 5px 30px;
	font-size: 60%;
	padding: 10px 25px 0 0;
}
#content product {
	margin: 0 0 20px 30px;
	padding: 20px 25px 0 0;
	font-size: 70%;
}


#footer {/* Begin laying out and styling the footer div */
	background-color: #FFFFFF;/*sets a background colour for the footer*/
	width: 770px;/*Sets the footers width*/
	border-top: 1px solid #000;/*sets the top border to define the beginning of the footer*/
	font-size: 90%; /* sets the footer text size */
	text-align: center;/* aligns the text to the right*/
	clear: left; /* Keeps the contact div above the footer */
	margin-top: 20px; /* Adds a margin to the top of the footer*/
}
/* The contact div is outside the flow of the document and won't respect the footer;
it would, if it's content was great enough, poke through the bottom of the layout.
The clear left ensures the footer is always moved beyond the contact div and our design
remains intact. The content div is within the flow of the document and will therefore
push the footer div down as it's content dictates. */

#footer p {
	background-color: #FFFFFF;/*sets the background colour for the p element when it is in the footer div*/
	padding: 4px 4px 4px 10px;/* sets the padding values*/
	margin: 0;/*zeroes off the margins */
}


#footer p.designer {/* Styles the bottom P in the footer that gives the validation and designer info */
	background-color: #FFFFFF;/*sets the background colour*/
	padding: 4px 4px 4px 10px;/*sets the padding values*/
	margin: 0;/*zeroes off the margins*/
	color: #fff;/*sets the text colour to white*/
	border-top: 1px solid #000;/*gives a top border to separate it from the other content in the footer, this should be the last item in the footer */
}


#footer a {/* Styles the links within the footer */
		
	color: #000000;/*sets the text to BLACK*/
	text-decoration: none; /*REMOVES the underline*/
	font-size: 60%;
	font-family: Arial, Helvetica, sans-serif;
}

#footer a:hover, #footer a:focus {
	text-decoration: none;/*removes the underline*/
	color: #000000;
	background-color:#FFFFFF;
	font-size: 60%;
}

#navcontainer a img {
    border: none; /*removes the default link border from around the navigation images*/
}

/* sets the inline links in the #content div if required*/
#content a:link, #content a:visited{
	color: #000000; /*sets the link and visited text color*/
	background-color: #FFFFFF;/* no background color required*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	text-decoration: none;
}

#content a:hover, #content a:focus{
	background-color: #FF9900;/*sets the background color for hover and focus*/
	color: #000000;/* sets the text color for hover and focus*/
	text-decoration: none;/*removes the underline*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
}
.tablelayout1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	font-variant: normal;
	color: #0000CC;
}
#placeorder {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 60%;
	font-style: normal;
	font-weight: 500;
	color: #000000;
}
.style4 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-weight: 600;
	color: #000000;
}
.stlye5 {
	font-size: 60%;
	font-weight: 600;
}
.stlye6 {
	font-size: 70%;
	font-weight: 400;
}
.InputLabel {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	font-weight: 600;
	color: #000000;
	background-color: #FFCC66;
}
.pendant {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: normal;
	font-weight: 400;
	color: #FFFFFF;
	text-decoration: none;
}