Wikizone - Benutzerbeiträge [de]

960 Grid System

2011-03-25T11:59:18Z

178.7.131.226:

== Links ==

http://960.gs/demo.html

To the right is an example of how the code works. The container specifies how many total columns exist, either 12 or 16. For the most part, you will only ever need to specify a class name of grid_XX, where XX represents the column width.

If a grid unit contains grid children, the first child in a row will need a class of alpha and the last child in a row requires the class name omega. Likewise, if you want to insert empty space before or after a grid unit, use class prefix_XX or suffix_XX.

Demopage
<pre>
<body>
<h1>
<a href="http://960.gs/">960 Grid System</a>
</h1>
<div class="container_12">
<h2>
12 Column Grid
</h2>
<div class="grid_12">
<p>
940
</p>
</div>

<div class="clear"></div>
<div class="grid_1">
<p>
60
</p>
</div>

<div class="grid_11">
<p>
860
</p>
</div>

<div class="clear"></div>
<div class="grid_2">
<p>
140
</p>
</div>

<div class="grid_10">
<p>
780
</p>
</div>

<div class="clear"></div>
<div class="grid_3">
<p>
220
</p>
</div>

<div class="grid_9">
<p>
700
</p>
</div>

<div class="clear"></div>
<div class="grid_4">
<p>
300
</p>
</div>

<div class="grid_8">
<p>
620
</p>
</div>

<div class="clear"></div>
<div class="grid_5">
<p>
380
</p>
</div>

<div class="grid_7">
<p>
540
</p>
</div>

<div class="clear"></div>
<div class="grid_6">
<p>
460
</p>
</div>

<div class="grid_6">
<p>
460
</p>
</div>

<div class="clear"></div>
<div class="grid_1 suffix_11">
<p>
60
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_1 suffix_10">
<p>
60
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_2 suffix_9">
<p>
60
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_3 suffix_8">
<p>
60
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_4 suffix_7">
<p>
60
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_5 suffix_6">
<p>
60
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_6 suffix_5">
<p>
60
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_7 suffix_4">
<p>
60
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_8 suffix_3">
<p>
60
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_9 suffix_2">
<p>
60
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_10 suffix_1">
<p>
60
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_11">
<p>
60
</p>
</div>

<div class="clear"></div>
<div class="grid_6 push_6">
<div class="grid_1 alpha">
<p>
60
</p>
</div>

<div class="grid_5 omega">
<p>
380
</p>
</div>

<div class="clear"></div>
<div class="grid_3 alpha">
<p>
220
</p>
</div>

<div class="grid_3 omega">
<p>
220
</p>
</div>

<div class="clear"></div>
</div>

<div class="grid_6 pull_6">
<div class="grid_3 alpha">
<p>
220
</p>
</div>

<div class="grid_3 omega">
<p>
220
</p>
</div>

<div class="clear"></div>
<div class="grid_1 alpha">
<p>
60
</p>
</div>

<div class="grid_5 omega">
<p>
380
</p>
</div>

<div class="clear"></div>
</div>

<div class="clear"></div>
</div>

<div class="container_16">
<h2>
16 Column Grid
</h2>
<div class="grid_16">
<p>
940
</p>
</div>

<div class="clear"></div>
<div class="grid_1">
<p>
40
</p>
</div>

<div class="grid_15">
<p>
880
</p>
</div>

<div class="clear"></div>
<div class="grid_2">
<p>
100
</p>
</div>

<div class="grid_14">
<p>
820
</p>
</div>

<div class="clear"></div>
<div class="grid_3">
<p>
160
</p>
</div>

<div class="grid_13">
<p>
760
</p>
</div>

<div class="clear"></div>
<div class="grid_4">
<p>
220
</p>
</div>

<div class="grid_12">
<p>
700
</p>
</div>

<div class="clear"></div>
<div class="grid_5">
<p>
280
</p>
</div>

<div class="grid_11">
<p>
640
</p>
</div>

<div class="clear"></div>
<div class="grid_6">
<p>
340
</p>
</div>

