html, body {
	position:absolute; height:100%; width:100%; margin:0; padding:0; overflow:hidden;
	color:#000;
	background:#fcfcfc url(../img/lightpaperfibers.png) repeat;
}

@font-face { font-family:'Alegreya'; font-weight:normal; src:url(Alegreya-Regular.ttf); }
@font-face { font-family:'Alegreya'; font-weight:bold; src:url(Alegreya-Bold.ttf); }

.editor {
	-moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
	position:absolute; width:84%; height:100%; padding:3.5% 20% 20% 4%; margin:0 0 0 16%;
	font:normal 28px/150% 'Alegreya',Georgia,serif;
	outline:none; overflow:auto; border:none; resize:none;
	-webkit-overflow-scrolling:touch; /* enable native smooth scrolling on iOS */
	word-wrap:break-word; /* prevent scrolling for long words or links without whitespace */
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* prevent grey flash when clicking */
}
[contenteditable]:empty::after { content:attr(data-placeholder); color:#ccc; }


aside {
	-moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;
	position:fixed; width:16%; min-width:135px; height:100%;
	font:90% FreeSans,Helvetica,sans-serif;
	opacity:0; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms;
	overflow:hidden; /* prevent scrolling, done in .entries */
	-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none;
	-webkit-overflow-scrolling:touch; /* enable native smooth scrolling on iOS */
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* prevent grey flash when clicking */
}
aside:hover, aside:focus, .visible aside { opacity:1; }

aside a, .add {
	display:block; cursor:pointer; outline:none;
	color:#444; text-decoration:none;
	white-space:nowrap; overflow:hidden;
}

.add { position:relative; display:inline-block; font-weight:normal; color:#999; width:80%; padding:1.5em 1.2em; }
.add:hover, .add:focus { color:#000; }
	.add .add-plus, .add .add-text { position:absolute; -webkit-transition:opacity 200ms; -moz-transition:opacity 200ms; -o-transition:opacity 200ms; transition:opacity 200ms; }
	.add .add-plus { opacity:1; font-size:160%; top:.51em; } .add:hover .add-plus { opacity:0; }
	.add .add-text { opacity:0; font-weight:bold; color:#000; } .add:hover .add-text { opacity:1; }

.entries {
	height:100%; display:block; margin:0; padding:0;
	overflow-y:auto; overflow-x:hidden; /* prevent horizontal scrolling */
	list-style:none;
}
.entries a {
	text-overflow:ellipsis; height:1.35em; padding:.5em 0 .5em 1.2em;
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* prevent grey flash when clicking */
}
.entries a:hover, .entries a:focus, .entries .selected { color:#000; font-weight:bold; }
.entries .item:last-child a { margin-bottom:50px; } /* whitespace to not overlap with the credits when scrolled down */

footer { position:absolute; bottom:0; padding:1em 2em; font-size:.7em; white-space:nowrap; opacity:.7; }
footer a { display:inline; padding:0; }


::-webkit-scrollbar { width:.2em; }
::-webkit-scrollbar-track-piece { background-color:transparent; }
::-webkit-scrollbar-thumb { background:rgba(50,50,50,.3); }

::selection { background-color:rgba(255,255,0,.5); }
::-moz-selection { background-color:rgba(255,255,0,.5); }


.menu-button {
	display:none; position:absolute; left:0; top:0;
	-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0); /* prevent grey flash when clicking */
}
/* Smartphones (portrait and landscape) ----------- */
@media (max-width:720px) {
	.editor {
		padding:50px 14px; margin:0; width:100%; font-size:20px;
		left:0;
		-webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease;
	}
		.visible .editor { left:85%; opacity:.2; }

	aside {
		opacity:1; font-size:24px; width:85%; background:#fcfcfc url(../img/lightpaperfibers.png) repeat; right:100%;
		-webkit-transition:0.3s right ease; -moz-transition:0.3s right ease; transition:0.3s right ease;
	}
		.visible aside { right:15%; }

	.add { padding:4px .5em; }
		.add-plus, .add-text { color:#000; opacity:1 !important; position:relative !important; }
		.add-plus:active, .add-text:active { opacity:1 !important; }
		.add-plus { top:0 !important; }

	.entries a { padding:10px 0 10px 14px; }
	.entries a:hover, .entries a:focus {
		font-weight:normal; /* prevent bold-flickering when scrolling on mobile */
	}

	.menu-button {
		position:relative; display:block; padding:14px; cursor:pointer; font-weight:bold; font-size:22px;
		left:0;
		-webkit-transition:all .3s ease; -moz-transition:all .3s ease; transition:all .3s ease;
	}
		.visible .menu-button {
			left:85%;
			/* expand clickable area to cover document side, prevent selecting of document when in menu */
			padding-bottom:150%; padding-right:30px;
			opacity:.2;
		}

	#remotestorage-connect {
		position:relative; right:-10px; top:-2px;
		-webkit-transition:0.3s right ease; -moz-transition:0.3s right ease; transition:0.3s right ease;
	}
		.visible #remotestorage-connect { right:-100%; }

	footer { display:none; }
}

@media (max-width:720px) and (orientation:landscape) {
	.menu-button { display:none; }
	.add { margin-top:0; }
}


/** Scrolling shadows by @kizmarh and @leaverou:http://lea.verou.me/2012/04/background-attachment-local/
 *  Only works in browsers supporting background-attachment:local; & CSS gradients
 *  Degrades gracefully */
.scrollbox {
	overflow:auto;
	background-color:transparent;
	background:
		/* Shadow covers */
		-webkit-linear-gradient(#fcfcfc 30%, rgba(255,255,255,0)),
		-webkit-linear-gradient(rgba(255,255,255,0), #fcfcfc 70%) 0 100%,
		/* Shadows */
		-webkit-radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
		-webkit-radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background:
		/* Shadow covers */
		-moz-linear-gradient(#fcfcfc 30%, rgba(255,255,255,0)),
		-moz-linear-gradient(rgba(255,255,255,0), #fcfcfc 70%) 0 100%,
		/* Shadows */
		-moz-radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
		-moz-radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background:
		/* Shadow covers */
		linear-gradient(#fcfcfc 30%, rgba(255,255,255,0)),
		linear-gradient(rgba(255,255,255,0), #fcfcfc 70%) 0 100%,
		/* Shadows */
		radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background-repeat:no-repeat;
	background-size:100% 40px, 100% 40px, 100% 14px, 100% 14px;

	/* Opera doesn't support this in the shorthand */
	background-attachment:local, local, scroll, scroll;
}


@media print {
	.entries, .menu-button, footer, #remotestorage-connect {
		display:none;
	}

	body, .editor {
		margin:0;
		padding:10px;
		height:auto;
		width:auto;
		position:static;
	}
}


/* Customization of remotestorage widget */
#remotestorage-widget { right:20px !important; }