@import url(https://fonts.googleapis.com/css?family=Cantarell:regular,italic&subset=latin);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:regular,italic&subset=latin);

html {
    margin: 0;
background-color: rgb(178,177,178); /* Old browsers */
}

body {
    font-family: 'Droid Sans', Cantarell, helvetica, Arial, sans-serif;
    margin: 0;
background-color: rgba(69,72,77,1); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(69,72,77,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(69,72,77,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(69,72,77,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(69,72,77,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(69,72,77,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(69,72,77,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#45484d',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;


background: rgb(2,2,2); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(2,2,2,1) 0%, rgba(178,177,178,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(2,2,2,1)), color-stop(100%,rgba(178,177,178,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(2,2,2,1) 0%,rgba(178,177,178,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(2,2,2,1) 0%,rgba(178,177,178,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(2,2,2,1) 0%,rgba(178,177,178,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(2,2,2,1) 0%,rgba(178,177,178,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020202', endColorstr='#b2b1b2',GradientType=0 ); /* IE6-9 */


background: rgb(114,114,114); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(114,114,114,1) 0%, rgba(178,177,178,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(114,114,114,1)), color-stop(100%,rgba(178,177,178,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(114,114,114,1) 0%,rgba(178,177,178,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(114,114,114,1) 0%,rgba(178,177,178,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(114,114,114,1) 0%,rgba(178,177,178,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(114,114,114,1) 0%,rgba(178,177,178,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#727272', endColorstr='#b2b1b2',GradientType=0 ); /* IE6-9 */

}

header {
    position: relative;
    border: 2px solid white;

/*testiä*/
background: linear-gradient(to bottom,  rgba(172,200,198,1) 0%,rgba(143,170,170,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009aff', endColorstr='#006bb5',GradientType=0 ); /* IE6-9 */


    background: rgb(0,154,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(0,154,255,1) 0%, rgba(0,107,181,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,154,255,1)), color-stop(100%,rgba(0,107,181,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,154,255,1) 0%,rgba(0,107,181,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,154,255,1) 0%,rgba(0,107,181,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,154,255,1) 0%,rgba(0,107,181,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,154,255,1) 0%,rgba(0,107,181,1) 100%); /* W3C */


}

header #head-content {
    position: relative;
    width: 47em;
    height: 110px;
    padding-top: 10px;
    padding-right: 15em;
    margin: 0 auto;
    background: transparent url(../images/background-e.png) right -80px no-repeat;
}

header #head-content:after {
    display: block;
    content: "";
    clear: both;
}

#logo a,
#logo a img {
    border: none;
}

#langchooser {
    position: absolute;
    right: 15em;
    bottom: 0;
}

#langchooser ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 90%;
}

#langchooser ul li {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    background-color: #006BB5;
}

#langchooser ul li a {
    display: block;
    padding: 0.2em 0.5em;
    border: 1px solid white;
    border-bottom: none;
    color: white;
    /*text-shadow: -2px -2px 1px black, 2px 2px 1px black;*/
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

#langchooser ul li.currentlang a,
#langchooser ul li a:hover {
    background-color: white;
    color: black;
}

#langchooser ul li.currentlang a {
    text-shadow: 0 0 1px rgba(0,0,0,0.5);
    text-shadow: 0 0 1px rgba(0,0,177,0.5);
}


nav {
    clear: both;
    border: 2px solid white;
    margin: 0;
/*testiä*/
    background-color: #ACC8C6;

    background-color: #009AFF;
    
/*    background: rgb(178,225,255); /* Old browsers */
/*background: -moz-linear-gradient(top,  rgba(178,225,255,1) 0%, rgba(102,182,252,1) 100%);*/
/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(178,225,255,1)), color-stop(100%,rgba(102,182,252,1)));*/
/*background: -webkit-linear-gradient(top,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%);*/
/*background: -o-linear-gradient(top,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%);*/
/*background: -ms-linear-gradient(top,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%);*/
/*background: linear-gradient(to bottom,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%);*/
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 );*/
}

nav #topnavi {
    width: 47em;
    margin: 0 auto;
    padding: 0;
    padding-right: 15em;
    background: transparent url(../images/background-e.png) right -204px no-repeat;
}
nav ul.menu,
nav ul#main-navi {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 90%;
    border-left: 1px solid white;
    border-right: 1px solid white;

/*testiä*/
background: linear-gradient(to bottom,  rgba(143,170,170,1) 0%,rgba(172,200,198,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006bb5', endColorstr='#009aff',GradientType=0 ); /* IE6-9 */

    background: rgb(73,155,234); /* Old browsers */
background: -moz-linear-gradient(bottom,  rgba(73,155,234,1) 0%, rgba(13,53,96,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(73,155,234,1)), color-stop(100%,rgba(13,53,96,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom,  rgba(73,155,234,1) 0%,rgba(13,53,96,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(bottom,  rgba(73,155,234,1) 0%,rgba(13,53,96,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(bottom,  rgba(73,155,234,1) 0%,rgba(13,53,96,1) 100%); /* IE10+ */
background: linear-gradient(to top,  rgba(73,155,234,1) 0%,rgba(13,53,96,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d3560', endColorstr='#499bea', GradientType=0 ); /* IE6-9 */


    background: rgb(0,154,255); /* Old browsers */
background: -moz-linear-gradient(bottom,  rgba(0,154,255,1) 0%, rgba(0,107,181,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(0,154,255,1)), color-stop(100%,rgba(0,107,181,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom,  rgba(0,154,255,1) 0%,rgba(0,107,181,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(bottom,  rgba(0,154,255,1) 0%,rgba(0,107,181,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(bottom,  rgba(0,154,255,1) 0%,rgba(0,107,181,1) 100%); /* IE10+ */
background: linear-gradient(to top,  rgba(0,154,255,1) 0%,rgba(0,107,181,1) 100%); /* W3C */

}
nav ul.menu,
nav ul#main-navi:after {
    display: block;
    content: "";
    clear: both;
    height: 0;
}
nav ul.menu li,
nav ul#main-navi li {
    float: left;
    padding: 0;
}
nav ul.menu li a,
nav ul#main-navi li a {
    padding: 0.3em 1em;
    margin: 0.2em 0;
    border-right: 1px solid white;
    display: block;
    text-decoration: none;
    color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
nav ul.menu li:hover,
nav ul#main-navi li.currentcategory,
nav ul#main-navi li:hover {
    background-color: #006CB6;
}

#content-box {
    width: 62em;
    margin: 0 auto;
    background-color: white;
    border: 1px solid white;
}

#content-box:after {
    display: block;
    content: "";
    clear: both;
}

#content-box a {
    color: #069;
}

#content-box #sidebar {
    float: right;
    font-size: 100%;
    width: 14.5em;
    margin-right: 0.3em;
}

#content-box #sub-navi {
    float: left;
    font-size: 90%;
    width: 16em;
    margin-top: 1em;
    margin-left: 0.3em;
}

#content-box #sub-navi ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

#content-box #sub-navi ul ul {
    display: none;
}

#content-box #sub-navi ul li.currentpage ul {
    display: block;
}

#content-box #sub-navi ul li {
    margin: 0;
    padding: 0;
}

#content-box #sub-navi ul li a {
    display: block;
    font-weight: bold;
    padding: 0.1em 1em 0.1em 1em;
    text-decoration: none;
}

#content-box #sub-navi ul li li a {
    font-weight: normal;
    padding-left: 1em;
    border-left: 6px solid transparent;
    border-radius: 4px;
}

#content-box #sub-navi > ul > li > a {
    border: 1px solid #006CB6;
    border-radius: 5px;
    margin: 0.2em 0;
    padding: 0.3em 1em;
}

#content-box #sub-navi > ul > li.currentpage > a {
    color: white;
    background-color: #006CB6;
    text-shadow: 2px 2px 1px rgba(0,0,0,0.5);
}

#content-box #sub-navi > ul > li > a:hover {
    color: white;
    background-color: #77BDEB;
    background-color: #009AFF;
}

#content-box #sub-navi ul ul > li.currentpage > a {
    border-left: 6px solid #006CB6;
}

#content-box #sub-navi ul ul > li > a:hover {
    text-decoration: underline;
}

#main-content {
    margin: 0 0.3em 0 15em;
    padding: 0 0.5em;
}

body.index #main-content {
    margin: 0 15em 0 0.3em;
}

#main-content section {
    font-size: 80%;
    margin: 0 3em 0 3em;
    text-align: justify;
    min-height: 8em;
}

#main-content .image-slot {
    height: 250px;
}

#main-content .imgleft {
    float: left;
    margin: 0 0.5em 0.5em 0;
    /*max-width: 12em;*/
}

#main-content .imgright {
    float: right;
    margin: -2em 0 0.5em 0.5em;
    margin-right: 0;
    /*max-width: 12em;*/
}

