html {
	padding: 0;
	margin: 0;
}
body {
	margin: 0;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 100%;
	color: #000000;
	background: #ffffff;
}
a {
	color: #858585;
	text-decoration: underline;
}
a:hover {
	color: #000000;
}
a img {
	border: 0;
}
input, textarea, button, select {
	/* Removes unnecessary space: */
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	font-size: 100%;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

#header {
	width: 90%;
	margin: 0 auto;
}
#header:before, #header:after {
	content: "";
	display: table;
}
#header:after {
	clear: both;
}
#header #logo {
	float: left;
	margin: 27px 50px 0px 0px;
}
#header #logo img {
	width: 100%;
	max-width: 287px;
	height: auto;
}
#header #buttons {
	float: right;
}
/* --------------------------------------- */
/* For devices with portrait mode */
/*@media screen and (orientation:portrait) {
	#header #buttons {
		float: left;
	}
}*/
/* For devices <= 800px */
@media screen and (max-width: 800px) {
	#header #buttons {
		float: left;
	}
}
/* --------------------------------------- */
#buttons #new_draft, #buttons #delete_draft {
	display: inline-block;
	padding: 5px 15px;
	border-radius: 4px;
	color: #000000;
	font-size: 200%;
	background-color: #f8f8f8;
	cursor: pointer;
}
#buttons #new_draft {
	margin: 20px 0 0 0;
	border-bottom: 2px solid #fcfcfc;
}
#buttons #delete_draft {
	margin: 20px 0 0 20px;
	border-bottom: 2px dashed #c8c8c8;
}
#buttons #new_draft:hover {
	background-color: #fcfcfc;
	border-bottom: 2px solid #f8f8f8;
}
#buttons #delete_draft:hover {
	color: #ffffff;
	background-color: #ffb5b5;
	border-bottom: 2px dashed #ffffff;
}
/* --------------------------------------- */
/* For devices <= 800px */
@media screen and (max-width: 800px) {
	#buttons #new_draft, #buttons #delete_draft {
		margin-top: 25px;
		font-size: 120%;
	}
}
/* --------------------------------------- */

#create_temp_url {
	width: 90%;
	margin: 20px auto 0 auto;
	clear: both;
}
#create_temp_url #temp_url_nav {
	color: #858585;
	border-bottom: 1px dotted #858585;
	cursor: pointer;
}
#create_temp_url #temp_url_nav:hover {
	color: #000000;
	border-bottom: 1px dotted #000000;
}
#temp_url_box {
	margin-top: 20px;
}
/* Ajax result... */
#temp_url_box #temp_url_result {
	margin-bottom: 10px;
}
#temp_url_box #temp_url_result #temp_url {
	width: 100%;
	max-width: 520px;
	padding: 5px;
	border-radius: 2px;
	border: 1px solid #c8c8c8;
	color: #858585;
	cursor: text;
}
#temp_url_box #temp_url_result #temp_url:hover, #temp_url_box #temp_url_result #temp_url:focus {
	border: 1px solid #aaaaaa;
}
#temp_url_box #temp_url_result .error {
	color: #ff5050;
}
/* -------------- */
#temp_url_box #temp_url_password {
	margin-top: 20px;
}
#temp_url_box #password {
	width: 218px;
	padding: 5px;
	border-radius: 2px;
	border: 2px solid #c8c8c8;
}
#temp_url_box #password:hover, #temp_url_box #password:focus {
	border: 2px solid #aaaaaa;
}
#temp_url_box #password_tip {
	margin-top: 5px;
	font-size: 80%;
}
#temp_url_box #temp_url_buttons .temp_url_button {
	display: inline-block;
	margin: 20px 20px 0 0;
}
#temp_url_box #another_temp_url {
	display: inline-block;
	margin: 20px 20px 0 0;
}
#temp_url_box #temp_url_buttons #create_url, #temp_url_box #temp_url_buttons #cancel_url, #temp_url_box #another_temp_url #create_another_url {
	padding: 5px 12px;
	border: 2px solid #c8c8c8;
	border-radius: 4px;
	background-color: #ffffff;
	color: #000000;
	cursor: pointer;
}
#temp_url_box #temp_url_buttons #create_url:hover, #temp_url_box #temp_url_buttons #cancel_url:hover, #temp_url_box #another_temp_url #create_another_url:hover {
	border: 2px solid #aaaaaa;
}
.preloader_button {
	background: url(../images/preloader.gif) repeat;
	opacity: 0.4;
	border: 2px solid #ffffff !important;
	cursor: default !important;
}

