/* -------------------------------------------------------------- 
  
   Blueprint CSS Framework
   [bjorkoy.com/blueprint]
        
-------------------------------------------------------------- */


/* Grid
=============================================================
  
   Grid.css
   * Creates an easy to use grid of 14 columns.
   
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Khoi Vinh         [subtraction.com]
   
   By default, the grid is 960px wide, with columns 
   spanning 50px, and a 20px margin between columns.
   
   If you need fewer or more columns, use this 
   formula to find the new total width: 
   
   Total width = (columns * 70) - 20
  
-------------------------------------------------------------- */

body { 
	text-align: center; /* IE Fix */
	margin:21px 0 126px 0;
}


/* A container should group all your columns. */
.container {
 	text-align: left;
 	position: relative;
 	padding: 0 0 21px 0;
	margin: 0 auto;   /* Centers layout */
	width: 820px;     /* Total width */
	background: url(../gifs/horizontal-line.gif) 0 100% repeat-x;
}


/* Clear fix */
.container:after { 
	content:  "."; 
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}


/* Columns
-------------------------------------------------------------- */

/* Use this class together with the .span-x classes
   to create any compsition of columns in a layout.
   Nesting columns works like a charm (remember .first and .last). */
.column {
	float: left;
	margin: 0 10px;
	padding: 0;
}


/* Add this class to a column if you want a border on its 
   right hand side. This should be customized to fit your needs. */
.border {
	padding-right: 9px;
	margin-right: 0;
	border-right: 1px solid #bfbdb1;
}


/* The first and last elements in a multi-column 
   block needs one of these classes each. */
.first  { margin-left: 0; }
.last   { margin-right: 0; }


/* Use these classes to set how wide a column should be. */
.span-1   { width: 50px; }
.span-2   { width: 120px; }
.span-3   { width: 190px; }
.span-4   { width: 260px; }
.span-5   { width: 330px; }
.span-6   { width: 400px; }
.span-7   { width: 470px; }
.span-8   { width: 540px; }
.span-9   { width: 610px; }
.span-10  { width: 680px; }
.span-11  { width: 750px; }
.span-12  { width: 820px; }
.span-13  { width: 890px; }
.span-14  { width: 960px; margin: 0; }

/* Add these to a column to append empty cols. */
.append-1   { padding-right: 70px; }  
.append-2   { padding-right: 140px; } 
.append-3   { padding-right: 210px; } 
.append-4   { padding-right: 280px; } 
.append-5   { padding-right: 350px; } 
.append-6   { padding-right: 420px; } 
.append-7   { padding-right: 490px; } 
.append-8   { padding-right: 560px; } 
.append-9   { padding-right: 630px; } 
.append-10  { padding-right: 700px; }
.append-11  { padding-right: 770px; }
.append-12  { padding-right: 840px; }
.append-13  { padding-right: 910px; }

/* Add these to a column to prepend empty cols. */
.prepend-1   { padding-left: 70px; }  
.prepend-2   { padding-left: 140px; } 
.prepend-3   { padding-left: 210px; } 
.prepend-4   { padding-left: 280px; } 
.prepend-5   { padding-left: 350px; } 
.prepend-6   { padding-left: 420px; } 
.prepend-7   { padding-left: 490px; } 
.prepend-8   { padding-left: 560px; } 
.prepend-9   { padding-left: 630px; } 
.prepend-10  { padding-left: 700px; }
.prepend-11  { padding-left: 770px; }
.prepend-12  { padding-left: 840px; }
.prepend-13  { padding-left: 910px; }


/* Use a .box to create a padded box inside a column. 
   Sticking to 21px wide gaps since that's the baseline. */ 
   
.box, .hl, .teaser, .note, .quotations { 
	padding: 21px 21px 0 21px; 
	margin-bottom: 20px; 
	border-bottom-width: 1px;
	border-bottom-style: solid;
	background: url(/gifs/round-corner.png) top left no-repeat;
}

p.note { padding-bottom: 21px; }

.meta, 
#txpCommentInputForm {
	background: url(/gifs/round-corner.png) top left no-repeat;
}