<div class="grid_10">
<p>
580
</p>
</div>

<div class="clear"></div>
<div class="grid_7">
<p>
400
</p>
</div>

<div class="grid_9">
<p>
520
</p>
</div>

<div class="clear"></div>
<div class="grid_8">
<p>
460
</p>
</div>

<div class="grid_8">
<p>
460
</p>
</div>

<div class="clear"></div>
<div class="grid_1 suffix_15">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_1 suffix_14">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_2 suffix_13">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_3 suffix_12">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_4 suffix_11">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_5 suffix_10">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_6 suffix_9">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_7 suffix_8">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_8 suffix_7">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_9 suffix_6">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_10 suffix_5">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_11 suffix_4">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_12 suffix_3">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_13 suffix_2">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_14 suffix_1">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_1 prefix_15">
<p>
40
</p>
</div>

<div class="clear"></div>
<div class="grid_8 push_8">
<div class="grid_1 alpha">
<p>
40
</p>
</div>

<div class="grid_7 omega">
<p>
400
</p>
</div>

<div class="clear"></div>
<div class="grid_4 alpha">
<p>
220
</p>
</div>

<div class="grid_4 omega">
<p>
220
</p>
</div>

<div class="clear"></div>
</div>

<div class="grid_8 pull_8">
<div class="grid_4 alpha">
<p>
220
</p>
</div>

<div class="grid_4 omega">
<p>
220
</p>
</div>

<div class="clear"></div>
<div class="grid_1 alpha">
<p>
40
</p>
</div>

<div class="grid_7 omega">
<p>
400
</p>
</div>

<div class="clear"></div>
</div>

<div class="clear"></div>
</div>

</body></pre>

Typo3 - CSS-Snippets

2011-03-25T10:38:12Z

178.7.131.226: /* CSS für TYPO3 Content */

== CSS für TYPO3 Content Todo ==
Ein komplettes Beispiel für das Styling der TYPO3 Inhaltselemente

<pre>

</pre>

== w-manager ==

=== Allgemeine Elementformatierungen ===

/* Allgemeine Elementformatierungen
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
* {
padding:0;
margin:0;
}

/* Taeusche NS und FF lange Seiten vor damit das Layout bei langen Seiten nicht wg. dem Scrollbalken huepft */
html {height:100%}
body {
min-height:101%;
/* verhindern dass positionierte Elemente bei Veraenderung der Fenstergroesse nicht mit verschoben werden */
position: relative;
}

body {
color: #666;
background: #FFF;
font-family: Arial,Helvetica, sans-serif;
font-size: 100.01%;
padding: 12px 0 12px 0;
text-align: center;
}

h1,h2,h3 {
/* im Typo ueberschreiben */
color:#222;
font-size: 1.2em;
line-height: 1em;
padding-bottom: 0.4em;
}

h1{
color:#364A87;
}

h2{
font-size: 1em;
font-weight: bold;
}

h3{
font-size: 0.8em;
}
p {
line-height: 1.5;
margin: 0.5em 0 1em 0;
}

a {
text-decoration: underline;
}

