html, body {
  height: 100%;
}
body {
  margin: 0;
  color: #000;
  font-family: Georgia, sans-serif;
  font-size: 13px;
  line-height: 1.5em;
  background: #7dc4d3;
  min-width: 1000px;
}

h2 {
  font-size: 1.6em;
}

textarea, input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a img {
  border: 0;
}

a:link, a:visited {
  color: #2ACAE2;
  font-weight: bold;
  text-decoration: underline;
}

a:hover, a:active {
  text-decoration: none;
}

.off {
  display: none;
}

form {
	margin: 0;
	padding: 0;
}

.error {
	color: #db5200;
	font-size: 11px;
	font-weight: bold;
	line-height: 1em;
	float: right;
}

.ok {
  color: #5A8189;
  font-weight: bold;
}

.textImage {
	overflow: hidden;
	width: 380px;
	display: block;
}

#pointData .textImage {
  overflow: hidden;
  width: 100%;
  display: block;
}

#pointData .textImage img {
		max-width: 300px;
}

* html #overlay a, 
* html #bg .helpers,
* html .sub #content #contentarea #task
{
  behavior: url(/assets/iepngfix/iepngfix.htc);
}



/* THE MAP PART */

#mapContainer {
  width: 100%;
  min-width: 1000px;
  height: 1100px;
  overflow: hidden;
  bottom: 0;
  top: 0;
  position: absolute;
  background: transparent;
}

* html #mapContainer {
  height: 1100px;
}

#viewport {
   cursor:move;
   height:595px;
   margin: 0 auto;
   padding:0;
   position:relative;
   top:165px;
   width:595px;
}
#smallMap {
  position: absolute;
  width: 180px;
  height: 195px;
  top: 525px;
  left: -115px;
}


#map, #map #border {
  -moz-user-select: none;
  -khtml-user-select: none;
}

#border {
  position: relative;
  top: 0;
  left: 0;
  margin: 0; 
  padding: 0;
}


/*  BACKGROUND ELEMENTS */

#bg div {
  position: absolute;
  background: url(../img/alpha.png) repeat scroll 0%;
}


#bg .top {
  top: 0px;
  left: 0px;
  width: 100%;
  min-width: 1000px;
  height: 165px;
}

#bg .bottom {
  position: absolute;
  top: 760px;
  left: 0;
  width: 100%;
  height: 470px;
}

#bg .left {
 height:595px;
 margin-left: -297px;
 top:165px;
 min-width:500px;
 width:50%;
}

#bg .right {
 height:595px;
 left:50%;
 right: 0;
 top:165px;
 margin-left: 297px;
}

* html #bg .right {
  margin-left: 296px;
  width: expression(document.documentElement.clientWidth / 2 - 297);
}

#bg .active {
  top: 165px;
  left: 50%;
  width: 594px;
  height: 595px;
  margin-left: -297px;
}

#bg .activeSub {
   width:595px;
   height:1000px;
   margin: 0 auto;
   padding:0;
   position:relative;
   top:165px;
}

#bg .helpers {
	left: 50%;
	top: 600px;
	margin: 0 0 0 -555px;
	background: url(../img/characters/2womans.gif) 0px 0px no-repeat;
	width: 184px;
	height: 145px;	
}

/* PATTERNIA ALASIVUILLE */ 

.sub {
	background: url(../img/alpha.png) repeat scroll 0%;
}

.sub #bg .pattern {
	width: 100%;
	height: 1100px;
    background: url(../img/alpha.png) repeat scroll 0%;
}


.sub #bg .subfader {
	background: url(../img/alpha.png) repeat scroll 0%;
}

/* KARTAN ALAOSA */

#mapbottom {
	position: absolute; 
	width: 1000px;
	height: 300px;
	left: 50%;
	top: 795px;
	margin-left: -500px;
	padding: 50px 0 0 0;
	background: url(../img/characters/cannonman.gif) 700px 0px no-repeat;
}

#mapbottom #latest {
	width: 220px;
	height: 150px;
	margin: 0 0 0 260px;
	padding: 10px 10px 5px 10px;
	background: url(../img/map/bubble-mapbottom.gif) 0px 0px no-repeat;
/*
	float: left;
*/
	position: absolute;
	left: 0;
}

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

#mapbottom #latest ul li {
	background: url(../img/map/latest-dotline.gif) 0px 0px no-repeat;
	width: 200px;
	height: 24px;
	overflow: hidden;
	padding: 4px 0 0 0;
}

#mapbottom #latest ul li a {
	width: 175px;
	height: 21px;
	display: block;
	padding: 3px 0 0 25px;
	font-size: 13px;
	font-weight: normal;
	color: #2c8eb1;
	text-decoration: underline;
}

#mapbottom #latest ul li a.scary {
	background: url(../img/categories/icon_scary.png) 0px 0px no-repeat;
}

#mapbottom #latest ul li a.romantic {
	background: url(../img/categories/icon_romantic.png) 0px 0px no-repeat;
}

#mapbottom #latest ul li a.beautiful {
	background: url(../img/categories/icon_beautiful.png) 0px 0px no-repeat;
}

#mapbottom #latest ul li a.ugly {
	background: url(../img/categories/icon_ugly.png) 0px 0px no-repeat;
}

#mapbottom #latest ul li a.loneliness {
	background: url(../img/categories/icon_loneliness.png) 0px 0px no-repeat;
}

#mapbottom #latest ul li a.sunday {
	background: url(../img/categories/icon_sunday.png) 0px 0px no-repeat;
}

#mapbottom #latest ul li a.alternative {
	background: url(../img/categories/icon_alternative.png) 0px 0px no-repeat;
}

#mapbottom #latest ul li a:hover {
	text-decoration: none;
}

/*  KARTAN ALAOSA _ PIKAHAKU */

#mapbottom #quicksearch {
	width: 220px;
	height: 150px;
	margin: 0 0 0 0px;
	padding: 10px 10px 5px 10px;
	background: url(../img/map/bubble-mapbottom.gif) 0px 0px no-repeat;
/*  float: left; */
	position: absolute;
	left: 510px;
}
#mapbottom #quicksearch p {
	color: #333;
	font-size: 13px;
	margin: 5px 0 5px 0;
}

#mapbottom #quicksearch .extralinks {
	margin: 10px 0 0 0;
}

#mapbottom #quicksearch a.extra:link, #mapbottom #quicksearch a.extra:visited {
	width: 170px;
	height: 65px;
	display: block;
	padding: 5px 0 3px 5px;
	margin: 0 0 0 10px;
	color: #2c8eb1;
	font-weight: normal;
	font-size: 13px;
	text-decoration: none;
	background: #fff;
	text-align: center;
}

#mapbottom #quicksearch a.extra:hover, #mapbottom #quicksearch a.extra:active {
	text-decoration: underline;
}


#mapbottom #quicksearch .searchinput {
	border: 1px solid #BFBFBF;
	color: #676767;
	font-family: georgia,sans-serif;
	font-size: 11px;
	height: 16px;
	padding: 1px;
	margin: 0;
}

#mapbottom #quicksearch .sendbtn {
	width: 16px;
	height: 16px;
	line-height: 0.7em;
}

#mapbottom #latest h3,  #mapbottom #quicksearch h3 {
	font-size: 17px;
	color: #62b0c0;
	margin: 0;
}

/* KARTAN ALAOSA _ TARKKA HAKU */

#mapbottom #search {
	
}

/* PISTEDATA KARTAN PÄÄLLÄ */

#pointDataFader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1200px;
	background: url(../img/pointdata-alpha.png) repeat scroll 0%;
	z-index: 2;
}

