/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 html { 
   background: url(./Reader_Photo_Website.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
}

body{
 
  font-family: Tahoma, Geneva, sans-serif;
  text-align: center;
  color: #FF6600;
  height: 100%;
  width: 100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
}

#wrapper {
  min-height: 100%;
  position:relative;
  overflow: hidden;
}

#header {
  background-color:rgba(0,0,0,0.75);
  height: 250px;
  border-style: none none solid none;
  border-color:#990000;
  border-width:2px;
  position:relative;
  color: #FFFFFF;
  white-space:nowrap;
}

#headerlogo {
  position: absolute;
  margin: 10px 0px 10px -325px;
  left: 50%;
  height: 150px;
  width: 650px;          /* We define a width so that we can center the headermenu using the method below */
  border-style: solid;    /* In order to see where the bounding box is*/
  border-color: #FF6600;  /* In order to see where the bounding box is*/
  border-width: 0px;      /* In order to see where the bounding box is*/
}

#headerlogoimg {
  height: 150px;
  position: absolute; /* center the image in the div */
  margin: auto;       /* center the image in the div */
  top: 0;             /* center the image in the div */
  left: 0;            /* center the image in the div */
  right: 0;           /* center the image in the div */
  bottom: 0;          /* center the image in the div */
}

#headertext {
  font-family: 'Muli',sans-serif;
  font-size: 2em;
  position: absolute;
  width: 1000px;
  height: 20px;
  left: 50%;
  margin: 170px 0px 0px -500px; /*This was a really sketchy way to solve a problem that is likely caused by a dumb mistake. Return to fix later */ 
  border-style: solid;    /* In order to see where the bounding box is*/
  border-color: #FF6600;  /* In order to see where the bounding box is*/
  border-width: 0px;      /* In order to see where the bounding box is*/
}

.headermenulist{
  text-align: center;
  border-style: solid;    /* In order to see where the bounding box is*/
  border-color: #CC0000;  /* In order to see where the bounding box is*/
  border-width: 0px;      /* In order to see where the bounding box is*/
}

.headermenuitem{
  display:inline-block; /*Inside of this block is formatted as block-level box; element itself is formatted as an inline-level box */
  list-style-type:none;
  padding: 10px 20px 10px 20px;
  font-size: 20px;
  white-space:normal; /*Sequences of whitespace will collapse into a single whitepace. Text will wrap if necessary */
}


#headermenu{
  position:absolute;
  bottom:0;
  width: 1000px;          /* We define a width so that we can center the headermenu using the method below */
  border-style: solid;    /* In order to see where the bounding box is*/
  border-color: #FF6600;  /* In order to see where the bounding box is*/
  border-width: 0px;      /* In order to see where the bounding box is*/
  left: 50%;              /* This pushes the left side of the div to the middle of the parent div */
  margin: 0 0 0 -500px;   /* This pushes the left side of the div 500px to the left of the left boundary, centering the menu */
}

#headermenu a{
  text-decoration:none;
  color: white;
}

#headermenu a.selflink{
  text-decoration:none;
  color: #990000;
}

#headermenu a:hover{
  color:#FF6600;
}

#headermenu a:active{
  text-decoration-color:white;
}

a:link.triplebodydiv{
  display: inline-block;
  border-color:#990000;
  border-width:0px;
  color: #990000;
  text-decoration:none;
  height: 600px;
  width: 300px;
  margin: 20px 10px 25px 10px;
  vertical-align:middle;
  white-space: normal;
}

a:visited.triplebodydiv{
  display: inline-block;
  border-color:#990000;
  border-width:0px;
  color: #990000;
  text-decoration:none;
  height: 600px;
  width: 300px;
  margin: 20px 10px 25px 10px;
  vertical-align:middle;
  white-space: normal;
}

a:hover.triplebodydiv{
  display: inline-block;
  border-color:#FF6600;
  border-style:solid;
  border-width:0px;
  color: #FF6600;
  text-decoration:none;
  height: 600px;
  width: 300px;
  margin: 20px 10px 25px 10px;
  vertical-align:middle;
  white-space: normal;
}

