﻿/* Сброс */
*, *:after, *:before {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
html {
	position: relative;
	min-width: 100%;
	min-height: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
	font: 62.5%/1.5 Helvetica, Arial, sans-serif;
	background-color: #666;
	padding: 2em;
}

h1 { font-size: 200%; }
h2 { font-size: 160%; }
h3 { font-size: 140%; }
h4 { font-size: 120%; }
h5 { font-size: 100%; }
h6 { font-size: 90%; }

a { color: #000; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:focus {
	outline: thin dotted;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

a:visited {
	color: #000;
}

img { }

a.button {
  font-weight: 700;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  padding: 1.5em 3em;
  border-radius: 3px;
  background-color: #005AAA;
  box-shadow: 0 -3px #003A6F inset;
  transition: 0.2s;
} 
a.button:hover { background-color: #003A6F; }
a.button:active {
  background-color: #3589D4;
  box-shadow: 0 3px #3589D4 inset;
}

article {
	width: 90%;
	max-width: 100em;
	margin: 0 auto;
	border: 3px solid #005AAA;
	box-shadow: 0px 0px 01em 0.5em #444;
}

header, section, footer {
	width: 100%;
	margin: 0 auto;
}

header {
	min-height: 7.5em;
	text-align: left;
	background-color: #FFF;
}
 
header::after {
	content: '';
	display: inline-block;
	width: 100%;
}
 
header > div,
header > div::before,
header > nav {
	height: 100%;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}
 
header > div::before {
	content: '';
}

header > .logo {
	width: 25em;
	height: 7.5em;
	background-color: #005AAA;
}

header > .logo img{
	width: 70%;
	vertical-align: middle;
}
header > nav > a {
	margin: 1em 2em 0 0;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}
header > nav ul {
	padding-left: 3em;
	list-style: none;
}
header > nav ul li {
	display: inline-block;
	font-size: 2em;
}
header > nav ul li:first-child img{
	top: 0.3em;
	position: relative;
}
header > nav ul li:after {
	content: "/";
	margin:	0 1em;
}


section {
	height: 100%;
	padding: 1em 2em;
	background-color: #FFF;
}
section img {
	width: 100%;
}

section > ul:before, 
section > ul:after { 
	content: " "; 
	display: table; 
}
section > ul:after { 
	clear: both; 
}
section > ul {
	list-style: none;
}
section > ul > li {
	display: block;
	position: relative;
}

section > ul > li {
	vertical-align: middle;
	text-align: center;
	display: -moz-inline-stack;
	display: inline-block;
	*display: inline;
	zoom: 1;
	overflow: hidden;
}

section > ul > li div {
	font-size: 1.5em;
	font-weight: bold;
}

.lister {
	display: none;
}

.excel {
	background: #fff;
	border-collapse: collapse;
}

.excel td {
	text-align: center;
	vertical-align: middle;
}

footer {
	height: 3em;
	color: #FFF;
	background-color: #005AAA;
	line-height: 3em;
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	word-break: keep-all;
}
.error article{
	width: 100%;
	max-width: 50em;
}
.error .logo {
	width: 100%;
}
.error .logo img {
	width: auto;
}
.error section {
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	height: 7em;
}
/* Адаптация под экраны */
@media screen and (min-width: 63em) {
	article {
		width: 90%;
		max-width: 100em;
	}
	section > ul > li {
		width: 25%;
		padding: 2em;
	}
	.dir img, .plan img {
		width:	100%;
	}
} 
@media screen and (max-width: 62em) {
	article {
		width: 100%;
	}
	section > ul > li {
		width: 33.33%;
		padding: 2em;
		margin-bottom: 2em;
	}
}
@media screen and (max-width: 48em) {
	article {
		width: 100%;
	}
	header > .logo {
		width: 100%;
	}
	header > .logo img{
		width: auto;
	}
	header > nav {
		width: 100%;
	}
	section > ul > li {
		width: 50%;
		padding: 1em;
	}
}

@media screen and (max-width: 24em) {
	body {
		padding: 0;
	}
	article {
		width: 100%;
	}
	header > .logo {
		width: 100%;
	}
	header > .logo img{
		width: 70%;
	}
	header > nav {
		width: 100%;
	}
	header > nav a {
		display: block;
	}
	section > ul > li {
		width: 100%;
		padding: 1em;
		margin-bottom: 1em;
	}
	footer {
		line-height: 3em;
		font-size: 0.9em;
	}
}

/* Plan template fixes */
body.plan-template {
	padding: 0;
	background-color: #fff;
}
body.plan-template .save-file {
	font-size: 16px;
}
body.plan-template .save-file img {
	vertical-align: middle;
	margin-right: 10px;
}
body.plan-template .icon-save {
	max-width: 48px;
}
@media print {
	body.plan-template section {
		padding: 0;
	}
	body.plan-template .no-print {
		display: none;
	}
}
/* /Plan template fixes */

.add img {
	padding: 25px;
}
.delete-btn {
    display: block;
    width: 20px;
    height: 20px;
    border: 1px dotted black;
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #fff;
}