/*----------HOOVER CSS version 5 2016042701 jbh ----------*/
/* top, right, bottom, left > trbl - tarball */

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.1 | 20161028
    License: none (public domain)
*/

/* link: FD7C2C */

/* HTML5 display-role reset for older browsers */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {

	margin: 0;
	padding: 0;
	font: inherit;
	font-size: 100%;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-spacing: 0;
	border-collapse: collapse;
}

/*----------BASIC ELEMENTS----------*/

html

{
	margin: 0;
	padding: 0;
}

body {
	font: "Lucida Grande", sans-serif;
    font-size: 14pt;
	font-weight: normal;
	line-height:  1.2;
	background: #FFF;
}
a:link {
	font-weight: bold;
	text-decoration: none;
	color: #4F982E /* #995301; ff9900*/
}
a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #30652A; /* DD7700 */
}

/* typical body text */

p, p.header_label {
	font:100%/28px 'Open Sans', "Helvetica Neue", "Lucida Grande", Helvetica, sans-serif;
	font-weight:200;
	color:#333;
	line-height:1.3;
	margin: 0px 20px 0px 20px;
	padding: 0px 0px 20px 0px;
}
p.teacher {
	margin-right:30%;	
}
p.teacher_point {
	padding-left: 11px;
  	text-indent: -11px;
  	line-height: 1.2;	
	padding-bottom: 8px;
}
p.header_label a {
	/* prevent webkit from auto bolding text */
    font-weight:normal;
}
p.header_label a:hover {
    font-weight:normal;
	/* link text */
    text-shadow:  0 0 3px yellow, 0 0 5px orange;
}
span.email, p.email {
	display: inline-block;
	padding: 5px 10px 7px 10px;
	border: 3px solid #666;
	border-radius:7px;
	margin: 7px 0px 0px 0px;
	vertical-align:center;
}

