html
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*, *:before, *:after
{
	box-sizing: inherit;
}

a:focus,
:focus
{
	outline: none;
}

html, body
{
	margin: 0;
	padding: 0;
	height: 100%;
}

body
{
	font-size: 62.5%;
}

.cc-cookies {
	width: 100%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#yhteystiedot p a:link,
#yhteystiedot p a:visited {
	color: white;
	text-decoration: underline;
}

#yhteystiedot p a:hover,
#yhteystiedot p a:active {
	color: #ddd;
	text-decoration: none;
}

#page
{
	width: 32em;
	margin: 0 auto;
	overflow: hidden;
	background: #fff;
	padding: 0em;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
}

/*
span.user-role-bar
{
	overflow: hidden;
}

span.user-role-bar img
{
	float: left;
	margin-left: 1em;
	width: 12em;
	color: #ccc;
	font-weight: bold;
	font-style: italic;
	font-size: 2em;
	padding: .5em;
}
*/

#content
{
	clear: both;
	width: 100%;
	padding: 1em 2em 3em 2em;
	font-size: .5em;
}

#content article
{
	border: 1px solid #ccc;
	background: #eee;
	padding: 1em 2em 1em 2em;
	overflow: hidden;
	overflow: auto;
	font-size: 1.5em;
}

#content article #ticson-form-container
{
	border: none;
	background: #eee;
	padding: 1em 2em 1em 2em;
}

#content h1
{
	font-size: 2.2em;
	margin: .5em 0 .8em 0em;
}

#content h2
{
	font-size: 2em;
	margin: .5em 0 .8em 0em;
}

#content p,
#content ul
{
	font-size: 1.6em;
}

#content ul ul,
#content ul ul ul
{
	font-size: 1.4em;
}

/************************************************************************************
NAV
*************************************************************************************/

nav
{
	float: left;
	clear: both;
	background: #808080; /* Asiakasväri 2? */
	background: white;
	padding: .5em 1em .5em 1em;
	margin: 0;
	width: 100%;
	text-align: center;
}

nav ul
{
	list-style-type: none;
	list-style-position: inside;
	margin: 0 0 0 0;
	padding: 0;
	font-size: 1.3em;
	width: 100%;
}

nav ul li
{
	float: left;
	display: block;
	width: 43%;
	padding: 0;
	margin: .4em .7em .6em .6em;
}

nav ul li a
{
	display: block;
	width: 100%;
	padding: 1em 0em 1em 0em;
	margin-right: .5em;
	border-radius: .6em;
}

nav ul li a:link,
nav ul li a:visited
{
	color: black;
	background: #ddd;
	text-decoration: none;
	font-weight: bold;
}

nav ul li a:hover,
nav ul li a:active
{
	color: black;
	background: #eee;

	text-decoration: underline;
	font-weight: bold;
}


/************************************************************************************
OTHER STUFF
*************************************************************************************/

ul.content-menu li
{
	margin-bottom: 1em;
	font-size: 1.2em;
}

ul.content-menu li a:link,
ul.content-menu li a:visited
{
	color: #0000a0;
	text-decoration: underline;
}

ul.content-menu li a:hover,
ul.content-menu li a:active
{
	color: black;
	text-decoration: underline;
}

ul.new-form-menu
{
	list-style-type: none;
	padding-left: 0;
}

ul.new-form-menu li
{
	margin-bottom: 1.5em;
	font-size: .9em;
}

ul.new-form-menu li i
{
	/*
	float: left;
	margin-left: .5em;
	*/
	margin-right: 1em;
	font-weight: normal;
	display: none;
}

ul.new-form-menu li a:link,
ul.new-form-menu li a:visited
{
	/* color: #0000a0; */
	color: black;
	background: #ccc;
	border: 1px solid #aaa;
	border-radius: 1em;
	text-decoration: none;
	font-weight: bold;
	display: block;
	padding: .5em;
	text-align: center;
	width: 99%;

	-webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
}

ul.new-form-menu li a:hover,
ul.new-form-menu li a:active
{
	color: white;
	background: #666;
	border: 1px solid #666;
	text-decoration: none;

	margin-left: 0px;

	-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:  1px 1px 1px 0px rgba(0,0,0,0.75);
	box-shadow:  1px 1px 1px 0px rgba(0,0,0,0.75);
}

table
{
	border-radius: 5px;
	border-collapse: collapse;
	border: 1px solid black;
	table-layout: fixed;
	word-wrap: break-word;
	width: 99%;
	font-size: 1.2em;
	margin-bottom: 1em;
}

table td,
table th
{
	border: 1px solid black;
	padding: 1em;
}

table th
{
	background: #ccc;
	border: 1px solid black;
	border-collapse: collapse;
}

table.lomakelistaus
{
	table-layout: fixed;
	word-wrap: break-word;
	width: 100%;
	font-size: 1em;
	margin-bottom: 2em;
	margin-top: .5em;
}

