@charset "UTF-8";
/*=============================================================================*/
/*                ** FOREST WALKERS WEBSITE **                                 */
/*                                                                             */
/*     Cascading Style Sheets  CSS                                             */
/*=============================================================================*/ 
/* 31/08/2021 -   Ver 03.00  Support responsive/adaptive design (phone etc.).  */
/*                           Refer to "styleDocument.css".                     */
/*                              The Ver 02 style.css has been split as follows:*/
/*                               1) "style.css" for body and dialogs.          */
/*                               2) "styleHome.css" for Main view.             */
/*                               3) "styleApForm.css" for Application Form view*/
/*                               4) "styleDocument.css" for body Document view */
/* 17/09/2021 -   Ver 03.02  Add h4 to html/body.                              */
/* 01/01/2024 -   Ver 03.03  Set Admin loging UI header background to red.     */
/*                           (Delivered with main ver: 07.01)                  */
/*=============================================================================*/ 
article, aside, footer, header, main, nav, section {
  display: block;
}
html, body, h1, h2, h3, h4, ul, li, a, p, 
article, aside, footer, header, main, nav, section {
  padding: 0;
  margin: 0;
}

html {
 /*------------------------------------------------------------------*/
 /* For background image                                             */
 /*------------------------------------------------------------------*/  
  height: 100%;
  background: url(image/b2.jpg) no-repeat center center fixed; 
  background-size: cover;
}

body {
  max-height: 100%;
  font-family: Helvetica, Arial, sans-serif;
  /*padding-top: 10px; ~~ Not to good with formated text display -- May need to review */
  font-size: 15px;
  margin-left: 2px;
  margin-right: 2px;
}
.separator {                                     /* A very thin separator (row) */
  background-color: white;
  height: 2px;
}
/*====================================================================================*/

/*------------------------------------------------------------------*/
/* Dialogs (popup windows)                                          */
/* See "jqready.js" - Set the Help Dialog box comments.             */
/*------------------------------------------------------------------*/ 
.ui-dialog .ui-dialog-titlebar {
  border:1px;
  font-weight: bold;
  font-size: clamp(0.5vw, 1.2vw, 1.5vw);
  text-align: center;
  color: white;
  background-color:	#5151fb;
  }
  /*------------------------------------------------------------------*/
  /*  For ADMIN login                                                 */
  /*------------------------------------------------------------------*/ 
  .admin .ui-dialog-titlebar {
    background: #cc0000;
}
.ui-dialog .ui-dialog-content {
  border: 0;
  padding: 20px;
  font-size: clamp(0.5vw, 0.8vw, 1vw);
  color:#064185;
  background-color: #9afa09;
  overflow: auto;
  }
/*------------------------------------------------------------------*/
/*  Login Dialog  (specific)                                        */
/*------------------------------------------------------------------*/  
.ui-dialog .ui-dialog-buttonpane {
  border-width: 1px 0 0 0;
  background-image: none;
  margin-top: .5em;
  padding: .3em 1em .5em .4em;
  background-color: #a7b4b4;
  font-size: clamp(0.5vw, 1vw, 1.5vw);
  }
.login-msg {
  font-size: clamp(0.5vw, 0.9vw, 1.2vw);
  font-weight: bold;
  font-style: italic;
  color:#a51414;
}
/*------------------------------------------------------------------*/
/*  Help Dialog  (specific)                                         */
/*------------------------------------------------------------------*/  
#helpDialog {
  background-color: #e0ebeb;
  color: rgb(105, 7, 64);
  padding-left: 4%;
  padding-right: 4%;
}
#version {
  color: navy;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  text-decoration: underline;
}
#supportEmail {
  color: rgb(26, 105, 150);
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

/*==============================================================================*/
/*  5) CSS media queries for responsive layout (laptop / mobile)                 */
/*------------------------------------------------------------------------------*/  
@media screen and (max-width: 1400px) {    /* Apply when screen width is 1400px or less - e.g. Laptop / tablet */
  .ui-dialog .ui-dialog-titlebar {
    font-size: clamp(1vw, 1.3vw, 2vw);
  }  
  .ui-dialog .ui-dialog-content {
    font-size: clamp(1vw, 1.2vw, 1.5vw);
  }
  
  .ui-dialog .ui-dialog-buttonpane {
    font-size: clamp(1vw, 1.2vw, 1.5vw);
  }
  .login-msg {
    font-size: clamp(0.6vw, 1.2vw, 1.6vw);
  }  
}  
/*======================================================================*/
/*   For small devices                                                  */
/*----------------------------------------------------------------------*/ 
@media only screen and (max-width: 576px) {
  .ui-dialog {
    position: absolute;             
    top: 15vh !important;        
    left: 2vw !important;     
  }
  .ui-dialog .ui-dialog-titlebar {
    font-size: clamp(3vw, 3.5vw, 4vw);
  }  
  .ui-dialog .ui-dialog-content {
    font-size: clamp(2vw, 3vw, 3.5vw);
  }
  
  .ui-dialog .ui-dialog-buttonpane {
    font-size: clamp(4vw, 4.5vw, 5vw);
  }
  .login-msg {
    font-size: clamp(2.5vw, 4vw, 3.4vw);
  }  
}
/*==================================================================*/