/* Menu on the right-hand side, with pop-up hints - div.menu
 * Highlighted "news" section - div.news
 *
 * Author: Simon Hendy
 * Copyright © 2006
 * www.shendy.co.uk
 */

/* Main style for the body of the page.
   Add padding at the top and right to allow room for the logo, title and
   menus */
body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: black;
	color: white;
	position: relative;
	padding: 8em 17em 5em 2em;
	margin: 0;
}					

/* Body style within the html section (which it always will be, really
   Change the right-hand padding to 14em from the 17em in the previous style
   No idea why we do it like this - it was like this in the example I copied */
html>body {
	padding-right: 14em;
}

/* Links in the main body
   Unvisited & invisited links - yellow on black
   Focus, Hover and Active links - light grey on black */
a:link {
	color: #f8f400;
	background-color: black;
	text-decoration: none;
}
a:visited {
	color: #f8f400;
	background-color: black;
	text-decoration: none;
}
a:focus {
	background: #ccc;
	color: black;
	text-decoration: none;
}
a:hover {
	background: #ccc;
	color: black;
	text-decoration: none;
}
a:active {
	color: #ccc;
	background-color: black;
	text-decoration: none;
}

/* ************************************************************************ */
/*                           MENU DEFINITION                                */
/* ************************************************************************ */

/* Defines the style for the "menu" class - on the right-hand side of the
   screen. Ideally, I'd like to do a fixed position menu so that it's always
   visible, but I realised that if you've got too much in the menu,
   especially on a lower-resolution screen, you can't ever get to the items
  that are outside the visible window! */

/* This bit defines the appearance of the overall outline of the menu block.
   Fixed height to make sure there's enough room at the bottom to include
   the pop-up text */
div.menu {
	position:absolute;
	width: 11em;
	height: 35em;
	top: 1em;
	right:1em;
	bottom: 1em;
	left: auto;
	background-color: #ccc;
	color: #555;
	cursor:pointer;
}

/* <p> & <p1> elements (menu items) in the "menu" class division, setting the
   appearance of each menu item.
   <p1> is the same as <p> except it's not bold. */
div.menu p, div.menu p1 {
	display: block;
	font-size: small;
	font-weight: normal;
	margin: 0.35em 1.63em 0.25em -0.9em;
	padding: 0.25em 1em;
	text-indent: 0;
	text-align: left;
	background: #555;
	color: #fff;
}
div.menu p1 {
	font-weight: normal;
	font-size: x-small;
}

/* Sets up the content to appear automatically at the start of the "menu"
   class division. Basically done for the text "Menu" so we don't have to
   remember to put it in! */
div.menu:before {
	content: "Menu";
	display: block;
	padding: 0.1em 0.5em;
	color: #555;
	background-color: #ccc;
	font-size: larger;
	font-style: italic;
	text-align: left;
	letter-spacing: 0.25em;
	font-weight: bold;
}

/* Hide the "span" text for the links */
div.menu a span {
	display: none;
}

/* Link appearance
   Unvisited link - white on dark grey
   Visited link - white on dark grey
   Link with focus - light grey on black
   Hovered over a link - light grey on black
   Active (pressed) link - light grey on black */
div.menu a:link {
	color: white;
	background-color: #555;
	text-decoration: none;
}
div.menu a:visited {
	color: white;
	background-color: #555;
	text-decoration: none;
}
div.menu a:focus {
	background: #ccc;
	color: black;
	text-decoration: none;
}
div.menu a:hover {
	background: #ccc;
	color: black;
	text-decoration: none;
}
/* Show the "span" text when the link is hovered over */
div.menu a:hover span {
	display: block;
	position: absolute;
	top: 425px;
	left: 0;
	width: 125px;
	padding: 5px;
	margin: 10px;
	z-index: 100;
	color: white;
	background: black;
	
	text-align: center;
	font-weight: normal;
}
div.menu a:active {
	color: #ccc;
	background-color: black;
	text-decoration: none;
}

/* ************************************************************************ */
/*                         HEADER DEFINITION                                */
/* ************************************************************************ */

/* Sets up the style for header that appears right at the top of the page.  */

/* Banner layout - fixed at the top
   Needs the same room on the right as the body, to leave room for the menu */
div.banner {
	position: absolute;
	width: auto;
	top: 0em;
	right: 1em;
	bottom: auto;
	left: 2em;
/*	text-align: center; */
/*	line-height: 200%; */
}

/* For the image in the banner - float to the left so that the subsequent
   text appears immediately to the right of it. */
div.banner img {
	float: left;
}

/* Header text */
div.banner h1 {
	font-variant: small-caps;
	font-weight: bolder;
	font-size: xx-large;
/*	font-size: 36px; */
}	

/* ************************************************************************ */
/*                           LATEST NEWS DEFINITION                         */
/* ************************************************************************ */

/* Sets up the "latest news" box that is used at the bottom
   50% of the screen width, but with a minimum. Grey background. */
div.news {
	min-width: 14em;
	width: 50%;
	padding: 1em;
	color: #000;
	background: #ccc;
	text-align: left;
}

/* Content to come before the "news" text. Add in the words "latest news"
   without them having to be typed into the html document. */
div.news:before {
	content:"Latest News";
	font-weight:bold;
}

/* Puts the first line of the "news" class in italics.
   This includes the automatically inserted "Latest News" text. */
div.news:first-line {
	font-style:italic;
}

/* ************************************************************************ */
/*                           FOOTER DEFINITION                              */
/* ************************************************************************ */

/* For the copyright message */
div.footer {
	text-align:center;
	font-size: smaller;
	padding-top: 2em;
}

div.footer img {
	border: 0;
}

/* Links in the footer - to stop the link to the CSS validator looking crap
   Unvisited & invisited links - unchanged from parent
   Focus, Hover and Active links - yellow on black */
div.footer a:focus {
	color: #f8f400;
	background-color: black;
	text-decoration: none;
}
div.footer a:hover {
	color: #f8f400;
	background-color: black;
	text-decoration: none;
}
div.footer a:active {
	color: #f8f400;
	background-color: black;
	text-decoration: none;
}

/* ************************************************************************ */
/*                           GALLERY DEFINITION                             */
/* ************************************************************************ */

/* Each image floats alongside the previous one. */
div.gallery {
	float: left;
	min-width: 105px;
	padding: 1.0em;
	height: auto;
	display: inline;
}

/* The caption for each image */
div.gallery p {
	text-align: left;
	float: none;
}

/* stop the border around each image */
div.gallery img {
	border: 0;
}

/* stop any colour around the images */
div.gallery a:focus, div.gallery a:hover, div.gallery a:active {
	background-color: black;
}

/* ************************************************************************ */
/*                          SUB-MENU DEFINITION                             */
/* ************************************************************************ */

/* Appearance of the horizontal sub-menu that appears on the category pages */

/* Have to include the spacing on the right to leave room for the main menu */
/* 'submenu1' is for the category (bold);  'submenu' is for the sub-categories */
div.submenu1 {
	font-weight: normal;
	line-height: 1.2em;
	text-align: center;
	display: block;
	font-weight: bold;
}
div.submenu {
	font-weight: normal;
	line-height: 1.2em;
	text-align: center;
}

/* For the category title */
div.submenu p {
	color: #f8f400;
	font-size:x-large;
	font-weight:bold;
}

/* Make sure the fieldset legends come out in white */
div.content legend {
	color: #fff;
}