/* 
------ WEBFONTS ------
-------------------------------------------------------------------------------*/

@font-face {
	font-family: 'Bloc';
	src: url('_/inc/webfonts/bloc.eot');
	src: url('_/inc/webfonts/bloc.eot?#iefix') format('embedded-opentype'),
	     url('_/inc/webfonts/bloc.woff') format('woff'),
	     url('_/inc/webfonts/bloc.ttf') format('truetype'),
	     url('_/inc/webfonts/bloc.svg#ywftsvg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'BlocExtCond';
	src: url('_/inc/webfonts/blocextcond.eot');
	src: url('_/inc/webfonts/blocextcond.eot?#iefix') format('embedded-opentype'),
	     url('_/inc/webfonts/blocextcond.woff') format('woff'),
	     url('_/inc/webfonts/blocextcond.ttf') format('truetype'),
	     url('_/inc/webfonts/blocextcond.svg#ywftsvg') format('svg');
	font-weight: normal;
	font-style: normal;
}



/* 
------ COLORS ------
-------------------------------------------------------------------------------*/

/* white */

body,
a{
	color: #fff;
	}

h2 span,
p.edit{
	background-color: #fff;
	}
	
.description h2 span,
#post-15 h2 span{
	background: rgb(255, 255, 255);
	background: rgba(255, 255, 255, 0.85); 
	}


/* blue light */

nav,
article:nth-child(even),
div.menu:nth-child(even){
	background-color: #86cfe4;
	}
	
.is-sticky nav{
	background: rgb(134, 207, 228);
	background: rgba(134, 207, 228, 0.9); 
	}


/* blue medium */

h2,
h2 a,
p.edit a{
	color: #00a5c8;
	}

#header,
article:nth-child(odd),
div.menu:nth-child(odd),
#post-17{
	background-color: #00a5c8;
	}
	
	
/* blue dark (?) */
/*
.menu h3,
.menu strong{
	color: #005577;
	}
*/
	
/* light grey */

.description{
	background-color: #ececec;
	}
	

/* dark grey */

body{
	background-color: #666666;
	}


/* yellow */

.menu h3{
	color: #ffde1d;
	}


/* 
------ BASICS ------
-------------------------------------------------------------------------------*/

body{
	font-family: "BlocExtCond", sans-serif;
	}

#wrapper{
	max-width: 1200px;
	margin: 0 auto;
	}
	
a{
	text-decoration: none;
	}
	
img{
	display: block;
	}
	
b, strong{
	font-weight: normal;
	font-style: normal;
	}
	
hr{
	clear: both;
	height: 10px;
	border: 0;
	background-image: url(images/hr-bg-large.png);
	background-repeat: repeat-x;
	}
	
	
/* Clearfix - contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
	
	
/* 
------ HEADER ------
-------------------------------------------------------------------------------*/


.description{
	padding: 6em 0 5em;
	background-color: #dddddd;
	background-image: url(images/deli-image.jpg);
	background-size: cover;
	background-position: center center;
	}
	
.description h3 span{
	display: none;
	}
	
.description .post-meta{
	text-align: center;
	text-transform: uppercase;
	padding-top: .5em;
	font-size: 2.8em;
	/* text-shadow */
	text-shadow: 1px 1px 40px #666; /* x, y, blur, color */
	}
	
	
	
/* 
------ NAVIGATION ------
-------------------------------------------------------------------------------*/

#nav{
	text-align: center;
	padding: 5px 0;
	}
	
#nav-sticky-wrapper{
	min-height: 70px;
	}
	
.is-sticky #nav{
	z-index: 9999;
	}

#nav li{
	display: inline-block;
	}
	
#nav a{
	display: block;
	width: 60px;
	height: 60px;
	text-indent: -9999px;	
	margin: 0 .5em;
	cursor: pointer;
	background-image: url(images/nav-icons-large.png);
	background-repeat: no-repeat;
	background-position: 0 center;
	}
	
#menu-item-25 a{
	width: 40px;
	}
	
#menu-item-26 a{
	background-position: -60px center;
	width: 30px;
	}
	
#menu-item-27 a{
	background-position: -120px center;
	} 

