@charset "UTF-8";

.skyscraper { display:none; }

@media all {
    /**
     * box model reset
     */
    
    * {
        margin:0;
        padding:0;
    }
    
    a, a img, img {
        border:0;
    }
    
    
    /**
     * never hide the browser scrollbar
     */
    
    html { overflow-y:scroll; }
    
    
    /**
     * default colors and text formatting
     */
    
    body {
        color:#000000;
        font-family:'Trebuchet MS',Arial,Helvetica,sans-serif;
        font-size:0.75em;
    }
    
    .bold   { font-weight:bold; }
    .italic { font-style:italic; }
    
    
    /**
     * messages (notice, information, ok, warning, error)
     */
    
    .message {
        background-position:0.5em 0.5em;
        background-repeat:no-repeat;
        border:1px solid;
        color:#000000;
        padding:0.6em 0.6em 0.6em 2.6em;
        margin:0 0 0.75em 0;
    }
    
    .message.notice {
        background-color:#f6f7fa;
        background-image:url('./images/notice.png');
        border-color:#c2cbcf;
    }
    
    .message.information {
        background-color:#ddeef9;
        background-image:url('./images/information.png');
        border-color:#8aafc4;
    }
    
    .message.ok {
        background-color:#cdeaca;
        background-image:url('./images/ok.png');
        border-color:#58b548;
    }
    
    .message.warning {
        background-color:#fbffb3;
        background-image:url('./images/warning.png');
        border-color:#c4b70d;
    }
    
    .message.error {
        background-color:#fbb19b;
        background-image:url('./images/error.png');
        border-color:#dc4c42;
    }
    
    
    /**
     * default spacing of elements
     */
    
    p, table  { padding:0 0 0.75em 0; }
    ol, ul    { margin:0 0 0.75em 20px; }
    
    
    /**
     * links
     */
    
    a       { text-decoration:none; }
    a:hover { text-decoration:underline; }
    
    
    /**
     * titles
     */
    
    h1, h2, h3, h4, h5, h6 { text-shadow:2px 2px 4px #bbbbbb; }
    
    
    /**
     * lists
     */
    
    li {
        line-height:1.8em;
        list-style-image:url('./images/list.png');
    }
    
    
    /**
     * formulars
     */
    
    fieldset { border:0; }
        
    input, textarea {
        margin:0 0 0.75em;
        width:100%;
    }
    
    input.submit { width:auto; }
    input.submit.button {}
    input.submit.text {
        border:0;
        background-color:transparent;
        cursor:pointer;
        margin:0;
        padding:0;
    }
    
    select { margin-bottom:0.75em; }
    
    .checkbox label,
    .radio label { margin-right:10px; }
    
    .checkbox input,
    .radio input {
        margin-right:5px;
        width:auto;
    }
    
    
    /**
     * tables
     */
    
    table {
        border:0;
        border-collapse:collapse;
    }
    
    th, td { vertical-align:top; }
    
    
    /**
     * predefined classes
     */
     
    .clear {
        clear:both;
        line-height:0px;
        height:0px;
    }
    
    .spacer {
        clear:both;
        line-height:0px;
        height:1px;
    }
    
    .bold { font-weight:bold; }
    .caption { font-style:italic; }
    
    .hidden { display:none; }
    
    
    /**
     * general html layout
     */
    
    #container {}
    
    #header {}
    #header .content {}
    
    #page {}
    #page .content {}
    
    #feature {}
    #feature .content {}
    
    #main {}
    #main .content {}
    
    #main .columns {}
    
    #main .columns .column-01 {}
    #main .columns .column-01 .content {}
    
    #main .columns .column-02 {}
    #main .columns .column-02 .content {}
    
    #main .columns .column-03 {}
    #main .columns .column-03 .content {}
    
    #footer {}
    #footer .content {}
    
    
    /**
     * columns specific html layout
     * 
     * HTML:
     * 
     * <div class="columns content">
     *     <div id="column-01" class="default">
     *         <div class="content"></div>
     *     </div>
     *     <div id="column-02" class="default">
     *         <div class="content"></div>
     *     </div>
     *     <div id="column-03" class="teaser">
     *         <div class="content"></div>
     *     </div>
     *     <div class="clear"></div>
     * </div>
     */
     
    .columns {
        clear:both;
        width:100%;
    }
    
    .columns .content {}
    
    /* formatting of default- and teaser columns */
    .columns .default {}
    .columns .teaser {}
    
    /* main column definitions */
    .columns #column-01,
    .columns #column-02,
    .columns #column-03 { float:left; }
    
    /* default alignment if two columns are present */
    .columns.two #column-01,
    .columns.two #column-02 { width:50%; }
    
    .columns.two-feature-left #column-01 { width:66.6%; }
    .columns.two-feature-left #column-02 { width:33.3%; }
    
    .columns.two-feature-right #column-01 { width:33.3%; }
    .columns.two-feature-right #column-02 { width:66.6%; }
    
    /* content spacing for two columns */
    .columns.two #column-01 > .content,
    .columns.two-feature-left #column-01 > .content,
    .columns.two-feature-right #column-01 > .content { margin:0 10px 0 0; }
    
    .columns.two #column-02 > .content,
    .columns.two-feature-left #column-02 > .content,
    .columns.two-feature-right #column-02 > .content { margin:0 0 0 10px; }
    
    /* default alignment if three columns are present */
    .columns.three #column-01 { width:25%; }
    .columns.three #column-02 { width:50%; }
    .columns.three #column-03 { width:25%; }
    
    /* content spacing for three columns */
    .columns.three #column-01 > .content { margin:0 15px 0 0; }
    .columns.three #column-02 > .content { margin:0 5px; }
    .columns.three #column-03 > .content { margin:0 0 0 15px; }
    
    
    /**
     * subcolumns specific html layout
     * 
     * HTML:
     * 
     * <div class="subcolumns">
     *     <div class="content">
     *         <div class="subcolumn-50 default">
     *             <div class="content"></div>
     *         </div>
     *         <div class="subcolumn-50 right teaser">
     *             <div class="content"></div>
     *         </div>
     *     </div>
     * </div>
     */
    
    .subcolumns {
        clear:both;
        width:100%;
    }
    
    .subcolumns .content {}
    
    /* formatting of default- and teaser subcolumns */
    .subcolumns .default {}
    .subcolumns .teaser {}
    
    /* floating of subcolumns (default left) */
    .subcolumn-10, .subcolumn-15, .subcolumn-20,
    .subcolumn-25, .subcolumn-30, .subcolumn-33,
    .subcolumn-40, .subcolumn-50, .subcolumn-60,
    .subcolumn-66, .subcolumn-70, .subcolumn-75,
    .subcolumn-80, .subcolumn-90 { float:left; }
    
    .subcolumn-10.right, .subcolumn-15.right, .subcolumn-20.right,
    .subcolumn-25.right, .subcolumn-30.right, .subcolumn-33.right,
    .subcolumn-40.right, .subcolumn-50.right, .subcolumn-60.right,
    .subcolumn-66.right, .subcolumn-70.right, .subcolumn-75.right,
    .subcolumn-80.right, .subcolumn-90.right { float:right; }
    
    /* width of subcolumns */
    .subcolumn-10 { width:10%; }
    .subcolumn-15 { width:15%; }
    .subcolumn-20 { width:20%; }
    .subcolumn-25 { width:25%; }
    .subcolumn-30 { width:30%; }
    .subcolumn-33 { width:33.3%; }
    .subcolumn-40 { width:40%; }
    .subcolumn-50 { width:50%; }
    .subcolumn-60 { width:60%; }
    .subcolumn-66 { width:66.6%; }
    .subcolumn-70 { width:70%; }
    .subcolumn-75 { width:75%; }
    .subcolumn-80 { width:80%; }
    .subcolumn-90 { width:90%; }
    
    /* content spacing of subcolumns */
    .subcolumn-10 .content.left, .subcolumn-15 .content.left,
    .subcolumn-20 .content.left, .subcolumn-25 .content.left,
    .subcolumn-30 .content.left, .subcolumn-33 .content.left,
    .subcolumn-40 .content.left, .subcolumn-50 .content.left,
    .subcolumn-60 .content.left, .subcolumn-66 .content.left,
    .subcolumn-70 .content.left, .subcolumn-75 .content.left,
    .subcolumn-80 .content.left, .subcolumn-90 .content.left { margin:0 10px 0 0; }
    
    .subcolumn-10 .content.center, .subcolumn-15 .content.center,
    .subcolumn-20 .content.center, .subcolumn-25 .content.center,
    .subcolumn-30 .content.center, .subcolumn-33 .content.center,
    .subcolumn-40 .content.center, .subcolumn-50 .content.center,
    .subcolumn-60 .content.center, .subcolumn-66 .content.center,
    .subcolumn-70 .content.center, .subcolumn-75 .content.center,
    .subcolumn-80 .content.center, .subcolumn-90 .content.center { margin:0 5px; }
    
    .subcolumn-10 .content.right, .subcolumn-15 .content.right,
    .subcolumn-20 .content.right, .subcolumn-25 .content.right,
    .subcolumn-30 .content.right, .subcolumn-33 .content.right,
    .subcolumn-40 .content.right, .subcolumn-50 .content.right,
    .subcolumn-60 .content.right, .subcolumn-66 .content.right,
    .subcolumn-70 .content.right, .subcolumn-75 .content.right,
    .subcolumn-80 .content.right, .subcolumn-90 .content.right { margin:0 0 0 10px; }
}