@charset "utf-8";

@font-face {
    font-family: Ubuntu;
    src: url("../fonts/Ubuntu-R-webfont.eot");
    src: url("../fonts/Ubuntu-R-webfont.svg");
    src: url("../fonts/Ubuntu-R-webfont.ttf");
    src: url("../fonts/Ubuntu-R-webfont.woff");
}
@font-face {
    font-family: Ubuntu;
    font-weight: bold;
    src: url("../fonts/Ubuntu-B-webfont.eot");
    src: url("../fonts/Ubuntu-B-webfont.svg");
    src: url("../fonts/Ubuntu-B-webfont.ttf");
    src: url("../fonts/Ubuntu-B-webfont.woff");
}
@font-face {
    font-family: Ubuntu;
    font-style: italic;
    src: url("../fonts/Ubuntu-RI-webfont.eot");
    src: url("../fonts/Ubuntu-RI-webfont.svg");
    src: url("../fonts/Ubuntu-RI-webfont.ttf");
    src: url("../fonts/Ubuntu-RI-webfont.woff");
}
@font-face {
    font-family: Ubuntu;
    font-style: italic;
    font-weight: bold;
    src: url("../fonts/Ubuntu-BI-webfont.eot");
    src: url("../fonts/Ubuntu-BI-webfont.svg");
    src: url("../fonts/Ubuntu-BI-webfont.ttf");
    src: url("../fonts/Ubuntu-BI-webfont.woff");
}
/* Enable if a lighter font is needed
@font-face {
    font-family: Ubuntu;
    font-style: italic;
    font-weight: lighter;
    src: url("../fonts/Ubuntu-LI-webfont.eot");
    src: url("../fonts/Ubuntu-LI-webfont.svg");
    src: url("../fonts/Ubuntu-LI-webfont.ttf");
    src: url("../fonts/Ubuntu-LI-webfont.woff");
}
*/

@media screen {
    .print {
        /* Hidden when not printing */
        display: none;
    }
}
@media print {
    .screen {
        /* Hidden when printing */
        display: none;
    }
}

html {
    font-family: "Ubuntu", "Tahoma", sans-serif;
    font-size: 14px !important;
}

#body {
    /* Sometimes the page flows over from below, so this is set to the footer's color */
    background-color: #141414;
    margin: 0;
    padding: 0;
}

/******************************************************************************/
/* These rules must be separate, or user agents will ignore them */
::placeholder {
    color: #adadad;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #adadad;
}
::-webkit-input-placeholder {
    color: #adadad;
}
::selection {
    background-color: #feffb7;
}
::-moz-selection {
    background-color: #feffb7;
}
::-webkit-selection {
    background-color: #feffb7;
}
/******************************************************************************/

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
/*    margin: 12px 0 5px 30px;*/
    margin: 10px 0 0 30px;
    padding: 0;
}
h1 {
    font-size: 22px;
}
h2 {
    font-size: 18px;
    line-height: 16px;
    position: relative;
        top: -4px;
}
h3, h4, h5, h6 {
    font-size: 14px;
    font-weight: bold;
}
h1 a, h2 a {
    font-weight: normal !important;
}
p {
    margin: 0 30px 16px 30px;
    padding: 0;
}
a {
    text-decoration: none;
}
a[rel="external"]:before {
    /* Small icon to indicate external links */
	content: url("../kuvat/extlink.gif");
}
p a[rel="external"] {
    padding-left: 2px;
}
a img {
    /* Older browsers have a border on image links, disable that */
    border: 0;
}
button {
    /* Display buttons similar to links */
    background: none;
    border: 0;
    font-family: "Ubuntu", "Tahoma", sans-serif;
    font-size: 14px;
    padding: 0;
}
ul {
    margin-left: 30px;
    padding-left: 30px;
}
ul.in-text {
    margin-top: -15px;
}
hr {
    border: 0;
    border-top: 1px dotted #dadada;
    color: #eaeaea;
    height: 1px;
    margin: 20px 2.5%;
    width: 95%;
}

blockquote {
    /* Pretty blockquotes to break up text */
    font-size: 25px;
    font-style: italic;
    margin: 20px 25px;
    text-align: center;
    text-shadow: 3px 3px 5px #b0b0b0;
    width: 250px;
}
blockquote.left {
    float: left;
}
blockquote.right {
    float: right;
}

