/** Breakpoints used by Pure Framework
	Key		CSS Media Query								Applies		Classname
	None 	None 										Always 		.pure-u-*
	sm 		@media screen and (min-width: 35.5em) 		≥ 568px 	.pure-u-sm-*
	md 		@media screen and (min-width: 48em) 		≥ 768px 	.pure-u-md-*
	lg 		@media screen and (min-width: 64em) 		≥ 1024px 	.pure-u-lg-*
	xl 		@media screen and (min-width: 80em) 		≥ 1280px 	.pure-u-xl-*
**/ 

/**  Table of Contents

 * Ch01 - Resets
 * Ch02 - Typography
 * Ch03 - Page Structure
 * Ch04 - Header & Navigation
 * Ch05 - Content & Media
 * Ch06 - Footer
 * Ch07 - Miscellaneous & Forms
 * Ch08 - Print Styles
**/

/* Ch02 Typography  */

html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
  /* Set your content font stack here: */
  color: #444;
  font-family: Arial;
  font-feature-settings: "'liga' 1";
  font-kerning: auto;
  font-style: normal;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5em;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  word-spacing: 0;
}
h1, h2, h3, h4, h5, h6 {
  /* Set your content font stack here: */
    /* example font-family: Georgia, Times, "Times New Roman", serif; */
  color: #e4d0b4;
  font-family: "Istok Web", sans-serif;/*font-feature-settings: "'liga' 1";
    font-kerning: auto;
    font-style: normal;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.5em;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    word-spacing: 0;*/
}
p, label {
  color: #e4d0b4;
  font-family: Lora;
  font-feature-settings: "'liga' 1";
  font-kerning: auto;
  font-style: normal;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5em;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  word-spacing: 0;
}
body, h1, h2, h3, h4, h5, h6 { font-size-adjust: 0.5; }
body {
  font-size: 1em; /* equivalent to 16px */
  line-height: 1.25; /* equivalent to 20px */
}
h1 {
  font-size: 2em; /* 2x body copy size = 32px */
  line-height: 1.25; /* equivalent to 40px */
}
h2 {
  font-size: 1.625em; /* 1.625x body copy size = 26px */
  line-height: 1.15384615; /* 30px / 26px */
}
h3 {
  font-size: 1.375em; /* 1.375x body copy size = 22px */
  line-height: 1.13636364; /* 25px / 22px */
}
h4 {
  font-size: 1.125em; /* 1.125x body copy size = 18px */
  line-height: 1.11111111;
}
blockquote {
  font-size: 1.25em; /* 20px / 16px */
  line-height: 1.25; /* 25px / 20px */
}
 @media (min-width: 43.75em) {
body {
  font-size: 1em; /* equivalent to 16px */
  line-height: 1.375; /* equivalent to 22px */
}
h1 {
  font-size: 2.5em; /* 2.5x body copy size = 40px */
  line-height: 1.125;
}
h2 {
  font-size: 2em; /* 2x body copy size = 32px */
  line-height: 1.25;
}
h3 {
  font-size: 1.5em; /* 1.5x body copy size = 24px */
  line-height: 1.25;
  padding: 0 5px;
}
h4 {
  line-height: 1.22222222; /* (22px / 18px */
  padding: 0 5px;
}
blockquote {
  font-size: 1.5em; /* 24px / 16px = */
  line-height: 1.45833333; /* 35px / 24px */
}
p {
  font-size: 112.5%;
  padding: 0 5px;
}
}
 @media (min-width: 56.25em) {
h1 {
  font-size: 3em; /* 3x body copy size = 48px */
  line-height: 1.05; /* keep to a multiple of the 20px line height and something more appropriate for display headings */
}
h2 {
  font-size: 2.25em; /* 2.25x body copy size = 36px */
  line-height: 1.25;
}
h3 {
  font-size: 1.75em; /* 1.75x body copy size = 28px */
  line-height: 1.25;
  padding: 0 10px;
}
p {
  font-size: 125%;
  padding: 0 10px;
}
}
/* Ch03 Page Structure  */

