@charset "UTF-8";

/**
 *
 * Helsinki: Stylesheet public web
 *
 * @author     Manuel Märklin
 * @copyright  2015 Manuel Märklin Programmierung, Switzerland
 * @link       https://www.2mp.ch
 */


@font-face {
	font-family: 'chivoblack';
	src: url('chivo-black-webfont.woff2') format('woff2'),
	url('chivo-black-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'chivoblack_italic';
	src: url('chivo-blackitalic-webfont.woff2') format('woff2'),
	url('chivo-blackitalic-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'chivoregular';
	src: url('chivo-regular-webfont.woff2') format('woff2'),
	url('chivo-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'fjalla_oneregular';
	src: url('fjallaone-regular-webfont.woff2') format('woff2'),
	url('fjallaone-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;

}

@media all {


	* {
		margin: 0;
		padding: 0;
		font-family: 'fjalla_oneregular', sans-serif;
		font-style: normal;
	}

	body {
		font-size: 15px;
		letter-spacing: 0.01em;
		color: #000000;
		width: 1170px;
		height: 100%;
	}

	a {
		color: #000000;
		text-decoration: none;
		cursor: pointer;
	}

	h1, h2 {
		font-size: 15px;
		text-transform: uppercase;
		margin-bottom: 8px;
	}

	h1 {
	}

	h2 {
		font-family: 'chivoblack_italic', sans-serif;
		font-size: 22px;
		text-transform: none;
	}

	img {
		border: 0;
		max-width: 100%;
		height: auto !important;
	}

	p {
	}

	ol, ul {
		margin: 0;
		padding-left: 1.5em;
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}

	td {
		vertical-align: top;
	}

	iframe {
		width: 380px;
        height: 228px;
		margin-top: 1.0em;
		margin-bottom: 1.0em;
	}

	.form {
		margin-top: 1.0em;
	}

	.form table {
		width: auto;
	}

	.form tr {
		margin-bottom: 0.5em;
	}

	.form td {
		vertical-align: middle;
	}

	.form td.button,
	.form td.help {
		display: inline;
	}

	.form .errormsg,
	.form .helptext
	{
		font-size: 11px;
		padding-bottom: 0.5em;
	}

	.form .helptext {
		padding-left: 24px;
	}

	.form .postfix {
		margin-left: 12px;
	}

	.form td.checkbox {
		padding-right: 0;
	}

	.form td.error {
		color: #ff0000;
	}

	.form td.labels-none {
		display: none;
	}

	.form input,
	.form select,
	.form textarea {
		font-size: 15px;
		padding: 0.2em;
		width: 242px;
		border: 1px solid #aaaaaa;
		margin-bottom: 6px;
	}

	.form input.small {
		width: 48px;
	}

	.form input.med {
		width: 180px;
	}

	.form input.num {
		text-align: right;
	}

	.form .radioitems {
		margin-bottom: 12px;
	}

	.form .radioitems ul {
		padding-left: 0;
	}

	.form .radioitems li {
		list-style: none;
		margin-left: 0;
	}

	.form .radioitems input {
		width: 20px;
		margin-right: 12px;
	}

	.form .whpclass,
	.form .whpclass label{
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		height: 0;
		width: 0;
		z-index: -1;
	}

	.form select.small {
		width: 79px;
	}

	.form textarea {
		width: 242px;
	}

	.form input[type="submit"],
	.form input[type="reset"],
	.form input[type="button"],
	.form select {
		width: 100px;
		margin-top: 0.5em;
	}

	.form input[type="checkbox"] {
		width: 15px;
		margin-top: 0;
	}

	.form input[type="submit"],
	.form input[type="reset"],
	.form input[type="button"] {
		font-size: 11px;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		background-color: #ffffff;
		padding: 0.3em 0;
		cursor: pointer;
	}

	.form input[disabled],
	.form input[readonly]
	{
		background-color: #f0f0f0;
	}

	.table {
		display: table;
		width: 100%;
	}

	.tr {
		display: table-row;
	}

	.td {
		display: table-cell;
		vertical-align: top;
	}

	.cancelled {
		color: #cf0000;
	}

	.cursor {
		cursor: pointer;
	}

	.reservation {
		margin-top: 2.0em;
	}

	.soldout {
		color: #ffa600;
	}


	/* colors  */
	.orange {
		background-color: #ffa600;
	}

	.red {
		color: #ffffff;
		background-color: #cf0000;
	}

	.red a {
	    color: #ffffff;
	}

	.blue {
		color: #ffffff;
		background-color: #081045;
	}

	.blue a {
	    color: #ffffff;
	}

	.cyan {
		background-color: #36cde9;
	}

	.grey {
		background-color: #abc0c3;
	}

	.yellow {
		background-color: #fff450;
	}

	.orange-white {
		background-color: #ffa600;
		border: 4px solid #ffa600;
		border-image-source: url( ../images/orangeweiss.jpg );
		border-image-slice: 10;
		border-image-width: 2;
		border-image-repeat: round;
	}

	.orange-red {
		background-color: #ffa600;
		border: 4px solid #ffa600;
		border-image-source: url( ../images/orangerot.jpg );
		border-image-slice: 10;
		border-image-width: 2;
		border-image-repeat: round;
	}

	.red-white {
		color: #ffffff;
		background-color: #cf0000;
		border: 4px solid #cf0000;
		border-image-source: url( ../images/rotweiss.jpg );
		border-image-slice: 10;
		border-image-width: 2;
		border-image-repeat: round;
	}

	.blue-red {
		color: #ffffff;
		background-color: #081045;
		border: 4px solid #081045;
		border-image-source: url( ../images/blaurot.jpg );
		border-image-slice: 10;
		border-image-width: 2;
		border-image-repeat: round;
	}

	.cyan-blue {
		background-color: #36cde9;
		border: 4px solid #36cde9;
		border-image-source: url( ../images/hellblaublau.jpg );
		border-image-slice: 10;
		border-image-width: 2;
		border-image-repeat: round;
	}


/**
 * Content of main layout elements
 */
	html {
		height: 100% !important;
	}

	#page {
		position: relative !important;
		min-height: 100%; /* real browsers */
		height: auto !important;
		text-align: left;
		margin: 0 auto;
		max-width: 100%;
		z-index: 100;
	}

	#main {
	}

	#header {
		z-index: 100;
	}

	#logo .small {
		display: none;
	}

	#address {
		position: absolute;
		right: 40px;
    	top: 20px;
		font-size: 18px;
		text-transform: uppercase;
	}

	#nav {
		position: absolute;
		right: 180px;
    	top: 20px;
    	cursor: pointer;
	}

	#nav ul {
		display: none;
		position: absolute;
   		top: 0;
    	z-index: 100;
    	width: 224px;
		background-color: #ffffff;
		list-style-type: none;
		padding: 12px;
	}

	#nav li {
		font-size: 18px;
		text-transform: uppercase;
	}

	#content {
		z-index: 300;
	}

	.homelink {
		text-align: right;
		margin-top: 1em;
		display: none;
	}

	.homelink a {
		text-decoration: underline;
		font-style: italic;
	}