/* currently not used? */
p.caption {
	background-color:#688;
	color:#fff;
	display: inline;
	border: 1px solid #567;
	font-size: 60%;
	font-weight:200;
	font-style:italic;
	line-height:0;
	letter-spacing: 2px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	padding: 22px 20px 10px 20px;
	position:relative;
	z-index:0;
}
p.callout {
	font-size: 150%;
	text-align:center;
	color: #000;
	padding: 10px 0px 10px 0px;
	max-width:80%;
	margin:0px auto 0px auto;
}
p.center {
	text-align:center;
}
p.search {
	min-width:100px;
	max-width:300px;
	vertical-align:center;
	font-family: 'Tauri', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 400;
	font-size: 80%;
	color: #264F88;
	background-color:#F3F5F7; /*#264F88;*/
	border:1px solid #000;
	border-radius:4px;
	padding: 0px 20px;
	padding-bottom: 0px;
	margin-top: 4px;

	/* float:left; */
}
p.oval_button {
	font-weight:normal;
	text-align:left;
	color:#FFF;
	background-color: #a5b8da;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
	background-image: -webkit-linear-gradient(to top, #a5b8da, #7089b3);
	background-image: -moz-linear-gradient(to top, #a5b8da, #7089b3);
	background-image: -ms-linear-gradient(to top, #a5b8da, #7089b3);
	background-image: -o-linear-gradient(to top, #a5b8da, #7089b3);
	background-image: linear-gradient(to top, #a5b8da, #7089b3);
	border-top: 1px solid #758fba;
	border-right: 1px solid #6c84ab;
	border-bottom: 1px solid #5c6f91;
	border-left: 1px solid #6c84ab;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	line-height: 1;
	text-decoration:none;
	padding: 6px 20px;
	display:inline;
}
p.oval_button a {
	color:#FFF;	
}

quote {
	font-style: italic;
}

/*---------- HEADLINES (SECTION HEADERS) ----------*/

/* h1 header */
h1 {
	font-family: 'Euphoria Script', cursive;
	/*font-family: 'Tauri', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;*/
	font-size: 60px;
	font-weight:normal;
	letter-spacing:-1px;
	text-align: center;
	line-height: 1.2;
	color:#000;
	/* perhaps left/right margin should be zero to match text span? */
	margin: 0px;
	margin-bottom:20px;
	border: 0px;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	border-radius:0px;
}
/* h2 header */
h2  {
	margin: 0px 20px 5px 20px;
   	font-family: 'Tauri', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	font-size: 200%;
	color: #264F88;
	padding: 0px 0px 0px 0px;
	letter-spacing:-1px;
}

/* h3 header */
h3  {
	font-family: 'Tauri', Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 140%;
	font-weight:300;
	color: #555;
	margin: 0px 20px 0px 20px;
	padding: 0px 0px 10px 0px;
}
h3.center {
	text-align:center;
}
h3.center a:link {
	color:#5D58BD;
}
h3.center a:visited {
	color:#5D58BD;
}
hr {
	color:#666;
	background-color:#666;
	height:3px;
	border:none;
	margin: 10px 20px;
}
hr.dotline {
	background: url(all_images/site_images/tile002.png) repeat;	
	height:10px;
	border:none;
	margin: 10px 20px;
}
img {
	position:relative;
	z-index:1;
}
img.cinerama {
	width:100%;
	margin: 0px;
	padding: 0px 0px 20px 0px;
}
img.big {
	width:100%;
	min-width:100%;
	max-width:100%;
}
img.half {
	width:50%;	
}
img.two-thirds {
	width:67%;
}
img.teacher {
	float:right;
	width:28%;
	margin:0px 20px 20px 20px;
}

@media only screen and (max-width : 900px) {
	h1
	{
		margin: 0px 20px 20px 20px;
	}
	img.cinerama
	{
		width:100%;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    body {
        font-size: 24pt;
     }
	p {
		font:150% "Helvetica Neue", "Lucida Grande", Helvetica, sans-serif;
		line-height:1.3;
		padding: 0px 0px 40px 0px;
	}
	p.teacher {
		margin-right:0px;	
	}
	p.teacher_point {
		padding-left: 0px;
	  	text-indent: 0px;
	  	line-height: 1.3;	
		padding-bottom: 10px;
	}
	h1 {
		font-size: 300%;
	}
	/* heading will autobold on iphone if in link, and it looks bad (double image), so specify weight to avoid doubling of image */
	h1 a:link {
		font-weight: normal;	
	}
	h1 a:visited {
		font-weight: normal;	
	}
	h2 {
		font-size: 200%;
		font-weight:200;
		letter-spacing:-3px;
	}
	h3 {
		font-size: 160%;
		margin: 0px 20px 0px 20px;
		padding: 0px 0px 20px 0px;
	}
	hr.dotline {
		background:#444;
		color:#444;	
		height:3px;
		border:none;
		margin: 10px 20px;
	}
	img.cinerama
	{
		width:100%;
	}
	img.grow_map
	{
		width:100%;
		border:0px;
	}
}

/*----------USEFUL DIVS----------*/

/*----------CONTACT PAGE----------*/
#supersize-text {
	font-size: 120%;
}
/*----------...----------*/
#top_and_bottom_space {
	padding: 40px 0px;
}
#gray_backing {
	background-color:#EDEDED;	
}

/*----------KINDS OF TABLES----------*/

table.center {
	margin: 0px auto; /* Right and left margin widths set to "auto" */
}
table.cinerama {
	width: 100%;
}
/*
table.navButtons
{
	width: 100%;
	text-align: center;	
}
*/

/* TODO: MOVE TO HIGHLIGHTS DIV SECTION */
/*
td.highlights_big_image
{
	width: 60%;
	vertical-align:top;
	text-align:left;
	padding:0px 30px 0px 30px;
}
td.highlights_smaller
{
	width:30%;
	vertical-align:top;
	text-align:center;
	padding:0px 30px 0px 0px;
}
td.highlights_list
{
	width: 50%;
	vertical-align: center;
}
ul.highlights_list
{
	line-height:1.0;
	padding:0px 20px 0px 0px;
	list-style-type:none;
}
*/

/*
#textTable {}
#textTable table {}
#textTable table td {
	vertical-align:top;
	padding: 0px 15px 0px 15px;
}
*/

/*----------HEADER (LOGO + INFO) / TOP----------20160620JH */

#navTop {	
	margin: 0px 0px 0px 0px;
	/* below allows gradient/background to extend to end of floated element; */
    overflow:hidden; 
	/* background: linear-gradient(to bottom, rgba(65,110,171,.8), rgba(0,68,117,0)), url(all_images/site_images/nav_back.jpg); */

	/* gradient */
	/* from http://colorzilla.com/gradient-editor/ */
	background: #004475; /* Old browsers */
	background: -moz-linear-gradient(top, #004475 0%, #416eab 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #004475 0%,#416eab 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #004475 0%,#416eab 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	/* below example to use e.g. season banner
	background: url(all_images/site_images/nav_back.jpg) repeat 0px 0px #fff; */
}

/*-- index header splash--*/

#navTop_index {	
	background: url(all_images/index_images_temp/band_image.jpg) no-repeat 0px 0px #fff;
	-moz-border-image: url(all_images/index_images_temp/band_image.jpg) 0;
	background-size:cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
}
#navTop_index_indent {	
	margin-left:10%;
	margin-top:250px;
	padding-bottom:50px;
}
#navTop_index h1 {	
	font-family: 'Tauri', sans-serif;
 	font-size: 80px;
	font-weight:normal;
	color:orange;
	text-align:left;
    text-shadow: 1px 1px 4px #000;
	margin-bottom:0px;
	margin-left:20px;
	border:0;
}
#navTop_index h2 {	
	font-family: 'Tauri', sans-serif;
 	font-size:40px;
	font-weight:normal;
	color:#DDD;
 	text-align:left;
	text-shadow: 1px 1px 4px #000;
	line-height: 1;
}
#navTop_index p.square_button {
	font-weight:normal;
	font-size:200%;
	color:#FFF;
	line-height: 1.3;
	text-decoration:none;
	text-align:left;
	display:inline-block;
	margin-top:35px;
    text-shadow: 0px 0px 0px #000;
}
#navTop_index p.square_button a {
	padding: 15px;
	color:#FFF;
	font-weight:normal;
    text-shadow: 0px 0px 4px #000;
	background-color: orange;
	border-top: 6px solid orange;
	border-right: 6px solid orange;
	border-bottom: 6px solid orange;
	border-left: 6px solid orange;
}
#navTop_index p.square_button a:hover {
	color:#FFF;	
	border-top: 6px solid white;
	border-right: 6px solid white;
	border-bottom: 6px solid white;
	border-left: 6px solid white;
}
/*-- mobile --*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#navTop_index {	
		background: url(all_images/index_images_temp/band_image_narrow.jpg) no-repeat 0px 0px #fff;
		-moz-border-image: url(all_images/index_images_temp/band_image_narrow.jpg) 0;
		background-size:cover;
		-webkit-background-size:cover;
		-o-background-size:cover;
	}
	#navTop_index_indent {	
		margin-top:280px;
		padding-bottom:20px;
	}
	#navTop_index h2 {	
	 	font-size:55px;
	}
}


#navTop p {
	color: #FFF;
	font-family: 'Tauri', sans-serif;
    text-shadow: 1px 1px 6px #000;
}
#navTop table {
	border-spacing:0;
	border-collapse:collapse;
}
#navTop table {
	width: auto;
    float: right;
	margin: 40px 0 0 10px;
	width: auto;
	border-spacing:0;
	border-collapse:collapse;
}

#navTop table td {
	text-align: right;
	vertical-align: center;
	text-decoration:none;
	font: 120% Helvetica, sans-serif;
	line-height:1;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
   -webkit-text-size-adjust: none;
}
#navTop table td a {
	color: #FFF;
	text-decoration:none;
}
/*----------logo image is 2x; css is .5x (for clarity on retina screens)----------20170511JH */
#navTop img.logo {
	margin: 20px 0 0 10px;
	width: 350px;
	height: 156px;
}
/*----------set logo height and width here explicitly to prevent bad aspect ratio (fix me: what is proper fix?)----------20171110KH */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#navTop img.logo {
	    display: block;
		margin: auto;
		width: 480px;
		height: 211px;
		padding-top:30px;
	}
	#navTop table {
		float: none;
		margin: 0;
		width: 100%;
		margin: 0 0 0 0;
	}
	#navTop table td {
		text-align: center;
	}
}
@media only screen and (max-width : 900px) {
	#navTop img.logo {
	    display: block;
		margin: 30px auto;
		width: 350px;
	}
	#navTop table {
		float: none;
		margin: 0;
		width: 100%;
		margin: -30px 0 0 0;
	}
	#navTop table td {
		text-align: center;
		font-size: 100%;
		padding: 0;
	}
}

