/**
 * @author      Jan Linke
 * @package     Joomla!
 * @subpackage  Initiative Region Mittelrhein e. V.
 * @link        http://www.colimo.de
 * @email       info@colimo.de
 * @copyright   Jan Linke
 *
 * HTML5 Initiative Region Mittelrhein e. V.
 * Copyright (C) 2015 Jan Linke
 *
**/

/* Background pattern from subtlepatterns.com */

/*Block-Darstellung für HTML5-Elemente im IE8 */

*{
  font-family: tahoma, Arial, Helvetica, sans-serif;
}

header,
nav,
footer{
  display: block;
}

p{
  padding: 5px 0px;
  margin: 5px 0px;
  word-wrap: break-word;
}

img{
  max-width: 100%;
  height: auto;
  align: center;
}

body{
  background-image: url(../images/pink_rice.png);
  background-repeat: both;
}

#wrapper{
  max-width: 960px;
  min-width: 265px;
  margin: 0px auto;
  margin-top: -8px;
  box-shadow: 10px 20px 30px grey;
  background-color: #FAFAFA;
}

h2{
  color: #555e6d;
  padding-top: 10px;
  margin: 15px;
}

h6{
  color: #555e6d;
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 5px;
}


hr{
  border:none;
  border-top:1px dotted #555e6d;
  height:1px;
  width:95%;
}

#topMenuModul{
width: 100px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#top-menu ul{
  width: 35%;
  list-style: none;
  float: right;
}

#top-menu li a{
  text-decoration: none;
  color: #EEEEEE;
  float: left;
  margin: 5px;
  transition: 0.2s;
}

#top-menu li a:hover{
  text-decoration: none;
  color: #EFEFEF;
  float: left;
  color: black;
}

header{
  width: 100%;
}

#searchbar{
  margin-top: 5px;
  float: right;
  margin-right: 5px;
}

#searchbar #mod-search-searchword{
  width: 100%;
  margin-top:10px;
  margin-bottom:10px;
  height:20px;
  background-color: #e6e6e6;
  border: 1px solid #63a573;
}

#slideshow{
  width: 100%;
  background-color: #FAFAFA;
}

.moduletable{
  list-style: none;
}

ul.nav.menu.mod-list{
  text-align: center;
  list-style: none;
  padding: 7px 0 7px 0;
}

ul.nav.menu.mod-list li{
  display: inline
}

ul.nav.menu.mod-list li a{
  color: white;
  text-align: center;
  margin:0 5px 0 5px;
}

ul.nav.menu.mod-list li a:hover{
  color: black;
}

.item{
    border: 1px solid black;
    border-radius: 5px;
    margin-bottom: 15px;
    margin-top: 10px;
}

.pd-ctitle, .pdtop{
    display: none;
}

.level1{
    background: #898989;
}

div#maximenuck92 ul.maximenuck li.maximenuck.level1:hover, div#maximenuck92 ul.maximenuck li.maximenuck.level1.active, div#maximenuck92 ul.maximenuck li.maximenuck.level1.clickedck{
    background: #767676;
    border-bottom: none;
}

div#maximenuck92 div.floatck{
  background-color: #898989;
  width: 200px;
}

div#maximenuck92 ul.maximenuck li ul.maximenuck2 li.maximenuck, div#maximenuck92 ul.maximenuck2 li.maximenuck{
  margin: 0px;
  text-align: center;
  width: 200px;
}

div#maximenuck92 ul.maximenuck{
    border-top: 2px solid #63a573;
    border-bottom: 2px solid #63a573;
}

div#maximenuck92 ul.maximenuck li.maximenuck a, div#maximenuck92 ul.maximenuck li.maximenuck span.separator, div#maximenuck92 ul.maximenuck2 a, div#maximenuck92 ul.maximenuck2 li.maximenuck span.separator{
  color: white;
}

div#maximenuck92 ul.maximenuck2 li.parent > a:after, div#maximenuck92 ul.maximenuck2 li.parent > span:after {
  border-left: 5px solid lightgray;
}

div#maximenuck92 ul.maximenuck li.maximenuck div.floatck div.floatck {
  margin: -45px 0px 0px 200px;
}

div#maximenuck92 ul.maximenuck{
    background: #898989;
}
div#maximenuck92 ul.maximenuck li.maximenuck.level1{
  	border-bottom: none;
}

div#maximenuck91 ul.maximenuck li.maximenuck div.floatck div.floatck{
  margin: -45px 0 0 200px;
  color: white;
}

div#maximenuck92 ul.maximenuck li.maximenuck ul.maximenuck2 li.maximenuck li:hover > a, div#maximenuck92 ul.maximenuck2 li.maximenuck li.maximenuck:hover > a, div#maximenuck92 ul.maximenuck2 li.maximenuck li.maximenuck:hover > span.separator, div#maximenuck92 ul.maximenuck2 ul.maximenuck2:hover > a, div#maximenuck92 ul.maximenuck2 ul.maximenuck2 li.maximenuck:hover > span.separator, div#maximenuck92 ul.maximenuck li ul.maximenuck2 li.maximenuck li.maximenuck.openck > a, div#maximenuck92 ul.maximenuck li ul.maximenuck2 li.maximenuck li.maximenuck.clickedck > a {
  color: black;
  background-color: lightgray;
}



#logoBanner{
  background-image: url(../images/texture.png);
  background-repeat: both;
}


.titreck{
  font-size: 13px;
}

#contentWrapper{
    background-color: #FAFAFA;
}

#content{
  width: 94%;
  min-height: 520px;
  background-color: #FAFAFA;
  color: #454545;
  /*background-image: url(../images/contentBackground.png);
  background-repeat: no-repeat;*/
  padding: 3%;
}

#content a{
  text-decoration: none;
}

