/* myguitarlessons.css */

/*normalizez margin, padding*/
body, div, dl, dt, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

/*normalizes font-size for headers*/
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

/*Removes list-style from lists*/
ol, ul {
	list-style: none;
}

/*Normalizes font-style and font-weight to normal*/
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

/*Removes border from fieldset and img*/
fieldset, img {
	border: 0;
}




/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx GENERAL LAYOUT/INDEX.HTML xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
body {
	background-color: #000;/*black*/
}

/*containing <div> for the site and sides of page frame as bg image*/
div#container {
	position: relative;
	width: 922px;
	height: 700px;
	margin: 50px auto;
	background: #000 url(../assets/main_tile.gif) 0 83px repeat-y;
}

												/*************************** branding ******************************/

/*Branding section of page*/
div#container div#branding {
	position: relative;
	top: 0;
	left: 0;
	width: 922px;
	height: 83px;
	background: #000 url(../assets/fret_header.gif) 0 0 no-repeat;
}

/*placing top guitar image with shadow*/
div#container div#branding img#guitartop {
	position: relative;
	margin: -40px 0 0 -30px;
}

/*<h1> replacement. Text replaced with 'myGuitLogo.png' image*/
div#container div#branding h1 {
	position: relative;
	margin: -100px 0 0 190px;
	width: 166px;
	height: 56px;
	background: url(../assets/myGuitLogo.png) 0 0 no-repeat;
	text-indent: -1000px;
}

									/***************************end div#branding end******************************/

										/*************************** div#main ******************************/
/*positioning and sizing <div#main>*/
div#container div#main {
	position: relative;
	width: 620px;
	height: 400px;
	margin: 120px 0 0 151px;
	/*border: 1px dotted #f00;/*TEMP*/
}

/*styling the <p>*/
div#container div#main p {
	font: 14px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;/*white*/
}

/*placing and styling the <ul>*/
div#container div#main ul {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #e5e5e5;/*light grey*/
	width: 620px;
	margin-left: 0px;
	padding-top: 15px;
	/*border: 1px dotted #f00;/*TEMP*/
}

/*creating space between <li>'s*/
div#container div#main ul li {
	padding-bottom: 10px;
	line-height: 16px;
}

/*<a>mailto links within <li>'s*/
div#container div#main ul li a {
	color: #af9658;/*light coffee*/
	text-decoration: none;
	border-bottom: 1px solid #af9658;/*light coffee*/
}

/*<a>hovers within <li>'s*/
div#container div#main ul li a:hover {
	color: #E67E1A;/*orange*/
	text-decoration: none;
	border-bottom: 1px solid #ffcc66;/*caramel*/
}


											/***************************end div#main end******************************/

											/*************************** div#nav ******************************/
div#container div#nav {
	position: relative;
	margin-top: -45px;
	margin-left: 450px;
	width: 600px;
	height: 20px;
}

div#container div#nav ul {
	float: left;
	width: 600px;
	height: 30px;
}

div#container div#nav ul li {
	float: left;
	margin-right: 30px;
	padding-bottom: 3px;/*needed to help show border-bottom beneath <a:hover> in IE; no problem in Mozilla*/
	font: 15px Verdana, Arial, Helvetica, sans-serif;/*ALTERED*/
	font-weight: bold;
}

/*a;link and a:visited are both needed for Firefox, only a:link is needed for IE*/
div#container div#nav ul li a:link, div#container div#nav ul li a:visited {
	font: 15px Verdana, Arial, Helvetica, sans-serif;/*ALTERED*/
	font-weight: bold;
	color: #af9658;/*light coffee*/
	text-decoration: none;
}

div#container div#nav ul li.hover a:hover {
	color: #e67e1a;/*orange*/
	border-bottom: 2px solid #ffcc66;/*caramel*/
}

/*<a> indicating selected page. Had to give id to </a></a></a><li><a><a><a> for firefox to except 'color: #e67e1a;(orange)'*/
div#container div#nav ul li#on a[href="#"] {
	color: #e67e1a;/*orange*/
	border-bottom: 2px solid #e67e1a;/*orange*/
}

															/****guitar glows****/

/*to hide orange glow image for guitar fret*/
li a span#orng {
	display: none;
}

