* {
    box-sizing: border-box;
    margin: 0;
	padding: 0;
    /* outline: 2px solid black; */
}

html,
body
{
    margin: 0;
	padding: 0;
}

body {
    font-family: "Arial", sans-serif;
	font-size: 20px;
  }

canvas {
  /*border: 3px solid #d3d3d3;*/
  	background-color: #000000; /*#e8e8e8;*/
}

.group:before,
.group:after {
	content: " ";
	display: table;
}
.group:after {
	clear: both;
}
.group { *zoom: 1;
}

nav {
    display: inline-block;
    /*background-color: rgb(255,210,210);*/
    height: 43px;
    width: auto; 
}

nav ul {
}

nav li {
    display: inline-block;
}

nav a {
	display: inline-block;
    padding: 10px 32px;
    color: black;
    text-decoration: none;
}

.selected,
nav a:hover {
  background-color: rgb(68,125,204);
  color: white;
}

.menu_img {
  position: relative;
  top: 2px;
  right: 6px;
}

.dlg_img {
  position: absolute;
  left: 4px;
  top: 3px;
}

.close {
	  background-color: red;
	  color: #F88;
	  width: 23px;
	  /*height: 30px;*/
	  text-align: center;
	  line-height: 24px;
	  margin-left: auto;
	  position: absolute;
	  right: 0px;
	  top: 0px;
	  cursor: default; /*aby nemali auto textovy kurzor ale default - sipku*/
}
 
.ok_btn {
}

.btn_div {
	  /*background-color: green;*/
	  /*color: #F88;*/
	  width: 95%; /*100%;*/
	  height: 54px;
	  /*FINTA NA CENTROV. blokovych */
	  position: absolute;
      left: 50%;  /*LH na stred*/
	  bottom: 10px;
	  transform: translate(-50%,0%); /*shift*/
}

.btn_div2 {
	  /*background-color: green;*/
	  /*color: #F88;*/
	  width: 134px;
	  height: 54px;
	  /*FINTA NA CENTROV. blokovych */
	  position: absolute;
      left: 50%;  /*LH na stred*/
	  bottom: 10px;
	  transform: translate(-50%,0%); /*shift*/
}

.btn_div3 {
	  /*background-color: green;*/
	  /*color: #F88;*/
	  width: 143px;
	  height: auto;
	  /*FINTA NA CENTROV. blokovych */
	  position: absolute;
      left: 50%;  /*LH na stred*/
	  top: 22px;
	  transform: translate(-50%,0%); /*shift*/
 }

/* .abtn - toto len by tu mohlo byt*/
.btn_div2 a,
.btn_div a {
	  /*border: 1px solid #FFFFFF;*/
	  width: 122px;
	  display: inline-block;
	  margin: 5px 0px 0px 5px;
      padding: 10px 6px;
      color: black;
      text-decoration: none;
	  text-align: center;
	  /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
}

/*ako hore, len trochu sirsie tlacidla semafora*/
.btn_div3 a {
	  width: 130px;
	  display: inline-block;
	  margin: 5px 0px 0px 7px;
      padding: 10px 18px;
      color: black;
      text-decoration: none;
}

.abtn_up:hover  {
    /*border: 1px solid rgb(0,0,255);*/
	  border-color: rgb(100,100,255);
	/*box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.5);*/
}

.abtn_up {
	  border: 3px solid rgb(235,235,235);
	  border-style: outset;
	  background-color: rgb(225,225,225);
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.abtn_down {
      border: 3px solid rgb(235,235,235);
	  border-style: inset;
	  background-color: rgb(210,210,210);
}

.btn_img {
      position: relative;
      right: 4px;
      top: 2px;
}

.abtn_down .btn_img {
      position: relative;
      right: 2px;
      top: 4px;
}
.btn_img2 {
      position: relative;
      right: 2px;
}
.abtn_down .btn_img2 {
      position: relative;
	  top: 2px;
}
.span_rtext {
      position: relative;
	  top: 1px;
}
.abtn_down .span_rtext {
      position: relative;
      left: 3px;
	  top: 3px;
}

.cDlg {
	  /*border: 1px solid #FFFFFF;*/
	  border-color: #FFFFFF;
	  border-style: solid;
	  border-width: 1px;
	  background-color: rgba(225,225,225,0.9);
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  position: fixed;
      /*display: none; */
}

.title {
	  background-color: rgb(100,100,255);
	  color: #ffffff;
	  text-align: center;
	  line-height: 24px;
 	  cursor: default; /*aby nemali auto textovy kurzor ale default - sipku*/
}

#Dlg1 {
	  width: 420px;
	  height: 595px;
	  /* prem. v scripte
	  left: 100px;
	  top: 100px;
	  */
}

#Dlg2 {
	  width: 420px;
	  height: 620px;
	  /* prem. v scripte
	  left: 400px;
	  top: 120px;
	  */
}

#Dlg3 {
	  width: 420px;
	  height: 580px;
	  /* prem. v scripte
	  left: 700px;
	  top: 150px;
	  */
}

#Dlg4 {
	  width: 450px;
	  height: 443px;
	  /* prem. v scripte
	  left: 100px;
	  top: 100px; */
	  line-height: 16px;
}
#Dlg4  p {
	  line-height: 26px;
}

#Dlg5 {
	  width: 700px;
	  height: auto;
	  /* prem. v scripte
	  left: 300px;
	  top: 100px; */
}

