@charset "utf-8";
/* CSS Document */



/* CSS Document */

/* choose a suitable font and centre the ~container div in Internet Explorer */
/**{
padding:0;
margin:0;
}

body{
 text-align: center;
 font-family: tahoma, arial, sans-serif;
 font-size: 76%;
 letter-spacing: 0.05em;
 color:#FFFFFF;
 background:#FFFFFF;
}

#wrapper {
	width: 780px;
	padding: 5px;
	border: solid #3300CC;
	margin: 10px auto 10px auto;

}

/*#container {
width:770px;
}
*/

/* The containing box for the gallery */
#photocontainer {
 position: relative;
 left:-98px;
 width: 730px;
 height: 396px;
 margin: 20px 200px 0 20px;
 border: 1px solid #F8F8F8;
}

/* Removing the list bullets and indentations */
#photocontainer ul {
 padding: 0px;
 margin: 0px;
 list-style-type: none;
 }
 
 /* Remove the images and text from sight */
#photocontainer a.gallery span {
 position: absolute;
 width: 1px;
 height: 1px;
 top: 5px;
 left: 5px;
 overflow: hidden;
 background: #F8F8F8;
 }

/* Adding the thumbnail images */
#photocontainer a.gallery, #photocontainer a.gallery:visited {
 display: block;
 font-family: Verdana, Geneva, sans-serif;
 font-size: 110%;
 color: 000;
 text-decoration: none;
 border: 1px solid #F8F8F8;
 margin: 1px 2px 1px 2px;
 text-align: left;
 cursor: default;
 }
#photocontainer a.slidea {
 background: url(../cal_images/January.gif);
 height: 30px;
 width: 93px;
 }
 #photocontainer a.slideb {
 background: url(../cal_images/feb.gif);
 height:30px;
 width: 93px;
 }
#photocontainer a.slidec {
 background: url(../cal_images/march.gif);
 height:30px;
 width: 93px;
 }
#photocontainer a.slided {
 background: url(../cal_images/april.gif);
 height: 30px;
 width: 93px;
 }
*html #photocontainer a.slided {
 
 height: 40px;
 width: 93px;
}
#photocontainer a.slidee {
 background: url(../cal_images/May.gif);
 height: 30px;
 width: 93px;
 }
#photocontainer a.slidef {
 background: url(../cal_images/jun.gif);
 height: 30px;
 width: 93px;
}
*html #photocontainer a.slidef {
  
 height: 30px;
 width: 93px;
}
#photocontainer a.slideg {
 background: url(../cal_images/jul.gif);
 height: 30px;
 width: 93px;
}
#photocontainer a.slideh {
 background: url(../cal_images/aug.gif);
 height: 30px;
 width: 93px;
 }
#photocontainer a.slidei {
 background: url(../cal_images/september.gif);
 height: 30px;
 width: 93px;
 }
#photocontainer a.slidej {
 background: url(../cal_images/oct.gif);
 height: 30px;
 width: 93px;
 }
#photocontainer a.slidek {
 background: url(../cal_images/nov.gif);
 height: 30px;
 width: 93px;
 }
 * html #photocontainer a.slidek {
height: 40px;
 width: 93px;
 }
#photocontainer a.slidel {
 background: url(../cal_images/dec.gif);
 height: 30px;
 width: 93px;
 }
 #photocontainer a.slidem {
 background: url(../cal_images/jan_2011.gif);
 height: 30px;
 width: 93px;
 }#photocontainer a.sliden {
 background: url(../cal_images/feb_2011.gif);
 height: 30px;
 width: 93px;
 }#photocontainer a.slideo {
 background: url(../cal_images/mar_2011.gif);
 height: 30px;
 width: 93px;
 }#photocontainer a.slidep {
 background: url(../cal_images/apl_2011.gif);
 height: 30px;
 width: 93px;
 }#photocontainer a.slideq {
 background: url(../cal_images/may_2011.gif);
 height: 30px;
 width: 93px;
 }#photocontainer a.slider {
 background: url(../cal_images/jun_2011.gif);
 height: 30px;
 width: 93px;
 }#photocontainer a.slides {
 background: url(../cal_images/jul_2011.gif);
 height: 30px;
 width: 93px;
 }#photocontainer a.slidet {
 background: url(../cal_images/aug_2011.gif);
 height: 30px;
 width: 93px;
 }#photocontainer a.slideu {
 background: url(../cal_images/sep_2011.gif);
 height: 30px;
 width: 93px;
 }#photocontainer a.slidev {
 background: url(../cal_images/oct_2011.gif);
 height: 30px;
 width: 93px;
 }#photocontainer a.slidew {
 background: url(../cal_images/nov_2011.gif);
 height: 30px;
 width: 93px;
 }#photocontainer a.slidex {
 background: url(../cal_images/dec_2011.gif);
 height: 30px;
 width: 93px;
 }
 
/* set the size of the unordered list to neatly house the thumbnails */
#photocontainer ul {
 width: 95px;
 height: 386px;
 }
#photocontainer li {
 float: left;
}
/* move the thumbnails into the correct position */
#photocontainer ul {
 margin: 5px;
 float: right;
 }
 
 /* change the thumbnail border colour */
#photocontainer a.gallery:hover {
 border: 1px solid #F8F8F8;
 
}

/* styling the :hover span */
#photocontainer a.gallery:hover span {
 position: absolute;
 width: 550px;
 height: 373px;
 top: 10px;
 left: 75px;
 color: #000;
 background: #F8F8F8;
}
#photocontainer a.gallery:hover img {
 border: 1px solid #fff;
 float: left;
 margin-right: 5px;
 }
#photocontainer a.slideb:hover img, #photocontainer a.slidei:hover img {
 float: left;
}