/* CSS Document */

html {
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-weight: normal;
}

body	{
	color: #006;
	background-color: #fff;
	margin: 0 2px 0 2px;
	padding: 0;
	}

* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}


#wrapper	{
/*contains all parts of body*/
	width: 93.75%;
	margin: 0 auto;
	margin-top: 10px;
	border: 3px solid #601f40/*#00f*/ /*#36f*/;
	min-width: 300px;
	max-width: 1200px;
	min-height: auto;
	height: auto;
	/*next 2 lines make wrapper border corners rounded*/
	-moz-border-radius: 10px;
	border-radius: 10px;
	}

#content	{
   background-color: #FFF;
   margin: 10px;
   padding: 5px 5px 5px 0px;
   max-width: 100%;
   height: auto;
}
  
@media only screen and (min-width: 768px) {
	  /* For desktop */
  /*horizontal navbar*/
	  #navbar	{
		  text-align: center;
		  margin: 0 auto;
		  max-width: none;
		  height: auto;
	  }
	  .slicknav_menu {
		  display: none;
	  }
		  [class*="col-"] {
		float: left;
		padding: 5px 15px 5px 15px;
}

	  ul#nav {
		  display: inline-flex;
		  font-family: 'Eagle Lake', cursive;
		  color: #601f40/*#066*/;
		  margin: 5px;
		  font-size: 1em;
		  text-align: left;
		  }	
	  ul.drop a {
		  text-decoration: none;
		  }
	  ul.drop, ul.drop li, ul.drop ul {
		  list-style: none; margin: 0; padding: 0; color: #601f40 /*#066*/;
		  }
	  ul.drop {
	  	position: relative;
		  z-index: inherit;
		  }
	  ul.drop li {
		  line-height: 1.2em;
		  vertical-align: middle;
		  padding: 5px 10px;
  	    	position: relative;
		  }
	  ul.drop li.hover, ul.drop li:hover {
		  position: relative;
		  z-index: inherit;
		  cursor: default;
		  background: #9cf;
		  }
	  ul.drop ul {
		  visibility: hidden;
		  position: absolute;
		  top: 100%; left: 0;
		  /*z-index: 398; */
		  width: inherit;
		  background-color: #F0F8FF;
		  border: 1px solid #fff;
		  }
	  ul.drop ul li {
		  float: none;
		  width: 175px;
		  }
	  /*ul.drop ul ul { top: -2px; left: 100%; }*/
	  ul.drop li:hover > ul {
		  visibility: visible
		  }
	  /*end horizontal navbar*/
	  
	  /* for desktop */
	  .col-1 {width: 8.33%;}
	  .col-2 {width: 16.66%;}
	  .col-3 {width: 25%;}
	  .col-4 {width: 33.33%;}
	  .col-5 {width: 41.66%;}
	  .col-6 {width: 50%;}
	  .col-7 {width: 58.33%;}
	  .col-8 {width: 66.66%;}
	  .col-9 {width: 75%;}
	  .col-10 {width: 83.33%;}
	  .col-11 {width: 91.66%;}
	  .col-12 {width: 100%;}	  
}


h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-top: 0;
	font-size: 1.7em;
	line-height: 150%;
	color: #6edc4d8/*#006*/;
	text-shadow: 5px 5px 5px #edc4d8/*#B2B2D1*/;	
	text-align: center;
	font-weight: bold;
}
h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 125%;
	line-height: 125%;
	color:#000;
	text-align: center;
	font-weight: bold;
}
h3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 105%;
	margin-bottom: 0;
	/*text-align: center;*/
}
h4 {
	font-size: 100%;
	text-align: center;
	font-style: italic;
}

/* next 2 styles for map links*/
h5	{
	font-size: 100%;
	font-weight: 100;
	margin-top: 2px;
	margin-bottom: 0px;
	/*text-align: center;	*/
}
h5 + p	{
	margin-top: 0px;
	text-align: left;	
}
p	{
	font-size: 100%;
	line-height: 125%;
}

ul.bullet	{
	font-size: 100%;
	list-style-type: square;
}
ul	{
	list-style-type: none;
}
.text-list	{
	margin: 0;
	color: #006;
}
.instrument	{
  	font-weight: 300;
	font-style: italic;
	color: #606;
}

.center	{
	text-align: center;
	}
#center	{
	margin: auto;
}

.small	{
	font-size: 75%;
	margin-top: 0px;
}


