/*

Global stylesheet
basic layout and typography, front-page
plus two IE-only correction-files

*/

* {margin:0; padding:0; border:0;}

.access {display:none;}

body {
  background:#70541f;
  font-family: Verdana, "Lucida Grande", Tahoma, Helvetica, sans-serif;
  color: #000;
  text-align:center;
  font-size:76.5%;
  line-height:140%;
}

a, a:link {
  text-decoration:none; 
  color:#3280da;
  outline-style:none;
}

a:visited {text-decoration:none;}
a:hover {
  text-decoration:underline; 
  color:#a67d62;
}

a:active {
  text-decoration:none; 
  outline:none;
}

a.chosen {
  background:#BBD9EE; 
  color:#fff;
}

a#videolink, a#zoomlink, a#slidelink {
  display:block; 
  width:107px; 
  height:29px; 
  text-indent:-9999px; 
  margin-bottom:2px; 
  margin-right:2px;
  float:left;
}

a#videolink {background:url(/suomi/layout/video.gif) no-repeat 0 0;}
a#zoomlink {background:url(/suomi/layout/zoom.gif) no-repeat 0 0;}
a#slidelink {background:url(/suomi/layout/slideshow_icon.gif) no-repeat 0 0;}

a#zoomlink:hover, a#videolink:hover, a#slidelink:hover {background-position:0 -28px;}


h1, h2, h3, h4, h5, h6, p, li, ul, td, img {font-weight: normal;}
h1, h2, h3, h4, h5, h6 {font-family: Georgia, Times, serif;}
h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover, h3 a:active {font-size:26px; line-height:26px; color:#a67d62; text-decoration:none;}
h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover, h4 a:active{font-size:1.2em; color:#6c9dc4; font-style:italic;}
h5 {font-size:1.4em; color:#a67d62;}
ul {list-style:none; list-style-position:inside;}
p {font-size:1em; margin-bottom:1em;}
li {font-size:1em;}

input {-webkit-appearance:none;}

hr {
   visibility:hidden;
   display:block;
   width:100%;
   height:0;
   line-height:0;
   font-size:0;
   clear:both;
}

.clear {
clear:both; 
visibility:hidden;
padding-top:4px;
}

.capitalize {text-transform:capitalize;}
.small {font-size:90%;}
.kuvaaja {font-size:0.8em; color:#333;}
div.kuvaaja p{display:inline;}

img {padding:2px; margin-bottom:2px; border:solid 1px #ddd;}
a:hover img {background:#8E602E; padding:2px;}

img#logo, #slideshow0 img, #livehaku img {
  padding:0;
  margin:0;
  border:0;
}


/* Xtra-nav items: search, lang-selections
partners, wdc, contact
------ */

#extra_navi {
  text-align:left; 
  width:100%; 
  height:45px; 
  background:#f3f3f3 url(/suomi/layout/optionavi_bg.png) top left repeat-x;
}

#extra_navi .top_langlist {
  position:absolute;
  right:305px;
  top:0em;
  z-index:4;
  width:250px;
  font-size:0.8em;
  padding-top:5px;
  text-align:right;
  background:#f3f3f3 url(/suomi/layout/optionavi_bg.png) top left repeat-x;
}

#extra_navi .top_langlist li  {
  padding:0 8px 0.1em 0;
  margin:0;
  display:inline;
}

p#cont_partn_links {
  position:absolute; 
  top:0em; 
  left:170px; /* skips over our logo */
  font-size:0.8em; 
  padding-top:5px;
  margin:0!important;
}

p#cont_partn_links a {
  text-align:left;
  float:left;
  clear:left;
  margin:0;
  padding:0 6px 0.1em 6px; 
}

p#cont_partn_links a:hover {text-decoration:underline;}

#extra_navi #logo {
  background:#f3f3f3 url(/suomi/layout/optionavi_bg.png) top left repeat-x;
  border-right:solid 1px #ddd; 
  padding-right:15px; 
  position:absolute; 
  z-index:12;
} 

/* NG-logo */

#extra_navi a:hover img {background:none;}

#fb_small_link {
  display:block; 
  width:30px; 
  height:26px; 
  position:absolute; 
  top:15px; 
  right:4px; 
  text-align:center;
}

a#fb_small_link img {
  border:none; 
  padding:0;
}




/* 
Livesearch */

/* 
wrapper for livesearch */

#livehaku {
  width:252px; 
  height:45px;
  background:url(/suomi/layout/livehaku_bg.gif) top left no-repeat;
  position:absolute;
  right:40px;
  top:0;
  z-index:5;
}

#live_search input {
  width:200px;
  height:16px;
  background:#96b669;
  color:#f9f9f9;
  border:solid 1px #e4e4e4;
  margin:12px 0 0 16px;
  padding:2px;
}

#live_search div.ls_results  {
  background:transparent;
  color:#888;
  margin:0 0 0 16px !important;
  margin:0;
  width:192px;
  background:#fefefe url(/suomi/layout/optionavi_bg.png) top left no-repeat;
  padding:0;
  text-align:left;
  overflow:hidden;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
  border-bottom-left-radius: 10px;
  padding:4px;
}

