/* vuosikohtaisten pikkukuvien tyyli. Etusivu, kauppa <style> html:ssä */

html {
    font-family: "Lucida Sans", sans-serif;
}
body {
	    background-color: #666666;
}

body.pics {
	    background-color: #999999;
}
* {
    box-sizing: border-box;
}
.header {
    border: 0px solid blue;
	padding-top: 20px;
    padding-left: 0px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
} 

/* .row {    
    border: 1px solid #777;
} */
    

.col-4 {width: 33.33%;
       float: left;
       border: 0px solid white;
       padding-left: 120px;
       padding-top: 5px;
       padding-bottom: 10px;
	   min-width:200px; 
       max-width:200px;
}

.col-10x {width: 83.33%;
       float: left;
       background-color: #666666;
       border: 1px solid #333333;
	   min-width:750px; 
       max-width:750px;
}

.col-pop {width: 83.33%;
       float: left;
       background-color: #666666;
       text-align: center;
       padding-bottom: 25px;
       min-width:750px;
       max-width:750px;
}

.col-pophin {width: 83.33%;
       float: left;
       background-color: #FFFFFF;
       text-align: center;
       padding-bottom: 25px;
       min-width:475px;
       max-width:475px;
}

.col-10pic {width: 83.33%;
       border: 0px solid white;
       padding-left: 25px;
       color:#cccccc;
       min-width:730px; 
       max-width:730px;
}

.col-10picx {width: 83.33%;
       border: 0px solid white;
       padding-left: 105px;
       color:#cccccc;
       min-width:730px; 
       max-width:730px;
}

.col-5 {width: 20%;
       float: left;
	   background-color: #F6F6F6;
	   min-width:250px; 
       max-width:300px;}

              
.col-10g {width: 100%;
       border: 0px solid green; 
       padding-left: 0px;
       padding-top: 2px;
       color:#cccccc;
/*       min-width:730px; */ 
       max-width:500px;
}
.col-kauppa {width: 100%;
       border: 0px solid red;
       padding-left: 8px;
       padding-right: 8px;
       font-size: smaller;
       text-align: left;
       float: none; 
   	   background-color: #FFFFFF;
       color:black;
/*       min-width:730px; */ 
       max-width: 485px; 
}


div.gal {
    margin: 4px;
    border: 1px solid #777;
    float: left;
    width: 152px;
	color:white;
}

div.gal_empty {
    margin: 3px;
    border: 1px solid #666666;
    float: left;
    width: 152px;
	color:white;
}

div.gal_UFR {
    margin: 3px;
    border: 1px solid #666666;
    text-align: center;
    float: left;
    width: 152px;
	color:white;
}

div.gal:hover {
    border: 1px solid white;
}

div.gal img {
    width: auto;
    height: 113px;
}

div.desc {
    padding: 5px;
    text-align: center;
}

a:link {
   color: #2A68DC;
   text-decoration:underline;
   outline: 0;
  }
a:visited {
   color: #2A68DC;
   text-decoration:underline;
   outline: 0;
  } 
a:hover {
   color: #2A68DC;
   text-decoration:underline;
   outline: 0;
  } 
  

.nelio {
   padding: 0px 20px 0px;  
   width: 113px;
   height: 113px;
}

#table-container {
    display:    table;
    border: 0px solid red;
    text-align: center;
    width:      100%;
    height:     100%;
}

#container
{
    text-align: center;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align: left;
    background-color: #666666;
}
a.nappi {
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	color: #CCCCCC;
}
a.nappi:link {
	text-decoration:none;
	color: #CCCCCC;
}
a.nappi:visited {
	text-decoration:none;
	color: #cccccc;
}

a.nappi:hover {
	text-decoration:none;
	color: #999999;
}
h4 {
    text-align: center;
    color: #cccccc;
 }   
h6 {
    text-align: center;
    color: #999999;
 }   

button {
    background-color: transparent;
    border: none;
    color: white;
    padding: 0px 0px;
    text-decoration: none;
    margin: 0px 0px;
    cursor: pointer;
}
button:hover {
    background-color: transparent;
    border: 1px;
    color: white;
    padding: 0px 0px;
    text-decoration: none;
    margin: 0px 0px;
    cursor: pointer;
       opacity: 0.5;
}


.flex-container {
  display: flex;
  background-color: #666666;

}

.flex-container > div {
  background-color: #666666;
  margin: 0px;
  padding-left: 20px;
  font-size: medium;
  color: white;
}
img.iso {
   border:solid;
   border-width:1px;
   border-color: white;
 }

 
.nuoli:hover {
   border-width:1px;
   border-color:white;
   opacity: 0.5;
 }

td.ots {
  padding: 5px;
  border: 1px solid #777;
/*  align="center"; */
  }  

td.txt {
  padding: 5px;
  font-size: 14px;
  border: 1px solid #777;
  color: #666666;
  background-color: #FBFBFB;  
  }    

td.lnk {
  padding: 5px;
  font-size: 14px;
  float: top;
  color: #666666;
  background-color: #FFFFFF;  
  }    
  
.dark {
    color:black; }
  
 /* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #666666;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  text-align: center;
  padding: 7px 16px;
  border: 1px solid #777;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: 1px solid #777;
  outline: none;
  padding: 7px 23px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 1px; /* Important for vertical align on mobile phones */
}

/* Add background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: grey;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 120px;
  box-shadow: 4px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: grey;
  padding: 5px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}    

/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup tarinat */
.popup .popuptext {
  visibility: hidden;
  width: 400px;
  background-color: #E1E1E1;
  color: #666;
  text-align: center;
  border-radius: 6px;
  padding: 10px 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -200px;
}

/* The actual popup hinnasto */
.popup .popuptext1 {
  visibility: hidden;
  width: 750px;
  background-color: #E1E1E1;
  color: #666;
  text-align: center;
  border-radius: 6px;
  padding: 10px 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -370px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #E1E1E1 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .3s ease;
  backface-visibility: hidden;
}
.container:hover .image {
  opacity: 0.3; }