body {
        margin:0;
        padding:0;
        border:0;			/* This removes the border around the viewport in old versions of IE */
        width:100%;
        min-width:600px;    /* Minimum width of layout - remove line if not required */
							/* The min-width property does not work in old versions of Internet Explorer */
		font-size:90%;
        background-image:url('../08-images/drawer-sm.jpg'); 
        background-repeat:repeat; 
}
    
a {
	color:#800000; 
	text-decoration:underline; 
}

a:hover {
	color:#FFFF99; 
	background:#663300; 
	text-decoration:none;
}

    h1, h2, h3 {
        margin:.8em 0 .2em 0;
        padding:0;
    }
    p {
        margin:.4em 0 .8em 0;
        padding:0;
    }
	/* Header styles */
    #header {
        clear:both;
        float:left;
        width:100%;
        height:150px; 
    }
	#header {
	}
	#header p,
	#header h1,
	#header h2 {
	    padding:0px 14px 0 10px;
        margin:0;
	}
	#header ul {
	    clear:left;
	    float:left;
	    width:100%;
	    list-style:none;
	    margin:10px 0 0 0;
	    padding:0;
	}
	#header ul li {
	    display:inline;
	    list-style:none;
	    margin:0;
	    padding:0;
	}
	#header ul li a {
	    display:block;
	    float:left;
	    margin:0 0 0 1px;
	    padding:3px 10px;
	    text-align:center;
	    background:#eee;
	    color:#000;
	    text-decoration:none;
	    position:relative;
	    left:15px;
		line-height:1.3em;
	}
	#header ul li a:hover {
	    background:#369;
		color:#fff;
	}
	#header ul li a.active,
	#header ul li a.active:hover {
	    color:#fff;
	    background:#000;
	    font-weight:bold;
	}
	#header ul li a span {
	    display:block;
	}

	/* 'widths' sub menu */
	#layoutdims {
		clear:both;
		background:#eee;
		border-top:4px solid #000;
		margin:0;
		padding:6px 15px !important;
		text-align:right;
	}
	/* column container */
	.colmask {
		position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	    clear:both;
	    float:left;
        width:100%;			/* width of whole page */
		overflow:hidden;	/* This chops off any overhanging divs */
	}
	/* 2 column left menu settings */
	.leftmenu {

	}
    .leftmenu .colright {
        float:left;
        width:200%;
		position:relative;
		left:200px;

    }
    .leftmenu .col1wrap {
	    float:right;
	    width:50%;
	    position:relative;
	    right:200px;
	    padding-bottom:1em;

	}

	/* left MARGIN is the right-column distance from LEFT edge... */	
	.leftmenu .col1 {
        margin:0 20px 0 260px;
	    position:relative;
	    right:100%;
	    overflow:hidden;
		border:10px #3D0504 groove;
		background-color:#FFFF99;
		max-width:700px; 
	}

	/* RIGHT setting is the number of pixels the LEFT column gets bumped to the left... */	
    .leftmenu .col2 {
        float:left;
        position:relative;
        right:235px;
    }

	.leftmenu .col1 img {
	margin: 30px 27px 10px 17px;  
	position:relative; 
    }
    
	.leftmenu .col1 .arrow {
	margin: 0px 0px 0px 0px; 
    }
    
 	/* PIC FIX FOR IE6 START... */	
   
.sidebar{
	z-index:1000; 
	float: right;
	border:1px blue solid; 
}

 	/* PIC FIX FOR IE6 END... */	

	
	/* Footer styles */
	#footer {
        clear:both;
        float:left;
        width:100%;
		border-top:10px #3D0504 groove;
        height:50px; 
        background-color:#401300; 
    }
    #footer p {
	    text-align:right; 
        padding:10px;
        margin:0;
		font: 12px "Century Gothic";
		font-weight:bold; 
		color:#FFFFCC; 
		margin-right:20px; 
    }

    #footer p a {
	color:#CCFF99;        
    }
    
     #footer p a:hover {
	background:#AB2F32;        
    }
    
