/*

		KulturKreuzTheme 2014
		Main Stylesheet
			June 2014

		additioninal frontend css:
			responsive.css - handles responsive styles
			newsletter.css - used only for mailchimp form
			colorbox.css - positioning and base styles for the lightbox (customized in main.css)
		
		Michael Kühni
	
*/



/* 

		STRUCTURE 

*/

body {
	border-top: 3px solid #900c2b;2
	background: #fff;
	padding: 0px;
	margin: 0;
	font-family: 'PT Sans', Verdana, sans-serif;;
}

#pagebanner {
	position: absolute;
	top: 225px;
	left: 0px;
	width: 100%;
	z-index: 0;
}

#pagebanner img { width: 100%; }

.home #pagebanner {
	/* different position on front-page */
	top: 325px; 
}

#container {
	position: relative;
	max-width: 1200px;
	min-width: 600px;
	margin: 0px auto;
}

#mainnav {
	padding: 20px 0 20px 0;
}

#leftcol {
	float: left;
	width: 41%;
	min-height: 400px;
	padding-bottom: 2em;
}

#rightcol {
	float: left;
	width: 59%;
	padding-bottom: 2em;
	background: #fff;
	position: relative;
	z-index: 9;
}

#header {
	clear: both;
	padding: 40px 0 0 0px;
}

#header #logo {
	clear: both;
	margin: 0px 0 20px 40px;
	width: 300px;
}

#header #claim {
	margin-left: 40px;
	padding-bottom: 100px; 
}

#claim { display: none; }			/* hide & show for the claim */
.home #claim { display: block; }

#pagebanner .inner {
	max-width: 1200px;
	margin: 0px auto;
	height: 0px;
	position: relative;
}

.crossbottom {
	position: absolute;
	top: 0px;
	left: 80px;
	height: 240px;
	width: 240px;
	background:#fff;
}

#address {
	margin: 0 0 0 0px;
	padding: 0px;
	min-height: 1px;
	width: 41%;
	float: left;
}

#address > div {
	float: left;
	width: 25%;
	margin: 0px 0 0 0px;
}

#address > div:first-child {
	margin-left: 40px;
}

#address p, ul, li {
	margin: 0;
	padding: 0;
}

#address li { white-space: nowrap; }

.fb-like-box {
	margin: 514px 0 0 80px;
	background: #fff;
}

#header .vvk {
	padding: 40px 0 0 40px;
	font-size: 13px;
	line-height: 26px;
}

.single-kkn_anlass #content .vvk h1 {
	margin: 2em 0 -0.5em 0px;
	font-size: 18px;
}

#header .vvk h1 {
	margin-left: 0;
}

#header .vvk ul {
	margin: 0 0 0 40px;
}

#content {
	padding: 36px 0 0 40px;
}

#footer {
	clear: both;
	margin-top: 100px;
	padding: 40px 0 120px 0;
}

#footer .inner {
	max-width: 1200px;
	margin: 0px auto;
}

#footer .inner > div {
	float: left;
}

#footer .inner > div > div {
	padding-left: 40px;
}

#footer .widget_text {
	width: 41%;
	padding-top: 23px;
}

#footer .widget_text p {
	margin-top: 0px;
}

#footer .widget_nav_menu {
	width: 59%;
	padding: 20px 0 0 0;
}



/* 
		Typographie 
*/

* {
	font-feature-settings: "kern";
    -moz-font-feature-settings: "kern";
    -webkit-font-feature-settings: "kern";
}

form input, form select, form label, form textarea, input.mc_input, label.mc_interest_label {
	font-family: 'PT Sans', Verdana, sans-serif !important;
	font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	margin-bottom: 22px;
}

h1 {
	font-weight: 700;
	font-size: 32px;
	line-height: 32px;
}

h2 {
	font-size: 32px;
	line-height: 30px;
}

h3,
#content .kkn_anlass .date {
	position: relative;
	font-size: 22px;
	font-weight: 700;
}

#content .kkn_anlass .date .until {
	position: absolute;
	top: 0px;
	left: -28px;
	font-size: 16px;
}

h4 {
	font-size: 14px;
	font-weight: 400;
}

#content .intro {
	padding: 0.2em 0 1em 12%;
	
}

#content .single-kkn_anlass .date,
#content .single-kkn_anlass .enddate {
	font-size: 32px;
	line-height: 32px;
	font-weight: 700;
}

#header h1, #header h2 {
	margin: 0;
	padding: 0;
	margin-left: 20px;
}

#header h2 {
	font-size: 20px;
	color: #777;
}

#content h2:first-child,
#content h1:first-child {
	margin-top: 6px;
	text-transform: uppercase;
	font-weight: 700;
}

#content h2 span {
	text-transform: none;
}

.page-template-template-pastevents-php #content h2 span {
	color: #900c2b;
}

