/* Z-index legend
body:before        -1 (animatedBackground)
#header            10 (display:fixed)
#footer            10 (display:fixed)
blockquote:before  -1 (patch "stitches" - required so quoted text & links are accessible)
sliding menu		?  (bigSlide.js chooses. probably 999)

img.photo, img.fig  1 (but why?? defunct?)
*/
		@keyframes animatedBackground {
	from { background-position: -100% 100%, -50% 100%, -50% 80%, 0 0, -20% 86%; }
	to { background-position: 150% 100%, 150% 100%, 150% 70%, 150% 20%, 150% 90%; }
}
/* resets */

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {height: auto;min-height: 1px;  border: 0;  font-size: 100%;  vertical-align: baseline;  outline: none;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}

html, body{
	margin: 0;  padding: 0;  
}

/* defaults */
body {
	width:100%; height:100%; min-height: 100%; 
	padding-top:67px;
	line-height: 1.25em; 
	font-family: Veranda, sans-serif;		
	bottom:0;
}
body:before{
	content:" ";
	height:100%;
	width:100%;
	z-index:-1;
	position:fixed;
}
h1, h2, h3 {
	color: #313; 
	line-height:1em;
	font-family: 'Acme';
}
h1{
	font-size: 3em; 
	text-align:center;
}
h2 {
	font-size: 2.5em; 
	text-align:center;
	padding-top:.5em;padding-bottom:.4em;
}
h3 { 
	font-size: 2.2em; 
}
p{
	text-indent:2em;
    margin-bottom: .3em;
}
fig, .picture {
	display:block; 
	text-align:center; 
	padding-bottom: 16px; 
	margin 10px;
	max-width:100%;
} 
caption, fig .caption,.photo_caption, .photo_title, .fig_caption {
	font-size: 10pt; 
	font-family: monospace; 
	font-variant:small-caps;  
}
img { 
    border: 0; 
    max-width: 100%;  height:auto;
	/* position:relative;  do I still need this?? */
}
img.photo, img.fig {
	z-index:1;
    position:relative; /* do I still need this? */
    }    
.pic-right, img.right { float:right; margin-left: 1.2em; }
.pic-left, img.left { float:left; margin-right: 1.2em; }
.pic-center { margin: auto; }

blockquote {
    position:relative;
    padding: 1.2em;
    margin: 1.2em;
    font-size: 1.1em;
    font-style:italic;
    line-height: 1.3em;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    quotes: "\201C""\201D""\2018""\2019";
}
 
blockquote:before {
    content: " ";
    position: absolute;
    top: 3px;bottom: 3px;left :3px;right: 3px;
    z-index:-1;
}
blockquote p {
}
blockquote a {
    text-decoration:none;
}
blockquote a:hover, blockquote a:focus, blockquote a:active {
    text-decoration:underline;
}
blockquote.author {
    text-align: left; 
    padding-left: 10%; 
    margin-top:.5em;
}


/* ids and classes (overrides, overwrites, and enhances of the default styles) */

#header{
    position:relative;
	top:0px; 
	margin-top: 0px !ie; /* for IE */
} 
/* IE 6 (NO CLUE if this is right!!) */
* html #fixedheader {
    position: absolute;
    top: expression((0-(header.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
#fixedheader {
	position:fixed;
	display:table;     
    table-layout: fixed; /* so table-cells respect their width even when contents are oversized. required for fittext.js*/
    width:100%;
	height:68px;
	z-index:10;
	/*clear:both; */
	text-align:center;
	top:0px; 
}
#logosm, #sitetitle, #menubtn{
	display:table-cell;
    vertical-align: middle;
}
#sitetitle{
	width:80%;
}
#resetfont1{ 
	font: 48px/1 'Frijole','Impact', serif;
	text-transform: uppercase; 
    display:block;
	padding:0; margin:0 auto;
    white-space: nowrap; 
    text-align:center;
}
#logosm, #menubtn{
	width:10%; 
    min-width:50px;
}
#menubtn img, #logosm img{
	padding:0; margin:0;
    display:block;
}
#menubtn img {
    position:fixed;
    cursor:pointer;
    top:0; right:0;
}

#pagetitle{
    text-align: center; 
    padding-top:0; margin-top:0;
	min-height:150px;
}
#pagetitle h2{
    text-align: center; 
    padding-bottom:0;margin-bottom:0;
    /* 'under-lap' #nav a bit without covering page title*/
    padding-top:18px;margin-top:-18px;
}
nav, #nav{
	display:table;
	width:100%;
     margin:0; padding:0; border:0;
}
nav#nav ul{
	display:table-row;
    margin:0; padding:0;
    text-align:center;
}
nav#nav ul li{
	display: inline;
	display:inline-block;
	max-width:20%; margin:0;
	text-align:center;
}
nav#nav ul li a{
	width:100%;
	padding:.3em .5em;
    margin:.8em;
     display:block;
     border-radius:4px; 
}
#content{
	display:table; max-width:1000px;
	margin:0 auto;
	/*border-spacing: .5em;  UNUSED - delete this line*/
    padding-bottom:4em;
    /* 'under-lap' #pagetitle (height-min:150px) a bit without covering content*/
    padding-top:100px; margin-top:-98px;
}
main, #main{
	display:table-cell;
	width:70%;
	margin: 0 auto;
	padding: .2em 1em;
}
aside, #sidebar{
	display:table-cell;
	width:30%;
	color: white;
	padding: .2em .5em;
}
#footer{
	position:fixed; 
	display:table;
	width:100%;
	clear:both;/* Do I still need this? */
	z-index:10;
	margin-top: 0px !ie; /* for IE */
	text-align:center;
	bottom:0;
    padding-top:1em;
}
img.photo, img.fig {
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0,.5);
    }    
