body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 0 0 0;
  background-image: url("img/tlo.png");
}

#top {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
}

#logo {     /* logo główne na #head */ 
  display: inline-block;
  margin-left: 15px;
  height: 40px;
  width: 300px;
  background-image:url('img/logo.png');
  background-repeat:repeat-x;
}

#head {     /* nagłówek pierwszego stopnia - Menu 1 */
  height: 40px;
  background-image:url('img/top.png');
  background-repeat:repeat-x;
}

#head #main_menu1 {   /* pozycje lewego menu */
  position: absolute;
  top: 0;
  left: 320px;
  white-space: nowrap;
  background-color:transparent;
}

#head #main_menu2 {   /* pozycje prawego menu */
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
  background-color:transparent;
}

#head #main_menu1 a, #main_menu2 a { 
  font-size: 15px;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-decoration:none;
  color:#ffffff;
  border-right:1px solid #005392;
  background-color:transparent;
  padding: 0 20px;
}

#head #main_menu1 a:hover, #main_menu2 a:hover {background-color:#555577;color:#ffff00;}
#head #main_menu1 a.now, #main_menu2 a.now {background-color: #6600FF;color:#ffff00;}

#head #main_menu1 .tytul, #main_menu2 .tytul {   /* tytuł wyświetlanie na #head  */
  font-size: 25px;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-decoration:none;
  color:#ffff00;
  border-right:1px solid #005392;
  background-color:transparent;
  padding: 0 20px;
}

#main_place {
   margin: 30px 0 0 0;   
}

#grafika {
   border-collapse: collapse;    
   table-layout: fixed;
   width: 10px;
   overflow: hidden;             
}

#grafika td {
   border: 1px solid black;
   padding: 5px;                 
   text-align: center;
}

#grafika td.dummy1 {
   border: 0;
   width: 120px;
   height: 0;
}

#grafika td.dummy2 {
   border: 0;
   width: 80px;
   height: 0;
   font-size: 0px;
   color: white;
--   display: none;
}

#grafika td.double {
   border-bottom: 2px solid black;
}

#grafika td.gradient {
   background-image: linear-gradient(to right, white, silver);
   padding: 2px;
   height: 17px;
   white-space: nowrap;
}

#grafika td.dn0 {
   background-color: #dddddd;
   display: none;   
}

#grafika td.dn1, td.dn2, td.dn3, td.dn4, td.dn5 {
   background-color: #ffc;
   display: none;   
}

#grafika td.pok {
   background-color: #ffffff;
}

#grafika td.dn6 {
   background-color: #eeeeee;
   display: none;
}

#pokoje {
   margin: 50px 0 0 10px;   
}

.objSelect {
  cursor: pointer;
}

.objInput {
   display: inline-block;
   padding: 2px 5px;
   font-size: 15px;
   line-height: 1.42857143;
}

.objInputDate {  
   background-image: url("img/calendar.png");
   background-repeat: no-repeat;
   background-position-x: 100%;
   background-position-y: 50%;
   background-size: initial;
   background-repeat-x: no-repeat;
   background-repeat-y: no-repeat;
   background-attachment: initial;
   background-origin: initial;
   background-clip: initial;
   font-size: 15px;
   padding: 1px 5px;
} 

.submit1 {
  font-size:18px;
  background-color:#ffff00;
}
  
.submit2 {
  font-size:18px;
  background-color:#ff99ff;
}
  
.submit3 {
  font-size:18px;
  background-color:#00ffaa;
}
  
.submit4 {
  font-size:18px;
  background-color:#cc9966;
}
  
.submit5 {
  font-size:28px;
  background-color:#ffff00;
  cursor: pointer;
}
  
.submitPop {
  background-image: url('img/edit25.png');
  width: 25px;
  height: 25px;
  border: 0;
}

.submitDel, #submitDelSlow11, #submitDelSlow12, #submitDelSlow13, #submitDelSlow14, #submitDelSlow15, #submitDelSlow16, #submitDelSlow17, #submitDelSlow18, #submitDelSlow19, #submitDelSlow22, #submitDelSlow24 {
  background-image: url('img/delete25.png');
  width: 25px;
  height: 25px;
  border: 0;
}

