﻿.home-header{
    display: none;
}

.home-content {
    top:0px;
    left:0px;
    right:0px;
    bottom: 0px;
}

.home-content-mc {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.panel-body {border: 0px !important;}

.panel-body-m {
    top: 0px !important;
    left: 0px !important;
    right:0px !important;
    bottom:0px !important;
}

.login-status
{
	text-align: right;
	line-height: 30px;
	padding: 0px 5px;
}

#login_form_container
{
	width: 500px;
	min-height: 145px;
	margin: 0 auto;
}

.form-buttons a.button
{
	margin-right: 3px;
}

#SignInWrapper
{
	display: table;
	height: 100%;
	max-width: 100%;
	table-layout: fixed;
	width: 100%;
}

.SignInWrapper.LandingContent
{
	display: table-cell;
	max-width: 100%;
	/* text-align: center; */
	vertical-align: middle;
}

.SignInContent
{
	width: 400px;
	text-align: left;
	display: inline-block;
    padding: 35px 0px 0px 35px;
    margin-left:40px;
	border-left: 2px solid #7D98AB;
	vertical-align: middle;
	box-sizing: border-box;
	min-height: 150px;
	max-width: 100%;
}

.SignInForm
{
	width: 500px;
	text-align: left;
	display: inline-block;
	padding: 9px;
	vertical-align: middle;
	box-sizing: border-box;
	max-width: 100%;
}

.SignInContent .SignInLockImage,
.SessionContent .SignInLockImage
{
	display: inline-block;
	width: 100px;
	height: 99px;
	background: url(../Images/Icons/Lock96.png) no-repeat transparent;
	background-position-x: left;
	margin-top: 15px;
	margin-left: 9px;
	vertical-align: top;
}

.SignInContent .IntroText
{
	display: inline-block;
	width: 220px;
	vertical-align: top;
}

.SessionContent .IntroText
{
	display: inline-block;
	vertical-align: top;
}

@media only screen and (max-width: 735px)
{
	.SignInContent
	{
		border-left: none;
		text-align: center;
	}
}

@media only screen and (max-width: 320px) 
{
	.TrustLoginRequired
	{
		display: block;
		margin-bottom: 5px;
	}

	.TrustLoginRequired + td
	{
		display: block;
		vertical-align: middle;
	}

	.TrustLoginRequired + td > .input-control.select-box
	{
		width: 100% !important;
	}

	.form-field label.form-field-label
	{
		float:none;
		padding-left: 0;
	}

	.form-field .form-field-element-wrapper
	{
		margin-left: 0;
	}

	.form-field.required label.form-field-label 
	{
		background: none;
	}

	.form-field.required .form-field-element-wrapper
	{
		background: url(../Images/Forms/required_field_orange_line.png) no-repeat 0 2px;
		padding-left: 5px;
	}
}

.LandingContent.SignInWrapper{
    display:block;
}

div#SignInFormWrapper {
    position:absolute;
    top:450px;
    width:80%;
    margin-left:10%;
    margin-right:10%;    
    background:white;
    padding:5px 0px 5px 5px;
}

div#SignInFormWrapper:after {
    content: '';
    height: 100%;
    background-color: #ffffff;
    position: absolute;
    right: 1px;
    transform: translate(100%, 0);
    top: 0;
    width: 300px;
}

div#SignInFormContainer{
    background:#343E48;
    padding:50px;
}

div#SignInFormContainer p,
div#SignInFormContainer label{
    color:#ffffff;
}


.SignInContent .SignInLockImage, .SessionContent .SignInLockImage{
    display:none;
}

.SignInContent .IntroText{
    width:auto;
}

div#SignInFormContainer .form-field .form-field-element-wrapper{
    margin-left:87px;
}

div#SignInFormContainer .form-field.required{
    margin-bottom:16px;
}

div#SignInFormContainer .form-field.required *{
    border:none;
}

div#SignInFormContainer .form-field.required input{
    height:20px;
    padding:4px 0px 4px 4px;
}

div#SignInFormContainer *{
    background-image:none;
    
}

div#SignInFormContainer label.form-field-label {
    width:80px;
    padding:0px;
    font-weight:bold;
}

div#SignInFormContainer .button-wrapper{
    background:#7D98AB !important;
    border:none !important;
    padding:2px 12px 2px 12px !important;
    color:#efefef !important;
    font-weight:bold !important;
    transition-duration:0.3s !important;
	filter: none !important;
}

