/* 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

------------------------------ */

/* Schrift-Layout */

h1, h2, h3, h4, h5, h6 { margin:0; padding:1.4em 0 .2em 0; line-height:1.1em; text-align:left; }

h1 { font-size:2.0em; }

h2 { font-size:1.4em; }

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; }



/* 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_vam { 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:.7em; }

.o_fsm { font-size:.85em; }

.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; }



/* width */

.o_w0 { width:0%; }

.o_w1 { width:10%; }

.o_w2 { width:20%; }

.o_w3 { width:30%; }

.o_w4 { width:40%; }

.o_w5 { width:50%; }

.o_w6 { width:60%; }

.o_w7 { width:70%; }

.o_w8 { width:80%; }

.o_w9 { width:90%; }

.o_w10 { 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; width:100%; }

.o_footer { position:relative; display:block; width:100%; }





/* ------------------------------

Seitenbereich

------------------------------ */

[class*="o_section"] { display:block; position:relative; }





/* ------------------------------

Article

------------------------------ */

article[class*="o_article"] { display:block; }





/* ------------------------------

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; }



hr[class*="o_line"] { height:1px; border:0; background:#999; background-image:-webkit-linear-gradient(left, #fff, #999, #fff); background-image:-moz-linear-gradient(left, #fff, #999, #fff);  background-image:-ms-linear-gradient(left, #fff, #999, #fff); background-image:-o-linear-gradient(left, #fff, #999, #fff); }

.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; }







/* ------------------------------

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_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 #fff; }

[class*="o_listimg"] >*:hover img { border:2px solid #369; }

[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:.2em 0; width:100%; list-style:none; }

ul[class*="o_label"] li > *:first-child { float:left; margin:0; padding:0!important; font-weight:bold; }

ul[class*="o_label"] li > *:last-child { display:block; margin:0; padding:0!important; padding-left:.4em; vertical-align:top; }

/*ul[class*="o_label"] p { padding:0; }*/



ul.o_label1 li > *:first-child { width:2em; }

ul.o_label2 li > *:first-child { width:4em; }

ul.o_label3 li > *:first-child { width:6em; }

ul.o_label4 li > *:first-child { width:8em; }

ul.o_label5 li > *:first-child { width:10em; }



ul.o_label1 li > *:last-child { margin-left:2em; }

ul.o_label2 li > *:last-child { margin-left:4em; }

ul.o_label3 li > *:last-child { margin-left:6em; }

ul.o_label4 li > *:last-child { margin-left:8em; }

ul.o_label5 li > *:last-child { margin-left:10em; }





/* ------------------------------

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; }











/* ------------------------------

Hover-Zoom

------------------------------ */

.o_hover_zoom { display:block; position:relative; overflow:hidden; width:100%; }

.o_hover_zoom > img { display:block; width:100%; height:auto; }







/* ------------------------------

Toggle

------------------------------ */

.o_toggle {  }

.o_toggle_more { display:none; }

.o_toggle_open {  }





/* ------------------------------

Accordion

------------------------------ */

#o_accordion aside { display:none; }

#o_accordion aside.o_open { display:block; }







/* ------------------------------

Box Sizing

------------------------------ */

[class*="o_framework"],

.o_footer,

[class*="o_section"],

article[class*="o_article"],

.o_row,

.o_unit,

[class*="o_split"],

[class*="o_col"],

[class*="o_space"],

ol[class*="o_list"] li,

ul[class*="o_list"] li,

[class*="o_listcols"],

[class*="o_listimg"] >* *,

ul[class*="o_label"] li > *:first-child,

ul[class*="o_label"] li > *:last-child,

.o_hover_info,

.o_hover_zoom

{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing: border-box; box-sizing:border-box; }









/* ------------------------------

Clearfix

------------------------------ */

[class*="o_section"],

article[class*="o_article"],

.o_row,

.o_unit,

[class*="o_space"],

[class*="o_listcols"],

[class*="o_listimg"],

ul[class*="o_label"] li

{ zoom:1; }



[class*="o_section"]:before,

article[class*="o_article"]:before,

.o_row:before,

.o_unit:before,

[class*="o_space"]:before,

[class*="o_listcols"]:before,

[class*="o_listimg"]:before,

ul[class*="o_label"] li:before

{ display:table; content:""; }



[class*="o_section"]:after,

article[class*="o_article"]:after,

.o_row:after,

.o_unit:after,

[class*="o_space"]:after,

[class*="o_listcols"]:after,

[class*="o_listimg"]:after,

ul[class*="o_label"] li:after

{ display:table; clear:both; content:""; }







/* ------------------------------

Transition

------------------------------ */

/* All */

.o_hover_info, .o_hover_info:hover,

.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; }





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





}







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

	

/* ------------------------------

Anzeige in verschiedenen Media Queries

------------------------------ */

.o_mq_show1 { display:block!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:13px; }



/* ------------------------------

Anzeige in verschiedenen Media Queries

------------------------------ */

.o_mq_show2 { display:block!important; }

}







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



body { font-size:14px; }

	

/* ------------------------------

Anzeige in verschiedenen Media Queries

------------------------------ */

.o_mq_show3 { display:block!important; }



}







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



body { font-size:15px; }



/* ------------------------------

Seitenbereich

------------------------------ */

[class*="o_section"] { display:block; position:relative; margin:0 auto; width:80%; max-width:1220px; min-width:960px; }



/* ------------------------------

Anzeige in verschiedenen Media Queries

------------------------------ */

.o_mq_show4 { display:block!important; }



}







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

	

/* ------------------------------

Anzeige in verschiedenen Media Queries

------------------------------ */

.o_mq_show5 { display:block!important; }



}







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



body { font-size:18px; }

	

/* ------------------------------

Anzeige in verschiedenen Media Queries

------------------------------ */

.o_mq_show6 { display:block!important; }



}