/* Design */

body {
	background-image: url(/images/background.jpg);
	background-size: 100% auto;
	background-repeat: y-repeat;
}

div#container {
	max-width:640px;
	min-width:320px;
	margin: 0px auto 0px auto;
}

div#header,div.header {
	x-display:none;
	x-padding: 0px;
	x-height: 80px;
	/* background-color:#FEFDFC;*/
	background-image:url(/images/kop2015-5.png);
	background-size: 100% auto;
	background-repeat:no-repeat;
	padding-top:55px;
}

/* body */

body {
	margin: 0px;
	background-color: #000080;
	font-family: Arial, Helvetica, sans-serif;
}
textarea {
 font-family: Arial, Helvetica, sans-serif;
}

a {
 color: blue;
 text-decoration: none
}

a:hover {
 color: red;
}

img {
 border: 0;
}
td img {
	vertical-align:middle;
}

h1,h2,h3,h4,h5 {
	padding:10px;
	margin: -9px;
	margin-bottom:5px;
	width:100%+20px;
	color: #000080;
	text-align: center;
	border-bottom:1px solid #000080;
	background-color: #f0f0ff;
}
h2,h3,h4,h5 {
	xborder-top:1px solid #000080;
	background-color: initial;
	border-top:0px none;
	border-bottom:0px none;
	padding:0px;
	margin:0px;
}

div.header h1 {
	color:#07a;
	background-color: initial;
	padding-left:27%;
	text-align: left;
}
div.header h1 {
	font-family: 'Comfortaa';
}

td {
	padding-right:10px;
	vertical-align:top;
}
th {
	color: #000080;
	padding-left:10px;
	padding-right:10px;
	font-weight:normal;
	text-align:right;
	vertical-align:top;
	font-weight:bold;
}
thead th,tfoot td,th.splitterx,tbody th.header {
	text-align:center;
	border-top:1px solid #000080;
	border-bottom:1px solid #000080;
	background-color: #f0f0ff;
}
dl {
	margin:0px;
}
/* additional styling */
/*
select,input {
 border:1px solid;
 background-color:#FCF8F0;
}
input:hover,select:hover {
 background-color:#F8F0E0;
}
*/

form {
	clear:none;
	border:0px;
	padding:0px;
	margin:0px;
}

/* Helper */

tr.highlight {
	background-color:#FEFCF8;
}

tr.highlight:hover {
	background-color:#F8F0E0;
}

/* content */

#content {
/*	background-color: white; */
	xpadding: 10px;
	xpadding-top: 1px;
}

section,.group {
	x-border: solid 1px #000080;
	border: solid 2px white;
	margin: 10px;
	padding:10px;
	background-color: #f8f8ff;
	border-radius: .5em;
}
.subgroup {
	padding:10px;
	margin:10px;
	border: dashed 1px #000080;
/*	background-color: lime; */
}
#warnings {
/*	background-color: white; */
	padding: 0px 10px;
	padding-top: 8px;
	color: #FF0000;
	font-weight:bold;
}

/* head */

#footer {
	text-align: center;
	padding: 5px;
	font-size: 12px;
	background-color:#F7C84A;
	border-top: 1px solid gray;
	border-bottom: 1px solid gray;
}

/* mainmenu */

#mainmenu {
	display: block;
	width: 100%;
	height: 1.6em;
}

#mainmenu ul {
	display: block;
	float: left;
	margin: 0px;
	border: 0px;
	padding: 0px;
	width: 100%;
	list-style-type: none;
	background-color:#F7C84A;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

#mainmenu ul li {
	float: left;
	border-left: 1px solid black;
	border-right: 1px solid black;
	background-color:#F7C84A;
	/* display: block; */
	/* position:relative; */
}

#mainmenu a {
	vertical-align: middle;
	display: block;	/* must be block for clickable */
	padding: 3px 15px;
	color: black;
	text-decoration: none;
	font-weight: normal;
}

#mainmenu a:hover {
	background-color:#F8F0E0;
}

li.module_logout {
	float: right !important;
}

