/*
    STYLETWO - desktop / mobile, no midi
*/


body	{
	background: #ffffff url(/grafix/frontpage/background-grad.png) repeat-x;
	font-family: 'Open Sans', sans-serif;
	color: #000000;
	padding: 8px !important;
	margin: 0 !important;
	width: 97vw !important;    
	}
                                              
:root
{
 --lwblue:         #0C4964;
 --lwltblue:       #3C7994;
 --lwltback:       #5D9AB5;
 --postit:         #fff9dd;
 --lwgrey:         #999;
 --verygrey:       #bbb;
 --xgrey:          #eee;
 --darkred:        #ab0000;
 --reddish:        #cf3d29;
 --redback:        #ffd3d3;
 --blueback:       #eeffff;  
 --bluebackhover:  #e3f4f4;
 --greenback:      #f1fff1;
 --greenbackhover: #eaf8ea;  
 --pinkback:       #fff5f5;
 --pinkbackhover:  #F8E4E4;
}

a:link    { color: var(--lwblue); text-decoration: none; }
a:visited { color: var(--lwblue); text-decoration: none; }
a:hover   { color: var(--lwblue); text-decoration: underline;} 
a:active  { color: #ff0000; text-decoration: none; }

a.prevnext:link  { text-decoration: none; }
a.prevnext:hover { background-color: var(--xgrey); } 

hr {
    border: none !important;
    height: 1px !important;
    /* color: #aaa !important; */
    background-color: #aaa !important;
   }

/* COMMON TO ALL ////////////////////////////////////////////////////////// */ 

/* side search auto-suggest */
#ajax_response
{
 font-size:  10pt;
 border:     1px solid #B4B4B4;
 background: #F9F9F9;
 width:      100px;
 position:   absolute;
 display:    none;
 top:        auto;
 padding:    2px;
 z-index:    2;
 margin-top: 0px;
}     

.list
{
 list-style: none;
 margin:     0;
 padding:    0;
}

.list li a
{
 text-align:      left;
 cursor:          pointer;
 display:         block;
 text-decoration: none;
 color:           #000;
 padding:         2px;
}

.selected
{
 background: #cce3f2;
} 
/* end side search auto-suggest */

.menuline { background-color: #eee; }
.menuhr
{
 border-collapse: collapse;
 height: 2px;
}
.menuhr2
{
 border: none;
 height: 1px;
}
.hozmenu  { font-size: 13px; }

.grey { color: var(--lwgrey); }

.ppmenubutton
{
 padding: 2px 0 0 8px;
 cursor: pointer;
}

.ppmenuphone { padding-right: 10px; }

.mobileheart
{
 float: right;
 width: 20px;
 height: auto;
}

.mobilehide
{
 padding: 0 0 0 4px;
 float: right;
 width: 20px;
 height: auto;
}

.mobileinfoheader
{
 border-spacing: 0;
 border-collapse: separate;
 width: 100%;
 font-size: 14px;
 margin: 5px 0 5px 0;
}
.mobileinfoheader td { padding: 0; }

.nameofpage
{
 text-align: center;
 font-size: 13px;
 color: #888;
 padding: 0 5px 0 0;
}

.indextext
{
 font-size: 14px;;
 padding: 0 0 5px 0;
 //display: inline-block;
}

.indeximg
{
 display: block;
 /* padding: 0 0 3px 0; */
}

.indexcommentline
{
 padding: 0 10px 0 10px;
 font-size: 14px;  
 background-color: var(--postit);
 text-align: center;
}                

.locationcommentline
{
 margin: 0 10px 10px 10px;
 font-size: 2.8vw;  
 background-color: var(--postit);
 text-align: center;
}

.description
{
 font-size: 2.8vw;
 text-align: center;     
}
.orqdescription { font-size: 13px; }
.orqred { color: #DD0000; }
.orqmobile
{
 font-size: 14px;
 margin: auto;
 max-width: 600px;
}

.redanchor         {color: #dd0000; text-decoration: none; }
.redanchor:link    {color: #dd0000; text-decoration: none; }
.redanchor:visited {color: #dd0000; text-decoration: none; }
.redanchor:hover   {color: #dd0000; text-decoration: underline;}

.notesnotes { color: grey; }

.locx { font-weight: bold; }

.verygrey { color: var(--verygrey); }

.imagenumber
{
 font-size: 12px;
 padding: 5px 0 0 0; 
}
       
.image_number
{      
 font-size: 2.2vw;
 margin-top: -8px;
 padding-bottom: 8px;
 color: #666;
}

.pagenav
{
 background-color: #C9EEFF;
 font-size: 11pt;
 text-align: center;
 padding: 0;
 margin: 0 0 8px 0;
}

.thumbpageinfo
{
 text-align: center;
 margin: auto;
 font-size: 2.8vw;
}

.tabletlogo
{
 width: 100%;
 height: auto;
}

.bold
{
 font-weight: bold;
}

a.sidemenu:link
{
 color: var(--lwblue);
 background-color: var(--xgrey);
 text-decoration: none;
 display: block;
}
a.sidemenu:hover
{
 color: #fff;
 background-color: var(--lwltblue);
 text-decoration: none;
 display: block;   
}

.desktopcatbreadcrumbs
{
 font-size: 13px;
 font-weight: normal;
 display: inline-block;
 line-height: 1.1;
}    

.mobilecatbreadcrumbs
{   
 margin: 5px 0 0 0;
 font-size: 13px;
 font-weight: normal;
 display: inline-block;
 line-height: 1;
 /* background-color: yellow; */
}

.whicharea
{  
 font-size: 11px;
 font-weight: normal;
 color: black;
}  

.tbccat
{
 /* font-size: 15px; */
 font-weight: bold;
 color: black;
}

.desktopcatnav
{
 font-size: 12px;
}
.catnavfilling
{
 color: var(--lwgrey);
}   
.mobilecatnavfilling
{
 color: black;
}

.catbottomnavigation
{
 text-align: center;
 font-size: 13px;  
}
.catbottomnavigationarea
{
 background-color: var(--blueback);
}   
.catbottomnavigationseealso
{
 background-color: var(--pinkback);
}

.navigationchevron
{
 vertical-align: baseline;
}

.contact {font-size: 13px; color: #0C4664;}

.showcollections
 {
  margin-top: 2px;
  font-size: 11px;
  /* background-color: #eeffff; */
 }
.mobcolls
{
 font-size: 12px;
 padding: 0 5px 0 5px;
}

.kludge {}
//{
// background-color: #fff;
//}
//.kludge img
//{ 
// //margin: auto;
// margin-left: 30px; 
// display: inline-block;
//}

.showcollectionsbottom
 {
  /* margin-top: 2px;*/
  font-size: 12px;
  padding: 0 5px 0 5px;
 }

.locationleaf
 {
  font-weight: bold;
  color: #E20014;
  cursor: pointer;
 }  

.iconbar
{
 display: inline;
}
.homeiconbar
{
 background-color: red;
 margin: auto;
}
.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;
}
.iconbarline_icon
{
 position: relative;
 width: 30px; /* was 25px; */
 height: auto;
 display: inline;
 /* z-index: 999; */
}       
.iconbarline_icon_mobile
{
 position: relative;
 top: -22px;
 white-space: nowrap; 
 float: right;
 width: 30px;
 height: auto;
 display: inline;
 /* z-index: 999; */
}
.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;'";*/
}
.iconbarpopupmobile
{
 position: absolute;
 left: -45px;
 top: 20px;
 border-width: 0;
 background-color: #BFCFD6;
 padding: 0px;
 z-index: 2;
 visibility: hidden;
}

.catdescbox
{
 font-size: 12px;
 padding: 0 0 0 10px;
}
.catdesctable
{
 padding: 5px 0 5px 0;
}
.catlocality
{
 font-style: italic;
 padding: 0 0 0px 0;
}
.mobcatlocality 
{
 font-style:italic;
 padding: 5px 0 0 0;
}

.alignleft  { float: left; }
.alignright { text-align: right; }
.navstyle
{
 font-size: 12px;
 color: #0C4964;
 background-color: #eeeeee;
 margin: 0 0 5px 0;
 padding: 0 5px 0 5px;
}
    
.disclaimer
{
 font-size: 11px;
 font-style: italic;
 color: #888;
 padding: 0px 15px 10px 0;
} 
          
.ppmenubutton
{
 padding: 3px 0 0 4px;
 display: inline-block;
}

.ppepicon
{
 margin: 6px 0 0 0;
 display: inline-block;   
}  

.variable { display: none; }

.colorqr
{
 filter: invert(15%) sepia(59%) saturate(4010%) hue-rotate(198deg) brightness(92%) contrast(101%);
}

.landscape
{
 display: block; 
 max-width: 100%;
 height: auto;
}

.distance { color: var(--darkred); }
.crowdistance { color: green; }  

.searchbox
{
 background-color: #dddddd;
 font-size: 9pt;
 padding: 5px 0px 10px 0px;
}
.searchinput
{
 font-size: 8pt;
 display: inline;
 margin: 4px 0 0 0;
}             

.slidesearchbox
{
 background-color: var(--lwltback);
 /* background-color: white; */
 font-size: 10pt;
 padding: 5px 0px 10px 0px;
}
.slideinput
{
 display: inline;
 margin: 0px 0 0 30px;
}
.slidetxt
{
 font-size: 10pt;
 margin: 0 0 0 30px;
}   

a.greenlink              { color: green; }
a.greenlink:link         { color: green; }
a.greenlink:visited      { color: green; }
a.greenlink:hover        { color: green; text-decoration: underline;}

.green    { color: green; text-decoration: none; }
.orq      { font-size: 8pt;  color: #DD0000; cursor: help; }

.deskloctophr { margin: 8px 0 0 20px; }
.deskclicktoenquire
{
 padding: 5px 10px 0 20px;
 font-size: 13px;
}
.clicktocopyurl
{
 float: right;
}

.instructions
{
 font-size: 14px;
 //padding: 
}
.smallinstructions
{
 font-size: 13px;
 // padding:
}
.geographical
{
 font-size: 10px;
 background-color: #eeffff;
 display: inline;
}

.noselect
{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

/* end common to all ////////////////////////////////////////////////////////// */



/* MOBILE (start small) /////////////////////////////////////////////////////// */       
.menuline   { background-color: #1B7097; }
.mobile     { display: block; }
.mobindex   { display: block; }
.mobthumbs  { display: block; }      
.midi       { display: none; }       
.midiindex  { display: none; }
.midithumbs { display: none; }  
.desktop    { display: none; }
.minimidi   { display: block; }
#lwlogomobile
{
 margin: 2px 0 3px 0;
 display: block;
}

body
{
 background: #fff;
 color: #000;
}         
//.ihlcol { padding-left:  5px; font-size: 3vw; color: var(--lwblue); }
//.ihrcol { padding-right: 5px; font-size: 12px; font-style: italic; }

.mobileiconbarline
{
 width: 100%;
 margin: auto;
 padding: 5px 0 5px 0;
}   
.mobileiconbarlineicon
{  
 width: 30px; /* was 25px */
 height: auto;
}             

.mobiletopcatnav
{
 font-size: 13px;
}

.mobileiconbarfloat
{
 float: right;
}
.mobileiconbar
{
 /* float: right; */
 width: 20px;
 height: auto;
}
.mobiledetails
{
 margin: 5px 0 5px 0;
 padding: 0 10px 0 10px;
 text-align: center; 
 /* font-size: 2.2vw; */
 font-size: 13px;
}
.mobilecommentline
{
 padding: 0 10px 0 10px;
 font-size: 13px;  
 background-color: var(--postit);
 text-align: center;
}
.locality
{
 font-style: italic;
 font-size: 13px;
}
.portrait
{
 display: block;
 height: 400px;
 width: auto;
}
      
.indexbox
{
 padding: 0 0 0px 10px;
 font-size: 13px;
}
   
.mobcatheadernav
{   
 display: none;
} 
.mobcatheadernav2
{      
 background-color: var(--blueback);
 display: block;
}

.paddingright { padding-right: 0px; }


/* DESKTOP - larger than 850px /////////////////////////////////////////////// */ 
@media screen and (min-width: 850px)
{
   body
   {
    background: #ffffff url(/grafix/frontpage/background-grad.png) repeat-x;
    font-family: 'Open Sans', sans-serif;
    color: #000000;
   }
   .desktop
   {
    display: block;
    max-width: 1000px;
    margin: 0px auto;
    background-color: #fff; 
    font-size: 13px;
   }
   .mobile
   {
    display: none;
   }
   .columnlogo
   {
    max-width: 100%;
    height: auto;
   }
   .privatesidemenu
   {
    text-align: center;
    margin: 10px 0 0 0;
    font-size: 13px;
   }
   .ppindexheader
   {
    background-color: #fff;
    padding: 10px 15px 10px 20px;
   }
   .ppindexpagename
   { 
    color: var(--lwblue);
    font-size: 16px;
    font-weight: bold;
   }
   .ppindexcolumn2
   {
    padding: 10px 15px 0 20px;     
   }  
   .ppmapindexcolumn2
   {
    padding: 0px 15px 0 20px;     
   }
   .pplocpagecol2
   {
    margin: 10px 0px 0 15px;     
   }
   .preface
   {
    margin: 0 0 10px 0;
    font-size: 13.5px;
    font-style: normal;
    font-style: italic;
    background-color: var(--postit);
    text-align: left;
   }    
   .indexbox
   {
    padding: 0 0 5px 10px;
    font-size: 13px;
   }
   .indexcommentline
   {      
    padding: 5px 10px 0 10px;
    font-size: 13px;  
    background-color: var(--postit);
    text-align: left;
   }
   .deskdetails
   {
    /* background-color: #eee; */
    padding: 0 15px 0 10px;
    font-size: 13px;
   }
   .desktopsummary
   {
    background-color: #eee;
    /* padding: 0 15px 0 10px; */
    /* margin: 0 15px 0 10px;  */
    height: 100%;     
   }   
   .desktopsummarydata
   {
    height: 100%;     
   } 
   .locality
   {
    font-style: italic;
    font-size: 13px;
   }
   .deskcommentline
   {
    margin: 10px 0 0 0;
    padding: 0 5px 0 5px;
    font-size: 13px;  
    background-color: var(--postit);
   }
   .agentnotes
   {
    color: var(--lwgrey);
   }
   .DTpagenav
   {
    float: right;
    /* background-color: none; */
   }      
   .portrait
   {
    display: block;
    /* height: 210px; */
    height: 330px;
    width: auto;
   }        
   .locportrait
   {
    display: block;
    height: 210px;
    width: auto;
   }           
   .desktopportrait
   {
    display: block;
    height: 200px;
    width: auto;
   }     
   .desktoplandscape
   {
    display: block; 
    max-width: 100%;
    height: auto;
   }
   .desktopdisclaimer
   {
    padding: 0 0 0 20px;
   }
}

/*  DESKTOP larger two - larger than 925px ///////////////////////////////////////////////// */
@media screen and (min-width: 925px)
{    
   .portrait
   {
    display: block;
    height: 362px;
    width: auto;
   }                
   .desktopportrait
   {
    display: block;
    height: 230px;
    width: auto;
   }       
   .locportrait
   {
    display: block;
    height: 230px;
    width: auto;
   }
}     

/*  DESKTOP larger three - larger than 999px ///////////////////////////////////////////////// */
@media screen and (min-width: 999px)
{    
   .portrait
   {
    display: block;
    height: 400px;
    width: auto;
   }                  
   .desktopportrait
   {
    display: block;
    height: 260px;
    width: auto;
   }
   .locportrait
   {
    display: block;
    height: 260px;
    width: auto;
   }
}