#content a,
.vvk a {
	color: #900c2b;
}

.content {
	padding-left: 40px;
	max-width: 550px;
	font-size: 14px;
	line-height: 22px;
}

.content h1 {
	margin-left: -40px;
}

.page .content h3 {
	margin: 2em 0 1em -40px;
}

.content ul {
	margin-left: 20px;
}

#footer .textwidget p {
	font-size: 14px;
	color: #515151;
}


/* nav */

#mainnav {
	margin: 0;
}

#mainnav.fixed {
	position: fixed;
	padding: 14px 0 10px 0;
	width: 100%;
	left: 0px;
	top: 0px;
	z-index: 99;
	
	background: #fff;

	-webkit-box-shadow: #aaa 0px 0px 9px 3px;
	-moz-box-shadow: #aaa 0px 0px 9px 3px; 
	box-shadow: #aaa 0px 0px 9px 3px; 
}

#mainnav.fixed .inner {
	max-width: 1200px;
	margin: 0px auto;

}

#mainnav.fixed .logo {
	float: left;
	display: block;
	width: 41%;
}

#mainnav.fixed .logo a {
	margin-left: 40px;
}

#mainnav.fixed .logo img {
	width: 200px;
}

#mainnav.fixed ul {
	float: left;
}


#mainnav ul {
	font-weight: 700;
	list-style-type: none;
	margin: 0 0 0 0px;
	padding: 0;
}

#mainnav ul.sub-menu {
	display: none;
	position: absolute;
	left: 0px;
	top: 20px;
	width: calc(100% + 40px);
	margin: 0;
	padding: 6px 0 0 0;
	font-size: 14px;
	z-index: 10;
}

#mainnav .current-menu-item .sub-menu,
#mainnav .current-menu-parent .sub-menu {
	display: block;
}

/* disable folded out submenu on front page */
.home #mainnav .current-menu-item .sub-menu {
	display: none; }
/* clumsily re-enable foldout of submenu on mouse over */
.home  #mainnav li:hover .sub-menu {
	display: block; }

#mainnav > .inner > ul > li {
	float: left;
	padding-right: 2em;
	position: relative;
}

#mainnav li:hover ul.sub-menu {
	display: block;
}


/* footernav */

#footer ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#footer .menu > li {
	float: left;
	padding-right: 2em;
}


/* LINKS */
#mainnav a {
	font-size: 18px;
	color: #010101;
	text-decoration: none;
}

#mainnav .sub-menu a {
	font-size: 14px;
	font-weight: 400;
}

#mainnav .current-menu-item > a {
	color: #882020;
}

#address .current-menu-item > a {
	color: inherit;
}

#address *, #address a {
	font-size: 12px;
	color: #777;
	font-weight: 400;
}

#footer .menu a {
	color: #515151;
	text-decoration: none;
	font-size: 14px;
	line-height: 22px;
}

#footer .sub-menu a {
	color: #888;
	font-size: 12px;
	line-height: 22px;
}

/*.home #mainnav .current-menu-item > a {

	color: #626262;
}*/



/*	EVENTS */

#content .kkn_anlass {
	margin-bottom: 20px;
	position: relative;
}

#content .kkn_anlass .eventlink {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 99;
}


#content .kkn_anlass .info {
	float: left;
	width: 12%;
}

#content .kkn_anlass .main {
	float: left;
	width: 88%;
}

#content .kkn_anlass .presents,
#content .kkn_anlass .subtitle,
#content .single-kkn_anlass .presents,
#content .single-kkn_anlass .subtitle {
	color: #313131;
	
}

#content .kkn_anlass h2,
#content .single-kkn_anlass h2,
#content .kkn_anlass h3,
#content .single-kkn_anlass h3,
#content .kkn_anlass h4,
#content .single-kkn_anlass h4 {
	margin: 0;
	line-height: 26px;
}

#content .single-kkn_anlass h3 { min-height: 26px; } /* fix height, to prevent banner from shifting into the date info */

#content .kkn_anlass .presents {
	padding-left: 12%;
	font-size: 14px;
	max-width: 500px;
	line-height: 22px;
	vertical-align: text-bottom;
	
}


#content .single-kkn_anlass .presents,
#content .kkn_anlass .presents,
#content .past .kkn_anlass .pastdate  {
	color: #888;
	text-transform: uppercase;
}


#content .kkn_anlass .day,
#content .single-kkn_anlass .day {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	color: #888;
	line-height: 26px;
}


#content .kkn_anlass h3,
#content .kkn_anlass .date,
#content .single-kkn_anlass .date
{
	text-decoration: none;
	line-height: 26px;
}

#content .single-kkn_anlass .duration {
	line-height: 26px;
	color: #aaa;
}

#content .single-kkn_anlass .date {
	line-height: 32px;
}





