/*
	RohJuh Theme (based on Nico Kaiser's Siriux theme)
	Copyright 2005-2008 Roger Hsu.
*/

img, #top_pics, .gallery-albums { behavior: url(http://rohjuh.com/wp-content/themes/v5/iepngfix.htc); } /* PNG fix for piece of shit IE 6-: http://www.twinhelix.com/css/iepngfix/ */

body { margin: 0 auto; padding: 0; width: 1100px; font-family: Helvetica, Verdana, Arial, Sans-Serif; background: #000; color: #333; text-align: center; position: relative; }

#top_pics { margin: 0 auto; background: url("http://rohjuh.com/wp-content/themes/v5/images/top_pics_color.png") no-repeat top center; width: 1100px; height: 140px; position: relative; top: -30px; z-index: 9999;}

/* Header (Nav Bar) */
#header { width: 1100px; height: 77px; margin: 0 auto; position: relative; z-index: 9998; }
#header #nav { margin: 0; padding: 0; }
#header #nav li { display: inline; }
#header #nav li a { float: left; width: 117px; height: 0; padding-top: 77px; overflow: hidden; }
#header #nav li a,
#header #search_box { background-image: url(http://rohjuh.com/wp-content/themes/v5/images/header.jpg); background-repeat: no-repeat; }

/* Define size of Nav blocks (each block is a different size) and background-position in Normal/Off state */
#header #nav li#l_blank a {width: 72px; background-position: 0 0; }
#header #nav li#home a, #header #nav li#home_active a { width: 160px; background-position: -72px 0; }
#header #nav li#blank a { width: 210px; background-position: -232px 0; }
#header #nav li#about a,#header #nav li#about_active a { width: 65px; background-position: -442px 0; }
#header #nav li#archives a, #header #nav li#archives_active a { width: 75px; background-position: -507px 0; }
#header #nav li#gallery a, #header #nav li#gallery_active a { width: 70px; background-position: -582px 0; }
#header #nav li#contact a, #header #nav li#contact_active a { width: 150px; background-position: -652px 0; }

/* Hover & Active States */
#header #nav li#l_blank a:hover { background-position: 0 -77px; }
#header #nav li#home a:hover { background-position: -72px -77px; }
#header #nav li#blank a:hover { background-position: -232px -77px; cursor: default; }
#header #nav li#about a:hover, #header #nav li#about_active a { background-position: -442px -77px; }
#header #nav li#archives a:hover, #header #nav li#archives_active a { background-position: -507px -77px; }
#header #nav li#gallery a:hover, #header #nav li#gallery_active a { background-position: -582px -77px; }
#header #nav li#contact a:hover, #header #nav li#contact_active a { background-position: -652px -77px; }

/* SEARCH BOX */
#search_box { width: 298px; height: 77px; position: absolute; top: 0; right: 0; background-position: 100% 0; background-repeat: no-repeat; }
#search_box #s { float: left; padding: 0; margin: 20px 0 0 35px; border: 0; width: 159px; background: none; font-size: 12px; }

/* -- Main layout definitions ------------- */

a { text-decoration: none; color: #333; }
a:hover { text-decoration: none; color: #ccc; }
p { text-align: center; color: #ccc; }
.clear { clear: both; }

/* gallery_top, _body, _bottom are for the rounded box. gallery_top_photo is the top for the photo page. On the photo page, there is no rounded box. */
#gallery { margin: 0 auto; padding: 0 0 20px 0; }
.gallery_top, .gallery_top_photo { height: 15px; width: 950px; text-align: center; margin: -25px auto 0 auto; padding: 0; }
.gallery_body, .gallery_body_photo { width: 950px; margin: 0 auto; text-align: left; }
.gallery_bottom, .gallery_bottom_photo { padding: 10px 0 5px 0; text-align: center; }

.gallery_top { background: url('images/gallery_top.jpg') no-repeat bottom; }
.gallery_body { background: url('images/gallery_body.jpg') repeat-y; }
.gallery_bottom { background: url('images/gallery_bottom.jpg') no-repeat bottom; }
.gallery_top_photo { margin: 0 auto; }

/* album title on non-root albums */
#gallery h2 { text-align: center; margin: 0 0 5px 0; padding-top: 20px; color: white; font: 25px normal; font-family: "Helvetica Neue Light", Helvetica, Verdana, Arial, Sans-Serif; }
#gallery h3 { clear: both; margin: 1.5em 0 1em 0; font-size: 14px; } /* KEEP? Not used??????? */

/* -- Gallery thumbnails ------------------ */

.gallery-thumb { margin: 0 0 10px 0; width: 158px; float: left; text-align: center; }
.gallery-thumb img { background: #fff; border: 1px solid #ddd; padding: 2px; margin: 1px; }

/* not in original css - is it needed? */
.gallery-thumb a img { border-color: #ccc; }
.gallery-thumb a:hover img { border-width: 2px; border-color: #38c; margin: 0; }

/* -- Gallery Album listing --------------- */

/* .gallery-albums { clear: both; margin: 0; padding: 0; width: 950px; height: 60px; background: url('images/rohjuh_gallery_text.png') no-repeat top; } */

/* not in original - needed?
.gallery-albums .gallery-thumb {
	margin-right: 5px !important;
}
*/

/* Album names in the main gallery */
.gallery-albums h4 { font: 16px normal; font-family: "Helvetica Neue Light", Helvetica, Verdana, Arial, Sans-Serif; margin: 0; padding: 0 0 5px 0; line-height: 100%; text-align: center; }
.gallery-albums h4 a { color: #ccc; }
.gallery-albums h4 a:hover { color: #777; }

.gallery-album, .gallery-item { width: 158px; height: 280px; margin: 0 0 20px 27px; padding: 0; display: inline; /* fixes IE float bug */ float: left; overflow: hidden; }
/* gallery-album refers to the individual albums on the main gallery page */
/* gallery-item refers to the thumbs of the individual pics/vids on each album page */
/*Thumbs are 150X150, 158X158 incl padding & border, total width=790 --> (930-158*5)/4 = 30 spacing between thumbs --> 27px seems more uniform??? */

/* .gallery-album { margin: 80px 0 0 30px; } */ /* reset top margin - gallery-album needs additional padding for the "rohjuh gallery" text */
.gallery-album p { font-size: 14px; font-weight: normal; }
.gallery-album .meta { margin-top: 3px; color: #333; font-size: 0.9em; }

/* -- Gallery Items ----------------------- */

.gallery-albums, .gallery-items { margin: 0; clear: both; padding: 15px 0 20px 0; }
.gallery-empty { padding: 0.5em 1.5em; margin: 1.5em 3em; border: 1px solid #ddd; background: #ffe; font-size: 1.2em; }
.description { margin: 0; padding: 0 0 20px 0; font-size: 14px; line-height: 14px; text-align: center; }
.singlePhotoDescription { width: 500px; margin: 20px auto 0 auto; }

/* -- Gallery Photo (detail page) --------- */

/* Holy shit this was a pain in the ass. g_photo is variable in size and I want the prev and next arrows to be centered vertically on each side */
/* of g_photo. Need to define each as table style blocks. display: table-cell is for FF and display: inline-block is for Safari and IE */
/* For IE, span not div tags must be used. Big thanks to: http://phrogz.net/CSS/inlineblock.html */
#g_photo_container {width: 950px; min-height: 150px; } /* min-height set to size of prev/next arrows - want as small as possible and grow with content to ensure arrow are always vertically aligned */
span#left_arrow, span#g_photo, span#right_arrow { display: table-cell; display: inline-block; text-align: center; vertical-align: middle; }

#g_photo { width: 100%; display: table-cell; display: inline-block; min-height: 150px; width: 850px; text-align: center; }

img.gallery-photo { background: #fff; border: 1px solid #ddd; padding: 7px; display: block; margin: 0 auto; }

/* sliding background to get hover effect */
/* IE6 Fix */
* html #prev_arrow { left: 50px; }

#left_arrow { height: 150px; width: 50px; overflow: hidden; }
#right_arrow { height: 150px; width: 50px; overflow: hidden; }
#left_arrow a { text-decoration: none; display: block; width: 50px; }
#right_arrow a { text-decoration: none; display: block; width: 50px; }
#left_arrow a img, #right_arrow a img { border: 0; }
#left_arrow a:hover, #right_arrow a:hover { margin-left: -50px; }

/* -- Navigator --------------------------- */

.block-core-Navigator { clear: both; text-align: center; font-size: 14px; margin: 20px 0; }
.block-core-Navigator .current, .block-core-Navigator .first-and-previous, .block-core-Navigator .next-and-last { display: inline; padding-left: 10px; }
.block-core-Navigator .current { text-align: center; padding-left: 10px; }
.block-core-Pager { display: inline; }

/* This adds padding between the individual page numbers to improve readability and aesthetics. The class is called out in Pager.tpl. This method works more consistently across browsers compared to the CSS letter-spacing property. */
span.indiv-page { padding-left: 10px; }

/* -- Breadcrumb -------------------------- */
.block-core-BreadCrumb { display: inline; }
.breadcrumb { text-align: center; font-size: 14px; margin-bottom: 10px; }

/* -- ExifInfo ---------------------------- */

.block-exif-ExifInfo div { font-size: 0.8em; color: #999; margin: 1em 0; }
table.gbDataTable { width: 100%; border-collapse: collapse; }
table.gbDataTable td { padding: 0.2em 0.5em 0.2em 0; border-bottom: 1px solid #eee; }
table.gbDataTable td.gbEven { font-weight: bold; }

/* -- System- / Item-Links ---------------- */

.gbSystemLinks, .block-core-ItemLinks, .block-core-EmergencyEditItemLink { padding-left: 50px; font-size: 11px; line-height: 12px; }
.gbSystemLinks .block-core-SystemLink a, .block-core-ItemLinks a, .block-core-EmergencyEditItemLink a { display: inline; color: #171717; /* same as background so invisible to visitors */ }
.gbSystemLinks a:hover, .block-core-EmergencyEditItemLink a:hover { color: #ccc; }
.block-core-GuestPreview { float: right; margin: -20px 50px 0 0; font-size: 11px; }

/* -- Toolbar ----------------------------- */

#toolbar { clear: both; border: 1px solid #ccc; background: #f1f1f1; margin: 1em 0; padding: 0.5em; }

/* -- Admin ------------------------------- */

.gallery-admin { font-size: 0.9em; }
.gallery-admin h2 { font-size: 1.2em; margin-top: 2em; overflow: hidden; }
.gallery-admin h4 { margin-bottom: 0.5em; }
.giSuccess, .giWarning, .giError  { font-weight: bold; }
.giSuccess { color: #5c0; }
.giWarning { color: #c50; }
.giError { color: #a44; }
.gallery-admin .gbBlock { margin: 10px 10px 10px 20px; }
#gsSidebar { width: 13em; overflow: hidden; padding-right: 1em; }
#gsSidebarCol { width: 1%; }
#gsSidebar ul { padding: 0; margin: 0; font-weight: bold; }
#gsSidebar ul ul { font-weight: normal; }
#gsSidebar li.gbAdminLink { background: none; list-style: none; padding: 0.2em 0; margin: 0; }
.gbTabBar { padding: 0.2em 0; border-bottom: 1px solid #ccc; }
.gbTabBar a { border: 1px solid #ccc; padding: 0.2em 1em; background: #eee; margin: 0 0.2em; }
.gbTabBar .giSelected { margin: 0 0.2em; padding: 0.2em 1em; border: 1px solid #ccc; border-bottom: 1px solid #fff; font-weight: bold; background: #fff; }
.giUpdated, .giNew { font: normal 9px Arial; text-transform: uppercase; color: #222; background: #ffea88; padding: 0 3px; margin-left: 3px; }
#giFormUsername, .giFormUsername { background: url('../siriux/images/userinfo.png') #ccc no-repeat 0 1px; padding-left: 17px; }
#giFormGroupname { background: url('../siriux/images/groupinfo.png') no-repeat 0 1px; padding-left: 17px; }
#giFormPassword { background: url('../siriux/images/key7-16-bw.gif') #ccc no-repeat 0 1px; padding-left: 17px; }