/**
 *                 ________  __      __  _________
 *                 \______ \/  \    /  \/   _____/
 *                   |    |  \   \/\/   /\_____  \ 
 *                   |    `   \        / /        \
 *                  /_______  /\__/\  / /_______  /
 *                          \/      \/          \/ 
 *             WMS - Website Management Software (c) 2022
 *                      by Direct Web Solutions
 * 
 * Default stylesheets
 *
 *   Edit this sheet to add your own user defined styles to build your templates
 *   on. You can also use bootstrap styles instead of these templates with the
 *   bootstrap addon module to build bootstrap templates instead.
 *
 *   Table of Contents:
 * -----------------------------------------------------------------------------
 *
 *   1) Basic layout items
 *   2) Login styling for prebuilt login boxes
 *   3) Header
 *   4) Navigation
 *   5) Main
 *   6) Footer
 *
 * -----------------------------------------------------------------------------
 * @category    User Defined
 * @package     WMS User Website
 * @license     https://www.directwebsolutions.ca/wms/v3/license 3.0+ License
 * @version     Release: 3.0.0
 */

/*  
    1). Basic layout items 
*/
html,body{padding:0;margin:0;color:#222;background:#EEE;font-family:'Open Sans',sans-serif;font-size:14px;font-weight:400;}
.clear, .clearfix{clear:both;}

/*  
    2). Small Login Box
*/
.small_login_box{max-width:300px;border:1px solid #444;padding:0 12px;}
.small_login_box .input_row{width:100%;box-sizing:border-box;padding:12px 0;}
.small_login_box .input_row .row_title{padding-bottom:5px;}
.small_login_box .input_row .input{font-size:16px;width:100%;box-sizing:border-box;}
.small_login_box .input_row .input input[type="text"],
.small_login_box .input_row .input input[type="password"]{font-size:16px;width:100%;box-sizing:border-box;padding:10px;border:1px solid #888;outline:0;border-radius:4px;}
.small_login_box .input_row .input label{cursor:pointer;padding-left:10px;}
.small_login_box .login_button{appearance:none;background-color:#FAFBFC;border:1px solid rgba(27,31,35,0.15);border-radius:6px;box-shadow:rgba(27,31,35,0.04) 0 1px 0,rgba(255,255,255,0.25) 0 1px 0 inset;box-sizing:border-box;color:#24292E;cursor:pointer;display:inline-block;font-family:-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";font-size:16px;font-weight:500;line-height:20px;list-style:none;padding:6px 16px;position:relative;transition:background-color 0.2s cubic-bezier(0.3,0,0.5,1);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:manipulation;vertical-align:middle;white-space:nowrap;word-wrap:break-word;}
.small_login_box .login_button:hover{background-color:#F3F4F6;text-decoration:none;transition-duration:0.1s;}
.small_login_box .login_button:disabled{background-color:#FAFBFC;border-color:rgba(27,31,35,0.15);color:#959DA5;cursor:default;}
.small_login_box .login_button:active{background-color:#EDEFF2;box-shadow:rgba(225,228,232,0.2) 0 1px 0 inset;transition:none 0s;}
.small_login_box .login_button:focus{outline:1px transparent;}
.small_login_box .login_button:before{display:none;}
.small_login_box .login_button:-webkit-details-marker{display:none;}

/*  
    3). Header
*/
header{display:block;max-width:900px;margin:20px auto 0;width:100%;background:#222;position:relative;}
header #head{display:block;background:#222;padding:20px;color:#fff;}
header #logo{font-size:30px;font-weight:800;}
header #logo a{text-decoration:none;color:#fff;transition:200ms all;}
header #logo a:hover{text-decoration:none;color:#ccc;transition:200ms all;}
header #navbits{display:block;padding:5px 20px;margin:0 20px;font-size:11px;background:#fff;}
header #navbits ul{list-style:none;margin:0;padding:0;text-transform:uppercase;color:#222;}
header #navbits ul:before{position:relative;content:"NAV:";float:left;padding-right:10px;}
header #navbits a{text-decoration:none;color:#222;transition:200ms all;}
/*  
    4). Navigation
*/
navigation{position:absolute;right:20px;top:20px;}
navigation ul{list-style:none;padding:0;margin:0;}
navigation ul li{float:left;font-size:16px;padding-left:8px;margin-left:8px;border-left:1px solid #555;}
navigation ul li:first-of-type{border-left:none;padding-left:0;margin-left:0;}
navigation ul li a{color:#fff;text-decoration:none;transition:200ms all;}
navigation ul li a:hover{color:#99ccff;transition:200ms all;}

/*  
    5). Main
*/
main{display:block;max-width:900px;margin:0 auto;width:100%;background:#fff;padding-bottom:20px;}
main h1{padding:20px;margin:0;}
main p{padding:0 20px;margin:0;line-height:1.3em;}
main #login-box{margin:10px 20px;border:1px solid #ccc;padding:20px;}
main #login-box p{padding:0;margin:0;line-height:1.3em;padding-bottom:20px;}
#sql-template{display:block;max-width:900px;margin:20px auto 0;width:100%;background:#ccc;}
#sql-template p{padding:20px;margin:0;line-height:1.3em;}
main a{color:#004d99;text-decoration:none;transition:200ms all;}
main a:hover{color:#99ccff;transition:200ms all;}

/*  
    6). Footer
*/
footer #copyright{font-size:12px;color:#777;text-align:center;padding-top:10px;}
footer #powered-by,footer #debug{font-size:11px;text-align:center;color:#888;}
footer #debug{padding-bottom:20px;}
footer a{color:#004d99;text-decoration:none;}
footer a:hover{text-decoration:underline;}