@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,400');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');

body { background-color: #ffffff; background-image: url(images/bg.jpg); background-repeat: repeat-x; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-size: 1em; color: #222;}

a { outline: 0;}

div.wrapper {max-width: 1100px; margin: 10px auto; padding: 0; background-color: #fff; border: 10px solid #fff; }
div#container { width: 100%; margin: 0; padding: 0; background-color: #fff; }


div.header { width: 100%; padding: 0; margin: 0; position: relative;}
div.top { padding: 0; margin: 0; width: 100%; z-index: 1;}
div.top img { padding: 0; margin: 0; width: 100%!important; }

div.logo { padding: 0; margin: 0; width:45%; position: absolute; top: 30px; left: 5%; }
div.logo img { width:100%; height:auto;}
div.tarjouspyynto { width:auto; position: absolute; bottom: 20px; left: 5%;  margin: 0; padding: 15px 4%; opacity:0.95; background-color: #247fb8;  display: block; border-radius: 8px; text-decoration:none; }
div.tarjouspyynto:hover{  opacity:0.95; background-color: #86714e; -webkit-transition: background-color 1s; transition: background-color 1s;}
div.tarjouspyynto a:link, div.tarjouspyynto a:hover, div.tarjouspyynto a:visited  { font-size: 2.8em; line-height: 1.1em;  color:#fff; text-decoration: none;}

/*  bannerit ----------------------------------------*/


div.bannerit-wrap { width: 96%; margin: 0; padding: 0 2%; height: auto; display:block; text-align:center!important;}
div.bannerit { width: 100%!important; max-width: 980px!important; margin: 5px auto!important; padding: 5px 0; height: auto; display:block;}
div.bannerit img { padding: 0; margin: 0; width: 100%!important; height: auto; }


div.navi_top{ width:100%; margin:0 ;  padding: 0; height:35px!important; /*background-color: #eee; z-index: 20;*/}

img.right-pic { float:right; width: 180px; height: auto; margin: 15px 5px 10px 15px; opacity: 0.3; }

div.etu-left {	width: 45.5%; margin: 0 .5% 0 0; padding: 10px 2%; float:left; background-color: #eee; line-height: 1.5em;}
div.etu-right {	width: 45.5%; margin: 0 0 0 .5%; padding: 10px 2%; float:right; background-color: #eee; line-height: 1.5em;}
div.etu-wide {	width: 96%; margin: 5px 0; padding: 10px 2%; float:left; background-color: #eee; line-height: 1.5em;}
img.muuttopaikka-logo {float:right; padding: 0 0 0 4%;}

div.content { width: 98%; margin: 0 0 10px 0; padding: 0 1% 10px 1%; color: #474747; }
div.wide { width: 100%; padding: 0; margin: 0; clear:both;} 
div.wide-etu { width: 100%; padding: 0; margin: 0; clear:both; font-weight: .9em;} 

h1 {	font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; font-size: 1.8em; color: #494949;line-height: 1.2em; }
h2 {  font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; font-size: 1.35em; color: #247fb8; line-height: 1.1em; display: block; clear:both;}
h3 {   font-weight: 400; font-size: 1.2em; }

a.body:link, a.body:visited { color: #222; font-weight:600; text-decoration: underline; }
a.body:hover { text-decoration: none; }

a.cargo_company_www_link:link, a.cargo_company_www_link:visited { color: #247fb8; font-weight:600; text-decoration: underline; }
a.cargo_company_www_link:hover { text-decoration: none; }

a.bodylink:link, a.bodylink:visited { color: #fff; text-decoration: none; background-color: #247fb8;  border-radius: 2px; font-weight:bold; padding: 5px 10px;  text-transform:uppercase; font-size: .9em; margin: 0 10px 5px 0; display:block; float:left;}
a.bodylink:hover {color: #247fb8; background-color: transparent; text-decoration: underline;}
/*
a.menu_kuljetushallinta:link, a.menu_kuljetushallinta:visited { color: #378498; font-weight:bold; padding: 3px 10px; text-decoration: none; text-transform:uppercase; font-size: .9em; }
a.menu_kuljetushallinta:hover { color: #fff; text-decoration: none; background-color: #378498;}
*/


/*----------------------------------------------------------------------------------------*/
/*------s i s ä ä n  k i r j a u t u m i n e n  ------------------------------------------*/
div.sign-in { float:right; background-color: red; /*radius: 5px; padding: 10px;*/ visibility:hidden; height: 0;}
a.menu{}
a.red{}


/*----------------------------------------------------------------------------------------*/
/*------L Ä H E T Ä   T A R J O U S P Y Y N T Ö ------------------------------------------*/


div.form_field-customer {width: 100%; margin: 2px .5%; padding: 10px 2.2%; float:left;  border-radius: 8px; background-color: #d2e0e8; display:none;}


div.form-left, div.form-right { width: 44%; margin: 2px .5%; padding: 10px 2.2%; float:left;  background-image:url(images/box-bg.jpg); background-repeat: no-repeat;  border-radius:8px; border: 1px solid #e0e0e0; }

div.form_field { width: 100%; padding: 0; margin: 0; }
div.formtext { width: 100%;   padding: 0; margin: 0; }
div.form_field input.lomake { padding: 8px 2%; margin: 3px 0; width: 90%; border:1px solid #bbb; background-color: #eee; color: #333; font-size: .9em; font-weight: 600; border-radius: 6px;}
div.form_field input.lomake:focus { border:1px solid #247fb8;}
/*lyhyet kentät---------------------*/
div.form_field input#phone, div.form_field input#password,div.form_field input#password_check
{ padding: 8px 1%; width: 170px; }
div.form_field select { padding: 8px 2%; margin: 3px 0; width: 98%; border:1px solid #bbb; background-color: #eee; color: #333; font-size: .9em; font-weight: 600; border-radius: 6px;}
div.form_field select:focus { border:1px solid #247fb8;}

div.form_field select#cargo_length,
div.form_field select#cargo_width,
div.form_field select#cargo_height,
div.form_field select#cargo_weight { padding: 8px 1%; width: 170px; }

input#kunta_start_other, input#kunta_end_other  { padding: 8px 2%; margin: 3px 0; width: 60%; border:1px solid #bbb; background-color: #f7f9c2; color: #333; font-size: .9em; font-weight: 600; border-radius: 6px;}

div.form_field #start_datepicker, div.form_field #end_datepicker { padding: 8px 1%; margin: 3px 0; width: 170px; border:1px solid #bbb; background-color: #eee; color: #333; font-size: .9em; font-weight: 600; border-radius: 6px;}

div.form_field textarea { padding: 8px 2%; margin: 3px 0; width: 90%; border:1px solid #bbb; background-color: #eee; color: #333; font-size: .9em; font-weight: 600; border-radius: 6px; height: 65px;}

div.form_field #form_check-short { padding: 8px 1%; width: 80px; }

div.form_field input.send_button, div.form_field input.clear_button { border-radius: 6px; color: #fff; background-color: #247fb8;  font-size: .9em;  width: auto; padding: 12px 15px; margin: 5px 10px 10px 0; border:  1px solid #e9e9e9;}

div.form_field input.send_button:hover, div.form_field input.clear_button:hover {  -webkit-transition: background-color 1s; transition: background-color 1s; background-color: #333; color: #fff;  }

/* -- salasanan palauttaminen---*/
input#pw_rec_email { padding: 8px 2%; margin: 3px 0; width: 90%; border:1px solid #bbb; background-color: #eee; color: #333; font-size: .9em; font-weight: 600; border-radius: 6px;}
input#button { border-radius: 6px; color: #fff; background-color: #247fb8;  font-size: .9em;  width: auto; padding: 12px 15px; margin: 5px 10px 10px 0; border:  1px solid #e9e9e9;}

/* -- asiakkaan hallintasivu---*/

div.navi-hallinta { padding: 10px 0; display:block!important; width: 100%!important;}
a.menu_rahtihallinta:link, a.menu_rahtihallinta:visited { background-color: #707070; color: #fff; font-weight:bold; padding: 8px 15px; 
text-decoration: none; text-transform:uppercase; font-size: .9em; border-radius:5px;  margin: 0  10px 10px 0; float:left; display: block;   }
a.menu_rahtihallinta:hover { background-color: #ccc; color: #222; text-decoration: none; }

div.reg-customer { border: 1px solid #bbb; padding: 0 3%; border-radius: 8px; background-color: #f7f9c2;}

/* -- asiakkaan hallintasivu- omat tiedot--*/
div.rahti-hallinta-menu { padding: 10px 0; display:block!important; width: 100%!important;}
div.form-user-left{ width:44%;  float:left; margin: 0 0 15px 0; background-color: #ddd; border-radius: 8px; padding: 10px 3%;}
div.form-user-right{ width:40%; float:left; margin: 0 0 15px 4%; background-color: #ddd; border-radius: 8px; padding: 10px 3%;}

a.add_cargo_space_btn:link, a.add_cargo_space_btn:visited{ color: #247fb8; background-color: transparent; text-decoration: underline;  border-radius: 2px; font-weight:bold; padding: 3px 10px;  text-transform:uppercase; font-size: .9em; margin: 10px 0!important; display:block; width: 200px; }
a.add_cargo_space_btn:hover {color: #fff; text-decoration: none; background-color: #247fb8; }


div.contact_form { width: 65%; float: left;  margin: 0;}

div.clr {width: 100%; height: 10px; clear:both;}
div.clear {width: 100%; height: 10px; clear:both;}
span.info {color: #222; font-weight:600;}


a.menu:link, a.menu:visited { color: #378498; display: block; padding: 3px 0 3px 11px; text-decoration: none; text-transform:uppercase; font-size: .9em; background-image:url(images/arrow.png); background-repeat: no-repeat; }
a.menu:hover { color: #ffffff; text-decoration: none; background-color: #378498;}

a.red:link, a.red:visited { color:#C00; display: block; padding: 3px 0 3px 11px; text-decoration: none; text-transform:uppercase; font-size: .9em; background-image:url(images/arrow.png); background-repeat: no-repeat; }
a.red:hover { color: #ffffff; text-decoration: none; background-color: #378498;}



div.etutopwide { width: 92%; padding: 15px 4%; margin: 0 0 5px 0 ;  clear:both; background-color:#378498; text-align: center;} 
.etutopwide a:link, .etutopwide a:visited { font-family: 'Oswald', sans-serif; color: #fff; font-size: 2em; text-decoration: underline; text-transform: uppercase; letter-spacing: .1em;} 
.etutopwide a:hover { text-decoration: none;  } 


div.left {    width: 28.5%; margin: 0 .5% 10px 0; padding: 10px 2%; background-color: #e7e7d4; float: left;  color: #378498; display: block; min-height: 200px; }
div.center {  width: 29%; margin: 0 0 10px 0; padding: 10px 2%; background-color: #e7e7d4; float: left;  color: #378498; display: block; min-height: 200px; }
div.right {   width: 29.5%; margin: 0 0 10px .5%; padding: 10px 2%; background-color: #e7e7d4; float: right; color: #378498; display: block; min-height: 200px; }
div#wide_etu { width: 94%; padding: 10px 3%; font-size: .9em; clear:both;} 




div.footer {  width: 100%; color: #222; border-top: 1px dotted #222;  margin: 5px 0 10px 0; padding: 10px 0 0 0 ; font-size: 1em; text-align:center; display: block; clear:both; }

/*  bannerit ----------------------------------------*/
/*div#banneriright { width: 15%; min-width: 140px; margin: 0 0 10px 0; padding: 0; float:right; }
div#banneriright img { width: 140px; margin: 0 0 8px 0; padding: 0; }

div#banneritop { width: 100%; min-width: 100px; margin: 0 0 10px 0; padding: 0; }
div#banneritop img {  margin: 0; padding: 0; }*/




img#left { float:left; width: 40%; margin: 0 15px 0 0;}
img#right { float:right; width: 30%; margin: 0 0 0 15px;}
img#center { width: 90%; padding: 0 5%;}

/* kuljetus tarjouspyynnöt-----------------------------------------------------------------*/
div.tarj_header_date { width: 22.5%;  display: block; float:left; padding: 4px 1%; margin-right:.5%; font-weight: bold; text-transform:uppercase;  background-color:#247fb8; color: #fff; font-size: .9em;}
div.tarj_header_start { width: 22.5%; display: block; float:left; padding: 4px 1%; margin-right:.5%;  font-weight: bold; text-transform:uppercase;  background-color:#247fb8; color: #fff; font-size: .9em;}
div.tarj_header_destination { width: 22.5%; display: block; float:left; padding: 4px 1%;  margin-right:.5%;  font-weight: bold; text-transform:uppercase;  background-color:#247fb8; color: #fff; font-size: .9em;}
div.tarj_header_ajankohta { width: 23%; display: block; float:left; padding: 4px 1%; margin-right:0;  font-weight: bold; text-transform:uppercase;  background-color:#247fb8; color: #fff; font-size: .9em;}


div.tarj_cargo { width: 100%; margin: 2px 0; padding: 0; display:block; clear:both; }

div.tarj_date 			{ padding: 4px 1%; margin: 3px .5% 0 0; width: 22.5%; float:left; font-weight: bold; background-color:#ccc; color: #333; font-size: .9em;}	
div.tarj_cargo_wrapper { width: 75%; margin: 0; padding:  0 0 5px 0; float: right;}	

div.tarj_start 			{ width: 30.5%; display: block; padding: 4px 1%; margin: 3px .75% 0 0;	 	background-color:#ccc; float:left; font-weight: bold;color: #333; font-size: .9em;}		
div.tarj_destination 	{  width: 30.75%; display: block; padding: 4px 1%; margin: 3px .5% 0 0; 	background-color:#ccc; float:left; font-weight: bold;color: #333; font-size: .9em;}	
div.tarj_ajankohta		{ width: 31.5%; display: block; padding: 4px 1%; margin: 3px 0 0 0; 		background-color:#ccc; float:left; font-weight: bold;color: #333; font-size: .9em;}	

div.tarj_info 			{ display: block; padding: 4px 1%; margin: 3px 0 0 0; background-color:#ffffff; width: 97%; 	float:left;  }	
div.tarj_contact 			{ display: block; padding: 4px 1%; margin: 3px 0 0 0; background-color:#ffffff; width: 97%; 	float:left;  }	


ul { margin-left: -15px;}
li {list-style-type: value; font-weight: bold; color: #378498; font-size: .9em;}




div.kuljetushallinta_menu { padding: 10px 0; display:block!important; width: 100%!important;}

div.kuljetushallinta_menu a:link, div.kuljetushallinta_menu a:visited
{ background-color: #707070; color: #fff; font-weight:bold; padding: 8px 15px; text-decoration: none; text-transform:uppercase; font-size: .9em; 
border-radius:5px;  margin: 0  10px 10px 0; float:left; display: block;   }
div.kuljetushallinta_menu a:hover { background-color: #ccc; color: #222; text-decoration: none; }

/* uudet */
div.lista { width: 100%; display:block; margin: 20px 0; padding: 0;}
div.lista-rivi{ width: 100%; display:block; border-bottom: 1px solid #555;  padding: 5px 0; min-height: 35px;}

div.title-julkaistu{ width: 9%; display:block; float:left; font-weight:600; background-color: #eee; font-size: 1em; padding: 8px .5%;}
div.title-mista{ width: 16%; display:block; float:left; font-weight:600; background-color: #eee; font-size: 1em; padding: 8px .5%;}
div.title-mihin{ width: 16%; display:block; float:left; font-weight:600; background-color: #eee; font-size: 1em; padding: 8px .5%;}
div.title-ajankohta{ width: 19%; display:block; float:left; font-weight:600; background-color: #eee; font-size: 1em; padding: 8px .5%;}
div.title-sisalto{ width: 19%; display:block; float:left; font-weight:600; background-color: #eee; font-size: 1em; padding: 8px .5%;}
div.title-muokkaa{ width: 7%; display:block; float:left; font-weight:600; background-color: #eee; font-size: 1em; padding: 8px .5%;}
div.title-poista{ width: 7%; display:block; float:left; font-weight:600; background-color: #eee; font-size: 1em; padding: 8px .5%;}

div.julkaistu{ width: 9%; display:block; float:left; font-size: .85em; padding: 8px .5%;}
div.mista{ width: 16%; display:block; float:left;font-size: .85em; padding: 8px .5%;}
div.mihin{ width: 16%; display:block; float:left;font-size: .85em; padding: 8px .5%;}
div.ajankohta{ width: 19%; display:block; float:left;font-size: .85em; padding: 8px .5%;}
div.sisalto{ width: 19%; display:block; float:left;font-size: .85em; padding: 8px .5%;}
div.muokkaa{ width: 7%; display:block; float:left;font-size: .85em; padding: 8px .5%;}
div.poista{ width: 7%; display:block; float:left;font-size: .85em; padding: 8px .5%;}

/* vapaa tila------------------------------------------------------------------*/
div.header_date { width: 25%;  display: block; float:left; padding: 4px 1%; margin-right:.5%; font-weight: bold; text-transform:uppercase; background-color:#247fb8; color: #fff; }
div.header_start { width: 34%; display: block; float:left; padding: 4px 1%; margin-right:.5%;  font-weight: bold; text-transform:uppercase; background-color:#247fb8; color: #fff;}
div.header_destination { width: 34%; display: block; float:left; padding: 4px 1%; margin-right:0;  font-weight: bold; text-transform:uppercase; background-color:#247fb8; color: #fff;}

div.header_date, div.header_start, div.header_destination {font-size: .9em;}

div.cargo { width: 100%; margin: 2px 0; padding: 5px 0; display:block; clear:both; }
div.cargo_wrapper { width: 72.5%; margin: 0; padding:  0 0 5px 0; float: right;}	
div.info { display: block; padding: 10px 4%; margin: 3px 0 0 0; background-color:#eee; width: 92%; 	float:left; } 
div.info b { font-weight: bold; margin: 5px 0; font-style: italic; }
div.contact 		{ display: block; padding: 4px 1%; margin: 3px .5% 0 0; background-color:#ffffff; width: 72.5%;   float:left; border-right: 1px dotted #c3c3c3;}	
div.publicdate 		{ display: block; padding: 4px 1%; margin: 3px 0 0 0; 	background-color:#ffffff; width: 22%;  float: right;  }	

/* -- question answer --*/
div.date { display: block; padding: 4px 1%; margin: 3px .5% 0 0; float:left; font-weight: bold; width:  20%;}	
div.start { display: block; padding: 4px 1%; margin: 3px .5% 0 0; float:left; font-weight: bold; width: 37%;}		
div.destination { display: block;float:left; padding: 4px 1%; margin: 3px 0 0 0; font-weight: bold; width: 25%;}	


div.cargo, div.date, div.cargo_wrapper, div.start, div.destination, div.info, div.contact, div.publicdate {font-size: .9em; }


/* ------ question & answer ----------------------------------------------------------------------------------*/
.dhtmlgoodies_question {	padding: 3px 0; display:block; height: inherit; margin: 0 ; width: 100%; clear:both; 
	background-color: transparent; border:none; border-top: 1px dotted #888;}
.dhtmlgoodies_question:hover {	/*background-color:#eaeaea;*/ cursor: pointer; color: #000;}



.header-rivi-open { float: left; padding: 0 0 0 2%   ;  display: block; width: auto; }
.header-rivi-name, .header-rivi-name_pair { float: right; padding: 3px 0 3px 1%; display: block; width: 94%; border-radius: 5px;}
.header-rivi-name_pair { background-color: #E5E5E5; }

.dhtmlgoodies_answer { display: block; visibility:hidden; height: auto; background-color: transparent; width: 100%; clear:both;	position:relative; z-index: 9!important;}
.dhtmlgoodies_answer_content {	padding: 10px 0;	margin-bottom: 25px; background-color: transparent; 	 position:relative; z-index: 10!important;}

/* -- kuljetus yrityksen hallinta -- vapaa tila --*/

td {  font-size: .85em; border-bottom: 1px dotted #c2c2c2; }
td.title {font-weight: bold; text-transform:uppercase; background-color:#247fb8; color: #ffffff; font-size: .75em; text-align: center;}
/*
<h2>Ilmoitus vapaasta kuormatilasta</h2><a class="bodylink" href="kuljetus_hallinta.php?action=add_cargo_space">Lisää uusi ilmoitus</a><br><br>

<table width="100%"><tbody><tr><td class="title">Julkaistu</td><td class="title">Mistä</td><td class="title">Mihin</td><td class="title">Ajankohta</td><td class="title">Info</td><td class="title">Muokkaa</td><td class="title">Poista</td></tr><tr><td>05.06.2018</td><td>Alajärvi</td>  
											<td>Akaa</td>   
											<td>05.06.2018 - 09.06.2018</td>  
											<td>lisäinfo teksti</td><td><a href="/asiakkaat/rahtipaikka/kuljetus_hallinta.php?action=edit_cargo_space&amp;id=272">Muokkaa</a></td>  
												<td><a href="/asiakkaat/rahtipaikka/kuljetus_hallinta.php?action=delete_cargo_space&amp;id=272">Poista</a></td></tr></tbody></table>				<div class="clear"></div>
				</div>