/*  Title
**************************************************************

Theme: DSDPortal-WorkReady
Author: Allen Smith

Description: This style sheet is to be used to add customisations/modificfations to the Root DSD Portal theme for your custom application.

----
NOTE: If changing the colour palette please add the colours in the section below.
----

*/


/*  Color Palette
**************************************************************

Background: #FFFFFF
Background-Header: #007DB3
Background-Navbar: #FFFFFF
Background-Footer: #393e47
Underline (Border-Bottom): #B7D433
Text-White: #FFFFFF
Text-Grey: #1b1b1b
Links-Blue: #0076CC
Links-Blue Hover: #004A7F

*/


/*  Custom App Styles
    (Override exisiting styles below)
**************************************************************/

/* Custom fonts
**************************************************************
**************************************************************/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);


/* General
**************************************************************
**************************************************************/

/* background image for the header */
html {
	background-image: url(/Themes/DSD.Theme.WorkReady/Content/background.png);
	background-repeat: no-repeat;
	background-size: 100% 310px;
	overflow-x: hidden;
}
	/* change background image size for large screens */
	/* 1024px and larger */
	@media (min-device-width: 1024px) {
		html {
			background-size: 100% 190px;
		}
	}

	/* change background image size for mobile */
	/* iPad and smaller */
	@media (max-device-width: 768px) {
		html {
			background-size: 100% 310px;
		}
	}
	
	/* iPhone 6 and smaller */
	@media (max-device-width: 414px) {
		html {
			background-size: 100% 175px;
		}
	}
	


#body {
    margin-top: 0;
    margin-bottom: 80px;
	background: #ffffff;
}

.corporate {
	background-color: transparent;
	width: 100%;
}

/* Text */
h1 {
	border-bottom: 1px solid #b7d433;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 2.0em;
    font-weight: 100;
	color: #54565b;
}
h2 {
    border-bottom: none;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1.8em;
    font-weight: 100;
	color: #54565b;
}
h3 {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1.75em;
    font-weight: 100;
	color: #54565b;
}
h4 {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    font-weight: 100;
	color: #54565b;
}
h5 {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1.125em;
    font-weight: 100;
	color: #54565b;
}
p {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    font-weight: 100;
    color: #1b1b1b;
}
a {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    font-weight: 100;
    color: #007db3;
}
a:hover {
    color: #0087c7;
}


/* Portal header 
**************************************************************
**************************************************************/

.header-container {
    border-bottom: none;
    background-color: transparent;
}

/* User actions button and menu */
.user-actions {
    border: 1px solid #999;
}
.user-actions-close {
    background-color: #777;
}


/* Sign in buton */
.user-sign-in a {
    background: white;
    color: #0d660f;
}


/* Site header 
**************************************************************
**************************************************************/

.site-title-container {
    background-color: transparent;
}
	/*set background green for large screens */
	@media (min-device-width: 1024px) {
		.site-title-container {
			background-color: #0d660f;
			pointer-events: none;
		}
	}

	/* set background to green */
	/* iPhone 6 (Horizontal) and below */
	@media (max-device-width: 736px) {
		.site-title-container {
			background-color: #0d660f;
		}
	}

.site-title {
    color: #0d660f;
}
.site-title a {
    color: #0d660f;
}

/* Title image */
/* (This image is injected using jquery script on the page itself) */
#SEImg {
    width: 300px;
}

	/*iPhone 6 and below */
	@media (max-device-width: 414px) {
		#SEImg {
			width: 80%;
		}
	}


/* Site navigation bar
**************************************************************
**************************************************************/

	/*1024px screens and above */
	@media (min-device-width: 1024px) {
		nav {
			position: absolute;
			top: 44px;
			left: 175px;
			border: none;
			z-index: 1;
		}
	}
	
	/* Pad and below */
	@media (max-device-width: 768px) {
		nav {
			background: #fff;
		}
	}

