BODY {
	padding: 0;
	margin: 0;
	font-size: 11px;
	font-family: verdana, sans-serif;
	color: #126072;
}

BODY.frontpage {
	background: #e8e8e3 url(../tj_img/temp_front_bg.jpg) no-repeat;	
}

BODY.subpage {
	background: #f8f4e6 url(../tj_img/generic-bg-pattern.jpg);
}

BODY.generic {
	background: #f8f4e6 url(../tj_img/generic-bg-pattern.jpg);
}

BODY.post_campaign {
	background: #f8f4e6 url(../tj_img/generic-bg-pattern.jpg);    
}

H1 {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	line-height: 0;
	z-index: 100;
}

P,
.paragraph {
	margin: 1em 0;
}

.big {
	font-size: 13px;
}

.clearer {
	clear: both;	
}

.left {
	float: left;
}

.right {
	float: right;
}

A IMG {
	border: 0;	
}

.block {
	margin: 1em 0;
}

.indented {
	margin-left: 2em;
}

.clickable {
	cursor: pointer;
}

.clickable:hover {
	opacity: 0.7;
}

.row {
	margin: 3px 0;
}

.small {
	font-size: 11px;	
}

.loose {
	margin: 1em 0;	
}

.flash {
	background: #000;
}

INPUT.text {
	border: 1px solid #b2b2b2;
	background: #fff;
	color: #666;
}

INPUT.default_value {
	color: #aaa;
}

.generic INPUT.text {
	font-family: monospace;
	font-size: 18px;
	padding: 2px;
}

.checkbox {
	width: 23px;
	height: 30px;
	background: url('../tj_img/checkbox_empty.png') no-repeat;
	cursor: pointer;
	margin-left: 4px;
}

.checkbox_checked {
	background: url('../tj_img/checkbox_checked.png') no-repeat;
}

.checkbox INPUT,
.radiobutton INPUT {
	display: none;
}

.radiobutton {
	width: 18px;
	height: 18px;
	background: url('../tj_img/radiobutton_empty.png') no-repeat;
	cursor: pointer;
	margin-left: 4px;
}

.radio_checked {
	background: url('../tj_img/radiobutton_selected.png') no-repeat;
}

.frontpage #doc {
	width: 760px;
	margin: 0 0 100px 100px;
	position: relative;
	padding-top: 30px;
}

	.frontpage H1 {
		width: 168px;
		height: 112px;
		background: url(../tj_img/logo.png) no-repeat;
	}