#content .kkn_anlass .splash {
	clear: both;
	padding-top: 8px;
	padding-bottom: 10px;
	margin: 0px 0 0 40px;
	position: relative; /* anchor for .notice */
}

#content .kkn_anlass .no-image-notice {
	margin-left: 60px;
	padding-bottom: 26px;
} 

.single-kkn_anlass .banner {
	margin: 0 0 0 -80px;
	position: relative;	/* anchor for the .notice */
}

#content .single-kkn_anlass .no-image {
	margin: -30px 0 0 10px;
	padding-bottom: 65px;
}

#content .kkn_anlass .notice,
#content .single-kkn_anlass .notice {
	font-weight: normal;
	font-size: 16px !important;
	color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 4px 4px 2px 4px;
	display: block;
	width: auto;
	
	position: absolute;
	top: 10px;
	left: -6px;
	
	-webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
	
	/*font-family: 'Comic Neue Angular';*/
	font-size: 20px;
}

#content .kkn_anlass .no-image-notice .notice {
	top: 0px;
	left: 20px;
}

#content .single-kkn_anlass .notice {
	font-size: 18px !important;
	top: 30px;
	left: -8px;
}

#content .red {
	background: #f00;
}

#content .blue {
	background: #06f
}

.eventnav {
	padding-left: 90px;
}

.eventnav h3 { margin-bottom: 0px; }
.eventnav p { margin: 4px 0 40px 0; }

.eventnav ul {
	list-style-type: none;
}

.eventnav li {
	float: left;
	width: 50%;
	height: 22px;
	padding-right: 0px;
}

/* past events */
#content .past .kkn_anlass .pastdate {position: absolute; right: 40px; top: 0px; font-size: 14px;  }
#content .past .kkn_anlass .main { width: auto; padding-left: 160px; }
#content .past .kkn_anlass .presents { padding-left: 0px; }
#content .past .kkn_anlass .notice { display: none; }

#content .kkn_anlass .tinysplash {
	/* tiny splash is used on the past events */
	position: absolute;
	left: 0;
	top: 0;
	width:165px;	
}

#content .past {
	padding-top: 12px;
}

#content .past .kkn_anlass {
	padding-bottom: 10px;
}
 


/*
	teaser
*/
.teaser {
	clear: both;
}

.teaser .content {
	float: left;
	width: 400px;
	padding: 8% 0 5% 50px;
}

.teaser .content p {
	font-size: 18px;
}

.teaser h1 {
	margin-left: 0;
}

.teaser .splash {
	float: right;
	width: 50%;
}
.teaser .splash img {
	display: block;
}



/* single EVENT */
#content .single-kkn_anlass h1,
#content .single-kkn_anlass h2,
#content .single-kkn_anlass h3,
#content .single-kkn_anlass h4 {
	margin: 0;
}

.single-kkn_anlass .pull { margin-top: -18px; }

.single-kkn_anlass .push { margin-top: 6px; }

.single-kkn_anlass header {
	position: relative;
}

.single-kkn_anlass .info {
	position: absolute;
	left: -120px;
	top: 0px;
	padding-bottom: 10px;
}

.single-kkn_anlass .banner {
	margin-left: -200px;
	padding: 16px 0 20px 0;
}
#content .single-kkn_anlass .banner img {
	display: block;
}


.single-kkn_anlass .content {
	position: relative;
	padding: 0 0 30px 0;
}

.single-kkn_anlass .infobar {
	padding: 0px 20px 10px 20px;
}


.single-kkn_anlass .infobar h4 {
	margin : 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
}

.single-kkn_anlass .infobar .time {
	float: left;
	width: 200px;
}

.single-kkn_anlass .infobar .buy {
	float: left;
	width: 170px;
}

.single-kkn_anlass #content .buytickets {
	display: block;
	background: #06f;
	color: #fff;
	padding: 4px 2px 1px 4px;
	margin-right: 30px;
	text-decoration: none;
	line-height: 26px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.single-kkn_anlass .main {
}

.single-kkn_anlass .sidebar {
	position: absolute;
	left: -400px;
	width: 360px;
	top: 40px;
}


.single-kkn_anlass .sidebar iframe {
	width: 360px;
	height: 280px;
}

.single-kkn_anlass h1 {
	color: ;
}

/* sharedaddy */
.single-kkn_anlass #content .sd-title {
	display: none;
}


/* 	
		GENERAL 
*/