.navbar-custom .navbar-nav > li > a {
    color: #ffffff;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 1rem;
}
.navbar-custom .navbar-nav > li > a:hover {
    color: #ffffff;
}
.navigation-container {
    border-bottom: 1px solid #B7D433;
}
	/* remove border on larger screens */
	@media (min-device-width: 1024px) {
		.navigation-container {
			border-Bottom: none;
		}
	}
	
.navbar-main {
    background: #0d660f;
	padding: 8px 0;
}

/* site menu btn (down arrow) on nav bar */
.glyphicon-chevron-down {
    top: 8px;
}

.site-menu-btn {
    margin-top: 0px;
    padding-left: 10px;
    display: inline-block;
    vertical-align: text-bottom;
    float: none;
	color: #fff;
}
	/*hide button for large screens */
	@media (min-device-width: 1024px) {
		.site-menu-btn {
			display: none !Important;
		}
	}
	
.site-menu-btn.grey {
    /*actually makes the button green not grey */
    color: #B7D433;
}
    /* jQuery rotation of site menu btn */
    .rotate{
        -moz-transition: all 0.4s linear;
        -webkit-transition: all 0.4s linear;
        transition: all 0.4s linear;
    }
    .rotate.down{
        -moz-transform:rotate(180deg);
        -webkit-transform:rotate(180deg);
        transform:rotate(180deg);
    }
    .navbar-custom {
        margin-bottom: 0px;
        min-height: 0;
        font-size: 1.0em;
    }
	
	/* show menu via jQuery */
    /* iPhone 6 & below (horizontal) */
    @media (max-device-width: 736px){
        .navbar-custom {
        display: none;    
        }
    }
	
	/* hide menu via jQuery */
	@media (min-device-width: 737px) {
		.navbar-custom {
        display: block;    
        }
	}
	
.navbar-custom .navbar-nav > li > a {
    color: #ffffff;
}
.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
    border-radius: 4px;
    background-color: transparent;
    color: #ffffff;
    text-decoration: underline;
}

/* dropdown text */
.navbar-custom .navbar-nav > li > a.dropdown-toggle {
    background: transparent !Important;
}
.navbar-custom .navbar-nav > li > a.dropdown-toggle:hover {
    background: transparent !Important;
	color: #ffffff;
    text-decoration: underline;
}
.navbar-custom .navbar-nav > li > a.dropdown-toggle:focus {
    background: transparent !Important;
	color: #ffffff;
    text-decoration: underline;
}
	/* selected dropdown menu item (title of 2nd level items) */
	.navbar-main .navbar-nav > li.open > a, .navbar-main .navbar-nav > li.open > a:hover, .navbar-main .navbar-nav > li.open > a:focus {
		color: #ffffff;
	}
	/* down arrow on dropdowns */
	.navbar-custom .navbar-nav > li > a > b.caret {
		border-top-color: #ffffff;
		border-bottom-color: #ffffff;
	}
	.navbar-custom .navbar-nav > li > a > b.caret:hover, .nav > li > a > b.caret:focus {
		border-top-color: #ffffff;
		border-bottom-color: #ffffff;
}
	.navbar-custom .navbar-nav > li > a:hover b.caret {
		border-top-color: #ffffff;
		border-bottom-color: #ffffff;
}
.navbar-custom .navbar-nav > li > .dropdown-menu {
    background: #0d660f;
    color: #ffffff;
}
.navbar-custom .navbar-nav > li > .dropdown-menu a {
    color: #ffffff;
}
.navbar-custom .navbar-nav > li > .dropdown-menu a:hover {
    border-radius: 4px;
    background-color: #ffffff;
    text-decoration: underline;
    color: #ffffff;
}

/* Second level drop down navbar items */
	/* background of second level items */
	.yamm-content {
		background: #0d660f;
	}
	.yamm .yamm-content {
	padding: 5px 20px 20px 15px;
	}
	/* padding around area of second level items */
	.dropdown-menu {
		padding: 0;
	}
	/* stops second items area dropdown from the dropdown title link - this removes full width
	   (Comment this out to make the second level full width) */
	.yamm .dropdown.yamm-fw .dropdown-menu {
	left: inherit;
	right:inherit;
	}
	/* second level items */
	.navbar-custom .navbar-nav > li > .dropdown-menu a {
	color: #ffffff;
	padding: 10px 5px;
	}
	/* second level items background colour */
	ul.dropdown-menu li a:hover {
		background: transparent !Important;
	}
	