body{
	background-color:#316129; 
}

#wrapper{
	background-color:black; 
	border:3px gray dashed; 
	margin: 20px 20px 20px 20px; 
	padding: 20px 20px 20px 0px; 
}

.message{
	color:#663300; 
	font: 13px "Century Gothic";
	line-height:18px; 
	margin-left:25px;
	margin-right: 50px;  
}

.status{
	color:#663300; 
	font: 14px "Century Gothic";
	font-weight:bold; 
	line-height:18px; 
	margin-left:25px;
	margin-right: 50px;  
}

#insetwhite{
	background-color:#FFFFFF; 
	margin:17px 17px 17px 17px; 
	padding-top:2px; 
	padding-bottom:5px; 
}
#insetwhite img{
	border:1px black solid; 
}

.smallmessage{
	color:#000000; 
	font: 12px "Century Gothic";
	margin-left:25px;
	margin-right: 50px;  
}

h1{
	color:black; 
	font: bold 28px "Century Gothic";
	margin-left:25px;
}

h2{
	color:#663300;  
	font: bold 22px "Century Gothic";
	margin-left:25px;
}

h3{
	color:#663300; 
	font: bold 16px "Century Gothic";
	margin-left:45px;
}

 	           /* similar to H3, but not as indented, for ragtime-primer page, etc. */	
.specialsub{
    margin:.8em 0 .4em 0;
    padding:0;
	color:#333333;  
	font: bold 16px "Century Gothic";
}

h4{
	color:#663300; 
	font: bold 14px "Century Gothic";
	margin-left:85px;
}

h4 a {
color:#316129; 
text-decoration:underline; 
}

h4 a:hover {
	background:#AB2F32; 
}

li{
	font: 13px "Century Gothic";
	margin-left:25px;
	margin-right:50px; 
	margin-bottom:5px; 
}

li a {
color:#800000; 
text-decoration:underline; 
}

li a:hover {
	background:#663300; 
}


.foliotunes li{
	color:#316129; 
	font: 13px "Century Gothic";
	font-style:italic; 
	margin-left:75px;
	margin-right: 50px; 
}

.imagebump
    {
	border:10px #3D0504 groove; 
    margin-left:16px; 
    margin-top:16px;
    margin-bottom:0px;
    }
    
.quote{
	font: 15px "Century Gothic";
	font-style:italic; 
	color:#800000; 
	margin-left:25px;
	margin-bottom:0px; 
	margin-right: 50px;  

}

.quoteby{
	margin-left:45px;
	font: 10px "Century Gothic";
	color:#000000; 
	padding-bottom:25px; 
}

#foliopic{
	float:right; 
	margin-right:100px; 
}

.jimscomments{
	font-family:"Times New Roman", Times, serif; 
	font-weight:bold; 
	color:#3333CC; 
	background:#CCFFFF;
	margin-top:50px;  
	margin-left: 85px; 
	margin-right:85px; 
}

.ie6spacefix{
	margin: 0px 0px 120px 0px; 	
}

.ie6spacefix2{
	margin: 0px 0px 250px 0px; 	
}

.compdata{
	color:#663300; 
	font: 13px "Century Gothic";
	margin-left:25px;
	margin-right: 50px;  
}

.compdata a{
	color:#663300; 
}

.compdata a:hover{
	color:#FFFF99; 
	background-color:maroon; 
}


.comptitle{
	font-weight:bold; 
	font-style:italic;
	background-color:#FFCC66; 
	padding-left:5px; 
	padding-right:5px; 
}

.sortmessage{
	color:#663300; 
	font: 13px "Century Gothic";
	font-style:italic; 
	margin-left:25px;
	margin-right: 50px; 
	margin-bottom:10px; 
	padding-bottom:15px; 
	border-bottom:3px maroon dotted;  
}

