/* Backgrounds from: http://subtlepatterns.com/ */

body {
    font-family:        Arial, Helvetica;
    font-size:          10pt;
    color:              #000000;
    background:         #6198ff url(../img/squairy_light.png) fixed;
    padding:            0;
    margin:             0;
}

/* ************************************************************************
   Logo
*/

#logo {
    position:           fixed;
    top:                50px;
    right:              50px;
    padding:            5px;
    margin:             0;
    width:              100px;
    height:             30px;
    font-size:          16pt;
    text-align:         right;
    line-height:        30px;
    color:              #ffffff;
    text-shadow:        1px 1px 1px rgba(0,0,0,0.5);
    z-index:            100;
}

/* ************************************************************************
   Top
*/

#top {
    position:           fixed;
    top:                0;
    left:               50px;
    right:              40px;
    margin:             0;
    height:             90px;
    background:         #6198ff url(../img/squairy_light.png) fixed;
    z-index:            90;
    box-shadow:         0px 5px 4px rgba(97,152,255,0.8);
}

#bottom, #right  {
    display:            none;
}

/* ************************************************************************
   Ajax Message
*/

#ajax_message {
    position:           fixed;
    display:            none;
    top:                -2px;
    left:               0;
    right:              0;
    margin:             auto;
    width:              300px;
    height:             auto;
    padding:            1px;
    border:             1px solid #1166dd;
    box-shadow:         3px 3px 4px rgba(0,0,0,0.7);
    text-align:         center;
    vertical-align:     middle;
    z-index:            100;
}
#ajax_message div#ajax_message_bg {
    position:           absolute;
    top:                0;
    bottom:             0;
    left:               0;
    right:              0;
    background:         #1166dd;
    opacity:            0.3;
    z-Index:            1;
}
#ajax_message div#ajax_message_container {
    position:           relative;
    top:                0;
    bottom:             0;
    left:               0;
    right:              0;
    height:             auto;
    z-Index:            2;
}

/* ************************************************************************
   Menu
*/

#menu, #content {
    box-shadow:         3px 3px 4px rgba(0,0,0,0.7);
}

/* Horizontal menu:  */
#menu, #menu ul#dropdownmenu li {
    height:             30px;
}
#menu ul#dropdownmenu ul li .menutext{
    width:              176px;
}
#menu ul#dropdownmenu ul {
}

#menu.horizontal {
    top:                50px;
    left:               50px;
    right:              50px;
    padding-right:      150px;
    height:             40px;
    border:             0;
    font-size:          11pt;
    font-weight:        normal;
    background:         #143e8c;
    border:             1px solid black;
    border-top-left-radius:20px;
}

#menu ul#dropdownmenu li .menutext {
    padding:            4px 0px 0px 8px;
    color:              #ffffff;
    text-decoration:    none;
    text-shadow:        1px 1px 1px rgba(0,0,0,0.5);
}
#menu ul#dropdownmenu li.disabled .menutext {
    color:              #aaaaaa;
}
#menu ul#dropdownmenu li.selected .menutext {
    color:              #ffff00;
}

#menu ul#dropdownmenu li .submenuhint {
    color:              #6198ff;
}

#menu ul#dropdownmenu > li:after {
    padding-left:       8px;
    content:            "|";
    color:              #ffffff;
}

#menu ul#dropdownmenu > li:last-child:after {
    padding-left:       0;
    content:            "";
}

#menu.horizontal ul#dropdownmenu ul {
    background:         #143e8c;
    box-shadow:         3px 3px 4px rgba(0,0,0,0.8);
    border:             1px solid black;
    border-top:         0;
    border-radius:      2px;
}
#menu ul#dropdownmenu ul li {
    border-top:         1px solid #3C76E3;
    border-bottom:      1px solid #0C2452;
}
#menu ul#dropdownmenu ul li:first-child {
    border-top:         none;
}
#menu ul#dropdownmenu ul li:last-child {
    border-bottom:      none;
}

#menu #menuitem_login #login_form {
    display:            none;
    position:           absolute;
    top:                100%;
    background:         #143e8c;
    box-shadow:         3px 3px 4px rgba(0,0,0,0.8);
    color:              #ffffff;
    border:             1px solid black;
    border-top:         0;
    border-radius:      2px;
    width:              210px;
}
#menu #menuitem_login #login_form label {
    width:              70px;
}
#menu #menuitem_login #login_form input {
    width:              120px;
}
#menu #menuitem_login #login_form input[type=submit] {
    display:            none;
}

/* ************************************************************************
   Content
*/

#content {
    position:           relative;
    padding:            20px;
    margin:             50px;
    margin-top:         90px;
    min-height:         400px;
    min-width:          600px;
    background:         rgba(255,255,255,0.5);
    border:             1px solid black;
    border-bottom-right-radius:20px;
}

