/*
** technikum29 Server Development Portal -- Erweiterungs-CSS zum fresh.css
** SVN: $Id: dev-portal.css 24 2009-01-02 01:43:33Z sven $
** Erweitert am 22.03.2008 zur erstmaligen Veröffentlichung des Dev-Portals.
** Erweitert am 26.07.2008 zum Dev-Portal v2
**
** Dieses schicke Design wurde urspruenglich im Mai 2007 entworfen. In den Weihnachts-
** ferien 07/08 findet sich mit dem neuen technikum29-Server endlich dafuer Verwendung.
** Am 26.07.2008 wird in einem Redesign das devportal v2 entworfen.
**
** Dieses CSS-File implementiert:
**  * Dreispaltigen Inhalt
**  * Flexibele Boxen zum Anklicken (unobstructive Javascript)
**  * Verwendung mehrerer Iconthemes
**  * und vieles mehr...
**
*/

.cols {
    margin: 0;
    padding: 15px !important;
    font-size: 13px;
}

.cols .col {
    width: 33%;
    float: left;
    /*border: 1px dashed red;*/
    padding: 1px;
}

/* This is a box that goes over two cols. Use it like class="col colspan2" */
.cols .colspan2 {
    width: 66%;
}


h2 {
    /*font-size: 1.2em;*/
    font-family: Trebuchet MS;
    font-size: 21px;
    font-weight: normal;
    margin: 0;
    border-bottom: 1px solid #aaa;
}

h2 a:link, h2 a:visited {
    text-decoration: none;
    color: inherit;
}

.sub {
    /* untertitel für h2 */
    font-size: 80%;
    text-align: left;
    margin-bottom: 5px;
}

p {
    text-align: justify;
    line-height: 125%;
    margin: 2px 0;
}

.highlight {
    border: 1px solid #b0c8ed;
    background-image: url(/shared/img/fresh.design/sidebar-stripe.gif);
}

.light_highlight {
   background-image: none;
   background-color: #fafafa;
}

.highlight h2 {
    color: #3465a4;
    border-color: #3465a4;
}

/* Generelle Highlight-Boxen, die einen Rahmen und Hintergrund haben. */
.highlight-box {
    margin: 2px;
    /*margin: -16px -16px;
    border-bottom: none;
    min-height: 600px;*/
    padding: 20px;
    border: 1px solid #204a87;
    background-image: url(/shared/img/fresh.design/sidebar-stripe.gif);
}

.highlight-box h2 {
    border: none;
    margin: 0;
    color: #3465a4;
}

.disabled {
    /* Z.B. anzuwenden auf .simple-box. Graut Text aus. */
    color: #aaa;
}

.simple-box {
    margin-bottom: 1px;
    padding: 10px;
}

.simple-box .iconified {
    padding: 2px 2px 0 55px;

    background-repeat: no-repeat;
    background-position: 2px 4px;
}

#page {
    /* Damit der Abstand zum Footer nicht zu groß wird: */
    margin-bottom: 0;
}

#end {
    /* nach #site: Der Footer. 
       #footer ist bereits durch das fresh.design reserviert! Daher #end. */
    text-align: center;
    font-variant: italic;
    font-size: 90%;
    padding: 1em 0;
    background-color: #f8f8f8;
    background-image: url(/shared/img/fresh.design/sidebar-stripe.gif);
    border-top: 1px dashed #aaa;
    margin: 0;
}

#end .copying {
    font-family: Helvetica,Arial,Verdana,sans-serif;
    font-size: 11px;
    line-height: 1.4;
    text-align: justify;
    text-transform: uppercase;
    color: #7C8395;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

#end .copying a:link, #end .copying a:visited {
    text-decoration: none;
}

.image-box {
    margin: 2px;
    margin-top: 5px;
}

.image-box.float-left img {
    float: left;
    margin-right: 4px;
}

.image-box.float-right img {
    float: right;
    margin-left: 4px;
}

/* "goto"-Boxen/Bereiche: Draufklicken bringt einen per JavaScript zum Ziel.
   Per <noscript> gibt es die Javascriptlose Alternative. */
div.goto {
    cursor: pointer;
}

div.goto:hover, div.form:hover {
    background-color: #f5f5f5;
    padding: 9px;
    border: 1px solid #204a87;
}

/* Gegen Wackeln von class="... goto highlight"-Boxen */
div.highlight:hover {
    padding: 10px;
}

div.goto:hover h2, div.form:hover h2 {
    /* Aussehen von Links bekommen (vgl. fresh z.534) */
    /*color: #882224;*/
    color: #3465A4;
    border-color: #3465A4;
    /*text-decoration: underline;*/
}

form {
    margin: 3px 0;
    padding: 7px;
    background-color: #fafafa;
}

div.form:hover form, form:hover, form:focus {
    padding: 6px;
    border: 1px solid #204a87;
}

form .row {
    padding: 1px;
}

form label {
    display: block;
    float: left;
    width: 6em;
    border-bottom: 1px dashed #aaa;
    padding-bottom: 0;
    padding-right: 10px;
}

form label span.notice {
    font-size: 50%;
    color: #888;
}

form .row input {
    font-family: Verdana;
}

.simple-box ul {
    /*list-style-type: square;*/
    /* an dieser Stelle mal wieder ein kleines Reverse-Engineering aus screen.css: */
    list-style-image: url(/shared/img/fresh.design/arrowbg.menu.png);
    padding-left: 15px;
}

/*** ICONS ***/
/* Das sollte besser auch irgendwann mal in die full-fresh oder aehnliches. */
/* Vor allem weil jetzt ein Iconset unter /etc/src/img/silk.iconset/ installiert ist. */

ul.icons {
    margin: 5px;
    padding: 0;
    list-style: none;
}

ul.icons li {
    padding-left: 20px;
    background: url(/icons/small/generic.gif) top left no-repeat;
    line-height: 140%;
}

/* Alle Elemente von ul.icons werden nun per Script bedient:
 <ul class="icons">
   <li class="dateiame">..</li>
 </ul>
 wobei "dateiname" automatisch eingesetzt wird in das silk_iconset.
 Dateiname ohne .png angeben.

*/