/*
Theme Name: Diompika_TAL
Theme URI: http://www.mishila.com/
Description: The new diompika.org layout using TAL
Version: 0.4
Author: Lutz Hamann
Author URI: http://www.mishila.com/
Tags: phptal,diompika

	Copyright (c) 2010-2014 Lutz Hamann <lhamann@planettime.de>

	Permission to use, copy, modify, and distribute this software for any
	purpose with or without fee is hereby granted, provided that the above
	copyright notice and this permission notice appear in all copies.

	THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
	WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
	MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
	ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
	WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
	ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
	OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/

	body {
		font-family:sans-serif, serif;
		font-size:12px;
		color:#333;
	}

/*
 *************** DEFAULTS
 */
	/*	Links */
	a {
		color: #003366;
		text-decoration:none;
	}
	a:visited {
		text-decoration:none;
	}
	a:hover {
		text-decoration:underline;
	}

	/*	Image border removed everywhere */
	img {
		border-style: none;
	}
/*
 *************** GENERAL LAYOUT
 */	
	/*	Header
		The image is in the html as image, this only sets the background and overflow */
	.header {
		background:url('./gfx/headerbg.jpg') repeat-x;
		height:160px;						/* force height to show the bar below header image */
		overflow:auto;						/* bg-image forces the div to grow */
	}
 
	/*	This is wrapped around all content, just one level inside the
		body tag. Enables us to give the site a default bg-color */
	.outer-wrapper {
		background:url('./gfx/bg_wrapper.gif') repeat-y;
		background-color:#fff;				/* bright background default */
		overflow: auto;						/* let the container grow with the inside (mainly content) div */
		width:952px;						/* do we want the whole width? */
		margin:0px auto;					/* 0px top&bottom and auto left and right */
		padding:0px 14px 25px 14px;			/* inside left and right to see bg-image, bottom to seperate from footer */
	}
 
	/* 	This is the main-content */
	.content {
		margin-left:160px;					/* Left and right margins */
		margin-right:150px;					/* to make space for the sidebars */
		padding: 0px 10px;					/* Padding inside for the text only left, right */
		background-color:white;				/* white background override */
		overflow: auto;						/* let the inner divs grow this one */
	}
	
	/*	This is the container for the sidemenu on the left
		Just in case we ever need it */
	.menu {
		clear:both;
	}
	
	/*	Navigation containing forward
		and backward links for posts pages */
	.navigation {
		overflow: auto;						/* let the inner divs grow this one */
		border-top: 1px solid #EFEAE4;		/* border above */
		border-bottom: 1px solid #EFEAE4;	/* and below */
	}

	/*	This is the footer below the page */
	.footer {
		clear:both;							/* No floating */
		text-align:center;					/* Center Text */
		background:url('./gfx/bg_footer.gif') no-repeat;
		background-color:#fff;				/* bright background */
		background-position:right top;
		overflow: auto;						/* let the container grow with the inside (mainly content) div */
		width:952px;						/* do we want the whole width? */
		margin:0px auto;					/* 0px top&bottom and auto left and right */
		padding:20px 14px 0px 14px;			/* inside padding 14px left and right to see bg-image */
	}	
	
