/* *********************************************************************************************************************************** */
/*	A quick intro:
	
	While not meant as a lesson in CSS, it helps to understand the purpose of this file. CSS was created for a simple reason,
	to reduce code. It allows a separation of style and substance. Style being the formatting and appearance of a page, and 
	substance being the content that fills it. Using a stylesheet like this one allows you to define the look of your site in
	a single file, and then you simply apply these new styles wherever you want them. If you notice on the .php pages, the 
	majority of tags (primarily div's, anchors, etc) will have a property that references this style sheet. Lets take a look 
	at an example. <div id='navbar' class='smalltext'>. This div uses two CSS elements (id and class) to reference this style
	sheet. In this example, if an id of 'navbar' and a class of 'smalltext' exist in our style.css, those styles will
	get applied to everything within this div. Confusing? Probably, but you'll quickly realize that if we have 15 elements on
	our site tagged with "class='smalltext'" you can make changes to all 15 elements by changing the 'smalltext' entry in our
	CSS file. Quick, easy, and efficient. Any other questions, the W3Schools page is an invaluable reference:
		http://www.w3schools.com/
		
		Big thanks to Alessandro Fulciniti for his CSS Nifty-Corners.
			http://www.html.it/articoli/niftycube/index.html
	
	File: style.css
	Created: August 02, 2006
	Creator: Mike Fournier
	Website: chychul.ca
*/
/* *********************************************************************************************************************************** */

/* Our universal statement. Be VERY careful adding things here, they get applied to every single HTML element side-wide */
*
{
	padding: 0;
	margin: 0;
}
/* Our body is getting a background color in this case */
body
{
	padding: 0;
	margin: 0;
	background-color: #1E212A;			/* set our background color for the page, may replace this with a tiled image, unsure right now */
}

/* ************************************************************************************************************ */
/* Our wrapper. The entire page is created within this wrapper, it allows for uniformity and eases layout 		*/
/* ************************************************************************************************************ */

/* Wrapper - since CSS evaluates properties from top to bottom, we put browser-common stuff here, and individual stuff below */
#wrapper
{
	position: relative;					/* Allows the use of a position: absolute on our footer */
	margin: 0 auto;						/* centers the wrapper on the page */
	width: 700px;						/* wrapper will be 700px wide */
	height: 100%;						/* Since we've started using a height factor, we have to continue in all our full-length divs */
	min-height: 100%;					/* Required attribute for Mozilla - pushes wrapper to bottom even with no content */
	
	background-color: #191b23;			/* background-color of the wrapper */
	color: #c8cbd3;						/* Text color for the text in our wrapper */
	border-left: 1px solid #cdcdec;		/* left border width, style, and color */
	border-right: 1px solid #cdcdec;	/* right border width, style and color */
}
#wrapper a
{
	color: #c8cbd3;
}
/* IE wrapper - since Internet Explorer doesn't do 'min-width' we fudge it using a quick bit of Javascript */
#wrapper
{
	width:expression(document.body.clientwidth < 605 ? "600px" : "700px");
}
/* Firefox wrapper - since Mozilla/Opera/etc DO support min-width we don't need our Javascript */
div>#wrapper
{
	min-width: 400px;					/* min-width (horizontal scrollbar appears) - done above with a script */
}
html>body #wrapper
{
	height: auto;						/* Mozilla hack - the min-height 100% constrains the height to one-screen length if we don't set this */
}
/* ************************************************************************************************************ */
/* Our header. Will appear at the top of page, likely as a graphic background with text classes floating on it	*/
/* ************************************************************************************************************ */
#header
{
	margin: 0;						/* Margins/padding get set to zero, no unwanted white spaces */
	padding: 0;
	height: 150px;					/* Height of our header div. Must fit image height, and provides a hard number for our absolute: below */
	width: 100%;					/* Div spans 100% of the wrapper it's contained in (right now, 700px, may change) */
	position: relative;				/* We set a relative position here, and that allows us to use absolute positions for text below */
	
	background-color: green;		/* Temp. background color to ease in layout */
	background: url(images/header_cropped_700x150.jpg) no-repeat top left;
	color: #C7C26B;					/* The color of our header text, kind of a dusty gold */
}
/* Our 'Chychul Orchestra' text will be positioned here. We're using a combination of absolute coordinates and percentages so it'll scale */
#header div.pagetitle
{
	position: absolute;				/* Absolute positioning of text. Requires a known and static height/width in containing div. */
	
	top: 65%;						/* Text with the class=pagetitle attribute needs two coordinates to place it on-screen. Using two */
	left: 5%;						/* values out of (top, bottom, left, right) allows us to define a corner from which to start writing. */
									/* Can be changed if needed, uses percentages right now, so if we resize our header div our text  */
									/* retains it's positioning on the screen. Nice and fluid! */
}
/* Our 'Chychul Orchestra' text is also a hyperlink! Viewers can click it to return to the index.php. Let's try to make it less conspicous. */
#header div.pagetitle a
{
	text-decoration: none;			/* Kills the underline, removing the "linky feel" while keeping functionality */
	color: #c7c26b;					/* Because this is a hyperlink it needs the color here too, not just up top under #header */
}
/* Some smaller text, not quite as large as our page header, that will contain our 'Old Time Favorites' text. Not a hyperlink. */
#header div.headertext
{
	position: absolute;				/* Just like the page title, this text is absolutely aligned */
	top: 70%;						/* ... and as with all absolutely aligned text it needs a corner (top left) to work with */
	left: 13%;
}		