body { /* responsive background image */ background: url(../images/common/background.jpg); }
.outer-div {
  max-width: 1000px;
  width: 100%;
  max-height: 2702px;
  height: 100%;
  margin: auto;
  margin-top: 100px;
  border: 1px solid #e4d0b4;
}
#index, #about { position: relative; }
#disclaimer p {
  position: absolute;
  bottom: 10px;
  left: 10px;
  max-width: 600px;
  width: 100%;
  height: 100px;
  overflow: auto;
  color: #e4d0b4;
}
@media screen and (max-width: 64em) {
#disclaimer { display: none; }
/* Style Disclaimer Popup Window */
#mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: #000;
  display: none;
}
#boxes .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 80%;
  height: 200px;
  display: none;
  z-index: 9999;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
}
#boxes #dialog {
  width: 80%;
  height: 800px;
  padding: 10px;
  background-color: #ffffff;
  font-family: 'Segoe UI Light', sans-serif;
  font-size: 15pt;
}
#boxes #dialog h5, #boxes #dialog h6 {color:black;}
#popupfoot {
  font-size: 1em;
  position: relative;
  bottom: 0px;
  width: 80%;
  margin: 0 auto;
}
a.close { text-decoration: underline; }
}
@media screen and (min-width: 64em) {
#boxes { display: none; }
}
@media screen and (max-width: 64em) {
#about, #gallerypage, #gallerypage2, #donation, #links, #contact, #thankyou, #bookme, #calendar {
  background-image: url(../images/common/backgroundheader.png);
  height: 145px;
}
}
@media screen and (min-width: 64em) {
#gallerypage2, #links, #contact, #thankyou {
  background-image: url(../images/common/background_about.jpg);
  height: 1002px;
}
#about, #gallerypage, #calendar {
  background-image: url(../images/common/background_gallery1.jpg);
  height: 1202px;
}
#donation, #bookme {
  background-image: url(../images/common/background_donation.jpg);
  height: 3202px;
}
.mobile-img { display: none; }
}
@media screen and (max-width: 64em) {
#cycler { display: none; }
#aboutpic {margin-top: -175px; }
#donationpic { margin-top: -400px; }
#linkspic { margin-top: -225px; }
#contactpic { margin-top: -125px; }
#bookmepic { margin-top: -225px; }
#marginthankyou { margin-bottom: 0px!important; }
}
@media screen and (min-width: 64em) {
#cycler { position: relative; }
#cycler img {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  opacity: .85
}
#cycler img.active { z-index: 3 }
}
#gallery, #gallery2 {
  width:100%;
  margin:auto;
}
#gallery, #marginbookme, #margincalendar {
  margin-top: 75px;
  margin-bottom: 100px;
}
#gallery2, #margindonation {
  margin-top: 75px;
  margin-bottom: 250px;
}
#marginabout { margin-bottom: 250px; }
#margindonation { margin-bottom: 475px; }
#marginlinks { margin-bottom: 275px!important; }
#margincontact { margin-bottom: 175px; }
#marginbookme { margin-bottom: 250px; }
#marginthankyou { margin-bottom: 800px; }
iframe { margin-top: 50px; }
#datecheck {margin:auto;}
/* Ch04 Header & Navigation  */

a, a:active, a:focus { outline: none; }
a:link {
  font-family: "Arial Black", Gadget, sans-serif;
  padding: 2px;
}
#gallery a:link, #gallery2 a:link { padding: 0; /* required for thumbnail gallery plugin */ }
a:visited {/* visited link */ color: purple; }
a:hover, a:focus {
  text-decoration: none;
  text-shadow: 0 0 2px #999;
}
a:active {/* selected link */
  color: red;
  text-decoration: underline;
  position: relative;
  top: 1px;
  left: 1px;
}
/* Mobile-compatible Responsive Dropdown Menu */
li#pressed { background-color: #e4d0b4; }
.toggle, [id^=drop] {
 display: none;
}
.nav li a {
  color: #07d2fb;
  font-family: 'Pacifico', cursive;
  font-feature-settings: "'liga' 1";
  font-kerning: auto;
  font-style: normal;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5em;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  word-spacing: 0;
}
.nav { margin-top: 135px; }
nav {
  margin: 0;
  padding: 0;
  background-color: #474344;
  opacity: 0.9;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
nav ul {
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;/*background-color: #254441;*/
}
nav a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
}
nav ul li ul li:hover { background: #615d5e; }
nav a:hover { text-shadow: 1px 1px #e4d0b4,  2px 2px #e4d0b4,  3px 3px #e4d0b4,  4px 4px #e4d0b4,  5px 5px #e4d0b4,  6px 6px #e4d0b4; }
nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
}
nav ul li:hover > ul { display: inherit; }
nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}
nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}
li > a:after { content: '\2193'; }
li > a:only-child:after { content: ''; }