/*e3ece3 tausta*/

#live_search .ls_results li {
  display:block;
  margin:0;
  padding:0;
  width:222px;
} 

#live_search .ls_results p {
  margin:0;
  background:#999;
  width:186px;
  color:#ddd;
  font-style:italic;
  padding:5px 10px;
    -moz-border-radius-bottomright: 10px;
  border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
  border-bottom-left-radius: 10px;
}

#live_search .ls_results a {
  display:block;
  padding:4px;
  width:216px;
  border-bottom:solid 1px #999;
  margin-left: -4px;
}

#live_search .ls_results a:hover {
  text-decoration:none;
  color:#fefefe;
  background:#999;
  border-bottom:none;
  padding-bottom:5px;
}

#live_search .ls_results li:last-child a {border:none;
    -moz-border-radius-bottomright: 10px;
  border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
  border-bottom-left-radius: 10px;
}

#live_search .ls_reset_image {
  position:absolute; right:8px; top:0;
  background: transparent url(/suomi/layout/src_reset.gif) no-repeat center;
  display: inline-block;
  width: 14px;
  height: 45px;
  cursor: pointer;
  margin-left: 10px;
}

#live_search .ls_wait_image {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: transparent url(/suomi/layout/src_loading.gif) no-repeat center;
  margin-left: 10px;
  position:absolute; right:40px; top:16px;
}

/* 
Header */

#header {
  background:#e3f0f4 url(/suomi/layout/banner_default_2.jpg) no-repeat center bottom;
  width:100%;
  height:90px;
  margin:0 auto;
}


body#plants #header {background:#e3f0f4 url(/suomi/layout/banner_plants_2.jpg) no-repeat center top;}
body#trees #header {background:#e3f0f4 url(/suomi/layout/banner_trees_2.jpg) no-repeat center top;}
body#flowers #header {background:#e3f0f4 url(/suomi/layout/banner_flowers_2.jpg) no-repeat center top;}
body#birds #header {background:#e3f0f4 url(/suomi/layout/banner_birds_2.jpg) no-repeat center top;}
body#butterflies #header {background:#e3f0f4 url(/suomi/layout/banner_butterflies_2.jpg) no-repeat center top;}
body#kalat #header {background:#e3f0f4 url(/suomi/layout/banner_fishes_2.jpg) no-repeat center top;}
body#sienet #header {background:#e3f0f4 url(/suomi/layout/banner_sienet_2.jpg) no-repeat center top;}
body#b_map #header {background:#e3f0f4 url(/suomi/layout/banner_default_2.jpg) no-repeat center top;}
body#itameri #header {background:#e3f0f4 url(/suomi/layout/banner_itameri_1.jpg) no-repeat center top;}
body#nisakkaat #header {background:#e3f0f4 url(/suomi/layout/banner_nisakkaat_1.jpg) no-repeat center top;}


#header h1, #header h2 {display:none;}

ul#top_langlist li.activelan {display:none;}


/* 
Navigation */


#navigaatio {
  width:832px;
  height:36px; 
  margin:0 auto;
  background:#89b5db url(/suomi/layout/navi_bg.png) top left no-repeat; 
  position:relative;
  z-index:3;
}

ul#ul_nav {
  text-align:center;
  padding:0;
  margin:0 auto;
  padding:7px 0 0 0;
  width:100%;
  font-family:Georgia, Times, serif;
  font-size:15px;
}

#ul_nav li {
  display:inline-block;
  width:auto;
  list-style:none;
  padding:0px;
  line-height:135%;
}


#ul_nav li a, #ul_nav li a:link, #ul_nav li a:hover, #ul_nav li a:visited {
  color:#FFF;
  border:solid #96b669;
  border-width:0 1px 1px 0;
    }

#ul_nav > li > a {
  margin:0;
  padding:8px 12px 9px 12px;
  background:url(/suomi/layout/navi_li_bg.png) top left repeat-x;
}

#ul_nav #a_home {border-left:solid #96b669 1px;}

#navigaatio li a:hover {
  background:url(/suomi/layout/navi_li_active_bg.png) top left repeat-x; 
  color:#FFF; 
  text-decoration:none;
}

body#home #a_home, body#plants #a_plants, body#flowers #a_plants, body#trees #a_plants, body#birds #a_birds, body#butterflies #a_butterflies, body#kalat #a_kalat, body#b_map #a_maisemat, body#sienet #a_sienet, body#itameri #a_itameri, body#nisakkaat #a_nisakkaat {background:none;}


.sub-menu-parent {position:relative;}
  
.sub-menu { 
  background: #c7c7c7;
  text-align: left;
  width:10em;
  visibility: hidden; 
  opacity: 0;
  position: absolute;
  top:28px;
  left:-10px;
  transition: all 0.5s ease 0s, visibility 0s linear 0.5s;}

