/* Kielijelppi - 2007
------------------------ */
* {
	padding: 0;
	margin: 0;
	border: 0;
}

ol,ul {
	list-style:none;
}

a:link, a:visited {
	text-decoration: none;
	color: #21549E;
}

a:hover {
	color: #143462;
	text-decoration: underline;
}

body, html {
	color: #000; 
	font-family: Verdana, Arial, Tahoma, sans-serif;
	height: 100%;
	background: #fff url(../images/kj2_05.gif) repeat-y left; /* Vasen harmaa taustapalkki */
}

body {
	font-size: 70%;
/*	min-width: 760px;*/
}

.clear {clear: both;}

#mainContainer {
	min-height: 100%;
	background: transparent url(../images/kj2_bg1.gif) no-repeat bottom right;
}

* html #mainContainer {
	height: 100%; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
}

body#puheviestinta #mainContainer {
	background: transparent url(../images/kj2_bg3.gif) no-repeat bottom right;	
}

body#kirjoitusviestinta #mainContainer {
	background: transparent url(../images/kj2_bg2.gif) no-repeat bottom right;	
}

/* Header
------------------------------*/
#header {
  	background: url(../images/tkpakki/kj2_tk.png) repeat-x;
	height: 87px;
}

.headerbg {
  	background: url(../images/tkpakki/kj2_tk_bg_header.png) no-repeat left;
	height: 87px;
	width: 100%;
}

#header h1 {
	width: 161px;
	height: 54px;
	position: absolute;
	top: 12px;
	left: 30px;
  	background: url(../images/tkpakki/kj2_tk_logo.png) no-repeat left;
	text-indent: -5000px;
}

#header h1 a, #header span a {
	display: block;
	width: 100%;
	height: 100%;
}

#header span {
	position: absolute;
	height: 25px;
	width: 175px;
	right: 30px;
	top: 30px;
	background: url(../images/tkpakki/kj2swe_tk.png) no-repeat;
	text-indent: -5000px;
}

/* Main content
------------------------------*/

.outer {
	padding-left: 200px; /*** Same width as margin-left for the float-wrap div ***/
	padding-right: 210px; /*** Our right column width ***/
}

.outer_wide {
	padding-left: 200px; /*** Same width as margin-left for the float-wrap div ***/
}

.inner {
	width: 100%;
	padding-bottom: 45px; /*** Padding-bottom value is the same value as the total height of the footer ***/
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid 
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
***/
.float-wrap {
	float: left;
	width: 100%;
	margin-left: -200px; /*** Same length as .outer padding-left but with negative value ***/
}

#content {
	float: right;
	margin-right: -200px; /*** Same length as .outer padding-left but with negative value ***/
	width: 100%;
	position: relative; /*** IE needs this  ***/
}

body#kirjoitusviestinta .sectionhead {
	background: url(../images/kj2_taustak_kv.gif) no-repeat top left;
	padding: 0 0 0 140px;
	min-height: 150px;
}

body#puheviestinta .sectionhead {
	background: url(../images/kj2_taustak_pv.gif) no-repeat top left;
	padding: 0 0 0 140px;
	min-height: 150px;
}

body#verkkoviestinta .sectionhead {
	background: url(../images/kj2_taustak_vv.jpg) no-repeat top left;
	padding: 0 0 0 140px;
	min-height: 150px;
}


body#kirjoitusviestinta #content {
}

#content_wide {
	float: right;
	margin-right: -200px; /*** Same length as .outer padding-left but with negative value ***/
	width: 100%;
	position: relative; /*** IE needs this  ***/
}

.contentWrap {
	padding: 0 15px;
}

.crumbs {
	font-size: 11px;
	color: #999;
}

.crumbs a:link, .crumbs a:visited {
	color: #999;
	text-decoration: none;
}

.crumbs a:hover {
	color: #727272;
}


#content p {
	font-size: 12px;
	line-height: 140%;
	margin: 0 3em 15px 0;
}

h1, h2, h3, h4, h5 {
	font-family: "Lucida Grande", Verdana, arial, helvetica, sans-serif;
}

#content h1 {
	font-size: 24px;
	margin: 0 1.5em 1em 0;
	padding: .3em 0 0 0;
}

#content h2 {
	border-bottom: 1px solid #eee;
	margin: 2em 3em .4em 0;
	font-size: 17px;
}

#content h3 {
	margin: 2em 0 .4em 0;
	font-size: 14px;
}

#content ul, #content ol {
	font-size: 12px;
	margin: 10px 2em 1em 3em;
}

#content ul {
	list-style: square;
}

#content ol {
	list-style-type: decimal;
}

#content li {
	margin: 0 0 3px 0;
}

#content blockquote {
	background: #eee;
	padding: 20px;
	margin: 10px 8em 10px 10px;
	font: normal 13px Georgia, "Times new roman", Times, serif;
}

#content blockquote.neg {
	background: #eee url(/images/tk_ei.png) no-repeat top left;
	padding: 12px 10px 8px 40px;
	font: normal 13px Georgia, "Times new roman", Times, serif;
}