.submitKalend {
  background-image: url('img/kalend25.png');
  width: 25px;
  height: 25px;
  border: 0;
  cursor: pointer;
}

.submitRez {
  background-image: url('img/rezerw25.png');
  width: 25px;
  height: 25px;
  border: 0;
}

.kalendarz {
  padding: 20px 10px 10px 10px;
}

.bok {   /* menu boczne */
  position: fixed;
  font-size: 13px;
  top: 40px;
  left: 0;
/*  padding: 10px 10px 10px 10px; */
  background-color: #997733;
}

.bok a {   /* pozycje menu bocznego */
  display: block;
  text-decoration:none;
  color:#ffffff;
  padding: 10px 10px 10px 10px;
  border-bottom: 1px solid #005392;
}

.bok a:hover { background-color:#555577; }
.bok a.now { background-color:red; color:yellow; }

.scrollable-bok {
  text-align: left;
  z-index: 1000;
  left: 0;
  width: 85%;
  height: 100%;
  padding: 15px 10px 10px 130px;
}

.male {
   font-size: small;
}

.duze {
   font-size: large;
}

.bold {
   font-weight: bold;
}

.blue {
   color:blue;
}

.silver {
   font-weight: bold;
   background-color: #e0e0e0;
}

.strzala_lewa {
   position: absolute;
   top: 63px;
   left: 122px;
}

.strzala_prawa {
   position: absolute;
   top: 63px;
   left: 169px;
}

.strzala_lewaPos {
   position: absolute;
   top: 114px;
   left: 122px;
}

.strzala_prawaPos {
   position: absolute;
   top: 114px;
   left: 169px;
}

#datepicker1 {
   position: absolute;
   top: 66px;
   left: 133px;
   display: none;
   z-index: 100;
}

.ui-datepicker {
   background: #FFCCFF;
}

.ui-datepicker-week-end a {
    color: red !important;
}

.footer {
   color: #ffffff;
   font-size: 13px;
   padding: 5px 10px 5px 10px;
   background-image: url("img/top.png");
   background-repeat: repeat-x;
/*   background-position: top; */
   position: fixed;
   left: 0;
   bottom: 0;
  -moz-border-top-right-radius: 100px;
  -webkit-border-top-right-radius: 100px;
  -khtml-border-top-right-radius: 100px; 
   border-top-right-radius: 100px;
}

.footer a {
   color: #ffffff;
   font-size: 13px;
   border-right: 1px solid #cccccc; 
   padding-right: 5px;
   text-decoration: none;
   background-color: transparent;
}


.footer a:hover {
  text-decoration: underline;
  color: yellow;
}

.footer2 {
   color: #ffffff;
   font-size: 13px;
   padding: 5px 10px 5px 10px;
   background-image: url("img/top.png");
   background-repeat: repeat-x;
/*   background-position: top; */
   position: fixed;
   right: 0;
   bottom: 0;
  -moz-border-top-left-radius: 100px;
  -webkit-border-top-left-radius: 100px;
  -khtml-border-top-left-radius: 100px; 
   border-top-left-radius: 100px;
}

.footer2 a {
   color: #ffffff;
   font-size: 13px;
/*   border-left: 1px solid #cccccc; */
   padding-left: 5px;
   text-decoration: none;
   background-color: transparent;
}


.footer2 a:hover {
  text-decoration: underline;
  color: yellow;
}

