/*-----------------------------------------------------------------------------
Main Style Sheet For the Enchantress website

version:   1.0
author:    david simpson
email:     dls@kingswells.biz
website:   www.kingswells.biz
-----------------------------------------------------------------------------

13/2/09:  Initial Version
			
			
-----------------------------------------------------------------------------
Sections:	1 	Troubleshooting
			2	Fundamental page attributes
			3	Banners for 5 main pages
			4	Positioning and Styling of common navigation items (tabs, breadcrumbs, utilities, footer, dated updated)
			5	Layout for the page content
			6	General typography
			7	Borders on elements
			8	Link behavior
			9	Clearing element (will this work in all browsers?)
			10. The lines
			11. The rollup scheme for main page accordians
			12. Image formatting

TODO		A	Sort out the cascade for the a:hover
	
/* 1. Troubleshooting stuff, add/delete the 9 in front of the border rule and put it round problem elements
-----------------------------------------------------------------------------*/
html * {
	9border:1px solid red;
	}
	
/* 2. Fundamental page attributes
-----------------------------------------------------------------------------*/
*	{
	margin:0;
	padding:0;
	}

body {
	margin:1em 1em 1em 3em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:small;
	color:#000033;
	max-width:900px;
	background-color:#313538;
	}

#wrapper	{
	background-image:url('backgr5.gif');
	max-width:800px;
	background-color:#FFFFFF
	}	
	
/* 3. The Banner for the 5 main pages, with text for screen readers - the Phark Image Replacement method
-----------------------------------------------------------------------------*/
#banner {
	position:relative;
	overflow:hidden;
	margin-left:1em;
	text-indent:-5000px;
	z-index:99;
	}
		
#home #banner	{
	margin-top:0.5em;
	background:url('banner1.gif') no-repeat;
	height:225px
			}
#enchantress #banner	{
	margin-top:0.5em;
	background:url('banner2.gif') no-repeat;
	height:225px
			}
#bwr #banner	{
	margin-top:0.5em;
	background:url('banner3.gif') no-repeat;
	height:225px
			}
			
#cruising #banner	{
	margin-top:0.5em;
	background:url('banner.gif') no-repeat;
	height:200px
			}


/* 4. Positioning and Styling of the Common Navigation elements:
	 Row of tabs at the top,  Breadcrumbs, Utilities, Footer, 
 ----------------------------------------------------------------------------   */
	
#breadcrumbs	{
	9float:left;
	text-align:left;
	margin-left:1.6em;
	font-style:italic;
	font-size: 0.8em;
	}
		
.utilities {
	font-size:0.8em;
	font-weight:normal;
	text-align:center;
	width:98%;
	}
				
.utilities li { 
	float:right; 
	list-style-type:none;
	width:11%;
		}
		
.bar  {
		border-right:1px solid #373D47; /* This is for utility and footers */
		}	
		
#footer {
	margin-bottom:1.5em;
	}

#footer ul {
	width:90%; /* trying to center it, maybe a better way? */
	}

#footer li {
	width:9%;
	}

#tabs	{
	text-align:center;
	float:left;
	width:97%;
	margin-top:-2.2em;
	}
				
#tabs li  
	{ 
	float:right; 
	list-style-type:none;
	width:10%;
	}
		
#tabs h3
	{
	border:1px solid #373D47;
	padding:2px 0 0.4em 0;
	background:#D4E4F2;
	font:bold 0.7em Verdana, sans-serif;
	text-align:center;
	}

p.update {
	text-align:center;
	font:italic  0.85em Georgia, serif;
	color:black;
	}

/* 5. Content layout
 
 
 ____________________________________________________________		
 - Home Page Only - */
 

 
 #utilitiesHome	{
	font-size:0.8em;
	font-weight:normal;
	text-align:center;
	width:98%;
	}
				
#utilitiesHome li { 
	float:right; 
	list-style-type:none;
	width:auto;
	margin-left:0.5em;
	9margin-right:1em;
	padding-right:1em;
	}
	
#utilitiesHome a 	{
	color:#373D47;
	text-decoration:none;
	}

li.search	{
	margin-top:-0.5em;
	}

/* End Home Page Only 

___________________________________________
 - Main Pages Only - */
 
#tableContents	{  
	width:35%;
	float:left;
	min-width:200px;
	margin:0;
	}

#content	{	
	float:left;
	width:60%;
	min-width:170px;
	margin:0.9em 0 0 0;
	}
	