* html #pointDataFader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1200px;
	background: url(../img/pointdata-alpha.gif) repeat scroll 0%;
}

#pointDataContainer {
	position: absolute; 
	width: 1000px;
	height: 1px;
	left: 50%;
	top: 100px;
	margin-left: -500px;
	z-index: 5;
}

#pointData {
	float: right;
	width: 520px;
	height: 510px;
	margin: 120px 0 0 0;
}

#pointData #pointDataHeader {
	width: 520px;
	height: 35px;
	text-align: right;
	background: url(../img/pointdata/header.gif) top left no-repeat;
}

a.close {
	float: right;
	margin: 10px 23px 0 0;
	width: 46px;
	height: 13px;
	display: block;
	background: url(../img/pointdata/btn-sulje.gif) top left no-repeat;
}

* html a.close {
  margin: 10px 10px 0 0;
  padding: 0;
}

#close-mapsearch {
		margin: 0;
}
a.close:hover {
	background: url(../img/pointdata/btn-sulje-mo.gif) top left no-repeat;
}

#pointData #pointDataFooter {
	width: 430px;
	height: 70px;
	padding: 10px 20px 0 70px;
	background: url(../img/pointdata/footer.gif) top left no-repeat;
	clear: both;
}

#pointData #pointDataFooter a {
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
}

#pointData #pointDataFooter a:hover {
	text-decoration: underline;
}

#pointData #pointDataFooter a.next {
	float:right;
}

#pointData #pointDataFooter a.previous {
	float:left;
}

#pointData #pointDataLeft {
	float:left;
	width: 61px;
	height: 373px;
}

#pointData #pointDataRight {
	float:left;
	width: 19px;
	height: 373px;
/*	border: #000 1px solid; */
}

#pointData #pointDataContent {
	overflow: auto;
	float: left;
	width: 440px;
	height: 373px;
	background: #fff;
}

#pointData #pointDataContent #pointTitle {
	width: 415px;
	height: 90px;
	background: #a0e0ed url(../img/pointdata/title-bg.gif) top left no-repeat;
}

#pointData #pointDataContent #pointTitle h2 {
	font-size: 14px;
	padding: 10px 0 0 15px;
	margin: 0;
}

#pointData #pointDataContent #pointTitle p {
	margin: 0 0 0 15px;
	font-size: 13px;
}

#pointData #pointDataContent #pointTitle p a {
	text-decoration: underline;
	font-size: 13px;
	font-weight: normal;
	color: #fff;
}
#pointData #pointDataContent #pointTitle p a:hover {
	text-decoration: none;
}

#pointData #pointDataContent #pointTitle p.sender {
	float: left;
	display: block;
	font-size: 12px;
}

#pointData #pointDataContent #pointTitle p.category {
	float: left;
	display: block;
	font-size: 12px;
}

#pointData #pointDataContent #pointTitle p.category a, #pointData #pointDataContent #pointTitle p.sender a {
	font-size: 12px;
}


#pointData #pointDataContent #pointTitle p.category span {
	color: #fff;
}

#pointData #pointDataContent #pointTitle.romantic {
	background: #f587f1 url(../img/pointdata/title-bg.gif) top left no-repeat;
	color: #171819;
}
#pointData #pointDataContent #pointTitle.scary {
	background: #4a4740 url(../img/pointdata/title-bg.gif) top left no-repeat;
	color: #fff;
}
#pointData #pointDataContent #pointTitle.beautiful {
	background: #f89f12 url(../img/pointdata/title-bg.gif) top left no-repeat;
	color: #171819;
}
#pointData #pointDataContent #pointTitle.ugly {
	background: #8d6628 url(../img/pointdata/title-bg.gif) top left no-repeat;
	color: #fff;
}
#pointData #pointDataContent #pointTitle.loneliness {
	background: #4be6f3 url(../img/pointdata/title-bg.gif) top left no-repeat;
	color: #171819;
}
#pointData #pointDataContent #pointTitle.alternative {
	background: #8f9b0c url(../img/pointdata/title-bg.gif) top left no-repeat;
	color: #171819;
}
#pointData #pointDataContent #pointTitle.sunday {
	background: #3c7441 url(../img/pointdata/title-bg.gif) top left no-repeat;
	color: #171819;
}

#pointData #pointDataContent #textContent {
	width: 265px;
	padding: 10px;
	float: left;
	background: url(../img/pointdata/dotline.gif) top left repeat-y;
}

#pointData #pointDataContent #description {
	width: 130px;
	padding: 0;
	float: left;
	background: url(../img/pointdata/bg-description.gif) top left repeat-y;
}

#pointData #pointDataContent #description div {
	padding: 0 12px 0 12px;
	margin: 0;
	font-size: 11px;
	line-height: 1.2em;
	text-align: center;
}

#pointData #pointDataContent #description div a {
	color: #24909a;
	text-decoration: underline;
	font-size: 11px;
	font-weight: normal;
	line-height: 1.2em;
	padding: 2px;
}

#pointData #pointDataContent #description div a:hover {
	text-decoration: none;
}

#pointData #pointDataContent #description div.winter {
	background: url(../img/pointdata/winter.gif) 15px 0px no-repeat;
	margin: 0 0 10px 0;
}

#pointData #pointDataContent #description div.summer {
	background: url(../img/pointdata/summer.gif) 15px 0px no-repeat;
	margin: 0 0 10px 0;
}

#pointData #pointDataContent #description div.autumn {
	background: url(../img/pointdata/autumn.gif) 15px 0px no-repeat;
	margin: 0 0 10px 0;
}

#pointData #pointDataContent #description div.spring {
	background: url(../img/pointdata/spring.gif) 15px 0px no-repeat;
	margin: 0 0 10px 0;
}

#pointData #pointDataContent #description div img {
	margin: 0 0 0 3px;
	padding: 0;
}

/* PISTEEN KOMMENTOINTI + KOMMENTIT */

#pointData #pointDataContent #textContent .comments {
	border-top: 1px solid #BFBFBF;
	margin: 10px 0 0 0;
	padding: 10px 0 0 0;
}

#pointData #pointDataContent #textContent .comments .addCommentForm {
	background: url(../img/pointdata/addcomment-bg.gif) 0px 5px no-repeat;
	width: 180px;
	height: 105px;
	padding: 15px 0 0 80px;
	margin: 10px 0 0 0;
	border-top: 1px solid #BFBFBF;
}

#pointData #pointDataContent #textContent .comments .commentField {
	width: 170px;
	height: 40px;
	border: 1px solid #fff;
	color: #676767;
	font-family: georgia,sans-serif;
	font-size: 11px;
	padding: 1px;
	margin: 0 0 5px 0;
}

#pointData #pointDataContent #textContent .comments .addcomment-sendbtn {
	width: 44px;
	height: 32px;
	float: right;
	margin: 0 5px 0 0;
}

#pointData #pointDataContent #textContent .comments strong {
  font-weight: bold;
  font-size: 14px;
  padding: 4px 4px 0px 0px;
  color: #333;
}

#pointData #pointDataContent #textContent .comments .oldComments h5 {
	height: 25px;
	color:  #76bdca;
	font-size: 12px;
	font-weight: bold;
	background: url(../img/pointdata/oldcomment-titlebg.gif) 0px 0px no-repeat;
	margin: 0;
	padding: 0;
}

#pointData #pointDataContent #textContent .comments .oldComments p {
	min-height: 25px;
	width: 255px;
	overflow: hidden;
	background: url(../img/pointdata/oldcomment-body.gif) 0px 0px repeat-y;
	margin: 0;
	padding: 1px 5px 5px 5px;
	border-bottom: 1px solid #76bdca;
}

