html { margin:0; padding:0; border:0;}
body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}

body {  font-size: 14px; background: #F0F0F0; line-height: 1.5; font-family: Calibri, sans-serif; }
table { width: 100%; border-collapse: collapse; margin-bottom: .2em; empty-cells: show; }
td, th  {  padding: 2px; }
th[title]:after { content: attr(title); padding-left: 4px; color: #ddd; font-size: .8em; }
table>thead>tr>th, table>thead>tr>td {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
}
table>thead, table>thead>tr, table>tbody>tr  {
	width: 100%;
}
table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    line-height: 1.42857143;
    vertical-align: top;
    border-bottom: 1px solid #ddd;
}

[role="button"] {
	cursor: pointer;
}

html, body { height: 100%; min-height: 100%; }
main { box-sizing: border-box;
	   width: 100%;
} 
output { white-space: pre-line }
p { margin-bottom: 1em; }
#loading_screen {
	background-color: rgb(62,199,62);
	background-image: radial-gradient(ellipse at center, rgba(62,199,62,1) 16%, rgba(0,128,0,1) 100%);
	background-repeat: no-repeat, no-repeat, no-repeat ;
	background-position: 50% 2%, 50% 100%, 50% 50%;
	position: fixed;
	top:0;
	right:0;
	left:0;
	bottom:0;
	z-index: 999999;
	vertical-align: bottom;
	font-weight: bold;
	color: white;
	padding: 1em;
}

@keyframes glow {
    to {
        text-shadow: 0 0 6px #00;
    }
}




/***************************/
/* Core                    */
.secondary { position: relative; }
.secondary, .fright { float: right; }

.fleft  { float: left; }
.clear { clear: both; }

.block { display: block; }
.inline { display: inline-block; }
.block100 { display: block; width: 100%; box-sizing: border-box; }

.right { text-align: right; }
.center { text-align: center; }
.left { text-align: left; }

.hidden, .template { display: none; }
iframe.hidden { display: inline-block; width: 1px; height: 1px; }


.large { font-size: 1.12em; }
.xlarge { font-size: 1.33em; }
.xxlarge { font-size: 2em; }

.small { font-size: .86em; }
.xsmall { font-size: .7em; }

.auto-col2, .auto-col3, .auto-col4, .col2, .col3, .col4, .col6, .col23  { box-sizing: border-box; }

.auto-col3 > * {
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                  /* Actually FF 20+ */
}

.glow_error {
	animation-duration: 3s;
	animation-name: errorPulse;
	animation-iteration-count: infinite;
}

.col {
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                  /* Actually FF 20+ */
}
.extend-height {
	min-height: 100%;
}
main.fullviewpoint {
	height: 100vh;
	width: 100vw;
}
main.headerviewpoint {
	height: calc( 100vh - 2rem);
}

.flex-col4
{
	display: flex;
	justify-content: space-between;
}
.flex-col4 > * {
	flex: 1 0 20%;
	box-sizing: border-box;
	flex-wrap: nowrap;
}

.flex-col-expand {
	flex: 1 1 100%;
}
.flex-col-shrink {
	flex: 0 1 0;
	white-space: nowrap;
}


@media ( min-width: 400px )
{
	.auto-col5 { -moz-column-count: 2; -webkit-column-count: 2 }
	.auto-col4 { -moz-column-count: 2; -webkit-column-count: 2 }
	.auto-col3 { -moz-column-count: 1; -webkit-column-count: 2 }
	.auto-col2 { -moz-column-count: 1; -webkit-column-count: 2 }

	.col2 { display: inline-block; width: 100%; vertical-align: top;  }
	.col3 { display: inline-block; width: 100%; vertical-align: top;  }
	.col4 { display: inline-block; width: 100%; vertical-align: top;  }
	.col6 { display: inline-block; width: 100%; vertical-align: top;  }
	.col23 { display: inline-block; width: 100%; vertical-align: top;  }

}

@media ( min-width: 800px )
{
	.auto-col5 { -moz-column-count: 3; -webkit-column-count: 3 }
	.auto-col4 { -moz-column-count: 2; -webkit-column-count: 2 }
	.auto-col3 { -moz-column-count: 2; -webkit-column-count: 2 }
	.auto-col2 { -moz-column-count: 2; -webkit-column-count: 2 }

	.col2 { display: inline-block; width: calc(100% - 14px); vertical-align: top;  }
	.col3 { display: inline-block; width: 100%; vertical-align: top;  }
	.col4 { display: inline-block; width: 100%; vertical-align: top;  }
	.col6 { display: inline-block; width: 100%; vertical-align: top;  }
	.col23 { display: inline-block; width: 100%; vertical-align: top;  }
}

@media ( min-width: 1200px )
{
	.auto-col5 { -moz-column-count: 5; -webkit-column-count: 5 }
	.auto-col4 { -moz-column-count: 4; -webkit-column-count: 4 }
	.auto-col3 { -moz-column-count: 3; -webkit-column-count: 3 }
	.auto-col2 { -moz-column-count: 2; -webkit-column-count: 2 }

	.col2 { display: inline-block; width: calc(50% - 14px); vertical-align: top;  }
	.col3 { display: inline-block; width: calc(33.33% - 15px); vertical-align: top;  }
	.col4 { display: inline-block; width: calc(25% - 15px); vertical-align: top;  }
	.col6 { display: inline-block; width: calc(16.66% - 15px); vertical-align: top;  }
	.col23 { display: inline-block; width: calc(66.66% - 15px); vertical-align: top;  }
}

.selection-list {
	display: inline-block;
	vertical-align: top;
}
.selection-list li {
	display: block;
	padding: 2px;
}

.item-list {
	display: block;
}

.item-list li {
	display: block;
	padding: 2px;
}

.tertiary {
    left: 20%;
    margin: auto;
    position: absolute;
    right: 20%;
    text-align: center;
}


img.preview {
	min-width: 400px; height: 320px; max-height: 320px; max-width: 100%; display: block;
}