/* My Documents\My Web Sites\website_Tiscali_UK\Snergs_Stylin\Richard_CSS_Files\snergs_8_29.css */
/* Taken from Snergs_Stylin\Copy (2) of 8.29_renew_with_labdropdownmenu.htm  19 Feb 2010 */
/* The Wyke-Switch - by Charlie Wyke-Smith - switch your left and center columns in your layout to have the center column 
first in the markup!
 Putting the content first in your markup can significantly improve your search engine rankings.
This demo shows the CSS required to switch the left and center column - the center column (content - div "column2") 
is first in the markup but appears after the left column (navigation - div "column1") in the layout.
Without the margin-left properties on columns 1 and 2, they appear in the browser in the order shown in the markup - 2, 1, 3.
This arrangement is achieved by the use of a negative left margin on column 1 to move it to the left and
a a positive left margin on column 2 to move it to the right, which exchanges the position of the two columns.
Note that left margins on left floats get doubled in IE unles you apply the Steve Caslon hack of adding display:inline to
the element, in this case column 2. More on this bug at http://www.positioniseverything.net/explorer/doubled-margin.html  
This example also uses a floated wrapper around the three columns - this forces the wrapper to enclose the three columns 
so that the footer is always below whichever column is longest */

body {font: 1em verdana, arial, sans-serif;}
* {margin:0; padding:0;}
div#mainwrapper {width:976px;margin-left:auto; margin-right:auto;} /* add margin auto stuff if you want the 
layout centered */
div#header {width:976px; height:60px; }
div#columnswrapper {float:left; width:976px; background-color:white;} /* was light green #ECF2C9*/
div#nav {float:left; width:150px;background-color:white; margin-left:-730px;border-left:1px solid #960;border-bottom:1px solid #960;} 
/* nagative margin moves nav column into position */
/* original div#nav {float:left; width:150px; margin-left:-626px;} nagative margin moves nav column into position */


div#content {float:left; width:576px; border:1px solid #960;background-color:white;margin-left:150px;  padding-left:40px; display:inline;}
/* original div#content {float:left; width:476px; margin-left:150px;  padding-left:40px; display:inline;} */

 /* display inline is hack fix for IE */
/* 11 Jan 10 I added the padding thinking it would push the text further left to avoid the image overlapping
since adding the clearthe floats element (see end of this style) */
div#rightcolumn {float:left; width:220px; border-bottom:1px solid #960;background-color:white;}
div#footer {width:976px;}
.clearthis {clear:both;}

/* content column styles */
div#content {padding:0 0}
div#contentinner {margin: 0 10px 20px;}
div#content div#mainimage {width:180px; float:left; margin:0 8px 4px 0;}
div#content div#mainimage img {border: 1px solid #960;}
/* line below defines font size and colour for text below the main image shown as p class = "caption" old colour was #C60 */
div#content div#mainimage p {font-size:.65em; margin:0px 5px; color:#00080;} /* #C60 */
div#content h1{font-size:15px; font-variant:small-caps; margin-top:2em; font-family:'comic sans MS', verdana, sans-serif; color:#960;}
div#content h2{font-size:12px; font-variant:small-caps; margin-top:2em; font-family:'comic sans MS', verdana, sans-serif; color:#960;}
div#content p {font-size:10px; margin-top:0; margin-bottom:.5em;}	

div#content li {font-size:10px;}
div#content blockquote {width: 200px; float:right; font-size:.7em; border-top: 3px dotted #960; border-bottom:2px dotted #960; margin:0 10px; padding: 6px 10px;}
div#content blockquote p {margin:0; font-style:italic;}
div#content a {text-decoration:underline; color:blue; /*#C60;*/}
div#content a:hover {color: #960; text-decoration:none;}