#intro	{	/* the Box about the page */
	float:right;
	width:45%;
	text-align:center;
	margin:0.5em -2em 0 0.5em;
	padding: 0.5em;
	font-size:85%;
	background-color:#313538;
	color:#FFFFFF;
	}


/* End Main Pages Only stuff
________________________________
 - Index (TOC) and content Pages -*/
		
#title {
	margin-top:-7em;
	margin-bottom:1.5em;
	}

#explantion	{	/*this is the left side - about the page - */
	width:25%;
	float:left;
	min-width:170px;
	margin:1em 0 0 2em;
	background-color:#FFFFFF;
	border:1px solid black;
	padding:1em;
	}	

.box	{	/* styling for boxes in the content areas */
	margin:0;
	background-color:#FFFFFF;
	border:1px solid black;
	padding:0.8em;
	}
	
#content1	{	/*this is for the middle in a 3-column page */
	float:left;
	width:30%;
	min-width:170px;
	margin:1em 0 0 1.5em;
	}
	

#content2	{	/*this is for the right side in a 3 column page */	
	float:left;
	width:32%;
	min-width:170px;
	margin:1em 0 0 1em;
	}
	
#contentWide	{  /* this is for pages that have a single column for content) */
	float:right;
	width:65%;
	min-width:250px;
	margin-top:1em; 
	
	}
		
/* 6. Other Typography 
	- Home Page only -
------------------------------------------------*/	
#sideColumnContent h4{
	text-indent:3em;
	}

#sideColumnContent p	{
	font-size:0.85em;
	padding:0.5em 0.3em 0 0.6em;
	}
		
#sideColumn blockquote	{
	font:1em bold Georgia serif;
	color:black;
	padding:0.5em;
	font-style:italic;
	}

#home #tableContents li	{
	text-align:left;
	list-style-type:none;
	}
		
#sideColumnContent li, #content li {
	font-size:0.85em;
	list-style-position:inside;
	list-style-image:url('bullet2.gif');
	padding-left:1em; padding-right:0.3em; padding-top:0.5em; padding-bottom:0
	}

*.hitcounter {	
	font: 0.8em bold Verdana, Arial, sans-serif;
	line-height:normal;
	font-weight:bold;
	color: #4A5D59;
	text-align:center;
	margin:1em 0 1em 2.3em;
	border:1px solid black;
	}


/* ------------------------------------------
	Now all the pages
	 - Titles and Headings - */
	
.subtitle	{
	font:italic 0.8em Georgia serif;
	}
	
#title h1	{
	text-align:center;
	color:black;
	font:bold small-caps 1.5em Georgia, serif;
	margin:1em 0 0 2em;
	}
	
#tableContents h1	{
	text-align:center;
	color:#4B5968;
	font:bold 1.2em Georgia, serif;
	padding-top:0.5em;
	}

#tableContents h1 .aside	{
	font:bold italic 0.6em Verdana, Helvetica, sans-serif;
	color:black;
	}
	
h2	{	/*this was on the index.css page */
	font:bold 1em Georgia, serif;
	text-align:left;
		}

#tableContents h2	{
	text-align:center;
	font:bold 0.9em Georgia, serif;
	background-color:#4B5968;
	color:#BED6E3;
	margin:0.5em 0.3em;
	line-height:1.5em;
	}
	
.box h2 	{	/* so far only on writing.htm */
	color:#990000;
	font:bold small-caps 1em Verdana, sans-serif;
	text-align:center;
	}

h3	{	/* the Home page main headlines */
	font:bold 1em Georgia, serif;
	text-align:left;
	color:#990033;
	padding:0.8em 0 0 1.5em;
	}


h4	{
	font:bold 0.9em Georgia, serif;
	text-align:left;
	text-indent:1em;
	}
/* --------------------------
	-  Paragraphs */

p	{	
	padding-left:1.3em;
	font-size:0.9em;
	line-height:125%;
	text-indent:2em;
	padding-bottom:1em;
	} 

#tableContents p	{
	text-align:left;
	padding-left:0;
	text-indent:0;
	margin:0 0 0 1.5em;
	font-weight:bold;
	font-size:0.75em;
	}
	
#tableContents li p	{
	font-size:1em;
	}

p.book	{
	font-size:0.8em;
	}

p.date	{	/* for the log entries */
	font:bold italic 0.85em Georgia, serif;
	color:#990000;
	padding:0;
	text-indent:0;

	}
/* -------------------------------
	- Lists-  */

.index ul, #content ul, #content1 ul, #content2, ul	{
	padding-bottom:0.6em;
	}