.subpage #doc {
	width: 666px;
	min-height: 800px;
	padding: 80px 14px 0 190px;
	background: url(../tj_img/sub_bg.png) no-repeat;
	position: relative;
}

	.subpage H1 {
		width: 187px;
		height: 125px;
	}

	.subpage .artisti {
		min-height: 280px;
	}
	
	.subpage .artisti .photo {
		float: left;
		width: 252px;
	}
	
	.subpage .artisti .intro {
		float: right;
		width: 400px;
		position: relative;
		height: 300px;
	}

		.subpage .artisti .intro H2 {
			margin-top: 15px;	
		}

		.subpage .intro .frame_default {
			visibility: visible;
			position: absolute;
			top: 0;
			left: 0;
			overflow: hidden;
		}
	
		.subpage .intro .frame_confirm {
			visibility: hidden;
			position: absolute;
			top: 0;
			left: -1000px;
			width: 395px;
		}
	
		.subpage .intro .frame_confirm .summa {
			display: none;
			height: 100px;
		}

		.subpage .intro .frame_confirm .custom {
			padding: 0 0 0 8px;
		}
		
		.subpage .intro .frame_confirm .custom INPUT {
			width: 3em;
			margin: 0;
		}

	
	.subpage .actions {
		width: 206px;
		min-height: 352px;
		clear: left;
	}
		
		.subpage .actions P {
			padding: 0 0 0 56px;
			margin: 0 0 10px 0;
			min-height: 60px;
			position: relative;
		}

		.subpage .actions P .icon {
			position: absolute;
			top: 0;
			left: 0;
		}

		.subpage .actions .title {
			display: block;
		}
		
		.subpage .actions .video {
			margin-top: 20px;
		}
		
		.subpage .actions .digi {
			margin-top: 20px;
		}
		
		.subpage .actions .facebook {
			margin-top: 20px;
		}
			
	.subpage .box {
		position: absolute;
		/*width: 412px;
		height: 308px;*/
		width: 447px;
		height: 334px;
		top: 380px;
		right: 15px;
		overflow: hidden;
		background: url(../tj_img/box_bg.png) no-repeat;
	}
	
	.subpage .box H2 {
		margin: 0;
		width: 400px;
	}
	
	.subpage .box .frame {
		position: absolute;
		/*display: none;*/
		top: 10px;
		left: 17px;
		width: 412px;
		min-height: 324px;
		background: #d6f2f6;
		font-family: verdana;
		font-size: 14px;
		color: #1d91a4;
	}
		
	.subpage .box .frame INPUT.text {
		font-size: 11px;
	}
	
	.subpage .box .frame LABEL {
		display: block;
		margin: 6px 0;
		color: #044855;
		cursor: pointer;
		font-family: verdana;
		font-size: 16px;
		color: #126072;
	}
		
	.subpage .box .frame .buttons {
		position: absolute;
		bottom: 15px;
		left: 0;
		width: 100%;
	}
		
	.summa {
		float: left;
		width: 122px;
		/*height: 108px;*/
		position: relative;
		font-size: 11px;
		padding: 0 10px 0 72px;
	}
	
	.neula { background: url(../tj_img/icon_neula.png) no-repeat;}
	.liuos { background: url(../tj_img/icon_liuos.png) no-repeat; }
	.kyna { background: url(../tj_img/icon_kyna.png) no-repeat; }
	.keksi { background: url(../tj_img/icon_keksi.png) no-repeat; }
	.pilleri { background: url(../tj_img/icon_pilleri.png) no-repeat; }
	.pisara { background: url(../tj_img/icon_pisara.png) no-repeat; }
	.custom { background: url(../tj_img/sum_custom.png) 8px 2px no-repeat; margin-top: 20px }

	.eur_5 { background: url(../tj_img/sum_5e.png) 17px 3px no-repeat; }
	.eur_12 { background: url(../tj_img/sum_12e.png) 17px 3px no-repeat; }
	.eur_20 { background: url(../tj_img/sum_20e.png) 17px 3px no-repeat; }
	
	.summa LABEL {
		position: absolute;
		top: 63px;
		left: 0;
		width: 55px;
		height: 21px;
		margin: 0;
	}

	.subpage .box .frame .custom .input {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.subpage .box .frame LABEL.small {
		font-size: 11px;
	}
	
	.subpage .box .frame LABEL.short {
		float: left;
		width: 25%;
		margin: 0;
	}
	
	.subpage .box .frame LABEL.long {
		float: left;
		width: 40%;
		margin: 0;
	}
	
	.subpage .box #f_first {
		display: block;
	}

	.subpage .box #f_first .old {
		background: url(../tj_img/liity_vanha_lahjoittaja_bg.png) no-repeat;
		width: 400px;
		height: 111px;
		padding: 7px 16px 0 16px;
	}

	.subpage .box #f_first .new {
		background: url(../tj_img/liity_uusi_lahjoittaja_bg.png) no-repeat;
		width: 400px;
		height: 32px;
		padding: 7px 16px 0 16px;
	}

	.subpage .box #f_first INPUT.text {
		width: 257px;
		height: 17px;
	}
		
	.subpage .box #f_old_raise LABEL {
		display: inline;
		margin-right: 20px;
		color: #1D91A4;
	}

	.subpage .box #f_new_address {
		padding: 0pt 50px 0pt 35px;
		width: 335px;
	}

	.subpage .box #f_new_address LABEL {
		width: 40%;
	}

	.subpage .box #f_new_address INPUT.text {
		width: 55%;
	}

	.subpage .box #f_new_address H4 {
		font-size: 11px;
		font-weight: bold;
		margin: 0 0 8px 0;
	}

	.subpage .sidebar {
		position: absolute;
		top: 140px;
		left: 35px;
		width: 100px;
		z-index: 10;
	}
	
	.subpage .col-left {
		width: 250px;
		height: 510px;
		float: left;
	}

	.subpage .col-right {
		width: 394px;
		height: 510px;
		float: right;
	}

	.subpage .col-bottom {
		clear: both;
		background: url(../tj_img/kadet.jpg) 46px 5px no-repeat;
		padding-left: 273px;
		min-height: 175px;
	}

	.thanks .col-left IMG {
		margin-bottom: 15px;
	}
	
	.thanks H3 {
		margin: 0;
	}
	
	.thanks .col-right P {
		margin-top: 5px;
	}
	
	.thanks .action {
		position: relative;
	}
	
	.thanks .action .title {
		display: block;
		margin-bottom: 8px;
	}
	
	.thanks .action .icon {
		position: absolute;
		top: 0;
		left: 0;
	}

	.thanks .kirista {
		padding-left: 180px;
		height: 180px;
		margin-top: 20px;
	}

	.thanks .tuki {
		padding-left: 115px;
		height: 100px;
	}

	.thanks .tuki .icon {
		left: 40px;
	}

	.thanks .facebook {
		padding-left: 115px;
		height: 100px;
	}

	.thanks .facebook .icon {
		left: 40px;
	}
	

