/*
Transporter – Informationen bewegen, www.transporter.at, 2009
TransGrid Layout-Prototyp, Rainer Fabrizi
*/

/* =normalisieren (danke eric meyer)
****************************************************/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}

/* =html =body =alles
****************************************************/

html {  }

body {
	font-family: "Helvetica Neue", Helvetica, Arial, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, sans serif;
	font-weight: normal;
	font-size: small;
	line-height: 1.5;
	text-align: left;
	color: #000;
	background-color: #FFF;
	}
	* html body {
	font-size: x-small; /* ie5 win */
	f\ont-size: small; /* ie win */
	}
	html>body {
	font-size: small; /* opera */
	}
	
#alles {
	font-size: 95%;
	text-align: left;
	}

/* =kopf, =mitte, =fuss
****************************************************/

#kopf, #mitte, #fuss {
	clear: both;
	width: 100%;
	position: relative;
	padding: 0;
	}

/* =grid10 =grid12 (10er oder 12er raster)
****************************************************/

.grid8, .grid10, .grid12 {
	clear: both;
	display: block;
	width: 970px;
	margin: 0 auto;
	padding: 0 0 0 10px;
	overflow: auto;
	}

/* =layoutspalten (die summe muss gleich dem grid-10px sein)
****************************************************/

.l1, .l2, .l3, .l4, .l5, .l6, .l7, .l8, .l9, .l10, .l11, .l12 {
	float: left;
	min-height: 1px;
	margin: 0;
	padding: 0.5em 0;
	}

/* layoutspalten für grid8 */
	.grid8 .l1 { width: 120px; }
	.grid8 .l2 { width: 240px; }
	.grid8 .l3 { width: 360px; }
	.grid8 .l4 { width: 480px; }
	.grid8 .l5 { width: 600px; }
	.grid8 .l6 { width: 720px; }
	.grid8 .l7 { width: 840px; }
	.grid8 .l8 { width: 960px; float: none; }
	
/* layoutspalten für grid10 */
	.grid10 .l1 { width: 96px; }
	.grid10 .l2 { width: 192px; }
	.grid10 .l3 { width: 288px; }
	.grid10 .l4 { width: 384px; }
	.grid10 .l5 { width: 480px; }
	.grid10 .l6 { width: 576px; }
	.grid10 .l7 { width: 672px; }
	.grid10 .l8 { width: 768px; }
	.grid10 .l9 { width: 864px; }
	.grid10 .l10 { width: 960px; float: none; }
	
/* layoutspalten für grid12 */
	.grid12 .l1 { width: 80px; }
	.grid12 .l2 { width: 160px; }
	.grid12 .l3 { width: 240px; }
	.grid12 .l4 { width: 320px; }
	.grid12 .l5 { width: 400px; }
	.grid12 .l6 { width: 480px; }
	.grid12 .l7 { width: 560px; }
	.grid12 .l8 { width: 640px; }
	.grid12 .l9 { width: 720px; }
	.grid12 .l10 { width: 800px; }
	.grid12 .l11 { width: 880px; }
	.grid12 .l12 { width: 960px; float: none; }

/* lbg kann per typo3 den l-divs beigefügt werden, zeichnet beliebigen hintergrund */
.lbg { background: transparent url(../bilder/transgrid/lbg.gif) repeat-y 0 0; }

/* =zeile innerhalb layoutspalte oder innerhalb inhaltsspalte
****************************************************/
.zeile {
	clear: both;
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: hidden;
	}

/* =inhaltsspalten (die summe muss gleich dem layout sein)
****************************************************/

.i1, .i2, .i3, .i4, .i5, .i6, .i7, .i8, .i9, .i10, .i11, .i12 {
	float: left;
	min-height: 1px;
	margin: 0 5px;
	padding: 0.5em 0;
	}