div#SignInFormContainer .button-wrapper:hover,
div#SignInFormContainer .button-wrapper:focus,
div#SignInFormContainer .button-wrapper:active{
    background:#71BAEA !important;
    transition-duration:0.3s !important;
}

@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900');
/**************************************/
/* Containers */
.boxed-container{
    width:80% ;
    overflow: hidden;
    margin-left:auto;
    margin-right:auto;
}

/***********************************/
/*Header Style One - START*/
#header-one{
    background:#000000;
    height:100px;
}

    #header-one *{
        font-family: 'Work Sans', sans-serif;
    }

    #header-one #logo img{
        margin: 20px 20px 0px 0px;
    }

    #header-one .inline-block{
        display: inline-block;
    }

    #header-one #home-icon{
        position: relative;
        top: 15px;
    }

        #header-one #home-icon:hover span{
            color: #71BAEA;
            transition: color 300ms;
        }

        #header-one #home-icon:hover svg path:nth-child(1){
            stroke: #71baea !important;
            transition: color 300ms;
        }

        #header-one #home-icon:hover svg path:nth-child(2){
            fill: #71baea !important;
            transition: color 300ms;
        }


        #header-one #home-icon *{
            vertical-align: middle;
        }


        #header-one #home-icon a {
            text-decoration: none;
        }

        #header-one #home-icon a *{
            color:#7D98AB;
            font-size: 20px ;
            font-weight: 600;
            transition: color 300ms;
        }

/***********************************/
/* Mega Menu */
#header-one #menu * {
    box-sizing: border-box;
}

#header-one #menu {
    overflow: hidden;
    background-color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    float:right;
}

#header-one #menu h3{
    font-size:32px;
    color: #7D98AB;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
}

#header-one #menu .dropdown-column a {
    float: left;
    font-size: 20px;
    color: #fff;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
    width:100%;
    border-bottom: 1px solid #82888F;
}


#header-one #menu .dropdown-column a:hover {
    background-color: rgba(130,136,143,0.4);
    transition:background-color 300ms;
}

#header-one .dropdown {
    float: left;
    overflow: hidden;
}

#header-one .dropdown .dropbtn {
    font-size: 20px;    
    border: none;
    outline: none;
    color: #ffffff;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    padding: 15px 15px 37px 15px;
    background-color: transparent;
    margin: 25px 0px 0px 0px;
}

#header-one #menu a:hover, 
#header-one .dropdown:hover .dropbtn {
    background-color: rgba(52,62,72,0.98);
    transition-duration: 0.3s;
}

#header-one .dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(52,62,72,0.98);
    width: 100%;
    left: 0;
    top:100px;
    z-index: 1;
    transition-delay: 0.3s;
    padding-top:30px;
    padding-bottom:40px;
}


#header-one .dropdown:hover .dropdown-content {
    display: block;
}

/* Create three equal dropdown-columns that floats next to each other */
#header-one .dropdown-column {
    float: left;
    width: 33.33%;
    padding: 10px;
    background-color: transparent;
}

#header-one .dropdown-column a {
    float: none;
    padding: 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

#header-one .dropdown-column a:hover {
    background-color: #ddd;
}


/* Clear floats after the dropdown-columns */
#header-one .dropdown-row:after {
    content: "";
    display: table;
    clear: both;
}
/*Header Style One - END*/
/***********************************/


/***********************************/
/*Header Style Two - START*/

/**************************************/
/* Header */
#header-two{
    background:#fff;
}

    #header-two #header{   }
        #header-two #header #logo{}
            #header-two #header #logo #logo-link{}
                #header-two #header #logo #logo-link img{
					border:0px !important;
				}
        #header-two #header #user{}
            #header-two #header #user #user-name{
                text-align: right;
            }
                #header-two #header #user #user-name span.usericon{

                }
                
                #header-two #header #user #user-name i{
                    color: #9f082c;
                }

    #header-two #menu{
        background: #9f082c;
    }
        #header-two #menu #horizontal-menu-bar{}

        #header-two #menu #horizontal-menu-bar .icon {}

            #header-two #menu #horizontal-menu-bar a{}

            #header-two #menu #horizontal-menu-bar a:hover{}
    
            
