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 {background: url(../images/christmas.jpg) transparent top no-repeat; background-size: cover; background-attachment: fixed; height: 100%;}
body {font-family: arial; font-size: 12px; padding: 20px 10px 100px; color: #FFF; transition: transform .4s ease; -webkit-text-size-adjust: none; touch-action: manipulation; -webkit-touch-action: manipulation; overflow-y: auto; min-height: calc(100% - 120px);}
h1 {font-size: 26px; color: rgba(30,30,30,0.8); text-transform: uppercase; transition: .3s all ease; color: #FFF; text-shadow: #86463A 0 0 20px;}
h3 {font-size: 16px; padding: 10px 0; color: #FFF; text-shadow: #86463A 0 0 20px;}
h4 {font-size: 14px; padding: 10px 0; color: #FFF; text-shadow: #86463A 0 0 20px;}
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); color: #FFF; border-collapse: collapse; margin-right: 34px;}
table td, table th {background: rgba(0,0,0,0.3); position: relative; padding: 10px; vertical-align: middle; font-size: 14px; text-align: left; line-height: 16px;}
table th {background: rgba(0,0,0,0.7); color: #FFF;}
table th:first-child {border-radius: 10px 0 0 0;}
table th:last-child {border-radius: 0 10px 0 0;}
table tr:nth-child(even) td {background: rgba(0,0,0,0.5);}
table tr:last-child td:first-child {border-radius: 0 0 0 10px;}
table tr:last-child td:last-child {border-radius: 0 0 10px 0;}

.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; margin-left: 40px; opacity: 0.8;}
.message {
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 40%, );
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 40%);
	background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 40%);
	position: fixed; right: 0; padding: 5px 20px; font-size: 14px; color: #FFF; line-height: 16px; display: flex; align-items: center; justify-content: flex-end;
	-webkit-animation: message 8s ease 1; animation: message 8s ease 1; opacity: 0; visibility: hidden; z-index: 500; overflow: hidden; width: calc(100% - 40px);
	top: auto; bottom: 0;
}
@-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;}
.notifyBox {width: 500px; max-width: calc(100% - 40px); margin: 0 auto 20px; font-size: 14px; padding: 0 20px 10px; color: #FFF;}
.button {
	background: transparent; border: 2px solid rgba(255,255,255,0.5); color: rgba(255,255,255,0.8); position: relative; padding: 6px 14px; display: inline-block; text-decoration: none;
	text-transform: uppercase; font: 700 11px arial; 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: #FFF; 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: #FFF;}
.button.hollow {border: none !important; box-shadow: none;}


/* 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 arial; transition: .3s all ease; padding: 10px 20px; border-radius: 6px; width: 250px; margin: 10px auto; border: none; outline: none; text-align: center; color: #E4E4E4; text-transform: uppercase; -webkit-appearance: none; max-width: calc(100% - 20px);
}
input[type=text]:focus, input[type=password]:focus {background: rgba(0,0,0,0.7);}
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;}


/* MENU AND TOOLBAR */
nav {
	background: -moz-linear-gradient(left, rgba(107,64,56,0.6) 20%, rgba(107,64,56,0) 100%);
	background: -webkit-linear-gradient(left, rgba(107,64,56,0.6) 20%, rgba(107,64,56,0) 100%);
	background: linear-gradient(to right, rgba(107,64,56,0.6) 20%, rgba(107,64,56,0) 100%);
	background: ; 
	position: fixed; width: 60px; height: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; flex-direction: column; top: 0; left: 0; padding: 10px 10px 0 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: left; left: 50px; top: 10px; color: #FFF; 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; text-shadow: #86463A 0 0 10px, #86463A 0 0 5px;}
nav img {width: 30px; margin: 10px 0; opacity: 0.7; 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;}


/* LABELS */
#journal .page .content {position: relative; color: #333; z-index: 5; width: 1030px; margin: auto;}
#labels {display: flex; flex-wrap: wrap;}
.label {background: #FFF; position: relative; display: flex; flex-direction: column; justify-content: center; margin: 1px 5px; border-radius: 6px; width: 500px; height: 170px; font: 400 17px/24px arial; vertical-align: middle; padding: 0 60px; outline: none; transition: .3s ease all;}
.label:focus {background-color: #FFF5BC;}
.label:nth-child(14n) {margin: 1px 5px 60px;}
.label img {width: 20px; height: 20px; position: absolute; bottom: 10px; right: 10px;}
.label.delete:after, .label.sortable:after {content:""; position: absolute; background: url(../images/icon-delete-white.svg) rgba(0,0,0,0.5) center center no-repeat; background-size: 60px; width: 100%; height: 100%; top: 0; left: 0; border-radius: 6px; color: #FFF; z-index: 9; cursor: pointer; transition: .3s ease all;}
.label.sortable:after {background: url(../images/icon-move-white.svg) rgba(0,0,0,0.5) center center no-repeat; background-size: 60px; cursor: move;}
#count {text-align: center; padding-bottom: 30px; color: #FFF; text-shadow: #86463A 0 0 10px, #86463A 0 0 10px; font-size: 15px;}


@media print {
	body, html {position: relative; background: none; padding: 0; margin: 0;}
	nav, h1, #count {display: none;}
	#journal .page .content {width: 210mm;}
	.label {width: 92mm; height: 37mm; margin: 0; font: 400 14px/18px arial;}
	.label:nth-child(14n) {margin: 0 0 12mm;}
	/*.label:nth-child(14n) {margin: 0 0 22mm;}*/
}