@import url(/css/sophisto.css);

* { margin: 0px; padding: 0px;}
body { font: 80% Verdana, sans-serif; line-height: 100%; color: #333; background: #fff;}
.thisisbeta { color: #f00; background: #fff; font-size: 120%; }

a { text-decoration: none;}
a img { border: none;}
a:link, a:visited { color: #283; border-bottom: 1px solid #9c9;}
html body a:hover { color: #000; background-color: #fff; border-bottom: 1px solid #a32;}
#masthead a, #navbar a, #main h1 a, .title a:link, .title a:visited { border-bottom-width: 0px;}
#main h1 a:hover, .title a:hover {border-bottom-width: 1px;}

ul, ol {list-style: none; }

#masthead {position: absolute; z-index: 10; top: 2px; left: 2px;}
/* #masthead { border: 1px solid green; } */
#masthead a { display: block; width: 224px; }
#masthead a:hover { background: transparent /* url("/i/CO_Bkg.gif") 0px 0px no-repeat */ ; }

#navbar
{
	height: 2.4em;
	padding: 0px 0px 0px 215px;
	background:  url("/i/leftMenuBkg.gif") 0px 0px repeat-y;
	border-top: 5px solid #093;
	border-bottom: 1px solid #3b6;
	font: 18px Georgia, Times, serif;
	overflow: hidden;
	min-width: 550px;
}

#navbar li
{
	float: left;
	padding: 0px 23px 0px 8px;
	margin-right: 5px;
	background:   url("/i/bulletNavbar.gif") 100% 66% no-repeat;
}
#navbar li a { display: block; padding: 0.75em 0px 0.25em; text-transform: uppercase; color: #060; background-color: #fff;}
#navbar #contact { background: none; padding-right: 5px; }  /* Turn off image 'bullet' after Contact menu */
#navbar a:hover,
  .home #navbar #home a,
  .newsletter #navbar #newsletter a,
  .contact #navbar #contact a
{
	background: url(/i/navbarSelectedLine.gif) top left repeat-x;
	color: #283;
	background-color: #fff;
}

/*#main .column 
{*/
	/* position: relative; */
/*	float: left;
}*/

#main {
    font-size: 0.88em;
    /* width: 750px; */
    background: #fff url("/i/leftMenuBkg.gif") 0px 0px repeat-y;
	/*padding-left: 200px;    /* sidebar col width */
	/* border: 2px solid purple; */
}
#main h1, #main h2, #main h3, #main h4, #main h5
{
	font: bold 120% Georgia, "Times New Roman", Times, serif;
	color: #283;
	background-color: #fff;
	margin: 0.3em 0px;
     /* border: 1px solid blue; */
}
#main h1 { font-size: 170%; }
/* #main subtitle { font-size: 135%; font-weight: lighter; padding-left: 1em; } */
#main h2 { font-size: 125%; }
#main h3 { font-weight: normal; letter-spacing: 2px; text-transform: uppercase; }
#main h1.subtitle { font-size: 135%; font-weight: lighter; padding-left: 1em; }
#main p {text-align: left; line-height: 1.8em; margin: 0px 0px 1em;}

/* img.spacer prevents text from getting hidden under our big masthead image */
img.spacer
{
	float: left; clear: left; margin: 0 5px 0 0; padding: 0;
	visibility: hidden;    /* Comment out to see image slices, coloured green */
}

/* min-height: 375px can be used to make the content always big enough for the sidebar, but it does not work on IE6! */
#content {
	padding: 10px 10px 0px 15px;
	margin-right: 0px;
	/* background-color: #fee;  /* Slight red pinky colour */
}

/* Force MOST of the content of #content to have a right margin of 10px - but NOT all */
#content h1, #content h2, #content h3, #content h4, #content h5, #content p, #content pre, #content table, #content ul, #content ol, #content div.references
{ margin-right: 10px; }
#content hr { visibility: hidden; clear: both; }
/* 
#content { border: 1px dotted red; background-color: #ddd; } 
 */
#content ul, #content ol { padding: 0.2em 0px 0.6em 2em; }
#content ul { list-style:  url("/i/bulletSmallCO.gif") outside none;
              /* border: 1px dotted red; */
			} 
#content ol { list-style: decimal outside none;
              /* border: 1px dotted green; */
			}
#content li { padding-top: 2px; margin: 0.2em 2em; line-height: 130%; }