#content #contentmain {
    margin-right:      200px;
}
#content #side_panel.hidable ~ #contentmain {
    margin-right:      25px;
}

#content #side_panel {
    position:           absolute;
    top:                10px;
    bottom:             10px;
    right:              0px;
    width:              180px;
    padding:            10px;
    border-left:        2px solid #004394;
}

#content #side_panel.hidable {
    width:              5px;
    overflow:           hidden;
}
#content #side_panel #side_panel_label {
    position:           absolute;
    left:               -35px;
    top:                100px;
    height:             2em;
    transform:          rotate(-90deg);
    -webkit-transform:  rotate(-90deg);
    cursor:             pointer;
}
#content #side_panel #side_panel_content {
    padding-left:       1.3em;
}

/* ************************************************************************
   Error Message
*/

#error_message {
    display:            none;
    left:               0;
    right:              0;
    padding:            5px;
    background:         rgba(200,100,50,0.4);
    border:             1px solid #990000;
    white-space:        normal;
}

/* ************************************************************************
   Forms
*/

.form_controls_top {
    border-bottom:      3px double #143e8c;
}

.form_controls_bottom {
    border-top:         3px double #143e8c;
}

div#content input[type=button], div#content input[type=submit],
div#content input[type=reset] {
    padding:            1px;
    padding-left:       10px;
    padding-right:      10px;
    line-height:        18px;
    border:             1px outset #5784c1;
    border-radius:      2px;
    background-color:   #96E09B;
    background-repeat:  no-repeat;
    background-position:3px center;
    border-color:       #b3a07a;
    cursor:             pointer;
}

div#content input[name=cwf_delete] {
    background-image:   url(../img/icons/delete.png);
    padding-left:       20px;
    padding-right:      5px;
}
div#contentmain input[name=cwf_delete] {
    padding-left:       10px;
    padding-right:      0px;
}
div#content input[name=cwf_save] {
    background-image:   url(../img/icons/save.png);
    padding-left:       20px;
    padding-right:      5px;
}

div#content input[type=text]:focus:not([readonly]), 
div#content input[type=password]:focus:not([readonly]), 
div#content select:focus:not([readonly]), 
div#content select:focus:not([readonly]) option,
div#content textarea:focus:not([readonly]),
div#content .textarea:focus:not([readonly]) {
    background:         #BCF9B9;
}
div#content input[type="button"]:hover,
div#content input[type="submit"]:hover,
div#content input[type="reset"]:hover {
    background-color:   #6198ff;
}
div#content input[type=button]:active, div#content input[type=submit]:active,
div#content input[type=reset]:active {
    border:             1px inset #5784c1;
}

div#content input[type=text], div#content input[type=password],
div#content select, 
div#content textarea,
div#content .textarea, 
div#content .inputfield {
    width:              250px;
    height:             15px;
    padding:            3px;
    border:             1px solid #aaaaaa;
    background:         #eeeeee;
    font-family:        Arial, Helvetica;
    font-size:          9pt;
}
div#content input[type=file] {
    background:         #eeeeee;
    font-family:        Arial, Helvetica;
    font-size:          9pt;
}
div#content .textarea, 
div#content .inputfield {
    display:            inline-block;
    overflow:           auto;
}

div#content textarea, div#content .textarea {
    width:              500px;
    height:             7em;
}

div#content input.required, div#content textarea.required {
    background:         #eeeeee;
}

div#content textarea.big {
    height:             14em;
}

div#content select {
    height:             23px;
    width:              258px;
}
div#content select[size] {
    height:             auto;
}
optgroup {
    text-decoration:    none;
    font-style:         normal;
    font-weight:        bold;
    color:              #000000;
    background-color:   #bbbbbb;
}
option {
    background-color:   #eeeeee;
}

/* Labels             ************************************************** */
label {
    display:            inline-block;
    font-size:          9pt;
    width:              170px;
    margin-right:       5px;
    padding-top:        4px;
    padding-bottom:     3px;
    text-align:         right;
    vertical-align:     top;
}
label.for_radio {
    width:              auto;
}

label.left {
    text-align:         left !important;
}

label.invalid {
    margin-left:        10px;
    width:              auto;
    color:              red;
    text-align:         left;
}
form label.required:after {
    content:            "*";
    font-weight:        bold;
    color:              red;
}

div#content .indented {
    display:            inline-block;
    margin-left:        175px;
}