#Dlg6 {
	  width: 143px;
	  height: 244px;  /*298px*/
	  /* prem. v scripte
	  right: 100px;
	  top: 100px; */
}

#Dlg7 {
	  width: 318px;
	  height: 328px;
	  /* prem. v scripte
	  right: 200px;
	  top: 43px; */
}

#Dlg5 ul {
	list-style: none;
}

#Dlg5 .lssq {
	list-style: square;
}

#Dlg5 li {
	  /*background-color: rgb(200,255,200);*/
	  margin: 0px 0px 0px 30px;
}

#Dlg5_format {
      /*background-color: rgb(200,200,255);*/
	  font-size: 18px;
	  line-height: 23px;
      text-align: justify;
	  /*margin: 10px 10px 50px 10px;*/
	  padding: 20px 20px 60px 10px;
}

.sprt1 {
	  border-color: rgba(100,100,255,.5);
	  border-width: 10px;
	  position: fixed;  /*!!!*/
	  left: 100px;
	  top: 250px;
      transform: translate(-50%,-50%);
}

 /* -- Dlg1 --------------------------- */
.exp_div {
	  /*background-color: rgb(200,255,200);*/
      border: 1px solid;
      border-color: #f0f0f0;
	  margin-top: 5px;
}

.exp_div:hover {
	  background-color: rgb(68,125,204);
      color: #ffffff;
      border: 1px solid;
      border-color: #0000ff;
	  margin-top: 5px;
}

.exp_img {
	  margin: 3px 10px 3px 0px;
	  float: right;
}

.exp_span {
	  position: relative;
	  top: 11px;
	  left: 10px;
}

#d1_span_id0 {
	  position: relative;
	  top: 3px;
	  left: 7px;
}

 /* -- Dlg2 --------------------------- */
.ovl_sprt2 {
	  border-color: rgba(100,100,255,.5);
	  border-width: 6px;
	  border-radius: 50%;
	  position: absolute;  /*!!!*/
	  left: 20px;
	  top: 150px;
      transform: translate(-50%,-50%);
}

#ovl_slid1 {
	  left: 20px;
	  top: 113px;
}
#ovl_slid2 {
	  left: 20px;
	  top: 185px;
}
#ovl_slid3 {
	  left: 20px;
	  top: 257px;
}
#ovl_slid4 {
	  left: 20px;
	  top: 387px;
}
#ovl_slid5 {
	  left: 20px;
	  top: 459px;
}
#ovl_slid6 {
	  left: 20px;
	  top: 531px;
}

.ovl_sliddiv {
	  /* background-color: rgb(100,255,100); */
	  /* border-radius: 25%; */
	  margin-top: 15px;
	  margin-left: 10px;
}

.ovl_imgline {
	  margin-top: 10px;
}

#Dlg2 p {
	margin: 10px 0px 10px 3px;
}
 /* -- Dlg3 --------------------------- */

#zobr_rg_jas {
  position: relative;
  top: 10px;
  /*height: 50px;*/
  width: 160px;
}

.zobr_cntr {
  height: 28px;
  width: 25px;
}

.zobr_lab {
  position: relative;
  bottom: 7px;
}

.zobr_div1 {
	/* background-color: rgb(200,255,200); */
	margin-left: 35px;
	margin-bottom: 10px;
}

.zobr_div2 {
	 /*background-color: rgb(200,200,255);*/
	width: 120px;
    display: inline-block;
    float: left;
}

.zobr_div3 {
	 /* background-color: rgb(255,200,200); */
	width: 210px;
    display: inline-block;
    float: right;
}

#Dlg3 p {
	margin: 10px 0px 10px 5px;
}

 /* -- Dlg7 --------------------------- */
 
#d7_span_id0 {
	  position: relative;
	  top: 3px;
	  left: 7px;
}

 /* ----------------------------- */
 
#id_prev_btn {
    display: inline-block;
    position: fixed;
    left: 30px;
    bottom: 30px;
    width: 38px;
    height: 38px;
}
#id_next_btn {
    display: inline-block;
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 38px;
    height: 38px;
}

input[type="range"]::-webkit-slider-thumb {
    /* -webkit-appearance: none; */  /*?*/
    width: 40px;   /*bez efektu*/
    height: 40px;
    /*cursor: ew-resize;*/
    background: #434343;
	box-shadow: 0px 0px 0px 7px rgb(0,117,255);  /*offx, offy, blur rad, spread rad, color */
	border-radius: 50%;
  }

input[type="range"]::-webkit-slider-thumb:hover {
	box-shadow: 0px 0px 0px 7px rgb(0,92,200); /*offx, offy, blur rad, spread rad, color */
}

input[type="range"]::-moz-range-thumb {
    width: 35px;
    height: 35px;
    /*cursor: ew-resize;*/
    background: rgb(0,117,255);
	/*box-shadow: 0px 0px 0px 10px rgb(0,117,255);*/
	border-radius: 50%;
  }

input[type="range"]::-moz-range-thumb:hover {
	background: rgb(0,92,200);
	/*box-shadow: 0px 0px 0px 10px rgb(0,92,200);*/
  }

input[type="range"]::-moz-range-track {
  background-color: rgb(0,117,255);
  height: 7px;
}

/* -- kurzor - ruka ----------------------- */
#myCanvas {
	/*
	cursor: grab;
	cursor: grabbing;
	*/
	cursor: url("./obr/ruka1.png") 10 10, auto;
}