fig .caption,.photo_caption, .photo_title, .fig_caption {
	color: #600; 
}
img.photo {
	border: .4em solid #e8e8d8;
    }  
img.figure {
	border: 1px solid #666;	
}


	/** Clear fix
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */ }
.cf:after { clear: both; }
/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf { *zoom: 1; }


	#menu {
	z-index:12;
    list-style: none;
	min-width:15%;    max-width: 100%;
	min-height:60%;
	padding:0; margin:0;
	padding-bottom:.8em;
	overflow: auto;
	overflow-y: scroll;
}
#menu li {
  padding:20px;
  text-align:center;
    list-style: none;
	}
.panel {
    position: fixed;
    right: -15.625em; /*left or right and the width of your navigation panel*/
    width: 15.625em; /*should match the above value*/
}
/* COLORS AND BACKGROUNDS*/

body{
	background: rgb(94,153,82);
	background-attachment:fixed;
	background-position: center bottom; 
	background-size: auto 35%, 100%, 100%;
	-moz-background-size: auto 35%, 100%, 100%;
	background-repeat: repeat-x, no-repeat, no-repeat;
	background-image:
		url('../images/wolfes.png'),
		-moz-radial-gradient(center, ellipse cover,  rgba(94,153,82,.4) 30%, rgba(47,63,10,1) 100%),
		url('../images/Vegetation-Silhouette-dark.png');	
	background-image: 
		url('../images/wolfes.png'),
		-webkit-radial-gradient(center, ellipse cover,  rgba(94,153,82,.3) 30%,rgba(47,63,10,1) 100%),
		url('../images/Vegetation-Silhouette-dark.png');	
	background-image: 
		url('../images/wolfes.png'),
		radial-gradient(ellipse at center,  rgba(94,153,82,.3) 30%,rgba(47,63,10,1) 100%),
		url('../images/Vegetation-Silhouette-dark.png');
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e9952', endColorstr='#2f3f0a',GradientType=1 );
}
body:before{
	animation: animatedBackground 16s ease-in-out infinite alternate;
	
    background-repeat:repeat-x;
	background-position: center bottom; 
	background-attachment:fixed;
	background-size: 70% 40%, 90% 187%, 95% 36%, 97% 156%, 126% 74%;
	background-image: /* Safari 5.1 to 6.0 */
		-webkit-radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 54%, rgba(200,211,163,0) 74%, rgba(200,211,200,0) 100%), 
		-webkit-radial-gradient(rgba(186,207,106,.3) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 88%, rgba(200,211,200,0) 100%), 
		-webkit-radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 98%, rgba(200,211,200,0) 100%), 
		-webkit-radial-gradient(rgba(186,207,106,.4) 0%, rgba(200,211,163,.01) 87%, rgba(200,211,163,0) 92%, rgba(200,211,200,0) 100%), 
		-webkit-radial-gradient(rgba(200,207,200,.6) 0%, rgba(200,211,163,.01) 74%, rgba(200,211,163,0) 90%, rgba(200,211,200,0) 100%);  
    background-image:  /* For Opera 11.6 to 12.0 */
		-o-radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 54%, rgba(200,211,163,0) 74%, rgba(200,211,200,0) 100%), 
		-o-radial-gradient(rgba(186,207,106,.3) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 88%, rgba(200,211,200,0) 100%), 
		-o-radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 98%, rgba(200,211,200,0) 100%), 
		-o-radial-gradient(rgba(186,207,106,.4) 0%, rgba(200,211,163,.01) 87%, rgba(200,211,163,0) 92%, rgba(200,211,200,0) 100%), 
		-o-radial-gradient(rgba(200,207,200,.6) 0%, rgba(200,211,163,.01) 74%, rgba(200,211,163,0) 90%, rgba(200,211,200,0) 100%);  
    background-image:   /* For Firefox 3.6 to 15 */
		-moz-radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 54%, rgba(200,211,163,0) 74%, rgba(200,211,200,0) 100%), 
		-mozradial-gradient(rgba(186,207,106,.3) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 88%, rgba(200,211,200,0) 100%), 
		-mozradial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 98%, rgba(200,211,200,0) 100%), 
		-mozradial-gradient(rgba(186,207,106,.4) 0%, rgba(200,211,163,.01) 87%, rgba(200,211,163,0) 92%, rgba(200,211,200,0) 100%), 
		-mozradial-gradient(rgba(200,207,200,.6) 0%, rgba(200,211,163,.01) 74%, rgba(200,211,163,0) 90%, rgba(200,211,200,0) 100%);  
    background-image:  /* Standard syntax */
		radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 54%, rgba(200,211,163,0) 74%, rgba(200,211,200,0) 100%), 
		radial-gradient(rgba(186,207,106,.3) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 88%, rgba(200,211,200,0) 100%), 
		radial-gradient(rgba(186,207,106,.5) 0%, rgba(200,211,163,.01) 64%, rgba(200,211,163,0) 98%, rgba(200,211,200,0) 100%), 
		radial-gradient(rgba(186,207,106,.4) 0%, rgba(200,211,163,.01) 87%, rgba(200,211,163,0) 92%, rgba(200,211,200,0) 100%), 
		radial-gradient(rgba(200,207,200,.6) 0%, rgba(200,211,163,.01) 74%, rgba(200,211,163,0) 90%, rgba(200,211,200,0) 100%);  
}

