/*
Theme Name: RohJuh V5
Theme URI: http://rohjuh.com/
Description: RohJuh V5 Theme
Version: 0.1
Author: Roger Hsu
Author URI: http://rohjuh.com/

	rohjuh v5 v0.1
	http://rohjuh.com

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php
*/

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

body { margin: 0 auto; padding: 0; width: 1100px; background: black; color: black; text-align: center; position: relative; }

/* shift up 30px to partially cover nav bar reflection */
#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) - css/html design from apple.com */
#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 - active states thanks to http://www.tech-hive.com/tutorial/creating-active-tabs-in-wordpress/ */
#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: 19px 0 0 35px; border: 0; width: 159px; background: none; font-size: 12px; }

/* -----------------------   Main post/entry content -------------------------- */

#container { margin: -25px auto 0 auto; width: 950px; font-size: 12px; text-align: left; font-family: Helvetica, Verdana, Arial, Sans-Serif; } /* top margin needs to shift up a bit because top_pics has been shifted up to partially cover nav bar reflection */
#main_col .post_body { line-height: 17px; }
#main_col { float: left; width: 578px; }
.post { text-align: justify; position: relative; }

/* Begin Post/Entry box */
.post_top, .title, .post_body, .post_bottom { width: 578px; position: relative; }
.post_top { background: url(images/post_title.jpg) no-repeat center top; margin: 0 0 15px 0; }
.post_body { background: url(images/post_body.jpg) repeat-y center; margin: 0; padding: 20px 0 0 0; bottom: 20px; font: 14px Helvetica, Verdana, Arial, Sans-Serif; }
.post_bottom { background: url(images/post_bottom.jpg) no-repeat left bottom; padding: 30px 0 0 0; }

