body {
	/*background: url('obrazky/pozadi_modre.png')  #1c2228; url('obrazky/pozadi_voda54.png') pozadi_voda5 url('obrazky/pozadi_voda5.png'); /* url('obrazky/pozadi_sede.png') #1c2228;   /*#1c2228;* #0066FF;*/
        background: #d3ebff;  /* #bfe1fc #d0e3f7 #c4ddf5#bcf0f2;  #bcd9f2 #e3f7ed  #cce3f4#9dceff#67dada; */
        margin: 100px 0px 0px 0px;
	font: 14px Verdana;
	min-width: 850px;
        /*z-index: -1;*/
}

h2, h3, h5, h6 {
	text-align: center;
	color: #0a294b;
	font-family: Arial;
	text-shadow: 3px 3px 7px #666666;
}

h2 {
	font-size: 1.3em;
        text-align: left;
        /*width: 95%;*/
}

h1 {
	font-size: 2em;
	font-weight: normal;
	color: white;
	text-align: left;
	text-shadow: 2px 2px 1px #0a294b;
}
.h11 {
	font-size: 10px;
	font-weight: normal;
	color: white;
	text-align: right;
	text-shadow: 2px 2px 1px #0a294b;
}
.h12 {
	font-size: 1.2em;
	font-weight: normal;
	color: darkgreen;
	text-align: right;
	text-shadow: 3px 3px 7px #666666;
        margin-left: 13px;
}

h3 {
        font-size: 1em;
        text-align: left;
        /*width: 50%;*/
}

h4 {
        font-size: 1em;
        text-align: left;
       font-family: Arial;
       font-style: normal;
       font-weight: normal;
       color: darkblue;
       width: 90%;
       /*overflow-wrap: normal;*/
       /*word-break: break-all;*/
        /*align-items: stretch;*/
        white-space: pre-wrap;
}
.titlebig {
        font-size: 1.3em;
        text-align: left;
        color: #0a294b;
        /*color: darkblue;*/
	font-family: Arial;
        font-weight: bold;
	text-shadow: 3px 3px 7px #666666;
}
.title {
        font-size: 1.1em;
        text-align: left;
        color: #0a294b;
        /*color: darkblue;*/
	font-family: Arial;
        font-weight: bold;
	text-shadow: 3px 3px 7px #666666;
}
.note {
        font-size: 1em;
        text-align: left;
        /*color: #0a294b;*/
        color: darkblue;
	font-family: Arial;
        /*font-weight: bold;*/
}
#logo {
    
	/*background: url('obrazky/pozadi1.jpg')  no-repeat;*/
        /*background-image:  url('obrazky/pozadi1.jpg')  no-repeat;*/
                  
	/*width: 180px;*/
	/*height: 105px;*/
	float: left;
        margin: 7px 0px 0px 5px;
         /*background-size: 95px;*/
}

#logo h1 {	
	margin: 15px 0px 0px 10px;
}

nav{
    margin: 0px auto;
	/*width: 960px;*/
    min-width: 920px;    
}
/* obtekani obrazku */
.floatleft
{
float: left;
margin: 0px 10px 0px 0px;
/*border: 1px solid #666;*/
padding: 2px;
border-radius: 5px;
}
.vyraznytext
{
    font-size: 16px;
    font-weight: bold;
    color:  #a50000;
}
        
nav ul {
    	background: #efefef; 
        background-color: transparent;
        color: white;
	padding: 0 10px;
	border-radius: 3px;  
	list-style: none;
	position: relative;
	/*display: inline-table;*/
        margin: 0 1px;
	list-style-type: none;
        align-items: center;
        text-shadow: 2px 2px 1px red;    /* #0a294b;*/
        
}

	nav ul:after {
		content: ""; clear: both; display: block;
	}                        
nav ul li {
	float: left;
      	padding: 0px 5px;
	margin:  0 1px;
	font-size: 18px;
	/*height: 25px;*/
	/*line-height: 1.5em;*/
        border-width: 1px;
        border-radius: 3px;
        
}
nav ul li:hover, .aktivni {
	background: tomato; /* #ffbb00;*/
	box-shadow: 0px 0px 5px black;
 }

nav a {
    color: white;
    text-decoration: none;
}

nav ul li a {
    display: block; 
    padding: 0px 5px;
    color: white;
    text-decoration: none;
    text-align: center;
}
nav ul ul {
    background: #187fb7; /*gray;*/
    color: white;
    border-radius: 3px; 
    padding: 0;
    position: absolute; 
    top: 100%;
    z-index: 1;
    display: none;
}