a:link, a:visited { color: #666;}

/* In Typo3 mit gleicher Farbe wie H1 ueberschreiben*/
a:focus, a:hover, a:active { color: #364A87;}

table{width: 100%;}
th, td {padding: 0;}

/*
/* Anpassungen CSS-Styled Content
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
.csc-textpic-caption{
font-size:70%;
color:#666;
}

=== Allgemeine Klassen ===
/* Allgemeine Klassen
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

.stopFloat {
display: block;
float: none;
clear: both;
height: 1px;
font-size: 0px;
line-height: 0px;
}

=== Struktur ===
/* Struktur
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

#wrapper {
width: 950px;
background: #FFF;
margin: 0 auto;
text-align: left;
}

#logo {
width: 100%;
line-height:0;
background: #FFF;
}

#head {
height: 180px;
width:100%;
background-image: url(images/header-back.jpg);
overflow: hidden;
}

#head img{

/*Bild als internes style in Typo*/
}

=== Navigation ===
/* Navigation
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
#menuHead{
background: #888;
font-size: 0.75em;
color: #FFF;
background-image: url (images/navL1-back.gif)
}
#menuHead-left{
float: left;
width: 49%;
}
#menuHead a {text-decoration: none; color: #FFF;}

#menuHead-right{
float: right;
width: 49%;
}
#menuHead-left li {
list-style: none;
float:left;
white-space: nowrap;
padding:0 0em;
}

#menuHead-right {
float-right;
text-align:right;
width: 49%;
padding: 0 6px;
}
#menuHead-right ul{
float:right;
}
#menuHead-right li {
list-style: none;
float:left;
white-space: nowrap;
padding: 0 6px;
}

/* Menue Level1
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
li.on a{ color: #364A87;}

div#menuL1{
float:left;
width: 100%;
background:url(images/navL1-back.gif) repeat-x;
height:32px;
/*margin-left:12px;*/
}
#menuL1 ul{
padding-left:4px;
}
#menuL1 li{
float:left;
list-style: none;
white-space: nowrap;
/*background: url(images/navL1-divider.gif) right no-repeat;*/
/*padding: 0 1.2em;*/
font-size: 0.8em;
font-weight: bold;
line-height: 32px;
}

#menuL1 li.last {
background: transparent;
}

#menuL1 a{
text-decoration: none;
/*divider ausgleichen*/
padding-right:1px;
}

/* Menue Level12
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
li.on a{ color: #364A87;}

div#menuL12{
float:left;
width: 100%;
}

#menuL12 ul{
padding-left:4px;
}

#menuL12 li{
float:left;
list-style: none;
white-space: nowrap;
font-size: 0.7em;
font-weight: bold;
line-height: 0.7em;
}

#menuL12 li.last {
background: transparent;
}

#menuL12 a{
text-decoration: none;
/*divider ausgleichen*/
padding-right:1px;
}

/* Menue Level2
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
div#menuL2 {
min-height: 261px;
}

* html #menuL2{
height: 261px;
}

div#menuL2 {
float:left;
width: 180px;
margin: 1.6em 0 0 0;
background: url(images/dot-border.gif) right no-repeat;
}

#menuL2 ul, div#osBox-right ul{
list-style: none;
text-align: right;
}

#menuL2 li{
padding: 0.4em 0px 0.25em 0;
/* Abstand von rechter Begrenzung */
margin-right: 3px;

/*border-bottom: 1px dotted #CCC;*/
}

#menuL2 a{
text-decoration: none;
font-weight: bold;
font-size: 0.75em;
padding: 0 1.5em 0 0;
}

#menuL2 li li a{
font-weight: bold;
font-size: 0.6em;
color: #555;
}

#menuL2 li li{
margin:0;
padding:0;
}

=== Content ===
/* Content
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
#sub{
float:left;
width: 690px;

}

#content {
float:right;
width: 510px;
padding: 1.6em 0 0 0;
min-height:380px;
}

* html #content{
height: 380px;
} /*das sehen nur IEs <= 6*/

#content h1, #content h2, #content h3{
padding-left: 12px;

}
#content p, #content li {
font-size: 80%;
line-height: 150%;
padding-left:12px;
}

#content li{
list-style-position: inside;
}
#content a:link { color: #364A87 ; text-decoration: none;}
#content a:visited { color: #364A87 ; text-decoration: none;}
/* In Typo3 mit gleicher Farbe wie H1 ueberschreiben*/
#content a:focus, #content a:hover, #content a:active { color: #364A87 ; text-decoration: underline;}

.nachoben { text-align: right; }

/* Spalte 3
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

#content_right {
float: right;
width: 240px;

padding: 1.6em 0 0 0;

}

#content_right h1 {
color: #364A87 ;
font-size: 1em;
line-height: 150%;
margin: 0 0px;
}

#content_right p {
font-size: 80%;
line-height: 150%;
margin: 0 0
}

/* Footer
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

#footer {
background: #888;
font-size: 0.75em;
text-align:center;
color: #FFF;
/*background-image: url (images/headnavi-back.jpg*/
}

