/*
   CSS specific to library/index.php
*/

.alphaheader
{
 font-size: 24px;
 padding: 8px 0 8px 0;
 color: #0C4664;
 font-weight: bold;
}   
.iconbar_icon
{
 position: relative;
 display: inline;
 z-index: 0;
}    
.iconbar_icon2
{
 position: relative;
 display: inline;
 top: -27px;
 z-index: 0;
}          
.iconbar_icon3
{
 position: relative;
 display: inline;
 top: -5px;
 z-index: 0;
}
.iconbarpopup
{
 position: absolute;
 left: -85px;
 top: 20px;
 border-width: 0;
 background-color: #BFCFD6;
 padding: 0px;
 z-index: 2;
 visibility: hidden;

/* $style = "style='position: absolute; width: 115px; border-style: solid; border-width: 0; ";*/
/* $style.= "border-color: #BFCFD6; background-color: #BFCFD6; padding: 0px; z-index: 2; visibility: hidden;'";*/
}      
.iconbarpopup2
{
 position: absolute;
 left: -115px;
 top: 20px;
 border-width: 0;
 background-color: #BFCFD6;
 padding: 0px;
 z-index: 2;
 visibility: hidden;

/* $style = "style='position: absolute; width: 115px; border-style: solid; border-width: 0; ";*/
/* $style.= "border-color: #BFCFD6; background-color: #BFCFD6; padding: 0px; z-index: 2; visibility: hidden;'";*/
}           
.iconbarpopup3
{
 position: absolute;
 left: -115px;
 top: 45px;
 border-width: 0;
 background-color: #BFCFD6;
 padding: 0px;
 z-index: 2;
 visibility: hidden;

/* $style = "style='position: absolute; width: 115px; border-style: solid; border-width: 0; ";*/
/* $style.= "border-color: #BFCFD6; background-color: #BFCFD6; padding: 0px; z-index: 2; visibility: hidden;'";*/
}

.alllocs
{
 padding: 0 10px 0 0;
}

.blurb
{
 font-size: 14px;
 padding: 0 15px 0 0;
}
.smallerblurb 
{
 font-size: 13px;
 padding: 0 15px 0 0;
}  
.biggerblurb
{
 font-size: 15px;
 padding: 0 15px 0 0;
}

.typefind:hover
{
 text-decoration: none;
 background-color: #eee;
 //font-style: italic;
}


//.typeimage
//{
// width: 240px;
// height: auto;
//}     
//.typeimage2
//{
// width: auto;
// height: 240px;
//}

//.typewrapper
//{
// display: flex;
// flex-flow: row wrap;
// align-items: flex-end;
// justify-content: space-between; 
// margin: 0 25px 0px 0;
// row-gap: 15px;
// column-gap: 5px;
// //background-color: pink; 
//}
//.typecontent
//{
// align: center;
// border: 1px solid red; 
// background-color: pink; 
//}
.typeimageX
{
 width: 100%;
 max-width: 240px;
 height: auto;
}   
.newimage
{
 width: 100%;
 max-width: 400px;
 height: auto;
}         
.newimageportrait
{
 height: 100%;
 max-height: 400px;
 width: auto;
}          
.allnewimage
{
 width: 100%;
 max-width: 240px;
 height: auto;
}         
.allnewimageportrait
{
 height: 100%;
 max-height: 240px;
 width: auto;
}
.typecat
{
 font-size: 13px;
}
.newmoblink
{
 font-size: 14px;
 margin: 0 0 5px 0;
}

.desktop  { display: block; } 
.mini     { display: none; }         
.desktopall  { display: block; }
.midiall     { display: none; }
.miniall     { 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; 
  }
  .newimageportrait
  {
   height: 100%;
   max-height: 350px;
   width: auto;
  }
}       

@media only screen and (max-width: 900px)
{
  .newimageportrait
  {
   height: 100%;
   max-height: 300px;
   width: auto;
  }              
  .allnewimageportrait
  {
   height: 100%;
   max-height: 200px;
   width: auto;
  }
}                                    

@media only screen and (max-width: 850px)
{
  .alphaheader
  {
   font-size: 20px;
   padding: 0px 0 8px 0;
   color: #0C4664;
   font-weight: bold;
  }        
  .newimageportrait
  {
   height: 100%;
   max-height: 400px;
   width: auto;
  }
}                                           

@media only screen and (max-width: 800px)
{
  .newimageportrait
  {
   height: 100%;
   max-height: 350px;
   width: auto;
  }
}                                          

@media only screen and (max-width: 750px)
{
  .newimageportrait
  {
   height: 100%;
   max-height: 300px;
   width: auto;
  }           
  .allnewimageportrait
  {
   height: 100%;
   max-height: 200px;
   width: auto;
  }
}                                             

@media only screen and (max-width: 700px)
{              
  .desktopall  { display: none; }
  .midiall     { display: block; }
  .miniall     { display: none; }  
}

@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; 
  } 
  .newimageportrait
  {
   height: 100%;
   max-height: 280px;
   width: auto;
  }
}                                 

@media only screen and (max-width: 600px)
{
  .blurb
  {
   font-size: 13px;
   padding: 0 15px 0 0;
  }
  .smallerblurb 
  {
   font-size: 13px;
   padding: 0 15px 0 0;
  }
  .clicktoseemore
  {
   padding-right: 10px;
   font-size: 12px;
   display: none;
  }
  .imagecolumn { display: none; }
  .typecol2
  {
   display: none;
  }
  .desktop { display: none; }
  .mini    { display: block; }

  .newimageportrait
  {
   height: 100%;
   max-height: 400px;
   width: auto;
  }
}                                            

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

  .newimageportrait
  {
   height: 100%;
   max-height: 350px;
   width: auto;
  }                  
  .desktopall  { display: none; }
  .midiall     { display: none; }
  .miniall     { display: block; }  
}                                                   

@media only screen and (max-width: 400px)
{   
  .newimageportrait
  {
   height: 100%;
   max-height: 300px;
   width: auto;
  }
}                                                    

@media only screen and (max-width: 350px)
{   
  .newimageportrait
  {
   height: 100%;
   max-height: 250px;
   width: auto;
  }
}