/* TUNNEKATEGORIAT KARTAN YMPÄRILLÄ */

#categories {
	position: absolute; 
	width: 1000px;
	left: 50%;
	top: 100px;
	padding: 0;
	list-style: none;
	margin: 0 0 0 -500px;
	height: 1px;
}

#categories li {
	display: block;
	position: absolute;
}

#categories li a {
	display: block;
	text-indent: -9999px;
}

#categories li.ugly {
	top: 0;
	left: 350px;
	width: 97px;
	height: 95px;
}
#categories li.beautiful {
	top: 60px;
	left: 240px;
	width: 86px;
	height: 87px;
}
#categories li.romantic {
  top: 150px;
  left: 170px;
	width: 92px;
	height: 81px;
}

#categories li.scary {
	top: 245px;
	left: 125px;
	width: 104px;
	height: 94px;
}

#categories li.scary a {
  	background: url(../img/categories/cat_scary.gif) top left no-repeat;
	width: 104px;
	height: 94px;
}

#categories  li.scary a:hover {
  	background: url(../img/categories/cat_scary-sel.gif) top left no-repeat;
}

#categories li.scary a.selected {
  	background: url(../img/categories/cat_scary-sel.gif) top left no-repeat;
}

#categories li.ugly a {
  	background: url(../img/categories/cat_ugly.gif) top left no-repeat;
	width: 97px;
	height: 95px;
}

#categories li.ugly a:hover {
  	background: url(../img/categories/cat_ugly-sel.gif) top left no-repeat;
}

#categories li.ugly a.selected {
  	background: url(../img/categories/cat_ugly-sel.gif) top left no-repeat;
}

#categories li.beautiful a {
  	background: url(../img/categories/cat_beautiful.gif) top left no-repeat;
	width: 86px;
	height: 87px;
}

#categories li.beautiful a:hover {
  	background: url(../img/categories/cat_beautiful-sel.gif) top left no-repeat;
}

#categories li.beautiful a.selected {
  	background: url(../img/categories/cat_beautiful-sel.gif) top left no-repeat;
}


#categories li.romantic a {
  	background: url(../img/categories/cat_romantic.gif) top left no-repeat;
	width: 92px;
	height: 81px;
}

#categories li.romantic a:hover {
  	background: url(../img/categories/cat_romantic-sel.gif) top left no-repeat;
}

#categories li.romantic a.selected {
  	background: url(../img/categories/cat_romantic-sel.gif) top left no-repeat;
}


#categories li.loneliness {
	top: 0;
	left: 550px;
	width: 97px;
	height: 95px;
}
#categories li.alternative {
  top: 35px;
  left: 650px;
	width: 104px;
	height: 98px;
}
#categories li.sunday {
  top: 100px;
  left: 720px;
	width: 105px;
	height: 98px;
}

/* EXTRAT  */
#categories li.transportation {
  top: 450px;
  left: 764px;
	width: 152px;
	height: 43px;
}

#categories li.landmarks {
  top: 507px;
  left: 730px;
	width: 152px;
	height: 43px;
}

#categories li.transportation a {
  	background: url(../img/categories/cat_transportation.gif) top left no-repeat;
	width: 152px;
	height: 43px;
}

#categories li.transportation a:hover {
  	background: url(../img/categories/cat_transportation-sel.gif) top left no-repeat;
}

#categories li.landmarks a {
  	background: url(../img/categories/cat_landmarks.gif) top left no-repeat;
	width: 152px;
	height: 43px;
}

#categories li.landmarks a:hover {
  	background: url(../img/categories/cat_landmarks-sel.gif) top left no-repeat;
}


#categories li.loneliness a {
  	background: url(../img/categories/cat_loneliness.gif) top left no-repeat;
	width: 97px;
	height: 95px;
}

#categories li.loneliness a:hover {
  	background: url(../img/categories/cat_loneliness-sel.gif) top left no-repeat;
}

#categories li.loneliness a.selected {
  	background: url(../img/categories/cat_loneliness-sel.gif) top left no-repeat;
}

#categories li.alternative a {
  	background: url(../img/categories/cat_alternative.gif) top left no-repeat;
	width: 104px;
	height: 98px;
}

#categories li.alternative a:hover {
  	background: url(../img/categories/cat_alternative-sel.gif) top left no-repeat;
}

#categories li.alternative a.selected {
  	background: url(../img/categories/cat_alternative-sel.gif) top left no-repeat;
}

#categories li.sunday a {
  	background: url(../img/categories/cat_sunday.gif) top left no-repeat;
	width: 105px;
	height: 98px;
}

#categories li.sunday a:hover {
  	background: url(../img/categories/cat_sunday-sel.gif) top left no-repeat;
}

#categories li.sunday a.selected {
  	background: url(../img/categories/cat_sunday-sel.gif) top left no-repeat;
}

/* OHJAUSNUOLET */

#controls {
	position: absolute; 
	width: 640px;
	left: 50%;
	top: 160px;
	margin-left: -320px;
}

#controls img {
  position: absolute;
  cursor: pointer;
}

#controls .add, #controls .addNotActive {
	position: absolute;
	background: url(../img/controls/add.gif) top left no-repeat;
	left:570px;
	top:120px;
  width: 250px;
  height: 250px;
}

#controls .addNotActive {
  background: url(../img/controls/add-notsigned.gif) top left no-repeat;
}

#controls #addBullet {
		left: 125px;
		top: 80px;
}

#controls #addBulletCancel { 
	position: absolute;
	text-align: center;
	border: 0;
	left: 95px;
	top: 90px;
}

#addBulletLinks {
  background: url(../img/controls/addbullet-bubble.gif) top left no-repeat;
  height: 27px;
  width: 111px;
  position: absolute;
  margin-left: -37px;
  padding: 11px 0 0 8px;
  top: 40px;
  left: 0;
}

#addBulletLinks a {
    text-indent: -9999px;
    display: block;
    float: left;
    height: 10px;
}

#addBulletLinks #add-ok {
		background: url(../img/controls/btn-ok.gif) top left no-repeat;
		width: 95px;
		height: 11px;
		margin-right: 10px;
}

#addBulletLinks #add-ok:hover {
    background: url(../img/controls/btn-ok-mo.gif) top left no-repeat;
}

#addBulletLinks #add-cancel {
		width: 39px;
		margin-top: 1px;
}

#addBulletLinks #add-cancel:hover {

}


#controls .up {
	left: 300px;
	top: -5px;
	background: url(../img/controls/up.gif) 0 0 no-repeat;
}

#controls .up:hover {
	background: url(../img/controls/up_mo.gif) 0 0 no-repeat;
}

#controls .down {
  left: 300px;
  top: 565px;
  background: url(../img/controls/down.gif) 0 0 no-repeat;
  z-index: 1;
}

#controls .down:hover {
	background: url(../img/controls/down_mo.gif) 0 0 no-repeat;
}

#controls .left {
  	left: 15px;
  	top: 270px;
	background: url(../img/controls/left.gif) 0 0 no-repeat;
}

#controls .left:hover {
	background: url(../img/controls/left_mo.gif) 0 0 no-repeat;
}

#controls .right {
  	left: 585px;
  	top: 270px;
	background: url(../img/controls/right.gif) 0 0 no-repeat;
	z-index: 1;
}
#controls .right:hover {
	background: url(../img/controls/right_mo.gif) 0 0 no-repeat;
}

#mapTools {
	position: absolute;
	top: 600px;
	left: 280px;
	background: url(../img/controls/bg-tools.gif) 0 0 no-repeat;
	width: 450px;
	height: 25px;
	padding: 68px 0 0 10px;
}

#mapTools img {
	position: relative;
	float: left;
}