/* ************************************************************************************************************ */
/* Our navbar. Will appear at the top of page, below the header image, and will contain links using an inline <ul>	*/
/* ************************************************************************************************************ */
#navbar
{
	margin: 0;
	padding: 0;
	width: 100%;						/* Make our navbar span 100% of it's container */
	height: 1.2em;						/* To make our rollovers below work properly we NEED a height here */
	
	background-color: #1E212A;			/* Temp. background color, to ease in layout */
	border-bottom: 1px solid #CDCDEC;	/* Bottom border. Thickness, style, and color. */
	border-top: 1px solid #CDCDEC;		/* Top border. Same as above. */
}
/* Our navbar 'buttons' will be a series of links, laid out horizontally, using an unordered list. This styles just the ul tag. */
#navbar ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;				/* Get rid of the bullets normally placed before list items */
	
	display: inline;					/* Using 100% total width, with 20% for each button causes a endline break in IE. This fixes that */
}
/* Each <li> within the list will be a button. By default, <li>'s stack vertically, so this will get them horizontal */
#navbar ul li
{
	float: left;						/* Float our list items, allowing them to sit side-by-side */
	width: 20%;							/* Right now, we have 5 items. 100% / 5 = 20% for each item */				
	text-align: center;					/* Align our text to the center in each button */
}
/* Each button is a hyperlink, how else would we get to our destination? Let's give them formatting */
#navbar ul li a
{
	width: 100%;						/* Each hyperlink should fill 100% of the 20% allotted to it above */
	height: 1.2em;						/* This height must match the height of the navbar div declared above, or we get white space */
	display: block;						/* We want the entire 20% of the buttons to be sensitive to rollovers, not just the text */
	text-decoration: none;				/* Kill the underline! */
	
	color: #C7C26B;						/* Same color text as the page header above, kind of a dusty gold. A maroon might work as well. */
}
/* When our viewer hovers over each button, we want an effect to indicate they should be clicking */
#navbar ul li a:hover
{
/*  text-decoration: underline;			/* We could also use a more subtle underline effect on rollover, instead of bg color change */
	background-color: #955B5B;			/* Background color of the button changes on rollover */
}

/* ************************************************************************************************************ */
/* Our content area. This is the middle part of the page, below the header and navbar, above the footer.		*/
/* ************************************************************************************************************ */

/* This is our content div. It's kind of like the wrapper, in that it gets applied to every page, but only the middle */
#content
{
	padding: 0;
	margin: 0.75em;
}
/* This id will get used often enough I'm placing it up here. It defines site-wide behaviour of page header text */
#headertext
{
	text-align: center;
	margin-top: 1em;
	margin-bottom: 0.75em;
	color: #C7C26B;
}
/* ****************************** BIOGRAPHY PAGE STUFF GOES HERE! ********************************************* */

