/* Kaleponi Default Style Jan, 2011 
Version viii

No more picture strip, just didn't dig it.

Added a bit of graphic flair with a Wingert & Lei pic in the upper right.

*/

/* This file based on 'Zen Garden' by Dave Shea */


/* basic elements */
html {
	margin: 0;
	padding: 0;
	}
body { 
	/*min-width: 900px;*/
	font: 75% georgia, sans-serif;
	line-height: 1.88889;
	color: #330000  ; 
	background-color: #f5ebcd;
	margin: 0; 
	padding: 0;
	}
p { 
	margin-top: 0; 
	text-align: left;
	}
h3 { 
	font: italic normal 1.4em georgia, sans-serif;
	letter-spacing: 1px; 
	margin-bottom: 0; 
	color: #7D775C;
	}
	
h4 {
	padding: .3em, 0 0 1em;
	margin:0;
	font-size:1.2em;
	text-align:left;
	font-weight:bold;
	}
	
h5 {
	padding: 1em, 0 0 1em;
	margin:0;
	font-size:1em	;
	text-align:left;
	font-style:italic;
	color:gray;
	}
	
a:link, a:visited { 
	text-decoration: underline; 
	color: #555753;
	}


/* specific divs */
#container { 
	padding: 0 175px 10px 90px;  
	margin: 0; 
	position: relative;
	}


/* My pageheader is a big box that makes it easier to place the top elements */
#pageheader {
	padding: 0 0 0 30px;
}

/* We'll "containerize" things a bit, with a div on the left and one to the right of it, then put headings inside the boxes */

#headleft h1 {
		padding: 0;
		margin: 0;
		font-weight: bold;
		font-size: 72px;
		/*font-size:600%;
		
		*/
		line-height: 80%;
}

#headleft h2 {
	font-size: 210%;
	/**/
	font-size: 25px;
	padding-left: 5px;
	padding-bottom: 0;
	margin-bottom: 0;
	}

#headleft {
	margin: 0;
	padding: 0;
	text-align: left;
	float: left;
}

/* headright is no longer actually right, it's just to the right of headleft */
#headright h3 {
	line-height: 120%;
	padding-left: 72px;
	padding-top: 64px;
	text-align: right;
	
}
#headright {
	margin: 0;
	padding: 0;
	float: left;
}
/* Our menu is a bar under the heading */

div.mmenu {
clear: left;
padding-top: 20px;
font-family:font-family:"Times New Roman", Times, serif;
text-align:center;
}

a.nav, a.nav:link, a.nav:visited 
{display:block;  width:100px; height:25px;background:#fff; color:#555753; border:1px solid #555753; margin:0px 3px 0px 3px; text-align:center; text-decoration:none; font-size:1em; letter-spacing: 1px; font-weight:bold; line-height:25px; overflow:hidden;float:left
} 
a.nav:hover 
{
color:#fff; background:#555753;
}
a.nav:active 
{
color:#fff; background:#c00;
}

a.current
{
display:block;  width:100px; height:25px; background:#bdbdbd; color:#555753; border:1px solid #555753; margin:0px 3px 0px 3px; text-align:center; text-decoration:none; font-size:1em; letter-spacing: 1px; font-weight:bold; line-height:25px; overflow:hidden;float:left
}

/* A submenu comes in handy, for instance the news archive is in a series of files by year */
div.smenu1 {
clear:left;

}

.smenu1 a, .smenu1 a:link, .smenu1 a:visited 
{ margin:0px 8px 0px 2px;  padding: 0 6px 2px 6px; font-size:large; font-decoration: underline; font-style: italic; text-align:center; overflow:hidden;float:left 
} 
.smenu1 a:hover 
{
color:#fff; background:#555753;
}
.smenu1 a:active 
{
color:#fff; background:#c00;
}

/* A front page only section for commentary. */
#bio{
	clear:both; 
	margin: 30px 20px 10px 10px; 
	width: 160px; 
	float: left;
	}
#bio p {
	font: small georgia; 
	line-height: 140%;
	text-align:left;
	}

/* Main body of text - used in most pages. This is our fluid element */
#content {
	clear: right; 
	padding: 30px 10px 0 10px;
	}

/* Picture pages - Basically a picture page is a bunch of pics and some text. The pics can get two styles, the text snakes around in static mode. Let's try floating them left and right. Can a <span> contain a float? */	
.pic1 {
	margin: 4px;
	padding: 4px;
	float: left;
}

.pic2 {
	margin: 4px;
	padding: 4px;
	float: right;
}

/* Video page needs a style for the big glob of video, some space after it would be nice. */
p.video {
padding: 0 0 30px 20px;
}

/* Another sidebar, this one is used for offering CDs for sale. It hangs to the right on every page */
#cdsale1 {
/*	background: transparent url(model-e.png) no-repeat -6px -2px; */
	background: url(wingert.png) no-repeat top right;
	z-index: 1;
	padding: 0px 0 0 190px; 
	position: absolute; 
	top: 0; 
	right: 0;
	}
#cdsale2 { 
	width: 150px;
	margin-top: 250px;
	padding: 11px; 
	 
	}
#cdsale2 p {
	font: 11px verdana, sans-serif; 
	text-align: left;
}


#pagefooter {

}

/* Position a picture strip at the bottom of the viewing window. 
The strip is fixed to the bottom of the screen. Their are actually a number of strips and they're randomly selected
with a little php operating on each html file that displays a strip. */

#picstrip {
	background: transparent url(strip1.png) left bottom	no-repeat; 
	position: fixed; 
	bottom: 0;
	right: 0;
	height: 170px;
	width: 100%;
	z-index: 5;
	}