@import url("21.css"); /* Tidier helper styles */

#page { background: #cce2fc url("../img/2.1/page_bkg.png") repeat-x; min-height: 100%; }

.short-header #page { background-image: url("../img/2.1/page_bkg_short.png"); }

#page-wrapper
{
    width: 960px;
    padding: 0 13px;
    margin: 0 auto;
    background: url("../img/2.1/page_shadow.png") repeat-y;
}


/* Search, language selection */
/* -------------------------- */
#topbar
{
    height: 31px;
    color: #81b2f7;
    background: #2e5eaf url("../img/2.0/topbar_bg.gif") repeat-x;
    padding: 8px 10px 0;
}
#langselect         { margin: 5px 10px; float: left; }
#langselect span    { margin: 0 2px; }
#langselect a       { color: white; font-weight: normal; }
#langselect a:hover { border-bottom: 1px solid #81b2f7; }

#search { width: 200px; }
#search-input {
    border: 1px solid #81b2f7;
    padding: 2px;
    width: 165px;
    float: left;
    background: #dfe8f4;
}
#search-button {
    float: right;
    border: 0;
    background: transparent url("../img/2.0/search_button.gif") no-repeat scroll 0 0;
    width: 21px;
    height: 19px;
    margin-top: 1px;
}

/* Title, logo */
/* ----------- */

#header
{
    width: 960px;
    margin: 0 auto;
    background: #2e5eaf url("../img/headers/base.jpg") no-repeat;
    position: relative;
}

/* These two elements are hooks for section/page-specific header backgrounds. The background images are assigned in <style> blocks. */
#page-header, #section-header   { height: 100%; background-repeat: no-repeat; }

#header #site-title,
#header #page-title
{
    position: absolute;
    margin: 0;
}

#site-title { right: 0; top: 0; }
#page-title { left: 30px; }

.tall-header #header        { height: 317px; }
.short-header #header       { height: 172px; }
.tall-header #page-title    { top: 45px; }
.short-header #page-title   { top: 30px; }

#header a   { border: 0; }



/* **************
    Main Navi
*************** */
#mainnav {
    position: absolute;
    bottom: 0;
    left: 10px;
    height: 41px;
    width: 940px;
    background: url("../img/2.1/navi_bkg.png") 0 100% no-repeat;
    font: 1.15em/1 "Trebuchet MS", sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
}

#mainnav li {
    float: left;
    display: inline;
    height: 29px;
    padding: 15px 25px 0 25px;
    background: url("../img/2.0/mainnav-border.gif") no-repeat center right;
}
#mainnav li.last,
#mainnav li.ui-sortable-helper  { background: transparent; }

#mainnav a { color: white; font-weight: normal; }
#mainnav a:hover,
#mainnav a:active,
#mainnav a:focus,
#mainnav .active span   { color: #fad027; }


/* **************
    Sidenav
*************** */
#sidenav
{
    list-style: none;
    margin: 0;
    padding: 0;
    font: 1.15em "Trebuchet MS", sans-serif;
}

/* Top-level menu */
#sidenav h4
{
    margin: 2px 0;
    padding: 8px 10px;
    background: url("../img/2.1/subnavigation_bkg.png") bottom left no-repeat;
    font-size: 1em;
}

#sidenav a,
#sidenav span       { display: block; padding-left: 20px; }

#sidenav a          { font-weight: normal; background: url("../img/2.1/subnavigation_arrow.png") no-repeat; }
#sidenav a:hover    { color: #bc990a; background-position: 0 -200px; border: 0; }
#sidenav .active a,
#sidenav .active span
{
    color: #bc990a;
    background: url("../img/2.1/subnavigation_arrow_selected.png") no-repeat;
}
#sidenav .active a:hover    { background-position: 0 0; }

