/*
Theme Name: RPGFramework
Theme URI: http://www.rpgframework.de
Description: RPGFramework Corporate Design
Author: Sascha Schnetz
License: GPU2
*/

/***************
**** BASICS ****
***************/
html{-moz-box-shadow: inset 0px 99px 71px -6px rgba(0,0,0,0.4);box-shadow: inset 0px 99px 71px -6px rgba(0,0,0,0.4);height: auto;}
body{color: #fff;font-family: sans-serif;font-size: 14px;background: url('/wp-content/themes/rpgframework/images/background.jpg');background-attachment: fixed;background-size: 100% auto;background-repeat: no-repeat;background-color: #22231d; margin: 0 20px 20px 65px;}
a{color: #caaa8f;text-decoration: none;font-weight: 600;}
p{line-height: 22px;font-weight: 400;}

h1, h2 {text-shadow: 2px 2px 10px #000;text-align: center;font-weight: 600;}
h1{font-size: 34px;}
h2{font-size: 28px; margin-bottom: 0;}
h3{font-size: 22px; margin-bottom: 10px; font-weight: 600;}
h4{font-size: 16px; padding-top: 15px; font-weight: 600;}

li{margin-bottom: 8px;}
table{}
	table th{background: rgba(52, 44, 42, 0.8); padding: 5px 10px;}
	table td{padding: 5px; border-bottom: 1px solid rgba(52, 44, 42, 0.8);}
hr{margin: 20px 0; border-color: rgba(52, 44, 42, 0.3);}


/****************
*** ALLGEMEIN ***
****************/
#wrapper{max-width: 1100px;margin: 20px auto 10px;text-align: left;}
#main{width: 100%; }
#main > .entry, .forceEntry{ display: block; background: rgba(78, 68, 66, 0.8);padding: 20px 40px;box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);margin-top: 40px;position: relative;}
#main.home > .entry{background: none;padding: 0;box-shadow: none;margin-top: 0;}
#footer{clear: both; height: 10px; padding: 20px; text-align: center;}

.center{text-align: center;}
.alignleft {float: left;margin: 15px 30px 15px 0;}
.alignright{float: right;margin: 15px 0 15px 30px;}

.button{color: #fff;text-decoration: none;background: rgba(52, 44, 42, 0.8);padding: 10px 30px;font-weight: 700;box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); border: none; cursor: pointer;}
.button:after{font-family: FontAwesome;content: '\f0da';margin-left: 5px;}

.entry > h2{text-align: left;margin-top: 20px;}
.home .entry > h2{text-align: center; margin-bottom: 20px; margin-top: 50px;}
.home > h2, .home .entry > h2{text-align: center; margin-bottom: 20px;}
#meta{position: relative;top: -10px;font-style: italic;}

/* Breadcrumb */
#breadcrumb{position: absolute;top: 0;left: 0;right: 0;background: rgba(78, 68, 66, 0.9);padding: 5px 40px;margin: 0;}
#breadcrumb  li{display: inline;}
#breadcrumb  li a:after{font-family: FontAwesome;content: '\f0da';margin-left: 10px;margin-right: 10px;}


/***************
***** MENÜ *****
***************/
#header{height: 100px; text-align: center;position: relative;}
#header .mainmenu{position: absolute;top: 10px;}
#header img{width: 200px;margin-left: 20px;}
#header .mainmenu.left{left: 0;}
#header .mainmenu.right{right: 0;}
	#header .mobileMenu{display: none;}

.menu{display: inline;font-size: 24px;font-weight: 800; padding: 0;}
.menu li{display: inline-block;border-bottom: 0px solid #fff;margin: 0 20px;position: relative;}
.menu > li.current_page_item,.menu > li.current-page-parent{border-bottom-width: 1px;}
.menu li a:link,.menu li a:visited{display: inline-block;text-shadow: 2px 2px 10px #000;color: #fff;text-decoration: none;padding: 10px 0px 5px;}

.sub-menu{display: none;position: absolute;font-size: 20px;background: rgba(78, 68, 66, 0.95);padding: 5px 10px;text-align: left;box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);font-size: 16px;z-index: 2;}
.sub-menu li a{position: relative;margin-left: 5px;}
.sub-menu li a:before{font-family: FontAwesome;content: '\f0da';margin-right: 5px;position: absolute;left: -15px;top: 14px;}
.sub-menu li:hover a:before,.current_page_parent .current_page_item a:before{color: rgba(55, 44, 33, 1);}
#header > :nth-child(1) .sub-menu{left: 0;}
#header > :nth-child(3) .sub-menu{right: 0;}

#footer .footer_menu .menu{font-size: 12px; font-weight: 400; margin: 0; padding: 0 10px 30px;}
	#footer .footer_menu .menu a{font-weight: 400; width: 100%;}


/***************
** STARTSEITE **
****************/
.homeTeaser{background-color: rgba(78, 68, 66, 0.6); padding: 20px 20px 40px; position: relative; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);}
	.homeTeaser .bannerImage{display: block;position: absolute;left: 0;top: 0;bottom: 0;width: 30%;background-size: cover;background-position: bottom right;}
	.homeTeaser .bannerText,.homeTeaser p{margin-left: 33%;margin-top: 0; padding-bottom: 10px;}
	.homeTeaser .button{position: absolute; left: 30%; right: 0px; bottom: 0px; text-align: right;}

.news> :nth-child(3){margin-right: 0;}
	.newsPost{display: inline-block;width: 30%;vertical-align: top;margin-right: 4.4%;color: #fff;text-decoration: none;box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);}
		.newsPost .imageContainer{position: relative;}
		.newsPost .headline{position: absolute;bottom: 0;right: 0;left: 0;background: rgba(78, 68, 66, 0.6);padding: 10px;text-align: center;font-size: 22px;}
		.newsPost .newsThumb{width: 100%;height: 300px;background-size: cover;background-position: center;}
		.newsPost .textContainer{padding: 5px 10px 40px; background: rgba(78, 68, 66, 0.8); position: relative;}
		.newsPost .textContainer p{overflow: hidden;margin: 10px 0;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; max-height: 50px;}
		.newsPost .textContainer span{position: absolute; left: 0; bottom: 0; right: 0; text-align: right;}
		.newsPost .textContainer span:after{font-family: FontAwesome;content: '\f0da'; margin-left: 5px;}


/****************
*** AKTUELLES ***
****************/
#main > .post {padding-left: 33%; min-height: 180px;}
	#main > .post .thumbnail{position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background-size: cover;}
	#main > .post .button{position: absolute; left: 30%; right: 0px; bottom: 0px; text-align: right;}
	#main > .post h2{margin-bottom: 0;}
	#main > .post p{margin-bottom: 40px;}

/* Kommentare */
.comments-area hr{margin: 40px 0 30px;}
	.comment{background: rgba(115, 101, 98, 0.9); box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); padding: 10px; position: relative; margin-bottom: 20px;}
		.comment .comment-meta{position: absolute; top: 10px; right: 10px;}


/***************
**** ARCHIV ****
***************/
.archiv h2{margin-bottom: 0;}

/* ASN */
.asn {position: absolute; right: 30px; top: 50px;}
	.archiv .asn input{padding: 6px 10px; border: none; vertical-align: middle;}
	.archiv .asn input[type="text"]{border-radius: 15px 0 0 15px;}
	.archiv .asn span{margin: 0 10px;}
	.archiv .asn form{display: inline;}
	.archiv .asn .archiveDropdown{padding: 5px 10px; border: none; border-radius: 0 15px 15px 0; float: right;}
	.archiv .asn .postform{padding: 5px 10px; border: none; border-radius: 0;}

.entry .headline{text-align: center; display: block; font-size: 20px;}


/***************
*** BEITRÄGE ***
***************/
.meta{position: absolute;top: 0;left: 30%;right: 0;background: rgba(52, 44, 42, 0.8);padding: 5px 40px;margin: 0;}
.single .entry{min-height: 350px;}
.post .entry .thumbnail{width: 30%; height: 300px; float: right; margin-top: 30px; margin-left: 50px; background-size: cover; background-repeat: no-repeat;}
.comments-area textarea{width: 90%; min-height: 100px; border: none; padding: 10px; margin-bottom: 10px; display: block;}
.headerImage{position: absolute; top: 30px; left: 0; right: 0; height: 150px; background-size:cover;}


/**************
*** SIDEBAR ***
**************/
.meta{position: absolute;top: 0;left: 30%;right: 0;background: rgba(52, 44, 42, 0.8);padding: 5px 40px;margin: 0;}
.single .entry{min-height: 350px;}
.single .entry .thumbnail{width: 30%; height: 300px; float: right; margin-top: 30px; margin-left: 50px; background-size: contain; background-repeat: no-repeat;}
.comments-area textarea{width: 90%; min-height: 100px; border: none; padding: 10px; margin-bottom: 10px; display: block;}
.sidebar{position: fixed; left: 0; top: 35%; list-style: none; padding: 0;}
	.sidebar a{display: block; width: 50px; height: 50px; background: rgba(78, 68, 66, 0.8); margin: 15px 0;box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);}
		.sidebar a i{font-size: 24px; margin-top: 15px;}
		.sidebar .lang-item a{font-size: 18px; height: 25px; padding-top: 25px; line-height: 0;}


/************************
*** RESPONSIVE DESIGN ***
************************/

/* DESKTOP */
@media (min-width: 900px){
	.menu-item-has-children:hover > .sub-menu{display: block;}
}

/* TABLET */
@media (min-width: 700px) and (max-width: 899px){
	#header{height: 150px;}
		#header .mainmenu{top: 100px;}
	.menu-item-has-children:hover > .sub-menu{display: block;}
}

/* MOBIL */
@media (max-width: 699px){
	body{margin: 0; padding: 0 10px;}

	#header{height: auto; padding-top: 100px;}
		.logo{position: absolute; left: 10px; top: 10px;}
		#header .mainmenu{display: none; position: relative; top: 0px; left: 0; right: 0;}
		#header .mobileMenu{display: block; position: absolute; top: 25px; right: 40px; font-size: 48px; cursor: pointer;}

	.menu li{display: block; width: 100%; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); background: rgba(78, 68, 66, 0.95); margin: 5px 0; border-radius: 15px;}
	.sub-menu {width: 90%; position: relative;}

	.entry > h2{margin-top: 50px;}
	.newsPost{position: relative; width: 100%; margin-bottom: 30px;}
		.newsPost .newsThumb{background-position: top;}

	#main > .post {padding: 20px 30px;}
		#main > .post h2{margin: 20px 0 0;}
		#main > .post .meta{position: relative; left: 0;}
		#main > .post .button{left: 0;}
		#main > .post .thumbnail {position: relative; width: 100%; height: 200px;}

	.single .entry .thumbnail{width: 100%; margin-bottom: 20px;}

	#footer{height: 0px; padding: 0px; margin: 0;}
	.sidebar{position: relative; margin: 0;}
		.sidebar li{display: inline-block; width: 20%; position: relative; vertical-align: top;}
			.sidebar li a{width: 100%; line-height: 7px !important;}

	#footer .footer_menu .menu{font-size: 12px; font-weight: 400; }
}