﻿/**************************************/
/* Web Site: voxFan.com               */
/* Author: David A. Wank, SHD, LLC    */
/* File: layout.css                   */
/* Date:                              */
/**************************************/

/***********************************/
/* Normalization                   */
/***********************************/
h1, h2, h3, h4, h5, h6, p, ul, li
{
padding: 0;
margin: 0;
font-weight: normal;
font-family:Arial, Helvetica, sans-serif;
font-size: 100%;
}

ul, li
{
list-style: none;
}

/***********************************/
/* Layout Styles                   */
/***********************************/
body 
{
	margin: 0, auto;
	padding: 0;
	/* min-width: 1200px;  /* min-width set for netscape 6.0 */ 
	text-align: center;
	/* background-image: url(../images/bkGrad3-j.jpg); */
	background-repeat: repeat-y;    /* centers the entire contents of th body tag for IE5, 6 */
	background-position: center top;
	background-color: #DCDCDC;
	position: relative;
}

#wrapper
{
	width: 960px;
	/* height: 1000px; */
	/* this marign: 0 automatically sets the horizontal margins */
    margin: 0 auto;
	/* text-align is for IE 5.x/6 --> because we set the body
    /* text-align to center, the left property realigns the text
    /* back to the left */ 
    text-align: left;
	background-color: white; 
	background-color: white;
	border-width: 1px 1px 1px 1px;
	border-style: solid;
	border-color: #999999;
	/* apply with text???  padding: 0px 10px 0px 10px; */
}

#branding 
{
   height: 105px;
   position: relative;
   background: url(../images/branding_line_940-960.gif) no-repeat 0 0;
}

#branding h1, h2
{
position: absolute;
top: -9999px;
left: -9999px;
}

/**************************************************/
/* baseline properties of the navigation DIV */
#navigation
{

}

/* moves the h1 and h2 out of range but preserves for non-css */
#navigation h1, h2
{
position: absolute;
top: -9999px;
left: -9999px;
}

/* sets up the ul for the site's main (top) navigation */
ul#mainNav
{
position: relative;
top: -85px;
left: 520px; /* 635px without newlsetter [which is now database]*/
width: 420px;
}

ul#mainNav li
{
display: inline;
/* border-right: solid 1px #990000; */
padding: 0px 8px 0px 4px; 
}

ul#mainNav li#contact {border: none;} 

/* sets up the ul for the site's search navigation */


ul#searchNav
{
position: relative;
top: -55px;
left: 565px; 
width: 330px; 
height: 31px; /* 31 */
background: url(../images/sNavButtons.gif) no-repeat;
z-index: 100;
}

/* properties for the li text items in the search navigation */
ul#searchNav li 
{
color: black;
display: inline;  
position: absolute;
top: 5px;  /* was 7px for original 100% font-size */
font-size: 130%;
}

/* positions the search Navigation ul's text against the button images */
ul#searchNav li#searchBy {left: -120px; font-weight: bold;}
ul#searchNav li#composer {left: 10px;}
ul#searchNav li#title {left: 144px;}
ul#searchNav li#genre {left: 250px;}

/* OLD POSITIONS WITH FONT-SIZE at the default of 100% *?
ul#searchNav li#searchBy {left: -100px; font-weight: bold;}
ul#searchNav li#composer {left: 14px;}
ul#searchNav li#title {left: 148px;}
ul#searchNav li#genre {left: 254px;}
/* */


/* sets the "hit area" of the a:links */
li#searchBy a, li#composer a, li#title a, li#genre a 
{
display: block;
height: 20px;
width: 30px;  /* 300 */
}

/**************************************************/
/* positions the page title graphic */

#pageTitle
{
height: 40px;
color: black;
width: 960px;
background: url(../images/pageTitle.gif) no-repeat;
position: relative;
top: -30px;
}

/* positions the page title text */
#pageTitle h2
{
position: absolute;
color: white;
top: 7px;
left: 32px;
}


/**************************************************/
#sideContent
{
/* background-color: yellow; */
width: 260px;
position: relative;
top: -30px;
float: left;
padding-left: 10px;
padding-top: 8px; /* allows the sideContent (Ads) to line up with the mainContent...*/
/*...because the mainContent header (h3) has an 8px top padding */
}

