@charset "UTF-8";

/* =============================================================================
   General Layout
   ========================================================================== */

/*No scrollbar for DIV wider than browser
http://stackoverflow.com/questions/2355170/no-scrollbar-for-div-wider-than-browser*/

#header-outer{
    min-width: 960px;
    overflow-x: hidden;
}
#header-container {
    width: 960px;
    margin: 0 auto;
    /*background: gray;*/
    height: 270px;
}
.header-row {
    width: 1140px;
    /*background: blue;*/
    margin-left: -90px;
}
.header-col-50 {
	float: left;
	width: 50%;
}

/* ---------- BACKGROUND ---------- */
#header-background {
	z-index: 1;
    margin-top: 40px;
}
.palmleaves-bg-l {
	height: 270px;
	background: url('../img/header/header-palmleaves-bg-l.png') no-repeat top left;
}
.palmleaves-bg-r {
	height: 270px;
	background: url('../img/header/header-palmleaves-bg-r.png') no-repeat top right;
}

/* ---------- MIDGROUND ---------- */
#header-midground-torch {
	z-index: 2;
	position: absolute;
	margin-left: 90px;
	margin-top: 48px;
	width: 960px;
	height: 40px;
}
.midground-torch-l {
	float: left;
	height: 140px;
	width: 120px;
	background: url('../img/universal/bg-scene-torch-l-shadow.png') no-repeat 44px 0;
	background-size: 115px 303px;
}
.midground-torch-r {
	float: right;
	height: 140px;
	width: 120px;
	background: url('../img/universal/bg-scene-torch-r-shadow.png') no-repeat 30px 0;
	background-size: 115px 303px;
}

#header-midground-flame {
	z-index: 3;
	position: absolute;
	margin-left: 90px;
	margin-top: -88px;
	width: 960px;
	height: 40px;
}
#midground-flame-l {
	margin-left: 35px;
}
.midground-flame-l {
	float: left;
	width: 66px;
	height: 152px;
	background: transparent url('../img/universal/bg-scene-flame-l.png') no-repeat;
}
#midground-flame-r {
	float: right;
	width: 60px;
	height: 152px;
	overflow: hidden;
	margin-right: 28px;
}
.midground-flame-r {
	width: 66px;
	height: 152px;
	background: transparent url('../img/universal/bg-scene-flame-r.png') no-repeat;
}

/* ---------- NAVIGATION ---------- */
.nav-container {
	z-index: 3;
	position: absolute;
    margin-left: 90px;
    margin-top: 130px;
    width: 960px;
    /*height: 40px;*/
}

/* ---------- FOREGROUND ---------- */
#header-foreground {
	z-index: 3;
	position: absolute;
    margin-left: 90px;
    margin-top: 104px;
    width: 960px;
    height: 40px;
}
.palmleaves-fg-l {
	float: left;
	height: 150px;
	width: 120px;
	background: url('../img/header/header-palmleaves-fg-l.png') no-repeat 12px 0;
}
.palmleaves-fg-r {
	float: right;
	height: 150px;
	width: 120px;
	background: url('../img/header/header-palmleaves-fg-r.png') no-repeat 0 0;
}

/* ---------- LOGO ---------- */
.logo-container {
	z-index: 2;
	top: 12px;
	position: absolute;
    margin-left: 90px;
    width: 960px;
}
.logo {
	margin: 0 auto;
	max-width: 305px;
	text-align: center;
}

/* ---------- PARCHMENT ---------- */
.parchment {
	z-index: 4;
	position: absolute;
    margin-left: 90px;
    margin-top: 190px;
    width: 960px;
    height: 80px;
}

@media screen and (max-width: 960px) {
	
	#header-outer {
		min-width: 840px;
	}
	#header-container,
	#header-foreground,
	#header-midground-torch,
	#header-midground-flame,
	.nav-container,
	.logo-container,
	.logo {
		width: 840px;
	}	
	.header-row {
		width: 1020px;
	}
	.parchment {
		display: none;
	}
	#parchment-adjust {
		position: absolute;
		margin-top: 230px;
		z-index: 200;
	    width: 100%;
	    height: 80px;
	    background: url('../img/universal/parchment-top-repeat.png') repeat center;
	}
}

@media screen and (max-width: 860px) {

  #header-outer {
		min-width: 720px;
	}
	#header-container,
	#header-foreground,
	#header-midground-torch,
	#header-midground-flame,
	.nav-container,
	.logo-container,
	.logo {
		width: 720px;
	}	
	.header-row {
		width: 900px;
	}
	
	.palmleaves-bg-l {
	background-position: left -20px top 0;
	}
	.palmleaves-bg-r {
		background-position: right -20px top 0;
	}

}


@media screen and (max-width: 760px) {

	#header-outer{
	min-width: 0;
	    width: 100%;
			background: #000; /* ADD BACKGROUND IMAGE OF LEAVES CENTERED */
			background: url('../img/header/header-palmleaves-bg.png') no-repeat top center;
	}
	
	#header-container {
    width: 100%;
    height: auto;
}

.header-row {
    width: 100%;
    margin-left: 0;
}