#ul_nav .sub-menu li {
  display:block; 
  height:32px;
  background:#7AAD3C;
  }


.sub-menu > li a {
  color:#FFF;
  border:none !important;
  display:block;
  height:32px; 
  padding:0 11px; 
  line-height: 2em; 
  margin-top:1px;
}


#ul_nav .sub-menu li a:hover {
  background-image:none;
  background-color: #656565; 
  color:#FFF; 
  text-decoration:none;
}

#ul_nav .sub-menu-parent:hover .sub-menu {
  visibility: visible; 
  opacity: 1;
  left: 0px;
  top:28px;
  transition-delay: 0s; 
}



/* 
100% Width, bg image for middle part of the page */

#wrap {
  background:#e3f0f4 url(/suomi/layout/tausta.jpg) repeat-x bottom center;
  width:100%;
  text-align:center;
  clear:both;
}

/* Actual content area width
   height fix in ie6 style
*/

#content {
  clear:both;
  width:832px;
  margin:0 auto;
  text-align:center;
  background:#f1f2f1 url(/suomi/layout/b_gradient.png) bottom left repeat-x;
  min-height:307px;
  position:relative;
}


/* 
Content Padding */

.inside {
  width:800px; 
  margin:0 auto; 
  clear:both; 
  text-align:left;
  padding-bottom:8px;
}



.breadcrumb {
  font-size:0.9em;
  border-bottom:solid 1px #BBD9EE;
  padding:1.2em 0 0.5em 0;
  text-indent:-4px;
  margin:0 0 8px 5px;
  height:1.6em;
  color:#444;
}

.breadcrumb a {padding:0.5em 0.3em 0.3em 0.3em; margin:0}
.breadcrumb a[rel=prev], .breadcrumb a[rel=next] {text-transform:capitalize;}

.float_l {float:left; width:50%;}
.float_r {float:right;}

.breadcrumb_lower {
  padding:16px 0 8px 0;
  background:#ece8e1;
  clear:both;
  text-align:right;
  border-radius:6px;
  width:538px;
  float:right;
  margin-right:2px;
}

.breadcrumb_lower p{
  padding:0 16px;
  color:#666;
}

.border_r {
  border-right:solid 1px #999;
  padding-right:0.4em;
  margin-right:0.2em;
}

.breadcrumb a:hover {
  background:#BBD9EE;
  text-decoration:none;
  color:#444;
}

.breadcrumb_lower a {padding:0.3em;}
.breadcrumb_lower a:hover {
  text-decoration: 
  none; 
  border-bottom: solid 1px;
}


/* 
Searching for species from their listing pages
*/

#tekstihaku {
  padding-left:4px;
  border:solid #C6DCA7 1px;
  border-radius:3px 0 0 0;
  width:184px;
  height:30px;
  background:#fafafa;
  color:#333;
  font-size:1em;
}

#submit{
  display:block; 
  float:right;
  width:60px;
  height:32px;
  color:#f3f3f3;
  font-size:1em;
  font-weight:bold;
  background:#96B669;
  border-radius:0 3px 0 0;
}

#submit:hover {
  background:#A67D62;   
  cursor:pointer;
  color:#fff;
}

/* 
pre-made search themes like yrtti, maustekasvi
*/

.searchtags {
  border:solid #C6DCA7; 
  border-width:0 1px 1px 1px; 
  border-radius:0 0 3px 3px;
  margin-top:-10px; 
  font-size:0.9em;
}

.searchtags  p {padding:10px;}

/* 
amount of results shown under search form
*/

.result_count {
  background:#dbbde0;
  font-size:0.9em;
  margin:-10px 0 18px 0;
  border:solid #C6DCA7;
  border-width:0 1px 1px;
  border-radius:0 0 3px 3px;
}

div.result_count p {
  padding:10px;
}

.result_count p em {
  font-style:normal;
  font-weight:bold;
}

/* 
ABC-letter-links
 */

#aakkoset {
  width:100%;
  display:table;
  margin:8px 0 16px 0;
  background:transparent;
}

#aakkoset a {
  font-size:0.9em;
  background:#fafafa;
  height:26px;
  width:26px;
  display:block;
  float:left;
  margin:6px 6px 0 0px;
  border:solid 1px #C6DCA7;
  border-radius: 2px;
  text-align:center;
  line-height:26px;
}

#aakkoset a:hover {
  text-decoration:none;
  background:#A67D62;
  color:#fff;
}

#aakkoset a.chosen {background:#BBD9EE; color:#fff;}


/* 
Family-select drop-down 
*/

#browse select {width:100%;
  background:#fafafa;
  color:#666;
  font-size:0.9em;
  padding:0.3em;
}

#browse select option {
  text-indent:1em; 
  padding:0.5em 0;
}

#browse select option.parent, #browse optgroup {
  text-indent:0.3em; 
  text-transform:uppercase;
  font-style:normal;
  font-weight:normal;
  padding:0.25em 0;
}