=== Formular ===
/* Formular
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
.csc-mailform-submit{
color: #999;
font-weight:bold;
font-size: 74%;
}

#mailform .csc-mailform-check{
text-align:left;
width:20px;
background:#123;
border:4px solid black;
}

#content #mailform{
width:481px;
margin-left:0px;
}
#content_right #mailform{
width: 240px;
}

#mailform fieldset{
border:none;
padding-bottom:20px;
}

#content #mailform label {
clear:both;
float: left;
width: 130px;
text-align: right;
}

#mailform form p {
font-size: .8em;
margin: 14px 0;
}

#mailform label {
display: block; /* damit auch die alten IEs das padding anwenden */
font-size: .7em;
font-weight: bold;
text-transform: uppercase;
margin-right: 10px;
}

/* Achtung: nicht alle Browser stellen Sachen wie die border
von Eingabefeldern dar, in Safari z.B. laesst sich nur wenig
am Aussehen von Formularelementen aendern */

input,textarea {
background: #F7F7F7;
font-family: arial, sans-serif;
font-size: 0.8em;
color: #333;
border: 1px solid #CCC;
margin-bottom:0.3em;
}

#content #mailform input,
#content #mailform textarea {
width: 20em;

}

#content #mailform input.csc-mailform-submit{
width:8em;
margin-left:140px;
}
#content_right #mailform input.csc-mailform-submit{
width:8em;
margin-left: 0px;

}
/* Die folgenden Anweisungen sorgen fuer schoene Effekte beim
Ausfuellen in standardkonformen Browsern, die IEs koennen
damit aber nix anfangen */

input:hover,
textarea:hover {
background: #FCFCFC;
border: 1px solid #999;
}

input:focus,
textarea:focus {
background: #FFF;
border: 1px solid #CC0000;
}

.on a{ color: #222;}

div .csc-textpic-imagewrap{
margin-left:12px;
}

=== RTE Tabellen ===
/* RTE / table styling */
table{
font-size:90%;
}
table td{padding-left: 12px;}
table.contenttable { border: 1px #113388 dotted; margin: 10px 0px 10px 12px; width: 100%; }
table.contenttable TR td { padding: 0px 3px 0px 3px; }
table.contenttable TR td p.bodytext { font-size: 10px; }
table.contenttable TR { background-color: #EBEEF5; }

=== Umfrage (quickpoll) ===

/* Umfrage */
.tx-quickpoll-pi1{
width: 230px;
}
.tx-quickpoll-pi1 table{
font-size: 74%;
margin: 0 0;
}

.tx-quickpoll-pi1 td{
text-align: left;
}

.tx-quickpoll-pi1 table h2{
padding-left:0;
text-align: left;
}

input .pollanswer{
width: 10px;
background: pink;
}
input.pollsubmit{
width: 4em;
font-size:100%;
font-weight: bold;
color:#888;
}

/* POLL */
/* default styles for extension "tx_quickpoll" */
.tx-quickpoll-pi1 .pollbar {
BACKGROUND: url(/typo3conf/ext/quickpoll/pi1/pollbar.gif) repeat-x left center;}
.tx-quickPoll-pi1 .polltable{width: 100%;}
.tx-quickPoll-pi1 h2 {font-size:100%;}
.tx-quickPoll-pi1 th {
/* make it solid */
text-transform:uppercase;
margin-bottom:1em;
/* indent from left */
padding-left:0px;}
.tx-quickPoll-pi1 td {
padding-left:0;}
.tx-quickPoll-pi1 .pollquestion {
padding-bottom: 0.5em;}
.tx-quickPoll-pi1 .pollanswer {
vertical-align: -20%;border: none;}
.tx-quickPoll-pi1 .polltotal {
text-align:center;padding-top: 0.50em;}
.tx-quickPoll-pi1 .pollresulttext {
padding-top: 0.5em;}
=== Login ===
/*** Login ***/
#loginBox{
width: 240px;
float: right;
margin-top: 40px;
}
#loginBox p{
font-size: 80%;
font-weight:bold
color: #999;
margin: 0;
padding: 0;
}

#loginBox .csc-form-fieldcell{
font-size: 50%
color: #999;
}

