body {
  font-family: Capriola, Helvetica, sans-serif;}
.contleft {
float:left;
padding:50px;
border:2px solid #FFFFFF;
min-height:200px;
}
h1 {
    margin-top: 0.25em;
    margin-bottom: 0em;
}
.label {
        margin-right: 4px;
      }
      .row {
	padding-top:2px;
        padding-bottom: 4px;
clear:left;
      }

.contright{
width:550px;
float:right;
padding:50px;
border:2px solid #FFFFFF;
min-height:200px;
}
#map {
        margin-top: 0px;
        margin-bottom: 10px;
        height: 74svh;
        width: 95vw;
      }
@media (pointer: fine), (pointer: none) {
	/* desktop */
#map {
        height: 83.6svh;
      }
}
#container{
width:100%;
height:100%;
background: #0f71ba; /*054372*/
  background: -moz-linear-gradient(top, #0f71ba 0%, #054372 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0f71ba), color-stop(100%, #054372));
  background: -webkit-linear-gradient(top, #0f71ba 0%, #054372 100%);
  background: -o-linear-gradient(top, #0f71ba 0%, #054372 100%);
  background: -ms-linear-gradient(top, #0f71ba 0%, #054372 100%);
  background: linear-gradient(to bottom, #0f71ba 0%, #054372 100%);
  min-height:200px;
}
.newsong {
border:2px solid black;
}
.menu {
float:right;
}
h3 {
    margin-bottom: 0.25em;
}
  .div-table{
  margin-left:auto;
  margin-right:auto;
  display:table;         
  width:80%;         
  background-color:#eee;         
  /*border:1px solid  #666666;*/         
  border-spacing:5px;/*cellspacing:poor IE support for  this*/
}
.div-table-row{
  display:table-row;
  width:auto;
  clear:both;
  min-height:64px;
}
.search {
float: right;
min-width:120px;
min-height:40px;
}
#searchinput {
font-style: italic;
color:silver;
}
.div-table-col{
  float:left;/*fix for  buggy browsers*/
  display:table-column;
  min-height:32px;
  margin-left:8px;
  border-top:1px dotted black;
  padding-top:20px;
  /*width:120px; */        
 /* width:200px;*/         
  /*background-color:#ccc; */
		}


/*tabulka pisne*/

.opensong_big {
border-top:none;
overflow: scroll;
height: 420px;
width:400px;
font-family: monospace;
font-size:13,3333px;
border: solid 1px rgb(169,169,169);
}
.akordy {
font-size:60%;
}

.text, .noty, .akordy, .delete, .edit, .opensong {
min-width: 32px;
}
.name {
width: 200px;

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

.headerm  {
min-height: 32px;
}

.mp3 {
min-width: 300px;
}
.youtube {
border:none;
float:left;
min-width: 32px;
padding-top:12px;
}
.youtubeL {
float:left;
min-width: 160px;
overflow:hidden;
}

.ytlink {
float:left;
min-width:32px;
min-height:32px;
vertical-align: middle;
}
.mp3arrow {
font-size:28px;
}
.mp3link {
font-size:70%;
}
.creator_name {
width:150px;
overflow:hidden;
}
.date {
min-width:70px;
text-align:right;
}
#areatd textarea {
height:600px;
width:100%;
min-width:400px;
}
/*tabulka pisne end*/

.external {
    float:left;
    padding-right: 20px;
    background-image: url(scripts/images/link.png);
    background-repeat: no-repeat;
    background-position: right center;
}


.newsong {
padding:16px;
}

 #prihlaseni {
float:right;
}
.clearb {
clear:both;
}
#msg {
width: 30%;
border: 1px solid black;
background-color: silver;
margin-left:auto;
margin-right:auto;
margin-bottom:15px;
}		
/*css menu*/
@import url(http://fonts.googleapis.com/css?family=Capriola);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  font-family: Capriola, Helvetica, sans-serif;
}
#cssmenu {
  width: auto;
  height: 59px;
  padding-bottom: 4px;
}
#cssmenu.align-right {
  float: right;
}
#cssmenu.align-right ul li {
  float: right;
  margin-right: 0;
  margin-left: 4px;
}
#cssmenu.align-right ul li:first-child,
#cssmenu.align-right ul li:first-child > a {
  border-bottom-right-radius: 3px;
}
#cssmenu #bg-one,
#cssmenu #bg-two,
#cssmenu #bg-three,
#cssmenu #bg-four {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#cssmenu #bg-one {
  height: 10px;
  background: #0f71ba;
}
#cssmenu #bg-two {
  height: 59px;
  z-index: 2;
  background: url('scripts/images/bg.png');
}
#cssmenu #bg-three {
  bottom: 4px;
  height: 55px;
  z-index: 3;
  background: #222222;
  background: -moz-linear-gradient(top, #555555 0%, #222222 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555555), color-stop(100%, #222222));
  background: -webkit-linear-gradient(top, #555555 0%, #222222 100%);
  background: -o-linear-gradient(top, #555555 0%, #222222 100%);
  background: -ms-linear-gradient(top, #555555 0%, #222222 100%);
  background: linear-gradient(to bottom, #555555 0%, #222222 100%);
}
#cssmenu #bg-four {
  bottom: 4px;
  height: 55px;
  z-index: 4;
  background: url('scripts/images/bg.png');
}
#cssmenu ul {
  height: 59px;
}
#cssmenu ul li {
  float: left;
  margin-right: 4px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  z-index: 5;
}
#cssmenu ul li a {
  padding: 24px 30px 20px 30px;
  margin-bottom: 4px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  color: #eeeeee;
  font-size: 15px;
  text-decoration: none;
}
#cssmenu ul li:first-child,
#cssmenu ul li:first-child > a {
  border-bottom-left-radius: 3px;
}
#cssmenu ul li:hover,
#cssmenu ul li.active {
  background: #0f71ba;
  background: -moz-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3fa4f0), color-stop(100%, #0f71ba));
  background: -webkit-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
  background: -o-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
  background: -ms-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
  background: linear-gradient(to bottom, #3fa4f0 0%, #0f71ba 100%);
}
#cssmenu ul li a:hover,
#cssmenu ul li.active > a {
  background: url('scripts/images/bg.png');
  color: #ffffff;
}

