@import "../../tyylit/palkkistyle.css";

* {
	margin: 0px;
	padding: 0px;
}

@font-face {
	font-family:	'ProximaNovaRegular';
	src:			url('ProximaNova/proximanova-reg-webfont.eot');
	src:			url('ProximaNova/proximanova-reg-webfont.eot?#iefix') format('embedded-opentype'),
					url('ProximaNova/proximanova-reg-webfont.woff') format('woff'),
					url('ProximaNova/proximanova-reg-webfont.ttf') format('truetype'),
					url('ProximaNova/proximanova-reg-webfont.svg#ProximaNovaRegular') format('svg');
	font-weight:	normal;
	font-style:		normal;
}

a {
	color:				#42976e;
	text-decoration:	none;
}

#mobiiliviesti {
	padding:	4px 10px;
	text-align:	center;
	background:	#FFFF99;
}

.painike {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 1em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.graafinappi {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 1em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.blue {
	color: #FFFFFF;
	border: solid 1px #318031;
	background: #47b846;
	background: -webkit-gradient(linear, left top, left bottom, from(#47b846), to(#328130));
	background: -moz-linear-gradient(top,  #47b846,  #328130);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#47b846', endColorstr='#328130');
}

.blue:hover {
	background: #318031;
	background: -webkit-gradient(linear, left top, left bottom, from(#318031), to(#276526));
	background: -moz-linear-gradient(top,  #318031,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#318031', endColorstr='#276526');
}

.blue:active {
	color: #47b846;
	background: -webkit-gradient(linear, left top, left bottom, from(#47b846), to(#328130));
	background: -moz-linear-gradient(top,  #47b846,  #328130);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#47b846', endColorstr='#328130');
}

.taulutyyli {
	margin:0;
	border-top:1px solid #000000;
	border-right:1px solid #000000;
	width:100%;
}

.taulutyyli th {
	background:#CCCCCC;
	margin:0;
	padding:4px;
	border-bottom:1px solid #000000;
	border-left:1px solid #000000;
	text-align:left;
}

.taulutyyli td {
	margin:0;
	padding:4px;
	border-bottom:1px solid #000000;
	border-left:1px solid #000000;
}

body {
	background: #FFF;
	font-family: Arial;
}

#page{
	text-align: left;
	margin-left: auto;
	margin-right: auto; 
	width: 1000px;
	background: white;
	border: solid white 5px;
	border-top: none;
}

#header, #content, #etusivuinfo, #footer, #etusivucontent, #valikko {
	padding-left: 50px;
	padding-right: 50px;
}

#header {
	padding-top: 50px;
	background: url(img/ylavihrea.png) repeat-x;
	padding-bottom: 30px;
}

#ylainfoboxi {
	color:#aaa; 
	line-height:18px; 
	font-size:14px;
	background: #FFF;
	padding:20px 30px;
}

#etusivuinfo {
	background: url(img/keskivihrea.png) repeat-x;
	color: #FFF;
	padding-top:35px;
	padding-bottom: 25px;
}

#etusivuinfo p {
	margin-bottom: 15px;
	width: 60%;
	text-align: justify;
}

#etusivucontent {
	background: url(img/sisaltovihrea.png) repeat-x;
	padding-top: 40px;
}

#naviborder {
	height:1px;
	background: url('../img/navi_background.png'); 
}

#top_navi a{
	color: gray;
	display: block;
	padding: 6px 14px 6px 14px;
	float: left;
	font-size: 14px;
	border-right: solid white 1px;
}

#top_navi a.cur{
	background: white;
	color: gray;
	display: block;
	padding: 6px 14px 6px 14px;
	float: left;
	font-size: 14px;
	border-right: solid white 1px;
}


#content_container p {
	padding: 5px 0px 5px 0px;
	font-size: 12px;
}

#right_content {
	float: right;
	width: 200px;
	font-family: arial;
	font-size: 12px;
}

#content .box {
	margin-bottom: 15px;
	font-size: 14px;
}

#content {
	min-width:		825px;
	padding-top:	40px;
	min-height:		300px;
}

#valikko li {
	list-style: none;
	float: left;
	padding-right: 15px;
}

