/* Excluding certain modifications, initial styles from Dave Woods example of a 2 column fixed width css layout as shown at: http://www.dave-woods.co.uk/?p=73
*/

* {
padding: 0px; margin: 0px;
}

/* Next, I’ll use the body tag to position the page centrally, give the page a background colour as well as setting font-family and font sizes. This way, it
can be set once in the CSS file without having to specify it for every single element. Notice how there’s not a single font tag within the HTML */

body {
width: 760px;
margin: 0px auto;
padding: 10px 0px;
background-color: #CCC;
font-family: times new roman, Arial, Helvetica, sans-serif;
font-size: 100%;
}

/* I’ll then use a container to wrap the rest of my content, whilst this isn’t always necessary it can often be useful so I would always tend to include it
so that elements can easily be positioned within it whilst providing flexibility for future additions. A background colour is applied to this and some
padding to provide space around the elements that will be nested within this container. I also float this element so that it’s children can be floated
into position as it won’t encompass it’s children if left out. */

#container {
float: left;
width: 750px;
padding: 5px;
background-color: #FFF;
}

/* Next we’ll position the header by providing a width, some padding and background colour. Remember that the box model gets the total width by adding together
the padding, margin, border and width so this has to be taken into consideration when nesting. The total width of the header is 750px one the 10px of padding
is added to either side which enables it to fit perfectly within the container in the previous style. */

#header {
text-align: center;
width: 730px;
padding: 10px;
background-color: #CCC;
}

#header img {
float: right;
padding: 10px;
}

#header h1 {
align:center;
padding: 10px;
}

#header p {
margin-top: 1.2em;
font-size: 110%;
text-align: center;
}

/* The navigation is where it starts getting interesting as we can apply any styles required to the <ul>, <li> or <a> tags.

The first style below specifies the width, background and padding for the container of each element, whilst the #leftmenu li, style removes the bullet
points from the unordered list.

The real styling occurs in the two styles that follow as we initially set the background colour for the menu, text colour, padding, margins and other presentational
styles. The most important style within this section though is the display: block; as this forces the to display 100% of it’s parent element. In this case,
the #leftmenu. Without, display: block, the background will simply apply to the text which may be useful for some situations but in this demonstration
isn’t the effect we’re looking for.

The last style in the navigation allows the link backgrounds to change colour when the user moves their mouse over them. You could also change the text
colour, font-weight or any other value here if required but we’ll just leave it as the background colour for now. */

#topmenu {
width:100%;
height:30px;
text-align:center;
background-color: #666;
color: #EEE;
}

#topmenu ul {
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding:0px;
width:700px;
text-align:center;
}

#topmenu ul li {
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
}

#topmenu a, #topmenu a:link {
background-color: #666;
color: #FFF;
display: block;
padding: 3px;
margin-bottom: 1px;
text-decoration: none;
font-weight: bold;
}

#topmenu a:hover {
background-color: #999;
}

#leftmenu {
float: left;
width: 120px;
background-color: #CCC;
padding: 5px 5px 4px 5px;
}
#leftmenu ul {
list-style-type: none;
}
#leftmenu a, #leftmenu a:link {
background-color: #666;
color: #FFF;
display: block;
padding: 3px;
margin-bottom: 1px;
text-decoration: none;
font-weight: bold;
}
#leftmenu a:hover {
background-color: #999;
}

/* Next is the main content. We want this to display next to the navigation so using float: left, we can easily display a <div> adjacent to the navigation.
Again, we’ll apply a width and some padding and margins to give it the position required. */

#maincontent {
float: left;
width: 595px;
background-color: #DDD;
margin: 0px 0px 5px 5px;
padding: 	10px;
text-align: left;
}

#maincontent img {
float: right;
margin:0px 0px 15px 20px;
}

#maincontent ol {
padding: 0px 20px;
}

#maincontent ol li {
padding: 15px 0px;
}

/* Finally, comes the footer. The same method is applied to the footer as the header with a width, background and margins and padding applied. We’ll also use
text-center to align the text in the middle. 

We’ll also use the same rules to change the appearance of the link that we’ve included so that it doesn’t display the blue default link whilst we’ve also
applied a hover state for this link */

#footer {
float: left;
width: 730px;
background-color: #666;
color: #EEE;
text-align: center;
}

p {
margin-bottom: 1.2em;
font-size: 110%;
}

h1 {
text-align: center;
font-size: 160%;
}

h2 {
text-align: center;
font-size: 150%;
}

h3 {
text-align: center;
font-size: 140%;
}

h4 {
text-align: center;
font-size: 130%;
}

.hidden {
position: absolute;
top: -10000px;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
}

.centered {
text-align: center;
}


#dropdownmenu{
width:100%;
height:30px;
background-color:#999;
}

#dropdownmenu ul {
margin:0px;
padding:0px;
}

#dropdownmenu ul li {
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
position:relative; 
}

#dropdownmenu li a {
color:#fff;
text-decoration:none;
}
 
#dropdownmenu li a:hover {
color:#fff;
text-decoration:underline;
}

#dropdownmenu li ul {
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-color:#999;
}

#dropdownmenu li li a {
color:#fff;
text-decoration:none;
}
 
#dropdownmenu li li a:hover {
color:#fff;
text-decoration:underline;
}