table.lomakelistaus th
{
	padding: .3em;
	background: #ccc;
	color: black;
}

table.lomakelistaus td
{
	padding: .3em;
	text-align: center;
	border: 1px solid #000;
}

.hide-phone,
.hide-phone-extra
{
	display: none;
}

/************************************************************************************
FORM STUFF
*************************************************************************************/


form
{
	width: 100%;
	margin: 0 auto;
	background: #eee;
	border-radius: .8em;
	padding: 1em 2em 6em 2em;
	/* text-align: center; */
}

fieldset
{
	border: 1px solid transparent;
	background: transparent;
	margin-bottom: 0em;
	padding: 1.2em 1em 1em 1em;
	border-radius: .4em;
}

fieldset#tehtava-container,
fieldset#kuva-container,
fieldset#sivu-container
{
	border: 1px solid #bbb;
	padding-bottom: 2em;
	/* width: 95%; */
	width: 114%;
	margin-left: -2em;
	background: #ccc;
	margin-bottom: 2em;
}

fieldset.tehtava,
fieldset.kuva,
fieldset.sivu
{
	background: #FAFF96;
	padding: 3em;
	border: 1px solid #aaa;
	margin-bottom: 2em;
}
fieldset legend
{
	font-weight: bold;
	font-size: 1.8em;
	padding: 0 .4em .2em 0em;
	color: #000;
	letter-spacing: .05em;
	word-break: break-all;
	display: inline;
	/* text-transform: uppercase; */
}

label
{
	clear: both;
	float: left;
	font-size: 1.8em;
	font-weight: bold;
	padding-bottom: .5em;
}

input[type=text],
input[type=url],
input[type=email],
input[type=password],
input[type=tel],
input[type=date],
textarea
{
	/*
	-webkit-appearance: none;
	-moz-appearance: none;
	*/
	width: 99%;
}

input[type=text],
input[type=date],
input[type=password]
{
	float: left;
	clear: both;
	font-size: 2em;
	padding: .6em;
	margin-bottom: .5em;
}

textarea
{
	font-size: 2em;
}

textarea
{
	float: left;
	clear: both;
	line-height: 1.5em;
	padding: .5em;
	margin-bottom: .5em;
	overflow: hidden;
    height: auto;
	/* font-family: Verdana, Arial, sans-serif; */
	font-weight: normal;
	word-wrap: break-word;
}

/* iLaitteita ja LS-sivunlatausta varten */
textarea, input[type=text]
{
	min-height: 2.5em;
}

#tehtava-container input[type=text],
#tehtava-container input[type=date]
{
	float: left;
	clear: both;
	line-height: 1.5em;
	padding: .5em;
	margin-bottom: .5em;
	overflow: hidden;
    height: auto;
	/* font-family: Verdana, Arial, sans-serif; */
	font-weight: normal;
	word-wrap: break-word;
}

fieldset.radiobuttons,
fieldset.checkboxes
{
	border: 1px solid #999;
	margin-bottom: 2.5em;
	background: none;
}

fieldset.radiobuttons+div.sub-heading-block
{
	margin-top: 4em;
	margin-bottom: 1em;
}

div.sub-heading-block+fieldset.radiobuttons
{
	margin-top: 0;
}

form .sub-heading-block
{
	margin-left: -1em;
	margin-bottom: 2em;
	border-left: 1em solid #f80;
	border-left: 1em solid #96dac0;
	padding-left: 1.4em;
}

form .sub-heading-block h2
{
	font-size: 2em;
	margin-bottom: .2em;
}

form .sub-heading-block h3
{
	font-size: 1.8em;
	margin-bottom: 1em;
}

form .sub-heading-block h2+h3
{
	margin-top:0;
	margin-bottom: 2em;
}

fieldset.radiobuttons legend,
fieldset.checkboxes legend
{
	padding: 0 .5em 0 .5em;
}


fieldset.radiobuttons label,
fieldset.checkboxes label
{
	display: block;
	float: left;
	clear: both;
	font-size: 1.8em;
	font-weight: bold;
	margin-bottom: .5em;
	padding: 1em;
	border: 1px solid #ccc;
	background: #fdfdfd;
	border-radius: 1em;
	width: 99%;
}

fieldset.radiobuttons label.unsaved-changes,
fieldset.checkboxes label.unsaved-changes
{
	border: 1px solid orange;
}

fieldset.unsaved-changes,
div.unsaved-changes
{
	border: 1px solid orange;
	background: #EE0;
}

fieldset.radiobuttons label.normal
{
	clear: both;
	float: left;
	font-size: 1.8em;
	font-weight: bold;
	margin-top: 1em;
	padding: 0 0 0 0;
	border: none;
	background: none;
	border-radius: none;
	width: 100%;
}

