.icon_open { background-image: url(../images/icon_plus.png); }
.icon_close { background-image: url(../images/icon_minus.png); }
.icon_user { background-image: url(../images/icon_user.png); }
.icon_edit { background-image: url(../images/icon_edit.png); }
.icon_add { background-image: url(../images/icon_add.gif); }
.icon_delete { background-image: url(../images/icon_delete.png); color: #dd0000; }
.icon_logout { background-image: url(../images/icon_logout.png); }
.icon_close-white { background-image: url(../images/icon_close-white.png); }
.icon_matkalasku { background-image: url(../images/icon_matkalasku.png); }
.icon_update { background-image: url(../images/icon_update.png); }

h1 {
	background: #555555;
	color: #ffffff;
	padding: 1px 8px;
	margin: 0 0 15px 0;
	font-size: 125%;
	text-align: left;
	font-weight: normal;
	border-radius: 10px;
}

h2, h3 {
	font-size: 120%;
	margin: 0 0 10px 0;
}

a {
	color: #00669B;
}

a:hover {
	text-decoration: none;
}

a.tulosta {
	padding: 20px 0 20px 20px;
	float: left;
	clear: left;
	background: url(../images/icon_tulosta.gif) no-repeat 0 50%;
}

.left {
	float: left;
}

.clear_left {
	clear: left;
}

.hide {
	display: none !important;
}

.error {
	color: #FF0000 !important;
}

.ok_txt {
	color: #239600 !important;
}

.nowrap {
	white-space: nowrap;
}

.alert {
	display: block;
	border: 1px solid rgba(0,0,0,0.2);
	background-color: #f0f0f0;
	padding: 10px;
	border-radius: 5px;
	margin: 1rem 0 2rem 0;
}

.alert-warning {
	border: 1px solid rgba(0,0,0,0.2);
	background-color: rgba(255,0,0,0.1)
}

#container {
	width: 1000px;
	margin: 0 auto 0 auto;
	text-align: left;
}

#header {
	height: 90px;
}

#main {
	clear: both;
}

#raport-header {
	margin-bottom: 20px;
	background: #f0f0f0;
	padding: 10px 10px 10px 10px;
	-moz-border-radius: 10px;
}

#palsta {
	width: 280px;
	float: right;
	margin-top: 25px;
	clear: right;
}

#palsta h1 {
	margin-top: 15px;
	clear: both;
}

#palsta #myform {
	width: 100%;
}

form {
	margin: 0;
}

form .osio {
	clear: right;
	padding-top: 8px;
}

form .osio label {
	float: left;
	font-weight: bold;
}

form .osio p.notice {
    font-size: 95%;
    color: #777777;
    float: right;
    clear: right;
}

.form_matkalasku .osio label {
	font-weight: 500 !important;
	font-size: 95%;
}

.form_matkalasku input, .form_matkalasku select {
	width: 160px;
}

.form_matkalasku .osio.checkbox {
	margin-bottom: 10px;
}

.form_matkalasku .osio.checkbox input {
	width: auto;
	float: none;
}

.form_matkalasku .osio.checkbox label {
	float: none;
}

.osio_klo select {
	width: 75px;
}

form .osio select, form .osio #info, form .osio input, .osio span {
	float: right;
	margin: 0 0 0 5px;
}

form .osio input.check {
	float: none;
	margin-top: 3px;
}

form .osio_time input {
	display: inline;
	width: 100px;
}

form .osio_time span {
	float: right;	

}

#raportti_alue {
	clear: both;
}

#raportti_alue input {
	border: none;
	background: none;
	font-size: 12px;
}

#raportti {
	border-spacing: 0;
	border-collapse: collapse;
	font-size: 95%;
}

#raportti td {
	border-right: 1px solid #E4E4E4;
	text-align: center;
	background: #FFFFFF;
	height: 20px;
}

.normi_raportti td {
	min-width: 30px;
}

.levea_raportti td {
	min-width: 60px;
}

#raportti tr.tr2 input {
	border: 1px solid #F2F2F2;
}

#raportti tr.tr2 td {
	background: #F2F2F2;
}

#raportti TD.nyt {
	background: #F5AFAF !important;
}

#raportti th {
	color: #399800;
	border-right: 1px solid #E4E4E4;
	line-height: 1.2em;
	padding-bottom: 4px;
	text-align: center;
	font-size: 95%;
	padding: 2px 3px;
	vertical-align: middle;
}

#raportti TD.yhteensa {
	border-top: 2px solid #000000;
	font-weight: bold;
}

#raportti TD.tarkkuus {
	text-align: left;
	padding-left: 5px;
	width: 90px !important;
}

#raportti TD.nolla {
	color: #B3B3B3;
}

#raportti TH.pv_summa {
	width: 30px !important;
}

#raportti TD.pv_summa {
	border-left: 2px solid #000000;
	font-weight: bold;
	width: 30px !important;
}

#raportti td .edit, #raportti td .add {
	height: 20px;
}