#content blockquote.pos {
	background: #eee url(/images/tk_jaa.png) no-repeat top left;
	padding: 12px 10px 8px 40px;
	margin: 10px 8em 25px 10px;
	font: normal 13px Georgia, "Times new roman", Times, serif;
}

#content blockquote p, #content blockquote p.neg {
	margin: 0;
	padding: 0;
	font: normal 13px Georgia, "Times new roman", Times, serif;
}

.nosto, .nostoswe {
	width: 225px;
	margin: 15px 25px 0 0;
	height: 140px;
	background: #eee;
	position: relative;
	float: left;
}

.paanosto {
	width: 250px;
	margin: 10px 15px 25px 0;
	height: 250px;
	background: #eee;
	position: relative;
	float: left;
}

/*.nosto.eka, .nostoswe.eka {background:url(../images/kj2_kv_1.gif);}
.nosto.toka, .nostoswe.toka {background:url(../images/kj2_kv_2.gif);}
.nosto.kolmas, .nostoswe.kolmas {background:url(../images/kj2_kv_3.gif);}
.nosto.neljas, .nostoswe.neljas {background:url(../images/kj2_kv_4.gif);}
.nosto.viides, .nostoswe.viides {background:url(../images/kj2_kv_5.gif);}
.nosto.kuudes, .nostoswe.kuudes {background:url(../images/kj2_kv_6.gif);}
.nosto.extra, .nostoswe.extra {background:url(../images/kj2_nosto_ekstra.gif);}*/

.paanosto.eka {background:url(../images/kj2_pv.jpg);	/*background: #f2d977;*/ }
.paanosto.toka {background:url(../images/kj2_kv.jpg);/*background: #e6b9b4;*/ }
.paanosto.kolmas {background:url(../images/kj2_vv.jpg);/*background: #e6b9b4;*/ }

#content .nosto h3, #content .nostoswe h3 {
	margin: 10px 10px 0 10px;
	text-align: center;
}

#content .paanosto h3 {
	margin: 10px 20px; 
}

#content .nosto.extra h4, #content .nostoswe.extra h4 {
	margin: 10px 15px 0 15px ;
	font-size: 12px;
}

#content .nosto p, #content .nostoswe p, #content .paanosto p  {
	margin: 5px 20px 20px 20px;
	color: #001D3A;
}

#content .nosto.extra p {
	margin: 0 0 0 15px;
	/*color: #999;*/
	color: #3c3c3c;
	font-size: 11px;
}

#content .nosto p.note, #content .nostoswe p.note {
	position: absolute;
	bottom: 0;
	margin: 0 0 5px 42px;
	text-align: center;
	font-size: 11px;
	color: #000;
}

#content .nosto p.note {
	margin: 0 0 5px 53px;
}

#content .nostoswe p.note {
	margin: 0 0 5px 30px;
}

body#kirjoitusviestinta h1, body#kirjoitusviestinta h2, body#kirjoitusviestinta h3, body#kirjoitusviestinta h4, body#kirjoitusviestinta h5, body#kirjoitusviestinta h6 {
	color: #464698;
}

body#kirjoitusviestinta .nosto h3 a, body#kirjoitusviestinta .nosto h4 a {
	color: #464698;
}

body#kirjoitusviestinta .nosto, body#kirjoitusviestinta .nostoswe {
	/*background: #e3a268;*/
/*	background: #eeb223;
	background: #e6b9b4; */
	background: transparent url(/images/kj2_nosto_kv.gif) no-repeat;
}

body#puheviestinta h1, body#puheviestinta h2, body#puheviestinta h3, body#puheviestinta h4, body#puheviestinta h5, body#puheviestinta h6 {
/*	color: #358D0E;*/
	color: #464698;
}

body#puheviestinta .nosto h3 a, body#puheviestinta .nosto h4 a {
/*	color: #358D0E;*/
	color: #464698;
}

body#puheviestinta .nosto, body#puheviestinta .nostoswe {
	/*background: #f2d977;*/
	background: transparent url(/images/kj2_nosto_pv.gif) no-repeat;
	/*background: #ffcc66;*/
}

#content ul.prevnext {
	margin: 45px 0;
	padding: 0;
}

ul.prevnext li {
	list-style: none;
}

ul.prevnext li.prev {
	float: left;
} 

ul.prevnext li.next {
	float: right;
}

#content a.ulos {
	background:url(../images/ulos.gif) no-repeat right;
	padding: 0 18px 0 0;
}

/* Sidebar
------------------------------*/

/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, 
div.left is carried over into the proper position. 
***/
#sidebar {
	float: left;
	width: 189px;
	position: relative; /* IE */
}

#sidebar ul {
	margin: 15px 0 0 25px;
}

#sidebar ul ul {
	margin: 10px 0 25px 15px;
}

#sidebar ul li {
	margin: 0 0 8px 0;
}