nav ul li:hover > ul {
    display: block;
}
nav ul ul li {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}
nav ul ul li a {
    /*padding: 15px 40px;*/
    color: #fff;
    background: #187fb7; /*gray;*/
    font-size: 17px;
    min-width: 120px;
}	
nav ul ul li a:hover {
    background: tomato; /* #ffbb45;*/
    color: white;
}
 nav ul ul ul {
	position: absolute; 
        left: 100%; 
        top:0;
}       

.but {
    background-color: #e3f7ed;  /* #a0bad4;  /* #a3d4a0;  /* #4CAF50; /* Green */
    /*border: none;*/
    border-color: darkcyan;
    border-width: 1px;
    color: red; /* darkblue;    /* white;*/
    /*padding: 2px 10px;*/
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    border-radius: 3px;
    /*cursor: grabbing;*/
}
.but:hover {
    color: #FFF;
    background-color:  #ffbb00;
    cursor:  pointer;
}

.centrovany  {
	text-align: center;
}

#centrovac {
	margin: 0px auto;
	width: 1300px;
        /*width: 1500px;*/
        /*background: url('obrazky/pozadi_modre.png') #009aca;*/
}

header {
	height: 100px;
	position: fixed;
        z-index: 1;
	top: 0px;
	/*background: url('obrazky/pozadi_sede.png') #1c2228;*/
        /*background: url('obrazky/pozadi_voda32.png');*/ 
        /*background-repeat: repeat;*/
        /*background-image: url("obrazky/pozadi12.jpg"), url("obrazky/pozadi_voda32.png");*/
        background-image: url("obrazky/plav_skola72.jpg"), url("obrazky/voda_back1.jpg");
    background-repeat: no-repeat, repeat;
    /*background-color: #cccccc;*/
	width: 100%;
}
.header2 {
	/*height: 25px;*/
	/*position: inherit;     fixed;*/
	/*top: 72px;*/
	/*background: url('obrazky/pozadi_sede.png') #1c2228;*/
	width: 100%;
        /*align-content: flex-start;*/
        /*background-color: burlywood;*/
}
.uvodpage{
    width: 300px;
    float: left;  
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding-top:  0px;
    
}

article {
/*	background: url('obrazky/pozadi.png') #009aca;*/
        /*background: url('obrazky/pozadi_voda5.png') #009aca;*/
        /*background:  #67dada;    url('obrazky/pozadi_modre.png') #009aca; */
	padding: 10px 0px;
         min-height: 580px;
}

article header {
	width: 300px;
	float: left;  
	position: static;
	background: none;
        
}

article section {
	width: 666px;
	float: left; 
	background: white;
	border: 2px solid #006797;
	box-shadow: 2px 2px 7px #1c2228;
	padding: 10px;
        /*min-height: 530px;*/
        border-radius: 6pt;
}

form {
    font-size: 12px;
    font-style: italic;
    color:  navy;
}

footer {
	height: 40px;
	color: white;
    margin: 20px 0 0 30px;
}

footer a {
	color: 	#ffbb00;
	text-decoration: none;
}

.cistic {
	clear: both;
}

.vlevo {
	float: left;
}
.editbox {
   width: 97%;
   max-width: 99%;
   font-size: 14px;
   font-family: Arial;
   font-style: normal;
   font-weight: normal;
   background-color: #e3f7ed;
}
.editbox2 {
   width: 50%;
   font-size: 14px;
   background-color: #e3f7ed;   /* // #faedd6;*/
}
.editbox3 {
   width: 98%;
   max-width: 650px;
   font-size: 14px;
   font-family: Arial;
   background-color:  #e3f7ed;
}
.editbox4 {
   width: 500px;
   font-size: 14px;  
   background-color:  #e3f7ed;
}
.editbox5 {
   width: 11%;
   font-size: 14px;
   background-color:  #e3f7ed;
}
.editbox6 {
   width: 30%;
   font-size: 14px;
   background-color:  #e3f7ed;  
}
.editbox7 {
/*   width: 30%;*/
   font-size: 14px;
   background-color:  #e3f7ed;  
}
.editboxAR {
   width: 5%;
   font-size: 14px;
   background-color:  #e3f7ed;
}
.editboxDD {
   max-width: 250px;
   font-size: 14px;
   background-color:  #e3f7ed;
}
.tdbut{
    width: 300px;
}

#dovednosti  td {
	width: 33%;
	padding: 10px;
	vertical-align: top;
	border: 1px solid gray;
}

#dovednosti {
	border-collapse: collapse;
}

