@font-face {
    font-family: regular;
    src: url('Quicksand-Regular.ttf');
}

@font-face {
    font-family: bold;
    src: url('Quicksand-Bold.ttf');
}


@font-face {
    font-family: italic;
    src: url('Quicksand-Italic.ttf');
}

body{
	background-color:white;
	font-family: regular;
	
}
/*style edytora*/
canvas#mapa{
	border: 1px solid silver;
    box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
}
#paczkaOpcji{
	 box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
	padding-top:20px;
	border: 1px solid silver;
	min-height:150px;
	width: 1000px;
}
#divMapa{
	float:left;
}
#opcjeStale{
	float:left;
	width:10%;
	padding-left: 20px;
}
#opcje{
	float:left;
	width:60%;
	padding-left: 20px;
}
#color{
	float:left;
	width:25%:
	
}
#obrazySzukane{
	
	box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
	padding-left:20px;
	border: 1px solid silver;
	float:left;
	overflow-y: scroll;
	height: 100px;
	width: 980px;
}

/*style logowania*/

table#panelLogowania{
	text-align:center;
	margin: auto;
	margin-top: 2%;
	width: 600px;
	border: 1px silver solid;
	width: 20%;
	background-color:  #2791d0;
}
td#powitanie{
	width:50%;
}
#info{
	color:silver;
}
td#logowanieTd{
	width:50%;
	background-color: white;
	text-align:center;
	
}
#logowanieNaglowek{
	color:#754f5c;
	font-size: 16pt;
	margin: 10px 0px 5px 0px;
}

table#daneLogowania{
	margin: 0 auto;
}

img.ikona{
		height:16px;
		margin: 0 auto;
}
.informacja{
	float:left;
	margin: 0 auto;
	padding: 10px 0 10px 0;
	width:100%;
	font-size:12pt;
	border-top: 1px solid #742f74;
	border-bottom: 1px solid #742f74;
	background-color: white;
	color:black;
	text-align:  center;
	vertical-align: center;
	text-transform: uppercase;
}

#stronaUzytkowa{
	margin:auto;
	width:90%;
	border: 6px inset 9A9A9A;
}

#menu{
	z-index:3;
	position: fixed;
	border-top-right-radius: 25px;
	height:100%;
	top: 15px;
	left: 0;
	float:left;
	width:190px;
	background-color:#aae16e;
}

#informacjeOUzytkowniku{
	z-index:2;
	top: 0; 
	left: 0;
	width: 100%;  
	position: fixed;
	color:black;
	background-color:white;
	border-bottom: 1px silver solid;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
}
.kleft{
	float:left;
	width:40%;
	text-align:left;  
}
.kright{ 
	float:left;
	width:60%;
	text-align:right;  
}
#informacjeOUzytkowniku img#logo{
	height: 50px;
}

#informacjeOUzytkowniku table{
	float:right; 
	color:silver;
}


.podMenu{
	width:185px;
	margin-top:2px;
	margin-bottom:2px;
	border-right: 0px outset #4d840d;
	border-bottom: 1px solid #4d840d;
	padding-top: 4px;
	padding-bottom: 4px;
	background-color:#aae16e;
	}

.podMenu:hover{
	width:185px;
	margin-top:2px;
	margin-bottom:2px;
	border-right: 5px outset #4d840d;
	border-bottom: 1px solid #4d840d;
	padding-top: 4px;
	padding-bottom: 4px;
	background-color:#7cb342;
	font-weight: bold;
}

.podMenu:hover a.menu{
	color:white;
}

.podMenuSt2{
	width:175px;
	margin-top:2px;
	margin-bottom:2px;
	border-right: 0px outset #4d840d;
	border-bottom: 1px solid #4d840d;
	padding-top: 4px;
	padding-left: 5px;
	padding-bottom: 4px;
	background-color:#fd7c25;
	font-size:small;
	}

.podMenuSt2:hover{
	width:175px;
	margin-top:2px;
	margin-bottom:2px;
	border-right: 5px outset #4d840d;
	border-bottom: 1px solid #4d840d;
	padding-top: 4px;
	padding-left: 5px;
	padding-bottom: 4px;
	background-color:#7cb342;
	font-weight: bold;
	font-size:small;
}

