@charset "UTF-8";
/* CSS Document */

body {
    background-attachment: scroll;
	background-image: url(assets/images/header-pattern-01.jpg); /* header bgrnd at site top */
	background-repeat: repeat-x;
	background-position: left top;
    padding: 0;
	margin: 0;
	height: 100%;
    }
html {
	font-size: 100%;
	line-height: 1.5;
	background-image:url(assets/images/footer-pattern-01-shad.jpg); /* footer at site bottom */
	background-repeat:repeat-x;
	background-position:left bottom;
	background-attachment: scroll;
	margin: 0;
	padding: 0;
	position: relative;
	background-color: #f6f0e8; /* branding tan */
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
	}
#centerwrap {
	width: 100%;
	max-width: 1200px;
	height: 100%;
	margin: 0px auto 0 auto; /* top, right, bottom, left */
}
/* H TAGS, P TAG -------------------------- */
h1 {
	font-family: 'Crimson Text', serif;
	font-size: 150%;
	color: #4a235e;
	text-align: center;
	line-height: 150%;
	font-weight: normal;
	}
	
h2 {
	font-family: 'Lato', sans-serif;
	font-size: 110%;
	color: #843930; /* branding red-brown*/
	background-color: #Faf7f3; 
	text-align: left;
	line-height: 110%;
	font-weight: normal;
	padding: 13px 20px 13px 20px;
	letter-spacing: 0.15em;
	margin-bottom: 0;
	border-top: 1px solid #AC9EBB;
	border-bottom: 1px solid #AC9EBB;
	box-shadow: 0px 0px 22px rgba(173, 108, 85, 0.2); /* offset, spread, blur, color*/
	}
h3 {
    font-family: 'Crimson Text', serif;
	font-size: 140%;
	color: #4a235e; /* branding purple */
	text-align: left;
	line-height: 140%;
	font-weight: normal;
	padding: 25px 0 20px 0;
	margin: 0;
	}
h4 {
	font-family: 'Lato', sans-serif;
	font-size: 116%;
	text-align: left;
	font-weight: normal;
	line-height: 138%;
	padding: 10px 0 5px 0;
	margin: 0;
	color: #843930; /* branding red-brown*/
	}
h4.about {
	font-family: 'Lato', sans-serif;
	font-size: 116%;
	text-align: left;
	font-weight: normal;
	line-height: 138%;
	padding: 10px 0 5px 0;
	margin: 0;
	color: #843930; /* branding red-brown*/
	}
h5 {
	font-family: 'Lato', sans-serif;
	font-size: 109%;
	text-align: left;
	line-height: 135%;
	font-weight: normal;
	padding: 10px 0 5px 0;
	margin: 0;
	color: #843930; /* branding red-brown*/
	}
h6 {
	font-family: 'Lato', sans-serif;
	font-size: 95%;
	text-align: left;
	line-height: 135%;
	font-weight:600;
	padding: 10px 0 7px 0;
	margin: 0;
	color: #843930; /* branding red-brown*/
	letter-spacing: 0.2em;
	}
p  {
    font-family: 'Crimson Text', serif;
	font-size: 115%;
    line-height: 145%;
	color: #40264f;
	padding: 5px 0 15px 0;
	margin: 0;
	}
p a:link, p a:visited {
	color: #4a235e; /* branding purple */
	}
p a:hover, p a:active {
	color: #843930; /* branding red-brown*/
	text-decoration: none;
	}
p.app-address {
	color: #4a235e; /* branding purple */
	background-color: #EDE8E1;
	padding: 17px 0 20px 25px;
	margin-bottom: 30px;
	}

strong { 
    font-weight: 600; }
ul.page {
	margin:0; padding: 0 0 15px 30px;
		}
ul li.page {
	font-family: 'Crimson Text', serif;
	font-size: 115%;
    line-height: 145%;
	color: #40264f;
	padding: 00;
	margin: 0;}


/* SITE HEADER -------------------------- */
#header {
	width: 100%;
	height: 188px;
	}
#logo { 
	background-image: url(assets/images/header-logo.png);
	background-repeat: no-repeat;
	width: 325px;
	height: 181px;
	margin: 0 auto;
	}