/**************************************/
/* Dropdown */
/* The dropdown container */
#header-two #menu .topnav {
    overflow: hidden;
}

    #header-two #menu .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }
    #header-two #menu .active {
        background-color: #333;
        color: white;
    }
    #header-two #menu .topnav .icon {
        display: none;
    }
    #header-two #menu .dropdown {
        float: left;
        overflow: hidden;
    }
        #header-two #menu .dropdown .dropbtn {
            font-size: 17px;    
            border: none;
            outline: none;
            color: white;
            padding: 14px 16px;
            background-color: #9f082c;
            font-family: inherit;
            margin: 0;
        }
    #header-two #menu .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
        #header-two #menu .dropdown-content a {
            float: none;
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

    #header-two #menu .topnav a:hover, 
    #header-two #menu .dropdown:hover .dropbtn {
        background-color: #555;
        color: white;
    }

    #header-two #menu .dropdown-content a:hover {
        background-color: #ddd;
        color: black;
    }

    #header-two #menu .dropdown:hover .dropdown-content {
        display: block;
    }
/*Header Style Two - END*/
/***********************************/


/***********************************/
/*Banner- START*/
    #banner-container{
    }

    #banner-wrapper{
        background-color: #efefef;
    }

    #banner{
        height: 500px;        
        background-color: #000;
        background-image: url('https://www.stategrowth.tas.gov.au/__data/assets/image/0005/168971/eVET_Portal_image_selection_20180321-full-8.jpg');
    }

    #banner-heading{
        height:100px !important;
        padding:5px 0px;
        font-weight: bold;
        position: relative;
        bottom:300px;
        z-index: 0;        
        margin-right: 10%;
    }

    #banner-heading h1{
        color: #ffffff;
        font-size:40px;
        line-height: 40px;
        letter-spacing: 3px;
        font-weight: bold;
        margin-top:0;
        margin-bottom:0;
    }

    #banner-heading h4{
        color: #ffffff;
        font-size:20px;
        font-weight: bold;
        margin-top:0;
        margin-bottom:0;
    }

    .banner-element-containers{
        margin-left:10%;
    }

/*Banner - END*/
/***********************************/

/***********************************/
/*breadcrumbs- START*/
#breadcrumbs-container{
    overflow: hidden;
}

#breadcrumbs{
    margin:20px 0px;
    padding-left:50px;
}

#breadcrumbs span{
    color: #777;
}

#breadcrumbs span a{
    text-decoration: none;
}

#breadcrumbs span a:hover{
    color:#333;
}

/*breadcrumbs - END*/
/***********************************/

/***********************************/
/*Samll Tiles - START*/
.small-tiles{
    font-size:20px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 28px;
}

.small-tiles h3{
    font-family: 'Work Sans', sans-serif;
    letter-spacing: 0;
    font-size: 30px;
    font-weight: 700;
}

.small-tiles .small-tiles-row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: calc(100% + 30px);
    max-width: calc(100% + 30px);
    margin-left: -15px;
}

.small-tiles .small-tiles-row .small-tiles-tile{
    width: calc(33.333% - 30px);
    margin: 15px;
    height: 80px;
    background-color: #F5F5F5;
}

.small-tiles .small-tiles-row .small-tiles-tile a{
    display: block;
    height: 100%;
    position: relative;
    color: #343E48;
    font-family: 'Work Sans', sans-serif;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 1.25em;
    letter-spacing: -0.006875rem;
    line-height: 1.2;
    -webkit-transition: color 300ms;
    transition: color 300ms
}

.small-tiles .small-tiles-row .small-tiles-tile a:before{
    content: '';
    width: 4px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #71BAEA;
    z-index: 5;
    -webkit-transition: width 400ms;
    transition: width 400ms;
}

.small-tiles .small-tiles-row .small-tiles-tile a:hover,
.small-tiles .small-tiles-row .small-tiles-tile a:focus{
    color: #000000;
    -webkit-transition: color 300ms;
    transition: color 300ms;
    outline: none;
}

.small-tiles .small-tiles-row .small-tiles-tile a:hover:before,
.small-tiles .small-tiles-row .small-tiles-tile a:focus:before{
    width: 100%;
    -webkit-transition: width 300ms;
    transition: width 300ms
}

.small-tiles .small-tiles-row .small-tiles-tile a span{
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    padding: 0 25px;
    z-index: 10;
}

/*Samll Tiles - END*/
/***********************************/

/***********************************/
/*Forget Password - START*/
#forget-password-link,
#accessRequestURL{
	color:#71BAEA;
}

#forget-password-link:hover,
#accessRequestURL:hover{
	color:#efefef;
}
/*Forget Password - END*/
/***********************************/


