/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
} 

::-ms-clear {display: none;}

html, body, table, input, select {font-family: 'Actor';}
a, label {font-family: 'Actor';}

h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.27em;
font-weight: bold;
}


@font-face {
    font-family: 'Actor', sans-serif;
    font-weight: normal;
    font-style: normal;
}

.product-logo /* product logo (should be 50px in height, width to be set below - no wider than 220px) */
{
    background-image:url(../images/logo_wordmark_vendor_login_screen.png);
    width:383px;
    height:89px;
    background-repeat:no-repeat;
    display:block;
    background-size: 100% 100%;
    margin-top:32px;
}

.emailLoginIcon:before
{
    content: url('../images/EmailIcon.png');
    position: absolute;
    width: 25px;
    height: 25px;
    padding-top: 0px;
    margin-left: 1px;
    margin-top: 3px;
}
.passwordIcon:before
{
    content: url('../images/PasswordIcon.png');
    
    position: absolute;
    width: 27px;
    height: 25px;
    padding-top: 1px;
    padding-left: 1px;
    margin-left: 0px;
    margin-top: 3px;
}


html {
    height: 100%;
}

body {
    height: 100%;
    width: 100%;
    display: table;
    background: -moz-linear-gradient(top, #313131 0%, #3b3a3b 100%); /* FF3.6+ */
    background: -o-linear-gradient(top, #313131 0%,#3b3a3b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #313131 0%,#3b3a3b 100%); /* IE10+ */
    background: linear-gradient(to bottom, #313131 0%,#3b3a3b 100%); /* W3C */
    background: -webkit-gradient(linear, left top, left bottom, from(#313131), to(#3B3A3B)); /* Safari */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#313131', endColorstr='#3b3a3b',GradientType=0 ); /* IE6-9 */
    font-weight: 300;       
    margin: 0px;
    padding: 0px;
}

.container {
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

.wrapper {
    display:inline-block;
    text-align:left;
}

.wrapper .logo {
    float: left;
    clear: none;
    width: 370px;
}

.wrapper .form {
    float: left;
    clear: none;
    width:400px;
    padding-left: 40px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}


div.login-form {
    color: White;
}

div.login-form input[type=text], 
div.login-form input[type=password],
div.login-form input[type=email]{
    height: 32px;
    width: 100%;
    max-width:320px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 8px 10px 8px 35px;
    font-size: 14px;
    margin-bottom: 15px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    border-width: 0px;

}

div.login-form input[type=submit], div.login-form .button {
    color: #F1F1F1;
    background: #5A595A;    
    border-radius: 3px;
    -moz-border-radius: 3px;
    border-width: 0px;  
    padding: 10px 28px;
    font-size: 12px;
    cursor: pointer;    
    font-weight: 400;
    margin: 2em;
}

div.login-form input[type=submit]:hover, div.login-form .button:hover {
    background: #686868;
}

.version {
    display: none;
}

.defaultlink {
    font-size: 12px;
    cursor: pointer;
    color: #939393;
    /*position: absolute;*/
    /*right: 20px;*/
    /*bottom: 20px;*/
}

.defaultlink:hover {
    color: #B3B3B3;
}


.hintLabel {
    font-size: 12px;
    margin-bottom: 10px;
}

.headerdiv h1 {
    font-size: 38px;
    font-family: 'Actor';
    font-weight: 300;
}

.headerdiv h3 {
    font-size: 18px;
    font-family: 'Actor';
    font-weight: 300;
    text-align: center;
}

.textboxdiv .SSO-login {
    color: #369FDB;
    font-size: 14px;
    display: block;
    text-decoration: none;
    margin-bottom: 8px;
    padding-bottom: 12px;
}

.textboxdiv .SSO-login:hover {
    color: #61C0F7;
}

.submitdiv .cant-access {
    color: #369FDB;
    font-size: 11px;
    display: block;
    text-decoration: none;
    margin-top: 10px;
    margin-right: 38px;
}

.submitdiv .cant-access:hover {
    color: #61C0F7;
}

.dont-have-account {
    margin-top: 30px;
    color: #DBDBDB;
    font-size: 11px;
}

.dont-have-account a {
    color: #369FDB;
    text-decoration: none;  
    margin-left: 5px;
}

a:hover {
    color: #61C0F7;
}

.stay-logged-in {
    color: #DBDBDB;
    font-size: 14px;
    margin-bottom: 15px;
}




.footer { color:#2e3437; } /* footer font colour (need to change both values here) */
.footer a { color:#2e3437; }
.footer { margin-top:20px; font-size:10px; line-height:12px; }

label[for=iPSPCookie] {cursor:pointer;}
.authFailedDiv .info {font-size:14px;}

/* Responsive design */
/* Landscape phones and down */
@media (max-width: 480px) {
    .container {vertical-align:top;}
    .wrapper .logo, .wrapper-form {width:200px;padding-left:20px;box-sizing: inherit;-moz-box-sizing: inherit;}
    .product-logo {width:50px;height:16px;margin-top:10px;}
    .submitdiv {margin-right:0px !important;}
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .wrapper .logo, .wrapper .form {width:240px;padding-left:20px;box-sizing: inherit;-moz-box-sizing: inherit;}    
    .product-logo {width:240px;height:56px;margin-top:25px;}
    .headerdiv h1 {font-size:30px;}     
    .submitdiv {margin-right:0px !important;}
}

/* iPads (portrait) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .wrapper .logo, .wrapper .form {width:280px;padding-left:20px;box-sizing: inherit;-moz-box-sizing: inherit;}    
    .wrapper .logo {margin-right:20px;}
    .product-logo {width:240px;height:58px;margin-top:25px;}
    .headerdiv h1 {font-size:30px;}     
    .submitdiv {margin-right:0px !important;}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .wrapper .logo, .wrapper-form {width:200px;padding-left:20px;box-sizing: inherit;-moz-box-sizing: inherit;}
    .product-logo {width:220px;height:58px;margin-top:30px;}
}