/*
 - ABOUT THIS WEBSITE -
This website is hand-written in HTML.
 -Pros of hand writing a website:
   1. You can make it look exactly as it should.
   2. It will be easy to update later.
   3. Anyone can edit it (who knows how to write websites).
   4. It is accessible to those who are visually impaired.
 -Cons of hand writing a website:
   1. It is time consuming.
   2. You have to make sure to test it in all the popular web browsers:
        Internet Explorer (IE), Firefox (FF), Google Chrome
The best alternative to hand writing is to use a Content Management System (CMS),
I would recommend http://www.joomla.org/
 -Pros of a CMS:
   1. Will save time, especially in the long term and especially for larger websites.
   2. A CMS has already been thoughroughly tested.
   3. THE ONLY solution, if a large website needs to be updated by someone with little
        or no programming experience.
   4. It is accessible to those who are visually impaired.
   5. It can be customised as much as a hand written website, so you can still
        get it to look exactly as it should.
 -Cons of a CMS:
   1. Might not be appropriate (i.e. overkill) for small, simple websites.
        (however, CMS systems are becomming easier to use, so this is becoming less of an issue.)

 - FOR THE BEGINNER -
Computer code is a bit like baby talk. Computers are simple inside and cannot understand
anything as complicated as a normal sentence, so, to program a computer, the code has to
consist of simple 'commands'. All these commands are strung together to form something
complicated and useful, like a web page. The commands are designed so that they make sense
to people as well as computers - computer code is as simple as it looks.

In simple websites like pool bridge there are two different computer languages:
 1. HTML: HyperText Markup Language
 2. CSS: Cascading Style Sheet
The files which are in the HTML language conatin the webpage content. These files
end in .html and they can be 'read' by web browsers (like Internet Explorer).
The files in the CSS language contain information about how that HTML content should
be displayed. Each HTML file can specify a CSS file, the web browser will then use
the CSS file to find out exactly how to display the content in the HTML file.
To summarise:
  -The HTML file contains a web page's content and structure (since all content is structured).
  -The CSS file describes how the structured content in the HTML file should be layed out.
    It can specify things like; font, colour, borders, background images etc.
The CSS file must specify which bits of content in the HTML file receive which 'style'.
The content in a HTML file is marked with 'tags' (this is why HTML is a 'Markup Language'),
so the names of these tags are used in the CSS file. For example, all paragraphs in a HTML 
file are within 'p' tags. The HTML code looks like this:
    <p>This is a paragraph of text in HTML.</p>
One type of tag '<p>' tells the computer that a paragraph is about to start, another type of tag
'</p>' tells the computer that the paragraph has finished. Another example is:
    <title>My Web Page Title</title>
Paragraphs can be strung together like this:
    <p>My first paragraph...</p>
    <p>My second paragraph...</p>
All the web browser is looking for when it reads a HTML file is the tags '<>' and the text
which is contained within the tags. These are what matter. The tags describe the structure,
so the structure of the code itself is actually irrelevant. This means the code for a webpage
could all be on one line, but the web page itself would be unchanged.

The code in a CSS file has a very specific form: a combination of tag names are given, followed
by a list of style properties contained within curley braces.
Each property starts with the property name (E.g. color), followed by a colon and the property value.
A semi-colon signifies the end of the value (the semi-colon is needed because some properties
have a list of values). The following is an example:
p {
	text-align: center;
    font-weight: bold;
}
This example tells the web browser to centre align all paragraphs and use a bold font.

Try opening the web page index.html in a text editor (Notepad++). Notepad++ can have lots
and lots of files open at the same time, each file name appears as a tab at the top, so it
is easy to switch between files. You can even have files open side-by-side: right click
on a tab and choose 'Go to another view' (near the bottom of the list).
The Home Page of a website is always called index.html, this is the webpage that will show
when someone types www.poolbridge.co.uk in a web browser.

If Notepad++ is not instructed to 'wrap lines', the paragraph text in index.html will all 
appear on one line per paragraph (just in Notepad++, not on the webpage). To solve this,
in Notepad++ go to the 'View' menu, then choose 'Wrap' (8th one down). If you go back to 
the 'View' menu 'Wrap' should have a tick next to it.

I hope the code of index.html doesn't look too daunting for you.
Notepad++ does a good job at colour coding computer code so that it is easier to understand.
Comments are always colour coded in green, these will be ignored by the computer, so they
are really useful for describing the code. What you are reading now is a very large comment
within the Pool Bridge CSS file.
In HTML code, comments have to start with <!-- and end with --> for example:
    <!-- this is a commment in HTML code -->
Another really, really useful thing that Notepad++ does, is highlighting of start and end tags.
This is very useful because tags can be nested inside one another, for example p tags can be
placed inside div tags (div tags are used to divide up the content, they are often put inside
one another, so that a div tag near the start of a file will have its end tag near the end).
Notepad++ highlights tags as soon as you click on them!

Type into google:
w3schools html
Also for CSS:
w3schools css
When you go to either of these pages you will find a good beginners guid to writing webpages, also, if you look at the links down the left hand side there is a reference link which explains what all of the 'tags' mean.

To be able to upload your website you need some 'ftp' software. There are loads of different ones, the one i've
used the most is Filezilla, this is free, youo should be able to find it if you search on google.
One on One will have instructions on how to use FTP.

*/

