/* Style Sheet for use with Choir Remix and Remix Voices December 2011 
	Program modified 30 August 2011 */


/* Sets up the yellow body and general text,
   margins and padding */

body {
      margin: 0;
      padding: 0;
      font: 90% arial, helvetica, sans-serif;
      background: #ffffb3;
      color: #000066;
		}

/* Sets up the general h1 heading for the page */

h1 {
		color: #000066;
		margin: 0;
		padding: 0;
		}

/* Sets up the general h2 heading for the page */

h2 {
		color: #000000;
		margin: 0;
		padding: 0;
		}

/* Sets up the main container div element, with maximum
	and minimum widths to scale between, and using auto
	settings for left and right margins to give a
	centred display on wide screens */

#maincontainer {
		min-width: 646px;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		border: 0;
		padding: 0;
		}

/* Sets up the top heading graphic, with divisions and
	minimum widths to correspond to the lower divisions.
	The main logo is centred in the centre division so
	that it is centred over the Content column. The left
	division to be used for a small logo, and the right
	division to be used to enter the singers log-in area
	at some stage in the future. */

#headerleft {
		width: 15%;
		min-width: 90px;
		height: 58px;
		float: left;
		margin: 0;
		padding: 0;
		display: inline;
		background: #0000eb;
		border-bottom: 5px solid #ffff66;
		}	
	
#headercenter {
      width: 60%;
      min-width: 300px;
		height: 53px;
      float: left;
		background: #0000eb;
		color: #ffff66;
		margin: 0;
		padding-top: 5px;
		display: inline;
		vertical-align: center;
		border-bottom: 5px solid #ffff66;
		text-align: center;
		}
	
#headerright {
		width: 25%;
		min-width; 80px;
		height: 58px;
		float: left;
		margin: 0;
		padding: 0;
		display: inline;
		background: #0000eb;
		border-bottom: 5px solid #ffff66;
		}

/* Sets up the container for the 2000 pixel wide two color background graphic
   for the first two columns, with the color change set to 15%, as in
   the graphic, minimum width to correspond to other minimum widths */

#container {
		min-width: 646px;
		background: url(../images/backnavandconta2.gif) repeat-y 14% 0;
		}

/* Sets up the container for the 2000 pixel wide transparent and one color 
   background graphic for the third column, with the color change set to 75%,
   as in the graphic, minimum width to correspond to other minimum widths */

#container2 {
		min-width: 646px;
		background: url(../images/backnewsb2.gif) repeat-y 75% 0;
		}

/* Sets up the content for the first column, navigation, floated left. 
   Column is 15% of the screen width, minimum width to just contain 
   navigation labels */

#navigation {
		width: 13%;
		min-width: 90px;
		float: left;
		margin: 1em 1%;
		display: inline;
		}

/* Sets up the appearance and behaviour of the navigation column */

ul#navigationlist {
		margin-left: 0;
		padding-left: 0;
		list-style-type: none;
		}

ul#navigationlist a {
		display: block;
		text-decoration: none;
		background: #ccffff;
		color: #000099;
		padding-top: .8em;
		padding-bottom: .1em;
		padding-left: .2em;
		padding-right: .1em;
		border-bottom: 1px solid #000099;
		width: 7em;
      }

ul#navigationlist a#thispage {
		display: block;
		text-decoration: none;
		background: #29ffff;
		color: #000099;
		padding-top: .8em;
		padding-bottom: .1em;
		padding-left: .2em;
		padding-right: .1em;
		border-bottom: 1px solid #000066;
		width: 7em;
		}

ul#navigationlist a:visited {
		background: #99ffff;
		color: #000066;
		}


ul#navigationlist a:hover {
		background: #0000eb;
		color: #ffff1f;
		font-weight: bold;
		border-bottom: 1px solid #ffffif;
		}

ul#navigationlist li {
		background: #ccffff;
		text-align: left;
		display: inline;
		width: 7em;
		}

/* Sets up the content for the second column, content, floated left next to
   the navigation column. Column is 60% of the screen width, minimum width 
   set to accomodate a maximum image width of 300px */

#content {
		width: 56%;
		min-width: 300px;
		float: left;
		margin: 1em 2%;
		display: inline;
		}

/* Sets up the default h1 appearance in the content column */

#content h1 {
		color:#6c000a;
		font-size:140%;
		font-weight:bold;
		text-align:center;
		letter-spacing:.1em;
		padding-bottom:.2em;
		}

/* Sets up the default h2 appearance in the content column */