#raportti td .info {
	color: #ac7500;
}

#raportti td .edit:hover, #raportti td .add:hover {
	background-color: #e0e0e0;
	cursor: cell;
}

#raportti tr.inssit td {
    border: 0 none;
    padding-top: 5px;
}

#raportti .edit-box {
	position: absolute;
	z-index: 100;
	padding: 5px 10px;
	line-height: 22px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #555555;
	text-align: left;
	width: 550px;
}

#raportti .edit-box:hover {
	cursor:default;
}

#raportti .edit-box h3 {
	color: #ffffff;
	margin-bottom: 5px;
}

#raportti .edit-box label {
	padding-top: 5px;
	display: block;
	width: 100%;
	color: #ffffff;
}

#raportti .edit-box .input_txt  {
	border: none;
	background: #ffffff;
}

#raportti .edit-box input.hours {
	width: 40px;	
}

#raportti .edit-box textarea {
	width: 200px;
	height: 75px;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 100%;
	border: none;
	background: #ffffff;
}

#raportti .edit-box .submit {
	border: none;
	background: #93DF00;
	color: #000000;
	margin-bottom: 10px;
	font-size: 125%;
	text-transform: uppercase;
	font-weight: bold;
	padding: 4px 8px;
	-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;
}

#raportti .edit-box .submit:hover {
	cursor: pointer;
	opacity: 0.85;
}

#raportti .edit-box .inssi .new {
    background: #fced00;
    color: #000000;
    display: inline-block;
    line-height: 1.6;
    margin-top: 10px;
    padding: 1px 8px;
    text-decoration: none;
	-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
}

#raportti .edit-box .inssi .new:hover {
	opacity: 0.85;
}

#raportti .edit-box .inssi .row {
    clear: both;
}

#raportti .edit-box .inssi .row label {
	width: auto;
	float: left;
	margin-right: 10px;
}

#raportti .edit-box .inssi .remove-row {
	float: right;
	color: #ffffff;
	font-size: 14px;
	position: relative;
	top: 30px;
}

#raportti .edit-box .inssi .remove-row:hover {
	opacity: 0.7;
}

#raportti .edit-box .inssi .row label input, #raportti .edit-box .inssi .row label select {
	display: block;
}

#raportti .edit-box .inssi input[name*=name] {
	width: 145px;
}

#uusi_merkinta {
	width: 280px;
	float: right;
}

#raportti td input.new {
	background: #AFFF7F;
}

#logo {
	float: left;
	position: relative;
	top: -15px;
}

#navi {
	width: 790px;
	float: right;
}

#navi a {
	color: #FFFFFF;
	padding-left: 10px;
	text-decoration: none;
	float: right;
	margin-top: 14px;
	margin-left: 10px;
	font-size: 108%;
	font-family: Arial, sans-serif;
}

#navi a:hover, #navi a:active, #navi a:focus {
	text-decoration: underline;
	color: #FFFFFF;
}

#tab-nav {
	position: relative;
	top: -29px;

        border-bottom: 1px solid #dfdfdf;

        height: 30px;
}

#tab-nav li {
	float: right;
	display: block;
	margin-right: -1px;
	padding: 0 !important;
	background: transparent !important;
}

#tab-nav li a {
	display: block;
	padding: 0 10px;
    line-height: 30px;
    height: 29px;
	text-decoration: none;
	color: #000000;
	font-size: 105%;
	background: #f7f7f7;
	border: 1px solid #dfdfdf;
	border-bottom: 0 !important;
    -moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	-webkit-border-radius-topleft: 8px;
	-webkit-border-radius-topright: 8px;
    border-radius-topleft: 8px;
    border-radius-topright: 8px;
}

#tab-nav li a:hover {
	background: #ffffff;
}

#tab-nav li.act a {
	color: #CA0823;
	background: #ffffff;
	padding: 0 10px 0 10px;
    height: 30px;
    font-weight: bold;
}

#myform {
	float: left;
	width: 400px;
}

.highlight, .highlight td, .highlight th {
	background-color: #c3ffae !important;
}

#calback {
	width: 280px;
	float: right;
}

#kalenteri .tyhja {
	}

#kalenteri .normi {
	color: #FFFFFF;
	border: 1px solid #222222;
	width: 40px;
}

#kalenteri .tanaan {
	background-color: #F38989;
	color: #FFFFFF;
}

#kalenteri .viikonpv {
	background: #B9CBDD;
	border: 1px solid #D9D9D9;
}

#kalenteri .kk_v {
	font-weight: bold;
}

#kalenteri .header {
	background: #0460AE;
	font-weight: bold;
	color: #FFFFFF;
}

#kalenteri .header td {
	padding: 2px 4px;
}

#kalenteri .header a {
	display: inline;
}

#kalenteri {
	border: 2px solid #000000;
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
	background-color: #D9D9D9;
}

#kalenteri tda {
	display: block;
	color: #000000;
	text-decoration: none;
	line-height: 25px;
}