fieldset.radiobuttons input[type=radio]
{
	float: left;
	margin-top: .2em;
	margin-right: .6em;
}

fieldset.checkboxes input[type=checkbox]
{
	float: left;
	margin-top: .2em;
	margin-right: .6em;
}

/* autosize animation */
textarea
{
    transition: height 0.2s ease 0s;
    vertical-align: top;
}

body:not(.page-forms) select
{
	font-size: 1em;
	min-width: 100%;
	max-width: 100%;
	padding: 1em;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 1em;
	margin-bottom: .5em;
}

td select
{
  font-size:1em;
  padding:0.5em;
}

table
{
	margin-top: 0;
}

table input[type=button]
{
	margin-top: 0;
	font-size: .8em;
	min-height:1.5em;
	float:right;
}

/*
.delete-user, .delete-new-user
{
  color:white;
  background: #D00;
  border-radius:1em;
}
.delete-user:hover, .delete-new-user:hover
{
  color:white;
  background: #F00;
  border-radius:1em;
}
*/

input#add-user
{
  background:#0D0;
  border-radius:1em;
}

input#add-user:hover
{
  background:#0E0;
}

table#hallinnoi_kayttajatasoja
{
    width:100%;
	font-size: .9em;
}

input#add-user
{
	margin-bottom: 2em;
}

option
{
	padding: .25em .5em .25em .5em;
}

table#hallinnoi_kayttajatasoja select
{

}

table#hallinnoi_kayttajatasoja select option
{
	padding: .3em;
}

.form-controls
{
	text-align: center;
}

#sub
{
	background: #0C0;

	border-radius: .8em;
}

#sub:hover
{
	background:#0E0;
}

input[type=button],
input[type=submit]:not(.unstyled),
input[type=file],
button[type=submit]
/*,button.ticson-button*/
{
	font-size: 1.8em;
	margin-top: 2em;
	padding: .8em 1em .8em 1em;
	/* min-height: 4em; */
}


input[type=button]#add-task,
input[type=button]#add-image,
input[type=button]#add-page
{
	font-size: 1.8em;
	margin: 0em 0em 1em 0em;
	padding: .6em;
	min-height: 4em;
}

input[type=button].delete-task,
input[type=button].delete-image,
input[type=button].delete-page
{
	float: right;
	clear: both;
	font-size: 1.8em;
	padding: .6em;
	min-height: 4em;
	margin: 1em 0em 0em 0em;
}

.unsaved-changes
{
	border: 1px solid orange;
}

#submit.unsaved-changes,
.submit.unsaved-changes
{
	border: 1px solid #C00;
	background: #EE0;
	border-radius: .2em;
}

#submit.unsaved-changes:hover,
.submit.unsaved-changes:hover
{
	background: yellow;
}

.kuva-thumb
{
	float: left;
	border: 1em solid white;
	background: #bbb;
	/*min-height: 200px;*/
	width: 202px;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

.kuva-thumb label
{
	float: left;
	margin-top: 0.5em;
	margin-left: 0.5em;
}

.kuva-thumb.unsaved-changes
{
	border: 1em solid orange;
}

.kuva-thumb img
{
	float: left;
	width: 200px;
}

fieldset.kuva .vaihda-kuva
{
	float: left;
	clear: both;
	width: 100%;
	padding-bottom: 3em;
}

fieldset.kuva .vaihda-kuva input[type=button]
{
	margin: 0;
	/*margin: 1em 0 0 29%;*/
	margin-top: 1em;
}

fieldset.kuva input.lataa-tiedosto
{
	margin-top: 1.5em;
	margin-left: 24%;
	margin-bottom: 3em;
}

.kuva-thumb-container
{
	float: left;
	width: 100%;
}

.kuva-tiedot-container
{
	float: left;
	clear: both;
	width: 100%;
	margin-top: 2em;
}

div.kuva-tiedot
{
	margin-left: 0;
	width: 100%;
}

div.kuva-tiedot textarea
{
	width: 100%;
	margin-bottom: 1em;
}

input.delete-image[type="button"]
{
    float: right;
	clear: both;
    font-size: 1.8em;
    margin: 1em 0.4em 0 0;
    min-height: 4em;
    padding: 0.6em;
}

/*
fieldset.kuva input[type=button]
{
	margin-top: 1em;
	margin-left: 2em;
}
*/

fieldset.kuva input.lataa-tiedosto
{
	margin-top: 1.5em;
	margin-left: 18%;
	margin-bottom: 3em;
}

/************************************************************************************
ASIAKASHALLINTA
*************************************************************************************/

.yrityslogo
{
	width:260px;
	min-height: 320px;
	float:left;
	margin: 5px;
	text-align:center;
	padding:5px;
	border:transparent 1px solid;
}

.yrityslogo:hover
{
	background-color:#CCC;
}

.yrityslogo a
{
	color:#666;
	text-decoration:none;
}

.yrityslogo a:hover
{
	color:#666;
	text-decoration:underline;
}

h2+table
{
	margin-top: -1em;
}

table
{

}

th
{
	font-size: 1.5em;
	padding: .2em;
}

td
{
	font-size: 1.8em;
	padding: 1em;
}

td a
{
	color: #0000a0;
	text-decoration: underline;

}

td a:hover
{
	color: black;
	text-decoration: undexline;
}
/************************************************************************************
Index.php-sivun tyylit
*************************************************************************************/

#sisalto
{
  width:95%;
  margin-left:auto;
  margin-right:auto;
}

#sisalto h2
{
	font-size: 1.6em;

}

#ticsonlogo
{
	width:100%;
	background:#EEE;
	border: transparent 1px;
	border-radius:0.8em;
	padding:0em 2em 1em 2em;
	margin:10px;
	margin-left:0px;
	text-align:center;

}

#ticsonlogo h1
{
	width:100%;
	font-size:2.1em;

}

#asiakaspalvelu
{

	font-size: 1.5em;
	width:100%;
	text-align:center;
	margin-bottom:15px;
}

#asiakaspalvelu a
{
	color:black;
	text-decoration:none;
}

#asiakaspalvelu a:hover
{
	color:black;
	text-decoration:underline;
}

#esittely
{
	display:none;
  width: 95%;
  background:#EEE;
  border: transparent 1px;
  border-radius:0.8em;
  padding:0em 2em 0em 2em;
  font-size:1.5em;
  margin:10px;
	float:left;
}

#esittely.show-on-mobile {
	display: block;
	margin: 0;
	width: 100%;
}

