/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 19.05.2014, 16:55:26
    Author     : liebsche
*/

#marginal {
   margin: 0.75rem 0 0 2.04081632%;   
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-align-content: flex-start;
   -ms-flex-line-pack: start;
   align-content: flex-start;    
   }

.margin75 {
   width:23.4693877%;
   }
.margin50 {
   width:50%;
   }

#margin50,
#margin50_12,
#margin50_1,
#margin50_2,
#margin75   {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;  
   }   
#margin50_12,
#margin75 {
   width: 100%;
   /*flex: 1 0 auto;*/
}
#margin50_1,
#margin50_2 {
   width: 48%;
}
#margin50_2 {
   margin: 0 0 0 4%;
   }

.marginalbox {
   margin-bottom: 1.4em;   
   margin-bottom: 1rem;   
}
.marginalbox p,
.marginalbox p a,
.marginalbox div,
.marginalbox span {
   line-height: 1.025rem;
}
.marginalbox p a:before,
.marginalbox p a:hover:before {
   font-size: 0.85rem;
}

.pos1 {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
}
.pos2 {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}
.pos3 {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
}
.pos4 {
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
}
.pos5 {
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
}
.pos6 {
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
}
.pos7 {
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
}
.pos8 {
    -webkit-order: 7;
    -ms-flex-order: 7;
    order: 7;
}
.pos9 {
    -webkit-order: 8;
    -ms-flex-order: 8;
    order: 8;
}
.pos10 {
    -webkit-order: 9;
    -ms-flex-order: 9;
    order: 9;
}
.pos11 {
    -webkit-order: 10;
    -ms-flex-order: 10;
    order: 10;
}
.pos12 {
    -webkit-order: 11;
    -ms-flex-order: 11;
    order: 11;
}
.pos13 {
    -webkit-order: 12;
    -ms-flex-order: 12;
    order: 12;
}
.pos14 {
    -webkit-order: 13;
    -ms-flex-order: 13;
    order: 13;
}
.pos15 {
    -webkit-order: 14;
    -ms-flex-order: 14;
    order: 14;
}
.pos16 {
    -webkit-order: 15;
    -ms-flex-order: 15;
    order: 15;
}
.pos17 {
    -webkit-order: 16;
    -ms-flex-order: 16;
    order: 16;
}
.pos18 {
    -webkit-order: 17;
    -ms-flex-order: 17;
    order: 17;
}
.pos19 {
    -webkit-order: 18;
    -ms-flex-order: 18;
    order: 18;
}
.pos20 {
    -webkit-order: 19;
    -ms-flex-order: 19;
    order: 19;
}



/* Graue Textbox mit Titel (Teil der Klappbox) */ 

.secondary_content_news_box {
   background-color: #E0E2E3;
   display: block;
   overflow: hidden;
   position: relative;
   text-align: left;
   width: 100%;
   border-radius: 0.3rem;  
}
.secondary_content_news_box .newbox-title {
   background-color: #E0E2E3;
   display: block;
   font-weight: bold;
   line-height: 1.1em;
   line-height: 1.1rem;
   padding: 0.3em  0.75em;
   padding: 0.3rem 0.75rem;
   text-decoration: none;
}
.secondary_content_news_box .newbox {
   background-color: #F4F4F4;
   padding: 0.8em 0.8em 0.9em 0.8em;
   padding: 0.75rem 0.75rem 0.75rem 0.75rem;
   overflow:hidden;
}

/* Bildbox */ 

.secondary_content_ad_box {
   display: block;
   height: auto;
   border: #ccc solid 1px;
   border-radius: 0.3rem;  
   overflow:hidden;
}
.secondary_content_ad_box img {
   display: block;
   width: 100%; 
   height: auto;
}

/* Bild-Text-Box mit grauem Rahmen */

/*.secondary_content_img_txt_box_g {
   display: block;
   float: left;
   height: auto;
   margin-top: 1.25em;
   margin-top: 1rem;
   width: 100%; 
   border: #E0E2E3 solid 1px;
   border-radius: 0.3rem;  
   border-top-left-radius: 0.2rem;  
   border-top-right-radius: 0.2rem;
   overflow:hidden;
}
.secondary_content_img_txt_box_g_img img {
   display: block;
   width: 100%; 
   height: auto;
}
.secondary_content_img_txt_box_g_txt {
   background-color: #7A003F;
    color: #FFFFFF;
    font-size: 0.6875rem;
    line-height: 0.875rem;
    text-align: left;
    font-weight: bold;
    margin: 0;
    padding: 0.8em 0.8em 0.9em 0.8em;
    padding: 0.45rem 0.45rem 0.3rem 0.75rem;
}
.secondary_content_img_txt_box_g_txt p,
.secondary_content_img_txt_box_g_txt b,
.secondary_content_img_txt_box_g_txt strong,
.secondary_content_img_txt_box_g_txt a
{
   color: white;
}
.secondary_content_img_txt_box_g_txt a:hover {
   border-bottom: 1px dotted white;
}
.secondary_content_img_txt_box_g_txt a:before {
   content: url("../pics/link_weiss.gif");
   color: white;
	width: 0.55rem;
	height: 0.8rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 0.75rem;
	line-height: 0.9rem;
   padding-right: 0.15rem;
}*/


/*   Einstellungen für Bildschirmauflösung unter 850 Pixel  - z.B. Tablets mit HD-Auflösung im Hochformat  */ 

/*@media screen and ( max-width: 950px ) {
}*/


/*   Einstellungen für Bildschirmauflösung unter 800 Pixel  - z.B. Smartphones im Querformat  */ 

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

#marginal {
   margin: 0.5rem 0 0 2.739726%;   
}
.margin75,
.margin50 {
   width: 31.52%;
}

#margin75,
#margin50_1,
#margin50_2 {
   width:100%;
}

#margin50_2 {
   margin: 0;   
}  
   
}



/*   Einstellungen für Bildschirmauflösung unter 550 Pixel  - z.B. Smartphones im Hochformat  */ 

@media screen and ( max-width: 550px ) {

#marginal {
   margin: 1.4em 0 0 0;   
   margin: 0.75rem 0 0 0;   
   }   

.margin75,
.margin50 {
   width:100%;
   }
   
#margin50_1,
#margin50_2 {
   width: 48%;
}
#margin50_2 {
   margin: 0 0 0 4%;
   }

#margin75   {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   margin: 0 0 0 -4%;   
   width: 104%;
   }   

#margin75 .marginalbox {
   width: 46%;
   margin: 0 0 1.4em 4%;   
   margin: 0 0 1rem 4%;   
   }
/* #margin75 .odd:last-of-type {
   width: 100%;
} '/'

/*div#margin75 {
   counter-reset: marginalbox_zaehler;
   }   
div#margin75 div.marginalbox:before {
   counter-increment: marginalbox_zaehler;
   content: "Nummer:" counter(marginalbox_zaehler);
   color: red;
   }*/

}



@media screen and ( max-width: 350px ) {

#margin75   {
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;  
   margin: 0;   
   }   

#margin75 .marginalbox {
   width: 100%;
   margin: 0 0 1.4em 0;   
   margin: 0 0 1rem 0;   
   }
   
#margin50_1,
#margin50_2 {
   width: 100%;   
   margin: 0;   
}

}