/* Copyright © Janne Rantala 2014 */
@import "clearfix.css";

/*common settings*/
@font-face {
    font-family: Artifika-Regular;
    src: url("artifika/Artifika-Regular.ttf") format("truetype");
    }

body { 
    font-family: Artifika-Regular, Georgia, Helvetica, Verdana, Times;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 2px;
    font-size: 12px;
    background-color: #f8fefe;
    }

/*reunus*/
div.border { 
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;    
    }

/*navigointi*/
nav { 
    background-color: #b0040d;
    min-height: 28px;
    padding: 2px;
    text-align: center;
    text-shadow: 2px 2px black;
    border-radius: 5px 5px 0px 0px; 
    }

a { 
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    padding: 0px 8px 0px 8px;
    }    

a:link, a:visited { 
    color: #f8fefe;
    }                

a:hover { 
    color: #f6cece; 
    /* color: #b0040d;*/
    transition: all 2s;
    }      

a:active { 
    color: #b0040d;
    }


/*header*/
div.blank { 
    background-color: #f8fefe;
    height: 10px;
    text-align: center;
    border-radius: 0px 0px 0px 0px ; 
    }

header { 
    background-image: url("../pics/bannerwall4.jpg");
    background-color: #b0040d;
    height: 200px;
    text-align: center;
    border-radius: 0px 0px 5px 5px; 
    }

/*sisältö*/
div.content { 
    background-color: #f8fefe;
    height: 515px;
    width: 100%;
    }


article {  
    max-width: 80%;
    float: left;
    background-color: #f8fefe;
    height: 500px;
    text-align: center;
    overflow: auto;
    /* scrollbar things works only in ie */
    scrollbar-base-color: #f8fefe;
    scrollbar-3dlight-color: #f8fefe;
    scrollbar-highlight-color: #f8fefe;
    scrollbar-track-color: #f8fefe;
    scrollbar-arrow-color: #b0040d;
    scrollbar-shadow-color: #f8fefe;
    scrollbar-dark-shadow-color: #C0C0C0;
    }


aside {  
    width: 20%;
    height: 500px;
    float: left;
    padding-top: 5px;
    }

h1, h2, h3 { 
    color: #b0040d;
    margin-left: 10%;
    margin-right: 10%;
    }        

h1 { 
    font-size: 22px;
    }

h2 { 
    font-size: 19px;
    }     

h3 { 
    font-size: 16px;
    } 

p { 
    text-indent: 20px;
    margin-left: 10%;
    margin-right: 10%;
    }

p.column { 
    text-align: justify;

    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;

    -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
    -moz-column-gap: 20px; /* Firefox */
    column-gap: 20px;

    -webkit-column-rule-color:#b0040d; /* Safari and Chrome */
    -moz-column-rule-color: #b0040d; /* Firefox */
    column-rule-color: #b0040d;

    -webkit-column-rule-style: solid; /* Safari and Chrome */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
    
    -webkit-column-rule-width: 1px; /* Safari and Chrome */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
    }

table { 
    margin: 20px 150px 20px 35%;
    text-align: left;
    }       

td { 
    width: 400px;
    }

h3.left {
    color: #b0040d;
    font-size: 19px;
    margin-left: 50px;
    margin-right: 450px;
}

p.left {
    margin-left: 50px;
    margin-right: 450px;
}

iframe { 
    float: right;
    margin: 50px 10px 20px 10px;
    }

/*pic banner aside*/
img.banner_u { 
    margin: 5px 0px 5px 0px;
    width: 180px; 
    height: 145px;
    float: right;
    border-radius: 5px 5px 0px 0px;
    }

img.banner_m { 
    margin: 5px 0px 5px 0px;
    width: 180px; 
    height: 145px;
    float: right;
    border-radius: 0px 0px 0px 0px;
    }
	
img.banner_l { 
    margin: 5px 0px 0px 0px;
    width: 180px; 
    height: 145px;
    float: right;
    border-radius: 0px 0px 5px 5px;
    }
	
p.imgline { 
    background-color: #b0040d;
    margin: 5px 0px 5px 0px;
    width: 180px;
    height: 2px;
    border-radius: 5px 5px 5px 5px;
    float: right;
    }

/*footer*/
footer {
    background-color: #dcdcdc;
    text-align :center;
    font-size: 9px;
    color: #696969;
    border-radius: 5px 5px 5px 5px;
    }


/*rest is for responsivity*/ 
@media screen and (max-width: 700px) {
    div.content {
	background-color: #f8fefe;
	width: 100%;
	height: 1500px;
    }
    
    aside {
	width: 0%;
	float: none;
	padding-top: 5px;
    }

    img.banner_u {
	margin: 20px 0px 5px 100px;
	width: 400px;
	height: 300px;
	float: none;
	border-radius: 5px 5px 5px 5px;
    }

    img.banner_m {
	margin: 5px 0px 5px 100px;
	width: 400px;
	height: 300px;
	float: none;
	border-radius: 5px 5px 5px 5px;
    }

    img.banner_l {
	margin: 5px 0px 0px 100px;
	width: 400px;
	height: 300px;
	float: none;
	border-radius: 5px 5px 5px 5px;
    }
    
    p.imgline {
	background-color: #b0040d;
	margin: 5px 0px 5px 108px;
	width: 400px;
	height: 2px;
	border-radius: 5px 5px 5px 5px;
	float: none;
    }
    
    article {
	max-width: 100%;
	float: none;
	background-color: #f8fefe;
	text-align: center;
	/* scrollbar things works only in ie */
	scrollbar-base-color: #f8fefe;
	scrollbar-3dlight-color: #f8fefe;
	scrollbar-highlight-color: #f8fefe;
	scrollbar-track-color: #f8fefe;
	scrollbar-arrow-color: #b0040d;
	scrollbar-shadow-color: #f8fefe;
	scrollbar-dark-shadow-color: #C0C0C0;
    }

    h3.left {
	color: #b0040d;
	font-size: 19px;
	margin-left: 50px;
	margin-right: 20px;
    }

    p.left {
	margin-left: 50px;
	margin-right: 20px;
    }
    
    iframe {
	float: none;
	margin: 50px 10px 20px 10px;
    }
}