/***************************************************************************************************
Theme Name: smthg
Theme URI: http://something.elzz.org/
Description: theme for something.elzz.org
Version: 2.0
Author: Elise & Leo
Author URI: http://something.elzz.org/
Tags: california, elzz, something
***************************************************************************************************/


/***************************************************************************************************
 * General
 **************************************************************************************************/

html {
	height: 100%;
	}

body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	background: #8a172f url('images/background.png');
	color: #333;
	margin: 0;
	padding: 0;
	height: 100%;
	}
	
h1, h2, h3, p {
	margin: 0;
	}
	
hr {
	display: none;
	}

a {
	text-decoration: none;
	color: #333;
	}
a:hover {
	color: #f00;
	}

img {
	border: none;
	}

img.wp-smiley {
	vertical-align: -25%;
	}

.clearer {
	clear: both;
	}
	
.center {
	text-align: center;
	}

.center img,
img.alignright,
img.alignleft {
	border: 1px solid #888;
	vertical-align: middle;
	padding: 4px;
	margin: 4px;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}

/***************************************************************************************************
 * Layout
 *
 * To ensure that the different columns always draw their background up to the height of the longest
 * column the layout is a complicated nesting of div elements.
 * For each column we define an extra div that's wrapping around the whole content. These extra divs
 * take the burden of drawing the backgrounds. Since these divs are the parent of all the columns
 * the will take the size of the biggest of their chidren.
 **************************************************************************************************/

/**
 * Page.
 *
 * Page is the main container it includes everything.
 */
#page {
	margin: 0;
	padding: 0;
	
	height: 100%;
	}

/**
 * Main Wrapper.
 *
 * It includes all the content (posts, sidebar, ...) but not the header and main menu.
 */
#wrapper {
	position: relative;
	margin-left: 196px;
	z-index: 2;
	
	height: 100%;
	}

/**
 * Left/Sidebar Wrapper.
 *
 * Used to draw the background of the sidebar.
 */
#leftColumn {
	background: url('images/sidebar-background.png') repeat-y;
	
	min-width: 690px; /* = 226px ('sidebar') + 400px ('min-width content') + 64px ('right col') */
	min-height: 100%;
	}
/* special wider column for the gallery 2 page */
.galleryPage #leftColumn {
	min-width: 1120px; /* = 226px ('sidebar') + 860px ('min-width content') + 64px ('right col') */
	}

/**
 * Left/Sidebar Wrapper.
 *
 * Used to draw an extra image overlaying the background of the sidebar.
 */
#leftColumnBottom {
	background: url('images/sidebar-footer.png') left bottom no-repeat;
	
	margin: 0 0 0 3px;
	}
	
/**
 * Right Wrapper.
 *
 * Used to draw an the background of the right column.
 */
#rightColumn {
	background: url('images/rightColumn-background.png') right repeat-y;
	}

/**
 * Middle Wrapper.
 *
 * Define the margins so that the content is not hidden by the left or right column.
 */
#contentWrapper {
	margin: 0 64px 0 226px;
	padding: 14px 0 14px 0;
	}

/**
 * Middle Wrapper.
 *
 * Extra wrapper used to draw the shadow of the left column over the middle column.
 */
#contentWrapper #leftWrapper {
	background: #fff url('images/leftShadow.png') left repeat-y;
	padding: 0 0 0 3px; /* pad by the size of the shadow */
	}

/**
 * Middle Wrapper.
 *
 * Extra wrapper used to draw the shadow of the right column over the middle column.
 */
#contentWrapper #rightWrapper {
	background: #fff url('images/rightShadow.png') right repeat-y;
	padding: 0 3px 0 0; /* pad by the size of the shadow */
	}

/**
 * Content closer.
 *
 * Since the '#content' node itself is floated, this is used to push the parent containers/wrappers
 * down to the end of the actual content.
 */
#contentWrapper #contentCloser {
	clear: both;
    }

/**
 * Full Height Expanders.
 *
 * Used to push the containing column length down to bottom of the window if the containing column
 * is shorter than the window height.    
 */
.columnFullHeightExpander {
	clear: both;
	float: left;
	height: 0px;
	}

/***************************************************************************************************
 * Header & Menu
 **************************************************************************************************/

/**
 * Header block.
 *
 * The header is fixed (doesn't scroll with the rest of the window) in the left-top corner of the
 * window.
 */
#header {
	position: relative;
	float: left;
	left: 0px;
	top: 0px;
	z-index: 1;
	
	width: 200px;
	}

/**
 * Header Image.
 *
 * The image added as a background of 'headerimg' contains both the blog's title and description,
 * so we can hide all the children elements of 'headerimg'. These will be displayed only if this
 * CSS stylesheet is missing.
 * To ensure the images is fully shown event though the div is empty we force the width and height
 * to match the image's dimensions.
 */
#headerimg {
	z-index: 1;
	}
#headerimg h1 {
	margin: 0;
	padding: 0;
	}
#headerimg h1 a {
	display: block;
	background: url('images/logo.png') no-repeat;
	width: 219px;
	height: 170px;
	}
#headerimg h1 a span {
	display: none; /* => hidden */
	}
#headerimg div.description {
	display: none; /* => hidden */
	}


