/*
Theme Name: KJG Rauenberg
Theme URI: http://www.kjg-rauenberg.de
Description: This a template only for KJG Rauenberg
Version: 1.0
Author: Peer Becker and Pierre Bartholomä
Author URI: http://www.pierreundpeer.de
Tags: KJG Rauenberg

*/

/* standard resets and definitions */
body{
	margin: 0;
	padding: 0;
	background: url(images/hg.jpg) repeat;
}
.clear{
	clear: both;
}
	
	
#background{
	background: url(images/repeat.jpg) repeat-x;
	padding-bottom: 100px;
	overflow: auto;
	width: 100%;
	min-width: 1000px;
}
#container{
	margin: 0px auto;
	padding-top: 50px;
	width: 960px;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}

*{
	margin: 0;
	padding: 0;
	color: #1b1b1b;
	font-family:"Helvetica", "Trebuchet MS","Arial","sans-serif";
	font-size: 13px;
}
ul, li{
	list-style: none;
}
#content-area p{
	margin-top: 10px;
	margin-bottom: 10px;
}

#background #container #content-area a{
	 color: #318f8e ; 
	 font-size: 13px;
}


#background #container #content-area a:hover{
	background-color: #318f8e; 
	color: #fff;
}

#infobox a{
	color: #faf96d;
	text-decoration: none;
}

a:active
{
outline: none;
}

a:focus
{
-moz-outline-style: none;
}

/* The Header */
#header{
	height: 127px;
	width: 960px;
	display: block;
	position: relative;
}


#header #logo{	
	background: url(images/sprite.png) 0 0 no-repeat;
	width: 399px;
	height: 127px;
	position: absolute;
	z-index: 10;
}

#header #logo:hover{
opacity:0.9;	

}

/* The Menu */
#header ul#menu{
	margin: 0;
	display: block;
	margin-top: 95px;
	margin-left: 255px;
	padding: 0;
	width: 565px;
	height: 32px;
	background: url(images/sprite.png) 0 -128px no-repeat;
	float: right;
	z-index: 9;
	padding-left: 140px;
}

#header ul#menu li{
	list-style: none;
	float: left;
	position: relative;
}
#header ul#menu li a{
	font-size: 13px;
	font-family: "Helvetica","Trebuchet MS","Arial","sans-serif";
	font-weight: bold;
	list-style: none;
	color: #FFF;
	display: block;
	text-align: center;
	text-decoration: none;
	line-height: 32px;
	padding-left: 8px;
	padding-right: 8px;
	-webkit-text-stroke: 1px transparent;
}
#header ul#menu li:hover{
	background-color: #676767;
	color: #FFF;
}
#header ul#menu li#jugendkeller:hover{
	background-color: #33ABEB;
	color: #FFF;
}
#header ul#menu li#kjgrauenberg:hover{
	background-color: #5DAD16;
	color: #FFF;
}

#header ul#menu li#aktionen:hover{
	background-color: #DF5EE7;
	color: #FFF;
}

#header ul#menu li:hover ul{
	display: block;
}
/* The Submenu Start */

ul.submenu {
	display: none;
	color: #FFF;
	font-size: 18pt;
	font-weight: bold;
	font-family: "Helvetica","Trebuchet MS","Arial","sans-serif";
	list-style: none;
	margin: 0;
	position: absolute;
	top:32px;
	width: 300px;
}

#header ul#menu ul.submenu li{
	float: none !important;
	margin-top: 10px;
	padding-left: 101px;
	margin-left: 18px;
	height: 35px;
}

ul.submenu li a{
	text-align: left !important;
}

#header ul#menu #news{
	display: block;
	width: 48px;
}

#header ul#menu #kjgrauenberg{
	display: block;
	width: 120px;
}

#header ul#menu #termine{
	display: block;
	width: 67px;
}

#header ul#menu #aktionen{
	display: block;
	width: 70px;
}

#header ul#menu #jugendkeller{
	display: block;
	width: 96px;
}

#header ul#menu #fotogalerie{
	display: block;
	width: 85px;
}

