/* RWP content CSS */

/* BACKGROUND */
/* temp hack so I can see the grid for percentages 
   ... change out bg-test-grid.jpg when ready */
/* default to just the background without decorations */
body{
  /* background: url(../y_img/zzz-bg-test-grid.jpg) top repeat-y fixed; */
  background: url(../y_img/bg-1280x1024.jpg) top repeat-y fixed;
  background-color: black;
  background-size: 100% auto;
  min-width: 280px;
  position: relative;
  color: white;
}

.gutter-left{
	position:absolute; 
	top: 0;
	bottom: 0;
	left: 0;
	z-index: -25;
	width: 20%;
}
.gutter-right {
	position:absolute;
	top: 0;
	bottom: 0;
	right: 0; 
	z-index: -25;
	width: 20%;
}

/* make sure that text links are readable on the new dark background */
/* a {text-decoration: underline; color: yellow;} */
a:link {color: deepskyblue;}
a:visited {color: navajowhite;}

/* sans-serif please */
* {font-family: sans-serif;}

/* =============================================== */
/* =============================================== */
/* nav CSS */
/* defaults should be for a smartphone ... */

/* default menu is 2x2 square */
/* with extra padding around links */

nav {
  width: 95%;
  max-width: 1220px;
  margin: 20px auto;
  overflow: hidden;
  padding-top: 12px;
  padding-bottom: 12px; 
}

/* Made this a class for now since there's several divs under nav */
/* need to fix before release */
div.nav_bg {
  position:absolute; 
  top:0; 
  right:0; 
  width:100%; 
  height:100%;
  z-index:-1;
  /* background-color:#00C; */
}

nav ul {
  list-style: none;
  overflow: hidden;
}

nav li {
  color: #fff;
  display: block;
  float: left;
  padding: 10px;
  text-align: center;
  width: 50%;
}

/* set the borders for mobile */
nav li:nth-child(2), nav li:nth-child(3)  {
    border-bottom: 1px solid #9A8365;
  }

nav li:nth-child(2), nav li:nth-child(4)  {
    border-right: 1px solid #9A8365;
  }

/* hide the decorations */
nav li:first-child, nav li:last-child {
    display: none;
  }


/* TRANSISTIONS */
/* this seems to add more padding to some items */
/*  -webkit-transition: background 0.5s ease;
     -moz-transition: background 0.5s ease;
       -o-transition: background 0.5s ease;
      -ms-transition: background 0.5s ease;
          transition: background 0.5s ease;
}*/

/* =============================================== */

/* Menu links wrapper - sized for 218 x 73 */
div.menu_sprite {
  margin:0 auto;
  width: 100%;
  height: 0;
  padding-bottom: 33.486%;
  background-position: 0 0;
  background-size: 200%;
  display:block;
}

div.menu_sprite:hover {
  background-position: 100% 0;
  background-size: 200%; 
}

/* =============================================== */

