/* --- HTML5 reset - http://jacobrask.net/blog/2009/html5-css-reset/ --- */
/*
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,  strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 vertical-align: baseline;
}
body {
 line-height: 1;
}
*/
table {
 border-collapse: collapse;
 border-spacing: 0;
}
section, article, aside, header, footer, nav, dialog, figcaption, figure {
 display: block;
}

/*SHIM divs für Firefox 2:
 *  transparent machen, wenn sie nicht gebraucht werden 
 *  (= wenn sie im DOM nicht aus dem HTML5-Element rausgeflogen sind) 
 */
header > .shim.header,
article > .shim.article,
aside > .shim.aside,
section > .shim.section,
figure > .shim.figure,
footer > .shim.footer{
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  width: inherit !important;
  max-width: inherit !important;
  position: relative !important;
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  clear: none !important;
  float: none !important;
  font-size: inherit !important;
}

/* --- end HTML5 reset --- */



/* --------------------------------------------------------------------- Rails defaults */
pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}
a { color: #000; }
a:visited { color: #666; }
.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}
#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}
#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}
#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}
#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}
/* --------------------------------------------------------------------- end Rails defaults */




body{
  background: rgb(193,228,208) 
    url("../images/blume_hintergrund.png") no-repeat fixed 45% bottom; 
  background-size: auto 100%; -webkit-background-size: auto 100%;  -khtml-background-size: auto 100%;  -moz-background-size: auto 100%;
  /*BROWSERBUG opera skaliert trotz "fixed" relativ zu dokumenthöhe, nicht viewporthöhe */
  font-family: Frutiger, "Frutiger Linotype", "Segoe UI", "Segoe", 
    "Helvetica Neue", "Liberation Sans", "Nimbus Sans L", Helvetica, 
    "Arial Narrow", sans-serif;
  font-size: 10.5pt;  
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

h1, h2, h3, 
.projectname,
nav{
  font-family: Frutiger, "Frutiger Linotype", "Segoe UI", "Segoe", 
    "Helvetica Neue", "Liberation Sans", "Nimbus Sans L", Helvetica, 
    "Arial Narrow", sans-serif;  
  text-transform: uppercase;
  font-weight: lighter;
  letter-spacing: 0.1em;
}
h1, h2, h3, 
.projectname{
  text-align: right;
  color: #060;
	opacity: 0.7;
}
.projectname{
  font-weight: bolder;
}


.shim.header,   /*SHIM fx2 */
header {
  width: 620px;   /*SHIM ie6 */
  max-width: 620px;
  margin: 0 auto;
}


h1, h2, h3{
  margin: 0 auto;
}

h1{
  font-size: 350%;
}
  h1 a{
    font: inherit;
    color: inherit;
  }

h2{
  font-size: 110%;
  font-weight: bold;
}

h3{
  font-size: 140%;
}

h4{
  color:#666;
  margin: 2.5em 0 0.5em 0;
}
hgroup > h4{
  margin: 0;
}


.main{
  width: 100%; /*HACK damit IE-filter lädt */
	min-height: 20em;
  margin-top: 2em;
	margin-bottom: 10em;  /* damit nicht ein teil hinter footer verschwindet */
  background-size: 100% 100%; /* muss mit y-Wert für Opera */ 
    -moz-background-size: 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100%;
    -khtml-background-size: 100%;
  background: rgba(193,228,208,0.7);
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/images/gradient-193_228_208-2000px.png'); 
}
.main[class]{ /*HACK vor IE<7(?) verstecken */
  background: url(pixler.php%3Fr=193&g=228&b=208&o=70); 
  background: url(../images/gradient-193_228_208-2000px.png) top repeat-x;
  background: -moz-linear-gradient(top, 
    rgba(193,228,208,0.0), 
		rgba(193,228,208,0.7) 5%, 
		rgba(193,228,208,0.7) 95%, 
		rgba(193,228,208,0.0) );
  background: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(193,228,208,0.0)), 
    color-stop(0.05, rgba(193,228,208,0.7)), 
    color-stop(0.95, rgba(193,228,208,0.7)), 
    to(rgba(193,228,208,0.0))
	);
}




