/***************************************************************
 * Reset CSS, so that we start with the same in all browsers. *
 **************************************************************/

body, div,
  dl, dt, dd,
  ul, ol, li,
  h1, h2, h3, h4, h5, h6,
  pre, form, fieldset, input,
  p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset, img {
	border: 0;
}

address, caption, cite, code,
  dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

ol, ul {
	list-style: none;
}

caption, th {
	text-align: left;
}

h1, h2, h3, h4, h5, h6 {
	font-size:100%;
}

q:before, q:after {
	content:"”";
}

/**************************************************************
 * Real CSS                                                   *
 **************************************************************/

/**
 * Document wide settings
 */

body {
	/* 80em * 12px (std. font width) = 960 */
	/* width: 				80em; */
	/* 89em * 10.8px (std. font width) = 960 */
	width: 				960px;

	margin: 			0em auto;

	font-family: 		sans-serif;
	line-height: 		18px;

	background-color: 	#ffffff;
	color: 				#000000;

	font-size: 			12px;
}

a:link, a:active, a:hover, a:visited {
	text-decoration: 	none;

	font-weight:		bold;
	color:				#888a85;
}

/**
 * Logo
 */

/* Only used for the banner. Text removed via CSS below. Only shown with CSS off. */
h1 {
	font-size: 12px;

	margin: 0em;
	padding: 0em;
}

h1 a {
	height: 				135px;
	width: 					564px;

	display: 				block;

	margin-left:			198px;
	margin-right:			198px;
	margin-bottom:			20px;
	margin-top:				20px;

	overflow: 				hidden;
	text-indent: 			-99999px;	/* Remove text in CSS enabled browsers */

	background-image: 		url( "/images/banner_index.png" );
	background-repeat: 		no-repeat;
	background-position: 	bottom;
}

/**
 * Active bar, only displayed in IE
 */

div.activebar {
	font-weight:	bold;
}

/**
 * Navigation and meta column common
 */

div.sidebox {
	width:			100%;
}

div.sidebox h2 {
	margin-bottom:	10px;
}

div.sidebox div.content {
	margin-left: 	13px;
	margin-bottom:	10px;
}

/**
 * Navigation tree (left column)
 */

div#subnav {
	width: 			160px;

	clear: 			both;
	float:			left;

	margin-top:		40px;
}


div#subnav div.sidebox {
	margin-right:	10px;
}

ul#menu li {
	margin:	3px 0px;
}

ul#menu li ul {
	margin-left:	12px;
}

ul#menu li a {
	font-weight: 	normal;
}

ul#menu li.requested > a {
	font-weight: 	bold;
}

/* Search box */

div#search fieldset {
	border: 1px solid #555753;
	background-color: #ffffff;

	margin: 0px;
	padding: 0px;

	width: 125px;
}

div#search label,
div#search legend {
	display: none;
}

div#search input {
	float: none;
	border: none;
}

div#search input#search_phrase {
	width: 105px;
	text-indent: 10px;
}

div#search input[type=submit] {
	/* Image size */
	width: 		15px;
	height: 	18px;
	
	/* Move submit text out of the way */
	text-indent: 500px;
	overflow: hidden;

	background-image: url( "/images/search.png" );
	background-repeat: no-repeat;
	background-position: 0px 2px;
}

/**
 * Meta data (right) column
 */

div#metadata {
	float:		right;
	width: 		160px;
	margin-top:	40px;
}

ul.buttons {
	list-style-type: none;
}

ul.buttons li a {
	display: 	block;
	width:		80px;
	height:		15px;
    
	margin: 8px 0;

    background-repeat: no-repeat;
	background-position: 0px -15px;
}

ul.buttons li a:hover {
	background-position: 0px 0px;
}

ul.buttons li a img {
	display: none;
}

ul.buttons li a#license_by_nc_sa {
	background-image: url( "/images/buttons/by_nc_sa.png" );
}

ul.buttons li a#wishlist_amazon {
	background-image: url( "/images/buttons/wishlist_amazon.png" );
}

ul.buttons li a#hire_me {
	background-image: url( "/images/buttons/qafoo_passion_for_software_quality.png" );
	background-position: 0px 0px;
}

ul.buttons li a#book_ezc {
	background-image: url( "/images/ez_components_book.png" );
	height: 				90px;
	width:					67px;
	background-position: 	-67px 0px;
}

ul.buttons li a#book_ezc:hover {
	background-position: 0px 0px;
}

ul.buttons li a#pirates {
	background-image: url( "/images/buttons/pirates.png" );
}