.box { background-color: #F5F4D7; border-color: #F5F4D7;  }
.teaser, .note, .quotations { background-color: #d8dfce;border-color: #d8dfce;  }
.hl { background-color: #dec9cb; border-color: #dec9cb; }

p.box, p.hl, p.teaser { padding-bottom: 20px; margin-bottom: 21px; }


/* Images
------------------------------------------------ */

/* Remember the baseline (typography.css). */
img { margin: 0 0 21px 0; }


/* Use these classes to make an image flow into the column before 
   or after it. This techique can also be used on other objects. */

.pull-1  { margin-left: -70px; }
.pull-2  { margin-left: -140px; }
.pull-3  { margin-left: -210px; }

.push-1  { margin: 0 -88px 0 21px; float: right; }
.push-2  { margin: 0 -158px 0 21px; float: right; }
.push-3  { margin: 0 -228px 0 21px; float: right; }


/* Typography 
========================================================= 
    
   Typography.css
   * Sets some default typography.
  
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Wilson Miner      [wilsonminer.com]
   * Typogrify         [code.google.com/p/typogrify]
   
   Modified by Andreas Kalt: font-size: 14px, baseline grid: 21px;
   
   The default font size is 14px. The baseline is set to 
   21px. When you're setting heights of elements, always 
   remember to use a multiple of the baseline (21, 42, 63 ...).
   
   The height of images shoud also be a multiple of 21.
   
   Read more about using a baseline here:
   * alistapart.com/articles/settingtypeontheweb
  
-------------------------------------------------------------- */   

body {
  font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5em; /* Baseline here at 150%. This is set multiple places. */
  color: #333;
}


/* Headings
-------------------------------------------------------------- */

h1, h2, h3  { 
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	margin: 0;  
	color: #637e3a;
	clear:both; 
}

h4, h5, h6 { 
	font-family: "Lucida Grande", Arial, Verdana, Helvetica, sans-serif; 
	font-weight: normal;
	margin: 0;  
	color: #637e3a;
	clear:both; 
	text-transform: uppercase;
	letter-spacing: 1px;
}

.note h5 { margin: 0; }

/* h1 is the site's logotype and defined in rete.css  */

/* Total height for each heading has to be a multiple of the baseline (21). */
h2 { 
	font: normal bold 14px/1.5 "Lucida Grande", Arial, Verdana, Helvetica, sans-serif; 
	padding: 0 0 21px 0; 
	text-align: center; 
	color: #ac7837;
	text-transform: uppercase;
	letter-spacing: .125em;
	background: url(/gifs/h2-lernen.gif) top center no-repeat;
	text-indent: -5000px;
}
	
h3 { font-size: 28px; line-height: 42px; margin-bottom: 21px; padding: 0;  }
h4 { font-size: 19px; line-height: 21px; margin-top: 30px; margin-bottom: 12px; padding: 0;  }
h5 { font-size: 16px; line-height: 21px; margin-top: 30px; margin-bottom: 12px; padding: 0; font-weight: bold; }
h6 { font-size: 14px; line-height: 21px; margin-top: 30px; margin-bottom: 12px; padding: 0; letter-spacing: .0125em;  font-weight: bold; }

h4 #kommentarFeedLink { 
	display: block;
	float: right;
	font-size: 11px; 
	text-decoration: underline; 
	text-transform: none; 
	letter-spacing: normal; 
}

/* Headers in the sidebar and the footer (and the comments header) are styled differently  */
#sidebar h3, #sidebar h4, #sidebar h5, #sidebar h6,
#footer h3, #footer h4, #footer h5, #footer h6,
#content h4#comments, 
#dsq-content h3, 
#dsq-content h4, 
#dsq-content h5 {
	font-family: "Lucida Grande", Arial, Verdana, Helvetica, sans-serif;
	text-transform: uppercase;
}

#dsq-content h3 { font-size: 16px; line-height: 21px; margin: 21px 0; font-weight: bold; }
#dsq-comments-title h3 { font-size: 18px; line-height: 21px; margin-top: 0; }
#dsq-new-post h3 { font-size: 18px; line-height: 21px; padding-top: 42px;}


#sidebar h3, #footer h3 { font-size: 21px; line-height: 21px; margin: 0; }
#sidebar h4, #footer h4, #tagCloud h4 { font-size: 18px; line-height: 21px; margin: 0; }
#sidebar h5, #footer h5 { font-size: 16px; line-height: 21px; margin: 0; }
#sidebar h6, #footer h6 { font-size: 14px; line-height: 21px; margin: 0; color:#426027; }


/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 21px 0; text-align:left; }

