﻿/*--------------------------------------------------------------------------------
SECTION         : ASP.NET control styling using CSS Adapter
--------------------------------------------------------------------------------*/
/*  
    MODULE      : Membership
    CONTAINER   : Login
    SUMMARY     : This section of style sheet is intended to contain OFTEN CHANGED rules
    used when the Login control adapter is enabled.
*/
.loginBox 
{
    width: 217px;
    margin: 0px 0px 0px 0px;
}

.loginBox .AspNet-Login {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    padding: 3px;
    border: solid 1px #576877;
    background-color:#0D2337;
    }

.loginBox .AspNet-Login label,
.loginBox .AspNet-Login input
{
    color: #5D7B9D;
}

.loginBox .AspNet-Login input {
    font-size: 1em;  /* lets the form element scale */
}

/* This rule is used when AutoAccessKey is true */
.loginBox .AspNet-Login label em {
    text-decoration: underline;
    font-style: normal;
}

.loginBox .AspNet-Login .AspNet-Login-TitlePanel {
    font-size:12px;
    font-weight: bold;
    color: #8BB1D5;
    background: #263849;
    text-align: left;
    height: 20px;
    margin-bottom: 0px;
    padding: 3px 0px 0px 5px;
}

.loginBox .AspNet-Login .AspNet-Login-FailurePanel {
    height: 4em;
    color: #990000;
}


.loginBox .AspNet-Login .AspNet-Login-SubmitPanel {
    padding: 0.25em 0.1em 0 0;
}

.loginBox .AspNet-Login .AspNet-Login-RememberMePanel {
    padding: 0.25em 0.1em 0 5px;
    clear:left;
    position:relative;
}

.loginBox .AspNet-Login .AspNet-Login-RememberMePanel input {
    width:15px;
    height:15px;
    border:solid 1px black;
}

.loginBox .AspNet-Login .AspNet-Login-RememberMePanel label {
    font-size:11px;
    color:#8BB1D5;
}
	
.loginBox .AspNet-Login .AspNet-Login-UserPanel {
    position:relative;
    float:left;
    text-align:left;
    /*border:solid 1px red;*/
    /*padding-left:10px; /* Spacing in between the two panels */
    /*clear:left; /* Move the whole panel to the bottom left*/
}

.loginBox .AspNet-Login .AspNet-Login-UserPanel label
{
    color:#ffffff;
    font-size:11px;
    font-weight:normal;
    position:relative;
    float:left;
    margin:5px 0px 0px 5px;
        }    
     

.loginBox .AspNet-Login .AspNet-Login-UserPanel input {
	background-color:#7D8D9C;
	border:solid 1px #CECABF;
	color:#000000;
	font-size:10px;
    width: 130px;
    position:relative;
    float:left;
    margin:5px 0px 0px 5px;
    padding-left:3px;
    clear:left; /* Move the whole input panel to the bottom left*/
}


.loginBox .AspNet-Login .AspNet-Login-PasswordPanel {
    position:relative;
    float:left;
    text-align:left;
    /*border:solid 1px red;*/
    /*padding-left:10px; /* Spacing in between the two panels */
    /*clear:left; /* Move the whole panel to the bottom left*/
}	

.loginBox .AspNet-Login .AspNet-Login-PasswordPanel label {
    color:#ffffff;
    font-size:11px;
    font-weight:normal;
    position:relative;
    float:left;
    margin:5px 0px 0px 5px;
}   

.loginBox .AspNet-Login .AspNet-Login-PasswordPanel input {
	background-color:#7D8D9C;
	border:solid 1px #CECABF;
	color:#000000;
	font-size:10px;
    width: 130px;
    position:relative;
    float:left;
    margin:5px 0px 0px 5px;
    padding-left:3px;
    clear:left; /* Move the whole panel to the bottom left*/
}

.loginBox .AspNet-Login .AspNet-Login-SubmitPanel {
	text-align:right;
}

.loginBox .AspNet-Login .AspNet-Login-SubmitPanel input {
    background: #223E67;
    color: #ffffff;
    border: solid 1px #5D7B9D;
    height: 20px;
}

.loginBox .AspNet-Login .AspNet-Login-InstructionPanel,
.loginBox .AspNet-Login .AspNet-Login-HelpPanel,
.loginBox .AspNet-Login .AspNet-Login-PasswordPanel,
.loginBox .AspNet-Login .AspNet-Login-RememberMePanel,
.loginBox .AspNet-Login .AspNet-Login-PasswordRecoveryPanel,
.loginBox .AspNet-Login .AspNet-Login-CreateUserPanel {
	font-size:11px;
	color:#7D8D9C;
}

.loginBox .AspNet-Login .AspNet-Login-PasswordRecoveryPanel a,
.loginBox .AspNet-Login .AspNet-Login-CreateUserPanel a {
	font-size:11px;
	color:#7D8D9C;
	text-decoration:underline;
	padding-left:3px;
}