/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {
nav { margin: 0; }
.toggle + a,  .menu { display: none; }
.toggle {
  display: block;
  background-color: #cbb79b;
  padding: 0 20px;
  color: #00b9e2;
  border: none;
  font-family: 'Pacifico', cursive;
  font-feature-settings: "'liga' 1";
  font-kerning: auto;
  font-style: normal;
  font-size: 1.1em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5em;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  word-spacing: 0;
}
.toggle:hover { background-color: #b19d81; }
[id^=drop]:checked + ul { display: block; }
nav ul li {
  display: block;
  width: 100%;
  padding: 3px 0;
}
nav ul ul .toggle,  nav ul ul a { padding: 0 40px; }
nav ul ul ul a { padding: 0 80px; }
nav a:hover,  nav ul ul ul a { background-color: #615d5e; }
nav ul li ul li .toggle,  nav ul ul a { background-color: #7a7677; }
nav ul ul {
  float: none;
  position: static;
  color: #ffffff;
}
nav ul ul li:hover > ul, nav ul li:hover > ul { display: none; }
nav ul ul li {
  display: block;
  width: 100%;
}
nav ul ul ul li { position: static; }
}
 @media all and (max-width : 330px) {
nav ul li {
  display: block;
  width: 94%;
}
}
@media (min-width: 43.75em) {
nav ul li { margin-left: 10px; /* center the nav links on desktop and tablet */ }
}
@media (min-width: 56.25em) {
nav ul li { margin-left: 25px; /* center the nav links on desktop and tablet */ }
}
 @media screen and (min-width: 48em) {
ul .lift { margin-top: -35px; /* lifts up the sub menu on desktop and tablet */ }
}
/* Back to Top Navigation */
.go-top {
  position: fixed;
  bottom: 2em;
  right: 2em;
  text-decoration: none;
  color: white;
  background-color: rgba(0,0,0,0.3);
  font-size: .75em; /* 13.5px, 12px, 9px */
  padding: 1em;
  display: none;
}
.go-top:hover {
  background-color: rgba(0,0,0,0.6);
  text-decoration: none;
}
/* Ch06 Footer  */

h6.center { text-align: center; }
h6.footer { color: #e4d0b4; }
/* Ch07 Miscellaneous & Forms */

/* Forms */
label { padding: 0 5px; }
#bookmeForm input, #bookmeForm textarea, #bookmeForm button { margin: 0 5px; }
#bookmeForm button { font-size: 125%; }
.clear { clear: both; }
.center { text-align: center; }
img.centered {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
a { outline: 0; }
/* No Javascript Warning */
#noscript-warning {
  font-family: sans-serif;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 101;
  text-align: center;
  font-weight: bold;
  font-size: 120%;
  color: #fff;
  background-color: #ae0000;
  padding: 5px 0px 5px 0px;
}

/* Ch08 Print Sytles  */

@media print {
body {
  font-size: 12pt;
  line-height: 1.25em;
}
h1 {
  font-size: 36pt;
  line-height: 1.25em;
}
h2 {
  font-size: 24pt;
  line-height: 1.25em;
}
h3 {
  font-size: 18pt;
  line-height: 1.25em;
}
h4 {
  font-size: 14pt;
  line-height: 1.25em;
}
blockquote {
  font-size: 24pt;
  line-height: 1.45833333em;
}
*, *:before, *:after {
  background: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
pre, blockquote {
  border: 1px solid #999;
  page-break-inside: avoid;
}
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
p, h2, h3 {
  orphans: 3;
  widows: 3;
}
h2, h3 { page-break-after: avoid; }
}