/*reveals orange glow*/
li a:hover span#orng {
	display: block;
	position: absolute;
	top: -23px;
	left: -253px;
	width: 24px;
	height: 31px;
}

/*to hide yellow glow image for guitar fret*/
li a span#yell {
	display: none;
}

/*reveals yellow glow*/
li a:hover span#yell {
	display: block;
	position: absolute;
	top: -30px;
	left: -226px;
	width: 24px;
	height: 31px;
}

/*to hide red glow image for guitar fret*/
li a span#red {
	display: none;
}

/*reveals red glow*/
li a:hover span#red {
	display: block;
	position: absolute;
	top: -37px;
	left: -203px;
	width: 24px;
	height: 31px;
}

/*to hide cyan glow image for guitar fret*/
li a span#cyan {
	display: none;
}

/*reveals cyan glow*/
li a:hover span#cyan {
	display: block;
	position: absolute;
	top: -44px;
	left: -177px;
	width: 24px;
	height: 31px;
}

/*to hide purple glow image for guitar fret*/
li a span#purple {
	display: none;
}

/*reveals purple glow*/
li a:hover span#purple {
	display: block;
	position: absolute;
	top: -51px;
	left: -151px;
	width: 24px;
	height: 31px;
}
									/***************************end nav end******************************/

								/*************************** siteinfo ******************************/

/*siteinfo section of page*/
div#container div#siteinfo {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 922px;
	height: 82px;
	background: #000 url(../assets/footer.gif) 0 0 no-repeat;
}

									/************************** base logos**************************/
/*positioning <img#rgt>*/
div#container div#siteinfo a img#rgt {
	position: absolute;
	bottom: 80px;
	left: 560px;
	/*border: 1px dotted #f00;/*red_TEMP*/
	opacity: 0.5;
	filter: alpha(opacity=50);
	z-index: 10;
}

/*positioning <img#crb>*/
div#container div#siteinfo a img#crb {
	position: absolute;
	bottom: 80px;
	left: 620px;
	/*border: 1px dotted #f00;/*red_TEMP*/
	opacity: 0.5;
	filter: alpha(opacity=50);
	z-index: 10;
}

/*positioning <img#rgt>*/
div#container div#siteinfo a:hover img#rgt {
	opacity: 1.0;
	filter: alpha(opacity=100);
}

/*positioning <img#crb>*/
div#container div#siteinfo a:hover img#crb {
	opacity: 1.0;
	filter: alpha(opacity=100);
}


									/**************************end base logos end**************************/




/*containing and positioning <ul>#subnav with bg image 'siteinfo_band.png'*/
div#container div#siteinfo ul#subnav {
	position: absolute;
	bottom: 44px;
	left: 18px;
	width: 894px;
	height: 32px;
	padding-top: 5px;
	padding-left: 55px;/* to adjust subnav to the right*/
	background: url(../assets/siteinfo_band.png) 0 0px no-repeat;
	/*border: 1px solid #f00;/*temp*/
}

/*floating <li>'s in <ul>#subnav to the left*/
div#container div#siteinfo ul#subnav li {
	float: left;
	margin-right: 5px;
}

/*anchor links for sub nav*/
div#container div#siteinfo ul#subnav li a, div#container div#siteinfo p#copyright a {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #af9658;/*light coffee*/
	text-decoration: none;
}

div#container div#siteinfo ul#subnav li a:hover, div#container div#siteinfo p#copyright a:hover {
	color: #e67e1a;/*orange*/
	border-bottom: 1px solid #ffcc66;/*caramel*/
}

/*move copyright to right away from subnav*/
div#container div#siteinfo ul#subnav li#copyright {
	margin-left: 30px;
}


/*copyright <p> positioned with bg image 'guitar_btm.png'*/
div#container div#siteinfo p#copyright {
	position: absolute;
	bottom: 23px;
	right: 25px;
	width: 554px;
	height: 113px;
	background: url(../assets/guitar_btm.png) 0 0 no-repeat;
}

/*copyright <p> <a> positioned */
div#container div#siteinfo p#copyright a {
	display: block;
	width: 190px;
	margin-left: 110px;
	margin-top: 66px;
}



/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx CONTACT HTML xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/********************************* <div#mainform> ******************************/
/*positioning and sizing <div#mainform>*/
div#container div#mainform {
	position: relative;
	width: 620px;
	height: 322px;
	margin: 120px 0 0 151px;
	/*border: 1px dotted #f00;/*TEMP*/
}

