HTML, BODY { height: 100%; }
BODY { margin: 0px; background-color:#3d3d3d; font-family:arial; }
DIV#horizon { position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; overflow: visible; }
DIV#container { margin-left: -475px; position: absolute; top: -350px; left: 50%; width: 950px; height:695px; }
DIV#footer { padding-top:1em; padding-right:45px; color:#767676; text-align:right; font-size:8pt; }
DIV#mainpanel { position:relative; background-color:#313131; width:950px; height:690px; border:solid 1px #434343; padding-left:60px; padding-top:33px; }
DIV#logo { height:70px; width:382px; background:url(greg-noakes-photography-logo.png) no-repeat; }
DIV#navigation { position:absolute; right:55px; border:0px solid green; top:100px; } /* top:103px; */
DIV#content { margin-top:12px; position:absolute; width:666px; height:544; }
.menu { list-style-type:none; margin-left:0; font-weight:bold; }
.main { color:#b3b3b3; }

DIV#navigation A.filmography  { width:132px; background: transparent url(nav-filmography.png) 0px -21px no-repeat; }
DIV#navigation A.geography    { width:113px; background: transparent url(nav-geography.png)   0px -21px no-repeat; }
DIV#navigation A.photography  { width:140px; background: transparent url(nav-photography.png) 0px -21px no-repeat; }
DIV#navigation A.rock-archive { width:140px; background: transparent url(nav-rockarchive.png) 0px -21px no-repeat; }
DIV#navigation A.main { display:block; height:17px; margin-top:6px; margin-bottom:10px; }
DIV#navigation A.hashed:hover { background-position:0px -42px; }
DIV#navigation A.current { background-position:0px 0px; }

DIV#navigation UL.submain {
  color:#595959; margin-top:1em; margin-bottom:1em; font-size:11pt; padding-left:0;
  border-top: solid 1px #404040; padding-top: 1em; padding-bottom: 1em;
  border-bottom: solid 1px #404040;
}
DIV#navigation UL.submain LI { margin-top:2px; }
DIV#navigation UL.submain A { text-decoration:none; color:#595959; }
DIV#navigation UL.submain A:hover { border-bottom:1px solid; /*text-decoration:underline;*/ color:inherit; }
DIV#navigation UL.submain LI A.active-gallery { color:#609DD4; }

DIV.shadowN         { font-size:2px; background: transparent url(shadow-horiz.png)    0px   0px repeat-x; position:absolute;  top:0;    left:0;  height:12px;   width:100%; }
DIV.shadowS         { font-size:2px; background: transparent url(shadow-horiz.png)    0px -12px repeat-x; position:absolute;  bottom:0; left:0;  height:12px;   width:100%; }
DIV.shadowE         { font-size:2px; background: transparent url(shadow-vert.png)     0px   0px repeat-y; position:absolute;  top:0;    left:0;  height:100%; width:12px; }
DIV.shadowW         { font-size:2px; background: transparent url(shadow-vert.png)   -12px   0px repeat-y; position:absolute;  top:0;    right:0; height:100%; width:12px; }
DIV.shadowNE        { font-size:2px; background: transparent url(shadow-corner.png)   0px   0px no-repeat; position:absolute; top:0;    left:0;  height:12px;   width:12px; }
DIV.shadowNW        { font-size:2px; background: transparent url(shadow-corner.png) -12px   0px no-repeat; position:absolute; top:0;    right:0; height:12px;   width:12px; }
DIV.shadowSW        { font-size:2px; background: transparent url(shadow-corner.png) -12px -12px no-repeat; position:absolute; bottom:0; right:0; height:12px;   width:12px; }
DIV.shadowSE        { font-size:2px; background: transparent url(shadow-corner.png)   0px -12px no-repeat; position:absolute; bottom:0; left:0;  height:12px;   width:12px; }

DIV.filmographyIntroduction { color:#8f8f8f; font-size:11pt; width:600px; margin-bottom:1em; }
DIV.filmography { position:absolute; background-color:#2a2a2a; margin:0; padding:10px; width:630px; height:455px; overflow:auto; } 
DIV.filmography UL { list-style:none; margin:0; padding:0; } 
DIV.filmography UL LI { margin:0; padding:1px; display:block; float:left; width:290px; color:#8f8f8f; font-size:9pt; } 
DIV.filmography UL A { text-decoration:none; color:#8f8f8f; border-bottom:1px #609DD4 dotted; }
DIV.filmography UL A:hover { text-decoration:none; color:#609DD4; border-bottom:1px #609DD4 solid; }
DIV.filmography DIV.footer { position:absolute; border:1px solid #353535; background-color:#313131; bottom:0; left:0; right:0; margin:10px; padding:4px; /*width:600px; bottom:30px; left:10px; height:16px;*/  }
DIV.filmography DIV.footer A { color:#609DD4; text-decoration:none; font-size:9pt; }

DIV.geography { color:#D8D8D8; font-size:11pt; margin-top:15px; }
DIV.geography HR { color:#444; height:1px; width:250px; }
DIV.geography SPAN.detail { color:#609DD4 }
DIV.geography SPAN.detail A { color:#609DD4; text-decoration:none; }

DIV.rock-archive { color:#D8D8D8; font-size:11pt; margin-top:15px; }
DIV.rock-archive P { color:#D8D8D8; }
DIV.rock-archive P A { color:#609DD4; text-decoration:none; }
DIV.rock-archive P A:hover { text-decoration:underline; }