/* tyojono.css */

body, form, h1 {
	margin: 0;
	padding: 0;
}

body {
	background-color: #FFF;
}

a, a:focus {
	outline: 0;
}

a img {
	border-style: none;
}

body {
	font: 11px Verdana, Geneva, sans-serif;
	color: #303030;
}

p {
	margin: 4px;
}

h1 {
	font-family: Arial, sans-serif;
	font-size: 20px;
	padding: 10px 12px;
	color: #FFF;
	font-weight: normal;
}

h1 small {
	color: #999;
	font-size: 75%;
	text-shadow: none;
}

svg {
	vertical-align: middle;
}

.piiloteksti {
	color: red;
}

#header_container {
	width: 100%;
	position: fixed;
	top: 0;
	background: #333;
	z-index: 10;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#header {
	float: left;
}

#kello {
	position: absolute;
	right: 7px;
	bottom: 5px;
	color: #B8B8B8;
}

#content {
	margin: 65px 10px 0 10px;
}

#loading {
	text-align: center;
	padding: 200px 0;
}

#tyolistaus {
	margin-top: 20px;
}

#taulukko {
	line-height: 1.5em;
	width: 100%;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-collapse: collapse;
	margin-bottom: 30px;
}

#taulukko th {
	background-color: #777;
	color: #FFF;
	padding: 4px;
	text-align: left;
}

#taulukko td {
	padding: 2px 4px;
	border-bottom: 1px solid #CCC;
}

#taulukko tr:hover {
	background-color: #EEE;
	-webkit-transition: .4s;
    transition: .4s;
}

#taulukko td:hover {
	cursor: pointer;
}

#taulukko .th1, #taulukko .td1 { /* Työnro */
	width: 50px;
	font-weight: bold;
}

#taulukko .th2, #taulukko .td2 { /* Päiväys / tila */
	width: 130px;
}

#taulukko .th3, #taulukko .td3 { /* Asiakas */
	width: 180px;
}

#taulukko .th4, #taulukko .td4 { /* Laite */
	width: 170px;
}

#taulukko .td4 { /* Laite */
	padding: 4px 0 4px 30px;
	background-repeat: no-repeat;
	background-position: left center;
}

#taulukko .th5, #taulukko .td5 { /* Työseloste */
	width: auto;
}

#taulukko .th6, #taulukko .td6 { /* Tekijä */
	width: 60px;
}

tr.r1 {
	background-color: #F9F9F9;
}

tr.r2 {
	background-color: #FFF;
}

tr.valmis {
	border-left: 4px solid #7A9E52;
	border-right: 4px solid #7A9E52;
}

span.edit {
	background: url('../kuvat/pencil-12x12.png') no-repeat left center;
	padding: 0 0 0 15px;
}

span.t0 {
	background: url('../kuvat/plus-circle-outline-12x12.png') no-repeat left center;
	padding: 0 0 0 15px;
}

span.vanha {
	color: red;
}

span.vanha:after {
	content: ' !!';
}

span.t1 {
	background: url('../kuvat/checkbox-marked-circle-outline-12x12.png') no-repeat left center;
	color: #7A9E52;
	padding: 0 0 0 15px;
}

span.t2 {
	background: url('../kuvat/t2.png') no-repeat left center;
	color: #C0504D;
	padding: 0 0 0 15px;
}

span.t3 {
	background: url('../kuvat/t3.png') no-repeat left center;
	padding: 0 0 0 15px;
}

span.t4 {
	background: url('../kuvat/t4.png') no-repeat left center;
	color: #724D12;
	padding: 0 0 0 15px;
}

span.t5 {
	background: url('../kuvat/t5.png') no-repeat left center;
	color: #0076A3;
	padding: 0 0 0 15px;
}

span.t6 {
background: url('../kuvat/t6.png') no-repeat left center;
color: #FFA500;
padding: 0 0 0 15px;
}

span.t7 {
background: url('../kuvat/t7.png') no-repeat left center;
color: #0000FF;
padding: 0 0 0 15px;
}

#taulukko tr.kiire {
border-left: 4px solid #C31D1D;
border-right: 4px solid #C31D1D;
}

.lisatieto {
vertical-align: middle;
display: inline-block;
margin: 2px 5px 2px 2px;
padding: 1px 5px 1px 5px;
border: 1px solid #aaa;
border-radius: 0.30em;
background-color: #EEE;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #EEE));
background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #EEE 100%);
background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #EEE 100%);
background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #EEE 100%);
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #EEE 100%);
background-repeat: repeat-x;
background-clip: padding-box;
color: #333;
}

.lisatieto span, .lisatieto img {
vertical-align: middle;
}

#tilat, #hakutulos {
float: left;
clear: both;
}

#tilat span.valittu a {
background-color: #519AC9;
border: 1px solid #519AC9;
color: #FFF;
}

#tilat a#kiire, #tilat a#kiire:active, #tilat a#kiire:visited, #tilat a#kiire:link {
color: #B60B0B;
background-color: #FFEAA8;
border: 1px solid #FFC237;
}