/* Biography class. Since we're using #content on all our div's, this lets us shape each page individually, not site-wide */
.biography
{
	margin-top: 1em;					/* To remain consistent with the 1em added to the bottom below */
}
/* Mainly for text indenting or changing first character formatting, this'll get applied to the first paragraph on a page */
.firstparagraph
{
	text-indent: 1.3em;
}
/* Our paragraphs could use a little formatting, more space in between them, etc. */
.biography p
{
	margin-bottom: 1em;					/* 1em worth of space between each paragraph */
}
/* Our headers need changed a bit */
.biography h4
{
	text-align: center;
	margin-bottom: 0.2em;
	color: #C7C26B;
}
.biography h2
{
	text-align: center;
	margin-bottom: 1em;
	color: #C7C26B;
}

/* ********************************* PHOTOS PAGE STUFF GOES HERE! ********************************************* */
/*		Our photo album is going to be a bit tricky. We have 6 pictures, and the idea is that we lay them out in 2 rows of 3. */
/*		To accomplish this, we'll be using 2 horizontal lists, with divs in each <li>, and info in each <div>. Convoluted! */
/* ************************************************************************************************************ */

/* Our containing div, this will hold the 2 rows of 3 divs */
#photoalbum
{
	margin-bottom: 1em;
	width: 100%;						/* Span the entire content div this sits in */
	position: relative;					/* Use relative positioning, as I have a feeling we'll need absolute positioning soon here */
	text-align: center;					/* Centers any divs inside the main #photoalbum container */
}
/* Our unordered list (there will be two total). Get this horizontal, get rid of the bullets, etc etc */
#photoalbum ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;				/* Get rid of the bullets normally placed before list items */

	display: inline;					/* Using 100% total width, with 20% for each button causes a endline break in IE. This fixes that */
}
/* Each <li> within the unordered list will contain a div, and that div will contain our photos. The <li>'s can span 33%, the div's can't. */
#photoalbum ul li
{
	float: left;						/* Float our list items, allowing them to sit side-by-side */
	width: 33%;							/* Right now, we have 3 items. 100% / 3 = 33% for each item */				
	text-align: center;					/* Align our text to the center in each button */
}
/* Our actual photo div. It'll have a picture, and some text underneath */
#photo
{
	padding: 0.1em;						/* Put a little padding on each photo */
	width: 216px;						/* This width is hard-coded. Why, I can't remember. Sleep.. need.. more */
}
#photo img
{
	margin-bottom: 0.2em;
}
/* ********************************** LINKS PAGE STUFF GOES HERE! ********************************************* */

/* Our links will be pretty simple - an unordered list with all the hyperlinks. One of the few lists that will use bullets! */
#links
{
	margin: 0 2em;
}
/* Here we style the text of each link. Color, etc. Important to note this is when there is no mouse hovering, so here we have no underline */
#links li a
{
	text-decoration: none;
}
/* Here we style the rollover effect on each link. Since we removed their underline, we want an effect on rollover to denote clickage */
#links li a:hover
{
	text-decoration: underline;
}

/* *********************************** DISCOGRAPHY PAGE STUFF GOES HERE! ******************************************* */
/* 	 	at our current settings, our img div is 225px high. 225px - 170px =  		55 / 2 (top/bottom) 22.5 top margin	*/
/*		This means the image MUST be 170px in this case, in order for everything to appear correctly			*/

