/* oekonews-Farben:
#F8EACF !important; --> Selbe Farbe wie die Ueberschriften in der Seitennavigation 
#4f6057 !important; -->
#eef6fc hellblau - button-farbe, wenn keine Farbe (weiß) gesetzt
*/

/*********************/
/* BEGINN Hauptmenu: */
/*********************/
.navbar-nav, .navbar-brand, .navbar-header, .navbar-fixed-top, .navbar, .navbar-default, .navbar-nav>li>a, .navbar-default .navbar-nav>li>a {  /* ul rausgenommen */
	/*background: #e8be63 !important;  orange*/
	/*background: #F8EACF !important;*/
	/*color: #4f6057 !important;*/
	color: #677e6c !important;	/* oekonews-dunkelgruen */
}

.navbar-nav>li>a:hover, .navbar-nav>li>a:active, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:active {
	color: #000000 !important;
}


ul > .dropdown-menu > li > a:hover {
	color:#000000 !important; /* funkt nicht */
}


/* Haupmenu-Punkte vertikal mittig am Logo orientieren */
@media screen and (min-width: 1001px) {
.navbar-nav>li>a {
	margin-top:10px !important;
	padding-bottom:0 !important;
	margin-bottom: 0 !important;
}
}
@media screen and (max-width: 1000px) and (min-width:768px) {
.navbar-nav>li>a {
	margin-top:14px !important;
	padding-bottom:0 !important;
	margin-bottom: 0 !important;
}
}
/* / ENDE Haupmenu-Punkte vertikal mittig am Logo orientieren */

.navbar-nav, .navbar-brand, .navbar-header, .navbar-fixed-top, .navbar, .navbar-default, .navbar-nav>li>a, .navbar-default .navbar-nav>li>a, .sidebar-offcanvas > h2, .sr-only, .offcanvas {  
	background: #FFFFFF !important;
}
.input-group-addon {
	background: #FFFFFF;
}
.btn-default:hover, .list-group-item:hover, button.form-control:hover, .breadcrumb {
	color: #333333;
	font-weight: normal;
	background-color: #eef6fc !important;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:active {
	background-color: #eef6fc !important;
}

.navbar, .navbar-brand {
	padding:0 !important;
	font-size: 18px !important;
	/*border:0 !important;*/
	margin:0 !important;
	top:0 !important;
	/*background-image: url("/php_prd/neu2016/grafik/navbar-bg.png") !important;*/
	/*background-image: url("/php_prd/neu2016/grafik/hintergrund-gesamt.png") !important;*/
	font-size: 16px !important;
}

.navbar-toggle { /* Das ist das Burger-Menue-Laberl, das im mobile-Modus angezeigt wird. */
	background: #558078 !important; /* Selbe Farbe wie die Hauptmenü-Punkte */
}

.navbar-toggle:hover { /* Das ist das Menue-Laberl beim drüber-hovern, das im mobile-Modus angezeigt wird. */
	background-color: #000000 !important; /* Selbe Farbe wie die Ueberschriften in der Seitennavigation */
}

.dropdown-menu > li > a {
	font-size: 16px !important;
}
/********************/
/* / ENDE Hauptmenu */
/*********************/


/**************************************/
/* Videos responsive einbinden 		  */
/**************************************/
.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 60px; overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/**************************************/
/* / ENDE Videos responsive einbinden */
/**************************************/


/***********************************************/
/*	Einstellungen fuer Werbungs-Einschaltungen */
/***********************************************/
.gooad {
	border:1px solid grey;
}
.gooad_rechts {
	margin-top:10px;	
	border-radius: 4px !important;
	border: 1px solid #dddddd !important;
}
.advert {
	padding-top: 10px;
	padding-bottom: 10px;
}
/***********************************************/
/*	Einstellungen fuer Werbungs-Einschaltungen */
/***********************************************/


cite, figcaption {
	font-size:9px !important;
	line-height:normal !important;
	vertical align:top !important;
	margin-left: 3px;
}
figcaption {
	padding-left:6px !important;
}
@media print { /* Entfernt die nervigen HREFs im Ausdruck */
	a[href]:after {
		content:none !important;
 	}
	a:after {
    	content:none !important;
	}
}



/*******************************************************************/
/* Beginn Content-Bilder-Formatierung							   */ 
/*******************************************************************/

