/*basic element layout.*/
/*With the body elements, I basically looked at what I'd done in the first assignment to see what I could cull from that. Bearing in mind that I wanted as simple layout as possible, I decided to go for Verdana as the main font, sans-serif for the rest, as this needed to look reasonably attractive but unlike the CSS Zen Garden assignment, I wasn't going for a dreamy focus. I think I've accidentally achieved that anyway (a little) because most of the site is fairly pale. Is it too pale, perhaps? I'm not sure because I have a crappy monitor and the lighting at work doesn't help overmuch. I do have a 20" Mac cinema screen at work, though, and the site definitely looks darker there. In terms of things other than the font, I went for your advice, Edwin, not to make it larger than 960px wide. This, as it turned out, caused a few layout issues with the navigation. More below on that one. I wanted it set in the middle, obviously, so set the margin to auto and I wanted it to be read reasonably easily so set the line-height to 1.5em. With the font size, this allowed it to be clearer on the page. A smaller line height, something I experimented with for a little while (and which turned out to be surprisingly frustrating), just made the text look to squished together. I also decided to justify the text as this kerned it out a lot more, thus also creating white space on the page.*/
body {
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5em;
	text-align: justify;
	color: #575757;
	background: #ffffff;
	width: 960px;
	margin: auto;
	}
/*It's the little things that cause the most angst, I think. I don't like the html-formatted headings overmuch. Verdana bold isn't especially attractive and I'm a layout person rather than a technical person. Some people can marry those successfully but I've been doing print too long. I'll sacrifice technical whizzbangery for a neat layout every time or with this, most every time. With the headings, I went for the simple over putting in, for example, replacing the headings with pictures as I did with the first assignments. To cope with the hideousness of Verdana bold, I decided to make the headings lower case.*/
h3 {
	font-size: 15px;
	color: #535353;
	}
/*Now, with the links, I went for simple again and I nicked these right out of my CSS zen garden file and changed the colours. There's so much advice and I'll note contradictory advice on the Net about the best way and/or the right way to do anything in CSS so I just tend to go down the tried and true path of 'whatever works'.*/
a:link {
	text-decoration: none;
	color: #a59fa4;
	}
a:visited {
	text-decoration: none;
	color: #8e9ac9;
	}
a:hover, a:active {
	text-decoration: underline;
	color: #46155d;
	}
/*Oh, the sheer horror of tables. Honestly, you'd think going by some of the CSS stuff on the Net that they're the Worst Thing Evah and perhaps they are but I needed a table on the PLN testing page to describe what various blood tests mean so bit the bullet. Well, I tried three different CSS books, including the incomprehensible Castro (seriously, how did that book ever get published?) and all of them were useless. No matter what I did I could not get the border to collapse. Finally, I googled, and most everything was also useless until I found a site that had CSS for a table that was a thoroughly hideous green colour in the table header and it had the lengthiest CSS I'd seen just to do a table. I copied it and played for ages. The one different thing in this CSS to the rest was that the border-collapse was separated from the actual border CSS and the padding was separated as well. I tried putting in all of the CSS, which would have made this file very long, and discovered that for some reason a lot of it was repeated. Who knows why? I don't because when I started deleting the repeats it didn't seem to make any difference to the overall structure of the table. Finally, I got brave enough to change other parts of it and since, to my great relief, it didn't change the table, I left it alone. Whatever works.*/
table, td, th {
	border: 1px solid gray;
	}
table {
	border-collapse:collapse;
	}
th {
	padding: 10px;
	}
td {
	padding: 5px;
	height: 10px;
	vertical-align: top;
	text-align: justify;
	}
/*I knew in order for my layout to work, I'd have to place the navigation on top of the banner. How was I going to do this? Well, first I had to put in the picture, which was easy enough because going on what I'd done in the Zen Garden and on my original NED11 assignment (if I'm getting the unit number right), I just had to put it in a div. So I did. Easy. Except for the bit where the text just ran right over the top of it, which it hadn't done in the NEd11 assignment but possibly boded well for getting the navigation to run over the top of it. I talked to web guru and he said altogether too patiently, 'Set the height.' Um, right, yes, that works. But that raised a question: what about the navigation?*/ 
#menu {
	background: url(images/banner.gif) no-repeat;
	height:150px;
	}