/* Album is a div that will contain individual album(s). As more are added, we simply add another album div, and so-on */
#album
{
	width: 100%;
/*	background-color:#11CCFF; */
	margin-bottom: 1em;
	padding: 0.5em 0;
/*
	border-top: 1px solid #CDCDEC;
	border-bottom: 1px solid #CDCDEC;
*/
}
/* The left-most of 3 divs within the #album container. Our album image will go here. Remember kids, 170px squared is best! */
.picture
{
	float: left;							/* Float our div, so that we can line them up horizontally instead of vertically */
	width: 25%;								/* Picture div will span 25% of our total album div */
	margin-right: 4px;
}
/* A class for our actual picture itself, not just the div it's in */
.albumcover
{
	border: none;							/* Hyperlinking a pic adds a border, so we remove it */
	margin-left: 5px;						/* And we off-set the picture a little in and a little down, so it's not square to the edge */
	margin-top: 5px;
}
/* Div #2 within our album div */
.song_list_1								
{
	float: left;							/* Like before, float the div so it sits nicely in the middle */
	width: 42.5%;							/* Our 3 middle divs CANNOT add up to 100% width or IE will crap out, so this makes it a bit less */
	margin-right: 4px;
}
/* Div #3 - our final div */
.song_list_2					
{
	float: left;							/* Float it! */
	width: 30%;								/* This one's a little skinnier, the song titles are shorter so we can make it thinner */
}
/* Our ordered list - every <ol> tag within a <div id='album'> will get this style */
#album ol
{
	margin-left: 35px;						/* Pushes things right a little bit, our bullets were being cut off */
}
/* Our sample links, underlined and colored black */
#album a
{
	text-decoration: underline;
}
/* A div that sits BELOW the 3 above. In fact, it sits wholly outside the album div */
#buynow
{
	margin-bottom: 1em;
	width: 100%;							/* Span the entire content area */
	text-align: center;						/* And center the text */
}
/* Our actual hyperlink. Underlined to draw attention, and colored black */
#buynow a
{
	text-decoration: underline;				/* Underline */
}
/* ********************************** CONTACT PAGE STUFF GOES HERE! ******************************************* */

/* This won't get used much, but we do need it for the top "You can contact..." line */
.contact_top
{
	margin-left: 2.5em;
}
/* This class is applied to each of our means of contact (address, phone, email) - it separates and spaces them apart */
.indent
{
	margin: 1.5em 5em;
}
/* Change the color of our link - leave the underline so people know to click and not just type it into their email program */
.indent a
{
}

/* ************************************************************************************************************ */
/* Our footer area. This follows the content, and ends our page.												*/
/* ************************************************************************************************************ */

/* Alright. Our footer is absolutely positioned, meaning it'll appear OVER any text behind it. So if we want to avoid it
   overlapping the content text, we need to add a little to the bottom of our page, and plop the footer in that new empty space */
#clearfooter
{
	color: #993366;
	margin: 0;
	padding: 0;
	clear: both;						/* Floats have a nasty habit of causing weird text wrapping, so we need to prevent that */
	height: 25px;						/* This height MUST match the height of our footer below, otherwise it'll overlap the content area */
}
/* Our footer, absolutely positioned at the a) bottom of the page or b) bottom of the content area, whichever reaches further */
#footer
{
	margin: 0;
	padding: 0;
	position:absolute;					/* Footer gets absolutely positioned, so it's always at the bottom of the page */
	bottom:0;							/* Bottom edge rests at 0 */
	left:0;								/* Left edge rests at 0 as well */
/*	background:orange;					/* Temp background color to easy layout */
	height: 25px;						/* Must not exceed the height of our 'clearfooter' that we're nestling in */
/*	border-top:1px solid #CDCDEC;		/* Throw a border on it */
	width:100%;							/* Span the entire wrapper */
	color: #C7C26B;
}
/* Any hyperlinks in the footer won't be affected by the color: tag above, so we get them here. Sneaky little... */
#footer a
{
	color: #C7C26B;
}
/* Do a little formatting on the footer text */
#footer p
{
	margin-top: 5px;
	text-align: center;
	font-size: small;
}
/* And further to that, do a little formatting on any hyperlinks in the footer text */
#footer p a
{
	text-decoration: none;
}
#footer p a:hover
{
	text-decoration: underline;
}
/* ************************************************************************************************************ */
/* Last but not least, our basic HTML elements. Here we can style individual HTML tags, forgoing things like ID and class */
/* ************************************************************************************************************ */
/* commented backslash hack v2 \*/ 
html, body
{
	height:100%;
} 
/* end hack */