#mapTools #activateLandmarks {
	width: 58px;
	height: 15px;
	background: url(../img/controls/tools-btn-maamerkit.gif) 0 0 no-repeat;
	display: block;
	text-indent: -9999px;
	float: left;
	margin: 0 10px 0 10px;
}

#mapTools #activateLandmarks:hover {
	width: 58px;
	height: 15px;
	background: url(../img/controls/tools-btn-maamerkit-sel.gif) 0 0 no-repeat;
	display: block;	
}

#mapTools #activateTransportation {
	width: 91px;
	height: 15px;
	background: url(../img/controls/tools-btn-liikenne.gif) 0 0 no-repeat;
	display: block;
	text-indent: -9999px;
	float: left;
	margin: 0 10px 0 10px;
}

#mapTools #activateTransportation:hover {
	width: 91px;
	height: 15px;
	background: url(../img/controls/tools-btn-liikenne-sel.gif) 0 0 no-repeat;
	display: block;
}

/* CONTENT */

.centerer {
	position: absolute; 
	left: 50%;
	margin-left: -500px; 
	width: 1000px;
	height: 165px;
}

#topbar {
  width: 1000px;
  height: 165px;
}

#topbar h1 {
  margin: 0;
  padding: 0;
  text-indent: -9999px;
  background: url(../img/logo.gif) top left no-repeat;
  width: 175px;
  height: 165px;
  float: left;
}

#topbar h1 a {
	width: 100%;
	height: 100%;
	display: block;
}

/* TOP NAVIGATION */

#topbar #navigation {
  	width: 625px;
	height: 60px;
  	margin: 0;
  	padding: 0;
  	list-style: none;
	float: left;
}

#topbar #navigation li {
  display: block;
  width: 125px;
  height: 60px;
  float: left;
}

#topbar #navigation li a {
  display: block;
  height: 60px;
  text-indent: -9999px;
}

#navigation li.kartta a {
  background: url(../img/navi/kartta.gif) top left no-repeat;
}

#navigation li.kartta a:hover {
  background: url(../img/navi/kartta-sel.gif) top left no-repeat;
}

#navigation li.kartta a.selected {
  background: url(../img/navi/kartta-sel.gif) top left no-repeat;
}

#navigation li.tehtavat a {
  background: url(../img/navi/tehtavat.gif) top left no-repeat;
}

#navigation li.tehtavat a:hover {
  background: url(../img/navi/tehtavat-sel.gif) top left no-repeat;
}

#navigation li.tehtavat a.selected {
  background: url(../img/navi/tehtavat-sel.gif) top left no-repeat;
}

#navigation li.kayttajat a {
  background: url(../img/navi/kayttajat.gif) top left no-repeat;
}

#navigation li.kayttajat a:hover {
  background: url(../img/navi/kayttajat-sel.gif) top left no-repeat;
}

#navigation li.kayttajat a.selected {
  background: url(../img/navi/kayttajat-sel.gif) top left no-repeat;
}

#navigation li.kirja a {
  background: url(../img/navi/kirja.gif) top left no-repeat;
}

#navigation li.kirja a:hover {
  background: url(../img/navi/kirja-sel.gif) top left no-repeat;
}

#navigation li.kirja a.selected {
  background: url(../img/navi/kirja-sel.gif) top left no-repeat;
}

#navigation li.info a {
  background: url(../img/navi/info.gif) top left no-repeat;
}

#navigation li.info a:hover {
  background: url(../img/navi/info-sel.gif) top left no-repeat;
}

#navigation li.info a.selected {
  background: url(../img/navi/info-sel.gif) top left no-repeat;
}



/* LOGINBOX STUFF */

#topbar #loginbox {
  width: 190px;
  height: 155px;
  overflow: hidden;
  float: right;
  margin: 5px 0 0 0px;
  padding: 10px 0px 0px 10px;
/*  border: 1px solid #000; */
  background: url(../img/navi/loginbox.gif) 0px 0px no-repeat;
}

#topbar #loginbox p.mini {
	font-size: 11px;
	color: #739096;
	font-weight: normal;
	margin: 0;
}

#loginbox .profileImage {
		float: right;
		margin: 0 10px 0 0;
}

#topbar #loginbox h2 {
	color: #DB5200;
	font-size: 15px;
	font-weight: bold;
	margin: 10px 0 0 0;
}

#topbar #loginbox h2.logged {
	color: #DB5200;
	font-size: 13px;
	font-weight: bold;
	margin: -5px 0 0 0;
	line-height: 14px;
}

#topbar #loginbox p.extralinks {
	margin: 5px 0 0 0;
	line-height: 0.9em;
	padding: 0;
}

#loginbox img {
  padding: 0;
  margin: 0;
}

#topbar #loginbox p.extrainfo {
	font-size: 11px;
	margin: 0 5px 5px 1px;
	line-height: 1em;
	color: #1f5561;
	padding: 0;
}

#topbar #loginbox p.extrainfo a:link, #topbar #loginbox p.extrainfo a:visited {
	text-decoration: none;
	font-weight: normal;
	color: #333;
	font-size: 10px;
}

#topbar #loginbox p.extrainfo a:hover, #topbar #loginbox p.extrainfo a:active {
	text-decoration: underline;
}

#topbar #loginbox.in p.extralinks {
  float: left;
}

#topbar #loginbox a.extra {
	color: #422800;
	font-size: 10px;
	font-weight: bold;
	text-decoration: none;
}

#topbar #loginbox a.extra:hover {
	text-decoration: underline;
}

#topbar #loginbox a.logout {
	float: right;
	margin: 15px 10px 0 0;
}


#topbar #loginbox #login {
	margin: 0;
	padding: 0;
}

/* FORM STYLES */

.inputtext {
	width: 50px;
	margin: 0 4px 0 0;
	border: 1px solid #BFBFBF;
	color: #676767;
	font-family: georgia,sans-serif;
	font-size: 11px;
	height: 15px;
	padding: 1px;
	background: #fff;
}

.sendbtn {
	width: 16px;
	height: 16px;
	margin: 0;
}

button {
	float:right;
	margin: 5px 0 5px 5px;
	border: none;
	background: transparent;
}



#footer {
  	top: 1100px;
	left: 0px;
  	height: 210px;
  	width: 100%;
	min-width: 1000px;
  	position: absolute;
	background: transparent url(../img/footer-bg.gif) 0px 0px repeat-x;
	color: #403b30;
	padding: 20px 0 20px 0;
	z-index: 3;
}

#footer a {
	font-size: 13px;
	font-weight: normal;
	color: #403b30;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

.sub #footer {
	position: relative;
	clear: both;
	left: 0px;
	top: 200px;
  	height: 210px;
  	width: 100%;
	min-width: 1000px;
	background: transparent url(../img/footer-bg.gif) 0px 0px repeat-x;
	color: #403b30;
	padding: 20px 0 20px 0;
}

#footer .footerlinks {
	float: left;
	margin: 0 0 0 20px;
}

#footer .logos {
	float: right;
	margin: 0 20px 0 0;
}

#footer .sponsors {
	clear: both;
	margin: 10px 0 0 20px;
}

#footer .nk {
	margin: 0 0 0 10px;
}

/* SUBPAGE  */


.sub #bg .compass {
	position: absolute;
	width: 1000px;
	height: 790px;
	left: 50%;
	top: 50px;
	margin-left: -500px;
	background: url(../img/compass.png) 0px -100px no-repeat;
}

* html .sub #bg .compass {
	position: absolute;
	width: 1000px;
	height: 790px;
	left: 50%;
	top: 50px;
	margin-left: -500px;
	background: url(../img/compass.gif) 0px -100px no-repeat;
}