.text-container {
  width: -webkit-calc(100% - 80px);
  width: -moz-calc(100% - 80px);
  width: calc(100% - 80px);
  float: left;
  padding: 10px 20px;
  margin: 20px;
  background-color: white;
}

.text-container li {
  padding-top: 5px;
}

@media (pointer: coarse)  {
	/* mobile device */  
body {
  font-family: Capriola, Helvetica, sans-serif;
	font-size:3em;}
h1 {
font-size:1em;
}
input {font-size:1em;}
button {font-size:1em;}
.contleft {
float:left;
padding:50px;
border:2px solid #FFFFFF;
min-height:200px;
}
.contright{
width:550px;
float:right;
padding:50px;
border:2px solid #FFFFFF;
min-height:200px;
}
#container{
width:100%;
height:100%;
background: #0f71ba;/*054372*/
  background: -moz-linear-gradient(top, #0f71ba 0%, #054372 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0f71ba), color-stop(100%, #054372));
  background: -webkit-linear-gradient(top, #0f71ba 0%, #054372 100%);
  background: -o-linear-gradient(top, #0f71ba 0%, #054372 100%);
  background: -ms-linear-gradient(top, #0f71ba 0%, #054372 100%);
  background: linear-gradient(to bottom, #0f71ba 0%, #054372 100%);
  min-height:200px;
}
.div-table {
font-size:0.5em;
}
.newsong {
border:2px solid black;
}
.menu {
float:right;
}
h3 {
    margin-bottom: 0.25em;
}
  .div-table{
  margin-left:auto;
  margin-right:auto;
  display:table;         
  width:80%;         
  background-color:#eee;         
  /*border:1px solid  #666666;*/         
  border-spacing:5px;/*cellspacing:poor IE support for  this*/
}
.div-table-row{
  display:table-row;
  width:auto;
  clear:both;
  min-height:64px;
}
.search {
float: right;
min-width:120px;
min-height:40px;
}
#searchinput {
font-style: italic;
color:silver;
}
.div-table-col{
  float:left;/*fix for  buggy browsers*/
  display:table-column;
  min-height:32px;
  margin-left:8px;
  border-top:1px dotted black;
  padding-top:20px;
  /*width:120px; */        
 /* width:200px;*/         
  /*background-color:#ccc; */
		}


/*tabulka pisne*/

.opensong_big {
border-top:none;
overflow: scroll;
height: 420px;
width:400px;
font-family: monospace;
font-size:13,3333px;
border: solid 1px rgb(169,169,169);
}
.akordy {
font-size:60%;
}

.text, .noty, .akordy, .delete, .edit, .opensong {
min-width: 32px;
}
.name {
width: 200px;

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

.headerm  {
min-height: 32px;
}

.mp3 {
min-width: 300px;
}
.youtube {
border:none;
float:left;
min-width: 32px;
padding-top:12px;
}
.youtubeL {
float:left;
min-width: 160px;
overflow:hidden;
}

.ytlink {
float:left;
min-width:32px;
min-height:32px;
vertical-align: middle;
}
.mp3arrow {
font-size:28px;
}
.mp3link {
font-size:70%;
}
.creator_name {
width:150px;
overflow:hidden;
}
.date {
min-width:70px;
text-align:right;
}
#areatd textarea {
height:600px;
width:100%;
min-width:400px;
}
/*tabulka pisne end*/

.external {
    float:left;
    padding-right: 20px;
    background-image: url(scripts/images/link.png);
    background-repeat: no-repeat;
    background-position: right center;
}


.newsong {
padding:16px;
}

 #prihlaseni {
float:right;
}
.clearb {
clear:both;
}
#msg {
width: 30%;
border: 1px solid black;
background-color: silver;
margin-left:auto;
margin-right:auto;
margin-bottom:15px;
}		
/*css menu*/
@import url(http://fonts.googleapis.com/css?family=Capriola);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  font-family: Capriola, Helvetica, sans-serif;
}
#cssmenu {
  width: auto;
  height: 89px;
  padding-bottom: 4px;
}
#cssmenu.align-right {
  float: right;
}
#cssmenu.align-right ul li {
  float: right;
  margin-right: 0;
  margin-left: 4px;
}
#cssmenu.align-right ul li:first-child,
#cssmenu.align-right ul li:first-child > a {
  border-bottom-right-radius: 3px;
}
#cssmenu #bg-one,
#cssmenu #bg-two,
#cssmenu #bg-three,
#cssmenu #bg-four {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#cssmenu #bg-one {
  height: 10px;
  background: #0f71ba;
}
#cssmenu #bg-two {
  height: 89px;
  z-index: 2;
  background: url('scripts/images/bg.png');
}
#cssmenu #bg-three {
  bottom: 4px;
  height: 85px;
  z-index: 3;
  background: #222222;
  background: -moz-linear-gradient(top, #555555 0%, #222222 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555555), color-stop(100%, #222222));
  background: -webkit-linear-gradient(top, #555555 0%, #222222 100%);
  background: -o-linear-gradient(top, #555555 0%, #222222 100%);
  background: -ms-linear-gradient(top, #555555 0%, #222222 100%);
  background: linear-gradient(to bottom, #555555 0%, #222222 100%);
}
#cssmenu #bg-four {
  bottom: 4px;
  height: 85px;
  z-index: 4;
  background: url('scripts/images/bg.png');
}
#cssmenu ul {
  height: 89px;
}
#cssmenu ul li {
  float: left;
  margin-right: 4px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  z-index: 5;
}
#cssmenu ul li a {
  padding: 24px 30px 20px 30px;
  margin-bottom: 4px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  color: #eeeeee;
  font-size: 45px;
  text-decoration: none;
}
#cssmenu ul li:first-child,
#cssmenu ul li:first-child > a {
  border-bottom-left-radius: 3px;
}
#cssmenu ul li:hover,
#cssmenu ul li.active {
  background: #0f71ba;
  background: -moz-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3fa4f0), color-stop(100%, #0f71ba));
  background: -webkit-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
  background: -o-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
  background: -ms-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
  background: linear-gradient(to bottom, #3fa4f0 0%, #0f71ba 100%);
}
#cssmenu ul li a:hover,
#cssmenu ul li.active > a {
  background: url('scripts/images/bg.png');
  color: #ffffff;
}

}