/* Custom properties */
:root { 
	--spc_big:calc(0.5vw + 10px); 
	--spc_medium:calc(0.35vw + 7px); 
	--spc_small:calc(0.2vw + 4px); 
	--bgr_blue:#3276b1;
	--bgr_grey:#eee;
} 

/* Page layout */
.page { position: relative; min-height: 100vh; }
.content { padding-bottom: 3.2rem; } /* Footer height */
.footer { position: absolute; width:100%; bottom: 0; height: 3.2rem; }

/* Text styles */
body, td, textarea {font-size:calc(0.4vw + 12px); font-family: 'Roboto', sans-serif, Tahoma; line-height:1.4; margin:0px; }
h1, .h1 {font-size:calc(0.7vw + 20px); margin-top:0px; margin-bottom:0px; font-weight:normal}
h2, .h2 {font-size:calc(0.5vw + 14px); margin-top:0px; margin-bottom:0px; font-weight:bold}
h3, .h3 {font-size:calc(0.4vw + 13px); margin-top:0px; margin-bottom:0px; font-weight:bold}
input, select, textarea, th, .smaller, .form_data, .tbl_head, .tbl_cell {font-size:calc(0.33vw + 11px);}
.bold {font-weight:bold}
.grey {color:grey}
.blue {color:#369}
.red {color:#c33}
.danger, a.danger:link, a.warning:danger, a.warning:danger, a.danger:hover {color:crimson}
.success, a.success:link, a.success:visited, a.success:active, a.success:hover {color:green}
.pointer {cursor:pointer}
i.small {font-size:12px}

/* Tables and borders */
table {border-spacing:0px; border-collapse:collapse; width:100%; border:0px}
table, td {border: 0px}
th {font-weight:bold; text-align:left}
.tr1 {background-color:white}
.tr2 {background-color:var(--bgr_grey)}
img {border:0px}
hr {height:1px; color:#999; background-color:#999; border:0px}
.border {border:2px solid #ccc}

/* Positioning */
img, input, select {vertical-align:middle}
.left {text-align:left} .center {text-align:center} .right {text-align:right}
div.left, form.left {float:left} div.right, form.right {float:right} .clear {clear:both}
.inline, .wide_scr {display:inline}

/* Spacing */
p {margin-top:var(--spc_big); margin-bottom:0px;} 
.pdg_small, td, th {padding:var(--spc_small);} 
.pdg_medium {padding:var(--spc_medium);} 
.pdg_big {padding:var(--spc_big);} 
.spc_above {margin-top:var(--spc_big);} 
.spc_below {margin-bottom:var(--spc_big);} 
.spc_left {margin-left:var(--spc_big);} 
.spc_right {margin-right:var(--spc_big);} 
.tall_line {line-height:2;}

/* Link and text colours */
a:link, a:visited, a:active {color:black; text-decoration:underline}
a:hover {color:#666; text-decoration:none}
.white, a.white:link, a.white:visited, a.white:active, a.white:hover {color:white}
.black, a.black:link, a.black:visited, a.black:active, a.black:hover {color:black}

/* Backgrounds */
.bgr_white {background-color:#fff;} 
.bgr_grey {background-color:var(--bgr_grey);} 
.bgr_blue {background-color:var(--bgr_blue);}
.bgr_wng, p.warning, div.warning, span.warning {background-color:linen;}
p.danger, div.danger, input.danger {background-color:mistyrose;}
p.success, div.success {background-color:#efe;}

/* Form fields and buttons */
form {display:inline} 
textarea {vertical-align: top; height:100px;}
input[type=text], input[type=password], select, textarea {padding:var(--spc_small); width:400px;}
input[type=submit], input[type=button] {width:150px; background-color:var(--bgr_blue); border:solid var(--bgr_blue); color:white; font-weight:bold; padding:var(--spc_small); padding-left:var(--spc_big); padding-right:var(--spc_big); border-radius:4px;}
input[type=submit].grey, input[type=button].grey {background-color:#ccc; border:solid #ccc; color:#333; font-weight:normal;}
input[type=submit].red, input[type=button].red {background-color:#b13232; border:solid #b13232;}
input[type=checkbox], input[type=radio] {margin-left:0px}
input.short, select.short, textarea.short {width:150px;}
input.medium, select.medium, textarea.medium {width:400px;}
input.long, select.long, textarea.long {width:100%;}
input.auto, select.auto {width:auto}
div, input, select, textarea {box-sizing:border-box;}

/* Tooltips */
[data-title] {position: relative; cursor: default;}
[data-title]:hover::before { content: attr(data-title); position: absolute; display: inline-block; padding: 8px; border-radius: 3px; background: #000; color: #fff; font-size: 12px; font-family: sans-serif; white-space: nowrap; }
[data-title].below:hover::before { bottom: -34px; }
[data-title].above:hover::before { top: -35px; }
[data-title]:hover::after { content: ''; position: absolute; left: 8px; display: inline-block; color: #fff; border: 8px solid transparent; }
[data-title].below:hover::after { bottom: -8px; border-bottom: 8px solid #000; }
[data-title].above:hover::after { top: -8px; border-top: 8px solid #000; }
[data-title].red:hover::before {background: #800}
[data-title].red.below:hover::after { border-bottom: 8px solid #800; }
[data-title].red.above:hover::after { border-top: 8px solid #800; }

/* Custom styles */
.head {background-color:var(--bgr_blue); color:white; padding:var(--spc_big);}
.body {padding:var(--spc_big);}
.box_heading {padding:var(--spc_medium); background-color:var(--bgr_blue); color:white; font-weight:bold; text-align:left; border-bottom:2px solid white;}
.box_content {padding:var(--spc_medium); border:1px solid #aaa;}
.box_form {padding:var(--spc_medium); background-color:var(--bgr_grey);} 
.form_field {clear:both;}
.form_label {width:24%; float:left; padding:var(--spc_medium); font-weight:bold; text-align:right; line-height:2;}
.form_data {width:76%; float:left; padding:var(--spc_medium);}
.form_label.tight {width:30%;}
.form_data.tight {width:70%;}
.form_label.trailer, .form_data.trailer {padding-top:0px; padding-bottom:var(--spc_small);}
.tbl {border-bottom:1px solid #aaa;}
.tbl_head {border:1px solid var(--bgr_blue); background-color:var(--bgr_blue); color:white; font-weight:bold; text-align:left; padding:var(--spc_small); }
.tbl_cell {border-left: 1px solid #aaa; border-right: 1px solid #aaa; padding:var(--spc_small);}
.half {width:50%; float:left;}
.half.left {border-right:7px solid white}
.half.right {border-left:7px solid white}
.half.middle {float:none;margin-left:24%;}
.pt, a.pt {padding:var(--spc_small) var(--spc_medium); text-decoration: none;}
.pt.active {color:white; background-color:var(--bgr_blue);}
a.pt:hover {color:black; background-color:var(--bgr_grey);}

/* ICONS: COPIED FROM FONT-AWESOME.MIN.CSS */
[class^="icon-"]:before, [class*=" icon-"]:before {
	text-decoration:inherit;
	display:inline-block;
	speak:none;
}
a [class^="icon-"], a [class*=" icon-"] {display:inline;}
[class^="icon-"], [class*=" icon-"] {
	display:inline; 
	width:auto;
	height:auto;
	line-height:normal;
	vertical-align:baseline;
	background-image:none;
	background-position:0% 0%;
	background-repeat:repeat;
	margin-top:0;
}
.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}
.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}
@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}
.fa-pull-left{float:left}.fa-pull-right{float:right}
.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}
.fa-ul>li{position:relative}
.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}
.fa-li.fa-lg{left:-1.85714286em}
.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}
.fa-stack-1x, .fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}
.fa-stack-1x{line-height:inherit}
.fa-stack-2x{font-size:2em}
.fa-inverse{color:#fff}
/* END */

/* Responsive features */
@media screen and (max-width: 639px) { 
	input[type=submit], input[type=button], input.short, select.short, textarea.short {width:50%}
	input.medium, select.medium, textarea.medium, input.long {width:100%} input.auto {width:auto} 
	.form_label {width:100%; text-align:left;}
	.form_data {width:100%}
	.wide_scr {display:none}
	.half, .half.left, .half.right, .half.middle {width:100%; float:none; border:0px; margin-left:0px;}
}