@font-face {
 font-family: OpenSans; /* Gewünschter Name */
 src: url(../../../fonts/Open_Sans/OpenSans-Regular.eot);  
 src: local("real FontName"),
 url(../../../fonts/Open_Sans/OpenSans-Regular.ttf);          
}
@font-face {
 font-family: Montserrat; /* Gewünschter Name */
 src: url(../../../fonts/Montserraty/Monserrat-Regular.eot);  
 src: local("real FontName"),
 url(../../../fonts/Montserrat/Montserrat-Regular.ttf);          
}

* { 
    margin: 0; 
    padding: 0; 
    font: 20px 'Open Sans'; 
    font-weight: 400; 
}
 
a {color: #48577D; text-decoration: none;} 
  
a:hover {text-decoration: none;} 
  
h1, h2 {margin-bottom: 15px} 
  
h1 {font-size: 18px;} 
h2 {font-size: 16px} 


#verschiebmich {
    width: 650px; 
    margin: 100px auto; 
}

#container { 
    width: 590px; 
    margin: 50px auto 50px -10px; 
    background-color: #eee; 
    padding:15px; 
    overflow: hidden; 
} 
  
    #main { 
        width: 400px; 
        float: left; 
    } 
      
        #main table {
			border: none;
			margin: 2em 0 1em 0;
			padding-right: 1em;	
            width: 380px; 
        } 
          
            #main table th { 
                padding: 10px; 
                background-color: #48577D; 
                color: #fff; 
                text-align: left; 
				font-size: 12px;
            } 
              
            #main table td { 
                padding:0.25em 0.75em 0.25em 0; 
				font-size: 12px;
            } 
              
            #main table tr { 
                background-color: #d3dcf2; 
            } 
			
	

	
			
			
      
    #sidebar { 
        width: 190px; 
        float: left; 
    }


#month_year, #kalender { 
    width: 650px; 
}

#kalender td, #kalender th {
	width: 90px;	
    text-align: center; 
    padding: 15px 6px; 
}

#kalender td { 
    border-top: 1px solid #D1D1D1; 
}

#kalender td:first-child { 
    border-left: 1px solid #D1D1D1; 
}

#kalender td:last-child { 
    border-right: 1px solid #D1D1D1; 
}

#kalender { 
    border-bottom: 1px solid #D1D1D1; 
}

#kalender tr:first-child td { 
    border-top: 1px solid #838383; 
}

.woche { 
    cover: rgba(251, 251, 251, 0.81); 
	border-left: 1px solid #D1D1D1; 
	color: lawngreen;
}
.woche a { 
    cover: rgba(251, 251, 251, 0.81); 
	color: lawngreen;
}

.www { 
    cover: rgba(251, 251, 251, 0.81); 
	border-left: 1px solid #D1D1D1; 
	font-size: 10px;
	color: yellow;
}
.www a { 
    cover: rgba(251, 251, 251, 0.81); 
	font-size: 10px;
	color: yellow;
}

.woche2 { 
    cover: rgba(251, 251, 251, 0.81); 
	border-left: 1px solid #D1D1D1; 
	color: red;
}
.woche2 a { 
    cover: rgba(251, 251, 251, 0.81); 
	color: red;
}


.wochenende { 
    cover: #EAEAEA; 
	border-left: 1px solid #D1D1D1; 
}

.vormonat { 
    color: white; 
    font: 20px 'Open Sans'; 
    font-weight: 300; 
	border-left: 1px solid #D1D1D1; 
}

.freitag { 
    border-left: 1px solid #D1D1D1;
	color: blue;	
}
.samstag { 
    border-left: 1px solid #D1D1D1;
	color: blue;	
}
.samstag a{ 
	color: blue;	
	text-decoration: none;
}

.sonntag { 
    border-left: 1px solid #D1D1D1;
	color: blue;	
}


.neuermonat { 
    border-left: 1px solid #D1D1D1; 
	
}

.heute { 
   /* text-shadow: 0 0 5px #A21313; 
    color: #A21313; 
    font-weight: bold; */
}