/* nav styles */
div#nav {font: 10px verdana, arial, sans-serif;}
div#nav {padding-top:20px;}
div#nav ul {border:0; margin:12px 1.25em 12px 1.25em; padding:0; list-style-type:none;font-weight:bold; font-size:10px;}
div#nav li {border-bottom:2px dotted #960; margin:0; padding:.3em 0; text-indent:.5em}
div#nav li:first-child {border-top:2px dotted #960;}
div#nav a {text-decoration:none; color:red; /*#C60;*/}
div#nav a:hover {color:#960;}
/* a hack for IE Win only \*/	
* html div#nav ul {border-top:2px dotted #960;}
/*end of hack */

/* right column styles */
div#rightcolumn {padding-top:0px;  border-bottom:2px solid #960;} /* padding-top was 34px changed 14/08/2001 */
div#rightcolumn p {font-size:.75em;}
div#rightcolumn img {border:none; border-top:2px solid #960;}
div#rightcolumn div#newslinks ul {list-style-type:none; font-size:.7em; padding-left: 10px; margin:0 6px 0 0;}
div#rightcolumn div#newslinks li {margin-top:0; margin-bottom:.5em;}
div#rightcolumn h3 {text-align:center; font-size:.8em; color:#960; margin-bottom:0px; padding-top:3px; border-top: 2px dotted #960;}
div#rightcolumn a {text-decoration:none; color:blue; /*#C60;*/ text-decoration:underline}
div#rightcolumn a:hover {color: #960; text-decoration: none;}
div#rightcolumn li.morelink {font-style:italic;}

/*footer styles*/
div#footer {
 					padding:4px 0; /* pushes the links away from top and bottom of the div */
					font-size:.8em;  /* sets the font size of all links */
					text-align:center; /* centers the ul elements in the div */
					background-color:#DEE7B6; /* sets the background color of the div */
					border-top:1px solid #960; border-bottom:2px solid #960;}
 div#footer ul {margin:2px 0;} /* vertical spacing between the lists */
 div#footer li {display:inline; /* the key CSS - makes the lists display horizontally */
						color:white; /* sets the color of the vertical lines */
						border-left:1px solid; /* creates the vertical line to the left of each list items */
						color:#C60; /* sets the color of the vertical lines  - links colored below */
						padding:0 5px 0 9px; /* horiz space between links and vert lines - needed diff l & r values to center */
						}
 div#footer li:first-child {border-left:0;} /* removes the left border of the first list item - IDWIMIE */
 div#footer ul li a {text-decoration:none; /* removes the underlining off the links */
 						 color:blue; /*#C60;*/ /* the color of the links */
							 }
 div#footer ul li a:hover {text-decoration:underline; color:#960} /* underlines the links when hovered */
 div#footer ul.fineprint li {color:#C60;} /* color for copyright and vert dividers on last row */
 div#footer ul.fineprint li a {color:blue; /*#C60;*/} /* had to explicitly color these or they inherit from div#footer li */
  div#footer ul.fineprint li a:hover {color:#960;} /* turns bottom row white when hovered */
/* the horizontal menu starts here first set up the division and its characteristics */
/* next sets up the parameters for all the drop down menus including font characteristics */

div#listmenu {
	width:100%; /* makes the div full width */
	float:left;
	border-top:1px solid white;	/* draws white line on top edge of menu header div was
	#069 (black)*/
	border-bottom:1px solid white;	  /* draws white line on bottom edge of menu header div was
	#069 (black) */
	font-size:.75em; /* SET FONT-SIZE HERE */ FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	background-color:  red;  /* original #CCF colors the div */
	margin-top:20px; /* TEMPORARY - pushes the div away from the top of the browser for clarity in this example*/
	}
div#listmenu ul {
	margin:0 0 0 30px;/* indents ul from edge of container - NOTE: diff value for IE in hacks below */
	}

/* next determines the top level hoizontal menu characertistics */
div#listmenu li {
	float:left;	/* causes the list to align horizontally instead of stack */
	position:relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type:none;	/* removes the bullet off each list item */
	background-color:red; /*  #FFA  sets the background of the menu items */
	/* border-right:1px solid #069;  creates dividing lines between the li elements */
	}
div#listmenu li:first-child {
	border-left:1px solid #069; /*the first vertial line on the menu */
	}

