/* -------------------------------------------------------------------------------------------
 * Login.css            Login Cascading Style Sheet
 *
 * Author:              Paul MacKenzie
 * Date                 16/01/2013
 * Copyright:           PLATINUM Payroll Systems Ltd
 *
 *
 * DEVELOPMENT LOG
 * Version Date      Who  Description
 * -------------------------------------------------------------------------------------------
 * 1.00  16/01/2013  PGM  Initial Development
 * 1.01  17/10/2015  JRR  Common Login Container Update
 * 1.02  22/06/2016  JRR  Support for title text overlayed on login banner image
 */

@font-face {
    font-family: Pirulen;
    src: url("../fonts/pirulen.ttf");
}

html {
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
    height: 100%;
    background: #ffffff;
}

div.banner {
    position: relative;
    /*border-bottom: 1px solid #B5B7B9;*/
    box-sizing: border-box;
    width: 100%;
    
    background-color: #282E34;
    text-align: center;
    font-family: Pirulen, Arial, sans-serif;
    
    overflow:hidden;
  
    max-height: 320px;
}

	div.banner img {
		width:100%;
		
		margin:auto;
	}
	
    div.banner.largerText > span {
        font-size: 2em;
    }

    div.banner > span {
        font-size: 1.5em;
        width: 100%;
        line-height: 100px;
        vertical-align: middle;
        color: #f5fcff;
    }
    
    
    div.banner.image > span {
      width: 100%;
      line-height: 50px;
      vertical-align: middle;
      color: #f5fcff;
      background: transparent;
      position: absolute;
      display: inline-block;
      width: 100%;
      top: 50%;
      margin-top: -25px;
      left: 0;
      text-shadow: 2px 2px #000;
    }
    
    @media screen and (max-width: 600px) {
      div.banner.image > span {
        text-shadow: 1px 1px #000;  
      }
    }

div.container {
    position: absolute;
    display: table;
    height: 100%;
    width: 100%;
}


div.containerMiddle {
    display: table-cell;
    vertical-align: middle;
    padding-bottom:100px;
    padding-top:2px;
}

div.containerInner {
    margin:auto;
}

@media screen and (max-height: 600px) {
    div.containerMiddle {
        padding-bottom:0;
    }
}

form.Login {
    position: relative;
    overflow: hidden;
    margin: auto;
    /*margin-top: -2em;*/
    margin-bottom:5px;
    /*margin-top:50px;*/
    /*margin-bottom:100px;*/
    display: block;
    width: 50%;
    min-width: 588px;
    /*border:1px solid black;*/
    /*background: #f9fbfc;*/
    border-radius: 4px;
    -webkit-box-shadow: 0px 2px 2px 2px #282E34;
    -moz-box-shadow: 0px 2px 2px 2px #282E34;
    box-shadow: 0px 2px 2px 2px #282E34;
}

#LoginFields {
    margin-top: 2em;
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    overflow: hidden;
    max-width: 640px;
}

@media screen and (min-width: 1200px) {
  div.banner > span {
      font-size: 2vw;
  }
  div.banner.largerText > span {
      font-size: 2.65vw;
  }
}
@media screen and (min-width: 1800px) {
  div.banner > span {
      font-size: 2.25em;
  }
  div.banner.largerText > span {
      font-size: 2.95em;
  }
}
    
@media screen and (max-width: 600px) {
    form.Login {
        width: 98%;
        min-width: 200px;
    }

    #LoginFields {
        width: 94%;
    }

    div.banner > span {
        font-size: 1.2em;
    }
    div.banner.largerText > span {
        font-size: 1.8em;
    }
}

@media screen and (max-width: 440px) {
    div.banner > span {
        font-size: 0.9em;
    }
    div.banner.largerText > span {
        font-size: 1.45em;
    }
}

form h1 {
    font: 3em Arial;
    margin-bottom: 1em;
    margin-left: 0;
}

form h2 {
    font: 1em Arial;
    margin-bottom: 2em;
    margin-left: 0;
}

form div.terms {
    font: 0.7em Arial;
    margin-left: 0;
    float: left;
}

form div {
    font: 1em Arial;
    margin-bottom: 1em;
    margin-left: 0;
}

#LoginFields div.submit input {
    min-width: 80px;
    width: 60%;
    font: 1em Arial;
    box-sizing: border-box;
    height: 2em;
    background: rgb(51, 77, 118);
    background: -webkit-linear-gradient(red, blue);
    background: -o-linear-gradient(red, blue);
    background: -moz-linear-gradient(red, blue);
    background: linear-gradient(#355A93, #282E34);
    border: 1px outset black;
    border-radius: 4px;
    color: #f5fcff;
	cursor: pointer;
}

    #LoginFields div.submit input:hover {
        background: rgb(35, 56, 88);
        /*opacity: 0.9;*/
        border-color: rgb(142, 169, 209);
    }

    #LoginFields div.submit input:active {
        opacity: 0.7;
    }

#LoginFields div.submit {
    display: inline-block;
    width: 100%;
}


#LoginFields div.forgot {
    float: left;
    width: 60%;
}

    #LoginFields div.forgot > a, #LoginFields .LoginError>div {
        float: right;
		text-align:right;
        margin: 0px 4px 0 0;
    }

		#LoginFields .LoginError>div>span {
			display:inline-block;
		}
	
div.forgot a {
    font-size: 0.75em;
    text-decoration: none;
    color: #00A3D3;
    color: rgb(7, 93, 228);
}

    div.forgot a:hover {
        text-decoration: underline;
    }

div.LoginError {
	float:left;
	width:60%;
    font-size: 0.75em;
    color: #f50f0f;
    padding-left: 0;
}

label.field {
    float: left;
    width: 16.5%;
    padding-right: 3.5%;
    min-width: 80px;
    font-size: 1em;
    text-align: left;
    line-height: 2em;
}

div.required label.field {
    color: rgb(7, 93, 228);
    text-align: right;
}

div.required input, div.required select {
    font-size: 1em;
    height: 2em;
    padding-left: 4px;
    width: 60%;
    box-sizing: border-box;
    border: solid 1px #000;
    border-color: rgb(40, 93, 177);
    background-color: rgb(240,240,240);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

.password-icon {
  margin-left: -30px;
  color: #3f3f3f;
  vertical-align: middle;
  cursor: pointer;
}