/* Formatierung fuer die Bilder im Content mit einem Hover-Effekt - via Lightbox */
.example-image-link {
  display: inline-block;
  padding: 2px;
	margin-top 0px;
	margin-right: 0px;
	margin-bottom: 1rem;
	margin-left: 0.5rem;
	background-color: #fff;
	line-height: 0;
	border-radius: 4px;
	transition: background-color 0.5s ease-out; 
}
.example-image-link:hover {
    /*background-color: #4ae;*/
	background-color:#eef6fc;
    transition: none; 
}
/* Bilder im Artikel immer rechts darstellen und Text links */
@media screen and (max-width: 767px) { 
	#contentimages  {
		font-style:italic;
		padding-bottom:10px;
		padding-right:0px;
		border-radius: 4px;
		margin-left:0;
	}
	.contentimage { /* Das 1. Startbild des Contents */ 
		height:auto;
		margin-left:0;
	}
}
@media screen and (min-width: 768px) { 
	#contentimages  {
		float:right;
		font-style:italic;
		padding-left:10px;
		padding-bottom:10px;
		width:260px;
		border-radius: 4px;
		padding-right: 0px;
	}
	.contentimage { /* Das 1. Startbild des Contents */ 
		width:220px;
		height:auto;
	}
}



/*******************************************************************/
/* / ENDE Content-Bilder-Formatierung 							   */ 
/*******************************************************************/



.contentbox > article {
	font-size: 18px;
}

/****************************************************/
/* ******* Newsletter-Anmelde-Formular **************/
/****************************************************/
.input-group {
	border: 1px solid #dddddd !important;
	border-radius: 4px !important;
	box-shadow: 0px !important;
}
.atzeichen, .form-control {
	border: 0 !important;
	box-shadow: 0px !important;
}
.mailadresse, .go-button {
	border-top: 0 !important;
	border-bottom: 0 !important;
	border-right: 0 !important;
	border-left: 1px solid #dddddd !important;
	-webkit-box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1);
	-moz-box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1);
	box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1);
}
/****************************************************/
/* ******* /ENDE Newsletter-Anmelde-Formular ********/
/****************************************************/


/*
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/
*/

/* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
  display: none;
}

/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}


a {
	color: 0;
}
body {
	color: 0;
	/*background-image: url("http://oekonews.at/php_prd/neu2016/grafik/Hintergrundbild.jpg");*/
}

/****************************************************************/
/* Klassen der rechten Sidebar, die bei XS ans Ende rutscht 	*/
/****************************************************************/
.list-group, .list-group-item, .sidebar-offcanvas { /* rechte Artikelliste */
	background: #FFFFFF;
	font-weight: normal !important;

	/*min-width: 250px; würde zwar ausreichen, steht aber dann auch weggeklappt drüber*/ 
}

.sidebar-offcanvas {
	/*max-width: 250px !important;*/
}
.list-group, .sidebar-offcanvas, .sidebar { /* geplant ist, dass nach den Links kein Abstand ist, funkt aber nicht ... */
	padding: 0;
	border: 0; 
}

.sidebar-offcanvas > h2 {
	padding-top: 13px; 
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 13px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px;
	border-bottom-color: #000000;
	border-bottom-style: solid;
}
/****************************************************************/
/* / ENDE Klassen der rechten Sidebar, die bei XS ans Ende rutscht 	*/
/****************************************************************/



/**************************************************************************************/
/* oekonews-Logo und Hauptmenue-Punkte den verschiedenen Aufloesungen anpassen ********/ 
/**************************************************************************************/
@media screen and (max-width: 1000px) {
	.navbar-brand > img {
		width:200px;
		padding-bottom:0 !important;
		padding-right:0 !important;
		padding-left:0 !important;
		padding-top:17px !important;
		border:0 !important;
		margin:0 !important;
		top:0 !important;
	}
}
/**************************************************************************************/
/* oekonews-Logo und Hauptmenue-Punkte den verschiedenen Aufloesungen anpassen ********/ 
/**************************************************************************************/


/****************************************************************/
/* Beginn JOERG-Topimg-Klassen 									*/
/****************************************************************/

.topimg img {
 width:100%;
 height: auto;
 margin: auto;
 display:inline-block;

 position: relative;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}