div#listmenu li:hover { 
	background-color:aqua; /*  #FFF sets the background of the menu items in hover mode */
	}
div#listmenu a {
display:block;
	padding:6px 46px; /*creates space each side of menu item's text and changes the depth of the block */
	text-decoration:none;	 /* removes the underlining of the link */
	color:white;	/* #069 sets the font color for all the text of the menu items !!!!  */
	}
div#listmenu a:visited {color: white;}


div#listmenu a:hover {
	color:red;/* #F33 sets the font color for all the hovered text of the menu items !!!!  */
	}
/* the menu ends here */
/* the drop-down starts here */
div#listmenu ul li ul {
	margin:0; 
	z-index:10; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
	position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
	width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
	border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
	left:-1px; /*aligns the drop exactly under the menu */
	}
div#listmenu ul li ul li {padding:0;
	width:100%; /* makes the list items fill the list container (ul) */
	border-left:1px solid #069; /*  three sides of each drop-down item */
	border-bottom:1px solid #069;
	border-right:1px solid #069;color:white;}

/* next makes the non-link item change color when hovered */
div#listmenu ul li ul li:hover {color: purple}


div#listmenu ul li ul li a {padding:1px .5em;}
div#listmenu ul li ul li:first-child {
	border-top:1px solid #069; /*the top edge of the dropdown */
	}
/* make the drop-down display as the menu is rolled over */
div#listmenu ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#listmenu ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */

/* pop-out starts here */
body div#listmenu ul li ul li ul  {
	position:absolute; 
	visibility:hidden; /* same effect as display:none in this situation */
	top:-1px;
	left:10em;
	}
div#listmenu ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* second level popouts start here*/
div#listmenu ul li ul li:hover ul li ul {visibility:hidden;}
div#listmenu ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#listmenu ul {
	float:left; /* makes the ul wrap the li's */
	border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
	margin-left:15px; /* IE doubles the given value above - why? */
	}

/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html  div#listmenu ul li ul {
	border-top:1px solid #069;
	border-left:0px; /* stops the drop inheriting the ul border */
	}
/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */
* html  div#listmenu ul li ul li ul { 
  left:9.85em; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  left:10em;
  } 
/* and the "be nice to Opera" rule */
html>body div#listmenu ul li ul li ul {
  left:10em;
} 

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
/* the pop-out menu stays open for 22px below the bottom but at least it works */
	@media all and (min-width: 0px){
   body div#listmenu ul li ul {padding-bottom:100px;}
   body div#listmenu ul li ul li ul {padding-bottom:22px;}
   ul li ul li ul li ul li:hover {visibility:visible;}
 /* same effect as display:block in this situation */

   }
/*end Opera hack */
/* END OF HACK ZONE */
/* the drop-down ends here */
/* END OF LIST-BASED MENU */
 </style>
<style type="text/css">
/* finally after feeding values to all others, we deal with MAc5 IE */
/* IE5 Mac can't do drop-downs so we need to present the info in a different way*/
/* we present the drop down choices in a row and never show any second-level drops */
 /* this stylesheet is read by IE5 Mac only - hack omits 'url' and leave no space between @import and ("   */
@import("css/ie51_menu_hack.css"); 

/* entered a BODY spec but it seemed to have no effect! */
{}



div#listmenu_footer {
	width:100%; /* makes the div full width */
	float:left;
	border-top:1px solid white; /* #069;	 draws line on top edge of div */
	border-bottom:1px solid white; /* #069;	  draws line on bottom edge of div */
	font-size:.75em; /* SET FONT-SIZE HERE */ FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	background-color: red; /*was then silver;   original #CCF colors the div */
	margin-top:20px; /* TEMPORARY - pushes the div away from the top of the browser for clarity in this example*/
	}

div#listmenu_footer ul {
	margin:0 0 0 30px;/* indents ul from edge of container - NOTE: diff value for IE in hacks below */
	}

