/*******************************
 *  STYLES FOR ZEBRA_FORM
 *******************************/
 
/* ORIGINAL STYLES FIRST, THEN MODIFIED STYLES FOR UTU */

/*******************************
 *  STYLES FOR ZEBRA_FORM
 *******************************/

.Zebra_Form, .Zebra_Form label, .Zebra_Form input, .Zebra_Form select, .Zebra_Form textarea
{
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	padding: 0;
	outline: none;
	color: #222;
	clear:left;
}

.Zebra_Form { position: relative; clear:both; overflow:auto; }

.Zebra_Form div.hidden .text {
	display: none /* hide the honey pot */
}

.Zebra_Form label,
.Zebra_Form .button,
.Zebra_Form .reset,
.Zebra_Form input.password,
.Zebra_Form input.text,
.Zebra_Form select,
.Zebra_Form textarea {
	display: block
}

.Zebra_Form .button,
.Zebra_Form .reset,
.Zebra_Form .submit,
.Zebra_Form label,
input.buttonlink {
	font-weight: bold
}

.Zebra_Form label {
	cursor: pointer;
	/*float:left;*/ /* Haluaisin tämän, ettei veisi koko riviä, mutta ei onnistu file-inputtien kanssa */
	clear:both;
	margin-bottom:5px;
}

/* labels for checkboxes and radio buttons are not bold */
.Zebra_Form label.option {
	font-weight: normal;
}

