/*for screens between 750px and 1000px*/

/*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;
}

/*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;
}

/*top navigations*/

/*top navigations on their own lines*/
#site-navigation{
	clear: both;
}

/*space between the resizer buttons*/
/*#resizer li{
	padding-left: 30px
}*/

/*...but not before the first one*/
/*#resizer li:first-child{
	padding-left: 0px;
}*/

#resizer{
	display: none;
}

/*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, #resizer, #site-navigation{
	margin-bottom: 30px;
	margin-left: 16px;
}


/*language versions links*/

#language-versions{
	text-align: right;
	padding-right: 16px;
	padding-top: 16px;
}

#language-versions p, #language-versions a{
	padding-bottom: 10px;
	padding-left: 20px;
}


/*search box*/

/*put the box on the right*/
#search-form, #search{
	text-align: right;
}

/*main navigation*/

/*spacing*/
#main-navigation ul li a{
	padding-left: 16px;
	padding-top: 10px;
	padding-bottom: 10px;
	/*border-top: 1px solid #d7e9ef;*/
}

/*breadcrumbs*/

/*otherwise as in big size, but more spacing to match left indent elsewhere*/
#breadcrumbs {
    clear: both;
    display: inline-block;
    font-style: italic;
    padding: 16px;
}

/*newest stats*/

/*align with logo*/
#new-stats li{
	padding-left: 16px;
	margin-top: 10px;
}

/*a bit of space at the bottom*/
#new-stats{
	padding-bottom: 70px;
}

#new-stats li {
    width: 100%;
    display: grid;
    grid-template-columns: 10% 90%;
    grid-auto-flow: row;
}

#new-stats .stat-date, #new-stats .tilastopvm {
    display: block;
    font-weight: bold;
    margin-right: 20px;
    position: relative;
    bottom: 2px;
    text-align: right;
}

#new-stats a {
    display: block;
}

#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%;
}

/*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;
}

/* front page */

#stats-and-news {
    display: grid;
    grid-template-rows: 49% 49%;
    row-gap: 2%;
    justify-items: stretch;
    align-items: stretch;
	grid-auto-flow: column;
	width: 100%;
}

#banners-and-keys {
    display: grid;
    grid-template-rows: 50% 50%;
    row-gap: 20px;
    justify-items: center;
    align-items: stretch;
}

#banners {
    display: grid;
    grid-template-rows: 50% 50%;
    justify-items: stretch;
    align-items: stretch;
    grid-auto-flow: row;
}

#banners-top {
    display: grid;
    grid-template-columns: 49% 49%;
    column-gap: 2%;
    justify-items: stretch;
    align-items: stretch;
    grid-auto-flow: column;
}

#banners-bottom {
    display: grid;
    grid-template-columns: 49% 49%;
    column-gap: 2%;
    justify-items: stretch;
    align-items: stretch;
	grid-auto-flow: column;
	margin-top: 20px;
}

#banner1, #banner2 {
	margin-top: 30px;
}

#banner3, #banner4 {
	margin-top: 10px;
}

.banner-img img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

#new-stats a {
    display: block;
/*    float: left;
    width: 80%;*/
}

/*news-carousel*/

/*center*/
#front-news #news-carousel .item.active{
	display: block;
	margin-left: auto%;
	margin-right: auto%;
}


/*.carousel-caption {
    
    color: #000000;
    padding-bottom: 1em;
    padding-top: 10px;
    position: absolute;
    right: 3em;
	left: 3em;
	top: 200px;
	bottom: 1em;
    text-align: left;
    text-shadow: none;
    z-index: 10;
}
*/

/*a bit of space at the top and at the bottom*/
#front-news{
	padding-top: 20px;
	padding-bottom: 10px;
}

/*standardize the size of the image*/
/*a bit of space on the bottom*/
.carousel-inner .item img {
    height: 190px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*find stats box*/

/*spacing for the image*/
/*#find-stats img{
	margin-left: 20%;
	margin-right: 20%;
	padding-top: 15px;
	padding-bottom: 10px;
}*/

/*align p with logo*/
#find-stats p{
	padding-left: 16px;
}

/*data collections box*/

/*spacing for the image*/
/*#data-collections img{
	margin-left: 20%;
	margin-right: 20%;
	padding-top: 15px;
	padding-bottom: 10px;
}*/

/*ylikirjoitetaan inlinena oleva sääntö, joka pakottaa marginaaleilla pakottaa kuvat pinoon tablettityylissäkin*/
/* #data-collections {
    margin: 15px 0 !important; 
}*/

/*align p with logo*/
#data-collections p{
	padding-left: 16px;
}

/*key numbers*/

#key-numbers{
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 16px;
	padding-right: 0px;
	width: 100%;
}