#editable_text_box {
	width: 90%;
	margin: 20px auto 0 auto;
}
#editable_text_box textarea {
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	height: 340px; /* Start value */
	padding: 10px;
	margin: 0;
	/* Removes unnecessary space: */
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	/*----------------------------*/
	border-radius: 3px;
	border: 2px solid #c8c8c8;
	resize: vertical; /* Resize - is not supported by IE / Edge :-( */
	/* Size of "Tab" space: 
	tab-size: 4;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	*/
}
#editable_text_box textarea:hover {
	border: 2px solid #aaaaaa;
}
#editable_text_box textarea:focus {
	border: 2px solid #aaaaaa;
	outline: 0; /* for chrome */
}
#editable_text_box textarea:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

#printable_text {
	display: none;
}

#count_line {
	width: 90%;
	margin: 0 auto;
}
#count_line:before, #count_line:after {
	content: "";
	display: table;
}
#count_line:after {
	clear: both;
}
#count_line #count {
	float: left;
	display: inline-block;
	margin: 5px 0 0 0;
}
#count_line #count span {
	border-bottom: 1px dotted #858585;
	color: #858585;
	cursor: pointer;
}
#count_line #count span:hover {
	border-bottom: 1px dotted #000000;
	color: #000000;
}
#count_line #style_mode {
	float: right;
	display: inline-block;
	margin: 5px 10px 0 10px;
}
/* --------------------------------------- */
/* For devices <= 360px */
@media screen and (max-width: 360px) {
	#count_line #style_mode {
		display: none;
	}
}
/* --------------------------------------- */
#count_line #style_mode span {
	width: 20px;
	height: 20px;
	display: block;
	cursor: pointer;
}
#count_line #style_mode #night_mode {
	background: url(../images/style_mode.png) 0 0 no-repeat;
}
#count_line #style_mode #night_mode:hover {
	background: url(../images/style_mode.png) 0 -20px no-repeat;
}
#count_line #style_mode #day_mode {
	background: url(../images/style_mode.png) -20px 0 no-repeat;
}
#count_line #style_mode #day_mode:hover {
	background: url(../images/style_mode.png) -20px -20px no-repeat;
}

#limit_notice {
	width: 90%;
	margin: 20px auto 0 auto;
}
#limit_notice div {
	padding: 10px;
	color: #ffffff;
	background-color: #ffb5b5;
}
#status_text_by_default, #status_text {
	width: 90%;
	margin: 5px auto 0 auto;
}

#drafts {
	width: 90%;
	margin: 20px auto 0 auto;
}
#drafts #delete_all_drafts {
	display: inline-block;
	margin: 0 0 20px 0;
	padding: 5px 10px;
	border: 2px dashed #c8c8c8;
	border-radius: 4px;
	color: #000000;
	font-size: 200%;
	cursor: pointer;
}
#drafts #delete_all_drafts:hover {
	color: #ffffff;
	border: 2px dashed #ffb5b5;
	background-color: #ffb5b5;
}
#drafts #drafts_list {
	overflow: hidden;
}
#drafts #drafts_list a {
	border-bottom: 1px dotted #858585;
	color: #858585;
	text-decoration: none;
}
#drafts #drafts_list a:hover {
	border-bottom: 1px dotted #000000;
	color: #000000;
	text-decoration: none;
}
#drafts #drafts_list a:hover span {
	border-bottom: 1px dotted #858585;
	color: #858585;
	white-space: nowrap;
}
#drafts #drafts_list span {
	border-bottom: 1px dotted #c8c8c8;
	color: #c8c8c8;
	white-space: nowrap;
}

