@media screen {
	body {
		font-size: medium;
		font-weight: normal;
	}
	
	h1, h2, h3,h4, p, a {
		font-size: large;
		font-weight: normal;
	}
	  
	* {
		box-sizing: border-box;
	}
	  
	body {
		font-family: 'Helvetica', 'Arial', sans-serif;
	}
	
	.header {
		width: 1000px;
		height: 100px;
		background-color: #fff;
		text-align: left;
		margin: 0 auto 0 auto;
		padding: 0px;
	}
	
	.logo {
		width: 350px;
		margin: 0px;
		padding: 0px; 
		float: left;	
	}
	
	.logo img {
		margin: 0px;
		padding: 0px; 	
	}
	
	.razdels {
		width: 650px;
		margin: 0px;
		padding: 15px 30px 0 15px; 
		float: left;
		font-size: medium;
	}
	
	.content {
		font-size: 0;
		width: 1000px;
		margin: 50px auto 50px auto;
		padding: 0px 30px 0 30px; 
	}
	
	.content h1 {
		font-size: large;
		font-weight: bold;
		margin: 0px;
		padding-top: 20px; 
		padding-bottom: 10px; 
		color: #747474;
	}
	
	.forma {
		width: 680px;
		height: 170px;
		margin: 0px;
		padding: 20px 0 0 20px;  
		float: left;	
	}
	
	.forma_buttons {
		width: 220px;
		height: 170px;
		margin: 0px;
		padding: 20px 0 0 40px; 
		float: left;	
	}
	
	.forma_buttons p {
		padding-top: 5px; 
	}
	
	.namerazdel {
		width: 100%;
		padding-top: 20px; 
		padding-bottom: 20px; 
		color: #747474;
		float: left;
	}
	.namerazdel h1 {
		font-size: x-large;
		font-weight: bold;
	}
	.namerazdel h2 {
		font-size: large;
		padding-left: 30px;
		font-weight: normal;
		color: #000;
	}
	
	.zapis {
		width: 940px;
		margin: 0;
		padding: 0; 
		float: left;
	}
	
	.zapis_name {
		width: 160px;
		margin: 0px;
		padding: 0; 
		float: left;
	}
	
	.zapis_name a {
		font-size: 20px;
		font-weight: bold;
	}
	
	.zapis_body {
		width: 760px;
		margin: 0 auto 30px auto;
		padding: 30px; 
		float: left;
		font-size: medium;
		border-radius: 10px;
		border: 1px solid #d8d8d8;
		box-shadow: 4px 4px 25px rgba(88, 88, 88, 0.5);
	}

	.zapis_body2 {
		width: 920px;
		margin: 0 auto 30px auto;
		padding: 30px; 
		float: left;
		font-size: medium;
		border-radius: 10px;
		border: 1px solid #d8d8d8;
		box-shadow: 4px 4px 25px rgba(88, 88, 88, 0.5);
	}
	
	.zapis_body .zapis_body2 div {
		margin: 0;
		padding: 0;
		font-size: medium;
		font-weight: normal;
	}
	
	.zapis_body .zapis_body2 p {
		margin: 0;
		padding: 0;
		font-size: medium;
		font-weight: normal;
	}
	
	.zapis_buttons {
		width: 30px;
		padding: 0 0 0 20px; 
		float: left;
	}

	.zapis_buttons2 {
		width: auto;
		margin-top: -20px;
		padding: 0; 
		float: right;
	}

	/* Style The Dropdown Button */
	.dropbtn {
		background-color: #fff;
		color: #777;
		padding: 0;
		font-size: medium;
		border: 1px #fff solid;
		cursor: pointer;
	}
	
	/* The container <div> - needed to position the dropdown content */
	.dropdown {
		position: relative;
		display: inline-block;
		float: right; 
		margin-top: -30px;
	}
	
	/* Dropdown Content (Hidden by Default) */
	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 110px;
		border: 1px solid #d8d8d8;
		/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
		z-index: 1;
	}
	
	/* Links inside the dropdown */
	.dropdown-content a {
		color: black;
		padding: 8px 8px;
		text-decoration: none;
		display: block;
		font-size: small;
		font-weight: normal;
	}
	
	/* Change color of dropdown links on hover */
	.dropdown-content a:hover {background-color: #f1f1f1}
	
	/* Show the dropdown menu on hover */
	.dropdown:hover .dropdown-content {
		display: block;
	}
	
	/* Change the background color of the dropdown button when the dropdown content is shown */
	.dropdown:hover .dropbtn {
		background-color: #fff;
		border: 1px #3333cc solid;
		box-shadow: none;
	}

	.zapis_buttons2 a {
		font-size: x-small;
		font-weight: normal;
	}
	
	.login { 	
		margin: 0 auto 0 auto; 
		padding-top: 100px; 
		padding-bottom: 0px; 
		text-align: center; 
		font-size: medium;
		color: #444;
	}
	
	.login p {
		padding-top: 5px; 
		padding-bottom: 0px; 
	}
	
	.login h1 {
		font-size: large;
		padding-top: 20px; 
		padding-bottom: 10px; 
		color: #747474;
	}
	
	a { color: #3333cc; text-decoration: underline; }
	a:link { color: #3333cc; text-decoration: underline; }
	a:visited { color: #3333cc; text-decoration: underline; }
	a:active { color: #3333cc; text-decoration: underline; }
	a:hover { color: #000066; text-decoration: underline; }

	a.zb { color: #777777; text-decoration: underline; }
	a.zb:link { color: #777; text-decoration: underline; }
	a.zb:visited { color: #777; text-decoration: underline; }
	a.zb:active { color: #777; text-decoration: underline; }
	a.zb:hover { color: #333; text-decoration: underline; }

	a:hover { color: #000066; text-decoration: underline; }	
	a.nonline { color: #3333cc; text-decoration: none; }
	a.nonline:link { color: #3333cc; text-decoration: none; }
	a.nonline:visited { color: #3333cc; text-decoration: none; }
	a.nonline:active { color: #3333cc; text-decoration: none; }
	a.nonline:hover { color: #000066; text-decoration: none; }
	
	a img { border: 0; }
	
	a.editrazdel { font-size: medium; color: #999999; text-decoration: underline; }
	a.editrazdel:link {	font-size: medium; color: #999999; text-decoration: underline; }
	a.editrazdel:visited { font-size: medium; color: #999999; text-decoration: underline; }
	a.editrazdel:active { font-size: medium; color: #999999; text-decoration: underline; }
	a.editrazdel:hover { font-size: medium; color: #000066; text-decoration: underline; }
	
	
	#error { 	
		width: 100%;
		margin: 0px; 
		padding-top: 100px; 
		padding-bottom: 0px; 
		text-align: center; 
		font-size: large;
		color: #444;
	}
	
	li {
		font-size: medium;
	}
	
	p {
		margin: 0px;
		padding: 0px;
	}
	
	select {
		width: 210px;
		margin: 4px;
		padding: 4px;
		height: 35px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: medium;
	}
	
	input[type=file] {
		width: 210px;
		margin: 4px;
		padding: 6px 0 0 6px;
		height: 35px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: medium;
	}
	
	input[type=text], input[type=password] {
		width: 160px;
		margin: 4px;
		padding: 4px;
		height: 35px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: medium;
	}
	
	
	textarea {
		width: 100%;
		height: 33px;
		padding: 7px;
		margin-top: 3px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #f8f8f8;
		resize: none;
		font-size: medium;
	}
	
	textarea.edit {
		width: 100%;
		height: 150px;
		padding: 7px;
		margin-top: 3px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #f8f8f8;
		resize: none;
		font-size: medium;
	}
	
	textarea:focus, input[type=text]:focus, input[type=password]:focus, input[type=file]:focus, select:focus {
		box-shadow:0 0 5px 2px #ccc;
	}
	
	input[type=button], input[type=submit], input[type=reset] {
		background-color: #428bca;
		border: none;
		height: 35px;
		color: white;
		margin: 4px;
		padding: 8px 8px;
		text-decoration: none;
		cursor: pointer;
		border-radius: 4px;
		font-size: medium;
	}
	
	button {
		background-color: #428bca;
		border: none;
		height: 35px;
		color: white;
		margin: 4px;
		padding: 8px 20px;
		text-decoration: none;
		cursor: pointer;
		border-radius: 4px;
		font-size: medium;
	}
	
	button:hover {
		background-color: #285b88;
		box-shadow:0 0 5px 2px rgb(196, 196, 196);
	}
	
	input[type=button]:hover,  input[type=reset]:hover, textarea:hover, input[type=text]:hover, input[type=password]:hover, input[type=file]:hover, select:hover {
		box-shadow:0 0 5px 2px rgb(196, 196, 196);
	}
	
	input[type=submit]:hover {
		background-color: #285b88;
		box-shadow:0 0 5px 2px rgb(196, 196, 196);
	}
	
	input[type=button]:hover, input[type=button]:focus {
		box-shadow:0 0 5px 2px rgb(196, 196, 196);
	}	
}

@media only screen and (orientation: portrait) and (min-width: 360px) {
	body {
		font-size: medium;
		font-weight: normal;
	}
	
	h1, h2, h3,h4, p, a {
		font-size: large;
		font-weight: normal;
	}
	  
	* {
		box-sizing: border-box;
	}
	  
	body {
		font-family: 'Helvetica', 'Arial', sans-serif;
	}
	
	.header {
		width: 350px;
		background-color: #fff;
		text-align: left;
		margin: 0 auto 0 auto;
		padding: 0px;
	}
	
	.logo {
		width: 350px;
		margin: 0px;
		padding: 0px; 
	}
	
	.logo img {
		margin: 0px;
		padding: 0px; 	
	}
	
	.razdels {
		width: 350px;
		margin: 0px;
		padding: 0px 0px 0 10px; 
		font-size: medium;
	}
	
	.content {
		width: 345px;
		margin: 0px auto 0px auto;
		padding: 0px 0px 0 0px; 
	}
	
	.content h1 {
		font-size: x-large;
		padding: 10px 0px 0px 10px; 
		margin: 30px 0px 10px 0px; 
		color: #747474;
	}
	
	.forma {
		width: 345px;
		height: 180px;
		margin: 0px;
		padding: 10px 0px 0px 10px;
	}
	
	.forma_buttons {
		width: 345px;
		height: 110px;
		margin: 0px;
		padding: 5px 0px 0px 5px;
	}
	
	.forma_buttons p {
		padding-top: 0px; 
		float: left;
	}
	
	.namerazdel {
		width: 350pxs;
		padding: 0px 0px 0px 10px;
	}
	.namerazdel h1 {
		font-size: x-large;
		font-weight: bold;
		padding: 0px;
		color: #747474;
		margin: 0px 0px 20px 0px;
	}
	.namerazdel h2 {
		font-size: large;
		font-weight: normal;
		color: #000;
		padding-left: 40px;
		margin: 0px 0px 20px 0px;
	}
	
	
	.zapis {
		width: 350px;
		margin: 0px auto 20px auto;
		padding: 0; 
		float: left;
	}
	
	.zapis_name {
		width: 350px;
		margin: 0px;
		padding: 0 0 10px 20px;  
	}
	
	.zapis_name a {
		font-size: 20px;
		font-weight: bold;
	}
	
	.zapis_body, .zapis_body2 {
		width: 340px;
		min-height: 140px;
		margin: 0 auto 10px auto;
		padding: 30px 15px 15px 15px; 
		float: left;
		font-size: medium;
		border-radius: 10px;
		border: 1px solid #d8d8d8;
		box-shadow: 3px 3px 20px rgba(88, 88, 88, 0.5);
	}
	
	.zapis_body .zapis_body2 div {
		margin: 0;
		padding: 0px;
		font-size: medium;
		font-weight: normal;
	}
	
	.zapis_body .zapis_body2 p {
		margin: 0;
		padding: 0px;
		font-size: medium;
		font-weight: normal;
	}
	
	.zapis_buttons {
		width: 30px;
		padding: 0 0 0 5px; 
		float: left;
	}

	.zapis_buttons2 {
		width: auto;
		margin-top: -35px;
		padding-top: 5px; 
		float: right;
	}

	/* Style The Dropdown Button */
	.dropbtn {
		background-color: #fff;
		color: #777;
		padding: 0px;
		margin-right: 30px;
		font-size: medium;
		border: 1px #fff solid;
		cursor: pointer;
	}
	
	/* The container <div> - needed to position the dropdown content */
	.dropdown {
		position: relative;
		float: right; 
		margin-top: -30px;
	}
	
	/* Dropdown Content (Hidden by Default) */
	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 90px;
		border: 1px solid #d8d8d8;
		/* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
		z-index: 1;
	}
	
	/* Links inside the dropdown */
	.dropdown-content a {
		color: black;
		padding: 8px 8px;
		text-decoration: none;
		display: block;
		font-size: x-small;
		font-weight: normal;
	}
	
	/* Change color of dropdown links on hover */
	.dropdown-content a:hover {background-color: #f1f1f1}
	
	/* Show the dropdown menu on hover */
	.dropdown:hover .dropdown-content {
		display: block;
	}
	
	/* Change the background color of the dropdown button when the dropdown content is shown */
	.dropdown:hover .dropbtn {
		background-color: #fff;
		border: 1px #3333cc solid;
		box-shadow: none;
	}

	.zapis_buttons2 a {
		font-size: x-small;
		font-weight: normal;
	}
	
	.login { 	
		margin: 0 auto 0 auto; 
		padding-top: 100px; 
		padding-bottom: 0px; 
		text-align: center; 
		font-size: medium;
		color: #444;
	}
	
	.login p {
		padding-top: 5px; 
		padding-bottom: 0px; 
	}
	
	.login h1 {
		font-size: large;
		padding-top: 20px; 
		padding-bottom: 10px; 
		color: #747474;
	}
	
	a { color: #3333cc; text-decoration: underline; }
	a:link { color: #3333cc; text-decoration: underline; }
	a:visited { color: #3333cc; text-decoration: underline; }
	a:active { color: #3333cc; text-decoration: underline; }
	a:hover { color: #000066; text-decoration: underline; }

	a.zb { color: #777777; text-decoration: underline; }
	a.zb:link { color: #777; text-decoration: underline; }
	a.zb:visited { color: #777; text-decoration: underline; }
	a.zb:active { color: #777; text-decoration: underline; }
	a.zb:hover { color: #333; text-decoration: underline; }
	
	a.nonline { color: #3333cc; text-decoration: none; }
	a.nonline:link { color: #3333cc; text-decoration: none; }
	a.nonline:visited { color: #3333cc; text-decoration: none; }
	a.nonline:active { color: #3333cc; text-decoration: none; }
	a.nonline:hover { color: #000066; text-decoration: none; }
	
	a img { border: 0; }
	
	a.editrazdel { font-size: medium; color: #999999; text-decoration: underline; }
	a.editrazdel:link {	font-size: medium; color: #999999; text-decoration: underline; }
	a.editrazdel:visited { font-size: medium; color: #999999; text-decoration: underline; }
	a.editrazdel:active { font-size: medium; color: #999999; text-decoration: underline; }
	a.editrazdel:hover { font-size: medium; color: #000066; text-decoration: underline; }
	
	
	#error { 	
		width: 100%;
		margin: 0px; 
		padding-top: 100px; 
		padding-bottom: 0px; 
		text-align: center; 
		font-size: large;
		color: #444;
	}
	
	li {
		font-size: medium;
	}
	
	p {
		margin: 0px;
		padding: 0px;
	}
	
	select {
		width: 210px;
		margin: 4px;
		padding: 4px;
		height: 35px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: medium;
	}
	
	input[type=file] {
		width: 210px;
		margin: 4px;
		padding: 6px 0 0 6px;
		height: 35px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: medium;
	}
	
	input[type=text], input[type=password] {
		width: 160px;
		margin: 4px;
		padding: 4px;
		height: 35px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: medium;
	}
	
	
	textarea {
		width: 100%;
		height: 33px;
		padding: 7px;
		margin-top: 3px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #f8f8f8;
		resize: none;
		font-size: medium;
	}
	
	textarea.edit {
		width: 100%;
		height: 95px;
		padding: 0px;
		margin-top: 3px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #f8f8f8;
		resize: none;
		font-size: medium;
	}
	
	textarea:focus, input[type=text]:focus, input[type=password]:focus, input[type=file]:focus, select:focus {
		box-shadow:0 0 5px 2px #ccc;
	}
	
	input[type=button], input[type=submit], input[type=reset] {
		background-color: #428bca;
		border: none;
		height: 35px;
		color: white;
		margin: 4px;
		padding: 8px 8px;
		text-decoration: none;
		cursor: pointer;
		border-radius: 4px;
		font-size: medium;
	}
	
	button {
		background-color: #428bca;
		border: none;
		height: 35px;
		color: white;
		margin: 4px;
		padding: 8px 20px;
		text-decoration: none;
		cursor: pointer;
		border-radius: 4px;
		font-size: medium;
	}
	
	button:hover {
		background-color: #285b88;
		box-shadow:0 0 5px 2px rgb(196, 196, 196);
	}
	
	input[type=button]:hover,  input[type=reset]:hover, textarea:hover, input[type=text]:hover, input[type=password]:hover, input[type=file]:hover, select:hover {
		box-shadow:0 0 5px 2px rgb(196, 196, 196);
	}
	
	input[type=submit]:hover {
		background-color: #285b88;
		box-shadow:0 0 5px 2px rgb(196, 196, 196);
	}
	
	input[type=button]:hover, input[type=button]:focus {
		box-shadow:0 0 5px 2px rgb(196, 196, 196);
	}	
}