/*
Theme Name: Panels
Theme URI: http://sammy.nu/
Description: Slideable panels all over, this theme is jQuery intensive. But still functionable when javascript is turned off.
Version: 0.1
Author: Sammy Hubner
Author URI: http://sammy.nu/

*/





/* TYPOGRAPY - COLORS
****************************************************************/

*	
{
	font: 1em Georgia, serif;
	//color:#000;
}

#content h1              	{ font-size: 18px; margin: 20px 0; color:#00AEEF; }
#content h2              	{ font-size: 15px; margin: 13px 0 }
#content h3              	{ font-size: 14px; margin: 13px 0 }
#content p					{ line-height:20px;}
#content h4, #content p,
#content blockquote, #content ul,
#content fieldset, #content form,
#content ol, #content dl, #content dir,
#content menu            	{ margin: 13px 0 }
#content h5              	{ font-size: .83em; margin: 1.5em 0 }
#content h6              	{ font-size: .75em; margin: 1.67em 0 }
#content h1, #content h2, #content h3, #content h4,
#content h5, #content h6, #content b,
#content strong          	{ font-weight: bolder }
#content blockquote      	{ margin-left: 40px; margin-right: 40px }

#content big             	{ font-size: 1.17em }
#content small, #content sub, #content sup 
							{ font-size: .83em }

#content ol, #content ul, #content dir, #content menu, 
#content dd					{ margin-left: 40px }
#content ol li				{ list-style-type:decimal;}
#content ul li				{ list-style-type:circle;}
#content em, #content i		{ font-style: italic;}


/* PROPERTIES OF PANELS
****************************************************************/
/* SWITCHES - LEFTSIDE
===============================================================*/


.switch
{
	height:11px;
	background:#212121 url(/wp-content/themes/panels/img/switch-pointers.png) no-repeat 0px 0px;
	border:3px solid #000;
	border-bottom:none;
	border-left:none;
}

.switch.hover
{
	background-color:#424242;
	background-position:0px 0px;
	cursor: pointer;
}

.hide .switch
{
	background-position:0px -11px;
}

.hide .switch.hover
{
	background-position:0px -11px;
	cursor: pointer;
}

/* SWITCHES - RIGHTSIDE
---------------------------------------------------------------*/

.panels_right .switch
{
	background-position:right -11px;
	border:3px solid #000;
	border-bottom:none;
	border-right:none;
}

.panels_right .switch.hover
{
	background-position:right -11px;
}

.panels_right.hide .switch
{
	background-position:right 0px;
}

.panels_right.hide .switch.hover
{
	background-position:right 0px;
}

/* LABELS - LEFTSIDE
===============================================================*/
.label
{
	background-color:#004eff;
	background-image:url(/wp-content/themes/panels/img/icons-32x32.png);
	background-repeat: no-repeat;
	color:#fff;
	border:3px solid #000;
	border-left:none;
	height:32px;
	min-width:32px;
}

.label h3
{
	padding-right:40px;
	padding-left:10px;
	line-height:32px;
	text-align:center;
}

.hide .label h3
{
	display:none;
}

.label.hover
{
	background-color:#0184ff;
	cursor:pointer;
}

/* LABELS - RIGHTSIDE
---------------------------------------------------------------*/
.panels_right .label
{
	background-color:#d00; /*004eff;*/
	border:3px solid #000;
	border-right:none;
	height:32px;
	min-width:32px;
}

.panels_right .label h3
{
	padding-left:40px;
	padding-right:10px;
	line-height:32px;
	text-align:center;
}
/* this can be deleted if right side labels have the same color */
.panels_right .label.hover
{
	background-color:#f00;
	cursor:pointer;
}

/* CONTENT - LEFT AND RIGHT
===============================================================*/

.content
{
	padding:15px;
	display:block;
	background:url(/wp-content/themes/panels/img/white-transparant-85.png);
	border:3px solid #000;
	border-left:none;
	border-top:none;
}