#esittely ul li
{
	list-style-position: inside;
	list-style-type: disc;
}

#etusivunlomake
{
  width:100%;
  margin-top:10px;
  float:left;
}

#yhteystiedot
{
  clear:both;
  text-align:center;
  font-size:1.3em;
	width: 95%;
	background:#EEE;
	border: transparent 1px;
	border-radius:0.8em;
	margin:10px;
	float:left;
	text-align:center;
	color: black;
}

#kirjautumislomake fieldset
{
	padding: 1em 0 0 0;
	margin: 0;
}

#kirjautumislomake input[type=text],
#kirjautumislomake input[type=password]
{
	margin-left: 0;
}


/************************************************************************************
LOMAKE: ASENNUSTÖIDEN TARKASTUSASIAKIRJA / HANURIJUTTUJA
*************************************************************************************/

#accordions-container
{
	margin-top: 2em;
	margin-left: 1.5em;
}

.accordion
{
	margin-bottom: 2em;
	border-radius: 4px;
	width: 93%;
}

.acco-color1
{
	border: 2px solid #bdcde8;
	background: #bdcde8;
}

.acco-color1 .accordion-header
{
	background: #bdcde8;
}

.acco-color2
{
	border: 2px solid #addcae;
	border: 2px solid #96dac0;
	background: #96dac0;
}

.acco-color2 .accordion-header
{
	background: #addcae;
	background: #96dac0;
}

.acco-color3
{
	border: 2px solid #dad68b;
	border: 2px solid #bdcde8;
	background: #bdcde8;
}

.acco-color3 .accordion-header
{
	background: #dad68b;
	background: #bdcde8;
}

.acco-color4
{
	border: 2px solid #d1d562;
	border: 2px solid #96dac0;
	background: #96dac0;
}

.acco-color4 .accordion-header
{
	background: #d1d562;
	background: #96dac0;
}

.accordion-form-fields
{
	margin-top: 2em;
	padding-bottom: 2em;
}

div.accordion-header
{
	display: block;
	padding: 1em;
	overflow: hidden;
}

#content div.accordion-header h2
{
	font-size: 2em;
	/* display: inline; */
	display: block;
}

input.expand-accordion
{
	float: right;
	margin-top: 0;
}

/************************************************************************************
KALENTERI (.datepicker, .weekpicker)
*************************************************************************************/

.ui-datepicker-calendar
{
	overflow: hidden;
	background: white;
}

.ui-datepicker table
{
	font-size: .5em;
}

/************************************************************************************
LOMAKE: 3-IN-1
*************************************************************************************/

.checkboxes-set-system1 input[type=checkbox]
{
	float: left;
	clear: none;
	margin-top: .3em;
	margin-right: 1em;
}

.checkboxes-set-system1 label
{
	float: left;
	clear: none;
}

.checkboxes-set-system1 .cb-set label.short
{
	width: 10em;
}

.checkboxes-set-system1 .cb-set label.same-row
{
	width: 20em;
}

.cb-set
{
	clear: both;
	/* border: 1px solid red; */
	overflow: hidden;
	padding: 2em 1em 1em 2em;
	border-bottom: 3px solid #ccc;
	background: #ddd;
}

