/* CSS Document */

html { height:100%; }
body { height:100%; font-size:12px; }

* { margin:0; padding:0; }

/* clearfix */
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
/* Für IE 6/7 (löst hasLayout aus) */
.cf { zoom:1; }

/* ------------------------------
Allgemeine Definitionen
------------------------------ */

/* Tags mit dem Attribut data-url als Link anzeigen */
[data-url] { cursor:pointer; }

/* Schrift-Layout */
h1, h2, h3, h4, h5, h6 { padding:.2em 0; }
h1 { font-size:1.6em; }
h2 { font-size:1.2em; }
h3 { font-size:1.1em; }
h4 { font-size:.9em; }
h5 { font-size:.9em; }
h6 { font-size:.8em; }
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span { font-size:.8em; font-weight:normal; }

/* color */
.o_col_red { color:#c00; }
.o_col_gre { color:#3c0; }
.o_col_blu { color:#069; }
.o_col_lig { color:#ccc; }
.o_col_dar { color:#333; }

/* text-align */
.o_tal { text-align:left; }
.o_tar { text-align:right; }
.o_tac { text-align:center; }
.o_taj { text-align:justify; }

/* vertical-align */
.o_vat { vertical-align:top; }
.o_vam { vertical-align:middle; }
.o_vab { vertical-align:bottom; }

/* float */
.o_fr { float:right; }
.o_fl { float:left; }
.o_cb { clear:both; }
.o_cl { clear:left; }
.o_cr { clear:right; }

/* font-size */
.o_fss { font-size:.8em; line-height:1.2em; }
.o_fsm { font-size:.9em; line-height:1.2em; }
.o_fsl { font-size:1.2em; }
.o_fsxl { font-size:1.4em; }
.o_fsxxl { font-size:2.4em; }

/* display */
.o_db { display:block; }
.o_di { display:inline; }
.o_dib { display:inline-block; }
.o_dn { display:none!important; }

/* width */
.o_w0 { width:0%; }
.o_w5 { width:5%; }
.o_w10 { width:10%; }
.o_w15 { width:15%; }
.o_w20 { width:20%; }
.o_w25 { width:25%; }
.o_w30 { width:30%; }
.o_w35 { width:35%; }
.o_w40 { width:40%; }
.o_w45 { width:45%; }
.o_w50 { width:50%; }
.o_w55 { width:55%; }
.o_w60 { width:60%; }
.o_w65 { width:65%; }
.o_w70 { width:70%; }
.o_w75 { width:75%; }
.o_w80 { width:80%; }
.o_w85 { width:85%; }
.o_w90 { width:90%; }
.o_w95 { width:95%; }
.o_w100 { width:100%; }

/* width float left */
[class*="o_wfl"] { float:left; }
.o_wfl0 { width:0%; }
.o_wfl1 { width:10%; }
.o_wfl2 { width:20%; }
.o_wfl3 { width:30%; }
.o_wfl4 { width:40%; }
.o_wfl5 { width:50%; }
.o_wfl6 { width:60%; }
.o_wfl7 { width:70%; }
.o_wfl8 { width:80%; }
.o_wfl9 { width:90%; }
.o_wfl10 { width:100%; }

/* width float right */
[class*="o_wfr"] { float:right; }
.o_wfr0 { width:0%; }
.o_wfr1 { width:10%; }
.o_wfr2 { width:20%; }
.o_wfr3 { width:30%; }
.o_wfr4 { width:40%; }
.o_wfr5 { width:50%; }
.o_wfr6 { width:60%; }
.o_wfr7 { width:70%; }
.o_wfr8 { width:80%; }
.o_wfr9 { width:90%; }
.o_wfr10 { width:100%; }



/* Vertikal Spacer */
.o_vs_s { width:50px; height:100px; }
.o_vs_m { width:50px; height:200px; }
.o_vs_l { width:50px; height:400px; }
.o_vs_xl { width:50px; height:600px; }

/* Absatz */
p { padding:.4em 0; }


/* ------------------------------
Anzeige in verschiedenen Media Queries
------------------------------ */
[class*="o_mq_show"] { display:none!important; }


/* ------------------------------
Content Cols 1-12 (o_col)
skalierbare Spalten in 12er-Teilung auf der Basis von 1220px Breite
------------------------------ */
/* 
|20|                                          1180                                              |20|
|20| 80 |20| 80 |20| 80 |20| 80 |20| 80 |20| 80 |20| 80 |20| 80 |20| 80 |20| 80 |20| 80 |20| 80 |20|

o_col1 = 80/1180*100 = 6.779661016949153% und 80/12 = 6.66666667%
o_col2 = ((80*2)+(20*1))/1180*100 = 15.25423728813559% und ((80*2)+(20*1))/12 = 15%
o_col3 = ((80*3)+(20*2))/1180*100 = 23.72881355932203% und ((80*3)+(20*2))/12 = 18.33333333%
o_col4 = ((80*4)+(20*3))/1180*100 = 32.20338983050847% und ((80*4)+(20*3))/12 = 30%
usw. */
/* Zusammenfassung mehrerer Spalten in einer Zeile (o_row) */
.o_row { display:block; position:relative; }

/* Spalten 1-12 (o_col) */
[class*="o_col"] { display:block; position:relative; margin-bottom:1em; width:100%; *width:98.33333333333333%; }


/* Einheit-Abschnitt */
/* Fasst Elemente zu einer Einheit zusammen und schließt sie ab. Insbesondere Float-Elemente werden korrekt zusammengefasst. */
.o_unit { display:block; width:100%; }


/* ------------------------------
Framework
------------------------------ */
[class*="o_framework"] { position:relative; display:block; padding:5em 0 2em 0; min-height:100%; }
.o_framework { width:100%; }
.o_framework_large { width:100%; }
.o_header { position:fixed; display:block; margin:0 auto; width:100%; height:5em; left:0; right:0; z-index:30; }
.o_header h1, .o_header h2, .o_header h3, .o_header h4, .o_header h5, .o_header h6 { margin:0; padding:.8em 1em .4em 1em; line-height:1.1em; }

.o_footer { position:fixed; display:block; padding:0; width:100%; height:2em; left:0; right:0; bottom:0; z-index:20; }
.o_footer .o_status, .o_footer .o_status_add { display:inline-block; padding:.8em 1em 0 1em; }
.o_footer .o_status { float:left; }
.o_footer .o_status_add { float:right; }



/* ------------------------------
Seitenbereiche
------------------------------ */
[class*="o_article"] { display:block; padding:1em .4em 3em .4em; }


/* ------------------------------
Trennbereiche
------------------------------ */
hr[class*="o_hr"] { height:1px; border:0; }
.o_hr_xs { margin:.4em 0; }
.o_hr_s { margin:.8em 0; }
.o_hr_m { margin:2em 0; }
.o_hr_l { margin:4em 0; }
.o_hr_xl { margin:8em 0; }

hr[class*="o_line"] { height:1px; border:0; background:#ccc; }
.o_line_xs { margin:.4em 0; }
.o_line_s { margin:.8em 0; }
.o_line_m { margin:2em 0; }
.o_line_l { margin:4em 0; }


/* ------------------------------
Space (mit Randabstand)
------------------------------ */
/* bei geringer Auflösung gesamte Breite */
[class*="o_space"] { position:relative; display:block; width:100%; height:auto; }
img[class*="o_space"] { display:block; }
figure[class*="o_space"] { display:block; line-height:1.2em; text-align:center; font-size:.9em; }
figure[class*="o_space"] img { display:block; margin:.8em 0; width:100%; height:auto; }
figure[class*="o_space"] h3 { text-align:center; }


/* ------------------------------
Split (Links-/Rechts-Verteilung)
------------------------------ */
[class*="o_split"] { position:relative; display:block; width:100%; height:auto; }



/* ------------------------------
Tabelle
------------------------------ */
ul.o_table { display:table; margin:0; padding:0; width:100%; border-spacing:0; empty-cells:show; border-collapse:separate; list-style:none; }
ul.o_table li { display:table-row; margin:0; padding:0; overflow:hidden; list-style:none; }

ul.o_table li.o_th { overflow:hidden; white-space:nowrap; } /* Kopfzeile */
ul.o_table li.o_tr {  } /* Zeile */

/*
o_tg=gruppiert Spalten, in jeder Gruppe müssen eine oder mehr Spalten enthalten sein
p_tc=Spalten
in allen Spalten (incl. Kopfzeile) muss die Verteilung der Gruppen und Spalten gleich sein. es reicht nicht pro Zeile auf 100% zu kommen
*/
ul.o_table li > * { display:table-cell; margin:0; padding:0; }
ul.o_table [class*="o_tg"], ul.o_table [class*="o_tc"] { display:table-cell; vertical-align:top; }
ul.o_table [class*="o_tg"] [class*="o_tc"] { float:left; }

ul.o_table li.o_th [class*="o_tc"] { padding:1em .4em; overflow:hidden; }
ul.o_table li.o_tr [class*="o_tc"] { padding:1em .4em; overflow:hidden; }

/* Breite für Gruppen und Spalten */
ul.o_table .o_tc5, ul.o_table .o_tg5 { width:5%; }
ul.o_table .o_tc10, ul.o_table .o_tg10 { width:10%; }
ul.o_table .o_tc15, ul.o_table .o_tg15 { width:15%; }
ul.o_table .o_tc20, ul.o_table .o_tg20 { width:20%; }
ul.o_table .o_tc25, ul.o_table .o_tg25 { width:25%; }
ul.o_table .o_tc30, ul.o_table .o_tg30 { width:30%; }
ul.o_table .o_tc35, ul.o_table .o_tg35 { width:35%; }
ul.o_table .o_tc40, ul.o_table .o_tg40 { width:40%; }
ul.o_table .o_tc45, ul.o_table .o_tg45 { width:45%; }
ul.o_table .o_tc50, ul.o_table .o_tg50 { width:50%; }
ul.o_table .o_tc55, ul.o_table .o_tg55 { width:55%; }
ul.o_table .o_tc60, ul.o_table .o_tg60 { width:60%; }
ul.o_table .o_tc65, ul.o_table .o_tg65 { width:65%; }
ul.o_table .o_tc70, ul.o_table .o_tg70 { width:70%; }
ul.o_table .o_tc75, ul.o_table .o_tg75 { width:75%; }
ul.o_table .o_tc80, ul.o_table .o_tg80 { width:80%; }
ul.o_table .o_tc85, ul.o_table .o_tg85 { width:85%; }
ul.o_table .o_tc90, ul.o_table .o_tg90 { width:90%; }
ul.o_table .o_tc95, ul.o_table .o_tg95 { width:95%; }
ul.o_table .o_tc100, ul.o_table .o_tg100 { width:100%; }

/* Schaltflächen in der Tabellenzeile werden genauso wie Spalten verwendet */
ul.o_table .o_tb, ul.o_table .o_tbh { display:table-cell; width:5%; overflow:hidden; padding:.4em .2em; cursor:pointer; vertical-align:middle; text-align:center; font-size:1.6em; }
ul.o_table .o_tbn { display:table-cell; width:5%; } /* Platzhalter für eine Schaltfläche */



/* ------------------------------
List
------------------------------ */
/* nummerierte Aufzählung */
ol[class*="o_list"] { padding:.4em 2em; }
ol[class*="o_list"] li { padding:.2em 0; }
/* unsortierte Aufzählung */
ul[class*="o_list"] { padding:.4em 2em; }
ul[class*="o_list"] li { padding:.2em 0; }
/* Aufzählungszeichen */
ul.o_listblank { list-style:none; }
ul.o_listdisc { list-style:disc; }
ul.o_listcircle { list-style:circle; }
ul.o_listsquare { list-style:square; }
ul.o_listcheck { list-style-image:url(../img/list-check.png); }
ul.o_listnet { list-style-image:url(../img/list-net.png); }

/* horizontale Aufzählung */
ul[class*="o_listcols"] { padding:.4em 0; list-style:none; }
ul[class*="o_listcols"] li { float:left; list-style:none; }
ul.o_listcols li {  } /* variable Breite */
ul.o_listcols2 li { width:50%; }
ul.o_listcols3 li { width:33.3333333333%; }
ul.o_listcols4 li { width:25%; }
ul.o_listcols5 li { width:20%; }
ul.o_listcols6 li { width:16.6666666666%; }
ul.o_listcols7 li { width:14.2857142%; }
ul.o_listcols8 li { width:12.5%; }
ul.o_listcols9 li { width:11.1111111111%; }
ul.o_listcols10 li { width:10%; }
ul.o_listcols11 li { width:9.909090909%; }
ul.o_listcols12 li { width:8.3333333333%; }



/* ------------------------------
List-Images
------------------------------ */
/* jedes Bild muss von einem Container (*) umschlossen werden */
/* <span><img ... ></span> oder <a herf=...><img ... ></a> */
[class*="o_listimg"] { margin:.4em 0; }
[class*="o_listimg"] >* { display:block; }
[class*="o_listimg"] * img { display:block; width:100%; max-width:100%; height:auto; border:2px solid #666; }
[class*="o_listimg"] >*:hover img { border:2px solid #4ae; }
[class*="o_listimg"] * span { display:block; margin-top:.4em; padding-top:.4em; width:100%; text-align:center; line-height:1.2em; color:#369; font-size:.9em; border:2px solid #fff; background-color:#ddd; }
[class*="o_listimg"] >*:hover span { border:2px solid #369; }
.o_listimg2 >* { float:left; margin:2%; width:48%; }
.o_listimg2 >*:nth-of-type(2n) { margin-right:0; }
.o_listimg2 >*:nth-of-type(2n+1) { margin-left:0; }
.o_listimg3 >* { float:left; margin:2%; width:30.666666%; }
.o_listimg3 >*:nth-of-type(3n) { margin-right:0; }
.o_listimg3 >*:nth-of-type(3n+1) { margin-left:0; }
.o_listimg4 >* { float:left; margin:2%; width:22%; }
.o_listimg4 >*:nth-of-type(4n) { margin-right:0; }
.o_listimg4 >*:nth-of-type(4n+1) { margin-left:0; }



/* ------------------------------
Label-Listen
------------------------------ */
ul[class*="o_label"] { margin:.4em 0; list-style:none; }
ul[class*="o_label"] li { display:block; margin:.4em 0; width:100%; clear:both; list-style:none; line-height:1.2em; }
ul[class*="o_label"] li > *{ margin:0; vertical-align:top; }
ul[class*="o_label"] li > *:first-child { float:left; padding-top:.2em; line-height:1em; color:#15a; font-size:.9em; font-weight:bold; }
ul[class*="o_label"] li > *:last-child { float:right; display:block; padding-left:.4em; }

ul.o_label1 li > *:first-child { width:10%; }
ul.o_label2 li > *:first-child { width:20%; }
ul.o_label3 li > *:first-child { width:30%; }
ul.o_label4 li > *:first-child { width:40%; }
ul.o_label5 li > *:first-child { width:50%; }

ul.o_label1 li > *:last-child { width:90%; }
ul.o_label2 li > *:last-child { width:80%; }
ul.o_label3 li > *:last-child { width:70%; }
ul.o_label4 li > *:last-child { width:60%; }
ul.o_label5 li > *:last-child { width:50%; }


/* ------------------------------
Button
------------------------------ */
.o_tip { display:table; position:relative; padding:.4em 0; height:2em; overflow:hidden; cursor:pointer; color:#369; text-decoration:none; }
.o_tip i { display:block; width:2em; font-size:2em; line-height:2em; border:1px solid #369; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; -khtml-border-radius:50%; }
.o_tip:hover i { color:#fff; background-color:#369; }
.o_tip > *:first-child { display:table-cell; vertical-align:middle; text-align:center; }
.o_tip > *:last-child { display:table-cell; padding-left:.8em; vertical-align:middle; }




/* ------------------------------
iFrame
------------------------------ */
[class*="o_iframe"] { display:block; width:100%; }
.o_iframe_pdf { height:30em; padding:.8em; border:1px solid #ccc; }





/* ------------------------------
Hover-Zoom
------------------------------ */
.o_hover_zoom { display:block; position:relative; overflow:hidden; width:100%; }
.o_hover_zoom > img { display:block; width:100%; height:auto; }



/* ------------------------------
Toggle
------------------------------ */

[class*="o_toggle"] { cursor:pointer; }
[class*="o_toggle_more"] { display:none; }
.o_toggle_open {  }


/* ------------------------------
Accordion
------------------------------ */
#o_accordion aside { display:none; }
#o_accordion aside.o_open { display:block; }



/* ------------------------------
Box Sizing
------------------------------ */
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }



/* ------------------------------
Clearfix
------------------------------ */
[class*="o_article"],
.o_row,
.o_unit,
[class*="o_space"],
ul.o_table li [class*="o_tg"],
[class*="o_listcols"],
[class*="o_listimg"],
ul[class*="o_label"] li
{ zoom:1; }

[class*="o_article"]:before,
.o_row:before,
.o_unit:before,
[class*="o_space"]:before,
ul.o_table li [class*="o_tg"]:before,
[class*="o_listcols"]:before,
[class*="o_listimg"]:before,
ul[class*="o_label"] li:before
{ display:table; content:""; }

[class*="o_article"]:after,
.o_row:after,
.o_unit:after,
[class*="o_space"]:after,
ul.o_table li [class*="o_tg"]:after,
[class*="o_listcols"]:after,
[class*="o_listimg"]:after,
ul[class*="o_label"] li:after
{ display:table; clear:both; content:""; }



/* ------------------------------
Transition
------------------------------ */
/* All */
.o_transition { -webkit-transition:opacity 1.0s; -moz-transition:opacity 1.0s; -o-transition:opacity 1.0s; -ms-transition:opacity 1.0s; }

.o_tip i, .o_tip i:hover,
[class*="o_listimg"] * img, [class*="o_listimg"] >*:hover img
{ -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -o-transition:all .5s ease-out; -ms-transition:all .5s ease-out; }


/* ------------------------------
Flash (blinken)
------------------------------ */
@-moz-keyframes flash { 0% { opacity: 1.0; } 50% { opacity: 0.1; } 100% { opacity: 1.0; } }
@-webkit-keyframes flash { 0% { opacity: 1.0; } 50% { opacity: 0.1; } 100% { opacity: 1.0; } }
@keyframes flash { 0% { opacity: 1.0; } 50% { opacity: 0.1; } 100% { opacity: 1.0; } }


.o_spinner { -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; display: inline-block; }
@-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@-webkit-keyframes spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } }
@keyframes spin { 0% { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(359deg); -o-transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } }



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


}



@media screen and (min-width:480px) {
	
/* ------------------------------
Anzeige in verschiedenen Media Queries
------------------------------ */
.o_mq_show1 { display:inherit!important; }

/* ------------------------------
Content Cols 1-12 (o_col)
------------------------------ */
[class*="o_col"] { margin-left:3.448275862%; margin-bottom:0; }
[class*="o_col"]:first-child { margin-left:0; }
.o_col1 { float:left; width:5.172413793%; *width:5%; }
.o_col2 { float:left; width:13.79310345%; *width:13.33333333%; }
.o_col3 { float:left; width:22.4137931%; *width:21.666666667%; }
.o_col4 { float:left; width:31.03448276%; *width:30%; }
.o_col5 { float:left; width:39.65517241%; *width:38.33333333%; }
.o_col6 { float:left; width:48.27586207%; *width:46.66666667%; }
.o_col7 { float:left; width:56.89655172%; *width:55%; }
.o_col8 { float:left; width:65.51724138%; *width:63.33333333%; }
.o_col9 { float:left; width:74.13793103%; *width:71.66666667%; }
.o_col10 { float:left; width:82.75862069%; *width:80%; }
.o_col11 { float:left; width:91.37931034%; *width:88.33333333%; }
.o_col { width:100%; *width:96.66666667%; }


/* ------------------------------
Space (mit Randabstand)
------------------------------ */
[class*="o_space_l"] { float:left; margin:.4em 2% .4em 0; }
[class*="o_space_r"] { float:right; margin:.4em 0 .4em 2%; }
[class*="o_space_c"] { margin:.4em auto; }

.o_space { padding:.4em 2%; width:100%; }
.o_space_l10, .o_space_r10, .o_space_c10 { width:8%; }
.o_space_l20, .o_space_r20, .o_space_c20 { width:18%; }
.o_space_l30, .o_space_r30, .o_space_c30 { width:28%; }
.o_space_l40, .o_space_r40, .o_space_c40 { width:38%; }
.o_space_l50, .o_space_r50, .o_space_c50 { width:48%; }
.o_space_l60, .o_space_r60, .o_space_c60 { width:58%; }
.o_space_l70, .o_space_r70, .o_space_c70 { width:68%; }
.o_space_l80, .o_space_r80, .o_space_c80 { width:78%; }
.o_space_l90, .o_space_r90, .o_space_c90 { width:88%; }
	
/* ------------------------------
Split (Links-/Rechts-Verteilung)
------------------------------ */
[class*="o_split_l"] { float:left; }
[class*="o_split_r"] { float:right; }

.o_split_l10, .o_split_r10 { width:10%; }
.o_split_l20, .o_split_r20 { width:20%; }
.o_split_l30, .o_split_r30 { width:30%; }
.o_split_l40, .o_split_r40 { width:40%; }
.o_split_l50, .o_split_r50 { width:50%; }
.o_split_l60, .o_split_r60 { width:60%; }
.o_split_l70, .o_split_r70 { width:70%; }
.o_split_l80, .o_split_r80 { width:80%; }
.o_split_l90, .o_split_r90 { width:90%; }
	

}



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

body { font-size:14px; }

/* ------------------------------
Framework
------------------------------ */
.o_framework { width:75%; }
.o_framework_large { width:100%; }

/* ------------------------------
Seitenbereiche
------------------------------ */
[class*="o_article"] { padding:2em; }


/* ------------------------------
Anzeige in verschiedenen Media Queries
------------------------------ */
.o_mq_show2 { display:inline!important; }


}



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

body { font-size:16px; }
	
/* ------------------------------
Anzeige in verschiedenen Media Queries
------------------------------ */
.o_mq_show3 { display:inherit!important; }

}



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

/* ------------------------------
Anzeige in verschiedenen Media Queries
------------------------------ */
.o_mq_show4 { display:inherit!important; }


/* ------------------------------
Seitenbereiche
------------------------------ */
.o_article_s { margin:0 auto; width:40em; }

}



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

/* ------------------------------
Anzeige in verschiedenen Media Queries
------------------------------ */
.o_mq_show5 { display:inherit!important; }

}



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

body { font-size:18px; }
	
/* ------------------------------
Anzeige in verschiedenen Media Queries
------------------------------ */
.o_mq_show6 { display:inherit!important; }


}