#menu-item-28 a{
	background-position: -180px center;
	width: 51px;
	}

#menu-item-29 a{
	background-position: -240px center;
	width: 40px;
	}
	
#menu-item-30 a{
	background-position: -300px center;
	width: 32px;
	}

#menu-item-31 a{
	background-position: -360px center;
	width: 50px;
	}
	
	
/* 
------ HEADLINES ------
-------------------------------------------------------------------------------*/

h1, h2{
	font-family: "Bloc";
	font-weight: normal;
	}

#header h1{
	background-image: url(images/super-jami-large.png);
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	}
	
#header h1 a{
	display: inline-block;
	height: 320px;
	width: 600px;	
	text-indent: -9999px;
	}

h2{
	font-size: 5em;
	text-align: center;
	text-transform: uppercase;
	}
	
.single-page h2.page-title{
	padding-top: .75em;
	}
	
#post-15 h2.page-title{
	z-index: 9000;
	position: absolute;
	width: 100%;
	padding-top: .7em;
	}
	
h2 span{
	display: inline-block;
	padding: .11em .4em .05em;
	/* border-radius */
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	}
	
article h2{
	margin-bottom: .5em;
	}
	
h3{
	font-size: 3em;
	}
	
article h3{
	margin-bottom: .5em;
	letter-spacing: .5px;
	}

h4{
	font-size: 2.5em;
	}
	
article h4{
	margin-bottom: .5em;
	letter-spacing: .5px;
	}
	

/* 
------ ARTICLES/CONTENT ------
-------------------------------------------------------------------------------*/

article{
	padding-top: 4em;	
	position: relative;
	text-rendering: optimizeLegibility;
	}
	
article.single-page{
	padding-top: 0;
	}
	
article#post-15{
	padding-top: 0;
	}
	
article .entry{
	padding: 2em 4em 3em;
	max-width: 900px;
	margin: 0 auto;
	}
	
#post-7 .entry{
	display: none; /* show via JS */
	}
	
#post-7 .entry,
#post-15 .entry{ /* full width: e.g. "Speisekarte" */
	max-width: none;
	}

#post-7 .entry,
#post-15 .entry{ /* no padding */
	padding: 0;
	}
	
article a{
	height: 1.2em;
	display: inline-block;
	border-bottom: .1em solid white;
	/* box-sizing */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}
	
article a.phone{
	border: none;
	cursor: default;
	}
	
.page-title a{
	border: none;
	}
	
article p{
	clear: left;
	font-size: 2em;
	margin-bottom: .5em;
	letter-spacing: .5px;
	}
	
.article-image img{
	max-width: 100%;
	height: auto !important;
	}
	
#map {
    min-height: 640px;
	}
	
#map img{
	max-width: none !important;
	}
	
p.edit{
	position: absolute;
	right: 0;
	text-align: center;
	padding: .3em .4em .2em;
	text-transform: uppercase;
	margin-top: -4em;
	font-size: 1em;
	}
	
article.single-page p.edit,
#post-15 p.edit{
	margin-top: 0;
	z-index: 8000;
	}
	
p.edit a{
	text-decoration: none;
	}
	
	

/* 
------ TABLES ------
-------------------------------------------------------------------------------*/
	
	
table td{
	vertical-align: baseline;
	}
	
table td:first-child{
	padding-right: 1em;
	}	
	
table h4{
	margin-bottom: 0;
	}
	
	
/* 
------ "MENU" ------
-------------------------------------------------------------------------------*/

div.menu{
	clear: left;
	padding: 2em 4em 2em;
	}
	
.menu p{
	font-size: 1.5em;
	opacity: .6;
	}

.menu table{
	/*width: 100%;*/
	font-size: 1.5em;	
	margin-bottom: 1em;
	width: 45%;
	margin-right: 5%;
	float: left;
	/* box-sizing */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}
	
.menu table td{
	vertical-align: baseline;
	}
	
.menu table tr td:first-child{
	padding-right: .5em;
	}	
	
.menu table tr td:last-child{
	text-align: right;
	padding-left: 1em;
	}
	
.menu table tr.title-row td{
	padding-top: 1em;
	}
	