/* 4 links for CONTENT*/
a:link {
	color: #892a58/*#1e7c9a*/;
	text-decoration: underline;
}
a:visited {
	color: #699;
	text-decoration: none;
}
a:hover,  a:focus {
	text-decoration: none;
	color: #FFF;
	background-color: #9cc;
}
a:active {
	text-decoration: none;
	color: #600;
}
/* end of links*/

/*links for NAVBAR*/
#navbar a:link {
	color: #601f40/*#066*/;
	text-decoration: none;
	}
#navbar a:visited {
	color: #601f40 /*#066*/;
	text-decoration: none;
	}
#navbar a:hover,  a:focus {
	text-decoration: none;
	color: #FFF;
	background-color: #99ccff;
	}
#navbar a:active {
	text-decoration: none;
	color: #600;
	}

/*link for js menu */
  #navbar .slicknav_menu a {
	color: #000;
  }


.photo	{
/*controls photo and caption relationship*/
	text-align: center;
	display: inline-block;
	margin: 0 3px 0 3px;
	vertical-align: top;
}	
.photocap	{
/*captions under photos*/
	margin-top: 0;
	margin-bottom: 10px;
	font-family: Garamond, serif;
	font-size: .9em;
	text-align: center;
}
.photo img	{
/*supplies white & burgundy borders around photos*/
	max-width: 100%;
	height: auto;
	display: block;
	margin-bottom: 0px;
	background-color: white;
	padding: 4px;
	border: 4px solid #601f40 /*#006*/;
	/*next 2 lines make wrapper border corners rounded*/
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.logo img{
  /* For home page logo */
	max-width: 100%;
	height: auto;
	float: left;
	margin: 15px 10px 0px 0px;
}


.left-pane{
	width: 50%;
	float: left;
}
.right-pane{
	width: 50%;
	float: left;
}


@media only screen and (max-width: 768px) {
	/* For mobile phones hamburger */
	  body {
		  background-color: inherit;
	  }
	  .logo img	{
		  display: none;
	  }
	  ul#nav {
		  display: none;
	  }
	  div.slicknav_menu {
		  text-align: center;
		  background: #0973dc /*#699*/;
	  }
	  a.slicknav_btn {
		  float: none;
		  display: inline-block;
		  background: #601f40 /*#066*/;
	  }	
	  .slicknav_nav {
		  text-align: left;
	  }

	  [class*="col-"] {
		  width: 100%;
    	  padding: 5px 15px 5px 15px;
	  }
}
	
html {
	background-size: cover !important;
}

#header	{
	width: auto;
	height: auto;
} 
#header > p	{
	font-family: 'Eagle Lake', cursive;
	color: #601f40/*#066*/;
    font-size: 45px;
	line-height: 200%;
    text-align: center;
    text-shadow: 3px 3px #f9ecf2/*grey*/;
	margin: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e6f5ff+0,60abf8+50,99d6ff+100 */
background: #e6f5ff; /* Old browsers */
background: -moz-linear-gradient(top, #e6f5ff 0%, #60abf8 50%, #99d6ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e6f5ff 0%,#60abf8 50%,#99d6ff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e6f5ff 0%,#60abf8 50%,#99d6ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f5ff', endColorstr='#99d6ff',GradientType=0 ); /* IE6-9 */	
	
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5fafb+0,e3f1f3+43,ebf4f5+64,fafbfc+100 */
/*background: #f5fafb; *//* Old browsers */
/*background: -moz-linear-gradient(top, hsl(190,43%,97%) 0%, hsl(187,40%,92%) 43%, hsl(186,33%,94%) 64%, hsl(210,25%,98%) 100%);*/ /* FF3.6-15 */
/*background: -webkit-linear-gradient(top, hsl(190,43%,97%) 0%,hsl(187,40%,92%) 43%,hsl(186,33%,94%) 64%,hsl(210,25%,98%) 100%);*/ /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(to bottom, hsl(190,43%,97%) 0%,hsl(187,40%,92%) 43%,hsl(186,33%,94%) 64%,hsl(210,25%,98%) 100%); *//* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5fafb', endColorstr='#fafbfc',GradientType=0 );*/ /* IE6-9 */
}

#footer	{
	clear: both;
	font-family: inherit;
	color: #fff;
	text-align: center;
	font-size: .65em;
	background-color: #99d6ff/*#9cc*/;
	padding: 3px;
	max-width: 1200px;
}
#footer > p >a{
	color: #601f40 /*#066*/;
	text-decoration: underline;
}
#footer > p {
	color: black;
}