label {
    position: relative;
        top: -2px;
}
.form-text {
    /* Some browsers don't work with input[type=text], so use this class */
    background-color: #fffffa;
    border: inset 1px #dadada;
    border-radius: 5px;
    -moz-box-shadow: inset 0 1px 2px rgba(45, 45, 45, 0.5);
    -webkit-box-shadow: inset 0 1px 2px rgba(45, 45, 45, 0.5);    
    box-shadow: inset 0 1px 2px rgba(45, 45, 45, 0.5);
    color: #2d2d2d;
    font-family: Ubuntu;
    font-size: 16px;
    padding: 2px 5px;
}
.form-text:hover, .form-text:focus {
    -moz-box-shadow: inset 0 1px 2px rgba(45, 45, 45, 0.25);
    -webkit-box-shadow: inset 0 1px 2px rgba(45, 45, 45, 0.25);
    box-shadow: inset 0 1px 2px rgba(45, 45, 45, 0.25);
}
.form-button {
    /* Some browsers don't work with input[type=submit], so use this class */
    background-color: #fffffa;
    border: outset 1px #eaeaea;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(45, 45, 45, 0.5);
    -webkit-box-shadow: 0 1px 3px rgba(45, 45, 45, 0.5);
    box-shadow: 0 1px 3px rgba(45, 45, 45, 0.5);
    color: #2d2d2d;
    font-family: Ubuntu;
    font-size: 13px;
    padding: 2px 4px;
    position: relative;
        top: -1px;
}
.form-button:hover, .form-button:focus {
    background-color: #eaeaea;
    border: inset 1px #dadada;
    -moz-box-shadow: inset 0 1px 2px rgba(45, 45, 45, 0.5);
    -webkit-box-shadow: inset 0 1px 2px rgba(45, 45, 45, 0.5);
    box-shadow: inset 0 1px 2px rgba(45, 45, 45, 0.5);
    color: #2d2d2d;
}
.form-button:active {
    background-color: #dadada;
    border: inset 1px #adadad;
    -moz-box-shadow: inset 0 1px 2px rgba(45, 45, 45, 0.5);
    -webkit-box-shadow: inset 0 1px 2px rgba(45, 45, 45, 0.5);
    box-shadow: inset 0 1px 2px rgba(45, 45, 45, 0.5);
    color: #eaeaea;
}
.kohdenumerohaku {
    width: 77px;
}

.notice {
    /* "Debug" messages */
    color: #aa0000;
    font-style: italic;
    font-weight: bold;
}
.right {
    float: right !important;
}
.left {
    float: left !important;
}
.clearfix:after {
    content: ".";
        clear: both;
        display: block;
        height: 0;
        line-height: 0;
        visibility: hidden;
}

