html
{
	background-color: white;
	-webkit-user-select: none;
	min-width: 460px;
}

body
{
	font: 16px 'Segoe UI', 'Segoe UI Emoji', 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #000000;
	margin: 0px;
	-webkit-user-select: none;
	overflow-x: hidden;
}

.hero
{
	background: #0080e0;
	height: 60px;
	color: white;
	position: relative;
}

.header
{
	width: 100%;
}

.header .image
{
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 9999;
}

.status .header .image
{
	top: -20px;
}

.header .logo 
{
	position: relative;
	top: 13px;
	left: 0px;
}

.content
{
	position: relative;
	margin-left: -500px;
	left: 50%;
	width: 1000px;
}

.content h4
{
	margin-top: -40px;
}

.header h3
{
	font: normal 26px 'Segoe UI Light', 'Helvetica Neue UltraLight', 'Open Sans', arial, sans-serif;
	font-weight: 300;
	line-height: 60px;
	margin: 0px;
	margin-left: 5px;
	vertical-align: middle;
	display: inline-block;
}

h4
{
	font: normal 26px 'Segoe UI Light', 'Helvetica Neue UltraLight', 'Open Sans', arial, sans-serif;
	font-weight: 300;
	line-height: 40px;
	vertical-align: middle;
	display: inline-block;
}

.maintenance
{
	padding: 10px 0px;
	background-color: #fffbc8;
	color: #666;
	text-align: center;
	display: none;
	cursor: pointer;
	white-space: nowrap;
}

.maintenance:hover
{
	text-decoration: underline;
}

.releasestitle
{
	//margin-top: 50px;
}

.releases
{
	margin-top: 0px;
	margin-bottom: 50px;
}

.footer 
{
	margin-top: 10px;
	font-size: 16px;
	color: #666;
	min-height: 72px;
	line-height: 72px;
}

.footer .links
{
	position: absolute;
	right: 0px;
}

.footer .links a 
{
	text-decoration: none;
	margin-left: 15px;
	color: #666;
}

.tag.windows
{
	background: #0080e0;
}

.tag.server
{
	background: #e00010;
}

.tag.beta
{
	background: #e00080;
}

.tag.web
{
	background: #00e060;
}

.tag.linux
{
	background: #e06000;
}

.tag.mac
{
	background: #d000e0;
}

.tag.ios
{
	background: #656565;
}

.tag.android
{
	background: #80e000;
}

.tag.update
{
	background: #999;
}

.tag.dtt
{
	background: #DAA520;
}

.tag.fuzkuz
{
	background: #3D3D3D;
}

.item
{
	display: block;
	padding: 20px 0px;
	border-bottom: 1px solid #F0F0F0;
	margin-right: 20px;
	cursor: pointer;
}

.item.expanded
{
	background: #fdfdfd;
}

.item:last-child
{
	border: 0;
}

.item:hover
{
	color: #0080e0;
}

.item .title
{
	display: inline-block;
	min-width: 240px;
}

.item .date
{
	display: inline-block;
	margin-left: 10px;
	min-width: 140px;
	text-align: right;
}

.item .tag
{
	display: inline-block;
	color: white;
	padding: 2px 10px;
	margin-left: 5px;
	font-size: 12px;
	min-width: 70px;
	text-align: center;
	border-radius: 5px;
}

.item .details
{
	display: inline-block;
	position: absolute; 
	right: 20px;
}

.item .extra
{
	display: none;
}

.item .information
{
	color: #777;
	margin-top: 20px;
}

.item .links
{
	margin-top: 20px;
}

.item .link
{
	display: inline-block;
	margin-right: 10px;
	cursor: pointer;
	background: #0080e0;
	padding: 5px 20px;
	color: white;
	text-decoration: none;
}

.item .link a
{
	color: white;
	text-decoration: none;
}

.item .link:hover
{
	background: #008ffa;
}

.item .link:active
{
	background: #0071c7;
}