.menu table tr:first-child td{
	padding-top: 0;
	}
	
.menu hr + table + table + table,
.menu hr + table + table + table + table + table,
.menu hr + table + table + table + table + table + table + table{
	clear: left;
	}

.menu table b,
.menu table strong{
	font-size: 1.4em;
	vertical-align: baseline;
	}

.menu table tr.title-row td:nth-child(2),
.menu table tr.title-row td:last-child{
	line-height: 1.4em;
	padding-top: 1.325em;
	}
	
.menu table tr:first-child td:nth-child(2),
.menu table tr:first-child td:last-child{
	padding-top: .325em;
	}
	

	
	
	
/* 
------ FOOTER ------
-------------------------------------------------------------------------------*/

#footer{
	text-align: center;
	padding: 1em;
	text-transform: uppercase;
	}
	
	

/* 
------ MEDIA QUERIES ------
-------------------------------------------------------------------------------*/

@media screen and (max-width: 960px) {
	
	/*--- BASICS ---*/
	
	body{
		font-size: .9em;
		}
	
	
	/*--- HEADER ---*/
	
	#header h1{
		background-image: url(images/super-jami-medium.png);		
		}
		
	#header h1 a{
		height: 230px;
		width: 400px;
		}

	
}


@media screen and (max-width: 720px) {
	
	/*--- BASICS ---*/
	
	body{
		font-size: .8em;
		}
		
	hr{
		background-image: url(images/hr-bg-small.png);
		}
		
		
	/*--- ARTICLES/CONTENT */
	
	.menu table{
		width: 100%;
		margin-right: 0;
		float: none;
		}
	
}



@media screen and (max-width: 480px) {
	
	/*--- BASICS ---*/
	
	body{
		font-size: .7em;
		}

	
	/*--- HEADER ---*/
	
	#header h1{
		background-image: url(images/super-jami-small.png);
		}
		
	#header h1 a{
		height: 170px;
		width: 270px;
		}
		
		
	/*--- NAV ---*/
	
	#nav-sticky-wrapper{
		max-height: 50px;
		min-height: 0;
		}
	
	#nav a{
		width: 40px;
		height: 40px;
		background-image: url(images/nav-icons-small.png);
		}
	
	#menu-item-25 a{
		width: 27px;
		}
	
	#menu-item-26 a{
		background-position: -40px center;
		width: 20px;
		}
		
	#menu-item-27 a{
		background-position: -80px center;
		width: 40px;
		} 
	
	#menu-item-28 a{
		background-position: -120px center;
		width: 36px;
		}
	
	#menu-item-29 a{
		background-position: -160px center;
		width: 25px;
		}
		
	#menu-item-30 a{
		background-position: -200px center;
		width: 22px;
		}
	
	#menu-item-31 a{
		background-position: -240px center;
		width: 31px;
		}
		
	
	/*--- HEADLINES ---*/
	
	h2{
		font-size: 4em;
		}
		
		
	/*--- ARTICLES/CONTENT ---*/
	
	article .entry,
	div.menu{
		padding-left: 2em;
		padding-right: 2em;
		}
	
	#map {
	    min-height: 400px;
		}
			

}



@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 

	hr{
		background-image: url(images/hr-bg-large@2x.png);
		background-size: 93px 7px;
		}
    
    #header h1{
		background-image: url(images/super-jami-large@2x.png);
		background-size: 600px 272px;
		}
    
    #nav a{
		background-image: url(images/nav-icons-large@2x.png);
		background-size: 406px 44px;
		}

}

@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 960px), (min-resolution: 192dpi) and (max-width: 960px) { 
    
    #header h1{
		background-image: url(images/super-jami-medium@2x.png);
		background-size: 406px 184px;
		}

}


@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px), (min-resolution: 192dpi) and (max-width: 480px) { 

	hr{
		background-image: url(images/hr-bg-small@2x.png);
		background-size: 93px 5px;
		}
	
	#header h1{
		background-image: url(images/super-jami-small@2x.png);
		background-size: 270px 124px;
		}
    
    #nav a{
		background-image: url(images/nav-icons-small@2x.png);
		background-size: 271px 29px;
		}

}