#jugendkeller ul{
	background: url(images/submenu-bg-blau.png) #33ABEB repeat-x 0 33px;
	left: -126px;
	height: 195px;
	z-index: 9999;
}
#kjgrauenberg ul{
	background: url(images/submenu-bg-gruen.png) repeat-x 0 93px;
	background-color: #5DAD16;
	height: 280px;
	left: -126px;
	z-index: 9999;
}
#aktionen ul{
	background: url(images/submenu-bg-pink.png) repeat-x 0 48px;
	background-color: #DF5EE7;
	height: 235px;
	left: -126px;
	z-index: 9999;
}
#fotogalerie ul.submenu{
	background: url(images/submenu-bg-grau.png) #676767 repeat-x 0 100px;
	width: 85px;
	padding-bottom: 10px;
	z-index: 9999;
	text-align: center;
}
ul#menu li#fotogalerie ul.submenu li{
	line-height: 13px !important;
	height: 13px;
	float: none !important;
	margin-top: 10px;
	padding-left: 0px;
	margin-left: 0px;
	
}
ul#menu li#fotogalerie ul.submenu li a{
	line-height: 13px !important;
	text-align: center !important;
	
}

#header ul#menu ul.submenu li a:hover{
	font-size: 16px !important;

}
#header ul#menu ul.submenu li:hover{
	background-color:transparent !important;
}

ul.submenu .page-item-657{background: url(images/sprite.png) -920px -560px no-repeat;}
ul.submenu .page-item-18{background: url(images/sprite.png) -920px -0px no-repeat;}
ul.submenu .page-item-20{background: url(images/sprite.png) -920px -40px no-repeat;}
ul.submenu .page-item-23{background: url(images/sprite.png) -920px -80px no-repeat;}
ul.submenu .page-item-25{background: url(images/sprite.png) -920px -120px no-repeat;}
ul.submenu .page-item-27{background: url(images/sprite.png) -920px -160px no-repeat;}
ul.submenu .page-item-35{background: url(images/sprite.png) -920px -200px no-repeat;}
ul.submenu .page-item-37{background: url(images/sprite.png) -920px -240px no-repeat;}
ul.submenu .page-item-40{background: url(images/sprite.png) -920px -280px no-repeat;}
ul.submenu .page-item-42{background: url(images/sprite.png) -920px -320px no-repeat;}
ul.submenu .page-item-44{background: url(images/sprite.png) -920px -360px no-repeat;}
ul.submenu .page-item-48{background: url(images/sprite.png) -920px -400px no-repeat;}
ul.submenu .page-item-50{background: url(images/sprite.png) -920px -440px no-repeat;}
ul.submenu .page-item-52{background: url(images/sprite.png) -920px -480px no-repeat;}
ul.submenu .page-item-54{background: url(images/sprite.png) -920px -520px no-repeat;}


/* The Bilder Header */

#bilder-header{
	display: block;
	width: 960px;
	margin-top: 40px;
	height: 320px;
	background: url(images/infobox-bg.png);
}
#bilder-header-text{
	float: left;
	height: 70px;
	width: 320px;
	font-family: "Helvetica", "Trebuchet MS", "Arial","sans-serif";
	font-weight: bold;
	color: #434343;
	font-size: 18pt;
	padding-left: 20px;
	padding-top: 250px;
}
#bilder-header-bild{
	float: right;
	width: 620px;
	height: 320px;
	display: block;
	background: url(images/bilder-header-palceholder.jpg) no-repeat;
}

/* The Content Itself */

#content-wrapper{
	margin-top:40px;
	width: 960px;	
	display: block;
	overflow: auto;
	width: 100%
}


/* The Infobox */
#infobox{
	width: 300px;
	display: block;
	float: left;
	margin-right: 40px;
}
#infobox .head{
	width: 300px;
	height: 65px;
	background: url(images/sprite.png) -135px -254px no-repeat;
	display: block;
}

#infobox .kalender{
	width: 300px;
	height: 65px;
	background: url(images/sprite.png) -436px -254px  no-repeat;
	display: block;
}

#infobox .legende{
	width: 300px;
	height: 65px;
	background: url(images/sprite.png) -178px -592px  no-repeat;
	display: block;
}

