/*
TRANSPORTER Visuelle Logistik, www.transporter.at, 2008
TransGrid Layout-Prototyp, Rainer Fabrizi
*/

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

html {  }

body {
	/*
	***** The Times New Roman-based serif stack *****
	Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
	***** A modern Georgia-based serif stack: *****
	Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
	***** A more traditional Garamond-based serif stack: *****
	"Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
	***** The Helvetica/Arial-based sans serif stack: *****
	Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;
	***** The Verdana-based sans serif stack: font-family: *****
	Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
	***** The Trebuchet-based sans serif stack: font-family: *****
	"Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
	***** The heavier “Impact” sans serif stack: font-family: *****
	Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;
	***** The monospace stack: font-family: *****
	Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
	*/
	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 grid12, 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: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, 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: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
	font-style: italic;
	}
blockquote {
	margin: 0 0 1.5em 0;
	padding: 0 20px;
	font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, 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: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, 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; }
.alignLinks { text-align: left; }
.alignRechts { text-align: right; }
.block { display: block; }
.inline { display: inline; }
.clear { clear: both; }
.clearLinks { clear: left; }
.clearRechts { clear: right; }
.rausschieben { text-indent: -999999px; }
.verstecken { display: none; }
.hundert { width: 100%; }

.klein { font-size: 90%; }
.gross { font-size: 110%; }
.duenn { font-weight: normal; }
.fett { font-weight: bold; }
.unwichtig { font-weight: normal; }
.wichtig { font-weight: bold; }
.versal { text-transform: uppercase; }

.schwarz { color: #000; }
.weiss { color: #FFF; }

.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; }

.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; }

.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; }

.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; }

/* =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; }