.checkboxes-set-system1 .cb-set label.before-input
{
	margin-top: .5em;
	clear: both;
}

.accordion-3in1
{
	margin-top: 2em;
	margin-left: 1.5em;
}

.accordion-3in1 .accordion-form-fields
{
	margin-top: 0em;
	padding-bottom: 0em;
}

.accordion-3in1 .accordion-form-fields .cb-set input[type=text],
.accordion-3in1 .accordion-form-fields .cb-set textarea
{
	width: 95%;
}

.weather-data-container
{
	clear: both;
}

.weather-data-container label.weather-data-header
{
	/* margin-top: 1em; */
	/* margin-bottom: 1em; */
	clear: both;
	display: block;
	width: 100%;
	margin-bottom: 1em;
}

.weather-data-container .weather-data-group
{
	width: 98%;
	float: left;
	margin-right: 2em;
}

.wd-dd3
{
	clear: left;
}

.weather-data-container .weather-data-group input[type=text]
{
	padding: 1.3em;
}


/************************************************************************************
TEHTÄVIEN SÄHKÖPOSTITUSRASTI
*************************************************************************************/

fieldset.task-email-checkbox
{
	border: none;
	margin-bottom: 1em;
	background: none;
	padding: 0;
	padding-left: .1em;
}

fieldset.task-email-checkbox legend
{
	padding: 0 .5em 0 .5em;
}

fieldset.task-email-checkbox label
{
	display: block;
	float: left;
	clear: both;
	font-size: 1.6em;
	font-weight: bold;
	/* margin-bottom: .5em; */
	padding-top: 1em;
	width: 100%;
}

fieldset.task-email-checkbox label span
{
	float: left;
	width: 85%;
}

fieldset.task-email-checkbox input[type=checkbox]
{
	float: left;
	margin-top: .2em;
	margin-right: .6em;
}

/************************************************************************************
YHTEYSILMOITUKSET YMS.
./form-handlers/inc.connection-notifications.php
*************************************************************************************/

div#page.connected-yes { background: white; }
div#page.connected-no { background: pink; }

.connection-notification
{
	display: none;
	width: 89%;
	background: pink;
	border: 2px dashed red;
	color: black;
	font-size: 1.5em;
	padding: 1em 2em 1em 2em;
	margin: 2em 0 2em 1em;
}

.connection-notification ul li
{
	margin-left: -1.5em;
	font-size: .9em;
}

.connection-notification ul
{
	margin-bottom: 0;
}

.connection-notification .form-controls
{
	margin-top: 2em;
	padding: 0 0 1em 0;
}

.connection-notification .form-controls input
{
	margin-top: 0;
	font-size: 1.4em;
}

/************************************************************************************
EXTRA UI STUFF
*************************************************************************************/

.form-controls .message-saving
{
	font-size: 1.6em;
	margin-top: 2em;
	clear: both;
}

input[type=submit]:disabled#submit.unsaved-changes
{
	background: #ccc;
	color: black;
	border: 1px solid #666;
	border-radius: .2em;
}

/* 1.2em */
/************************************************************************************
SIVUN ALKUUN- JA LOPPUUN-LINKIT
*************************************************************************************/

#back-to-top div:focus,
#back-to-top a:focus,
#back-to-bottom div:focus,
#back-to-bottom a:focus
{
	outline: none;
}

#back-to-top
{
	position: fixed;
	margin: 0;
	bottom: 20em;
	right: 0em;
	text-align: center;
	display: none;
	z-index: 150;
	width: 11em;
}

#back-to-bottom
{
	position: fixed;
	margin: 0;
	bottom: 8em;
	right: 0em;
	text-align: center;
	display: none;
	z-index: 150;
	width: 11em;
}

#back-to-top a,
#back-to-bottom a
{
	border-radius: .4em 0 0 .4em;
	font-size: 1.2em;
	width: 100%;
}

#back-to-top a:link,
#back-to-top a:visited,
#back-to-bottom a:link,
#back-to-bottom a:visited

{
	text-transform: uppercase;
	color: white;
	background: #0055FF;
	display: block;
	padding: 1em;
	text-decoration: none;

	-webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75);
	box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.75);
}

#back-to-top a:hover,
#back-to-top a:active,
#back-to-bottom a:hover,
#back-to-bottom a:active

{
	color: white;
	background: black;
	display: block;
	padding: 1em;
	text-decoration: none;
	margin-right: -.1em;
	margin-bottom: -.1em;

	-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:  1px 1px 1px 0px rgba(0,0,0,0.75);
	box-shadow:  1px 1px 1px 0px rgba(0,0,0,0.75);
}

#back-to-top a.ltt-active,
#back-to-bottom a.ltt-active
{
	background: #0055FF;
}

/************************************************************************************
PROJEKTISIVUT
*************************************************************************************/