#footer {
	width: 90%;
	margin: 50px auto 0 auto;
	padding-bottom: 50px;
}
#footer #footer_menu {
	text-align: center;
}
#footer #footer_menu a, #footer #footer_menu span {
	margin: 0px 2%;
}
#footer #footer_desc {
	margin-top: 50px;
	font-size: 80%;
	color: #858585;
}
#footer #footer_desc a {
	color: #858585;
}
#footer #footer_bottom_line {
	margin-top: 50px;
}
#footer #footer_bottom_line:before, #footer #footer_bottom_line:after {
	content: "";
	display: block;
	clear: both;
}
#footer #footer_bottom_line #footer_social_b {
	float: left;
	margin-right: 20px;
}
#footer #footer_bottom_line #footer_lang {
	float: right;
}
/* --------------------------------------- */
/* For devices with portrait mode */
@media screen and (orientation:portrait) {
	#footer #footer_bottom_line #footer_social_b {
		float: none;
	}
	#footer #footer_bottom_line #footer_lang {
		float: none;
		margin-top: 50px;
	}
}
/* --------------------------------------- */
/* Temporary fix for the FB Like button... */
#footer #footer_bottom_line #footer_social_b .addthis_toolbox .addthis_button_facebook_like .fb_iframe_widget {
	width: 100% !important;
	height: 20px !important;
}
#footer #footer_bottom_line #footer_social_b .addthis_toolbox .addthis_button_facebook_like .fb_iframe_widget span {
	width: 100% !important;
	height: 20px !important;
	vertical-align: unset;
}
#footer #footer_bottom_line #footer_social_b .addthis_toolbox .addthis_button_facebook_like .fb_iframe_widget iframe {
	height: 20px !important;
	position: static !important;
	margin: 0 -5px !important;
}
/* Temporary fix for Tweet button... */
#footer #footer_bottom_line #footer_social_b .addthis_toolbox .addthis_button_tweet .tweet_iframe_widget {
	width: 100% !important;
}
/* --------------------------------- */
#footer #footer_bottom_line #footer_social_b .addthis_toolbox .share_icons a span {
	border-radius: 1px;
}
#footer #footer_please_note {
	margin-top: 40px;
	font-size: 70%;
	color: #858585;
}

#get_draft_via_temp_url {
	width: 90%;
	margin: 5% auto 10% auto;
	text-align: center;
}
#get_draft_via_temp_url h1 {
	margin: 0;
	padding: 20px 0;
	font-size: 250%;
	font-weight: normal;
}
#get_draft_via_temp_url #get_draft_desc {
	margin-bottom: 20px;
}
#get_draft_via_temp_url #get_draft_password {
	display: inline-block;
	margin: 0 20px 0 0;
}
#get_draft_via_temp_url #get_draft_button {
	display: inline-block;
	margin: 0;
}
#get_draft_via_temp_url #password {
	width: 150px;
	padding: 5px;
	border-radius: 2px;
	border: 2px solid #c8c8c8;
}
#get_draft_via_temp_url #password:hover, #get_draft_via_temp_url #password:focus {
	border: 2px solid #aaaaaa;
}
#get_draft_via_temp_url #get_draft_button #ok {
	padding: 5px 12px;
	border: 2px solid #c8c8c8;
	border-radius: 4px;
	background-color: #ffffff;
	color: #000000;
	cursor: pointer;
}
#get_draft_via_temp_url #get_draft_button #ok:hover {
	border: 2px solid #aaaaaa;
}
#get_draft_via_temp_url #get_draft_status {
	margin: 20px 0;
}
#get_draft_via_temp_url #get_draft_status .error {
	color: #ff5050;
}

