:root
{
 --lwblue:      #0C4964;
 --lwltblue:    #3C7994;
 --menublue:    #A9E5FF;
 --postit:      #fff9dd;
 --lwgrey:      #999;
 --lightergrey: #aaa;
 --verygrey:    #bbb;
 --xgrey:       #eee;
 --darkred:     #ab0000;
 --reddish:     #cf3d29;
 --redback:     #ffd3d3;
}

.slidenav
{
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: var(--lwblue);
 overflow-x: hidden;
 transition: 0.3s;
 padding-top: 60px;
}

.slidenav hr
{
 background-color: var(--menublue);
}

.slidenav a
{
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 16px;
 color: var(--menublue);
 display: block;
 transition: 0.1s;
 overflow: hidden;
}       

.slidenavtop a
{
 padding: 6px 8px 8px 32px;
 text-decoration: none;
 font-size: 13px;
 font-weight: normal;
 color: var(--menublue);
 display: block;
 transition: 0.1s;
 overflow: hidden;
}

.slidenav a:hover
{
 color: #fff;
 font-weight: bold;
}

.slidenav .closebtn
{
 position: absolute;
 top: 0;
 right: 25px;
 font-size: 36px;
 margin-left: 50px;
 color: var(--menublue);
 cursor: pointer;
} 

.closebtn:hover
{
 color: #fff;
}

.slidemenuitem
{
 padding: 8px 8px 8px 32px;
 color: var(--lwgrey); 
 display: block;
}

#slidemodallink
{
 font-size: 13px;
 //font-style: italic;
 color: #777;
 //padding: 0px 0 0 0px; 
 //display: inline;   
}
#slidemodallink:hover
{
 font-weight: normal;
 color: black;
 background-color: #eee;
 text-decoration: none;
}

.slidejobno
{
 font-size: 13px !important;
 padding: 8px 8px 8px 32px;
 color: var(--lightergrey); 
 display: block;
}

.sLupdate
{
 display: none;
 color: white;
 margin: 5px 0 0 0;
 padding: 0 0 0 32px;
 background-color: var(--candyred);
 cursor: pointer;
 margin-bottom: 5px;
}    

.slidevisited
{
 font-size: 12px;
 line-height: 12px;
}
.slidevisited a
{
 padding: 0 0 0px 32px;
 text-decoration: none;
 font-size: 12px;
 line-height: 12px !important;
 color: var(--menublue);
 display: block;
}
.slidevisited a:hover
{
 text-decoration: none;
 color: white;
 font-weight: bold;
}

.slideviewed
{
 color: var(--menublue);
 font-size: 13px;
 padding: 0 0 0 32px;  
}
.slidevisitedhr
{
 margin: 10px 15px 20px 32px; 
}

/* SLIDE HISTORY */
.slidehistory 
{
 color: var(--menublue);
 font-size: 16px;
 padding: 0 0 0 5px;
 vertical-align: middle;
 cursor: pointer;
}
.slideicon  
{
 vertical-align: middle;
 padding: 0 5px 0 32px; 
 cursor: pointer;  
}
.slidehistory:hover
{
 color: white;
 font-weight: bold;
}
img.slidehistory
{
 vertical-align: middle;
 padding: 0 5px 0 0;   
}

/*  SLIDE MENU SHARE */
.sLshare
{
 background: none !important;
 width: 100%;
 text-align: left;
 border: none;
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 16px;
 color: var(--menublue);
 display: block;
 transition: 0.1s;
 overflow: hidden;
}
.sLshare:hover { color: #fff; }        
.sLsharehighlight
{
 /* background: none !important; */ 
 width: 100%; 
 text-align: left;
 background-color: var(--reddish);
 border: none;
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 16px;
 color: #fff;
 display: block;
 transition: 0.1s;
 overflow: hidden;
}

/*  SLIDE MENU SHARE */
.sLhelp
{
 text-align: left;
 background: none !important;
 border: none;
 height: 32px;
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 16px;
 color: var(--menublue);
 display: block;
 transition: 0.1s;
 overflow: hidden;
}
.sLhelp:hover { color: #fff; }
      
.sLbutton
{
 text-align: left;
 background: none !important;
 border: none;
 height: 40px;
 padding: 0 0 0 32px;
 text-decoration: none;
 font-size: 16px;
 color: var(--menublue);
 display: block;
 transition: 0.1s;
 overflow: hidden;
}
.sLbutton:hover
{
 color: #fff;
 font-weight: bold;
}

@media screen and (max-height: 450px) {
  .slidenav {padding-top: 15px;}
  .slidenav a {font-size: 18px;}
}