.generic .logo {
	position: absolute;
	top: 0;
	left: 24px;
	z-index: 100;
}

.generic #doc {
	background: url(../tj_img/generic-bg.png) no-repeat;
	width: 826px;
	min-height: 640px;
	padding: 52px 0 0 24px;
	position: relative;
}

	.generic LABEL.checkbox {
		height: 30px;
	}

	.generic LABEL.radio {
		height: 18px;
	}
	
	.generic .main {
		height: 530px;
	}

	.generic .kirista_aloitus .left {
		float: left;
		width: 470px;
		margin: 120px 0 0 40px;
	}
	
	.generic .kirista_aloitus .right {
		float: left;
		width: 232px;
		margin: 114px 0 0 40px;
		font-size: 12.5px;
	}

	.generic .kirista_kustomointi .center {
		height: 530px;
		margin: 0 175px 0 204px;
	}

	.generic .kirista_kustomointi H2 {
		margin: 16px 0 0 0;
	}

	.generic .kirista_kustomointi .center .video {
		float: left;
		width: 216px;
		margin: 12px 0 10px 10px;
	}

	.generic .kirista_kustomointi .center .video:first-child {
		margin-left: 0;
	}

	.generic .kirista_kustomointi .center .flash {
		margin-bottom: 6px;	
	}

	.generic .kirista_kustomointi .center .radiobutton {
		float: left;
	}

	.generic .kirista_kustomointi .center LABEL {
		line-height: 20px;
		margin-left: 6px;
	}

	.generic .kirista_esikatselu {
		position: relative;	
	}
	
	.generic .kirista_esikatselu .left {
		float: left;
		width: 260px;
		margin: 100px 0 0 44px;
	}

	.generic .kirista_esikatselu .right {
		float: left;
		width: 468px;
		margin: 10px 0 0 0;
	}

	.generic .kirista_esikatselu .bottom {
		clear: both;
		padding-top: 30px;
		margin: 0 44px 0 44px;
	}
	
	.generic .kirista_esikatselu LABEL {
		display: block;
		font-size: 12px;
	}

	.generic .kirista_esikatselu INPUT.text {
		display: block;
		margin: 3px 0 4px 0;
	}

	.generic .kirista_esikatselu STRONG {
		display: block;
		text-decoration: underline;
		font-weight: bold;
		margin-top: 20px;
	}
		
	.shadow {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		width: 100%;
		background: #000;
		opacity: 0.45;
		filter: alpha(opacity=45); /* FIXME */
	}

	.generic .editor {
		display: none;
		position: absolute;
		top: 84px;
		left: 275px;
		z-index: 2000;
		width: 476px; /* 551px */
		height: 408px; /* 478px */
		background: url(../tj_img/mail_bg.png) no-repeat;
		padding: 40px 45px 30px 30px;
		font-family: verdana, sans-serif;
		font-size: 12px;
		color: #000;
	}

		.generic .editor .headers DIV {
			height: 1.8em;
			clear: both;
		}
	
		.generic .editor .label {
			float: left;
			display: block;
			color: #808080;
			width: 9em;
			font-weight: bold;
			text-align: right;
			margin-right: 1em;
		}
	
		.generic .editor #editor_subject {
			font-weight: bold;
		}
	
		.generic .editor .body {
			border-top: 1px solid #cdd5d6;
			border-bottom: 1px solid #cdd5d6;
			margin: 15px 0;
			padding: 10px 0 40px 0;
		}
	
		.generic .editor TEXTAREA {
			border: 0;
			width: 100%;
			height: 120px;
			font-family: verdana, sans-serif;
			font-size: 12px;
		}
		
		.generic .editor P.small {
			font-size: 10px;
			margin: 10px 0;
		}
	
		.generic .editor IMG.clickable {
			float: right;
			margin-top: 20px;
		}

	.generic .error {
		display: none;
		position: absolute;
		top: 140px;
		left: 226px;
		z-index: 3000;
		width: 342px;
		height: 214px;
		background: url(../tj_img/error_bg.png) no-repeat;
	}

	.generic .kirista_kiitos .center {
		margin: 0 200px;
		text-align: center;
		padding-top: 160px;
	}
	
	BODY.video {
		background: #000 url(../tj_img/video_bg.jpg) no-repeat;
	}
	
	BODY.video .flash_bg {
		margin: 140px auto 20px auto;
		width: 679px;
		height: 417px;
		background: url(../tj_img/video_flash_bg.png) no-repeat;
		position: relative;
	}

	.tuki .col-right {
		width: 384px;
	}
	
	.tuki .col-right .corner_icon {
		margin: -16px 20px 0 0;
		float: right;
	}

	.tuki .col-right IMG.h2 {
		margin: 28px 0 22px 0;
	}

	.tuki .col-right .intro {
		font-size: 14px;
		margin: 20px 20px 10px 0;
	}
	
	.tuki .col-right .intro {
		font-size: 14px;
	}
	
	.tuki .col-right H3 {
		font-size: 14px;
		font-weight: normal;
		color: #0c84a0;
		font-family: verdana;
	}

	.tuki .col-left .mp3 {
		margin-bottom: 20px;
	}

	.tuki .col-left .action:first-child {
		margin-top: 20px;
	}
	
	.tuki .col-left .action {
		margin: 10px 0;
	}

	.tuki .col-left .action IMG {
		display: block;
	}

	.tuki .col-left .action P {
		margin: 0 0 0 62px;
	}
	
	.tuki .codebox {
		margin: 10px 0;
	}
	
	.tuki .codebox TEXTAREA {
		display: block;
		clear: left;
		width: 100%;
		color: #0269a8;
		font-size: 11px;
		font-family: monospace;
	}

	.tuki .codebox .left {
		color: #323232;
		font-weight: bold;
		font-size: 11px;
		padding-bottom: 3px;
	}

	.tuki .codebox .right {
		color: #0c84a0;
		font-weight: bold;
		font-size: 11px;
		padding-bottom: 3px;
	}
	
	.tuki .preview {
		display: block;
		margin: 3px 0;
		text-decoration: underline;	
	}
	
	.tuki .shadow {
		/*opacity: 0.8;
		filter: alpha(opacity=80);*/
		opacity: 1;
		filter: none;
		background: transparent url(../tj_img/banner_preview_bg.png);
	}
	
	.tuki .shadow .container {
		margin: 25% auto 0 auto;
		position: relative;
		width: 728px;
		text-align: center;
	}

	/*.tuki .shadow .container .flash {
		display: none;
	}*/

	.tuki .shadow .container OBJECT {
		margin: 0 auto;
		position: relative;
	}
	