#browse optgroup option {text-transform:lowercase;}

#browse select option.parent, #browse optgroup {
  text-indent:0.5em;
  padding:0 0 0.25em 0;
  text-transform:uppercase;
  font-style:normal;
  font-weight:normal;
}



/* 
frontpage, butterflies, birds, full brown page 
*/

#teksti_wide {
  clear:right;
  background:#ece8e1;
}

div#atffc {display:none;}/* addthis layoutbreaker */

#share {
  padding:0 0 8px 0px;
  margin:22px 0 0 0;
}

#share p {font-size:90%;}
#share img {display:none;}

#share a {
  display:inline-block;
  background:#f3f3f3;
  width:auto;
  height:2em;
  text-align:center;
  border:solid 1px #c3c3c3;
  padding:4px 8px;
  line-height:1.6em;
  border-radius:3px;
}

#share a:hover {
  text-decoration:none;
  background:#7aad3c;
  color:#fefefe;
  border-color:#7aad3c;
}

#share a:hover img{background:none;}
#share a#palautelinkki {margin-left:4px;}

#share.narrow {
  text-align:left;
  width:95%;
  padding-left:4px;
}

#share.narrow p {width:100%;}


/* 
Frontpage and partnerspage */ 


/*
identify links image grid wrapper */

#link-grid {
  height:400px; 
  width:800px; 
  margin:0 auto; 
  padding-top:16px;
  }

/* make blocklinks */

#link-grid a {
  display:block; 
  height:200px; 
  width:200px;
  background-color:#ece8e1;
  float:left; 
  cursor:pointer; 
  overflow:hidden;
  transition:ease-in-out 0.5s;
  transition-delay: 0.1s;
 }

/* 
background-spritet kielen mukaisesti sivun headissa */

/* background positions for bloc links */ 

/* grid row 1 */
#link-grid a#grid_01 {background-position:-200px 0;}
#link-grid a#grid_02 {background-position:-600px 0;}
#link-grid a#grid_03 {background-position:-1000px 0;}
#link-grid a#grid_04 {background-position:-1400px 0;}

/* grid row 2 */
#link-grid a#grid_05 {background-position:-200px -200px;}
#link-grid a#grid_06 {background-position:-600px -200px;}
#link-grid a#grid_07 {background-position:-1000px -200px;}
#link-grid a#grid_08 {background-position:-1400px -200px;}


/* background swaps with hover */ 

/* grid row 1 */
#link-grid a#grid_01:hover {background-position:0 0;}
#link-grid a#grid_02:hover {background-position:-400px 0;}
#link-grid a#grid_03:hover {background-position:-800px 0;}
#link-grid a#grid_04:hover {background-position:-1200px 0;}
/* grid row 2 */
#link-grid a#grid_05:hover {background-position:0 -200px;}
#link-grid a#grid_06:hover {background-position:-400px -200px;}
#link-grid a#grid_07:hover {background-position:-800px -200px;}
#link-grid a#grid_08:hover {background-position:-1200px -200px;}

.slideshow {
  padding:8px 0 8px 0; 
  z-index:1; 
  float:right;
}

#slideshow0 {margin:0 auto;}
.slideshow p {display:none;}


body#home #teksti_wide,body#partners #teksti_wide  {
  margin-left:164px; 
  padding-bottom:0;
}

/* 
uusi gridimainoksella varustettu etusivu*/

body#home #teksti_wide-141205, body#partners #teksti_wide-141205 {
  background:#ece8e1;
  width:600px;
  margin:16px 0;
  float:left;
  padding:16px 0;
}

body#home h3, body#partners h3 {
 padding:14px 0 12px 8px; 
 text-align:left;
}

body#home p, body#partners p {margin:0px 28px 8px 28px;}
  body#home h4 {
  padding:18px 0 0 12px; 
  margin:0 0 12px 0; 
  font-size:1.4em; 
  text-align:left;
}



/* 
Etusivun mainokset ja kumppanilogot  */

#support {
  width:157px; 
  float:left; 
  line-height:0; 
  margin-top:0; 
  margin-right:6px;
}

#support img {
  margin:0; 
  padding:0; 
  border:0;
}


/*
uudessa versiossa pudotetaan logot alas */

#support-141205 {
  float:left; 
  line-height:0; 
  margin:0; 
  width:600px; 
  background:#ecedea; 
  padding:16px 0;
}

#support-141205 img {
  margin:0px 0px 0 8px; 
  padding:0; border:0; 
  display:inline; 
  width:112px; 
  height:auto; 
  vertical-align: middle;
}

div#identify_ad {
  float:right;
  width:210px; 
  height:198px; 
  border-top:solid 0px #79AC3B; 
  margin:0 0 8px 35px;
}

div#identify_ad h5#ban  {
  margin:0;
  padding:0;
  text-indent:-9999px;
  width:210px;
  height:198px;
}

div#identify_ad h5#ban a {
  display:block;
  margin:0;
  padding:0;
  width:210px;
  height:198px;
  text-decoration: none;
}