/* MAIN NAVIGATION FOR DESKTOP/LAPTOP -------------------------- */
nav {
	width: 100%;
    font-family: 'Crimson Text', serif;
	font-size: 112%;
	position: relative;
	text-align: center;
	margin: 10px 0 0 0;
	height: 35px;	
	line-height: 35px;
}
nav ul {
	height: 35px;
	padding: 0;
    margin: 0 auto;	
}
nav ul li {
	display: inline;
	list-style-type: none;
    padding-left: 3.5%;
	padding-right: 3.5%;
	padding-top: 0;
	padding-bottom: 0;
	margin: 0;
	}
nav a:link, nav a:visited {
	color: #4a235e;
	display: inline-block;
	text-decoration: none;
}
nav a:hover, nav a:active, nav a#current {
	color: #843930;
	background-image: url(assets/images/nav-decoration.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}
nav a#pull {
    display: none;
} 
.clearfix:before,
.clearfix:after { /* http://www.hongkiat.com/blog/responsive-web-nav/ ---- */
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix { 
    *zoom: 1; 
}

/* HOMEPAGE LAYOUT------------- */
#heroimage {
	width:97%;
	margin: 0 auto;
	margin-top: 20px;
		}
#heroimage img {
	width:100%;
	box-shadow: 0px 0px 22px rgba(173, 108, 85, 0.6); /* offset, spread, blur, color*/
			}
#introtext {
    width: 65%;
	padding: 12px 17.5% 45px 17.5%;
	margin: 0 auto;
	}
p.dots {
    font-family: 'Crimson Text', serif;
	font-size: 140%;
	color: #4a235e;
	text-align: center;
	line-height: 20%;
	font-weight: normal;
	letter-spacing: 0.1em;
		}
/* INTERIOR PAGES LAYOUT------------- */

#page {
	margin: 20px 0 0 0;
	padding: 0 1.5% 60px 1.5%;
	}
#page img {
	width: 100%;
	margin-top: 15px;
	box-shadow: 0px 0px 22px rgba(173, 108, 85, 0.4); /* offset, spread, blur, color*/
}
#maincol {
	width: 71%;
	float: left;
	}
.pagetop { /* up arrow div */
	width: 30px;
	height: 30px;
	background-image: url(assets/images/up-arrow.png);
	background-repeat: no-repeat;
	margin-top: 10px;
	}
.pagetop:hover {
    background-image: url(assets/images/up-arrow-hover.png);
	background-repeat: no-repeat;
	-webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;	
	}
#sidecol {
	width: 23%;
	margin: 25px 0 0 2%;
	padding: 12px 2%;
	float: left;
	background-color: #EDE8E1;
	}

/* STYLED LINK BUTTONS----------------------- */

.button-link {
	font-family: 'Lato', sans-serif;
	font-size: 100%;
    line-height: 100%;
    padding: 8px 13px;
	background-color: #843930; /* branding red-brown*/
    color: #FFF;
	text-decoration: none;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.button-link:hover {
	background-color: #4a235e; /* branding purple*/
    text-decoration: none;
}
.button-link:active {
    -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	background-color: #4a235e; /* branding purple*/
}
.button-space {
	margin: 15px 0 25px 0;
	}
.about-button:link, .about-button:visited {
	font-family: 'Crimson Text', serif;
	font-size: 128%;
	color: #4a235e;
	text-decoration: none;
	background-color: #E8E5E8; /* tint of branding purple*/
	border-top: 1px solid #E2E0E3;/* tint of branding purple*/
	border-bottom: 1px solid #E2E0E3;/* tint of branding purple*/
	text-align: left;
	line-height: 128%;
	font-weight: normal;
	padding: 8px 18px 8px 18px;
	margin: 25px 18px 20px 0;
	float: left;
	-webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    transition-duration: 0.2s;
	}
.about-button:hover {
    color: #4a235e; /* branding purple*/
    border-top: 1px solid #AC9EBB;
	border-bottom: 1px solid #AC9EBB;
	}
.about-button:active, #about-buttoncurrent {
    color: #843930; /* branding red-brown*/
    border-top: 1px solid #AC9EBB;
	border-bottom: 1px solid #AC9EBB;
	}

	
/* PAGE FOOTER ------------------------------------- */ 
#footer {
	width: 95%;
	margin: 20px auto 0;
	clear: both;
	}
