/*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{
	float: right;
	padding-bottom: 10px;
	padding-left: 20px;
}

/*search box*/

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

/*a bit more space*/
#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 {
	background-image: url("/site/img/mobiili_haku_valikko.png");
	width: 64px;
	height: 32px;
	display: block;
	float: right;
	margin-top: 2.8em;
	margin-right: 10px;
}


/*breadcrumbs*/

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

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

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

/*grey dates*/
.stat-date {
	/*float: right;*/
	color: #bcbcbc;
}

/*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;
    font-size: 18px;
    font-weight: bold;
    margin-right: 20px;
    position: relative;
	bottom: 2px;
    vertical-align: middle;
	text-align: right;
    width: 50px;
	height: 25px;
}

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

.carousel-inner{
	height: 440px;
}

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

/*find stats box*/

/*match height with data-collections*/
#find-stats{
	height: 230px;
}

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

/*match height with find-stats*/
#data-collections{
	height: 230px;
}

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

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



/*key numbers*/

#key-numbers{
	padding: 16px;
}

/*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 li {
    /*background-color: rgba(248, 148, 30, 0.8);*/
    float: left;
    margin: 5px 7px;
    padding: 5px;
    width: 43%;
}

/*bottom margin so that a long word won't cut into the value on narrow screens*/
.key {
    color: #333333;
    display: block;
    height: 30px;
    margin-top: 3px;
    text-align: justify;
    width: 100%;
	padding-left: 5px;
	/*margin-bottom: 15px;*/
}

/*width 100% so that layout won't break when changing screensize*/
/*+smaller font for the same reason*/
.key-value {
    color: #ffffff;
    display: block;
    float: right;
    font-size: 16pt;
    font-weight: bold;
    /*margin-top: 5%;*/
    /*padding: 0.4em 0;*/
	padding-right: 5px;
    text-align: right;
    width: 100%;
}

#key-numbers .key-time {
    color: #333333;
    display: block;
    float: left;
    font-size: 12px;
    height: 20px;
    /*margin-bottom: 10px;*/
    /*margin-top: 15%;*/
	padding-left: 5px;
    text-align: justify;
    width: 34%;
}

/*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.internal li a {
	background-color: #a40084;
}

#service-buttons-external.external li a {
	background-color: #33c1ba;
}

#service-buttons li a, #service-buttons-external li a {
    background-position: 150px 6px;
    background-repeat: no-repeat;
    border: medium none;
    color: #ffffff;
    float: left;
    height: 50px;
    margin: 7px 15px 70px 0;
    padding: 10px 0 0 15px;
    text-align: left;
    width: 195px;
}

#service-buttons li .button-hover, #service-buttons-external li .button-hover{
	/*display: block;*/
	position: relative;
	top: 15px;
	color: #000000;
}

/*force the text of the button not to overlap with the background image*/
#service-buttons li .button-text, #service-buttons-external li .button-text{
	display: block;
	max-width: 74%;
}
/*
#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*/

/*otherwise the same as in wide style, but more space between the buttons + below*/
.fb-follow, .twitter-follow, .li-follow, .ss-follow, .rss-order, .newsletter-order {
	height: 24px;
	width: 24px;
	float: left;
	margin: 5px 50px 20px 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;
}
*/
/*doesn't fit next to order buttons in mobile, so float left instead of right*/
.follow-buttons {
	float: left;
}


/*footer*/

#site-information li{
	display: inline;
}

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

/*outside the front page*/

/*left navigation*/



/*spacing*/

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

#left-navigation h2{

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

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

/*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*/
	background-image: url("/site/img/mobiili_valikko_transparent.png");
	width: 32px;
	height: 32px;
	display: block;
	float: right;
	border-left: 1px solid #bcbcbc; 
}

/*a bit of space inside the content box*/
#content{
	padding: 1em 1.5em;
}


/*right navigation*/
#right h2 {
    background-color: #777777;
    color: #ffffff;
    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;
}

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

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

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