#infobox .content{
	width: auto;
	overflow: auto;
	background: url(images/infobox-bg.png);
	display: block;
	font-size:11px;
	line-height: 17px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
}
#infobox .foot{
	width: 300px;
	height: 20px;
	background: url(images/sprite.png) 0 -182px no-repeat;
	display: block;
}
/* The Content Area */
#content-area{
	float: right;
	width: 620px;
	min-height: 400px;
	line-height: 19px;
}

#content-area.nosidebar{
	width: 960px !important;
}


/* The Footer */
#footer{
	position: relative;
	width: 960px;
	height: 255px;
	display: block;
	background: url(images/sprite.png) 0 -682px no-repeat;
	padding: 75px 20px 15px 20px;
	margin-top: 50px;
}
#footer p{
	margin-bottom: 15px;
}

#footer #impressum{
	display: block;
	position: relative;
	width: 113px;
	height: 39px;
	background: url(images/sprite.png) -135px -205px no-repeat;
	position: absolute;
	top:336px;
	left: 424px;
}

.footer-spalte{
	width: 280px;
	display: block;
	float: left;
	color: #cbd79f;
	font-size: 8.25pt;
	padding-left: 10px;
	padding-right: 10px;
}
.footer-spalte p{
	color: #cbd79f;
}

.footer-spalte a{
	color: #faf96d;
	text-decoration: none;
}
.bookmarks li{
	margin-bottom: 7px;
}

/*The Page*/
.page{
	font-size: 13px;
}
/* The Post */

.post{
	font-size: 13px;
	font-family: "Helvetica","Trebuchet MS","Arial","sans-serif";
	position: relative;
	color: #1b1b1b;
	padding-top: 70px;
	line-height: 19px;
	margin-bottom: 40px;
}
.post .postheader{
	position: absolute;
	top:0;
	left: 0;
	right: 0;
}

#background #container #content-area .post .postheader h2 a,#background #container #content-area .post .postheader h2 a:link, #background #container #content-area .post .postheader h2 a:active, #background #container #content-area .post .postheader h2 a:hover,
#background #container #content-area h3
{
	
	line-height: 34px;
	color: #009ee0;
	text-decoration: none;
	font-weight: bold;
	font-size: 16px;
	background: none;
}

h4 {
	line-height: 20px;
	color: #009ee0;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	margin-top: 50px;
	margin-bottom: 10px;
}

.post .postheader .comments{
	
	width: 44px;
	height: 34px;
	background: url(images/sprite.png) 0 -205px no-repeat;
	position: absolute;
	right: 0;
	top:0;
	text-align: center;
	overflow:hidden;
	font-size: 8.25pt;
	line-height: 34px;
}
#background #container #content-area .post .postheader .comments a{
	text-decoration: none;
	color: #009ee0;
}
.post .postheader .sperator{
	width: 620px;
	height: 1px;
	display: block;
	background: url(images/sprite.png) 0 -203px no-repeat;

}
#content-area .post .postheader p{
	margin: 0;
}

.post .postheader .date{
	font-size: 11px;
	font-family: "Helvetica","Trebuchet MS","Arial","sans-serif";
	font-weight: bold;
	font-style: italic;
	color: #818181;
	line-height: 40px;
}

#content-area .post a.more-link{
	line-height: 40px;
	color: #d943e8;
	font-size: 13px;
	text-decoration: none;
}
#content-area .post a.more-link:hover{
	background: none;
}

.post td {
	padding: 0 10px 10px 0px;
}


/* The Slideshow Start */

#slideshow{
	display: block;
	height: 250px;
	width: 810px;
	margin: 0 auto;
	position: relative;
	text-align: center;
	margin-top: 40px;

}

#slideshow #wrapper{
	width: 640px;
	height:250px;
	overflow: hidden;
	margin:0 auto;
}
#slideshow #wrapper ul{
	overflow: auto;
	width: auto;
	display: block;
}

#slider-left-arrow{
	display: block;
	width: 44px;
	height: 134px;
	background: url(images/sprite.png) -45px -205px no-repeat;
	top:62px;
	position: absolute;
	cursor: pointer;
}