/*
 *************** SIDE MENU
 */
	/*	General settings for the whole menu */
	.sidemenu {
		float:left;
		font-size:12px;
		text-decoration: none;
		background-color:#bacfe3;			/* dark background */
		overflow: auto;						/* let the inner divs grow this one */
	}
	.sidemenu li {
		border-width: thin 0px 0px 0px;	/* better leave the border out or just thin above with ridge */
		border-style: ridge;
		border-color: #fff;
	}

	/* First Level Main Menu */
	.sidemenu ul {
		list-style: none;					/* no bullets */
		margin:0px 0px 0px 0px;				/* no margins */
		padding: 0px 0px 0px 0px;			/* no padding */
		width:159px;						/* fixed width */
	}
	.sidemenu ul li {
		padding: 5px 0px 5px 0px;			/* pad the inner content top and bottom */
	}
	.sidemenu ul ul {
		margin-bottom:-5px;					/* remove the margin left by the outer padding */
		margin-top:5px;						/* and add it to the top instead */
	}
	.sidemenu ul li a {
		margin-left:10px;					/* pad the link text on the left */
		color: #000;						/* black text */
	}

	/*	Second Level Main Menu */
	.sidemenu ul ul li {
		background-color:#dce7f1;			/* brighter background */
	}
	.sidemenu ul ul li a {
		margin-left:20px;					/* more margin to the left */
		color:#000;							/* same black text */
	}

	/* Mark the <a> in the currently selected menu, but not in it's children */
	.sidemenu .current_page_item a {
		text-decoration:underline;
	}
	.sidemenu .current_page_item ul li a{
		text-decoration:none;
	}
	
	/* Dont display second level menu by default */
	.sidemenu ul ul {
		display: none;
	}
	/* Display children of active first level */
	.sidemenu ul .current_page_item ul {
		display: block;
	}
	/* Display children of active second level's parent */
	.sidemenu ul .current_page_parent ul {
		display: block;
	}
/*
 *************** SIDE BAR
 */
	/*	General settings for the whole menu */
	.sidebar  {
		float:right;
		font-size:12px;
		text-decoration: none;	
		list-style: none;					/* no bullets - needs to be here, since we dont have a ul around the il widgets */
		width:150px;
		background-color:#bacfe3;			/* dark background default */
		color:black;						/* black text */
	}
	.sidebar ul {
		list-style: none;					/* no bullets - needs to be here, since we dont have a ul around the il widgets */
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
	}
	.widget {
		background-color:#bacfe3; 			/* basic default for widget */
		border-width: thin 0px 0px 0px;		/* better leave the border out or just thin above with ridge */
		border-style: ridge;
		border-color: #fff;
	}
	/*	This is the inner ul,
		most widgets produce this ul */
	.widget ul {
		list-style: none;
		margin:0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;			/* padding comes further inside */
		background-color:#dce7f1;			/* bright background override */
	}
	/*	Search widget produces form instead of ul,
		so combine everything for the form in here */
	.widget form {
		margin:0px 0px 0px 0px;
		padding: 5px 0px 5px 20px;			/* pad the inner content top and bottom AND the 20px left for the form only */
		background-color:#dce7f1;			/* bright background override */
	}
	/* 	and reduce the width of the inner text field for the search form
		and a bit of space before the submit button (id s for the searchform) */
	.widget form div #s {
		width: 120px;
		margin-bottom:10px;
	}
	.widget li {
		margin:0px 0px 0px 0px;
		padding: 5px 0px 5px 0px;			/* pad the inner content top and bottom */
		border-width: thin 0px 0px 0px;		/* better leave the border out or just thin above with ridge */
		border-style: ridge;
		border-color: #fff;
	}
	.widgettitle  {
		font-size:12px;
		font-weight:normal;
		margin:0px 0px 0px 10px;			/* only margin on the left */
		padding: 5px 0px 5px 0px;			/* pad the inner content top and bottom */
		
	}
	.widget ul li a {
		margin-left:20px;					/* more margin to the left */
		color:black;						/* brighter text */
	}
