/* CSS Document */

/* general style propertyies */

body.login_BG { background: url(../images/sail_4.webp) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
/*div.login_BG { background: url(../images/login_BG.gif) no-repeat top center; height: 100%; padding-top: 117px; }*/
#OClogo { background: url(../images/OC_login_logo.png) no-repeat top left; width: 428px; height: 112px; }

#OClogoIE6 { background: url(../images/OC_login_logo.gif) no-repeat top left; width: 428px; height: 112px; }

.loginBoxes { margin-bottom: 100px; }

.loginBoxes td { width: 310px; vertical-align: top; text-align: left; }

.loginBox_T { background: url(../images/login_box_T.png) no-repeat top center; height: 10px; line-height: 10px; font-size: 1px; }

.loginBox { background: url(../images/login_box_BG.png) no-repeat bottom center; }

#loginBox, #newsBox { padding: 6px 28px 38px 28px; }

.loginBox form, .loginBox H1 { margin-top: 0px; }

.loginBox li, .loginBox ul { list-style-image: url(../images/bullet.gif); margin-left: 7px; padding-left: 7px; }

.loginBox li { margin-bottom: 13px; }

.footer { background-image: url(../images/login_footer_BG.gif); }
#wrapper h1{
	font-size: 48px;
	color: black;
	padding: 2px 0 10px 0;
	font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
	font-weight: bold;
	text-align: center;
	padding-bottom: 20px;
	padding-top: 10px;
}
#wrapper {
	right: 0px;
	margin: 0px auto;
	width: 500px;
	position: relative;
}

#wrapper h1:after{
	content:' ';
	display:block;
	width:100%;
	height:2px;
	margin-top:10px;
	background: 
		linear-gradient(left,  
			rgba(147,184,189,0) 0%,
			rgba(147,184,189,0.8) 20%,
			rgba(147,184,189,1) 53%,
			rgba(147,184,189,0.8) 79%,
			rgba(147,184,189,0) 100%); 
}
::-webkit-input-placeholder  { 
	color: rgb(190, 188, 188); 
	font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{ 
	color: rgb(190, 188, 188);
	font-style: italic;
} 
input {
  outline: none;
}
#wrapper input:not([type="checkbox"]){
	width: 92%;
	margin-top: 4px;
	padding: 10px 5px 10px 32px;	
	border: 1px solid rgb(178, 178, 178);
	box-sizing : content-box;
	border-radius: 3px;
	box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	transition: all 0.2s linear;
	background-position: left center;
    padding-left: 40px;
    /*background-image: url(../images/user-icon.png);
    background-repeat: no-repeat;*/
    background-size: 40px 35px;
}
#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus{
	border: 1px solid rgba(91, 90, 90, 0.7);
	background: rgba(238, 236, 240, 0.2);	
	box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
} 
#wrapper p.button input{
	cursor: pointer;	
	background: #f7802f;
	padding: 8px 5px;
	font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
	color: #fff;
	font-size: 24px;	
	border: 1px solid rgb(28, 108, 122);	
	margin-bottom: 10px;	
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	border-radius: 3px;	
	box-shadow:
		0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
		0px 0px 0px 3px rgb(254, 254, 254);
	transition: all 0.2s linear;
}
#wrapper p.button{
	background-image:none;
}
#wrapper p.button input:hover{
	background: #f7802f;
	opacity:0.5;
}
#login{
	position: absolute;
	top: 100px;
	width: 88%;	
	padding: 18px 6% 60px 6%;
	margin: 0 0 35px 0;
	background: rgb(247, 247, 247);
	border-radius: 5px;
	background-color:rgba(36,162,203,0.48);
	z-index: 22;
	border: solid 2px white;
	color: white;
}
.user_icon{ position:relative; top:38px; left:-122px; }
.password_icon{ position: relative; top: 38px; left: -74px; }

.footer_table{position: fixed; bottom: 0px;height:60px;table-layout:fixed;overflow:scroll;}

#wrapper p.button input:active,
#wrapper p.button input:focus{
                background: #f7802f;
                position: relative;
                top: 1px;
                border: 1px solid rgb(12, 76, 87);              
                box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
#wrapper p.button input:not(:active){
                background: #f7802f;
                position: relative;
                top: 1px;
                border: 1px solid rgb(12, 76, 87);              
}

p.login.button,
p.signin.button{
                text-align: right;
                margin: 5px 0;
}
.animate{
                animation-duration: 0.5s;
                animation-timing-function: ease;
                animation-fill-mode: both;
}
@keyframes fadeInLeft {
                0% {
                               opacity: 0;
                               transform: translateX(-20px);
                }
                
                100% {
                               opacity: 1;
                               transform: translateX(0);
                }
}
.icon:after {
    content: '\e800';
                color: rgb(106, 159, 171);
    position: absolute;
    top: 35px;
    left: 10px;
    width: 30px;
}
                
.user_icon{
                position: absolute;
    left: 37px;
    top: 111px;    
}
.password_icon{
                position: absolute;
    left: 38px;
    top: 180px;    
}
.footer,
.footer>a,
.footer>td{
                color:yellow;
}
.loginBoxes{
                margin-top: 1%;
}