/*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: 24% 24% 24% 25%;
    grid-template-rows: 50% 50%;
    column-gap: 1%;
    row-gap: 5px;
    grid-auto-flow: column;
    margin-bottom: 5px;
    padding: 0 20px 0 20px;
}

#key-numbers li {
    padding: 10px;
}

.key {
	display: block;
	font-size: 0.9rem;
    min-height: 3.5rem;
}

.key-value {
	display: block;
	font-size: 1.2rem;
    text-align: right;
}

#key-numbers .key-time {
    color: #333333;
    display: block;
}



/*service buttons*/
/*close to wide style, no negative indent for external buttons*/
/*hover doesn't work on touch screens, so spans displayed under the buttons*/

#service-buttons ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
    margin-top: 15px;
}

#service-buttons ul li {
	flex-basis: 32%;
	margin-top: 10px;
}


#service-buttons li a, #service-buttons-external li a {
    background-position: 90% 20px;
    background-repeat: no-repeat;
    border: medium none;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
}


/*
#tietokannat {
	background-image: url("/site/img/statfin.png");
}

#suomilukuina {
	background-image: url("/site/img/suomilukuina.png");
}

#findikaattori {
	background-image: url("/site/img/findikaattori.png");
}

#ttblogi {
	background-image: url("/site/img/tietotrendit.png");
}

#tilastokoulu {
	background-image: url("/site/img/tilastokoulu.png");
}

#tutkimusaineistot {
	background-image: url("/site/img/tutkimusaineistot.png");
}

#luokitukset {
	background-image: url("/site/img/luokitukset.png");
}

#avoindata {
	background-image: url("/site/img/avoindata.png");
}*/

#service-buttons, #service-buttons-external{
	padding-bottom: 10px;
	padding-left: 16px;
}

/*order & follow*/

#order-and-follow {
    grid-template-columns: 50% 50%;
}

/*otherwise the same as in wide style, but more space between the buttons*/
.fb-follow, .twitter-follow, .li-follow, .ss-follow, .rss-order, .newsletter-order {
	height: 24px;
	width: 24px;
	float: left;
	margin: 5px 30px 5px 2px;
	border-radius: 0px;
}

/*order*/

.order-buttons span{
	display: none;
}
/*
.newsletter-order {
	background: url("/site/img/newsletter_20x20.png") no-repeat;
	background-size: 20px 20px;
}

.rss-order {
	background: url("/site/img/rss_20x20.png") no-repeat;
	background-size: 20px 20px;
}
*/
.order-buttons {
	float: left;
}

/*follow*/

.follow-buttons span{
	display: block;
}
/*
.fb-follow {
	background: url("/site/img/facebook_20x20.png") no-repeat;
	background-size: 20px 20px;
	
}

.twitter-follow {
	background: url("/site/img/twitter_20x20.png") no-repeat;
	background-size: 20px 20px;
}

.li-follow {
	background: url("/site/img/linkedin_20x20.png") no-repeat;
	background-size: 20px 20px;
	
}

.ss-follow{
	background: url("/site/img/slideshare_20x20.png") no-repeat;
	background-size: 20px 20px;
}
*/
.follow-buttons {
	float: right;
}

/*footer*/

#site-information li{
	display: inline;
}

#site-information, #change-styleversion {
	text-align: center;
	padding-bottom: 20px;
}


/*outside the front page*/

/*left navigation*/

/*hiding the left navigation in tablet*/
#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: #ebf4f9;
	border: none;
	text-align: left;
	width: 100%;
}


/* A bit of cheating to make it look like the toggle button is inside the menu while it's not */
#mobile-hider-left div{
	background-color: #ebf4f9;
}

#mobile-hider-left {
	background-color: #ffffff;
}

#left-navigation p, #left-navigation div {
    line-height: 32px;
    padding: 0.15em 0.2em 0.15em 16px;
    word-wrap: break-word;
}

#left-navigation h2{

	padding: 0.3em 1.2em 2em 1.6em;
	line-height: 32px;
}

#left-navigation li{
    line-height: 32px;
    padding: 0.15em 0.2em 0.15em 1.8em;
    word-wrap: break-word;
}

#left-navigation .section_name{
	line-height: 32px;
}

/*a bit of space inside the content box*/
/* exception in tablet: no space on top, because the mobile hider (also white) sits on top */
#content{
	padding: 0em 1.5em;
}

/*right navigation*/
#right h2 {
    line-height: 26px;
    padding: 0 1em;
}

#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;
}

#sivupalkki_oikea{
	width: 90%;
	float: right;
}

/*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;
}

/*spacing*/
#some a img {
    margin: 0 20px;
    max-width: 20px;
}

/* default for menus: hidden*/
#main-navigation, #search-form, #search, #language-home, #site-navigation{
	display: none;
}

#left-navigation li, #left-navigation div{
	display: none;
}