#content h2 {
		color:#6c000a;
		font-size:135%;
		font-weight:normal;
		text-align:center;
		letter-spacing:.1em;
		padding-bottom:.1em;
		}

/* Sets up the default h3 appearance in the content column */

#content h3 {
		color:#6c000a;
		font-size:130%;
		font-weight:bold;
		text-align:left;
		letter-spacing:.1em;
		padding-bottom:.1em;
		}

/* Sets up the default h4 appearance in the content column */

#content h4 {
		color:#000066;
		font-size:120%;
		font-weight:normal;
		text-align:left;
		letter-spacing:.1em;
		padding-bottom:.1em;
		}

/* Sets up the default h5 appearance in the content column */

#content h5 {
		color:#000066;
		font-size:110%;
		font-weight:bold;
		text-align:left;
		letter-spacing:.1em;
		padding-bottom:.1em;
		}

/* Sets up the default h6 appearance in the content column */

#content h6 {
		color:#000066;
		font-size:105%;
		font-weight:normal;
		text-align:left;
		letter-spacing:.1em;
		padding-bottom:.1em;
		}

/* Sets up the default p appearance in the content column */

#content p {
		color:#000000;
		font-size:normal;
		font-weight:normal;
		text-align:justify;
		letter-spacing:normal;
		padding-bottom:.8em;
		}

/* Sets up the content for the third column, news, floated left next to
   the content column. Column is 25% of the screen width. Minimum width set
   to look OK as a text column at minimum */

#news {
		width: 23%;
		min-width; 80px;
		float: left;
		margin: 1em 0 1em 1%;
		display: inline;
		}

/* Sets up the default h1 appearance in the news column */

#news h1 {
		color:#6c000a;
		font-size:125%;
		font-weight:bold;
		text-align:left;
		padding-bottom:.1em;
		}

/* Sets up the default h2 appearance in the news column */

#news h2 {
		color:#6c000a;
		font-size:120%;
		font-weight:normal;
		text-align:left;
		padding-bottom:.1em;
		}

/* Sets up the default h3 appearance in the content column */

#news h3 {
		color:#6c000a;
		font-size:115%;
		font-weight:bold;
		text-align:left;
		padding-bottom:.1em;
		}

/* Sets up the default h4 appearance in the news column */

#news h4 {
		color:#000066;
		font-size:110%;
		font-weight:normal;
		text-align:left;
		padding-bottom:.1em;
		}

/* Sets up the default h5 appearance in the news column */

#news h5 {
		color:#000066;
		font-size:105%;
		font-weight:bold;
		text-align:left;
		padding-bottom:.1em;
		}

/* Sets up the default h6 appearance in the content column */

#news h6 {
		color:#000066;
		font-size:105%;
		font-weight:normal;
		text-align:left;
		padding-bottom:.1em;
		}

/* Sets up the default p appearance in the content column */

#news p {
		color:#000000;
		font-size:90%;
		font-weight: normal;
		text-align: left;
		letter-spacing: normal;
		padding-bottom: .6em;}

/* Sets up the bottom footer, with divisions and
	minimum widths to correspond to the higher divisions.
	The copyright text is centered in the centre division so
	that it is centred under the Content column. The left
	division to be used for a small logo, and the right
	division to be used to enter the singers log-in area
	at some stage in the future. */

#footercontainer {
		clear: both;
		}

#footerleft {
		width: 15%;
		min-width: 90px;
		height: 20px;
		float: left;
		margin: 0;
		padding: 0;
		display: inline;
		background: #0000eb;
		border-bottom: 5px solid #ffff66;
		}	
	
#footercenter {
		width: 60%;
		min-width: 300px;
		height: 15px;
		float: left;
		background: #0000eb;
		color: #ffff66;
		margin: 0;
		padding-top: 5px;
		display: inline;
		vertical-align: center;
		font: 60% arial, helvetica, san-serif;
		border-bottom: 5px solid #ffff66;
		text-align: center;
		}
	
#footerright {
		width: 25%;
		min-width; 80px;
		height: 20px;
		float: left;
		margin: 0;
		padding: 0;
		display: inline;
		background: #0000eb;
		border-bottom: 5px solid #ffff66;
		}

/* Sets up a division class to style and left align images */

.imageleft {
		text-align: left;
		}

/* Sets up a division class to style and center images */

.imagecenter {
		text-align: center;
		}
		
/* Sets up a division class to style and right align images */

.imageright {
		text-align: right;
		}