.grey {
	color: #AAA !important;
}
.grey a {
	color: #AAF;
}
.grey a:hover {
	color: #FAA;
}
.warning,.warning a {
	font-weight:bold;
	color: #FF0000;
}
.error,.error a {
	font-weight:bold;
	color: #FF0000;
}
.offline,.offline a {
	color: #FAA;
}
.green,.online {
	color:#339900;
}
.red {
	color:#990033;
}
.mono {
	font-family:"Courier New", Courier, monospace;
}
.bold {
	font-weight:bold;
}
.small {
	font-size:smaller;
}
tr.row0 {
}
tr.row1 {
	background-color:#FCF8f0;
	background-color:#F8F4E4;
/*	background-color:#F8F0E0; */
}
.nowrap {
	white-space:nowrap;
}
.number {
	text-align:right;
}
.more,.hidden {
	display:none;
}

/* SPECIAL STYLES */

input#comment\[new\] {
	width: 400px;
}
textarea#field\[comments\] {
	width: 600px;
}
textarea#field\[comments_internal\] {
	width: 600px;
	height: 200px;
}
table.sortable th {
	cursor: default;
}
option.header {
	background-color:#F7C84A;
	text-align:right;
	outline:solid 1px #888;
}
optgroup#DONOTENABLE {
	background-color:#F7C84A;
	content: attr(label);
	display: block;
}
input.yubico {
	background-image: url('/images/yubico-icon-small.gif');
	background-repeat: no-repeat;
	background-position: right;
}
.subdis {
	display: none !important;
}
.edit_toggle {
	vertical-align:middle;
}
.clickable {
	color:blue;
	cursor:pointer;
}
.clickable:hover {
	color:red;
}
.pre-wrap {
	white-space: pre-wrap;
}
.editable {
	color: #400;
	cursor: pointer;
}
.editable:hover {
	background-color:#F7C84A;
}

/* tablet design... */

/*
*/
body {
	background-color: #ddd;
}
dt,dd {
	margin:1em;
}
th,body,input,select {
/*
	color:lime;
*/
/*
	font-size:2em;
*/
}
is-this-used-th {
	width:30%;
}
/*
table td[0] {
	width: 200px;
}
*/
/*
button.add {
	width:320px;
}
button#family,button#personal {
	width:20em;
	height:5em;
}
input[type=text] {
	height:2em;
	padding:3px;
}
input[type=date] {
	height:2em;
	padding:3px;
	margin:0px;
}
*/
.lfloat {
	float:left;
	width: 200px;
	margin:0px 10px 0px 0px;
}
.float_group,.row {
	clear: both;
	xmargin:5px 0px;
	padding:5px 0px;
}
h2,h3,h4,h5 {
	font-size:1em;
	margin:5px 0px;
}
td.amount {
	text-align: right;
}

/* The rows */

div.row {
	padding:5px;
	min-height:34px;
}

/* Left side of a row */

div.row > *.left {
	float:left;
	width:100px;
	min-height:20px;
	padding: 6px 0px 6px 12px;
	color: rgb(27, 63, 143);
}
div.row > label.left {
	background-color: rgb(238, 238, 238);
	border: 1px solid rgb(204, 204, 204);
	border-radius: 8px 0px 0px 8px;
	border-right: 0px none rgb(27, 63, 143);
}

div.row > span.left {
	border-width: 0px 0px 0px 0px;
	background-color: #f8f8ff;
	box-shadow: rgba(0, 0, 0, 0.0745098) 0px 0px 0px 0px inset;
	text-align: right;
	padding: 6px;
}

/* Right side of a row */

div.row > *.right {
	/* layout */
	float:left;
	width:calc(100% - 113px); /* 100 + 12 + 1 */
	min-height:20px;
	height: 34px;
	margin: 0px;
}

div.row *.input {
	/* border and background */
	border: 1px solid rgb(204, 204, 204);
	border-radius: 0px 8px 8px 0px;
	background-color: rgb(255, 255, 255);
	background-image: none;

	box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
	box-sizing: border-box;

	x-color: rgb(85, 85, 85);
	padding: 6px 12px 6px 12px;

	/* -webkit-appearance: none; */
	-webkit-rtl-ordering: logical;
	-webkit-user-select: text;
	-webkit-border-image: none ;
}