.navbar-main .yamm-content ul li a {
    border-bottom: 1px solid #B7D433;
}
	
    /* jQuery glow of site menu btn */
    .site-menu-btn-glow {
        display: none;
        position: absolute;
        top: 8px;
        left: 322px;
        background-color: transparent;
    }
    .site-menu-btn-glow-circle {
        display: inline-block;
        width: 1px;
        height: 1px;
        background: transparent;
        border-radius: 50%;
        border: none;
    
        /* Shadow */
        -webkit-box-shadow:0 0 30px 7px #b7d433 ; 
        -moz-box-shadow: 0 0 30px 7px #b7d433; 
        box-shadow:0 0 30px 7px #b7d433 ;
    }
	
	/*hide glow for large screens */
	@media (min-device-width: 1024px) {
		.site-menu-btn-glow {
			display: none !Important;
		}
	}

/* Menu help text */
.menu-help {
    color: #999;
    text-shadow: 1px 1px #b7d433;  
}


/* Main body
**************************************************************
**************************************************************/
/* Main Body, Intro Box */
.intro {
    padding: 20px 40px 6px 40px;
    background: #f7faec;
    color: #000000;
}
.intro > h1 {
    font-weight: bold;
    color: #0d660f;
}
.intro > p {
    padding-bottom: 25px;
    color: #555555;
}
.intro ul li {
    margin: 20px 0px;
}
.intro ul li a {
    border-bottom: 1px solid #B7D433;
    font-weight: bold;
    color: #54565B;
}
.intro ul li a:hover {
    background-color: #0d660f;
    color: #FFFFFF;
}
/* Main Body (Right side), Help & Support */
.latest > h2 {
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid #B7D433;
    font-weight: bold;
    color: #54565B;
}
.imgLink {
	margin-left: 10px;
    color:#007DB3;
}
.media-body h4 {
	padding-top: 2px;
    color: #007db3;
}
.media-body h4 a:hover {
    color: #0087c7;
}
.media-body p {
	margin-right: 20px;
    color: #54565B;
}
.newsItem .date {
    color: #007DB3;
}

/* Main Body, Green Button */
.btn-green {
    background-color: #0d660f;
    border-color: #0d660f;
    color: #FFFFFF;
}

.btn-green:hover {
    background-color: #B7D433;
    border-color: #B7D433;
    color: #0d660f;
    text-decoration: underline;
}


/* Flipper Icons
**************************************************************
**************************************************************/

/* Flip Container */
/* entire container, keeps perspective */
.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}
.flip-container, .item-front, .item-back {
    width: 350px;
    height: 240px;
}
/* flip speed goes here */
.item-flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;

    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
}
/* hide back of pane during swap */
.item-front, .item-back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}
/* front pane, placed above back */
.item-front {
    z-index: 2;
}
/* back, initially hidden pane */
.item-back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.flip-container:hover .item-back, .flip-container.hover .item-back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.flip-container:hover .item-front, .flip-container.hover .item-front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flip-container {
    border: solid 1px #979CA2;
    margin: 10px;
    padding: 0;
}
.item-flipper .item-back ul {
    padding-left: 15px;
}
.item-flipper img {
    width: 348px;
    height: 200px;
}
.item-flipper .item-front h4 {
    background-color: RGB(0,45,98);
    margin: 0;
    width: 349px;
    padding: 10px;
    color: white;
}
.item-flipper .item-back {
    background-color: #ccc;
    padding: 10px;
}
.item-flipper .item-back h4 {
    color: RGB(0,45,98);
}