H2 {
	margin: 0;	
	color: #0c84a0;
	font-size: 28.05px;
}

.frontpage H2 {
	margin-left: 78px;
	line-height: 1em;
}

H3 {
	color: #0c84a0;
	font-size: 18px;
	font-weight: bold;
	font-family: "arial narrow";
}

A {
	color: #0c84a0;
	text-decoration: underline;
}

.section {
	padding: 20px 40px;
	background: url(../tj_img/hr.png) no-repeat;	
}

.section H4 {
	font-size: 16px;
	color: #0c84a0;
	margin: 0;
	font-family: monospace;
}

.artistit {
	background: url(../tj_img/artistit_bg.jpg) 40px 0 no-repeat;
	padding-top: 0;
	min-height: 624px;
}

	.artistit H3 {
		display: none;
		color: #0c84a0;
		text-align: center;
		font-size: 20px;
		margin: 0 auto 22px auto;
	}
	
	.artistit H4 {
		color: #0c84a0;
		font-size: 18px;
	}
	
	.artistit A {
		display: block;
		color: #0e91af;
	}
	
	.artistit .artisti {
		float: left;
		width: 226px;
		padding-top: 354px;
		position: relative;
	}
	
	.artistit .artisti STRONG {
		/*margin: -272px 0 252px 20px;*/
		position: absolute;
		top: 7px;
		left: 4px;
		display: block;
		color: #fff;
		font-weight: bold;
		font-size: 12px;
		font-family: monospace;
	}
	
	.artistit .artisti STRONG .number {
		font-size: 18px;
	}
	
	.artistit .anssi .foto {
		position: absolute;
		top: 28px;
		left: -16px;
	}
	
	.artistit .jonna .foto {
		position: absolute;
		top: 31px;
		left: -8px;
	}
	
	.artistit .pojat .foto {
		position: absolute;
		top: 35px;
		left: -4px;
	}
	
	.artistit .nuoli {
		width: 212px;
		height: 75px;
		text-indent: -1000px;
		display: block;
		position: absolute;
		top: 278px;
		left: 0;
	}
	
	.artistit .anssi .nuoli {
		background: url(../tj_img/nuoli_anssi.png) left top no-repeat;
	}
	.artistit .anssi .nuoli:hover {
		background: url(../tj_img/nuoli_anssi.png) left bottom no-repeat;
	}
	
	.artistit .jonna .nuoli {
		background: url(../tj_img/nuoli_jonna.png) left top no-repeat;
	}
	.artistit .jonna .nuoli:hover {
		background: url(../tj_img/nuoli_jonna.png) left bottom no-repeat;
	}
	
	.artistit .pojat .nuoli {
		background: url(../tj_img/nuoli_pojat.png) left top no-repeat;
	}
	.artistit .pojat .nuoli:hover {
		background: url(../tj_img/nuoli_pojat.png) left bottom no-repeat;
	}
	
	.artistit .artisti A.kirista {
		/*background: url(../tj_img/icon_kirista.png) 6px 0 no-repeat;
		padding: 2px 0 2px 36px;*/
		margin: 2px 0 2px 4px;
	}
	

	.artistit .artisti A.tuki {
		/*background: url(../tj_img/icon_tuki.png) 9px 0 no-repeat;*/
		padding: 2px 0 2px 6px;
	}

	
	.artistit .intro {
		width: 450px;
		padding-top: 25px;
	}
	