.topimg {
 overflow:hidden;
 display: block;
 width: 100%;
 /*background-color: #eef6fc;*/
 background-color: #FFFFFF;
 position: relative;
 text-align:center;
 border:1px solid black;
}

@media (max-width:767px) {
 .topimg {
   width: 100%;
   height: 192px;
 border:0;
 }
 .topimg img {
   max-width:320px;
 }

}

@media (min-width: 768px) {
 .topimg {

   width: 220px;
   height: 192px;
 }

}

@media (min-width: 992px) {
 .topimg {
   width: 100%;
   height: 192px;
 }
}
/****************************************************************/
/* / ENDE JOERG-Topimg-Klassen 									*/
/****************************************************************/



/******************************************/
/****** Beginn Uebersichts-Artikel ********/
/******************************************/
.uebersicht > h2, .uebersicht > h2 > a, .uebersicht > h2 > a:hover, .uebersicht > h2 > a:visited, h2 { /* Uebersichtsartikel */
	color:#000000 !important;
	text-decoration: none !important;
	font-size: 18px !important;
	font-weight: bold !important;
	line-height: normal !important;
}
.uebersicht > p {
	line-height: normal !important;	
	color:#000000 !important;
}
.toplink, .toplink:hover, .toplink:visited {
	color:#000000 !important;
	text-decoration: none !important;
	font-size: 18px !important;
}
@media (min-width: 768px) {
	.uebersicht {
		height: 450px;
	}
}

/******************************************/
/****** / ENDE Uebersichts-Artikel ********/
/******************************************/

.sidebar-offcanvas > h2 { /* rechter Seitenbalken - Oekotermine usw. */
	font-size: 20px;
}
.jumbotron > .datum {
	font-size: 15px;
}
.contentbox > article > h1, header > h1, .contentbox > article > header > .media > .media-body > h1 {
	font-size: 20px;
	font-weight: bold;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.contentbox > article > h2 {
	font-weight: bold;
	font-size: 18px;
}
.contentbox > article > p {
	font-size: 18px;
}
.contentbox > article > ul, .contentbox > article > ul > li {
	background: #FFFFFF;
	padding-bottom:5px;
}



/* ############################################################
 * ############################################################

  Off Canvas-Styles via bootstrap

 * ############################################################
 * ############################################################
 */
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Style tweaks
 * --------------------------------------------------
 */
html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

@media screen and (max-width: 767px) { /* Luk: body-padding nun abhaengieg von der bildschirmgroeße - aufgrund des logos */
	body {
  		padding-top: 50px;
	}
}
@media screen and (min-width: 768px) { /* Luk: body-padding nun abhaengieg von der bildschirmgroeße - aufgrund des logos */
	body {
  		padding-top: 70px;
	}
}

/***********************************************/
/***************** Beginn Footer ***************/
/***********************************************/

footer, footer form {
	padding-right: 30px !important;
	padding-left: 0px !important;
	border: 0 !important;
	margin: 0 !important;
}

@media screen and (min-width: 768px) {
ul.box {
     position: relative !important;
     float: left !important;
     left: 50% !important;
     margin: 0 auto !important;
     padding: 0 !important;
}
 
li.box {
     position: relative !important;
     float: left !important;
     right: 50% !important;
     padding: 5px 20px 5px 10px !important;
     background: #fff !important;
     list-style: none !important;
	border-left: 1px solid black;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
}
}

footer > div > ul > li > a, footer > div > ul > li > a:visited, footer > div > ul > li > a:hover {
	color:black !important;
	text-decoration: none;
}
footer > div > ul > li:hover {
	background: #eef6fc !important;
	/*border: 1px solid black !important;*/
}
/*footer > div > ul > li:hover {
	background:#333333;
}*/
@media screen and (max-width: 767px) {
ul.box {
     position: relative !important;
     float: left !important;
     left: 50% !important;
     margin: 0 auto !important;
     padding: 0 !important;
}
 
li.box {
     position: relative !important;
     float: left !important;
     right: 50% !important;
     margin-right: 10px !important;
     padding: 5px 10px !important;
     background: #fff !important;
     list-style: none !important;
}


}
footer > p {
	align:center !important;
    clear: both;
}
/***********************************************/
/***************** / ENDE Footer ***************/
/***********************************************/