/* action buttons on front page --------------------------------------------------------------------*/
        .topbutton, .bottombutton {
          /*action buttons*/
          padding: 2% 1% 1%;
          margin-right: 2px;
          height: 46px;
          float: left;
          text-align: center;
          border-radius: 3px;
          line-height: 1.1em;
        }
        .bottombutton {
          width:47.75%;
        }
        .topbutton {
         width: 31%;
        }
         a.topbutton:hover a.bottombutton:hover {
           color: white; 
        } 
        
        .topbutton:last-of-type, .bottombutton:last-of-type {
          margin-right:0;
        }
        .linkname small {
          opacity:.8;
        }
        #action-divs-half .linkname {
          float: left;
          width: 100%;
          clear: both;
          font-size: 1.1em;
          position:relative;
          top:7px;
        }
        .topbutton:focus span, .bottombutton:focus span {
          border-bottom:2px solid #fff;
        }
        #action-divs-half .icons {
          opacity: .15;
          font-size: 2.5em;
          z-index: 2;
          float: left;
          position: relative;
          top: -.5em;
          left: 5px;
          clear: both;
        }
        #action-divs-half .glyphicon-list-alt {
          position:relative;
          top:-.9em;
        }
        #bottombuttons {
          width:100%;clear:both;padding-top:2px;}

/* ribbon of action buttons on front page --------------------------------------------------------------------*/
            
        .bottombutton:hover, .bottombutton:focus {
             background-color: #c5de21;
             
             }
    
             .icons  {
             line-height: 1;
             }
    
            #action-divs-half .linkname {
             display: block;
             clear: none;
             font-size: 1.1em;
             }
    
            #action-divs-half #frontpghourscontainer {
             display: none;
             }
                                         
  /* action buttons front page: width, .icons etc specified in -normal.css, -narrow.css */

        a.topbutton, a.bottombutton {
         color: #fff;
         }

        .topbutton {
         background-color: #214f94;
         }

        .topbutton:hover, .topbutton:focus {
         background-color: #175fca;
         }

        .bottombutton {
         background-color:#115B63;
         }
 /* Media Query action buttons on front page --------------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
      html {
            max-width: 100%;
          }
          
        .topbutton, .bottombutton {
          width: 95%;
          padding: 10px;
          height: 40px;
          display: block;
          text-align: center;
          border-radius: 3px;
          margin: 2px auto;
          width: 100%;
  }
        #action-divs-half .linkname {
          display: block;
          clear: none;
          font-size: 1.1em;
        }
        #action-divs-half .icons {
          display: none;
        }
    }