#slider-right-arrow{
	display: block;
	width: 44px;
	height: 134px;
	background: url(images/sprite.png) -90px -205px no-repeat;
	position: absolute;
	top:62px;
	right:0px;
	cursor: pointer;
}


.slide{
	position: relative;
	display: block;
	height:250px;
	width: 640px;
	float: left;
	overflow: hidden;
}

.slide .title{
	position: absolute;
	left: 30px;
	top: 30px;
	font-size: 21pt;
	font-weight: bold;
	font-family: "Helvetica","Trebuchet MS","Arial","sans-serif";
	color: #FFF;
	line-height: 22.5pt;
}
.slide a.subtitle{
	position: absolute;
	font-weight: bold;
	left: 30px;
	top: 60px;
	font-size: 15pt;
	color: #faf96d;
	font-family: "Helvetica","Trebuchet MS","Arial","sans-serif";
	line-height: 22.5pt;
	text-decoration: none;
}
.slide .overlay{
	position: absolute;
	top:0;
	left: 0;
	width: 640px;
	height:250px;
	background: url(images/sprite.png) 0 -340px no-repeat;
}

/* The Slideshow End */

/* The Calendar Start*/
.calendar-table{
  border-spacing: 0px;
}
#background #container #content-area .calendar-table a{
	 background-color: transparent; 
}
#background #container #content-area .calendar-table a:hover{
	 background-color: transparent; 
}
.calendar-table td{
	width: 88px;
	height: 90px;
	background: url(images/sprite.png) -0px -591px no-repeat;
	border: none;
	vertical-align: bottom;
}
.calendar-table td:hover{
	background: url(images/sprite.png) -89px -591px no-repeat;
}
.calendar-table  .day-heading, .calendar-table  .day-heading:hover{
	font-size: 8.25pt;
	font-family: "Helvetica","Trebuchet MS","Arial","sans-serif";
	background: none;
	height: 30px;
	line-height: 20px;
	text-align: center;
}

.calendar-table td .daybox{
	position: relative;
	width: 88px;
	height: 90px;
}


.calendar-table td .day{
	font-size: 10.5pt;
	font-family: "Helvetica","Trebuchet MS","Arial","sans-serif";
	position: absolute;
	top: 9px;
	right: 9px;
}
.calendar-table td .events{
	position: absolute;
	bottom: 8px;
	left: 8px;
}
.calendar-table td .events a{
	width: 25px;
	height:26px;
	display: block;
	float: left;
	margin: 1px;
}

.Leiterrunde{
	background: url(images/sprite.png) -441px -205px no-repeat;
}
.Leitungsteam{
	background: url(images/sprite.png) -415px -205px no-repeat;
}
.Jugendkellerbetrieb{
	background: url(images/sprite.png) -389px -205px no-repeat;
}
.Veranstaltung{
	background: url(images/sprite.png) -363px -205px no-repeat;
}

.calendar-legend-icon{
	margin-right: 10px;
	margin-top: 3px;
	width: 25px;
	height:26px;
	display: block;
	float: left;
}
.calendar-legend-text{
	float: left;
	width: 225px;
	margin-bottom: 10px;
}

.calendar-heading{
	text-align: center;
	vertical-align: middle;
	background: none !important;
	height: 40px !important;	 
}

.calendar-heading table{
	width: 160px !important;
	margin: 0 auto;
}

.calendar-heading a{
	text-decoration: none;
	color: #1b1b1b;
}

.calendar-heading td{
	background: none !important;
	height: 40px;
}


/* MINI CALENDAR */

#infobox .content .calendar-table {
	width: 170px;
	margin: 0 auto;
	margin-bottom: 10px;
}
#infobox .content .calendar-table .daybox{
	background: url(images/sprite.png) -249px  -205px  no-repeat;
	width: 20px;
	height: 15px;
	text-align: center;
	margin-right: 3px;
	margin-left: 3px;
	margin-bottom: 5px;
}

#infobox .content .calendar-table  .no-events .daybox{
	background:none;
}
#infobox .content .calendar-table td {
	width: 20px;
	height: 15px;
	background:none;
	font-size: 10px;
	text-align: center;
}