#reference img {
	border: 1px solid gray;
	padding: 6px;
	box-shadow: 3px 3px 6px #999999;
	margin-right: 6px;
}
/* pro priklad samlpe.html */
#dialogoverlay{
    display: none;
    opacity: .8;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #FFF;
    width: 100%;
    z-index: 10;
}
#dialogbox{
    display: none;
    position: fixed;
    background: #000;   
    border-radius: 3px;
    width: 350px;
    z-index: 10;  
}
#dialogbox > div{background: #FFF; margin: 3px;}
/*#dialogbox > div > #dialogboxhead{background:  #666; font-size: 19px; padding: 10px; color: #CCC;}*/
#dialogbox > div > #dialogboxhead{background: #009aca; font-size: 14px; padding: 5px; color: #FFF;}
/*#dialogbox > div > #dialogboxbody{background: #333; padding: 20px; color: #FFF;}*/
#dialogbox > div > #dialogboxbody{background: #FFF; padding: 20px; color:  #000;}
/*#dialogbox > div > #dialogboxfoot{background: #666; padding: 10px; text-align: right;}*/
#dialogbox > div > #dialogboxfoot{background: #CCC; padding: 5px; text-align: right;}
/*  */
#showbox{
    display: none;
    /*none;*/
    position: fixed; 
    /*// fixed;*/
    background: #000;   
    border-radius: 4px;
    /*width: 90%;*/
    z-index: 10;  
    align-self: center;
}
#showbox > div{background: #FFF; margin: 3px; align-self: center }
#showbox > div > #showboxheader{background: #CCC; padding: 5px; text-align: right;}
/*#dialogbox > div > #dialogboxbody{background: #333; padding: 20px; color: #FFF;}*/
/*#showbox > div > #showboxbody{background: #FFF; padding: 20px; color:  #000; text-align: right;}*/
#showbox > div > #showboximg{background: #FFF; padding: 20px; color:  #000; text-align: center;}
/*#dialogbox > div > #dialogboxfoot{background: #666; padding: 10px; text-align: right;}*/
#showbox > div > #showboxfoot{background: #CCC; padding: 5px; text-align: right;}

a.role
         {
         text-decoration:none;
         font-size : 14px;
         font-weight:800;
         font-family: Arial, Helvetica, sans-serif;
         color:#0066FF;
         }
         
 .tableuvod{
       width: 100%;
       
 } 
 .tableuvodtd{
     border-bottom-style: solid; 
     border-bottom-width: 0.5px; 
     border-bottom-width: 100%;
     border-bottom-color:  #009aca;
 }
 .tableuvodtdnabor{
/*     background: #ffffcc;*/
 /*    lightgoldenrodyellow
     border-bottom-style: double; 
     border-bottom-width: 2px; 
     border-bottom-width: 100%;
     border-bottom-color:  #a50000;*/
 }
 .albauvod{
   width: 400px;
	float: left;  
	position: static;
        background-color: lightcyan;
        border-radius: 6pt;
/*	background: none;
        border: none;
        box-shadow: none;*/
 }
 .albaapp{
   width: 666px;
	float: left;  
	position: static;
        background-color: lightcyan;
        border-radius: 6pt;
/*	background: none;
        border: none;
        box-shadow: none;*/
 }
 .datebox{
     float: right;
     font-size: 12px;
     margin-right: 6px;
     font-family: Arial;
     font-style: normal;
     color: black;
     font-weight: normal;
     text-shadow: none;
     /*border-bottom-style: hidden;*/
 }
 
 .prevbox{
     float: left;
     font-size: 13px;
     margin-right: 6px;
     font-family: Arial;
     font-style: normal;
     color: #006797;
     font-weight: normal;
     text-shadow: none;
}
 .prevboxneakt{
     float: left;
     font-size: 13px;
     margin-right: 6px;
     font-family: Arial;
     font-style: normal;
     color: #999999; 
     font-weight: normal;
     text-shadow: none;
     /*border-bottom-style: hidden;*/
 }
 .nextbox{
     float: right;
     font-size: 13px;
     margin-right: 6px;
     font-family: Arial;
     font-style: normal;
     color: #006797;
     font-weight: normal;
     text-shadow: none;
 }
 .nextboxneakt{
     float: right;
     font-size: 13px;
     margin-right: 6px;
     font-family: Arial;
     font-style: normal;
     color: #999999;
     font-weight: normal;
     text-shadow: none;
 }
 .tableclub{
    font-size: 11px;
    font-style: italic;
    color:  navy;
    text-align: left;
    
    }
