/* 
    Document   : style
    Created on : 07.02.2013, 08:07:32
    Author     : Thomas
    Description:
        Purpose of the stylesheet follows.
*/

/* root { 
    display: block;
}
*/

/*******************************************************************************
 *                                                                             *
 *                                                                             *
 *                                C O N T E N T                                *
 *                                                                             *
 *                                                                             *
 ******************************************************************************/








/*******************************************************************************
 *                                                                             *
 *                                                                             *
 *         D o k u m e n t b a u    u n d    t o p n a v i g a t i o n         *
 *                                                                             *
 *                                                                             *
 ******************************************************************************/
/*
*, root, html {
    margin: 0;
    padding: 0;
    font-family: "Arial", "Sans", "Verdana", sans-serif;
}
*/
body {
/*
    margin: 0 auto;
    width: 1024px;
    background-color: lightgrey;
*/
    margin: 0 auto;
    width: 1024px;
    min-height: 760px;
    height: 100%;

    
    background: -moz-linear-gradient(transparent, #cf9); 
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, #cf9));	
    background: -webkit-linear-gradient(#cf9, transparent);	
    background: -o-linear-gradient(#cf9, transparent);
    background: -ms-linear-gradient(#cf9, transparent);
    background: linear-gradient(#cf9, transparent);
    background: #cf9;
    background: url("../img/bg_kachel.gif");
    
    color: #333333;
    /*font-family: Impact, Charcoal, sans-serif; /*Verdana; */
    font-family: "Courier New", Courier, monospace;
}

ul, ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.biside li > * {
    width: 200px;
    display: inline-block;
    vertical-align: middle;
}


a.button {
    padding: 5px;
    border: 1px solid #FFF;
    background-color: #ed1e79;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    min-width: 90px;
    line-height: 13px;
    height: 13px;
    color: white;
}

.successbox,
.warningbox,
.errorbox {
    border: 1px dashed;
    font-size: 10px;
    width: 85%;
    padding: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
}

.successbox {
    border-color:  #00d600;
    background-color: #ccffcc;
    color: #666;
}

.warningbox {
    border-color: orange;
    background-color: orangered;
    color: #666;    
}

.errorbox {
    border-color:  #D60000;
    background-color: #FFCCCC;
    color: #666;
}

.popup_box {
    width: 85%;
    margin: auto;
    padding: 15px;
    position: relative;
    top: 20px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 35px;
}

#mainframe {
    display: inline-block;
    background-color: azure;
    width: 100%;
}

.header {
    background-image: url('../img/banner.jpg');
    background-repeat: repeat-x;
    height: 65px;
    position: relative;
}

.header .title {
    color: #333;
    font-size: 24px;
    text-decoration: none;
    
    padding: 5px;
    bottom: 0;
    position: absolute;
}

.header_menu {
    color: #FFF;
    
    background-color: #333;
    -moz-border-radius: 10px 10px 10px 0;
    border-radius: 10px 10px 10px 0;
    
    padding: 2px 15px 5px;
    bottom: 0;
    right: 0;
    position: absolute;
}

.header_menu a {
    color: inherit;
    font-size: 12px;
    text-decoration: none;
}

.header_menu a:hover {
    text-decoration: underline;
    font-weight: bold;
}

.header_menu input,
.header_menu label {
    font-size: 10px;
    height: 11px;
}

.horiz_nav li {
    text-align: center;
    display: inline-block;
    /*border: 1px solid black;*/
}

.horiz_nav li * {
    display: inline-block;
    vertical-align: middle;
}


.horiz_nav > li {
    /*display: table-cell;*/
}

.horiz_nav > li:first-child {
    text-align: left;
}
.horiz_nav > li:last-child {
    text-align: right;
}

.horiz_nav h1 {
    font-size: 1.6em;
}

.horiz_nav input {
    font: 1.2em Sans;
    color: lightgrey;
}

.navi a {
    font: 0.8em Sans;
    color: white;
    text-decoration: none;
    vertical-align: middle;
}

.navi li {
    padding-right: 4px;
    border-right: 1px solid white;
}
.navi li:last-child {
    border-right: none;
}

.left {
    float: left;
}

.right {
    float: right;
}

.side {
    margin: 0;
    padding: 15px;
    background-color: blue;
    display: block;
}

.side li * {
    color: white;
    display: block;
}

.sidenavi {
    margin: 0;
    padding: 15px 10px;
    width: 125px;
    background: #333;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

.sidenavi li {
    margin: 10px 0;
}

.sidenavi li a {
    padding: 2px;
    text-decoration: none;
    background-color: #3c0;
    color: #333;
    font-style: italic;
    font-family: serif;
    transition: padding .8s, background-color .8s;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

.sidenavi li a:hover {
    padding-right: 15px;
    background-color: #f85;
    transition: padding .8s, background-color .8s;
}

.sidenavi li a.active {
    padding-right: 30px;
    background-color: #36c;
    color: #fafafa;
}

.sidenavi li a.active:hover {
    background-color: #f85;
    transition: background-color .8s;
}

.sidenavi h2 {
    color: #fafafa;
    margin: 0;
    padding: 0;
}

.sidenavi select {
    font-size: 14px;
}


.content-item {
    font-size: 20px;
    color: #333;
    text-decoration: none;
    margin: 5px;
    margin-left: 0;
    margin-right: 0;
    vertical-align: top;
    display: inline-block;
    background: #cff;
    background: -moz-linear-gradient(#444, #cff); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cff),color-stop(1, #444));	
    background: -webkit-linear-gradient(#444, #cff);	
    background: -o-linear-gradient(#444, #cff);
    background: -ms-linear-gradient(#444, #cff);
    background: linear-gradient(#444, #cff);
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

.content-item > span {
    display: table-cell;
    height: 100px;
    width: 150px;
    vertical-align: middle;
    text-align: center;
}

.content-item:hover {
    color: #fcc;
    cursor: pointer;
}


label.toggle_button {
    font-size: 20px;
    color: #fafafa;
    text-decoration: none;
    margin: 3px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    vertical-align: top;
    text-algin: center;
    display: inline-block;
    background: #9cf;
    background: -moz-linear-gradient(#444, #9cf); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #9cf),color-stop(1, #444));	
    background: -webkit-linear-gradient(#444, #9cf);	
    background: -o-linear-gradient(#444, #9cf);
    background: -ms-linear-gradient(#444, #9cf);
    background: linear-gradient(#444, #9cf);
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

.toggle_button span {
    display: table-cell;
    height: 50px;
    width: 50px;
    margin-left: 0;
    margin-right: 0;
    vertical-align: middle;
    text-align: center;
}

.toggle_button:hover {
    background: #cf9;
    background: -moz-linear-gradient(#444, #cf9); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cf9),color-stop(1, #444));	
    background: -webkit-linear-gradient(#444, #cf9);	
    background: -o-linear-gradient(#444, #cf9);
    background: -ms-linear-gradient(#444, #cf9);
    background: linear-gradient(#444, #cf9);
    cursor: pointer;
}

.toggle_button:checked + label {
    background: #cf9;
    background: -moz-linear-gradient(#444, #cf9); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #cf9),color-stop(1, #444));	
    background: -webkit-linear-gradient(#444, #cf9);	
    background: -o-linear-gradient(#444, #cf9);
    background: -ms-linear-gradient(#444, #cf9);
    background: linear-gradient(#444, #cf9);
    margin-top: 7px;
    margin-bottom: -1px;
    -moz-box-shadow: 0 0 1px #9c9c9c;
    -webkit-box-shadow: 0 0 1px #9c9c9c;
    box-shadow: 0 0 1px #9c9c9c;
}

.button {
    font-size: 20px;
    color: #fafafa;
    text-decoration: none;
    margin: 5px;
    vertical-align: top;
    text-algin: center;
    display: inline-block;
    background: #333;
    background: -moz-linear-gradient(#444, #333); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #333),color-stop(1, #444));	
    background: -webkit-linear-gradient(#444, #333);	
    background: -o-linear-gradient(#444, #333);
    background: -ms-linear-gradient(#444, #333);
    background: linear-gradient(#444, #333);
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
    border: none;
}

.button:hover {
    background: #f00;
    background: -moz-linear-gradient(#444, #f00); 
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #f00),color-stop(1, #444));	
    background: -webkit-linear-gradient(#444, #f00);	
    background: -o-linear-gradient(#444, #f00);
    background: -ms-linear-gradient(#444, #f00);
    background: linear-gradient(#444, #f00);
    cursor: pointer;
}