#fixedheader, #nav{
	background-color:#422c2c; 
     color: #FFE;
}
#nav a{ color: #CEC;}
#nav a:visited{ color: #EEC; }
#nav a:hover, #nav a:focus, #nav a:active{ color: #FF6; }
#nav a:focus, #nav a:active{
     background: rgba(255,255,255,.3) ;
}
#fixedheader{
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, rgba(255,255,239,.1) 0%, rgba(255,255,239,.1) 64px, #422c2c 45%, #422c2c 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, rgba(255,255,239,.1) 0%, rgba(255,255,239,.1) 45%, #422c2c 45%, #422c2c 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, rgba(255,255,239,.1) 0%, rgba(255,255,239,.1) 45%, #422c2c 45%, #422c2c 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,239,.1)), color-stop(.45, rgba(255,255,239,.1)), color-stop(.45, #422c2c), color-stop(1, #422c2c));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, rgba(255,255,239,.1) 0%, rgba(255,255,239,.1) 45%, #422c2c 45%, #422c2c 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, rgba(128,128,128,.1) 0%, rgba(128,128,128,.1) 34px, #422c2c 34px, #422c2c 100%);
}
#pagetitle {
	background-image:
		url('../images/alpine-landscape-mountain-flora-01c-al1.gif'),   
		url('../images/alpine-landscape-mountain-flora-01g-al1.gif'), 
		url('../images/alpine-landscape-mountain-flora-01c-al1.gif');
  background-repeat: repeat-x;
  background-position: 50% 0%, -30px 0%, -70px 0%; 
  background-size:contain;
}
#footer {
	background-image:  
		url('../images/alpine-landscape-mountain-flora-01g-al1.gif'),  
		url('../images/alpine-landscape-mountain-flora-01c-al1.gif');
  background-repeat: repeat-x;
 }

#content{
	background-image: url('../images/testBG_textured-bcc87a-combo.png');
}

h1, h2, h3 {
	color: #313; 
}
h1, h2 {
	text-shadow:#CC9 -1px 1px 0,#CC9 -2px 2px 0,#666 -3px 3px 0,#666 -4px 4px 0;
}
#sitetitle h1{
    color:#FFE;
	text-shadow:#253e45 -1px 1px 0,
	   #253e45 -2px 2px 0,
	   #d45848 -3px 3px 0,
	   #d45848 -4px 4px 0; }
#pagetitle h2 {
	text-shadow:rgba(255,255,255,.8) 1px 1px 0,
	   rgba(255,255,255,.8) -1px 1px 0,
	   rgba(255,255,255,.8) 1px -1px 0,
	   rgba(255,255,255,.8) -1px -1px 0;  
}

blockquote {
	background: rgba(255,255,255,.2);
    -webkit-box-shadow: 0 0 0 3px rgba(102,51,51,8), 2px 1px 4px 4px rgba(10,10,0,.3);
    -moz-box-shadow: 0 0 0 3px rgba(102,51,51,8), 2px 1px 4px 4px rgba(10,10,0,.3);
    box-shadow: 0 0 0 3px rgba(102,51,51,8), 2px 1px 6px 4px rgba(10,10,0,.3);
    z-index:1;
}
blockquote:before {
    border: 2px dashed rgba(51,0,0,1);
	color: #ccc;
}
blockquote a {
    color: #fff;
}
   
img.photo, img.fig {
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0,.5);
    }    
fig .caption,.photo_caption, .photo_title, .fig_caption {
	color: #600; 
}
img.photo {
	border: .3em solid #e8e8d8;
    }  
img.figure {
	border: 1px solid #666;	
}

	#menu {
	background-image:url("../images/g10-optimized-b.svg");
	repeat-y:repeat;
	-moz-background-size:150% 100%;
	-webkit-background-size:150% 100%;
	-o-background-size:150% 100%;
	-ms-background-size:150% 100%;	
	background-position:left;
}
#menu a {
	color:#FFE; 
}
#menu li {
background-color: rgba(67,71,41,0);
	background-size:100% auto;
	background-size:cover;
	background-size:150% 150%; 
	background-image:url("../images/g10-optimized-b.svg"); 
}
#menu li:nth-child(even) {
	background-size:contain;
	background-size:116% 132%;
	background-size:cover;
}