.Zebra_Form .button,
.Zebra_Form .reset,
.Zebra_Form input.password,
.Zebra_Form input.text,
.Zebra_Form select,
.Zebra_Form textarea,
.Zebra_Form label.button,
input.buttonlink {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

.Zebra_Form .button,
.Zebra_Form input.password,
.Zebra_Form .reset,
.Zebra_Form input.text,
.Zebra_Form .submit,
.Zebra_Form select,
.Zebra_Form textarea,
.Zebra_Form label.button,
input.buttonlink {
	border: 1px solid #999
}

.Zebra_Form input.password,
.Zebra_Form input.text,
.Zebra_Form select,
.Zebra_Form textarea {
	padding: 3px 2px
}

.Zebra_Form input.password:focus,
.Zebra_Form input.text:focus,
.Zebra_Form textarea:focus {
}

/*.Zebra_Form .cell label {
	margin-bottom: 0
}*/

/*.Zebra_Form select {
	background: #FFF
}*/

.Zebra_Form select option {
	padding: 0 2px /* same as the select box's horizontal padding or weird behaviour in Firefox */
}

.Zebra_Form select option.dummy {
	font-size: 0em /* used when creating nested selects */
}

.Zebra_Form select.time {
	float: left;
	margin-right: 5px
}
/*------------------------------------------------------------------------------*/
.Zebra_Form input.password,
.Zebra_Form input.text,
.Zebra_Form textarea {
	background: #FFF url('../zebra/public/css/textbox-background.gif') repeat-x top
}

.Zebra_Form input.password,
.Zebra_Form input.text {
	width: 750px /*Old value: 350px*/
}
.Zebra_Form input.text.username {
	width: 550px;
}

.Zebra_Form input.date {
	width: 105px;
	*width: 95px
}

.Zebra_Form textarea {
	width: 750px; /*To match input.text; Old value: 400px*/
	resize: vertical
}

.Zebra_Form input.radio,
.Zebra_Form input.checkbox {
	*position: relative;
	*top: -1px
}

/* only for IE 8 and below */
.Zebra_Form input.file {
	border: 1px solid #999\9;
	background: #FFF url('../zebra/public/css/textbox-background.gif') repeat-x top\9;
	padding: 4px\9;
	width: 293px\9
}

.Zebra_Form .button,
.Zebra_Form .reset,
.Zebra_Form .submit,
.Zebra_Form label.button,
input.buttonlink {
	float:left;
	padding: 6px 20px;
	margin: 0px 10px 10px 0px;
	background: #EFEFEF url('../zebra/public/css/button-background.gif') repeat-x top;
	cursor: pointer;
	width: 1px; /* thanks to http://jehiah.cz/archive/button-width-in-ie */
	overflow: visible;
	width: auto;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0 0 2px #AAA;
	-webkit-box-shadow: 0 0 2px #AAA;
	box-shadow: 0 0 2px #AAA;
}
input.buttonlink {
	float:none;
	padding:5px 8px;
}

.Zebra_Form .button:hover,
.Zebra_Form .reset:hover,
.Zebra_Form .submit:hover,
.Zebra_Form .submit-hover,
.Zebra_Form label.button:hover,
input.buttonlink:hover {
	background: #303740 none;
	color: #FFF
}

/*.Zebra_Form .row {
	background: #FFF;
	padding: 10px;
	margin-bottom: 1px;
	border-bottom: 1px solid #DEDEDE;
	line-height: 1.4em
	*//*
	line height is there to space things nicely but also to avoid the peek-a-boo bug in IE6
	read more at http://www.dracos.co.uk/code/ie6-css-bug/
	*//*
}

.Zebra_Form .row:before,
.Zebra_Form .row:after	 { content: "\0020"; display: block; height: 0; visibility: hidden; font-size: 0 }
.Zebra_Form .row:after	 { clear: both }
.Zebra_Form .row		   { *zoom: 1 } *//* for IE only */

/*.Zebra_Form table {
	border-collapse: collapse
}

.Zebra_Form td {
	padding: 10px;
	vertical-align: top
}

.Zebra_Form .cell {
	float: left;
	margin-right: 5px
}*/

.Zebra_Form input.inline,
.Zebra_Form textarea.inline {
	display: inline /* for when we show the "required" sign after controls that have the labels as tips */
}

/*.Zebra_Form .even {
	background: #F6F6F6
}

.Zebra_Form .highlight {
	background: #E9F6F9
}

.Zebra_Form .last {
	border-bottom: none
}*/

.Zebra_Form input.other {
	margin-top: 5px
}

.Zebra_Form .cell input.other {
	margin: 0 0 0 5px
}

.Zebra_Form input.other-invisible,
.Zebra_Form input.other-invisible {
	display: none
}

.Zebra_Form .note {
	/*font-size: 80%;*/
	color: #666;
	/*padding-left: 12px;
	background: url('../zebra/public/css/note.gif') no-repeat left 1px;*/
	line-height: 1.2em
	margin-top: 5px;
	margin-bottom: 5px;
	clear:both;
}

/*.Zebra_Form .cell .note {
	margin: 4px 0 0 5px
}*/

.Zebra_Form span.required {
	color:#F52200;
	margin-left: 5px;
	font-size: 110%;
	font-weight: bold
}

.Zebra_Form_filename {
	position: absolute;
	font-weight: normal;
	color:#888;
	overflow: hidden
}

.Zebra_Form_filename a {
	font-weight: bold;
	color: #C40000;
	text-decoration: none;
	margin-left: 5px
}

.Zebra_Form_error_message {
	position: absolute;
	z-index: 21;
	overflow: hidden;
	background: transparent;
}

.Zebra_Form_error_message .message {
	background: #000;
	padding: 10px 18px 10px 10px;
	color: #FFF;
	line-height: inherit;
	font-size: inherit;
	font-weight: normal;
	margin-right: 6px;
	position: relative;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
	-moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
	box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
	*margin-right: 0;
	max-width: 250px;
	_width:expression(document.body.clientWidth > 250 ? '250px': 'auto'); /* max-width for IE6 */
}

.Zebra_Form_error_message .noclose { padding: 10px }

.Zebra_Form_error_message .close {
	position: absolute;
	color: #FFF;
	right: 5px;
	top: 4px;
	display: block;
	width: 10px;
	height: 10px;
	background: url('../zebra/public/css/close.png') no-repeat;
	text-indent: -9000px;
	padding:0;
	overflow: hidden;
	*right: 3px;
	*top: 3px;
}

.Zebra_Form_error_message .close-ie6 {
	position: absolute;
	color: #FFF;
	right: 4px;
	top: 2px;
	text-decoration: none;
	font-family: arial, sans;
	font-weight: bold;
	font-size: 11px;
}

.Zebra_Form_error_message .arrow {
	position:relative;
	border-color: #000 transparent transparent transparent;
	border-style: solid;
	border-width: 10px;
	height:0;
	width:0;
	left: 0;
	bottom: 0;
	z-index: 3;
	float: left;
	_border-left-color: pink;
	_border-bottom-color: pink;
	_border-right-color: pink;
	_filter: chroma(color=pink);
	_margin-bottom: -6px
}

/*.Zebra_Form div.error {
	background: #444 url('../zebra/public/css/ico-warning.png') no-repeat 8px 15px;
	position: relative;
	overflow: hidden;
	_background-image: url('../zebra/public/css/ico-warning.gif')
}

.Zebra_Form div.error div.container {
	padding: 15px 65px 15px 35px;
	border: 2px solid #000;
	position: relative;
	overflow: hidden
}

.Zebra_Form div.error div.container span {
	color: #FFF;
	font-weight: bold;
	font-size: 90%;
	display: block
}

.Zebra_Form div.error div.container div.close {
	position: absolute;
	right: 0;
	top: 0;
	background: #333;
	height: 100%;
	width: 50px;
	padding: 15px 0;
	_top: 2px;
	_right: 2px;
	_background: #444
}*/
.Zebra_Form div.error div.container div.close {
	position: absolute;
	right: 10px;
	top: 10px;
}

.Zebra_Form div.error div.container div.close a {
	display: block;
	width: 16px;
	height: 16px;
	background: url('../zebra/public/css/ico-close.png') no-repeat;
	text-indent: -9000px;
	margin-left: 17px;
	_background-image: url('../zebra/public/css/ico-close.gif')
}

/* accesskeys */
.Zebra_Form span.underline {
	text-decoration: underline;
	color: #666;
}

.Zebra_Form .fieldset {
	background: #666;
	color: #FFF;
	padding: 4px
}

.Zebra_Form_spinner {
	position: absolute;
	width: 24px;
	height: 24px;
	background: url('../zebra/public/css/spinner.gif');
	margin: 3px 0 0 10px
}

.Zebra_Form input.disabled,
.Zebra_Form select.disabled {
	background: #DEDEDE;
	color: #BBB
}

/*.Zebra_Form input.disabled:hover {
	background: #DEDEDE;
	color: #BBB
}*/

.Zebra_Form label.disabled {
	color: #DEDEDE
}

.Zebra_Form_Placeholder {
	position: absolute;
	border: none !important;
	background: transparent !important;
	resize: none !important;
}

.Zebra_Form_Placeholder { color:#4d4d4d !important }
::-webkit-input-placeholder { color:#4d4d4d !important }
::-moz-placeholder { color:#4d4d4d !important }
input:-moz-placeholder { color:#4d4d4d !important }

.Zebra_Character_Counter {
	position: absolute;
	background: #FFF;
	text-align: right;
	border: 1px solid #AAA;
	background: #EAEAEA;
	color: #222;
	font-size: 11px;
	font-weight: normal;
	padding: 0 2px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	opacity: .8
}

.show-character-counter { resize: none }
.Zebra_Character_Counter span { color: #C40000 }

.Zebra_Form .modifier-uppercase { text-transform: uppercase }
.Zebra_Form .modifier-lowercase { text-transform: lowercase }

.Zebra_Form div.captcha-container { position: relative }
.Zebra_Form div.captcha-container img { border: 1px solid #CCC }
.Zebra_Form div.captcha-container a {
	position: absolute;
	text-indent: -9000px;
	display: block;
	width: 16px;
	height: 16px;
	left: 131px;
	top: 15px;
	background: #FFF url('../zebra/public/css/ico-refresh.png') no-repeat center center;
	border: 1px solid #CCC;
	padding: 2px;
	_background-image: url('../zebra/public/css/ico-refresh.gif')
}

.Zebra_Form .Zebra_Form_Input_Prefix {
	color: #888;
	padding: 0;
	margin-right: 2px;
}

.Zebra_Form input.error,
.Zebra_Form select.error,
.Zebra_Form textarea.error {
	background: #FFEFEF;
	border-color: #C40000;
}

/* don't change this! */
.Zebra_Form input.password { font-family: 'Verdana', 'Tahoma', 'Arial' }

/* hide spinners on numeric type fields */
.Zebra_Form input[type=number]::-webkit-outer-spin-button,
.Zebra_Form input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.Zebra_Form input[type=number] {
	-moz-appearance:textfield;
}

/*******************************
 *  STYLES FOR ZEBRA_DATEPICKER
 *******************************/

.Zebra_DatePicker *,
.Zebra_DatePicker *:after,
.Zebra_DatePicker *:before  { -moz-box-sizing: content-box !important; -webkit-box-sizing: content-box !important; box-sizing: content-box !important }

.Zebra_DatePicker		   { position: absolute; background: #fff; border: 3px solid #c1c1c1; padding:3px; z-index: 1200; top: 0 }

.Zebra_DatePicker *		 { margin: 0; padding: 0; color: #000; background: transparent; border: none }

/* = GLOBALS
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker table					  { border-collapse: collapse; border-spacing: 0; width: auto; table-layout: auto; }

.Zebra_DatePicker td,
.Zebra_DatePicker th						 { text-align: center; padding: 5px 0 }

.Zebra_DatePicker td						 { cursor: pointer }

.Zebra_DatePicker .dp_daypicker,
.Zebra_DatePicker .dp_monthpicker,
.Zebra_DatePicker .dp_yearpicker			 { margin-top: 3px }

.Zebra_DatePicker .dp_daypicker td,
.Zebra_DatePicker .dp_daypicker th,
.Zebra_DatePicker .dp_monthpicker td,
.Zebra_DatePicker .dp_yearpicker td		 { background: #E8E8E8; width: 30px; border: 1px solid #AAA }

.Zebra_DatePicker,
.Zebra_DatePicker .dp_header td,
.Zebra_DatePicker .dp_footer td { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px }

.Zebra_DatePicker .dp_header td,
.Zebra_DatePicker .dp_footer td { background-color: #0091BB; color:#fff; background-clip:padding-box; border: 1px solid #fff; }

.Zebra_DatePicker .dp_header .dp_hover,
.Zebra_DatePicker .dp_footer .dp_hover { background: #035978; background-clip:padding-box; }

/* = VISIBLE/HIDDEN STATES (USE TRANSITIONS FOR EFFECTS)
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker.dp_visible			   { visibility: visible; filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; transition: opacity 0.2s ease-in-out }
.Zebra_DatePicker.dp_hidden				{ visibility: hidden; filter: alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; opacity: 0 }

.Zebra_DatePicker .dp_footer .dp_timepicker_toggler,
.Zebra_DatePicker .dp_footer .dp_timepicker_toggler:hover { background-color:#fff; padding:0px; visibility:hidden; display:none !important; } /* removed, because not in use */

/* = HEADER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_header .dp_previous,
.Zebra_DatePicker .dp_header .dp_next	   { width: 30px }

.Zebra_DatePicker .dp_header .dp_caption	{ font-weight: bold }

/* = DATEPICKER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_daypicker th			  { background: #666; color:#fff; }
.Zebra_DatePicker td.dp_not_in_month			{ background: #F3F3F3; color: #CDCDCD; cursor: default }
.Zebra_DatePicker td.dp_not_in_month_selectable { background: #F3F3F3; color: #CDCDCD; cursor: pointer }
.Zebra_DatePicker td.dp_weekend				 { background: #D8D8D8 }
.Zebra_DatePicker td.dp_weekend_disabled		{ color: #CCC; cursor: default }
.Zebra_DatePicker td.dp_selected				{ background: #FA8311; color: #FFF !important }
.Zebra_DatePicker td.dp_week_number			 { background: #DC002D; color: #555; cursor: text; font-style: italic }

/* = MONTHPICKER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_monthpicker td	{ width: 33% }

/* = YEARPICKER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_yearpicker td	 { width: 33% }

/* = FOOTER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_footer			{ margin-top: 3px }

/* = SELECT CURRENT DAY
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_today { color: #FFF; padding: 3px }

/* = CLEAR DATE
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker .dp_clear { color: #FFF; padding: 3px }

/* = SOME MORE GLOBALS (MUST BE LAST IN ORDER TO OVERWRITE PREVIOUS PROPERTIES)
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker td.dp_current			 { color: #FA8311; font-weight:bold; }
.Zebra_DatePicker td.dp_disabled_current	{ color: #E3E3E3 }
.Zebra_DatePicker td.dp_disabled			{ background: #F3F3F3; color: #CDCDCD; cursor: default }
.Zebra_DatePicker td.dp_hover			   { background: #FA8311; color: #FFF }

/* = ICON
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker_Icon_Wrapper			  { clear:both; }
button.Zebra_DatePicker_Icon				{ display: block; position: absolute; width: 16px; height: 16px; background: url('../zebra/public/css/calendar.png') no-repeat left top; text-indent: -9000px; border: none; cursor: pointer; padding: 0; line-height: 0; vertical-align: top }
button.Zebra_DatePicker_Icon_Disabled	   { background-image: url('../zebra/public/css/calendar-disabled.png') }

/* don't set vertical margins! */
button.Zebra_DatePicker_Icon				{ margin: 0px 0 0 3px }
button.Zebra_DatePicker_Icon_Inside_Right   { margin: 0px 3px 0 0 }
button.Zebra_DatePicker_Icon_Inside_Left	{ margin: 0px 0 0 3px }

/* ORIGINAL ENDS HERE */














/*
UTU värit

Sininen:
- perus #78c8d2
- linkki #04a0a6
- hover/visited #23527c
Punainen:
- perus #DC002D
- linkki #DC002D
- hover/visited #A00014
*/

body {
	font-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
	font-size:13px;
	max-width:1000px;
	margin:auto;
	padding:5px 10px 50px 10px;
}

p {
	margin: 3px 0px 13px 0px;
}
h1, h2, h3, h4, h5, h6 {
	padding:10px 0px;
	font-size:18px;
	font-weight:normal;
	text-transform:uppercase;
	margin: 15px 0px 7px 0px;
}
h3, h4, h5, h6 {
	padding:0px;
	margin-bottom:3px;
}
h3 { font-size:16px; }
h4 { font-size:15px; }
h5 { font-size:14px; }
h6 { font-size:13px; }
h1.stepheading {
	padding:0px;
	background-color:#035978;
	color:#fff;
	margin-bottom:0px;
	clear:both;
}
h1.stepheading::before {
	content:url(../includes/icons/stepheading.png);
	width:30px;
	height:27px;
	display:inline-block;
	vertical-align:middle;
	overflow:hidden;
	margin-right:11px;
	background:#203341;
	padding:7px;
}
h2.listheading {
	color:#000;
}
h2.listheading::after {
	content:' ▶';
	color:#FA8311;
}
h2.listheading.active::after {
	content:' ▼';
}
h2.listheading a {
	color:inherit;
}
.stepdescription {
	background-color:#eee;
	padding:10px;
	margin-top:0px;
	font-size:1.2em;
	min-height:30px;
}
p.stepdescription::before {
	content: 'i';
	font-size:1.4em;
	display:inline-block;
	float:left;
	/*width:30px;
	height:30px;*/
	padding:2px 12px;
	margin: 0px 10px 3px 0px;
	color:#fff;
	font-weight:bold;
	background-color: #203341;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
p.stepdescription.notice::before {
	content: '!';
	background-color:#F52200;
}
div.stepcontent.collapsed {
	display:none;
}
.step_collapse_link { text-align:center; }
.step_collapse_link .collapse { display:inline-block; }
.step_collapse_link .uncollapse { display:none; }
.step_collapse_link.collapsed .collapse { display:none; }
.step_collapse_link.collapsed .uncollapse { display:inline-block; margin-top:5px; }

.other-collapsed { display:none; }
.optionlist { 
	max-height:150px;
	overflow:auto;
}
.searchlabel { font-weight:bold; }

th, td {
	text-align:left;
}
th.align_right, td.align_right {
	text-align:right;
}

a {
	color: #035978;
	text-decoration:none;
}
a:hover, a:focus {
	color: #035978;
	text-decoration:underline;
}
.list a {
	color: #203341;
}
a.buttonlink, span.buttonlink {
	display:inline-block;
	/*cursor:pointer;*/
	padding:5px 8px;
	background-color:#FA8311;
	color:#fff;
	font-weight:bold;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
/*a.buttonlink { cursor:pointer; }
span.buttonlink { cursor:default; }*/
.buttonlink:hover, .buttonlink:focus {
	text-decoration:none;
}
.buttonlink.tonedown, .formaction.tonedown {
	background-color:#0091BB;
}
.buttonlink.hilight, .formaction.hilight {
	background-color:#de4800;
}
.buttonlink.tonedown.hilight, .formaction.tonedown.hilight {
	background-color:#035978;
}
.buttonlink.disabled {
	filter: alpha(opacity=30); /* IE 5-9 */
	-moz-opacity:0.3; /* FF >0.9 */
	-khtml-opacity: 0.3; /* Safari 1.x */
	opacity:1;
	background-color:#c1c1c1;
	/*cursor:default;*/
	cursor:inherit;
}
.buttonlink.tonedown.disabled {
	background-color:#888;/*#666;*/
}
.buttonlink.round {
	margin:10px 5px 10px 10px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border-radius: 14px;
	text-transform:uppercase;
}
.buttonlink.small {
	font-size:smaller;
	padding:3px 6px;
}
.buttonlink.closePopup {
	margin:10px 5px 10px 10px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border-radius: 14px;
	text-transform:uppercase;
	
	position:absolute;
	top:5px;
	right:5px;
	font-size:13px;
	font-style:normal !important;
}

p#welcome {
	float:left;
	/*max-width:650px;*/
	margin:5px 0px;
	padding-top:0px;
}
#formactions {
	text-align:center;
	margin-bottom:35px;
}
a#copynew, a.formaction {
	margin:0px 10px 10px 0px;
}
a#copynew {
	float:right;
}
/*a#copynew {
	position:absolute;
	right:15px;
	margin-top:7px;
	z-index:1000;
	background-color:#F60;
}*/
/* ----- User search ----- */
input.text.username {
	float:left;
}
a.userSearch {
	float:left;
	margin-left:10px;
}
div#userSearch {
	position:fixed;
	width:680px; /*Old value: 750px*/
	top:25%;
	left:25%;
	padding:20px;
	background:#fff;
	border:1px solid #4d4d4d;
	box-shadow: 0px 0px 15px #4d4d4d;
}

div#userSearch h3 {
	padding:0px;
	margin-top:0px;
}
div#userSearch #searchResults {
	width:100%;
	margin-top:20px;
}
div#userSearch #searchResults td {
	white-space: nowrap;
	padding-right:2px;
	max-width:200px;
	overflow:hidden;
	text-overflow:ellipsis;
}
div#userSearch tr.hover td {
	background-color:#eee;
	cursor:pointer;
}
div#userSearch #searchResultsContainer {
	max-height:300px;
	overflow:auto;
}
div#userSearch #closeUserSearch {
	float:right;
	margin-top:0px;
}
.listsearch {
	max-width:999px;
	text-overflow:ellipsis;
}
.admin-select {
	clear: none;
	float: right;
}
div.adminEditSelect:hover {
	background-color: #ffccff;
	cursor: pointer;
}
div.fieldArea.adminEditSelect {
	padding-right: 0px;
}
label.adminEditSelectLabel {
	float: right;
	margin-left: 0.5em;
}
.admin-bypass-validation {
	display: none;
}
/* ----- errors and notices ----- */
.utuerror, .utuok, .utunotice,
.Zebra_Form div.error {
	position:relative;
	width:80%;
	margin:3px auto;
	padding:25px;
	/*border:3px solid red;*/
	background-color:#F52200;
	color:#FFF;
	font-weight:bold;
	font-size:2em;
	text-align:center;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	clear:both;
}
.Zebra_Form div.error span {
	display: block;
	padding-bottom:10px;
}
.utuerror a, .utuok a, .utunotice a,
.Zebra_Form div.error a {
	color:inherit;
	font-style:italic;
}
.utuok {
	background-color:#00A1CB;
}
.utunotice {
	background-color:#FA8311;
}
.utuerror.invert, .utuerror.invert a {
	background-color:inherit;
	color:#F52200;
}
.utuok.invert, .utuok.invert a {
	background-color:inherit;
	color:#00A1CB;
}
.utunotice.invert, .utunotice.invert a {
	background-color:inherit;
	color:#FA8311;
}
.utuerror.small, .utuok.small, .utunotice.small {
	font-size:1.5em;
	padding:10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.utuerror.inline, .utuok.inline, .utunotice.inline {
	width:auto;
	padding:3px;
	font-size:inherit;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	clear:auto;
}
.utuerror.popup, .utuok.popup, .utunotice.popup,
.Zebra_Form div.error {
	position:fixed;
	width:500px; /*Old value: 750px*/
	top:25%;
	left:25%;
	padding:50px;
	box-shadow: 0px 0px 50px #000;/*#4d4d4d;*/
}

.adminactions {
	text-align:center;
	background-color:inherit;
	padding:0.7em;
}
.adminaction {
	background-color:#880088 !important;
}
.adminaction.invert {
	background-color:#FFF;
	color:#880088 !important;
}
.adminaction.disabled {
	background-color:#c1c1c1 !important;
}

#information {
	position:absolute;
	top:0px;
	right:10px;
	width:150px;
	background:#035978;
	padding:10px;
	text-align:center;
	-moz-border-radius: 0px 0px 15px 15px;
	-webkit-border-radius: 0px 0px 15px 15px;
	border-radius: 0px 0px 15px 15px;
}
#information a:hover, #information a:focus {
	text-decoration:none;
}
#information_link a {
	color:#fff;
}
#information #information_link a::after {
	content:" ▼";
}
#information.open #information_link a::after {
	content:" ▲";
}
#information_text {
	display:none;
	text-align:left;
	-moz-border-radius: 0px 0px 7px 7px;
	-webkit-border-radius: 0px 0px 7px 7px;
	border-radius: 0px 0px 7px 7px;
}
#information.open {
}
#information.open #information_link {
	padding-bottom:10px;
}
/*#information.open #information_link::after {
	content:'X';
	background:#fff;
	color:#DC002D;
}*/
#information.open #information_text {
	display:block;
	background:#fff;
	padding:5px 10px;
}