/*----------BBB + social badges----------20160620JH */

#button_bar
{
	padding: 5px 10px 0 25px;
    overflow:hidden;
    background-color:#fff;
}
#button_bar p.right
{
	text-align:right;
	float:right;
}

#button_bar img.social {
	width:52px;	
	height:52px;
	border: 4px solid;
	border-color:#FFF;
	border-radius: 8px;
}

#button_bar img.social:hover {
	width:52px;
	height:52px;
	border: 4px solid;
	border-color:#FD7C2C;
	border-radius: 8px;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#button_bar img.social {
		width:120px;	
		height:120px;
		border: 8px solid;
		border-color:#FFF;
		border-radius: 16px;
		margin-right:20px;
	}
	
	#button_bar img.social:hover {
		width:120px;
		height:120px;
		border: 8px solid;
		border-color:#FD7C2C;
		border-radius: 16px;
	}
	#button_bar p.right
	{
		text-align:right;
	}
	img.bbb {
		margin-top:30px;
		width:400px;
		height:80px;	
	}

}

/*----------HIGHLIGHT FOR INDEX PAGE ----------20160620JH */
/* REALLY IMPORTANT: A BUTTON WILL NOT CENTER ALIGN BY ITSELF UNLESS THERE IS AT LEAST ONE CHAR NEXT TO IT :-( */

#big_news_index {
	background-color:#FFF;
	padding-top:30px;
}

#big_news_index p.label {
	font-family: 'Euphoria Script', cursive;
	font-size: 60px;
	font-weight:normal;
	text-align:center;
}
#big_news_index a.label {
	border: 0px;
	border-top: 4px solid #000;
	border-bottom: 4px solid #000;
	border-radius:0px;
	color:#000;
	background-image:none;
	background-color:#FFF;
	font-weight:normal;
}
#big_news_index a.label:hover {
	/* link text */
	background-color:#FD7C2C;
	border-top: 4px solid #FD7C2C;
	border-bottom: 4px solid #FD7C2C;
}
#big_news_index a.label:active {
	background-color:#777;
}
#big_news_index img {
	height: 60%;
	vertical-align:middle;
	margin: 10px 10px 0px 6px;
	padding: 0px 0px 12px 0px;
}
#big_news_index img.round_button
{
	height:120px;
	vertical-align:middle;
}
@media only screen and (max-width : 900px) {
	#big_news_index p.label {
		font-size: 35px;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    #big_news_index p.label {
		font-size:300%;
		font-weight:normal;
		text-align:center;
	}
}

/*---------- NEW STUFF (HIGHLIGHTS) ----------*/

#highlights {
	color:#333;
}

#highlights img {
	vertical-align:middle;
}

#highlights img.main {
	border-bottom: 2px solid #688;
}

#highlights table {

}

#highlights_buttons {
	text-align:center;
	line-height:  1.2;
}

#highlights_buttons a {
	color: #DD7700;
	float:left;
	border: 4px solid transparent;
	vertical-align:middle;
	text-align: left;
	margin: 0px 0px 10px 20px;
	padding: 0px 0px 0px 0px;
	display: block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	text-decoration:none;

}
#highlights_buttons a:hover {

}
#highlights_buttons img {
	vertical-align:middle;
}

/* NEEDED? */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#highlights {
		font-size:100%;
	}
}