.ad_fi {background:transparent url(/suomi/layout/identify_ad.jpg) top left no-repeat;}
.ad_en {background:transparent url(/suomi/layout/identify_ad_en.jpg) top left no-repeat;}
.ad_sv {background:transparent url(/suomi/layout/identify_ad_sv.jpg) top left no-repeat;}
.ad_de {background:transparent url(/suomi/layout/identify_ad_de.jpg) top left no-repeat;}
.ad_fr {background:transparent url(/suomi/layout/identify_ad_fr.jpg) top left no-repeat;}
.ad_es {background:transparent url(/suomi/layout/identify_ad_es.jpg) top left no-repeat;}
.ad_no {background:transparent url(/suomi/layout/identify_ad_no.jpg) top left no-repeat;}
.ad_da {background:transparent url(/suomi/layout/identify_ad_da.jpg) top left no-repeat;}

div#identify_ad h5#ban a:hover  {background-position:left -198px;
}



/*
Mobile ad 2015-12-V1 */


#mobile-ad-201512-1 {
 width:800px;
 height:744px;
 margin:0 auto;
 padding:0;
 background:#2a363b;
 position:relative;
 color:#ece8e1;
 text-indent: -9999px;
}

#mobile-ad-201512-1.fi {
  background:#2a363b url(/suomi/images/21745.jpg) no-repeat top left;
}

#mobile-ad-201512-1.en {
  background:#2a363b url(/suomi/images/21744.jpg) no-repeat top left;
}

#mobitext {
  background:#2a363b;
  position:absolute;
  bottom:0;
  left:0;
  width:800px;
  height:136px;
}

/* supports two bgs, supports svg. css-tricks.com  */

#mobitext.fi {
  background: url(/suomi/layout/tekstit-fi.png);
  background: url(/suomi/layout/tekstit-fi.svg),
  linear-gradient(transparent, transparent); 
}

#mobitext.en {
  background: url(/suomi/layout/tekstit-en.png);
  background: url(/suomi/layout/tekstit-en.svg),
  linear-gradient(transparent, transparent);
}

#mobitext a {
  position:absolute;
  display:block;
  width:187px;
  height:136px;
  bottom:0;
  right:0;
}




/* 
etusivun pienempi mobimainos 12-2014 */

/* wrapper */

#mobile_ad-141205 {
  width:186px;
  height:400px;
  margin:16px 0;
  background:url(/suomi/images/20412.jpg) no-repeat top right;
  position:relative;
  float:right;
}

#mobile_ad-141205 a {
  display:block;
  position:absolute;
  text-indent:-9999px;
}

/* badges sprite */

a.apple-141205 {
  width:123px; 
  height:40px; 
  top:136px; 
  background:url(/suomi/images/21388.png) no-repeat 100% 0;
}

a.play-141205 {
  width:123px; 
  height:42px;  
  top:188px;  
  background:url(/suomi/images/21388.png) no-repeat 100% -40px;
} 

/* hide other language when other is present*/
#mobile_ad-141205.fi a#apple_en, #mobile_ad-141205.fi a#play_en {display:none;} 
#mobile_ad-141205.en a#apple_fi, #mobile_ad-141205.en a#play_fi {display:none;}


/*
mobile ad 2 - sisasivuilla*/

#article_mobi_ad {
  width:435px;
  height:110px;
margin:12px 0 0 12px;
padding:0;
position:relative;
}

#article_mobi_ad {text-indent:-9999px;}

#article_mobi_ad.en {background:url(/suomi/layout/app_banner_02_en.png) no-repeat top left;}
#article_mobi_ad.fi {background:url(/suomi/layout/app_banner_02_fi.png) no-repeat top left;}

#article_mobi_ad a {
  display:block;
  position:absolute;
  height:42px; 
}

#article_mobi_ad a.apple {
  width:136px; 
  top:60px; 
  left:10px;
}

#article_mobi_ad a.android {
  width:124px; 
  top:60px; 
  left:160px;
}

#article_mobi_ad a.kisa1 {display:none;} 


/*
Social media links on the frontpage and after species texts 
*/

/* wrapper */

.social-badges {
  text-align: center; 
  position:relative;
  margin:-16px 0;
}

      /* frontpage */
        #teksti_wide-141205 .social-badges {
        margin:22px 28px 6px;
      }

.social-badges a {
  display:block;
  float:left;
  transition: all ease-in-out 0.2s;
  text-indent:-9876px;
  background:url(/suomi/layout/somebadges.png) no-repeat 0 0;
}

      /* frontpage */
      #teksti_wide-141205 .social-badges a{
        text-indent:0;
        border-radius:3px;
        background-color:#e6e2db;
        width:176px;
        height:106px;
        color:#666;
        margin:2px;
      }


.social-badges a {
  width:50px;
  height:50px; 
}

      /* frontpage */
      #teksti_wide-141205 .social-badges a {
        height:106px; 
        line-height:166px;
      }

      #teksti_wide-141205 .social-badges a:hover {
        text-decoration:none; 
        color:#3280da; 
        height: 116px;
        margin-bottom:-20px;
}