ul.buttons li a#profile_xing {
	background-image: 		url( "/images/buttons/profile_xing.png" );
}

ul.buttons li a#profile_google {
	background-image: 		url( "/images/buttons/profile_google.png" );
}

ul.buttons li a#profile_ohloh {
	background-image: 		url( "/images/buttons/profile_ohloh.png" );
}

ul.buttons li a#thanks_lighttpd {
	background-image: 		url( "/images/buttons/thanks_lighttpd.png" );
}

ul.buttons li a#thanks_gentoo {
	background-image: url( "/images/buttons/thanks_gentoo.png" );
}

ul.buttons li a#thanks_lighttpd {
	background-image: 		url( "/images/buttons/thanks_lighttpd.png" );
	height: 				27px;
	background-position: 	0px -27px;
}

ul.buttons li a#thanks_lighttpd:hover {
	background-position: 0px 0px;

}

ul.buttons li a#thanks_php {
	background-image: url( "/images/buttons/thanks_php.png" );
}

ul.buttons li a#thanks_sqlite {
	background-image: url( "/images/buttons/thanks_sqlite.png" );
}

ul.buttons li a#thanks_svn {
	background-image: url( "/images/buttons/thanks_svn.png" );
}

ul.buttons li a#thanks_wcv {
	background-image: url( "/images/buttons/thanks_wcv.png" );
}

ul.buttons li a#rss {
	background-image: url( "/images/buttons/rss.png" );
}

ul.buttons li a#twitter {
	background-image: url( "/images/buttons/twitter.png" );
}

ul.buttons li a#spam {
	background-image: url( "/images/buttons/spam.png" );
}

ul.buttons li a#standards_xhtml {
	background-image: url( "/images/buttons/valid_xhtml.png" );
}

ul.buttons li a#standards_css {
	background-image: url( "/images/buttons/valid_css.png" );
}

/**
 * Top navigation (center column)
 */

div#mainnav {
	width: 			524px;
	height:			40px;
	margin:			0px 198px 0px;
	padding:		0em 20px 0px;
	border-left:	2px solid #888a85;
	border-right:	2px solid #888a85;
}

div#mainnav ul {
	margin:	0em;
	width:	100%;
}

div#mainnav ul li {
	display:	block;
	float:		left;
	width:		33%;
	text-align:	center;
}

div#mainnav ul li a {
	padding:		4px;
	font-size:		15px;
	font-weight:	bold;
}

div#mainnav ul li a.selected {
	border:	none;
}

/**
 * Content area (center column)
 */

div#content {
	width: 			524px;
	min-height:		780px;						/* 780px, creates scrollbar even on my resolution ;) */

	margin:			0em 198px 0em;
	padding:		0em 20px 20px;				/* Always 1em margin at the end of the page */

	border-left:	2px solid #888a85;
	border-right:	2px solid #888a85;
}

div#content > div p, div#content > p, div#content > div address, div#content div.note {
	/* text-indent:	2em; */	/* indent first line of normal floating text paragraphs */
	margin-bottom:	15px;
}

div#content div.hint > p {
	border:			1px dashed #888a85;
	padding:		10px;
}

div#content strong {
	font-weight:	bold;
}

div#content em {
	font-style:		italic;
}

div#content code {
	display: 		block;
	padding: 		10px;
	border: 		1px dashed #888a85;
	white-space: 	pre;
	margin-bottom:	15px;
	overflow:		auto;
	line-height:	18px;
}

div#content code.inline {
	display:		inline;
	white-space:	pre;
	padding: 		0px;
	margin:			0px 3px;
	border: 		none;
	color:			#888a85;
}

div#content h2 {
	margin: 		0px 0px 10px 0px;	/* without top margin to keep aligned with columns left and right */
	font-size: 		16px;
}

div#content h3 {
	margin: 		20px 0px 20px 0px;
	font-size: 		14px;
}

div#content h4 {
	margin: 		20px 0px 20px 0px;
	font-size: 		12px;
	font-weight:	bold;
}

div#content > h4 {
	text-align:		center;
}

div#content h5 {
	margin: 		20px 0px 20px 60px;
	font-size: 		12px;
}

div#content > h5 {
	text-align:		center;
}

div#content ul {
	list-style-type: 	disc;
	margin-bottom:		15px;
}

div#content > ul { /*  lists outside of a <p> */
	margin-bottom: 		20px;
}

div#content ul ul {
	list-style-type: 	circle;
}