/* Toggle             ************************************************** */
div#content .toggle {
    margin-bottom:      1em;
}
div#content .toggle_part {
    display:            inline-block;
    vertical-align:     top;
    width:              30em;
}
div#content .toggle_control span {
    cursor:             pointer;
}
div#content .toggle_part ul {
    display:            block;
    background-color:   #eeeeee;
    border:             1px solid #aaaaaa;
    margin:             0;
    margin-top:         0.5em;
    overflow:           auto;
    padding-left:       0;
    height:             13em;
    width:              100%;
    list-style-type:    none;
}
div#content .toggle_part ul li {
    cursor:             pointer;
    clear:              both;
}
div#content .toggle_part ul li.toggle_header {
    cursor:             default;
    background-color:   #aaaaaa;
    font-weight:        bold;
}
div#content .toggle_part ul li.active {
    background:         #B2CEF4;
}
div#content .toggle_control {
    display:            inline-block;
    vertical-align:     top;
    font-size:          14pt;
    padding:            10px;
    padding-top:        2em;
}
div#content .toggle_part ul input[type=checkbox] {
    position:           relative;
    float:              right;
}
div#content .toggle_available ul input[type=checkbox] {
    display:            none;
}

/* ************************************************************************
/* General table settings
*/

table tr th {
    color:              #000000;
}

table.padding tr th, table.padding tr td {
    padding:            5px;
    padding-left:       0;
}

table.border tr th, table.border tr td {
    text-align:         center;
    border:             2px solid #777777;
    empty-cells:        show;
}

table.alignleft tr th, table.alignleft tr td {
    text-align:         left;
}

table.borderrows {
    margin-top:         20px;
    border-collapse:    collapse;
}
table.borderrows tr th, table.borderrows tr td {
    border-top:         1px solid black;
}
table.borderrows tr:last-child th, table.borderrows tr:last-child td {
    border-bottom:      1px solid black;
}

thead {
    position:           relative;
}

/* -------------------------------------------------------------------------- */
/* General link settings                                                      */
/* -------------------------------------------------------------------------- */

div#content a, div#content a:link {
    color:              #004394;
    text-decoration:    none;
    font-weight:        bold;
}
div#content a:visited {
    color:              #004394;
    text-decoration:    none;
    font-weight:        bold;
}
div#content a:hover {
    color:              #ffff00;
    text-decoration:    none;
    font-weight:        bold;
}
div#content a:active {
    color:              #ffff00;
    text-decoration:    none;
    font-weight:        bold;
}
div#content a.disabled {
    color:              #aaaaaa;
    text-decoration:    none;
    font-weight:        bold;
}
div#content a.disabled:hover {
    color:              #aaaaaa;
    text-decoration:    none;
    font-weight:        bold;
}

/* ************************************************************************
   Standard elements
*/

h2 {
    font-size:          15pt;
    margin-top:         30px;
    margin-bottom:      10px;
    color:              #004394;
    text-shadow:        1px 1px 1px rgba(0,0,0,0.5);
}

h3 {
    font-size:          13pt;
    margin-top:         30px;
    margin-bottom:      10px;
    color:              #004394;
    text-shadow:        1px 1px 1px rgba(0,0,0,0.5);
}
h3.news, h3.termin, h3.blog {
    display:            inline-block;
    border-top:         2px solid #ffff00;
    width:              100%;
}
div#content h3.blog a {
    color:              #004394;
}
div#content h3.blog a:hover {
    color:              #079500;
}
h3.news span, h3.blog span {
    float:              right;
    color:              #000000;
    font-size:          10pt;
}
h3.termin span{
    display:            block;
    color:              #000000;
    font-size:          10pt;
    margin-bottom:      10px;
}

h4 {
    font-size:          12pt;
    margin-top:         25px;
    margin-bottom:      10px;
}

h5 {
    font-size:          11pt;
    margin-top:         15px;
    margin-bottom:      5px;
}
h5.kommentar span {
    float:              right;
    color:              rgba(0,0,0,0.6);
    font-size:          10pt;
}

.first, h2:first-child, h3:first-child, h4:first-child, h5:first-child {
    margin-top:         0px;
}

.nomargin {
    margin:             0;
}

.disabled {
    color:              #999999;
}

.float_left {
    float:              left;
    padding-right:      20px;
}

.float_right {
    float:              right;
    padding-left:       20px;
}

.blog_kategorien, 
.blog_antwort,
.termin_kategorien {
    font-size:          9pt;
    color:              rgba(0,0,0,0.6);
}
div#content .blog_kategorien a, 
div#content .blog_antwort a, 
div#content .termin_kategorien a {
    color:              rgba(0,0,0,0.6);
    font-weight:        normal;
    text-decoration:    underline;
}

#content #side_panel ul {
    padding-left:        25px;
}

span.tooltip {
    position:           absolute;
    display:            none;
    font-weight:        normal !important;
    min-width:          150px;
    max-width:          350px;
    text-align:         left;
    padding:            5px;
    background:         rgba(241, 237, 172, 0.9);
    border:             1px solid #e3da4d;
    box-shadow:         3px 3px 4px rgba(0,0,0,0.5);
    z-index:            200;
}

div#content blockquote, div#content pre {
  display:              block;
  margin:               1em;
  padding:              1em;
  border:               1px dashed rgba(0,0,0,0.4);
  border-radius:        10px;
  background:           rgba(255,255,255,0.4);
}