/*Forget every previous bit of angst. The navigation caused more angst than anything and only some of it was due to working out where it was going. No, the first bit of angst was getting the list to be horizontal because like everything else in CSS there are many and varied ways of doing horizontal navigation (see progress report for more info on where I looked for help with this). As usual the books were useless because being me, I had to actually choose a navigation was more complicated than everything else. Typical me. Most of the drop-down menu navigation wasn't side-by-side navigation even if the top level menu was horizontal. Most of it was horizontal at the top and then vertical on the sublevel navigation. I wanted something different, though, I wanted one where both the top level navigation and the sub-level navigation was horizontal. Searched and searched and finally found a CSS help site where someone asked about having both levels horizontal and from my point of view, importantly, they supplied the CSS. I nicked it immediately. Trouble was that it didn't sit on top of the banner at all and like the table, it was really, really, really long. Unlike, the table, however, most of this CSS turned out to be necessary. First things first: where it sat on the page. It was actually outside the body and flat up against the side of the page. This turned out to be the position, which I changed to every possible combination. Still nothing. Turned out to be left positioning in the #navbar li ul. Hair tearing out frustration. Another thing each page kept doing was shifting position when the rollover happened with the PLE/PLN submenus. Web guru said, 'This shouldn't work but it does sometimes.' And just below the #navbar CSS he suggested ul#navbar, which he said to also set to relative. Why why why? And again, there's my main issue with CSS. There are no hard and fast rules such as you get with HTML. It's 'If it works, great; if it doesn't try something else.' The line in the sand keeps shifting. I find it very frustrating.*

The other thing, of course, is with the drop down navigation I wanted to do it like a flowchart with lines coming down. But, sadly and annoyingly, I couldn't work out a way to do it. I thought of putting in a picture for the lines but I couldn't do that with having a drop down menu on the PLE and on the PLN menus. Both Google and web guru could not be of assistance so I reluctantly dropped it. I might play with it later on if I want to update the site again but for now, I'm just going to leave it as is. */
#navbar {
    position: relative;
    bottom: 20px;
    right: 0;
    padding: 0;
	text-align:right;
	padding-top:120px;
	}
ul#navbar{
	position:relative;
}
/*This is the one bit of the navigation that I got from the books that is the same everywhere: list-style: none and display: inline. Even so, you'd think there would be rules that made sense for the rest of it, wouldn't you. Or at least, made sense to me.*/
#navbar li {
    list-style: none;
	display:inline;
    }
#navbar li a {
	padding: 15px 20px;
	text-decoration: none;
	color: #a59fa4;
	font-size: 16px;
	}
#navbar li a:hover {
	color: #46155d;
	}
/*Well, this is the bit of CSS that shifted the menu into the spot that I really wanted it. It's simply the left positioning. Took some fiddling.*/
#navbar li ul {
	display: none;
	position: absolute;
	left: 425px;
	top:145px;
	}
#navbar li:hover ul, #navbar li.hover ul {
	display: inline;
	width: 100%;
	margin: 0;
	padding: 0;
	}
#navbar li:hover li, #navbar li.hover li {
    float: left;
    }
#navbar li:hover li a, #navbar li.hover li a {
    color: #46155d;
	font-size: 13px;
    }
#navbar li li a:hover {
    color: #46155d;
    }
/*These two last divs were the easiest of the lot. I knew I wanted a footer in box and I knew I wanted the copyright outside the box. Easiest bit of all, didn't have to think about it. And that, in short, is the end of my CSS rant. Some of this is repeated in the progress report but with the research links added.*/
#footer {
	font-size: 11px;
	line-height: 1.2em;
	margin: 10px;
	padding: 8px;
	border: 1px solid #ad9fa4;
	}
#copyright {
	font-size: 11px;
	line-height: 1.2em;
	text-align: center;
	 margin-bottom: 20px;
	}