﻿
/*----------------
    Base Theme
-----------------*/

html {
   background-color: #fff;
  font-family: Calibri;
}

body {
    color:#001C3E;
    font-family: Calibri;
}

a {
    color: #001C3E;
    outline: none;
}

a:link, a:visited,
a:active, a:hover {
    color: #001C3E;
}

a:hover {

}

.logo-container
{
    display:inline-block;
    margin-right:60px;
}

    @media  (max-width: 480px) {
     .logo-container
        {
            padding-top:15px;
        }
    }
a.logo
{
     background:url("images/logo.png") no-repeat 0% 0%;
     min-height:80px;
     width:100%; /* Of its container */
     display:inline-block;
}

.login-background{
    background:url("images/background1.png") no-repeat 0% 0%;
    background-size:100% 100%;
    height:100%;
    width:100%;
}


/*----------------
Header
------------------*/

.navbar-default
{
    background:#fff;
    border:0;
    border-radius:unset;
}

.navbar-nav li, .navbar-nav li a 
{
    color:#001C3E;
    padding:4px;
}

.navbar-default a
{
    color:#001C3E;
    font-weight:600;
    font-size:1.3em;
}

.navbar-nav li{
    margin:1px;
    border:2px solid #fff;
}

.navbar-default li.active a
{
    background:#fff;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus
{
    background:#fff;
    color:#001C3E;
    border-bottom:2px solid #111;
}

.navbar-collapse
{
    position: relative;
    z-index: 10; 
    background: #fff;
    padding-bottom:4em;
}

.navbar-toggle
{
    position:absolute;
    top:-60px;
    right:0;
    background:#fff;
}

.navbar-header{
     float:left;
}


/*------------------
    Containers
---------------------*/

.container
{
    background:#fff;
}


/*----------------
    Banners
-----------------*/

.banner{
    min-height:200px;
}

.banner img {
      min-width: 100%;
    max-height: 100%;
    height: 100%;
}

/*----------------------
    Login Box
---------------------*/

.login-box{
   
}

.login-box .header{
   /* border-bottom:1px solid #082848;*/
}

.login-box .content{
 background:#fff;
}

.login-box input[type=checkbox]{
   
}

.login-box .footer{

    background:#082848;
    color:#fff;
}
.login-box .footer a{
    /*margin-top:6px;*/
    display:inline-block;
    color:#fff;
}


/*-----------------------------
    Login box group addon
----------------------------*/

.login-box .input-group-addon {
    background-color:#082848;
   border:1px solid #082848;
   border-radius:0;
}

.login-box .input-group-addon, .login-box .form-control {
   border:1px solid #082848;
   border-radius:0;
}

.input-group-addon.user {
    background-image:url("images/icons/user_icon_small.png");
    background-repeat: no-repeat;
    background-position:50% 50%;
}

.input-group-addon.password {
    background-image:url("images/icons/password_icon_small.png");
    background-repeat: no-repeat;
    background-position:50% 50%;
}

/*----------------
    Overlays
------------------*/

.white-overlay
{
    background:rgba(255,255,255, 0.7);
    width:100%;
    height:100%
}

.background-grey{
    background:#F3F2F2;
}

/*-----------------
    Portals
-----------------*/

.header{
   height:140px; 
   min-height:140px;
}
    @media (max-width: 320px) {
        .header{
           height:100px; 
           min-height:100px;
        }
    }
    @media (min-width: 321px) and (max-width: 480px) {
          .header{
           height:120px; 
           min-height:120px;
        }
    }

.container-full
{
    width:100%;
}

.header-bar
{
    height:40px;
    width:100%;
    background:#FFCD00;
    text-align:right;
}


/*---------------
    Form / Buttons
---------------*/
.btn{
    border:0;
    border-radius:unset;
    color:#fff;
}

.btn-primary{
    background:#5C6B7A;
}

.btn-default{
    background:#5C6B7A;
}

.btn-grey{
    background:#E8E8E8 !important;
    border:1px solid #A6A6A6;
    color:#111;
}
.btn-inline{
    display:inline-block !important;
}

button.btn, 
html input[type="button"].btn, 
input[type="reset"].btn, 
input[type="submit"].btn
{
  border:0;
  border-radius:unset;
}

button.btn-red, 
html input[type="button"].btn-red, 
input[type="reset"].btn-red, 
input[type="submit"].btn-red
{
    background:#D35400;
    color:#F1C40F;
}

.btn-launch{
    background:url("../base/images/icons/launch.png") no-repeat 100% 0%;
    padding-right:50px;
    text-transform:none;
    font-size:18px;
}

.btn-launch:hover{
 
}

.email-icon{
    background:url("../base/images/email.png") no-repeat 50% 50%;
    background-size: 34px 26px;
    width:34px;
    height:26px;
    display:block;
}

.email-icon:hover{
  
    background-size: 36px 28px;
    width:36px;
    height:28px;
    display:block;
}

.printer-icon{
     background:url("../base/images/printer.png") no-repeat 50% 50%;
     background-size: 36px 32px;
    width:36px;
    display:block;
     height:32px;
}

.printer-icon:hover{
    background-size: 38px 34px;
    width:38px;
    display:block;
    height:34px;
}

.certificate-icon{
     background:url("../base/images/certificate_orange.png") no-repeat 50% 50%;
    background-size: 30px 34px;
    width:30px;
    margin:0 auto;
    display:block;
    height:32px;
}

.certificate-icon:hover {
     background:url("../base/images/certificate_orange.png") no-repeat 50% 50%;
    background-size: 32px 36px;
    width:32px;
    height:36px;
}


/*---------------------
    Validation Error
---------------------*/

.validation-error, .validation-summary-errors {
    display: block;
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}

.validation-summary-errors ul {
    margin: 0;
    padding: 0;
    list-style:none;
}

.validation-summary-errors li {
    display: inline-block;
    list-style: none;
    margin: 0;
}


/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-valid {
    display: none;
}


/*----------------
    Contact
-------------------*/
.contact h3 {
    font-size: 1.2em;
}

.contact p {
    margin: 5px 0 0 10px;
}

.contact iframe {
    border: 1px solid #333;
    margin: 5px 0 0 10px;
}

/*-----------------
    Forms
--------------------*/

.media {
 
}

.btn {

}

.btn:hover, .btn:focus, .btn.focus {
    text-decoration: none;
}


.media-heading {
    display:block;
}

.media-body-item, .media-body-learning {
    float:left;
    display:inline;
    width:70%;
}

.media-body-resource {
    float:left;
    display:inline;
    width:100%;
}

.media-body textarea {
    width:98%; 
    margin:0 auto;
    min-height:4em;
    _height:4em;
}

.media-alternatebg {
    background:#fff;
    padding-bottom:5px;
    border-bottom:2px solid #ccc;
}

.btn-toolbar {
    float:right;
}

.media-controls {
    float:left;
    display:inline;
}


.sub-menu {
    padding:0 !important;
    margin:0 !important;
margin-left:10px;
    list-style-position:outside !important;
}

.sub-menu li{
    list-style-type:none !important;
    padding:0 !important;
    margin:0 !important;
   list-style-position:outside !important;
}

.sub-menu li a{
    display:block;
}

/*----------------
    Status Colours 
------------------*/

.status-notstarted
{

}

.status-completed
{
    background:#00B807 !important;
}

.status-started
{
    background:#E67607 !important;
}


/**
 * Simple fade transition,
 */
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}