.social-badges a.facebook {
  background-position:-30px -140px;
}

      #teksti_wide-141205 .social-badges a.facebook {
      background-position:30px 15px;}

.social-badges a.instagram {
   background-position:-180px -140px;
}

      #teksti_wide-141205 .social-badges a.instagram {
      background-position:-110px 15px;}

.social-badges a.youtube {
  margin-left:-4px;
  background-position:-320px -140px;
}

      #teksti_wide-141205 .social-badges a.youtube {
      background-position:-250px 15px; margin-left:2;}







/* 
Search results when displayed on front-page template */

div#front_search_results h3 {
  margin:0; 
  padding:8px 0 8px 0;
}

#front_search_results li {
  width:394px; 
  height:120px; 
  float:left; 
  border:solid 2px #C6DCA7; 
  margin:0px 2px 2px 0; 
  background:#ece8e1;
}  

#front_search_results .float_l {
  width:120px; 
  margin-right:0px;
}

#front_search_results li h3, #front_search_results li h4, #front_search_results li p.small {
  text-align:left; 
  margin:0 12px 0 0; 
}

div#front_search_results a img {
  margin:8px 8px 0 4px; 
  float:left;
}

#front_search_results li h3 a {
  font-size:18px; 
  line-height:100%; 
  margin:0; 
  padding:0;
}

body#home #front_search_results li h4 {border:none;}

#front_search_results li h4 a {
  font-size:11px; 
  color:#3280da; 
  font-family:verdana; 
  line-height:100%;
}

#front_search_results li p a, #front_search_results li p {
  font-size:10px; 
  padding:2px 2px 0 2px; 
  margin:0; 
  line-height:120%;
}

#front_search_results strong {
  font-weight:normal; 
  border-bottom:solid 2px #dbbde0; 
  padding:0 0 2px 0;
}




/* 
Listing articles as a text list 
*/

div#textlist {
  height:460px; 
  overflow:auto; 
  background:#ebe8e1; 
  margin:0 2px 2px 0;  
  border:solid 1px #ccc;
  padding:8px 0 8px 8px;
  text-align:left;
      -moz-border-radius:6px;
      -webkit-border-radius:6px;
  border-radius:6px;
}

div#textlist a {
  background:none; 
  display:block; 
  width:47%; 
  float:left; 
  padding:2px 4px; 
  line-height:1.2em; 
  border-bottom:solid 1px #dedede;
}

div#textlist a:link, div#textlist a:visited, div#textlist a:hover, div#textlist a:active {
  text-decoration:none;
}

div#textlist a:hover {background:#e2dfd8;}


/* 
Footer 
*/

#footer {
  background:#70541f;
  font-family: Georgia, Times, serif;
  color:#a7987a;
  padding:70px 0 0 0;
  clear: both;
  text-align: center;
  font-size:0.9em;
  height:60px;
}

#footer p {
  padding:0; 
  margin:0; 
  text-align:center;
}

#footer a {color:#a7987a;}

/* 
so called facelift*/


/* 
kasvit mainsivu
*/

#right .gutter {
    -moz-border-radius:6px 6px 0px 0px;
    -webkit-border-radius:6px 6px 0px 0px;
border-radius:6px 6px 0px 0px;
}

/* 
lajilistaukset
*/

#list li, #list_new li {
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
  border-radius:6px;
}

/* 
fix for collapsing looong latin names 
*/

#list li h4, #list_new li h4 {
  padding-left:4px; 
  padding-right:4px;
}

/*fix for search results in species pages*/
ul#search_results li {width:534px; height:10em !important;} 
ul#search_results .float_l {border-right:none !important; margin-right:4px !important;}

/* boxes lowered if no familyname shown */
#list ul.latinanimilista li {height:15em;}


ul#random_list_2 li:nth-child(2) { 
-moz-border-radius-topright: 12px;
-webkit-border-radius:0px 12px 0px 0px;
border-top-right-radius: 12px;
border:solid #fefefe;
border-width:1px 1px 0 0px;
}

ul#random_list_2 li:first-child{ 
border:solid #fefefe;
border-width:1px 0 0 0;
}

ul#random_list_2 li:nth-child(7) { 
border:solid #fefefe;
border-width:0 0 1px 0;
}

ul#random_list_2 li:last-child {
-moz-border-radius-bottomright: 12px;
-webkit-border-radius:0px 0px 12px 0px;
border-bottom-right-radius: 12px;
border:solid #fefefe;
border-width:0 1px 1px 0px;
}

ul#random_list_2 li:nth-child(4),ul#random_list_2 li:nth-child(6) { 
border:solid #fefefe;
border-width:0 1px 0 0;
}

