body {          /*this loads the htc file that allows ie to do hover on arbitrary elements - maybe not necc.*/
	behavior: url("htc/hover.htc"); 
	}

/*gotta start with the basics*/

img {
	border: 0;
	}
	
ul {              /*bullets are ugly*/
	list-style: none;
	padding-left: 10px;
	border-left: 1px dotted #666;
	}

dl {
	}
	
dt {
	margin-top: 5px; /*this inserts a bit of space between definitions*/
	}

/*******************
	typography
*******************/

body {
	font-size: 15px;   
	color: #666;
	font-family: Arial, Helvetica, sans-serif;
	}

p {   
	font-size: 1em; 
	}

h1 {  
	font-size: 1.2em;
	font-weight: bold; 
	color: #666; 
	text-decoration: none;
	}
	
h2 {  
	font-family: Verdana, Helvetica, sans-serif; /*verdana looks cool at this size*/
	font-size: .8em; 
	color: #fff;
	background-color: #666;
	padding: 0px 3px;
	font-weight: bold;
	}

/*****************
    linky-poo
*****************/

a {   
	font-family: Arial, Helvetica, sans-serif; /*probably redundant*/
	font-size: 1em;
	}
	
a:link {             /*remember LoVe-HAte*/
	color: #99cc69; 
	text-decoration: none;
	}
	
a:visited {
	color: #77aa45;
	text-decoration: none;
	}
	
a:hover {
	text-decoration: underline;
	}
	
a:active {
	text-decoration: none;
	}

/*definition list definitions*/

dt {
	font-weight: bold;
	}
	
dd {
	font-weight: normal;
	}


/***************************
        do the div
***************************/

#twistLogo {                /*logo positioning*/
	position: relative;
	width: 600px;
	top: 10px;
	left: 20px;
	}
	
#container {              /*holds sidebar and mainContent stuff*/
	clear: left;
	position: relative;
	left: 47px;
	width: 700px;
	}

/*side, side, side bar*/
	
#sidebar {
	position: relative;
	text-align: right;
	padding-right: 15px;
	top: 30px;
	width: 200px;
	float: left;
	}
	
.subOn {            /*the little sidebar links, earlier a selectors will do colors*/
	color: #74549E;   /*corrects color from earlier a selectors*/
	font-weight: bold;
	}
	
.subOn a:hover {
	cursor: text;    /*fools you into thinking it's not a link, sorry Jakob*/
	text-decoration: none;   /*more tomfoolery*/
	}
	
#mainContent {       /*this is the big one*/
	width: 415px;
	float: left;
	border-left: 1px solid #666;
	padding-left: 15px;
	margin-top: 30px;   /*step away from the navbar and no-one gets hurt*/
	}
	
#textlinks {
	margin-top: 50px;    /*whitespace under content*/
	}	
	
#footer p {
	font-size: .85em;   /*hopefully big enough to read*/
	}

/*main nav div, man*/

#navigation {             /*entire navbar*/
	width: 800px;
	}

#navigation ul {          /*turn off bullets*/
	list-style: none;
	}
	
#navigation li {   /*keeps the boxes stacked L-R, won't work if float is on a elements*/
	float: left;
	}

a#navHome, a#navAbout, a#navMusic, a#navWeddings, a#navParties, a#navListen,
a#navContact, a#navLessons, a#navEric {  /*applies block size to all nav id's*/
	display: block;
	width: 74px;
	height: 105px;
	background-position: top left;     /*shows only the top portion of image*/
	}

a#navHome.on, a#navAbout.on, a#navMusic.on, a#navWeddings.on, a#navParties.on, a#navListen.on,
a#navContact.on, a#navLessons.on, a#navEric.on {
	background-position: 0px -123px;   /*shows bottom portion of image initially to all class="on" links*/
	}
	
a#navHome.on:hover, a#navAbout.on:hover, a#navMusic.on:hover, a#navWeddings.on:hover, 
a#navParties.on:hover, a#navListen.on:hover, a#navContact.on:hover, a#navLessons.on:hover, 
a#navEric.on:hover {
	cursor: default;   /*fools Jakob into thinking it's not a link*/
	}
	
a#navHome:hover, a#navAbout:hover, a#navMusic:hover, a#navWeddings:hover, a#navParties:hover, 
a#navListen:hover, a#navContact:hover, a#navLessons:hover, a#navEric:hover {
   background-position: 0px -123px;   /*shows bottom portion of image when hovered*/
   }
   
a#navHome span, a#navAbout span, a#navMusic span, a#navWeddings span, a#navParties span, 
a#navListen span, a#navContact span, a#navLessons span, a#navEric span {
	display: none;     /*cheap hack using spans to prevent text from being displayed. I don't like it, but
						don't have any other solutions right now. Sorry, blind people. Sorry, Bobby*/
	}

/*the following are the actual image backgrounds for each specific nav id*/

a#navHome {
   background: url(images/nav_main.jpg);
   }

a#navAbout {
   background: url(images/nav_about.jpg);
   }

a#navMusic {
   background: url(images/nav_music.jpg);
   }
   
a#navWeddings {
   background: url(images/nav_weddings.jpg);
   }

a#navParties {
   background: url(images/nav_parties.jpg);
   }

a#navListen {
   background: url(images/nav_listen.jpg);
   }
   
a#navContact {
   background: url(images/nav_contact.jpg);
   }

a#navLessons {
   background: url(images/nav_lessons.jpg);
   }

a#navEric {
   background: url(images/nav_soloPiano.jpg);
   }

/*end main navigation */


/****************************
    EXTRA FORM FORMATTING
****************************/

input {
	color:#ffffff;
	font-family:arial,helvetica,sans-serif;
	font-size:8pt;
	margin-left:2;
	vertical-align:middle;
	background-color:#666666;
	border-left:1 solid black;
	border-top:1 solid black;
	border-bottom:1 solid black;
	border-right:1 solid black;
	}
	
select {
	color:#ffffff;
	font-family:arial,helvetica,sans-serif;
	font-size:8pt;
	vertical-align:middle;
	background-color:#666666;
	}
	
textarea {
	font-family:arial,helvetica,sans-serif;
	font-size:8pt;
	color:#ffffff;
	background-color:#666666;
	}