div#content ul ul ul {
	list-style-type: 	square;
}

div#content ul ul ul ul {
	list-style-type: 	none;
}

div#content li {		/* ul and ol list items */
	margin-left: 		10px;
}

div#content ol {
	list-style-type: 		lower-roman;
	margin-left:			30px;
	list-style-position:	outside;
}

div#content > ol { /*  lists outside of a <p> */
	margin-bottom: 		20px;
}

div#content ol ol {
	list-style-type: 	lower-latin;
}

div#content ol ol ol {
	list-style-type: 	lower-greek;
}

div#content ol ol ol ol {
	list-style-type: 	none;
}

div#content blockquote {
	margin-left: 	5px;
	padding-left: 	10px;
	border-left: 	solid 2px #888a85;
}

div#content img {
	/* Avoid images overflowing div#content */
	max-width: 		524px;
	height:			auto;
}

div#content div.toc {
	float:			right;
	border:			1px solid #888a85;
	margin:			0 0 10px 10px;
	font-weight:	bold;
	max-width:		200px;
	font-size: 		10px;
}

div#content div.toc h3 {
	margin:			10px 0px 10px 15px;
}

div#content div.toc ul {
	/* Reducing size here again, since toc div spans around list items, too */
	margin:			0px 5px 10px 15px;
}

/* Full width TOC for long blog posts */

div#content div#opensource_blog_0704_xpath div.toc {
	float:			none;
	max-width:		none;
	font-size:		12px;
	margin:			10px 30px;
	padding:		0px 20px;
}


div#content div.cite {
	text-align:		right;
	margin-bottom:	20px;
	margin-top:		5px;
}

div#content div.cite cite {
	font-style:		italic;
}

div#content fieldset {
	/* clear: right; */
}

div#content table {
	margin-bottom:	20px;
}

div#content table td, div#content table th {
	padding:		5px 20px 5px;
	vertical-align:	top;
}

div#content table th {
	font-weight:	bold;
	border-bottom:	1px solid #888a85;
}

div#content dl dt {
	font-weight:	bold;
}

div#content dl dd {
	margin-left:	20px;
}

div#content dl {
	margin-bottom:	10px;
}

div#content dl.footnote dt {
	width:			5%;
	margin:			0px;
	margin-bottom:	10px;
	padding:		0px;
	float:			left;
}

div#content dl.footnote dd {
	width:			90%;
	margin:			0px;
	margin-left:	8%;
	margin-bottom:	10px;
	padding:		0px;
}

div#content div.note {
	border:			1px dotted #888a85;
	padding:		7px;
}

div#content div.note > * {
	margin-left:	39px;
}

div#content div.note li {
	margin-left:	30px;
}

div#content div.note:before {
	content:		url("/images/grey/dialog-information.png");
	float:			left;
}

p.flattr_note {
	font-weight:	bold;
}

/*
 * Moving image titles below image.
 */
div#content div.image.center {
	margin-top:		20px;
	margin-bottom:	20px;
}

div#content div.image.right {
	margin:			0px 0px 5px 15px;
}

div#content div.image.left {
	margin:			0px 15px 5px 0px;
}

div#content div.image.no-title span.image_title {
	display: none;
}

div#content div.image span.image_title {
	display:	block;
	/* clear:		right; */					/* TS, 2009-06-11: Not sure what this was originally meant for, but breaks private/blog/0709_nach_der_wahl_ist_vor_der_wahl.html */
}

/*
 * Alternative formats
 */
div#formats {
	width: 			524px;

	margin:			0em 198px 0em;
	padding:		0em 20px 0px;				/* Always 1em margin at the end of the page */

	border-left:	2px solid #888a85;
	border-right:	2px solid #888a85;
	border-top:		1px dotted #888a85;
}

div#formats ul {
	list-style-type:	none;
	text-align:			center;
}

div#formats ul li {
	display:	inline;
	margin:		0px 20px 0px 20px;
}

/*
 * Search box
 */

fieldset {
	margin: 0;
	border:	1px solid #888a85;
	padding:	0.8em;
}

label {
	display: 	block;
	width: 		90px;
	text-align: right;
	clear: 		both;
	float: 		left;
	padding: 	1px
}

label strong {
	font-weight:	bold;
}

input,
textarea {
	width: 			350px;
	float: 			right;

	font-family: 	sans-serif;
	font-size: 		12px;

	border: 		1px solid #888a85;
	color: 			#888a85;
}

input[type="submit"] {
	width: 		200px;
	border: 	1px solid #888a85;
	color: 		#888a85;
}