h2, h2 a, h2 a:visited { color: #eeeeee; }
h2, h2 a, h2 a:hover, h2 a:visited, #sidebar h2, cite { font: 21px normal; font-family: "Helvetica Neue Light", Helvetica, Verdana, Arial, Sans-Serif; text-decoration: none; }

.title { width: 100%; margin: 0; padding: 0; display: inline; }
/* use top padding to push title h2 and post_date to be vertically aligned along the bottom */
.title h2 { margin: 0; text-align: left; max-height: 45px; padding: 10px 0 0 30px;}
.post_date { color: white; font: 12px normal "Helvetica Neue Light", Helvetica, Verdana, Arial, Sans-Serif; margin: 0; padding: 20px 35px 0 0; display: block; max-height: 45px; float: right; text-align: right; }

.postmetadata { padding-top: 5px; margin: 0px; text-align: center;}

/* left & right padding different due to assymetry of main container (drop shadow on right side) */
.post_body p { margin: 0px; padding: 10px 40px 5px 35px; }

/* Begin Headers */
/* h1 is saved for the name of the site. In my case, the site name is in an image so h1 is not used */
/* h2 for the Archive page - 'Archive for ...' */
h2.pagetitle { margin: 0 auto 20px auto; text-align: center; font-size: 30px; line-height: 30px; }

/* End Headers */

#main_col ul { list-style-type: disc; padding: 10px 50px 0 50px; }
#main_col ol { padding: 0 0 0 35px; margin: 0; }
#main_col ol li, #main_col ul li{ padding: 0 25px 10px 10px; margin: 0px; }

/* Begin Sidebar */
#sidebar { float: right; width: 358px; font: 12px; }
.sb_top, .sb_title, .sb_body, .sb_bottom { width: 358px; position: relative; }
.sb_top { background: url(images/sb_title.jpg) no-repeat center top; margin: 0 0 15px 0; }
.sb_body { background: url(images/sb_body.jpg) repeat-y center; margin: 0; padding: 15px 0 0 0; bottom: 20px; }
.sb_bottom { background: url(images/sb_bottom.jpg) no-repeat left bottom; padding: 30px 0 0 0; }

.sb_title { margin: 0; padding: 10px 0 0 0; }
h2.sb_title { margin: 0; height: 25px; line-height: 25px; text-align: center; } /* "Featured Adventures" "RohJuh Shuffle" */

#fa { height: 335px; } /* these blocks contain pics only and for some reason need height definitions */
#shuffle { height: 500px; }

.photo_block { margin: 0 0 0 9px; }

/* style for G2 photo block */
.gallery-thumb { text-align: center; float: left; padding: 0 2px 2px 2px; }
.gallery-thumb img { background: #fff; border: 1px #b2b2b2 solid; padding: 4px; margin: 1px; }
.gallery-thumb a:hover img { border-width: 2px; border-color: #38c; margin: 0; }

#footer { margin: 0 0 100px 0; }
#footer img { display: inline; float: left; margin: 0 10px 0 30px; border: 0 }
#footer ul { padding-top: 20px; }
#footer li { margin: 0; text-align: left; list-style-type: none; }
#footer li a { font-size: 12px; line-height: 20px; color: #999999; }

/* End Sidebar */

.navigation { display: block; margin: 20px 40px 100px 35px; color: #777; font-size: 16px; }
.alignright { float: right; }
.alignleft { float: left; }
.alignleft a, .alignright a { color: #ccc; font-size: 16px; }

.postmetadata, .commentmetadata { font-variant: small-caps; }

code { font: 10px 'Courier New', Courier, Fixed, Sans-Serif; }

a:hover { color: #147; text-decoration: none; }
a, h2 a:hover, h3 a:hover { color: #34c; text-decoration: none; }

/* Begin Images */
p img { padding: 0; max-width: 100%; }

img.centered { display: block; margin: 10px auto; border: 1px solid #999; }
img.alignright { margin: 0 0 20px 20px; display: inline; border: 1px solid #999; }
img.alignleft { margin: 0 20px 20px 0; display: inline; border: 1px solid #999; }
	
/* aligned images in which a border is not desired */
img.centerednoborder { display: block; margin: 10px auto; }
img.alignrightnoborder { margin: 0 0 20px 20px; display: inline; float: right; }
img.alignleftnoborder { margin: 0 20px 20px 0; display: inline; float: left; }

/* End Images */

/* Begin Comments */
.comments { margin: 0 35px; padding-bottom: 20px; }
#commentform .textform { padding: 2px; margin: 0 5px 0 0; font-size: 12px; border: 1px solid #999; }
#commentform textarea { width: 97%; font-size: 12px; padding: 1px; }
#commentform #submit { margin: 0 10px 0 0; float: right; }
.commentlist { padding: 0; text-align: justify; }
.commentlist li { margin: 15px 0 3px; padding: 5px 10px 3px; list-style: none; }
.commentlist p { margin: 10px 5px 10px 0; }
#commentform p { margin: 0; padding: 5px 0; }
.nocomments { text-align: center; margin: 0; padding: 0; }
.commentmetadata { float: none; margin: 0px; text-align: center; color: #7f7f7f; padding: 0px; font-weight: normal; }

/* Begin comment box (both styles) */
.comments { font-size: 14px; text-align: left; }
.comments h3 { font: 16px Helvetica, Verdana, Arial, Sans-Serif; padding: 0; margin: 30px 0 0 0; } /* used in comments. e.g. '3 responses to ...' */
.comments p { margin: 0px; padding: 5px 25px; }
.comment-top-1 { background: url("images/comment_top_1.jpg") no-repeat top; width: 505px; margin: 20px 0 0 0; }
.comment-bottom-1 { background: url("images/comment_bottom_1.jpg") no-repeat bottom; width: 505px; padding: 30px 0px 0px 0px; }
.comment-body-1 { background: url("images/comment_body_1.jpg") repeat-y center; width: 505px; text-align: left; padding: 0px; position: relative; bottom: 15px; }
.comment-top-2 { background: url("images/comment_top_2.jpg") no-repeat top; width: 505px; margin: 20px 0 0 0; }
.comment-bottom-2 { background: url("images/comment_bottom_2.jpg") no-repeat bottom; width: 505px; padding: 30px 0 0 0; }
.comment-body-2 { background: url("images/comment_body_2.jpg") repeat-y center; width: 505px; text-align: left; padding: 0px; position: relative; bottom: 15px; }
/* End comment box */

p.respond { font-size: 16px; margin: 30px 0 0 0; padding: 0; }
/* End Comments */

/* Archives page */
.archives { padding-left: 30px; font-size: 16px; }
.archives li { list-style-type: none; padding-bottom: 15px; }


/* Begin Various Tags & Classes */
.alt { margin: 0; padding: 10px; }
blockquote cite { margin: 5px 0 0 0; display: block; }
.center { text-align: center; }
hr { display: none; }
a img { border: none; }
/* End Various Tags & Classes*/

blockquote { margin: 10px 0 10px 30px; padding: 0 30px; background: url(images/quote.gif) no-repeat left top; }
pre { padding-left: 25px; }