.project-box-container
{
	float: left;
	clear: both;
	width: 100%;
	margin-bottom: 2em;
}

div.project-box-container h2 span
{
	float: right;
}

div.project-box-container h2 a:link,
div.project-box-container h2 a:visited
{
	color: #0000A0;
	text-decoration: underline;
	font-weight: bold;
}

div.project-box-container h2 a:hover,
div.project-box-container h2 a:active
{
	color: black;
}

.project-box
{
	float: left;
	clear: both;
	width: 100%;
	margin-bottom: 2em;
}

h2+div.content-scroller
{
	margin-top: -1em;
}

.content-scroller
{
	height: 30em; /*32.8*/
	overflow-y: scroll;
	overflow-x: hidden;
	border: 1px solid black;
	background: transparent;
}

.content-scroller-files
{
	height: 35em;
	overflow-y: scroll;
	border: none;
	background: #eee;
	margin-bottom: 1em;
}


.project-box+.project-box
{
	float: right;
}

			/* LOMAKELISTAUS */

table.projekti-lomakelistaus
{
	width: 100%;
	height: 33em;
}

table.projekti-lomakelistaus th
{
	padding: .6em;
	font-size: 1.2em;
	background: #ccc;
}

table.projekti-lomakelistaus th.lomake-aika
{
	width: 22%;
}

table.projekti-lomakelistaus td
{
	border: 1px solid black;
	padding: .6em .6em .8em .6em;
	font-size: 1.6em;
	text-align: center;
}

table.projekti-lomakelistaus td.align-left
{
	text-align: left;
}

			/* TEHTÄVÄLISTAUS */

table.projekti-tehtavalistaus
{
	width: 100%;
	background: #eee;
	word-wrap: break-word;
	border: none;
	margin-bottom: 0em;
}

table.projekti-tehtavalistaus th
{
	padding: .6em;
	font-size: 1.2em;
	background: #ccc;
	border-top: none;
	border-left: none;
	border-right: 1px solid black;
}

table.projekti-tehtavalistaus th.lomake-aika
{
	width: 25%;
}

table.projekti-tehtavalistaus td
{
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-left: none;
	font-size: 1.6em;
	padding: .6em .6em .8em .6em;
	text-align: center;
}

			/* CHAT */


div#chat-messages.has-messages
{
	width: 100%;
	font-size: 1em;
	background: #eee;
	padding: 1em;
	clear: both;
	margin-bottom: 1.5em;
	height: 300px;
	overflow: auto;
}

div#chat-messages.no-messages
{
	width: 100%;
	font-size: 1em;
	background: #eee;
	padding: 1em;
	clear: both;
	height: 100px;
	text-align: center;
}

div#chat-messages.no-messages h2
{
	margin-top: 2em;
}