input[name="url"] {
	/* Catching spam bots */
	display: none;
}

div.right {
	float: right;
	text-align:	center;
}

div.left {
	float: left;
	text-align: center;
}

div.center {
	text-align:	center;
}

span.strikethrough {
	text-decoration:	line-through;
}

/*
 * Blog list
 */

div#content ul.blog {
	list-style-type:	none;
}

div#content ul.blog li {
	margin-bottom:	20px;
	margin-left: 	0;
}

div#content ul.blog li h3 {
	font-size: 	14px;
	margin: 	0;
}

div#content ul.blog li h3 span.lang {
	font-size: 		10px;
	vertical-align:	middle;
	color: 			#888a85;
}

div#content ul.blog li h4 {
	font-size: 		12px;
	margin-top: 	3px;
	margin-bottom: 	5px;
	color: 			#888a85;
	font-weight:	normal;
}

div#content ul.blog li p {
	margin-left:	20px;
}

div.pager {
	width: 100%;
	text-align: center; 
}

div.pager a {
	font-weight:	normal;
}

div.pager strong {
	font-weight:	bold;
	text-decoration: underline
}

/*
 * Blog entry
 */

div.bookmarks {
	width:			100%;
	display:		block;
	margin-top:		10px;
	margin-bottom:	50px;
}

div.bookmarks ul {
	list-style-type: 	none;
	width:				100%;
}


div.bookmarks ul li {
	display:	block;
	float:		right;
	margin:		0px 3px;
}


div.bookmarks ul li a {
	display:	block;
	width:		16px;
	height:		16px;
	
    background-repeat: 		no-repeat;
	background-position: 	0px -16px;
}

div.bookmarks ul li a:hover {
	background-position: 0px 0px;
}

div.bookmarks ul li a img {
	display: none;
}

div.bookmarks ul li a.bookmark_technorati {
	background-image: url( "/images/buttons/bookmark_technorati.png" );
}

div.bookmarks ul li a.bookmark_facebook {
	background-image: url( "/images/buttons/bookmark_facebook.png" );
}

div.bookmarks ul li a.bookmark_reddit {
	background-image: url( "/images/buttons/bookmark_reddit.png" );
}

div.bookmarks ul li a.bookmark_twitter {
	background-image: url( "/images/buttons/bookmark_twitter.png" );
}

div.bookmarks ul li a.bookmark_delicious {
	background-image: url( "/images/buttons/bookmark_delicious.png" );
}

div.bookmarks ul li a.bookmark_digg {
	background-image: url( "/images/buttons/bookmark_digg.png" );
}

div.bookmarks ul li a.bookmark_yigg {
	background-image: url( "/images/buttons/bookmark_yigg.png" );
}

div.bookmarks ul li a.bookmark_stumbleupon {
	background-image: url( "/images/buttons/bookmark_stumbleupon.png" );
}

div.flattr {
	float: 			right;
	margin-left:	5px;
}

/*
 * Blog comments
 */

div#content ul.comments {
	list-style-type:	none;
}

div#content ul.comments li {
	margin-bottom:	20px;
	margin-left: 	0;
}

div#content ul.comments li div.author {
	padding-bottom: 10px;
	font-size:		10px;
}

div#content ul.comments li div.author strong {
	font-weight: bold;
}

div#content ul.comments li p {
	margin-left: 	5px;
	padding-left: 	15px;
	border-left: 	solid 2px #888a85;
}

div#content ul.comments li a.permalink {
	display:		block;
	text-align:		right;
}

/*
 * RST conversion markup
 */

div.attention {
	font-weight: 	bold;
	text-align:		center;
	border:			2px solid #888a85;
	padding:		10px;
	margin-bottom:	8px;
}

/*
 * Flickr module
 */

ul.flickr-sets li, ul.flickr-photos li {
	list-style-type:	none;
	float:				left;
	width:				150px;
	text-align:			center;
}

div.scroll {
	clear:				both;
	text-align:			center;
}

/*
 * Flickr badge
 */

.zg_div {
	margin:		0px 5px 5px 0px;
	width:		117px;
}

.zg_div_inner {
	color:			#000000;
	text-align:		center;
	font-family:	arial, helvetica;
	font-size:		11px;
}

.zg_div a, .zg_div a:hover, .zg_div a:visited {
	color:				#555753;
	background:			inherit !important;
	text-decoration:	none !important;
}

div#zg_whatlink a {
	font-size: 		8px;
}