#container {
    /* Entire content, fixed to 985px */
    background-color: #fffffa;
    background-image: -o-linear-gradient(top, #fafaf0 0%, #fffffa 100%);
    background-image: -moz-linear-gradient(top, #fafaf0 0%, #fffffa 100%);
    background-image: -webkit-linear-gradient(top, #fafaf0 0%, #fffffa 100%);
    background-image: -webkit-gradient(linear, top, bottom, color-stop(0, #fafaf0), color-stop(1, #fffffa));
    background-image: linear-gradient(top, #fafaf0 0%, #fffffa 100%);
    color: #2d2d2d;
    min-width: 985px;
    padding-top: 25px;
    position: relative;
}

#header {
    /* Everything in the header, also includes the header photo */
    margin: 0;
    padding: 0;
    position: relative;
}
#header-tabs {
    /* Top right corner tabs */
    clear: both;
    height: 28px;
    margin: 0 auto;
    position: relative;
        left: 20px;
    width: 900px;
    z-index: 50;
}
#header-tabs-content {
    float: right;
    height: 100%;
}
#header-tabs-print, #header-tabs-contact {
    background-color: #2d2d2d;
    border-radius: 5px 5px 0 0;
    -moz-box-shadow: 0 3px 8px 0 rgba(153, 153, 67, .5), 0 3px 6px 0 rgba(45, 45, 45, .75);
    -webkit-box-shadow: 0 3px 8px 0 rgba(153, 153, 67, .5), 0 3px 6px 0 rgba(45, 45, 45, .75);
    box-shadow: 0 3px 8px 0 rgba(153, 153, 67, .5), 0 3px 6px 0 rgba(45, 45, 45, .75);
    float: left;
    height: 100%;
    margin: 0 0 0 6px;
    padding: 4px 15px 7px 15px;
}
#header-tabs-print {
    padding-top: 5px;
}
#header-tabs-print-button img {
    height: 18px;
    width: 20px;
}
#header-tabs-print-button, #header-tabs-contact-button {
    color: #eaeaea;
    font-weight: bold;
}
#header-tabs-print-button:hover, #header-tabs-contact-button:hover {
    border-bottom: 1px dotted #dadada;
    color: #dadada;
}
#header-bar {
    /* The yellow header bar */
    background-color: #feff00;
    
    /* For browsers that don't support gradients */
    background-image: url("../kuvat/header-bar-background.png");
    background-repeat: repeat-x;
    /* For modern browsers */
    background-image: -o-linear-gradient(top, #feff00 40%, #eaea00 100%);
    background-image: -moz-linear-gradient(top, #feff00 40%, #eaea00 100%);
    background-image: -webkit-linear-gradient(top, #feff00 40%, #eaea00 100%);
    background-image: -webkit-gradient(linear, top, bottom, color-stop(0, #feff00), color-stop(1, #eaea00));
    background-image: linear-gradient(top, #feff00 0%, #eaea00 100%);
    
    -moz-box-shadow: 0 3px 8px 0 rgba(153, 153, 67, .5), 0 3px 6px 0 rgba(45, 45, 45, .75);
    -webkit-box-shadow: 0 3px 8px 0 rgba(153, 153, 67, .5), 0 3px 6px 0 rgba(45, 45, 45, .75);
    box-shadow: 0 3px 8px 0 rgba(153, 153, 67, .5), 0 3px 6px 0 rgba(45, 45, 45, .75);
    clear: both;
    height: 100px;
    padding: 20px 0 5px 0;
    position: relative;
    z-index: 100;
}
#header-bar-content {
    /* Most header content, centered */
    margin: 0 auto 0 auto;
    position: relative;
    width: 980px;
}
#header-logo-a {
    /* "A" part of the logo */
    float: left;
    margin: -52px 10px 0 0;
    width: 250px;
    z-index: 1000;
}
#header-logo-a img {
    height: 190px;
    width: 250px;
}
#header-logo-valitys {
    /* "-välitys" part of the logo */
    float: left;
    margin: 0 21px 0 0;
    width: 450px;
}
#header-logo-valitys img {
    height: 90px;
    width: 450px;
}
#header-contact-info {
    /* Header contact information */
    float: left;
    margin-top: 5px;
    text-align: right;
    width: 229px;
}
#header-contact-info img {
    height: 53px;
    width: 169px;
}
#header-email a {
    /* A background image is used, so that using a sprite sheet is possible */
    /*background-image: url("../kuvat/email.png");*/
    background-image: url("../kuvat/email-tumma.png");
    background-repeat: no-repeat;
    background-size: 227px 20px;
    display: block;
    height: 20px;
    margin-top: 5px;
    width: 228px;
}
#header-email a:hover {
    /* Display a different section of the sprite sheet */
    /*background-position: 0 -40px;*/
    background-image: url("../kuvat/email-harmaa.png");
    background-size: 227px 20px;
}
#header-background {
    /* The big header photo, a random image is selected with a PHP script */
    -moz-box-shadow: 3px 0 10px 0 rgba(153, 153, 67, .5), 2px 0 8px 0 rgba(45, 45, 45, .75);
    -webkit-box-shadow: 3px 0 10px 0 rgba(153, 153, 67, .5), 2px 0 8px 0 rgba(45, 45, 45, .75);
    box-shadow: 3px 0 10px 0 rgba(153, 153, 67, .5), 2px 0 8px 0 rgba(45, 45, 45, .75);
    height: 257px;
    margin: 0 auto;
    padding-top: 13px;
    position: relative;
        left: 20px;
    width: 900px;
    z-index: 50;
}
#navigation {
    /* Navigation bar */
    background-color: #000000;
    background-color: rgba(45, 45, 45, .85);
    
    /* For older browsers */
    background-image: url("../kuvat/navigation-background.png");
    background-position: 185px 0;
    background-repeat: repeat-y;
    /* For modern browsers */
    background-image: -o-linear-gradient(left, rgba(20, 20, 20, 1.0) 0%, rgba(45, 45, 45, 0.0) 20%);
    background-image: -moz-linear-gradient(left, rgba(20, 20, 20, 1.0) 0%, rgba(45, 45, 45, 0.0) 20%);
    background-image: -webkit-linear-gradient(left, rgba(20, 20, 20, 1.0) 0%, rgba(45, 45, 45, 0.0) 20%);
    background-image: -webkit-gradient(linear, left, right, color-stop(0, rgba(20, 20, 20, 1.0)), color-stop(0.20, rgba(45, 45, 45, 0.0)));
    background-image: linear-gradient(left, rgba(20, 20, 20, 1.0) 0%, rgba(45, 45, 45, 0.0) 20%);
    
    height: 17px;
    padding: 1px 1px 2px 200px;
}
#navigation a {
    color: #eaeaea;
    margin: 0 4px 0 5px;
    padding: 0;
}
#navigation a:hover {
    border-bottom: 1px dotted #feff00;
    color: #feff00;
}