/* Footer
**************************************************************************
*************************************************************************/
.footer-fixed {
    height: 65px;
}
.footer-custom {
    background-color: #0d660f;
    border-top: 4px solid #b7d433;
}

/* Mobile footer */
.footer-custom-mobile {
    background-color: #0d660f;
}

.footer-row-default {
	display: none;
}

    /* iPhone 6 plus & below */
    @media (max-device-width: 414px){
        .footer-sa-logo > .img-responsive {
			margin-top: 20px;
			margin-left: 6px;
		}
		.copyright {
		padding-left: 3px;
		}
    }

/*WorkReady logo */	
.footer-wr-logo {
    margin: 0;
    padding: 0 0;
    padding-bottom: 10px;
}
	
	
   /* Move footer Items when NOT Mobile sized device */
    @media (min-width: 992px) {
        .footer-wr-logo {
            float: right;
        }
    }


/*  Sign in page content
**************************************************************
**************************************************************/

.page-title-sign-in {
    border-bottom: 1px solid #b7d433;
    font-size: 2.0em;
    font-weight: 100;
}
    /* iPhone 6 plus & below */
    @media (max-device-width: 414px){
        .page-title-sign-in {
            font-size: 1.9em;
        }
    }
    /* iPhone 5 & below */
    @media (max-device-width: 320px) {
        .page-title-sign-in {
            margin-top: 10px;
            margin-bottom: 0;
            font-size: 1.7em;
        }
    }

/* username and password fields */
.signin-fieldset {
    border: 1px solid #0d660f;
    margin-left: auto;
    margin-right: auto;
    margin-top: 55px;
	padding-top: 30px;
	padding-bottom: 30px;
	width: 680px;
}
    /* iPhone 6 plus & below */
    @media (max-device-width: 414px){
        .signin-fieldset {
			margin-top: 0;
			padding-bottom: 0;
			width:100%;
        }
    }

	/* Remove sign in border */
	/*Pad and below */
	@media (max-device-width: 768px) {
		.signin-fieldset {
			border: none;
		}
	}

.signin-group {
    margin-left: auto;
    margin-right: auto;
    width: 350px;
    padding-left: 0;
}
    /* iPhone 6 plus & below */
    @media (max-device-width: 414px){
        .signin-group {
            width: 100%;
        }
    }
	
.signin-group > li {
    padding-top: 20px;
	list-style: none;
}
.signin-group > li input {
    width: 350px;
}
    /* iPhone 6 plus & below */
    @media (max-device-width: 414px){
        .signin-group > li input {
            width: 100%;
        }
    }

.signin-group li a {
    display: inline-block;
    margin-left: 205px;
    font-size: 1.0em;
    color: #007db3;
}
.signin-group li a:hover {
    color: #0087c7;
}

	/* iPhone 6 plus */
    @media (max-device-width: 414px) {
        .signin-group li a {
            margin-left: 220px;
        }
    }
    /* iPhone 4 & 5 */
    @media (max-device-width: 320px) {
        .signin-group li a {
            font-size: 0.9em;
            margin-left: 180px;
        }
    }

/* text boxes */
.form-field-text {
    height: 35px;
    border-radius: 4px;
    padding-left: 2px;
    background-color: #FFFFFF;
}

/* Remember me selection*/
#remember-me {
    width: 30px;
    /* Hide element */
    display: none;
}
.signin-group .forcheckbox {
    display: inline;
    /* Hide element */
    display: none;
}
    /* iPhone 4 & 5 */
    @media (max-device-width: 320px) {
        .signin-group .forcheckbox {
            font-size: 0.9em;
        }
    }

/* terms and conditions */ 
.tnc {
    width: 350px;
    padding: 20px 10px 0 10px;
    font-size: 0.9em;
    /* Hidden -- until we have the legal documents available */
    display: none;
}
    /* iPhone 6 plus & below */
    @media (max-device-width: 414px) {
        .tnc {
            width: 100%;
        }
    }
    /* iPhone 4 & 5 */
    @media (max-device-width: 320px) {
        .tnc {
            font-size: 0.8em;
        }
    }