#sideContentHome
{
/* background-color: blue; */
width: 260px;
position: relative;
top: -30px;
float: left;
padding-left: 10px; /* moves page text to align width footer */
}

/**************************************************/
#mainContent
{
/* background-color: red; */
width: 690px;  
position: relative;
top: -30px;
float: right;
}

#mainContent h3, h4
{
padding: 8px 0px 8px 0px;
font-weight: bold;
}

#mainContent p
{
line-height: 1.5em;
padding-right: 15px;
}

/**************************************************/
#footer
{
    width: 940px;
	height: 88px;
    clear: both;
	padding-bottom: 5px;
	margin-left: 10px;
	position: relative;
	
	/**********************************************/
	/* Commented out for use of image instead     */
	/*
    padding-top: 5px; /* for the text in the DIV 
	margin-left: 10px;
	margin-right: 10px;
	position: relative;
	border-top: 0.5px #006699 solid;
	line-height: 1.3em;
	/**********************************************/
	background:url(../images/footer-round.gif) no-repeat;
	
}   

#footer h5
{
position: absolute;
top: -9999px;
left: -9999px;
}

ul#footerNav
{
position: absolute;
top: 24px;
/* padding-left: 295px; */
padding-left: 10px;
font-size: 85%;

}

ul#footerNav li
{
display: inline;
/* border-right: solid 1px #990000; */
padding: 0px 8px 0px 4px; 
}

ul#footerNav li#contact {border: none;} 

/**************************************************/
/* Typography                                     */
/*********************************************** **/

body
{
font-family: Arial, Helvetica, sans-serif; 
font-size: 14px;
}

/* .composer for UL composer for composer double row */
.composer 
{
font-family: Arial, Helvetica, sans-serif; 
font-size: 14px;
line-height: 185%;
}

p
{
padding: 5px 0 5px 0;
}

h1
{
font-size: 170%;
}

h2
{
font-size: 130%;
}

h3
{
font-size: 120%;
}

h4
{
font-size: 100%;
}

h5
{
font-size: 90%;
}

h6
{
font-size: 60%;
}

/*  styles for ul navigation */
ul#mainNav a
{
color: #000000;
text-decoration: underline;
}

ul#mainNav a:hover
{
color: #990000;
}

ul#searchNav a  /* for the hyperlinks in the search navigation */
{
color: white;
text-decoration: none;
}

/* this was the rollover behavior for the original 100% font size for  */
/* the ul#searchNav 

ul#searchNav a:hover
{
color: white;
font-weight: bold;
}
*/

ul#footerNav a
{
color: #000000;
text-decoration: underline;
}

/* for the 'site designed by' text */

#tagline
{
padding-top: 5px;
position: relative;
left: 370px;
font-size: 90%;
color: black;
}

#tagline a
{
color: black;
}

/* for homepage text */
h3.homeText
{
margin-left: 20px;
margin-bottom: 20px;
font-size: 130%;
line-height: 1.6em;
width: 570px;
color: #990000;
}


h3.homeText2
{
border: black thin solid 1px;
margin-left: 20px;
margin-bottom: 20px;
font-size: 150%;
line-height: 1.9em;
width: 570px;
color: #990000;
}

/*
h3.homeText a
{
color: #990000;
}
*/


/***********************************************/
/* Styling of Tables                           */
/***********************************************/
#contactTable
{
border: 0;
width: 500px;
/* background-color:red; */

}

#contactTable th, #contactTable tr, #contactTable td
{
border: 0;
}


table {
	font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	}

th {
	padding: 0 0.5em;
	text-align: left;
	}

tr.red td {
	border-top: 1px solid  #000099;
	border-bottom: 1px solid  #000099;
	background: #990000;
	color: white;
	}

/*
td {
	border-bottom: 1px solid #CCC;
	padding: 0 0.5em;
	}
*/

/*****************************************/
/* Misc Styles                           */
/*****************************************/
.status
{
border: thin black dotted;
}

/* For text that is the maroon color of the site */
.siteColor
{
color: #990000;
line-height: 40%;
}


.announce
{
	border: thin solid #990000;
}