/* Subnavigation */
#sidenav ul
{
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
    font: 0.85em "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

#sidenav ul h4
{
    margin: 5px 0;
    padding: 0 0 0 10px;
    background: url("../img/2.0/sivunavin_bg.gif") 0 3px no-repeat;
}

#sidenav ul a,
#sidenav ul span
{
    display: inline;
    background: transparent !important;
    color: #024ea8 !important;
    padding: 0;
}
#sidenav ul a:hover { border-bottom: 1px solid #024ea8; }

#sidenav ul .active span,
#sidenav ul .active a   { color: black !important; font-weight: bold; }


/* Page content area */
/* ----------------- */

#content,
#footer { background: white; }

#footer
{
    margin: 50px 0;
    border-top: 2px solid #c48713;
    clear: both;
}

#page-breadcrumbs           { font: 1.15em "Trebuchet MS", sans-serif; margin: 10px 10px 20px; }
#page-breadcrumbs a         { font-weight: normal; border: 0; }
#page-breadcrumbs a:hover,
#page-breadcrumbs a:active,
#page-breadcrumbs span      { color: #bc990a; }

#page-breadcrumbs li.logo img   { vertical-align: middle; padding-right: 2px; }
#page-breadcrumbs li.logo a     { border: 0 !important; }


#footer-links   { margin-bottom: 30px; }

#copyright
{
    clear: both;
    text-align: right;
    margin-top: 5px;
}

#vaakuna
{
    /* FIXME: overlaps text in IE7, hidden for now */
    display: none;
    float: right;
    margin-top: -8px;
    border-left: 10px solid white;
}


/* Generic content classes */
/* ----------------------- */

.arrowed, .bluelist p {
    background: url("../img/2.0/listitem.gif") no-repeat 0 7px;
    margin: 0;
    padding: 4px 0 4px 20px;
}

#yhttiedot {
    padding-bottom: 15px;
}
#aukiolo {
    padding-top: 25px;
    background: url("../img/2.0/icons/attention.jpg") no-repeat 124px 26px;
}
#aukiolo .li {
    width: 130px;
    padding-left: 24px;
    background: url("../img/2.0/ao_listitem.gif") no-repeat 0 4px;
    margin-bottom: 2px;
}
#aukiolo .right {
    width: 70px;
}

.bluelist {
    background: url("../img/2.0/bluelist_bg.jpg") repeat-x 0 0;
    margin-top: 5px;
    min-height: 121px;
}
.bluelist p {
    border-bottom: 1px solid #fff;
}

.thumb {
    position: relative;
    width: 88px;
    height: 68px;
    float: left;
    margin: 5px 0;
    cursor: pointer;
}
.thumb * {
    cursor: pointer;
}
.thumb-wrap {
    width: 88px;
    height: 68px;
    background: url("../img/2.0/thumb_wrap.png") no-repeat 0 0;
}
.thumb img, .thumb-wrap {
    position: absolute;
    top: 0;
    left: 0;
}
.thumb img {
    top: 5px;
    left: 5px;
}

.quotes {
    padding: 5px 0 5px 15px;
    background: url("../img/2.0/dblquotes.gif") no-repeat 0 7px;
    margin: 0;
}

.note {
    background: #fcf3df;
    margin-bottom: 5px;
    padding: 10px;
}
.note p {
    padding-left: 20px;
    background: #fcf3df url("../img/2.0/listitem.gif") no-repeat 0 3px;
    margin: 0;
}

.personimg {
    background: #ccc;
    width: 120px;
    height: 130px;
    margin: 0 15px 10px 0;
}


/* **************
    SilverTitle
*************** */

/* This has been superseded by the generic .sininen class in 21.css. */
.silvertitle {
    background: transparent url("../img/2.0/silvertitle_bg.gif") repeat-x;
    height: 42px;
}
.silvertitle .corner-r {
    background: transparent url("../img/2.0/silvertitle_bgr.gif") no-repeat;
    width: 5px;
    height: 42px;
    float: right;
}
.silvertitle .corner-l {
    background: transparent url("../img/2.0/silvertitle_bgl.gif") no-repeat;
    width: 5px;
    height: 42px;
    float: left;
}
.silvertitle p {
    float: left;
    height: 28px;
    margin: 0;
    padding: 14px 0 0 45px;
    line-height: 1;
}
.silvertitle h2 {
    float: left;
    color: #0150ad;
    letter-spacing: -1px;
    font: normal 1.4em/42px "Trebuchet MS", sans-serif;
    
    margin: 0;
    height: 100%;
    padding-left: 40px;
    line-height: 42px;
    background-repeat: no-repeat;
}

/*
These are old and should be eliminated from the database.
Instead, replace them with <div class="sininen [iconclass]"><div><h2>Teksti</h2></div></div>
*/
#st-kello p                 { background: url("../img/2.1/icons/clock.png") no-repeat; }
#st-aurinko p               { background: url("../img/2.1/icons/sun.png") no-repeat; }
#st-ajankoht h2             { background: url("../img/2.1/icons/lightbulb.png") no-repeat; }
#st-blogit h2               { background: url("../img/2.1/icons/pencil.png") no-repeat; }
#st-matkailu h2             { background: url("../img/2.1/icons/info.png") no-repeat; }
#st-yhteys h2               { background: url("../img/2.1/icons/addressbook.png") no-repeat; }
#st-kunnanhallinto h2       { background: url("../img/2.1/icons/briefcase.png") no-repeat; }
#st-peruspalvelut h2        { background: url("../img/2.1/icons/heart.png") no-repeat; }
#st-sivistystoimi h2        { background: url("../img/2.1/icons/apple.png") no-repeat; }
#st-ymparisto h2            { background: url("../img/2.1/icons/leaf.png") no-repeat; }
#st-tapahtumakalenteri h2   { background: url("../img/2.1/icons/calendar.png") no-repeat; }
#st-kuntalaistenkuvat h2    { background: url("../img/2.1/icons/photos.png") no-repeat; }
#st-kuntalaistenkuvats h2   { background: url("../img/2.1/icons/photos.png") no-repeat; }