#tietoisku {
width:84%;
margin:16px 0 0 0px;
background:#efefef;
font-size:0.9em;
border-left:solid 16px #7aad3c;
box-shadow: 1px 2px 4px #666;
box-shadow: 1px 2px 4px rgba(0,0,0,0.2);
padding-top:8px;
}

div#tietoisku p {
padding:0 16px 12px 16px;
color:#333;
}

div#tietoisku h4 {
padding:16px 12px 8px 16px;
color:#333;
}

div#tietoisku.listaussivu {
background:#ece8e1 url(/suomi/layout/teksti_bg.gif) no-repeat top right;
border:solid 1px #C6DCA7;
margin:2px 0 -10px 0;
width:536px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow:none;
}

/* tekstipohjat lajeissa */
#teksti, #tekstiBirdFlies{
-moz-border-radius:0px 3px 3px 3px;
-webkit-border-radius:0px 3px 3px 3px;
border-radius:0px 3px 3px 3px;
}

body#tunnistus #teksti {background:none;}

body#tunnistus #teksti h4:before {
content:""; 
display:block; 
height:98px; 
width:120px; 
margin:22px 0 0px 0; 
float:left; 
background:url(/suomi/layout/tunnistuslinkit.png) no-repeat 10px -114px;
}

body#tunnistus h4 {font-size:2.5em; line-height:2em; color:#a67d62;}

body#tunnistus h4:lang(sv),body#tunnistus h4:lang(en),body#tunnistus h4:lang(de),body#tunnistus h4:lang(fr),body#tunnistus h4:lang(es),body#tunnistus h4:lang(da),body#tunnistus h4:lang(no) {line-height:3.5em;} /* pudotetaan alemmas koska ei johdantoa */

body#tunnistus #teksti ul {clear:left;}

body#tunnistus #teksti ul li {
display:inline; 
font-size:1.4em; 
font-family:Georgia,Times,serif;
}

body#tunnistus #teksti ul li a {
display:block; 
float:left; 
width:30%;
margin:8px 8px 0 0; 
background-color: rgb(236,232,225);
padding:0.5em 1em 0.5em 0;
color:#444;
-moz-border-radius:3px;
-webkit-border-radius:3px; 
border-radius:3px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}

body#tunnistus #teksti ul li a:hover {
background-color:#7aad3c;
color:#f3f3f3; 
text-decoration:none; 
padding-left:0.5em; 
padding-right:0.5em;
}


body#tunnistus #teksti ul li img {margin:0 0.5em; vertical-align:middle; border:none;}
body#tunnistus #teksti ul li a img, body#tunnistus #teksti ul li a:hover img {background:none;}

/* 
s-lasilinkit tunnistuskoostesivulle
*/

#tunnistuslinkki_yla {
width:48px; 
height:48px; 
background:url(/suomi/layout/tunnistuslinkit.png) no-repeat -25px -11px; 
display:block; 
text-indent:-9999px; 
position:absolute; 
top:0; 
right:4px; 
margin-top:-34px; 
cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index:4;
}

a#tunnistuslinkki_yla:hover{
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
transform: rotate(10deg);
}

/* div artikkelin lopussa */
#tunnistuslinkki_ala {
margin:16px 0 0 0;
font-family: Georgia, Times, serif; 
font-style:italic;
}

#tunnistuslinkki_ala h4 a {color:#7aad3c; padding-left:110px;}

#tunnistuslinkki_ala a:hover {text-decoration:none;}

#tunnistuslinkki_ala p a {
color:#B035CF;
display:block;
margin:-22px 0 40px 0;
padding:10px 70px 0 110px;
position:relative;
}

#tunnistuslinkki_ala p a:before {
content: "";
position:absolute;
width:100px;
height:104px;
top:0px;
left:0;
margin-top:-22px;
background:url(/suomi/layout/tunnistuslinkit.png) no-repeat -0px -114px; 
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

#tunnistuslinkki_ala p a:hover:before {
    -webkit-transform: rotate(6deg);
    -moz-transform: rotate(6deg);
    -ms-transform: rotate(6deg);
    -o-transform: rotate(6deg);
transform: rotate(6deg);
}


/*

Help text for using the search 

js-tips starts
toggler-1 opens, and is added after h5_hae
toggler-2 closes

*/


/* hide tips from all langs  */
.js-tips-toggler-1, .js-tips {display:none;}

/* except... */
html:lang(fi) .js-tips-toggler-1 {display:inline-block;}

/* styling opener text of js-tips */ 
.js-tips-toggler-1 {
  width:20px;
  height:20px;
  text-indent:-99999px;
  cursor:pointer;
  position:relative;
  float:right;
  padding-right:5px;
}

.js-tips-toggler-1:after {
  content:'?';
  position:absolute;
  top:-5px;
  color:#f3f3f3;
  text-indent:0;
  background:#96B669;
  display:block;
  height:22px;
  width:22px;
  border-radius:12px;
  font-size:16px;
  line-height:22px;
  text-align:center;
}

