/*-----------------------------------------------------------------------------
Main Style Sheet For the Trouser Rollers website

version:   5.0
author:    pat watt
email:     pat@callipygia600.com
website:   www.callipygia600.com
-----------------------------------------------------------------------------

1/28/08:  I went through and cleaned this up, and deleted common things from the index.css page (for the standard TOC pages)
			Before I started I saved the previous version as main2.css, and the previous index as index2.css
			
1/31/08:  Version 3.0 is the sheet as it was before I made changes for a content page (the log page)

1/31/08:  Version 4.0 is the sheet before I stripped the whitespaces between the attributes and their values to see if that helps Firefox get over it's problem where it doesn't always apply the styles when I first load the Home Page
			
-----------------------------------------------------------------------------
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("../images_new/backgr5.jpg");
	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	{
	background:url("../images_new/banner_bits/home_banner.jpg") no-repeat;
	height:225px;
			}
			
#cruising #banner	{
	margin-top:0.5em;
	background:url("../images_new/banner_bits/cruising_banner1.gif") no-repeat;
	height:182px;
			}

#living #banner	{
	margin-top:0.5em;
	background:url("../images_new/banner_bits/living_banner3.gif") no-repeat;
	height:230px;
		}
			
#attic #banner 	{
	background:url("../images_new/banner_bits/attic_banner1.gif") no-repeat;
	margin-top:0.5em;
	height:183px;
			}
			
#travel #banner 	{
	background:url("../images_new/banner_bits/travel_banner2.gif") no-repeat;
	margin-top:0.5em;
	height:230px;
			}


/* 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:9%;
		}
		
.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 - */
 
#home #tableContents {
	width:20%;
	float:left;
	min-width:150px;
	margin:0;
	}

#home #content	{	/* the middle panel */
	width:53%;
	}
	
#sideColumn	{	/*the stuff on the right side */
	float:right;
	width:24%;
	min-width:170px;
	margin-right:0.3em;
	}
	
#sideColumnContent	{ /*this is all the stuff on the RHS under the Guest book) */
	margin:1.5em 1em 0 -0.5em;
	padding:0.5em 0;
	background-color:#FFFFFF;
	border:1px solid black;
	}

#home #intro	{  /* the Box about the page */
	width:35%;
	margin:0.5em 2em 0 0;
		}
		
#utilitiesHome	{  /* this is for new_utilities.lbi and isnot just the Home Page */
	font-size:0.8em;
	font-weight:normal;
	text-align:center;
	width:98%;
	}
				
#utilitiesHome li {  /* this is for new_utilities.lbi and isnot just the Home Page */
	float:right; 
	list-style-type:none;
	width:auto;
	margin-left:0.5em;
	9margin-right:1em;
	padding-right:1em;
	}
	
#utilitiesHome a 	{ /* this is for new_utilities.lbi and isnot just the Home Page */
	color:#373D47;
	text-decoration:none;
	}

li.search	{ /* this is for new_utilities.lbi and isnot just the Home Page */
	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("../images_new/bullet2.gif");
	padding:0.5em 0.3em 0 1em;
	}

*.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("../images_new/linerain2.gif");
	margin:-1em 3% 0 3%;
	}

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:0;
	margin:0.5em auto 1em 1.3em;
	padding:1em 1em 1.5em 1em;
		}

.guestbook	{
	width:104px;
	height:21px;
	border:0;
	margin:1.2em 4em -0.5em 2em;
		}
		
.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;
	}