/* CSS Document */

/*
Farben
#fff weiß
#000 schwarz
#4ae blau (Fläche)

#9cf blau (Fläche Hover)
#09f blau (Schrift)
#58b blau (Schrift Hover)
#8ac hellblau
 */

body { font-family:'Titillium Web', sans-serif; color:#333; }

/* ------------------------------
Allgemeine Definitionen
------------------------------ */
/* Farbe der Textmarkierung */
::selection { background:#09f; color:#fff; }
::-moz-selection { background-color:#09f; color:#fff; }

/* Schrift-Layout */
h1, h2, h3, h4, h5, h6 { font-family:'Titillium Web', sans-serif; }
h1, h2, h3 { color:#09f; }
h4, h5, h6 { color:#222; font-weight:normal; }
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {  }




/* ------------------------------
Links
------------------------------ */
/* Links */
a.o_href { padding:0; cursor:pointer; color:#09f; text-decoration:none; border-bottom:1px dotted #000; }
a.o_href:hover {  border-bottom:1px solid #000; }
a.o_marked { display:inline-block; margin:0; padding:.1em .4em; white-space:nowrap; cursor:pointer; text-decoration:none; color:#09f; }
a.o_marked:hover { color:#fff; background-color:#09f; }

/* Link-List */
.o_linklist { display:block; }
.o_linklist h3 { display:block; padding:.4em .8em; color:#fff; background-color:#09f; }
.o_linklist a { display:block; width:100%; color:#666; text-decoration:none; background-color:#f8f8f8; border-bottom:1px solid #ccc; }
.o_linklist a:hover, .o_linklist a.o_active { color:#fff; background-color:#999; }
.o_linklist a:hover i, .o_linklist a.o_active i { color:#fff; background-color:#9c0; }
.o_linklist a i { float:left; width:2em; padding:.4em 0; color:#690; text-align:center; font-size:1.6em; background-color:#cf0; }
.o_linklist a span { display:block; padding:.8em .2em 0 4em; }



/* ------------------------------
Framework
------------------------------ */
[class*="o_framework"] {  }



/* ------------------------------
Seitenbereich
------------------------------ */
/* Header */
.o_header { background-color:#09f; }
.o_header h1 { float:left; width:65%; white-space:nowrap; overflow:hidden; color:#fff; font-size:1.4em; }
.o_header h1 span { display:block; font-size:.7em; }

.o_header a { cursor:pointer; color:#fff; text-decoration:none; }
.o_header a.o_left, .o_header a.o_right { float:right; padding:.4em .2em; font-family:Arial, Helvetica, sans-serif; font-size:2.6em; outline:none; }
.o_header a.o_left { float:left; }
.o_header a.o_right { float:right; }


/* Footer */
.o_footer { color:#fff; text-align:center; font-size:1em; background-color:#333; }
.o_footer .o_status, .o_footer .o_status_add { font-size:.8em; }


/* Bereich für Schaltflächen */
.o_controls { position:fixed; display:block; padding:.4em; width:100%; height:7em; left:0; right:0; bottom:0; background-color:#fff; }
.o_controls .o_small { display:inline-block; font-size:1.2em; text-align:left; }
.o_controls .o_large { display:inline-block; font-size:2em; text-align:left; }




/* ------------------------------
Navigation
------------------------------ */
.o_nav { position:fixed; top:-100%; width:60%; height:100%; right:0; padding:0; z-index:20; opacity:0; overflow:hidden; transition:0.5s; border-left:.4em solid #ccc; background-color:rgba(255, 255, 255, 0.95); }
.o_nav_show { top:0; opacity:1; }

.o_nav ul { margin:0; padding:6em 0 0 0; list-style:none; }
.o_nav ul li { margin:0; padding:0; white-space:nowrap; }
.o_nav ul [class*="o_nbtn"] { display:block; padding:.4em 1em; cursor:pointer; text-decoration:none; font-size:1.4em; }
.o_nav ul [class*="o_nbtn"]:hover { text-decoration:none; }
.o_nav ul [class*="o_nbtn"] i { padding-right:.8em; font-size:.8em; }


/* Layout der Navigation-Schaltflächen */
/* normal Button */
.o_nav ul .o_nbtn { color:#666; }
.o_nav ul .o_nbtn i { color:#666; }
.o_nav ul .o_nbtn:hover { color:#fff; background-color:#09f; }
/* top Button */
.o_nav ul .o_nbtn_t { color:#666; background-color:#fff; }
.o_nav ul .o_nbtn_t i { color:#9bd; }
.o_nav ul .o_nbtn_t:hover { color:#fff; background-color:#aaa; }
/* hover Button */
.o_nav ul .o_nbtn_h { color:#666; background-color:#fff; }
.o_nav ul .o_nbtn_h i { color:#09f; }
.o_nav ul .o_nbtn_h:hover { color:#fff; background-color:#aaa; }
/* attent Button */
.o_nav ul .o_nbtn_a { color:#666; background-color:#fff; }
.o_nav ul .o_nbtn_a i { color:#c00; }
.o_nav ul .o_nbtn_a:hover { color:#fff; background-color:#aaa; }
/* deactive Button */
.o_nav ul .o_nbtn_d { cursor:default; color:#999; background-color:#fff; }








/* ------------------------------
Hintergrund-Image
------------------------------ */
.o_background { position:fixed; top:-50%; left:-50%; width:200%; height:200%; z-index:-1; }
.o_background img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }



/* ------------------------------
Article
------------------------------ */
article[class*="o_article"] { margin-bottom:3em; line-height:1.4em; }
article[class*="o_article"] header { padding-bottom:1em; }
article[class*="o_article"] p { padding:.4em 0; }


/* ------------------------------
Image
------------------------------ */
img.o_img { display:block; width:100%; height:auto; }

figure.o_zoom { display:block; position:relative; overflow:hidden; border:1px dashed #ccc; }
figure.o_zoom img { display:block; width:100%; height:auto; -webkit-transform:scaleY(1); -moz-transform:scaleY(1); -o-transform:scaleY(1); -ms-transform:scaleY(1); transform:scaleY(1); -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; -ms-transition:all 1s ease-in-out; transition:all 1s ease-in-out; }
figure.o_zoom:hover { border:1px solid #ccc; }
figure.o_zoom:hover img { -webkit-transform:scale(1.02); -moz-transform:scale(1.02); -o-transform:scale(1.02); -ms-transform:scale(1.02); transform:scale(1.02); }


/* ------------------------------
Tabellen
------------------------------ */
table[class*="o_table"] { margin:1em 0; width:100%; border-spacing:0; empty-cells:show; border-collapse:separate; background-color:#fff; }
table[class*="o_table"] th { padding:.4em .4em .4em .4em; overflow:hidden; line-height:1em; color:#09f; font-size:.9em; font-weight:bold; font-family:'Titillium Web', sans-serif; vertical-align:bottom; white-space:nowrap; background-color:#f5f5f5; }
table[class*="o_table"] th.subheadline { padding:.4em; color:#fff; text-align:left; background-color:#ddd; }
table[class*="o_table"] th a { color:#000; text-decoration:none; }
table[class*="o_table"] th a:hover { text-decoration:underline; }
table[class*="o_table"] th i { color:#999; } /* Symbol für Sortierung */
table[class*="o_table"] td { padding:.4em .4em .2em .4em; overflow:hidden; line-height:1.2em; vertical-align:top; }
table[class*="o_table"] td.o_link { cursor:pointer; }
table[class*="o_table"] td.o_link:hover { background-color:#eee; }
table[class*="o_table"] td.o_link a { display:block; width:100%; text-decoration:none; color:#09f; }
table[class*="o_table"] td.o_link a:hover { text-decoration:none; }

table[class*="o_table"] tr.o_select:hover { cursor:pointer; background-color:#eef; }
table[class*="o_table"] tr.o_sum td { padding-top:1em; border-top:1px solid #666; }
table[class*="o_table"] tr.o_mark_1 { background-color:#ad2; }
table[class*="o_table"] td.o_caption { padding-top:.8em; line-height:1em; color:#09f; font-size:.9em; font-weight:bold; font-family:'Titillium Web', sans-serif; background-color:#f8f8f8; }
table[class*="o_table"] td.o_text { padding:.8em 1%; }

/* Standardtabelle */
table.o_table th { border-top:1px solid #ccc; border-left:1px solid #ccc; }
table.o_table th:first-child { border-left:0; }
table.o_table td:first-child { border-left:0; }
table.o_table th.subheadline { border-left:1px solid #ccc; border-top:1px solid #ccc; }
table.o_table th.subheadline:last-child { border-right:1px solid #333; }
table.o_table td { border-left:1px solid #ccc; border-top:1px solid #ccc; }
table.o_table tr:last-child td { border-bottom:1px solid #ccc; }

/* Tabelle light */
table.o_table_light th { text-align:left; border-bottom:1px solid #ccc; }
table.o_table_light th.subheadline { border-bottom:1px solid #ccc; }
table.o_table_light td { border-bottom:1px solid #ccc; }

/* Tabelle mit abgerundeten Ecken */
table.o_table_r th { border-top:1px solid #ccc; border-left:1px solid #ccc; }
table.o_table_r th.subheadline { border-left:1px solid #ccc; border-top:1px solid #ccc; }
table.o_table_r th.subheadline:last-child { border-right:1px solid #333; }
table.o_table_r td { border-left:1px solid #ccc; border-top:1px solid #ccc; }
table.o_table_r tr:last-child th, table.o_table_r tr:last-child td { border-bottom:1px solid #ccc; }
table.o_table_r th:last-child, table.o_table_r td:last-child { border-right:1px solid #ccc; }
table.o_table_r tr:last-child td:first-child { border-bottom-left-radius:.4em; }
table.o_table_r tr:last-child td:last-child { border-bottom-right-radius:.4em; }
table.o_table_r tr:first-child th:first-child, table.o_table_r tr:first-child td:first-child { border-top-left-radius:.4em; }
table.o_table_r tr:first-child th:last-child, table.o_table_r tr:first-child td:last-child { border-top-right-radius:.4em; }
table.o_table_r tr:first-child th, table.o_table_r tr:first-child td { border-top:1px solid #ccc; }



/* ------------------------------
Tabelle
------------------------------ */
ul.o_table { }
ul.o_table li { }
ul.o_table li.o_th { color:#fff; font-family:'Titillium Web', sans-serif; font-size:1em; background-color:rgba(0, 0, 0, 0.6); }
ul.o_table li.o_tr {  }
ul.o_table li.o_marked { background-color:#eee; }
ul.o_table li.o_tr:hover { color:#000; background-color:rgba(223, 223, 223, 0.6); }
ul.o_table li.o_tr > * { color:#000; text-decoration:none; }
ul.o_table li > *:focus { outline:0; }

ul.o_table [class*="o_tc"],
ul.o_table [class*="o_tb"] { /*border-right:1px dotted #ccc;*/ border-bottom:1px solid #ccc; }
ul.o_table [class*="o_tg"] {/* border-right:1px dotted #ccc;*/ border-bottom:1px solid #ccc; }
ul.o_table [class*="o_tg"] [class*="o_tc"],
ul.o_table [class*="o_tg"] [class*="o_tb"] { border-bottom:0; }
/*
ul.o_table li > *:last-child,
ul.o_table [class*="o_tg"] > *:last-child { border-right:0; }
*/
ul.o_table .o_tb i { color:#09f; }
ul.o_table .o_tb:hover { background-color:#09f; }
ul.o_table .o_tb:hover i { color:#fff!important; }
ul.o_table .o_tbh i { color:#c66; }
ul.o_table .o_tbh:hover { background-color:#c00; }
ul.o_table .o_tbh:hover i { color:#fff; }



/* ------------------------------
Nachrichten
------------------------------ */
.o_msg_info, .o_msg_okay, .o_msg_error { margin-bottom:.8em; padding:.4em; border:1px solid; }
.o_msg_info { color:#333; background-color:#eee; border-color:#ccc; }
.o_msg_okay { color:#561; background-color:#df6; border-color:#ad2; }
.o_msg_error { color:#900; background-color:#fdd; border-color:#c00; }
.o_msg_info h2, .o_msg_okay h2, .o_msg_error h2 { font-size:1.1em; }



/* ------------------------------
Tabs Register
------------------------------ */
.o_register { display:block; }
ul.o_register_header { display:block; margin:.4em 0; list-style:none; }
ul.o_register_header li { display:inline-block; margin:.2em 0; padding:.4em .8em; list-style:none; cursor:pointer; color:#333; text-decoration:none; background-color:#f5f5f5; }
ul.o_register_header li:hover, ul.o_register_header li.o_active { color:#fff; background-color:#666; }
.o_register_body { display:block; position:relative; overflow:hidden; }
.o_register .o_register_tab { display:block; position:absolute; width:100%; }



/* ------------------------------
Short Button
------------------------------ */
[class*="o_short"]:before { display:inline-block; margin:0 .2em; width:1em; text-decoration:inherit; text-align:center; text-transform:none; font-family:'fontello'; font-style:normal; font-weight:normal; font-variant:normal; speak:none; cursor:pointer; }
.o_short_active:before { content:'\e863'; }
.o_short_noactive:before { content:'\e83f'; color:#eee; }
.o_short_ok:before { content:'\e863'; }
.o_short_nook:before { content:'\e863'; color:#eee; }
.o_short_del:before { content:'\e864'; color:#c00; }
.o_short_nodel:before { content:'\e864'; color:#eee; }
.o_short_check:before { content:'\e809'; }
.o_short_nocheck:before { content:'\e86c'; color:#eee; }
.o_short_cancel:before { content: '\e83f'; }
.o_short_cancel { color:#ccc; }
.o_short_cancel:hover { color:#c30; }
.o_short_block:before { content:'\e892'; color:#c00; }



/* ------------------------------
Color Icon
------------------------------ */
[class*="o_icon"]:before { display:inline-block; margin:0 .2em; width:1em; text-decoration:inherit; text-align:center; text-transform:none; font-family:'fontello'; font-style:normal; font-weight:normal; font-variant:normal; speak:none; }
.o_icon_ok:before { content:'\e863'; color:#9c0; }
.o_icon_spinner:before {content: '\e894'; color:#999; }


/* ------------------------------
Sanduhr
------------------------------ */
#ppHourglass { position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:10000; cursor:wait; opacity:0; text-align:center; background:url(../img/back/bg-overlay.png) repeat; }
#ppHourglass_body { display:block; position:fixed; margin:0 auto 0 auto; width:90%; height:auto; z-index:10001; }
#ppHourglass_body ul { position:relative; margin:1.4em auto; width:1em; height:1em; list-style:none; font-size:6em; border-radius:50%; }
#ppHourglass_body ul li { position:absolute; width:.4em; height:.4em; border-radius:50%; box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); }
#ppHourglass_body ul li:nth-child(1) { margin-left:-.1em; top:0; left:50%; background:#06c; transform-origin:50% 250%; animation:rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate; }
#ppHourglass_body ul li:nth-child(2) { margin-top:-.1em; top:50%; right:0; background:#3c0; transform-origin:-150% 50%; animation:rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate; }
#ppHourglass_body ul li:nth-child(3) { margin-left:-.1em; bottom:0; left:50%; background:#ff0; transform-origin:50% -150%; animation:rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate; }
#ppHourglass_body ul li:nth-child(4) { margin-top:-.1em; top:50%; left:0; background:#f90; transform-origin:250% 50%; animation:rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate; }
@keyframes rota { to { transform:rotate(360deg); } }
@keyframes opa { 12.0% { opacity:0.80; } 19.5% { opacity:0.88; } 37.2% { opacity:0.64; } 40.5% { opacity:0.52; } 52.7% { opacity:0.69; } 60.2% { opacity:0.60; } 66.6% { opacity:0.52; } 70.0% { opacity:0.63; } 79.9% { opacity:0.60; } 84.2% { opacity:0.75; } 91.0% { opacity:0.87; } }


/* ------------------------------
Overlays
------------------------------ */
#ppOverlay { position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:10000; opacity:0; background:url(../img/back/bg-overlay.png) repeat; }
#ppOverlay_body { display:block; position:fixed; margin:0 auto 0 auto; padding:1em; width:50%; height:auto; z-index:10001; border:1px solid #ccc; background-color:#fff; }
#ppOverlay_closer { position:absolute; right:.2em; top:.2em; cursor:pointer; }
.fix { position:fixed; left:30px; top:200px; width:200px; background-color:#F90; }

#ppByeBye { display:none; position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:10000; opacity:0; background-color:#09f; }
#ppByeBye a { display:inline-block; position:absolute; right:0; bottom:0; padding:1em; text-decoration:none; font-size:4em; color:#fff; }




/* ------------------------------
User-Liste
------------------------------ */
.o_userlist_header { margin:0 auto; padding:0; width:70%; text-align:center; }
/*
.o_userlist_header { display:table; margin:0; padding:0; width:100%; border-spacing:0; empty-cells:show; border-collapse:separate; }
.o_userlist_header > div { display:table-cell; margin:0; padding:0; vertical-align:bottom; }
.o_userlist_header > div:first-child { width:70%; }
.o_userlist_header > div:last-child { width:30%; }
*/

ul.o_userlist { margin:.4em 0; list-style:none; }
ul.o_userlist li { display:block; padding:.4em 0; width:100%; clear:both; list-style:none; }
ul.o_userlist li img { float:left; display:block; width:30%; height:auto; }
ul.o_userlist li a { float:right; display:block; width:70%; }

.o_userlist2 { margin:.4em 0; }
.o_userlist2 a { float:left; position:relative; display:inline-block; margin:.4em 1%; padding:.4em; width:23%; max-width:180px; color:#09f; text-decoration:none; background-color:#f8f8f8; }
.o_userlist2 a:hover { background-color:#eee; }
.o_userlist2 img { display:block; width:100%; height:auto; }
.o_userlist2 span { display:block; width:100%; overflow:hidden; white-space:nowrap; text-align:center; font-size:.8em; }
.o_userlist2 em { position:absolute; top:1%; right:1%; font-style:normal; color:#3c0; border:2px solid #666; background-color:#fff; -webkit-border-radius:50%; -moz-border-radius:50%; -khtml-border-radius:50%; border-radius:50%; box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); }

ul.o_userlist3 { margin:.4em 0; list-style:none; }
ul.o_userlist3 li { float:left; display:inline-block; margin:.4em 1%; padding:.4em; width:23%; max-width:180px; list-style:none; color:#09f; }
ul.o_userlist3 li img { display:block; height:auto; }
ul.o_userlist3 li span { display:block; width:100%; overflow:hidden; white-space:nowrap; }



/* ------------------------------
Sonstiges
------------------------------ */
.o_highlight { color:#09f; font-weight:bold; font-size:1.2em; font-style:italic; }


/* ------------------------------
Clearfix
------------------------------ */
.o_header,
.o_nav,
.o_linklist a,
.o_userlist2
{ zoom:1; }
.o_header:before,
.o_nav:before,
.o_linklist a:before,
.o_userlist2:before
{ display:table; content:""; }
.o_header:after,
.o_nav:after,
.o_linklist a:after,
.o_userlist2:after
{ display:table; clear:both; content:""; }


/* ------------------------------
Radius
------------------------------ */
a.o_marked,
#ppQRDisplay
{ border-radius:.4em; -webkit-border-radius:.4em; -moz-border-radius:.4em; -khtml-border-radius:.4em; }



/* Transition */
a.o_href, a.o_href:hover,
a.o_marked, a.o_marked:hover,
ul.o_table li.o_tr, ul.o_table li.o_tr:hover,
ul.o_table [class*="o_tb"], ul.o_table [class*="o_tb"]:hover,
.o_linklist a, .o_linklist a:hover,
.o_linklist a i, .o_linklist a:hover i,
.o_nav ul [class*="o_nbtn"], .o_nav ul [class*="o_nbtn"]:hover,
.o_select, .o_select:hover,
.o_userlist2 a, .o_userlist2 a:hover
{ -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -o-transition:all .5s ease-out; -ms-transition:all .5s ease-out; }



@media screen and (min-width:320px) {


}



@media screen and (min-width:480px) {


}



@media screen and (min-width:620px) {

/* ------------------------------
Navigation
------------------------------ */
.o_nav { width:40%; }

/* Bereich für Schaltflächen */
.o_controls { position:fixed; display:block; padding:6em 1em 1em 1em; width:25%; height:100%; left:inherit; right:0; bottom:0; background-color:none; }
.o_controls .o_small { display:block; font-size:3em; text-align:center; }
.o_controls .o_large { display:block; font-size:4em; text-align:center; }
.o_controls .o_large span { display:block; padding:.2em 0; }

 

}



@media screen and (min-width:800px) {

}



@media screen and (min-width:960px) {

/* ------------------------------
Navigation
------------------------------ */
.o_nav { width:25%; }


}



@media screen and (min-width:1150px) {


}



@media screen and (min-width:1500px) {


}