
	body {
		background-color: grey;
	}
	

	#menu a {
		text-decoration: none;
		color: white;
		display: block;
	}
	
	#menu a:visited {
		color: white;
	}
	
	#menu a:link {
		color: white;
	}
	
	#menu li 			/* można tez napisać ul zamiast #menu li, ale wtedy wyłączy się kropki we wszystkich listach na stronie, a nie tylko w menu */
	{				
		list-style: none;
	}
	
	#menu > li
	{
		float: left;
	}
	
	#menu > li > a 
	{
		padding: 25px; 
		display: inline-block;
		background: linear-gradient(to bottom, rgba(179,220,237,0.8) 0%, rgba(41,184,229,0.8) 50%, rgba(188,224,238,0.8) 100%);
		border-left: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		font-family: Stoke, sans;
		width: auto;
		transition: 0.5s;
	}
	
	#menu > li > a:hover 
	{
		background: linear-gradient(to bottom, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
		color: grey;
		cursor: pionter;
		display: block;
	}
	
	#menu > li:first-child > a
	{
		border-top-left-radius: 10px;
	}
	
	#menu > li:last-child > a
	{
		border-top-right-radius: 10px;
	}
	
	
	#menu > li ul li a 
	{
		display: block;
		padding: 20px;
		background: linear-gradient(to bottom, rgba(179,220,237,0.8) 0%, rgba(41,184,229,0.8) 50%, rgba(188,224,238,0.8) 100%);
		border-bottom: 1px solid #ccc;
		margin-left: -40px;
		transition: 0.5s;
		width: 150px;
	}
	
	#menu > li ul li a:hover
	{
		background: linear-gradient(to bottom, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
		color: grey;
		cursor: pionter;
	}
	
	#menu > li ul 
	{
		position: absolute;  /* Sprawia, że szerokość podmenu nie wpływa na menu, czyli dół nie ma wpływu na górę */
		opacity: 0;
	}
	
	#menu > li:hover ul{
		opacity: 1;
		transition: 0.25s;
	}
