/* CSS Document */
  html, body  {padding: 0; margin: 0; font-size: 16px; font-family: Calibri;}
  .bas  {background: #666;}
  /* title a menu */
  .titlez  {background: url("../images/slovanka_zima.jpg") center top no-repeat fixed; height: 320px; width: 100%; border: solid 0px red;}
  .titlel  {background: url("../images/slovanka_leto.jpg") center top no-repeat fixed; height: 320px; width: 100%; border: solid 0px red;}
  .bs     {position: fixed; top: 20px; left: 20px; box-shadow: 0 0 5px #aaa; z-index: 1000;}
  .bspop  {position: fixed; top: 70px; left: 20px; z-index: 1000; font-size: 1.0em; color: #fff; text-shadow: 0 0 3px #000; letter-spacing: 1.2px; background: rgba(80,80,130,.7); font-weight: bold; padding: 2px 8px 4px 8px; border-radius: 5px;}
  .bs1    {display: inline-block; background: linear-gradient(to bottom, rgba(0,0,80,1), rgba(40,40,125,1), rgba(0,0,80,1)); border-radius: 5px 0 0 5px; padding: 10px 10px 10px 20px; font-size: 1.35em; color: #eee; font-weight: bold; } 
  .bs2    {display: inline-block; background: linear-gradient(to bottom, rgba(220,220,220,1), rgba(255,255,255,1), rgba(220,220,220,1)); border-radius: 0 5px 5px 0; padding: 10px 20px 10px 10px; font-size: 1.35em; color: #558; font-weight: bold; } 
  .bg     {z-index: -1; display: block; position: fixed; top: 0; width: 100%; height: 400px; border: solid 2px red;}
  .bg .bs, bg .titleline {z-index: 1000; }
  .ukazka-img     {height: 550px;}
  .marbott  {margin-top: 400px; position: relative;}
  .editace  {position: fixed;  top: 0px; text-align: center; width: 100%; background: linear-gradient(to right, rgba(255,0,0,0), #f00, rgba(255,0,0,0)); color: #fff; font-size: 1.1em; padding: 5px 0; z-index: 1500;}
 
  /* všeobecné */
  h2      {font-size: 1.2em; font-weight: bold;}
  h3      {font-size: 1em; line-height: 0; margin-bottom: 20px; font-style: italic;}
  .white  {color: #fff;}
  .black  {color: #000;}
  .center {text-align: center;}
  .left   {text-align: left;}
  .right  {text-align: right;}
  .bold   {font-weight: bold;}
  .padditem {padding: 10px;}
  .popisek   {font-size: .9em; color: #ddd;}
  
  /* hlavní layout */
  .livekam  {width: 48%;}
  .bgitembo {width: 50%; min-height: 300px; background: rgba(250,250,250,.8); display: inline-block;}
  .mainitem {width: 100%; min-height: 300px; border-top: solid 10px #fff; z-index: 100; position: relative; top: 0px;}
  .bgitemb  {width: 65%; min-height: 300px; background: rgba(250,250,250,.8);}
  .bgitemw  {width: 65%; min-height: 300px; background: rgba(0,0,0,.7);}
  .bgright  {left: 35%; position: relative;}
  .oddelovac  {width: 100%; height: 30px; text-align: center; font-size: 2.3em;}
  .bt       {position: relative; top: -140px; z-index: 100;}
  .bte      {position: relative; top: -120px; z-index: 100;}
  .ceniklz  {display: inline-block; margin: 10px; border: solid 1px #aaa; padding: 10px; vertical-align: top;} 
  .ceniklz span {min-width: 20px; background: #aaa; padding: 2px 5px;}
  .ceniklz hr   {border: dashed 1px #aaa;}
  
  .o          {background: url("../images/onas.jpg") no-repeat center fixed; background-size: cover;position: relative; top: 0px; z-index: 100;}
  .u          {background: url("../images/ubytovanim.jpg") no-repeat center fixed; background-size: cover;}
  .s          {background: url("../images/jidelnam.jpg") no-repeat center fixed; background-size: cover;}
  .d          {background: url("../images/dopravam.jpg") no-repeat center fixed; background-size: cover;}
  .k          {background: url("../images/kaplem.jpg") no-repeat center fixed; background-size: cover;}
  .l          {background: url("../images/letom.jpg") no-repeat center fixed; background-size: cover;}
  .z          {background: url("../images/zimam.jpg") no-repeat top fixed; background-size: cover;}
  .c          {background: url("../images/cenikm.png") no-repeat center fixed; background-size: cover;}
  .r          {background: url("../images/rezervacem.jpg") no-repeat center fixed; background-size: cover;}
  .m          {background: url("../images/kontaktym.jpg") no-repeat center fixed; background-size: cover;}
  
.toprest        {padding: 0px 0px 40px 0px; }
.stintext       {font-size: 1.2em;}
.edrest         {visibility: hidden; width: 300px; background: linear-gradient(to bottom,rgba(0,0,80,1), rgba(40,40,125,1), rgba(0,0,80,1)); position: relative; top: -60px; padding: 10px 0px; color: #fff; font-size: 1em; z-index: 100; margin: 0 auto; z-index: 500;}
.restaurace     {visibility: hidden; animation-name: sjet; animation-duration: 2s; width: 300px; background: linear-gradient(to bottom, rgba(0,0,80,1), rgba(40,40,125,1), rgba(0,0,80,1)); position: relative; top: -90px; padding: 20px 10px 20px 10px; color: #fff; font-size: 1em; z-index: -1; margin: 0 auto; z-index: 2000; border: solid 10px #000; box-shadow: 5px 7px 10px #aaa; border-radius: 3px;}
@keyframes sjet {
  from {position: relative; top: -600px;}
  to {top: -90px;}
}
  .livekam    {display: inline-block; text-align: center; vertical-align: top; position: relative; padding-top: 20px;}
  .kamera     {border: solid 5px #fff; text-align: center; height: 230px; width: 400px; box-shadow: 5px 5px 15px #aaa;}
  .cenik1, .cenik2   {display: inline-block;}
  .cenik1     {width: 135px; padding: 5px 0px 5px 0; color: #ddd; font-size: .95em;}
  .cenik2     {width: 105px; text-align: right;}
  //.formrezerv {box-shadow: 2px 2px 7px #aaa; padding: 10px; border: solid 1px #888; background: linear-gradient(to bottom, rgba(0,0,80,1), rgba(40,40,125,1), rgba(0,0,80,1));}
  .formrezerv {box-shadow: 2px 2px 7px #aaa; padding: 10px; border: solid 1px #888; background: linear-gradient(to bottom, rgba(80,80,130,.7), rgba(120,120,170,.7), rgba(80,80,130,.7));}
  .formrezerv input[type=text],
  .formrezerv select,
  .tarea,
  .formrezerv input[type=submit]  {width: 260px;}
  .formrezerv input[type=submit]  {padding: 10px 0; font-size:  1.1em; font-weight: bold; border-radius: 5px; box-shadow: 0px 0px 15px #fff; background: linear-gradient(to bottom, rgba(0,0,80,1), rgba(40,40,125,1), rgba(0,0,80,1)); color: #fff;}
  .inforezervace, .inforezervace a  {font-size: .9em; color: #fff;}
  .mapa       {position: relative; top: 10px;}
  
   /* editor */
  .nazevinz             {position: relative: left: 25px; width: 300px;} 
  .butdel               {border: solid 2px #f00; border-radius: 5px; font-weight: bold; color: #f00; position: absolute; top: 3px; right: 3px; width: 30px; height: 30px; font-size: 1.3em; padding-bottom: 30px; cursor: pointer;}
  .butedit              {width: 100%; background: #000080; color: #fff; padding: 10px 0; font-size: 1.1em; cursor: pointer; border-radius: 5px;}
  .item-editor          { position: fixed; top: 100px; left: 0px;  width: 100%; z-index: 1000; border: solid 1px #aaa; background: #fff; padding: 10px;}
  .item                 {display: inline-block; border: solid 1px #aaa; text-align: center;}
  .item img             {width: 22px; border: solid 1px #aaa; border-radius: 3px; cursor: pointer;}
  .item button          {border: none; background: transparent; width: 24px; padding: 0; margin: 0 2px;}
  .editor               {background: #fff; width: 100%; height: 200px;}
  .editdiv              {cursor: pointer;}
  .editdiv:hover        {background: #aaa;}
  #n1:hover, #n2:hover, #n3:hover, #n4:hover, #n5:hover, #n6:hover, #n7:hover,
  #c1:hover, #c2:hover, #c3:hover, #c4:hover, #c5:hover, #c6:hover, #c7:hover, #c8:hover, #c9:hover, #c10:hover, #c11:hover,
  #ot1:hover, #ot2:hover
                        {background: #aaa;}
                                             
  /* patička */
  .footer {width: 100%; min-height: 50px; background: #222; color: #fff; border-top: solid 5px #fff;}
  .footerleft   {display: inline-block; width: 49%; text-align: center;}
  .footerright  {display: inline-block; width: 49%; text-align: left; padding:10px; font-size: .8em;}
  .footerbottom {font-size: .9em; text-align: center; padding-bottom: 10px;}
  .footerbottom a {font-size: .9em; color: #fff;}
  
  @media only screen and (max-width: 900px)  {
  /* title a menu  */
  .kamera {height: 173px; width: 300px;}
  .title  {background: url("../images/bouda3.jpg") center top no-repeat fixed; height: 250px; width: 100%; border: solid 0px red;}
  //.bs     {position: fixed; top: 20px; left: 10px; box-shadow: 0 0 5px #aaa;}
  //.bs1    {display: inline-block; background: linear-gradient(to bottom, rgba(0,0,80,1), rgba(40,40,125,1), rgba(0,0,80,1)); border-radius: 5px 0 0 5px; padding: 5px 5px 5px 10px; font-size: 1.35em; color: #eee; font-weight: bold; } 
  //.bs2    {display: inline-block; background: linear-gradient(to bottom, rgba(220,220,220,1), rgba(255,255,255,1), rgba(220,220,220,1)); border-radius: 0 5px 5px 0; padding: 5px 10px 5px 5px; font-size: 1.35em; color: #558; font-weight: bold; } 
  //.bs       {left: 10px;}
  //.bs1      {padding: 5px 5px 5px 10px;}
  //.bs2      {Padding: 5px 10px 5px 5px;}
  /* hlavní layout */
  .bgitemb, .bgitemw  {width: 80%;}
  .bgright  {position: relative; left: 20%;}
  .livekam, .mainitem {width: 100%;}
  .bgitembo {width: 80%;}
  
  /* patička */
  .footerleft, .footerright {display: block; text-align: center; width: 100%;}
  }