/* ----- common stuff... ----- */
.Zebra_Form input.disabled,
.Zebra_Form select.disabled {
	background: #DEDEDE;
	color: #888;
}
.Zebra_Form input[readonly] {
	background: #eee;
}

.Zebra_Form .submit:disabled {
	background-color: #c1c1c1;
    color:#fff;
}

/*.Zebra_Form input.disabled:hover,
.Zebra_Form input[readonly]:hover {
	background: #DEDEDE;
	color: #BBB
}*/

.Zebra_Form label.disabled {
	color: #DEDEDE
}

.Zebra_Form input.radio,
.Zebra_Form input.checkbox {
	float: left;
	margin-right: 5px;
	margin-top:3px;
	clear:left;
}
.Zebra_Form label.option {
	/*float:left;*/
	clear:right;
}

.Zebra_Form select.time {
	display:inline-block;
	float:none;
}

.Zebra_Form .optional {
	padding: 10px 50px;
	display: none;
}

.Zebra_Form .customValidationError {
	display:none;
	font-weight:bold;
	color:#F00;
	padding-bottom:5px;
}

div.clear {
	clear:both;
}

/* ----- Normal field ----- */
div.fieldArea {
	margin:10px 0px;
	border-left:10px solid #c1c1c1;
	padding:5px 10px;
	overflow:auto;
}
div.fieldArea.admin {

	border-left:10px solid #880088;

}

