/* FoxDog's Style Sheet used for FoxDog.org right now as well 20 Sep 2016 */
/* html5, updated 20 July 2016 */


* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* from w3schools the new semantics in html5, this makes them work correctly in older browsers */
header, section, footer, aside, nav, main, article, figure {
    display: block;
}

body {
   font-family: arial, helvetica, serif; 
	color: #706866;
	font-size:100%;
	background-color: #fff;
	background-repeat:repeat-x;
	background-attachment: fixed;
	margin-top: 0px;	
}

a {
   text-decoration: none;
}


a:link {
   color: #f5b183;
   font-weight: bold;
}

a:visited {
   color: #bb653f;
   font-weight: bold;
}

a:active {
   color: #2c3947;
}

a:hover {
	text-decoration: underline;
}

img
{
	border-style: none;	
	max-width: 100%;
	height: auto;
}

/* for IE 8 because, as always, an IE thingie is fucked up */
@media \0screen {
img { 
  	width: auto; /* for ie 8 */
  }
}


/* style the first letter of each paragraph, because I'm wierd that way */
p::first-letter {
	font-weight: bold;
}

addr {
   font-style: italic;
}
/* Basic page layout, a banner, then two columns, one a nav which rides
   on the right and info section below it.  The content is in the main part to the left. */

main {
     max-width: 80em;
	  margin: 1em auto;
	  position: relative;
	  background-color: #ffffff;
     padding: 1em;
     border: thin solid #000000; 
     -moz-border-radius: 16px;
     -webkit-border-radius: 16px;
     -opera-border-radius: 16px;
     -khtml-border-radius: 16px;
     border-radius: 16px;
   }  

div#center_content_wrapper {
   float:left;
	max-width: 70%;
	padding-right: 1em;
	padding-top: 1em;
	margin: 0 1em 0 0;
	position: relative;
   border-right: 0.2em solid #2c3947;
   border-bottom:0.2em solid #2c3947;  	
}
	
h1#title {
	  background-color: #ede0cd;	 
	  width: 100%;	
	  font-style: oblique;
     font-size: 300%;
     margin-top: 0;
     text-align: center;
	  color: #2c3947;	
	}
	
div#bannerdiv {	
 	  width: 100%;   
	  height:auto;
	  position:relative;
	  padding-bottom:1em;
	  text-align: center;

	}			
	
h1.center, h2.center, h3.center {
	text-align: center;
}	
	
/* the main stuff on the page, the important and changing content */	
	
aside {
	float: left;
	width: 100%;
	margin-right: 1em;
	padding-right: 1em;
	padding-left:1 em; 
	padding-bottom: 1em;
	max-width: 25%;
}		

nav {
   padding-bottom: 1em;	
   border-bottom: 2px solid #2c3947;
}
		
	
nav ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
nav li {
		padding-bottom: .4em;
	}
	
nav li ul {
	   list-style: none;
	}
	
nav li ul li {
	   text-indent: 1em;
	   padding-bottom: 0;
	}
	
nav li ul li ul li {	  
	   text-indent: 1em;
	} 
	
nav li ul li ul li ul li {
	text-indent: 1em;
	}

footer {
	padding-top: 1em;
	padding-left: 1em;
	clear: both;
}
	
/* gallery styling, this uses a combo of my code and bxslider, 5 May 2015 */
/* the image galleries reside in this div*/
div.gallery {
padding:1em; 
margin:auto; 
width: 100%;
background-color:white;
text-align: center;
float:left;
}

/* set the height of the big image view area */
div.bigimgwrapper {
height:480px;
position:relative;   /* relative so the span.caption shows, as it is absolute */
}

span.caption {
position: absolute; 
display: inline-block;  /* make it act something like a block element */
background-color: white;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
bottom: 5%; 
left:25%; 
padding: 0.5em;
max-width: 50%; 
text-align: center;  /* can do this because of display: inline-block; */
line-height: 1.2em;
font-weight: bold;
}

/* positioning:  I want the bigimg to be positioned at the bottom of its container, not the top. */
img.bigimg {
max-height:480px;
max-width:480px;
position: absolute;
left:50%;  /* this and the transforms below move the image to the center */
transform:translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
/* Idea for transform from: http://jhtmlcss.blogspot.com/2015/04/placing-element-vertically-center-css.html */
bottom: 0;
}
	
/* to create image viewer/slider for 1/2 the size, mostly used for goat pages */
div.small_gallery {
   padding:1em;
   margin:auto; 
   width: 50%;
   background-color:white;
   text-align: center;
   float:right;
}
	
div.smallimgwrapper {
height:280px;
position:relative;  /* relative so the span.caption shows, as it is absolute */
}	

img.smallimg {
max-height:280px;
max-width:280px;
position: absolute;
left:50%;  /* this and the transforms below move the image to the center */
transform:translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
/* Idea for transform from: http://jhtmlcss.blogspot.com/2015/04/placing-element-vertically-center-css.html */
bottom: 0;
}	



/* the two following classes allow text or photos to float in the main text (which wraps around them
if they are small enough, and keeps margins, etc consistent */
div.float_div_left {
	position: relative;
	float:left;
	width: auto;
	margin-right: 2em;
}

div.float_div_right {
	position: relative;
	float:right;
	width: auto;
	margin-left: 2em;	
}

/* replaces float_div_center once I get that going */
div.float_div_center {
	position: relative;
	float: left;
	margin-bottom: 2em;
	width: 100%;  /* as well as setting the width for the div, it also lets me display block the image the div contains */
}

img.image_float_center {
	display: block;  /* display the image as a block, not an inline or other element */
   position: relative;  /* it stays in the normal flow, need this so that the span.caption element works right */
   margin-left: auto;  /* can do this because of display block, basically this and the following center the image */
   margin-right: auto;
}


/* remove this when ready 
.float_div_center {
	text-align:center; 
	margin-left: 2em;  
	margin-right: 2em;
}*/

.big_bottom_li {
	margin-bottom: 1.0em;
}