.sub #content {
	position: relative; 
	width: 1000px;
	left: 50%;
	top: 160px;
	margin-left: -500px;
}



.sub #content #subnavi {
	width: 195px;
	min-height: 800px;
	float: left;
}

.sub #content #subnavi #search {
	width: 150px;
	height: 100px;
	padding: 10px;
	background: url(../img/search-border.gif) 0px 0px no-repeat;
}

.sub #content #subnavi #search form .inputtext {
	background: #fff;
	height: 16px;
	width: 100px;
	padding: 1px;
}

.sub #content #subnavi #search h3 {
	font-size: 22px;
	color: #fff;
	margin: 0;
}

.sub #content #subnavi h2, .sub #content #subnavi h3 {
	font-size: 26px;
	color: #fff;
	margin: 0;
}

.sub #content #subnavi ul {
	list-style: none;
	width: 170px;
	overflow: hidden;
}

.sub #content #subnavi li {
	display: block;
	height: 32px;
	width: 160px;
	margin: 4px 0 4px 0;
	padding: 8px 0 0 10px;
	background: url(../img/navi/btn-bg1.gif) 0px 0px no-repeat;
}

.sub #content #subnavi li a {
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
}

.sub #content #subnavi li a:hover {
	text-decoration: underline;
}


.sub #content #contentarea {
	width: 765px;
	min-height: 800px;
	margin: 0 0 0 -15px;
	padding: 0 0 0 15px;
	float: right;
	overflow: visible;
	font-size: 14px;
}

* html .sub #content #contentarea {
	width: 765px;
	height: 800px;
	margin: 0 0 0 -15px;
	padding: 0 0 0 15px;
	float: right;
	overflow: visible;
	font-size: 14px;
}


/* SPESIAALI PISTEVIIVA KÄYTTÄJÄN OMALLE SIVULLE */
.sub #content #contentarea.userpage {
	width: 775px;
	min-height: 800px;
	margin: 0 0 0 -15px;
	padding: 0 0 0 15px;
	float: right;
	background: url(../img/dotline-white-vertical.gif) 0px 0px repeat-y;
}

.sub #content #contentarea h2, .sub #content #contentarea h3 {
	margin: 0;
	font-size: 48px;
	color: #fff;
}

/* SELAUSKONTROLLERIT */

.sub #content #contentarea #browsecontrols {
	width: 500px;
	height: 40px;
	float: left;
	margin: 10px 0 0 0;
	text-align: right;
}

/* TEHTÄVÄOSIOON LIITTYVÄT FEATURET */


/* TEHTÄVÄNANTO */

.sub #content #contentarea #task {
	width: 780px;
	min-height: 350px;
	background: url(../img/characters/woman1.gif) 0px 0px no-repeat;
}

.sub #content #contentarea #task #speakbubble {
	margin: 50px 0 0 100px;
}
.sub #content #contentarea #task #speakbubble #taskheader {
	background: url(../img/tasks/bubble-head.gif) 0px 0px no-repeat;
	width: 568px;
	height: 37px;
	padding: 20px 10px 0 48px;
}

.sub #content #contentarea #task #speakbubble #taskheader h2 {
	font-size: 24px;
	color: #1f5561;
}

.sub #content #contentarea #task #speakbubble #taskcontent {
	width: 558px;
	padding: 0 10px 0 58px;
	color: #5e5e5e;
	line-height: 1.1em;
	float: left;
	background: url(../img/tasks/bubble-body.gif) 38px 0px repeat-y;
}

.sub #content #contentarea #task #speakbubble #taskcontent #tasktext {
	width: 340px;
	float: left;
	overflow: visible;
	margin: 0 0 20px 0;
}

.sub #content #contentarea #task #speakbubble #taskcontent #tasksidebar {
	width: 200px;
	min-height: 200px;
	margin: 0 0 0 10px;
	float: left;
	background: url(../img/tasks/sidebar-bubble.gif) 0px 0px no-repeat;
}

.sub #content #contentarea #task #speakbubble #taskcontent #tasksidebar .taskphoto {
	margin: 10px 0 30px 14px;
}

.sub #content #contentarea #task #speakbubble #taskcontent #tasksidebar #attachments {
	background: url(../img/tasks/attachments-bg.gif) 0px 0px repeat-y;
}

#attachments p {
	margin: 4px 0 0 10px;
}

.sub #content #contentarea #task #speakbubble #taskreply {
	clear: both;
	width: 520px;
	min-height: 100px;
	display: block;
	padding: 10px;
	margin: 20px 0 0 0;
	background: url(../img/blue_dotline.gif) 0px 0px no-repeat;
}

.sub #content #contentarea #task #speakbubble #taskfooter {
	background: url(../img/tasks/bubble-end.gif) 38px 0px no-repeat;
	width: 568px;
	height: 57px;
	padding: 0 10px 0 48px;
	clear: both;
}

/* TEHTÄVÄÄN VASTAUS FORM */
#taskreply #answer {
	margin: 0;
	padding: 0;
	height: 150px;
	display: block;
}
#taskreply #answer label {
	display: block;
	margin: 0 0 10px 0;
}

#taskreply #answer input {
	height: 15px;
	width: 500px;
	padding: 4px 2px 4px 2px;
	border: 1px solid #a0e0ed;
}

#taskreply #answer textarea {
	height: 100px;
	width: 500px;
	padding: 4px 2px 4px 2px;
	border: 1px solid #a0e0ed;
}

#taskreply #answer .sendbtn {
	border: 0;
	width: 150px;
	height: 42px;
	margin: 5px 10px 0 0;
	float: right;
}



/* TEHTÄVÄÄN LÄHETETTY VASTAUS */

.sub #content #contentarea .reply {
	margin: 10px 0 10px 0;
	width: 620px;
	min-height: 135px;
}

.sub #content #contentarea .userdata {
	float: left;
	width: 150px;
	height: 130px;
	padding: 10px 5px 5px 5px;
	overflow: hidden;
	background: url(../img/tasks/reply-userpic.gif) 0px 0px no-repeat;
	color: #737373;
}
.sub #content #contentarea .userdata h3.username {
	font-size: 12px;
	font-weight: bold;
	color: #737373;
}
.sub #content #contentarea .userdata p {
	font-size: 11px;
	font-weight: normal;
	margin: 5px 0 0 0;
	line-height: 1em;
}
.sub #content #contentarea .userdata img {
	border: 0;
}

.sub #content #contentarea .userreply {
	float: left;
	width: 450px;
	min-height: 130px;
	background: url(../img/tasks/reply-bubble-head.gif) top left no-repeat;
	padding-top: 20px;
}

.sub #content #contentarea .userreply .replycontent {
	width: 450px;
	float:left;
	margin: 0;
	background: url(../img/tasks/reply-bubble-body.gif) 21px 0px repeat-y;
}
.sub #content #contentarea .userreply .replycontent .replycontentarrow {
	float: left;
	width: 41px;
	height: 60px;
	background: url(../img/tasks/reply-bubble-arrow.gif) 0px 0px no-repeat;
}
.sub #content #contentarea .userreply .replycontent .replycontentbody {
	width: 380px;
	overflow: hidden;
	float: left;
	color: #5e5e5e;
}

.sub #content #contentarea .userreply .replycontent .replycontentbody h3.replycontentitle {
	font-size: 14px;
	font-weight: bold;
	color: #62b0c0;
	margin: 0;
}

/* KOMMENTIBOKSIT TEHTÄVÄVASTAUKSISSA! */
.replycontentbody .comments {
	margin-top: 20px;
}