=== Search Box (indexedsearch) ===
#searchBox input{
width: 130px;

}
#searchBox input.searchBox-button{
position: relative;
border: none;
width: auto;
top: 2px;
}
div.tx-indexedsearch-whatis{
padding-left: 12px;
}

#logos{
width:230px;
text-align: center;
padding-top: 20px;
}

== Umfrage (pbsurvey) ==
siehe [[Typo3 - Extensions]]

Typo3 - CSS-Snippets

2011-03-25T10:37:57Z

178.7.131.226:

== CSS für TYPO3 Content ==
Ein komplettes Beispiel für das Styling der TYPO3 Inhaltselemente

<pre>

</pre>

== w-manager ==

=== Allgemeine Elementformatierungen ===

/* Allgemeine Elementformatierungen
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
* {
padding:0;
margin:0;
}

/* Taeusche NS und FF lange Seiten vor damit das Layout bei langen Seiten nicht wg. dem Scrollbalken huepft */
html {height:100%}
body {
min-height:101%;
/* verhindern dass positionierte Elemente bei Veraenderung der Fenstergroesse nicht mit verschoben werden */
position: relative;
}

body {
color: #666;
background: #FFF;
font-family: Arial,Helvetica, sans-serif;
font-size: 100.01%;
padding: 12px 0 12px 0;
text-align: center;
}

h1,h2,h3 {
/* im Typo ueberschreiben */
color:#222;
font-size: 1.2em;
line-height: 1em;
padding-bottom: 0.4em;
}

h1{
color:#364A87;
}

h2{
font-size: 1em;
font-weight: bold;
}

h3{
font-size: 0.8em;
}
p {
line-height: 1.5;
margin: 0.5em 0 1em 0;
}

a {
text-decoration: underline;
}

a:link, a:visited { color: #666;}

/* In Typo3 mit gleicher Farbe wie H1 ueberschreiben*/
a:focus, a:hover, a:active { color: #364A87;}

table{width: 100%;}
th, td {padding: 0;}

/*
/* Anpassungen CSS-Styled Content
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
.csc-textpic-caption{
font-size:70%;
color:#666;
}

=== Allgemeine Klassen ===
/* Allgemeine Klassen
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

.stopFloat {
display: block;
float: none;
clear: both;
height: 1px;
font-size: 0px;
line-height: 0px;
}

=== Struktur ===
/* Struktur
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

#wrapper {
width: 950px;
background: #FFF;
margin: 0 auto;
text-align: left;
}

#logo {
width: 100%;
line-height:0;
background: #FFF;
}

#head {
height: 180px;
width:100%;
background-image: url(images/header-back.jpg);
overflow: hidden;
}

#head img{

/*Bild als internes style in Typo*/
}

=== Navigation ===
/* Navigation
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
#menuHead{
background: #888;
font-size: 0.75em;
color: #FFF;
background-image: url (images/navL1-back.gif)
}
#menuHead-left{
float: left;
width: 49%;
}
#menuHead a {text-decoration: none; color: #FFF;}

#menuHead-right{
float: right;
width: 49%;
}
#menuHead-left li {
list-style: none;
float:left;
white-space: nowrap;
padding:0 0em;
}

#menuHead-right {
float-right;
text-align:right;
width: 49%;
padding: 0 6px;
}
#menuHead-right ul{
float:right;
}
#menuHead-right li {
list-style: none;
float:left;
white-space: nowrap;
padding: 0 6px;
}

/* Menue Level1
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
li.on a{ color: #364A87;}

div#menuL1{
float:left;
width: 100%;
background:url(images/navL1-back.gif) repeat-x;
height:32px;
/*margin-left:12px;*/
}
#menuL1 ul{
padding-left:4px;
}
#menuL1 li{
float:left;
list-style: none;
white-space: nowrap;
/*background: url(images/navL1-divider.gif) right no-repeat;*/
/*padding: 0 1.2em;*/
font-size: 0.8em;
font-weight: bold;
line-height: 32px;
}