#sidebar ul li:hover {
	list-style: square;
}

#sidebar ul li a:link, #sidebar ul li a:visited {
	text-decoration: none;
	color: #192532;
	font-weight: bold;
}

#sidebar ul ul li a:link, #sidebar ul ul li a:visited {
	text-decoration: none;
	color: #192532;
	font-weight: normal;
}

/* Sidebar
------------------------------*/

#right {
	float: right; 
	width: 210px;
	position: relative; /*** IE needs this  ***/
	margin-right: -210px; /** This negative margin-right value is in this example the same as the right column width. ***/
	position: relative; /*** IE needs this  ***/
}
.right_push {
	margin: 0 10px 0 0;
/*	background: url(../images/kj2_rounded_01.gif) no-repeat top;*/
	background: #eee;
}

body#puheviestinta .right_push {
	margin: 0 10px 0 0;
/*	background: url(../images/kj2_rounded_01.gif) no-repeat top;*/
	background: #f2d977;
}

body#kirjoitusviestinta .right_push {
	margin: 0 10px 0 0;
	background: #e6b9b4;
/*	background: url(../images/kj2_kv_rounded_01.gif) no-repeat top;
*/}

#oikeanavi {
	margin: 0 15px 0 10px;
}

#oikeanavi ul {
	font-size: 12px;
}

#oikeanavi li {
	margin: 0 0 5px 0;
}

#oikeanavi li a {
/*	text-decoration: none;
	color: #A91616;*/
}

.low {
	height: 12px;
	background: url(../images/kj2_rounded_02.gif) no-repeat top;
}

body#kirjoitusviestinta .low {
	height: 5px;
	background: url(../images/nosto_kv_03_right.gif) no-repeat top;
}

body#puheviestinta .low {
	height: 5px;
	background: url(../images/nosto_pv_03_right.gif) no-repeat top;
}


#right hr {
	display: none;
}

#right h3 {
	padding: 7px 0 0 0;
	margin: 0 0 7px 0;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
}

#right p {
	margin: 10px;
	line-height: 130%;
}

#right p.info {
	margin: 15px 15px 5px 15px;
	text-align: center;
}

/* Footer
------------------------------*/

#footer {
	height: 28px; /*** The drawback with this solution is that the height of the footer can't be flexible. If you add so much content to the footer that it extends 45px, you will get a vertical scrollbar and the content will overflow the footer if you don't set overflow to hidden ***/
	margin-top: -28px; /*** By using a negative margin-top we now moves the footer up the same amount as the footer height to avoid vertical scrolling. Remember, if you use borders and padding on your footer you will have to calculate this in your negative margin-top value also. ***/
	text-align: right;
	border-top: 2px solid #000;
	background: #1D8DB5;
}

#footer p {
	margin: 5px 15px 0 0;
	color: #fff;
	clear: both;
}

#footer a {
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}

#footerLeft, #footerRight {
	height: 15px; 
}

#footerLeft {
	float: left; 
	width: 165px; /*** Same length as .outer padding-left ***/
}

#footerRight {
	float: right;
	width: 115px; /*** Same length as right plus some padding. If you get a horisontal scrollbar try to adjust this value. ***/
}

/* Forms
------------------------------*/

#sidebar form {
	margin: 20px 0 0 15px;
	font-size: 11px;
}

#sidebar form input {
	border: 1px solid #999;
	padding: 2px;
}

/* Työkalupakki
------------------------------*/

img.mkuva {
	float: left;
}

img.selitekuva {
	float: left;
	margin: 0 10px 10px 0;
	border: 1px dotted #ccc;
}


/*div.aakkonen {
	padding: 3px;
	width: 140px;
	margin: 0 3px 10px 0;
	float: left;
	min-height: 200px;
	border-top: 1px dotted #ccc;
	border-right: 1px dotted #ccc;
}

#content div.aakkonen ul {
	margin-left: 18px;
}

#content div.aakkonen h3 {
	margin: 4px 0 .4em 15px;
}
*/

div.aakkonen {
	width: 300px;
}

div.aihealue {
	width: 500px;
}

div.aakkonen:after, div.aihealue:after {
	content: ".";
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}

#content div.aakkonen ul {
	margin-left: 18px;
	width: 200px;
	float: right;
	margin-top: 0px;
}

#content div.aihealue ul {
	margin-left: 18px;
	width: 200px;
	float: right;
	margin-top: 0px;
}

#content div.aakkonen h3, #content div.aihealue h3 {
	margin: 0 0 .4em 15px;
	float: left;
}


/*div.aihealue {
	background: #FFE7B8;
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
	padding: 3px;
	width: 220px;
	margin: 0 15px 15px 0;
	float: left;
	min-height: 330px;
}*/

#content div.aihealue h3 {
	font-size: 12px;
	width: 200px;
/*	margin: 4px 0 .4em 0;
	text-align: center;*/
}


div.terminavi {
	background: #FFE0A5;
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
	margin: 15px 0;
	padding: 3px;
}