.replycontentbody .comments .comment h5 {
	height: 25px;
	color:  #76bdca;
	font-size: 12px;
	font-weight: bold;
	background: url(../img/tasks/oldcomment-titlebg.gif) 0px 0px no-repeat;
	margin: 0;
	padding: 0;
}

.replycontentbody .comments .comment p {
	min-height: 25px;
	width: 370px;
	overflow: hidden;
	background: url(../img/tasks/oldcomment-body.gif) 0px 0px repeat-y;
	margin: 0;
	padding: 1px 5px 5px 5px;
	border-bottom: 1px solid #76bdca;
}

.replycontentbody .commentsList {
	margin: 10px 0 0 0;
}

.replycontentbody .taskReplyCommentForm {
	margin: 5px 0 0 0;
}
.replycontentbody .taskReplyCommentForm .taskReplyCommentField {
	width: 200px;
	height: 40px;
	border: 1px solid #76bdca;
	color: #676767;
	font-family: georgia,sans-serif;
	font-size: 11px;
	padding: 1px;
	margin: 0 0 5px 0;
}

.replycontentbody .taskReplyCommentForm .sendbtn {
	width: auto;
	height: auto;
	border: none;
}

.sub #content #contentarea .userreply p.replyfooter {
	clear: both;
	text-align: right;
	padding: 10px 20px 0 0;
	display: block;
	width: 430px;
	height: 50px;
	background: url(../img/tasks/reply-bubble-end.gif) 0px 0px no-repeat;
	margin: 0;
}

.sub #content #contentarea .userreply p.replyfooter a {
	font-weight: normal;
	text-decoration: underline;
	color: #2f3131;
}

.sub #content #contentarea .userreply p.replyfooter a:hover {
	text-decoration: none;
}

/* ALASIVUN FIILISKUVA-HAHMOJA */

.biker {
	background: url(../img/characters/biker.gif) 500px 100px no-repeat;
}

.bikerboys {
	background: url(../img/characters/bikerboys.gif) 500px 0px no-repeat;
}

.twowomans {
	background: url(../img/characters/2womans_2.gif) 500px 100px no-repeat;
}

.threewomans {
	background: url(../img/characters/3womans_2.gif) 550px 50px no-repeat;
}

.girls1 {
	background: url(../img/characters/girls1.gif) 450px 50px no-repeat;
}

.bench {
	background: url(../img/characters/bench.gif) 550px 100px no-repeat;
}

.family1 {
	background: url(../img/characters/family1.gif) 550px 100px no-repeat;
}

.family2 {
	background: url(../img/characters/family2.gif) 550px 50px no-repeat;
}

.family3 {
	background: url(../img/characters/family3.gif) 550px 20px no-repeat;
}

.fence {
	background: url(../img/characters/fence.gif) 550px 10px no-repeat;
}

.group1 {
	background: url(../img/characters/group.gif) 550px 10px no-repeat;
}

.laydown {
	background: url(../img/characters/laydown.gif) 450px 230px no-repeat;
}

.boat1 {
	background: url(../img/characters/boat1.gif) 500px 60px no-repeat;
}

.threemen {
	background: url(../img/characters/3men.gif) 550px 60px no-repeat;
}



.sit {
	background: url(../img/characters/sitting.gif) 550px 30px no-repeat;
}

.pair1 {
	background: url(../img/characters/pair1.gif) 550px 0px no-repeat;
}


/* ALASIVUN PUHEKUPLIA */
/* KUPLA VASEMMALLE  */
.sub #content #contentarea .speakbubble-left {
	float: left;
	width: 600px;
	min-height: 130px;
	margin: 0 0 0 -20px;
}
* html .sub #content #contentarea .speakbubble-left {
	float: left;
	width: 600px;
	height: 130px;
	margin: 0 0 0 -20px;
}

* html .speakbubble-left img {
	margin: 0;
	padding: 0;
	border: none;
}

.sub #content #contentarea .speakbubble-left .subspeakcontent {
	width: 600px;
	float: left;
	margin: 0;
	padding: 0;
	background: url(../img/sub/bubble-body.gif) 0px 0px repeat-y;
}


.sub #content #contentarea .speakbubble-left .subspeakcontent .subspeakarrow {
	float: right;
	width: 47px;
	height: 43px;
	margin: 0;
	padding: 0;
	background: url(../img/sub/arrow-down.gif) 0px 0px no-repeat;
}
.sub #content #contentarea .speakbubble-left .subspeakcontent .subspeakbody {
	width: 500px;
	float: left;
	color: #5e5e5e;
	padding: 0 10px 0 40px;
	margin: 0;
	min-height: 50px;
}

* html .sub #content #contentarea .speakbubble-left .subspeakcontent .subspeakbody {
	width: 500px;
	float: left;
	color: #5e5e5e;
	padding: 0 10px 0 40px;
	margin: 0;
	height: 50px;
}

* html .subspeakbody form {
	margin: 0;
	padding: 0;
}

* html .sub #content #contentarea .speakbubble-left .subspeakcontent .subspeakbody ol {
	margin: 0;
	padding: 0;
}


/* KUPLA VASEMMALLE, KULMA YLÖS */
.sub #content #contentarea .speakbubble-left .subspeakcontent .subspeakarrowup {
	float: right;
	margin: 100px 0 0 0;
	width: 47px;
	height: 43px;
	background: url(../img/sub/arrow-up.gif) 0px 0px no-repeat;
}


/* KÄYTTÄJÄLISTAUKSET */ 
.sub #content #contentarea .userblock {
	width: 780px;
	min-height: 125px;
	background: url(../img/user/abc-bg.gif) 0px 0px no-repeat;
	margin: 50px 0 0 0;
	color: #fff;
	font-size: 15px;
	float: left;
	
}

* html .sub #content #contentarea .userblock {
	width: 780px;
	height: 125px;
	background: url(../img/user/abc-bg.gif) 0px 0px no-repeat;
	margin: 50px 0 0 0;
	color: #fff;
	font-size: 15px;
	float: left;
}

.sub #content #contentarea .userblock h3.letter {
	font-size: 50px;
	color: #1f5561;
	margin: 40px 0 0 35px;
	width: 60px;
	float: left;
	line-height: 1;
}

* html .sub #content #contentarea .userblock h3.letter {
	font-size: 50px;
	color: #1f5561;
	margin: 20px 0 0 15px;
	width: 60px;
	float: left;
	line-height: 1;
}

.userblock ul {
	list-style: none;
	float: left;
	margin: 0 0 0 70px;
	padding: 0;
	width: 615px;
}

.userblock ul li {
	width: 120px;
	float: left;
	margin: 0 1px 0 1px;
	clear: right;
}

.userblock ul li ul {
	margin: 0;
}
.userblock ul li a:link,  .userblock ul li a:visited{
	font-weight: normal;
	text-decoration: none;
	font-size: 15px;
	color: #fff;
}

.userblock ul li a:hover, .userblock ul li a:active {
	text-decoration: underline;
}


/*  KÄYTTÄJÄN OMA "KOTISIVU" */

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

#mappoints ul li {
	background: url(../img/map/latest-dotline.gif) 0px 0px no-repeat;
	width: 200px;
	height: 24px;
	overflow: hidden;
	padding: 4px 0 0 0;
}

.userPage #mappoints {
  float: left;
  width: 432px;
}
.userPage #mappoints ul li {
		float: left;
}

#mappoints ul li a {
	width: 175px;
	overflow: hidden;
	height: 21px;
	display: block;
	padding: 3px 0 0 25px;
	font-size: 13px;
	font-weight: normal;
	color: #2c8eb1;
	text-decoration: underline;
}

#mappoints ul li a.scary {
	background: url(../img/categories/icon_scary.png) 0px 0px no-repeat;
}

