article, header, section, aside, footer {
	display : block;
}

#frontpage {
	display : none;
}

#frontpage a {
	color : #0061da;
}

.l-header {
	max-width : 1000px;
	overflow : hidden;

	padding : 70px 35px 20px 35px;
	margin : auto;
}

.l-header h1 {
	float : left;

	margin : 0;

	font-size : 60px;
	font-weight : 300;
	line-height : 60px;
	vertical-align : bottom;
}

#new_doc {
	float : right;

	padding : 12px 30px;
	border : 1px solid #cceaa2;
	border-radius : 25px;
	margin-bottom : 16px;
	margin-right : 8px;

	background-color : rgb(76,156,76);
	background-image: linear-gradient(bottom, rgb(76,156,76) 0%, rgb(109,192,109) 100%);
	background-image: -o-linear-gradient(bottom, rgb(76,156,76) 0%, rgb(109,192,109) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(76,156,76) 0%, rgb(109,192,109) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(76,156,76) 0%, rgb(109,192,109) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(76,156,76) 0%, rgb(109,192,109) 100%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(76,156,76)),
		color-stop(1, rgb(109,192,109))
	);

	color : white;
	font-size : 21px;
	font-weight : bold;
	text-shadow : 0 -1px 2px rgba(0,0,0,0.5);

	cursor : pointer;
}

#new_doc:hover {
	background-color : rgb(106,198,106);
	background-image: linear-gradient(bottom, rgb(106,198,106) 17%, rgb(140,221,140) 59%);
	background-image: -o-linear-gradient(bottom, rgb(106,198,106) 17%, rgb(140,221,140) 59%);
	background-image: -moz-linear-gradient(bottom, rgb(106,198,106) 17%, rgb(140,221,140) 59%);
	background-image: -webkit-linear-gradient(bottom, rgb(106,198,106) 17%, rgb(140,221,140) 59%);
	background-image: -ms-linear-gradient(bottom, rgb(106,198,106) 17%, rgb(140,221,140) 59%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.17, rgb(106,198,106)),
		color-stop(0.59, rgb(140,221,140))
	);
}

section {
	position : relative;
	z-index : 2;
	max-width : 1000px;

	padding : 35px;
	padding-bottom : 17px;
	margin : auto;
	border-bottom : 1px solid rgb(200,200,200);

	font-size : 22px;
	font-weight : 300;
	line-height : 1.4;
}

#frontpage section p {
	font-size : 16px;
}

/* tagline */

#tagline {
	border-width : 0;
}

#tagline h1 {
	line-height : 25px;
	padding : 15px 0;
	min-height : 35px;
	margin-bottom : 10px;
}

#tagline b {
	display : inline;
	color : #0061da;
	text-decoration : none;
}

#tagline h2 {
	font-size : 25px;
	font-weight : 300;
	line-height : 25px;
	padding : 5px 0;
}

b#real_time {
	color : #dcdc10;
}

b#online {
	color : black;
}

b#text_editor {
	color : #e13838;
}

/* features */

#features {
	overflow : hidden;
}

.feature img {
	display : block;
	max-width : 32px;
	max-height : 32px;
	margin : auto;
	margin-bottom : 20px;
}

.feature h1 {
	margin-top : 5px !important;
	margin-bottom : 25px !important;
	text-align : center;
	font-size : 25px;
}

.feature:first-child {
	padding-left : 0;
	padding-right : 10px;
}

.feature {
	padding : 0 5px;
	margin-bottom : 40px;
	font-size : 16px;
}

.feature:nth-child(4n+0) {
	padding-left : 10px;
	padding-right : 0;
}

.feature:nth-child(4n+1) {
	clear : left;
	padding-left : 0;
	padding-right : 10px;
}

.feature {
	width : 25%;
	float : left;
	box-sizing : border-box;
	-moz-box-sizing : border-box;
}

#frontpage section h1, .l-footer > h1 {
	margin-top : 0;
	margin-bottom : 10px;
}

.l-footer {
	max-width : 1000px;
	margin : auto;
	padding : 35px;
	overflow : hidden;
}

.l-footer > div {
	float : left;
	width : 33%;
}

.l-footer > div > h2 {
	font-size : 20px;
	font-weight : normal;
}

/* Demo */

#demo {
	overflow : hidden;
}

#demo h2 {
	font-weight : 300;
	font-size : 22px;
	margin-left : 6px;
}

#frontpage div#panel {

}

#frontpage div#editor_write, #frontpage div#editor_read {
	clear : left;
	float : left;
	width : 49%;
	margin-bottom : 20px;
}

#frontpage div#editor_read {
	clear : none;
}

#frontpage div.wu-editor {
	position : static;
	height : 600px;
	margin : 6px;
	outline : 20px;
	padding : 20px;
	background-color : white;
	border : 1px solid rgb(200,200,200);
	font-size : 16px;
	font-family : Arial;
	line-height : 120%;
	overflow-y : auto;
}

#frontpage div.root {
	margin-top : 0;
	padding : 0;
	background-color : white;
	box-shadow : none;
}

#frontpage div#demo_panel > div {
	margin : 0;
	padding : 10px 3px;
}

#frontpage div#demo_panel > div > div {
	float : left;
	margin-right : 20px;
}

#frontpage div#demo_panel button.toggle {
	display : none;
}

.l-header button.unsupported {
	background-color : #ed1c24;

	background-image: linear-gradient(bottom, #ed1c24 0%, #fb444b 100%);
	background-image: -o-linear-gradient(bottom, #ed1c24 0%, #fb444b 100%);
	background-image: -moz-linear-gradient(bottom, #ed1c24 0%, #fb444b 100%);
	background-image: -webkit-linear-gradient(bottom, #ed1c24 0%, #fb444b 100%);
	background-image: -ms-linear-gradient(bottom, #ed1c24 0%, #fb444b 100%);

	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, #ed1c24),
		color-stop(1, #fb444b)
	);

	cursor : auto;
}

@media only screen
and (min-width : 651px)
and (max-width : 850px) {
	#features > div {
		width : 33.3%;
	}

	#features > div:nth-child(4n+0) {
		padding : 0 5px;
	}

	#features > div:nth-child(3n+0) {
		padding-left : 10px;
		padding-right : 0;
	}

	#features > div:nth-child(4n+1) {
		clear : none;
	}

	#features > div:nth-child(3n+1) {
		clear : left;
	}
}

@media only screen
and (min-width : 461px)
and (max-width : 650px) {
	#features > div {
		width : 50%;
	}

	#features > div:nth-child(4n+0) {
		padding : 0 5px;
	}

	#features > div:nth-child(2n+0) {
		padding-left : 10px;
		padding-right : 0;
	}

	#features > div:nth-child(4n+1) {
		clear : none;
	}

	#features > div:nth-child(2n+1) {
		clear : left;
	}

	.l-footer > div {
		float : left;
		width : 50%;
	}

	#frontpage div#editor_write, #frontpage div#editor_read {
		float : none;
		width : auto;
	}
}

@media only screen
and (max-width : 460px) {
	#features > div {
		width : auto;
		float : none;
	}

	#features > div:nth-child(4n+0) {
		padding : 0 0;
	}

	.l-footer > div {
		float : none;
		width : auto;
	}

	#frontpage div#editor_write, #frontpage div#editor_read {
		float : none;
		width : auto;
	}
}