#main-content img.topimage {
    max-width: 45em;
    display: block;
    margin: 2px auto;
    height: auto;
    max-height: 250px;
    border: 2px solid black;
}

#main-content h1.mainhead,
#sidebar h1 {
    background-color: #006CB6;
    color: white;
    font-size: 130%;
    /*font-weight: normal;*/
    padding: 0.5em 1em;
    text-shadow: 2px 2px 1px rgba(0,0,0,0.5);
}

#main-content h1.mainhead .datetime {
    font-size: 80%;
    font-style: italic;
}

#content-box #sidebar #box-some {
    height: 252px;
}

#content-box #sidebar #box-some .fb-like-box {
    margin-top: -10px;
    margin-bottom: -10px;
}

ul#newslist {
    list-style: none;
    margin: 0.3em;
    padding: 0;
}

ul#newslist li {
    margin: 0;
    padding: 0;
    border-radius: 6px;
    border: 1px solid #006CB6;
    margin: 0 0 0.5em 0;
    padding: 0 0.5em 0.3em 0.5em;
}

ul#newslist h2 {
    color: #069;
    font-size: 80%;
    padding: 0 0 0.2em 0;
    margin: 0;
    margin-top: 0.5em;
}

ul#newslist h2 a {
    text-decoration: none;
}