html {
    margin:0px;
    padding:0px;
}
body{
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color:black;
	/*WEBSITE BACKGROUND COLOUR */
    background-color:#4f5923;
	/*WEBSITE TEXT COLOUR */
	color: #463c3c;
	
	margin:0px;
    padding:15px 0px 15px 0px;
}

body.qlake{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	color:black;
	/*WEBSITE BACKGROUND COLOUR */
	background-color:#4f5923;
	/*WEBSITE TEXT COLOUR */
	color: #463c3c;
	background-image:url("../decoration/lakes/camo.png");
	background-repeat:repeat;
	background-attachment:fixed;
	margin:0px;
	padding:15px 0px 15px 0px;
} 


/*** Used to hide things that will aid structure if CSS is removed ***/
.cssHidden { display: none; }

/* The conatiner holds everything */
div.container{
	width: 700px;
    padding: 0px;
    margin: auto;
	background-color:white;
}

/* Browsers don't like to see empty tags, so the following page structure is like a set of chinese dolls */
div.borderTop {
	margin:0px;
	padding: 26px 0px 0px 0px;
	background-image: url("../decoration/border-top.png");
	background-repeat: no-repeat;
    background-position: top center;
}
div.borderBottom {
	margin:0px;
	padding: 0px 0px 26px 0px;
	background-image: url("../decoration/border-bottom.png");
	background-repeat: no-repeat;
    background-position: bottom center;
}
div.borderLeft {
	margin:0px;
	padding: 0px 0px 0px 21px;
	background-image: url("../decoration/border-left.png");
	background-repeat: repeat-y;
    background-position: left;
}
div.borderRight {
	margin:0px;
	padding: 0px 21px 0px 0px;
	background-image: url("../decoration/border-right.png");
	background-repeat: repeat-y;
    background-position: right;
}

/*Everything inside the border*/
div.content {
	margin:0px 7px 0px 7px;
	padding:0px;
}

/*Header contains the title and main menu items */
div.header {
	margin:0px;
	padding:0px;
	background-image: url("../decoration/flourish.png");
	background-repeat: no-repeat;
    background-position: center center;
	
	/*The following code is needed so that the header stretches to accomodate the floating menu.*/
	/*This fix is found on http://www.quirksmode.org/css/clearing.html*/
	overflow: hidden;
	width: 100%;
}
div.header hr {
	border-color:#cec1a2;
	margin: 0px 6px 15px 6px;
}

div.mainPage {
	margin:0px 0px 22px 0px;
	padding:0px;
}
div.mainPage_lake {
	margin:6px 0px 6px 0px;
	padding:0px 0px 6px 0px;
    /*background-color: #f5edc0;*/
    
    /*This property allows us to move the lakeMenu over the image*/
    position: relative;
}

div.footer {
	margin:0px;
	
	/*IE6 doesn't like this padding, so give it a height instead */
	/*padding:0px 0px 8px 0px;*/
	height: 24px;
	
	text-align: center;
	font-size: 90%;
}

