/*for screens at most 750px*/
/*bootstrap-overwriting*/
/*no 15px padding on the sides*/
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
padding-left: 0px;
padding-right: 0px;
}
/*other*/
/*content*/
/*a bit of space at the bottom before the footer*/
#content{
margin-bottom: 20px;
}
/*logo*/
/*space around the logo*/
#logo{
padding: 16px 0.9em 20px;
}
/*top navigations on their own lines*/
#site-navigation{
clear: both;
}
/*hide resizer on mobile*/
#resizer{
display: none;
}
/*space between the resizer buttons*/
/*#resizer li{
padding-left: 30px
}*/
/*...but not before the first one*/
/*#resizer li:first-child{
padding-left: 0px;
}*/
/*top navigations: each on one line, a bit of space between the elements*/
#language-home li, #site-navigation li{
float: left;
padding-left: 3px;
}
/*no space before the first ones*/
#language-home li:first-child, #site-navigation li:first-child{
padding-left: 0px;
}
/*a bit of vertical space after each line, left side aligned with logo*/
#language-home, #site-navigation{
margin-bottom: 30px;
margin-left: 16px;
}
/*language versions links*/
#language-versions{
text-align: right;
padding-right: 16px;
}
#language-versions p, #language-versions a{
padding-bottom: 10px;
padding-left: 0;
}
#language-versions span:first-child {
padding-right: 0;
}
/* narrow only: make the language versions blocks so the in English doesn't break lines */
#language-versions span {
display: block;
}
/*search box*/
/*a bit more space*/
#search-form, #search{
margin-top: 15px;
margin-bottom: 15px;
}
/*main navigation*/
/*spacing*/
#main-navigation ul li a{
padding-left: 16px;
padding-top: 10px;
padding-bottom: 10px;
/*border-top: 1px solid #d7e9ef;*/
}
/*hiding and dispalying main navigation*/
#mobile-toggle-main {
display: block;
float: right;
margin-top: 2.8em;
margin-right: 10px;
color: #ffffff;
background-color: #0073b0;
border: none;
}
#mobile-toggle-main img {
display: block;
}
/*breadcrumbs*/
/*otherwise as in big size, but more spacing to match left indent elsewhere*/
#breadcrumbs {
clear: both;
display: block;
font-weight: bold;
padding: 16px;
}
/* front page */
#herokuva img {
max-width: 100%;
}
#herokuva #slogan {
font-size: 1.6rem;
line-height: 1.8rem;
font-weight: 600;
padding: 10px 20px;
max-width: 14rem;
position: absolute;
top: 2rem;
left: 2rem;
}
@media screen and (max-width: 450px) {
#herokuva{
display: none;
}
}
#stats-and-news {
display: grid;
grid-template-rows: auto auto;
justify-items: stretch;
align-items: stretch;
grid-auto-flow: column;
width: 100%;
padding-top: 2rem;
}
#banners-and-keys {
display: grid;
grid-template-rows: auto auto;
row-gap: 10px;
justify-items: center;
align-items: stretch;
grid-auto-flow: row;
}
#banners {
width: 100%;
}
#banner1 a, #banner2 a, #banner3 a, #banner4 a {
display: block;
}
#banner1, #banner2, #banner3, #banner4 {
margin-bottom: 2rem;
}
.banner-img img {
margin-left: auto;
margin-right: auto;
display: block;
}
#new-stats li{
padding-left: 2rem;
padding-right: 2rem;
}
#new-stats li{
display: grid;
grid-template-columns: 5rem auto;
grid-auto-flow: row;
}
#new-stats h1 {
padding-left: 2rem;
padding-right: 2rem;
}
#calendar-ad {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
margin-left: 2rem;
margin-right: 2rem;
margin-bottom: 2rem;
margin-top: 2rem;
display: grid;
grid-template-columns: 28% 72%;
grid-auto-flow: row;
column-gap: 1rem;
}
#calendar-ad svg {
font-size: 5rem;
align-self: center;
justify-self: start;
}
#statslinks {
margin-bottom: 20px;
}
#statslinks {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.link-forward-left1, .link-forward-right1 {
display: block;
margin-bottom: 25px;
margin-top: 20px;
}
.link-forward-left1 {
margin-left: 4%;
}
.link-forward-right1 {
text-align: right;
margin-right: 4%;
}
/*almost identical placing to wide style, except no floating & clear both (each date starts its own line)*/
#new-stats .stat-date {
/*float: left;*/
clear: both;
margin-right: 20px;
text-align: center;
max-height: 1.5rem;
}
/*prevent links running from next to the date to under the date, rather have them as blocks fully under*/
#new-stats li a{
display: block;
}
/*links at the bottom placed more sensibly, and a bit of space*/
.link-forward-left {
float: left;
margin-left: 1em;
margin-top: 1.5em;
}
.link-forward-right {
float: right;
margin-right: 1em;
margin-top: 1.5em;
}
/*news listing*/
/*a bit of space at the top and at the bottom*/
#front-news{
padding-top: 20px;
padding-bottom: 10px;
}
#front-news article, #morenews {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
/* database ad */
#database-ad {
grid-template-rows: auto auto;
grid-auto-flow: row;
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
margin-bottom: 2rem;
}
#database-ad svg {
padding-right: 40%;
width: 60%;
padding-top: 0.8rem;
}
/* top info */
#top-info .nostobanneri-text {
padding-left: 2rem;
padding-right: 2rem;
padding-top: 2rem;
padding-bottom: 1rem;
}
#top-info .nostobanneri-img {
display: none;
}
/*key numbers*/
#key-numbers{
padding: 16px;
width: 100%;
}
#keystitle {
padding-left: 0;
}
/*overwrite h2 padding to align with everything else, the padding in the key numbers box is enough*/
#key-numbers h2{
padding-left: 0;
}
#key-numbers ul {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto auto auto auto;
column-gap: 10px;
row-gap: 10px;
grid-auto-flow: row;
margin-bottom: 5px;
padding: 2rem 2rem 2rem 2rem;
}
#key-numbers li {
padding: 10px;
border-bottom: 1px solid #1A56EC;
}
#key-numbers li:last-child {
border-bottom: none;
}
.key {
display: block;
min-height: 3.5rem;
}
.key-value {
display: block;
text-align: right;
}
#key-numbers .key-time {
display: block;
}
#bannerstitle {
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1rem;
}
#banners-inner {
margin-left: 2rem;
margin-right: 2rem;
}
/*service buttons*/
#service-buttons {
margin-left: 20%;
margin-right: 20%;
margin-top: 2rem;
margin-bottom: 2rem;
}
#service-buttons ul {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto auto auto;
grid-auto-flow: row;
row-gap: 1rem;
}
#service-buttons li a {
align-items: start;
padding-top: 0;
}
#service-buttons li {
min-height: 3rem;
}
#service-buttons li a img, #service-buttons-external li a img {
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
/*outside the front page*/
/*left navigation*/
/*spacing*/
#left-navigation p, #left-navigation div {
padding: 0.15em 0.2em 0.15em 1.7em;
word-wrap: break-word;
}
#left-navigation li{
line-height: 32px;
padding: 0.15em 0.2em 0.15em 3em;
word-wrap: break-word;
}
#left-navigation .section_name{
line-height: 32px;
}
#mobile-hider-left {
background-color: #f2ecea;
}
/*hiding the left navigation in mobile*/
#mobile-toggle-left {
/*position: relative;
top: 32px;
z-index: 5; *//*make sure it's in front of the navigation, not behind it*/
display: block;
/*border-left: 1px solid #bcbcbc;*/
background-color: #f2ecea;
border: none;
width: 100%;
text-align: left;
}
#mobile-toggle-left img {
margin-right: 10px;
}
/*a bit of space inside the content box*/
#content{
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 1.5rem;
padding-right: 0.7rem;
}
/*right navigation*/
#right h2 {
line-height: 26px;
padding: 0 1em;
}
/*no max width, it's in the bottom anyway, so it can take 100%*/
#right {
/*background-color: #ffffff;*/
box-sizing: border-box;
float: left;
margin-bottom: 20px;
/*max-width: 170px;*/
padding: 0;
}
#right p {
padding: 0.3em 1em;
}
#right ul{
list-style: none;
}
#right li{
padding: 0.3em 1em;
}
/*on the right in keruu, size-dependent*/
#keruu-news>div, #side-content>p, #login>div{
padding: 3%;
}
/*social media buttons*/
/*a thin line before the buttons*/
div#some, div#social-media{
border-top: 1px solid #dcdcdc;
}
div#social-media {
padding-top: 10px;
}
/*size*/
#some svg.icon {
width: 40px;
height: 40px;
}
#left-navigation li, #left-navigation div{
display: none;
}
/* uusi evästemodaali */
#cookie-modal {
width: 100%;
}
#button-grid {
width: 80%;
display: grid;
grid-template-rows: 50% 50%;
grid-auto-flow: row;
row-gap: 1rem;
margin-left: 10%;
margin-right: 10%;
}
/* special case: error message for the chat window */
body > div.no-full-cookie-consent {
max-width: 60%;
}
