/*
	Yes this layout was inspired by lightbox v2.0's page, the reason being, the layout works really well for a doc 
*/

	
*, html, body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}




div#csscenter {
	position: absolute;   /* positions content on top of distance */
	text-align: left;     /* horizontal centering hack for IE */
	height: 500px;         /* required - desired height */
	width: 800px;          /* required - desired width */
	border: 1px solid #999;
      left: 50%;
      top: 50%;
       margin-left: -400px; /* half of width */
      margin-top: -250px;  /* half of height */
      background-color: #000;
	border: 1px solid #999;
}





body {
	background: #000 url('images/fionabg.jpg');
	font-family: 'Lucida Grande', Verdana, Arial;
	font-size: 12px;
	-webkit-text-size-adjust:none;
	text-align: center;   /* horizontal centering hack for IE */
	padding: 0;           /* required to "hide" distance div */
	margin: 0;            /* required to "hide" distance div */

}


		/*
			Horizontal Accordion
		*/
		



		.horizontal_accordion_toggle {
			/* REQUIRED */
			float: left;	/* This make sure it stays horizontal */
			/* REQUIRED */

			display: block;
			height: 500px;
			width: 20px;
			background: url('images/strip_inactive.gif') #000;
			border-right: 1px solid #444;
			cursor: pointer;
			margin: 0 0 0 0;
		}
		
		.horizontal_accordion_toggle_active {
			background: url('images/strip_active.gif') #000;
			border-right: 1px solid #aaa;
		}
		



		.horizontal_accordion_content {
			/* REQUIRED */
			height: 500px;	/* We need to define a height for the accordion as it stretches the width */
			float: left;	/* This make sure it stays horizontal */
			/* REQUIRED */
			position: relative;
			width: 653px;
			overflow: hidden;
			background-color: #000;
			color: #ccc;
		}
			
			.horizontal_accordion_content p {
				width: 450px;
			}
					
					
    /* Container styling*/
    #horizontal_container {
      margin:  auto;
      width: 800px;   
      height: 500px;    
    }
    


.pagewrapper	{
	width: 613px;
	height: 460px; 
	background: url('images/violin_bg.jpg') top right no-repeat #000;
	padding: 20px;
	}

.box	{
	position: absolute;
	background: url('images/boxstrip_bg.gif') repeat-x top;
	border: 1px solid #444;
	padding: 10px;
	}

.audiobox	{
	position: absolute;
	background: url('images/boxstrip_bg.gif') repeat-x top;
	border: 1px solid #444;
	padding: 7px;
	font-size: 11px;
	}

/* Specifications for container for layers to show/hide.
	 Most browsers need both width and height set. */
#layerholder	{ position:absolute; width:250px; height:365px; left:360px; top:72px; background: black url('images/boxstrip_bg.gif') repeat-x top; border: 1px solid #444; padding: 10px;}
/* Include id's for all your layers here, with commas between. */
#lyr1, #lyr2, #lyr3, #lyr4, #lyr5, #lyr6, #lyr7, #lyr8, #lyr9, #lyr10, #lyr11, #lyr12, #lyr13, #lyr14, #lyr15, #lyr16, #lyr17, #lyr18, #lyr19, #lyr20, #lyr21, #lyr22,	#lyr23, #lyr24, #lyr25, #lyr26, #lyr27, #lyr28, #lyr29, #lyr30, #lyr31, #lyr32, #lyr33, #lyr34 	{ 
	position:absolute; visibility:hidden; z-index:100; padding:0px; width: 240px;}


td.img	{
	padding: 3px;
	}

#albumcovers1	{
	position:absolute; width:320px; height:370px; left:17px; top:70px;
	}

#albumcovers2	{
	position:absolute; width:320px; height:370px; left:17px; top:70px; visibility: hidden;
	}

a	{
	color: #888;
	text-decoration: underline;
	}

a:hover	{
	color: white;
	text-decoration: none;
	}


#audio	{
	width: 250px;
	height: 350px;
	background: url('images/jukebox.jpg') center no-repeat #000;
	position: relative;
	}

#audio_inner	{
	position: absolute;
	top: 155px;
	left: 60px;
	width: 125px;
	}

#audio_text	{
	text-align: center;
	position: absolute;
	top: 214px;
	left: 41px;
	width: 168px;
	color: white;
	line-height: 15px;
	}

#albumcovers1 li, #albumcovers2 li, #gallerypics li {
	float: left; 
	margin-bottom: 5px;
	margin-right: 7px;
	list-style: none;
	padding: 0;
	margin-top: 0px;
}

.clear {
	clear: both;
}

#flashPlayer {
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: url('images/boxstrip_bg.gif') repeat-x top;
	border: 1px solid #444;
	padding: 12px;
}

dd {
	margin-left: 10px;
	margin-bottom: 5px;
}