@CHARSET "UTF-8";



/*#mainlogin*/
.login-win{
  	text-decoration: none;

}

.middle {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	display: table-cell;
    vertical-align: middle;
}

.div-image{
    display: table-caption;
    position: absolute;
    width: 98%;
    horizontal-align:center;
}

.img-header{
	opacity: 0.9; 
	border-radius: 40px 40px 40px 40px;
	margin-top: 5px;
	margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
 	background-image: -webkit-linear-gradient(top, #1f628d, #eff3f6);
  	background-image: -molinear-gradient(top, #1f628d, #eff3f6);
  	background-image: -ms-linear-gradient(top, #1f628d, #eff3f6);
  	background-image: -o-linear-gradient(top, #1f628d, #eff3f6);
  	background-image: linear-gradient(to bottom, #1f628d, #eff3f6);
  	horizontal-align:center;
}

.login-div
{
	padding: 40px 20px 20px 20px;
	margin-left: auto;
    margin-right: auto; 
	display:inline-block;
	border: solid #1f628d 5px;
	background: #ffffff;
	opacity: 0.9;
	text-align: center;
	horizontal-align:center;
	vertical-align:middle;   
}

.loginheader {
    font-family : sans-serif;
	font-weight: bold;
/*	line-height: 17px;
	font-size: 18px;*/
	text-align: left;
}

.error-div
{
    display: table-cell;
	margin-left: auto;
    margin-right: auto; 
/*	display:inline-block;*/
	border: solid #1f628d 5px;
	background: #ffffff;
	opacity: 0.7;
	text-align: center;
	horizontal-align:center;
	vertical-align:middle;   
}

.errorheader1 {
   	font-family : sans-serif;
	color: #000000;
	font-weight: bold;
/*	line-height: 17px;
	font-size: 25px;*/
	text-align: center;
}

.errorheader2 {
   	font-family : sans-serif;
	color: #000000;
	font-weight: bold;
/*	line-height: 17px;
	font-size: 20px;*/
	text-align: center;
}

.inputbox{
	font-family : courier;
    border: solid #8e8d8b 1px;
	border-radius: 1px;	
  	text-decoration: none;
	text-shadow: none;
	background-color: #FFFFFF;
	opacity: 1;
	color: #000000;
/*	width: 240px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;  /*top right bottom left*/ */
}

.green{
    font-family : sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	background-color: #7ab42c;
    background-image : none;
    background-position : center center;
	text-shadow: none;    
	border-radius: 1px 1px 1px 1px;
  	background: #79b42c;
  	background-image: -webkit-linear-gradient(top, #79b42c, #629126);
  	background-image: -molinear-gradient(top, #79b42c, #629126);
  	background-image: -ms-linear-gradient(top, #79b42c, #629126);
  	background-image: -o-linear-gradient(top, #79b42c, #629126);
  	background-image: linear-gradient(to bottom, #79b42c, #629126);
  	-webkit-border-radius: 1;
  	-moborder-radius: 1;
  	text-decoration: none;
/*  	
	width: 250px;
	line-height: 17px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;*/
}
.green:hover {
  	background: #629126;
  	background-image: -webkit-linear-gradient(top, #629126, #36540f);
  	background-image: -molinear-gradient(top, #629126, #36540f);
  	background-image: -ms-linear-gradient(top, #629126, #36540f);
  	background-image: -o-linear-gradient(top, #629126, #36540f);
  	background-image: linear-gradient(to bottom, #629126, #36540f);
  	text-decoration: none;
}

.green:disabled,
.green[disabled]{
  	text-decoration: none;	
	background-color: #d3d3d3; 
 	background-image: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#707070));
 	background-image: -webkit-linear-gradient(top, #d3d3d3, #707070);
  	background-image: -molinear-gradient(top, #d3d3d3, #707070);
 	background-image: -moz-linear-gradient(top, #d3d3d3, #707070);
 	background-image: -ms-linear-gradient(top, #d3d3d3, #707070);
 	background-image: -o-linear-gradient(top, #d3d3d3, #707070);
 	background-image: linear-gradient(to bottom, #d3d3d3, #707070);
 	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#d3d3d3, endColorstr=#707070);
}

.table-style{
    padding-top:5px;
}

#div2
{
   transform:rotate(30deg);
   -ms-transform:rotate(30deg); /* IE 9 */
   -moz-transform:rotate(30deg); /* Firefox */
   -webkit-transform:rotate(30deg); /* Safari and Chrome */
   -o-transform:rotate(30deg); /* Opera */
   background-color:yellow;
}

div.bg {
    /* The image used */
    background-image: url("../IMG/IMG_3806.JPG");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

img.bg {
  /* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;
	
  /* Set up proportionate scaling */
	width: 100%;
	height: auto;
	
  /* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0.5;
/*	background-image: url(../IMG/IMG_3806.JPG);*/
    background-position: center center;
    background-size: cover;
/*    background-size: 100%;*/
    background-repeat: no-repeat;
}


.or {
    font-family : sans-serif;
    color: #8e8d8b;
	font-size: 14px;
	font-style: italic;
    color: #8e8d8b;
	line-height: 20px;
}

.vline {
  	background: #555555;
  	background-image: -webkit-linear-gradient(left, #555555, #c6c7c6);
  	background-image: -molinear-gradient(left, #555555, #c6c7c6);
  	background-image: -ms-linear-gradient(left, #555555, #c6c7c6);
  	background-image: -o-linear-gradient(left, #555555, #c6c7c6);
  	background-image: linear-gradient(to right, #555555, #c6c7c6);
}


body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.background {
    /* The image used */
    background-image: url("../IMG/IMG_4099.JPG");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#copy { 
    font-family : sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	position: absolute; 
}

.error { border: 1px solid red; }

.debug-div
{
    display: block;
/*	display: table-cell;*/
	margin-top: 30px;
	margin-left: 10px;
    margin-right: 10px; 
	border: solid #1f628d 1px;
	background: #ffffff;
	opacity: 0.7;
	text-align: left;
	horizontal-align:center;
	vertical-align:bottom;   
	font-family : sans-serif;
	font-size: 10px;
	padding-left: 5px;
	padding-right: 5px;
}

meter.meter-password  {
    /* Reset the default appearance */
/*    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; */
    
    margin: 0 auto 0.4em;
	width: 100%;/*250px;*/ /*100%;*/
	height: .5em;

    /* Applicable only to Firefox */
	background: none;
	background-color: rgba(0,0,0,0.1);
}

meter::-webkit-meter-bar {
	background: none;
	background-color: rgba(0,0,0,0.1);
	
    background: #EEE;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset;
    border-radius: 3px;	 
}

meter[value="1"]::-webkit-meter-optimum-value { background: red; box-shadow: 0px -5px 5px -2px #850202 inset;border-radius: 0px; }
meter[value="2"]::-webkit-meter-optimum-value { background: yellow; box-shadow: 0px -5px 5px -2px #ce9a01 inset;border-radius: 0px; }
meter[value="3"]::-webkit-meter-optimum-value { background: #FFC145; box-shadow: 0px -5px 5px -2px #9C4A0C inset;border-radius: 0px; }
meter[value="4"]::-webkit-meter-optimum-value { background: #A8CC6A; box-shadow: 0px -5px 5px -2px #36540f inset;border-radius: 0px; }

meter[value="1"]::-moz-meter-bar { background: red; box-shadow: 0px -5px 5px -2px #850202 inset;border-radius: 0px; }
meter[value="2"]::-moz-meter-bar { background: yellow; box-shadow: 0px -5px 5px -2px #ce9a01 inset;border-radius: 0px; }
meter[value="3"]::-moz-meter-bar { background: #FFC145; box-shadow: 0px -5px 5px -2px #9C4A0C inset;border-radius: 0px; }
meter[value="4"]::-moz-meter-bar { background: #A8CC6A; box-shadow: 0px -5px 5px -2px #36540f inset;border-radius: 0px; }

.feedback {
	color: #9ab;
	font-size: 90%;
	padding: 0 .25em;
	font-family: Courgette, cursive;
	margin-top: 1em;
}

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}

.container{
  padding-top:50px;
  margin: auto;
}

/*=======================================================================================*/
@media only screen and (min-width: 1024px) { /* Specific to this particular image */
	.login-win{
		display: table;
		position: absolute;
		top: 5px;
		left: 5px;
		height: 99%;
		width: 99%;
		text-align: center;
		border: solid #1f628d 5px;
		border-radius: 60px 60px 60px 60px;
/*		
		margin-left: 5px;
		margin-right: 10px;
		margin-top: 10px;
		margin-bottom: 5px;*/
		}
		
	.loginheader {
		line-height: 17px;
		font-size: 18px;
	}
	
	.login-div
	{
		border-radius: 10px 10px 10px 10px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.errorheader1 {
		line-height: 40px;
		font-size: 35px;
	}

	.errorheader2 {
		line-height: 25px;
		font-size: 16px;
	}

	.error-div
	{
		border-radius: 300px 300px 300px 300px;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.inputbox{
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;  /*top right bottom left*/
		opacity: 1;
/*		width: 240px;*/
		line-height: 17px;
		font-size: 16px;
	}
	
	.green{
		width: 250px;
		font-size: 16px;
		line-height: 17px;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.img-header{
		border-radius: 100px 100px 100px 100px;
		width:370px;
		height:80px;	
/*		padding-left: 50px;
		padding-right: 50px;
		padding-top: 20px;
		padding-bottom: 20px;
		width:250px;
		height:54px;	*/
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	#copy { 
		right: 50px; 
		bottom: 15px; 
		line-height: 17px;
		font-size: 12px;
	}
}


@media only screen and (max-width: 1024px) { /* Specific to this particular image */
	.login-win{
		display: table;
		position: absolute;
		top: 1px;
		left: 1px;
		height: 98%;
		width: 97%;
		text-align: center;
		border: solid #1f628d 5px;
		border-radius: 60px 60px 60px 60px;
/*		margin-left: 1px;
		margin-right: 30px;
		margin-top: 10px;
		margin-bottom: 10px;*/
	}
	.loginheader {
		font-family : sans-serif;
		line-height: 17px;
		font-size: 20px;
	}

	.login-div
	{
		border-radius: 10px 10px 10px 10px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.errorheader1 {
		line-height: 40px;
		font-size: 30px;
	}

	.errorheader2 {
		line-height: 25px;
		font-size: 18px;
	}

	.error-div
	{
		border-radius: 300px 300px 300px 300px;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	.inputbox{
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;  /*top right bottom left*/
		opacity: 1;
/*		width: 230px;*/
		line-height: 14px;
		font-size: 20px;
	}
	
	.green{
		width: 240px;
		font-family : sans-serif;
		font-size: 17px;
		font-weight: bold;
		line-height: 17px;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	img.bg {
		left: 50%;
		margin-left: -512px;   /* 50% */
	}

	.img-header{
		width:250px;
		height:54px;	
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	#copy { 
		line-height: 17px;
		font-size: 12px;
		right: 40px; 
		bottom: 20px; 
	}
}

@media only screen and (max-width: 360px) { /* Specific to this particular image */
	.login-win{
		display: table;
		position: absolute;
		top: 0px;
		left: 0px;
		height: 99%;
		width: 97%;
		text-align: center center;
		border: solid #1f628d 5px;
		border-radius: 20px 20px 20px 20px;
/*		margin-left: 1px;
		margin-right: 30px;
		margin-top: 10px;
		margin-bottom: 10px;*/
	}
	.loginheader {
		font-family : sans-serif;
		line-height: 17px;
		font-size: 20px;
	}
	
	.login-div
	{
		border-radius: 10px 10px 10px 10px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.inputbox{
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;  /*top right bottom left*/
		opacity: 1;
/*		width: 190px;*/
		font-family : courier;
		line-height: 17px;
		font-size: 15px;
	}
	
	.green{
		width: 200px;
		font-family : sans-serif;
		font-size: 15px;
		font-weight: bold;
		line-height: 17px;
		padding-left: 5px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	.img-header{
		width:250px;
		height:54px;	
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	#copy { 
		line-height: 17px;
		font-size: 10px;
		right: 12px; 
		bottom: 12px; 
	}
}

















/*---------------------------------------------------------------------------------*/
/*
.window.login-window{
	height:100%; 
	width:100%;
	border: solid #1f628d 2px;
	border-radius: 40px 40px 40px 40px;
  	background: #1f628d;
  	background-image: -webkit-linear-gradient(top, #1f628d, #6fbbeb);
  	background-image: -molinear-gradient(top, #1f628d, #6fbbeb);
  	background-image: -ms-linear-gradient(top, #1f628d, #6fbbeb);
  	background-image: -o-linear-gradient(top, #1f628d, #6fbbeb);
  	background-image: linear-gradient(to bottom, #1f628d, #6fbbeb);
  	text-decoration: none;
}
<!-- 
  padding: 10px 20px 10px 20px;
  border: solid #1f628d 2px;
  -webkit-border-radius: 40;
  -moborder-radius: 40;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;


	background: #656162
  	background-image: -webkit-linear-gradient(top, #79b42c, #629126);
  	background-image: -molinear-gradient(top, #79b42c, #629126);
  	background-image: -ms-linear-gradient(top, #79b42c, #629126);
  	background-image: -o-linear-gradient(top, #79b42c, #629126);
  	background-image: linear-gradient(to bottom, #79b42c, #629126);
  	text-decoration: none;
 -->
.window.logo-window{
	height:100%; 
	width:100%;
	border: solid #1f628d 2px;
	border-radius: 10px 10px 10px 10px;
	background: #1f628d;
  	background-image: -webkit-linear-gradient(top, #79b42c, #629126);
  	background-image: -molinear-gradient(top, #79b42c, #629126);
  	background-image: -ms-linear-gradient(top, #79b42c, #629126);
  	background-image: -o-linear-gradient(top, #79b42c, #629126);
  	background-image: linear-gradient(to bottom, #79b42c, #629126);
  	text-decoration: none;
}
.window-caption.window-caption .caption.window-caption .caption-image.window-caption{
	height:100%; 
	width:10%;
	border-radius: 40px 40px 40px 40px;
	border: solid #ff0000 2px;
  	background: #1f628d;
  	background-image: -webkit-linear-gradient(top, #1f628d, #6fbbeb);
  	background-image: -molinear-gradient(top, #1f628d, #6fbbeb);
  	background-image: -ms-linear-gradient(top, #1f628d, #6fbbeb);
  	background-image: -o-linear-gradient(top, #1f628d, #6fbbeb);
  	background-image: linear-gradient(to bottom, #1f628d, #6fbbeb);
  	text-decoration: none;
	
}

.logo-div{
	display:inline-block;
	horizontal-align:center;
	border-radius: 10px 10px 10px 10px;
	border: solid #1f628d 5px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	align: center;
	text-align: center;
	vertical-align:middle;
}
.div.login-div{
	display:inline-block;
	vertical-align:middle;
	horizontal-align:center;
	border-radius: 10px 10px 10px 10px;
	border: solid #1f628d 5px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 40px;
	padding-bottom: 20px;
	align: left;
	text-align: left;
}
.div.separator{
	align: center;
	vertical-align:middle;
	text-align: center;
}
.div.separator-kid {
  	position: absolute;
  	top: 50%;
  transform: translateY(-50%);
}
.label.loginheader {
    font-family : sans-serif;
	font-weight: bold;
	line-height: 17px;
	font-size: 18px;
	text-align: left;
}
.label.log {
    font-family : sans-serif;
	font-size: 10px;
}
.label.or {
    font-family : sans-serif;
    color: #8e8d8b;
	font-size: 14px;
	font-style: italic;
    color: #8e8d8b;
	line-height: 20px;
}
.green{
	width: 250px;
    font-family : sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 17px;
	background-color: #7ab42c;
    background-image : none;
    background-position : center center;
	text-shadow: none;    
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 1px;
  	background: #79b42c;
  	background-image: -webkit-linear-gradient(top, #79b42c, #629126);
  	background-image: -molinear-gradient(top, #79b42c, #629126);
  	background-image: -ms-linear-gradient(top, #79b42c, #629126);
  	background-image: -o-linear-gradient(top, #79b42c, #629126);
  	background-image: linear-gradient(to bottom, #79b42c, #629126);
  	-webkit-border-radius: 1;
  	-moborder-radius: 1;
  	text-decoration: none;
}
.green:hover {
  	background: #629126;
  	background-image: -webkit-linear-gradient(top, #629126, #36540f);
  	background-image: -molinear-gradient(top, #629126, #36540f);
  	background-image: -ms-linear-gradient(top, #629126, #36540f);
  	background-image: -o-linear-gradient(top, #629126, #36540f);
  	background-image: linear-gradient(to bottom, #629126, #36540f);
  	text-decoration: none;
}
.toolbarbutton.forgot{
  	background: transparent;
  	border: none #1f628d 0px;
  	text-decoration: none;
  	text-color: #FF0000;
  	font-color: #cfcfcf;
  	color: #FF0000;
  	text-shadow: none; 
}
.toolbarbutton.forgot:hover{
    font-family : verdana;
  	background: transparent;
  	border: none #1f628d 0px;
  	text-decoration: none;
  	text-color: #FF0000;
    color: #8e8d8b;
}
.textbox.login-info{
    font-family : courier;
	border-radius: 1px;	
}
.checkbox.check-remember{
    font-family : verdana;
    display:inline-block;
    width:150px;
    height:19px;
    vertical-align:middle;
    cursor:pointer;
    color: #8e8d8b;
    font-size: 12px;
}
.checkbox.check-remember:checked{
}
.checkbox-text.check-remember{
	font-family: verdana;
	color: #cfcfcf;
    font-size: 6px;
    font-color: #cfcfcf;
}
.checkbox-over.check-remember {
	background-color: green;
}
.checkbox-down.check-remember {
	background-color: red;
}
.checkbox-checked.check-remember  {
	background-color: black;
}
.blue1{
	background-color: #3cb0fd;
}
.blue2{
	background-color: #3498db;
}
<!--
greys: 
cac7c2
c4bfb9
8e8d8b
656162
 -->




*/