/* ----- Dependent area ----- */
div.dependent {
	margin-left:35px;
	margin-bottom:10px;
}
div.dependent.no-indent {
	margin-left:0px;
}
/* ----- Repeating area ----- */
div.repeating {
	margin:10px 0px;
	padding:0px; /*padding:5px 0px;*/
	border-left:10px solid #c1c1c1;
	overflow:auto;
}
div.repeating.readonly {
	margin:0px;
	padding:0px;
}
div.repeating > a {
	margin:10px;
}
div.repeating > div {
	padding:3px 10px;
	overflow:auto;
}
div.repeating > div:nth-child(even), div.repeating tr:nth-child(odd){
	background:#eee;
}
div.repeating div.fieldArea {
	border:none;
	overflow-y:auto; 
	overflow-x:visible;
}
div.repeating div div.fieldArea {
	padding:0px;
	margin:10px 20px 10px 0px;
	float:left;
}
div.repeating.nocols div div.fieldArea {
	float:none;
}
div.repeating.nocols > div {
	position: relative;
}
div.repeating.nocols > div > a.buttonlink {
	position: absolute;
	top: 10px;
	right: 10px;
}
div.repeating table {
	border-collapse:collapse;
	border:1px solid #eee;
	border-left:none;
	float: left;
}
div.repeating th {
	padding:10px;
	/*text-align:left;*/
	border-bottom:3px solid #c1c1c1;
}
div.repeating table div.fieldArea {
	margin:5px 0px;
}
/*div.repeating > div > a {
	margin:10px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border-radius: 14px;
	text-transform:uppercase;
}*/
.Zebra_Form div.repeating input {
	max-width:200px;
}
.Zebra_Form div.repeating.nocols input {
	max-width:90%;
}

