@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);
@import url(https://fonts.googleapis.com/css?family=Raleway);

/* Templaten rakenne */
html, body {height: 100%;}
body {background-color:#ededee; text-align: left; height: 100%; margin: 0; padding: 0;}
#pagewrap {width: 1180px; margin: 0 auto;}
#header {width: 100%; margin: 0; padding: 0; text-align: left; overflow: hidden; background-color:#ffffff;}
#contactdiv {width:35%; height: auto; text-align: right; float: right; position: relative;height:auto;}
#logodiv{width: 65%; margin:0; padding:0; text-align:left;overflow:hidden;float:left;}
#menu {width:100%; margin-left: auto; margin-right: auto; position: relative; height: auto; z-index: 10; background-color:#a50021;}
#slogan {width:100%; margin: 0 auto; padding: 0; text-align: center; overflow:hidden; background-color: #ffffff;}
#banner {width: 100%; margin: 0 auto; padding: 0; text-align: center; overflow: hidden; position: relative;background-color:#ffffff;margin-top: 8px;}
#contentwrap {width: 100%; margin: 0 auto; padding: 0; text-align: center; overflow: hidden; position: relative;background-color: #ffffff;}
#left {width:65%; float: left; position: relative;}
* html #left {height: 100%;}
#bottom-left {width:100%; float: left; position: relative;margin-bottom: 10px; margin-top: 10px;}
#right {width:35%; float:right; position: relative;}
#bottom-right {width:100%; float:right; position: relative;}
* html #right {height: 100%;}
#footer {width:100%; padding-top: 25px; padding-bottom: 25px; margin:0 auto; clear: both; text-align: center; background-color: #a50021;}

/* Joomlan tekstisisällön tyylit */
p {font-family: Raleway,Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 14pt; line-height: 18pt; font-weight: normal; padding-left: 30px; padding-right: 30px; color:#4b4b4d; text-align: left;}
#logodiv p{padding-left: 0px !important; padding-right: 0px; font-size: 0pt;line-height: 0pt;}
#banner p{padding-left: 0px !important; padding-right: 0px; font-size: 0pt;line-height: 0pt;}
#footer p{font-family: Libre Baskerville, Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 12pt; line-height:16pt; color:#ffffff; text-align: center; padding-left: 30px; padding-right: 30px; margin: 0;} 
#footer a{font-family: Libre Baskerville, Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 12pt; line-height: 16pt; font-weight: bold; color:#ffffff; text-decoration: none;}
#footer a:hover{text-decoration: underline;}
h1 {font-family: Libre Baskerville,Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 29pt; line-height: 31pt; padding-left: 30px; padding-right: 30px; color:#ff9900;text-align: left;}
#slogan h1 {color: #a50021 !important; font-size: 33pt !important; line-height: 35pt !important;text-align: center !important;font-weight: bold;}
h2 {font-family: Libre Baskerville,Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 25pt; line-height: 27pt; font-weight: bold; padding-left: 30px; padding-right: 30px; color:#ff9900;text-align: left;}
h3 {font-family: Libre Baskerville,Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 21pt; line-height: 23pt; font-weight: bold; padding-left: 30px; padding-right: 30px; color:#ff9900;text-align: left;}
h4 {font-family: Libre Baskerville,Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 17pt; line-height: 19pt; font-weight: bold; padding-left: 30px; padding-right: 30px; color:#ff9900;text-align: left;}
a {font-family: Raleway, Verdana,Trebuchet MS,Arial,Helvetica,sans-serif; font-size: 14pt; line-height: 19pt; font-weight: bold; Text-decoration: none; color:#a50021;}
a:hover {text-decoration: underline;}

/* Kuvat skaalautumaan */
img {max-width: 100%; height: auto;}

/* Blogin navigointia */
.pagination li {display: inline;padding-right: 7px;padding-left: 7px;}  
.pagination ul {list-style-type: none;}  
.pagenav {font-family: Raleway,Arial,Helvetica,sans-serif;font-size: 12pt;line-height: 12pt;font-weight: bold;color:#000000;}
a.pagenav {text-decoration: none;color: #004d80;}
.article_separator{display:none;}

/* Kartan virittelyä */
#map97 {width: 90%;margin: 0 auto;}

/* Yhteydenottolomakkeen virittelyä */
.bfQuickMode .controls .control-label {width: 35%;min-width: 110px;vertical-align: text-top;font-family: Raleway; margin-left: 35px !important;margin-top: 10px !important; display: block; margin-bottom: 10px;text-align: left;}
.bfQuickMode input[type="text"], .bfQuickMode textarea, .bfQuickMode select, .bfQuickMode .uneditable-input {margin-left: 0px !important;margin-right: 0px !important;float: left;margin-bottom: 10px;}
.bfQuickMode .bfLabelLeft input, .bfQuickMode .bfLabelLeft textarea, .bfQuickMode .bfLabelLeft select, .bfQuickMode .bfLabelLeft button {width: auto;float: left;}  
.bfQuickMode .bfCancelButton {float: left;margin-top: 20px;}
.bfQuickMode .bfNextButton, .bfQuickMode .bfSubmitButton, .bfQuickMode .bfCancelButton {float: left;margin-top: 20px;
font-family: Raleway;font-size: 12pt;margin-right: 30px;margin-left: 3px;margin-bottom: 20px;}
.bfQuickMode .bfLabelLeft label {width: 45%;float: left; margin: 0px 10px 0px 0px; text-align: left; font-family: Raleway;font-size: 14pt;color: 4b4b4d;}
.bfFormDiv{margin: 0 auto; width: 93%;}
.bfPageIntro h3{padding-left: 0px !important;padding-right: 0px !important;}
.bfPageIntro p{padding-left: 0px !important; padding-right: 0px !important;}

/* Convert Forms tuunausta */
#cf1 {text-align: left !important;}
#left .convertforms .cf-label {text-align: left !important;}
.convertforms.cf-success .cf-response {background-color: #dadada !important;}


/************************************************************************************
Mobiililaitteet pelittämään oikein
*************************************************************************************/
/* for 990px or less */
@media screen and (max-width: 990px) {

#pagewrap {width: 100%;}
#header {width: 100%;}
#contactdiv{width:100%;padding-left:0;padding-right:0;}
#logodiv{width:100%;padding-left:0;padding-right:0;clear:both;width:auto;float:none;}
#slogan h1 {font-size: 27pt !important; line-height: 29pt !important;}
h1 {font-size: 24pt !important; line-height: 26pt !important;}  
#menu {width: 100%;}
#slogan {width: 100%;}
#banner{width: 100%;}
#contentwrap {width: 100%; margin: 0 auto;}  
#maintextcontent {width: 100%;}  
#extras {width: 100%;}
#left {width: 100%; padding-left: 0px; padding-right: 0px;}
#right {width:100%; padding-left: 0px; padding-right: 0px; clear: both; width: auto; float: none;}
#some {width: 100%;}
#footer{width: 100%;}

/* for 854 px or less */
@media screen and (min-width: 320px) and (max-width: 854px) {
#contactdiv p {text-align:center !important;}
#logodiv p {text-align:center !important;margin-right: 30px;padding-right: 30px;}
.bfQuickMode input[type="text"], .bfQuickMode textarea, .bfQuickMode .uneditable-input, .bfQuickMode input[type="text"]:hover, .bfQuickMode textarea:hover, .bfQuickMode .uneditable-input:hover, .bfQuickMode input[type="text"]:focus, .bfQuickMode textarea:focus, .bfQuickMode .uneditable-input:focus {width: 99%; max-width: 98%;min-width: 98%;}    
}

@media screen and (max-width: 587px) {
.bfQuickMode input[type="text"], .bfQuickMode textarea, .bfQuickMode .uneditable-input, .bfQuickMode input[type="text"]:hover, .bfQuickMode textarea:hover, .bfQuickMode .uneditable-input:hover, .bfQuickMode input[type="text"]:focus, .bfQuickMode textarea:focus, .bfQuickMode .uneditable-input:focus {width: 99%; max-width: 95%;min-width: 95%;}    
}  
   
/* for 750px or less */
@media screen and (min-width: 320px) and (max-width: 750px) {
}  

/* for 460px or less */
@media screen and (max-width: 480px) {
#contactdiv p{text-align:center !important;}
}

/* for 320px or less */
@media screen and (max-width: 320px) {
}