/* Col 1  */

	#col1 {
		width: 274px;
		padding-right: 12px;
		float: left;
	}

	#col1 {
		margin-left: 20px;
	}

	#col1 .universum,
	#col1 .program {
		font-size: 32px;
		text-transform: uppercase;
		color: #ffffff;
		padding: 6px 12px;
		margin-bottom: 12px;
	}

	#col1 .universum {
		background-color: #cf0000;
		border: 4px solid #cf0000;
		border-image-source: url( ../images/rotweiss.jpg );
		border-image-slice: 10;
		border-image-width: 2;
		border-image-repeat: round;
		display: block;
	}

	#col1 .info {
		padding: 6px 12px;
		margin-bottom: 12px;
		background-color: #ffa600;
		border: 4px solid #ffa600;
		border-image-source: url( ../images/orangeweiss.jpg );
		border-image-slice: 10;
		border-image-width: 2;
		border-image-repeat: round;
		cursor: pointer;
	}

	#col1 .info .title {
		font-size: 32px;
		text-transform: uppercase;
	}

	#col1 .info .content {
		display: none;
	}

	#col1 .program {
		background-color: #081045;
		border: 4px solid #081045;
		border-image-source: url( ../images/blaurot.jpg );
		border-image-slice: 10;
		border-image-width: 2;
		border-image-repeat: round;
	}

	#program .event {
		background-image: url( ../images/linie.jpg );
		background-position: bottom;
		background-repeat: no-repeat;
		padding-bottom: 18px;
		margin-bottom: 12px;
	}

	#program .header {
		width: 100%;
		cursor: pointer;
	}

	#program .header:after {
		content: '';
		display: block;
		clear: both;
	}

	#program .agenda,
	#program .date {
		display: table-cell;
		padding-left: 12px;
		vertical-align: top;
	}

	#program .agenda {
		margin-left: 70px;
	}

	#program .date {
		float: left;
		width: 70px;
	}

	#program .content {
		display: none;
		margin: 20px 0 0 0;
		padding-left: 0;
	}

	#program .content .description,
	#program .content .links {
		padding-left: 12px;
		padding-right: 12px;
	}

	#program .content .description a {
		text-decoration: underline;
		font-style: italic;
	}

	#program .content .description strong {
		font-weight: bold;
	}

	#program .content .description em {
		font-style: italic;
	}