div.row > *.textarea {
	height: 100px;
	border-bottom-left-radius: 8px;
}


div.row *.button {
	/* border and background */
	border: 1px solid rgb(204, 204, 204);
	border: 0px none rgb(204, 204, 204);

	box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
	box-sizing: border-box;

	/* background-color:#eee; */
	color: #f0f0ff;
	background-color:#07a;
	border-radius: 8px;
	font-weight:bold;
	text-align:center;
	height: 34px;
}

button:disabled {
	color:#bcd !important;
	background-color:#def !important;
}

/* Right side in 2 halves */

.half {
	margin:0px 2px;
	float:left;
	width: calc(50% - 4px); /* 100 + 12 + 1 */
}
.left-half {
	margin: 0px;
	float:left;
	width: calc(50% - 4px); /* 100 + 12 + 1 */
}
.right-half {
	margin: 0px;
	float: right;
	width: calc(50% - 4px); /* 100 + 12 + 1 */
}

/* Readonly row (smaller) */

div.row.ro {
	padding: 0px 5px;
}

div.row.ro > *.right {
	padding: 6px 0px 6px 0px;
	height: initial;
}

div.row img {
	vertical-align: middle;
}

.interactive {
	/* hover/select => fadein / fadeout */
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
 }

.interactive:hover {
	transition-delay: 0s, 0s;
	transition-duration: 0.15s, 0.15s;
	transition-property: border-color, box-shadow;
	transition-timing-function: ease-in-out, ease-in-out;
  box-shadow: 0 0 5px #ff8c00 !important;
  border: 1px solid #ff8c00 !important;
}

.interactive:focus {
	transition-delay: 0s, 0s;
	transition-duration: 0.15s, 0.15s;
	transition-property: border-color, box-shadow;
	transition-timing-function: ease-in-out, ease-in-out;
  box-shadow: 0 0 5px #51cbee !important;
  border: 1px solid #51cbee !important;
}

/* STEPS */

ul#steps {
	display:block;
	height:30px;
	width:cal(100% - 4px);
	xbackground-color:blue;
	padding:0px;
	margin:-5px -10px 0px -10px;
	border-bottom:1px solid #1B3F8F;
}
ul#steps li {
	xborder-radius: 8px;
	display:block;
	float:left;
	width:calc(33% - 2px);
	height:100%;
	xbackground-color:red;
	color:grey;
	text-align:center;
	vertical-align:middle;
	xmargin:1px;
	font-weight:bold;
}
ul#steps li span {
	display:block;
	margin-top:15px;
}
ul#steps li.done {
	background-color:#1B3F8F;
}
ul#steps li.done a {
	display:block;
	width:100%;
	height:100%;
	color:white;
}
xul#steps li.done:hover {
	border-radius: 8px;
	background-color:lime;
}

/* Some placement  experiments */

x-div.row {
	xmax-width:300px;
}

div.xbox {
	xfloat:left;
}

x-div.xleft {
	float: left;
	width: calc(50% - 2px);
}

x-div.xright {
	float: right;
	width: calc(50% - 2px);
}
body.step2 th {
	width:100px;
	padding-left:5px;
	padding-right:5px;
}

.button-float-left {
	float:left;
	color: #f0f0ff;
	background-color:#000080;
	border-radius: 8px;
	font-weight:bold;
	text-align:center;
	padding:5px 16px;
}
.button-float-right {
	float:right;
	color: #f0f0ff;
	background-color:#000080;
	border-radius: 8px;
	font-weight:bold;
	text-align:center;
	padding:5px 16px;
}
.float-right {
	float:right;
}

/* tablesorter */

.headerSortDown {
    background-image: url(desc.gif);
}

@-webkit-keyframes blinker2 {
  0% { opacity: 1.0; }
  50% { opacity: 0.5; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes blinkerx {
  0% { padding-left:0em; }
  10% { padding-left:1em; }
  20% { padding-left:0em; }
}

@-webkit-keyframes blinker {
  50% { color:blue; }
  60% { color:red; }
  70% { color:blue; }
}

.blink {
	font-size: 1.5em;
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 5.0s;
}

.diploma {
	border:0px;
}
.right {
	float:right;
}