#month_year { 
    font: 20px 'Montserrat'; 
    font-weight: bold; 
    font-size: 24px; 
    text-transform: uppercase; 
    text-align: center; 
    padding: 3px 0px; 
    margin: 10px 0 5px 0; 
    position: relative;
}
@media screen and (max-width: 649px){	
	* { 
		margin: 0; 
		padding: 0; 
		font: 12px 'Open Sans'; 
		font-weight: 400; 
	}
	#verschiebmich{
		width:95%;
	}
	#kalender td, #kalender th {
		width: 60px;	
		text-align: center; 
		padding: 5px 3px; 
	}
	#month_year, #kalender { 
		width: 100%; 
	}
	
	
}

#month_year a { 
    position: absolute; 
    text-decoration: none; 
    width: 20px; 
    text-align: center; 
    padding: 3px 10px; 
    color: #727272; 
}

#month_year a:hover { 
    font-weight: bold; 
}

#timeslot {
	width: 550px;
	margin-left: 1em;
	background-color: white;
}

#timeslot tr {
	left: 10px;
}

#timeslot th, #timeslot td {
   text-align: center; 
    padding: 18px 6px; 
	border-top: 1px solid #838383; 
	margin: auto 0.5em;
}

#timeslot tr:first-child th { 
    border-top: none; 
}
#timeslot tr:first-child td { 
    border-top: 4px solid #838383; 
}
#booking {
	background:    #00549f;
border-radius: 11px;
padding:       10px 45px;
color:         #ffffff;
display:       inline-block;
font:          normal bold 16px/1 "Open Sans", sans-serif;
text-align:    center;
margin-top: 1em;
}
.jjw {
	display: inline-block; 
  padding: 10px 45px;
  cursor: pointer;
  -webkit-border-radius: 11px;
  border-radius: 11px;
  font: normal bold 16px/1 Arial, Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-align: center; 
  background: #00549f;  
}


.gebe{
		margin-bottom: 0.5em;
		font-size: 20px;
		text-align: center;
		margin-top: 2em;
		text-decoration: underline;
		display: block;
	}
	
	
input[type="name"],input[type="password"] {
	border: 1px solid #e1e5e9;
	background-color: white;
	height: 1.5em;
	padding: 0 10px;
	width: 250px;
	margin-bottom:25px;
}

.button {
      display: inline-block; 
  padding: 10px 45px;
  cursor: pointer;
  -webkit-border-radius: 11px;
  border-radius: 11px;
  font: normal bold 16px/1 Arial, Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  text-align: center; 
  background: #00549f;  
  text-decoration: none;
      }	
.myButton {
	background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
	background-color:#007dc1;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	padding:10px 24px;
	text-decoration:none;
	margin: 2em 0 0 15em;
}
.myButton:hover {
	background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
	background-color:#0061a7;
}
.myButton:active {
	position:relative;
	top:1px;
}

.myButton2 {
	/*background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);*/
	background-color:#fff;
	border-radius:3px;
	border:1px solid #124d77;
	display:inline-block;
	cursor:pointer;
	color:#000;
	font-family:Arial;
	font-weight: bold;
	font-size:16px;
	
	padding:24px;
	text-decoration:none;
	margin: 2em 0 0 6em;
	min-width: 240px
}
.farbrot{
	color:red;
}
.myButton2:hover {
	background:linear-gradient(to bottom, #007dc1 5%, #007dc1 100%);
	background-color:#0061a7;
	color: #fff;
}
 .myButton2:hover .farbrot{
	color: #d8d9e3;
} 
.myButton2:active {
	position:relative;
	top:1px;
}
.abstand{
	height: 200px; width: 100px;
}
.pos1{
	position: absolute; top: 20em; right: 11em;
}
.pos2{
	position: absolute; top: 26em; right: 11em;
}
@media screen and (max-width: 649px){	
.abstand{
	height: 10px;
}
	.pos1, .pos2{
		position: relative;
		left: 3em;
	}
	.pos1{
		top: -10.5em;
	}
	.pos2{
		top: -12em;
	}
	.myButton2 {
	
	font-family:Arial;
	font-size:12px;
	padding:10px;
}
}
@media screen and (min-width: 650px) and (max-width: 1199px){	
	.abstand{
	height: 10px;
}
	.pos1, .pos2{
		position: relative;
		left: 10em;
	}
	.pos1{
		top: -6em;
	}
	.pos2{
		top: -7em;
	}
}
@media screen and (min-width: 1200px) and (max-width: 1730px){	
	.pos1, .pos2{
		
		right: 1em;
	}
	.myButton2 {
	
	font-family:Arial;
	font-size:12px;
	min-width: 180px
}
}