/* GLOBAL
***********************************************/
html { height: 100%; width: 100%; }
.clear { clear: both; }
a { text-decoration: none; margin: 0px; padding: 0px; }
body { font-size: 16px; height: 100%; width: 100%; background: URL("/Content/images/template/body-background.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
body.olive-background { font-size: 16px; height: 100%; width: 100%; background: URL("/Content/images/template/barambah-olives-bkng.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.btn, .btn-green, .btn-grey { display: block; margin: 0px; background: #0054a5; padding: 7px 18px; color: #fff;  font: 0.9em 'Open Sans', 'Tahoma'; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 700; border: 1px solid #fff; -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15); box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);  }
.btn-green { background: #00cc33; }
.btn-grey { background: #333; }
.btn span { font-weight: 400; font-size: 0.9em; display: block; font-style: italic; text-transform: none; margin-bottom: -3px; letter-spacing: normal; }
.btn img { padding-top: 2px; padding-left: 3px; width: 9px; height: 12px; }
.btn:hover { background: #006; }

/* TEMPLATE
***********************************************/
@media all {
    /* Header */
    #header-container { height: 120px; width: 100%; position: relative; background: #0054a5; z-index: 1000; }

    .logo-login { position: absolute; top: 0%; left: 50%; margin-top: 35px; margin-left: -100px;  }
    .logo-admin { position: absolute; top: 10px; left: 10px;   }
    .logo-login img { width: 200px; }

    .logo { position: absolute; top: 10px; left: 10px;   }
    .logo img, .logo-admin img  { width: 135px; }


    .header-container-inner { width: 40%; float: right; padding-right: 20px }
    #header-container.admin-header-container .header-container-inner { width: 100%; }

    .hci-top { text-align: right; height: 20px; padding: 5px 10px; }
    .hci-top li { display: inline-block; font: 0.8em 'Open Sans', 'Tahoma'; color: #fff; font-weight: 600;  }
    .hci-top li:first-child { padding-right: 10px; border-right: 1px solid #6699cc; }
    .hci-top li a { font-weight: 700; color: #6699cc; padding-left: 5px;  }

    .hci-navigation { height: 90px; }
    .hci-navigation ul { float: right; min-height: 90px; }
    .hci-navigation ul li { float: left; font: 0.8em 'Open Sans', 'Tahoma'; font-weight: 700; padding-left: 30px; max-width: 110px; text-align: center; line-height: 120%;   }
    .hci-navigation ul li a { color: #4d86c0; text-align: center; }
    .hci-navigation ul li a span { width: 40px; height: 50px; overflow: hidden; display: block; margin: 0px auto; margin-top: 5px; }
    .hci-navigation ul li a:hover, .hci-navigation ul li a.selected { color: #fff; }
    .hci-navigation ul li a:hover span img, .hci-navigation ul li a.selected span img { margin-top: -50px;  }
    

    .impersonate { width: 100%; background: rgba(0,0,0,0.7); position: absolute; z-index: 1000000000000000000; text-align: center;  }
    .impersonate a { display: block; width: 100%; font: 0.8em 'Open Sans', 'Tahoma'; font-weight: 700; color: #fff; padding: 7px 10px;  }

    /* Main Container */
    #main-container { display: block; clear: both; width: 100%; height: auto; padding: 10px; margin-bottom: 50px; padding-top: 40px;  position:relative; }
    #admin-main-container { display: block; clear: both; width: 100%; height: auto; padding: 10px; margin-bottom: 50px; padding-top: 40px;  position:relative;  }
    

    /* Footer */
    #footer-container { height: 40px; width: 100%; position: fixed; bottom: 0; background: #0054a5; text-align: right; padding: 10px; padding-right: 20px; z-index: 1000000;  }
    #footer-container li { display: inline-block; font: 0.8em 'Open Sans', 'Tahoma'; color: #fff; font-weight: 500;  }
    #footer-container li:first-child { padding-right: 10px; }
    #footer-container li:last-child { padding-left: 10px; border-left: 1px solid #6699cc; }
    #footer-container.login-footer li:last-child { border-left: 0px; }
    #footer-container li a { font-weight: 700; color: #6699cc; padding-right: 5px;  }

    #footer-container.admin-footer-container li:last-child { border-left: none; }

}

@media all and (max-width: 1200px) {
    .logo, .logo-admin { left: 0px; margin-left: 20px; padding-top: 0px; }
    .logo img, .logo-admin img { width: 135px; }
    .header-container-inner { width: 70%; }
    #main-container { padding-top: 40px;  }
}

@media all and (max-width: 975px) {
    #header-container { height: 120px;}
    .header-container-inner { padding-right: 0px; width: 100%;}
    .hci-top { background: #006; height: 30px;  }
    .hci-navigation { padding-right: 10px;  }
    .logo, .logo-admin { margin-top: 35px; margin-left: 10px; z-index: 3; padding-top: 0px;  }
    .logo img, .logo-admin img { width: 100px;  }
    #main-container { padding-top: 0px; }
}

@media all and (max-width: 800px) {
    #header-container { height: 120px; position: relative; }
    #header-container.login-header { height: 95px; }
    .logo { margin-top: 30px; }
    .logo-login { margin-left: -75px; }
    .logo-login img { width: 150px; }
    .header-container-inner { width: 100%; }

    .hci-navigation-img { background: URL("/content/images/navigation/mobile-menu.png") no-repeat 100% 50%; cursor: pointer; height: 90px; display: block; padding-right: 50px;  }
    .hci-navigation ul { display: none; position: absolute; width: 100%; left: 0; background: #0054a5; border-top: 1px solid #6699cc; top: 120px; min-height: 75px; padding: 3px 0; text-align: right; padding-right: 10px; z-index: 10000000;   }
    .hci-navigation ul li { display: block; float: none; padding-left: 0px; padding: 3px 0; text-align: right; max-width: 100%;  }
    .hci-navigation ul li a { color: #fff; }
    .hci-navigation ul li a span { display: none; }
    
    #main-container { padding-top: 0px;  }
    #admin-main-container { padding-top: 0px; }
    .hci-top span { display: none; }
   
}

@media all and (max-width: 450px) {
   #main-container { margin-bottom: 0px; }
     #footer-container { padding-right: 10px; height: 55px; }
    #footer-container li:first-child { display: block; padding-right: 0px; }
}


/* LOGIN
***********************************************/
@media all {

    #login-container { position: absolute; left: 50%; top: 50%; width: 100%; max-width: 600px; min-width: 200px; min-height: 300px; padding: 20px;  background: #fff; transform: translate(-50%, -50%); border: 1px solid #a4a6a8; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);  }
    #login-container-inner {    }
    #login-container-inner h1 { font: 2em 'Open Sans', 'Tahoma'; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 700; color: #0054a5; display: block; line-height: 100%; margin-bottom: 20px;  }

    /* Public Login */
    #public-login, #admin-login  { display: table; vertical-align: top; }
    #public-login h2, #admin-login h2 { display: inline-block; margin: 0px; padding: 0px; font: 1.2em 'Open Sans', 'Tahoma'; letter-spacing: -0.02em; text-transform: uppercase; font-weight: 300; color: #003333; line-height: 100%; margin-bottom: 10px;  }
    #public-login p, #admin-login p { font: 0.8em 'Open Sans', 'Tahoma'; letter-spacing: -0.02em; font-weight: 400; line-height: 150%; margin-bottom: 9px;   }
    #public-login a.btn { display: inline-block; }

    .mcl-left { display: table-cell; width: 50%; background: URL("/Content/images/template/login-vline.png") no-repeat 100% 50%; padding-right: 20px; vertical-align: top;  }
    .login-form-field { width: 100%; margin-bottom: 3px; font: 0.8em 'Open Sans', 'Tahoma'; letter-spacing: -0.02em; font-weight: 400; line-height: 150%;  } 
    .login-form-field input { width: 100%; font: 1em 'Open Sans', 'Tahoma'; letter-spacing: -0.02em; font-weight: 600; padding: 6px 8px; border: 1px solid #006699;  } 
    .login-form-field input[type="checkbox"] { width: 20px; margin-top: 5px; }
    .login-form-field:last-child { background: #0f0; margin-top: 5px; }
    input.btn { margin-top: 10px; display: block; margin-bottom: 10px; }
    a { color: #6699cc; font-weight: 700; }

    .mcl-right { display: table-cell; width: 50%; padding-left: 20px; vertical-align: top; }

    .login-error {  font: 0.8em 'Open Sans', 'Tahoma'; letter-spacing: -0.02em; font-weight: 600; line-height: 150%; margin-bottom: 9px; color: #c00; }
}

@media all and (max-width: 660px) {
    #login-container { position: relative; left: 0px; top: 0px; transform: none; padding-top: 0px; background: #fff; padding-top: 0px;   }
    #login-container-inner  { height: auto; display:block; width: 95%; padding-top: 80px; margin-bottom: 50px;   }
    #login-container-inner h1 { font-size: 1.4em;}

    .mcl-left, .mcl-right { width: 100%; display: block; padding: 0px; background: none; }
    .mcl-right { margin-top: 20px; }
}