/*---------- Layout ----------*/
@font-face { font-family: "Tokyo"; src: url(/fonts/tokyo.otf); }

body { background-color: #333; }
#wrapper { width: 960px; height: 640px; position: absolute; top: 50%; left: 50%; margin: -290px 0 0 -480px;}

#header { padding-bottom: 5px; border-bottom: 1px solid #9d9c9c; height: 47px; }
#header h1 { float: left; width: 326px; }
#header h1 a { height: 47px; display: block; text-indent: -99999px; background: url(/app/webroot/img/site/logo.gif) no-repeat 0 0; }

#content { color: #999; padding: 9px 0; border-bottom: 1px solid #9d9c9c; height: 545px; }
#footer { margin-bottom: 15px; font-size: 14px; line-height: 26px; font-weight: bold; color: #999; }
#footer span:first-child { float: right; }

#content h2 { font-size: 24px; line-height: 32px; text-transform: capitalize; margin-bottom: 15px; }
#content p { margin-bottom: 15px; font-size: 14px; line-height: 16px; }
#content .center { text-align: center; }

.gallery { position: relative; }
.gallery #overlay { z-index: 1; width: 960px; height: 545px; position: absolute; left: 0; top: 0; background: url(none); }
.gallery #overlay .shift {  cursor: pointer; text-indent: -99999px; width: 18%; height: 100%;  background-repeat: no-repeat; position: absolute; top: 0; }
.gallery #overlay .shift.prev { left: 0; }
.gallery #overlay .shift.next { right: 0; }
.gallery #overlay .shift.prev:hover { background-image: url(/app/webroot/img/site/bg-prev.png); background-position: 0 50%; }
.gallery #overlay .shift.next:hover { background-image: url(/app/webroot/img/site/bg-next.png); background-position: 100% 50%; }
.gallery .image { height: 545px; position: relative; z-index: 0; }
.gallery .image img { display: block; margin: 0 auto; border: 1px solid #666; }

div.hoverscroll { position:relative; }
div.hoverscroll div.listcontainer {	overflow:hidden; }

#finder-wrapper { height: 87px; position: absolute; left: 0; z-index: 10; bottom: -9px; width: 960px; background: url(none); }
#finder { width: 960px; padding: 9px 0 0; position: absolute; left: 0; bottom: 0px; background: url(/app/webroot/img/site/bg-thumb.png) no-repeat 0 0; }
#thumb-wrapper { background-color: rgba(30,30,30,.75); height: 0; overflow: hidden; }
#thumbs { margin: 9px 10px; width: 940px; }
#thumbs ul { overflow: hidden; }
#thumbs ul li { float: left; margin: 0 10px 0 0; }
#thumbs ul li img { width: 56px; height: 56px; border: 1px solid #999; filter: alpha(opacity=50); opacity: .5; }
#thumbs ul li:hover img { opacity: .75;  filter: alpha(opacity=75); }
#thumbs ul li.active:hover img, 
#thumbs ul .active img { border-color: #FFF; filter: alpha(opacity=100); opacity: 1; }

#nav { float: right; font-size: 22px; line-height: 26px; text-transform: lowercase; color: #ccc; margin-top: 12px; position: relative; z-index: 100; font-family: "Tokyo" }
#nav ul li { float: left; border-left: 2px solid #ccc; position: relative; padding: 3px 0; }
#nav ul li:first-child { border-left: none; }
#nav ul li a, #nav ul li span { display: block; color: #ccc; text-decoration: none; padding: 0 15px; }
#nav ul li span { cursor: default; }
#nav ul li:hover { background-color: rgba(30,30,30,.75); }
#nav ul li:hover > * { color: #fff; }

#nav > ul > li:hover ul { display: block; text-shadow: none; }
#nav ul ul { background-color: rgba(30,30,30,.75); background-image: url(none); display: none; position: absolute; right: -2px; font-size: 16px; line-height: 30px; border-right: 2px solid #ccc; width: 138px; padding-top: 15px; }
#nav ul ul li { float: left; display: inline; width: 138px; filter: alpha(opacity=85); border-left: none; text-align: right; font-weight: bold; }
#nav ul ul li a { display: block; color: #ccc; }