/* Z-index index
90 
10	.fixed
 1	img.photo, img.fig


 */@font-face {
    font-family: 'Crack House';	
    src: local('Crack House'), 		
	    url('../fonts/ufonts.com_crackhouse_1_.eot'),
		url('../fonts/ufonts.com_crackhouse_1_.eot?#iefix') format('embedded-opentype'),
		url('../fonts/ufonts.com_crackhouse.woff') format('woff'),
        url('../fonts/ufonts.com_crackhouse.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Papyrus';
    src: local('Papyrus'), url('fonts/Papyrus.TTF'),
		url('../fonts/Papyrus.TTF');
    font-weight: normal;
    font-style: normal;
}

@-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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
	height: 100%; min-height: 100%; 
	width:100%; 
	line-height: 1.25em; 
	font-family: Veranda, sans-serif;
	background-color:#fff8e5; 
}
h2 {
	font: 3em 'Crack House'; 
	color: #300; 
	text-align:center;
    padding-top:.5em;
    padding-bottom:.4em;
	text-shadow:#CC9 -1px 1px 0,
	   #CC9 -2px 2px 0,
	   #666 -3px 3px 0,
	   #666 -4px 4px 0;
}
h3 {
	font: bold 1.5em 'Papyrus'; 
	text-align:center;
}
p{
	text-indent:2em;
    margin-bottom: .3em;
     }
img { 
    border: 0; 
    max-width: 100%; 
    }

   
blockquote {
    position:relative;
    padding: 1.2em;
    margin: 1.2em;
    font-size: 1.1em;
    font-style:italic;
    line-height: 1.3em;
	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);
    -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;
    border: 2px dashed rgba(51,0,0,1);
	    color: #ccc;
}
 
blockquote a {
    color: #fff;
    text-decoration:none;
}
 
blockquote a:hover, blockquote a:focus, blockquote a:active {
    text-decoration:underline;
}
.author {
    text-align: left; 
    padding-left: 10%; 
    margin-top:.5em;}


#wrapper {
	display: table;
	height: 100%; min-height: 100%;
	width:100%;
	position:relative;
	background-image: url('../images/712907.jpg');
    -moz-background-size: 100%;
    background-size: 100%;
	background-repeat: repeat;
	background-position: initial;
	box-shadow:  rgba(102,53,0,.1)1px 1px 5px 3px inset, 
	rgba(128,86,24,.25) 1em 1em 8em 2em inset;
}
#header, #main, #footer {
	display: table-row;
	height: auto; 	
	min-height: 1px; 
	margin:0;
	padding:0;
}

.fixed {
	position:fixed; 
	z-index:10; width:100%;
	margin-top: 0px !ie; /* for IE */
	clear:both; 
	text-align:center;
}
.fixed-top { 
	top:0px; 
}
.fixed-bottom {	
	bottom:0px; 
}

/* HEADER ELEMENTS */
#header { 
	color: #FFF; 
	padding-top:0;
}
/* a persistent bar containing certification mark (left), site title (center), and a menu access button (far right). 
TO DO: Must be made quite thin on smaller screens.*/
#fixedheader {
	padding-top:0; 
	height:68px;
	min-height:28px;
	background-color:#422c2c; 
/* 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%);
}

  
/* 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');
}

/* the lower section of the header panel which appears to be affixed to the fixed header when the page first loads but will scroll with the page leaving only the thin fixed header remaining on the page. This section contains the tagline, the DWP "logo" (wolf drawing), and page decoration  */
#pagetitle { 
	margin-top:68px;  
	width:100%;
	position:relative;
	min-height:150px;
	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;
}

/*site title */

#resetfont1 { 
	font: 64px/1 'Crack House','Impact', serif;
	display: block; 
	width: 100%; 
	text-transform: uppercase;  
	whitespace: nowrap; 
	text-shadow:#253e45 -1px 1px 0,
	   #253e45 -2px 2px 0,
	   #d45848 -3px 3px 0,
	   #d45848 -4px 4px 0;
    }
h1#sitetitle {
padding:0 1em;

}
#resetfont4, #resetfont3 { 
    font: 12px/1.5 'Papyrus', sans-serif;
	whitespace: nowrap; 
	display: block;}
#resetfont3{
	font-weight: bold;
	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; }
#createdby {
	width:100%;
	padding:0; padding-left:50%;
	margin:0; 
	display: block;
	background-color:#422c2c;}
#resetfont4 { 
	margin-bottom:0; 
	padding-right: 4px;
}
	
#menu_icon {
    cursor:pointer;
    border:none;
    width:50px;
    position:absolute;
	top:0; 
	right:0; 
    background-color:#FF0;
}
#menu_icon img {
position:fixed;
    top:0;
    right:0;
}
#menu_icon:hover,#menu_icon:focus{
	top:1px; 
}
#menu_icon:active{
	right:-1px; 
}
#naaba_cm {	
	width:1.8em;	
	min-width: 50px;
    max-width: 1em;
	height:auto; 
	position:absolute;
	top:2px;
	left:4px;
}
#naaba_cm img {	width:auto;
	height:100%; 
}
#tagline, #logo {
	width:50%; 
	padding:0;
	margin:0; 
	float:left;  
	color:#300;
}
#tagline {}
#tagline h3{
	margin:0;
	text-indent:-2em; 
	padding-left:1em; 
	text-align:left;
}
#logo {	
	text-align: right; 
	margin-top:-2em; 
	padding-right: 5%;
}
img.dwp_logo { 
	max-width:100%; 
	height: auto;
}
#main {
	overflow:auto; 
	height:auto;
	padding: 1.6em;
}
section{ 
	margin:auto; 
	padding: 0 5%; 
	max-width: 1200px;
}
article{ }

#fixedfooter{
	max-height: 4em; 
    min-width: 100%; 
    width:560px; 
    padding:0;
    margin:0;  
}
	   
	
#footer {
	background-color:blue; 
	color:white;
}
#fixedfooter img {
margin-top:1.8em;
}
#ornamental_bg{
	position:absolute;
	height: 100%; min-height:100%;
	width:100%;
	background-image: url(../'images/g3.png');
    -moz-background-size: 100% auto;
    background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center bottom; 
	bottom:0;
}

.picture {
	display:block; 
	text-align:center; 
	padding-bottom: 16px; 
	margin 10px;
	max-width:100%;
}  
img.photo {
	border: .4em solid #e8e8d8; /**/
	position:relative;
    }    
img.photo, img.fig {
    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0,.5);
    max-width:100%; height:auto;
	z-index:1;
    }    
fig .caption,.photo_caption, .photo_title, .fig_caption {
	font-size: 10pt; 
	color: #600; 
	font-family: monospace; 
	font-variant:small-caps;  
}
img.figure {
	border: 1px solid #666;	
	position:relative; 
}
.pic-right, img.right { float:right; margin-left: 1.2em; }
.pic-left, img.left { float:left; margin-right: 1.2em; }
.pic-center { margin: auto; }

   
	





.fb-page {
    border: 2px solid rgba(204,153,96,.5); 
	border-width: 2px 0;
    box-shadow: 1px 1px 4px 0 rgba(153, 153, 153,.4);
}
	/**
 * 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; }