/*----------BIG BUTTONS FOR TOPICS----------20160620JH*/
/* -- e.g. Lessons, Rentals, Repairs-- */

#big_nav_buttons {
	margin-bottom:30px;
}
#big_nav_buttons table {
	width:33%; /* 100% */
	/* height:480px; 20180626-3 fix min button height; 20180629-1 makes buttons very tall on mobile */
	float:left;
	border:1px solid #EDEDED;
}
#big_nav_buttons table:hover {
	background: url(all_images/site_images/tile001.png) repeat;
	border:1px solid #000;
}
#big_nav_buttons td {
	width: 33%;
	vertical-align:top;
	text-align:center;
	padding:0px;
}
#big_nav_buttons p.nav_label {
	color:#3180B5; /* #547E93; */
	font-family: 'Open Sans', sans-serif;
	font-size:225%;
}
#big_nav_buttons p.info {
	text-align:center;
	margin: -20px auto 20px auto;
	width:70%;
	padding: 0 0 0 0;
	color: #335363;
	font-family: 'Open Sans', sans-serif;
	font-size:100%;
}
#big_nav_buttons img {
	margin-top:10%;
	width:62%;
}
#big_nav_buttons img.divider {
	margin-top:0px;
}

@media only screen and (max-width : 900px) {
	#big_nav_buttons p.info {
		font-size:62%;
		width:80%;
	}
	#big_nav_buttons p.nav_label {
		font-size:100%;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#big_nav_buttons table {
		float:none;
		width:100%;
		border-bottom: 1px solid #666;
		border-top: 1px solid #666;
		border-radius:0px;
		background: url(all_images/site_images/tile001.png) repeat;
	}
	#big_nav_buttons td {
		vertical-align:center;
	}
	#big_nav_buttons img {
		float:right;
		width:40%;
		margin:20px;
	}
	#big_nav_buttons p.nav_label
	{
		color: #21343B;
		font-family: 'Tauri', "Helvetica Neue", "Lucida Grande", Helvetica, sans-serif;
		/*font-family: 'Open Sans', sans-serif; */
		font-size:300%; /* 150% */
		margin:5px;
		padding:0px;
		letter-spacing:-3px;
	}
	#big_nav_buttons p.info
	{
		font:100% "Helvetica Neue", "Lucida Grande", Helvetica, sans-serif;
		padding: 0px 0px 0px 0px;
		color:#21343B;
		line-height:1.3;
		margin:0px 30px 0px 60px;
		width:auto;
	}
}

/* BIG BUTTONS FOR DEPARTMENTS */
/* -- e.g. Band, Orchestra, Guitars, Printed Music-- */

#dept_buttons
{
	margin-bottom:0px;
}
#dept_buttons table
{
	width:100%;
}
#dept_buttons td
{
	width: 20%;
	min-width: 20%;
	vertical-align:top;
	text-align:center;
	padding:2% 0px 0px 0px;
	margin-bottom:0px;
/* 	background-color:#345; */
	border: 15px solid #FFF;
  	/* border-radius: 50%; */
	
 }
#dept_buttons td.alpha {
	background-color:#0f6e74; /* #42AAB3; */
} 
#dept_buttons td.beta {
	background-color:#3E3F72; /* 5E5BB7; */
} 
#dept_buttons td.gamma {
	background-color:#004F96; /* 1A70F1; */
} 
#dept_buttons td.delta {
	background-color:#007041; /* 32AA4B; */
} 
#dept_buttons td:hover {
	background-color:#000;
}
#dept_buttons p.nav_label {
	/*color: #335363; */
	color:#FFF;
	font-family: 'Open Sans', sans-serif;
	font-size:140%;
	text-shadow: -1px 1px 2px #000;
	margin-bottom:40px;	
}
/* not used */
#dept_buttons p.info {
	text-align:center;
	margin: 0px auto 20 auto;
	width: 300px;
	padding: 0 0 0 0;
	color: #335363;
	font-family: 'Open Sans', sans-serif;
	font-size:100%;
}
#dept_buttons img {
	width:42%;
}
#dept_buttons h1 {
	color:#FFF;
	font-size:200%;
	border-top: 2px solid #FFF;
	border-bottom: 2px solid #FFF;
}

@media only screen and (max-width : 900px) {
	#dept_buttons p.info {
		font-size:62%;
		width:80%;
	}
	#dept_buttons p.nav_label {
		font-size:72%;
	}
	#dept_buttons h1 {
		color:#FFF;
		font-size:160%;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#dept_buttons p.nav_label {
		font-family: 'Open Sans', sans-serif;
		font-size:100%;
	}
	#dept_buttons p.info {
		font:70%/18px "Helvetica Neue", "Lucida Grande", Helvetica, sans-serif;
		padding: 0px 0px 0px 0px;
		color:#432200;
		line-height:1;
	}
	#dept_buttons img {
		width:80%;
	}
}

/* headers plus large clickable buttons 20160620JH*/

/* REALLY IMPORTANT: A BUTTON WILL NOT CENTER ALIGN BY ITSELF UNLESS THERE IS AT LEAST ONE CHAR NEXT TO IT */