.kkn_pcolor {
	/* .kkn_pcolor gets overwritten with programm-color, customizable in the backend - this is a fallback */
	color: #900c2b; }

img { max-width: 100%; }

#shownav { display: none; }

.nobold {
	font-weight: 400;
	padding: 0 2px 0 2px;
}

.gallery figure {
	margin: 0 20px 10px 0;
	float: left;
}

.gallery img {
	border: 0px !important;
}

.gallery a:focus {
	outline: 0;
}

.content .gallery {
	margin-top: 1.6em;
}

a img {
	border: 0px !important;
}

.alignright {
	float:right; 
	margin: 0px 0px 20px 20px ;
}

.alignleft {
	float:left; 
	margin: 0px 2px 20px 0px ;
}


/*

	 	FORMS 
		currently styles jetpack-forms only, mailchimp Form is handled in newsletter.css

*/

form.contact-form label {
	font-size: 16px !important;
	font-weight: 700;
}

form.contact-form input, 
form.contact-form textarea,
form.contact-form select {
	margin-top: -3px;
	width: 500px !important;
	border: 1px solid #ccc;
	padding: 4px;
	font-size: 16px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

form.contact-form textarea {
	height: 140px;
}

form.contact-form select {
	width: auto !important;
}

form.contact-form label span {
	color: #900c2b;;
}

form.contact-form .contact-submit .pushbutton-wide {
	font-size: 14px;
	background: #900c2b;
	color: #fff;
	float: left;
	width: auto !important;
	color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 0px;
	text-transform: uppercase;
	padding: 4px 4px 4px 4px;
	margin-top:-20px;
}

ul.form-errors {
	margin: 0;
	padding-left: 1em;
	padding-bottom: 1em;
}

.form-errors .form-error-message {
	list-style-type: none;
	color: #900c2b !important;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 26px;
}

/* special format for the contact p */
.page-id-10 #content address {
	position: absolute;
	left: -140px;
	width: 140px;
	top: 102px;
	font-style: normal;
	text-align: right;
}


/* 

		NEWSBOX

*/

#header {
	position: relative;
}

#newsbox a.boxlink {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

#newsbox p:first-child {
	margin-top: 0; }

#newsbox p:last-child {
	margin-bottom: 0; }

#newsbox {
	background: #900c2b;
	color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 10px;
	display: block;
	width: auto;
	max-width: 190px;
	
	position: absolute;
	top: 86px;
	left: 20px;
	z-index: 10;
	
	font-size: 14px;
	
	text-align: center;
	
	-moz-box-shadow: 1px 1px 5px #888;
	-webkit-box-shadow: 1px 1px 5px #888;
	box-shadow: 1px 1px 5px #888;
	
	-webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
	
	cursor: default;
	
}

.home #newsbox {
	top: 196px;
	left: 20px;
}

#newsbox p {
	color: transparent !important;
}

#newsbox {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	background: url("../images/splash_zwischennutzung.png") no-repeat !important;
	background-size: contain !important;
	-moz-background-size: contain !important;
}




/* 

		TEAM 

*/

#team .kkn_teammembers {
	float: left;
	width: 210px;
	margin: 0 40px 40px 0;
	text-align: left;
}

#team h3.name,
#team h4.tut {
	margin: 6px 0 6px 0;
}

#team h3 {
	clear: both;
}

#team .portrait {
	margin: 0px auto;
}

#team .portrait img {
	
	max-width: 210px;
	width: 210px;
	height: 92px;
}

#team .portrait {
	/*-webkit-border-radius: 46px;
	-moz-border-radius: 46px;
	border-radius: 46px;
	
	width: 92px;
	height: 92px;
	overflow: hidden;*/
}



/* 

		COLORBOX custom
		positioning resides within colorbox.css

*/

#cboxOverlay {
	background: #ddd;
}

#cboxMiddleLeft, 
#cboxMiddleRight, 
#cboxBottomLeft,
#cboxBottomRight,
#cboxTopLeft, 
#cboxTopCenter,
#cboxBottomCenter, 
#cboxTopRight  {
	background: transparent;
}

#cboxContent  {
	
	background: #fff;
	padding-bottom: 16px;
}

#cboxPrevious, #cboxNext, #cboxClose {
	width: auto;
	padding: 4px;
	text-indent: 0;
	background: transparent;
	bottom: 10px;
	
	font-size: 14px;
	font-family: 'PT Sans', Verdana, sans-serif;
	
	text-transform: uppercase;
	
	color: #fff;
	background: #900c2b;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#cboxPrevious:focus, #cboxNext:focus {
	outline: 0;
}

#cboxClose { right: 8px; }
#cboxPrevious { left: 8px; }
#cboxNext {	left: 84px; }


#cboxCurrent {
	left: 163px;
	bottom: 13px;
	font-size: 12px;
}

#cboxTitle {	
	bottom: 11px;
	width: 60%;
	padding: 0 100px 0 240px;
	color: #000;
	
	font-size: 16px;
	font-weight: 700;
	text-align: left;
	
	display: none !important;
}


/*

		CLEARFIZZLE
		fix height of elements containing floats
		http://css-tricks.com/snippets/css/clear-fix/

*/
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} 
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}