/* My Favourite Book, free web template by davereederdesign.com */

body { 
	margin: 0; 
	padding: 0; 	
	font-size: 100%; /* Sets font size */
	text-align: left;
	background-color: #F8CD86;  /* Cream colour visible in the link area */
}


/* GLOBAL STYLES */
* {margin: 0; padding: 0; border: 0; font-weight: normal}  /* These global values affect everything */

h1 {  /* Main site heading */
	margin: 20px 20px 0 20px; 
	font-family: Georgia, serif; 
	font-size: 2.00em; 
	color: #FFDEAE; 
	border-bottom: 1px solid #55402F; 
	letter-spacing: -0.05em
}

#tagline {margin: 2px 0px 10px 20px; font-family: Georgia, serif; font-size: 0.80em; color: #FFDEAE}  /* styling for the by drd line */

p, ul, ol {margin: 5px 20px 0px 20px; list-style: inside square; font-family: Verdana, Arial, sans-serif; font-size: 0.70em; line-height: 1.6em; text-align: left}  /* sets up the general paragraphs and list styles */

ol {list-style: inside decimal}

code, pre {margin: 5px 20px 0px 20px; font-family: monospace; font-size: 0.90em; line-height: 1.6em; text-align: left; color: #767D81}

acronym {border-bottom: 1px dashed #A46538; color: #A46538; cursor: help}

/* IMAGES */

img.left {margin: 0 10px; float: left}  /* No top or bottom margin, so should align well with paragraph text */
img.right {margin: 0 10px; float: right}  /* No top or bottom margin, so should align well with paragraph text */


/* HEADINGS AND TEXT */
#rightcol h2, #rightcol h3, #leftcol h2, #leftcol h3 {
	font-family: Georgia, serif; 
	margin: 30px 0 10px 20px; 
	font-size: 1.20em; 
	line-height: 1.20em; 
	color: #FFDEAE /* Cream coloured headings */
}
	
#links h2, #links h3 {
	font-family: Georgia, serif;
	margin: 30px 0 10px 20px; 
	font-size: 1.20em; 
	line-height: 1.20em; 
	color: #130E0A /* Dark brown link headings */
}

#rightcol p, #rightcol ul, #rightcol ol, #leftcol p, #leftcol ul, #leftcol ol {color: #9D7253} /* refines the styles for paragraphs and list styles in the main columns */
#links p, #links ul, #links ol, #bttmbar {color: #89674E} /* refines the styles for paragraphs and list styles in the list error */


/* COMMON LINKS */
#hdr a:link, #hdr a:visited {color: #FF7800; text-decoration: none; font-weight: bold} /* styles the link in the tagline */
#hdr a:hover, #hdr a:active {color: #FFB776; text-decoration: none; font-weight: bold}

#rightcol a:link, #rightcol a:visited {color: #FF7800; text-decoration: none; font-weight: bold} /* styles general paragraph links in the content */
#rightcol a:hover, #rightcol a:active {color: #FFB776; text-decoration: none; font-weight: bold} /* styles general paragraph links in the content */

#links a:link, #links a:visited, #bttmbar a:link, #bttmbar a:visited {color: #C75E01; text-decoration: none; font-weight: bold}
#links a:hover, #links a:active, #bttmbar a:hover, #bttmbar a:active {color: #FF7800; text-decoration: none; font-weight: bold}


/* MAIN LAYOUT DIVS */

#backgroundwrapper {  /* this div allows the repeating background image to display inline with the book image */
	width: 100%;
	background: url(images/background.jpg) bottom repeat-x #30231A;
	overflow: hidden
}

#hdr {   /* Header area which contains h1 the main site title */
	width: 770px;
	background: transparent;
}

#container {   /* keeps the left and right columns together and shows the book image */
	width: 770px;
	background: url(images/book.jpg) bottom left no-repeat #30231A;
	overflow: hidden
}

#leftcol {  /* left column for the nav */
	float: left;
	width: 210px;
	background: transparent;
}

#rightcol {  /* main content area */
	float: left;
	width: 560px;
	background: transparent;
	padding-bottom: 70px;  /* Padding is added so text doesnt go over background image too much */
}

#links { /* bottom area containing the external links */
	width: 770px;	
	background: transparent;
	padding-bottom: 20px
}

#bttmbar {   /* Bottom bar, contains copyright info, validation links etc */
	float: left;
	width: 770px;	
	background: transparent;
	border-top: 1px solid #E1BA7C;
	height: 3.00em
}


/* MAIN NAVIGATION */

ul#nav {  /* Main site navigation list */
	margin: 0; padding: 0; border: 0;
	margin-top: 13px; /* This should match paragraph margin to line up with right coloumn text */
	list-style: none outside; /* Removes bullet points */
}

#nav li a {display: block; width: 190px; margin: 0; margin-left: 15px; margin-bottom: 8px} 

#nav li a:link, #nav li a:visited {    /* Main link title */
	display: block; color: #FF7800; padding: 2px 5px; text-decoration: none; font-weight: bold; background: url(images/navitembackground.gif) top left no-repeat}

#nav li a:hover, #nav li a:active { /* Main link title hover */
	color: #FFB776}

#nav li a:link span, #nav li a:visited span {    /* Extra info styles */
	display: block; color: #614B3B}

#nav li a:hover span, #nav li a:active span {    /* Extra info styles */
	color: #9D7253; cursor: pointer}

#nav li a#current {color: #FFA758; background: url(images/currentitembackground.gif) top left no-repeat}  /* Current style */
#nav li a#current span {color: #9D7253;}  /* Current style */


/* EXTRA LINKS */

ul.links {  /* List styles for the bottom external links */
	float: left;
	width: 375px;
	margin: 0; padding: 0; border: 0;
	margin-top: 20px; /* Spaces the list down nicely */
	margin-bottom: 20px;
	list-style: none outside; /* Removes bullet points */
}

.links li a {display: block; width: 350px; margin: 0; margin-left: 15px; margin-bottom: 8px} 

.links li a:link, .links li a:visited {  /* Link title normal state */
	display: block; color: #C75E01; padding: 2px 5px; text-decoration: none; font-weight: bold; background: url(images/listitembackground.gif) top left no-repeat}

.links li a:hover, .links li a:active { /* Link title hover */
	color: #FF7800}

.links li a:link span, .links li a:visited span {    /* Extra info styles */
	display: block; color: #89674E}

.links li a:hover span, .links li a:active span {    /* Extra info styles */
	color: #000; cursor: pointer}

	/* ALS FLASH CLOCK */

#clock {
	float: right;
	width: 180px;
	height: 180px;
	/*margin-left: 400px;*/
	padding: 0px;
	border: 0px;
	}

#clock2 {
	float: right;
	padding: 0px;
	border: 0px;
	}

.clearer {
	clear: left; 
	height: 0px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	}