/* ----- Admin things ----- */
#admin_basic div.fieldArea {
	border-left:10px solid #4d4d4d;
}
div.repeating div.admin div.fieldArea {
	float:none;
	border-bottom:1px solid #ccc;
}
div.repeating div.admin div.fieldArea:last-child {
	border:none;
}
/*table.admin_language_separation {
	width:100%;
}*/
table.admin_language_separation td {
	width:400px;
}
table.admin_language_separation td:first-child, table.admin td:first-child {
	width:140px;
}
table.admin_language_separation input, table.admin_language_separation textarea {
	width:95% !important;
}
table.admin {
	width:100%;
	margin-top:10px;
	margin-bottom:10px;
}
table.admin th, div.repeating table.admin th {
	/*text-align:left;*/
	padding:2px;
	border-bottom:none;
}
div.repeating table.admin tr:nth-child(odd){
	background:none;
}
table.admin td.option {
	padding-left:35px;
	width:auto;
}
.dependentheading {
	color:#999;
	font-weight:bold;
}
div.dependent.admin {
	border:1px dashed #aaa;
	padding:3px;
}
.uneditable {
	padding:5px;
	background-color:#ccc;
}
div.adminsectionheading {
	background:#ccc;
	padding-left:20px;
	/*border:2px solid #4d4d4d;*/
}