.podMenuSt2:hover a.menu{
	color:white;
	width:100%;
}

a.menu{
	color:5b101a;
	text-decoration:none; 
	width:100%;
}
	a:link{
	color: #471D47;
	text-decoration:none;
}
a:hover{
	color: #471D47;
	text-decoration:none;
}
a:active{
	color: #471D47;
	text-decoration:none;
}
a:visited{
	color: #471D47;
	text-decoration:none;
}
#tresc{

    width: 90%;
    margin: 0 auto;
    padding-top: 50px;
}

.miniaturaMapy{
	width: 200px;
	height: 200px;
	display: flex;
    align-items: center;
    justify-content: center ;
	font-family: "Comic Sans MS";
  }
.miniaturaMapy a{
	text-decoration:none;
	vertical-align: middle ;
}

/*wyborMapy*/
.wyborMapy{
	float:left;
	padding-left: 10px;
	padding-right: 10px;
	  border: 2px solid white;
	
}

.wyborMapy:hover{
	  border: 2px inset green;
}


/*nowa mapa*/
.nieWyswietlaj[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.nieWyswietlaj[type=radio] + img { 
  cursor: pointer;
  padding: 10px 10px 10px 10px;
}


.nieWyswietlaj[type=radio]:checked + img {
  border: 2px inset green;
  padding: 10px 10px 10px 10px;
}

table#logowaniem{
	text-align:center;
	margin: auto;
	margin-top: 2%;
	width: 600px;
	border: 1px silver solid;
	width: 40%;
	background-color:  #2791d0;
} 
td#powitanie{
	width:50%;
	background-color:  white;
}
td#logowaniePanelUzytkownika{
	width:50%;
	background-color: white;
	
}
#logowaniePanelUzytkownikaNaglowek{
	color: black;
	font-family: bold;
	font-size: 16pt;
	margin: 10px 0px 5px 0px;
}

table#daneLogowania{
	margin: 0 auto; 
}

#panelLogowania input{ 
	border: 0px;
	border-bottom: silver 1px solid;
	padding-top:5px;
	text-align: left;
	font-size:14pt;
}

button.zaloguj {
	box-shadow:inset 0px 1px 0px 0px #fce2c1;
	background:linear-gradient(to bottom, #ffc477 5%, #f79424 100%);
	background-color:#ffc477;
	border-radius:6px;
	border:1px solid #eeb44f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #cc9f52;
}
button.zaloguj:hover {
	background:linear-gradient(to bottom, #f79424 5%, #ffc477 100%);
	background-color:#f79424;
}
button.zaloguj:active {
	position:relative;
	top:1px;
}
#topper img{
	width:40px;
}
#topper td{
	border-right: silver 1px solid;
	height: 50px;
	vertical-align:middle;
}
#topper td.pierwszy{
	border-left: silver 1px solid;
	border-right: silver 1px solid;

}

