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;     
	}
                                              
:root
{
 --lwblue:     #0C4964;
 --lwltblue:   #3C7994;
 --postit:     #fff9dd;
 --lwgrey:     #999;
 --verygrey:   #bbb;
 --xgrey:      #eee;
 --darkred:    #ab0000;
 --reddish:    #cf3d29;
 --redback:    #ffd3d3;
}

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); }

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

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

hr {
    border: none;
    height: 1px;
    color: #333;
    background-color: #333;
   }

.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;
}

.preface
{
 margin-top: 0px;
 padding: 0 10px 0 10px;
 font-style: italic;
 font-size: 2.8vw;
 background-color: var(--postit);
 text-align: center;
}

.indextext
{
 font-size: 14px;;
 padding: 0 0 5px 0;
}

.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;     
}

.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;   
}

.updatealerttop
{
 position: fixed;
 width: 300px;
 top: 0;
 left: 50%;
 transform: translateX(-50%);    
 height: 18px;
 text-align: center;
 color: white;
 background-color: var(--darkred);
 padding: 5px 3px 5px 3px;
 font-weight: bold;
 font-size: 12px;
 z-index: 1;
 cursor: pointer;  
 display: none;
}

.updatealertbottom
{
 position: fixed;
 width: 300px;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);    
 height: 18px;
 text-align: center;
 color: white;
 background-color: var(--darkred);
 padding: 5px 3px 5px 3px;
 font-weight: bold;
 font-size: 12px;
 z-index: 1;
 cursor: pointer;  
 display: none;
}

//.desktopupdatealert
//{
// color: white;
// background-color: var(--darkred);
// padding: 5px 5px 5px 5px;
// font-weight: bold;
// cursor: pointer;  
// display: none;
//}  

.iconbar
{
 display: inline;
}
.homeiconbar
{
 background-color: red;
 margin: auto;
}
.iconbar_icon
{
 position: relative;
 display: inline;
 z-index: 0;
}  
.iconbarline_icon
{
 position: relative;
 width: 30px; // was 25px;
 height: auto;
 display: inline;
 //z-index: 999;
}
.iconbarpopup
{
 position: absolute;
 left: -50px;
 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;'";*/
}  
    
.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%);
}

.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 */
}

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

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

/* 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:  10px; font-size: 3vw; color: var(--lwblue); }
.ihrcol { padding-right: 10px; font-size: 12px; font-style: italic; }

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

.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;
}
.mobhiddenlocation
{
 display: block;
 font-size: 11px;
 padding: 2px 0 0 0;
} 
.mobunhiddenlocation
{     
 font-size: 11px;
 display: none;
 padding: 2px 0 0 0;
} 
.mobhiddenalert
{ 
 font-size: 11px;
 color: white;
 background-color: var(--reddish); 
}
.tdhidden
{
 background-color: var(--redback);
}  
.tdunhidden
{
 background-color: #fff;
}  
.paddingright { padding-right: 0px; }

/*  NORMAL MOBILE - larger than 450px */
@media screen and (min-width: 450px)
{                
 .ppmenubutton
 {
  padding-left: 9px;
  cursor: pointer;
 }
 .paddingright { padding-right: 4px; } 
}

/*  MIDI - larger than 599px ///////////////////////////////////////////////// */
@media screen and (min-width: 599px)
{                
 body
 {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  color: #000;
 }
 .mobthumbs  { display: none; }
 .midithumbs { display: block; }             
 .midi       { display: block; }       
 .midiindex  { display: block; }
 .minimidi   { display: block; } 
 .mobile     { display: none; }  
 .mobindex   { display: none; }  
 .desktop    { display: none; }        
 .menuline   { background-color: #1B7097; }   
 .ihlcol { padding-left:  10px; font-size: 18px; color: var(--lwblue);}
 .ihrcol { padding-right: 10px; font-size: 13px; font-style: italic; } 
 .preface
 {
  margin-top: 0px;
  padding: 0 10px 0 10px;
  font-style: italic;
  font-size: 14px;
  background-color: var(--postit);
  text-align: left;
 }
 .indeximg
 {
  max-width: 100%;
  height: auto;
 }
 .thumpagetable table
 {
  width: 100%;  /* !important; */
  height: auto; /* !important; */
 }    
 .hozmenu  { font-size: 14px; }
 .indextext
 {
  font-size: 14px;
 }       
 .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;
 } 
 .indexnotes
 {
  font-size: 13px;
 } 
 .imagenumber
 {
  font-size: 12px;
  margin: -5px 0 0px 0;    
 }
 .image_number
 {      
  font-size: 12px;
  margin-top: -8px;
  padding-bottom: 8px;
  color: #666;
 }
 .midiloc
 {
  padding: 7px 0 0 0;
 }   
 .midiloc img.landscape
 {
  display: block;
  width: 100%;
  height: auto;
 }
 .midiloc img.portrait
 {     
  max-height: 330px;  
  width: auto;
  height: 100%;
 }
 .mididetails
 {
  margin: 0 0 20px 10px;
  font-size: 13px;  
 }  
 .midicommentline
 {
  padding: 0 10px 0 10px;
  font-size: 13px;
  background-color: var(--postit);
 }   
 .locality
 {
  font-style: italic;
  font-size: 13px;
 }
 .topright
 {
  display: inline-block;
  float: right;
  vertical-align: top;
 }  
 .portrait
 {
  display: block;
  height: 280px;
  width: auto;
 }   
 .midihiddenlocation
 {
  display: block;
  font-size: 11px;
  padding: 0 0 4px 0;
 } 
 .midiunhiddenlocation
 {     
  font-size: 11px;
  display: none;
  padding: 0 0 4px 0;
 }
 .midihiddenalert
 { 
  font-size: 11px;
  color: white;
  background-color: var(--reddish); 
 }
} 

/*  MIDI larger one - larger than 669px ///////////////////////////////////////////////// */
@media screen and (min-width: 669px)
{    
 .portrait
 {
  display: block;
  height: 321px;
  width: auto;
 }
}    

/*  MIDI larger two - larger than 749px ///////////////////////////////////////////////// */
@media screen and (min-width: 749px)
{    
 .portrait
 {
  display: block;
  height: 359px;
  width: auto;
 }
}

/* 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; }
 .mobindex  { display: none; }
 .midi      { display: none; }      
 .midiindex { display: none; }
 .minimidi  { 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 15px 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;
 }
}