#mappoints ul li a.romantic {
	background: url(../img/categories/icon_romantic.png) 0px 0px no-repeat;
}

#mappoints ul li a.beautiful {
	background: url(../img/categories/icon_beautiful.png) 0px 0px no-repeat;
}

#mappoints ul li a.ugly {
	background: url(../img/categories/icon_ugly.png) 0px 0px no-repeat;
}

#mappoints ul li a.loneliness {
	background: url(../img/categories/icon_loneliness.png) 0px 0px no-repeat;
}

#mappoints ul li a.sunday {
	background: url(../img/categories/icon_sunday.png) 0px 0px no-repeat;
}

#mappoints ul li a.alternative {
	background: url(../img/categories/icon_alternative.png) 0px 0px no-repeat;
}

#mappoints ul li a:hover {
	text-decoration: none;
}

.bannerimage {
	margin: 60px 0 0 0;
}

.sub #content #contentarea #usercontent {
	clear: both;
	width: 470px;
	min-height: 450px;
	float: left;
}

.sub #content #contentarea #usercontent #personalmessage, .sub #content #contentarea #usercontent #mappoints, .sub #content #contentarea #usercontent #userreplys {
	background: url(../img/user/bubble-body.gif) 0px 0px repeat-y;
	min-height: 75px;
	margin: 0 0 0 0;
	padding: 0 20px 0 10px;
}

.sub #content #contentarea #usercontent #personalmessage p, .sub #content #contentarea #usercontent #mappoints p, .sub #content #contentarea #usercontent #userreplys p {
	margin: 0 0 0 0;
}

.singlereply {
  width: 438px;
  background: url(../img/user/bubble-reply-bg.gif) top left repeat-y;
}

.singlereply h5 {
  font-weight: bold;
  font-size: 12px;
  color: #272727;
  padding: 5px 0 5px 15px;
  margin: 5px 0 0 0;
  background: url(../img/user/bubble-reply-top.gif) top left no-repeat;
}

.singlereply p {
  font-weight: normal;
  font-size: 12px;
  color: #272727;
  padding: 0 15px 15px 15px;
  width: 408px;
  overflow: hidden;
  background: url(../img/user/bubble-reply-bottom.gif) bottom left no-repeat;
}

.sub #content #contentarea #usercontent p.userpagetitle {
	font-size: 18px;
	color: #fff;
	font-weight: bold;
}

.sub #content #contentarea #usercontent .userbubblehead {
	margin: 15px 0 0 0;
}
.sub #content #contentarea #usercontent .userbubbleend {
	margin: 0 0 15px 0;
}

.sub #content #contentarea #userphoto {
	min-height: 450px;
	width: 260px;
	float: right;
	margin: 0 0 0 0;
	padding: 15px 20px 0 20px;
	background: url(../img/user/home-photobox.gif) 0px 0px no-repeat;
}

* html .sub #content #contentarea #userphoto { 
	height: 450px;
	width: 260px;
	float: right;
	margin: 0 0 0 250px;
	padding: 15px 20px 0 20px;
	background: url(../img/user/home-photobox.gif) 0px 0px no-repeat;
}


.sub #content #contentarea .usernametitle {
	display: block;
	width: auto;
	float: left;
}


.sub #content #contentarea span.usernametitle {
	display: block;
	width: auto;
	float: left;
	height: 35px;
	font-size: 30px;
	color: #fff;
	margin: 0 0 0 10px;
	padding: 10px 0 0 0;
}


.sub #content #contentarea #userphoto .photocontainer {
	width: 250px;
	height: 250px;
	margin: 0 0 15px 0;
	overflow: hidden;
}

.sub #content #contentarea #userphoto ul {
	list-style: none;
	float: left;
	margin: 0 0 0 10px;
}

.sub #content #contentarea #userphoto ul li {
	float: left;
	width: 100px;
}

.sub #content #contentarea #userphoto ul li ul {
	margin: 0;
	float: left;
}

.sub #content #contentarea #userphoto ul li ul li {
	width: 100px;
}

.sub #content #contentarea #userphoto ul li ul li.nick {
	margin: 0 0 10px 0;
}

/* form */

#loadingContainer {
   	height: 1px;
	overflow: visible;
	width: 595px;
   	margin: 0 auto;
   	padding:0;
   	position:relative;
   	top:130px;
}

#loading {
  background: url(../img/startscreen-bg.gif) 0 30px no-repeat;
  top: 0px;
  left: 0px;
  height: 588px;
  width: 560px;
}
#loading img.wait {
  position: absolute;
  margin-top: 200px;
  left: 195px;
}

#loading img.btn {
  position: relative;
  top: 345px;
  left: 500px;
  width: 137px;
  height: 138px;
  cursor: pointer;
}

#sending {
  width: 500px;
  height: 40px;
  background: url(../img/sender.gif) top left no-repeat;
  margin-bottom: 5px;
  visibility: hidden;
  position: absolute;
  left: 500px;
}

#sending.active {
  visibility: visible;
}

li.submit input, li.value input {
  width: auto;
  height: auto;
}

li.submit input {
  float: right;
	border: none;
}

li.value label {
  display: inline;
}

label {
  display: block;
}
li input, li textarea {
  border: 1px solid #ccc;
  width: 350px;
}

li textarea {
  height: 100px;
}

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


.uploading {
  opacity: .2;
}

#listContent, #itemContent {
  background: url(../img/content-bg.gif) top right no-repeat;
  padding: 10px 0 0 0;
  width: 755px;
}

#item {
  top: 270px;
  width: 300px;
  left: 535px;
  height: 400px;
  overflow: auto;
  position: absolute;
}
#listContent img {
	margin-left: 50px;
  margin-right: 20px;
  float: left;
}

#item img {
  margin: 0;
  float: none;
}

#nextprev {
  border: 1px solid red;
}

#nextPrev a {
  width: auto;
}
#nextPrev .prev {
	float: none;
}
#nextPrev .next {
  margin: 0;
  float: right;
}


#listContent a {
	text-decoration: none;
	width: 770px;
	height: 40px;
	line-height: 40px;
	display: block;
}

#listContent a:hover {
	  background: url(../img/list-bg.gif) top left no-repeat;
}

#maamerkit {
	position: absolute;
	top: 0;
	left: 0;
}

#overlay .ugly a,
#overlay .beautiful a,
#overlay .romantic a,
#overlay .scary a,
#overlay .loneliness a,
#overlay .alternative a,
#overlay .sunday a{
  width: 25px;
  height: 24px;
  margin: 5px;
  cursor: pointer;
}

#overlay .ugly a {
  background: url(../img/categories/icon_ugly.png) top left no-repeat;
}

#overlay .beautiful a {
  background: url(../img/categories/icon_beautiful.png) top left no-repeat;
}

#overlay .romantic a {
  background: url(../img/categories/icon_romantic.png) top left no-repeat;
}

#overlay .scary a {
  background: url(../img/categories/icon_scary.png) top left no-repeat;
}

#overlay .loneliness a {
  background: url(../img/categories/icon_loneliness.png) top left no-repeat;
}

#overlay .alternative a {
  background: url(../img/categories/icon_alternative.png) top left no-repeat;
}

#overlay .sunday a {
  background: url(../img/categories/icon_sunday.png) top left no-repeat;
}


#addForm li input {
  width: auto;
  height: auto;
}

#addForm li input.storyTitle {
  border: 1px solid #ccc;
  width: 350px;
}

#addForm li textarea.storyContent {
  border: 1px solid #ccc;
  width: 350px;
  height: 100px;
}