#kalenteri tr.rivi {
	background: #F8DF3A;
}

#taulukko {
	border-spacing: 0;
	border-collapse: collapse;
	font-size: 95%;
}

#taulukko tr.uusi td {
	background: #F0F0F0;
}

#taulukko tr.uusi td input {
	background: #F0F0F0;
	border-color: #F0F0F0;
}

#taulukko th {
	background: #555555;
	border: 1px solid #555555;
	border-bottom-color: #C0C0C0;
	color: #FFFFFF;
	padding: 2px 10px;
}

#taulukko td {
	border: 1px solid #C0C0C0;
	padding: 4px 5px;
}

#taulukko td input {
	width: 125px;
	display: block;
	margin: auto;
	float: left;
}

#taulukko tr input {
	border: 1px solid #FFFFFF;
}

#taulukko tr SELECT {
	border: 1px solid #c0c0c0;
}

#taulukko td input.wide {
	width: 200px;
}

#taulukko td input.narrow {
	width: 25px;
}

#taulukko td input.medium {
	width: 70px;
}

#taulukko td input.white_border {
	border-color: #FFFFFF;
}

.arrow {
	padding: 0 !important;
}

.arrow a {
	text-decoration: none;
}

div.lasku_tilasto {
	width: 220px;
	float: left;
	margin: 0 10px 1.5em 0;
	padding: 6px 0 6px 0;
	border: 1px solid #c0c0c0;
}

div.lasku_tilasto h2, div.lasku_tilasto div {
	padding-left: 10px;
}

a#nayta_laskut {
	clear: left;
	display: block;
	width: auto;
	float: left;
	margin-bottom: 15px;
	padding-left: 20px;
	background: url(../images/icon_plus.gif) no-repeat 0 50%;
	white-space: nowrap;
}

#lasku_lista {
	clear: left;
}


/* Taulukot */

table {
	border-collapse: collapse;
	border-spacing: 0;
	text-align: left;
}

.table {
	width: 100%;
	margin-bottom: 20px;
	font-size: 1.0em;
}

.table thead th {
	font-weight: bold;
	font-size: 1.1em;
	border-bottom: 1px solid #ddd;
	padding: 5px 8px;
}

.table {
	border-bottom: 1px solid #ddd;
}

.table tbody tr td {
	background: #f0f0f0;
}

.table tbody td, .table tbody th {
	padding: 5px 8px;
	line-height: 1.3em;
	border-bottom: 1px solid #aaaaaa;
}

.table tbody tr.act td {
	background: #AAAAAA;
}

.table .add_new td {
	background-color: #7DBC75 !important;
}

.table_table {
	margin: 0;
	font-size: 90%;
}

.table_table thead th {
	padding: 2px 4px;
	background: #AAAAAa !important;
}

.table_table tbody td, .table_table tbody th {
	padding: 2px 4px;
	background: #AAAAAa !important;
	border-bottom: 1px solid #888888;
}

.table_table thead th {
	border-bottom: 1px solid #888888;
}

#t_tuntipankki td.tp {
	white-space: nowrap;	
}

#t_tuntipankki td.tp .total {
	background-color: #c0c0c0;
	padding: 0 2px;
	color: #222222;
}

#t_tuntipankki td.tp .paid {
	background-color: #3f901c;
	color: #ffffff;
	padding: 0 2px;
}
#t_tuntipankki td.tp .paid small {
	color: #ffffff;	
}

#t_tehokkuus td a {
	text-decoration: none;
	color: #000000;
}

#t_tehokkuus td a:hover {
	color: #00669b;
}

#lisat_wrapper .row {
	color: #ffffff;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 1px 5px;
    margin: 5px 0;
}

#lisat_wrapper .row .remove {
	float: right;
	padding-left: 5px;
	color: #ff0000;
}

#palkka_yhteensa {
	background: #ffffff;
	color: #000000;
    border-radius: 4px;
    padding: 0 5px;
    margin: 5px 0;
    font-weight: bold;
    margin-top: 10px;
}

.lisa_table td {
	padding: 2px 4px;
}

.lisa_table th {
	padding: 2px 4px;
}

#liukumat {
	max-width: 400px;
	margin-bottom: 2rem;
}

@media (min-width: 600px) {
	#liukumat {
		width: 50%;
	}
}

#liukumat_total {
	font-weight: bold;
	font-size: 110%;
}

#liukumat_by_month {
	display: none;
}

#liukumat_by_month thead th {
	font-size: 1em;
	border-bottom: 1px solid #000000;
	text-align: right;
}

#liukumat_by_month td {
	text-align: right;
}

#liukumat_total {
	background: #00cc55;
	color: #ffffff;
	display: inline-block;
	border-radius: 8px;
	line-height: 26px;
	padding: 0 6px;
	text-shadow: rgba(0,0,0,0.25);
}

#liukumat_total:hover {
	background: #00e066;
	cursor: pointer;
}