/* ==========================================================================
  SM-sprint spr.css
   ver 1.0  9.11.2016  - based on sg.css
   helper and fixes etc. according HTML5 Boilerplate 
   Jonathan Verrecchia - verekia.com/initializr/responsive-template   
   ========================================================================== */

/* look "http://reference.sitepoint.com/css/moz-box-sizing" */
* { 
/* Property -moz-box-sizing is an unknown vendor extension */
  -moz-box-sizing: border-box; 
/* Property -webkit-box-sizing is an unknown vendor extension */
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

/* Unknown pseudo-element or pseudo-class :: */
::-moz-selection {			
    background: #b3d4fc;
    text-shadow: none;
}
*/

/* Unknown pseudo-element or pseudo-class ::  */
::selection {					
    background: #b3d4fc;
    text-shadow: none;
}
*/


hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
	max-width:100%;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

 
/* =========================
   NAVIGATIONS  ALL & MOBILE
   ========================= */
	a:link {color: #4900B8;}			   /* Basic links */
	a:visited {color:#5C3D99;}         /* vihreä */
 
   
	a:hover {color: red ;}
	a:active {color: #e44d26 ;}          
	a {text-decoration:underline;}
 
    header a {
	  text-decoration:none;
	}
    aside a {
	  text-decoration:none;
	}
	footer a {
	  text-decoration:none;
	}
 
   
	li.extraLinefeed {
	padding-top:10px;
	}
 
 
	/*
	------------- Ylävalikko ------------
	*/ 

	header ul {
		list-style-type:none;
		margin:0;
		overflow:hidden;
		padding:0.15em 0;		
	}
	header li {
		float:left;		
		}  
	header a:link,
	header a:visited  {
		display:block;
		width:103px;
		font-weight:bold;
		color:white;
		text-align:center;
        padding:0;		            /* Note  alle 360px              */
		}
	header a:hover,
	header a:active  {
		color: #ff9900; 
		}  
 
 
	/*
	------------- Tekstialueet ------------
	*/  
 
	section.link  ul {
		margin:0 0 0 20px;
		padding:0;
		list-style:circle;
	}
	section.link a:link {color: black;}
	section.link a:visited {color: black;}
	section.link a:hover {color:  red;}
	section.link a:active {color: #e44d26;}  
	   
	section.story a:link {color: inherit;}
	section.story a:visited {color: inherit;}
	section.story a:hover {color:  blue;}
	section.story a:active {color: darkblue;}     

		/*
		------------- alaviitteet ------------
		*/  
	footer a:link {color: black;}		
	footer a:visited {color: black;}	
	footer a:hover {color: red;}
	footer a:active {color: #e44d26 ;}

	
  
/* ===================
    MOBILE & ALL
   ===================
 */

	body {
		font:0.9em/1.4em "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; 
		background: #BABABA;   /* sivun ulkoinen taustaväri */
		margin-top:0px;
       
	}

	.wrapper {
		width: 100%;
		margin: 0 auto;
	}  
	 
	.header-container {
		background-color:#000037;	     /* ylävalikon taustarivi */
	} 

	 
  
    article {
		padding:0 2%;
		background: white;
	} 
  
  
	.FrontArticle {
		padding-top:0;
		padding-left: 0;		
		background-color: white;
	}  
  
    .PlainArticle  {
		padding-top:1px;	
		background: white;
		padding-left: 5%;
	}  
  
	.NewsTitle {
		font-size: 110%;
		font-weight:bolder;
		color:#19399a;          /* pääotsikon väri */
	}

	.Imageside.frontpage {
		font-size: 0.80em;
		font-style:italic;
		text-align: center;	
		line-height: 1.25;
		margin: 20px 0 0 0;
	 } 

	.Textside  {
		padding:0 1%;
	 } 
	 
	
	 
	/* ------------- Oikea palsta --------  */ 
	 
	aside {
		background:#eeeeee;  /* Navivalikon pohjaväri */
	} 

	.RightTop,
	.RightNavi ,
	.RightBox  {
		padding-left: 5%;
		font-size: 0.90em;
		line-height: 1.4;
		width: 100%;
	}

	/*
	------------- Linkit ------------
	*/  
		
	
	
	
	aside ul {
		padding-left:15px;			/* valikon marginaali */
		list-style:circle;
		}

	aside a:link {
		color: blue;
		}
	aside a:visited  {
		color: black;
		} 
	aside a:hover,
	aside a:active 	{
		color:  red;
		} 
		
	aside {
       color:black;
	   
    }	
	
	
	
	/* ------------ Alavalikko ------------ */
  
	.footer-container {
		font: 0.9em/1.3em Helvetica, Helvetica Neue, Arial, MS Sans Serif ;
		background: #F6F6F6;              /* alaosan linkkirivin pohjaväri */
		padding:5px;                                                                
		border-top:10px solid #dddddd;    
	}

	.footer-container > div {
		padding: 0 1em;   
	}

	.footer-text {
		text-align:center;
		font-style: italic;
		font-size:80%;
		color:black;
        margin:5px;
		
	} 

	 img.withBorder {   
		border:1px solid gray;
	 }

	/* ===============
		ALL: IE Fixes
	   =============== */
	.ie7 .title {
		padding-top: 5px;
	}

/* ==========================================================================
    Tekstimuotoilut
   ==========================================================================
*/
	h1 {
		font-size: 2em; 		
		text-align:center;
		line-height: 1em;
	}

	h2 {
		font-size: 1.5em; 
		margin: 1.5em 0 0.4em ;
	}

	h3 {
		font-size: 1.1em;
		margin: 0.83em 0 0.4em;
	}
   
	h4 {             /* same as h3, but grey */
		font-size: 1.1em;
        color: gray;
		margin: 0.83em 0 0.4em;
	}   
   
   
   .left10 {
	padding-left: 10%;
	}
   
   .narrowColumn {
	padding-left: 5%;
    padding-right:5%;
	}   
   
   .englishTitle {
	margin-top: 0;
	font-style: italic;
	font-size: 1.4em;
	text-align: center;
	color: #006600;              /* 669966; */
	}
  
   .boxTitle {
   	font-style: italic; 
   }
   
   .table {
   margin:0;
   }
   
   .small {
   	font-size: 0.80em;
      line-height: 1.25;
	}
   
   .smallnarrow {
      margin-left:10px;
      font-size: 0.80em;
      line-height: 1.1;
	}

   .tiny {
   font-size: 0.66em;
	}
   
   .rightAlign {
   text-align: right;
   }
   
   .centerAllign {
	text-align: center;	
	}
  
  .centerAlign {
	text-align: center;	
	}
   
  .noMargin{
	margin:0;
   padding:0;
	}
   
   .colGreen{
   color:#339933
   }
   
  .colRed{
   color:#CC0000
   }

.moreBottomMargin {
   padding-bottom:0.1em;
   }     

   .pvm {
	font-style:italic;
	font-size:smaller;
	}

   .ingress {	
	font-weight:bolder;
	}	  
    
	.gap {
	padding-bottom:0.8em;
	}    
   
   .textIndent {
	margin-left:7%;
	margin-right:10%;
	}	
      
	.noLF {
	margin:0;
	}

	.noTopBottomMargins,
	.noTopBottomMargin {
	margin-top:0;
	margin-bottom:0;
	}

	/*=============
	 Kuvat
	 ==============*/		
	
	
	.imageToFrontCenterLeft {
	text-align: center;	
	line-height: 1.25;
	max-width:50%;
	margin: 0;
	float:left;
	}
	
	.imageToFrontCenterRight {
	text-align: left;	
	line-height: 1.25;
	max-width:45%;
	margin: 1% 0 1% 3%;
	float:right;
	}

		
 	/*
	.imageToFrontCenterLeft {        
	text-align: center;	
	margin: 0 0 0 0;
	float:left;
	max-width:320px;
	}	
*/

/*	
	.imageToFrontCenterRight {   
	text-align: center;	
	margin: 1% 0 1% 3%;
	float:center;
	}
*/
	
	.imageToCenterLeft {              /* kuva vasempaan laitaan, mutta kun ikkuna kapenee, siirtyy keskelle */
	font-size: 0.80em;
	font-style:italic;
	text-align: center;	
	line-height: 1.25;
	margin: 1% 0 5px 3%;
	float:none;
	}
	
		
	.imageToCenterRight {            /* kuva oikeaan laitaan, mutta kun ikkuna kapenee, siirtyy keskelle */
	font-size: 0.80em;
	font-style:italic;
	text-align: center;	
	line-height: 1.25;
	margin: 1% 0 1% 3%;
	float:none;
	}


	
	.imageToCenter {				/* Kuva ja mahdollinen teksti sivun keskelle */
	font-size: 0.80em;
	font-style:italic;
	text-align: center;	
	line-height: 1.25;
	margin: 10px 0 10px 0;
	}

	.imageToRight {				/* Kuva ja mahdollinen teksti sivun oikeaan laitaan */
	font-size: 0.80em;
	font-style:italic;
	text-align: center;	
	line-height: 1.25;
	margin: 1% 0 1% 3%;
	float:right;
	}

	.imageToLeft {				/* Kuva ja mahdollinen teksti sivun vasempaan laitaan */
	font-size: 0.80em;
	font-style:italic;
	text-align: left;	
	line-height: 1.25;
	margin: 1% 2% 5px 0;
	float:left;
	}
		
	.imageToLeftMin{			/* Kuva ja mahdollinen teksti sivun vasempaan laitaan */
	font-size: 0.80em;
	font-style:italic;
	text-align: center;	
	line-height: 1.25;
	margin: 1% 1% 5px 0;
	float:left;	
}

	.clearImage {
		clear:both;
	}
 
/* =======================================================
   Media Queries 
  
   1) alle 360: yksipalstainen 
   2) yli  360: yksipalstainen (alavalikko 2-palstainen)
   3) yli  640: kaksipalstainen kavennettu (alavalikko 4-palstainen)
   4) yli  800: kaksipalstainen täysleveä
 
   Havaitut virheet:
	1) OK
    2) OK
	3) OK
	4) OK
 
    =======================================================
 */

 /* ===========================  
   1) Alle 360 px 
   ===========================
*/
@media only screen 
and (max-width: 359px) {

    header a:link,
	header a:visited  {		
        margin:0.4em;		           
	}  

    .main  {
		padding: 0 2%;                /* reunamarginaali */ 
		background-color: #dddddd;       /* reunamarginaalin pohjaväri */
	}     

    h1 {		
		margin: 0.3em 0 0.1em ;
        padding-top:10px		
	 }
    
    .RightNavi>ul>li {
        font-size:120%;
        padding:10px
     }
     .RightNavi>ul>li>ul>li {       
        font-size:90%;
        padding:5px
     }
    
	.RightTop {
		border-top: 10px solid #cccccc;
        } 
 	.RightNavi  {
		border-top: 10px solid #cccccc;
		border-bottom: 0;
		}
	.RightBox  {
		border-top: 10px solid #cccccc;
		border-bottom: 0;
		}
		
		
	/* TOP BOX WHEN NO MENU ONLY */	
	
		div.topcontainer 	{
				width:100%;
		}				
		div.topleft 	{
				float:left;
				width:100%;
				margin:0;
				padding-top:0;
				padding-bottom:20px;
		}
		div.topcontent 	{
				margin-left:0%;
				padding:0 0 0 10px;
		}
		div.topcontainer h2 {
				margin:0 ;
		}
		
	}
	
	
	
	
	/*
   .imageToFrontCenterLeft {
	text-align: center;	
	line-height: 1.25;
	max-width:320px;
	margin: 0;
	float:center;
	}
	
	.imageToFrontCenterRight {
	text-align: center;	
	line-height: 1.25;
	max-width:320px;
	margin: 1% 0 1% 3%;
	float:center;
	}
 */
 
 /* ===========================  
   1) Vähintään 360 px 
   ===========================
*/
@media only screen 
and (min-width: 360px) {
	.Imageside  {			/* Etusivun kuvatpalsta (vasen) */
		float: left;
		width: 27%;
	 }
	.Textside  {				/* Etusivun tekstipalsta  (oikea)*/
		float: right;
		width: 73%; 
	 } 
   
    h1 {		
		margin: 0.3em 0 0.1em ;
        padding-top:10px		
	 }
     
     

	.footer-container {
		overflow: hidden;
	  }
	.footer-container > div {
		float: left;
		width: 50%;
	  }
	.footer-container > div:nth-child(odd)  {
		clear: left;
	  }
	}
 
    
   
/*   
   .imageToFrontCenterLeft {        
	text-align: center;	
	margin: 5px 0 0 0;
	float:none;
	max-width:360px;
	}
 */  
   
      
   
 
/* =========================== 
   2) Keskileveä 360 - 639 px 
   ===========================
 */
@media only screen 
and (min-width: 360px) 
and (max-width: 639px) {
	
	header a:link,
	header a:visited  {		
        margin:0.4em;		           
	}      
	/* ---- this removes two columns for right navi and box	-----
	.RightNavi  {
		float: left;
		width: 50%;	
		border-bottom: 0;	   

	.RightBox  {
		float: right;
		width: 50%;
	} 
    ------------------------------------------------------------ */

    
     .RightNavi>ul>li {
        font-size:120%;
        padding:10px
     }
     .RightNavi>ul>li>ul>li {       
        font-size:90%;
        padding:5px
     }
              
	.RightTop {
		border-top: 10px solid #cccccc;    
		}
	.RightNavi {
		border-top: 10px solid #cccccc;
		}
	.RightBox {
		border-top: 10px solid #cccccc;
		border-bottom: 0;
		}		
	.main  {
		padding-bottom: 0 ;  
		}
		
	/* TOP BOX WHEN NO MENU ONLY */	
	
		div.topcontainer 	{
				width:100%;
				text-align:center;
		}				
		div.topleft 	{
				float:left;
				width:100%;
				margin:0;
				padding-top:0;
				padding-bottom:20px;
		}
		div.topcontent 	{
				margin-left:0%;
				padding:0 0 0 10px;
		}
		div.topcontainer h2 {
				margin:0 ;
		}	
		
		
		
	}

	/*
	.imageToFrontCenterLeft {
	text-align: center;	
	line-height: 1.25;
	max-width:100%;
	margin: 0;
	float:center;
	}
	
	.imageToFrontCenterRight {
	text-align: left;	
	line-height: 1.25;
	max-width:100%;
	margin: 1% 0 1% 3%;
	float:center;
	}
	*/
	
	
	/*
	.imageToFrontCenterLeft {        
	text-align: center;	
	margin: 0 0 0 0;
	float:center;
	max-width:640px;
	}
	
	 .imageToFrontCenterLeft {
	text-align: center;	
	line-height: 1.25;
	max-width:50%;
	margin: 0;
	float:center;
	}
	
	.imageToFrontCenterRight {
	text-align: center;	
	line-height: 1.25;
	max-width:50%;
	margin: 1% 0 1% 3%;
	float:center;
	}
	*/
	
	
  /* ================================================
   3) Tabletti >= 640px ja  < 800px (valikko oikealla)
   ==================================================
*/  
@media only screen 
and (min-width: 640px) 
and (max-width: 799px) {
    
     .RightNavi>ul>li {
        font-size:120%;
        padding:5px
     }
     .RightNavi>ul>li>ul>li {       
        font-size:90%;
        padding:5px
     }
 }   
    
    
/* ====================================
   3) Leveä >= 640px (valikko oikealla)
   ====================================
*/
@media only screen 
and (min-width: 640px)
	{
	.FrontArticle {		/* Etusivun teksti */
		float: left;
		width: 70%; 
		}
	 
	article {		    /* Perussivun teksti */
		float: left;
		width: 70%; 
	} 
    .menu2mobile {      /* poistaa oikotien oikean reunan valikkoon */
        display:none;       
    }
    
    .main  {
		padding: 1.5%;            /* reunamarginaali */ 
		background-color: #dddddd;       /* reunamarginaalin pohjaväri */
	}

    h1 {		
		margin: 0.5em 0 0.1em ;
	}
    
    
   
    
    
    
	aside { 		    /* Oikeapalsta */
		float: right;
		width: 28%;	
		margin:0;
		} 
	.RightTop,	
	.RightNavi,	
	.RightBox {
		float: left;
		} 

	.RightTop {
		border-bottom: 10px solid #cccccc;
		}	

	.RightBox {
		border-top: 10px solid #cccccc; 
		border-bottom: 10px solid #cccccc;
		}

	 .footer-container > div {
		width: 20%;                 /* alavalikon sarakkeiden määrä */
		
		}
	 .footer-container > div:nth-child(odd)  {
	   clear: none;
	   }
	   
	   
		/* TOP BOX ONLY */	
		div.topcontainer 	{
				width:100%;			
		}				
		div.topleft 	{
				float:left;
				width:50%;
				margin:0;
				padding:0;
		}
		div.topcontent 	{
				margin-left:50%;
				padding:1em;
		}
	   
   
	}   
  
    /*
	.imageToFrontCenterLeft {         
	text-align: center;	
	margin: 0 0 0 0;
	float:left;
	max-width:320px;
	}
	*/
   
   

/* ======================
   4. Ylileveä >= 800px
   ======================
*/   
	@media only screen and (min-width: 800px) {  
   .wrapper {
        width: 800px;
    }
    .menu2mobile {    /* poistaa oikotien oikean reunan valikkoon */
        display:none;       
    }
	
	.imageToCenterRight {
	font-size: 0.80em;
	font-style:italic;
	text-align: center;	
	line-height: 1.25;
	margin: 1% 0 1% 3%;
	float:right;
	}

	.imageToFrontCenterRight {
	text-align: center;	
	margin: 3% 1% 1% 2%;
	float:right;
	max-width:300px;
	}
	
	.imageToCenterLeft {
	font-size: 0.80em;
	font-style:italic;
	text-align: center;	
	line-height: 1.25;
	margin: 1% 0 5px 3%;
	float:left;
	}
	
   /*
	.imageToFrontCenterLeft {         
	text-align: center;	
	margin: 0 0 0 0;
	float:left;
	max-width:320px;
	}
	*/
	
}   
    




/* ============================================================================================================================
   Helper classes
   ============================================================================================================================ */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /*text-indent: -9999px; */
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0 ;
    clip: rect(0 0 0 0) ;
    height: 1px ;
    margin: -1px ;
    overflow: hidden ;
    padding: 0 ;
    position: absolute ;
    width: 1px ;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}



/* Clearfix for modern browsers, http://css-tricks.com/snippets/css/clear-fix/ */
/*
.clearfix:after {            
  content: "";
  display: table;
  clear: both;
}
*/


/*
A much simpler, more up to date solution for general usage, (for now at least)
http://nicolasgallagher.com/micro-clearfix-hack/
*/
/*
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 * 3. For IE 6/7 only
 *    Include this rule to trigger hasLayout and contain floats.
 */
 
.clearfix:before,
.clearfix:after {
    content: " ";     /* 1 */
    display: table;   /* 2 */
}

.clearfix:after {
    clear: both;
}
 
 /* Validator says: Parse Error /* 3 *zoom: 1; */
 
.clearfix {			/* 3 */
    *zoom: 1;
}



/* slightly enhanced, universal clearfix hack 
http://perishablepress.com/lessons-learned-concerning-the-clearfix-css-hack/

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }

 start commented backslash hack \
 
* html .clearfix { height: 1%; }
.clearfix { display: block; }
 
 close commented backslash hack 
*/










/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

	/*
		poistaa otsakkeet, oikean palstan valikon ja alavalikon
	 */

	header,
	aside,
	footer   {
		display: none;
	}

	
    a,
    a:visited {
        text-decoration: none;
    }

	
	
	/*							jättäisi linkit näkviin
    a[href]:after {
        content: " (" attr(href) ")";
    }
	*/

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

	
    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

	
	/* Parse Error @page { margin: 0.5cm; } */
    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

}