p.footertitle {
	font-family: 'Lato', sans-serif;
	font-weight:600;
	font-size: 95%;
	line-height: 165%;
	color: #843930;
	margin: 0;
	padding: 0 0 10px;
	letter-spacing: 0.2em;
		}
p.footer-org-name {
    font-family: 'Crimson Text', serif;
	font-size: 114%;
    line-height: 140%;
	color: #40264f;
	padding: 0;
	padding-bottom: 8px;
	margin: 0;
		}
p.footer {
    font-family: 'Crimson Text', serif;
	font-size: 108%;
    line-height: 140%;
	color: #40264f;
	padding: 0;
	margin: 0;
		}
p.footer a:link, p.footer a:visited { /* tel number link (seen in mobile) with no special styling */
	color: #40264f;
	text-decoration: none;
	}
p.footer a:hover, p.footer a:active{ 
	color: #843930; /* branding red-brown*/
	text-decoration: none;
	}
#footerleft {
	width: 40%;
	float: left;
	padding-top: .4%;
}
#contact-menu { /* mid col and right col are in their own div for media query re-positioning  */
float: right;
width: 60%;
	}
#footermid { /* address semantic tag */
width: 70%; 
float: left;
font-style: normal; 
}
#footerright { 
width: 30%; 
float: left;	 
}
#footerbottombar {
	width: 100%;
	clear: both;
	padding: 5px 0 18px 0; /* top right bottom left  */
    font-family: 'Crimson Text', serif;
	font-size: 85%;
	color: #4a235e;
}
#footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#footer ul li {
  font-family: 'Crimson Text', serif;
  font-size: 100%;
  line-height: 155%;
  height: 100%;
}
#footer ul li a {
  text-decoration: none;
  color: #40264f;
  display: inline;
}
#footer ul li a:hover {
  color: #8A493B;
}
#footer ul li a#footercurrent {
  color: #8A493B;
}
/* clearfix -------*/
.clearfix {
	width: 100%;
	clear: both;}
	
/* MEDIA QUERIES---------------------------------------------------- */

@media screen and (max-width:1024px), screen and (max-width:1024px) and (-webkit-device-pixel-ratio: 2) 
{   
body {background-image: none;}

#header {
	width: 100%;
	height: 160px;
	background-image:url(assets/images/header-pattern-01.jpg);
	background-repeat: repeat-x; 
	}
#logo { 
	background-image: url(assets/images/header-logo-sm.png);
	height: 155px;
	width: 278px;
	}
#introtext {
    width: 72%;
	padding: 5px 14% 50px; /* top, right and left, bottom */
	}
h1 {font-size: 142%; line-height: 152%;}
}
@media screen and (max-width:800px), screen and (max-width:800px) and (-webkit-device-pixel-ratio: 2) 
{   /* NON-MOBILE MENU, FOOTER TWO-COL WITH LOGO BOTTOM-CENTERED (800px includes Galaxy Tab S) */
#introtext {
    width: 75%;
	padding: 17px 12.5% 25px; /* top, right and left, bottom */
	}
#page {
	padding: 0 1.5% 20px 1.5%;
	}
	/* foooter ------ */
#maincol {
	width: 100%;
	float: none;
	}
#sidecol {
	display: none; /* side columns disappears at 768px wide*/
	}
	#footer {
	width: 100%;
	background-image:url(assets/images/footer-pattern-01.jpg); /* footer at site bottom */
	background-repeat:repeat;
	padding-top:25px;
}
#contact-menu { /* mid col and right col are in their own div for mobile re-positioning  */
    width: 90%;
	margin: 0 auto; /* top, left right, bottom */
	padding-bottom: 22px;
	border-bottom: thin solid #B09797;
	float: none;
	}
#footerleft {
    width: 90%;
	margin: 0 auto; /* top, left right, bottom */
	float: none;
	padding-top: 22px;
	clear: both;
}
#footerleft img {
	display: block;
	margin: 0 auto;}

#footerbottombar { 
    text-align: center;
    padding-top: 15px;
	background-image:url(assets/images/footer-shadow.png); 
	background-repeat:repeat-x;
	background-position:left bottom;
}
}

@media screen and (max-width:768px), screen and (max-width:768px) and (-webkit-device-pixel-ratio: 2) 
{   /* NON-MOBILE MENU */
html {
	background-image: none;
	}

#introtext {
    width: 90%;
	padding: 5px 5% 5px; /* top, right and left, bottom */
	}