/* Col 2  */
	#col2 {
		width: 274px;
		padding-right: 12px;
		float: left;
	}

	#subnav .link {
		margin-bottom: 12px;
		cursor: pointer;
	}

	#subnav .link a {
		line-height: 0;
	}

	#subnav .link img {
		width: 100%;
	}

	#subnav .container {
		padding: 11px 12px;
		line-height: 1.2em;
	}

	#subnav .container.orange-white,
	#subnav .container.orange-red,
	#subnav .container.red-white,
	#subnav .container.blue-red,
	#subnav .container.cyan-blue {
		padding: 6px 12px;
	}

	#subnav .container h2 {
		font-family: 'chivoblack_italic', sans-serif;
		font-size: 22px;
		text-transform: none;
		margin-bottom: 12px;
	}

	#subnav .container h2.empty {
		margin-bottom: 0px;
	}

/* Col 3  */

	#col3 {
		margin-left: 592px;
		margin-right: 18px;
	}

	#home:after {
		content: '';
		display: block;
		clear: both;
	}

	#home .tile,
	#home .grid-sizer {
		width: 274px;
	}

	#home .tile {
		margin-bottom: 12px;
		cursor: pointer;
		height: auto;
	}

	#home .tile img {
		width: 100%;
	}

	#home .tile a img {
		margin: 0;
		padding: 0;
	}

	#home .tile .content {
		display: none;
	}

	#home .container,
	#home .page {
		padding: 11px 12px;
	}

	#home .page a {
		text-decoration: underline;
		font-style: italic;
	}

	#home .page  ul {
		padding-left: 0;
	}

	#home .page li {
		list-style: none;
		margin-left: 0;
	}

	#home .container .content {
		margin-top: 1.0em;
	}

	#home .container .content a {
		text-decoration: underline;
		font-style: italic;
	}

	#home .container .content strong {
		font-weight: bold;
	}

	#home .container .content em {
		font-style: italic;
	}

	#showarchive .years {
		padding-bottom: 4px;
	}

	#showarchive .years a {
		font-family: 'chivoregular', sans-serif;
		font-size: 16px;
		font-style: normal;
		text-decoration: none;
		padding-right: 12px;
	}

	#showarchive .years a.active {
		color: #ffffff;
	}

	#showarchive .event {
		cursor: pointer;
	}

	#showarchive .month {
		background-image: url( ../images/linie.jpg );
		background-position: bottom;
		background-repeat: no-repeat;
		padding-bottom: 12px;
		margin-bottom: 12px;
	}

	#showarchive .agenda,
	#showarchive .date,
	#showarchive .headline {
		display: inline-block;
	}

	#showarchive .agenda {
		font-size: 25px;
		padding-right: 4px;
	}

	#showarchive .date,
	#showarchive .headline {
		font-family: 'chivoregular', sans-serif;
		font-size: 14px;
	}

	#showarchive .date {
		padding-right: 4px;
	}

	#showarchive .content {
		display: none;
		margin: 20px 0 0 0;
		padding-left: 0;
	}

	#showarchive .content .description a {
		text-decoration: underline;
		font-style: italic;
	}

	#showarchive .content .description strong {
		font-weight: bold;
	}

	#showarchive .content .description em {
		font-style: italic;
	}


	/* Event  */
	.event .month,
	.event .weekday {
		font-size: 15px;
		text-transform: uppercase;
	}

	.event .day {
		font-family: 'chivoblack', sans-serif;
		font-size: 46px;
		line-height: 1em;
		margin-bottom: 0.05em;
	}

	.event .headline {
		font-family: 'chivoblack_italic', sans-serif;
		font-size: 17px;
		line-height: 1.0em;
		padding-bottom: 0.5em;
	}

	.event .top,
	.event .support {
		line-height: 1.05em;
		padding-bottom: 0.3em;
	}

	.event .top {
		font-size: 25px;
	}

	#subnav .event .top {
		line-height: 1.3em;
	}

	.event .support {
		font-size: 20px;
	}

	.event .addition,
	.event .showtime {
		font-family: 'chivoregular', sans-serif;
		font-size: 12px;
		text-transform: uppercase;
	}

	.event .addition {
		line-height: 1.1em;
	}

	.event .content {
		display: none;
		padding-left: 12px;
		margin: 20px 0;
	}

	#home .event .content {
		padding-left: 0;
	}

	.event .content img {
		width: 100%;
		margin-top: 12px;
	}

	.event .description {
		margin-bottom: 12px;
	}

	#home .event .description {
		margin-top: 20px;
	}

	.event .links {
		margin-left: 82px;
    	padding-left: 12px;
	}

	.event .tickets a {
		font-family: 'chivoblack', sans-serif;
		font-size: 12px;
		text-transform: uppercase;
	}

	.event .links ul {
		list-style-type: none;
		padding-left: 0;
	}

	.event .caption,
	.event .links li a {
		font-family: 'chivoregular', sans-serif;
		font-size: 12px;
		text-transform: uppercase;
		text-decoration: underline;
	}

	.event .caption {
		margin-top: 6px;
	}

	.event .social {
		margin-bottom: 6px;
	}

	.event .social table {
		width: auto;
	}

	.event .social td {
		padding-right: 6px;
		width: 22px;
	}

	.event .social .fb {
		position: absolute;
	}

	.event .social .fb-overlay,
	.event .social .fb-like {
		width: 16px;
		height:16px;
		position: absolute;
		top: 0;
		left: 0;
	}

	.event .social .fb-overlay {
		color: #ffffff;
		background-color: #000000;
		text-align: center;
		vertical-align: middle;
	}

	.event .social .fb-like {
		border:none;
		margin: 0;
		overflow:hidden;
		opacity: 0;
		filter: alpha( opacity=0 );
		z-index:1000;
	}

	.customer {
		margin-top: 20px;
	}

	.customer td {
		margin-bottom: 0.5em;
	}


}

