@charset "utf-8";

:root {
    --blue: #2f80ed;
    --blue-dark: #123a7a;
    --blue-light: #9fd3ff;
    --red: #ff6b6b;
    --red-dark: #e14b4b;
    --white: #ffffff;
    --red-bg: rgba(255, 107, 107, 0.88);
}

body#onair_body { font-family: Arial; font-size: 15px; color: var(--white); text-align: center; }
div#onair_grussboxbutton a { font-family: Arial; font-size: 20px; color: var(--blue-light); text-align: center; }
body { background: linear-gradient(135deg, #071a3d 0%, #0b2d6b 50%, #154a99 100%); background-attachment: fixed; }

div#wrapper {
    margin: 0 auto;
    padding: 0;
    width: 1000px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: var(--blue-light);
    background: var(--red-bg);
    box-shadow: 0 0 8px var(--blue);
}

div.clear { clear: both; }
div#content { min-height: 250px; padding: 10px; background: var(--red-bg); }

div#navi {
    border-bottom: 1px solid #666;
    background: linear-gradient(to bottom, var(--blue), var(--blue-dark));
}

div#navi ul { margin: 0 auto; padding: 0; list-style-type: none; }
div#navi ul li { float: left; border-right: 1px solid #666; }
div#navi ul li a { display: block; padding: 7px 20px; min-width: 65px; text-align: center; color: var(--white); text-decoration: none; }
div#navi ul li span#headline { display: block; font-size: 18px; color: var(--white); font-weight: 700; padding: 12px 25px; }
div#navi ul li a#current,
div#navi ul li a:hover { background: linear-gradient(to bottom, var(--red), var(--red-dark)); }
div#navi ul li:first-child { border-left: none; }
div#navi ul li:last-child { border-right: none; }

table.content { width: 100%; border: 1px solid #DDD; border-spacing: 1px; }
table.content th, table.content td { padding: 6px 4px; }
table.content tr:nth-child(odd), table.content tr:nth-child(even) { background: var(--red-bg); }
table.content th { color: var(--white); background: linear-gradient(to bottom, var(--blue), var(--blue-dark)); }

div#footer { margin-bottom: 10px; height: 25px; padding: 0; background: linear-gradient(to bottom, var(--blue), var(--blue-dark)); }
div#footer a { color: var(--white); text-decoration: none; }
div#footer ul { float: right; margin: 0; padding: 0; list-style-type: none; }
div#footer ul li { float: left; }
div#footer ul li a { display: block; padding: 0 10px; line-height: 25px; border-left: 1px solid #666; }
div#footer ul li a#footer-current,
div#footer ul li a:hover { background: linear-gradient(to bottom, var(--red), var(--red-dark)); }

ul.tabmenu { margin: 0; padding: 0; list-style-type: none; }
ul.tabmenu li { float: left; }
ul.tabmenu li a { display: block; margin-right: 10px; padding: 8px 15px; color: var(--blue-light); font-weight: 700; border: 1px solid var(--blue); border-bottom: 0; background: var(--red-bg); }
ul.tabmenu li a:hover,
ul.tabmenu li a.current { color: var(--white); background: var(--red-dark); }

span#refreshBar { float: right; font-size: 12px; padding-top: 5px; }
img.profil_bild { max-width: 100px; max-height: 100px; border: 0 solid var(--white); }
table.popup-table td.popup-profil-bild { padding-top: 5px; vertical-align: top; width: 110px; }
table.popup-table { margin: 0; padding: 0; width: 100%; }
table.popup-table td.popup-desc { vertical-align: top; }
table.popup-table td.popup-desc span.headline { display: block; margin-bottom: 5px; padding-bottom: 2px; font-weight: 700; border-bottom: 1px solid var(--blue); }
table.content tr.event-sendung { background: var(--red-bg); }

input[type=text],
input[type=password],
input[type=file],
input[type=email],
input[type=url],
input[type=search],
input[type=number],
select,
textarea {
    width: 99%;
    margin: 3px;
    padding: 5px;
    font-size: 12px;
    border-radius: 3px;
    font-family: Arial, Verdana, Helvetica;
    border: 1px solid var(--blue-dark);
    box-sizing: border-box;
    resize: none;
}

input[type=number] { width: 70px; text-align: center; }
select { padding: 4px 5px; }
input[type=text]:focus,
input[type=password]:focus,
input[type=file]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=search]:focus,
select:focus,
textarea:focus { outline: none; box-shadow: 0 0 5px var(--blue-light); }

input[type=submit],
input[type=reset],
input[type=button] {
    padding: 3px 10px;
    border: 1px solid var(--blue);
    font-weight: 700;
    color: var(--white);
    cursor: pointer;
    border-radius: 3px;
    background: linear-gradient(to bottom, var(--blue), var(--blue-dark));
}

input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:hover { border-color: var(--red); background: linear-gradient(to bottom, var(--red), var(--red-dark)); }

input[type=submit].cancel,
input[type=reset].cancel,
input[type=button].cancel { color: var(--white); border-color: var(--red); background: var(--red-dark); }

input[type=submit].cancel:hover,
input[type=reset].cancel:hover,
input[type=button].cancel:hover { color: var(--white); border-color: var(--red); background: linear-gradient(to bottom, var(--red), var(--red-dark)); }

input[type=submit].submit,
input[type=reset].submit,
input[type=button].submit { color: var(--white); }

input[type=submit].submit:hover,
input[type=reset].submit:hover,
input[type=button].submit:hover { color: var(--white); border-color: var(--red); background: linear-gradient(to bottom, var(--red), var(--red-dark)); }

span.event { display: block; padding: 8px; color: var(--white); margin-bottom: 10px; text-align: center; background: var(--red-bg); border-top: 5px solid var(--blue); border-bottom: 5px solid var(--red); }
span.event-Success { color: var(--blue-light); background: var(--red-bg); border-color: var(--blue); }
span.event-Fail { color: var(--red); background: var(--red-bg); border-color: var(--red); }

a { text-decoration: none; color: var(--blue-light); }
a:hover { color: var(--red); }

h1.headline { margin: 0 0 10px 3px; padding-bottom: 3px; font-size: 22px; border-bottom: 1px dotted var(--blue); }
span.circle-red { border-radius: 10px; padding: 2px 6px; font-weight: 700; color: var(--white); background: var(--red); }
span.label { color: var(--white); font-weight: 700; padding: 4px 6px; border-radius: 4px; background: var(--blue-dark); }
span.label-red { color: var(--white); background: var(--red); }
span.label-orange { color: var(--white); background: var(--blue); }
span.label-green { color: var(--white); background: var(--blue-dark); }

div.pagenav { float: right; }
div.pagenav ul { margin: 0; padding: 0; height: 25px; list-style-type: none; border: 1px solid var(--blue); }
div.pagenav ul li { float: left; border-left: 1px solid var(--blue); }
div.pagenav ul li:first-child { border: none; }
div.pagenav ul li a { display: block; padding: 0 7px; line-height: 25px; font-weight: bold; vertical-align: middle; cursor: pointer; }
div.pagenav ul li a:hover,
div.pagenav ul li#currentpage { color: var(--white); background: var(--red-dark); }