/*---------- CSS Section: Login buttons ----------*/
input.loginbutton
{
    width:59px;
    height:34px;
    background:url(/images/login/b_login.gif) no-repeat;
    outline:none;
}
    input.loginbutton:hover
    {
        background:url(/images/login/b_login_r.gif) no-repeat 0 0;
    }
input.logoutbutton 
{
    width:59px;
    height:34px;
    background:url(/images/login/b_logout.gif) no-repeat;
    outline:none;
}
    input.logoutbutton:hover 
    {
        background:url(/images/login/b_logout_r.gif) no-repeat 0 0;
    }
    
/*--------------------------------------------------------------------------------
SECTION         : Custome login control
--------------------------------------------------------------------------------*/    
.loginMessage
{
	position:absolute;
	left:772px; /*745px*/
	top:27px;
    margin:0 0 0 5px;
	padding:2px 0 2px 0;  /*2px 0 2px 5px*/
	text-align:center;
	width:80%;
	width:185px;    /*235px;*/
	background-color:#ff6666;
	color:#fff;
	border:solid 1px #fff;
	clear:both;
}

.login_box
{
	position:absolute;      /* Change back to relative if it's not a modal popup. Otherwise the popup appear after the next element in page sequence*/
	left:745px;
	top:50px;
    margin:0 0 5px 5px;     /*0 0 0 502px*/
	padding:0;
	text-align:left;
	width:80%;					/* <-- use this to tie width to viewport size */
	width:240px;				/* <-- use this for a set width */
	background-color:#6D97BF;	/*this is the content background color. also overwriting the lb div background color below*/
	clear:both;
}

.login_tlc, .login_trc, .login_blc, .login_brc
{
	background-color:transparent;
	background-repeat:no-repeat;
}

.login_tlc
{
	background-image:url(images/login/tlc.jpg);
	background-position:0% 0%;
}

.login_trc
{
	background-image:url(images/login/trc.jpg);
	background-position:100% 0%;
}
	
.login_blc
{
	background-image:url(images/login/blc.jpg);
	background-position:0% 100%;
}

.login_brc
{
	background-image:url(images/login/brc.jpg);
	background-position:100% 100%;
}

.login_tb, .login_bb
{
	background-color:transparent;
	background-repeat:no-repeat;
}
			
.login_tb
{
	background-image:url(images/login/tb.jpg);
	background-position:5px 0;	
}

.login_bb
{
	background-image:url(images/login/bb.jpg);
	background-position:5px 100%;
}

.login_rb
{
	background-image:url(images/login/r.jpg);
	background-position:100% 4px;
	background-repeat:repeat-y;
}

.login_lb
{
	background-color:#eeeeee;
	background-image:url(images/login/l.jpg);
	background-position:0% 4px;
	background-repeat:repeat-y;
}

/**************************** Body/Content ********************************/
.login_content
{
	padding:0;  /*padding:25px 0 9px 9px;*/
	margin:0px 5px 0px 5px;
    background-image:url(images/login/content_bg.jpg);
    background-position:0px 4px;
    background-repeat:repeat-x;
    height:73px;/*height:39px*/
}

    .login_content .container
    {
        padding:12px 0 0 0;
        /*width:100%;*/
        /*border:solid 1px red;*/
    }    
            
        .login_content .container .field
        {
            float:left;
        }

        .login_content .container .button
        {
            float:left;
            margin:-7px 0px 0px 6px;
        }        
    
        .login_content .container .userPanel,
        .login_content .container .passwordPanel
        {
            color:#fff;
            font-family:Arial,Helvetica,sans-serif;
            font-size:11px;
            font-weight:normal;
        }
            
        .login_content .container .userPanel
        {
            float:left;
            position:relative;
            text-align:left;
        }

        .login_content .container .passwordPanel
        {
            float:left;
            position:relative;
            text-align:left;
            margin:3px 0 0 0;
        } 
        
            .login_content .container .userPanel label,
            .login_content .container .passwordPanel label
            {
                float:left;             
                width:52px;   
                margin:3px 0px 0px 10px;
                position:relative;
            }

            .login_content .container .userPanel input,
            .login_content .container .passwordPanel input
            {
                background-color:#02336D;
                border:1px solid #619DC1;
                /*clear:left;*/     /*for multiple line label and textbox*/
                color:#fff;
                font-size:11px;
                width:113px;
                height:16px;
            }   
            
            .login_content .container .userPanel input
            {            
                float:left;                
                margin:0px 0px 0px 5px;
                padding:0 0 0 3px;
                position:relative;  
            } 
            
            .login_content .container .passwordPanel input
            {            
                float:left;                
                margin:0px 0px 0px 4px;
                padding:0 0 0 3px;
                position:relative;  
            }      

.imgCloseButton
{
    background-image:url(images/login/b_close.jpg); 
    background-repeat:no-repeat;
    background-position:left;
    margin:0pt 0pt 0pt 27px;
    vertical-align:middle;
    text-align:left;    
    width:12px;
    height:12px;
    cursor:pointer;
    border: none 0 transparent;    
}
            