/**
 * Menu.
 *
 * The list element is used just as container, but in fact our list items will be displayed as
 * buttons not as a proper list, so all the 'ul' tag defaults need to be reinitialized.
 * 
 * Also a top-margin is defined to separate the menu from the 'headerimg'.
 */
#headermenu {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: right;
	
	margin-top: 30px;
	}

/**
 * Menu items.
 *
 * Specifies common properties (background, font, text color, padding, ...) of all menu items. 
 */
#headermenu li {
	background: url('images/menu-button.png') repeat-y;
	
	font-family: Helvetica, Sans-Serif;
	font-size: 1.6em;
	font-weight: normal;
	font-variant: small-caps;
	
	text-align: right;
	width: 200px;
	height: 1.8em;
	
	margin: 15px 0 15px 0;
	}
#headermenu li a {
	display: block;
	
	color: #ffffff;
	
	padding: 5px 10px 2px 0;
	}
#headermenu li a:hover {
	color: #8a172f;
	}

/***************************************************************************************************
 * Sidebar
 **************************************************************************************************/

/**
 * Sidebar container.
 *
 * The slidebar is align to the left. it's floated, since it's the common way to simulate 2 columns
 * layouts.
 * The container is wider than what's really necessary to allow room for the shadow. The real width
 * of the sidebar is applied to it's 'ul' child instead.
 */
#sidebar {
	float: left;
	left: 0;
	padding: 0 0 410px 0;
	
	text-align: center;
	
	width: 226px;
	}
#sidebar ul {
	list-style-type: none;
	
	margin: 0;
	padding: 0;
	}

#sidebar ul li.widget {
	color: #eee;
	padding: 10px 0 10px 0;
	}

#sidebar ul li h2 {
	margin:5px;
	color: #333;
	}

#sidebar ul li a {
	color: #eee;
	}
#sidebar ul li a:hover {
	color: #f00;
	}

/***************************************************************************************************
 * Sidebar Widgets
 **************************************************************************************************/

.wpg2sidebargrid-image {
	margin: 2px;
	}
.wpg2sidebargrid-image a img {
	border: 3px solid #fff;
	width: 60px;
	height: 60px;
	}
.wpg2sidebargrid-image a:hover img {
	border: 1px solid #fff;
	width: 64px;
	height: 64px;
	}

.widget_bb_blc_latestcomments ul#blcCommentList {
	text-align: left;
	padding: 0 10px;
	}
.widget_bb_blc_latestcomments ul#blcCommentList li {
	padding-bottom: 10px;
	}
.widget_bb_blc_latestcomments ul#blcCommentList em {
	font-size: 0.8em;
	}
.widget_bb_blc_latestcomments ul#blcCommentList small {
	display: block;
	padding-left: 10px;
	}
.widget_bb_blc_latestcomments ul#blcCommentList small a:hover {
	color: #f00 !important;
	}
	
/***************************************************************************************************
 * Content
 **************************************************************************************************/

/**
 * Main container.
 *
 * The content must be offseted on the left side to leave room for both the header column and the
 * blog's sidebar column.
 * It must also be offseted to the right to leave room for the narrow meta column.
 */
#content {
	margin: 0 auto;
	padding: 10px;
	min-height: 100%;
	}
/* special padding for the gallery 2 page */
.galleryPage #content {
	padding: 0px;
	}

#content a {
	font-weight: bold;
	}

/**
 * Posts.
 *
 * Main div for every post.
 */
.post {
	clear: right;
	text-align: justify;
	width: 100%;
	padding: 5px 0 10px 0;
	line-height: 18px;
	}
	
.post h2 {
	font-variant: small-caps;
	}

.post .entry {
	padding: 10px;
	
	border-left: solid #ccc 1px;
	border-bottom: solid #ccc 1px;
	}

.post .postmetadata {
	float: right;
	padding: 2px 0 5px 0;
	}


/* Captions */
.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions */
/***************************************************************************************************
 * Comments
 **************************************************************************************************/

#commentsform {
	clear: right;
	text-align: left;
	}
	
#commentsform small {
	padding: 5px 0 5px 0;
	}

#commentsform h3 {
	padding-top: 10px;
	}

#commentsform textarea {
	height: 20em;
	min-height: 20em;
	width: 100%;
	max-width: 100%;
	}
	
#commentsform #smiliesbox {
	float: left;
	width: 69%;
	}

#commentsform #submit {
	float: right;
	}
	
.commentlist li {
	clear: right;
	padding: 10px 0 10px 0;
	}

.commenttext {
	padding: 5px;
	
	border-left: solid #ccc 1px;
	border-bottom: solid #ccc 1px;
	
	line-height: 18px;
	}

.commentclearer {
	clear: right;
	}
	
.commentmetadata {
	float: right;
	}

.avatar {
	float: right;
	width: 48px;
	height: 48px;
	
	border: 1px solid #ccc;
	
	padding: 2px;
	margin: 0 0 2px 2px;
	}

/***************************************************************************************************
 * Right Column Stuff
 **************************************************************************************************/

#clock {
	float: right;
	padding: 2px;
	}

/***************************************************************************************************
 * Footer
 **************************************************************************************************/
 
 #footer {
 	clear: both;
 	display: none;
 	}