p.first		{ /* der erste Textabsatz beginnt mit einem Ornament */ 
	text-indent: 25px;
	background-image: url(../gifs/paragraph-ornament.png);
	background-position: top left;
	background-repeat: no-repeat;
}

p.last      { margin-bottom:0; }

.top   		{ margin-top: 0; } /* Use this if the element is at the top of the <p>. */

.smallprint { font-size: 11px; line-height: 21px; color: #333; }

.smallprint a:link, 
.smallprint a:visited, 
.smallprint a:hover { color: #333; }



ul, ol      { margin: 0 0 21px 21px; list-style-type:square; }
li          { line-height:21px; }
ol          { list-style-type: decimal; }
dl          { margin: 21px 0; }
dl dt       { font-weight: bold; background: #f1f0e9; padding:0 8px; }
dl dd		{ padding-left: 21px; }

/* !==recent comments (Sidebar)== */
#recentcomments li, 
#recentcomments p, 
#recentcomments blockquote   { font-size: 12px; line-height: 21px; }

#recentcomments ul { margin-top: 0; } 

#recentcomments li { 
	margin-top: 0;
	padding: 10px 0 10px;
	border-bottom: 1px solid #bfbdb1; 
}

a          		{ text-decoration: underline; outline: none; }
a:link 			{ color: #1d3261; }
a:visited 		{ color: #951F2B; }
a:link:hover	{ color: #171F29; background-color: #d8dfce;  }
a:visited:hover	{ color: #4A0F15; background-color: #d8dfce; }

blockquote  { 
	margin: 0 0 0 1px;
	padding: 0 0 0 18px; 
	/* font-style: italic; */ 
	border-left: 2px solid #bfbdb1;
}

h3 + blockquote, 
h4 + blockquote,
h5 + blockquote,
h6 + blockquote {
	margin-top: 21px;
}

blockquote p, 
blockquote li	{ font-size: 13px; line-height: 21px; }


strong      { font-weight: bold; }
em          { font-style: italic; }
pre         { margin-bottom: 21px; line-height:21px; background: #eee; padding:9px 0 10px 0; border:1px solid #ddd; }
code        { font:0.9em Monaco, monospace; }

/* !== footnotes == */

#content p sup,
#content li sup, 
#content table sup {
	font-style: normal;
	font-weight:bold;
	font-size: 8px;
	vertical-align: super;
}

#content p sup a,
#content li sup a,
#content table sup a {
	margin: 0 1px;
	padding: 1px 2px;	
	
}

hr.footnotes {
	margin-right: 60%;
}

/*
#content p sup a:hover,
#content li sup a:hover,
#content table sup a:hover {
	background-color:#666;
}
*/


/* Tables
---------------------------------------- */

table   { 
	margin:21px 0 20px; 
	border-bottom: 1px solid #bfbdb1;
	border-left: 1px solid #dfded8;
}

th,td   { 
/* 	height:21px;  */
	padding:8px 8px 13px; 
	font-size: 12px;
	line-height: 21px;
	background: none;
	border-right: 1px solid #dfded8;
/* 	border-top: 1px solid #dfded8; */
}

th      { 
	background-color: #dfded8; font-weight:bold; 
/* 	border-top: none; */
}

/* manually shade ("s") every second table row */
.s, .s td { background-color: #f1f0e9; } 



/* ----------------------------------------
this line shows the baseline and the column grid for layout work and testing */

/* .container { background: url(lib/img/grid-21.png); }  */