/*rounded image for top of form*/
div#container div#mainform  form div#form_imgtop {
	position: absolute;
	top: 80px;
	left: 0;
	width: 620px;
	height: 31px;
	background: url(../assets/formGrad_top.gif) 0 0 no-repeat;
	
}

/*rounded image for bottom of form*/
div#container div#mainform  form div#form_imgbtm {
	position: absolute;
	bottom: -24px;
	left: 0;
	width: 620px;
	height: 31px;
	background: url(../assets/formGrad_btm.gif) 0 0 no-repeat;
	
}

div#container div#mainform p {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;/*white*/
	margin-bottom: 10px;
}

/*<a>mailto links within 2nd <p>*/
div#container div#mainform p a {
	color: #af9658;/*light coffee*/
	text-decoration: none;
	border-bottom: 1px solid #af9658;/*light coffee*/
}

/*<a>mailto hover within 2nd <p>*/
div#container div#mainform p a:hover {
	color: #e67e1a;/*orange*/
	text-decoration: none;
	border-bottom: 1px solid #ffcc66;/*caramel*/
}

/*main body of the form with bg colour and text colour*/
div#container div#mainform form {
	width: 620px;
	height: 213px;
	margin-top: 41px;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #ffcc66;/*caramel*/
	background-color: #2B0D0F;/*deep brown/red*/
}

/*floating both </a><ul><a> fieldsets of the form to the left*/
div#container div#mainform form ul {
	float: left;
	height: 185px;
	padding: 10px;
}

/*adding right margin to separate the two <ul>s of the form*/
div#container div#mainform form ul.formA {
	margin-right: 20px;
}

/*separating <li> data in the left section of the form*/
div#container div#mainform fieldset#data li {
	margin-bottom: 20px;
}

/*separating <li> data in the right section of the form*/
div#container div#mainform fieldset#msg li {
	margin-bottom: 15px;
}
											
/*adjusting <li>'s <label> to the right to line the <input>s one on top of the other*/
div#container div#mainform fieldset#data li label#name {
	padding-right: 30px;
}

/*adjusting <li>'s <label> to the right to line the <input>s one on top of the other*/
div#container div#mainform fieldset#data li label#dob {
	padding-right: 38px;
}

/*adjusting <li>'s <label> to the right to line the <input>s one on top of the other*/
div#container div#mainform fieldset#data li label#tel {
	padding-right: 47px;
}

/*adjusting <li>'s <label> to the right to line the <input>s one on top of the other*/
div#container div#mainform fieldset#data li label#email {
	padding-right: 30px;
}

div#container div#mainform fieldset#data li input  {
	border: 1px solid #000;/*brown/red*/
}

/* The hint to Hide and Show <input>*/
div#container div#mainform fieldset#data li span.hint {
	display: none;
	position: absolute;
	left: 85px;
	padding-top: 18px;
	width: 130px;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	/* to fix IE6, I can't just declare a background-color,
    I must do a bg image, too!  So I'm duplicating the pointer.gif
    image, and positioning it so that it doesn't show up
    within the box */
  
}



/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx LESSONS HTML xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*positioning and sizing <div#mainless>*/
div#container div#mainless {
	position: relative;
	width: 620px;
	height: 365px;
	margin: 120px 0 0 151px;
	/*border: 1px dotted #f00;/*red_TEMP*/	
}

div#container div#mainless p {
	font: 14px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;/*white*/
	text-align: center;
}

/*positioning <ul> holding the three <h2>'s*/ 
div#container div#mainless ul {
	width: 417px;
	height: 20px;
	margin-left: 141.5px;
}

/*floating the three <li><h2>>*/
div#container div#mainless ul li {
	float: left;
	margin-right: 50px;
	color: #af9658;/*light coffee*/
}

/*styling <h2>*/
div#container div#mainless h2 {
	color: #ffcc66;/*caramel*/
	font: 24px Haettenschweiler, Verdana, Arial, Helvetica, sans-serif;
}

div#container div#mainless iframe {
	margin-top: 15px;
}

/*a;link and a:visited are both needed for Firefox, only a:link is needed for IE*/
div#container div#mainless ul li h2 a:link, div#container div#mainless ul li h2 a:visited {
	font: 24px Haettenschweiler, Verdana, Arial, Helvetica, sans-serif;
	color: #af9658;/*light coffee*/
	text-decoration: none;
}