div.apiresults {
	/*position:relative;
	width:80%;*/
	margin:3px auto 1em auto;
	padding:15px 25px;
	background-color:#e6f0f7;
	color:#000;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	/*clear:both;*/
}
table.apiresults {
	border-collapse: collapse;
	border-spacing: 0;
}
table.apiresults th, table.apiresults td {
	padding: 0px 3em 0px 0px;
	margin: 0;
}

/* ----- LOGIN PAGE ----- */
#loginform {
	max-width:300px;
	margin:10px auto;
	text-align:center;
}
#loginform label {
	display:inline-block;
	min-width:70pt;
	text-align:right;
}

/* ----- FRONT PAGE ----- */
ul.list, table.list {
	margin:0px;
	padding:0px;
	border:1px solid #eee;
}
table.list {
	border-collapse:collapse;
}
ul.list li {
	list-style-type:none;
	padding:3px;
	margin:0px;
}
table.list td, table.list th {
	padding:3px 7px;
}
ul.list li:nth-child(even), table.list tr:nth-child(even) td {
	background:#eee;
}
ul.list li a {
	display:inline-block;
	width:300px;
}

/* ----- Nesting list ----- */

ol.nesting {
	counter-reset: list;
	list-style-type: none;
	display: table;
}

ol.nesting li {
	counter-increment: list;
	display: table-row;
}