.content.closed, .hide .content
{
	display:none;
}

.panels_right .content
{
	border-right:none;
	border-left:3px solid #000;
}


/* LAYOUT
****************************************************************/

html
{
	background: #fff url(/wp-content/themes/panels/img/logo.png) no-repeat fixed center center;;
}

body { position:relative; }

#logo
{
	position: absolute;
	top:0px;
	left:40px;
	height:100px;
	text-align:center;
}

#logo h1
{
	background-color:#004eff;
	border:3px solid #000;
	border-top:none;
	border-bottom:none;
	padding:5px 10px 0px 10px;
	font-size:2.3em;
}

#logo h1 a
{
	text-decoration:none;
	color:#fff;
}

#logo h1 a:hover
{
	text-decoration:underline;
}

#logo .description
{
	color:#fff;
	background-color:#004eff;
	border:3px solid #000;
	padding:10px;
	border-top:none;
	border-bottom:none;
}

#logo .switch
{
	border:3px solid #000;
	background-position: 0px -22px;
}

#logo.closed .switch
{
	background-position: 0px -33px;
}

#logo.closed
{
	position: absolute;
	top:0px;
	left:30px;
	height:2em;
	text-align:center;
}

#logo.closed h1
{
	padding:5px;
	line-height:1.5em;
	font-size:1.5em;
}

#logo.closed .description
{
	display:none;
}

/* POST - single post panel
****************************************************************/

#post
{
	position:absolute;
	top:150px;
	left:0px;
	width:500px;
}

#post.hide
{
	width:35px;
}

#post .label
{
	background-position:right -0px; /* pin */
}

#post > .content
{
	min-height:64px;
}

#post .post
{
	border-bottom:1px solid #999;
}

#post .post h2.the_title
{
	font-size:1.5em;
	margin-bottom:0px;
}

#post .post .date
{
	font-size:0.7em;
	color:#999;
}

#post .post h2 a
{
	text-decoration:none;
	color:#00f;
}

#post .postmetadata
{
	border:1px solid #999;
	background:#eee;
	padding:10px;
	font-size:.8em;
	font-style: italic;
	color:#999;
}

/* POST commments 
---------------------------------------------------------------*/

#comments_post .label
{
	border-top:none;
	background-position:right -192px; /* thought cloud */
	
}

.comment
{
	margin:15px;
	position:relative;
	border-bottom:1px solid #999;
	padding-bottom:15px;
}

.comment cite a
{
	color:#00f;
	font-weight: bold;
	text-decoration:none;
}

.comment cite a:hover
{
	text-decoration:underline;
}

.comment-meta
{
	position:absolute;
	top:0px;
	right:0px;
}

.comment-meta a
{
	color:#999;
	font-size:0.8em;
	text-decoration:none;
}

.comment-meta a:hover
{
	text-decoration:underline;
}

.comment-author .avatar
{
	float:left;
	margin-right:10px;
}

/* POST SIDEBAR - sidebar of the post article, includes share panel, comment panel and related posts panel
****************************************************************/

#post_sidebar
{
	position:fixed;
	top:185px;
	left:497px;
	border-left:3px solid #000;
}

.post_sidebar_panel
{
	border-left:none;
}

#share .label
{
	background-position:right -32px; /* envelope 1 -32px - envelope 2 -64px */
}

#post_comment .label
{
	border-top:none;
	background-position:right -160px; /* talk cloud */
}

/* commentform
---------------------------------------------------------------*/

#commentform p
{
	margin:0.5em 0px;
	font-size:0.8em;
}

/* search panel
****************************************************************/

.panels_right .switch	{ border-bottom:3px solid #000; }
.panels_right .label	{ border-top:none; }

#search_panel
{
	position:absolute;
	top:20px;
	right:0px;
}

#search_panel .label
{
	background-position:0px -224px;
}

#sidebar
{
	position:absolute;
	top:150px;
	right:0px;
}


/* Help
****************************************************************/

.redline	{ border:1px solid #f00; }