#content {
    /* All page content (does not contain header of footer) */
    background-color: #fffff0;
    
    /* A very slight gradient, for browsers that support it */
    background-image: -o-linear-gradient(bottom, #fcfcf0 0%, #fffff0 100%);
    background-image: -moz-linear-gradient(bottom, #fcfcf0 0%, #fffff0 100%);
    background-image: -webkit-linear-gradient(bottom, #fcfcf0 0%, #fffff0 100%);
    background-image: -webkit-gradient(linear, bottom, top, color-stop(0, #fcfcf0), color-stop(1, #fffff0));
    background-image: linear-gradient(bottom, #fcfcf0 0%, #fffff0 100%);
    border-left: 1px solid #eaeaea;
    -moz-box-shadow: 3px 0 10px 0 rgba(153, 153, 67, .5), 2px 0 8px 0 rgba(45, 45, 45, .75);
    -webkit-box-shadow: 3px 0 10px 0 rgba(153, 153, 67, .5), 2px 0 8px 0 rgba(45, 45, 45, .75);
    
    /* Older browsers (IE) are detected and a border is used instead */
    box-shadow: 3px 0 10px 0 rgba(153, 153, 67, .5), 2px 0 8px 0 rgba(45, 45, 45, .75);
    
    margin: 0 auto 0 auto;
    padding: 20px 0 10px 0;
    
    /* Moved a bit off center */
    position: relative;
        left: 20px;
    
    width: 900px;
    z-index: 100;
}
#content a {
    border-bottom: 1px hidden;
    color: #2d2d2d;
    font-weight: bold;
}
#content a:hover {
    border-bottom: 1px dotted #4d4d4d;
    color: #4d4d4d;
}

#javascript-notice {
    /* This will be hidden if JavaScript is turned on */
    color: #CC0000;
    font-weight: bold;
    text-align: center;
    width: 100%;
}

#tabs {
    /* Page tabs */
    clear: both;
    clip: rect(-15px, 900px, 25px, 0);
    margin: 0 10px;
    position: absolute;
        left: 0;
        right: 0;
        top: -25px;
}
#tabs a {
    color: #2d2d2d;
}
#tabs-vasen, #tabs-vasen *, tabs-right * {
    float: left;
}
#tabs-right {
    /* The right side tabs have to be specified in a backward order (FIXME?) */
    float: right;
}
.tab {
    background-color: #e0e0d0;
    background-color: rgba(224, 224, 208, 0.75);
    /* For browsers that don't support gradients */
    /*
    background-image: url("../kuvat/header-background.png");
    background-position: 0 -10px;
    background-repeat: repeat-x;
    */
    /* For modern browsers */
    /*
    background-image: -o-linear-gradient(top, rgba(240, 240, 200, 0.70) 0%, rgba(255, 255, 240, 0.25) 100%);
    background-image: -moz-linear-gradient(top, rgba(240, 240, 200, 0.85) 0%, rgba(255, 255, 240, 0.25) 100%);
    background-image: -webkit-linear-gradient(top, rgba(240, 240, 200, 0.50) 0%, rgba(255, 255, 240, 0.25) 100%);
    background-image: -webkit-gradient(linear, top, bottom, color-stop(0, rgba(240, 240, 200, 0.70)), color-stop(1, rgba(255, 255, 240, 0.25)));
    background-image: linear-gradient(top, rgba(240, 240, 200, 0.70) 0%, rgba(255, 255, 240, 0.25) 100%);
    */
    
    border-radius: 8px 8px 0 0;
    -moz-box-shadow: 0 0 10px 0 rgba(153, 153, 67, 0.25), 0 0 8px 0 rgba(45, 45, 45, 0.5), inset 0 0 50px 0 #fffff0;
    -webkit-box-shadow: 0 0 10px 0 rgba(153, 153, 67, 0.25), 0 0 8px 0 rgba(45, 45, 45, 0.5), inset 0 0 50px 0 #fffff0;
    box-shadow: 0 0 10px 0 rgba(153, 153, 67, 0.25), 0 0 8px 0 rgba(45, 45, 45, 0.5), inset 0 0 50px 0 #fffff0;
    float: left;
    height: 30px;
    margin: 0 2px;
    padding: 5px 15px;
}
.tab:hover, .tab-selected {
    /* Selected tab (and unselected :hover) */
    background-color: #fffff0;
    background-image: none !important;
    position: relative;
    z-index: 1000;
}

