html {
	min-height: 100%;
	background: url('fruitw.png') 20% 120%/100% no-repeat, rgb(217,229,247) url('splashw.gif') center top/100% no-repeat;
}
.Logo {
	width: 35%;
	position: absolute;
	top: 5%;
	right: 25%;
}
body {
	margin: 20% 0 0 0;
	font-family: "Calibri", "Helvetica", "Arial";
}
fieldset {
	background: rgb(217, 229, 247);
	border: none;
}
.sidebar {
	margin: -2% 0 0 0;
	padding: 0;
	width: 200px;
	min-height: 100%;
	overflow: auto;
	position: fixed;
}
.sidebar a {
	display: block;
	color: black;
	text-decoration: none;
	margin: 0.5em;
	font-size: 2em;
	text-align: center;
	background-color: rgb(50, 104, 175);
	color: white;
	width: 4em;
	padding: 0.3em;
	border: 2px solid white;
	border-radius: 20px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 2px 6px 8px 2px rgba(0, 0, 0, 0.5);
}
.sidebar a.active, .btn a.active {
	background-color: rgb(188, 214, 234);
	color: black;
	cursor: pointer;
}
.sidebar a:hover:not(.active), .btn a:hover:not(.active) {
	background-color: rgb(110, 155, 210);
	color: black;
	cursor: pointer;
}
div.content {
	width: 80%;
	margin-left: 5%;
	margin-top: -2.5em;
	padding: 1px 16px;
	border: 1px solid rgb(191, 191, 191);
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.75);
	box-shadow: 4px 4px 10px rgb(110, 155, 210);
}
@media screen and (max-width: 700px) {
	html {
		background: url('fruitw.png') 20% 100%/100% no-repeat, rgb(217,229,247) url('splashw.gif') center top/100% no-repeat;
	}
	.sidebar {
		width: 100%;
		height: auto;
		position: relative;
	}
	.sidebar a {
		float: left;
	}
	div.content {
		margin-left: 0;
	}
}
@media screen and (max-width: 400px) {
	html {
		background: url('fruitt.png') 20% 120%/80% no-repeat, rgb(217,229,247) url('splashw.gif') center top/100% no-repeat;
	}
	.sidebar a {
		text-align: center;
		float: none;
	}
}

form > div {
	clear: both;
	overflow: hidden;
	padding: 1px;
	margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
	margin: 0 0 5px 0;
}
form > div > label,
legend {
	width: 25%;
	float: left;
	padding-right: 10px;
	font-weight: bold;
}
form > div > div,
form > div > fieldset > div {
	width: 73%;
	float: right;
}
form > div > fieldset label {
	font-size: 90%;
}
fieldset {
	border: 0;
	padding: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
select, option,
textarea {
	width: 100%;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 0.5em;
	border-radius: 0.5em;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
	width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
	outline: 0;
	border-color: rgb(50, 104, 175);
}

.btn {
	text-decoration: none;
	margin: 0.1em 0 0.4em 0;
	text-align: center;
	font-size: 1.5em;
	width: 4em;
	padding: 0.3em;
	background-color: rgb(50, 104, 175);
	color: white;
	border: 2px solid white;
	border-radius: 15px;
	box-shadow: 2px 3px 8px 2px rgba(0, 0, 0, 0.5);
}

.btn:hover {
	background-color: rgb(110, 155, 210);
	color: black;
	cursor: pointer;
}

.btn:active {
	background-color: rgb(188, 214, 234);
	color: black;
	cursor: pointer;
	border: 2px solid rgb(50, 104, 175);
}

@media (max-width: 600px) {
	form > div {
		margin: 0 0 15px 0; 
	}
	form > div > label,
	legend {
		width: 100%;
		float: none;
		margin: 0 0 5px 0;
	}
	form > div > div,
	form > div > fieldset > div {
		width: 100%;
		float: none;
	}
	input[type=text],
	input[type=email],
	input[type=url],
	input[type=password],
	textarea,
	select {
		width: 98%; 
	}
}
@media (min-width: 601px) {
	form > div > label,
	legend {
		text-align: right;
	}
	input[type=text],
	input[type=email],
	input[type=url],
	input[type=password],
	textarea,
	select {
		width: 80%; 
	}
}