/*----------------------------------
	main.css For Template01/Style04
------------------------------------*/

/************************************************/
/* Initialize and zero tags                     */
/* Note:html font set 125% and body 50%,        */
/*      so Body can use	ems settings that relate */
/*      to point size.                          */
/*      like 1em = 10pt, 1.2em = 12pt           */
/***********************************************/ 
/* basic zeroing of selectors */
* {margin:0; padding:0;}

html{
	font-size:125%;
}
body{
	font-size:50%;
}


/************************************************/
/* Set defaults for html tags                   */
/************************************************/

p{
	margin: 0px 0px 20px 0px;
	font-size:1em;
	line-height: 120%;
}

h1{
	font-size: 1.4em;
	margin-bottom: .5em;
}

h2{
	font-size: 1.2em;
	margin-bottom: 0.25em;
}

h3{
	font-size: 1.1em;
}

h4{
 	font-size: 1em;
}

h5{
 	font-size: 0.9em;
}

h6{
 	font-size: 0.8em;
}

ul{
 	list-style-type: round;
}

ul ul{
 	list-style-type: circle;
}

ul ul ul{
 	list-style-type: none;
}

img {
	display: inline;
	margin: 7px;
	padding: 0px;
	border: 0px;
}

a {
	text-decoration: underline;
}


/* hr styled to work in IE and FireFox */
hr {
	margin-top: 1em;
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #CCCCCC;
	border-left: none;
}


/*************************/
/*    Layout Divs        */
/*************************/
#container {
/*	The container is 880px wide if you want it to have a background that shows slightly around the other items.
	They are all set as 860 wide and set to center horizontally.
	If the container is to be flush up against the other items, then set it's width to 860 also.
*/
	margin: 0px auto 0px auto;
	padding: 0px;
	width: 860px;
	/* border: 1px solid #000000; */
}

#containerTop {
/*	If design has no containerTop then set display:none; and comment out the other properties*/
	display:none;
	/*
	margin: 10px auto 0px auto;
	padding: 0px;
	width: 860px;
	*/
}

#containerBottom {
/*	If design has no containerBottom then set display:none; and comment out the other properties*/
	display:none;
	/*
	margin: 0px auto 0px auto;
	padding: 0px;
	*/
}

/*************************/
/*    Header Styles      */
/*************************/
#header {
/* 	if there is no header in this style, then set display:none; and it will close up and not display */
	margin: 0px auto;
	padding: 0px;
	height: 20px;
	text-align: right;
	width: 860px;
}


#name {
/* 	If the name is in the header background photo, then even
	if it is in the xml content, you can hide it in this tag. set display:none; and it will close up and not display.
	Do not set line-height to 0px; it will cause IE to put a gap before the mainMenu div.
*/
	display:none;
	padding: 50px 50px 0px 0px;
	margin: 0px;
}

/*************************/
/*    Menu Styles        */
/*************************/
#mainMenu {
/*	This limits the width of the horizontal menu navigation.
	Set to full 860px width and it give horizontal menu.
	It can be set to less than the width all the menu items	so that the menu items wrap and make a grid instead of a horizontal menu bar.
	Set it to less than two menu items and it forces them to wrap to a single column vertical menu bar.
	Leave the width unset and it expands to a horizontal bar that will wrap with the page size.
*/
	margin: 0px auto;
	width: 860px;
}

.menuBox {
	height:25px; 			 /* set height for horizontal menu bar little higher than menu items*/
}
#mainMenu ul {
	padding: 0px;
	margin: 0px 0px 0px 120px;  /* start menu at position 120px */
}
#mainMenu ul li {
	display:inline;
	text-align: center;
	float: left;  /* if you don't use float, the inline display will not set the width of each item */
	width: 80px;
	height: 20px;
	margin: 2px 0px 0px 0px;
	padding: 0px;
	/*background-color:#3333CC;*/ /*don't set this here, let the menuMouseOut set it for each individual menu item */
	/*border: thin solid #000000;*/
}
#mainMenu ul li a {
/*	Here you can change the font size and face of the text for the menu items.
	If you change the color tag, it will change the color of the seperator characters which could be a pipe | . 
*/
	text-decoration: none;
	margin: 0px;
	padding: 0px;
}


/*************************/
/* Body Container Styles */
/*************************/
#bodyContainer {
/*	You can change the font here. This will change the font for the left panel and the body panel.
*/
	position: relative;
	float: none;
	margin: 0 auto;
	padding: 0px;
	width: 860px;
}

#bodyTop {
/*If design has no bodyTop then set display:none; and comment out the other properties*/
	display:none;
	/*
	position: relative;
	float: left;
	left: 10px;
	margin: 10px auto 0px auto;
	padding: 0px;
	width: 880px;
	height: 14px;
	*/
}

#bodyBottom {
/*If design has no bodyBottom then set display:none; and comment out the other properties*/
	display:none;
	/*
	position: relative;
	float: left;
	margin: 0px auto 0px auto;
	padding: 0px;
	width: 900px;
	height: 0px;
	*/
}

