/*Being a heavily commented CSS Style Sheet for Iris by someone who is not very good at stylesheets*/
/*This covers all*/
BODY {
font-family: verdana, helvetica, sans-serif;
 font-size:.75em;
 font-color: green;
 }
 
 a:any-link {
 color: #647991;
 }
 
 /*TopNav-One is mostly for the lightbox pages since it uses the lighbox png as a background*/
 .topnav-one {
/* background: url(../images/irislightboxlogo2.png) no-repeat left top;*/
 padding: 2px 0 0 2px;
 width: 98%;
 min-width: 365px;
 max-width: 1009px;
 height: 134px;
 line-height: 4em;
 text-indent: 1em;
 }
 /*TopNavTwo can be used for anything that you want to be this wide*/
 div#topnav-two {
/* background:url(../images/lowernavbar.png) no-repeat left top;*/
/* min-width: 575px;*/
 max-width:100%;
 height: 28px;
 background-color: #f0f2f5;
 padding: 5px 0 10px 10px;
 width: 98%;
 }
 
 div#detail {
 text-align: left;
 width: 30%;
 float:left;
 }
 /*statustext is for the found 1-12 of 12 text. It could be body except for the additional padding*/
 div#statustext {
 padding:10px 0 10px 5px;
 clear: both;
 }
 
/*maintitle is for the index page, the main logo*/
 div#maintitle {
 text-align:center;
 margin-left: auto;
 margin-right: auto;
 }
 
 /*Form is replacing the centered form on the main page*/
   div#formcenter {
  clear: both;
  text-align:center;
  padding: 20px 0 10px 0;
  }
 
 /*Start links sections. several to allow white text on the bars*/
 
 /*These are generic links*/
 a:link, a:visited {
 text-decoration: none;
 text-color:black;
 }
 span#link {
  font-size:1em;
  }
 span#link a {
  color:#069;
  text-decoration:none;
  }
 span#link a:hover {
  color:#F33;
  }
  
  /*End of generic links*/
  
  /*Right links blue*/
  a:rightlink, a:visited {
 text-decoration: none;
 text-color:black;
 }
 span#rightlink {
  font-size:1em;
  }
   span#rightlink {
 float: right;
 padding-right: 30px;
}
 span#rightlink a {
  color:#069;
  text-decoration:none;
  }
 span#rightlink a:hover {
  color:#F33;
  }
  
   
   /*These are links in the bar*/
    span#barlink {
 float: left;
 }
   span#barlink a {
 color: #647991;
 }
  span#barlink a:hover {
  color:gainsboro;
  }
 span#right {
 float: right;
}
 span#right a {
 color: #647991;
 }
  span#right a:hover {
  color:gainsboro;
  }

 span#usednumber {
 color: #069;
 font-weight:bold;
 }
 /*End of bar links*/



 /*The container is supposed to hold the whole of the thumbnail chunks. It works. Uncomment the gray line to see the color for troubleshooting*/
   div#container {
 /* background: gray;*/
  margin: auto;
  padding: 10px 0 10px 10px;
  width: 98%;
  } 

/*Each thumbnail is inside this chunk*/
div#slide {
/*background-color: #EEE;*/
padding:5px 5px 5px 10px;
display: block;
max-width:300px;
float:left;
/*clear:right;*/
text-align:left;
/*position:relative;*/
min-height:275px;
  }
div#slidedetail {
/*background-color: #EEE;*/
padding:5px 5px 5px 10px;
max-width:300px;
float:left;
/*clear:right;*/
text-align:left;
/*position:relative;*/
min-height:30px;
  }
  div#slide320 {
/*background-color: #EEE;*/
padding:5px 5px 5px 10px;
max-width:320px;
float:left;
clear:right;
text-align:left;
position:relative;
min-height:450px;
  }
  
  /*These next two are used for the drop shadow*/
.img-shadow {
 float:left;
  background: url(../images/shadowAlpha.png) no-repeat bottom right !important;
  background: url(../images/shadow.gif) no-repeat bottom right;
  /*margin: 10px 0 0 10px !important;*/
  /*margin: 10px 0 0 5px;*/
  /*max-width:240px;*/
    max-width:330px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px;
  /*max-width:230px;*/
    max-width:320px;
  }
  
  div#slideid {
  clear:both;
  float:left;
  width:100%;
  }
  
   span#slidetitle {
 font-weight:bold;
 }
 
 /*Hidetext is for the grayed out slide number-depreciated in the electronic scheme*/
  span#hidetext {
 color: #A9A9A9;
 }
  
  /*These control the links under the thumbnails*/
   div#slidemenu {
   width: 100%;
  float:left;
  font-size: .9em;
  margin-bottom: 3px;
  text-align: left;
  }
  div#slidemenu ul {
margin:0;
padding:0 6px;

  }
  
  div#slidemenu li {
  float:left;
  list-style-type:none;
  padding:0 6px;
  }
  div#slidemenu a {
  color:#069;
      text-decoration:none;
  }
  div#slidemenu a:hover {
  color:#F33;
  }
  /*End of links under thumbnails*/
  
    /*End of slide chunk*/
  
  /*The spacer is used in conjuction with the container above*/
  .spacer {
  clear: both;
  padding: 0 0 5px 0;
  }
  
 div#footer {clear:both;
 padding: 20px 0 15px 0;
 text-align:center;}
 
 /*Various spans used. Some also used above in the slide part*/
 
 span#title {
 font-size:2em;
 }
 
 span#white {
 color:#FFFFFF;
 }
 
 /*Random images helps center the images on the front page*/
 #randomimages {
 margin-left: auto;
 margin-right: auto;
 width:950px;
 }
 
 div#smallthumb {
 padding: 5px 5px 5px 10px;
 max-width: 220px;
 float:left;
 text-align:left;
 min-height:200px;
 }
 
 div#slidetext {
 clear:both;
 float:left;
 width:100%;
 }

/*Lightbox stuff*/
#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; } 
#overlay img{ border: none; }

#overlay{ background-image: url(../js/overlay.png); }

* html #overlay{
	background-color: #000;
	back\ground-color: transparent;
	background-image: url(../blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../js/overlay.png", sizingMethod="scale");
	}