#maincontent form {
    margin-left: 30px;
}
#maincontent table {
    border-collapse: collapse;
    margin: 0 30px 15px 30px;
}
#maincontent th {
    font-weight: bold;
}
#maincontent th, #maincontent td {
    border: 1px solid #eaeaea;
    margin: 0;
    padding: 1px 2px 1px 3px;
    text-align: left;
}

#last-edited {
    /* Last modified (bottom right of content) */
    clear: both;
    color: #adadad;
    display: block;
    font-size: 11px;
    height: 20px;
    padding: 10px 0 0 0;
    text-align: right;
    width: 100%;
}
#last-edited p {
    margin: 0;
    padding: 0 30px;
}

#footer {
    /* Page footer */
    
    /* For browsers that don't support overlapping background-images */
    background-color: #2d2d2d;
    /* For browsers that don't support CSS3 gradients */
    background-image: url("../kuvat/footer-background.png");
    background-repeat: repeat-x;
    /* For modern browsers */
    background-image: -o-linear-gradient(bottom, #141414 0%, #464646 100%);
    background-image: -moz-linear-gradient(bottom, #141414 0%, #464646 100%);
    background-image: -webkit-linear-gradient(bottom, #141414 0%, #464646 100%);
    background-image: -webkit-gradient(linear, bottom, top, color-stop(0, #141414), color-stop(1, #464646));
    background-image: linear-gradient(bottom, #141414 0%, #464646 100%);
    /* These would be used if more browsers supported multiple backgrounds
       This way #footer-inner wouldn't be needed at all
    background-image: url("../kuvat/footer-a.png"), linear-gradient(300, #141414 0%, #464646 100%);
    background-image: url("../kuvat/footer-a.png"), -o-linear-gradient(300, #141414 0%, #464646 100%);
    background-image: url("../kuvat/footer-a.png"), -moz-linear-gradient(300, #141414 0%, #464646 100%);
    background-image: url("../kuvat/footer-a.png"), -webkit-linear-gradient(300, #141414 0%, #464646 100%);
    background-image: url("../kuvat/footer-a.png"), -webkit-gradient(linear, left 300, left top, color-stop(0, #141414), color-stop(1, #464646));
    background-repeat: no-repeat, repeat-x;
    */
    
    clear: both;
    color: #eaeaea;
    font-size: 13px;
    height: 200px;
    position: relative;
    width: 100%;
    z-index: 100;
}
#footer-inner {
    /* This is only used for the second background image */
    
    background-image: url("../kuvat/footer-a.png");
    background-repeat: no-repeat;
    background-size: 427px 200px;
    padding-top: 20px;
    position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
}
#footer-content {
    /* All footer content (centered) */
    margin: 0 auto;
    position: relative;
        left: 20px;
    width: 880px;
}
#sitemap {
    /* Sitemap */
    float: right;
    height: 110px;
    margin-bottom: 25px;
}
#sitemap .sitemap-column {
    /* These divs contain one page's subpages */
    border-right: 1px solid #4d4d4d;
    float: left;
    height: 100%;
    padding: 0 10px 0 14px;
}
#sitemap div:last-child, #sitemap div:nth-last-child(2) {
    border: 0;
}
#sitemap .sitemap-column a {
    color: #eaeaea;
    margin-bottom: 1px;
    text-decoration: none;
}
#sitemap .sitemap-column a:hover {
    border-bottom: 1px dotted #dadada;
    color: #dadada;
    margin-bottom: 0;
}
#sitemap .sitemap-column a:first-child {
    /* The main page will be displayed with a bold font */
    border-bottom: 1px dotted #4d4d4d;
    font-weight: bold;
    margin-bottom: 0;
    position: relative;
        left: -8px;
}
#sitemap .sitemap-column a:first-child:hover {
    border-color: #dadada;
}
#sitemap .sitemap-column div {
    /* These divs contain a page's subpage's subpages */
    border: 0;
    float: none;
    height: auto;
    padding: 0 0 0 8px;
}
#footer-bottom {
    /* Contact information */
    clear: both;
    height: 20px;
    margin: 0 auto;
    width: 868px;
}
#footer-bottom div {
    float: left;
}
#footer-contact-info img {
    height: 18px;
    width: 640px;
}
#footer-email a {
    /* A background image is used, so that using a sprite sheet is possible */
    /**********************
    background-image: url("../kuvat/email.png");
    background-position: 0 -20px;
    **********************/
    background-image: url("../kuvat/email-vaalea.png");
    background-repeat: no-repeat;
    background-size: 227px 20px;
    display: block;
    height: 20px;
    position: relative;
        top: -1px;
    width: 228px;
}
#footer-email a:hover {
    /* Display a different section of the sprite sheet */
    /*background-position: 0 -40px;*/
    background-image: url("../kuvat/email-harmaa.png");
    background-size: 227px 20px;
}