ul#newslist h2 a:hover {
    text-decoration: underline;
}

ul#newslist .newsdate {
    font-size: 75%;
    font-style: italic;
}


ul#newslist .newsshortbody {
    font-size: 80%;
    margin: 0.2em 0 0 0;
    padding: 0;
}

ul#newslist p {
    margin: 0;
    padding: 0;
}

.newsshortbody p:last-of-type:after {
    content: '...';
}

#main-content section h1 {
    color: #069;
    font-size: 120%;
    padding: 0.2em 0;
    margin: 0;
    margin-top: 0.5em;
    clear: right;
}

#main-content section h2 + h1 {
    margin-top: 0.1em;
    padding-top: 0;
}

#main-content section h2 {
    color: black;
    font-size: 100%;
    margin-top: 1.5em;
    border-bottom: 1px solid #999;
}

#main-content section blockquote {
    font-style: italic;
    margin-left: 2em;
}

#main-content section blockquote em {
    font-style: normal;
}


#disclaimerbox {
    clear: both;
    border-top: 5px solid #006CB6;
    margin: 2em 1em 0;
    padding: 1em 0;
}

#disclaimerbox #leftlogo {
    float: left;
    margin-right: 0.5em;
}

#disclaimerbox #rightlogo {
    float: right;
    margin-left: 0.5em;
}

#disclaimerbox #leftlogo img,
#disclaimerbox #rightlogo img {
    height: 40px;
    widht: auto;
}

#disclaimerbox #disclaimer {
    padding-top: 1em;
    /*clear: both;*/
    font-size: 70%;
    font-style: italic;
    /*text-align: center;*/
}

footer {
    clear: both;
    width: 62em;
    margin: 0 auto;
    padding: 1em;
}

footer ul.footerlist {
    list-style: none;
    margin: 1em;
    padding: 0;
    float: left;
}

#main-content ul.newslist {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-content ul.newslist li.newsitem {
    margin: 0 0 2em 0;
    padding: 0;
}

#main-content ul.newslist li.newsitem h2 {
   /* font-size: 150%; */
   /* border-bottom: 1px solid #006CB6; */
}

#main-content ul.newslist li.newsitem h2 a {
    text-decoration: none;
}

#main-content ul.newslist li.newsitem .newsdate {
    font-size: 80%;
    font-style: italic;
}


/***************************
 * content styles
 ***************************/

#main-content table.contenttable {
    border-collapse: collapse;
}

#main-content table.contenttable th {
    padding-left: 2em;
}

#main-content table.contenttable td {
    padding-right: 3em;
}

div.mat {
    margin-left: 3em;
}

#main-content dl dt {
    font-weight: bold;
    margin-top: 1em;
    margin-left: 1em;
}

#main-content dl dd {
    margin-left: 1em;
}

#main-content table.sdtable {
    width: 85%;
    margin: 2em auto 3em auto;
}

.sd_left, .sd_right {
    display: inline-block;
    background: #4891d9 url(../images/buttongrad.png) left -6px repeat-x;
    border: 2px solid #4891d9;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -o-border-radius: 8px;
}
.sd_left:hover, .sd_right:hover {
    background: #4891d9 url(../images/buttongrad.png) left top repeat-x;
}
.sd_left a, .sd_right a{
    display: block;
    padding: 7px 1em;
    color: black;
    font-weight: bold;
}
.sd_left {
    margin-right: 3em;
    padding-left: 3px;
}
.sd_left a {
    vertical-align: center;
    padding-left: 25px;
    background: transparent url(../images/triangleleft.png) left center no-repeat;
}
.sd_right {
    margin-left: 3em;
    padding-right: 3px;
}
.sd_right a {
    vertical-align: center;
    padding-right: 25px;
    background: transparent url(../images/triangleright.png) right center no-repeat;
}

body#partners_and_people section ul {
    list-style-image: url('../images/person-red.png');
}

#videowriter {
    width: 17em;
    position: relative;
    margin: 2em auto;
    padding: 1.2em 1.2em;
    /*border: 1px solid #4891d9;*/
    height: 4em;
    vertical-align: middle;
    text-align: center;
    background: white;
}
#videowriter .mathquill-editable {
    border: none;
}

#videowriter .screen {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
}