#etusivusisalto h1, #content h1 {
	color: #42976e;
	font-size: 22px;
	margin-bottom: 15px;
}

#vasensisalto {
	float: left;
	width: 77%
}

#oikeasisalto {
	float: right;
	width: 20%;
}

#asiakkaille, #ammattilaisille {
	width: 28%;
	float: left;
	font-size: 14px;
	margin-right: 50px;
	margin-top: 30px;
}

#ajankohtaista {
	background: url(img/ajankohtaistabgvihrea.png) repeat-x;
	width: 25%;
	float: left;
	padding: 30px 40px;
	font-size: 14px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
}

#footer {
	margin-top: 20px;
	background: url(img/footerbg.png) repeat-x;
	padding-top: 30px;
	padding-bottom: 30px;
}

#footer p {
	float: left;
	font-size: 10px;
	color: #CCC;
	padding-left: 20px;
	padding-top: 35px;
}

input, select, textarea {
	padding:7px 5px;
	margin-bottom: 7px;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	border-top: 2px solid #42976e;
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	outline: none;
	-webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.2);
	box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

#content h2 {
	color: #42976e;
	font-size: 20px;
	margin-bottom: 10px;
}

#content h3 {
	color:			#42976e;
	font-size:		18px;
	margin-bottom:	7px;
}

#content p, #etusivucontent p {
	margin-bottom: 15px;
	line-height: 22px;
}

#content .hoitoohjelma {
	padding: 8px;
	background: #E1EAFF;
	margin-top: 2px;
}

#content table.tehtava_taulukko p {
	font-size: 16pt; color: #42976e;
	font-family: arial;
}

#content table.tehtava_taulukko h3 {
	font-size: 18pt; color: #42976e;
	font-family: arial;
}

#content table.kalenteri {
	background: #efefef;
	padding: 5px;
	width: 100%;
}

#content table.kalenteri th {
	width: 110px;
	color: gray;
}
#content table.kalenteri td {
	height: 70px;
	background: white url('../img/calendar_normal.png') repeat-x;
	background-position: bottom left;
}

#content table.kalenteri td:hover {
	height: 70px;
	background: white url('../img/calendar_yellow.png') repeat-x;
	background-position: bottom left;
}

#content table.kalenteri td.cur {
	height: 70px;
	background: white url('../img/calendar_green.png') repeat-x;
	background-position: bottom left;
	border: solid green 2px;
	font-weight: bold;
} 

#content table.kalenteri td .merkinta {
	font-size: 12px;
	border: solid #A5B5F8 1px;
	background: #DAE3F8;
	margin-bottom:1px;
}

#content table.kalenteri td.harmaa {
	background: #f1f6ff url('../img/calendar_grey.png') repeat-x;
	background-position: bottom left;
}

#content table.kalenteri td.harmaa a, #content table.kalenteri td.harmaa div {
	opacity: 0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */
}

#content table.kalenteri td .tehtava {
	font-size: 12px;
	border: solid orange 1px;
	background: #FEFFEA;
	margin-bottom:1px;
}

#content table.kalenteri td .tehtava_suorit {
	font-size: 12px;
	border: solid #9AE39D 1px;
	background:#EAF8DE;
	margin-bottom:1px;
}

#content table.kalenteri td .lisaa_merkinta {
	font-size: 14px;
	border: solid #CC99CC 1px;
	background:#CC99FF;
	margin-top:10px;
	cursor: pointer;
	font-weight:bold;
	padding:8px 0;
}

#content table.kalenteri td .lisaa_muistiinpano {
	font-size: 14px;
	border: solid #6699CC 1px;
	background:#99CCFF;
	margin-top:10px;
	cursor: pointer;
	font-weight:bold;
	padding:8px 0;
}

#content table.kalenteri td .mittari {
	font-size: 12px;
	border: solid #FF6666 1px;
	background: #FFCCCC;
}

#content table.kalenteri td .muistiinpano {
	font-size: 12px;
	border: solid #CCCC00 1px;
	background: #FFFF99;
	margin-bottom:1px;
}