/* inhaltsspalten für grid8, breite inhalt ist width, gesamtbreite ist width +10px (margin-left, border, padding) */
	.grid8 .i1 { width: 110px; }
	.grid8 .i2 { width: 230px; }
	.grid8 .i3 { width: 350px; }
	.grid8 .i4 { width: 470px; }
	.grid8 .i5 { width: 590px; }
	.grid8 .i6 { width: 710px; }
	.grid8 .i7 { width: 830px; }
	.grid8 .i8 { width: 950px; }
	
/* inhaltsspalten für grid10, breite inhalt ist width, gesamtbreite ist width +10px (margin-left, border, padding) */
	.grid10 .i1 { width: 86px; }
	.grid10 .i2 { width: 182px; }
	.grid10 .i3 { width: 278px; }
	.grid10 .i4 { width: 374px; }
	.grid10 .i5 { width: 470px; }
	.grid10 .i6 { width: 566px; }
	.grid10 .i7 { width: 662px; }
	.grid10 .i8 { width: 758px; }
	.grid10 .i9 { width: 854px; }
	.grid10 .i10 { width: 950px; }
	
/* inhaltsspalten für grid10, breite inhalt ist width, gesamtbreite ist width +10px (margin-left, border, padding) */
	.grid12 .i1 { width: 70px; }
	.grid12 .i2 { width: 150px; }
	.grid12 .i3 { width: 230px; }
	.grid12 .i4 { width: 310px; }
	.grid12 .i5 { width: 390px; }
	.grid12 .i6 { width: 470px; }
	.grid12 .i7 { width: 550px; }
	.grid12 .i8 { width: 630px; }
	.grid12 .i9 { width: 710px; }
	.grid12 .i10 { width: 790px; }
	.grid12 .i11 { width: 870px; }
	.grid12 .i12 { width: 950px; }

/* ibg kann per typo3 den i-divs beigefügt werden, zeichnet beliebigen hintergrund */
.ibg { background: transparent url(../bilder/transgrid/ibg.gif) repeat-y 0 0; }

/* =erstes =letztes, wenn zeile in zeile: erste inhaltsspalte ohne linkes margin, letzte inhaltsspalte ohne rechtes margin */
.zeile .zeile .erstes { margin-left: 0; }
.zeile .zeile .letztes { margin-right: 0; }

/* =formatierung
****************************************************/

/* =headlines */
h1, h2, h3 {
	margin: 0 5px 0.5em 5px;
	font-weight: bold;
	line-height: 1.2;
	}
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 125%; }
h4, h5, h6 {
	margin: 0 5px;
	font-weight: bold;
	}
/* absätze */
p { margin: 0 5px 1.5em 5px; }
	p.bildtext {
	margin: -1.5em 5px 1.5em 5px;
	font-size: 90%;
	text-align: right;
	}
/* =auszeichnungen */
em { font-style: italic; }
strong, b { font-weight: bold; }
i { font-style: italic; }
big { font-size: 125%; }
small { font-size: 90%; }
sup {
	font-size: 80%;
	vertical-align: super;
	}
sub {
	font-size: 80%;
	vertical-align: sub;
	}
address {
	margin: 0 5px 1.5em 5px;
	font-style: normal;
	}
acronym, abbr {
	cursor: help;
	text-decoration: none;
	border-bottom: 1px dotted;
	}