.main .shim.article,   /*SHIM fx2 */
.main article{
  padding: 3em;
  margin: 0 auto;
  max-width: 44em;
  width: 44em; /*SHIM ie6 */
}
  .main .shim.article.kommentare,   /*SHIM fx2 */
  .main article.kommentare{
/*
    max-width: 22em;
    width: 22em;
*/
  }
    .main .shim.article.kommentare input,   /*SHIM fx2 */
    .main article.kommentare input{
      width: 40%;
    }
  .main .shim.article.doublepane,   /*SHIM fx2 */
  .main article.doublepane{
    max-width: 88em;
    width: 88em;
  }
  .main .shim.article.halfpane,   /*SHIM fx2 */
  .main article.halfpane{
    display: table-cell;
  }
    .main .shim.article.halfpane.left h2,   /*SHIM fx2 */
    .main .shim.article.halfpane.left h3,   /*SHIM fx2 */
    .main .shim.article.halfpane.left h4,   /*SHIM fx2 */
    .main article.halfpane.left h2,
    .main article.halfpane.left h3,
    .main article.halfpane.left h4{
      text-align:right;
      margin-right: 0;
      margin-left: 0;
    }
    .main .shim.article.halfpane.right h2,   /*SHIM fx2 */
    .main .shim.article.halfpane.right h3,   /*SHIM fx2 */
    .main .shim.article.halfpane.right h4,   /*SHIM fx2 */
    .main article.halfpane.right h2,
    .main article.halfpane.right h3,
    .main article.halfpane.right h4{
      text-align:left;
      margin-right: 0;
      margin-left: 0;
    }
    .main .shim.article.halfpane.left figure,   /*SHIM fx2 */
    .main article.halfpane.left figure{
  	  margin: 2em;
  	  margin-right: 0;
    }
    .main .shim.article.halfpane.right figure,   /*SHIM fx2 */
    .main article.halfpane.right figure{
      float:left;
  	  margin: 2em;
  	  margin-left: 0;
    }
  .main .shim.article h2,   /*SHIM fx2 */
  .main article h2{
		margin-top: 2em;
	}



/*TODO SHIM fx2 */
figure{
  margin: 2em;
	margin-right: 5%;
  float: right;
  clear: both;
}
  figure.nofloat,
	article.halfpane.right figure.nofloat{
	  float: none !important;
    text-align: center;
    margin: 2em auto;
  }
  .shim.figure.map,   /*SHIM fx2 */
  figure.map{
    background: rgb(255,255,255)
      url(pixler.php%3Fr=255&g=255&b=255&o=70);
    background: rgba(255,255,255,0.70);
  }
  .shim.figure.map{   /*SHIM fx2 */
    padding: 1em !important;
  }
  figure > img{
    opacity: 0.8;
		padding: 10px;
		background: white;
  }
	  figure > img.noback,
    figure.vorschau > img{
	    padding: 0;
	    background: transparent;
	  }
	figcaption{
		margin: 0;
	}

p{
  max-width: 40em;
  line-height: 1.7em;
	margin-bottom: 2em;
}

dl dt{
  text-transform: lowercase;
  font-variant: small-caps;
  margin-top: 0.5em;
  margin-left: 1em;
}
  dl dt a{
    font-weight: normal;
  }

blockquote{
	line-height: 1.5em;
	text-align: justify;
	clear: both;
	padding: 0 1em;
	margin-bottom: 0;
}
  blockquote:before{
    content: "\201c";
  }
  blockquote:after{
    content: "\201d";
  }
  blockquote cite{
    display: inline-block;
    float: right;
  }

.maillink{
  white-space: nowrap;
  margin-top: -1em;   /*HACK - sollte lieber Kind von p sein */
  background: url("../images/icon_email.png") no-repeat;
  padding-left: 20px;
  width: 10em;
  margin-left: 2em;
}

a{
  text-decoration: none;
  border-bottom: dotted thin silver;
  color: #666;
  font-weight: bold;
}
  a img,
  a.image,
  figure a,
  hgroup a{
  	border: 0 !important;
  }
  a.image:focus,
  figure a:focus{
    outline: 0;
  }




.shim.footer[class],    /*SHIM fx2 */
footer[class]{ /*HACK vor IE verstecken */
  background: rgb(240,240,240) url(pixler.php%3Fr=240&g=240&b=240&o=95);
}
.shim.footer,   /*SHIM fx2 */
footer{
	z-index: 1000;
  position: fixed;
  width:100%; /*HACK damit IE-filter lädt */
  bottom: 0;
	left: 0;
	right: 0;
	background: rgba(240,240,240,0.95);
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/stylesheets/pixler.php?r=240&g=240&b=240&o=95'); 
	text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
	white-space: nowrap;
  padding: 0.2em 0 1em 0;
  box-shadow: rgba(0,0,0,0.08) 0 -3px 2px;
  -moz-box-shadow: rgba(0,0,0,0.08) 0 -3px 2px;
  -webkit-box-shadow: rgba(0,0,0,0.08) 0 -3px 2px;
}