/* ----------------- Confirm Lightbox ----------------- */
#confirm_layer {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 1000;
	/* grey backgraund */
	background: url(../images/b.png) repeat grey;
	opacity: 0.5;
}
#confirm_lightbox {
	width: 50%;
	/* 150px - for buttons... */
	min-width: 150px;
	min-height: 20%;
	top: 25%;
	left: 25%;
	right: 25%;
	position: fixed;
	z-index: 10000;
	color: #000000;
	background: none repeat scroll 0 0 #ffffff;
	border-radius: 4px 4px 4px 4px;
	box-shadow: 0 25px 50px rgba(44,47,23,0.5);
	-moz-box-shadow: 0 25px 50px rgba(44,47,23,0.5);
	-webkit-box-shadow: 0 25px 50px rgba(44,47,23,0.5);
}
/* --------------------------------------- */
/* For devices with portrait mode */
@media screen and (orientation:portrait) {
	#confirm_lightbox {
		width: 90%;
		left: 5%;
		right: 5%;
		position: absolute;
	}
}
/* For devices with "height" <= 480px */
@media screen and (max-height: 480px) {
	#confirm_lightbox {
		position: absolute;
	}
}
/* --------------------------------------- */
#confirm_lightbox #confirm_message {
	padding: 20px 20px 0 20px;
	text-align: center;
	font-size: 170%;
}
#confirm_lightbox #confirm_buttons {
	margin: 10px;
	text-align: center;
	font-size: 150%;
}
#confirm_lightbox #confirm_buttons div {
	display: inline-block;
	margin: 10px;
	padding: 5px 15px;
	border: 2px solid #c8c8c8;
	border-radius: 4px;
	background-color: #ffffff;
	color: #000000;
	cursor: pointer;
}
#confirm_lightbox #confirm_buttons #cancel:hover {
	border: 2px solid #aaaaaa;
}
#confirm_lightbox #confirm_buttons #ok {
	border: 2px solid #ffb5b5;
	background-color: #ffb5b5;
	color: #ffffff;
}
#confirm_lightbox #confirm_buttons #ok:hover {
	border: 2px solid red;
	background-color: red;
	color: #ffffff;
}
/* -------------------------------------------------------- */

#about {
	width: 70%;
	margin: 5% auto 0 auto;
}
/* --------------------------------------- */
/* For devices with portrait mode */
@media screen and (orientation:portrait) {
	#about {
		width: 90%;
	}
}
/* --------------------------------------- */
#about h1 {
	font-size: 300%;
	font-weight: normal;
}
#about h2 {
	margin: 40px 0 15px 0;
	font-size: 150%;
	font-weight: normal;
}
#about img {
	border: 1px solid #efefef;
}
#about #features {
	display: table;
}
#about #features .screenshot {
	display: table-cell;
	max-width: 450px;
	vertical-align: top;
}
#about #features .screenshot div {
	padding: 20px;
	border: 1px solid #efefef;
	border-radius: 2px;
}
#about #features .screenshot img {
	border: none;
}
#about #features .text {
	display: table-cell;
	padding-left: 20px;
	vertical-align: top;
}
/* --------------------------------------- */
/* For devices <= 900px */
@media screen and (max-width: 900px) {
	#about #features .screenshot, #about #features .text {
		display: block;
		max-width: 100%;
	}
}
/* --------------------------------------- */

#faq {
	width: 70%;
	margin: 5% auto 0 auto;
}
/* --------------------------------------- */
/* For devices with portrait mode */
@media screen and (orientation:portrait) {
	#faq {
		width: 90%;
	}
}
/* --------------------------------------- */
#faq h2 {
	font-size: 300%;
	font-weight: normal;
}
#faq h3 {
	margin: 40px 0 15px 0;
	font-size: 150%;
	font-weight: normal;
}
#faq #faq_list {
	padding-bottom: 20px;
	border-bottom: 1px solid #c8c8c8;
}