@media only screen and (min-width : 420px) {
  /* lose the extra padding around links */
  nav {
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media only screen and (min-width : 580px) {
  /* menu is four wide, no decorations */
  nav li  {
    width: 25%;
    border-bottom: none;
  }
  
  nav li:nth-child(2), nav li:nth-child(3) {
    border-right: 1px solid #9A8365;
    border-bottom: none;
  }
}

@media only screen and (min-width : 930px) {
  /* show the decorations */
  nav li:first-child, nav li:last-child {
    display: block;
  }

  div.nav_bg  {
    background: url(../y_img/menu-bar-full.png);
    background-size: 100% 100%;
    background-color: none;
  }

  nav li {
    width: 16.66%;
    border-bottom: none;
  }
}

/* =============================================== */
/* =============================================== */
/* content CSS */
/* defaults should be for a smartphone ... */

/* CHAPTER is the containg div */
div.chapter {
	width: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
}

/* LEAF is an individual page (div) in a chapter div */
/* leaves are displayed sequentally by default */
.leaf {
	width: auto;
	background-color: rgba(30,26,20,0.6);
	border-style: solid;
	border-color: rgba(77,65,50,0.6);
	border-width: thin;
	border-radius: 1em; 
	display: inline-block;
	padding: 0 10px;
	margin: 2px 0;
	text-align: left;
	vertical-align: top;
}

.leaf h3 {
	text-align: center;
	padding-bottom: 1.2em;
	padding-top: 0.3em;
}

.leaf p { padding-bottom: 0.7em;}

.leaf_text { 
	overflow: visible;
	clear: both;
	padding: 0 6px;
}

.leaf_img {
	width: 30%;
	max-width: 140px;
	padding: 0 0 4px 0;
}
.leaf_img img {
	width: 100%;
	height: auto;
}

.leaf:nth-child(odd) .leaf_img {
	margin-right: 20px; 
  margin-left: -10px;
	float: left;
}
.leaf:nth-child(even) .leaf_img {
	margin-left: 20px; 
  margin-right: -10px;
	float: right;
}
  
/* if bigger than a smartphone ... */
@media screen and (min-width:480px) {
	div.chapter {
		width: 90%;
	}
	.leaf {
		padding: 0 20px;
		max-width: 54em; /* keep lines from getting too big */
		text-align: left;
	}
	.leaf h3 {
		text-align: left;
	}
	.leaf_img {
		max-width: 170px;
	}
	.leaf_text { 
		overflow: hidden;
		clear: none;
		padding: 0;
	}
}

/* if bigger than a tablet (plus a bit)... */
/* odd leaves go left, even leaves go right */
@media screen and (min-width:1040px) {
	div.chapter {
		width: 96%;
		max-width: 1560px;
	}
	.leaf {
		width: 45%;
		max-width: 46em; /* keep lines from getting too big */
		/* text-align: justify; */
	}
	.leaf:nth-child(odd) {
		padding: 0 24px 0 10px;
	}
	.leaf:nth-child(even) {
		padding: 0 10px 0 24px;
	}
	.leaf:nth-child(even) h3 {
		text-align: right;
	}
	.leaf_img {
		width: 28%;
	}
	.leaf:nth-child(odd) .leaf_img {
		margin-right: 1em;
	}
	.leaf:nth-child(even) .leaf_img {
		margin-left: 1em;
	}
}
/* =============================================== */

/* =============================================== */
/* =============================================== */

header {
	width: 100%;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	/* need to hide overflow due to moon & clouds */
  /* border: 1px solid rgba(80,80,255,0.6); */
}

/* float the header rock trim to the bottom of the header 
   and just a little beyond. This requires the height of the
   header to be determined when the page is drawn ... */
.header-rocktrim {
  position:absolute; 
  bottom: 0; 
  left:0; 
  width:100%; 
  z-index:-10;
} 
/* and, fill between the top of the rock trim and top of the header with black */
.header-backfill {
	position:absolute;
	width:100%; 
	height:64%; 
	top:0; 
	z-index:-20;
	background:black;
}

.header-left {
	float:left; 
	width:32%; 
	margin-left: 5%;
	padding-bottom: 20px;
  /* border: 1px solid rgba(80,255,80,0.6); */
  /* ----------------- */
  /* transitions are not well supported yet, but shouldn't break anything 
  transition-property: margin-left, width;
  transition-duration: 2s;  */
}

.header-center {
	width:57%; 
	float:left;
	position: relative;
	/* border: 1px solid rgba(80,255,80,0.6); */    
}

/* Text logo - must use padding-top and not margin-top
   due to some weird quirk with positioning the moon background */
.header-center img:first-child {   /* text logo */
    display: block; 
    width: 100%; 
    padding-top: 0; 
}

.header-center img:nth-child(2) {  /* additional text under logo */
  display: block; 
  width: 90%; 
  margin: 0 auto;
}

/* moon and clouds is hidden at smallest size; otherwise floats, tied to header-center */
.moon_clouds {
  position: absolute;
  top:0; left:0; 
  width:168%; height:auto;
  z-index:-1;
  display: none;
}

.header-right {
	float:right; 
  width:20%;
  margin-right: 5%;
  max-width:327px;
	display: none;
  /* border: 1px solid rgba(80,255,80,0.6); */
}

@media only screen and (min-width : 580px) {
  .header-center {
    width:47%; /* sized so most of the moon shows */
    min-width: 334px;
    padding-bottom: 60px; /* fudge the rock trim below moon */
  }
  .moon_clouds { /* roll out the moon and clouds */
    display: block;
  }
  /* nudge down the text logo to fit with the moon */
  .header-center img:first-child { 
    padding-top: 7%; 
  }
  /* shrink the extra text a bit */
  .header-center img:nth-child(2) {
    width:75%; 
  }
  .header-left {
    width:30%;
    min-width: 182px; 
  }
}

@media only screen and (min-width : 640px) {
  .header-center {
    margin-left:5%; /* nudge the name over */
  }
}

@media only screen and (min-width : 930px) {
	.header-backfill { height:50%; } /* less backfill */
	.header-left {
		width:25%;
	}
  /* this wide or wider header-center is actually centered */
  .header-center {
    width:30%;
    float:none;
    margin: 0 auto; 
    min-width: 334px;
    max-width:404px;   
  }
  .header-right {
    display: block;
  }
}

@media only screen and (min-width : 1200px) {
	.header-center {
		padding-bottom: 75px; /* fudge the rock trim below moon */
	}
	.header-left {
		width: 16.667%;
		margin-left: 11%; /* 6% + 5% */
	}
	.gutter-right, .gutter-left { width: 15%; }
}

@media only screen and (min-width : 1700px) {
	.header-backfill { height:10%; } /* even less backfill */
}

/* =============================================== */

/* =============================================== */
/* =============================================== */

footer {
	position: relative;
	margin-top: 1em;
}

footer p {
	text-align: center;
	font-size: .75em;
	color: #BBB;
}

.visited-long { display: none; }

.footer-bg {
	display: block;
    width: 100%;
    min-height: 2em; /* be sure the copyright text fits */
    margin: 0 auto;
}
.copyright {
	position: absolute;
    bottom: 0.5em; right:0; left:0;
}

@media screen and (min-width:480px) {
	footer p { font-size: .9em; }
	.visited-long { display: inline-block; }
}

/* =============================================== */