#chat-messages ul
{
	width: 100%;
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#chat-messages ul li
{
	border-bottom: 1px solid #333;
	padding: 20px 10px 20px 10px;
	overflow: hidden;
}

#chat-messages ul li:first-child
{
	padding-top: 10px;
}

#chat-messages ul li span.chat-message-author
{
	font-size: 12px;
	font-weight: bold;
	display: block;
	padding-bottom: .5em;
}

#chat-messages ul li span.chat-message-text
{
	font-size: 16px;
}

#chat-messages ul li span.chat-message-delete a:link,
#chat-messages ul li span.chat-message-delete a:visited
{
	font-weight: bold;
	color: red;
	font-size: 12px;
	float: right;
	text-decoration: none;
}

#chat-messages ul li span.chat-message-delete a:hover,
#chat-messages ul li span.chat-message-delete a:active
{
	text-decoration: underline;

}

form#chat-form
{
	background:#ccc;
	padding-left:0;
	padding-right:0;
}

input#chat-message
{
	width:70%;
	float:left;
}

input#send-chat-message
{
	float:right;
	margin-top:-2px;
	min-height:0;
	height: 45px;
	font-size: 1.8em;
}

form#send-pdf-link-dialog-form label.error
{
	color: red;
	font-weight: bold;
	font-size: 1.2em;
}


			/* YLEINEN */

#filemanager .elfinder-cwd table td:nth-child(2)
{
	display: none;
}

.round-corners
{
    background: none repeat scroll 0 0 #ccc;
    padding: 1.5em 1.5em .3em 1.5em;
	border-radius: 0.8em;
}

table.projekti-lomakelistaus tr,
table.projekti-tehtavalistaus tr
{
	border-bottom: 1px solid black;
}

table.projekti-lomakelistaus tr:first-child,
table.projekti-tehtavalistaus tr:first-child
{
	border-bottom: none;
}

table.projekti-lomakelistaus tr:last-child,
table.projekti-tehtavalistaus tr:last-child
{
	border-bottom: none;
}

table.projekti-lomakelistaus td,
table.projekti-lomakelistaus th,
table.projekti-tehtavalistaus td,
table.projekti-tehtavalistaus th,
.project-box table,
.project-box-container table,
.content-scroller
{
	border: 0;
}

table.projekti-lomakelistaus td
{
	background: #eee;
}

.content-scroller
{
	margin-bottom: 1em;
}

table.projekti-lomakelistaus th,
table.projekti-tehtavalistaus th
{
	height: 3em;
}


span.lomake-description
{
	text-transform: uppercase;
	font-size: .7em;
	font-weight: bold;
}

span.tiedosto-description
{
	font-family: "Consolas", "Courier New", monospace;
	font-size: .9em;
	font-weight: normal;
}

			/* TIEDOSTONHALLINTA */

table.projekti-lomakelistaus th.tiedosto-aika
{
	width: 25%;
}

.file-display-navi
{
	display: block;
	overflow: hidden;
	width: 100%;
	margin-top: 1em;
}

#content .file-display-navi ul
{
	float: none;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.file-display-navi ul li
{
	float: left;
	margin-right: .5em;
}

.file-display-navi ul li.float-right
{
	float: right;
}

.file-display-navi ul li a:link,
.file-display-navi ul li a:visited
{
	display: block;
	background: #aaa;
	color: #222;
	text-decoration: none;
	font-weight: bold;
	padding: .6em .8em;
	border-radius: .8em .8em 0 0;
}

.file-display-navi ul li a:hover,
.file-display-navi ul li a:active
{
	color: black;
	background: #ccc;
	text-decoration: none;
}

.file-display-navi ul li a.current-file-display
{
	color: black;
	background: #ddd;
	text-decoration: none;
}

#file-display-container
{
	overflow: hidden;
	background: #ddd;
	padding: 3em 2em 2em 2em;
}

#file-display-filemanager
{
	display: none
}

#file-display-container table
{
	background: #eee;
}

#filemanager-container
{
	overflow: hidden;
	box-sizing: content-box;
	font-size: 1.2em;
	width: 50em;
	padding-bottom: .8em;
}

.elfinder-contextmenu
{
	font-size: 14px;
}


/************************************************************************************
EKSTRAT
*************************************************************************************/

a.button-link:link,
a.button-link:visited
{
	color: black;
	background: #ccc;
	border: 1px solid #aaa;
	border-radius: 1em;
	text-decoration: none;
	font-weight: bold;
	display: block;
	padding: .5em;
	text-align: center;
	width: 99%;

	-webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
}

a.button-link:hover,
a.button-link:active
{
	color: white;
	background: #666;
	border: 1px solid #666;
	text-decoration: none;

	margin-left: 0px;

	-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:  1px 1px 1px 0px rgba(0,0,0,0.75);
	box-shadow:  1px 1px 1px 0px rgba(0,0,0,0.75);
}


/************************************************************************************
UUDET VALITSE ASIAKKUUS -TYYLIT
*************************************************************************************/

.customer-container
{
	float: left;
	clear: both;
	width: 100%;
	border-radius: 1em;
	background: #eee;
}

#content .customer-container h2
{
	color: #333;
	padding-bottom: 1em;
	margin-bottom: 0;
	font-size: 1.8em;
}

.customer-box
{
	text-align: center;
}

.sub-customer-box
{
	float: right;
	clear: both;
	width: 70%;
	text-align: center;
}

.customer-box .customer-logo,
.sub-customer-box .customer-logo
{
	float: none;
	padding-top: 1em;
	margin-right: 0em;
	margin-bottom: 2em;
}

.customer-box .customer-logo img,
.sub-customer-box .customer-logo img
{
	padding: 1em;
	background: white;
}

.customer-box .customer-name
{
	margin-top: -.5em;
}

.customer-box .customer-name,
.sub-customer-box .customer-name
{
	float: left;
	font-size: 1.0em;
	width: 100%;
}

.sub-customer-box .customer-name span
{
	font-size: 1.4em;
	font-weight: normal;
	color: #444;
}

#content .sub-customer-box .customer-name h2
{
	margin-top: .1em;
}

.customer-box .customer-logo img
{
	width: 25em;
}

.sub-customer-box .customer-logo img
{
	width: 18em;
}

.customer-box a:link.customer-link,
.sub-customer-box a:link.customer-link
{
	color: #666;
	background: #ddd;
	display: block;
	padding: 2em 2em 1em 2em;
	border-radius: 1em;
	overflow: hidden;
	min-height: 12em;
	margin-bottom: 2em;
}

.customer-box a:hover.customer-link,
.customer-box a:hover.customer-link h2,
.sub-customer-box a:hover.customer-link,
.sub-customer-box a:hover.customer-link h2
{
	background: #bbb;
	color: black;
	text-decoration: underline;
}

input#hakukentta
{
	width: 65%;
	margin-top: 0em;
	margin-bottom: 1.5em;
}

input#tyhjenna
{
	float: right;
	font-size: 1.4em;
	margin-top: -.1em;
	margin-left: 0em;
	min-height: 0;
	padding: 1em .7em 1em .7em;
}

.hidden
{
	display: none;
}

.no-margin
{
	margin: 0;
}

#tyhja-haku
{
	display: none;
	float: left;
	clear: both;
	width: 100%;
	background: #ccc;
	padding: 2em;
	border-radius: 1em;
	margin-bottom: 2em;
}

#tyhja-haku h2
{
	text-align: center;
}

/************************************************************************************
PROJEKTISIVUN KALENTERITYYLIT
*************************************************************************************/

div.project-links
{
	display: block;
	overflow: hidden;
	margin-top: 1.5em;
	margin-bottom: 1em;
}

div.project-links a:link,
div.project-links a:visited
{
	font-size: 1.4em;
	color: #0000A0;
	text-decoration: underline;
	font-weight: bold;
	float: right;
	margin-left: 2em;
	margin-right: 0em;
	margin-bottom: 1em;
}

div.project-links a:hover,
div.project-links a:active
{
	color: black;
}

div.no-timeline-info a:link,
div.no-timeline-info a:visited,
div#content-downloading a:link,
div#content-downloading a:visited
{
	color: #0000A0;
	text-decoration: underline;
	font-weight: bold;
}

div.no-timeline-info a:hover,
div.no-timeline-info a:active,
div#content-downloading a:hover,
div#content-downloading a:active
{
	color: black;
}

#timeline-container
{
	height: 25em;
	overflow-y: auto;
	table-layout: fixed;

}

table#block-timeline
{
	border-collapse: collapse;
	font-size: .8em;
	background: white;
	margin-top: 1em;
	border: 2px solid black;

	table-layout: auto;
	word-wrap: normal;
	margin-bottom: 0;
	margin-top: 0;
	padding-bottom: 0;
}

table#block-timeline th,
table#block-timeline td
{
	padding: 8px;
}

table#block-timeline th
{
	border-right: 2px solid black;
	border-left: 2px solid black;
	border-bottom: 2px solid black;
}

table#block-timeline th,
table#block-timeline th.header-day
{
	background: #bbb;
}

table#block-timeline td.row-header
{
	min-width: 100px;
	max-width: 100px;
	width: 100px;
}

table#block-timeline th
{
	min-width: 46px;
	max-width: 46px;
	width: 46px;
}

table#block-timeline th,
table#block-timeline td.row-header
{
	font-weight: bold;
}

table#block-timeline th.header-day.weekend
{
	background: pink;
	color: black;
}

table#block-timeline td.row-header,
table#block-timeline th.first-column-titles
{
	border-right: 2px solid black;
}

table#block-timeline thead
{
	border-bottom: 2px solid black;
}

table#block-timeline td.day-box
{
	vertical-align: center;
	text-align: center;
	font-weight: bold;
}

table#block-timeline tr:nth-child(odd) td.row-header,
table#block-timeline tr:nth-child(odd) td.day-box.cell-selected
{
	background: yellowgreen;
}

table#block-timeline tr:nth-child(even) td.row-header,
table#block-timeline tr:nth-child(even) td.day-box.cell-selected
{
	background: deepskyblue;
}

table#block-timeline span.icon
{
	color: red;
}

div#timeline-info-container
{
	margin-top: 3em;
	width: 100%;
}

div.no-timeline-info
{
	width: 100%;
	text-align: center;
	font-size: 1em;
	background: #eee;
	width: 100%;
	padding: 1em;
	clear: both;
	margin-bottom: 1.5em;
}

table#timeline-info
{
	border: 0;
	width: 100%;
}

table#timeline-info th
{
	text-align: left;
}

table#timeline-info th,
table#timeline-info td
{
	border: none;
	font-size: 1.6em;
}

table#timeline-info tr
{
	border-bottom: 1px solid black;
}

table#timeline-info tr:first-child
{
	border-bottom: none;
}

table#timeline-info tr:last-child
{
	border-bottom: none;
}

.content-scroller-general
{
	height: 25em;
	overflow-y: auto;
	border: none;
	background: #eee;
	margin-bottom: 1em;
}

/************************************************************************************
MUUT HUOMAUTUSLAATIKOT, ESIM. PUUTTUVAT TIEDOTTAMISEN YHTEYSTIEDOT YMS.
*************************************************************************************/

div.notification-box
{
	width: 100%;
	background:pink;
	border:1px solid red;
	padding: 2em;
	margin: 0 auto 2em auto;
}

div.notification-box a:link,
div.notification-box a:visited,
a.text-link:link,
a.text-link:visited
{
	color: #0000A0;
	text-decoration: underline;
	font-weight: bold;
}

div.notification-box a:hover,
div.notification-box a:active,
a.text-link:hover,
a.text-link:active
{
	color: black;
}