.sortmessage a{
	color:#663300; 
}

.sortmessage a:hover{
	color:#FFFF99; 
	background-color:maroon; 
}

/* Table Stuff */

table {
	width:93%; 
	margin-left: auto; 
	margin-right:auto;  
	font-family: "Century Gothic";
	border-collapse: collapse;
	text-align: left;
}

tbody {
	background:#FFFFFF; 
}

th {
	border-bottom: 4px solid #fff;
	border-left: 1px dotted #fff;
	vertical-align: top;
	padding: 10px;
}

tbody td {
	border-bottom: 4px solid #FFCC66;
	border-left: 1px dotted #fff;
	padding: 7px;
	vertical-align: middle;
}

td img{
margin-left:25px; 
	}
	
/* Note I'm using DIVs for each sheet because the images weren't showing properly in IE6 */
/* If a solution is found, I'd like to transition these to simple styled images, no divs. */
#sheet1{ margin-top:20px; margin-left:20px; background-image:url('../08-images/RagtimeCompositionsVolume_1.jpg'); 
	background-repeat:no-repeat; height:275px; width:220px; }
#sheet2{ margin-top:20px; margin-left:20px; background-image:url('../08-images/RagtimeCompositionsVolume_2.jpg'); 
	background-repeat:no-repeat; height:275px; }
#sheet3{ margin-top:20px; margin-left:20px; background-image:url('../08-images/RagtimeCompositionsVolume_3.jpg'); 
	background-repeat:no-repeat; height:275px; }
#sheet4{ margin-top:20px; margin-left:20px; background-image:url('../08-images/Cover_BabeOfTheMountains_small.jpg'); 
	background-repeat:no-repeat; height:275px; }
#sheet5{ margin-top:20px; margin-left:20px; background-image:url('../08-images/Cover_Cynthia_small.jpg'); 
	background-repeat:no-repeat; height:275px; }
#sheet6{ margin-top:20px; margin-left:20px; background-image:url('../08-images/Cover_TheDiamonds_small.jpg'); 
	background-repeat:no-repeat; height:275px; }
#sheet7{ margin-top:20px; margin-left:20px; background-image:url('../08-images/Cover_Discovery_small.jpg'); 
	background-repeat:no-repeat; height:275px; }
#sheet8{ margin-top:20px; margin-left:20px; background-image:url('../08-images/Cover_ForTeresa_small.jpg'); 
	background-repeat:no-repeat; height:275px; }
#sheet9{ margin-top:20px; margin-left:20px; background-image:url('../08-images/Cover_Introduction_NewOrleansStreets_small.jpg'); 
	background-repeat:no-repeat; height:275px; }
#sheet10{ margin-top:20px; margin-left:20px; background-image:url('../08-images/Cover_MarianasWaltz_small.jpg'); 
	background-repeat:no-repeat; height:275px; }
#sheet11{ margin-top:20px; margin-left:20px; background-image:url('../08-images/Cover_NancysLibrary_small.jpg'); 
	background-repeat:no-repeat; height:275px; }
#sheet12{ margin-top:20px; margin-left:20px; background-image:url('../08-images/Cover_Catherine_small.jpg'); 
	background-repeat:no-repeat; height:275px; }
#sheet13{ margin-top:20px; margin-left:20px; background-image:url('../08-images/Cover_Revery.jpg'); 
	background-repeat:no-repeat; height:275px; }
#sheet14{ margin-top:20px; margin-left:20px; background-image:url('../08-images/Cover_Wendy.jpg'); 
	background-repeat:no-repeat; height:275px; }

#print1{ margin-top:20px; margin-left:20px; background-image:url('../08-images/prints-presentation.jpg'); 
	background-repeat:no-repeat; height:275px; width:220px; }
#print2{ margin-top:20px; margin-left:20px; background-image:url('../08-images/prints-hillbillycommunity.jpg'); 
	background-repeat:no-repeat; height:275px; width:220px; }