#contact-form-background {
    /* Semi-transparent background overlay for the contact form (covers entire page) */
    background-color: #454545;
    background-color: rgba(45, 45, 45, .75);
    display: none;
    position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
    z-index: 1000000;
}
#contact-form {
    /* Hovering contact form (this is modified by JavaScript) */
    background-color: #252525;
    border-radius: 8px;
    -moz-box-shadow: 3px 0 10px 0 rgba(153, 153, 67, .5), 2px 0 8px 0 rgba(45, 45, 45, .75);
    -webkit-box-shadow: 3px 0 10px 0 rgba(153, 153, 67, .5), 2px 0 8px 0 rgba(45, 45, 45, .75);
    box-shadow: 3px 0 10px 0 rgba(153, 153, 67, .5), 2px 0 8px 0 rgba(45, 45, 45, .75);
    display: none;
    height: 340px;
    margin: -170px 0 0 -220px;
    /*
    FIXME:FUCKED UP ON ANDROID
    max-height: 100%;
    max-width: 100%;
    */
    padding: 15px 0 0 0;
    position: fixed;
        left: 50%;
        top: 50%;
    text-align: center;
    width: 380px;
    z-index: 1000001;
}
#contact-form.no-js {
    /* If JavaScript is disabled, the form is displayed before the footer */
    border-radius: 0;
    display: block;
    margin: 0 auto;
    position: relative;
        left: 0;
        top: 0;
}
#contact-form.no-js #contact-form-close {
    display: none;
}
#contact-form-close {
    /* Contact form close button */
    background-color: #cc0000;
    border: 0;
    border-radius: 5px;
    -moz-box-shadow: 2px 0 8px 0 rgba(45, 45, 45, .75);
    -webkit-box-shadow: 2px 0 8px 0 rgba(45, 45, 45, .75);
    box-shadow: 2px 0 8px 0 rgba(45, 45, 45, .75);
    color: #eaeaea;
    font-weight: bold;
    padding: 5px 8px;
    position: absolute;
        right: -5px;
        top: -5px
}
#contact-form-close:hover {
    background-color: #aa0000;
    -moz-box-shadow: 3px 0 10px 0 rgba(153, 153, 67, .5), 2px 0 8px 0 rgba(45, 45, 45, .75);
    -webkit-box-shadow: 3px 0 10px 0 rgba(153, 153, 67, .5), 2px 0 8px 0 rgba(45, 45, 45, .75);
    box-shadow: 3px 0 10px 0 rgba(153, 153, 67, .5), 2px 0 8px 0 rgba(45, 45, 45, .75);
}
#contact-form h1 {
    color: #dadada;
    margin: 0;
    padding: 0;
}
#contact-form label {
    color: #dadada;
    display: block;
    float: left;
    font-size: 15px;
    margin-top: 8px;
    padding: 0;
    text-align: right;
    vertical-align: top;
    width: 110px;
}
#contact-form .form-text {
    margin: 4px 0 0 -20px;
    width: 220px;
}
#contact-form input.required {
    /* Required form fields */
    background-color: #ffcccc;
    background-image: url("../kuvat/redstar.png");
    background-position: 98% 1px;
    background-repeat: no-repeat;
}
#contact-form input.required:focus {
    background-color: #ffffff;
}
#contact-form textarea {
    height: 120px;
}
#contact-form-submit {
    display: block;
    float: right;
    margin: 10px 30px 0 0;
}
#contact-form-reset {
    display: block;
    float: right;
    margin: 10px 10px 0 0;
}
#contact-form-webmaster {
    font-size: 12px;
    font-weight: bold;
    position: absolute;
        bottom: 10px;
        left: 10px;
}
#contact-form-webmaster a {
    border-bottom: 1px hidden;
    color: #eaeaea !important;
}
#contact-form-webmaster a:hover {
    border-bottom: 1px dotted #fafafa;
    color: #fafafa !important;
}
#contact-form-result {
    background-color: #2d2d2d;
    border-radius: 4px 4px 0 0;
    color: #eaeaea;
    font-weight: bold;
    padding: 4px 8px;
    position: fixed;
        bottom: 0;
        right: 20px;
    z-index: 1000;
}