.imgLoginButton
{
    background-image:url(images/login/b_ok.jpg); 
    background-repeat:no-repeat;
    background-position:left;
    vertical-align:middle;
    text-align:left;    
    width:30px;
    height:30px;
    cursor:pointer;
    border: none 0 transparent;
}

.forgetPasswordLink
{
    clear:both;
    padding:3px 0 0 40px;
}

/*--------------------------------------------------------------------------------
SECTION         : Login page
--------------------------------------------------------------------------------*/
/*
    FORM FIELDS AND ELEMENTS STYLES
*/
.divSignInLeftCol { width: 500px; float:left; line-height: 20px;   }
.divSignInLeftCol .divWrapper { padding: 0 40px; }
.divSignInLeftCol .question { font-weight:bold; }

.divSignInLeftCol .loginPageMessage
{
    margin: 5px 0 0 0;
    padding: 4px 0 0 0;
    background-color:#EBEBEB;
    color:red;
    font: bold 11px Arial,Helvetica,sans-serif;
    clear:both;
}
    
	.divSignInLeftCol .loginPageMessage .imgErrorIcon
	{
		width:15px;
		height:15px;            
		background:url(images/pagelogin/error_icon.jpg) no-repeat 0 0;
		display:none;
	}

	.divSignInLeftCol .loginPageMessage .divMessage
	{
		margin:0 0 0 7px;
		height:15px;
	}

.divSignInRightCol { width: 400px; float: right; margin-bottom: 10px; }
.tblAccBenefits { width:350px; border: 1px solid #ccc; }
.tblAccBenefits .heading { padding:12px 0 0 12px; color:#CC6600; font-size: 12px; }
.tblAccBenefits .body
{
	font:normal 11px Arial,Helvetica,sans-serif;
	color:#000;
}

.tblAccBenefits .benefitslist { padding: 5px; }

.tblAccBenefits .benefitslist li
{
	list-style-image:url(images/pagelogin/bullet.gif);
	margin:16px 5px 16px 16px; padding:0 0;
}

.divSignInLeftCol .title 
{
	color: #284265;
	font: bold 18px Arial,Helvetica,sans-serif;
	margin:0 0 10px 0;
}


.tblLoginForm { width: 400px; border-collapse:collapse; }        

.tblLoginForm .tdFormFields
{             
	vertical-align:top;
}

        
		.tblLoginForm .tdFormFields .container
		{   
			margin:10px 0 0 0;
		}
        
            .tblLoginForm .tdFormFields .tblFormFields .tdFieldLabel
            {
                width:55px;
                height:25px;
                padding:3px 0 0 0;
                color:#000;
                font:normal 11px Arial,Helvetica,sans-serif;
                vertical-align:top;
            }
            
            .tblLoginForm .tdFormFields .tblFormFields .tdColon
            {
                /*width:12px;*/
                padding:1px 0 0 0;
                color:#000;
                font:normal 11px Arial,Helvetica,sans-serif;
                vertical-align:top;
            }
            
            .tblLoginForm .tdFormFields .tblFormFields .tdFieldInput
            {
                width:476px;
                padding:0 0 0 8px;
                vertical-align:top;
            }

                .tblLoginForm .tdFormFields .tblFormFields .tdFieldInput input
                {            
                    border:1px solid #999999;
                    color:#000;
                    font:normal 12px Arial,Helvetica,sans-serif;
                    /*height:16px;*/
                    margin:0;
                    padding:2px 2px 2px 2px;
                    width:120px;
                }                
            
            .tblLoginForm .tdFormFields .tblFormFields .tdButton
            {
                padding:10px 0 0 0;
                text-align: left;
            }            
                
                .tblLoginForm .tdFormFields .tblFormFields .tdButton .hrefForgetPassword
                {            
					text-decoration:underline;
					width:220px;
					float:left;
					display:block;
                }
                
                .tblLoginForm .tdFormFields .tblFormFields .tdButton .hrefForgetPassword:hover
                {            
					color:Red;
					text-decoration:underline;
                }
                            
			.tblLoginForm .tdFormFields .tblFormFields .tdButton .divSignInButton 
			{
				float: left;
				text-align:center;
				vertical-align:middle;
				padding: 3px 0 0 0;
				font: 12px Arial, Helvetica, Sans-Serif;
				cursor: pointer;
				color: #fff;
				background: #FC3307;
				border-width: 1px;
				border-style: solid;
				border-color: #FF7800 #691300 #691300 #FF7800;
				width:60px;
				height:19px;
			}                
            
            .tblLoginForm .tdFormFields .tblFormFields .tdOtherAction
            {
				padding:10px 0 0 0;
            }
            
				.tblLoginForm .tdFormFields .tblFormFields .tdOtherAction .divCreateNewAccount
				{
					color:#000;
				}
				
					.tblLoginForm .tdFormFields .tblFormFields .tdOtherAction .divCreateNewAccount a
					{
						text-decoration:underline;
					}	
								
					.tblLoginForm .tdFormFields .tblFormFields .tdOtherAction .divCreateNewAccount a:hover
					{
						color:Red;
					}					