/*
 *************** Content, Post, Page
 */

	/*	The whole article is wrapped in this style */
	.content p {
		line-height:18px;
		margin:12px 0px;					/* top and bottom margin, left and right clear */
	}
	
	/*	Commons for headings */
	.content h1, h2, h3, h4 {
		color: #43719d;
		margin:10px 0px 5px 0px;			/* Default margin for all h1-h4, more on top, less on bottom, none on side */
		text-decoration:none;
		font-weight: normal;
	}
	/*	Heading-specific overrides */
	.content h1 {
		font-size:24px;
		font-weight: bold;
		margin: 0px 0px 5px 0px;			/* Override margin to be zero on top */
	}
	.content h2 {
		font-size:18px;
	}		
	.content h3 {
		font-size:16px;
	}
	.content h4 {
		font-size:14px;
	}
	
	/*	Links are underlined and same color as headings */
	.content a {
		color: #43719d;
		text-decoration: underline;
	} 
	
	/*	Quotation
		normal font but italic
		left solid border, darker blue */
	.content blockquote {
		font-style: italic;					/* font */
		border-left: 1px solid #bacfe3;		/* border-line :) */
		padding-left: 5px;					/* padd between border and text */
	}
	
	/*	Entry (in multipost page or even the single entry)
		Postings are wrapped as a list inside the content div,
		inheriting all content styles.
		Override this content style from here on */
	.entry {
		margin-left: 100px;					/* Set a default left-margin for all pages (overridden for page later) */
	}
	
	/*	Post
		Reduce the inner margin a bit (top and bottom) */
	.post p {
		margin:5px 0px;
	}
	
	/*	Page
		Additional to .entry*/
	.page {
		margin-left: 0px;					/* reset the left margin for pages */
	}
	
	/*	Date field under a blog listing */
	.date {
		font-size:10px;
	}
	
	/*	Posts have a header
		with border on top and
		no underlining of links */
	.post-header {
		border-top: 1px solid #EFEAE4;
	}
	.post-header p {
		margin: 0px;
	}
	.post-header a {
		text-decoration: none;
	}
	.post-header a:visited {
		text-decoration:none;
	}
	.post-header a:hover {
		text-decoration:underline;
	}
	
	/*	The Footer justs clears the 
		floating for the next post
		to be displayed correctly */
	.post-footer {
		clear: both;
		padding-bottom: 10px;
	}
	
/*
 *************** Comments
 */	
	
	.comments {
		clear: both;
		border-top: 1px solid #EFEAE4;
		max-width: 615px;
		overflow: auto;
	}
	
	.comment-form {
		max-width: 615px;
	}
	
	.comment-form textarea {
		max-width: 600px;
		width: 100%;
	}

/*
 *************** Pictures
 */

	/*	Picture with caption
		Caption is overlayed and the picture might use the .size-xxx and align-xxx styles as well
		href-decorations are switched off
		line-height and text size for description lowered
		10px Image Margin Fix Plugin needed to display correctly
		*/
	.entry .wp-caption {
		margin: 5px;						/* margin around */
		max-width: 515px;					/* limit the width to the space available */
		position: relative;					/* position for the text-div */
	}
	/* .page is allowed to have a 100px wider picture, since it uses the full width */
	.page .wp-caption {
		max-width: 615px;
	}
	.wp-caption p {
		line-height: 13px;					/* line height for caption reduced */
		font-size: 11px;					/* font size for caption reduced */
		margin: 0px;							/* override the margin inherited from content */
	}
	.wp-caption-text {
		background-color: rgba(0,0,0,0.5);	/* black transparent bg */
		background: 						/* and the same for ie */
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000)"; /* IE8 */
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000,endColorstr=#CC000000);   /* IE6 & 7 */
			zoom: 1;
		bottom: 0px;						/* specify bottom, left and right	*/
		left: 0px;							/* margin to force 100% available 	*/
		right: 0px;							/* width used including padding 	*/
		color: #dce7f1;						/* light blue text */
		padding: 5px;						/* pad on all sides */
		position: absolute;					/* absolute pos inside img-div */
		z-index: 5;							/* all the way in front */
		margin: 0px;						/* remove all margins to wedge into picture div */
	}
	
	/*	Full- and medium-sized image,
		needs to be restrained in width */
	.entry .size-full, .entry .size-medium {
		max-width: 515px;					/* maximal width */
		height: auto;
		/* TODO: ie doesn't calculate the height:auto correctly and keeps the explicit height */
	}
	/* .page is allowed to have a 100px wider picture, since it uses the full width */
	.page .size-full, .page .size-medium {
		max-width: 615px;					/* maximal width */
		height: auto;
		/* TODO: ie doesn't calculate the height:auto correctly and keeps the explicit height */
	}
	
	/*	Floating images: left, center and right
		None: linebreak style */
	.alignleft { 
		float: left;
		margin: 0px 12px 0px 0px;  			/* oben rechts unten links */
	}
	.aligncenter {
		margin: 12px auto;					/* auto left and right, 12px up and down */
	}
	.alignright {
		float: right;
		margin: 0px 0px 0px 12px; 
	}
	.alignnone {
	}