#headers_plus_big_buttons table {
	width:100%;
	margin: auto;
	background-color:#fff;
}
#headers_plus_big_buttons td.large {
	width: 50%;
	vertical-align:top;
	text-align:center;
	padding:60px 0% 0px 0px;
}
#headers_plus_big_buttons td.small {
	width: 15%;
	vertical-align:top;
	text-align:center;
	padding:0px 0% 0px 0px;
}#headers_plus_big_buttons p.button {
	font-family: 'Tauri', sans-serif;
	font-size: 200%;
	font-weight:normal;
	color:#fff;
}
#headers_plus_big_buttons p.nav_label {
	color: #567D95;
	font-family: 'Tauri', sans-serif;
	font-size:200%;
	letter-spacing:-2px; 
}
#headers_plus_big_buttons p.info {
	margin-top: 0px;
	font-family: 'Tauri', sans-serif;
	font-size:100%;
	color: #2C1600;
}

#headers_plus_big_buttons a {
	color:#fff;
	padding:15px;
	-webkit-border-radius: 6px;
  	-moz-border-radius: 6px;
  	-ms-border-radius: 6px;
  	-o-border-radius: 6px;
  	border-radius: 6px;
	background-color: #ddd;
	text-decoration:none;
	border: 1px solid #444;
	border-top: 1px solid #FFF;
	background-color: #4f4f4f;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#888), to(#000));
	/*Saf4+, Chrome*/
	background-image: -webkit-linear-gradient(to top, #808080, #000000);
	background-image: -moz-linear-gradient(to top, #808080, #000000);
	background-image: -ms-linear-gradient(to top, #808080, #000000);
	background-image: -o-linear-gradient(to top, #808080, #000000);
	background-image: linear-gradient(to top, #808080, #000000);
}
#headers_plus_big_buttons img {
	height: 50px;
	vertical-align:middle;
}

#headers_plus_big_buttons a:hover {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFBA76), to(#FD7C2C));
	/*Saf4+, Chrome*/
	background-image: -webkit-linear-gradient(to top, #FFBA76, #FD7C2C);
	background-image: -moz-linear-gradient(to top, #FFBA76, #FD7C2C);
	background-image: -ms-linear-gradient(to top, #FFBA76, #FD7C2C);
	background-image: -o-linear-gradient(to top, #FFBA76, #FD7C2C);
background-image: linear-gradient(to top, #FFBA76, #FD7C2C);
}
#headers_plus_big_buttons a:active {
	 background-color: #4cb9c6;
	 background-image: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#ddd));
	/*Saf4+, Chrome*/
	 background-image: -webkit-linear-gradient(to top, #909090, #ddd);
	 background-image: -moz-linear-gradient(to top, #909090, #ddd);
	 background-image: -ms-linear-gradient(to top, #909090, #ddd);
	 background-image: -o-linear-gradient(to top, #909090, #ddd);
	 background-image: linear-gradient(to top, #909090, #ddd);
}
@media only screen and (max-width : 900px) {
	#headers_plus_big_buttons p.button {
		font-size: 100%;		
	}
	#headers_plus_big_buttons p.nav_label {
		font-size: 160%;		
	}
	#headers_plus_big_buttons p.info {
		font-size: 90%;		
	}
    #headers_plus_big_buttons img {
		max-height: 30px;
		vertical-align:middle;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 	#headers_plus_big_buttons p.button {
		font-size: 100%;
		margin-bottom:20px;
	}
   #headers_plus_big_buttons a {
		font-size:150%;
		font-weight: normal;	
    }
}

/*----------MISC DIV TYPES----------*/

#narrower_margin
{
	max-width: 67%;
	margin:0 auto;
	margin-bottom:40px;
}

#narrow_margin {
	max-width: 80%;
	margin:0 auto;
	margin-bottom:40px;
}
#faq {
	padding: 40px 0px;
	font-size:100%;
}
#faq p {
	line-height:1.3;
	color:#fff;
}
#faq h3 {
	margin-bottom:10px;
	padding-top:30px;	
}
#faq ul {
   	display: block;
    list-style-type: disc;
    margin-top: 30px;
    margin-bottom: 40px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
	color:#FFF
}
@media only screen and (max-width : 900px) {
	#narrow_margin
	{
		max-width: 100%;
		margin:0 auto;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     #faq {
		font-size:100%;
     }
     #faq table {
     	max-width:90%;
     	margin: 0 auto;
     }
	#twothirdscolumn {
		max-width: 90%;
	}
	#narrow_margin
	{
		max-width: 100%;
		margin:0 auto;
	}
}
#online_callout img {
	width: 50%;
	border-width: 5px;
	border-style: solid;
	border-color: #445566;
	border-bottom: 5px solid #112233;
	border-top: 5px solid #667788;
	border-radius: 12px;
	margin-top: 20px;
	margin-bottom: 20px;
}
#online_callout img:hover {
	border-color: #FF8F33;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#online_callout img {
		width: 90%;
	}
}
/*----------FOOTER---------- 20160620JH*/