ul.sitenav{
  list-style-type: none;
	font-size: large;
	margin: auto;
	display: table;
}
ul.sitenav li{
	display: inline;
  border-left: 2px solid #c1e4d0;
  padding: 0.5em;
}
  ul.sitenav li:first-child{
    border-left: none;
  }
  ul.sitenav li#impressum{
    border-left: none;
    font-size: small;
  }
  ul.sitenav li li{
    display: table-row;
  }
  ul.sitenav li:hover,
  ul.sitenav a:hover{
    text-shadow:  1px 1px 2px #888;
  }
  ul.sitenav a:active,
  ul.sitenav a:focus{
    outline: none;
  }
ul.sitenav a{
  text-transform: lowercase;
  font-variant: small-caps;
	line-height: 1.4em;
  color: #444;
  font-weight: 400;
  border-bottom: none;
}
ul.sitenav a.current{
	color: #798;
  text-shadow:  0 -2px 5px #c1e4d0;
  text-shadow:  1px 1px 5px #798;
}

	
	
table.stationen{
	border-collapse: separate;
	border-spacing: 0.5em 1em;
  width: 100%;
}
  table.stationen td{
  	vertical-align: top;
	  background: rgb(255,255,255)
	    url(pixler.php%3Fr=255&g=255&b=255&o=70);
	  background: rgba(255,255,255,0.70);
		padding: 0.5em;
  }
  table.stationen td a{
    font-weight: normal;
    color: inherit;
  }
  table.stationen :target{    /*XXX macht nichts in Fx, warum? */
    background: rgba(255,255,220,0.8);
    box-shadow: rgba(255,255,220,0.8) 0 0 10px 10px;
    -moz-box-shadow: rgba(255,255,220,0.8) 0 0 10px 10px;
    -webkit-box-shadow: rgba(255,255,220,0.8) 0 0 10px 10px;
  }



.shim.aside,    /*SHIM fx2 */
aside{
	width: 30em;
  background: rgb(255,255,255)
    url(pixler.php%3Fr=255&g=255&b=255&o=70);
  background: rgba(255,255,255,0.70);
  clear: right;
	float: right;
}


.shim.article .shim.aside,  /*SHIM fx2 */
article aside{
  width: 20em;
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7);
  clear: right;
  float: right;
  font-size: smaller;
  margin: 1em 0 0 1em;
  padding: 1em 0 0 1em;
}
  .shim.article .shim.aside h4,   /*SHIM fx2 */
  article > aside h4{
    margin-top: 1em;
  }





.shim.section.kommentar,            /*SHIM fx2 */
section.kommentar,
form.new_kommentar{
  background: rgb(255,255,255)
    url(pixler.php%3Fr=255&g=255&b=255&o=70);
  background: rgba(255,255,255,0.70);
  padding-left: 64px;
  margin-left: -56px;
  margin-bottom: 1em;
}
form.new_kommentar{
  padding-top: 1em;
  padding-bottom: 1em;
}
  .shim.section.kommentar p,        /*SHIM fx2 */
  section.kommentar p{
    line-height: 1.2em;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0.7em;
  }
  form.new_kommentar p{
  	padding: 0;
		margin: 0;
		margin-bottom: 0.5em;
  }
  form.new_kommentar input,
  form.new_kommentar textarea{
    width: 90%;
  }

		
figure.avatar,
form.new_kommentar label{
	clear: left;
  float: left;
  margin: 0;
  margin-left:-56px;
}
figure.avatar{
  padding: 5px;
}
figure.avatar img{
	padding: 0;
	background: none;
}
		
figure.vorschau{
  opacity: 0.5;
}

img.embedded{
  margin: 1em 0;
}

article.admin{
  background: white;
}

#railsflash{
  color: #040;
  width: 40em;
  margin: auto;
  padding: 1em;
  font-size: larger;
  font-family: monospace;
}


/*
Emoji Symbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/
@font-face{
    font-family: "emoji";
    src: url("fonts/EmojiSymbols-Regular.woff.html") format('woff');
}
.emoji{
  font-family: emoji;
}