h1 {font-size: 140%; line-height: 152%;}

.about-button:link, .about-button:visited {
	font-size: 122%;
	line-height: 122%;
	padding: 8px 13px 8px 13px;
	margin: 25px 12px 12px 0;
	}
.about-button:hover {
	color: #FFF;
    background-color: #843930; /* branding red-brown*/
	}
.about-button:active, #about-buttoncurrent {
    color: #FFF;
    background-color: #4a235e; /* branding purple*/
	}
}

@media screen and (max-width:640px), screen and (max-width:640px) and (-webkit-device-pixel-ratio: 2) 
{   /* MOBILE HAMBURGER NAV STARTS, STILL 2-COL FOOTER WITH LOGO BOTTOM-CENTERED ------ */
html {
	font-size: 100%;
	background-image: none;
	}
 
 nav a#pull { /* menu bar before it gets expanded--- */
	display: block;
	color: #f9f2ea;
	background-color: #843930; /* branding red-brown*/
	width: 100%;
	position: relative;
	border: 0;
	height: 45px;
    }
 nav a#pull:after { /* 'hamburger' icon appearance--- */
    content:"";
    background: url(assets/images/nav-icon.png) no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 14px;
    top: 12px;
    }
nav { /* shows when expanded*/
    background-color: #e9e8ea; /* light tint of branding purple*/
	height: auto;
	margin: 0;
    }
nav ul {
	height: auto;
	display: none;
	border-bottom: 4px solid #843930; /* shows along bottom of drop-down menu*/
}
nav ul li {
	display: block;
	list-style-type: none;
	text-align: left;
	float: left;
	width: 50%;
	position: relative;
	margin: 0;
	padding: 0;
	}
nav a:link, nav a:visited {
	color: #4a235e; /* branding purple*/
	display: inline-block;
	text-align: left;
	line-height: 45px;
	height: 45px;
	text-decoration: none;
	border-bottom: 2px solid #FFF;
    border-right: 2px solid #FFF;
	box-sizing: border-box;
	text-indent: 15px;
	width: 100%;
}
nav li:last-child, nav li:last-child a:link, nav li:last-child a:visited {
	border-bottom: none;
}
nav a:hover, nav a:active, nav a#current {
	background-image: none;
	background-color: #dfdee0;
	}
}
@media screen and (max-width:568px), screen and (max-width:568px) and (-webkit-device-pixel-ratio: 2) 
{   /* iPhone 5, SE landscape width*/
html {
	font-size: 110%;
	background-image: none;
	}
.about-button:link, .about-button:visited { /* decrease about buttons to offset html percentage increase */
	font-size: 112%;
	line-height: 112%;
	padding: 8px 13px 8px 13px;
	margin: 25px 12px 12px 0;
	}
}

@media screen and (max-width:480px), screen and (max-width:480px) and (-webkit-device-pixel-ratio: 2) 
{   /* footer columns are vertically stacked */
h1 {
	font-size: 135%;
	line-height: 140%;
	}
#homesection { padding-bottom: 7px; }
.about-button:link, .about-button:visited {
	font-size: 118%; /* increase about button text size a bit */
	line-height: 118%;
	padding: 7px 0 7px 0;
	margin: 10px 0 0 0;
	width: 100%;
	display: block;
	text-align: center;
	}
.about-button:hover {
	color: #FFF;
    background-color: #843930; /* branding red-brown*/
	}
.about-button:active, #about-buttoncurrent {
    color: #FFF;
    background-color: #4a235e; /* branding purple*/
	}

#footermid, #footerright {
	width: 100%;
	float: none;
	text-align: center;
	}
	#footermid {
	padding-bottom: 20px;
	}
}
@media screen and (max-width:415px), screen and (max-width:415px) and (-webkit-device-pixel-ratio: 2) 
{   

h4.about {
	padding: 20px 0 5px 0;
	}
p.app-address {
	padding: 17px 0 20px 15px;
	}
}
@media screen and (max-width:320px), screen and (max-width:320px) and (-webkit-device-pixel-ratio: 2) 
{  
nav ul li {
	width: 100%; /* hamburger menu switches from two li's wide to vertical list */
	}
	p.app-address {
	padding: 17px 0 20px 10px;
	}

}