#footer
{	
	margin: 0px 0px 0px 0px;
	/*below allows gradient/background to extend to end of floated element;*/
    overflow:hidden;    
	/*fallback*/
	background: #004475;
	/*background: -webkit-gradient(linear, left top, left bottom, from(#004475), to(#416EAB));
	background: -webkit-linear-gradient(to top, #004475, #416EAB);
	background: -moz-linear-gradient(to top, #004475, #416EAB#004475);
	background: -ms-linear-gradient(to top, #004475, #416EAB);
	background: -o-linear-gradient(to top, #004475, #416EAB); 
	background: linear-gradient(to top, #004475, #416EAB);*/
		
	/* from http://colorzilla.com/gradient-editor/ */
	background: #004475; /* Old browsers */
	background: -moz-linear-gradient(top, #416eab 0%,#004475 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #416eab 0%,#004475 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #416eab 0%,#004475 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#footer p
{
	color: #FFF;
	font-size: 100%;
	font-family: 'Tauri', sans-serif;
	text-shadow: 2px 1px 3px #000;
	line-height:1.4;
	margin-bottom: 20px;
	padding-bottom: 0px;
}
#footer p.footer_button {
	margin-bottom: 0px;
}
/* we use span because p.footer_button:hover just links the text, with the rest of the button not clickable */
#footer span.footer_button:hover {
	/* link text */
    text-shadow:  0 0 3px yellow, 0 0 5px orange;
}

#footer p a {
	color:#fff;
	/* specifying font weight prevents auto bolding by webkit for links */ 
	font-weight:normal;
}
#footer p a:hover {
	font-weight:normal;
	/* link text */
    /* text-shadow:  0 0 3px yellow, 0 0 5px orange; */
}
#footer table.float_left {
	/* Right and left margin widths set to "auto" */
	float:left;
	min-width:24%;
	width:24%;
}
#footer table.float_right {
	/* Right and left margin widths set to "auto" */
	float:right;
	min-width:25%;
}
#footer td.links {
	vertical-align:top;
	margin: 0;
	padding: 20px 20px 30px 30px;
}
#footer td.links_center {
	text-align:center;
	vertical-align: bottom;
	margin: 0;
	padding: 0;
	padding: 20px 20px 30px 0px;
}
#footer form.footer {
	margin: -20px 30px 0px 30px;
	padding:8px;
}
#copyright {	
	margin: 0px 0px 0px 0px;
	background: #004475;
}
#copyright p {
	text-align:center;
	font: 70%/10px Helvetica, Arial, sans-serif;
	color: #FFF;
	margin: 0px 8px 0px 0px;
	padding: 20px;
	line-height: 1.3;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#footer p {
		color: #FFF;
		font-size: 200%;
	}
	#footer table.float_right {
		float:left;
		min-width:100%;
		margin-left: 30px;
	}
	#footer table.float_left {
		min-width:100%;
	}
	#footer form.footer {
		margin: 0px;
		padding:30px;
		font-size: 200%;
	}
	/* makes a nice rectangular button, around which go the href brackets */
	/* we use span because p. just links the text, with the rest of the button not clickable */
	#footer span.footer_button
	{
		font-weight:normal;
		background-color: #a5b8da;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
		background-image: -webkit-linear-gradient(to top, #a5b8da, #7089b3);
		background-image: -moz-linear-gradient(to top, #a5b8da, #7089b3);
		background-image: -ms-linear-gradient(to top, #a5b8da, #7089b3);
		background-image: -o-linear-gradient(to top, #a5b8da, #7089b3);
		background-image: linear-gradient(to top, #a5b8da, #7089b3);
		border-top: 1px solid #758fba;
		border-right: 1px solid #6c84ab;
		border-bottom: 1px solid #5c6f91;
		border-left: 1px solid #6c84ab;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
		line-height: 2;
		text-align: center;
		text-decoration:none;
		margin: 20px 20% 40px 25px;
		padding: 0 0 0 0;
		display:block;
	}
}
@media only screen and (max-width : 900px) {
	#footer table.float_left {
		float:left;
		min-width:50%;
	}
	#footer table.float_right {
		float:none;
		min-width:51%;
	}
}

/*-- splash with header and button --*/

#buttonSplash_index {	
	/*
	background: url(all_images/index_images_temp/band_image.jpg) no-repeat 0px 0px #fff;
	-moz-border-image: url(all_images/index_images_temp/band_image.jpg) 0; */
	background: #000 url(all_images/index_images_temp/wordcloud.gif) no-repeat left;
	height:400px;
}

#buttonSplash_index_indent {	
	margin-left:40%;
	padding-top:10%;
	padding-bottom:20px;
	display:block;
}
#buttonSplash_index h1 {	
	font-family: 'Tauri', sans-serif;
 	font-size: 50px;
	font-weight:normal;
	color:orange;
	text-align:left;
    text-shadow: 1px 1px 2px #000;
	margin-bottom:0px;
	margin-left:20px;
	border:0;
	line-height: 1;
}
#buttonSplash_index h2 {	
	font-family: 'Tauri', sans-serif;
 	font-size:38px;
	font-weight:normal;
	color:#DDD;
 	text-align:left;
	text-shadow: 1px 1px 4px #000;
	line-height: 1.3;
}
#buttonSplash_index p.square_button {
	font-weight:normal;
	font-size:150%;
	color:#FFF;
	line-height: 1.3;
	text-decoration:none;
	text-align:left;
	display:inline-block;
	margin-top:35px;
    text-shadow: 0px 0px 0px #000;
}
#buttonSplash_index p.square_button a {
	padding: 15px;
	color:#FFF;
	font-weight:normal;
    text-shadow: 0px 0px 4px #000;
	background-color: orange;
	border-top: 6px solid orange;
	border-right: 6px solid orange;
	border-bottom: 6px solid orange;
	border-left: 6px solid orange;
}
#buttonSplash_index p.square_button a:hover {
	color:#FFF;	
	border-top: 6px solid white;
	border-right: 6px solid white;
	border-bottom: 6px solid white;
	border-left: 6px solid white;
}
/*
@media only screen and (max-width : 600px) {
	#buttonSplash_index_indent {	
		margin-left:20%;
		padding-top:45px;
	}
	#buttonSplash_index h1 {	
	 	//font-size: 30px;
	}
	#buttonSplash_index h2 {	
 		//font-size:20px;
	}
	#buttonSplash_index p.square_button {
		//font-size:100%;
	{
}
*/
@media only screen and (max-width : 900px) {
	#buttonSplash_index_indent {	
		margin-left:10%;
		padding-top:5px;
		padding-bottom:0px;
	}
}

