/* * ************************************************* * * General style declarations for common webbrowsers * * ************************************************* * */ /* * TOC * ******** * General declaratios * Body * Header * Search * Sitemap * Page * Main Navigation * Frontpage * Main Image * Bulletin Areas * Navigation * Subpages * Left Colum * Right Column * Navigation * Common text styles * Footer * Other Templates * Sitemap * Error pages */ /* clears all the margins and paddings for elements, expect for tables */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption { margin: 0;padding:0;} /* clearfix */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } a { outline: none;} /* removes borders from links on Mozilla Firefox */ body { font-family: Helvetica Neue, Helvetica, Franklin Gothic Medium, arial, sans-serif; font-size: 12px; color: #333;} .summer { background:#fff url(/pics/hattula/theme-summer.jpg) top left repeat-x;} .autumn { background:#fff url(/pics/hattula/theme-autumn.jpg) top left repeat-x; } .winter { background:#fff url(/pics/hattula/theme-winter.jpg) top left repeat-x; } .spring { background:#fff url(/pics/hattula/theme-spring.jpg) top left repeat-x; } .xmas { background:#fff url(/pics/hattula/theme-xmas.jpg) top left repeat-x; } #wrapper { position: relative; width: 967px; margin: 0 auto;} #header { position: relative; width: 967px; height: 190px; margin: 0 auto; } #logo { position: absolute; width: 228px; height: 64px; background: url(/pics/hattula/logo.png) no-repeat; text-indent: -999999px; top: 32px;} #googleSearch { position: absolute; right: 0px; top: 0px; top:58px;} #googleSearch input.textField { position: absolute; right:27px; border: none; width: 168px; height: 21px; padding-left: 5px; padding-top: 7px;background:transparent url(/pics/hattula/gSearchTextfield.png) right top no-repeat;} #googleSearch input.formSubmit { position: absolute; right:0px; border:none; width: 27px; height: 28px; background: url(/pics/hattula/gSearchSubmit.png) left top no-repeat; } #sitemapLink { position: absolute; top: 90px; right: 0px; color: #061920;} #page { position: relative; } .fpPage { width: 967px;} .spPage { width: 925px; padding: 0 21px;background: url(/pics/hattula/page.png) left top no-repeat; min-height: 400px;} /* main navigation */ #mainMenu { position: absolute; width: 967px; height: 30px; /* background: url(/pics/hattula/mainMenu.png) no-repeat; */ top: 124px; } #mainMenu ul { list-style-type: none;} #mainMenu li { display: inline; padding: 0 0;} #mainMenu li a { font-weight: bold; color:#03151d; text-decoration: none; border-left: 1px solid #fff;position:relative; float:left; height: 30px; padding:0 14px; padding-top: 20px; text-align: center; background: url(/pics/hattula/navi.gif) center top;} #mainMenu a#selected { color:#fff; background-position: center bottom;} #mainMenu li a:hover { text-decoration: underline;} /* #mainMenu li#kunta_ja_hallinto a { width: 126px;background: url(/pics/hattula/navi-kunta_ja_hallinto.png) left top no-repeat;} #mainMenu li#kunta_ja_hallinto a#selected { background: url(/pics/hattula/navi-kunta_ja_hallinto.png) left bottom no-repeat;} #mainMenu li#rakentaminen_ja_tekniikka a { width: 185px;background: url(/pics/hattula/navi-rakentaminen_ja_tekniikka.gif) left top no-repeat;} #mainMenu li#rakentaminen_ja_tekniikka a#selected { background: url(/pics/hattula/navi-rakentaminen_ja_tekniikka.gif) left bottom no-repeat;} #mainMenu li#terveys a { width: 79px;background: url(/pics/hattula/navi-terveys.gif) left top no-repeat;} #mainMenu li#terveys a#selected { background: url(/pics/hattula/navi-terveys.gif) left bottom no-repeat; } #mainMenu li#perhe-_ja_sosiaalipalvelut a { width: 170px;background: url(/pics/hattula/navi-perhe_ja_sosiaalipalvelut.gif) left top no-repeat; } #mainMenu li#perhe-_ja_sosiaalipalvelut a#selected { background: url(/pics/hattula/navi-perhe_ja_sosiaalipalvelut.gif) left bottom no-repeat; } #mainMenu li#koulutus_ja_kirjasto a { width: 144px; background: url(/pics/hattula/navi-koulutus_ja_kirjasto.gif) left top no-repeat;} #mainMenu li#koulutus_ja_kirjasto a#selected { background: url(/pics/hattula/navi-koulutus_ja_kirjasto.gif) left bottom no-repeat; } #mainMenu li#vapaa-aika_ja_matkailu a { width: 163px; background: url(/pics/hattula/navi-vapaa-aika_ja_matkailu.gif) left top no-repeat; } #mainMenu li#vapaa-aika_ja_matkailu a#selected { background: url(/pics/hattula/navi-vapaa-aika_ja_matkailu.gif) left bottom no-repeat; } #mainMenu li#yrittaminen a { width: 100px; background: url(/pics/hattula/navi-yrittaminen.gif) left top no-repeat; } #mainMenu li#yrittaminen a#selected { background: url(/pics/hattula/navi-yrittaminen.gif) left bottom no-repeat; } */ #mainMenu li#kunta_ja_hallinto a { background-position: left top; padding-left: 18px; border: none;} #mainMenu li#kunta_ja_hallinto a#selected { background-position: left bottom;} #mainMenu li#yrittaminen a { background-position: right top; padding-right: 19px;} #mainMenu li#yrittaminen a#selected { background-position: right bottom; } /* tooltip */ #tooltip { position: absolute; z-index: 100; width: 164px; height: 93px; background: url(/pics/hattula/tooltip.png) no-repeat; color:#fff; padding: 2em 10px; text-align: center; display:none; font-size: 11px;} /* * Frontpage * ********* */ #mainImage { position: relative; width: 967px; height: 284px; margin-bottom: 20px; background:#000;} #fpLeftCol { float:right; width: 666px;} .fpCol { position: relative; float: left;} .wide { width: 364px; margin-right: 61px;} .narrow { width: 241px;} #mapArea { position: relative; width: 241px; height: 313px; margin-bottom: 24px;} #fpContacts { position: relative; width: 241px; background: #58941d url(/pics/hattula/fpContacts.jpg) top left no-repeat; padding-top: 2em; color:#fff;} #fpContacts h3 { color:#fff; font-size: 18px; font-weight: bold;} #fpContacts p { color:#fff; margin-bottom: 0.2em;} #fpContacts table { border-collapse: collapse; margin:0;padding:0;} #fpContacts a { color:#fff;} #fpContacts table td { padding:0.25em 0;} .textWrapper { position: relative; width: 90%; margin: 0 auto;} #fpContacts .divFooter { width: 241px; height: 10px; background: url(/pics/hattula/fpContactFooter.gif) left bottom no-repeat; } #hattulaVisa { position: relative; width: 241px; margin-top: 20px; } #hattulaVisa a { color:#fff; } #justNow { position: relative; width: 400px; } #justNow h2 { position: relative; width: 167px; height: 59px; background: url(/pics/hattula/title-juuri_nyt.gif) no-repeat; text-indent: -999999px; z-index: 2;} #justNow hr { z-index: 1; margin-top: -2em; margin-bottom: 2em;} .bulletin { position: relative; margin-top: 1em; clear:both; } .bulletin img { float:left; margin-right:1em;border: 1px solid #b4b4b4; width: 85px; height: 85px;} .bigThumbnail {} .smallThumbnail img { width: 61px; height: 61px; } .bulletinContent { float: left; width: 300px;} .bDate { margin-bottom:0em; font-size: 11px;} .bulletinContent h3 a { font-size: 14px; color:#25a8da; margin-bottom: 0.5em;} .bulletinContent p { line-height: 1.75em;} .bulletinContent a {color:#25A8DA;} #inHattula { position: relative; width: 400px; padding-top: 20px;} #inHattula h2 { position: relative; width: 304px; height: 54px; background: url(/pics/hattula/title-hattulassa_tapahtuu.gif) no-repeat; text-indent: -999999px; z-index: 2;} #inHattula hr { z-index: 1; margin-top: -1.75em; margin-bottom: 2em;} .fpEvent { background: url(/pics/hattula/icon-punctionmark.gif) left top no-repeat; padding-left: 55px; min-height: 50px; margin-bottom: 2em;} .fpEvent h4 a { font-size: 14px; color:#25a8da; margin-bottom: 0.5em;} .ainaCalendar { text-align: right;} .ainaCalendar a { font-size: 14px; color:#25a8da; font-weight: bold;} /* APK-11432 alkaa */ #Tutustu { position: relative; width: 400px; padding-top: 20px;} #Tutustu h2 { position: relative; width: 330px; height: 54px; background: url(/pics/hattula/tutustu_teksti.gif) no-repeat; text-indent: -999999px; z-index: 2;} #Tutustu hr { z-index: 1; margin-top: -1.75em; margin-bottom: 2em;} .fpTutustu {left top no-repeat; min-height: 50px; margin-bottom: 2em;} .fpTutustu h4 a { font-size: 14px; color:#25a8da; margin-bottom: 0.5em;} /* APK-11432 loppuu*/ #fpRightCol { float:right; width: 241px; margin-right:60px;} #fpNavi { position: relative; width: 241px; background: url(/pics/hattula/fpNavi-content.gif) repeat-y; margin-bottom: 2em;} #fpNaviHeader { position: relative; width: 241px; height: 19px; background: url(/pics/hattula/fpNavi-header.gif) left top no-repeat;} #fpNaviFooter { position: relative; width: 241px; height: 27px; background: url(/pics/hattula/fpNavi-footer.gif) left bottom no-repeat; } #fpNavi ul { list-style-type: none; width: 90%; margin: 0 auto;} #fpNavi li { border-top: 1px solid #fff; padding-top: 0.75em; margin-bottom: 0.75em;} #fpNavi li:first-child { border:none;} #fpNavi li a { font-size: 14px; color:#03151d; text-decoration: none; font-weight: bold;} #fpNavi li a:hover { text-decoration: underline;} #fpRightCol iframe { margin-bottom:2em; } #compete { position: relative; width: 241px; background: url(/pics/hattula/compete-container.gif) repeat-y;} #competeHeader { position: relative; width: 241px; height: 8px; background: url(/pics/hattula/compete-header.gif) left top no-repeat;} #competeFooter{ position: relative; width: 241px; height: 8px; background: url(/pics/hattula/compete-footer.gif) left bottom no-repeat;} #compete .textWrapper { padding-top: 0.75em;} #compete h3 { font-size: 18px; font-weight: normal; margin-bottom: 0.65em;} #compete p { font-size: 14px;} #compete p a { font-weight: bold; font-size: 12px; color:#25a8da;} /* Subpages */ #contentArea p { line-height: 1.55em;} #pageName { position: relative; width: 100%; height: 110px;} #pageName h2 { width: 422px; height: 65px; text-indent: -99999px; z-index: 2; position: relative; } #pageName h2 a { display: block; text-indent: -99999px;width: 422px; height: 65px;} #pageName h2 a { background: url(/pics/hattula/title-hattulan_kunta.gif) no-repeat; } #pageName h2.kunta_ja_hallinto a { background: url(/pics/hattula/title-kunta_ja_hallinto.gif) no-repeat;} #pageName h2.rakentaminen_ja_tekniikka a { background: url(/pics/hattula/title-rakentaminen_ja_tekniikka.gif) no-repeat; } #pageName h2.terveys a { background: url(/pics/hattula/title-terveys.gif) no-repeat; } #pageName h2.perhe-_ja_sosiaalipalvelut a { background: url(/pics/hattula/title-perhe_ja_sosiaalipalvelut.gif) no-repeat; } #pageName h2.koulutus_ja_kirjasto a { background: url(/pics/hattula/title-koulutus_ja_kirjasto.gif) no-repeat; } #pageName h2.vapaa-aika_ja_matkailu a { background: url(/pics/hattula/title-vapaa-aika_ja_matkailu.gif) no-repeat; } #pageName h2.yrittaminen a { background: url(/pics/hattula/title-yrittaminen.gif) no-repeat; } #pageName h2.haku a { background: url(/pics/hattula/title-haku.gif) no-repeat; } #pageName h2.sivukartta a { background: url(/pics/hattula/title-sivukartta.gif) no-repeat; } #pageName h2.juuri_nyt a { background: url(/pics/hattula/title-juuri_nyt.gif) no-repeat; } #pageName h2.hattulassa_tapahtuu a { background: url(/pics/hattula/title-hattulassa_tapahtuu.gif) no-repeat; } #pageName hr { position: relative; margin-top: -2.5em;z-index: 1;} #cookiepath { position: absolute; right: 0em; bottom: 40px; width: 500px; text-align: right;} #cookiepath a { color: #25a8da; font-weight: bold; text-decoration: none;} #cookiepath a:hover { text-decoration: underline;} #leftCol { float: right; width: 673px;} .Vasen,.vasen { float: left; width: 402px; padding: 0px; margin-right: 25px;} .Oikea, .oikea { float: left; width: 242px;} .colWide { position: relative; width: 673px;} .wideCol { position: relative; width: 508px;} #leftCol h1.pageName { font-size: 24px; font-weight: normal; margin-bottom: 0.5em;} #leftCol h1.shortTitle { width: 400px;} .contentBox { position: relative; width: 242px; background: url(/pics/hattula/compete-container.gif) repeat-y; margin-bottom: 2em;} .contentBoxHeader { position: relative; width: 241px; height: 8px; background: url(/pics/hattula/compete-header.gif) left top no-repeat;} .contentBoxFooter{ position: relative; width: 241px; height: 8px; background: url(/pics/hattula/compete-footer.gif) left bottom no-repeat;} .contentBox .textWrapper { padding-top: 0.75em;} #contentArea .quickLinks ul { list-style-type: none; margin-left: 0;} .quickLinks li { background: url(/pics/hattula/li-quickLinks.gif) 0 0px no-repeat; padding-left: 1.75em; margin-bottom:.5em;} .quickLinks li a { display: block; color: #03151d;} #mainSectionBulletin {} #mainSectionBulletin h2 { font-size: 18px; font-weight: normal;} #mainSectionBulletin .bDate { margin-bottom:0em; font-size: 11px;} #mainSectionBulletin .bulletin h3 { font-size: 14px; margin-bottom: 0.5em;} #mainSectionBulletin .bulletin h3 a { color:#25a8da; } #mainSectionBulletin .bulletin p { } #rightCol { float: right; width: 252px;} #spNavi { position: relative; width: 220px;} #spNavi ul { list-style-type: none;} #spNavi li { border-bottom: 1px solid #8bc5df; padding-bottom: 0.75em; margin-bottom: 0.75em;} #spNavi li a { text-decoration: none; color: #03151d; font-size: 14px; font-weight: bold;} #spNavi ul ul { position: relative; margin-top: 15px;} #spNavi ul ul ul { position: relative; margin-top: 7px;} #spNavi li li { border: none; background: url(/pics/hattula/li-spNavi.gif) 0px 4px no-repeat; padding-left: 1em; padding-bottom:0;margin-bottom:5px;} #spNavi li li a { display: block; font-size: 12px; font-weight: normal; } #spNavi a.selected { color:#528d19;} #spNavi a:hover { text-decoration: underline;} #wideCol {} #searchResults { position: relative; width: 90%; margin: 0 auto;} /* * Text styles, ones not declared on text.css */ #contentArea ul,#contentArea ol { margin-left: 2em;} #contentArea ul ul,#contentArea ol ol { margin-left: 1em;} #contentArea a { color: #25a8da;} #footerWrapper { position: relative; width: 100%; background: url(/pics/hattula/footer.gif) left top repeat-x; height: 346px;} #footer { position: relative; width: 967px; margin: 0 auto; padding-top: 200px;} #footer h4 { font-size: 14px; color:#fff;} #footer p { color:#fff;} #footer p a { color:#fff;} #copyright { float:left; width: 301px;} #qLinks { float: left; width: 425px;} #qLinks ul { list-style-type: none;} #qLinks li {} #qLinks li a {color:#fff;} #contact { float: left; width: 120px;} /* * **************** * Other templates * **************** */ /* * Sitemap * pagetemplates/sitemap.vm */ #sitemap {} #sitemap ul { list-style-type: none; margin-left: 2em;} #sitemap li { margin-bottom: 0.5em; border-bottom: 1px dashed #b4b4b4; padding-bottom: 0.5em; } #sitemap li a { font-size: 16px; font-weight: bold; color:#25a8da;} #sitemap ul ul { margin-left: 1em;} #sitemap li li { border:none; padding: 0;} #sitemap li li a { font-size: 14px; font-weight: bold; color:#25a8da;} #sitemap li li li a { font-size: 12px; font-weight: normal; color:#333;} #sitemap a { text-decoration: none;} #sitemap a:hover { text-decoration: underline;} /* * 404 - error * errorpages/404.jsp */ #erropage { width: 90%; margin: 0 auto; padding-top: 40px; height: 400px;} .errorTextWrapper { position: relative;} .errorCol { float:left; width: 48%; padding: 0 1%;} .errorCol a { color:#25a8da;} /* * Bulletin Manager 2 * pagetemplates/bulletinmanager2.vmn */ #bm2 { position: relative;} .backTo { position: absolute; right:1em; top:0em; text-align: right;} #bm2 h3 { width: 400px;} #bm2 .bm2Lead { font-size: 14px; font-weight: bold; font-style: italic; width: 500px;} #bm2 .bm2Body { position: relative; width: 500px;} #bm2 ul.msgList { list-style-type: none; margin-left: 0;} #bm2 .msgList li { margin-bottom: 1em;} #bm2 .msgList li a { font-size: 14px; font-weight: bold;} #bm2 .msgList li a.areaName { font-size: 12px; font-weight: normal;} /* year selector */ .year { position: relative;padding:1em 1.5em; background: #d3edf6; margin-bottom: 2em; border: 1px solid #8bc5df;} .year label { float: left; margin-right: 1em; font-size: 14px; font-weight: bold;} .year form { float:left; padding:0;} .year select { margin:0;} /* * Form Designer * pagetemplates/formdesignerform.vmn */ #fd { width: 508px;} #fd label { font-weight:bold; } #fd fieldset { border:1px solid #CCCCCC; margin:0 0 1.5em; padding:1.4em; clear:both;} #fd legend { font-size:1.2em; font-weight:bold; } #fd input[type="text"], input[type="password"], input.text, input.title, textarea, select { background-color:#FFFFFF; border:1px solid #BBBBBB; } #fd input[type="text"]:focus, input[type="password"]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus { border-color:#666666;} #fd input[type="text"], input[type="password"], input.text, input.title, textarea, select { margin:0.5em 0; } #fd .FormDesignerFieldTypeAddress input, .FormDesignerFieldTypeText input, .FormDesignerFieldTypeEmail input { padding:5px; width:240px; } #fd input.title { font-size:1.5em; } #fd textarea { height:180px; padding:5px; width:300px; } #fd input[type="checkbox"],#fd input[type="radio"],#fd input.checkbox,#fd input.radio { position:relative; top:0.25em; } #fd form.inline { line-height:3; } #fd form.inline p { margin-bottom:0; } #fd button, .button { background-color:#BDCF23; border:medium none; color:#FFFFFF; cursor:pointer; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:1em; font-weight:bold; line-height:1; padding:3px 8px; text-align:center; text-decoration:none; white-space:nowrap; } #fd .error,#fd .notice,#fd .success { border:2px solid #DDDDDD; margin-bottom:1em; padding:0.8em; } #fd .FormDesignerFieldTypeTextarea textarea { float:left; margin-right: 1em;}