#content table.kalenteri td .mittari_suorit {
	font-size: 12px;
	border: solid #9AA39D 1px;
	background:#AFF39D;
}

.selostus {
	background:		#efefef;
	padding:		5px;
	vertical-align:	top;
	border:			1px solid #bbc5d5;
	width:			500px;
}

.selostusOhje {
	background:white;
	padding:5px;
	vertical-align:top;
	border:1px solid #bbc5d5;
	width:820px;
}

.selostusLevea {
	background:#efefef;
	padding:5px;
	vertical-align:top;
	border:1px solid #bbc5d5;
	width:650px;
}

#tooltip {
	padding: 5px;
	background: #cad7e0;
	border: 1px solid #b2bdc3;
	opacity: 0.90;
	font-size:12px;
	text-align:left;
}

.ohjelinkki {
	background:		url('../img/help.png') left center no-repeat;
	padding-left:	20px !important;
	border-right:	0 !important;
}

#palautelomake textarea {
	width:	400px;
	height:	150px;
}

#right_content .box select {			width:				135px;		}
#content .box p {						font-size:			13px;		}
#content .box h1 {						font-size:			18px;		}
#right_content .box h2 {				font-size:			17px;		}
#content .box h3 {						font-size:			16px;		}
#valikko {								list-style:			none;		}
#right_content p {						font-family:		arial;		}
#footer img {							float:				left;		}
.lisaa_muistiinpano {					display:			none;		}
.clr {									clear:				both;		}
#content table.kalenteri td a {			color:				black;		}
#content h4, #content h5, #content h6 {	color:				#0e29a3;	}
a:hover {								text-decoration:	underline;	}
a img {									border:				0;			}
#mobiiliviesti a {						text-decoration:	underline;	}
#logo {									float:				left;		}
#ylalaatikko {							float:				right;		}
#valikko li:last-child {				padding-right:		0;			}
.clear {								clear:				both;		}
#content_container {					padding:			4px;		}
#top_navi {								background: url('../img/navi_background.png');	}
#content table.kalenteri td .lisaa_merkinta:hover {	background:#ddbcfe;	}
#content table.kalenteri td .lisaa_muistiinpano:hover {	background:#c8e3ff;	}

.palloDiv {
	float: left;
	width: 440px;
	margin-right: 20px;
	margin-bottom: 30px;
}

.pikkupalloGraafit {
	width: 340px;
	margin-left:20px;
}

.pikkupalloGraafiteksti {
	width:312px;
}

.palloOtsikko {
	font-weight: bold;
	margin-bottom: 10px;
	min-height: 36px;
}

.palloTeksti {
	margin-bottom: 5px;
}

.headerPalloTeksti {
	width:100%;
	max-width: 900px;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 3px solid #000;
	margin-bottom: 20px;
	padding-bottom: 4px;
	margin-top: 10px;
}

.palloValiOtsikko {
	width: 900px;
	font-size: 16px;
	font-weight: normal;
	border-bottom:1px solid #000;
	margin-bottom: 15px;
}

.palloSelite {
	font-size: 14px;
	color:#6e6e6e;
}

.palloGraafi {
	margin-bottom: 10px;
}

.valittuPikkupallo {
	
}

.printtilogo {
	display: none;
}

.snuolivasen {
	height: 30px;
	float: left;
}

.snuolioikea {
	height: 30px;
	float: right;
}

.skkkalenteri {
	margin: 0 auto;
	width: 300px;
}

.skkkalenteri td {
	text-align: center;
}

.skkkalenteri .kalenteririvi td {
	border-top: 1px solid #ccc;
	font-size: 12px;
	text-align: center;
	padding: 3px 5px;
}

.skkkalenteri .kkotsikko td {
	border-top: 1px solid #ccc;
	font-size: 14px;
	padding: 3px 5px;
}

.skkkalenteri .kalenteriotsikko td {
	text-align: left;
	font-size: 12px;
}

.skkkalenteri .viikonpaivat td {
	font-size: 10px;
}

.skkkalenteri .spaiva .numero {
	width: 20px;
	height: 18px;
	text-align: center;
	margin: 0 auto;
	padding-top: 2px;
	display: block;
}

