/* Styles for Old World Folk Band
 * (c) 2006 Redwing DesignWorks
 *     Design date November 2002
 *     Update to CSS March 2006
 * 
 * PALETTE
 *

 ********** NOTES ON TEXT SIZING *****************
 *
 * text size breakover points: 60, 69, 76, 86, 93
 * (IEPC and MozPC display 86 and 93 a tad larger 
 *     than IEmac, MozMac, and Opera)
 * -- Owen Briggs, www.thenoodleincident.com
 */


/***************** CREATE SOME STRUCTURES AND DEFAULTS **************/


body {	background: url(../images/parchment-fiddler7.gif) top center #fed; 
	color: #300;
	line-height: 1.3; 
	margin:0; padding:0;
	font-family: Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
	font-size: small;
	width: 100%;       /* give IE a basis for subsequent widths. */

	/*                     ** Tantek Çelik hack    */
	font-size: medium;     /* Special value for IE */
	voice-family: "\"}\""; 
	voice-family:inherit;
	font-size: small;      /* Value for compliant browsers  */	
	}
 

html>body {                    /* Be nice to Opera: set the value */
	font-size: small;      /* explicitly but hide from IE.    */
	} 



h1, h2, h3, h4, ul, li, p { margin:0; padding:0; }

h2, h3, h4 {padding-top: 0.5em;}

p {padding-bottom: 1em;}

img { font-size: 76%; }

a img {border:0;}

#shortpage { height: 250px; }

.clearleft { clear:left; }

.printonly { display:none; }



/* ############################# PAGE STRUCTURE ################ */

#clarinet {
	height: 800px;
	width: 95px;
	background: url(../images/bigclarinet.gif) top left no-repeat transparent;
	position: absolute;
	padding-top: 3em;
	margin-top: 60px;  /* position it just below the band's name */
	}

#canvas {
	background: transparent;
	color: #300;
	width: 635px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 80px;
	position: relative;
	padding-top: 3em;   /* make room for navigation */
	}

#content {
	background: url(../images/parchment2.gif) top center transparent;
	padding-left: 100px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 50px;
	}

/* :::::::::::::::::::::::: GRAPHICAL HOME PAGE ONLY ::::::::::: */

#canvas.homepage { width: 700px; }

#content.homepage { padding-left:0px; }   /* no clarinet */

#homepage-images {
	position: relative;
	height: 410px; 
	}

#homepage-images #leftmargin {
	position: absolute; 
	top: 0; 
	left: 50px;
	}




/* ################################# HEADER #################### */

#header {
	background: url(../images/bandname.gif) top left no-repeat transparent;
	height: 55px;
	}

#header h1,
#header p  {
	position: absolute;
	width: 500px;
	left: -1000px;    /* shift titles offscreen for visual browsers */
	}

#header.homepage {
	background: transparent;
	height: 0px;
	}

/* ############################### NAVIGATION ################## */

#navmenu { 
	position: absolute;
	top:0.5em;
	padding-bottom: 0px; 
	padding-left: 0px;
	padding-top: 0px;
	font-size: 93%;
	width: 600px;
	}


#navmenu.homepage { padding-left:60px; display:block; }

#bottom-navmenu {
	padding-top: 0.5em;
	border-top: double 3px #300;
	font-size: 86%;
	} 

#navmenu .skipnav, 
#bottom-navmenu .skipnav {
	position: absolute;
	width: 500px;
	left: -1000px;
	}

#navmenu a {color: #009;}	
#navmenu a:visited {color: #606;}	


/* ################################ CONTENT #################### */

#content h2 { 
	font-size: 200%; 
	margin-top: 0.1em;
	margin-bottom: 0.3em;
	}

#content .lineabove {
	border-top: solid 1px #300;
	padding-top: 5px;
	margin-top: 10px;
	}

#content h3 { 
	font-size: 135%; 
	}



#content p {padding-right: 2em;}

#content .fineprint { font-size: 76%; }
#content .more { font-size: 86%; }

#content ul {
	margin-left: 15px;
	padding-left: 20px;
	list-style: square;
	padding-bottom: 1em;
	}

#content ul li { padding-bottom: 0.0em; }

#content ul li p { padding-bottom: 0em; }

#content .intro {
	padding-top: 0.5em;
	padding-bottom: 0.8em;
	font-size: 115%;
	font-weight: bold;
	}

#content .quotesource {
	font-size: 86%;
	font-style: italic;
	}

#content .jumpback {
	font-size: 86%;
	margin-top: 0.7em;
	margin-bottom: 0.7em;
	}


#content a {color: #009;}	
#content a:visited {color: #606;}	


/* ............................. VENUES PAGE ................... */

#content .smaller { font-size: 93%; }

#content ul.venuelist li { padding-bottom: 0.3em; }


/* ........................... RECORDINGS PAGE ................. */

#content .album-year { font-weight: normal; font-size: 76%; }
#content .album-data { font-style: italic; font-size: 86%; }


#content .album-graphic {
	width: 130px;
	vertical-align: top;
	text-align: center;
	float: left;
	}

#content .album-graphic p { padding-right:0; }

#content .album-tracks {
	padding-left: 130px;
	border: solid 0px green;
	}

#content .review {
	margin-left: 15px;
	padding-left: 100px; 
	background: url(../images/review.gif) top left no-repeat transparent;
	}


/* ........................... PHOTO ALBUM PAGE ................ */

.photo-left { text-align: left; }

.photo-left img {
	float: left; 
	padding-right: 15px;
	}


.photo-right { text-align: right; }

.photo-right img {
	float: right; 
	padding-left: 15px;
	}


/* .............................. FOOTER ....................... */

#content #footer {
	margin-top: 0em;
	padding-top: 1em;
	border-top: double 3px #300;
	}

#content #footer p {
	padding-bottom: 0.5em;
	font-size: 86%;
	color: #300;
	}

#content #footer.homepage p {
	font-size:  76%;
	}

#content #footer a {
	font-weight: bold;
	text-decoration: none;
	color: #300;
	}

#content #footer a:hover {
	text-decoration: underline;
	}