/* Validation, password and username error */
.validation-summary-valid {
    color: #FFF;
    display:none;
}
.validation-summary-errors {
    width: 350px;
    padding: 10px 10px 0 10px;
    font-size: 0.9em;
    color: #CC1814;
}
	/* Hide bullet from list item */
	.validation-summary-errors ul {
		padding-left: 0;
		list-style: none;
	}

    /* iPhone 6+ & below */
    @media (max-device-width: 320px) {
        .validation-summary-errors {
            width: 100%;
        }
    }
    /* iPhone 4 & 5 */
    @media (max-device-width: 320px) {
        .validation-summary-errors {
            font-size: 0.8em;
        }
    }


/* Don't have an account section */
.no-account {
    margin-top: 0;
    padding-top: 40px;
    font-size: 2.0em;
    font-weight: 100;
}
    /* Shrink text and padding for mobile device */
    /* iPhone 6 plus & below */
    @media (max-device-width: 414px){
        .no-account {
            padding-top: 5px;
            font-size: 1.4em;
        }
    }
    /* iPhone 4 & 5 */
    @media (max-device-width: 320px) {
        .no-account {
            padding-top: 0;
            margin-bottom: 5px;
            font-size: 1.0em;
        }
    }
.create-account-txt {
    font-size: 1.0em;
}
    /* Shrink text for mobile device */
    @media (max-device-width: 320px) {
        .create-account-txt {
            font-size: 0.9em;
        }
    }

/* Blue sign in button */
.btn-signin {
    width: 350px;
    margin-top: 30px;
    margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
    padding: 10px 15px;
    display: block;
}
    /* -- iPhone 6 plus & below -- */
    @media (max-device-width: 414px) {
        .btn-signin {
            width: 100%;
        }
    }
    /* -- iPhone 5 & below -- */
    @media (max-device-width: 414px) {
        .btn-signin {
            margin-top: 20px;
        }
    }
	
	
/*  Change password page content
**************************************************************
**************************************************************/
.change-password-group input {
    width: 450px;
}
.page-title-change-password {
    border-bottom: 1px solid #b7d433;
}

.p-change-password {
    margin-top: 50px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    width: 680px;
    padding: 15px 10px;
	background: #0d660f;
    color: #fff;
}
	/* Set width to 100% for mobile */
	/* iPhone 6 and below */
	@media (max-device-width: 414px) {
		.p-change-password {
		    margin-top: 0;
			width: 100%;
			padding: 15px 0;
			background: #fff;
			color: inherit;
		}
	}

.change-password-group {
    border: 1px solid #0d660f;
    margin-left: auto;
    margin-right: auto;
    width: 680px;
	padding: 15px 0;
}
	/* Set width to 100% for mobile */
	/* iPhone 6 and below */
	@media (max-device-width: 414px) {
		.change-password-group {
		    border: none;
			width: 100%;
			padding: 0 0 15px 0;
		}
	}
	
.change-password-group > div {
    width: 450px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
	/* Set width to 100% for mobile */
	/* iPhone 6 and below */
	@media (max-device-width: 414px) {
		.change-password-group > div {
			width: 100%;
		}
	}

/* Request password page *
*************************/
.request-password-group {
    border: 1px solid #0d660f;
    margin-left: auto;
    margin-right: auto;
    width: 680px;
	padding-top: 30px;
	padding-bottom: 60px;
}
	
.request-password-group > div {
    width: 450px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    /* iPhone 6 plus & below -- */
	
    @media (max-device-width: 414px) {
        .request-password-group input  {
            width: 100%;
        }
    }
	
.request-password-text {
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    width: 680px;
    background: #0d660f;
    color: #fff;
	padding: 0 10px;
}
.request-password-text:nth-of-type(1) {
	padding-top: 15px;
}
.request-password-text:nth-of-type(2) {
	padding-top: 5px;
	padding-bottom: 15px;
}




/*  End of Custom App Styles
**************************************************************/