ol.nesting li:before {
	content: attr(data-prefix) counter(list) " ";
	padding-right: 8px;
	display: table-cell;
	text-align: left;
}

/* ----- Search bar ----- */

div#formlist_searchbar {
	padding: 0.5em;
	background-color: #eee;
	overflow: auto;
}
div#formlist_searchbar > form > div {
	padding: 0.5em;
}
div#formlist_searchbar > form > div.filtersubmit {
	padding: 0em;
}

/*******************************
 *  STYLES FOR SOL
 *******************************/

.sol-radio {
	visibility:hidden;
}
.sol-container {
	min-width:300px;
	max-width:500px;
	clear:both;
	/* dropdownista rajaus pois, sen sijaan lisätty containeriin */
	background:#FFF;
	border: 1px solid #ccc;
    border-radius: 4px;
	-webkit-transition: border linear .2s, box-shadow linear .2s;
	-moz-transition: border linear .2s, box-shadow linear .2s;
	-o-transition: border linear .2s, box-shadow linear .2s;
	transition: border linear .2s, box-shadow linear .2s;
}
.sol-inner-container, .sol-container.sol-active .sol-inner-container {
	/* dropdownista rajaus pois, sen sijaan lisätty containeriin */
	border: none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;

	/*-webkit-transition: border linear .2s, box-shadow linear .2s;
	-moz-transition: border linear .2s, box-shadow linear .2s;
	-o-transition: border linear .2s, box-shadow linear .2s;
	transition: border linear .2s, box-shadow linear .2s;*/
}
.sol-option {
	padding: 3px 10px;
}
.sol-optiongroup-label {
	margin-bottom:0px;
}
.sol-input-container input[type="text"] {
	color:#4d4d4d;
}
.sol-input-container input[type="text"]:-ms-input-placeholder {
	color: #4d4d4d !important;
}
.sol-selection:not(.sol-keyboard-navigation) .sol-option:hover, .sol-option.keyboard-selection {
	/*color: #fff;* /* Värin vaihto ei toimi, jostain periytyy väärä */
	background: #eee;
}
.sol-selected-display-item {
	background: #666;
	color:#fff;
	border:none;
	font-weight:bold;
}
.sol-current-selection {
	padding:3px 3px 0px 3px;
}
.sol-quick-delete {
	color:#aaa;
}

.sol-selection > div:first-child .sol-optiongroup-label, .sol-selection > div:first-child .sol-label {
	padding-top:5px;
}
.sol-container.sol-active .sol-inner-container {
	box-shadow:none;
}

.Zebra_Form label.sol-label {
	float:none;
	margin:0px;
	font-weight:normal;
}

/**********************************
	SMALLER SCREENS
**********************************/

@media (max-width: 1350px) {
	p#welcome {
		width:74%;
	}
	#information {
		position:relative;
		float:right;
		width:15%;
		min-width:75px;
		top:-5px;
		right:0px;
	}
}

/**********************************
	RESPONSIVE FOR MOBILE DEVICES 
**********************************/

