Template:OLS Canmore Canada


<style> /* Define the body style */ body { 

   font-family: sans-serif;
   font-size:20px;

margin:0; margin-left: 100px; margin-top: 0px; background-color: white; }

  1. logospacer {

height: 25.961%; width: 100px; margin-bottom: 0; margin-top: 0; }

  1. logospacer img {

position: fixed; max-height: 87px; max-width: 87px; width: auto; height: auto; margin-bottom: 0; margin-top: 0; top: 52px; left: 6px; } .circle { border-radius: 50%; width: 130px; height: 130px; background-color: white;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

position: fixed; top: 30px; left: -15px; /* width and height can be anything, as long as they're equal */ }

  1. menuwrapper {

font-size: 20px; height: 100%; top:0; position: fixed; left:0; background-color:#262626;

} /* We remove the margin, padding, and list style of UL and LI components */

  1. menuwrapper ul, #menuwrapper ul li{
   margin:0;

margin-left:0px; 

   padding:0;
   list-style:none;

transition: 0.2s;

}

  1. menuwrapper ul li ul{

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }


/* We apply background color and border bottom white and width to 150px */

  1. menuwrapper ul li {
   background-color:#262626;
   border-bottom: 1px solid white;

   width:81.5px;

height:10.557%; 

   cursor:pointer;

color: white;


}

  1. menuwrapper ul li a {

vertical-align: middle; height: 100%; line-height: 100%; }

/* We apply the background hover color when user hover the mouse over of the li component */

  1. menuwrapper ul li:hover{
   background-color:#d31919;

color: #454444; 

   position:relative;

}

/* We apply the link style */

  1. menuwrapper ul li a{
   padding:5px 15px;
   color:#ffffff;
   display:inline-block;
   text-decoration:none;

vertical-align: middle; margin-top: 13%; maring-bottom: 10%; }

/**** SECOND LEVEL MENU ****/ /* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */

  1. menuwrapper ul li ul{
   position:absolute;
   display:none;

}

  1. menuwrapper ul li img{
   max-width:70%;

max-height:70%; width: auto; height: auto; margin-left: auto; margin-right: auto; display: flex;

}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width. */

  1. menuwrapper ul li:hover ul{
   left:81.5px;
   top:0px;
   display:block;

}

/* we apply different background color to 2nd level menu items*/

  1. menuwrapper ul li ul li{
   background-color:#262626;

width: 165px; } /*menu header*/

  1. menuwrapper ul li ul p{
   background-color:#262626;

color:white; border-bottom:solid 1px white; font-weight: bold; 

   display:inline-block;

cursor:default; margin:0px; font-size: 20px; padding-left: 15px; padding-top: 5px; height:29.2px; width: 150px; }

/* We change the background color for the level 2 submenu when hovering the menu */

  1. menuwrapper ul li:hover ul li:hover{
   background-color:#d31919;

} /* We style the color of level 2 links */

  1. menuwrapper ul li ul li a{
   color:white;
   display:inline-block;
   width:120px;

margin:0; }

  1. menuwrapper ul li ul a:hover{

color:#ffffff; transition: 0.3s; }

/**** THIRD LEVEL MENU ****/ /* We need to hide the 3rd menu, when hovering the first level menu */

  1. menuwrapper ul li:hover ul li ul{
   position:absolute;
   display:none;

}

/* We show the third level menu only when they hover the second level menu parent */

  1. menuwrapper ul li:hover ul li:hover ul{
   display:block;
   left:150px;
   top:0;

}

/* We change the background color for the level 3 submenu*/

  1. menuwrapper ul li:hover ul li:hover ul li{
   background:#86d3fa;

}

/* We change the background color for the level 3 submenu when hovering the menu */

  1. menuwrapper ul li:hover ul li:hover ul li:hover{
   background:#358ebc;

}

/* We change the level 3 link color */

  1. menuwrapper ul li:hover ul li:hover ul li a{
   color:#ffffff;

}

/* Clear float */ .clear{ 

   clear:both;

} </style>