#tilat a#kiire:hover {
background-color: #FFD477;
}

#tilat span.valittu a#kiire {
background-color: #FFC237;
}
 
#laskuri {
clear: right;
float: right;
}

div#arkistot {
float: left;
clear: both;
}

.highlight {
background: yellow;
font-weight: bold;
}

/* Input, Select, Option, Label */

input[type=text], textarea {
	padding: 3px;
	border: 1px solid #BBB;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #000;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

input, select, textarea {
	border-radius: 0.30em;
}

select {
	padding: 2px 0;
	border: 1px solid #BBB;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #000;
}

select[disabled] {
	background: #EEE;
}

option[selected] {
	color: red;
}

input:focus, select:focus, textarea:focus {
	border: 1px solid #4D90FE;
}

/* Placeholder */

input[type=text]::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color: #848484;
}
input[type=text]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #848484;
	opacity: 1;
}
input[type=text]::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #848484;
	opacity: 1;
}
input[type=text]:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #848484;
}

input[type=text].required::-webkit-input-placeholder:before {
  content: '*';
  color: red;
  vertical-align: top;
}

input[type=text].required:-moz-placeholder:after:before {
  content: '*';
  color: red;
  vertical-align: top;
}

input[type=text].required::-moz-placeholder:after:before {
  content: '*';
  color: red;
  vertical-align: top;
}

input[type=text].required:-ms-input-placeholder:after:before {
  content: '*';
  color: red;
  vertical-align: top;
}

/* Linkit */

a:active, a:visited, a:link {
	font-family: Verdana, Geneva, sans-serif;
	color: #4B7AA6;
	text-decoration: none;
}

a:hover {
	font-family: Verdana, Geneva, sans-serif;
	color: #4B7AA6;
	text-decoration: underline;
}

/* Valikko */

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
    float: left;
    text-align: center;
}

#menu li a {
	float: left;
	display: block;
	font-family: Verdana, Arial;
	font-size: 13px;
	color: #B8B8B8;
	text-decoration: none;
	margin: 0;
	padding: 14px 16px;
}

#menu li.selected {
	background: #607D8B;
}

#menu li.selected a {
	color: #FFF;
}

#menu a#logout {
	background-color: #FF7F81;
	color: #FFF;
}

#menu a#logout:hover {
	background-color: #B71C1C;
}

#menu a:hover {
	color: #FFF;
}

#menu li a:hover:not(.selected) {
	background: #5F5F5F;
}

li#hakupalkki {
	margin: 2px 5px 1px;
	float: right;
}

#hakukentta {
	height: 22px;
	width: 250px;
	vertical-align: middle;
	font-size: 12px;
	background-color: #EEE;
    border: 1px solid #CCC;
	border-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	padding-right: 26px;
}

#hakupainike {
	position: absolute;
	right: 4px;
	width: 26px;
	height: 22px;
	vertical-align: middle;
	border: 1px solid #CCC;
	border-top-right-radius: 0.30em;
	border-bottom-right-radius: 0.30em;
	background: #FDFDF8 url('../kuvat/magnify.png') 50% 50% no-repeat;
	cursor: pointer;
}

#hakupainike:hover {
	background-color: #dff4ff;
}

ul#menubutton {
	display: none;
}

ul#menubutton a {
	padding: 8px 10px;
}

#menu a svg path {
	fill: #B8B8B8;
}

#menu a:hover svg path {
	fill: #FFF;
}

/* Painikkeet */

.buttons {
	padding: 2px 0;
}

.buttons a, .buttons button {
	margin: 0 4px 2px 0;
	background-color: #FDFDF8;
	border: 1px solid #bec5c2;
	font-family: Arial, Geneva, sans-serif;
	font-size: 11px;
	line-height: 130%;
	text-decoration: none;
	font-weight: bold;
	color: #565656;
	cursor: pointer;
	padding: 6px;
}

.buttons button {
	width: auto;
	overflow: visible;
}

.buttons button > img, .buttons button > span {
	vertical-align: middle;
}

.buttons button:hover, .buttons a:hover {
	background-color: #dff4ff;
	border: 1px solid #c2e1ef;
	color: #336699;
}

button.positive, .buttons a.positive{
	color: #529214;
}

.buttons a.positive:hover, button.positive:hover{
	background-color: #E6EFC2;
	border: 1px solid #C6D880;
	color: #529214;
}

.buttons a.positive:active {
	background-color: #529214;
	border: 1px solid #529214;
	color: #fff;
}

.buttons a.negative, button.negative {
	color: #d12f19;
}

.buttons a.negative:hover, button.negative:hover {
	background: #fbe3e4;
	border: 1px solid #fbc2c4;
	color: #d12f19;
}

.buttons a.negative:active {
	background-color: #d12f19;
	border: 1px solid #d12f19;
	color: #fff;
}

.buttons button[disabled] {
	background: #fbe3e4;
	border: 1px solid #fbc2c4;
	color: #A0A0A0;
	cursor: not-allowed;
}

.buttons button[disabled]:hover {
	color: #A0A0A0 !important;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0
}