.skkkalenteri .sviikonloppu .numero {
	width: 20px;
	height: 18px;
	color:#CCC;
	text-align: center;
	margin: 0 auto;
	padding-top: 2px;
	display: block;
}

.skkkalenteri .stanaan .numero {
	width: 20px;
	height: 18px;
	color: #FFF;
	background: #000;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	text-align: center;
	padding-top: 2px;
	margin: 0 auto;
	display: block;
}

.svalinnat {
	width: 300px;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 10px;
}

.svalintaboxi {
	background: #8dc104;
	width: 300px;
	float: none;
	color:#FFF;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	cursor: pointer;
	margin-bottom: 5px;
}

.svalintaboxi select {
	width: 300px;
	height: 34px;
	margin: 0px;
	float: none;
	background: transparent;
	color: #FFF;
	border: 0px !important;
	font-size: 14px;
}

.svalintaboxi select option {
	background: #FFF;
	color:#000;
}

.svalintanappi {
	color:#FFF;
	border-top:0;
	cursor: pointer;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	width: 300px;
	padding:12px 0;
	text-align: center;
	background: #366de0;
	text-transform: uppercase;
	font-size: 12px;
}

.svalinta1 {
	margin-right: 15px;
}
.svalinta2 {
	margin-right: 15px;
}
.svalinta3 {}


.stehtava {
	margin: 0 auto 10px auto;
	width: 350px;
}

.sviesti {
	width: 300px;
	height: auto;
	margin: 0 auto 20px auto;
	font-family: Arial;
	position: relative;
}

.sviesti .spvm {
	text-align: center;
	color:#999;
	font-size: 12px;
	margin-bottom: 5px;
}

.svalmentajaviesti .savatar,
.sasiakasviesti .savatar {
	width: 50px;
	height: 50px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	text-align: center;
	line-height: 50px;
	font-size: 30px;
	color:#FFF;
}

.svalmentajaviesti .savatar {
	background: #8dc104;
	margin-right: 10px;
	margin-left:0;
}

.sasiakasviesti .savatar {
	background: #366de0;
	margin-right: 0;
	margin-left:10px;
}

.svalmentajaviesti .sviestiteksti {
	background: #8dc104;
}

.sasiakasviesti .sviestiteksti {
	background: #366de0;
}

.svalmentajaviesti .nuoli {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	
	border-right:10px solid #8dc104; 
	margin-bottom: 18px;
}

.sasiakasviesti .nuoli {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	
	border-left:10px solid #366de0; 
	margin-bottom: 18px;
}

.sviesti strong {
	font-weight: 800;
	text-transform: uppercase;
}

