/* myguitarlessons_tutor.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 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: 428px;/*was 520px*/
	margin: 50px auto 0;
	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: -80px 0 0 130px;
	width: 166px;
	height: 56px;
	background: url(../assets/myGuitLogo.png) 0 0 no-repeat;
	text-indent: -1000px;
}



/*positioning <h1>HEADER of tutor's name*/
div#container div#tutor_title h1 {
	position: relative;
	margin-top: -50px;
	margin-left: 500px;
	width: 370px;
	height: 30px;
	color: #af9658;/*light coffee*/
	font: 22px Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
}

					

									/***************************end div#branding end******************************/											
										
										/*xxxxxxxxxxxxxxxxxxxxstart main startxxxxxxxxxxxxxxxxxxxxxxx*/

/*positioning and sizing the content area for the tutor profile*/
div#container div#main_tutor {
	position: absolute;
	width: 804px;
	height: 400px;
	margin: 30px 0 0 61px;		
}

/*positioning and sizing the content area for the left column 'div#photo_music'*/
div#container div#main_tutor div#photo_music {
	float: left;
	width: 380px;
	height: 400px;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx start PHOTOS start xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*floating div#photo1 with photo to left to bring div#photo2 with photo to the right of it */
div#container div#main_tutor div#photo_music div#photo1 {
	float: left;
	font: 9px Verdana, Arial, Helvetica, sans-serif;
	color: #e67e1a;/*orange*/
	margin-right: 50px;
	margin-bottom: 5px;
	margin-left: 20px;
	background-color: #333;/*dark grey*/
	border: 2px solid #444;/*darkish grey*/
	border-radius: 3px;/*w3*/
	-moz-border-radius: 3px;/*works only in firefox*/
	-webkit-border-radius: 3px;/*works only in safari and chrome*/
}

/*floating div#photo2 to the left so it sits to the right of div#photo1*/
div#container div#main_tutor div#photo_music div#photo2 {
	float: left;
	font: 9px Verdana, Arial, Helvetica, sans-serif;
	color: #e67e1a;/*orange*/
	margin-bottom: 5px;
	background-color: #333;/*dark grey*/
	border: 2px solid #444;/*darkish grey*/
	border-radius: 3px;/*w3*/
	-moz-border-radius: 3px;/*works only in firefox*/
	-webkit-border-radius: 3px;/*works only in safari and chrome*/
}

/*sizing up <p> for the <img> in div#photo1*/
div#container div#main_tutor div#photo_music div#photo1 p {
	width: 75px;
	height: 15px;
	margin: 0 auto;
	text-align: center;
}

/*sizing up <p> for the <img> in div#photo2*/
div#container div#main_tutor div#photo_music div#photo2 p {
	width: 75px;
	height: 15px;
	margin: 0 auto;
	text-align: center;	
}

/*giving space between image and border in div#photo1*/
div#container div#main_tutor div#photo_music div#photo1 img {
	padding: 5px 5px 0px 5px;
}

/*giving space between image and border in div#photo2*/
div#container div#main_tutor div#photo_music div#photo2 img {
	padding: 5px 5px 0px 5px;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx end PHOTOS end xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx start FLASHPLAYER start xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*positioning flash player within the left column 'div#photo_music'*/
div#container div#main_tutor div#photo_music div#flashPlayer {
	position: relative;
	margin-top: 120px;
	margin-left: 20px;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx end FLASHPLAYER end xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx start <UL>LINKS start xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*floating and positioning <ul> for contact, lessons link and 'youtube'video link*/
div#container div#main_tutor div#photo_music ul#lessons_contact {
	
	margin: 0px 0 0 20px;
}

div#container div#main_tutor div#photo_music ul#lessons_contact li {
	margin-bottom: 0;
}

/*anchor links for ul#lessons_contact*/
div#container div#main_tutor div#photo_music ul#lessons_contact li a {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #af9658;/*light coffee*/
	text-decoration: none;
	background-color: #333;/*dark grey*/
	border: 2px solid #444;/*darkish grey*/
	border-radius: 3px;/*w3*/
	-moz-border-radius: 3px;/*works only in firefox*/
	-webkit-border-radius: 3px;/*works only in safari and chrome*/
}

/*anchor:hover links for ul#lessons_contact*/
div#container div#main_tutor div#photo_music ul#lessons_contact li a:hover {
	color: #e67e1a;/*orange*/
	background-color: #111;/*dark grey*/
	border-bottom: 1px solid #ffcc66;/*caramel*/
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx end <UL>LINKS end xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx start BIOG COLUMN start xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*positioning and sizing the content area for the right column 'div#biog'*/
div#container div#main_tutor div#biog {
	float: left;
	width: 375px;
	height: 230px;
	font: 12px/18px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	margin-left: 40px;
	padding-top: 10px;
	background-color: #222;/*dark grey*/
	border: 2px solid #333;/*darkish grey*/
	border-radius: 10px;/*w3*/
	-moz-border-radius: 10px;/*works only in firefox*/
	-webkit-border-radius: 10px;/*works only in safari and chrome*/		
}

/*sizing the content of <p> within the right column 'div#biog'*/
div#container div#main_tutor div#biog p {
	padding: 10px 10px 5px 15px;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx end BIOG COLUMN end xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
												/*xxxxxxxxxxxxxxxxxxxxend main endxxxxxxxxxxxxxxxxxxxxxxx*/
								/*************************** 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#crb>*/
div#container div#siteinfo a img#crb {
	position: absolute;
	bottom: 60px;
	left: 640px;
	/*border: 1px dotted #f00;/*red_TEMP*/
	opacity: 0.5;
	filter: alpha(opacity=50);
	z-index: 10;
}



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


									/**************************end base logos end**************************/
									
									/**************************start COPYRIGHT start**************************/

/*anchor links for sub nav*/
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 p#copyright a:hover {
	color: #e67e1a;/*orange*/
	border-bottom: 1px solid #ffcc66;/*caramel*/
	width: 173px;/*contains border-bottom*/
}

/*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: 654px;
	height: 113px;
	background: url(../assets/guitar_btm-tut.png) 270px 35px no-repeat;
}

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


												/*xxxxxxxxxxxxxxxxxxxxstart siteinfo startxxxxxxxxxxxxxxxxxxxxxxx*/

/*containing and positioning  bg image 'siteinfo_band.png'*/
div#container div#siteinfo div#siteband {
	position: absolute;
	bottom: 24px;
	left: 18px;
	width: 894px;
	height: 47px;
	padding-top: 10px;
	padding-left: 55px;/* to adjust subnav to the right*/
	background: url(../assets/siteinfo_band.png) 0 20px no-repeat;
}

div#container div#siteinfo div#siteband p {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #e67e1a;/*orange*/
	text-decoration: none;
	margin-top: 22px; 
}


												/*xxxxxxxxxxxxxxxxxxxxend siteinfo endxxxxxxxxxxxxxxxxxxxxxxx*/


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