/* togglable tips div */
.js-tips {
  display:none;
  position:absolute; 
  top:-5px; 
  left:12px; 
  z-index:1000; 
  width:300px; 
  background:#eee; 
  box-shadow:2px 2px 4px #444; 
  border-radius:6px; 
}

/* 
positioning and sizing of the tips-div for other languages, 
and section-based overrides, example below
*/

/* body:lang(fi)#flowers .js-tips {width:400px; top:10px;} */


/* closing X-btn inside tips-div */
.js-tips .js-tips-toggler-2 {
  display:block;
  float:right;
  width:24px;
  height:24px;
  margin:16px 12px 0 0;
  background: #79AC3B;
  border-radius:12px;
  border:none;
  text-align: center;
  color:#eee;
  font-size:14px;
  line-height:22px;
  cursor:pointer;
}

#browse .js-tips h5 {
  padding:22px 0 0 10px;
}

.js-tips p {
  position:relative; 
  z-index:999; /* above the arrow-down */
  padding:10px;
  cursor:pointer;
}

#js-modalBackground {
  position:absolute;
  top:0;
  left:0;
  z-index:999;
  background:#000;
  opacity:0.4;
  width: 100%;
  height:100%;
  display:none;
  cursor:pointer; 
}

/* downwards pointing arrow below the tips div */
.arrow-down {
  position:absolute;
  z-index:1;
  bottom:-12px;
  left:10px;
  width:20px;
  height:20px;
}

.arrow-down:after {
  content:'';
  display:block;
  width:100%;
  height:100%;
  background:#eee;
      -ms-transform-origin:0 0;
      -webkit-transform-origin:0 0;
  transform-origin:0 0;
      -ms-transform:rotate(-45deg);
      -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

/*
pink bg-color for hovering like is in identification tools
*/

.js-tips-toggler-1:hover:after,.js-tips .js-tips-toggler-2:hover {
background:#c25ca5;
}




/*
js-tips ends
*/


@media all and (min-width:1px){
#extra_navi .top_langlist {background:none;}
}

@media screen and (min-width: 1190px) {
   #extra_navi .top_langlist {width:auto; border-left:none; margin-top:11px;}
   p#cont_partn_links a {clear:none; margin:11px 2px 0 0;}
   #extra_navi #logo {border:none;}
}

@media screen and (max-width: 880px) {

#extra_navi .top_langlist {
  width:100%;
  height:2em;
  top:45px;
  right:40px;
  background:#fefefe;
  border-top:solid 1px #ddd;
  text-align:right;
  -moz-border-radius:0 0 6px 0;
  -webkit-border-radius:0 0 6px 0;
  border-radius:0 0 6px 0;
}

   #extra_navi #logo {border-right:solid 1px #ddd; padding-right:15px;} /* NG-logo*/
   #extra_navi .top_langlist li {float:none; display:inline; line-height:1.3em; padding:0 8px  0 0; margin-left:-0.4em;}
   #header {height:100px; background-position:center bottom !important;}
}

@media screen and (max-width: 680px){
   #extra_navi {height:91px;}
   #extra_navi #logo {border:none;}
   #extra_navi .top_langlist {height:4.2em; z-index:1; text-align:right; right:0px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}
   p#cont_partn_links {top:70px; right:8px; z-index:2; font-size:0.8em; padding-top:0px; text-align:right;}
 
p#cont_partn_links a {
clear:none;
float:none;
margin:0;
padding:0 6px 0 0;
border-right:solid 1px;
}

#header {height:90px; background-position:center bottom !important;}
}


@media screen and (max-width: 520px){
   img#wdc2012small {position:relative;margin-top:50px;}
   #extra_navi {height:124px;}
   #header {display:none;}
   #livehaku {position:absolute; right:100px; top:45px; width:100%; left:0; background-image:none; background-color:#B7CF88;}
   #livehaku input {width:80%;}
   #extra_navi .top_langlist {top:90px; height:2.8em;}
   p#cont_partn_links {top:8px; }
   p#cont_partn_links a {float:right; clear:right;}
   #live_search .ls_wait_image {position:absolute; right:80px; top:16px;}
   #live_search div.ls_results  {width:75% !important;}
   #live_search .ls_results ul, #live_search .ls_results li, #live_search .ls_results a {width:100%}
#fb_small_link {display:none;}
p#cont_partn_links a {padding:0;border-right:none;}   

#live_search .ls_reset_image {
position:absolute;
right:0;
top:14px;
background: transparent url(/suomi/layout/src_reset.gif) no-repeat 30% -16px;
width: 44px;
height: 30px;
cursor: pointer;}
}


/* 
etusivun support-divi oikeaan palstaan, kun vanha mobiilimainos pois uuden alta.
Poista kun palautetaan sivun alareunaan
*/

#support-141205 {
  float:right;
  line-height:0;
  margin:16px 0;
  width:186px;
  background:#ecedea;
  padding:16px 0 24px;
  text-align:center;
}

#support-141205 img {
  margin:0;
  padding:0; border:0;
  display:inline;
  width:100px;
  height:auto;
}