div#container div#mainless ul li h2 a:hover {
	color: #e67e1a;/*orange*/
	border-bottom: 2px solid #af9658;/*light coffee*/
}

/*<a> indicating selected page*/
div#container div#mainless ul li a[href='#'] {
	color: #e67e1a;/*orange*/
	border-bottom: 2px solid #e67e1a;/*orange*/
}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ABOUT HTML xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*positioning and sizing <div#mainref>*/
div#container div#mainab {
	position: absolute;
	width: 800px;
	height: 350px;
	margin: 120px 0 0 61px;
	/*border: 1px dotted #f00;/*TEMP*/
}

/*styling and positioning <p>*/
div#container div#mainab p {
	float: left;
	font:  14px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;/*white*/
}

/*positioning <p#pink> the video*/
div#container div#mainab p#pink {
	margin-top: 30px;
}

/*styling and positioning <div#text>*/
div#container div#mainab div#text iframe {
	
	/*border: 1px dotted #f00;/*TEMP*/
}

/*styling and positioning the text above the Flash Player*/
div#container div#mainab p#fptext {
	font-size: 12px;
	margin: 14px 0 0 100px;
	color: #ffcc66;/*caramel*/
}

/*position Flash Music player*/
div#container div#mainab div#flashPlayer {
	position: absolute;
	bottom: -30px;
	right: 50px;
	width: 295px;
	height: 150px;
	border: 1px dotted #f00;/*TEMP red*/
	color: #fff;/*temp*/
}

/*position and style Flash Music player*/
/*div#container div#mainab div#flashPlayer {
	position: absolute;
	bottom: -60px;
	right: 30px;
	width: 295px;
	height: 150px;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 7px;
	padding-right: 7px;
	background-color: #e67e1a;/*orange*/
	/*border: 3px solid #f00;/*TEMP red*/
	/*color: #fff;/*temp*/
	/*opacity: 0.5;
}*/





/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx REFERRALS HTML xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*positioning and sizing <div#mainref>*/
div#container div#mainref {
	position: relative;
	width: 620px;
	height: 322px;
	margin: 120px 0 0 216.5px;
}

/*styling <ul>*/
div#container div#mainref ul {
	font: 14px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;/*white*/
	width: 360px;
	margin-left: 130px;
}

/*styling <cite> with <li>*/
div#container div#mainref ul li {
	margin-bottom: 20px;
}

/*styling <cite> with <li>*/
div#container div#mainref ul li cite {
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #ffcc66;/*caramel*/
	font-style: italic;
	margin-left: 10px;
}

/*styling <p> <li>*/
div#container div#mainref p#slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	color: #fff;
}



/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx THANKYOU.HTML and ERROR.HTML xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*container for "error.html" or "thankyou.html" notice*/
div#container div#thankerror{
	position: absolute;
	top: 250px;
	left: 301.5px;
	width: 450px;
	color: #fff;
	font: 14px Verdana, Arial, Helvetica, sans-serif;
	/*border: 1px dotted #f00;/*RED TEMP*/
} 

/*<h1> styling*/
div#container div#thankerror h1 {
	text-align: center;
	top: 200px;
	left: 400px;
	color: #e67e1a;/*orange*/
	font: 44px Haettenschweiler, Verdana, Arial, Helvetica, sans-serif;
}

/*<h1#error>; different colour to <h1#thanks> which has been set in the above <h1> rule*/
div#container div#thankerror h1#error {
	color: #c60000;/*rich red*/
}

/*<p> styling*/
div#container div#thankerror p {
	color: #ffcc66;/*caramel*/
	margin: 10px 0 20px;
	text-align: center;
} 

/*styling <a>link*/
div#container div#thankerror p a {
	color: #af9658;/*light coffee*/
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	font-variant: small-caps;
	text-decoration: none;
	border-bottom: 1px solid #af9658;/*light coffee*/
}

/*styling <a>hover*/
div#container div#thankerror p a:hover {
	color: #e67e1a;/*orange*/
	text-decoration: none;
	border-bottom: 1px solid #ffcc66;/*caramel*/
} 



	/*border: 1px dotted #f00;/*red_TEMP*/