.svalmentajaviesti .sviestiteksti,
.sasiakasviesti .sviestiteksti {
	width: 200px;
	color:#FFF;
	text-align: left;
	font-size: 14px;
	padding: 15px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

.tavoitepallo {
	width: 300px;
	margin:0 auto 30px auto;
}

.tavoitepallo .tpylatxt {
	text-transform: uppercase;
	font-size: 20px;
	padding-top:90px;
}

.tavoitepallo .tptavoite {
	font-size: 80px;
	line-height: 80px;
	position: relative;
}

.tavoitepallo .tptavoite .tpprosentti {
	font-size: 45px;
	line-height: 40px;
	display: inline;
	position: absolute;
}

.tavoitepallo .tpalatxt {
	text-transform: uppercase;
	font-size: 20px;
}

/****************************************************************
 *
 * CSS Percentage Circle
 * Based on CSS provided by Andre Firchow
 *
*****************************************************************/

.prog-circle .slice {
  position : absolute;
  width    : 1em;
  height   : 1em;
  clip     : rect(0em, 1em, 1em, 0.5em);
}
.prog-circle .slice.clipauto {
  clip : rect(auto, auto, auto, auto);
}
.prog-circle .fill, .prog-circle .bar {
  position              : absolute;
  border                : 0.08em solid #8dc104;
  width                 : 0.84em;
  height                : 0.84em;
  clip                  : rect(0em, .5em, 1em, 0em);
  -webkit-border-radius : 50%;
  -moz-border-radius    : 50%;
  -ms-border-radius     : 50%;
  -o-border-radius      : 50%;
  border-radius         : 50%;
  -webkit-transform     : rotate(20deg);
  -moz-transform        : rotate(20deg);
  -ms-transform         : rotate(20deg);
  -o-transform          : rotate(20deg);
  transform             : rotate(20deg);
}
.prog-circle {
  position              : relative;
  width                 : 1em;
  height                : 1em;
  -webkit-border-radius : 50%;
  -moz-border-radius    : 50%;
  -ms-border-radius     : 50%;
  -o-border-radius      : 50%;
  border-radius         : 50%;
  float                 : left;
  margin                : 0 0.1em 0.1em 0;
  background-color      : #001335;
}
.prog-circle .percenttext {
  position                           : absolute;
  width                              : 100%;
  height                             : 1em;
  z-index                            : 1;
  margin                             : auto;
  top                                : 0;
  left                               : 0;
  right                              : 0;
  bottom                             : 0;
  display                            : block;
  text-align                         : center;
  white-space                        : nowrap;
  -webkit-transition-duration        : 0.2s;
  -moz-transition-duration           : 0.2s;
  -o-transition-duration             : 0.2s;
  transition-duration                : 0.2s;
  -webkit-transition-timing-function : ease-out;
  -moz-transition-timing-function    : ease-out;
  -o-transition-timing-function      : ease-out;
  transition-timing-function         : ease-out;
}
.prog-circle .after {
  position              : absolute;
  top                   : 0.08em;
  left                  : 0.08em;
  display               : block;
  content               : " ";
  -webkit-border-radius : 50%;
  -moz-border-radius    : 50%;
  -ms-border-radius     : 50%;
  -o-border-radius      : 50%;
  border-radius         : 50%;
  background-color      : #FFFFFF;
  width                 : 0.84em;
  height                : 0.84em;
}

.tehtavapalkkialku {
	display: block;
	height: 40px;
	width: 18px;
	background: url(../ulkoasu/palkkialku.png) no-repeat;
	float: left;
}

.tehtavapalkkiloppu {
	display: block;
	height: 40px;
	width: 33px;
	background: url(../ulkoasu/palkkiloppu.png) no-repeat;
	float: left;
}

.tehtavapalkkisis {
	display: block;
	padding: 0px 10px 0px 0px;
	text-transform: uppercase;
	text-align: left;
	width: 289px;
	font-size:14px;
	height: 40px;
	background: url(../ulkoasu/palkkisis.png) repeat-x;
	float: left;
	overflow: hidden;
	line-height: 40px;
}

.tehtavapalkkikesken {
	display: block;
	height: 40px;
	width: 33px;
	background: url(../ulkoasu/palkkikesken.png) no-repeat;
	float: left;
}

.tehtavapalkkikelt {
	display: block;
	height: 40px;
	width: 33px;
	background: url(../ulkoasu/palkkikelt.png) no-repeat;
	float: left;
}

.tehtavapalkkivalmis {
	display: block;
	height: 40px;
	width: 33px;
	background: url(../ulkoasu/palkkivalmis.png) no-repeat;
	float: left;
}


.snappi {
	color:#FFF;
	background: #37465d;
	padding: 10px 20px;
	text-transform: uppercase;
	font-size: 12px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border-top: 0;
	cursor: pointer;
}

#etusivuloginnappi:hover, .snappi:hover {
	background: #051a37;
	text-decoration: none;
	border-top: 0;
}

.snappi {
	outline: none;
}

#evidenssiPalaute {
	width:920px;
	margin:0 auto;
}

#evidenssilogo img {
	position:absolute; 
	top:63px; 
	left:6%;
	height: 100px;
}

@media screen and (max-width: 650px) {
	#evidenssilogo img {
		position:static;
		width: 100px;
		height: 100px;
		margin:0 auto 0 auto;
		top: auto;
		left: auto;
	}

	#evidenssilogo {
		margin:-10px auto 0 auto; 
		display:block; 
		width:100px;
		height: 100px;
	}
}

#evidenssiPalaute * {
	text-align: left;
}