/* ********************************************************** */
/* GLOBAL */
/* ********************************************************** */

body
{
		background:#000000;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		color: #FFF;
}

input
{
        font-family: 'Open Sans', sans-serif;
        font-size:16px;
        padding: 7px;
        outline: 0;
        border:0;
        width:220px;
        background: #EBE8DE;
        border-radius:5px;
}

textarea
{
        font-family: 'Open Sans', sans-serif;
        font-size:16px;
        padding: 7px;
        outline: 0;
        border:0;
        width:220px;
        background: #EBE8DE;
        border-radius:5px;
}

input[type=submit]
{
        width:auto;
        padding: 5px 18px;
        line-height:25px;
        text-shadow:none;
        cursor:pointer;
        box-shadow: none;
        background: #333333;
        color: #fff;
}

p
{
		margin:15px 0;
		/*font-size:14px;*/
		line-height:20px;
		clear:both;
		-ms-hyphens:auto;
		-webkit-hyphens:auto;
		hyphens:auto;
}

sup
{
 		vertical-align: super;
	 	font-size:smaller;
}

a
{
        text-decoration:none;
}

/* Linkfarben Standard */
a:link {
		color: #fbea28;
}
a:visited { 
		color: #fbea28;
}
a:active { 
		color: #fcf59d;
}
a:hover {
		color: #fcf59d;
} 

strong {
        font-weight:bold;
}

i {
		font-style:italic;
}

figcaption strong
{
        border-bottom: 1px solid #D6D0C1;
        padding-bottom:10px;
        margin: 10px 0;
        display:block;
}

figcaption
{
        line-height: 25px;
        font-size:14px;
        width:200px;
}

hr
{
        background-color: #D6D0C1;
        border:0;
        height:1px;
        margin:20px 0;
}

.Gelber_Fliesstext_in_Bildkaesten {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: #fbea28;
}

.Gelber_Fliesstext {
		/*font-family: Verdana, Arial, Helvetica, sans-serif;*/
		font-size: 14px;
		color: #fbea28;
}

.Oranger_Fliesstext {
		color: #F90;
}

.Roter_Fliesstext {
		color: red;
}

.Weisser_Fliesstext_klein {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: #FFF;
}

.Fliesstext_klein {
		font-size: 10px;
}

/* ********************************************************** */
/* HEADER */
/* ********************************************************** */

header
{
        position:relative;
        width:auto;
		height:auto;
        max-width:750px;
        margin: 0 auto 20px auto;
		background-color:#fbea28;
}

header h1
{
        margin:35px 0 0 0;
        font-size:55px;
		color: #000000;	
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-weight:bold;
		text-align:center;
}

header p
{
		font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size:16px;
		font-weight:bold;		
		color: #000000;
		margin:5px 0 0px 0;
		padding-bottom: 5px;
		text-align:center;
}

nav
{
		position:relative;
		margin-top:20px;
        right:0;
        bottom:0;
		clear:both;
		height:auto;
}

nav ul
{
        list-style:none;
}

nav ul li
{
        display:block;
        float:left;
		padding:3px 30px 3px 0;
}

nav ul li a
{
        font-family: 'Open Sans', sans-serif;
        text-transform:uppercase;
        transition: all .25s ease;
		color: #fbea28;
		text-decoration:none;
}

nav ul li a:hover
{
        color: #E56038;
}

a.nav_orange:link {
		color: #F90;
}

a.nav_orange:visited {
		color: #F90;
}

a.nav_orange:hover {
        /*color: #E56038;*/
		font-weight:bold
}

a.nav_orange:active {
		color: #F90;
}

/*
a.nav_red:link {
		color: red;
}

a.nav_red:visited {
		color: red;
}

a.nav_red:hover {
		font-weight:bold
}

a.nav_red:active {
		color: red;
}
*/

a.nav_black:link {
		color: black;
}

a.nav_black:visited {
		color: black;
}

a.nav_black:hover {
		font-weight:bold
}

a.nav_black:active {
		color: black;
}

#mobileMenu
{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: none;
}

#mobileMenu ul li
{
        display:block;
        background-color: #E56038;
        color: #fff;
        padding: 12px 0;
        letter-spacing: 0.1em;
        text-align: center;
        text-transform: uppercase;
        border-bottom: 1px solid #CC5836;
		text-decoration:none;
}

