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

/*.......................................Main Areas ............................................................................*/

body  {	font: 0.9em Arial, Helvetica, sans-serif; margin:0px 0px; padding: 0px 0px; text-align: center; color: Black; background:White url(../images/banner.png) no-repeat 50% 0%}
body.Black {background:Black url(../images/banner.png) no-repeat 50% 0%; color:White}


#container {width: 1000px; margin:0px auto;  }
 
h1 {color:Black; font-size:2em; padding-top: 0px; padding-bottom:0px;  }
h2 {color:Black; font-size:1.5em;}
h3 {color:Black; font-size:0.9em;}
a { color:#5a5a5a; text-decoration:none;  }
a:hover { color:Black; }

.Black h1{color:WhiteSmoke;}
.Black h2 {color:LightGrey;}
.Black h3{color:LightGrey;}
.Black a {color:DarkGrey; text-decoration:none}
.Black a:hover {color:WhiteSmoke;}
.Black p {color:LightGrey;}
/*.......................................Header ............................................................................*/

#header h1{ text-align:center; font-size:2.5em; padding:0; margin:0px  }
#header p {text-align:center; font-size:1.2em; font-style:italic; padding:0; margin:0; font-weight:bold}

/*.......................................Main Navigation ............................................................................*/

/*Top Navigation ......................*/

#navbar {text-align:center; margin:auto; width:900px; height:2em; padding:0}
#navbar li {float:left; list-style:none; margin:10px 10px; padding:3px 10px; } 
#navbar a {font-weight:bold;  }
/*#navbar a:hover {text-decoration:none; color:#000000}
*/
/*.......................................Main Content  ............................................................................*/

#mainContent {width:100%; margin: 5px auto; padding: 0px 0px 20px 0px;  overflow:auto;  position:relative  }
.block {width:900px; margin:auto; text-align:left; font-size:1em; line-height:1.2em;}
.block li {list-style:none; padding:5px 0px}

/*...............image content div wraps around the lists of pictures ...................*/
#imageContent {width:900px; margin:auto; }
#imageContent img {width:280px; margin:5px; padding:0px; display:inline}


/*...............list items make it look like the table elements without it needing to be a table ...................*/
#list {width:600px; margin:auto;}
#list a {border:1px solid #f0f0f0; padding: 3px; margin:10px; 0px; display:block} 
#list a:hover {background:#f0f0f0; color:#000000}

/*...............Tables  ............................................................................*/

table {text-align:center; margin:20px auto;}
table img {border:1px solid #5a5a5a; margin-bottom:10px; width:280px}
table a {display:block; font-size:1.2em; border:1px solid #f0f0f0; padding:3px; margin:0px 10px 10px 10px;}
table a:hover {background:#f0f0f0; color:#000000}

/*.......Table aligning for the images - set the tr tag to show the relevant class...........................*/
table tr.top {vertical-align:top}
table tr.middle {vertical-align:middle}
table tr.bottom {vertical-align:bottom}


/*.......Gallery Pages; note that for black background change the body tag to black...........................*/
#gallery { margin:auto;width:800px;padding:0px;text-align:center;   }
.gallerycenter {}
.sidebar {/*float:left; */width:120px; list-style:none; padding:0; margin:0; position:absolute; top:20px; left:0; z-index:100;   }
a.selected {padding: 2px; margin:1px 0px; width:120px; height:20px; color:Black; float:left; background:url(../images/button_select.png) no-repeat; } 
a:hover.selected { color:Maroon}
a.unselected {padding: 2px; margin:1px 0px; width:120px; height:20px; float:left; background:url(../images/button_unselect.png) no-repeat; color:#53616E /*border:1px solid Black; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px*/} 
a:hover.unselected {color:SlateGrey}
#slideshow {margin:5px}
/*...............Single Image Page only ............................................................................*/

#linkimage a {margin:auto; padding:0px; text-decoration:none; border:1px solid #5a5a5a;}
#linkimage a:hover{text-decoration:none}
.black {background:#000000; padding:80px}
.black h2 { color:#E5E5E5; font-size:0.8em}
/*.......................................Footer  ............................................................................*/

#footer { padding:5px;}
#footer h1 {font-size:1em; padding:5px 0px}
#footer h2 {font-size:0.9em}
#footer p {font-size:0.8em}

/*.......................................Miscellaneous  ............................................................................*/
.clearfloat {clear:both}
.noborder a {border:none}
.noborder {border:none}