div.triplebodydiv {
  background-color:rgba(0,0,0,0.75);
  height: 600px;
  width: 300px;
  border-style:solid;
  border-color:inherit;
  border-width:2px;
}

img.triplebodydiv{
  height: 200px; /* Specify the width so it fits in the triplebodydiv */
  border-style:solid;
  border-color:inherit;
  border-width:2px;
  margin: 20px 20px 10px 20px;
}

h1.triplebodydiv{
  text-align:left;
  font-size: 1.25em; /*20px/16=1.25em*/
  font-weight: bold;
  margin: 10px 20px 10px 20px;
  color: #990000;   /* Comment this line out if we want headers to change orange when div is hovered over */
}  

p.triplebodydiv{
  text-align: left;
  font-size: 1em; /*14px/16=0.875em*/
  margin: 10px 20px 20px 20px;
  line-height: 150%;
  color: #FFFFFF;
}

div.singlebodydiv {
  display: inline-block;
  background-color:rgba(0,0,0,0.75);
  height: 600px;
  width: 944px;
  border-style:solid;
  border-color:#990000;
  border-width:2px;
  margin: 20px;
  vertical-align:middle;
  white-space: normal;
  color: #FFFFFF;
  text-align: left;
  line-height: 150%;
}

img.singlebodydiv{
  width: 200px; /* Specify the width so it fits in the triplebodydiv */
  height: 558px;
  border-style:solid;
  border-color:inherit;
  border-width:2px;
  margin: 20px;
  float:left;
}

img.singlebodydivphoto{
  width: 200px; /* Specify the width so it fits in the triplebodydiv */
  border-style:solid;
  border-color:inherit;
  border-width:2px;
  margin: 20px;
  float:left;
}

h1.singlebodydiv{
  font-size: 1.75em; /*20px/16=1.25em*/
  font-weight: bold;
  color: #FF6600;   /* Comment this line out if we want headers to change orange when div is hovered over */
  margin: 20px 20px 10px 0px;
}  

h2.singlebodydiv{
  font-size: 1em; /*20px/16=1.25em*/
  font-weight: bold;
  color: #FFFFFF;   /* Comment this line out if we want headers to change orange when div is hovered over */
  margin: 20px 20px 10px 0px;
}  

p.singlebodydiv{
  text-align: left;
  font-size: 1em;
  margin: 10px 20px 10px 0px;
}

ul.singlebodydiv {
}

li.singlebodydiv{
  font-size: 1.25em; /*14px/16=0.875em*/
  text-align:left;
  list-style-type: square;
  font-weight: bold;
  list-style-position: inside; /* Ensures bullets are aligned with text, not list text itself */
  border-style:solid;
  border-color:#990000;
  border-width:2px;
  margin: 10px 20px 10px 0px;
  padding: 5px 20px 5px 20px;
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  -o-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
}

ul.singlebodydivsublist{
}

li.singlebodydivsublist{
  list-style-type: none;
  display: inline-block;
  font-size: 0.75em; /*14px/16=0.875em*/
  text-align:left;
  font-weight: normal;
  list-style-position: inside;
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  -o-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
}

.error{
  color:#990000;
  font-weight:bold;
}

#main {
  /*overflow: auto;*/
  padding-bottom: 20px;
  border-style: solid;
  border-color:#FF6600;
  border-width:0px;
  white-space:nowrap;
}

#footer {
  background-color:rgba(0,0,0,0.75);
  /*position: relative;*/
  position: absolute;
  /*margin-top:-20px;*/
  height: 20px;
  clear:both;
  border-style: solid none none none;
  border-color:#990000;
  border-width:2px;
  font-size: 14px;
  color:#FFFFFF;
  bottom: 0;
  left: 0;
  right: 0;
}

#footertextcontainer {
  height:18px;
  width:500px;
  position:absolute;
  left: 50%;
  top: 50%;
  margin-top:-7px;
  margin-left:-250px;
}

#footertext {
  clear:both;
  font-size: 0.875em;
}