.tableclubborder{
    width:100%; 
    /*border-top-style: solid;*/ 
    border-bottom-style: solid; 
    border-width: 1px; 
    border-color: black;
}
.tableclub1{
    font-size: 12px;
    /*font-style: italic;*/
    color:  navy;
    text-align: left;
    }
.nadpisclub{
        text-align: center;
	color: #0a294b;
	font-family: Arial;
	text-shadow: 3px 3px 7px #666666;
        font-size: 1.1em;
        font-weight: bold;
        text-align: center;
        border-bottom-style:  solid;
    border-width: 1px; 
    border-color: black;
    }
/* Tooltip container */
.tooltip {
    background-color: transparent;   /* transparent; /* Green */
    /*border: none;*/
    color: white;
    /*padding: 2px 10px;*/
/*    text-align: center;
    text-decoration: none;
    display: inline-block;*/
    /*font-size: 16px;*/
    /*border-radius: 3px;*/
    /*position: relative;*/
/*    display: inline-block;
    border-bottom: 1px dotted black;  If you want dots under the hoverable text */
}
.tooltip:hover {
    /*background-color: #ffbb00 ;  Green */
    cursor:  pointer;
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 100px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    font-size: 12px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
/* button */
.buttontip {
    background-color: #4CAF50; /* Green */
/*    border: none;*/
    border-color: darkcyan;
    border-width: 1px;
    color: white;
    padding: 0px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 3px;
    /*position: relative;*/
/*    display: inline-block;
    border-bottom: 1px dotted black;  If you want dots under the hoverable text */
}
.buttontip:hover {
    background-color: #ffbb00 ; /* Green */
    cursor:  pointer;
}
/* Tooltip text */
.buttontip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    font-size: 12px;
    
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.buttontip:hover .tooltiptext {
    visibility: visible;
    cursor:  pointer;
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

/*.inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
}*/

.inputfile:focus + label,
.inputfile + label:hover {
    background-color:  #ffbb45;   /* #ffbb00;red;#ffbb00*/
    color:  #FFF;
}
/*.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}*/
.inputfile:focus + label,
.inputfile.has-focus + label {
    /*outline: 1px dotted #000;*/
    outline: 0.5px solid  darkcyan;
    outline: none; border: 1px darkcyan solid;
    outline: none; border-right: 1px  #0a294b solid;
    outline: none; border-bottom: 1px  #0a294b solid;
    /*outline: -webkit-focus-ring-color auto 5px;*/
    color: #FFF;
    /*background-color:  #f1c88d;*/
    background-color:  #ffbb45;
}
.inputfile + label {
    max-width: 80%;
    /*font-size: 1rem;      1.25rem;*/
     /*20px*/ 
/*    font-weight: 700;*/
    font-style: normal;
    /*outline: 1px solid  orange;*/
    outline: none; border: 0.5px darkcyan solid;
    outline: none; border-right: 1px  #0a294b solid;
    outline: none; border-bottom: 1px  #0a294b solid;
    /*outline: -webkit-focus-ring-color auto 5px;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    /*display: inline-block;*/
    overflow: hidden;
    padding: 1px 20px;
    /*padding: 0.625rem 1.25rem;*/
    background-color: #e3f7ed;  /* #a0bad4;  /* #a3d4a0;  /* #4CAF50; /* Green */
    color: red; /* darkblue;    /* white;*/
    text-align: center;
    text-decoration: none;
    border-radius: 3px;
}

.no-js .inputfile + label {
    display: none;
}

/*.inputfile + label * {
     pointer-events: none; 
     in case of FastClick lib use 
}*/

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}


#galerie {
	margin: 0 auto;	
        /*max-width: 200px;*/
         
}

#galerie img {
/*	border: 1px solid gray;
	padding: 6px;
	box-shadow: 3px 3px 6px #999999;
	margin-right: 6px;*/
        max-width: 660px;
}

#galerieed img:hover {
	/*opacity: 0.7;*/
}


/*.pagination{
    font-size: 13px;
    font-style: italic;
    color: darkgreen;
    text-align: left;
}
.paginationb{
    font-size: 13px;
    font-weight:  bold;
    color: darkgreen;
    text-align: left;
}
.paginationc{
    font-size: 13px;
    font-weight:  bold;
    color: #a50000;
    text-align: left;
}*/

/* style 1 */

/*.inputfile-1 + label {
    color: #f1e5e6;
    background-color: #d3394c;
}

.inputfile-1:focus + label,
.inputfile-1.has-focus + label,
.inputfile-1 + label:hover {
    background-color: #722040;
}*/