/* CSS Document */


body /*to center the body you must do the following*/
{
   text-align: center;
background: #BCBCBC;  /* CUSTOMISABLE */
   color: #000;
   font-family: arial;
   margin: 0 auto;
}

h1
{
   color: navy;
   text-align: center;
   font-size: 150%;
}

h2
{
   margin-top: 0;
   color: #00F;
   font-size: 22px;
   text-align: center;
}


h3
{
   color: #0000FF;
   font-weight: normal;
   font-size: 14px;
   text-align: center;
   font-weight: bold;
}

p.intro
{
   margin: auto;
   width: 50%;
   color: #000000;
   font-weight: normal;
   font-size: 14px;
   text-align: left;
   /*background-color: lightblue;*/
   padding-left:20px;
   padding-right:20px;
}

#container
{
   text-align: center;
   margin: 0 auto;
   width: 1000px;
   height: 700px;
   /*background-color: lightblue;*/
   border: 0px solid white;
   padding: 0 4%;
}


#content
{
   border: 2px dotted black;
   width: 1000px;
   height: 600px;
   float: left;
   color: #000;
   font-size: 14px;
   line-height: 120%;
   text-align: center;
   margin: 0 auto;
}

#footer
{
   clear: both;
   background: transparent;
   color: dark gray;
   margin-top: 1cm;
   margin-bottom: 1cm;
   padding: 10px;
   font-size: 100%;
   height:25px;
   text-align: center;
   border: 0px solid #387A9B;
}

	
   
div.thumbnail /*this positions the photo slide*/
{
   margin: 10px 1px 10px 1px; /*top right bottom left*/
background: #6A6A6A;  /* CUSTOMISABLE */
   border: 2px solid #2B4343;
   width: 210px;
   height: 250px;
   float: left;
   text-align: center;
   padding: 1%;
} 

.thumbnail img{
   display: inline;
   margin: 5px;
   border: 2px solid #606060;
}


.thumbnail a:hover img 
{
   border: 2px solid #000000;
}

.thumbnailcenter img{
   display: inline;
   margin: 5px;
   border: 1px solid #A0ACC0;
}

.phototitle
{
   text-align: center;
   font-weight: normal;
   margin: 0 3px 3px 3px;
   padding: 10px;
   font-size: 12px;
color: #FFFFFF;  /* CUSTOMISABLE */
}