.calendar .month
{
	display: inline-block;
	position: relative;
	width: 330px;
}

.calendar .month.month2
{
	margin-left: 45px;
	width: 240px;
	margin-right: 45px;
}

.calendar .month.month3
{
	margin-left: 90px;
	width: 240px;
	margin-right: 0px;
}

.releasestitle,
.calendar .title,
.releases .year
{
	color: #0080e0;
	font: normal 26px 'Segoe UI Light', 'Helvetica Neue UltraLight', 'Open Sans', arial, sans-serif;
	font-weight: 300;
	line-height: 80px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.calendar .uptime
{
	color: #ccc;
	font-size: 16px;
	position: absolute;
	right: 90px;
}

.calendar .month3 .uptime,
.calendar .month2 .uptime
{
	right: 0px;
}

.calendar .day
{
	position: absolute;
	background: #f0f0f0;
	width: 30px;
	height: 30px;
	border-radius: 15px;
}

.calendar
{
	margin-top: 50px;
}

.calendar .day2
{
	left: 35px;
}

.calendar .day3
{
	left: 70px;
}

.calendar .day4
{
	left: 105px;
}

.calendar .day5
{
	left: 140px;
}

.calendar .day6
{
	left: 175px;
}

.calendar .day0
{
	left: 210px;
}

.calendar .week
{
	display: block;
	height: 35px;
}

.calendar .day.good
{
	background: #00c080;
}

.calendar .day.planned
{
	background: #0080e0;
	cursor: pointer;
}

.calendar .day.degradation
{
	background: #00744d;
	cursor: pointer;
}

.calendar .day.outage
{
	background: orange;
	cursor: pointer;
}

.calendar .day.planned.outage::after,
.calendar .day.planned.outage::before
{
	content: '';
	width: 30px;
	height: 30px;
}

.calendar .day.planned.outage::after
{
	background: #0080e0;
	float: right;
	width: 15px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}

.calendar .day.degradation:hover,
.calendar .day.planned:hover,
.calendar .day.outage:hover
{
	opacity: 0.6;
}

.legend 
{
	position: absolute;
	right: 10px;
	top: -20px;
}

.legend div
{
	display: inline-block;
	margin-left: 30px;
	color: #aaa;
	line-height: 22px;
}

.legend .icon
{
	height: 12px;
	width: 12px;
	margin-left: 0px;
	margin-right: 5px;
	display: inline-block;
	position: relative;
	top: 5px;
	border-radius: 6px;
}

.legend .good .icon
{
	background: #00c080;
}

.legend .planned .icon
{
	background: #0080e0;
}

.legend .degradation .icon
{
	background: #00744d;
}

.legend .outage .icon
{
	background: orange;
}

.tossing 
{
	animation-name: tossing;
	-webkit-animation-name: tossing;
	animation-duration: 2.5s;
	-webkit-animation-duration: 2.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes tossing 
{
	0% {
		transform: rotate(-1deg);	
	}
	50% {
		transform: rotate(1deg);
	}
	100% {
		transform: rotate(-1deg);	
	}						
}

@-webkit-keyframes tossing 
{
	0% {
		-webkit-transform: rotate(-1deg);	
	}
	50% {
		-webkit-transform: rotate(1deg);
	}
	100% {
		-webkit-transform: rotate(-1deg);	
	}				
}

@media (max-width: 1080px)
{
	body
	{
		font-size: 14px;
	}

	.content
	{
		margin-left: -400px;
		width: 800px;
	}

	.hero
	{
		height: 48px;
	}

	.header .logo
	{
		top: 12px;
	}

	.header .logo img
	{
		width: 124px;
		height: 24px;
	}

	.header .image img
	{
		width: 272px;
		height: 152px;
	}

	.status .header .image 
	{
		top: -16px;
	}

	.status .header .image img
	{
		width: 232px;
		height: 154px;
	}

	.header h3
	{
		line-height: 48px;
		margin-left: 4px;
		font-size: 21px;
	}

	.releasestitle
	{
		margin-top: 40px;
	}

	.item .date
	{
		min-width: 122px;
	}

	.item
	{
		padding: 16px 0px;
	}

	.footer
	{
		font-size: 14px;
	}

	.calendar
	{
		margin-top: 112px;
	}

	.calendar .uptime
	{
		font-size: 14px;
		right: 70px;
	}

	.calendar .title
	{
		font-size: 21px;
		line-height: 64px;

	}

	.calendar .month
	{
		width: 264px;
	}

	.calendar .month.month2
	{
		margin-left: 36px;
		width: 192px;
		margin-right: 36px;
	}
	
	.calendar .month.month3
	{
		margin-left: 72px;
		width: 192px;
	}

	.calendar .day
	{
		width: 24px;
		height: 24px;
		border-radius: 12px;
	}

	.calendar .day.planned.outage::after,
	.calendar .day.planned.outage::before
	{
		width: 24px;
		height: 24px;
	}

	.calendar .day.planned.outage::after
	{
		width: 12px;
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
	}

	.calendar .day2
	{
		left: 28px;
	}

	.calendar .day3
	{
		left: 56px;
	}

	.calendar .day4
	{
		left: 84px;
	}

	.calendar .day5
	{
		left: 112px;
	}

	.calendar .day6
	{
		left: 140px;
	}

	.calendar .day0
	{
		left: 168px;
	}
}

@media (max-width: 840px)
{
	.maintenance .content div
	{
		text-align: left;
		margin-left: 20px;
	}

	.content
	{
		margin: 0px;
		width: 100%;
		left: 0px;
	}

	.header .logo
	{
		margin-left: 20px;
	}

	.item 
	{
		margin-left: 20px;
	}

	.releasestitle
	{
		margin-left: 20px;
		margin-right: 20px;
	}

	.header .image 
	{
		display: none;
	}

	.calendar
	{
		position: relative;
		width: 616px;
		margin-left: -303px;
		left: 50%;
	}

	.legend
	{
		width: 100%;
		right: 0px;
		text-align: center;
	}

	.calendar .month
	{
		margin-left: 0px;
		width: 192px;
		margin-right: 10px;
	}

	.calendar .uptime
	{
		right: 0px;
	}

	.calendar .month.month2
	{
		margin-left: 10px;
		margin-right: 10px;
	}

	.calendar .month.month3
	{
		margin-left: 10px;
	}
}


@media (max-width: 640px)
{
	.calendar
	{
		margin-top: 30px;
	}

	.legend
	{
		display: none;
	}

	.calendar .month3 .uptime,
	.calendar .month2 .uptime,
	.calendar .uptime
	{
		right: 30px;
		font-size: 16px;
	}

	.calendar .month.month3,
	.calendar .month.month2,
	.calendar .month
	{
		display: block;
		margin-left: -132px;
		left: 50%;
		width: 264px;
	}

	.calendar .day
	{
		width: 30px;
		height: 30px;
		border-radius: 15px;
	}

	.calendar .day.planned.outage::after,
	.calendar .day.planned.outage::before
	{
		width: 30px;
		height: 30px;
	}

	.calendar .day.planned.outage::after
	{
		width: 15px;
		border-top-right-radius: 15px;
		border-bottom-right-radius: 15px;
	}

	.calendar .day2
	{
		left: 35px;
	}

	.calendar .day3
	{
		left: 70px;
	}

	.calendar .day4
	{
		left: 105px;
	}

	.calendar .day5
	{
		left: 140px;
	}

	.calendar .day6
	{
		left: 175px;
	}

	.calendar .day0
	{
		left: 210px;
	}

	.item .tag
	{
		display: none;
	}

	.footer .links
	{
		display: none;
	}

	.footer .copyright
	{
		text-align: center;
		display: block;
	}
}