/**
 *	three col screen
 */
@media screen and (max-width:1169px)
{
	body {
		width: 884px;
	}

	#address {
		right: 20px;
    	top: 12px;
	}

	#nav {
		right: 140px;
    	top: 12px;
    	width: 70px;
	}

	#nav ul {
    	width: 170px;
	}
}


/**
 *	two col screen
 */
@media screen and (max-width:883px)
{
	body {
		width: 598px;
	}

	#address {
		font-size: 14px;
    	right: 10px;
    	top: 5px;
	}

	#nav {
		right: 100px;
    	top: 6px;
    	width: 40px;
	}

	#nav ul {
    	left: -62px;
	}

	#col2 {
		display: none;
	}

	#col3 {
		margin-left: 306px;
	}

	.homelink {
		display: block;
	}
}

/**
 *	one col screen
 */
@media screen and (max-width:597px)
{
	body {
		max-width: 100%;
    	width: 290px;
	}

	#logo .default {
		display: none;
	}

	#logo .small {
		display: block;
	}

	#address {
		display: none;
	}

	#nav {
    	right: 8px;
    	top: 70px;
	}

	#nav ul {
    	left: -100px;
	}

	#col1 {
		float: none;
		margin-left: 9px;
	}

	#col3 {
		margin-left: 12px;
		margin-bottom: 20px;
		width: 274px;
	}


}