#addForm li label {
	display: inline;
}
#addForm li.bg {
  background: url(../img/addform/form-titlebg.gif) top left no-repeat;
}

#addForm li.bg2 {
  background: #f2f0e9 url(../img/addform/form-titlebg.gif) top left no-repeat;
}

#addForm ol label.form-title {
  font-weight: bold;
  font-size: 13px;
  padding: 4px 4px 0px 10px;
  color: #24909a;
  display: block;
  clear: both;
}

#addForm li.bg ul {
  background: url(../img/addform/form-bodybg.gif) top left repeat-y;
  float: left;
  width: 414px;
}

#addForm #form-categories {
	padding-left: 10px;
}

#addForm #form-times {
	padding-left: 10px;	
}

#addForm #form-seasons {
	padding-left: 10px;	
}

#addForm #form-story, #addForm #form-image {
  padding-left: 10px;
}

#addForm #form-impact {
	padding-left: 4px;
}

#addForm #form-image .imageUpload {
 	border: 1px solid #ccc;
  	width: 100px;
	padding: 1px;
}

#addForm #form-image .fileUploadSubmit {
	border: none;
	width: 88px;
	height: 32px;
	margin: 10px 0 0 170px;
}

#addForm #form-image .imgprev {
	margin: 10px 0 0 0;
}

#addForm #form-image #imagePreview {
	border: 1px solid #fff;
	background: #fff;
	padding: 1px;
	width: 380px;
	height: 170px;
}

#addForm #form-categories li {
  width: 200px;
  float: left;
}

#addForm #form-seasons li {
  width: 100px;
  float: left;
}

#addForm #form-times li {
  width: 100px;
  float: left;
}

#addForm #form-impact li {
  width: 137px;
  float: left;
  font-size: 10px;
  line-height: 1em;
  height: 24px;
}

#addForm ol label.storytitle, #addForm ol label.story {
  display: block;
  width: 414px;
  clear: both;
}

#addForm li.submit {
	margin-right: 10px;
	height: 60px;
}


/* KARTAN HAKUKONE */

#mapsearch {
	position: absolute;
	width: 700px;
	height: 330px;
	left: 50%;
	margin-left: -500px;
	top: 700px;
	padding: 15px;
	background: url(../img/map/search-bubble.gif) 0px 0px no-repeat;
	z-index: 20;
}

#mapsearch #mapsearch-container {
	width: 700px;
	height: 340px;
	overflow: auto;
}

#mapsearch #mapsearch-container h3.mapsearch-title {
	color: #686868;
	font-size: 18px;
	display: block;
	width: 680px;
	height: 30px;
	margin: 0;
	background: url(../img/map/search-dotline.gif) 0px 25px no-repeat;
}

#mapsearch #mapsearch-container h3.mapsearch-title a {
	color: #686868;
	font-size: 18px;
	text-decoration: underline;
}

#mapsearch #mapsearch-container h3.mapsearch-title a:hover {
	text-decoration: none;
}

#mapsearch #mapsearch-container p.mapsearchtext {
	margin: 0 10px 0 10px;
	font-weight: bold;
	color: #1f5561;
}

#mapsearch #mapsearch-container p.mapsearchinfo {
	font-size: 12px;
	color: #444444;
	margin: 0 10px 0 10px;
}

#mapsearch #mapsearch-container p.mapsearchtext span.time-title {
	margin: 0 0 0 20px;
}

#mapsearch #mapsearch-container select {
	border: 1px solid #bcbcbc;
	padding: 1px;
}

#mapsearch #mapsearch-container #mapsearch-categories, #mapsearch #mapsearch-container #mapsearch-impact {
	background: url(../img/map/search-container-body.gif) 0px 0px repeat-y;
	padding: 0;
}

#mapsearch #mapsearch-container #mapsearch-impact #mapsearch-form-impact li {
  width: 135px;
  float: left;
  font-size: 9px;
}

/* HAKUTULOKSET LISTA */

#mapsearch #mapsearch-container #mappoints ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#mapsearch #mapsearch-container #mappoints ul li {
	background: url(../img/map/searchresult-dotline.gif) 0px 24px no-repeat;
	width: 680px;
	height: 26px;
	padding: 1px 0 0 0;
	color: #9d9d9d;
	font-size: 13px;
	display: block;
}


#mapsearch #mapsearch-container #mappoints ul li p {
	display: block;
	float: right;
	width: 300px;
	margin: 0;
	padding: 0;
	text-align: right;
}

#mapsearch #mapsearch-container #mappoints ul li p a.nickname {
	width: auto;
	height: auto;
	display: inline;
	padding: 0;
	font-size: 13px;
	font-weight: normal;
	color: #2c8eb1;
	text-decoration: underline;
}

#mapsearch #mapsearch-container #mappoints ul li a.scary {
	background: url(../img/categories/icon_scary.png) 0px 0px no-repeat;
	width: 300px;
	float: left;
}

#mapsearch #mapsearch-container #mappoints ul li a.romantic {
	background: url(../img/categories/icon_romantic.png) 0px 0px no-repeat;
	width: 300px;
	float: left;	
}

#mapsearch #mapsearch-container #mappoints ul li a.beautiful {
	background: url(../img/categories/icon_beautiful.png) 0px 0px no-repeat;
	width: 300px;
	float: left;
}

#mapsearch #mapsearch-container #mappoints ul li a.ugly {
	background: url(../img/categories/icon_ugly.png) 0px 0px no-repeat;
	width: 300px;
	float: left;	
}

#mapsearch #mapsearch-container #mappoints ul li a.loneliness {
	background: url(../img/categories/icon_loneliness.png) 0px 0px no-repeat;
	width: 300px;
	float: left;	
}

#mapsearch #mapsearch-container #mappoints ul li a.sunday {
	background: url(../img/categories/icon_sunday.png) 0px 0px no-repeat;
	width: 300px;
	float: left;	
}

#mapsearch #mapsearch-container #mappoints ul li a.alternative {
	background: url(../img/categories/icon_alternative.png) 0px 0px no-repeat;
	width: 300px;
	float: left;	
}

#mapsearch #mapsearch-container #mappoints ul li a:hover {
	text-decoration: none;
}

/*  REKISTERÖITYMISLOMAKE */

#registerForm label {
	font-weight: bold;
	margin: 4px 0 0 0;
}

#registerForm label.normaltext {
	font-weight: normal;
}

.registerFormNick {
	background: url(../img/form-nickbg.gif) 0px 0px no-repeat;
	height: 80px;
	width: 430px;
	padding: 14px 20px 10px 20px;
}

.registerFormNick p {
	font-size: 11px;
}

* html #addForm input.rd {
	border: none;
	width: auto;
	height: auto;
}

#addForm li#titleError, #addForm li#timeError, #addForm li#seasonError, #addForm li#categoryError {
  color: #db5200;
  font-size: 11px;
  font-weight: bold;
  line-height: 1em;
  width: 100%;
  float: none;
  clear: both;
  padding: 5px 0 5px 10px ;
}

#addForm li#extratitleTime, #addForm li#extratitleSeason {
  color: #333333;
  font-size: 12px;
  font-weight: bold;
  line-height: 1em;
  width: 90%;
  float: none;
  clear: both;
  padding: 5px 0 5px 0px;
}

#addForm li#ingressiTime, #addForm li#ingressiCategory, #addForm li#ingressiStory, #addForm li#ingressiImage, #addForm li#ingressiImpact {
  color: #333333;
  font-size: 13px;
  font-weight: normal;
  line-height: 1em;
  width: 90%;
  float: none;
  clear: both;
  padding: 5px 0 5px 0px;
}



#addForm #form-story li#titleError {
		padding-left: 0;
}