html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,footer,header,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
.clearfix:after,header:after,#about > .section-wrap:after,#examples ul:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
* html .clearfix,* html header,* html #about > .section-wrap,* html #examples ul,#examples * html ul{zoom:1}
.clearfix *:first-child + html,header *:first-child + html,#about > .section-wrap *:first-child + html,#examples ul *:first-child + html{zoom:1}
.inner,article{
width:980px;
max-width:980px;
min-width:640px;
margin:0 auto;}
html,body{
height:100%;
min-height:100%;
font-family:"Gill Sans", Calibri, "Trebuchet MS", sans-serif;
}
body{
background-color:#f7f7f5;
color:#6d6e71;
}

header{
position:fixed;
z-index:1000;
top:0;
left:0;
width:100%;
padding:0;


}

.section-wrap > .spotlight-container{
	position: relative;	
	width: 980px;
	height: 220px;
	background-color:#fff;
	background-image:url(../imgs/gradient.png);
	background-position:center bottom;
	background-repeat:no-repeat;			 

}



h1{font-family:"Hero", Arial, Verdana;font-size:16px;font-weight:normal;color:#f7941e; padding-top:18px;}
h2{font-family:"Hero", Arial, Verdana;font-size:16px;font-weight:normal;color:#6d6e71;  padding-bottom:10px;}
h3{font-family:Arial, Verdana;font-size:12px;font-weight:bold;color:#f7941e}
p,pre{margin-bottom:16px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:16px;}
code{font-family:Arial, Helvetica, sans-serif;padding:0 2px;background:rgba(0, 0, 0, 0.1)}
pre{padding:10px 15px;border:1px solid rgba(0, 0, 0, 0.1);white-space:pre-wrap;background:#fff}
pre > code{background:transparent}
strong{font-weight:bold}
em{font-style:italic}article{height:100%;line-height:1.5;position:relative;z-index:2}
article > section{min-height:100%;width:100%}
article > section h1{color:#ccc;-webkit-transition:color 500ms ease 0;-moz-transition:color 500ms ease 0;-o-transition:color 500ms ease 0;transition:color 500ms ease 0}
article > section.section-active h1{color:#333}
a{color:#6d6e71;text-decoration:none; }
a:hover{text-decoration:underline}
.bold{font-weight:bold;}

.section-wrap{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;padding:0 10px}
.section-wrap > h1{margin-bottom:24px}



/*FOOTER*/

footer{
position:fixed;
bottom:0;
left:0;
width:100%;
padding:0;

background-color:#c7c8ca;
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#d0d2d3), to(#9d9fa2));
background-image:-webkit-linear-gradient(#d0d2d3, #9d9fa2);
background-image:-moz-linear-gradient(#d0d2d3, #9d9fa2);
background-image:linear-gradient(#d0d2d3, #9d9fa2);
-pie-background:linear-gradient(#d0d2d3, #9d9fa2);
-webkit-box-shadow:0 3px 5px #d0d2d3;
-moz-box-shadow:0 3px 5px #d0d2d3;
box-shadow:0 3px 5px #d0d2d3;
behavior:url(PIE.htc); 
z-index:3000;
}

footer nav > ul{
float:right;
padding:0;
margin-right:10px;
}
footer nav > ul > li{
float:left;
padding:0px 0px 0px 0px;
}

footer nav > ul > li > .plug {
padding:0px 5px 0px 5px;;	
	
background-color:#c7c8ca;
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#d0d2d3), to(#9d9fa2));
background-image:-webkit-linear-gradient(#d0d2d3, #9d9fa2);
background-image:-moz-linear-gradient(#d0d2d3, #9d9fa2);
background-image:linear-gradient(#d0d2d3, #9d9fa2);
-pie-background:linear-gradient(#d0d2d3, #9d9fa2);
behavior:url(PIE.htc); 
z-index:1000;
}
footer nav > ul > li >.plug:hover {
padding:0px 5px 0px 5px;;	
	
background-color:#c7c8ca;
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#d0d2d3), to(#9d9fa2));
background-image:-webkit-linear-gradient(#d0d2d3, #9d9fa2);
background-image:-moz-linear-gradient(#d0d2d3, #9d9fa2);
background-image:linear-gradient(#d0d2d3, #9d9fa2);
-pie-background:linear-gradient(#d0d2d3, #9d9fa2);
behavior:url(PIE.htc); 
z-index:1000;}

footer a > img.nohover {border:0; margin-top:8px; }
footer a > img.hover {border:0;display:none}

footer a:hover img.hover {display:inline; margin-top:8px;}
footer a:hover img.nohover {display:none}

@font-face {
  font-family: 'Hero';
  src: url('font_hero/hero-webfont.eot'); /* IE 5-8 */ 
  src: local('?'),             /* sneakily trick IE */
        url('font_hero/hero-webfont.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('font_hero/hero-webfont.ttf') format('truetype'), /* Opera, Safari */
        url('font_hero/hero-webfont.svg#font') format('svg'); /* iOS */
}


footer a{

font-family: "Hero", Arial, Verdana;
color:#6d6e71;
display:block;
font-size:14px;

text-align:center;
text-decoration:none;
padding:20px 15px 19px 15px;

}

footer a:hover,footer a:focus{
font-size:14px;
color:#6d6e71;
text-decoration:none;

background-color:#c7c8ca;
background-image:-webkit-gradient(linear, 10% 0, 0 100%, from(#a1a3a6), to(#cfd0d2));
background-image:-webkit-linear-gradient(#a1a3a6, #cfd0d2);
background-image:-moz-linear-gradient(#a1a3a6, #cfd0d2);
background-image:linear-gradient(#a1a3a6, #cfd0d2);
-pie-background:linear-gradient(#a1a3a6, #cfd0d2);

}
footer a:active,footer a.link-active{
font-size:14px;
text-align:center;
text-decoration:none;
color:#fff;


background-color:#d0d2d3;
background-image:-webkit-gradient(linear, 10% 0, 0 100%, from(#a1a3a6), to(#cfd0d2));
background-image:-webkit-linear-gradient(#a1a3a6, #cfd0d2);
background-image:-moz-linear-gradient(#a1a3a6, #cfd0d2);
background-image:linear-gradient(#a1a3a6, #cfd0d2);
-pie-background:linear-gradient(#a1a3a6, #cfd0d2);
}
footer a.link-active{
cursor:default
}


footer p{
float:left;
padding-top:15px;
font-family:Arial, Helvetica, sans-serif; 
font-size:11px;
}

/*KOTI*/
#koti{position:relative}
#koti > .section-wrap{padding:15px 0 0 0;}
#koti > .section-wrap > .header_image{ margin:0 auto; width:774px; height:220px; z-index:5; }
#koti > .section-wrap > .header_line{ border-bottom-color:#dcddde; border-bottom-style:solid; border-bottom-width:thin; margin-top:0px; }
#koti > .section-wrap > .columns{position:relative;padding:0px 335px 0 10px; margin-top:60px;}
#koti > .section-wrap > .columns > .rcol{position:absolute;top:0;left:680px;width:300px; margin-top:-5px;}
#koti > .section-wrap > .columns > .rcol > a{ font-family:Arial, Verdana;font-size:11px;font-weight:bold;color:#6d6e71; text-decoration:none;}
#koti > .section-wrap > .columns > .rcol > a:hover{ text-decoration:underline;}

#koti > .section-wrap > .columns > .rcol > .feedHeader{color:#f7941e; font-family:"Hero", Arial, Verdana;font-size:16px;font-weight:normal; padding-top:18px; padding-bottom:5px;}
#koti > .section-wrap > .columns > .rcol > .feedHeader:hover{text-decoration:underline;}


#koti > .section-wrap > .columns > .rcol > .feed-wrap{width:285px;height:auto; margin-bottom:6px;}
#koti > .section-wrap > .columns > .rcol > .feed-wrap > a > h1{font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#6d6e71; margin-top:-16px; }
#koti > .section-wrap > .columns > .rcol > .feed-wrap > a > h1:hover{text-decoration:underline;}

#koti > .section-wrap > .columns > .rcol > .feed-wrap > a > .date{font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:normal; color:#6d6e71; font-style:italic; text-decoration:none;}
#koti > .section-wrap > .columns > .rcol > .feed-wrap > a > .date:hover{text-decoration:none;}
#koti > .section-wrap > .columns > .rcol > .feed-wrap > a > .fb_like{width:113px; height:21px; margin-top:0px; display:block; background-image:url(http://www.ezpa.fi/imgs/fb_likes.jpg); background-position:top left; background-repeat:no-repeat;}
#koti > .section-wrap > .columns > .rcol > .feed-wrap > a > .fb_like > p { margin-left:47px; padding-top:4px; font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold; color:#6d6e71; text-align:center; }


/*EZPA*/
#ezpa{position:relative}
#ezpa > .section-wrap{padding:60px 0 0 0;height:1100px;}
#ezpa > .section-wrap >  h1{position:relative; left:0; top:-20px; padding-bottom:0px; color:#f7941e;}
#ezpa > .section-wrap > .line {height:1px;width:100%;left:0;background:#999999; margin-bottom:15px;}
#ezpa > .section-wrap > .columns{position:relative;padding:60px 335px 0 10px}
#ezpa > .section-wrap > .columns > .lcol{position:absolute;top:0;left:0px;width:315px; margin-right:50px;}
#ezpa > .section-wrap > .columns > .ccol{position:absolute;top:0;left:365px;width:290px; margin-right:40px;}
#ezpa > .section-wrap > .columns > .rcol{position:absolute;top:0;left:695px;width:280px}


/*TIIMI*/
#tiimi > .section-wrap{padding-bottom:5px; height:1400px;}
#tiimi > .section-wrap >  h1{position:relative; left:0; top:-20px; padding-bottom:0px; color:#f7941e;}
#tiimi > .section-wrap > .line {height:1px;width:100%;left:0;background:#999999; margin-bottom:15px;}
#tiimi > .section-wrap > .columns{position:relative;padding:60px 335px 0 10px;}
#tiimi > .section-wrap > .columns > .lcol{position:absolute;top:0;left:0px;width:310px; margin-right:30px;}
#tiimi > .section-wrap > .columns > .ccol{position:absolute;top:0;left:340px;width:270px}
#tiimi > .section-wrap > .columns > .rcol{position:absolute;top:0;right:0px;width:310px}


/*TYÖT*/
#tyomme .returns{margin-bottom:0}
#tyomme > .section-wrap {height:2650px;}
#tyomme > .section-wrap >  h1{position:relative; left:0; top:-20px; padding-bottom:0px; color:#f7941e;}
#tyomme > .section-wrap > .line {height:1px;width:100%;left:0;background:#999999; margin-bottom:15px;}
#tyomme > .section-wrap > .columns{position:absolute;padding:60px 335px 0 10px}
#tyomme > .section-wrap > .columns > .lcol{position:absolute;top:0;left:0px;width:300px; margin-right:24px;}
#tyomme > .section-wrap > .columns > .ccol{position:absolute;top:0;left:324px;width:300px; margin-right:24px;}
#tyomme > .section-wrap > .columns > .rcol{position:absolute;top:0;left:648px;width:300px}

#tyomme > .section-wrap > .columns > .lcol > ul > li {float:left;width:290px; margin-bottom:20px;display:block;padding:14px 10px;text-decoration:none;background:#fff;-webkit-box-shadow:0 1px 2px #aaaaaa;-moz-box-shadow:0 1px 2px #aaaaaa;box-shadow:0 1px 2px #aaaaaa;behavior:url(PIE.htc)}
#tyomme > .section-wrap > .columns > .ccol > ul > li {float:left;width:290px; margin-bottom:20px;display:block;padding:14px 10px;text-decoration:none;background:#fff;-webkit-box-shadow:0 1px 2px #aaaaaa;-moz-box-shadow:0 1px 2px #aaaaaa;box-shadow:0 1px 2px #aaaaaa;behavior:url(PIE.htc)}
#tyomme > .section-wrap > .columns > .rcol > ul > li {float:left;width:290px; margin-bottom:20px;display:block;padding:14px 10px;text-decoration:none;background:#fff;-webkit-box-shadow:0 1px 2px #aaaaaa;-moz-box-shadow:0 1px 2px #aaaaaa;box-shadow:0 1px 2px #aaaaaa;behavior:url(PIE.htc)}

/*ENGLISH*/
#english > .section-wrap{padding-bottom:20px; height:1100px;}
#english > .section-wrap >  h1{position:relative; left:0; top:-20px; padding-bottom:0px; color:#f7941e;}
#english > .section-wrap > .line {height:1px;width:100%;left:0;background:#999999; margin-bottom:15px;}

#english > .section-wrap > .columns{position:relative;padding:60px 335px 0 10px}
#english > .section-wrap > .columns > .lcol{position:absolute;top:0;left:0px;width:315px; margin-right:50px;}
#english > .section-wrap > .columns > .ccol{position:absolute;top:0;left:365px;width:290px; margin-right:40px;}
#english > .section-wrap > .columns > .rcol{position:absolute;top:0;left:695px;width:280px}


#english ul > li{float:left;width:33.3%}
#english ul > li > a{margin-left:20px;display:block;padding:14px 10px;text-decoration:none;background-color:#f5f5ff;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#fbfbfb), to(#f1f1ff));background-image:-webkit-linear-gradient(#fbfbfb, #f1f1ff);background-image:-moz-linear-gradient(#fbfbfb, #f1f1ff);background-image:linear-gradient(#fbfbfb, #f1f1ff);-pie-background:linear-gradient(#fbfbfb, #f1f1ff);-moz-border-radius:15px;border-radius:15px;-webkit-box-shadow:0 5px 10px #aaaaaa;-moz-box-shadow:0 5px 10px #aaaaaa;box-shadow:0 5px 10px #aaaaaa;behavior:url(PIE.htc)
#yhteys ul > li > a:hover,#tiimi ul > li > a:focus{background:#fff;-webkit-box-shadow:0 1px 2px #aaaaaa;-moz-box-shadow:0 1px 2px #aaaaaa;box-shadow:0 1px 2px #aaaaaa;behavior:url(PIE.htc)}
#english ul > li > a:hover > .icon,#english ul > li > a:focus > .icon{color:#82b3d9}
#english ul > li > a > h2{text-align:center;color:#82b3d9}


.line {
height:1px;width:100%;left:0;background:#c7c8ca; margin-bottom:15px;
}