@charset "UTF-8";
/* CSS Document */

html {width: 100%;}

body {margin: 0; padding: 0; width: 100%; background: #000000 url(../images/bg.gif) repeat-x center -303px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff;}

a {color: #ffffff; text-decoration: underline; outline: none;}
a:hover {color: #ec008c; text-decoration: underline;}

p {margin: 0 0 20px 0; line-height: 17px;}
img {float: left; display: inline; border: 1px solid #ffffff; margin: 0 20px 20px 0;}

a:hover img {border-color: #ec008c;}

.ingress {font-size: 14px; line-height: 20px;}

h1 {font-family: bookman, "bookman old style", Arial, Helvetica, sans-serif; font-size: 36px; font-weight: bold; margin: 0 0 20px 0;}
h2 {font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; margin: 5px 0 10px 0;}
h3 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; margin: 10px 0 5px 0;}

h7 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #ffffff;}

.headingpic {position: relative; margin: 0 0 10px -17px; border: 0;}

.bulletlink, .bulletlinkrev, .bulletlinkplus {font-weight: bold; font-size: 14px; color: #ffffff; padding: 0 0 0 14px; background: url(../images/linkbullet_nega.gif) no-repeat 0 -16px; text-decoration: none;}
	.bulletlink:hover, .bulletlinkrev:hover, .bulletlinkplus:hover {background-position: 0 -89px; text-decoration: underline;}
.bulletlinkrev {background-image: url(../images/linkbullet_nega_rev.gif);}	
.bulletlinkplus {background-image: url(../images/linkbulletplus.gif);}	

hr {width: 100%; height: 1px; border: 0; background: #000000; color: #000000;}

/* @-merkki maililinkeissä */
.miumau {margin: 0 0 -2px 0;padding: 0 3px 0 1px;background: url(../images/miumau.gif) no-repeat 0 -8px;}
	a:hover .miumau {background-position: 0 -51px;}

#container {position: relative; width: 910px; text-align: left; margin: 0 auto 0 auto;}

#pageheader {width: 100%; height: 237px;}

#pagecontent {width: 890px; padding: 0 0 0 20px; overflow: hidden;}
	* html #pagecontent {width: 910px; w\idth: 890px;}

#pagefooter {position: relative; width: 870px; padding: 75px 0 30px 40px; background: url(../images/pagefooter.gif) no-repeat right top;}
	* html #pagefooter {width: 910px; w\idth: 870px;}
#feedbacklink {font-weight: bold; font-size: 14px; position: absolute; right: 40px; top: 73px; color: #ffffff; padding: 0 0 0 14px; background: url(../images/linkbullet_nega.gif) no-repeat 0 -16px; text-decoration: none;}
	#feedbacklink:hover {background-position: 0 -89px; text-decoration: underline;}
	
#logo {position: absolute; left: 40px; top: 20px; width: 137px; height: 177px; background: url(../images/kanilogo.gif);}

/* Puhekupla */
#kupla {position: absolute; left: 156px; top: 20px; width: 136px; height: 95px; padding: 0 20px 0 40px; background: url(../images/kupla.gif); text-align: center; font-size: 14px; font-weight: bold;}
	* html #kupla {width: 196px; w\idth: 136px;}
	#kupla td, #kupla table {width: 100%; height: 100%; vertical-align: middle;}

/* Päävalikko */
#mainmenu {position: absolute; left: 211px; top: 20px; width: 680px; height: 163px; background: url(../images/mainmenubg.gif) no-repeat 0 0;}
#mainmenu a {position: absolute; display: block; background-position: 0 -40px; background-repeat: no-repeat; outline: none;}
#mainmenu a:hover, #mainmenu a.active {background-position: 0 -150px;}
	
	#mainmenubutton1 {left: 38px; top: 109px; width: 61px; height: 21px; background-image: url(../images/menubutton_uutta.gif);}
	#mainmenubutton2 {left: 118px; top: 95px; width: 84px; height: 24px; background-image: url(../images/menubutton_kaniinfo.gif);}
	#mainmenubutton3 {left: 227px; top: 84px; width: 56px; height: 20px; background-image: url(../images/menubutton_kirjat.gif);}
	#mainmenubutton4 {left: 312px; top: 52px; width: 192px; height: 40px; background-image: url(../images/menubutton_haluatkokirjailijaksi.gif);}
	#mainmenubutton5 {left: 523px; top: 34px; width: 115px; height: 28px; background-image: url(../images/menubutton_yhteystiedot.gif);}

/* Palstat */
.col1, .col2, .col3 {position: relative; float: left; display: inline; width: 250px; margin: 0 20px 0 20px;}
.col1-2, .col2-3 {position: relative; float: left; display: inline; width: 540px; margin: 0 20px 0 20px;}
.col1-3 {position: relative; float: left; display: inline; width: 830px; margin: 0 0 0 20px;}

/* Kuvat kapeissa palstoissa */
.col1 img, .col2 img, .col3 img {margin-right: 0;}

/* Kirjanosteet */
#bookteasers {position: relative; float: left; display: inline; width: 870px; padding: 0 0 20px 40px; margin: 30px 0 0 0;}

#bookteasers .headingpic {position: absolute; left: 40px; top: 0;}	
	
.bookteaser {position: relative; float: left; display: inline; width: 140px; margin: 0 20px 0 0; text-align: center; color: #ffffff; text-decoration: none;}
.bookteaser:hover {color: #ec008c; text-decoration: none;}
.bookteaser img {float: none; margin: 0 auto 15px auto; border: 1px solid #ffffff;}
.bookteaser:hover img {border-color: #ec008c;}
.bookteaser h2 {font-size: 12px; margin: 0 0 5px 0; font-weight: normal; font-family: Arial, Helvetica, sans-serif;}
.bookteaser h1 {font-size: 14px; font-weight: bold; margin: 0 0 0 0; font-family: Arial, Helvetica, sans-serif;}

.bookteaser .balloon {position: absolute; right: -10px; top: -20px;}
.bookteaser .ballon {position: absolute; right: -10px; top: -20px;}

/* Ilmapallot */
.balloon {width: 59px; height: 118px; padding: 20px 0 0 0; background: url(../images/ilmapallo1.png);font-family: bookman, "bookman old style", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; text-align: center; color: #000000;}
	* html .balloon {height: 138px; he\ight: 118px; background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src='images/ilmapallo1.png',sizingMethod='crop');}

.ballon {width: 59px; height: 118px; padding: 20px 0 0 0; background: url(../images/ilmapallo1.png);font-family: bookman, "bookman old style", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; text-align: center; color: #000000;}
	* html .ballon {height: 138px; he\ight: 118px; background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src='images/ilmapallo1.png',sizingMethod='crop');}


.col3 .balloon {position: absolute; left: -40px; top: 10px;}
.col3 .ballon {position: absolute; left: -40px; top: 10px;}


/* Extranoste */
#extrateaser {position: absolute; right: 65px; top: 130px; width: 225px; color: #000000; line-height: normal;}
#extrateaser a {font-family: bookman, "bookman old style", Arial, Helvetica, sans-serif; font-size: 18px; margin-bottom: 5px; color: #000000}
#extrateaser a:hover {font-family: bookman, "bookman old style", Arial, Helvetica, sans-serif; font-size: 18px; margin-bottom: 5px; color: #ec008c}

#extrateaser h2 {font-family: bookman, "bookman old style", Arial, Helvetica, sans-serif; font-size: 18px; margin-bottom: 5px;}
#extrateaser img {float: right; display: inline; border: 0; margin: 5px 0 0 0;}

/* Ostanoste */
#ostateaser {position: absolute; right: 55px; top: 130px; width: 235px; color: #000000; line-height: normal;}
#ostateaser h2 {font-family: bookman, "bookman old style", Arial, Helvetica, sans-serif; font-size: 18px; margin-bottom: 5px;}
#ostateaser img {float: right; display: inline; border: 0; margin: 5px 0 0 0;}
#ostateaser form select {float: left; display: inline; margin-bottom: 3px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; width: 160px; height: auto; padding: 0 0 0 2px; border: 1px solid #b2b2b2;}	
		html>body select {margin-top: 2px;}



/* Lomakkeet */
form {margin: 0 0 15px 0; padding: 0; display: inline;}
form blockquote {margin: 0 0 0 176px; overflow: hidden; clear: both;}
	*:first-child+html form blockquote {margin-left: 88px;} /* IE 7 only */
form br {clear: left;}

	/* Form labels */
	label {float: left; display: inline; text-align: right; width: 166px; padding: 4px 10px 0 0; overflow:hidden; font-weight: bold; margin-bottom: 7px;}
		* html label {width: 176px; w\idth: 166px;}
	.rightsidelabel {text-align: left; padding-left: 5px; width: 270px; font-weight: normal;}
		* html .rightsidelabel {width: 176px; w\idth: 170px;}

	/* Form fields */
	input, textarea {float: left; display: inline; margin-bottom: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; width: 347px; height: 13px; padding: 3px 2px 3px 2px; border: none;}
		* html input, * html textarea {width: 353px; height: 21px; w\idth: 347px; he\ight: 13px;}
	textarea {height: 50px;}
		* html textarea {height: 56px;}
	select {float: left; display: inline; margin-bottom: 3px; font-family: Arial, Helvetica, sans-serif; font-size: 11px; width: 353px; height: auto; padding: 0 0 0 2px; border: 1px solid #b2b2b2;}	
		html>body select {margin-top: 2px;}
	.checkbox, .radiobutton {width: auto; border: 0; padding: 0; margin: 4px 0 0 0;}
		* html .checkbox, * html .radiobutton {height: 20px; margin: 0;}

	.filefield {height: 20px;}
	
	.hidden {display: none;}

	form .submitbtn {width: 70px; height: 25px; border: 0; padding: 0 0 0 12px; margin: 0 0 0 0; cursor: pointer; overflow: hidden; font-weight: bold; background: url(../images/linkbullet_nega.gif) no-repeat 0 -12px; text-align: left; color: #ffffff; font-weight: bold; font-size: 14px;}
	form .submitbtn:hover, form .submitbtn.active {color: #ec008c; background-position: 0 -85px;}
	
	
	.freesearchfield {float: none; width: 105px; height: 15px; padding: 4px 5px 2px 5px; margin: 0 3px 0 0; font-size: 11px; background: url(../images/textfieldbg_166.gif) no-repeat 0px 1px; border: none; color: #555555;}
	* html .freesearchfield {width: 115px; height: 21px; w\idth: 105px; he\ight: 15px;}

	/* Narrow versions */
	input.narrow {width: 60px;}
	select.narrow {width: 50px;}
	
	




/* Kotisivun erikoispiirteet */

.homepage {background-position: center -32px;}
.homepage #pageheader {height: 217px;}
.homepage #pagecontent {width: 910px; padding-left: 0;}

#mainteaser {position: relative; width: 540px; height: 253px; float: left; display: inline; margin: 0 0 0 40px;}
#mainteaser img {border: 0;}
#mainteaser .balloon {position: absolute; left: 190px; top: 20px;}
#mainteaser .ballon {position: absolute; left: 190px; top: 20px;}
#bite {position: absolute; right: 0; bottom: -1px; width: 142px; height: 111px; background: url(../images/bite.png);}
	* html #bite {background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src='images/bite.png',sizingMethod='crop');}
	
#mainteaserlink {display: block; position: absolute; right: 20px; top: 212px; width: 78px; background: url(../images/linkbullet.gif) no-repeat 0 -16px; padding: 0 0 0 12px; font-size: 14px; font-weight: bold; color: #000000; text-decoration: none;}
	* html #mainteaserlink {width: 90px; w\idth: 78px;}
	#mainteaserlink:hover {background-position: 0 -89px; text-decoration: underline;}
	
#news {float: left; display: inline; width: 250px; margin: 0 0 0 40px; color: #000000;}
#news a {color: #000000; text-decoration: none; padding: 0 0 0 14px; background: url(../images/linkbullet.gif) no-repeat 0 -16px; font-size: 14px;}
	#news a:hover {text-decoration: underline; background-position: 0 -89px;}
#news p {margin: 10px 0 20px 14px;}

.homepage #bookteasers {padding-top: 40px;}
.homepage .bookteaser {width: 190px;}


/* Kurkkiva kani */	
#pilkistavakani {width: 61px; height: 57px; position: absolute; left: 506px; top: 160px; background: url(../images/pilkistavakani.gif) no-repeat 0 0;}
#kaniselitys {position: absolute; left: 576px; top: 135px; width: 250px; height: 75px; padding: 0 0 0 44px; background: #ffffff url(../images/kaniselitysbg.gif) no-repeat left 13px; color: #000000; display: none; z-index: 100;}
#kaniselitys.active {display: block;}

/* Magnify-link */
.magnifylink {float: left; clear: both; display: inline; margin: 0 0 0 0; padding: 0 0 3px 17px; background: url(../images/magnify.gif) no-repeat 0 -20px; font-size: 0.92em; outline: none; color: #333333;}
.magnifylink:hover {background-position: 0 -53px; text-decoration: none; color: #000000;}