#content div.references { border: 1px solid #093; padding: 0.75em 1em 0.3em 1em; color: #000; background-color: #cfc; margin: 10px; }
#content div.references * { margin-right: 0px; }
#content div.references h1,
#content div.references h2,
#content div.references h3,
#content div.references h4,
#content div.references h5
{
	color: #832;
	background-color: #feb;
}
#content div.references a:hover { background-color: transparent; }

#content img.displayr { float: right; clear: right; padding: 3px 0px 2em 5px; margin-right: 0px; }

#content div.quote { float: right; clear: right; padding: 0.75em 8px 0px 8px; width: 160px; margin: 0.75em 1.1em 0.5em 1.1em;
                     border: 2px solid #f60; border-right: 0px; border-left: 0px; }
#content div.quote * { margin-right: 0px; }     /* Reset the margins within the quote div. Without this, the margin-right: 200px is inherited from #content */
#content div.quote p {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 170%;
	font-weight: 300;
	letter-spacing: 0px; 
    /* border: 1px solid red; */
	margin-right: 0px; margin-bottom: 0.5em;
	text-align: center;
	line-height: 120%;
}
#content div.quote p.author { color: #666; font-size: 100%; text-align: right; }
					 
#content table.info   { margin: 1em 20px 1em 20px; border: 1px dotted #9c9; }
#content table.info * { margin-right: 0px; }
#content table.info th { color: #832; background-color: #feb; font-size: 110%; padding: 0.4em 0.25em; }
#content table.info td { border-top: 1px dotted #9c9; }
#content table.info td { padding: 0.25em 0.5em; vertical-align: top; }
#content table.info td p { margin-bottom: 0.2em; }

#content div.haiku, #content div.haiku2
{
	display: block; width: 280px;  border: 2px solid #f60; border-right: 0px; border-left: 0px;
	margin: 1em 3em 2em 110px;
    background: url(/i/haikuBg.gif) center center no-repeat;
	padding: 0.25em;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #832;
	font-size: 22px;
	font-weight: lighter;
	font-style: italic;
}
#content div.haiku2 { border-color: #fc6; }
#content div.haiku *, #content div.haiku2 * { margin-right: 0px; }     /* Reset the margins within the haiku. Without this, the margin-right: 200px is inherited from #content */
#content div.haiku p, #content div.haiku2 p  { text-align: center;
					   margin-bottom: 0em;
                       /* border: 1px dotted red; */
					   }

#sidebar {
	width: 200px;
	padding-top: 155px;         /* To clear the big image */
	font-size: 110%;
}
/* #sidebar { border: 2px solid #ddd; } */
#sidebar a { display: block; padding: 0.5em; padding-right: 22px; text-align: right; border-bottom: 0px; font-weight: bold; }
/* Control hover sidebar background, using the id as a class on the body */
#sidebar a:hover
{
	color: #ffcc66;
	background-color: #ff6600;
	background: url(/i/leftMenuBkgReversed.gif) center right repeat-y;
}

/* Control current sidebar background, using the id as a class on the body */
.home #sidebar a#home,
.whoischarley #sidebar a#whoischarley
{
	color: #832;
	background-color: #ffdd77;
	background: url(/i/leftMenuBkgSelected.gif) center right repeat-y;
}
#sidebar p { font-family: Georgia, "Times New Roman", Times, serif; text-align: right;
             padding-right: 22px; padding-top: 0.75em;
			 margin-bottom: 0.1em;  
			 color: #f60; }

#footer
{
	clear: both;
	border: 1px solid #093;
	border-width: 1px 0px;
	margin-bottom: 3em;
	font-size: 80%;
  	background:  url("/i/leftMenuBkg.gif") 0px 50% repeat-y;
}
#footer p { margin-left: 200px; padding: 1em 20px; color: #000; background: #fff;}
#footer a:link, #footer a:visited { border-bottom-width: 0px;}
#footer a:hover { border-bottom-width: 1px;}
#footer .counter { position: relative; left: 750px; top: -2em;  border: 1px solid #3F3; display: none; }
#footer .copyright { padding-left: 30px; padding-top: 3px; padding-bottom: 3px; background: url(/i/bulletCO.gif) 10px 60% no-repeat; }
#footer .sitetest { color: #999; background-color: #fff; background:  url(/i/bulletCO.gif) 10px 60% no-repeat; padding-left: 30px; }

#google { /* border: 1px solid green; */ text-align: center; vertical-align: top; margin: 5px; }

/* For PHP List derivation */
.required { color: #f00; font-weight: bold; }