div#listmenu_footer li {
	float:left;	/* causes the list to align horizontally instead of stack - yes indeed */
	position:relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type:none;	/* removes the bullet off each list item */
	background-color:red; /* was silver; and before that #FFA  sets the background of the menu items */
	/* border-right:1px solid #069;  creates dividing lines between the li elements */
	}

div#listmenu_footer li:first-child {
	border-left:1px solid red; /*#069; the first vertial line on the menu */
	}


div#listmenu_footer li:hover { 
	background-color:aqua; /*  #FFF sets the background of the menu items in hover mode */
	}


/* this staggers the display */
div#listmenu_footer a {
display:block;
	padding:6px 36px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color:white;	/* #069 sets the font color for all the text of the menu items !!!!  */
	}


div#listmenu_footer a:visited {color:yellow; /*black;*/}

div#listmenu_footer a:hover {
	color:red;/* #F33 sets the font color for all the hovered text of the menu items !!!!  */
	}
/* the menu ends here */
/* the drop-down starts here */

/* next forces all the menu items under the main menu headers vertically beneath each other */
div#listmenu_footer ul li ul {
	margin:0; 
	z-index:10; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
	position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
	width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
	border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
	left:-1px; /*aligns the drop exactly under the menu */
	}


/* next aligns the drop downs equal in width throughout */
div#listmenu_footer ul li ul li {padding:0;
	width:100%; /* makes the list items fill the list container (ul) */
	border-top:1px solid white; /* this plus the next three puts borders round the individual menu items*/
	border-left:1px solid white;/* #069;   three sides of each drop-down item */
	border-bottom:1px solid white;/* #069;*/
	border-right:1px solid white; /* #069;*/
	color:white;} /* adding color sets the text color for non-link menu items */

/* next makes the non-link item change color when hovered */
div#listmenu_footer ul li ul li:hover {color: purple}


/* next pushes the menu items down by varying the box vertical padding */
div#listmenu_footer ul li ul li a {padding:1px .5em;}

/* next not sure what it does */
div#listmenu_footer ul li ul li:first-child {
	border-top:1px solid #069; /*the top edge of the dropdown */
	}

/* make the drop-down display as the menu is rolled over */
div#listmenu_footer ul li ul {display:block;} /*  !!!!! 'none' would conceal the drop-down when menu not hovered !!!!!!! */
div#listmenu_footer ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */

/* pop-out starts here */
/* original visibility 'hidden'  the pop-outs */
body div#listmenu_footer ul li ul li ul  {
	position:absolute; 
	visibility:visible; /* same effect as display:none in this situation */
	top:-1px;
	left:10em;
	}


/* doesnt seem to make any difference unless previously menu concealed */
div#listmenu_footer ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* second level popouts start here   - not working */
div#listmenu_footer ul li ul li:hover ul li ul {visibility:hidden;}
div#listmenu_footer ul li ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#listmenu_footer ul {
	float:left; /* makes the ul wrap the li's */
	border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
	margin-left:15px; /* IE doubles the given value above - why? */
	}

/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html  div#listmenu_footer ul li ul {
	border-top:1px solid #069;
	border-left:0px; /* stops the drop inheriting the ul border */
	}

/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */
* html  div#listmenu_footer ul li ul li ul { 
  left:9.85em; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  left:10em;
  } 
/* and the "be nice to Opera" rule */
html>body div#listmenu_footer ul li ul li ul {
  left:10em;
} 


/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
/* the pop-out menu stays open for 22px below the bottom but at least it works */
	@media all and (min-width: 0px){
   body div#listmenu_footer ul li ul {padding-bottom:100px;}
   body div#listmenu_footer ul li ul li ul {padding-bottom:22px;}
   ul li ul li ul li ul li:hover {visibility:visible;}
 /* same effect as display:block in this situation */

   }
/*end Opera hack */
/* END OF HACK ZONE */
/* the drop-down ends here */
/* END OF LIST-BASED MENU */

/* taken from snergs_3a1_new_col.css - a padding number caused the image to overlap
the text to the image's right */ 

img {float:left; margin:0 4px 4px 0;padding: 0px;}
.clearthefloats {clear:both;}