#mobileMenu a.nav_orange:link {
		color: #F90;
}

#mobileMenu a.nav_orange:visited {
		color: #F90;
}

#mobileMenu a.nav_orange:active {
		color: #F90;
}

.toggleMobile
{
        display: none;
}

/* ********************************************************** */
/* STARTSEITE  */
/* ********************************************************** */

#header_startseite
{
        position:relative;
        width:auto;
		height:auto;
        max-width:750px;
        margin: 0 auto 20px auto;
		background-color:#fbea28;
}

#startseite p
{
        width: auto;
		max-width: 750px;
        margin: 15px auto 15px auto;
        font-size:14px;
		color: #FF9900;
		font-weight:bold;
		text-align:center;
		display:block;
}

#header_startseite p
{
		font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size:16px;
		font-weight:bold;		
		color: #000000;
		margin:5px 0 0px 0;
		padding-bottom: 5px;
		text-align:center;
}

#header_startseite h1
{
        margin:35px 0 0 0;
        font-size:55px;
		color: #000000;	
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-weight:bold;
		text-align:center;
}

#startseite h2
{
        margin:35px 0 0 0;
        font-size:40px;
		font-weight:bold;
		text-align:center;
}

#startseite h3
{
        margin:35px 0 0 0;
        font-size:20px;
		font-weight:bold;
		text-align:center;
}

#startseite h4
{
        margin:20px 0 0 0;
        font-size:14px;
		font-weight:bold;
		text-align:center;
}

.impressumlink a
{
		color: #F90;
}

.impressumlink a:hover
{
		color: #fcf59d;
}


/* ********************************************************** */
/* TEXT COLUMNS*/
/* ********************************************************** */

#text_columns
{
        line-height:25px;
        font-family: 'Open Sans', sans-serif;
        clear:both;
        width:auto;
        max-width:750px;
        margin:0 auto;
}

#text_columns h3
{
        font-size:20px;
        border-bottom: 1px solid #D6D0C1;
        padding: 20px 0;
        margin-bottom: 20px;
		clear:both;		
}

#text_columns h4
{
        font-size:16px;
        padding: 10px 0 0 0;
        margin-bottom: 0;
		color: #F90;
		font-variant:small-caps;
		clear:both;		
}

/* ********************************************************** */
/* SPEISEN */
/* ********************************************************** */

#speisen
{
		display:table;
		padding:0 0 0 0;
		max-width: 750px;
}

#speisen .speisen_col1
{
		display:table-cell;
        float:left;
        width:auto;
		max-width: 62px;
		margin: 0 20px 0 0;
}

#speisen .speisen_col2
{
		display:table-cell;
        float:left;
        width:auto;
		max-width: 586px; /* 750 - 62 - 62 - 20 - 20 */
		margin: 0 20px 0 0;
}

#speisen .speisen_col3
{
		display:table-cell;
        float:right;
        width:auto;
		max-width: 62px;
		margin:0 0 0 0;
}

/* allein schon nötig, um es ausblenden zu können */
.speisen_figure{
		float:left;
		width:62px;
		margin: 0 0 0 0;
		border: none;
}

/* ********************************************************** */
/* GÄSTEBUCH */
/* ********************************************************** */

.gaestebuch_bild /* für neues Gästebuch */
{
	  max-width: 100%;
	  height: auto;
	  margin: 10px 0px 0px 0px;
}


/* ********************************************************** */
/* TWO COLUMNS */
/* ********************************************************** */

.fig_with_border
{
	  border: 1px solid #fbea28;
}

.fig_no_border
{
	  border: 0px solid #fbea28;
	  
}

.fig_no_border img
{
	  max-width: 100%;
	  height: auto;
	  margin: 0px 0px 0px 0px;
}


#reservierungs_tabelle
{
	  max-width: 750px;
	  border-collapse:separate;
}

#reservierungs_tabelle td
{
	border: 1px solid #fbea28;
	line-height: 15px;
	padding: 3px 5px 3px 0;
}

#reservierungs_tabelle td
{
	  border: 1px solid #fbea28;
	  line-height: 15px;
	  padding: 3px 5px 3px 0;
}