/*************************/
/*   Fixed Panel Styles  */
/*************************/
#fixedPanel {
/*	The font for this fixed panel is inherited from the #body id. However if you want to have a different color or font
	text here, you may add the color or font tags.
	Also fixedPanel should have a height set even if contentPanel does not. This will be minimum height if there is 
	no main photo to force a height.
*/
	float: left;
	margin-left: -6px;
	margin-top: -6px;
	padding: 0px;	/* 0px to close up to left and top - 5px; */
	width: 350px;
	height: 475px;
}

#fixedPanelPhoto {
/*	If template has this div, then this places the main photo in the bottom left of the fixed panel.
	The photo will need to be sized accordingly.
*/	
	float: left;
	padding: 0px;
	margin: 0px;   /* 0px to close it up - 30px 0px 0px; */
}

/*	fpcontentItem is the class for content
	for paragraphs in fixed panel area.
*/
.fpcontentItem {
	margin: 0px 0px 0px auto;
	padding: 0px 10px 0px 10px;
}

/* use this to set tables in content panel to have
   special borders instead of the windows default.
   e.g. is for single solid line*/
.fpcontentItem table{
	border-collapse: collapse;
	border-style: solid;
}
.fpcontentItem table td{
	padding: 3px;
}
.fpcontentItem ul, ol{
	padding-left:3em;
	margin-left:0;
}

/*************************/
/*     Content Styles    */
/*************************/

#contentPanel {
/*	The font for this content panel is inherited from the #body id. However if you want to have
	a different color or font text here, you may add the color or font tags.
	
	To allow contentPanel to grow with height of text:
	  	Remove contentPanel height and overflow.
	  	Set the .prop class to height large enough to be taller than fixedPanel.
		Remove tags from .clearContentItem
		
	To have fixed contentPanel with scrolling text:
		Set contentPanel height large enough to be taller than fixedPanel. 
		Set overflow-y: auto; will put vertical scrollbars in the contentPanel if needed by amount of text. 
		Set .prop height:1px; so that it does not interfere with contentPanel height.
		Set the same tags in .clearContentItem as we use for .clearIt
*/
	float: right;
	margin: 0px 0px 0px auto;
	padding: 10px;		
	width: 	465px; 		/*605px; if too wide it drops below fixed panel */
	overflow-y: auto;
	overflow-x: none;	/* eliminate horiz scroll in IE */
	height: 458px;
}

#contentPanelPF {
/*	This controls the Printer Friendly verson of the page that just displays the contentPanel only */
	width: 530px; 
	background-color: #FFFFFF; 
	margin-left: auto; 
	margin-right: auto; 
	padding: 10px;
}

#contentPanel h1{
	text-align: center;
}

#contentPanel ul, ol{
	padding-left:3em;
	margin-left:0;
}

/* use this to set tables in content panel to have
   special borders instead of the windows default.
   e.g. is for single solid line
#contentPanel table{
	border-collapse: collapse;
	border-style: solid;
}
*/

/* .prop is used to prop up the height of the content panel with a 1px wide div that floats on the right.
	This is used to force a minimum height since min-height with doesn't work in IE.
	To allow contentPanel to grow with height of text:
	  	Set the .prop class to height large enough to be taller than fixedPanel.
	To have fixed contentPanel with scrolling text:
		Set .prop height:1px; so that it does not interfere with contentPanel height.*/
.prop {
	height: 1px; /*350px;*/
	width:1px;
	float:right;
}

.clearContentItem {
/* 	For Content to expand do not set any clear tags here.
	For Content to scroll, set standard clear tags here.
*/
	display: block;
	clear: both;
}

.contentItem{
	width:99%;
	float:right;
	padding: 0px;
	margin: 0px;
}

.contentImage{
	float:left;
}

.musicImage{
	float: left;
	width: 75px;
}

.musicText{
	float:right;
	width: 450px; /*480px;  if too wide it overlaps music image*/
}

.musicEntry{
	margin-left: 10px;
	margin-right: 50px;
	margin-bottom: 10px;
	padding: 2px 5px;
	font-size: 90%;
}

#purchaseLink {
	margin-left: 100px;
	font-size: 90%;
}

#galleryViewer {
	margin: 20px 0px 0px;
	padding: 0px;
}

#galleryViewerContent {
	text-align: center;
	margin: 20px 50px 50px;
	padding: 20px;
}

#galleryViewerContent img {
	display:inline;		/* must override the default img setting of display:block in order to center */
	text-align:center;
}

.clearIt {
	display: block;
	clear: both;
}

/*************************/
/*   Footer Styles       */
/*************************/
#footer {
	clear: both;
	margin: 0px auto;
	padding: 0px;
	width: 860px;
	height: 20px;
	text-align: right;
}

#footerContent {
/*	You can change the font or color of the footerContent text by modifying those tags here.
*/
	margin: 0px;
	padding: 5px 10px 0px 0px;
}

.designedBy  a {
	text-decoration: none;
}