/* The stylesheet controls the appearance of the web page. */

/* This sets the background color of the whole web page (body), the background image that appears at the top of the web page, the default margin and padding values for the whole web page, and the default font family for the whole web page. */
body {background: #f1fcd3; background-image: url('images/top_bg.jpg'); background-repeat: repeat-x; background-position: top center; margin: 0; padding: 0; font-family: "trebuchet ms"; }

/* The next two lines set the position of the divs for images that can appear at the top left and top right of the web page */
#topleftimg {position: absolute; top: 0; left: 0; z-index: 1; }
#toprightimg {position: absolute; top: 0; right: 0; z-index: 2; }

/* The wrapper is a div used to wrap the content of the web page. This sets its position and width. Note that to position it centrally, the position is 50% from the left hand side, with the left hand margin set to minus half the width. This moves it half way across the screen, the half its width back to position it centrally */
#wrapper {position: absolute; top: 0; left: 50%; width: 66%; min-width: 505px; margin: 0 0 0 -33%; padding: 0; z-index: 3; }

/* This sets the width and height for the header div which contains the title of the web page. The width is set as a percentage of the width of the wrapper div */
#header {width: 100%; height: 155px; }

/* This sets the width of a div that wraps around the content below the header as a percentage of the width of the wrapper div */
#contentwrap {width: 100%; }

/* This sets the position, width, border, text alignment and background color of the outer div of the menu. Note that there is an outer and an inner div for the menu to allow a 2 pixel border of different colors. This div has 1 pixel, the other div has the other pixel. Makes the border stand out more. The position is set as float right or left. Setting this and the float property for the main div (below) to either left or right makes the menu appear on one side or the other of the content */
#menucolout {float: left; width: 20%; min-width: 100px; border: 1px #b1b483 solid; padding: 0; margin: 40px 0 0 0; text-align: left; }

/* This sets the border and padding of the inner div for the menu. Padding means that the text within the menu isn't pressed up against the border but has some space around it */
#menucol {border: 1px #9c7e57 solid; padding: 10px; background-image: url('images/footprints.png'); background-repeat: no-repeat; background-position: top right; }

/* This sets the background image (used as a bullet), bottom border (used as a line to separate entries in the menu) and text color for the menu */
p.menu {margin: 0; padding: 0 0 0 10px; border-bottom: 1px #b1b483 dashed; background-image: url(images/dot.gif); background-repeat: no-repeat; background-position: center left; color: #4a4242; }

/* This sets the background image and text color for the bottom entry in the menu. It has no bottom border so that no line appears under the last entry in the menu */
p.menubot {margin: 0; padding: 0 0 0 10px; background-image: url(images/dot.gif); background-repeat: no-repeat; background-position: center left; color: black; }

/* The next 4 lines set the text color and text decoration (underline etc) for the links in the menu. There are 4 lines so the properties can be set differently for the link, the link when hovered over, the link when active and the link after it has been visited */
a:link.menu {color: #332a2a; text-decoration: none; }
a:hover.menu {color: #0000ff; text-decoration: none; }
a:active.menu {color: red; text-decoration: none; }
a:visited.menu {color: #4a4242; text-decoration: none; }

/* This sets the position, width, minimum width, padding and margin properties for the div that holds the main content of the page. See the comment for the menucolout div for more information about the float property */
#main {float: left; width: 77%; min-width: 385px; padding: 0 0 0 0; margin: 20px 5px 0 5px; }

/* This sets the margin and alignment for the ads div. This div is for if you want to place advertisments on your web page. If you don't you can either ignore or delete this */
.ads {margin: 25px 0 25px 0; text-align: center; }

/* This sets the width, top border, margin, padding and text alignment for the footer div */
#footer {width: 100%; border-top: 1px #b1b483 dashed; margin: 10px 0 0 0; padding: 5px 0 0 0; text-align: center; }

/* This ensures that footer images do not have a border */
img.footer {border: 0; }

/* This sets the size of the paragraph referring to makemysitethebest.com to small */
p.credit {font-size: 0.6em; }

/* This sets the position, font-family, font size, margin, background, border and padding for the title of the webpage */
h1.header {position: absolute; top: 76px; left: 4%; font-family: arial, sans-serif; font-size: 42px; margin: 10px; }

/* This sets the color and text decoration properties for the title of the webpage (as it is also a link back to the index page) for the link, the link when hovered over, the link when active and the link when visited */
a:link.header {color: #544943; text-decoration: none; }
a:hover.header {color: #544943; text-decoration: none; }
a:active.header {color: #544943; text-decoration: none; }
a:visited.header {color: #544943; text-decoration: none; }

/* The following lines set the font properties for 5 levels of heading, paragraph, unordered list and ordered list text */
h1 {font-size: 1.8em; color: #544943; }
h2 {font-size: 1.5em; color: #544943; }
h3 {font-size: 1.3em; color: #544943; }
h4 {font-size: 1.2em; color: #544943; }
h5 {font-size: 1em; font-weight: bold; font-style: italic; color: #544943; }
p {color: #544943; font-size: 0.9em; }
ul {font-size: 0.9em; color: #544943; }
ol {font-size: 0.9em; color: #544943; }

/* The following 4 lines set the properties for links, links when hovered over, links when active and links when visited */
a:link {
	color: #66CC33;
	text-decoration: underline;
}
a:hover {color: #7080d7; text-decoration: underline; }
a:active {color: #63dc90; text-decoration: underline; }
a:visited {color: #9c7e57; text-decoration: underline; }