#tooltip {
    /* Hovering tooltip (mailto: and external links, form hints, etc.) */
    background-color: #f0f0f0;
    border: 1px solid #dadada;
    border-radius: 5px;
    -moz-box-shadow: 2px 0 4px 0 rgba(45, 45, 45, .75);
    -webkit-box-shadow: 2px 0 4px 0 rgba(45, 45, 45, .75);
    box-shadow: 2px 0 4px 0 rgba(45, 45, 45, .75);
    color: #4d4d4d;
    display: none;
    opacity: 1.0;
    padding: 4px 6px;
    position: absolute;
    text-align: center;
    z-index: 10000000;
}
#tooltip .small {
    font-size: 10px;
}
#tooltip-arrow {
    background-image: url("../kuvat/tooltip-arrow.png");
    background-repeat: no-repeat;
    height: 12px;
    width: 20px;
}
.tooltip-normal #tooltip-arrow {
    background-position: 0 0;
    position: absolute;
        left: 2px;
        top: -12px;
}
.tooltip-flipped #tooltip-arrow {
    background-position: 0 -12px;
    position: absolute;
        bottom: -12px;
        left: 2px;
}

/******************************************************************************/
#headerbg-dev {
    float: right;
    height: 13px;
    width: 50px;
}
#headerbg-dev button {
    background-color: #f0ffff;
    border-radius: 4px;
    padding: 0 4px;
}
#headerbg-dev button:hover {
    background-color: #feff00;
}
#headerbg-dev-name {
    background-color: #f0ffff;
    border-radius: 4px;
    height: 13px;
    opacity: 0.6;
    padding: 2px 4px 4px 4px;
    position: absolute;
        right: 5px;
        top: 35px;
}
/******************************************************************************/