@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: LightGrey; background:Black url(../images/banner.png) no-repeat 50% 0%}

#container {width: 1100px;  margin:0px auto; padding:0; }
#mainContent {position:relative; padding:0; margin:0 auto; }
/*The relative positioning of the mainContent div means that the absolute positioning of the sidebar works for the gallery page*/
 
h1 {color:SlateGrey; font-size:2em; padding-top: 0px; padding-bottom:0px; text-shadow:White  }
h2 {color:SlateGrey; font-size:1.5em;}
h3 {color:SlateGrey; font-size:1.1em;}
a { color:DarkGrey; text-decoration:none;  }
a:hover { color:WhiteSmoke; }

/*.......................................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; }

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

/*Top Navigation ......................*/
#navbar {text-align:left; margin:0 auto; padding:0; width:800px  }
#navbar li {list-style:none; margin:10px; padding:3px 10px; display:inline-table; } 
#navbar a {}

/*Sidebar Navigation for the main pages (home, index of species (column) and new images)...................*/
#sidenav { text-align:left; margin: 7px 0px 0px 0px; width:250px; padding:0; float:left; }
#sidenav ul, .column ul {margin:0; padding:0}
#sidenav li {margin:3px; padding: 3px 20px}
#sidenav li, .column li {list-style:none; border-top: 1px solid SlateGrey; border-left:1px solid SlateGrey; border-bottom:1px solid DarkSlateGrey; border-right: 1px solid DarkSlateGrey; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px }
#sidenav li, #sidenav a  {width: 200px; }
#sidenav a, .column a  {color:SlateGrey; margin:0; padding:0; display:block }
#sidenav li:hover, .column li:hover {border-top: 1px solid LightGrey; border-left:1px solid LightGrey; border-bottom:1px solid SlateGrey; border-right: 1px solid SlateGrey; }
#sidenav a:hover, #sidenav li:hover a, .column a:hover, .column li:hover a {color: WhiteSmoke}
.column li, .column a {width: 180px;}
.column li {margin: 3px; 3px 0px 30px; padding: 3px 10px;}

/*Sidebar Navigation for the gallery pages...................*/
.sidebar { text-align:left; margin: 7px 0px 0px 0px; width:120px; padding:0; position:absolute; top:20px; left:0; z-index:100;     }
.sidebar ul {margin:0; padding:0}
.sidebar li {list-style:none; margin: 2px; padding: 1px 5px; width:128px; border:1px outset #53616E; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px }
.sidebar a {font-size:0.9em; width:120px; display:block; color:SlateGrey }
.sidebar a:hover {color:WhiteSmoke}
.sidebar li.selected {background:url(../images/button_select.png) repeat-y }
.sidebar li.selected a{color:Black}
.sidebar li.selected a:hover {color:Brown}

/*Styling for previous page link...................*/
.sidebar li.previouspage {margin:2px 2px 5px 2px; border:none;}
.previouspage a {padding: 0px;  }
.symbol { font:Symbol; font-size:1.5em}

/*.......................................Main Content ............................................................................*/

/*Background block for text boxes*/
.block {width:900px; margin:auto; text-align:left; font-size:1em; line-height:1.2em; /*border:2px outset #53616E; */ border-top: 1px solid SlateGrey; border-left:1px solid SlateGrey; border-bottom:1px solid LightGrey; border-right: 1px solid LightGrey; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-box-shadow: inset 0 0 5px 5px Black; -webkit-box-shadow: inset 0 0 5px 5px Black; box-shadow: inset 0 0 5px 5px Black; background: SlateGrey url(../images/background_block.png) repeat-x; color:Black; padding:30px; }
.block a { color:DarkBlue}
.block a:hover {color:Brown}
.block li {list-style:none; padding:5px 0px}

/*Styling for the image boxes on the home page and the new images page*/
#imageContentNew {width:830px; margin:0px 0px 0px 0px; padding: 0px 5px 10px 5px; float:left;   }
#imageContentNew .square {width:250px; height:250px; padding:0px; margin:10px; float:left; overflow:hidden;  }
#imageContentNew .square img {min-width:250px; height:250px; margin:0px; padding:0px; float:left; }


/*#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 {}
#slideshow {margin:5px}

/*Styling for the text that shows on the gallery page*/
.textbox {width:500px; margin:0 auto}

/*...............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}
.center {margin:auto}