/*-- mobile --*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#buttonSplash_index {	
		background: #000 url(all_images/index_images_temp/wordcloud.gif) 0 0 / 80px 80px no-repeat left;
	}
	#buttonSplash_index_indent {	
		margin-left:50%;
		padding-top:10px;
		padding-bottom:0px;
	}
	#buttonSplash_index h1 {	
	 	font-size: 60px;
	}
	#buttonSplash_index h2 {	
 		font-size:40px;
	}
	#buttonSplash_index p.square_button {
		font-size:90%;
	{
	#buttonSplash_index p.square_button a {
		padding: 20px;
	}
}

/*-- splash with header on left --*/

#buttonSplashLeft_index {	
	/*
	background: url(all_images/index_images_temp/band_image.jpg) no-repeat 0px 0px #fff;
	-moz-border-image: url(all_images/index_images_temp/band_image.jpg) 0; */
	background: #000 url(all_images/index_images_temp/christmas_guitar.jpg) no-repeat left;
	height:400px;
}

#buttonSplashLeft_index_indent {	
	margin-left:40%;
	padding-top:10%;
	padding-bottom:20px;
	display:block;
}
#buttonSplashLeft_index h1 {	
	font-family: 'Tauri', sans-serif;
 	font-size: 50px;
	font-weight:normal;
	color:orange;
	text-align:left;
    text-shadow: 1px 1px 2px #000;
	margin-bottom:0px;
	margin-left:20px;
	border:0;
	line-height: 1;
}
#buttonSplashLeft_index h2 {	
	font-family: 'Tauri', sans-serif;
 	font-size:38px;
	font-weight:normal;
	color:#A52932;
 	text-align:left;
	text-shadow: 1px 1px 4px #000;
	line-height: 1.3;
}
#buttonSplashLeft_index p.square_button {
	font-weight:normal;
	font-size:150%;
	color:#FFF;
	line-height: 1.3;
	text-decoration:none;
	text-align:left;
	display:inline-block;
	margin-top:35px;
    text-shadow: 0px 0px 0px #000;
}
#buttonSplashLeft_index p.square_button a {
	padding: 15px;
	color:#FFF;
	font-weight:normal;
    text-shadow: 0px 0px 4px #000;
	background-color: orange;
	border-top: 6px solid orange;
	border-right: 6px solid orange;
	border-bottom: 6px solid orange;
	border-left: 6px solid orange;
}
#buttonSplashLeft_index p.square_button a:hover {
	color:#FFF;	
	border-top: 6px solid white;
	border-right: 6px solid white;
	border-bottom: 6px solid white;
	border-left: 6px solid white;
}
/*
@media only screen and (max-width : 600px) {
	#buttonSplashLeft_index_indent {	
		margin-left:20%;
		padding-top:45px;
	}
	#buttonSplashLeft_index h1 {	
	 	//font-size: 30px;
	}
	#buttonSplashLeft_index h2 {	
 		//font-size:20px;
	}
	#buttonSplashLeft_index p.square_button {
		//font-size:100%;
	{
}
*/
@media only screen and (max-width : 900px) {
	#buttonSplashLeft_index_indent {	
		margin-left:10%;
		padding-top:5px;
		padding-bottom:0px;
	}
}

/*-- mobile --*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#buttonSplashLeft_index {	
		background: #000 url(all_images/index_images_temp/wordcloud.gif) 0 0 / 80px 80px no-repeat left;
	}
	#buttonSplashLeft_index_indent {	
		margin-left:50%;
		padding-top:10px;
		padding-bottom:0px;
	}
	#buttonSplashLeft_index h1 {	
	 	font-size: 60px;
	}
	#buttonSplashLeft_index h2 {	
 		font-size:40px;
	}
	#buttonSplashLeft_index p.square_button {
		font-size:90%;
	{
	#buttonSplashLeft_index p.square_button a {
		padding: 20px;
	}
}

/* --------------- MISC REUSEABLE DIV GRADIENTS ---------- */

