/* yleiset luokat */
body { font-family: Verdana; font-size: 11px; font-weight: normal; color: #555; line-height: 18px; margin: 0px; text-align: left; background: #eee; }
td { font-size: 12px; }
div { text-align: left; vertical-align: top; }

.clear { clear: both; }
.left { float: left; }
.right { float: right; }
.toplinks { float: right; margin-top: 7px; }
img { display: block; }
.hidden { display: none; }

.image { border-style: solid; border-width: 1px; border-color: #CCCCCC; }
.image:hover { border-style: solid; border-width: 1px; border-color: #999999; }

#main_frame {
	position: absolute;
	width: 800px;
	left: 50%;
	border-left: 1px #c2c2c2 solid;
	border-right: 1px #c2c2c2 solid;
	margin-left: -400px; /* half of the width */
	background: #FFF;
}

#logo { margin: 43px 0px 0px 20px; float: left; }
#graph { margin-right: 0px; float: right; }
#sitemetrics { margin-right: 12px; float: right; }
#lang { margin-right: 0px; float: right; }
#naviarea { height: 47px; margin: 20px 0px 0px 0px; background-color: #266971; }
#topimage { margin: 2px 0px 0px 0px; }
#contentarea { width: 780px; padding: 30px 0px 10px 20px; }
#main_content { width: 520px; float: left; }
#main_content_2 { width: 700px; padding-left: 20px; float: left; }
#main_content_3 { width: 460px; padding-left: 20px; float: left; }
#oda_content { width: 694px; height: 320px; margin: 5px 0px 20px 8px; padding: 25px 25px; float: left;  background: url(../images/bg_oda.gif) no-repeat left; }
#oda_buttons { width: 290px; height: 300px; padding-right: 25px; float: left; }
.oda_text { width: 370px; height: 300px; float: left; }
#right_content { width: 236px; height: 500px; padding-left: 24px; float: right; background: url(../images/bg_block.gif) no-repeat right; }
#right_content_2 { width: 236px; height: 500px; margin-top: 115px; padding-left: 24px; float: right; background: url(../images/bg_block.gif) no-repeat right; }
#right_content_3 { width: 266px; height: 500px; margin-top: 115px; padding-left: 24px; float: right; background: url(../images/bg_block_2.gif) no-repeat right; }
#right_content_pad { height: 294px; padding: 20px 10px 0px 20px; }
#right_form_pad { padding: 0px 10px 0px 20px; }
#bottomarea { width: 760px; font-size: 10px; margin: 0px 15px 30px 20px; }

.clients { width: 215px; height: 245px; background-image: url(../images/bg_clients.jpg); padding: 85px 15px 0px 23px; margin: 0px 5px 10px 0px; float: left; line-height: 14px; }
.agencies { width: 215px; height: 245px; background-image: url(../images/bg_agencies.jpg); padding: 85px 15px 0px 23px; margin: 0px 0px 10px 0px; float: left; line-height: 14px; }
.mainostajille { width: 215px; height: 245px; background-image: url(../images/bg_mainostajille.jpg); padding: 85px 15px 0px 23px; margin: 0px 5px 10px 0px; float: left; line-height: 14px; }
.toimistoille { width: 215px; height: 245px; background-image: url(../images/bg_toimistoille.jpg); padding: 85px 15px 0px 23px; margin: 0px 0px 10px 0px; float: left; line-height: 14px; }


/* navistylet */
a.oda { width: 195px; height: 47px; background-image: url(../images/button_oda.jpg); float: left; }
a.oda:hover { width: 195px; height: 47px; background-image: url(../images/button_oda_over.jpg); float: left; }
a.oda_sel { width: 195px; height: 47px; background-image: url(../images/button_oda_over.jpg); float: left; }

a.references { width: 104px; height: 47px; background-image: url(../images/button_references.jpg); float: left; }
a.references:hover { width: 104px; height: 47px; background-image: url(../images/button_references_over.jpg); float: left; }
a.references_sel { width: 104px; height: 47px; background-image: url(../images/button_references_over.jpg); float: left; }

a.company { width: 96px; height: 47px; background-image: url(../images/button_company.jpg); float: left; }
a.company:hover { width: 96px; height: 47px; background-image: url(../images/button_company_over.jpg); float: left; }
a.company_sel { width: 96px; height: 47px; background-image: url(../images/button_company_over.jpg); float: left; }

a.contact { width: 83px; height: 47px; background-image: url(../images/button_contact.jpg); float: left; }
a.contact:hover { width: 83px; height: 47px; background-image: url(../images/button_contact_over.jpg); float: left; }
a.contact_sel { width: 83px; height: 47px; background-image: url(../images/button_contact_over.jpg); float: left; }

a.blog { width: 65px; height: 47px; background-image: url(../images/button_blog.jpg); float: left; }
a.blog:hover { width: 65px; height: 47px; background-image: url(../images/button_blog_over.jpg); float: left; }
a.blog_sel { width: 65px; height: 47px; background-image: url(../images/button_blog_over.jpg); float: left; }

a.sma { width: 220px; height: 47px; background-image: url(../images/button_sma.jpg); float: left; }
a.sma:hover { width: 220px; height: 47px; background-image: url(../images/button_sma_over.jpg); float: left; }
a.sma_sel { width: 220px; height: 47px; background-image: url(../images/button_sma_over.jpg); float: left; }

a.referenssit { width: 104px; height: 47px; background-image: url(../images/button_referenssit.jpg); float: left; }
a.referenssit:hover { width: 104px; height: 47px; background-image: url(../images/button_referenssit_over.jpg); float: left; }
a.referenssit_sel { width: 104px; height: 47px; background-image: url(../images/button_referenssit_over.jpg); float: left; }

a.yritys { width: 74px; height: 47px; background-image: url(../images/button_yritys.jpg); float: left; }
a.yritys:hover { width: 74px; height: 47px; background-image: url(../images/button_yritys_over.jpg); float: left; }
a.yritys_sel { width: 74px; height: 47px; background-image: url(../images/button_yritys_over.jpg); float: left; }

a.ota_yhteytta { width: 107px; height: 47px; background-image: url(../images/button_ota_yhteytta.jpg); float: left; }
a.ota_yhteytta:hover { width: 107px; height: 47px; background-image: url(../images/button_ota_yhteytta_over.jpg); float: left; }
a.ota_yhteytta_sel { width: 107px; height: 47px; background-image: url(../images/button_ota_yhteytta_over.jpg); float: left; }

a.blogi { width: 65px; height: 47px; background-image: url(../images/button_blogi.jpg); float: left; }
a.blogi:hover { width: 65px; height: 47px; background-image: url(../images/button_blogi_over.jpg); float: left; }
a.blogi_sel { width: 65px; height: 47px; background-image: url(../images/button_blogi_over.jpg); float: left; }

/* ODA navistylet */
a.oda_bm { width: 294px; height: 39px; background-image: url(../images/oda_button_bm.jpg); float: left; }
a.oda_bm:hover { width: 294px; height: 39px; background-image: url(../images/oda_button_bm_over.jpg); float: left; }
a.oda_bm_sel { width: 294px; height: 39px; background-image: url(../images/oda_button_bm_over.jpg); float: left; }

a.oda_cm { width: 294px; height: 39px; background-image: url(../images/oda_button_cm.jpg); float: left; }
a.oda_cm:hover { width: 294px; height: 39px; background-image: url(../images/oda_button_cm_over.jpg); float: left; }
a.oda_cm_sel { width: 294px; height: 39px; background-image: url(../images/oda_button_cm_over.jpg); float: left; }

a.oda_bacr { width: 294px; height: 39px; background-image: url(../images/oda_button_bacr.jpg); float: left; }
a.oda_bacr:hover { width: 294px; height: 39px; background-image: url(../images/oda_button_bacr_over.jpg); float: left; }
a.oda_bacr_sel { width: 294px; height: 39px; background-image: url(../images/oda_button_bacr_over.jpg); float: left; }

a.oda_op { width: 294px; height: 39px; background-image: url(../images/oda_button_op.jpg); float: left; }
a.oda_op:hover { width: 294px; height: 39px; background-image: url(../images/oda_button_op_over.jpg); float: left; }
a.oda_op_sel { width: 294px; height: 39px; background-image: url(../images/oda_button_op_over.jpg); float: left; }

a.oda_bm_fin { width: 294px; height: 39px; background-image: url(../images/oda_button_bm_fin.jpg); float: left; }
a.oda_bm_fin:hover { width: 294px; height: 39px; background-image: url(../images/oda_button_bm_over_fin.jpg); float: left; }
a.oda_bm_sel_fin { width: 294px; height: 39px; background-image: url(../images/oda_button_bm_over_fin.jpg); float: left; }

a.oda_cm_fin { width: 294px; height: 39px; background-image: url(../images/oda_button_cm_fin.jpg); float: left; }
a.oda_cm_fin:hover { width: 294px; height: 39px; background-image: url(../images/oda_button_cm_over_fin.jpg); float: left; }
a.oda_cm_sel_fin { width: 294px; height: 39px; background-image: url(../images/oda_button_cm_over_fin.jpg); float: left; }

a.oda_bacr_fin { width: 294px; height: 39px; background-image: url(../images/oda_button_bacr_fin.jpg); float: left; }
a.oda_bacr_fin:hover { width: 294px; height: 39px; background-image: url(../images/oda_button_bacr_over_fin.jpg); float: left; }
a.oda_bacr_sel_fin { width: 294px; height: 39px; background-image: url(../images/oda_button_bacr_over_fin.jpg); float: left; }

a.oda_op_fin { width: 294px; height: 39px; background-image: url(../images/oda_button_op_fin.jpg); float: left; }
a.oda_op_fin:hover { width: 294px; height: 39px; background-image: url(../images/oda_button_op_over_fin.jpg); float: left; }
a.oda_op_sel_fin { width: 294px; height: 39px; background-image: url(../images/oda_button_op_over_fin.jpg); float: left; }

/* linkkistylet */
a:link	{ font-weight: bold; text-decoration: none; color: #377b81; }
a:active { font-weight: bold; text-decoration: none; color: #377b81; }
a:visited { font-weight: bold; text-decoration: none; color: #377b81; }
a:hover	{ font-weight: bold; text-decoration: underline; color: #377b81; }

/* otsikkostylet */
h1 { font-size: 34px; font-weight: normal; color: #555; margin: 10px 0px 40px 0px; }
h2 { font-size: 20px; font-weight: normal; color: #555; margin: 0px 0px 25px 0px; }
h3, h3 > a { font-size: 18px; font-weight: normal; color: #016972; margin: 0px 0px 10px 0px; }
h4 { font-size: 14px; font-weight: normal; color: #458b92; margin: 0px 0px 13px 0px; text-align: center; }

/* listastylet */
ul { margin: 0px; padding: 0px; }
li { list-style-position: outside; margin-left: 30px; line-height: 1.5; }

/* input stylet */
input.text { width: 250px; height: 14px; }
textarea.lomake { width: 350px; height: 60px; font-family: Verdana; font-size: 11px; }