#terms {
	width: 70%;
	margin: 5% auto 0 auto;
}
/* --------------------------------------- */
/* For devices with portrait mode */
@media screen and (orientation:portrait) {
	#terms {
		width: 90%;
	}
}
/* --------------------------------------- */
#terms h2 {
	font-size: 30px;
	font-weight: normal;
}
#terms h3 {
	font-size: 20px;
	font-weight: normal;
}
#terms p, #terms li {
	font-size: 14px;
}
#terms li {
	margin-bottom: 10px;
}

#feedback {
	width: 70%;
	margin: 5% auto 0 auto;
}
#feedback h2 {
	font-size: 300%;
	font-weight: normal;
}
#feedback_notice {
	padding: 5px;
	margin: 0 0 20px 0;
	border-radius: 3px;
	background-color: #c8c8c8;
	color: #ffffff;
}
#feedback_form {
	display: table;
	width: 100%;
}
#feedback_form .feedback_row {
	display: table-row;
}
#feedback_form .feedback_label, #feedback_form .feedback_field {
	display: table-cell;
	vertical-align: top;
}
#feedback_form .feedback_label {
	width: 10%;
	min-width: 120px;
	padding: 5px;
	font-weight: bold;
}
#feedback_form .feedback_field {
	width: 90%;
}
#feedback_form input, #feedback_form textarea, #feedback_form select {
	width: 100%;
	padding: 5px;
	border-radius: 2px;
	border: 2px solid #c8c8c8;
}
#feedback_form input {
	margin-bottom: 20px;
}
#feedback_form input:hover, #feedback_form input:focus, #feedback_form textarea:hover, #feedback_form textarea:focus, #feedback_form select:hover, #feedback_form select:focus {
	border: 2px solid #aaaaaa;
}
#feedback_form #name, #feedback_form #from {
	max-width: 400px;
}
#feedback_form button {
	display: block; /* Positioning the button on a new line in the case of <textarea> has a width less than the outer max. space */
	margin-top: 20px;
	padding: 5px 15px;
	border: 2px solid #c8c8c8;
	border-radius: 4px;
	background-color: #ffffff;
	font-size: 200%;
	color: #000000;
}
#feedback_form button:hover {
	border: 2px solid #aaaaaa;
}
#feedback_form #feedback_count_progress {
	width: 100%;
	height: 10px;
	border: none;
}
#feedback_form #feedback_count_progress #bar {
	width: 0px;
	height: 10px;
	border: none;
}
#feedback_form #feedback_count {
	margin-top: 5px;
}
#feedback_form #feedback_robot_test {
	margin-top: 20px;
}
#feedback_form #feedback_robot_test div {
	display: inline-block;
}
#feedback_form #feedback_robot_test #feedback_robot_test_description {
	margin: 0 10px 10px 0;
	color: #ff5050;
	font-weight: bold;
}
#feedback_form #feedback_robot_test #feedback_robot_test_q_box {
	padding: 10px;
	border-radius: 3px;
	background-color: #f5f5f5;
}
#feedback_form #feedback_robot_test #feedback_robot_test_q_box div {
	margin: 0 10px;
}
#feedback_form #feedback_robot_test #feedback_robot_test_q_box div:nth-child(2) {
	font-size: 140%;
	font-family: monospace;
}
#feedback_form #feedback_robot_test #feedback_robot_test_q_box :last-child {
	margin: 0;
}
#feedback_form #feedback_robot_test #feedback_robot_test_q_box select {
	width: 50px;
}
/* --------------------------------------- */
/* For devices with portrait mode */
@media screen and (orientation:portrait) {
	#feedback {
		width: 90%;
	}
	#feedback_form .feedback_label, #feedback_form .feedback_field {
		display: block;
		width: 100%;
	}
}
/* --------------------------------------- */

#server_error {
	width: 90%;
	margin: 5% auto 0 auto;
}
#server_error .server_error_header, #server_error .server_error_code, #server_error .server_error_desc {
	max-width: 580px;
	margin: auto;
}
#server_error .server_error_header img {
	width: 100%;
	max-width: 580px;
	height: auto;
}
#server_error .server_error_code {
	margin-top: 40px;
	font-size: 300%;
	font-weight: normal;
}