/* This is the layout */

#top a, .button {
  font-family: Days One, Nobile, Verdana, Open Sans, Arial, sans-serif;
}
h1, h2, h3{
  font-family: Days One, Nobile, Verdana, Open Sans, Arial, sans-serif;
}
body, input, textarea, select, input {
    font-family: Verdana, Open Sans, Arial, Helvetica, sans-serif; 
    font-size: 14px; /* normal size */
    color: #46404A;  /* half-light  #66607A */
}
/* List items have no dots... */
ul li {
    list-style-type: none; 
}
/* Body has no inner and no outer distance... */
body {
  padding: 0px;
  margin: 0px;
}
/* Line height even sets the distance between the lines... */
p, li {
  line-height: 1.6;
}
/* Some font sizes... */
.very-big {
    font-size: 18px;
}
.big {
  font-size: 15px;
}
.small {
  font-size: 12px;
}
/* Some font colors.. */
.black {
  color: #2B2B2B;
}
.half-light {
  color: #66607A;
}
.light {
  color: #9AA0B8;
}
/* Shadowing the text... */
.text-shadow
{
    text-shadow: 2px 2px 5px #AAAAAA;
}
/* Slice formats... */
.slice {
  margin-top: 32px;
  margin-bottom: 32px;
}
.slice:first-child {
  margin-top: 25px;
}
/* Width determines the width of the content. */
/* Attention: Total width = width + padding left + padding right = 978px */
.slice, #top-content, #bottom-content {
  width: 958px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;   
  clear: both;
}
/* NOT USED */
#top-left-content {
    width: 25px;
    float:left;
}
/* We make the top background 150 high. */
#top {
  background-color: #222222;
  height: 150px;
  background-repeat: no-repeat;
  background-position: top center;
}
/* The gradient way for the background... */
.top-bg-gradient {
    background: #83a1da;
    background: -moz-radial-gradient(center, ellipse cover,  #83a1da 1%, #4a6596 83%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#83a1da), color-stop(83%,#4a6596));
    background: -webkit-radial-gradient(center, ellipse cover,  #83a1da 1%,#4a6596 83%);
    background: -o-radial-gradient(center, ellipse cover,  #83a1da 1%,#4a6596 83%);
    background: -ms-radial-gradient(center, ellipse cover,  #83a1da 1%,#4a6596 83%);
    background: radial-gradient(ellipse at center,  #83a1da 1%,#4a6596 83%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#83a1da', endColorstr='#4a6596',GradientType=1 );
}
/* The image way for the background... */
.top-bg-image {
    background-image: url(../images/bg_top2.png);
}
#logo-left {
    position: relative;
    top: 0px;
    left: 0%;
    bottom: 0px;
    right: 0px;
}
#logo-top-turnerheim {
    display: block;
    float: right; /* left;  */
    position:absolute;
    top:0px;
    right:10px;
    width:440px;
    height:auto; 
}
#logo-top-lorbeeren {
    height:130px;
    width:auto;
    position:absolute;
    top:20px;
    left:-100px;
}
#alwego_menu {
    float: left;
    padding-top: 115px;
    
    /* Overwriting browser defaults... */
    padding-left: 0px;
    margin: 0px;
    vertical-align: bottom;
    /* No bubbles... */
    list-style: none outside none;
}
#alwego_menu li {
  /* One by one from the left... */
  float: left;
  line-height: 1;
  margin: 0px;
  padding: 0px;
  /* The li text should not have any background */
  background: none;
}
#alwego_menu a {
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    letter-spacing: 0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    /* Optional radios on the lower side...
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    */  
    display: inline;
    padding: 19px 17px 19px 17px;
    height: 40px;
    margin: 0px 1px;
    /* Color of the unselected alwego_menu item text */
    color: #FFFFFF;
    /* Condensing the letters */
    letter-spacing: -0.0px;
}
/* Extending the menu item when selected and when hovered... */
/* In html one writes: 
    <ul id="alwego_menu">
        <li><a class="selected" href="#">Startseite</a></li>
        <li><a                  href="#">Weiters...</a></li>
    </ul>
*/        
#alwego_menu a.selected, #alwego_menu a:hover {
  background-color: #dfe7f7;
  color: #111111;
}
#alwego_menu a.unselected{
  background: none;
  color: #FFFFFF;
}
#mid-bg {
    background: #dfe7f7; 
    background: -moz-linear-gradient(top,  #dfe7f7 0%, #ffffff 30%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfe7f7), color-stop(30%,#ffffff)); 
    background: -webkit-linear-gradient(top,  #dfe7f7 0%,#ffffff 30%); 
    background: -o-linear-gradient(top,  #dfe7f7 0%,#ffffff 30%); 
    background: -ms-linear-gradient(top,  #dfe7f7 0%,#ffffff 30%); 
    background: linear-gradient(to bottom,  #dfe7f7 0%,#ffffff 30%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfe7f7', endColorstr='#ffffff',GradientType=0 );
}
#middle {
  /* Optional, if no gradient is to be used: */
  /* background: url(../images/grad-vert-down-blue.png) no-repeat center 65px; */
  min-height: 500px;
  padding-top: 1px; /* disable margin collapse */
}
/* This is the full width bottom */
#bottom {
  background-color: #222222;
  height: 150px;
  background-color: #C5E1FF;
}
.bottom-gradient {
    background: #dde6f6; /* Old browsers */
    background: -moz-linear-gradient(top,  #dde6f6 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dde6f6), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #dde6f6 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #dde6f6 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #dde6f6 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #dde6f6 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dde6f6', endColorstr='#ffffff',GradientType=0 );
}
.bottom-image {
    background: url(../images/grad-vert-down-blue-150x150.png) repeat-x;
}
#bottom-content {
}
.img-shadow {
    box-shadow: 10px 10px 15px silver;
}
.img-shadow-blue {
    box-shadow: 5px 5px 15px #222277;
}
/* Links... */
a {
  text-decoration: none;
  color: #366ABE;
}
a:hover {
  text-decoration: underline;
}
.width-speisekarte {
    width: 60px;
}
input[type="button"], button {
	font-size: 1.3em;
	color: #ffffff;
	font-weight: 400;
	border: none;
	border-radius: 3px;
	outline: none;
    /* Optional: text-transform:capitalize; */
	background: #5f84cc;
}
.button-style-kontakt {
	float: right;
	padding: 10px 25px;
	margin: 20px 0px 10px 10px;
}
.button-style-speisekarte {
	float: right;
	padding: 10px 25px;
	margin: 0 35px 0 0;
}
input[type="button"]:hover, button:hover {
	background: #7c9bd7;
}
/* Contact */
.contact-section{
  background: #eeeeee;
  padding: 10px 10px;
 }
.contact-section span {
  font-weight: 400;
  color: #3FACFA;
}
/* Red mandatory-stars (for the contact...)*/
.contactdetails-grid h5 span {
	color: #fe2121
}
.contactdetails-grid input[type="text"] {
	width: 90%;
	padding: 10px 25px;
	font-size: 15px;
	outline: none;
	border:1px solid #dcdee0;
}
.contactdetails-grid input[type="text"]:hover{
	border:1px solid #ffd2d2;
}
.contactdetails-grid textarea {
	width: 90%;
	padding: 10px 25px;
	font-size: 15px;
	height: 10em;
	resize: none;
	outline: none;
	border:1px solid #dcdee0;
}
.contactdetails-grid textarea:hover{
	border:1px solid #ffd2d2;
}
.middle-column-left {
    width: 550px; 
    float: left;
}
.middle-column-right {
    float: right; 
    text-align: right;
}
.bottom-col1 {
    float: left; 
    width: 500px;
/* padding fuer rechten Abstand bei Laufschrift. */
    padding-right: inherit;
}
.bottom-col2 {
    float: left; 
    width: 200px;
}
.bottom-col3 {
    float: right; 
    width: 225px; 
    text-align: left;
}
.opening-hours {
    width: 350px; 
    clear:both; 
    text-align: center;    
}            

.img-column-right {
    margin-top: 10px;
    width:369px;
}

/* Responsiveness */
@media only screen and (max-width:980px)
{
    .body {
        width=90%;
      margin: 0 auto;        
    }
    #image-flag-german, #image-flag-greek { display: none; } 
    #logo-top-turnerheim {
        float: left ;
        left:0px;
        width:100%;
        max-width:400px;
        top:5%;
        /* Center */
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .slice, #top-content, #bottom-content {
        width: 90%;    
    }
    #top {
        height: 400px;
    }
    .middle-column-left {
        width: 100%; 
        float: left;
    }
    .middle-column-right {
        width: 100%; 
        float: left;
        text-align: left;
    }
    #alwego_menu {
        float: none;
    }
    #alwego_menu li {
        float: none;
    }
    #alwego_menu a {
        font-size: 16px;
        height:16px;
        display: block;
        padding: 19px 17px 19px 17px;
        margin: 0px 1px;
        /* Color of the unselected alwego_menu item text */
        color: #FFFFFF;
        /* Condensing the letters */
        letter-spacing: -0.0px;
    }
    .bottom-col1 {
        width:100%;
        float: left; 
        text-align: left;
    }
    .bottom-col2 {
        width:100%;
        float: left; 
        text-align: left;
    }
    .bottom-col3 {
        width:100%;
        float: left; 
        text-align: left;
    }            
    .button-style-speisekarte {
	    float: left;
    }

    .opening-hours {
        width:100%;
        text-align: left;    
    }            
    /* Image in the right side column */
    .img-column-right {
        width:100%;
    }
}