/*
   CSS specific to ukmap.php
*/

.typebreadcrumbs
 {
  font-size: 16px;
  padding: 12px 0 12px 0;
  //background-color: yellow;
 }
.typebreadcrumbs2
{
 font-size: 18px;
 font-weight: bold;
}
.clicktoseemore
{
 padding-right: 10px;
 font-size: 12px;
 display: block;
}
.cat
{
 font-size: 18px;
 font-weight: bold;
 font-style: italic;
}
.cattable
{
 padding: 0 10px 0 0;
}
.imagecolumn { display: block; }

.legendcol
{
 width: 20px;
}

.typeimage
{
 width: 240px;
 height: auto;
}     
.typeimage2
{
 width: auto;
 height: 240px;
}
.typewrapper
{
 display: flex;
 margin-right: 15px;
 //background-color: pink; 
}
.typecol1
{
 padding: 0 15px 0 0;
 width: 100%;
}
.typecol2
{
 display: block;
 margin-left: auto;
 align-self: flex-end;
}
.thisloc
{
 font-size: 12px;
 margin: 0 10px 5px 0;
 //line-height: 2em;
}

.catcrumbs
{
 padding: 3px 0 3px 0;
}

.maximidi { display: block; }
.mini     { display: none; }

.footer1 { margin: 0 5px 0 0; }
.footer2 { margin: 0 5px 0 3px; } 

/* ::::::::::::::::  MEDIA QUERIES :::::::::::::::::::: */

@media only screen and (max-width: 950px)
{
  .typeimage
  {
   width: 200px;
   height: auto;
  }        
  .typeimage2
  {
   width: auto;
   height: 200px;
  }
}                                      

@media only screen and (max-width: 850px)
{
  .typebreadcrumbs
   {
    font-size: 16px;
    padding: 0px 0 5px 0;
   }
  .typebreadcrumbs2
  {
   font-size: 18px;
   font-weight: bold;
  }          
  .typewrapper
  {
   margin-right: 10px; 
  }
}                       

@media only screen and (max-width: 650px)
{ 
  .typebreadcrumbs
   {
    font-size: 14px;
    padding: 0px 0 5px 0;
   }
  .typebreadcrumbs2
  {
   font-size: 16px;
   font-weight: bold;
  }  
  .typeimage
  {
   width: 180px;
   //min-width: 240px;
   height: auto;
  }              
  .typeimage2
  {
   width: auto;
   height: 180px;
  }
  .typewrapper
  {
   display: flex;
   margin-right: 5px; 
  }
}                                 

@media only screen and (max-width: 600px)
{
  .maximidi { display: none; }
  .mini     { display: block;}  
  .clicktoseemore
  {
   padding-right: 10px;
   font-size: 12px;
   display: none;
  }
  .imagecolumn { display: none; }
  .typecol2
  {
   display: none;
  }    
  .thisloc
  {
   display: none;   
  }
}                                            

@media only screen and (max-width: 500px)
{   
  .typebreadcrumbs
   {
    font-size: 13px;
    padding: 0px 0 5px 0;
   }
  .typebreadcrumbs2
  {
   font-size: 15px;
   font-weight: bold;
  }  
}