#infobox .content .calendar-table .daybox .events{
	display: none;
}
#infobox .content .calendar-table .daybox .day{
	position: static;
	font-size: 10px;
	font-family:"Helvetica","Trebuchet MS","Arial","sans-serif";
}
#infobox .content .calendar-table .daybox a{
	text-decoration: none;
}
#infobox .content .calendar-table 	a:hover .day{
	text-decoration: none;
	color: #fff;
}

#infobox .content .calendar-table .day-heading{
	font-weight: bold;
	font-family:"Helvetica","Trebuchet MS","Arial","sans-serif";
	font-size: 11px;
}
#infobox .content .calendar-table .calendar-month{
	font-weight: bold;
	font-family:"Helvetica","Trebuchet MS","Arial","sans-serif";
	font-size: 11px;
}
#infobox .content .calendar-table .calendar-heading{
	height: 17px !important;
}

#infobox .content .calendar-table .calendar-heading{
	height: 17px !important;
}
#infobox .calendar-prev, #infobox .calendar-next{
	display: none;
}

/* The Google Map */

#googlemap{
	font-family:"Helvetica","Trebuchet MS","Arial","sans-serif";
	font-size: 10px;
}


/* The Album */
.albumoverview .album{
	width: 270px;
	height: 345px;
	padding: 20px;
	background-color: #FFF;
	float: left;
	margin-right: 15px;
	margin-bottom: 35px;
	position: relative;
}
.albumoverview .album .imagebox{
	position: relative;
	width: 270px;
	height: 277px;
	overflow: hidden;
}
.albumoverview .album .imagebox .overlay{
	position: absolute;
	top:0;
	left: 0;
	width: 270px;
	height: 277px;
	background: url(images/sprite.png) -642px -326px no-repeat;
	
}

.albumoverview .album .imagebox img{
	height: 277px;
	border:none;
}
.albumoverview .last{
	margin-right: 0px;
}

.albumoverview .album  a.title{
	font-size: 18px;
	font-family:"Helvetica","Trebuchet MS","Arial","sans-serif";
	font-weight: bold;
	display: block;
	text-decoration: none;
}

.albumoverview .album .date{
	font-size: 18px;
	font-family:"Helvetica","Trebuchet MS","Arial","sans-serif";
	font-weight: bold;
	color: #6b6b6b;
	display: block;
	margin-top: 10px;
}

.albumoverview .album .count{
	font-size: 12px;
	font-family:"Helvetica","Trebuchet MS","Arial","sans-serif";
	font-weight: bold;
	position: absolute;
	bottom: 20px;
	right: 20px;
}
/* Gallery*/

.galleryoverview .ngg-gallery-thumbnail-box{
	width: 180px;
	padding: 10px;
	padding-bottom: 40px;
	background-color: #FFF;
	float: left;
	margin-right: 40px;
	margin-bottom: 35px;
	position: relative;
}
.galleryoverview .ngg-gallery-thumbnail img{
	border:none;
}



#background #container #content-wrapper .ngg-navigation a.next, #background #container #content-wrapper .ngg-navigation a.prev, #background #container #content-wrapper .ngg-navigation a.page-numbers, #background #container #content-wrapper .ngg-navigation span{
	font-family: "Helvetica","Trebuchet MS","Arial","sans-serif";
	font-size: 16px;
	text-decoration: none;
}
#background #container #content-wrapper .ngg-navigation a, #background #container #content-wrapper .ngg-navigation span{
	padding:0 5px;
	border:none;
	margin-right:0;
	font-weight: normal;
}


/* COMMENTS */
.commentlist {
	list-style: none;
	font-size: 13px;
}
#disqus_thread #dsq-comments .dsq-comment{
	background: url(images/comment-bg.png) repeat;
	width:580px;
	padding: 20px;
	margin-bottom:10px; 
}

.comment-author{
font-size: 24px;
margin-bottom: 10px;

}
.comment-author img{
	display: none;
}

.comment-author .says{
	display: none;
}

/******************************************
* Align box
******************************************/

img.centered, .aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left;
}

/*WPSTATS*/
#wpstats{
	display: none;
}