/* 
	This is the CSS for the page I have created to demonstrate layout
*/

html {
	color: #ccc;
}

/* Set the font size and font page wide */

body
{
	font-size: 12px;							/* makes 1pt = 1px */
	line-height: 1.2em;
	font-family: Lucida sans;	/* Font you ideally want first, then the fallback fonts if first not there */
	text-align: center;
	background: url(background3.png) fixed;						/* background colour of browser window */
}

/* the clear float rule, so that things stack up nicely */

br.clear,
div.clear
{
	clear: both;
}

/* lets make different colours for tags using  classes */
/* see HTML for use */
.red
{
	color: white;
}

.green
{
	color: grey;
}

.yellow
{
	color: yellow;
}

/* lets apply text alignments for tags using classes */
/* see HTML for use */

.left
{
	text-align: left;
}

.center
{
	text-align: center;
}

.right
{
	text-align: right;
}

/* now we centre the page in the browser */
/* set absolute width of the site */

#container
{
	clear: both;
	width: 800px;
	text-align: left;
	margin: 0 auto;
}

#screen
{
	float: left;
	background: #303030;	/* background to the entire page, you could put a background image here if you wanted */
}

#content


/* set widths of header, subheader, intro, footer */

#header,
#subheader,
#content,
#footer
{
	width: 100%;	/* means it will occupy the entire width of its container, ie #screen */
	float: left;	/* in order to float divs inside, you need to float the container */
}

/* rules applying to #logo, #freeview and elements contained inside */

#logo,
#freeview
{
	display: inline;
	float: left;
	width: 400px;
}

#logo img,
#freeview img
{
	float: left;
}

/* now we style the #links */

#links
{
	float: left;
	width: 200px;
}

#links ul
{
	/* setting a width here, adjust as necessary */
	width: 200px;
	float: left;

}

#links li
{
	list-style: none;			/* remove bullet points from li */
	background: black; 			/* just to show its extent, make it this colour, <a> will use this background */
	margin: 4px 0px;
}

#links li a,
#links li a:link
{
	text-decoration: none;		/* remove underline from the <a> */
	font-size: 1.4em;			/* about 12pt */
	display: block;				/* make <a> fill entire width of list */
	color: #FFFFFF
	padding: 2px 0px 2px 10px;	/* pad it a little to make it nice */
}

#links li a:hover
{
	font-weight: bold;			/* background and weight of <a> changes to this when mouse over */
	background: #4488CC;
}

/* style <img> inside #images to be specific size */

#images img
{
	float: left;
	width: 200px;
	height: 150px;
	overflow: hidden;	/* if you place a bigger image here than 200 x 150, it will clip the image */
}

#introduction
{
	width: 590px;
	padding: 50px 10px 10px 200px;
	
}


/* for now let us style ALL h1, h2, h2, h3, p */

h1,h2,h3,h4
{
	margin-bottom: 5px;		/* set margins for all <hN> tags we are using on the site */
}

h1
{
	font-size: 1.3em;
	color:#FFFFFF;
}

h2
{
	font-size: 1.5em;
	color:#CCCCCC
}

h3
{
	font-size: 1.4em;
	color: #FFFFFF
}

h4
{
	font-size: 1.3em;
	color:#FFFFFF
}

p
{
	padding: 10px 0px 10px 0px;
	font-size: 1.2em;
	color:#CCCCCC
	margin: 2px 0px;
}

a
{
	color: white;				/* the default colour for all <a> on the site */
}

/* now lets change the <a> in the main introduction area */

#introduction a
{
	color: green;				/* <a> in #introduction div will be green */
}

#introduction a:hover
{
	color: red;					/* the link turns these colours when hovered over */
	background: yellow;
}

#introduction i
{
	font-style: italic;			/* Make text explicitly italic for <i> tags */
	text-transform: uppercase;	/* upcase ALL text typed, no matter what was typed. Neat Huh? 
									Check the HTML if you dont believe me :) */
	color: grey;	
}


/* lets make the h4 in the footer different */

#footer h4
{
	margin: 5px 0px;
	text-align: left;
	font-size: 1.2em;
	color: white;
}