.button-menu {position:absolute; list-style-type:none; background-color:blue; border:5px solid #f0f0f0; padding:0 1px; margin-top:-6px; margin-left:10px;}
.button-menu button {width:100%; text-align:left; margin:0; font-size:24px; background-color:yellow;}
.button-menu li {padding:1px 0; margin:2px;}
.button-menu2 {position:fixed; background-color:yellow; border:1px solid #f0f0f0; padding:0 1px; display:none;}

.link_modal {
   text-decoration: none;
}

/* The Modal (background) */
.H-modal {
   display: none;         /* Ukryj domyślnie */
   position: fixed;       /* miejsce okna */
   z-index: 5;            /* Sit on top */
   padding-top: 50px;     /* odstęp okna Modal od góry */
   padding-bottom: 50px;  /* odstęp okna Modal od dołu */
   left: 0;
   top: 0;
   width: 100%;           /* Szerokość okna */
   height: 100%;          /* Wysokość okna */
   overflow: auto;        /* Zezwój na scroll gdy potrzeba */
   background-color: rgb(0,0,0);      /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* The Modal3 (background) */
.H-modal3 {
   display: none;         /* Ukryj domyślnie */
   position: fixed;       /* miejsce okna */
   z-index: 5;            /* Sit on top */
   padding-right: 50px;   /* odstęp okna Modal od prawej */
   padding-bottom: 50px;  /* odstęp okna Modal od dołu */
   right: 0;
   bottom: 0;
   width: 100%;           /* Szerokość okna */
   height: 90%;           /* Wysokość okna */
   overflow: auto;        /* Zezwój na scroll gdy potrzeba */
   background-color: rgb(0,0,0);      /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.H-modal-content1 {
   position: absolute;
   background-color: #fefefe;
   margin: auto;
   padding: 0;
   border: 1px solid #888;
   right: 20px;
   top: 50px;
   width: 300;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
   -webkit-animation-name: animatetop;
   -webkit-animation-duration: 0.5s;
   animation-name: animatetop;
   animation-duration: 0.5s;
}

/* Modal Content2 */
.H-modal-content2 {
   position: auto;
   background-color: #fefefe;
   margin: auto;
   padding: 0;
   border: 1px solid #888;
   top: 50px;
   width: 90%;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
   -webkit-animation-name: animatebottom;
   -webkit-animation-duration: 1s;
   animation-name: animatebottom;
   animation-duration: 1s;
}

/* Modal Content3 - samouczek */
.H-modal-content3 {
   position: absolute;
   background-color: #fefefe;
   margin: auto;
   padding: 0;
   border: 1px solid #888;
   bottom: 50px;
   right: 20px;
   width: 75%;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
   -webkit-animation-name: animatebottom;
   -webkit-animation-duration: 1s;
   animation-name: animatebottom;
   animation-duration: 1s;
}

/* Add Animation */
@-webkit-keyframes animatetop {
   from {top:-300px; opacity:0} 
   to {top:50px; opacity:1}
}

@keyframes animatetop {
   from {top:-300px; opacity:0}
   to {top:50px; opacity:1}
}

@-webkit-keyframes animatebottom {
   from {bottom:-300px; opacity:0} 
   to {bottom:50px; opacity:1}
}

@keyframes animatebottom {
   from {bottom:-300px; opacity:0}
   to {bottom:50px; opacity:1}
}

.H-modal-header h2, .H-modal-footer form, .H-modal-footer h5 {
   margin-top:8px; 
   margin-bottom:8px;
}

/* The Close Button */
.H-close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
    align: center;
}

.H-close:hover,
.H-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.H-modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
    text-align: center;
}

.H-modal-error {
    padding: 2px 16px;
    background-color: yellow;
    color: red;
    text-align: center;
}
.H-modal-body {
    padding: 2px 16px;
}

.H-modal-footer {
   padding: 2px 16px;
   background-color: #5cbbcc;
   color: white;
   text-align: center;
}

.hiddenDiv {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.check {
  width: 25px;
  height: 25px;
  position: relative;
}

.check input {
  display: none;
}

.check input:checked + .box {
  background-color: #b3ffb7;
}

.check input:checked + .box:after {
  top: 0;
}

.check .box {
  width: 25px;
  height: 25px;
  transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
  border: 2px solid transparent;
  background-color: white;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 5px rgba(0, 0, 0, 0.2);
}

.check .box:after {
  width: 50%;
  height: 20%;
  content: '';
  position: absolute;
  border-left: 7.5px solid;
  border-bottom: 7.5px solid;
  border-color: blue;
  transform: rotate(-45deg) translate3d(0, 0, 0);
  transform-origin: center center;
  transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
  left: 0;
  right: 0;
  top: 200%;
  bottom: 5%;
  margin: auto;
}  

/* jQuery UI Datepicker moving pixels fix */
table.ui-datepicker-calendar {border-collapse: separate;}
.ui-datepicker-calendar td {border: 1px solid transparent;}

/* jQuery UI Datepicker hide datepicker helper */
#ui-datepicker-div {display:none;}

/* jQuery UI Datepicker emphasis on selected dates */
.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
	background: #743620 none;
	color: white;
}

.display_none {
   display: none;
}

.rezerw0 {
   cursor: default;
}

.rezerw1 {
   cursor: pointer;
   background-color: blue;
   margin-top: -1px;
   margin-left: 44px;
   margin-right: -5px;
   height: 33px;
  -moz-border-top-left-radius: 30px;
  -webkit-border-top-left-radius: 30px;
  -khtml-border-top-left-radius: 30px; 
   border-top-left-radius: 30px;
  -moz-border-bottom-left-radius: 30px;
  -webkit-border-bottom-left-radius: 30px;
  -khtml-border-bottom-left-radius: 30px; 
   border-bottom-left-radius: 30px;
   z-index: 1;
}

.rezerw2 {
   cursor: pointer;
   background-color: blue;
   margin-top: -1px;
   margin-left: -5px;
   margin-right: -5px;
   height: 33px;
   z-index: 1;
}

.rezerw3 {
   cursor: pointer;
   background-color: blue;
   margin-top: -1px;
   margin-left: -5px;
   margin-right: 44px;
   height: 33px;
  -moz-border-top-right-radius: 30px;
  -webkit-border-top-right-radius: 30px;
  -khtml-border-top-right-radius: 30px; 
   border-top-right-radius: 30px;
  -moz-border-bottom-right-radius: 30px;
  -webkit-border-bottom-right-radius: 30px;
  -khtml-border-bottom-right-radius: 30px; 
   border-bottom-right-radius: 30px;
   z-index: 1;
}

.rezerw1a {
   cursor: pointer;
   position: absolute;
   background-color: blue;
   margin-top: -17px;
   margin-left: 44px;
   margin-right: -5px;
   height: 33px;
   width: 40px;
  -moz-border-top-left-radius: 30px;
  -webkit-border-top-left-radius: 30px;
  -khtml-border-top-left-radius: 30px; 
   border-top-left-radius: 30px;
  -moz-border-bottom-left-radius: 30px;
  -webkit-border-bottom-left-radius: 30px;
  -khtml-border-bottom-left-radius: 30px; 
   border-bottom-left-radius: 30px;
   z-index: 1;
}

.rezerw3a {
   cursor: pointer;
   position: absolute;
   background-color: blue;
   margin-top: -17px;
   margin-left: -5px;
   margin-right: 40px;
   height: 33px;
   width: 40px;
  -moz-border-top-right-radius: 30px;
  -webkit-border-top-right-radius: 30px;
  -khtml-border-top-right-radius: 30px; 
   border-top-right-radius: 30px;
  -moz-border-bottom-right-radius: 30px;
  -webkit-border-bottom-right-radius: 30px;
  -khtml-border-bottom-right-radius: 30px; 
   border-bottom-right-radius: 30px;
   z-index: 1;
}

.opis_rez {
   position:relative;
   color:white;
   left: 8px;
   top: 7px;
   white-space: nowrap;
   z-index: 2;
}

.opis_rez2 {
   position:relative;
   color:yellow;
   left: -32px;
   top: 7px;
   white-space: nowrap;
   z-index: 2;
}

.status_konta {
  position: fixed;
  font-size: 12px;
  right: 0;
  top: 40px;
  padding: 5px 10px 5px 20px;
  border-bottom-left-radius: 30px;
  background-color: #99ff99;
}