/*
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;
	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: flex;
	flex-direction: column;  
}   
#margin50_12,
#margin75 {
	width: 100%;
}
#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 {order: 0;}
.pos2 {order: 1;}
.pos3 {order: 2;}
.pos4 {order: 3;}
.pos5 {order: 4;}
.pos6 {order: 5;}
.pos7 {order: 6;}
.pos8 {order: 7;}
.pos9 {order: 8;}
.pos10 {order: 9;}
.pos11 {order: 10;}
.pos12 {order: 11;}
.pos13 {order: 12;}
.pos14 {order: 13;}
.pos15 {order: 14;}
.pos16 {order: 15;}
.pos17 {order: 16;}
.pos18 {order: 17;}
.pos19 {order: 18;}
.pos20 {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: var(--main-color);
    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   {
		flex-direction: row;
		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   {
		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;
	}
}