/* =definition, =variable, =keyboard eingabe */
dfn { color: #666; }
var {
	font-style: normal;
	font-family: Courier, "Courier New", "MS Trebuchet", Helvetica, Arial, sans-serif;
	}
kbd {
	color: #666;
	font-size: 100%;
	font-family: "Helvetica Neue", Helvetica, Arial, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, sans serif;
	}
/* =preformatierter text, =teletyper, =code, =sample */
pre {
	margin: 0 5px 1.5em 5px;
	font-family: Courier, "Courier New", "MS Trebuchet", Helvetica, Arial, sans-serif;
	}
tt { font-family: Courier, "Courier New", "MS Trebuchet", Helvetica, Arial, sans-serif; }
code, samp {
	color: #666;
	font-family: Courier, "Courier New", "MS Trebuchet", Helvetica, Arial, sans-serif;
	}
/* =löschen, =einfügen */
del {
	color: #666;
	text-decoration: line-through;
	}
ins { text-decoration: underline; }
/* =zitat */
cite { font-style: normal; }
q {
	font-family: "Helvetica Neue", Helvetica, Arial, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, sans serif;
	font-style: italic;
	}
blockquote {
	margin: 0 0 1.5em 0;
	padding: 0 20px;
	font-family: "Helvetica Neue", Helvetica, Arial, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, sans serif;
	font-style: italic;
	}
	blockquote p:first-letter {
	padding-left: 20px;
	background: transparent url(../bilder/transgrid/pfeil_liste.gif) no-repeat 0 4px;
	}
/* =liste */
ul { margin: 0 5px 1.5em 5px; }
	ul li {
	padding-left: 20px;
	list-style-type: none;
	background: transparent url(../bilder/transgrid/pfeil_liste.gif) no-repeat 0 4px;
	}
	ul li p { margin: 0 0 1em 0; }
ol { margin: 0 5px 1.5em 5px; }
	ol li {
	list-style-type: decimal;
	list-style-position: inside;
	}
	ol li p { margin: 0 0 1em 0; }
/* =definitionsliste */
dl { margin: 0 5px 1.5em 5px; }
	dt { font-weight: bold; }
	dd {
	padding-left: 20px;
	margin: 0 0 1em 0;
	list-style-type: none;
	background: transparent url(../bilder/transgrid/pfeil_liste.gif) no-repeat 0 4px;
	}
/* =bild */
img { margin: 0 0 1.5em 0; }
	img.links { margin-right: 10px; }
	img.rechts { margin-left: 10px; }
/* =linie */
hr {
	margin: 0 0 1.5em 0;
	padding: 0;
	height: 1px;
	color: #000;
	background-color: #000;
	border: none;
	}
/* link */
a:link, a:visited {
	text-decoration: none;
	color: #00A4D6;
	}
	a:hover, a:active {
	cursor: pointer;
	text-decoration: underline;
	}
	a:focus { outline: none; }
	/* verlinktes bild */
	a:hover img {
	outline: 1px solid #00A4D6;
	outline-offset: -1px;
	}

/* =formular
****************************************************/

.formular {
	background-color: #D8EBF1;
	padding: 10px 0 0 0;
	}
	.formular fieldset {
	margin: 0 0 1em 0;
	padding: 0 10px 0 5px;
	border-bottom: 1px solid #FFF;
 	}
	.formular legend {
	margin: 0 0 1em 0;
	font-weight: bold;
	}
	.formular label {  }
	.formular p { margin: 0 0 1.5em 0; }
	/* alle =formularfelder */
	.formular input, .formular textarea, .formular select, .formular option, .formular button {
	font-size: 100%;
	font-family: "Helvetica Neue", Helvetica, Arial, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, sans serif;
	color: #000;
	background: #FFF;
	}
	/* =input, =textarea */
	.formular input, .formular textarea {
	padding: 5px 0;
	color: #000;
	background: #FFF;
	border: 1px solid #000;
	}
	.formular input:focus, .formular textarea:focus, .formular input:hover, .formular textarea:hover {
	border: 1px solid #00A4D6;
	}
	/* =select, =optgroup, =option */
	.formular select {
	padding: 5px 0;
	border: 1px solid #000;
	}
	.formular select:focus, .formular select:hover { border: 1px solid #00A4D6; }
	.formular optgroup {  }
	.formular option {  }
	.formular option[selected] {  }
	/* =submit, =reset */
	.formular input#submit, .formular input#reset {
	padding: 5px;
	color: #FFF;
	background: #00A4D6;
	border-width: 1px;
	border-style: solid;
	border-color: #FFF #000 #000 #FFF;
	}
	.formular input#submit:hover, .formular input#reset:hover {
	color: #00A4D6;
	background: #FFF;
	}
	/* fehlermeldung von jsvalidate */
	.jsvalidation { color: #FF0000;}

/* =tabelle
****************************************************/

.tabelle {
	width: 100%;
	margin: 0 0 1.5em 0;
	}
	.tabelle caption {
	padding: 10px 5px;
	font-weight: bold;
	text-align: left;
	background-color: #00A4D6;
	}
	.tabelle thead tr, .tabelle tfoot tr {
	text-align: left;
	background-color: #D8EBF1;
	border-bottom: 1px solid #FFF;
	}
	.tabelle tbody {  }
	.tabelle tbody tr {
	border-bottom: 1px solid #D8EBF1;
	}
	.tabelle tbody tr:hover {
	background-color: #D8EBF1;
	border-bottom: 1px solid #FFF;
	}
	.tabelle th, .tabelle td {
	padding: 10px 5px;
	}

/* =spezielle =klassen =module
****************************************************/

/* =navigation */
.navigation ul {
	margin-bottom: 0;
	}
/* =linkbox */
a.linkbox {
	display: block;
	margin: 0 0 1.5em 0;
	text-decoration: none;
	background: transparent url(../bilder/transgrid/pfeil_liste.gif) no-repeat 100% 100%;
	}
	.linkbox_bild img {
	margin: 0;
	outline: none;
	}
	.linkbox_headline {
	display: block;
	margin: 0 5px;
	font-weight: bold;
	}
	a:hover .linkbox_headline { text-decoration: underline; }
	.linkbox_text {
	display: block;
	margin: 0 5px;
	color: #000;
	}
	a:hover .linkbox_text { text-decoration: none; }
/* =box */
.box {
	margin: 0 0 1.5em 0;
	padding: 5px 0 0 0;
	background-color: #00A4D6;
	overflow: auto;
	}
/* =nachoben */
.nachoben {
	display: block;
	padding-left: 20px;
	background: transparent url(../bilder/transgrid/pfeil_liste.gif) no-repeat 0 6px;
	}

/* =allgemeine =klassen
****************************************************/

.links { float: left; }
.rechts { float: right; }
.clear { clear: both; }
.clearLinks { clear: left; }
.clearRechts { clear: right; }

.alignLinks { text-align: left; }
.alignRechts { text-align: right; }

.absolut { display: absolute; }
.relativ { display: relative; }
.block { display: block; }
.inline { display: inline; }
.breite { width: 100%; }

.rausschieben { text-indent: -999999px; }
.verstecken { display: none; }
.overflow { overflow: hidden; }

.klein { font-size: 90%; }
.gross { font-size: 100%; }
.duenn { font-weight: normal; }
.fett { font-weight: bold; }
.unwichtig { font-weight: normal; }
.wichtig { font-weight: bold; }
.grossbuch { text-transform: uppercase; }
.kleinbuch { text-transform: lowercase; }

.schwarz { color: #000; }
.weiss { color: #FFF; }
.ohnebg { background: none; }

.rund { /* runde Ecken in Mozilla Browsern, eckig in IE und Opera */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	}

.unull { margin-bottom: 0; }
.ueins { margin-bottom: 1px; }
.uzwei { margin-bottom: 2px; }
.udrei { margin-bottom: 3px; }
.uvier { margin-bottom: 4px; }
.ufuenf { margin-bottom: 5px; }
.usechs { margin-bottom: 6px; }
.usieben { margin-bottom: 7px; }
.uacht { margin-bottom: 8px; }
.uneun { margin-bottom: 9px; }
.uzehn { margin-bottom: 10px; }
.uzwoelf { margin-bottom: 12px; }
.ufuenfzehn { margin-bottom: 15px; }
.uzwanzig { margin-bottom: 20px; }
.ufuenfundzwanzig { margin-bottom: 25px; }
.udreissig { margin-bottom: 30px; }
.ufuenfunddreissig { margin-bottom: 35px; }
.uvierzig { margin-bottom: 40px; }
.ufuenfundvierzig { margin-bottom: 45px; }
.ufuenfzig { margin-bottom: 50px; }
.uhundert { margin-bottom: 100px; }

.onull { margin-top: 0; }
.oeins { margin-top: 1px; }
.ozwei { margin-top: 2px; }
.odrei { margin-top: 3px; }
.ovier { margin-top: 4px; }
.ofuenf { margin-top: 5px; }
.osechs { margin-top: 6px; }
.osieben { margin-top: 7px; }
.oacht { margin-top: 8px; }
.oneun { margin-top: 9px; }
.ozehn { margin-top: 10px; }
.ozwoelf { margin-top: 12px; }
.ofuenfzehn { margin-top: 15px; }
.ozwanzig { margin-top: 20px; }
.ofuenfundzwanzig { margin-top: 25px; }
.odreissig { margin-top: 30px; }
.ofuenfunddreissig { margin-top: 35px; }
.ovierzig { margin-top: 40px; }
.ofuenfundvierzig { margin-top: 45px; }
.ofuenfzig { margin-top: 50px; }
.ohundert { margin-top: 100px; }

.unullpadding { padding-bottom: 0; }
.ueinspadding { padding-bottom: 1px; }
.uzweipadding { padding-bottom: 2px; }
.udreipadding { padding-bottom: 3px; }
.uvierpadding { padding-bottom: 4px; }
.ufuenfpadding { padding-bottom: 5px; }
.usechspadding { padding-bottom: 6px; }
.usiebenpadding { padding-bottom: 7px; }
.uachtpadding { padding-bottom: 8px; }
.uneunpadding { padding-bottom: 9px; }
.uzehnpadding { padding-bottom: 10px; }
.uzwoelfpadding { padding-bottom: 12px; }
.ufuenfzehnpadding { padding-bottom: 15px; }
.uzwanzigpadding { padding-bottom: 20px; }
.ufuenfundzwanzigpadding { padding-bottom: 25px; }
.udreissigpadding { padding-bottom: 30px; }
.ufuenfunddreissigpadding { padding-bottom: 35px; }
.uvierzigpadding { padding-bottom: 40px; }
.ufuenfundvierzigpadding { padding-bottom: 45px; }
.ufuenfzigpadding { padding-bottom: 50px; }
.uhundertpadding { padding-bottom: 100px; }

.onullpadding { padding-top: 0; }
.oeinspadding { padding-top: 1px; }
.ozweipadding { padding-top: 2px; }
.odreipadding { padding-top: 3px; }
.ovierpadding { padding-top: 4px; }
.ofuenfpadding { padding-top: 5px; }
.osechspadding { padding-top: 6px; }
.osiebenpadding { padding-top: 7px; }
.oachtpadding { padding-top: 8px; }
.oneunpadding { padding-top: 9px; }
.ozehnpadding { padding-top: 10px; }
.ozwoelfpadding { padding-top: 12px; }
.ofuenfzehnpadding { padding-top: 15px; }
.ozwanzigpadding { padding-top: 20px; }
.ofuenfundzwanzigpadding { padding-top: 25px; }
.odreissigpadding { padding-top: 30px; }
.ofuenfunddreissigpadding { padding-top: 35px; }
.ovierzigpadding { padding-top: 40px; }
.ofuenfundvierzigpadding { padding-top: 45px; }
.ofuenfzigpadding { padding-top: 50px; }
.ohundertpadding { padding-top: 100px; }

/* =debug
****************************************************/

.spalten_grid8 { background: transparent url(../bilder/transgrid/spalten_grid8.gif) repeat-y 5px 0; }
.spalten_grid10 { background: transparent url(../bilder/transgrid/spalten_grid10.gif) repeat-y 5px 0; }
.spalten_grid12 { background: transparent url(../bilder/transgrid/spalten_grid12.gif) repeat-y 5px 0; }
.debug_bg { background-color: #00A4D6; }