/* TinyMCE */

div.mce-toolbar div.mce-container-body {
text-align: center;
}

/* Työnmuokkausform */

.box_header, .box {
	max-width: 800px;
	min-width: 600px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing : border-box;
}

.box_header {
	margin: 20px auto 0;
	background-color: #777;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
	padding: 4px 12px;
	border-top-left-radius: 0.30em;
	border-top-right-radius: 0.30em;
}

.box {
	margin: auto;
	background-color: #FFF;
	border-left: 2px solid #888;
	border-right: 2px solid #888;
	border-bottom: 2px solid #888;
	padding: 6px;
	line-height: 1.2em;
	border-bottom-left-radius: 0.30em;
	border-bottom-right-radius: 0.30em;
}

.box fieldset {
	border: none;
	padding: 4px;
	margin: 0;
	clear: left;
}

.box fieldset legend {
	font-weight: bold;
}

.box label, .box input[type=text], .box input[type=checkbox] {
	padding: 3px 4px;
	margin: 3px 0;
	vertical-align: middle;
}

.box input[type=text] {
	width: 100%;
}

.box select {
	margin: 3px 0;
	vertical-align: middle;
}

.box .vasen, .box .oikea {
	width: 50%;
	float: left;
	padding: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing : border-box;
}

.box label {
	font-weight: bold;
	vertical-align: middle;
	text-align: right;
	display: inline-block;
	width: 80px;
}

.box input#nimi {
	padding-right: 25px;
}

.box button.haku {
	display: none;
	height: 21px;
	margin-left: -25px;
    width: 22px;
	vertical-align: middle;
    border: 0;
	background: url('../kuvat/magnify.png') 50% 50% no-repeat;
	cursor: pointer;
}

/* jQuery validation */

.pakollinen {
	margin: 0 0 0 2px;
	color: red;
}

.box label.error {
	width: 100%;
	display: inline-block;
	padding: 0 0 4px 0;
	text-align: left;
	font-weight: normal;
	color: red;
}

input.error, select.error {
	border-color: red;
}

/* Noty */

.noty_text {
	font-family: Arial, Verdana;
	font-size: 13px;
}

/* Mobiililaitteet */

@media (max-width: 600px)
{
	h1 {
		font-size: 160%;
	}
	
	p {
		margin: 0;
	}
	
	#header_container {
		position: absolute;
	}
	
	#kello {
		display: none;
	}
	
	#menu a {
		font-family: Arial, Geneva, sans-serif;
		/*font-size: 120%;*/
		float: left;
		/*padding: 5px 16px;*/
	}
	
  #content {
		margin: 100px 2px 0 2px !important;
	}
	
  #tilat a {
	display: inline-block;
  }
	
  #laskuri {
    float: left;
    margin: 2px 0;
  }
	
  .box_header {
     margin: 120px 0 0 0;
  }
	
  .box_header, .box {
    width: 100%;
	min-width: 0;
  }
  
  .box .vasen, .box .oikea {
    width: 100%;
  }
	
  .box label {
    display: block;
    width: auto;
    text-align: left;
	padding: 3px 0;
  }

  label.error {
		margin: 0;
  }
	
  div.tinymce {
    display: inline-block;
    padding: 0;
    margin: 4px 0;
  }
	
  input.check-with-label {
    width: 20px !important;
  }
	
	table, thead, tbody, th, td, tr {
		display: block;
	}

	#taulukko thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	#taulukko tr { border: 1px solid #ccc; }

	#taulukko td {
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding: 2px 2px 2px 25%;
	}

	#taulukko td:before {
		position: absolute;
		top: 3px;
		left: 3px;
		padding-right: 10px;
		white-space: nowrap;
	}
	
	#taulukko .th1, #taulukko .td1, #taulukko .th2, #taulukko .td2, #taulukko .th3, #taulukko .td3, #taulukko .th4, #taulukko .td4, #taulukko .th5, #taulukko .td5, #taulukko .th6, #taulukko .td6 {
		width: auto;
  }
	
	#taulukko .td4 {
		background: none !important;
		padding: 2px 2px 2px 25% !important;
	}
	
	#taulukko td:nth-of-type(1):before { content: "Työnumero"; }
	#taulukko td:nth-of-type(2):before { content: "Lisätty / tila"; }
	#taulukko td:nth-of-type(3):before { content: "Asiakas"; }
	#taulukko td:nth-of-type(4):before { content: "Laite"; }
	#taulukko td:nth-of-type(5):before { content: "Työseloste"; }
	#taulukko td:nth-of-type(6):before { content: "Tekijä"; }
}

@media only screen and (max-width: 480px) {
	#header {
		float: none;
	}
	#menu ul#mainmenu {
		display: none;
		height: auto;
	}
	#mainmenu li, #mainmenu a {
		width: 100%;
	}
	ul#menubutton {
		display: inline-block;
		float: right;
	}
	li#hakupalkki {
		float: none !important;
		margin-bottom: 5px;
	}
	#hakukentta {
		width: 100% !important;
	}
}