#menuL1 li.last {
background: transparent;
}

#menuL1 a{
text-decoration: none;
/*divider ausgleichen*/
padding-right:1px;
}

/* Menue Level12
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
li.on a{ color: #364A87;}

div#menuL12{
float:left;
width: 100%;
}

#menuL12 ul{
padding-left:4px;
}

#menuL12 li{
float:left;
list-style: none;
white-space: nowrap;
font-size: 0.7em;
font-weight: bold;
line-height: 0.7em;
}

#menuL12 li.last {
background: transparent;
}

#menuL12 a{
text-decoration: none;
/*divider ausgleichen*/
padding-right:1px;
}

/* Menue Level2
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
div#menuL2 {
min-height: 261px;
}

* html #menuL2{
height: 261px;
}

div#menuL2 {
float:left;
width: 180px;
margin: 1.6em 0 0 0;
background: url(images/dot-border.gif) right no-repeat;
}

#menuL2 ul, div#osBox-right ul{
list-style: none;
text-align: right;
}

#menuL2 li{
padding: 0.4em 0px 0.25em 0;
/* Abstand von rechter Begrenzung */
margin-right: 3px;

/*border-bottom: 1px dotted #CCC;*/
}

#menuL2 a{
text-decoration: none;
font-weight: bold;
font-size: 0.75em;
padding: 0 1.5em 0 0;
}

#menuL2 li li a{
font-weight: bold;
font-size: 0.6em;
color: #555;
}

#menuL2 li li{
margin:0;
padding:0;
}

=== Content ===
/* Content
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
#sub{
float:left;
width: 690px;

}

#content {
float:right;
width: 510px;
padding: 1.6em 0 0 0;
min-height:380px;
}

* html #content{
height: 380px;
} /*das sehen nur IEs <= 6*/

#content h1, #content h2, #content h3{
padding-left: 12px;

}
#content p, #content li {
font-size: 80%;
line-height: 150%;
padding-left:12px;
}

#content li{
list-style-position: inside;
}
#content a:link { color: #364A87 ; text-decoration: none;}
#content a:visited { color: #364A87 ; text-decoration: none;}
/* In Typo3 mit gleicher Farbe wie H1 ueberschreiben*/
#content a:focus, #content a:hover, #content a:active { color: #364A87 ; text-decoration: underline;}

.nachoben { text-align: right; }

/* Spalte 3
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

#content_right {
float: right;
width: 240px;

padding: 1.6em 0 0 0;

}

#content_right h1 {
color: #364A87 ;
font-size: 1em;
line-height: 150%;
margin: 0 0px;
}

#content_right p {
font-size: 80%;
line-height: 150%;
margin: 0 0
}

/* Footer
/* * * * * * * * * * * * * * * * * * * * * * * * * * */

#footer {
background: #888;
font-size: 0.75em;
text-align:center;
color: #FFF;
/*background-image: url (images/headnavi-back.jpg*/
}

=== Formular ===
/* Formular
/* * * * * * * * * * * * * * * * * * * * * * * * * * */
.csc-mailform-submit{
color: #999;
font-weight:bold;
font-size: 74%;
}

#mailform .csc-mailform-check{
text-align:left;
width:20px;
background:#123;
border:4px solid black;
}

#content #mailform{
width:481px;
margin-left:0px;
}
#content_right #mailform{
width: 240px;
}

#mailform fieldset{
border:none;
padding-bottom:20px;
}

#content #mailform label {
clear:both;
float: left;
width: 130px;
text-align: right;
}

#mailform form p {
font-size: .8em;
margin: 14px 0;
}