.logo-container  {
		width: 100%;
		margin-left: 0;
		z-index: 0;
	position: relative;
	}
	.nav-container  {
		width: 100%;
		margin-top: 20px;
		margin-left: 0;
		z-index: 0;
	position: relative;
	}
	
	#header-foreground,
	#header-background,
	#header-midground-torch,
	#header-midground-flame {
	    display: none;
	}
	
	.parchment {
		display: block;
	    width: 100%;
		margin-top: 12px;
		margin-left: 0;
		z-index: 0;
		position: relative;
	}
	#parchment-adjust {
		display: none;
	}
}

@media screen and (max-width: 550px) {
	#header-outer{
		background: url('../img/header/header-palmleaves-bg-sml.png') no-repeat top center;
	}
	.logo {
		width: 84%;	
	}
	.nav-container  {
		margin-top: 40px;
	}
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	#parchment-adjust {
		    background: url('../img/universal/parchment-top-repeat.png') repeat center;
		    background-size: 676px 80px;
		}
}

@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 760px), screen and (min-resolution: 192dpi) and (max-width: 760px) {
	#header-outer{
		background: url('../img/header/header-palmleaves-bg@2x.png') no-repeat top center;
		background-size: 960px 300px;
	}
}

@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 550px), screen and (min-resolution: 192dpi) and (max-width: 550px) {

	#header-outer{
		background: url('../img/header/header-palmleaves-bg-sml@2x.png') no-repeat top center;
		background-size: 960px 300px;
	}
}

/* =============================================================================
   Navigation
   ========================================================================== */
.nav {
	font: 1.400em/1.7 SinzanoDisplaySansRegular, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	text-align: center;
	color: #f8f8f6;
	margin: 0 auto;
	padding-left: 20px;
	display: block;
	position: relative;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	background: #fff5da;
	max-width: 740px;
}
.nav > ul {
  	margin: 0;
  	padding: 0;
  	list-style: none;
  	zoom: 1;
}
.nav > ul:after {
  	content: "";
  	clear: both;
  	display: block;
}
.nav li {
  	float: left;
}
.nav a {
	color: #000000;
	display: block;
	padding: 3px 0 0;
	height: 40px;
	width: 120px;
	background: url('../img/header/header-bg-nav.png') no-repeat 0 100%;
	text-decoration:none;
}
.nav a:focus, .nav a:hover {
	color: #ee3c2b;
}
#nav-home a {
	background-position: -140px 100%;
}
#nav-contact a {
	background-position: -260px 100%;
}

#page-home #nav-home > a,
#page-diary #nav-diary > a,
#page-menu #nav-menu > a,
#page-gallery #nav-gallery > a,
#page-faq #nav-faq > a,
#page-contact #nav-contact > a {
	color: #328e40;
}

#mobile-nav {
  background: rgba(254, 126, 0, 1) url('../img/header/header-mobile-nav.png') no-repeat center;
	background-size: 19px 14px;
  text-indent: -9999px;
  display: none;
  border: none;
  position: absolute;
  top: 197px;
  right: 70px;
  width: 20px;
  height: 12px;
  padding: 5px 3px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.active-page {
  display: none;
}

@media screen and (max-width: 960px) {

	.nav {
		font-size: 1.4em;
		padding-left: 18px;
		max-width: 620px;
	}
	.nav a {
		width: 100px;
		background: url('../img/header/header-bg-nav.png') no-repeat 0 100%;
	}

}

@media screen and (max-width: 860px) {

	.nav {
		font-size: 1.2em;
		line-height: 2em;
		padding-left: 5px;
		max-width: 500px;
	}
	.nav a {
		width: 82px;
		background: url('../img/header/header-bg-nav.png') no-repeat 0 100%;
	}

}

@media screen and (max-width: 760px) {
  .nav {
  	font-size: 1.5em;
		line-height: 1em;
    position: relative;
		max-width: none;
		padding-left: 0;
		border-bottom: 1px solid #000;
  }
  
  .nav a {
  	background: none;
		padding: 11px 0 0 0;
  }

  .nav > ul {
    height: 0;
    overflow: hidden;
    text-align: left;
		text-indent: 10px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }

  .nav > .open {
    height: 252px;
  }

  .nav > ul > li {
    width: auto;
    display: block;
    float: none;
    border: none;
    margin: 0 !important;
  }

  .nav > ul > li > a {
    height: 30px;
    border: solid #000;
    border-width: 0 0 1px;
    width: auto;
		padding-left: 10px;
  }

  #mobile-nav {
    display: block;
    top: 10px;
    right: 10px;
    height: 19px;
    width: 30px;
  }

  .active-page {
    display: block;
    color: #000;
    text-align: left;
    padding: 16px 0 0 20px;
    border-bottom: 1px solid #000;
    height: 34px;
  }
	.active-page .home,
	.active-page .diary,
	.active-page .menu,
	.active-page .gallery,
	.active-page .faq,
	.active-page .contact,
	.active-page .newsletter,
	.active-page .thank-you {
		 display: none;
	}
	#page-home .active-page .home {
		display: block;
	}
	#page-diary .active-page .diary {
		display: block;
	}
	#page-menu .active-page .menu {
		display: block;
	}
	#page-gallery .active-page .gallery {
		display: block;
	}
	#page-faq .active-page .faq {
		display: block;
	}
	#page-contact .active-page .contact {
		display: block;
	}
	#page-newsletter .active-page .newsletter {
		display: block;
	}
	#page-thank-you .active-page .thank-you {
		display: block;
	}
}