ol#help	{	/* on the Search Page */
	margin:1em 0 0 0;
	}
	
ol#help li	{	/* on the Search Page */
	list-style-type:decimal;
	list-style-position:inside;
	padding:1em;
	font-size:0.9em;
	}
	
.box li	{	/* so far on the writing.htm page only */
	line-height:115%;
	}

#tableContents li {	/* main pages  - this is not sticking (?where?) for some reason (#home does it up above) */
	list-style-type:none;
	padding:0.1em 0.5em 0.3em 1em;
	font:bold 0.8em Georgia, serif;
		}

#tableContents li li {
	list-style-type:none;
	padding:0.1em 0.5em 0.3em 1em;
	font:normal 1em Verdana, Helvetic, sans-serif;
		}
	
#content1 li, #content2 li, #contentWide li 	{ /* index (TOC) pages */
	list-style-type:none;
	font-size:0.85em;
	padding:0 0 0.25em 1em;
	}

	
/* had to do the next one to make it stick on the main page buttons, must be the cascade */		
#tableContents h2.rollup-trigger:hover {	
	text-decoration:underline;
	color:#FF0000;
	background-color:#FFFF00;
	}
		
/* 7. borders etc
-----------------------------------------------------------------------------*/
#wrapper, #intro,  #tableContents h2, *.index {
	border-style:outset;
	border-color:#FFF #999 #CCC #FFF;
	border-width:2px 3px 2px 3px;
	}

*.index	{  /* this boxes the Quick Links and TOC rollups separately */
	background-color:#BED6E3;
	margin:1em 0 0 1.5em;
	}

	

/* 8. link behavior 
-----------------------------------------------------------------------------*/	
a:link, a:visited, a:active {
	text-decoration:underline;
	color:#03F;	
	}
	
#tableContents li a:link, #tableContents li a:visited, #tableContents li a:active {
	text-decoration:underline;
	color:#03F;
	display:inline;
	}

.box a:link, .box a:visited, .box a:active 	{
	text-decoration:underline;
	color:#990033;	
	}

#tabs a, .utilities a, #tableContents li a	{
	display:block;
	}

#breadcrumbs a	{
	font-weight:bold;
	text-decoration:underline;
	color:#03F;
	}

#tabs a, .utilities a 	{
	color:#373D47;
	text-decoration:none;
	}

a:hover {
	text-decoration:underline;
	color:#FF0000;
	background-color:#FFFF00;
	}
	
/* Next set: Don't know why we need to repeat with more specificity, must be some cascading effect I don't get */
#tabs a:hover, #tableContents li a:hover	 {
	text-decoration:underline;
	color:#FF0000;
	background-color:#FFFF00;
	}

/* 9. clearing element to go at bottom of floats so they appear in normal flow (I think) 
-----------------------------------------------------------------------------*/
.clear	{
	clear:both;
	line-height:0;
	}

/* 10. The lines
---------------------------------------------------------------------------- */
#linerain	{
	background-image:url('linerain2.gif');
	margin-left:3%; margin-right:3%; margin-top:-1em; margin-bottom:0
	}

hr	{
	margin:0.5em 3%;
	}

hr.top 	{
	margin:-0.5em 3%;
	}
	
/* 11. The rollup scheme for the main pages
---------------------------------------------------------------------------- */
*.rollup-trigger { 
	cursor:pointer;
		}
		
*.hidden  { 
	position:absolute; 
	top:-99999px; 
	left:-99999px;
	width:1px;
	height:1px;
	overflow:hidden; 
		}
/* 12. Image formatting
---------------------------------------------------------------------------- */
.logo	{
	position:relative;
	width:120px;
	height:100px;
	border:0px none;
	margin-left:1.3em; margin-right:auto; margin-top:0.5em; margin-bottom:1em; padding-left:1em; padding-right:1em; padding-top:1em; padding-bottom:1.5em
		}

.guestbook	{
	width:104px;
	height:21px;
	border:0px none;
	margin-left:2em; margin-right:4em; margin-top:1.2em; margin-bottom:-0.5em
		}
		
.feature, .feature1	{
	float:left;
	height:auto;
	border:1px solid black;
	margin:0.5em;
	}
	
.feature:	{	/* on the main pages */
	width:120px;
	}

.feature1	{	/* on the index (TOC) pages */
	width:95px;

	}
	
.campsite	{
	float:right;
	width:120px;
	height:auto;
	border:1px solid black;
	margin:0.5em 0.5em 0 0.5em;
	}