#mailform label {
display: block; /* damit auch die alten IEs das padding anwenden */
font-size: .7em;
font-weight: bold;
text-transform: uppercase;
margin-right: 10px;
}

/* Achtung: nicht alle Browser stellen Sachen wie die border
von Eingabefeldern dar, in Safari z.B. laesst sich nur wenig
am Aussehen von Formularelementen aendern */

input,textarea {
background: #F7F7F7;
font-family: arial, sans-serif;
font-size: 0.8em;
color: #333;
border: 1px solid #CCC;
margin-bottom:0.3em;
}

#content #mailform input,
#content #mailform textarea {
width: 20em;

}

#content #mailform input.csc-mailform-submit{
width:8em;
margin-left:140px;
}
#content_right #mailform input.csc-mailform-submit{
width:8em;
margin-left: 0px;

}
/* Die folgenden Anweisungen sorgen fuer schoene Effekte beim
Ausfuellen in standardkonformen Browsern, die IEs koennen
damit aber nix anfangen */

input:hover,
textarea:hover {
background: #FCFCFC;
border: 1px solid #999;
}

input:focus,
textarea:focus {
background: #FFF;
border: 1px solid #CC0000;
}

.on a{ color: #222;}

div .csc-textpic-imagewrap{
margin-left:12px;
}

=== RTE Tabellen ===
/* RTE / table styling */
table{
font-size:90%;
}
table td{padding-left: 12px;}
table.contenttable { border: 1px #113388 dotted; margin: 10px 0px 10px 12px; width: 100%; }
table.contenttable TR td { padding: 0px 3px 0px 3px; }
table.contenttable TR td p.bodytext { font-size: 10px; }
table.contenttable TR { background-color: #EBEEF5; }

=== Umfrage (quickpoll) ===

/* Umfrage */
.tx-quickpoll-pi1{
width: 230px;
}
.tx-quickpoll-pi1 table{
font-size: 74%;
margin: 0 0;
}

.tx-quickpoll-pi1 td{
text-align: left;
}

.tx-quickpoll-pi1 table h2{
padding-left:0;
text-align: left;
}

input .pollanswer{
width: 10px;
background: pink;
}
input.pollsubmit{
width: 4em;
font-size:100%;
font-weight: bold;
color:#888;
}

/* POLL */
/* default styles for extension "tx_quickpoll" */
.tx-quickpoll-pi1 .pollbar {
BACKGROUND: url(/typo3conf/ext/quickpoll/pi1/pollbar.gif) repeat-x left center;}
.tx-quickPoll-pi1 .polltable{width: 100%;}
.tx-quickPoll-pi1 h2 {font-size:100%;}
.tx-quickPoll-pi1 th {
/* make it solid */
text-transform:uppercase;
margin-bottom:1em;
/* indent from left */
padding-left:0px;}
.tx-quickPoll-pi1 td {
padding-left:0;}
.tx-quickPoll-pi1 .pollquestion {
padding-bottom: 0.5em;}
.tx-quickPoll-pi1 .pollanswer {
vertical-align: -20%;border: none;}
.tx-quickPoll-pi1 .polltotal {
text-align:center;padding-top: 0.50em;}
.tx-quickPoll-pi1 .pollresulttext {
padding-top: 0.5em;}
=== Login ===
/*** Login ***/
#loginBox{
width: 240px;
float: right;
margin-top: 40px;
}
#loginBox p{
font-size: 80%;
font-weight:bold
color: #999;
margin: 0;
padding: 0;
}

#loginBox .csc-form-fieldcell{
font-size: 50%
color: #999;
}

=== Search Box (indexedsearch) ===
#searchBox input{
width: 130px;

}
#searchBox input.searchBox-button{
position: relative;
border: none;
width: auto;
top: 2px;
}
div.tx-indexedsearch-whatis{
padding-left: 12px;
}

#logos{
width:230px;
text-align: center;
padding-top: 20px;
}

== Umfrage (pbsurvey) ==
siehe [[Typo3 - Extensions]]