#yellow_area_gradient {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#F7D917), to(#F0EBB0));
  background-image: -webkit-linear-gradient(to top, #F7D917, #F0EBB0);
  background-image: -moz-linear-gradient(to top, #F7D917, #F0EBB0);
  background-image: -ms-linear-gradient(to top, #F7D917, #F0EBB0);
  background-image: -o-linear-gradient(to top, #F7D917, #F0EBB0);
  background-image: linear-gradient(to top, #F7D917, #F0EBB0);
}

#orange_area_gradient {
	background-color: #B3C7E3;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FA9E0D), to(#FCC975));
	background-image: -webkit-linear-gradient(to top, #FA9E0D, #FCC975);
	background-image: -moz-linear-gradient(to top, #FA9E0D, #FCC975);
	background-image: -ms-linear-gradient(to top, #FA9E0D, #FCC975);
	background-image: -o-linear-gradient(to top, #FA9E0D, #FCC975);
	background-image: linear-gradient(to top, #FA9E0D, #FCC975);
}
#blue_area_gradient {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#81CDE4), to(#BEFFF6));
  background-image: -webkit-linear-gradient(to top, #81CDE4, #BEFFF6);
  background-image: -moz-linear-gradient(to top, #81CDE4, #BEFFF6);
  background-image: -ms-linear-gradient(to top, #81CDE4, #BEFFF6);
  background-image: -o-linear-gradient(to top, #81CDE4, #BEFFF6);
  background-image: linear-gradient(to top, #81CDE4, #BEFFF6);
}

#green_area_gradient {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#66D43D), to(#C4E3A1));
  background-image: -webkit-linear-gradient(to top, #66D43D, #C4E3A1);
  background-image: -moz-linear-gradient(to top, #66D43D, #C4E3A1);
  background-image: -ms-linear-gradient(to top, #66D43D, #C4E3A1);
  background-image: -o-linear-gradient(to top, #66D43D, #C4E3A1);
  background-image: linear-gradient(to top, #66D43D, #C4E3A1);
}

/* --------------- TOTALLY NOT USING THESE NOW ---------- */
/*
#nav_buttons_inactive a {
	//background: url(all_images/site_images/tab_usual.png) no-repeat 0 0;

	background-color:#AD6000;
	width: 158px;  //width: 158px;
	height: 40px;
	font: 16px/40px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
	color: #fff;
    text-shadow: 1px 1px 6px #000;
	text-decoration:none;
	letter-spacing: 1px;
	font-weight: bold;
	text-align: center;
	vertical-align: bottom;
	padding: 0px 0px 0px 0px;
	margin: 10px 8px 0px 0px;
	//horizontal buttons
	display: block;
	float: left;
	
  background-image: -webkit-gradient(linear, left top, left bottom, from(#416EAB), to(#004475));
  background-image: -webkit-linear-gradient(to top, #416EAB, #004475);
  background-image: -moz-linear-gradient(to top, #416EAB, #004475);
  background-image: -ms-linear-gradient(to top, #416EAB, #004475);
  background-image: -o-linear-gradient(to top, #416EAB, #004475);
  background-image: linear-gradient(to top, #416EAB, #004475);

	
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#nav_buttons_inactive a {
		width: 32%;  //width: 158px;
		height: 100px;
		font: 42px/100px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
	}
}
#nav_buttons_inactive a:hover
{
	//background: url(all_images/site_images/tab_hover.png) no-repeat 0 0;
	//background-color:transparent;
	background-color:#CE6609;

}
#nav_buttons_inactive a:active
{
	background-color:#FBF1C8;
	//background: url(all_images/site_images/tab_active.png) no-repeat 0 0;

}
#nav_button_active a
{
	
    background-color:#FFFEC1;
	width: 158px;
	height: 40px;
	font: 16px/40px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
	color:#333;
    text-shadow: 1px 0px 12px #FFF;
	//color: #ffff66;
	text-decoration:none;
	letter-spacing: 1px;
	font-weight: bold;
	text-align: center;
	vertical-align: bottom;
	padding: 0px 0px 0px 0px;
	margin: 10px 8px 0px 0px;
	//horizontal buttons
	display: block;
	float: left;
	
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));
  background-image: -webkit-linear-gradient(to top, #FFFFFF, #E6E6E6);
  background-image: -moz-linear-gradient(to top, #FFFFFF, #E6E6E6);
  background-image: -ms-linear-gradient(to top, #FFFFFF, #E6E6E6);
  background-image: -o-linear-gradient(to top, #FFFFFF, #E6E6E6);
  background-image: linear-gradient(to top, #FFFFFF, #E6E6E6);

}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#nav_button_active a {
		color: #333;
		width: 32%;  //width: 158px;
		height: 100px;
		font: 42px/100px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
	}
}
*/


/*---------- TEXT BUTTONS----------*/
/*
a.blue-pill {
  background-color: #a5b8da;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
  background-image: -webkit-linear-gradient(to top, #a5b8da, #7089b3);
  background-image: -moz-linear-gradient(to top, #a5b8da, #7089b3);
  background-image: -ms-linear-gradient(to top, #a5b8da, #7089b3);
  background-image: -o-linear-gradient(to top, #a5b8da, #7089b3);
  background-image: linear-gradient(to top, #a5b8da, #7089b3);
  border-top: 1px solid #758fba;
  border-right: 1px solid #6c84ab;
  border-bottom: 1px solid #5c6f91;
  border-left: 1px solid #6c84ab;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
  -moz-box-shadow: inset 0 1px 0 0 #aec3e5;
  -ms-box-shadow: inset 0 1px 0 0 #aec3e5;
  -o-box-shadow: inset 0 1px 0 0 #aec3e5;
  box-shadow: inset 0 1px 0 0 #aec3e5;
  color: #fff;
  font: 1em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: 0px 8px 0px 8px;
  text-align: center;
  text-shadow: 0 -1px 1px #64799e;
  text-decoration:none;
}

 a.blue-pill:active {
	border: 1px solid #546685;
	-webkit-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
	-moz-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
	-ms-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
	-o-box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;
	box-shadow: inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eeeeee;    
}
*/