.res_left
{
	  float:left;
	  width:200px;
}

.res_right
{
	  float:left;
	  clear:all;
}

#getraenke_karte
{
	  max-width: 750px;
	  border-collapse:separate;
}

#getraenke_karte td
{
	  line-height: 15px;
	  padding: 3px 5px 3px 0;
}

.bg_gray
{
		background-color:#333;
}

.getr_name
{
		width: 390px;
		max-width: 400px;
}

.getr_menge
{
		width: 80px;
		max-width: 100px;
}
.getr_preis
{
		width: 80px;
		max-width: 100 px;
}

#team{
		max-width: 750px;
	    border-collapse:separate;
}

#team td
{
		line-height: 20px;
		padding: 3px 5px 3px 0;
}

.team_bild
{
		width: 200px;
		max-width: 200px;
		vertical-align:top;
		float:left;
}

.team_text
{
		max-width: 750px;
		line-height:20px;
		float:left;
		clear:all;
}

#text_columns ul
{
		list-style:circle;
		list-style-position:outside;
}

#text_columns ul li
{
		line-height: 15px;
		margin-left: 30px;
		padding-left: 20px;
		padding-bottom: 5px;
}

#text_columns article.column1
{
		margin: 20px 0 0 0;
        font-size:14px;
        float:left;
        width:auto;
		max-width: 750px;
}

#text_columns .column2
{
		margin: 40px 0;
        font-size:14px;
        float:left;
        width:auto;
		max-width: 300px;
}

#text_columns article.column1 figure{
		float:left;
		max-width:none;
		margin: 20px 0 20px 0;
}

#text_columns article.column1 figcaption{
		max-width:none;
		padding: 5px 5px 5px 5px;
	    line-height: 16px;
		font-size:12px;
		color: #FF0;
}

#text_columns a{
		text-decoration:underline;
}

.row
{
        position:relative;
		margin: 0 0 0 50px;
        float:right;
        width:350px;
}

.row img
{
		float:right;
}

.row p
{
        margin-left: 100px;
}

/* MISC */
.clear
{
        clear:both;
}
.hidden
{
        position:absolute;
        clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
          clip: rect(1px, 1px, 1px, 1px);
}


/* ********************************************************** */
/* MEDIA QUERIES FOR A RESPONSIVE LAYOUT */
/* ********************************************************** */

@media print
{	
		header nav
		{
			display:none !important;
		}
}

@media (max-width: 1215px)
{
}

@media (max-width: 915px)
{
.row img
{
		display:none;
}		

.speisen_figure{
		display:none;
}
}

@media (max-width: 765px)
{

        #text_columns article.column1, #text_columns .column2
        {
                float:none;
                max-width: 650px;
                margin: 50px 10px 0 10px;
        }
        .column2 .row
        {
                float:none;
                margin:0 0 40px 50px;
        }
		nav
		{
				margin-left: +10px;
		}
		
}

@media (max-width: 500px)
{
        header
        {
            margin-top: 55px;
            /*text-align: center;*/
        }        
        .column2 .row
        {
                margin: 0 0 40px 10px;
                width:auto;
        }
        #mobileMenu
        {
                display: block;
                z-index: 99;
        }
        .toggleMobile
        {
                position: fixed;
                top: 10px;
                left: 10px;
                display: block;
                width: 40px;
                height: 36px;
                cursor: pointer;
                z-index: 999;
        }
        .toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3
        {
                display: block;
                position: absolute;
                width: 40px;
                height: 8px;
                left: 0;
                background: #EDA28C;
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile span.menu1
        {
                top: 0;
        }
        .toggleMobile span.menu2
        {
                top: 14px;
        }
        .toggleMobile span.menu3
        {
                top: 28px;
        }
        .toggleMobile.active span.menu1
        {
                top: 14px;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu2
        {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu3
        {
                opacity: 0;
                -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        header nav
        {
                display:none;
        }
        header h1
        {
                font-size:40px;
        }
		
        header p
        {
                font-size:14px;
        }
}


/* ********************************************************** */
/* KEYFRAMES */
/* ********************************************************** */

@keyframes stylie-transform-keyframes {
  0% {transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}
}

@keyframes stylie-transform2-keyframes {
  0% {transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}
}