/* --- typography --- */
html {font-size:100.01%;}
body {background: #34abff url('../img/bg-body-bigtop.jpg') left top repeat-x;}  /* bg-body-foto.jpg */
body {
	height: 100%;
	text-align: center;
	font-size:75%;
	color:#222;
	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 { font-size:1.7em; line-height:1;margin-bottom:0.5em;}
h2 { font-size:1.333em; line-height:1;margin-bottom:0.5em;font-weight: bold;}
h3 { font-size:1.333em; line-height:1;margin-bottom:0.5em;font-weight: bold;}
h4 { font-size:12px; line-height:1.25;margin-bottom:0.3em; font-weight: bold;}
h5 { font-size:1em; line-height:1.4;font-weight:bold;margin-bottom:1em; }
h6 { font-size:1em; line-height:1.4;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin:0;}
p, ul, ol {margin:0 0 1em; line-height:1.4em;}
em {font-style: normal;}
input, textarea, select, option { font-family: Verdana, Helvetica Sans-Serif;}
input[type=text] {font-size: 1em; padding: 2px; border: solid 1px #b6b6b6; border-bottom-color: #d6d6d6; border-top-color: #888888; margin:1px 0px;}
a {	text-decoration: underline;	color: #0075C8;}
a[name] {	text-decoration: none;	color: #111111;}
a:hover {	color: #0B466B;}
label {	cursor: default; }
select, option, textarea { font-size: 1em; }
ul li { margin-left:2em;}
hr { display:block; background: #ddd; height:2px; border: none; display: block; clear:both; margin: 1em 0;}

/* --- ui helpers --- */

.br { height: 1em;clear: both;}
.doubleBr {	height: 2em;clear: both;}
.bold {	font-weight: bold;}
.plain { font-weight: normal;}
.quiet { color: #777777;}
.textCenter { text-align: center;}
.textRight,
.num { text-align: right;}
.sum { text-align: right;font-weight: bold;}
td.num, td.sum, th.num, th.sum { padding-right: 8px;}
.fright {	float: right;}
.fleft {	float: left;}
.fleft {	float: left;}
.indent { padding-left: 1.5em; margin:0;}
.smallprint {font-size:0.9em;}
.paddingBottomXpx {padding-bottom:67px !important;}
.bottomXpx {bottom:-55px !important; }
.textRed {color: red;}

/* --- clearing floats -- */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0;}
.clearfix { display: inline-block;}
* html .clearfix {	height: 1%;}
.clearfix {	display: block;}

/* --------- general framework blocks -------- */


.wrapper {
	width: 100%;
	min-width: 960px;
	text-align: center;
}
.container {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}
.logo,
.opInfo,
.user,
.leftSide,
.midSide,
.rightSide,
.contentArea,
.contentAreaWide,
.rightBannerArea {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
	text-align:left;
}
.contentBlock {
	padding: 20px;
	background: #ffffff;
}
.contentBoxRounded,
.tabbedBoxRounded {
	margin-bottom: 1em;
}
/* --- buttons --- */

.btnBlue {
	float: left;
	display: block;
	height: 30px;
}
.btnBlue a {
	float: left;
	display: block;
	height: 20px;
	padding: 6px 11px 4px 16px;
	font-size: 14px;
	line-height: 14px;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none !important;
}
.btnBlue a {	background: transparent url("../img/btn-blue.png") no-repeat left top; }
.btnBlue .end {	float: left; display: block; height: 30px; width:6px;  background: transparent url("../img/btn-blue.png") no-repeat right top; }

.btnBlueSmall,
.btnGrey,
.btnGreen,
.btnOrange {
	float: left;
	display: block;
	height: 25px;
}

.btnBlueSmall a,
.btnGrey a,
.btnGreen a,
.btnOrange a {
	float: left;
	font-size: 12px;
	line-height: 12px;
	color: #111111;
	height: 16px;
	padding: 5px 9px 4px 15px;
	font-weight: bold;
	text-decoration: none !important;
}
.btnBlueSmall a {	background: transparent url("../img/btn_blue_s.gif") no-repeat left top;}
.btnGrey a {	background: transparent url("../img/btn_grey.gif") no-repeat left top;}
.btnGreen a {	background: transparent url("../img/btn_green.gif") no-repeat left top;}
.btnOrange a {	background: transparent url("../img/btn_orange.gif") no-repeat left top;}

.btnBlueSmall .end { float: left; display: block; height: 25px; width:6px; background: transparent url("../img/btn_blue_s.gif") no-repeat right top;}
.btnGrey .end {	float: left; display: block; height: 25px; width:6px; background: transparent url("../img/btn_grey.gif") no-repeat right top;}
.btnGreen .end { float: left; display: block; height: 25px; width:6px; background: transparent url("../img/btn_green.gif") no-repeat right top;}
.btnOrange .end { float: left; display: block; height: 25px; width:6px; background: transparent url("../img/btn_orange.gif") no-repeat right top;}

.btnLight:hover a,
.btnBlue:hover a,
.btnBlueSmall:hover a,
.btnGrey:hover a,
.btnGreen:hover a,
.btnOrange:hover a{
	background-position: left bottom;
}
.btnLight:hover .end,
.btnBlue:hover .end,
.btnBlueSmall:hover .end,
.btnGrey:hover .end,
.btnGreen:hover .end,
.btnOrange:hover .end {background-position: right bottom;}

/* extra large */
.btnGreenLarge {
	float: left;
	display: block;
	height: 47px;
	padding-left: 7px;
}
.btnGreenLarge {	background: transparent url("../img/btn-green-large.png") no-repeat left top;}
.btnGreenLarge a {
	float: left;
	display: block;
	height: 30px;
	padding: 8px 25px 9px 10px;
	font-size: 12px;
	line-height: 14px;
	color: #000;
	font-weight: normal;
	text-decoration: none !important;
	position: relative; left: 7px;
}
.btnGreenLarge a {	background: transparent url("../img/btn-green-large.png") no-repeat right top;}
.btnGreenLarge a .icon-tick { position:relative; left: -7px; top: 3px;}

.buttonStrip { clear: both; height: 32px;margin-top:1em;}
.buttonStrip .left { float:left;}
.buttonStrip .right { float:right;}
.buttonStrip .left .btnBlue,
.buttonStrip .left .btnBlueSmall,
.buttonStrip .left .btnGrey,
.buttonStrip .left .btnGreen { margin-right: 15px;}
.buttonStrip .right .btnBlue,
.buttonStrip .right .btnBlueSmall,
.buttonStrip .right .btnGrey,
.buttonStrip .right .btnGreen { margin-left: 15px;}

.actionBar { clear:both; min-height:1em;}
td.actionBar {float:none; white-space: nowrap;}
.pageTools { float:right; height:1.5em;}

.actionBar .btnLeft { display: block; float: left; }
.actionBar .btnRight { display: block; float: right; text-align:left; }
.actionBar a,
.actionBar em { display: block; float: left; padding:1px 4px 0px 24px; }
.actionBar .btnLeft a { margin-right:15px;}
.actionBar .btnRight a { margin-left:15px;}
.actionBar a.add { background: transparent url('../img/icons-sprite.png') 0px -235px no-repeat;}
.actionBar a.add:hover { background: transparent url('../img/icons-sprite.png') 0px -255px no-repeat;}
.actionBar a.edit { background: transparent url('../img/icons-sprite.png') 0px 0px no-repeat;}
.actionBar a.edit:hover { background: transparent url('../img/icons-sprite.png') 0px -19px no-repeat;}
.actionBar a.remove { background: transparent url('../img/icons-sprite.png') 0px -38px no-repeat; color: #eb5a23;}
.actionBar a.remove:hover { background: transparent url('../img/icons-sprite.png') 0px -57px no-repeat; color: #E42E1A;}
.actionBar a.return { background: transparent url('../img/icons-sprite.png') 5px -467px no-repeat; color: #eb5a23;}
.actionBar a.return:hover { background: transparent url('../img/icons-sprite.png') 5px -485px no-repeat; color: #E42E1A;}
.actionBar a.view { background: transparent url('../img/icons-sprite.png') 0px -275px no-repeat;}
.actionBar a.view:hover { background: transparent url('../img/icons-sprite.png') 0px -294px no-repeat;}
.actionBar a.viewless { background: transparent url('../img/icons-sprite.png') 0px -393px no-repeat;}
.actionBar a.viewless:hover { background: transparent url('../img/icons-sprite.png') 0px -413px no-repeat;}
.actionBar a.email { background: transparent url('../img/icons-sprite.png') 0px -314px no-repeat;}
.actionBar a.email:hover { background: transparent url('../img/icons-sprite.png') 0px -333px no-repeat;}
.actionBar a.print { background: transparent url('../img/icons-sprite.png') 0px -353px no-repeat;}
.actionBar a.print:hover { background: transparent url('../img/icons-sprite.png') 0px -372px no-repeat;}
.actionBar a.lamb, a.lamb { background: transparent url('../img/icons-sprite.png') 0px -435px no-repeat; padding: 6px 0px 6px 40px;}
.actionBar a.lamb:hover, a.lamb:hover { }
.actionBar a.back { background: transparent; padding: 2px;}
.actionBar a.back:hover { }

a.removeIcon { display: block; float: left; width: 20px; height: 19px; background: transparent url('../img/icons-sprite.png') 0px -38px no-repeat; text-indent:-9999px;}
a.removeIcon:hover { background: transparent url('../img/icons-sprite.png') 0px -57px no-repeat;}
/* --- rounded corners 5px white on blue --- */
/* 
.rc {display:block;}
.rc *{  display:block;  height:1px;  overflow:hidden;  font-size:.01em;  background:#ffffff; }
.rc1{  margin-left:3px;  margin-right:3px;  padding-left:1px;  padding-right:1px;  border-left:1px solid #8bcfff;  border-right:1px solid #8bcfff;  background:#cceaff;}
.rc2{  margin-left:1px;  margin-right:1px;  padding-right:1px;  padding-left:1px;  border-left:1px solid #48b3ff;  border-right:1px solid #48b3ff;  background:#d8efff;}
.rc3{  margin-left:1px;  margin-right:1px;  border-left:1px solid #d8efff;  border-right:1px solid #d8efff;}
.rc4{  border-left:1px solid #8bcfff;  border-right:1px solid #8bcfff;}
.rc5{  border-left:1px solid #cceaff;  border-right:1px solid #cceaff;}
.rcfg{  background:#ffffff;  padding: 15px 20px;  }
 */

/* --- rounded corners 5px white on lightblue ---*/
.rc{display:block;}
.rc *{  display:block;  height:1px;  overflow:hidden;  font-size:.01em;  background:#ffffff;}
.rc1{  margin-left:3px;  margin-right:3px;  padding-left:1px;  padding-right:1px;  border-left:1px solid #c7e9ff;  border-right:1px solid #c7e9ff;  background:#e6f5ff;}
.rc2{  margin-left:1px;  margin-right:1px;  padding-right:1px;  padding-left:1px;  border-left:1px solid #a7dcff;  border-right:1px solid #a7dcff;  background:#ecf7ff;}
.rc3{  margin-left:1px;  margin-right:1px;  border-left:1px solid #ecf7ff;  border-right:1px solid #ecf7ff;}
.rc4{  border-left:1px solid #c7e9ff;  border-right:1px solid #c7e9ff;}
.rc5{  border-left:1px solid #e6f5ff;  border-right:1px solid #e6f5ff;}
.rcfg{  background:#ffffff; padding: 15px 20px;}



/* darker blue on blue */
.bc{display:block}
.bc *{  display:block;  height:1px;  overflow:hidden;  font-size:.01em;  background:#0075C8;}
.bc1{  margin-left:3px;  margin-right:3px;  padding-left:1px;  padding-right:1px;  border-left:1px solid #1d93e7;  border-right:1px solid #1d93e7;  background:#0d82d5;}
.bc2{  margin-left:1px;  margin-right:1px;  padding-right:1px;  padding-left:1px;  border-left:1px solid #2ea5f9;  border-right:1px solid #2ea5f9;  background:#097fd2;}
.bc3{  margin-left:1px;  margin-right:1px;  border-left:1px solid #097fd2;  border-right:1px solid #097fd2;}
.bc4{  border-left:1px solid #1d93e7;  border-right:1px solid #1d93e7;}
.bc5{  border-left:1px solid #0d82d5;  border-right:1px solid #0d82d5;}
.bcfg{  background:#0075C8;}

/* form / data grid system */
.row { display: block; clear:both; margin:0; margin-bottom: 0.5em; line-height:1.2em;}
.row:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0;}

.grid, .grid2, .grid4, .grid6, .grid8, .grid10, .grid12, .grid14, .grid16, .grid18, .grid20, .grid22, .grid24, .grid26, .grid28, .grid30, .grid32, .grid34 {
	display:block;
	float: left;
	position: relative;
	margin-right: 5px;
	overflow: hidden;
	}
.grid2 { width:18px;margin-right: 2px;}
.grid4 { width:35px;}
.grid6 { width:55px;}
.grid8 { width:75px;}
.grid10 { width:95px;}
.grid12 { width:115px;}
.grid14 { width:135px;}
.grid16 { width:155px;}
.grid18 { width:175px;}
.grid20 { width:195px;}
.grid22 { width:215px;}
.grid24 { width:235px;}
.grid26 { width:255px;}
.grid28 { width:275px;}
.grid30 { width:295px;}
.grid32 { width:315px;}
.grid34 { width:335px;}

.dodge2 { margin-left: 20px}
.dodge4 { margin-left: 40px}
.dodge6 { margin-left: 60px}
.dodge8 { margin-left: 80px}
.dodge10 { margin-left: 100px}
.dodge12 { margin-left: 120px}
.dodge14 { margin-left: 140px}
.dodge16 { margin-left: 160px}
.dodge18 { margin-left: 180px}
.dodge20 { margin-left: 200px}
.dodge22 { margin-left: 220px}
/* inputs inside */
.grid2 input[type=text] { width:12px;}
.grid4 input[type=text] { width:29px;}
.grid6 input[type=text] { width:49px;}
.grid8 input[type=text] { width:69px;}
.grid10 input[type=text] { width:89px;}
.grid12 input[type=text] { width:109px;}
.grid14 input[type=text] { width:129px;}
.grid16 input[type=text] { width:149px;}
.grid18 input[type=text] { width:169px;}
.grid20 input[type=text] { width:189px;}
.grid22 input[type=text] { width:209px;}
.grid24 input[type=text] { width:229px;}
.grid26 input[type=text] { width:249px;}
.grid28 input[type=text] { width:269px;}
.grid30 input[type=text] { width:289px;}
.grid32 input[type=text] { width:309px;}
.grid34 input[type=text] { width:329px;}

.form label {
	padding:1px 10px 1px 3px;
	text-align: left;
	display: block;
	line-height: 1.6em;
}
.form label.check {
	padding:1px 5px 1px 5px;
	text-align: left;
	line-height:1.3em;
	position:relative;
	padding-left:24px;
}
.form label.check input[type=checkbox],
.form label.check input[type=radio] { position:absolute; left:1px; top:1px;}


.form label.delight {
	padding:3px 10px 3px 3px;
	text-align: left;
	background: #eeeeee;
	-moz-border-radius:3px;
	border-radius:3px;
}
.form label.highlight { background: #DFFFD7 !important; }
.form .icon-ask { float:right;}
.form .data {font-weight: bold;	line-height: 1.6em;}
.form p.title {font-weight: bold; padding-top:1em; clear:left;}
.error {color: #cc0000;}
.okey {color: #289900;}
.tip {color: #666;}
/* ---------------- */

/* DATEPICKER For the details, see: http://flowplayer.org/tools/dateinput/index.html#skinning */
/* the input field */
.date_original {  /* not used here */
	background: #DFFFD7;
	border:1px solid #99CC33;
	font-size:14px; font-weight: bold;
	padding:5px;
	text-align:center;
	width:160px;
	-moz-border-radius:3px;
	border-radius:3px;
}
.date {
	font-size:1px; height:1px;
	visibility: hidden;
}
/* calendar root element */
#calroot {
	/* place on top of other elements. set a higher value if nessessary */
	z-index:10000;
	
	margin-top:-1px;
	width:198px;
	padding:2px;
	background-color:#eee;
	font-size:11px;
	border:1px solid #ccc;
	
	-moz-border-radius:5px;
	border-radius:5px;
	
/*	-moz-box-shadow: 0 0 15px #666;
	-webkit-box-shadow: 0 0 15px #666;	*/
}


/* head. contains title, prev/next month controls and possible month/year selectors */
#calhead {	
	padding:2px 0;
	height:22px;
	background: #fff;
} 

#caltitle {
	font-size:14px;
	color:#0150D1;	
	float:left;
	text-align:center;
	width:155px;
	line-height:20px;
	text-shadow:0 1px 0 #ddd;
}

#calnext, #calprev {
	display:block;
	width:20px;
	height:20px;
	background:transparent url('../img/icon-prev.gif') no-repeat scroll center center;
	float:left;
	cursor:pointer;
}

#calnext {
	background-image:url('../img/icon-next.gif');
	float:right;
}

#calprev.caldisabled, #calnext.caldisabled {
	visibility:hidden;	
}

/* year/month selector */
#caltitle select {
	font-size:10px;	
}

/* names of the days */
#caldays {
	height:14px;
	border-bottom:1px solid #ddd;
}

#caldays span {
	display:block;
	float:left;
	width:28px;
	text-align:center;
}

/* container for weeks */
#calweeks {
	background-color:#ddd;
	margin-top:4px;
}

/* single week */
.calweek {
	clear:left;
	height:22px;
}

/* single day */
.calweek a {
	display:block;
	float:left;
	width:26px;
	height:20px;
	text-decoration:none;
	font-size:11px;
	margin-left:2px;
	text-align:center;
	line-height:20px;
	color:#fff;
	background: #0088CD;
	-moz-border-radius:3px;
	border-radius:3px; 		
} 

/* different states */
.calweek a:hover, .calfocus {
	background-color:#ddd;
}

/* sunday */
a.calsun {
	color:red;		
}

/* offmonth day */
a.caloff {
	background: #83BFDD;
	color:#eee;		
}

a.caloff:hover {
	background-color:rgb(245, 245, 250);		
}


/* unselecteble day */
a.caldisabled {
	background-color:#efefef !important;
	color:#aaa	!important;
	cursor:default;
}

/* current day */
#calcurrent {
	background-color:#45942C;
	color:#fff;
}

/* today */
#caltoday {
	background-color:#333;
	color:#fff;
}



/* ---------------- */
.logo {	width:220px; }
.logo .title {
	background: transparent url('../img/tuule-logo-s.png') 18px 14px no-repeat;
	display: block;
	height: 110px;
	width: 190px;
	text-indent: -999em;
	font-size: 0px;
}

.opInfo { width: 490px; position:relative; }
.opInfo .contentBoxRounded { height: 94px; overflow:hidden; margin: 20px;}
.opInfo .opInfoNumber { position:absolute; bottom: 20px; right:20px;}
.opInfo .opInfoNumber strong {font-size: 1.2em;color: #0085cd;}
.opInfo p, .opInfo h3, .opInfo h4, .opInfo h5 {color: #000000;}
.opInfo .hot p, .opInfo .hot h3, .opInfo .hot h4, .opInfo .hot h5  { color: #D60000;}
.user {	width:220px; position: relative; z-index: 2;}
.user p,
.user h4 { padding:0 0 0 20px; text-align:right; margin:0; clear:both;}
.user .langLinks { font-weight: bold; margin-top: 10px; }
.user .basket {margin: 0.8em 0; height:23px;}
.user .basket a { float:right; display: block; background: transparent url('../img/icon-basket.gif') left top no-repeat; text-decoration: none; font-size:12px; font-weight: bold; padding: 4px 0px 4px 36px; }
.user .basket a:hover { background: transparent url('../img/icon-basket.gif') left bottom no-repeat; }
.user p .btn {float:right;}
.user .loginPanel { position: absolute; right: -10px; top:68px; z-index: 99;}
.user .loginPanel .form p {padding-bottom: 8px; padding-left:10px;text-align: left;}

.leftSide {	width:200px;}
.midSide {	width:550px;}
.rightSide {	width:200px;}
.contentArea {	width:530px;}
.contentAreaWide {	width:740px;}
.contentAreaArchive
{
  width:850px;
  margin-left: auto;
  margin-right: auto;
}


.frontArea {
	margin-left: auto;
	margin-right: auto;
	width: 970px;
	height: 460px;
	background: transparent url('../img/bg-frontarea.png') no-repeat;
	position: relative;
}

.frontArea .frontMenu {
	position: absolute;
	bottom:0px;
	left:10px;
	height:50px;
	max-width:950px;
	margin:0;
}

.frontArea .frontMenu li {
	cursor:pointer;
	float:left;
	font-weight:normal;
	list-style-type:none;
	text-align:center;
	margin:0;
	padding:0;
}
.frontArea .frontMenu li a { display:block; text-decoration:none;}
.frontArea .frontMenu li a em {
	background: #e1f0fa url('../img/bg-frontarea-btn3.png') repeat-x;
	display:block;
	float:left;
	width: 230px;
	height:32px;
	font-weight:bold;
	font-style: normal;
	font-size: 1.1em;
	line-height:1em;
	padding-top:18px;
	color: #0B466B;
	text-decoration:none;
	text-align: center;
}
.frontArea .frontMenu li a:hover em { background:#a3d1ec url('../img/bg-frontarea-btn3-hov.png') repeat-x;}
.frontArea .frontMenu li a.current em { background: #065d99 url('../img/bg-frontarea-btn3-act.png') repeat-x; cursor: default; color:#fff;}
.frontArea .frontMenu li a .a {	width:5px; height:50px; float:left; background: transparent url('../img/bg-frontarea-a-btn.png') repeat-x; }
.frontArea .frontMenu li a:hover .a { background: transparent url('../img/bg-frontarea-a-btn-hov.png') repeat-x; }
.frontArea .frontMenu li a.current .a {background: transparent url('../img/bg-frontarea-a-btn-act.png') repeat-x; }
.frontArea .frontMenu li a .o {	width:5px; height:50px; float:left; background: transparent url('../img/bg-frontarea-o-btn.png') repeat-x; }
.frontArea .frontMenu li a:hover .o { background: transparent url('../img/bg-frontarea-o-btn-hov.png') repeat-x; }
.frontArea .frontMenu li a.current .o {	background: transparent url('../img/bg-frontarea-o-btn-act.png') repeat-x; }

.frontArea .frontMenu li.ticket a em { width:240px;}
.frontArea .frontMenu li.scedule a em {}
.frontArea .frontMenu li.client a em {}
.frontArea .frontMenu li.company a em {width:240px;}

.frontArea .frontMenu li.disabled em {
    width:230px; height:50px; float:left; background: transparent url('../img/bg-frontarea-btn3.png') repeat-x; cursor: default;
}

.frontArea .frontMenu li.disabled .o {
    width:5px; height:50px; float:left; background: transparent url('../img/bg-frontarea-o-btn.png') repeat-x !important; 
}


.frontArea .frontPanels {
	position:relative;
/*	left:20px;
	top:12px;*/
	height: 410px;
	width:970px;
	z-index:1;
}
.frontArea .frontAreaTicket  {	}
.frontArea .frontAreaScedule  {	}
.frontArea .frontAreaClient  {	}
.frontArea .frontAreaCompany  {	}
.frontArea .frontPanels .foto { position:absolute; top:45px; left:270px; z-index:1;}
.frontArea .frontPanels .frontContent,
.user .loginPanel .frontContent { width: 290px; 	padding:20px 25px 0px 25px; background: transparent url('../img/bg-frontarea-form.png') left top no-repeat; position:relative; z-index:11;}
.frontArea .frontPanels .frontContentBot,
.user .loginPanel .frontContentBot { width: 340px; height: 20px;background: transparent url('../img/bg-frontarea-form.png') left bottom no-repeat;position:relative; z-index:11;}
.frontArea .frontPanels .form,
.user .loginPanel .form {
	width:290px;
	z-index: 99; 
	margin: 0px;
	text-align: left;
	background: #ffffff;
}
.frontArea .frontPanels .form label {background: transparent; }
.frontArea .form p {}
.frontArea .form .bigLink {  margin:0; padding:5px 0px;}
.frontArea .form .bigLink a { display: block; font-size: 1.2em; text-decoration: none; border-top: solid 1px #666; padding: 0.5em 0.1em; }

#map {	height:180px;	width:290px;	overflow:hidden; position:relative;}
#map img {position: absolute;}

.bannerArea {
	margin-left: auto;
	margin-right: auto;
	width: 730px;
	margin-top:10px;
	margin-bottom: 10px;
}
.rightBannerArea {
	width: 200px;
	text-align: right;
/*	background: transparent url('../img/bg-white-transp-40.png') ;*/
	padding: 0em;
}
.bannerItem {
	text-align: center;
}

/* news */

.newsTeaser { margin-bottom: 1em;}
.newsTeaser p { margin:0px;}
.newsDate { color:#888;}

/* -- FOOTER -- */
.footer {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2em;
	width: 950px;
	text-align:left;
}
.footer .content {
	padding: 10px 20px 0px 20px;
	color: #ffffff;
	}
.footer hr { margin-bottom:0; height:1px; background: #71C4FF;}
.footer .section {
	width: 190px;
	float: left;
	padding:1px 20px 0px 19px;
	margin: 20px 10px 20px 0px;
	border-left: solid 1px #71C4FF;
}
.footer .section.first {border: none; padding-left:20px;}
.footer .section.last {margin-right:0px;}
.footer .section h4,
.footer .section p {color:#ffffff;margin-bottom:0em;}
.footer a {color:#CDEBFF; text-decoration: none;}
.footer a:hover {color:#ffffff;}

/* --- MENU -- */
.leftMenu {
	list-style: none;
	margin-bottom: 1em;
	font-size: 1.2em;
}
.leftMenu .item {
	margin: 0;
	padding: 0.4em 0.1em;
/*	border-top: solid 1px #cccccc;*/
	font-weight: bold;
}
.leftMenu ul {
	list-style: none;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
}
.leftMenu li ul li {
	margin:0;
	padding:5px 1px;
	border-top: solid 1px #cccccc;
	font-weight: normal;

}
.leftMenu li ul.subMenu li > ul > li {
	margin:0;
	padding:3px 1px 3px 18px;
	border-top: 0px;
	font-weight: normal;

}
.leftMenu a {color: #666; text-decoration: none;}
.leftMenu a:hover,
.leftMenu a:focus {color: #000;}
.leftMenu .current { }
.leftMenu li.current > a { color: #000; }

/* -- general tabs -- */
.tabwrap { height:37px;}
.tabs {
	min-height:32px;
	float:left;
	position:relative;
	top: 5px;
	border-bottom: solid 5px #ffffff;
	margin:0;
}
.tabs li {
	float:left;
	list-style-type:none;
	text-align:left;
	margin:0;
	padding:0;
	margin-right:4px;
}
.tabs li a {
	display:block;
	float:left;
	padding:0;
	height:32px;
	text-decoration:none;
}
.tabs li a em {
	background: transparent url('../img/tabs-sprite.png') 0% -45px no-repeat;
	display:block;float:left; 
	font-style: normal;
	font-weight:bold;
	height:1em;
	line-height:1em;
	padding:10px 18px 10px 26px;
	color: #666666;
	text-decoration:none;
	text-align: center;
}
.tabs li a .end {
	display:block; float:left; width:8px; height: 32px;
	background: transparent url('../img/tabs-sprite.png') 100% -45px no-repeat;
}

.tabs li a:hover em {
	background: transparent url('../img/tabs-sprite.png') 0% -91px no-repeat;
}
.tabs li a:hover .end {
	background: transparent url('../img/tabs-sprite.png') 100% -91px no-repeat;
}
.tabs li.active a em {
	background: transparent url('../img/tabs-sprite.png') 0% 0px no-repeat;
}
.tabs li.active a .end {
	background: transparent url('../img/tabs-sprite.png') 100% 0px no-repeat;
	color: #111111;
}

/* ostuprotsess */
.steps { height: 55px; border-bottom: solid 2px #dddddd; margin-bottom: 1em;}
.steps ol {
	height:3em;
	max-width:100%;
}
.steps ol li {
	float:left;
	list-style-type:none;
	text-align:left;
	margin:0;
	padding:0;
	margin-right:12px;
}

.steps ol li .one,
.steps ol li .two,
.steps ol li .three,
.steps ol li .four {
		display:block;
		float:left;
		width:42px;
		height:43px;
		}
.steps ol li.future .one { background: #ffffff url('../img/steps_sprite.gif') 0px 0px no-repeat;}
.steps ol li.future .two { background: #ffffff url('../img/steps_sprite.gif') -42px 0px no-repeat;}
.steps ol li.future .three { background: #ffffff url('../img/steps_sprite.gif') -84px 0px no-repeat;}
.steps ol li.future .four { background: #ffffff url('../img/steps_sprite.gif') -126px 0px no-repeat;}
.steps ol li.present .one { background: #ffffff url('../img/steps_sprite.gif') 0px -43px no-repeat;}
.steps ol li.present .two { background: #ffffff url('../img/steps_sprite.gif') -42px -43px no-repeat;}
.steps ol li.present .three { background: #ffffff url('../img/steps_sprite.gif') -84px -43px no-repeat;}
.steps ol li.present .four { background: #ffffff url('../img/steps_sprite.gif') -126px -43px no-repeat;}
.steps ol li.past .one { background: #ffffff url('../img/steps_sprite.gif') 0px -86px no-repeat;}
.steps ol li.past .two { background: #ffffff url('../img/steps_sprite.gif') -42px -86px no-repeat;}
.steps ol li.past .three { background: #ffffff url('../img/steps_sprite.gif') -84px -86px no-repeat;}
.steps ol li.past .four { background: #ffffff url('../img/steps_sprite.gif') -126px -86px no-repeat;}

.steps ol li a,
.steps ol li em {
	background:none ;
	display:block;
	float:left;
	font-style: normal;
	font-weight:bold;
	height:1em;
	line-height:1em;
	padding:1em 0.6em;
	text-decoration:none;
	text-align: center;
}
.steps ol li.past a,
.steps ol li.past em { color: #a0a0a0;}
.steps ol li.present a,
.steps ol li.present em { color: #111111;}
.steps ol li.future a,
.steps ol li.future em { color: #a0a0a0;}

/*------- ostu info -------- */
table { }
table td {padding:2px 5px; border-bottom: 1px solid #eee; background: #fff;}
table.timetable { width: 100% }
table.timetable td {border-bottom: 2px solid #fff; background: #eee;}
table thead td,
table.timetable thead td {font-weight: bold;background: #ffffff;vertical-align: bottom;}
table tr.stateLost.Hover td { background: #e2e2e2;}
table tr.stateError td { background: #fde4e5;}
table tr.stateNorm td {background: url('../img/bg-tr-normal.gif') 0% 50% repeat-x;}
table tr.stateSelect td {background: url('../img/bg-tr-selected.gif') 0% 50% repeat-x;}
table tr.stateNorm.Hover td {background: url('../img/bg-tr-hover.gif') 0% 50% repeat-x;}

table tr.stateSelect td .boatInfo { background-position: 0px -20px;}
table tr.stateNorm.Hover td .boatInfo { background-position: 0px -10px;}
.time {font-weight: normal; }
.boatInfo { }
.chart { width: 100px;/*position:relative; z-index: 1;*/}
.chart .bronn { height:16px; background: #ffffff; float:left; border: solid 1px #ffffff; border-right-width: 0px;}
.chart .cash { height:16px; background: #0075C8; float:left;border: solid 1px #ffffff; border-left-width: 0px;}
.chart .proc { font-size:11px; line-height:1em; font-style: normal; color: #111;position:relative; left:5px;bottom: 2px;z-index: 11;}
.chart .full20,
.chart .full40,
.chart .full60,
.chart .full80,
.chart .full100,
.chart .full101 { display: block; height: 16px; clear:left; /*position:absolute; top:2px; z-index: 2;*/}
.chart .full20 {background-color:#87C13F;}
.chart .full40 {background-color:#87C13F;}
.chart .full60 {background-color:#87C13F;}
.chart .full80 {background-color:#87C13F;}
.chart .full100 {background-color:#87C13F;}
.chart .full101 {background-color:#ededed;}
.chart .full101 .proc {color:#666;}
.action {text-align: right;}
table tr.stateLost td.action a,
table tr.stateLost td.action em { display: block; float: right; padding-right:18px; background: none;font-style: italic;} 
table tr.stateNorm td.action a,
table tr.stateNorm td.action em { display: block; float: right; padding-right:18px; background: transparent url('../img/icon-boat-choose.png') 100% 0px no-repeat;}
table tr.stateSelect td.action a,
table tr.stateSelect td.action em { display: block; float: right; padding-right:18px; background: transparent url('../img/icon-boat-choose.png') 100% 100% no-repeat;}
.stateNorm .bronn { margin-left: -1px;margin-right: 1px;}
.stateSelect .bronn { margin-left: -1px;margin-right: 1px;}

table.list {width:100%;}
table.list td { padding: 3px 0px;background: transparent;}

/* icons  */

.icon-ask {
	display: block; float:left; width: 18px; height: 18px;
	text-indent: -99999px; font-size: 1px;
	background: transparent url('../img/icons-sprite.png') 0px -78px no-repeat;
}
.icon-ask:hover {
	background: transparent url('../img/icons-sprite.png') 0px -98px no-repeat;
}
.icon-add {
	display: block; float:left; width: 18px; height: 18px;
	text-indent: -99999px; font-size: 1px;
	background: transparent url('../img/icons-sprite.png') 0px -193px no-repeat;
}
.icon-tick {
	display: block; float:left; width: 25px; height: 25px;
	text-indent: -99999px; font-size: 1px;
	background: transparent url('../img/icons-sprite.png') 0px -210px no-repeat;
}
.boatInfo .icon {
	display: block; width: 22px; height: 11px;
	text-indent: -99999px; font-size: 1px;
	background: transparent url('../img/icons-sprite.png') 0px -156px no-repeat;
}
.boatInfo .icon:hover { background-position: 0px -168px;}

/* text element with tooltip icon */
.withTip { float:left; min-height: 1em; clear:left; position:relative;}  
.withTip .icon-ask {position: absolute; right:-22px; top:-2px;}

.tooltip {
	display:none;
	z-index:99999;
	width:160px;
	border:1px solid #e5e5e5;
	-moz-border-radius:4px;
	border-radius:4px;
	-moz-box-shadow: 0 0 15px #666;
	-webkit-box-shadow: 0 0 15px #666;
	background-color:#fff;
	padding:15px;
	color:#333;
	font-size: 0.89em;
	text-align:left;
}

.tooltip110 {
	display:none;
	padding: 0px;
	width:126px;
	z-index:99999;
}
.tooltip110 .tooltipWrap {
	position:absolute; bottom: -10px;
	width: 126px;
}
.tooltip110 .tooltipContent {
	background: transparent url('../img/bg-tooltip-110.png') 50% 0% no-repeat;
	padding:18px;
	padding-bottom: 0px;
	color:#333;
	font-size: 0.89em;
	text-align:left;
}
.tooltip110 .tooltipBot {
	height:23px;
	background: transparent url('../img/bg-tooltip-110.png') 50% 100% no-repeat;
}

.tooltip180 {
	display:none;
	padding: 0px;
	width:200px;
	z-index:99999;
}
.tooltip180 .tooltipWrap {
	position:absolute; bottom: -10px;
	width: 200px;
}
.tooltip180 .tooltipContent {
	background: transparent url('../img/bg-tooltip-180.png') 50% 0% no-repeat;
	padding:18px;
	padding-bottom: 0px;
	color:#333;
	font-size: 0.89em;
	text-align:left;
}
.tooltip180 .tooltipBot {
	height:23px;
	background: transparent url('../img/bg-tooltip-180.png') 50% 100% no-repeat;
}


/* the overlayed element */
.simple_overlay {
	display:none;
	z-index:10000;
	background-color:#ffffff;
	
	width:325px;	
	min-height:200px;
	border:1px solid #666;

}

/* close button positioned on upper right corner */
.simple_overlay .close {
 display: none;
}

/* ---------- the other layout grid option -------- */

.frontpage .leftSide {	width:230px;}
.frontpage .midSide {	width:470px;}
.frontpage .rightSide {	width:230px;}
.frontpage .contentArea {	width:470px;}
.frontpage .rightBannerArea { width: 230px;}
/* ------------------------------------------------ */


/* scrollable info block */

.navi {	width:140px; height:20px;}
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url('../img/navigator.png') 0 0 no-repeat;
	display:block;
	font-size:1px;
}
.navi a:hover {	background-position:0 -8px; }
.navi a.active { background-position:0 -16px; }

.scrollable {
	position:relative;
	overflow:hidden;
	width: 380px;
	height:80px;
/*	background:#fff; */
}
.scrollable .items {
	/* this cannot be too large
	width:20000em;
	now vertically scrollable*/
	width:20000em;
	position:absolute;
	clear:both;
}
.items div {
	width:380px;
	text-align: left;
	float:left;
}


/* single scrollable item */
.scrollable img {
	float:left;
	margin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	width:100px;
	height:75px;
	-moz-border-radius:4px;
	border-radius:4px;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background: none;
	display:block;
	width:5px;
	height:15px;
	float:left;
	margin:30px 0px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{ 
	background:url(../img/scrollable/arrow/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

/* ------------- */
.formWrapper {
	clear: both;
	background: #fafafa;
	padding: 10px;
}
.formWrapperWhite {
	clear: both;
	background: #fafafa;
	border: solid 1px #666;
	-moz-border-radius:6px;
	border-radius:6px;
	padding: 10px;
}
.formWrapperGrey {
	background: #ededed;
	border: solid 1px #c7c7c7;
	-moz-border-radius:6px;
	border-radius:6px;
	padding: 10px;
}
.formWrapperGreen {
	background: #B4E3A7; 
	-moz-border-radius:6px;
	border-radius:6px;
	padding: 10px;
}
.formWrapperRed {
	background: #fde4e5; 
	-moz-border-radius:6px;
	border-radius:6px;
	padding: 10px;
	margin-top:20px;
	margin-bottom:40px;
}
.formWrapperBlue {
	background: #BEDDED url('../img/bg-panel.png') right top repeat-y;
	border: solid 1px #bcdbef;
	-moz-border-radius:5px;
	border-radius:5px;
	padding: 10px;
}
.formWrapperBlue .form {
	border-top: solid 2px #667a85;
	padding: 10px 0;
}
.ticketData,
.ticketServData {
	padding:0px 20px;	
	margin-bottom: 5px;
	position: relative;
}
.ticketData {	background: #B4E3A7; 	padding:15px 20px;	-moz-border-radius:3px;	border-radius:3px;}
.formWrapperWhite .ticketData {	background: #fff; 	padding:15px 20px;	border: solid 1px #bbb; -moz-border-radius:4px;	border-radius:4px;}
.formWrapperWhite .ticketData hr {background: #bbb;}
.ticketData p,
.ticketData .title,
.ticketServData p,
.ticketServData .title,
.totalSum p {margin:0px; }

.ticketData .ferry {font-size: 1.2em;}
.ticketData .ferryDate {font-size: 1.2em; font-weight: bold;}
.ticketData .ferryTime {font-size: 1.2em;}
.ticketData .person {font-size: 1.2em; background: transparent url('../img/icon-person.png') 0px -1px no-repeat; padding-left:22px;}
.ticketData .bicycle {font-size: 1.2em; background: transparent url('../img/icon-bicycle.png') 0px -6px no-repeat; padding-left:22px;}
.ticketData .person-blue{font-size: 1.2em; background: transparent url('../img/icon-person-blue.png') 0px -1px no-repeat; padding-left:22px;}
.ticketData .bicycle-blue{font-size: 1.2em; background: transparent url('../img/icon-bicycle-blue.png') 0px -3px no-repeat; padding-left:22px;}
.ticketData .vehicle {font-size: 1.2em;background: transparent url('../img/icon-car.png') 0px -1px no-repeat; padding-left:22px;}
.ticketData .trailerSmall {font-size: 1.2em;background: transparent url('../img/icon-trailer-small.png') 0px -1px no-repeat; padding-left:82px;}
.ticketData .trailerBig {font-size: 1.2em;background: transparent url('../img/icon-trailer-big.png') 0px -1px no-repeat; padding-left:105px;}
.ticketData .trailerCamp {font-size: 1.2em;background: transparent url('../img/icon-trailer-haagissuvila.png') 0px -1px no-repeat; padding-left:82px;}
.ticketMobile { background: transparent url('../img/icon-mobile.png') 0px 0px no-repeat; padding-left:18px;}
.ticketData hr,
.ticketServData hr { background:  #ffffff; height:1px; border: none; margin-bottom: 10px; }

.ticketData table th,
.ticketData table td,
.ticketServData table th,
.ticketServData table td {	background: transparent; border: none; padding:1px;}
.ticketData table th,
.ticketServData table th {	font-weight: bold;}

.ticketData .total {	position: absolute; bottom: 8px;	right: 20px;}
.ticketServData .total {	position: absolute;	bottom: 0px;	right: 20px;}
.ticketData .total p,
.ticketServData .total p {font-size: 1.32em; color: #666666; font-weight: bold;}

.totalSum p { font-size: 1.32em; color: #111111; font-weight: bold; text-align: right;}

.ticketData .barcode {	position: absolute;	top: 55px; right: 10px; text-align: right;}
.ticketData .barcode .important { margin:2.5em;}
.important {color: #ee0000;}
.smallprint { font-size: 0.9em;}
.selectPayment { float:left; width:20%; margin-bottom:1em;}
.selectPayment a {display: block;}

.success { color: #87C13F; font-size: 1.6em;}
.error { color: #cc0000; }
.success-small {color: #87C13F;}
.moreinfo { font-size: 0.9em; line-height: 1em;color:#666; }

.listTable {margin-bottom: 1em; background: #fff; border-collapse: collapse; border-spacing:0px; width:100%;}
.listTable td {background: #fff;padding:2px 3px 2px 7px; border: solid 1px #dedede;}
.listTable thead td { border-color: #fff #fff #dedede #fff;}

.scedule {margin-bottom: 1em;border-collapse: collapse; border-spacing:0px;float:left;}
p.scedule {width: 120px; margin-left:10px;}
.scedule td {padding:2px 3px 2px 4px; border: solid 1px #dedede;}
.scedule .normal {background: #ffffff;}
.scedule .special {background: #DFFFD7;}
.scedule .else {background: #ffffff;}
.scedule .change {color:#0075C8;}
span.normal,
span.special,
span.change {display:block; width:100px;float:left; padding:2px 8px; margin-bottom: 0.5em; border: solid 1px #dedede;}

.saldoPlus {
	background: #C0F6B6;
	text-align: right;
	padding: 5px;
	color: #006B15;
}
.saldoMinus {
	background: #F6CCC1;
	text-align: right;
	padding: 5px;
	color: #910A00;
}
.tooltipped {position: relative; font-size: 0.9em; font-weight: normal;}
.tooltipped .tooltipGreen { position: absolute; width: 78px; height: 38px; padding: 8px; background: transparent url('../img/tooltip-green-94.png') no-repeat; color: #ffffff;}
.tooltipped .tooltipGreenPassenger { position: absolute; width: 122px; height: 38px; padding: 8px 8px 8px 18px; background: transparent url('../img/tooltip-green-passenger-form.png') no-repeat; color: #ffffff;}

.tooltipped .tooltipBlue { position: absolute; width: 106px; height: 38px; padding: 8px; background: transparent url('../img/tooltip-blue-122.png') no-repeat; color: #ffffff;}
.tooltipped .tooltipBluePassenger { position: absolute; width: 106px; height: 38px; padding: 8px; background: transparent url('../img/tooltip-blue-passenger-form.png') no-repeat; color: #ffffff;}

/*Modal*/
.modal {
	background-color:#fff;
	width:400px;
	padding:15px;
	text-align:left;
	border:2px solid #333;
	z-index: 999;

	-moz-border-radius:6px;
	border-radius:6px;
	-moz-box-shadow: 0 0 50px #aaa;
	-webkit-box-shadow: 0 0 50px #aaa;
}
.sa-icon {
    display: inline-block;
    height: 18px;
    background-size: 100% 100%;
}
.sa-icon.person {
    width: 17.65px;
    background-image: url('../img/ticket/person.gif');
}
.sa-icon.v2.person {
    background-image: url('../img/ticket/black_person.gif');
}
.sa-icon.car {
    width: 32.79px;
    background-image: url('../img/ticket/car.gif');
}
.sa-icon.v2.car {
    background-image: url('../img/ticket/black_car.gif');
}
.sa-icon.bus {
    width: 29.89px;
    background-image: url('../img/ticket/bus.gif');
}
.sa-icon.v2.bus {
    background-image: url('../img/ticket/black_bus.gif');
}
.sa-icon.bus23 {
    width: 42.75px;
    background-image: url('../img/ticket/bus23.gif');
}
.sa-icon.v2.bus23 {
    background-image: url('../img/ticket/black_bus23.gif');
}
.sa-icon.truck {
    width: 31.5px;
    background-image: url('../img/ticket/truck.gif');
}
.sa-icon.v2.truck {
    background-image: url('../img/ticket/black_truck.gif');
}
.sa-icon.truck35 {
    width: 50.14px;
    background-image: url('../img/ticket/truck35.gif');
}
.sa-icon.v2.truck35 {
    background-image: url('../img/ticket/black_truck35.gif');
}
.sa-icon.camper {
    width: 26.36px;
    background-image: url('../img/ticket/camper.gif');
}
.sa-icon.v2.camper {
    background-image: url('../img/ticket/black_camper.gif');
}
.sa-icon.motobike {
    width: 40.5px;
    background-image: url('../img/ticket/motobike.gif');
}
.sa-icon.v2.motobike {
    background-image: url('../img/ticket/black_motobike.gif');
}
.sa-icon.bike {
    width: 48.21px;
    background-image: url('../img/ticket/bike.gif');
}
.sa-icon.v2.bike {
    background-image: url('../img/ticket/black_bike.gif');
}
.sa-icon.trailer {
    width: 24.11px;
    background-image: url('../img/ticket/trailer.gif');
}
.sa-icon.v2.trailer {
    background-image: url('../img/ticket/black_trailer.gif');
}
.sa-icon.trailer750 {
    width: 40.5px;
    background-image: url('../img/ticket/trailer750.gif');
}
.sa-icon.v2.trailer750 {
    background-image: url('../img/ticket/black_trailer750.gif');
}
.sa-icon.trailercamp {
    width: 26.68px;
    background-image: url('../img/ticket/trailercamp.gif');
}
.sa-icon.v2.trailercamp {
    background-image: url('../img/ticket/black_trailercamp.gif');
}
.sa-icon.truck_trailer {
    width: 55.93px;
    background-image: url('../img/ticket/truck_trailer.gif');
}
.sa-icon.v2.truck_trailer {
    background-image: url('../img/ticket/black_truck_trailer.gif');
}