/************************** RESET BROWSERS **************************/
* { margin:0; padding:0; font-family: Arial, Helvetica, sans-serif, Geneva; font-size: 12px;} 
html { height:100% }
body {height: 100%; color: #000; text-align: left;}
ul, ul li { margin: 0; list-style-type: none;}
.clearer { clear:both }
a img { border: 0; }
/* * {border: 1px solid red} */


/************************** LAYOUT **************************/
#layout { width: 760px; margin: 0 auto; padding: 0 10px 0 10px; background: url(../img/layout/bg.png) no-repeat 10px 0; }

#ruler_h { position: fixed; top: 0; left: 0; width: 100%; height: 15px; z-index: 2000; }
#ruler_v { position: fixed; top: 0; left: 0; width: 15px; height: 100%; z-index: 2001; }

#header { position :relative; top: 0px; left: 0px; height: 60px; padding: 90px 0 0 180px; color: #666; }
#header h1 { padding: 0; font-size: 28px; letter-spacing:-0.05em; line-height: 20px; font-weight:100; }
#header h2 { padding: 0; font-size: 24px; letter-spacing:-0.05em; line-height: 20px; font-weight:100; }

#registermark { position :absolute; top: 50%; z-index: 998; height: 20px; width: 760px; background: url(../img/layout/registermark.png) no-repeat 0 0; }

#footer { height: 50px; width:590px; padding:0 0 0 170px; background: url(../img/layout/footer.png) no-repeat 0 0; }
#footer li { float:left; padding: 7px 10px 0 10px; font-size: 10px; color: #666; }
#footer li a { font-size: 10px; color: #888; text-decoration: none;  }
#footer li a:hover { font-size: 10px; color: #333; text-decoration: none;  }


/************************** NAVI **************************/

#content_left { position :relative; top: 0px; left: 0px; width: 120px; padding: 0px 20px 10px 40px; float: left; z-index: 999; text-align:right; font-size: 20px; color: #666; }
#content_left li { padding: 0 0 5px 0; font-size: 18px; letter-spacing:-0.1em; line-height: 14px; font-weight:100; }
#content_left li .currentpage { color: #333; }
#content_left li a { padding: 0; font-size: 18px; letter-spacing:-0.1em; color: #666; text-decoration: none; }
#content_left li a:hover { color: #fff; background-color:#666; text-decoration: none; }


/************************** CONTENT AREA **************************/

#content_right { position :relative; top: 0px; left: 0px; width: 510px; padding: 0 0 70px 0; float: left; z-index: 999; }
#content_right h1 { color:#666; padding: 0 0 5px 0; font-size: 24px; letter-spacing:-0.1em; line-height: 14px; font-weight:100; }
#content_right h2 { color:#666; padding: 0 0 5px 0; margin:0 10px 0 0; font-size: 20px; letter-spacing:-0.05em; line-height: 20px; font-weight:100; border-top: 1px solid #999; }
#content_right p { color: #333; padding: 0 0 10px 0; line-height: 1.5em;}
#content_right p a { color: #888; text-decoration: none; }
#content_right p a:hover { color: #fff; background-color:#666; text-decoration: none; }
#content_right .box { width: 150px; margin: 0 10px 0 0; float: left; }
#content_right .keyvis { padding: 0 0 20px 0; }

#content_right h2 a { color:#666; padding: 3px 0 7px 0; font-size: 16px; letter-spacing:-0.05em; font-weight:100; text-decoration: none; }
#content_right h2 a:hover { color: #999; }



/************************** LIGHTBOX THUMBNAILS **************************/

.thumb { float: left; }
.thumb img { padding: 0; margin: 0 10px 10px 0; border: 1px dashed #fff; }
.thumb img:hover { padding: 0; margin: 0 10px 10px 0; border: 1px dashed #666; }


/************************** WORKAROUND FOOTER POSITION **************************/
#footer { position: absolute; bottom: 0 !important; bottom: -1px;}
#layout { position: relative; min-height: 100%; height: auto !important; height: 100%;}


/************************** WORKAROUND SCROLLPROBLEM BG **************************/
body { background: #ccc url(../img/layout/shadow_main.png) repeat-y 50% 0; }