@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600|Oswald:700&subset=cyrillic');

html {
	font-family: 'Open Sans', sans-serif; font-size: 14px; color: #333;
	background: url(/img/office-bg1.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100%; width: 100%; margin: 0; padding:0;
}
body {
	height: 100%; width: 100%; min-width: 320px;
	margin: 0; padding:0;
}
form {padding: 0; margin: 0}
strong {color: #999; font-weight: 400}
a {text-decoration: none}
a:hover {color: #999}

.inside {background-image: none; background-color: #eee}

.info {margin: 11px; padding: 5px 10px; background-color: #fff; display: inline-block; color: #cb0e00;
	-webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px}

textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="password"],
input[type="submit"] {-webkit-appearance: none; border-radius: 2px;}

.index-cont {padding: 50px 100px;}
input {width: 150px; padding: 10px 15px; border: 1px solid #224f80; margin: 10px; outline: none;
	font-family: 'Open Sans', sans-serif; font-size: 14px; color: #000;
	-webkit-border-radius: 2px; -moz-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px}
.i-b {cursor: pointer; background-color: #224f80; color: #fff}
.i-b:hover {background-color: #2d6196}


.userinfo {padding: 10px 20px; background-color: #fff; border-bottom: 1px solid #999}
.exit {display: inline-block; float: right}
.exit a {text-decoration: none; color: #cb0e00}
.exit a:hover {color: #000}

.title {padding: 5px 15px; margin-bottom: 15px; width: 100%; max-width: 780px}
.green,
.red {width: 100%; max-width: 780px; padding: 5px 15px; 
	border: 1px solid #1db100; line-height: 25px; background-color: #fff; margin-bottom: 15px; 
	-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px}
.red {border: 1px solid #cb0e00;}
.blue {border: 1px solid #008aff;}
.gray {background-color: #eee}
.redc {color: #cb0e00}

.title span {font-weight: 600; vertical-align: top}

.title span,
.green span,
.red span {display: inline-block; width: 15%;}

.number {font-weight: 600; color: #2a488d;}
.number:hover {color: #000;}

.title .first,
.green .first,
.red .first {width: 20%}
.red .first .manage {width: 30%}

.title .number,
.green .number,
.red .number {width: 24%}

.title .length,
.green .length,
.red .length {display: inline-block; width: 13%;}

.title .month {color: #224f80; font-size: 20px;}
.title .month a {color: #ccc;}
.title .month a:hover {color: #000;}


@media only screen and (max-width: 600px) {
	html {background: url(/img/office-bg2.jpg) no-repeat center center fixed;} 
	.index-cont {padding: 50px; width: 200px}
	.inside .index-cont {padding: 20px; width: auto}
	.title,
	.green,
	.red {width: auto}
	.title span,
	.green span,
	.red span {display: inline-block; width: 25%;}
	.title span {font-weight: 400}
	.title .first,
	.title .number {font-weight: 700; color: #000}
	.title .first,
	.green .first,
	.red .first,
	.red .manage {width: 50%}
	.title span {color: #999}
	.title .first {color: #000}
	.title span strong {display: none}
	
	.title .number,
	.green .number,
	.red .number {width: 50%}
	.title .length,
	.green .length,
	.red .length {display: inline-block; width: 25%;}
}




a {-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

::-webkit-input-placeholder {color: #ccc;}
::-moz-placeholder {color: #ccc;}
:-ms-input-placeholder {color: #ccc;}
:-moz-placeholder {color: #ccc;}