#contentTopModul{
    border-bottom: 2px solid #555e6d;
}

nav{
  width: 100%;
}

#top-menu{
  width: 100%;
  height: 30px;
  /*background-image: url(../images/verlaufTop.png);
  background-repeat: repeat-y;*/
  background-color: #63a573;
}

.level3 a span{
  color: background: #1d1d1d;
  margin-left: 30px;
}

.level3 a span:hover{
  color: #1d1d1d;
}

.blog img{
  float: left;
  margin: 15px;
  width: 130px;
}

.gridBottomInfo{
  font-size: 10pt;
  padding:20px 20px 20px 20px;
  width: calc(100% - 40px); 
  float: left; 
  min-height: 50px;
}

.slideNumber{
  font-size: 9px;
}



.gridMapContainer{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 210px auto 210px;
  grid-template-columns: 210px auto 210px;
  -ms-grid-row: auto;
  grid-template-rows: auto;
}

.gridTextOne{
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

.gridMapImage{
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}

.gridTextTwo{
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3 / 4;
  text-align: right;
  padding: 20px 20px 20px 0;
}

@media only screen and (max-width: 950px) {
  #wrapper{
    min-width: 635px;
  }  	
  
  	#logoBanner img{
        height: auto;
        width: 600px;
        float: left;
        margin-left: calc(50% - 300px);
    }
  
  #boxInhaltUeberschrift{
    text-align: left;
  }
  
  #boxInhaltText{
    text-align: left;
  }
  
  #searchbar{
    display: none;
  }
  #textBanner{ 
    margin: 39px 5px auto 37%;
    max-width: 250px;
    font-weight: bold;
    text-align: center;
    border-top: 1px solid #63a573;
    border-bottom: 1px solid #63a573;
  }
  #logoBanner{
   /* background-image: url(../images/logoBackground.png);*/
   min-height:135px;
   width: 100%;
   border-top: 1px solid #63a573;
   border-bottom: 1px solid #63a573;
   position: relative;
   float: left;
 }
  #slideshow {
    display: table;
  }

  nav#mobile{
	padding-top: 167px;
  }
  #accordeonck98 li.level1 > .accordeonck_outer a{
    height: 15px;
  }
    nav#desktop{
    display: none;
  }
  #contentSchmal{
    width: 94%;
    min-height: 520px;
    background-color: #FAFAFA;
    color: #454545;
    /*background-image: url(../images/contentBackground.png);
    background-repeat: no-repeat;*/
    margin-top: -10px;
    padding: 3%;
  }
  #sidebar{
    display: none;
  }
  #top-menu{
    display: none;
  }
  
  .gridMapContainer{
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    -ms-grid-rows: auto auto auto auto;
    grid-template-rows: auto auto auto auto;
  }

  .gridTextOne{
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  
 .gridMapImage{
   -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    max-width: 100%;
    height: auto;
    margin-left:calc(50% - 212.5px);
    padding: 0px;
  }

 .gridTextTwo{
   -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-column: 1 / 2;
  	grid-row: 3 / 4;
   	text-align: left;
   	padding: 20px 0 20px 20px;
  }
  @media only screen and (max-width: 640px){
    #wrapper {
    	min-width:479px;  
    }
    
    nav#mobile{
		padding-top: 138px;
  	}
    
    #logoBanner img{
      width: 400px;
      height: auto;
      margin-left: calc(50% - 200px);
      margin-top: 14.5px;
    }
    
    @media only screen and (max-width: 480px){
      #wrapper {
      	min-width: 300px;  
      }
      
      #textBanner{
        display: none;
      }
      #logoBanner img{
        margin: 0;
        width: 300px;
        height: auto;
        margin-left: calc(50% - 150px);
        margin-top: 27.5px;
      }
      
      .gridBottomInfo{
 	 	font-size: 10pt;
        padding:0 0 20px 0;
        width: 100%;
        height: auto;
	  }
      
      .gridMapImage{
        margin: 0;
      }
    }
  }
}

@media only screen and (min-width: 950px) {
    #logoBanner img{
    margin-left: calc(50% - 300px);
    width: auto;
    height: 100%;
    float: left;
}
    #textBanner{
      float: left;
      width: 500px;
      text-align: center;
      margin-top: 55px;
      margin-left: 15%;
      font-size: 150%; 
      font-weight: 200;
      border-top: 1px solid #63a573;
      border-bottom: 1px solid #63a573;
    }
  nav#mobile{
    display: none;
  }
  
  #logoBanner{
   /* background-image: url(../images/logoBackground.png);*/
  height: 164px;
}
  #contentSchmal{
  width: 74%;
  min-height: 520px;
  background-color: #FAFAFA;
  color: #454545;
  /*background-image: url(../images/contentBackground.png);
  background-repeat: no-repeat;*/
  float:left;
  padding: 3%;
}


#sidebar{
  width: 20%;
  min-height: 520px;
  background-color: #FAFAFA;
  color: #454545;
  background-repeat: no-repeat;
  float: left;
  padding-top: 15px;
  /*background-image: url(../images/contentBackground.png);
  background-repeat: no-repeat;*/
}
}

.pagination ul{
 list-style-type: none;

}

.pagination li{
 float: left;

}
.pagenav{
 margin: 10px;

}



.clear{
  clear: both;
}

footer{
  width: 100%;
  min-height: 30px;
  background-color: #63a573;
  background-repeat: repeat-x;
  position: relative;
  display: flex;
  align-items: center;
  list-style: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

footer ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  list-style: none;
  flex-wrap: nowrap;
}

footer ul li {
  margin-right: 15px;
}

footer ul li a {
  text-decoration: none;
  color: white;
}

#accordeonck97{
  border-radius: 0px;
  box-shadow: none;
}