/*Specifically for #about-our-lessons, since when I add margin-top it creates a white gap between the #content area and the #nav links*/
#lessons #content {padding-top: 30px;}

#about-our-lessons {
    position: relative;

    padding: 20px;
    margin: 30px;
    margin-top: 0px;
    margin-bottom: 30px;

    border: 1px solid #ebebeb;
    background-color: #fdfcf4;

/*    -moz-box-shadow: 0 0 20px #e4e3d8;
    -webkit-box-shadow: 0 0 20px #e4e3d8;
    box-shadow: 0 0 20px #e4e3d8;*/
}

#about-our-lessons h1,
#about-our-lessons h3,
#about-our-lessons a {
    font-family: 'Varela', "Verdana", sans-serif;
    font-weight: normal;
}

#about-our-lessons h1 {
    margin: -20px;
    margin-bottom: 0;
    padding: 8px 20px;
    
    font-size: 1.5em;
    color: #e97845;
    
    border-bottom: 1px solid #ebebeb;
    background-color: #f9f8ef;
    
}

#about-our-lessons h1 span {
    margin-left: 5px;
    color: #97958d;
    font-weight: normal;
    font-size: 60%;
}



/*5 Bullet Points ("Selling Points")*/

#about-our-lessons ul {list-style: none;}

#about-our-lessons li {
    float: left;
    width:  130px;
    
    padding: 15px 0px 0px 0px;
    margin-right: 19px;
    
    /*background-color: cyan;*/
}

#about-our-lessons li.last {padding-right: 0px; margin-right: 0px;}



#about-our-lessons li img        {margin: 5px 0; border: 2px solid #d0d0d0;}
#about-our-lessons li:hover img  {border-color: #8a8888;}

/*Bullet Point: Title*/
#about-our-lessons li h3 {
    padding-top: 3px;
    padding-bottom: 5px;
    font-size: 1em;
    color: #0083a1;
}

/*Bullet Point: Description*/
#about-our-lessons li span {
    font-family: sans-serif;
    font-size: 0.85em;
    line-height: 16px;
    color: #655858;
}

#about-our-lessons li strong {color: #5b4d4d;}




/*"Performance Opportunities" & "Recording Studio"*/

/*Special <li> to generate the vertical separator*/
#about-our-lessons li.performance-opportunities {
    height: 16em;
    
    margin-top: 20px;
    padding-top: 0px;

    /*Specifically for the divider*/
    padding-left: 9px;
    margin-left: -10px;
    border-left: 1px solid #ebebeb;
}

#about-our-lessons li.performance-opportunities img {margin-top: 0;}

#about-our-lessons li.performance-opportunities h3,
#about-our-lessons li.recording-studio h3 {color: #eb7845;}






/*"Click here to see more photos"*/
#about-our-lessons a {
    display: block;

    display: none;

    margin: -20px;
    margin-top: 20px;
    padding: 8px 20px;
    
    text-align: left;    
    font-size: 1em;
    color: white;
    
    text-decoration: none;
    
    border-top: 1px solid #ebebeb;
    background-color: #b5d64a;
    
    -moz-box-shadow: inset 0 0 8px rgba(83, 71, 71, 0.29);
    -webkit-box-shadow: inset 0 0 8px rgba(83, 71, 71, 0.29);
    box-shadow: inset 0 0 8px rgba(83, 71, 71, 0.29);

    -webkit-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.11);
    -moz-text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.11);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.11);
}

#about-our-lessons a:hover     {background-color: #bdda66;}
#about-our-lessons a:active    {background-color: #a9cf2f;}

#about-our-lessons a span      {text-decoration: underline;}


/*#about-our-lessons a span {
    padding: 1px 3px;
    color: #b5d64a;
    background-color: white;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}*/













.collage {
	width: 830px;
/*		width: 100%;*/
	padding: 15px 0 30px 0;
	text-align: center;
}



#instructors {
	
	padding-top: 15px;
/*		padding: 20px;*/
/*		border: 1px solid #999;*/
}

.instructor {
	display: block;
	float: left;
/*		width: 478px;*/
	width: 570px;
/*		height: 15em;*/
	padding: 10px;
	margin-left: 20px;
	margin-bottom: 50px;
	
/*		background-color: #f6f4e8;*/
/*		background-color: #f2f2f2;*/
/*		background-color: #f8efe3;*/		
}

.ie .instructor { margin-left: 10px; }

