body, html, div, span, h1, h2, h3, h4, h5, h6, p, a, img, strong, ul, ol, li, form, input, textarea, label {position: relative; margin: 0; padding: 0; font-size: 100%; vertical-align: top;}
* {box-sizing: border-box}
html {height: 100%;}
body {font-family: quicksand; font-size: 12px; padding: 20px 10px 80px; color: #333; transition: transform .4s ease; -webkit-text-size-adjust: none; touch-action: manipulation; -webkit-touch-action: manipulation; min-height: 100%;}
h1 {font-size: 20px; color: rgba(30,30,30,0.8); text-transform: uppercase; transition: .3s all ease;}
h3 {font-size: 16px; padding: 10px 0;}
h4 {font-size: 14px; padding: 10px 0;}
img {border: none; max-width: 100%;}
hr {background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.2); outline: none; width: 100%; margin: 5px 0;}
a {text-decoration: none; outline: 0; color: #333; transition: .3s ease all;}
a:hover {text-shadow: #FFF 0 0 10px, #FFF 0 0 10px, #FFF 0 0 10px;}

table {position: relative; width: calc(100% - 34px); border-collapse: collapse; margin-right: 34px;}
table td, table th {background: rgba(0,0,0,0.02); position: relative; padding: 10px; vertical-align: middle; font-size: 14px; text-align: left; line-height: 16px; color: #333;}
table th {background: rgba(0,0,0,0.7); color: #FFF;}
table tr:first-child th:first-child, table tr:first-child td:first-child {border-top-left-radius: 10px;}
table tr:first-child th:last-child, table tr:first-child td:last-child {border-top-right-radius: 10px;}
table tr:last-child th:first-child, table tr:last-child td:first-child {border-bottom-left-radius: 10px;}
table tr:last-child th:last-child, table tr:last-child td:last-child {border-bottom-right-radius: 10px;}
table tr:nth-child(even) td {background: rgba(0,0,0,0.1);}

.clear {clear: both;}
.centred {text-align: center; margin: auto;}
.inline {display: inline-block !important;}
.floatLeft {float: left;}
.floatRight {float: right;}
.pointer {cursor: pointer !important;}
.nowrap {white-space: nowrap;}
.block {display: block;}
.middle {vertical-align: middle;}
.lefty {text-align: left !important;}
.righty {text-align: right !important;}
.hidden {display: none !important;}
.fx {display: table; display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;}
.icon {width: 30px; height: 30px; vertical-align: middle; padding: 5px; margin-right: 5px;}
.titleImg {display: inline-block; vertical-align: middle; width: 26px; height: 26px; margin-right: 5px; opacity: 0.8;}
.message {
	background: rgba(0,0,0,0.6); position: fixed; padding: 5px 6px; font-size: 14px; color: #FFF; line-height: 16px; display: flex; align-items: center; justify-content: center;
	-webkit-animation: message 8s ease 1; animation: message 8s ease 1; opacity: 0; visibility: hidden; z-index: 500; overflow: hidden; max-width: 400px; top: 10px; right: 60px; border-radius: 10px;
}
@-webkit-keyframes message {0%,85%{opacity: 1; visibility: visible;}99%{opacity: 0;}100%{opacity: 0;}}
@keyframes message {0%,85%{opacity: 1; visibility: visible;}99%{opacity: 0;}100%{opacity: 0;}}
#preload {position: fixed; height: 40px; top: -100px; overflow: hidden;}
#preload img {width: 40px;}
.container {max-height: calc(100% - 60px); overflow-y: auto; padding-bottom: 20px;}
.centreBox {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; display: inline-block; text-align: center; color: #333; z-index: 99;}
.centreBox.fixed {position: fixed; height: 100%;}
.iconBox {display: inline-block; margin: 10px; text-transform: uppercase; font-weight: 700; color: rgba(30,30,30,0.8);}
.iconBox > * {color: rgba(30,30,30,0.8); cursor: pointer; display: inline-block;}
.iconBox > * img, .switch, .iconBox.media > div, .iconBox > .inner {width: 100px; height: 100px; display: block; padding: 20px; opacity: 0.65; border-radius: 20px; border: 3px solid #333; margin-bottom: 10px; transition: .3s all ease;}
.iconBox:hover {text-shadow: #FFF 0 0 5px, #FFF 0 0 5px, #FFF 0 0 5px;}
.iconBox:hover > * {color: rgba(30,30,30,0.9);}
.iconBox:hover img, .iconBox:hover .inner {opacity: 0.9;}
.iconBox:active > * {color: #333;}
.iconBox:active img, .iconBox:active .inner {opacity: 1; transition: none;}
.iconBox.touch, .iconBox.touch > *, .iconBox.touch img {transition: 2s all ease;}
.iconBox.touch:hover {text-shadow: none;}
.iconBox.touch:hover > * {color: rgba(30,30,30,0.8);}
.iconBox.touch:hover img, .iconBox.touch:hover .switch, .iconBox.touch:hover .inner {opacity: 0.65;}
.iconBox.touch:active {text-shadow: #FFF 0 0 5px, #FFF 0 0 5px, #FFF 0 0 5px; transition: none;}
.iconBox.touch:active > * {color: rgba(30,30,30,0.9); transition: none;}
.iconBox.touch:active img, .iconBox.touch:active .switch, .iconBox.touch:active .inner {opacity: 0.9; transition: none;}
.iconBox > .inner {width: auto !important; display: flex; align-items: center; cursor: pointer;}
.iconBox > .inner select {font-size: 14px; line-height: 24px; cursor: pointer;}
.notifyBox {width: 500px; max-width: calc(100% - 40px); margin: 0 auto 20px; font-size: 14px; padding: 0 20px 10px;}
.button {
	background: transparent; border: 2px solid rgba(30,30,30,0.5); color: rgba(30,30,30,0.8); position: relative; padding: 6px 14px; display: inline-block; text-decoration: none;
	text-transform: uppercase; font: 700 11px quicksand; margin: 3px; transition: .2s all ease; border-radius: 10px; vertical-align: middle; -webkit-appearance: none; cursor: pointer;
}
.button:hover, a:hover .button {text-shadow: none; border-color: #333; box-shadow: #FFF 0 0 10px, inset #FFF 0 0 10px; text-shadow: #FFF 0 0 5px, #FFF 0 0 5px, #FFF 0 0 5px; color: #333;}
.button.hollow {border: none !important; box-shadow: none;}
.switch {opacity: 0.65;}
.switch:hover {opacity: 1; border-color: #333;}
.switch:before {content: ""; background: rgba(0,0,0,0.8); position: absolute; top: 50%; left: 50%; transform: translate(-27px,-17px); border-radius: 36px; display: block; width: 54px; height: 34px; transition: .1s all ease; box-shadow: inset rgba(0,0,0,0.3) 0 1px 1px;}
.switch:after {content: ""; background: #FFF; position: absolute; border-radius: 36px; display: block; transition: .1s all ease; width: 28px; height: 28px; top: calc(50% - 1px); left: 50%; transform: translate(-24px,-14px); border-bottom: 2px solid #CCC; box-shadow: rgba(0,0,0,0.2) 0 1px 2px;}
.switch.on:before {background: rgba(0,136,255,0.8);}
.switch.on:after {transform: translate(-4px,-14px);}


/* FORMS AND INPUT */
input[type=text], input[type=password], input[type=number] {
	background: rgba(0,0,0,0.5); position: relative; display: block; font: 700 13px/24px quicksand; transition: .3s all ease; padding: 10px 20px; border-radius: 10px; width: 250px; margin: 10px auto; border: none; outline: none; text-align: center; color: #E4E4E4; -webkit-appearance: none; max-width: calc(100% - 20px);
}
input[type=text]:focus, input[type=password]:focus {background: rgba(0,0,0,0.6);}
input[type=range] {width: 80px; vertical-align: middle;}
input[type=color], select {vertical-align: middle;}
input[type=date]::-webkit-calendar-picker-indicator {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; color: transparent; background: transparent; cursor: pointer;}
input[type=number] {-moz-appearance: textfield;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input::-moz-placeholder {text-transform: uppercase;}
input::-webkit-input-placeholder {text-transform: uppercase;}
input:-ms-input-placeholder {text-transform: uppercase;}
input.ck-input {background: #FFF !important;}


/* MENU AND TOOLBAR */
nav {position: fixed; width: 50px; height: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; flex-direction: column; top: 0; right: 6px; padding: 10px 0; text-align: center; z-index: 99;}
nav ul {padding-left: 0;}
nav li {display: block;}
nav li:before {content: attr(data-title); position: absolute; width: 0; display: inline-block; text-align: right; right: 56px; top: 10px; color: #333; transition: .2s ease all; font-size: 11px; font-weight: 700; line-height: 30px; opacity: 0; overflow: hidden; white-space: nowrap; text-transform: uppercase; border-radius: 10px;}
nav img {width: 30px; margin: 10px 0; opacity: 0.6; transition: .2s ease all;}
nav li div, nav li span {cursor: pointer;}
nav li:hover img {opacity: 1;}
nav li:hover:before {opacity: 1; width: 160px;}
nav li:active img {opacity: 1; transition: none;}
nav li:active:before {transition: none;}
nav li.touch:hover img {opacity: 0.65;}
nav li.touch:hover:before {opacity: 0; width: 0;}
nav li.touch:before {transition: 2s all ease;}
nav li.touch:active:before {opacity: 1; width: 160px; transition: none;}
nav li.large img {width: 40px;}
nav li.large:before {right: 55px; line-height: 43px;}


/* NOTES */
#journal, #journal .page {position: relative; z-index: 1;}
#journal .page .content {position: relative; color: #333; font: 16px/25px "quicksand"; outline: none; word-break: break-word; letter-spacing: -0.3px; padding: 0 70px 0 10px; width: 100%; z-index: 5;}
#journal .page ul, #journal .page ol {margin-left: 25px;}
#journal .page .ck-content {border: none !important; box-shadow: none !important; outline: none !important; overflow: visible !important; padding: 0 70px 0 10px !important; margin: 0 !important; top: 0 !important;}
#journal .nav {position: absolute; height: 100%; width: 80px; top: 0; left: -40px; font-family: quicksand; text-align: center; cursor: pointer; z-index: 50;}
#journal .nav:after {content: "\2039"; position: absolute; font-size: 100px; font-weight: 700; width: 100%; top: 50%; height: 50%; left: 0; transform: translate(0,-25%); color: rgba(255,255,255,0); display: block; transition: .2s all ease;}
#journal .nav#Next, #journal .nav#Next:after {content: "\203A"; left: auto; right: -20px; text-align: left;}
#journal .nav:hover:after {color: rgba(255,255,255,1); text-shadow: rgba(0,0,0,0.3) 0 0 20px;}
#journal .nav.end {cursor: default;}
#journal .nav.end:hover:after {color: rgba(255,255,255,0.3); text-shadow: rgba(0,0,0,0.1) 0 0 10px;}
.modal {background: rgba(255,255,255,0.95); width: 100%; height: 100%; font-size: 14px; padding: 20px; overflow-y: auto; opacity: 0; transition: .1s all ease;}
.modalFx {position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 5;}
.modal .inner {z-index: 5;}
.modal .close {position: absolute; top: 20px; right: 20px; font-size: 50px; text-align: center; line-height: 40px; width: 40px; height: 40px; z-index: 9;}
.modal .closeArea {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
#notesList {user-select: none;}
#notesList #notes {height: 100%; text-align: left;}
#notesList .note {padding: 6px 0;}
#notesList .note, .modal .close {opacity: 0.8; cursor: pointer; transition: .3s all ease;}
#notesList .note:hover, .modal .close:hover {opacity: 1; text-shadow: #FFF 0 0 5px, #FFF 0 0 5px, #FFF 0 0 5px;}
#notesList h1.year {padding: 12px 0;}
#notesList #notes > p {font-size: 16px; padding-left: 10px; line-height: 1;}
.noteDate {float: none; color: #333; padding: 10px; cursor: pointer; transition: .1s all ease; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.noteDate:hover {background: #FFF09C;}
.noteDate:before {position: relative; content: attr(data-content); font-size: 18px; line-height: 1; float: left; vertical-align: middle; padding: 10px 0; text-align: left; width: 40px;}
.noteDate.folderIcon:before {font-size: 30px; line-height: 18px;}
.noteDate.folder:before {content: ""; background: url(/images/icon-folder.svg) transparent left center no-repeat; background-size: 30px; padding: 0; height: 30px;}
.noteDate.back:before {content: ".."; font-size: 60px; line-height: 18px; top: -14px;}
.fIcon {font-size: 32px; display: inline-block; line-height: 32px; padding-right: 5px;}

@media (min-width: 1024px) {
	#journal {margin-left: 360px;}
	#notesList {
		position: fixed; left: 0; top: 0; width: 360px; height: 100%; overflow-y: auto; display: block !important; opacity: 1 !important;
		transform: none; padding: 20px 0; border-right: 1px solid #DDD;
	}
	#notesList #notes > p {padding-left: 20px;}
	#notesList .close {display: none;}
	.noteDate.active {background-color: #EEE;}
	.noteDate {padding: 10px 20px;}
	#notesNav {display: none;}
}

@media (max-width: 767px) {
	h1 {font-size: 16px;}
	nav img {width: 24px; margin: 8px 0;}
	nav li.large img {width: 34px;}
	nav li:before {right: 44px; line-height: 24px;}
	nav li.large:before {right: 48px; line-height: 34px;}
	#journal .page .content {font-size: 14px; line-height: 21px;}
	.notifyBox p {font-size: 0.8em;}
	.iconBox {margin: 5px; width: 60px; font-size: 0.8em;}
	.iconBox > * img, .switch, .iconBox.media > div {width: 60px; height: 60px; padding: 5px; border: none; margin: 0 auto 5px;}
}

@media print {
	body, html {position: relative; background: none;}
	nav {display: none;}
	#journal {position: static !important; width: 100%; height: auto; background: none !important; margin-left: 0 !important;}
	#journal .page, #journal .page .content {position: static !important; overflow: visible !important; white-space: normal !important;}
	#notesList, .message {display: none !important;}
}