.flash_small {
	width: 208px;
	height: 122px;
	padding: 4px 4px 5px 4px;
	background: url(../tj_img/flash_bg_small.png) no-repeat;
}

.flash_medium {
	width: 465px;
	height: 272px;
	padding: 8px 9px 8px 9px;
	background: url(../tj_img/flash_bg_medium.png) no-repeat;
}

.post-it {
	position: absolute;
	display: block;
	top: 510px;
	left: 526px;
	width: 203px;
	height: 137px;
	background: url(../tj_img/post-it.png) no-repeat;
	text-indent: -2000px;
}

.footer {
	clear: both;	
}

.subpage .footer {
	position: absolute;
	top: 790px;
	left: 170px;
	width: 700px;
}

.generic .footer {
	margin-top: 40px;	
}

.generic .footer P.last-child {
	width: 480px;	
}
	
	.footer P {
		float: left;
		width: 155px;
		font-size: 9px;
		color: #1c757e;
	}
	
	.footer P.last-child {
		float: right;
		width: 362px;
	}

.invalid {
	background: #ffcdcd !important;
	border: 1px solid #ff0000 !important;
}

	
.ac_results {
	border: 1px solid gray;
	background-color: white;
	padding: 0;
	margin: 0;
	list-style: none;
	position: absolute;
	z-index: 10000;
	display: none;
	width: 200px;
}

.ac_results li {
	padding: 2px 5px;
	white-space: nowrap;
	color: #101010;
	text-align: left;
	text-transform: capitalize;
}

.ac_over {
	cursor: pointer;
	background-color: #F0F0B8;
}

.ac_match {
	text-decoration: underline;
	color: black;
}

#btn_takaisin {
	width: 96px;
	height: 32px;
	background: url(../tj_img/btn_takaisin.png) left top no-repeat;
	margin-top: 16px;
}

#btn_takaisin:hover {
	background: url(../tj_img/btn_takaisin.png) left bottom no-repeat;
}

.calendar {
	width: 776px;
	margin: 0 auto;
}

.calendar .month {
	position: relative;
	width: 150px;
	height: 125px;
	display: block;
	float: left;
	text-align: center;
	margin: 10px 22px;
	text-decoration: none;
	z-index: 110; /* IE bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
}

.calendar .month IMG {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin-bottom: 6px;
	width: 100%;
	z-index: 110;
}

.calendar .month SPAN {
	position: absolute;
	display: block;
	width: 100%;
	bottom: 0;
	left: 0;
	font-weight: bold;
	text-decoration: none;
	z-index: 110;
	text-align: center;
}

.box IMG.title {
	margin-top: 6px;
}

.post_campaign #doc {
    background: url(../tj_img/main_post_campaign_bg.png) no-repeat;
    margin-left: 0;
    padding-left: 100px;
}

    .post_campaign .section_top {
        height: 560px;
        background: none;
    }
    
    .post_campaign .section_top #nabbula {
        position: absolute;
        left: 640px;
        top: 90px;
    }

    .post_campaign .section_top .artisti {
        position: absolute;
        top: 500px;        
    }

    .post_campaign .section_top .artisti A {
        display: block;
        margin-bottom: 1px;
    }
    
    .post_campaign .section_top .anssi {
        left: 144px;
    }

    .post_campaign .section_top .jonna {
        left: 373px;
    }
    
    .post_campaign .section_top .pojat {
        left: 602px;        
    }