﻿
/*AA täiendused*/
html {
    background-color: #373a3c;
  /*font-size:medium;*/
}

body {
    background-color: #373a3c;
    overflow-x: hidden; /*kaotame horisontaalse skrollimise*/
}


/*Media queries breakpoints
Define the breakpoints at which your layout will change, adapting to different screen sizes.*/

/*ekraaniresolutsioonid: 
    fhd 1920
    xlg 1366
    xl 1200 extra large >1200px ≥75em
    lg 992 large >992px  ≥62em;
    md 768: medium >=768px ≥48em;
    sm 544: small >=544px ≥34em;
    xs: extra small <544px <34em;
*/ 



/* --------------------------------------------- värvid */

.tekst-punane {color:  red !important; }
.taust-punane {background-color:  red; }
.taust-lilla {background-color: #ff00e2 ; }
.taust-apelsin {background-color: #ff8d00 ; }

.valkjashall {background-color: #f5f5f5 ; }
.helehall {background-color: #999; }
.soehelehall{ background-color: #c4c1bd; }
/*#EEE9E9 */
.ekraanihall {background-color:#e5e3db;}
.hall {background-color: #585858;  }

.tumehall {background-color: #373a3c; } /* bp #373a3c  #333  */

/*.tekst-kreem {color:  #b49d7b !important; }*/

.tekst-helehall, .tekst-helehall a {color:  #999 !important; }
.tekst-hall, .tekst-hall a {color:  #585858 !important; }
.tekst-tumekreem, .tekst-tumekreem a {color:  #6c6459 !important; }
.tekst-helekreem, .tekst-helekreem a {color:  navajowhite !important; }
.tekst-valgekreem {color: antiquewhite !important; }
.tekst-tilluke {font-size: x-small;}
.tekst-paras {font-size: small;}


/* --------------------------------------------- laotused */

.inforiba { margin-top:0;  }
.inforiba-nupud {min-height:20px; margin-top:10px}
.eelvaateriba {margin-top:0; margin-bottom:20px; text-align:center; }
.alumineriba { }


/*laps vertikaalselt keskele*/
.center-flex
{
    display:flex;
    align-items:center;
    justify-content:center;
    /*display:block;*/
    /*align-content:center;*/
    /*text-align:center;*/

}


.thumbnail_container {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    margin-bottom:20px;
}

.thumbnail {
    position:absolute;
    width:100%;
    height:100%;
}
.thumbnail img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

img{
    max-height:100%;
    max-width:100%;
}

/* --------------------------------------------- globaalne */

.container-fluid
{
  /*padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;*/
  padding-right: 0;
  padding-left: 0;

}

.andmepind
{
    font-size: 12px;
    color: #cccccc;
    background-color:  #666; 
    padding: 1px 6px;
    border:0;
    -webkit-border-radius: 4px;
    border-radius: 4px;    
}

.motiivikast
{
    max-height: 280px; 
    border-radius:6px; 
    overflow-y: scroll;
}

.motiivikastirida
{
    background-color: gainsboro;
    padding: 5px;
}


.tekstiala
{
    position: relative;
    display: block;
    text-align:center;
    width: 90%;
    max-width:600px;
    min-height: 800px;
    margin-top: 10px;
    margin-bottom:10px;
    border-radius: 6px;
    border: 2px dotted #65633e;
    background-color:#efeee9;
}

/* ---------------------------------------------------------------- MENÜÜRIBA */
.menyyriba {min-height:55px; margin-bottom:2px; }

#Logo {margin-top:0.25rem; margin-left:0.8rem; }
#Kaubamark {}
#Keelenupp {margin-top:0.6rem; margin-left:0.8rem; font-size:x-small; padding:1px;}


.nav-link {
  color: navajowhite;
}


.nav-link.active, .nav-link.active:focus, .nav-link.active:hover
 {
  color: red;
  cursor: default;
}


.navbar-divider {
  /*float: left; width: 1px; padding-top: .425rem; padding-bottom: .425rem; margin-right: 1rem; margin-left: 1rem; overflow: hidden;*/
padding:0;
margin-top:0.4rem;  
margin-left: 1.2rem;
margin-right: 1.2rem;
background-color:  #999 !important;
}

#TextBoxOtsing {
    margin-top:0.3rem;
    width:400px;
    height:28px;
    font-size: larger;
    text-align:center;
}

/*In version 4 they did not include styles for collapsed menu (for now). You have to use your own CSS to achieve that, for example (mobile first approach):*/
/*Extra small (xs): <34em; Small (sm) ≥34em; Medium (md) ≥48em;	Large (lg) ≥62em; Extra large(xl) ≥75em*/

.navbar-brand {
  float: none;
}
.navbar-nav .nav-item {
  float: none;
}
.navbar-divider,
.navbar-nav .nav-item+.nav-item,
.navbar-nav .nav-link + .nav-link {
  margin-left: 0;
}
@media (min-width: 48em) /*34em*/
{
  .navbar-brand {
    float: left;
}
  .navbar-nav .nav-item 
  {
    float: left;
  }
  .navbar-divider,
  .navbar-nav .nav-item+.nav-item,
  .navbar-nav .nav-link + .nav-link 
  {
   margin-left: 1rem;
  }
}


/* ------------------------------------------------------------- PILDIRIBA */

.nupuekraan
{
  display: block;
  float:left;  
  margin-left: 65px;
  margin-right: -20px;
  width: 500px;
  height:auto;
  padding:15px;
  text-align:center;  
  /*border-bottom-color:grey;
  border-top-color:grey;*/
  border-color: #c4c1bd;
  border-style: solid;
  border-width:1px;
  background-color:#f1efe9;
  /*border-radius:10px;*/
}      

.nupuekraanipealkiri 
{
    padding-top:10px;
    padding-bottom:2px;
    padding-right: 5px;
    color:dimgrey;
    text-align:center;
    font-size: x-large;   
}

.nupuekraanialapealkiri
{
    padding-top: 15px;
    padding-bottom:2px;
    padding-right: 5px;
    color:dimgrey;
    text-align:center;
    font-size: medium;   
    font-style: normal;
}

.nupuekraanitekst
{
    padding:  2px 3px;
    padding-bottom:0;
    margin-bottom:0;
    font-size:15px;
    color:saddlebrown   
}

.nupuekraanitekst a, .nupuekraanitekst a:hover, .nupuekraanitekst a:visited 
{
    padding: 5px 3px;
    color: saddlebrown;
    text-decoration:underline;
}
/*ekraaniresolutsioonid: 
    fhd 1920
    xlg 1366
    xl 1200 extra large >1200px ≥75em
    lg 992 large >992px  ≥62em;
    md 768: medium >=768px ≥48em; 48em-mobiilne menüü
    sm 544: small >=544px ≥34em;
    xs: extra small <544px <34em;
*/ 

/*==========  Mobile First Method  ==========*/
.pildiriba { margin-top:5px; } 
.pildikyljed { padding-right:70px; padding-left:70px; height:auto; /*background-color:lightyellow*/}
.img-fluid-lm { max-width: 700px; max-height:360px; height: 100%; width: 100%; }
.ruudunupp { width:0; padding-top:4px; padding-bottom:4px;  filter: alpha(opacity=40);  opacity: .40; }
.ruudunupp:hover { filter: alpha(opacity=100); opacity: 1; }

/*sm - small*/

@media(min-width: 34em) 
{
.pildiriba {min-height:450px; }
.pildikyljed {height:450px; /*background-color:lightskyblue;*/ }
.img-fluid-lm { max-width: 700px; max-height:360px; }
.ne-lyke {margin-top:10px; }
}

/*md - medium*/

@media(min-width: 48em) 
{
.pildiriba {min-height:500px; }
.pildikyljed {height:500px; /*background-color:lightcoral;*/ }
.img-fluid-lm { max-width: 900px; max-height:420px; }
.ruudunupp {width:100%; padding-top:2px; padding-bottom:2px;}
.ne-lyke {margin-top:100px; }
}

/*lg - large*/

@media(min-width: 62em) 
{
.pildiriba {min-height:500px; }
.pildikyljed {height:500px; /*background-color:lightyellow*/ }
.img-fluid-lm { max-width: 900px; max-height:420px; }
.ruudunupp {width:100%; padding-top:2px; padding-bottom:2px;}
.ne-lyke {margin-top:150px; }
}

/*xl - large*/

@media(min-width: 75em) 
{ 
    /*body {background-color:#4cff00 !important ; }*/
    .pildiriba {min-height:550px; }
    .pildikyljed {height:550px; /*background-color:lightgreen;*/  }
    .img-fluid-lm { max-width: 1000px; max-height:470px; }
    .ruudunupp {width:100%; padding-top:2px; padding-bottom:2px;}
    .ne-lyke {margin-top:150px; }
}

/*xxl - large*/
@media(min-width: 90em)
{
    /*body { background-color:skyblue !important ; }*/
    .pildiriba {min-height:680px; }
    .pildikyljed {height:680px; /*background-color:lightcyan;*/ }
    .img-fluid-lm { max-width: 1400px; max-height: 100%;  }
    .ruudunupp {width:100%; padding-top:2px; padding-bottom:2px;}
    .ne-lyke {margin-top:190px; }
}

/*PEITMINE*/

.nupupaneel { display: block; margin-right: auto; margin-left: auto; padding-top:1em;}
@media(max-width: 63em) 
{
    .nupupaneel { display: none; }
    .pildikattekontroll {display:none; }
} 



/* -------------------------------------------------- PILDIRIBA kyljemenyyd */

#tagasinupp
{ 
    position:absolute;
    top: 45%;
    left:10px;
}


#edasinupp
{
    position:absolute;
    top: 45%;
    right:10px;
}


.noolenupp { padding-top:4px; padding-bottom:4px;  filter: alpha(opacity=40);  opacity: .40; }
.noolenupp:hover { filter: alpha(opacity=100); opacity: 1; }


/* --------------------------------------------------------------- INFORIBA */

#lehekylgedasinupp
    {
    right:18px;
    }

#lehekylgtagasinupp
    {
    left:18px;
    }

#kakskymmend
    {
    }

.eelvaateribanupp
    {
    
    position: absolute;
    right:50%;
    display: inline-block;
    filter: alpha(opacity=35);
    opacity: .35;
    }
    
.eelvaateribanupp:hover
    {
    filter: alpha(opacity=100);
    opacity: 1;
    }

/* ----------------------------------------------------------- EELVAATERIBA */

.img-thumbnail,
.img-thumbnail-selected {
  /*display: inline-block; max-width: 100%; height: auto; padding: .25rem; line-height: 1.5; background-color: #fff; border: 1px solid #ddd; border-radius: .25rem;
 -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;*/
    
    
  display: inline-block;
  vertical-align: middle;
  text-align:center;
  height:100px;
  width: 149px;  
  padding: 0;
  margin-top: 7px;
  margin-bottom: 7px;
  background-color: #aaa;
  border: 1px solid #888;
  border-radius: 3px;
  
}

.img-thumbnail-selected {
    /*background-color: #fff;*/
    border: 3px solid #fff;
}

.img-thumbnail-in {
    height:100%;
    vertical-align:middle;
    max-height: 100%;
    max-width:100%;
    padding: 1px;
    /*margin: auto;*/
    /*display:inline;*/
}



/* -------------------------------------------------------------- LÕPURIBA */
#Fb-loodusemees {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
    z-index: 999;
}

/* ------------------------------------------------------------- KATSETUSED */


#post
{   
    height:500px;
    width:250px;
}

#ruut {
    
    height: 50px;
    width: 50px;
}

.nullime
{
    margin:0 !important; 
    padding:0 !important;

}