textarea{
	border: none;
	border-bottom: 1px silver solid;
	font-size:16pt;
	font-family:regular;
	text-align:Center;
}
input{
	border: none;
	border-bottom: 1px silver solid;
	font-size:16pt;
	font-family:regular;
	text-align:Center;
}
button {
			box-shadow:inset 0px 1px 0px 0px #fff6af;
			background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
			background-color:#ffec64;
			border-radius:6px;
			border:1px solid #ffaa22;
			display:inline-block;
			cursor:pointer;
			color:#333333;
			font-family:Arial;
			font-size:15px;
			font-weight:bold;
			text-decoration:none;
			text-shadow:0px 1px 0px #ffee66;
			margin:0;
			margin-right:5px;
		}
		button:hover {
			background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
			background-color:#ffab23;
		}
		button:active {
			position:relative;
			top:1px;
		}
			
		
		/* Handle */

	::-webkit-scrollbar-thumb {
	  background: orange;
	}
	#divMapa{
		position: absolute;
		top: 152px;
		left: 152px;
	}
	#opcjeStale {
    float: left;
    width: 150px;
    padding-left: 20px;
}
	table#zapisywanie{
		position: fixed;
		right: 0;
		bottom: 0;
	}
	table#zapisywanie button{
		width: 100px;
	}
	#obrazySzukane{
		
		box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
		bottom:0px;
		left:152px;
		position:fixed;
		border: 1px solid silver;
		float:left;
		overflow-y: scroll;
		overflow-x: scroll;
		background-color: white;
		height: 150px;
		width: 1000px;
		z-index: 999999;
	}
		
	#paczkaOpcji{
		 box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
		 top:0px;
		 left:152px;
		 position: fixed;
		 border: 1px solid silver;
		 height:150px;
		 width: 1000px;
		 z-index:99999;
		 background-color:white;
	
	}
	#opcjeListy{
		position: fixed;
		bottom:352px;
		left: 0px;
		width: 150px;
		height: 30px;
	}
	#opcjeListyR{
		position: fixed;
		bottom:352px;
		left: 0px;
		width: 150px;
		height: 30px;
		display:none;
	}
	#opcjeListy button{
		width: 150px;
		height: 30px;
	}
	#opcjeListyR button{
		width: 150px;
		height: 30px;
	}
	#lista{
		cursor: pointer;
		position: fixed;
		bottom:0px;
		left: 0px;
		width: 150px;
		height: 350px;
		overflow-y: scroll;
		background-color:white;
		border: 1px inset silver;
	}
	#listaR{
		cursor: pointer;
		position: fixed;
		bottom:0px;
		left: 0px;
		width: 0px;
		height: 0px;
		overflow-y: scroll;
		background-color:white;
		border: 1px inset silver;
	}
	#tresc{
		width:100%;
	}
		.p_1{			
			border-left:0px;
		}
		.p_2{
			border-left:10px white solid;
		}
		.p_3{
			border-left:20px white solid;
			
		}
		.p_4{
			border-left:30px white solid;
			
		}
		.p_5{
			border-left:40px white solid;
			
		}
		.p_6{
			border-left:50px white solid;
			
		}
		.p_7{
			border-left:60px white solid;
			
		}
		.p_8{
			border-left:70px white solid;
			
		}
		.pr_1{			
			border-left:0px;
		}
		.pr_2{
			border-left:10px white solid;
		}
		.pr_3{
			border-left:20px white solid;
			
		}
		.pr_4{
			border-left:30px white solid;
			
		}
		.pr_5{
			border-left:40px white solid;
			
		}
		.pr_6{
			border-left:50px white solid;
			
		}
		.pr_7{
			border-left:60px white solid;
			
		}
		.pr_8{
			border-left:70px white solid;
			
		}
	
		button {
			box-shadow:inset 0px 1px 0px 0px #fff6af;
			background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
			background-color:#ffec64;
			border-radius:6px;
			border:1px solid #ffaa22;
			display:inline-block;
			cursor:pointer;
			color:#333333;
			font-family:Arial;
			font-size:15px;
			font-weight:bold;
			text-decoration:none;
			text-shadow:0px 1px 0px #ffee66;
			margin:0;
			margin-right:5px;
		}
		button:hover {
			background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
			background-color:#ffab23;
		}
		button:active {
			position:relative;
			top:1px;
		}
		button.usunrelacje {
	box-shadow: 3px 4px 0px 0px #8a2a21;
	background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);
	background-color:#c62d1f;
	border-radius:18px;
	border:1px solid #d02718;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
font-size:7px;
	padding: 1x 1px;
	text-decoration:none;
	text-shadow:0px 1px 0px #810e05;
}
button.usunrelacje:hover {
	background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);
	background-color:#f24437;
}
button.usunrelacje:active {
	position:relative;
	top:1px;
}

        button.dodajrelacje {
	box-shadow: 3px 4px 0px 0px #3dc21b;
	background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
	background-color:#44c767;
	border-radius:18px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:7px;
	padding: 1x 1px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
}
button.dodajrelacje:hover {
	background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
	background-color:#5cbf2a;
}
button.dodajrelacje:active {
	position:relative;
	top:1px;
}