ul.mainMenu {
	/*This method of floating a list was taken from http://www.w3schools.com/css/pr_class_float.asp (see: create a horizontal menu )*/
	float:left;
	width: 100%;
	list-style-type:none;
	
	margin: 0px;
	padding:0px;
		
	font-size: 105%;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
}
ul.mainMenu li {
	display:inline;
}
ul.mainMenu a {
	float:left;
	padding: 0px 0px 7px 40px;
	font-family: 'Palatino-Bold', 'Palatino', serif;
	text-decoration:none;
    color:#969696;
}
ul.mainMenu a:hover {
	color:#5a5a5a;
}
ul.mainMenu a.selected {
	color:black;
}

ul.fishingMenu {
    width: 100%;
    overflow: hidden;
	list-style-type:none;
	
	margin: 15px 0px 0px 0px;
	padding:0px;
        
    background-image: url("../decoration/fishing/menu2.png");
	background-repeat: no-repeat;
    background-position: center center;
    
    font-size: 105%;
    font-weight: bold;
}
ul.fishingMenu li {
	float: left;
    margin: 0px;
    padding: 0px 0px 1px 0px;
}
ul.fishingMenu a {
	padding: 0px 0px 0px 85px;
	text-decoration:none;
    color:#969696;
}
ul.fishingMenu a:hover {
	color:#5a5a5a;
    text-decoration:underline;
}
ul.fishingMenu a.selected {
	font-weight: bold;
    text-decoration:underline;
	color:black;
}

ul.lakeMenu {
    width: 100%;
    list-style-type:none;
    
    position: absolute;
    top: 4px;
	
	margin: 0px;
	padding:0px;
    height: 37px;
        
    background-image: url("../decoration/lakes/menu.gif");
	background-repeat: no-repeat;
    background-position: center center;
    
    font-size: 130%;
}
ul.lakeMenu li {
	float: left;
    margin: 0px;
    padding: 8px 0px 0px 0px;
}
ul.lakeMenu li.firstEntry {
    padding-left: 78px;
}
ul.lakeMenu a {
	padding: 0px 19px 0px 19px;
    font-family: 'Palatino-Bold', 'Palatino', serif;
	text-decoration:none;
    color:black;
}
ul.lakeMenu a:hover {
    text-decoration:underline;
    color:#cf8c66;
}
ul.lakeMenu a.selected {
    font-weight: bold;
    text-decoration:underline;
    color:black;
}

ul.pictureMontage {
	/*This method of floating a list was taken from http://www.w3schools.com/css/pr_class_float.asp (see: create a horizontal menu )*/
	float:left;
	width: 100%;
	list-style-type:none;
	
	margin:4px 0px 0px 0px;
	padding:0px;
}
ul.pictureMontage li {
	display:inline;
}
ul.pictureMontage img {
	float:left;
	margin: 4px;
}

ul.pictureMontage2 {
	/*This method of floating a list was taken from http://www.w3schools.com/css/pr_class_float.asp (see: create a horizontal menu )*/
	float:right;
	width: 100%;
	list-style-type:none;
	
	margin:4px 0px 0px 0px;
	padding:0px;
}
ul.pictureMontage2 li {
	display:inline;
}
ul.pictureMontage2 img {
	float:right;
	margin: 3px;
}

h1, h2 {
	font-family: 'Palatino-Bold', 'Palatino', serif;
}

h1, h2, h3 {
	text-align: center;
}

h1 {
	margin:0px 0px 2px 0px;
	padding:13px 0px 0px 0px;
	font-size: 245%;
	text-transform: uppercase;
	letter-spacing: 5px;
	color: #005c87;
}

h2 {
	margin:0px 0px 13px 0px;
	padding:13px 0px 24px 0px;
	font-size: 150%;
	font-weight: bold;
	color: #aa663c;
    
    background-image: url("../decoration/hairpin.png");
	background-repeat: no-repeat;
    background-position: bottom center;
}
h2.noDecoration {
    background-image: none;
    padding-bottom: 0px;
}

/*Horizontal rule*/
hr  {
	margin:0px 6px 0px 6px;
	height: 5px;
	
	border-width:1px 0px 1px 0px;
    border-style:solid;
	border-color: #939081;
}

p {
	margin:1em 0em 1em 0em;
	padding:0px 36px 0px 36px;
	text-align: justify;
}

ol li {
    margin: 0.2em 0em 0.2em 0em;
}