#st-ilmoitustaulu h2        { background: url("../img/2.1/icons/note.png") no-repeat; }
#st-keskustelu h2           { background: url("../img/2.1/icons/conversation.png") no-repeat; }


/* **************
    Rounded
*************** */
.roundedborder {
    margin: 5px 0 0 0;
    padding: 9px;
    border: 1px solid #ccc;
    position: relative;
}
.rounded-tl,.rounded-tr,.rounded-bl,.rounded-br {
    position: absolute;
    background: url("../img/2.0/rounded_tl.gif") no-repeat 0 0;
    width: 3px;
    height: 3px;
}
.rounded-tl {
    top: -1px;
    left: -1px;
}
.rounded-tr {
    background-image: url("../img/2.0/rounded_tr.gif");
    top: -1px;
    right: -1px;
}
.rounded-bl {
    background-image: url("../img/2.0/rounded_bl.gif");
    bottom: -1px;
    left: -1px;
}
.rounded-br {
    background-image: url("../img/2.0/rounded_br.gif");
    bottom: -1px;
    right: -1px;
}


/* **************
    Ideabox
*************** */
#ideabox {
    background: url("../img/2.0/ideabox_bg.gif") repeat-x 0 0;
    width: 460px;
    height: 147px;
    position: relative;
}
#ibl {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 147px;
    background: url("../img/2.0/ideabox_left.gif") no-repeat 0 0;
}
#ibr {
    position: absolute;
    right: 0;
    top: 0;
    width: 6px;
    height: 147px;
    background: url("../img/2.0/ideabox_right.gif") no-repeat 0 0;
}
#ibwrap {
    padding: 10px 20px;
}
#ibtitle {
    text-indent: -9999px;
    width: 241px;
    height: 20px;
    background: url("../img/2.0/ideabox_title.gif") no-repeat 0 0;
}
#ideabox textarea, #ideabox #ibname, #ideabox #ibemail {
    border: 1px solid #d1d2d3;
    color: #024ea8;
    font: 1em "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
#ideabox textarea {
    width: 200px;
    height: 80px;
}
#ideabox #ibname, #ideabox #ibemail {
    position: absolute;
    left: 240px;
    width: 200px;
    height: 20px;
    padding: 4px 5px 0 5px;
}
#ideabox #ibname {
    top: 35px;
}
#ideabox #ibemail {
    top: 70px;
}
#ideabox #ibsubmit-wrap {
    position: absolute;
    bottom: 15px;
    left: 240px;
}
#ideabox #ibsubmit {
    background: none;
    border-width: 0;
    font: bold 1em "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    color: #024ea8;
    padding: 0;
    cursor: pointer;
}


/* **************
    Typografia
*************** */
p {
    margin-bottom: 10px;
}

h2,h3,h4 {
    font-weight: bold;
}


a, a:focus {
    color: #024ea8;
    text-decoration: none;
    font-weight: bold;
}
a:hover {
    color: #024ea8;
    border-bottom: 1px solid #024ea8;
}

#uutiset h3         { margin: 10px 0 0; }
#uutiset p.date,
#uutiset p.arrowed  { margin: 0; }
#yhttiedot h3   { margin: 10px 0 0; }

#yhttiedot p {
    margin-bottom: 2px;
}


/* **************
    Apuluokkia
*************** */
.left {     float: left; }
.right {    float: right; }
.clear {    clear: both; }

div.gridbox {
    margin-top: 15px;
}

.marginize {
    margin: 5px 15px 15px 0;
}

.container-wrap {
        padding: 0 10px;
}

.padding-left-10 {
    padding-left: 10px;
}
.padding-t-b-10 {
    padding: 10px 0;
}
.padding-t-b-3 {
    padding: 3px 0;
}
.padding-top-3 {
    padding: 3px 0 0 0;
}
.padding-top-10 {
    padding: 10px 0 0 0;
}
.padding-bottom-5 {
    padding-bottom: 5px;
}
.margin-top-10 {
    margin-top: 10px;
}

.border-bottom {
    border-bottom: 1px solid #ccc;
}

.align-center {
    text-align: center;
}

.noborder {
    border-width: 0 !important;
}

.inline {
    display: inline;
}