@media only screen and (max-width: 1000px) {
	body {
		font-size:5vw;
	}

	h1, h2, h3, h4, h5, h6 {
		font-size:6vw;
	}
	h3 { font-size:5.8vw; }
	h4 { font-size:5.6vw; }
	h5 { font-size:5.4vw; }
	h6 { font-size:5.2vw; }

	.Zebra_Form .note {
		font-size:4vw;
	}
	
	/* Form header */
	#information {
		min-width: 30vw;
	}
	p#welcome {
		width:60vw;
	}
	h1.stepheading::before {
		width:auto;
		height:auto;
	}
		
	/* Inputs */
	
	input, textarea, select, button {
		font-size:5vw;
	}
	
	input[type="text"]{
		width: 100%;
	}
	input[type="radio"]{
		width: 5vw;
		height: 5vw;
		margin-top: 2vw;
	}
	
	.Zebra_Form input.radio, .Zebra_Form input.checkbox {
		width: 5vw;
		height: 5vw;
		margin-top: 2vw;		
	}
	
    .Zebra_Form input.text {
        width: 75%;
    }

    .Zebra_Form textarea {
        width: 75%;
    }	

	.Zebra_Form input.date {
		width: 35vw;
	}
	.Zebra_Form select.time {
		width: 12vw;
	}
	
    .Zebra_Form input.text.username {
        width: 75%;
    }
	
	.Zebra_Form label {
		margin-top: 2vw;
	}
	
	/* Buttons */
	
	a.buttonlink.closePopup {
		font-size: 4vw;
		width: 4vw;
		-moz-border-radius: 4vw;
		-webkit-border-radius: 4vw;
		border-radius: 4vw;
	}
	
	a.buttonlink.round {
		margin: 1vw;
		padding: 1vw 1vw 1.5vw 1vw;
		width: 5vw;
		height: 5vw;
		-moz-border-radius: 5vw;
		-webkit-border-radius: 5vw;
		border-radius: 5vw;
		text-align:center;
		vertical-align:middle;
	}
	
	/* Datepicker */
	
	.Zebra_DatePicker td {
        padding:1vw;
    }
	
	.Zebra_DatePicker .dp_header {
		width:100%;
	}
	
	button.Zebra_DatePicker_Icon {
		background: url(../includes/icons/icon_calendar_200.png) no-repeat left top;
		width: 5vw;
		height: 5vw;
		background-size: cover;
		margin-top: 3vw;
		margin-right: 1vw;
	}

	.Zebra_DatePicker_Icon_Wrapper {
		width: 30vw;
	}
	
	/* Pop-ups */
	
    .utuerror.popup, .utuok.popup, .utunotice.popup, .Zebra_Form div.error {
		top: 10%;
		left: 5%;
		right: 5%;
        width: 80%;
		padding: 20px;
		font-size: 5vw;
    }
	
	/* Repeating */
	
	div.repeating div div.fieldArea {
		float: none;
	}
	.Zebra_Form div.repeating input {
		max-width: 90%;
	}
	
	/* User Search */

	div#userSearch {
		position:sticky;
		position: -webkit-sticky;
		top:40%;
		left:3%;
		width:95%;
		bottom:0;
	}
	
	div#userSearch input[type="text"], textarea, select  {
		width:90%;
	}
	
	a.userSearch {
		margin-top:10px;
		margin-left:0px;
		margin-right:5px;
	}
	
	div#searchResultsContainer {
		font-size:3vw;
		overflow-x:auto;
	}
	
	/* SOL */
	
	.sol-container {
		max-width: 90%;

	}
	.sol-inner-container {
		height: 10vw;
	}
	.sol-caret-container {
		top: 5vw;
	}
	.sol-caret-container .sol-caret {
		border: solid black;
		border-width: 0 0.5vw 0.5vw 0;
		display: inline-block;
		padding: 3px;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
	}

	.sol-container.sol-active .sol-selection-container {
		position:sticky;
		position: -webkit-sticky;
		top:inherit !important;
	}
	
}


/**********************************
	Z INDEXES
**********************************/

.sol-inner-container {
	z-index:90 !important;
}
.Zebra_DatePicker, .sol-selection-container {
	z-index:100 !important;
}
div#userSearch {
	z-index:200;
}
.utuerror.popup, .utuok.popup, .utunotice.popup,
.Zebra_Form div.error {
	z-index:300;
}

/**********************************
	PRINT MEDIA
**********************************/

@media print {
	body {
		font-size:8pt;
		max-width:auto;
	}
	
	.noprint {
		display:none !important;
	}
	.Zebra_Form .button,
	.Zebra_Form .reset,
	.Zebra_Form .submit,
	.Zebra_Form label.button {
		display:none;
	}
	
	a {
		color: inherit;
	}
	a.buttonlink, #welcome {
		display:none;
	}
	h1, h2, h3, h4, h5, h6 {
		font-size:11pt;
	}
	h3 { font-size:10pt; }
	h4 { font-size:9.5pt; }
	h5 { font-size:9pt; }
	h6 { font-size:8.5pt; }
	h1.stepheading {
		padding-left:0px;
		padding-right:0px;
		background:none;
		border-bottom: 2px solid #4d4d4d;
		color:inherit;
	}
	h1.stepheading::before {
		content:" ";
		width:auto;
		height:auto;
		display:inline-block;
		vertical-align:middle;
		overflow:hidden;
		margin-right:11px;
		background:#DC002D;
		padding:7px;
	}
	div.fieldArea {
		margin:0px;
		border:none;
	}
	div.repeating {
		/*margin:10px 0px;*/
		border:none;
	}
}

.Zebra_Form .button,
.Zebra_Form .reset,
.Zebra_Form .submit,
.Zebra_Form label.button,
input.buttonlink {
	background: #FA8311;
	border-radius: 6px;
    border:none;
	box-shadow: none;
	color: #FFF
}

.Zebra_Form .button:hover,
.Zebra_Form .reset:hover,
.Zebra_Form .submit:hover,
.Zebra_Form .submit-hover,
.Zebra_Form label.button:hover,
input.buttonlink:hover {
	background: #F54400;
	color: #FFF
}