.instructor:hover	{ background-color: #f1f1f1; }


/************************************

Sprite, Window/Canvas based layout. All of the pictures would be setup in a matrix (the canvas) and viewed through the "window" of div.picture, with overflow: hidden.

div.picture {
	display: block;
	position: relative;
	overflow: hidden;		
	padding: 10px;
	border: 3px red solid;
	background-color: yellow;
}

div.picture img {
	display: block;
	position: absolute;
	top: 10px;
	left:20px;
}

*************************************/



.instructor .picture {
	float: left;
	width: 80px;
	height: 90px;
	margin: 0 15px 15px 0;
	padding: 1px;
	border: 5px solid #e1e1e1;
/*		border: 6px solid #e1e1e1;*/
}

.instructor .text {
/*		margin-left: 105px;*/
/*		position: absolute;*/
	float: left;
/*		width: 360px;*/
	width: 440px;
	
/*		background-color: #f6f4e8;*/
/*		background-color: red;*/
/*		background: url(instructor_bg.gif) repeat-x top left;*/

}

.instructor .name {
	display: block;
	font-size: 140%;
	
/*		background-color: #f8efe3;*/
	
}
.instructor .instrument {
	display: inline;
	margin-bottom: 10px;
	
	font: italic 80% Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	color: #999999;
}

.instructor .description {
	display: block;
	margin-top: 10px;
	padding-bottom: 10px;
	/*text-align: justify;*/
}

.instructor .callout {
	display: block;
	margin-top: 1.1em;
	margin-bottom: 1.9em;
	padding: 0px 15px 10px 15px;

	line-height: 20px;
	color: #77766f;
	
	overflow: hidden;
	
	border: 1px solid #ebebeb;
	background-color: #fdfcf5;
	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.instructor .callout .title {
	display: block;

	margin: 0 -15px;
	padding: 0 15px;

	padding-top: 8px;
	padding-bottom: 5px;

	margin-bottom: 8px;
	
	text-transform: uppercase;

	color: #e97845;
	font-size: 11px;
	font-weight: bold;
	font-family: Helvetica, sans-serif;
	
	border-bottom: 1px solid #ebebeb;
	background-color: #f9f8ef;

	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}









/*.instructor .available {
	display: none;
	font: 85% Helvetica, Arial, sans-serif; font-style: italic; color: #777777;
}

.instructor .available em {
	padding: 1px;
	margin-left: 2px;
	font-style: normal;
	background-color: #eceff0;
}


.instructor .phone {
	display: block;		
	margin-top: 10px;
	padding: 4px 0 6px 5px;

	font-size: 130%;

	border-top: 1px solid #e5e5e5;
	border-bottom: 3px double #e5e5e5;
}

.instructor .phone:hover {
	color: white;
	background-color: black;
}

.instructor .phone .crm {
	font-size: 0.7em;
	font-style: italic;
	color: #999999;
}*/





ul.contact-info {
	margin: 12px -2px;
	padding: 7px;
	list-style: none;

	font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: right;
	
	background-color: #f4f4f4;
	border: 2px solid white;

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

ul.contact-info li {display: inline; padding: 8px 0; font-size: 11px;}

ul.contact-info li.descriptor {
	/*display: none;
	margin: -10px;
	margin-bottom: 10px;
	padding: 6px 10px;*/
	
	/*display: none;*/

	/*height: 1.2em;*/

	padding: 8px;
	margin: -7px;

	float: left;
	
	color: #585752;
	/*text-transform: uppercase;*/
	font-size: 10px;
	font-weight: bold;
	/*line-height: 13px;*/

	/*border-bottom: 1px solid #d5d5cb;
	background-color: #efebdf;*/

	/*border-bottom: 1px solid #d5d5cb;
	background-color: white;*/

	/*background-color: #585752;*/ /*dark grey*/
	background-color: #e9e9e9;
	border-right: 1px solid white;

-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}

ul.contact-info li.email {margin-right: 7px; padding-right: 7px; border-right: 1px solid white;}

/*This is part of the attempt to avoid a flashing of un-linkified email addresses. The other part of this is jQuery found in "crm.com-javascripts.js".*/
ul.contact-info li.mailto-hide span {display: none;}

ul.contact-info li.phone {color: #52514d; font-weight: bold; white-space: nowrap;}

















.instructor .backtotop {
	display: block;		
	margin-top: 10px;
	padding: 4px 0 6px 5px;


	font-size: .8em;
/*		text-transform: uppercase;*/
	
}

.instructor .backtotop a { color: gray; text-decoration: none; font-style: italic; }







#instructorsList {
	float: right;
	/*width: 165px;*/
	width: 180px;
	margin: 00px 30px 0 0;
/*		padding: 20px 0 0 15px;*/
/*		padding: 15px 10px 0px 10px;*/
	
	border: 1px solid #d5d5cb;
	border-bottom: 3px solid #d5d5cb;
	background-color: #f6f3e7;
	
/*		background: url(../images/home-pullquotes-bg3.png) no-repeat -15px -2px;*/
}

.ie #instructorsList { margin-right: 15px; }

#instructorsList h2 {
	padding-left: 12px;
	padding-top: 9px;
	padding-bottom: 9px;
	
	margin-bottom: 10px;
	margin-top: 0px;
	
	font-style: italic;
	font-size: 120%;
	font-weight: normal;
	color: #7b7a71;
	
	border-bottom: 1px dotted #e2e2e2;
	background-color: #efebdf;
	
}

#instructorsList ul {
	list-style: none outside;
/*		margin: 2px 0 0px 0;*/
	padding: 4px 0 9px 13px;
	font-size: 100%;
/*		border-bottom: 1px dotted #e2e2e2;*/
}

#instructorsList ul li.instrument {
	color: #e97845;
	font-size: .8em;
	text-transform: uppercase;
	padding: 0px;
	margin: 0px;
}

/* 
For some reason <#instructorsList ul li> was <#instructorsList ul* li>. Reason at the time (pre 2009.03.23): "was a list of "#instructorsList ul.guitar li" before ul*. This way I doesn't have to add a class for each no instrument added to the list. Not to mention, no class is needed anymore"
*/

#instructorsList ul li {
	text-transform: none;
	color: #604234;
	font-size: 1.2em;
	line-height: 1.2em;
}

#instructorsList a.instrumentTitle:link		{ color: #e97845; text-decoration: none; }
#instructorsList a.instrumentTitle:visited	{ color: #e97845; text-decoration: none; }
#instructorsList a.instrumentTitle:hover	{ font-weight: bold; background-color: white; /*background-color: #f4eee1;*/ }

#instructorsList a:link		{ color: #604234; text-decoration: none; }
#instructorsList a:visited	{ color: #604234; text-decoration: none; }
#instructorsList a:hover	{ color: black; font-weight: bold; background-color: white; /*background-color: #f4eee1;*/ }