#print3{ margin-top:20px; margin-left:20px; background-image:url('../08-images/prints-celticharmonium.jpg'); 
	background-repeat:no-repeat; height:275px; width:220px; }
#print4{ margin-top:20px; margin-left:20px; background-image:url('../08-images/prints-dreamsceneneartroy.jpg'); 
	background-repeat:no-repeat; height:275px; width:220px; }
#print5{ margin-top:20px; margin-left:20px; background-image:url('../08-images/prints-roughlyrical.jpg'); 
	background-repeat:no-repeat; height:275px; width:220px; }

.price{
	margin-left:25px; 
}

.leftmenu .col1 .specialpic img {
    display:block; 
	border:10px #3D0504 groove;
	margin-top:25px; 
    margin-right: 110px;
    margin-bottom:10px; }
    
.paypalbutton {
	text-align:center; 
}

/* Menu container */
.menu	{
	width:200px;
	border:10px #3D0504 groove;
	padding:10px 5px 10px 5px;
	margin:0px 12px 12px 50px;
	background-color:#FFFF99; 
	}

/* Menu styles */
.menu ul
	{
	margin:0px;
	margin-bottom:6px; 
	padding:0px;
	}
.menu li
	{
	margin:0px 0px 0px 5px;
	padding:0px;
	list-style-type:none;
	text-align:left;
	font-family: "Century Gothic";
	font-size:13px;
	font-weight:normal;
	}

/* Submenu styles */
.menu ul ul 
	{ background-color:#FFFF99; }
.menu li li
	{ margin:0px 0px 0px 16px; 
	font-size:95%; 
	
	}

/* Symbol styles */
.menu .symbol-item,
.menu .symbol-open,
.menu .symbol-close
	{
	float:left;
	margin-top:2px; 
	margin-right:3px; 
	background-position:left center;
	background-repeat:no-repeat;
	}
.menu .symbol-item  { background-image:url(08-images/icons/page.png); }
.menu .symbol-open  { background-image:url(08-images/icons/minus-folder-open.png); }
.menu .symbol-close { background-image:url(08-images/icons/plus-folder-closed.png);}

/* Menu line styles */
.menu li.open  { font-weight:bold; }
.menu li.close { font-weight:normal; }

.menu .navpic{
	margin-left:8px; 
	margin-top:8px; 
}

/* PHOTOS */
.caption{
	margin-top:15px; 
	margin-bottom:0px; 
	padding-bottom:0px; 
	height:10px; 
	font-family:"Century Gothic";
	font-style:italic; 
	font-size:85%; 
	margin-left:25px; 
}

.nospace{
	margin-bottom:0px; 
	padding-bottom:0px; 
	height:10px; 
	font-family:"Century Gothic";
	margin-left:25px; 
}

/* POETRY */
.poemtitle{
	font: 20px "Century Gothic";
	font-weight:bold; 
	color:#663300; 
	margin-left:50px;
	margin-bottom:0px;
	border-top:thin maroon dotted; 
	padding-top:10px; 
	margin-top:15px; 
}
.poempub{
	font: 11px "Century Gothic";
	color:#663300; 
	margin-left:50px;	
	margin-bottom:25px; 
}
.poetrymag{
	font-style:italic; 
}
.poemtext{
	font: 14px "Century Gothic";
	line-height:16px; 
	color:#663300; 
	margin-left:50px; 
	margin-bottom:0px; 
	margin-top:0px; 
	margin-right:50px; 
}
.poemby{
	font: 12px "Century Gothic";
	color:#663300; 
	margin-top:45px; 
	margin-left:50px;	
}
.poemnext{
	font: 14px "Century Gothic";
	color:#663300; 
	margin-left:50px;	
	border-bottom:thin maroon dotted; 
	padding-bottom:10px; 
	margin-bottom:15px; 
}