/* 
login.php
 */

/*

*/

.col
	{
	/* -------------- debug -------------- */
	/*
	background-color:#c0e9bf;
	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;
	border-style:solid;
	border-width:1px;
	border-color:#a3daa2;
	*/
	}



/* =========================== */

div.content
	{
	background:rgb(242, 242, 242)!IMPORTANT;
	}

/* 
=============================
login back ground images
============================= 
*/


div#wrapper
	{
	/*background:url("/images/background/background01.png");*/
	background:url("/images/background/activeHerdBanner.jpg");
	background-position:center center;
	background-size:cover;
	}

/* 
======================
login panel (main panel)
======================
*/

/* login*/
div.panel.login
	{
	display:block;
	position:absolute;

	width:300px;
	/*  center our panel */
	left:50%;
	margin-left:calc(-300px / 2);

	/* set our padding */
	/*padding-top:48px;
	padding-top:24px;
	padding-bottom:24px;
	padding-left:24px;
	padding-right:24px;*/

	/*background:rgb(255, 253, 253)!IMPORTANT;*/
	/*background:url("/images/glow240x240.png") center -70px no-repeat, #cc0000!IMPORTANT;*/

	background:#cc0000!IMPORTANT;
	background:yellow!IMPORTANT;
	background:#000000!IMPORTANT;
	color:#ffffff;

	/* shadow */
	-webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.3);
	box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.3);
	}


img#activeHerdLogoLogin
	{
	display:block;
	position:relative;

	width:205px;

	/*  center our img */
	left:50%;
	margin-left:-102px;

	margin-top:25px;
	margin-bottom:25px;
	}


/* 
=================
form 
=================
*/

.formSubmitResponse
	{

	}

div.formSubmitResponse.nOk
	{
	/*background:url('/images/icons/explainationMarkWhite21x18.svg') 6% center / 21px 18px no-repeat, #cc0000!IMPORTANT;*/
	background:url('/images/icons/explainationMarkBlack21x18.svg')6% 23px / 21px 18px no-repeat, rgb(255, 230, 0)!IMPORTANT;
	color:#000000;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;

	-webkit-border-radius:0px!IMPORTANT;
	-moz-border-radius:0px!IMPORTANT;
	border-radius:0px!IMPORTANT;

	-webkit-box-shadow:		0px 0px 0px 0px rgba(0, 0, 0, 0);
    -moz-box-shadow:			0px 0px 0px 0px rgba(0, 0, 0, 0);
    box-shadow:					0px 0px 0px 0px rgba(0, 0, 0, 0);

	border-top-style:solid;
	border-top-width:0px;
	border-top-color:#ffcccc;
	border-top-color:#ffffff;

	/*border: 1px solid rgb(255, 255, 255);*/

	padding-top:6%;
	padding-bottom:6%;
	padding-left:19%;
	padding-right:19%;

	margin-bottom:0px!IMPORTANT;
	}


div.form#formLogin
	{
	background:#ffffff;

	padding:0px;

	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	}



#submitFormLogin
	{
	display:block;
	position:relative;
	float:left;
	width:100%;

	color:#ffffff;

	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;

	padding-top:20px;
	padding-bottom:20px;

	margin-left:0px;
	}



/* ======================================= 

form save

	DEFAULT SETTINGS to override

	padding:10px!IMPORTANT;

	padding-left:40px!IMPORTANT;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	box-sizing:					border-box;

	border: 1px solid rgb(0, 153, 51);

	color:#ffffff;

	line-height:20px;

	background: url('/images/icons/formSubmitResponseTick.svg') 10px 10px / 21px 18px no-repeat, rgb(0, 204, 0)!IMPORTANT;

	-webkit-border-radius:0px;
	-moz-border-radius:0px;
	border-radius:0px;

	z-index:200;

	margin-bottom:10px;

========================================= */

div.form.save#formLogin
	{

	display:block;
	position:relative;
	float:left;
	width:100%;
	height:0px;

	/*
	padding-top:15px;
	padding-bottom:15px;
	padding-left:40px;
	padding-right:15px;

	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;

	background: #30c928;
	background:url('/images/icons/formSubmitResponseTick.svg') 10px center / 21px 18px no-repeat,-moz-linear-gradient(top,  #30c928 0%, #008437 100%);
	background:url('/images/icons/formSubmitResponseTick.svg') 10px center / 21px 18px no-repeat,-webkit-gradient(linear, left top, left bottom, color-stop(0%,#30c928), color-stop(100%,#008437));
	background:url('/images/icons/formSubmitResponseTick.svg') 10px center / 21px 18px no-repeat, -o-linear-gradient(top,  #30c928 0%,#008437 100%);
	background:url('/images/icons/formSubmitResponseTick.svg') 10px center / 21px 18px no-repeat,linear-gradient(to bottom,  #30c928 0%,#008437 100%);

	color:#ffffff;

	*/


	/* need these to override default styles */
	background: url('') 10px 10px / 21px 18px no-repeat, transparent !IMPORTANT;
	border: 0px solid transparent!IMPORTANT;
	padding:0px!IMPORTANT;
	margin:0px!IMPORTANT;


    -webkit-animation: closediv 0.75s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: closediv 0.75s; /* Firefox < 16 */
        -ms-animation: closediv 0.75s; /* Internet Explorer */
         -o-animation: closediv 0.75s; /* Opera < 12.1 */
            animation: closediv 0.75s;
	}



/* ======================================= 

animation

========================================= */
@keyframes closediv 
	{
    from 
		{ 
		height:163px;
		}
    to   
		{ 
		height:0px;
		}
	}


/* Firefox < 16 */
@-moz-keyframes closediv 
	{
    from 
		{ 
		height:163px;
		}
    to   
		{ 
		height:0px;
		}
	}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes closediv 
	{
    from 
		{ 
		height:163px;
		}
    to   
		{ 
		height:0px;
		}
	}

/* Internet Explorer */
@-ms-keyframes closediv 
	{
    from 
		{ 
		height:163px;
		}
    to   
		{ 
		height:0px;
		}
	}

/* Opera < 12.1 */
@-o-keyframes closediv 
	{
    from 
		{ 
		height:163px;
		}
    to   
		{ 
		height:0px;
		}
	}


/*
=================
inputs 
=================
*/

/* default */
input#userName,
input#password
	{
	/* padding-top:19px;
	padding-bottom:19px;
	padding-left:40px;
	padding-right:40px; */

	/*line-height:35px;*/

	/*padding-top:5px;
	padding-bottom:5px;
	padding-left:5px;
	padding-right:5px; */

	/* padding: 19px 40px 19px 40px; */

	/* padding: 10% 10% 10% 10%; */

	padding-top:6%;
	padding-bottom:6%;
	padding-left:19%;
	padding-right:19%;

	/* padding-top:1px;
	padding-bottom:1px; */


	
	/* padding-top:19px;
	padding-bottom:19px; */

	/*padding-left:40px;
	padding-right:40px;
    height:48px;

	border-color:#d8d8d8;
	border-width:2px;*/

	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;

	border-width:0px;
	}

/* focus */
input#userName:focus,
input#password:focus
	{
	/*border-color:#009ee0;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0);
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0);
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0);
	}

/* validation ok */
input#userName.validationOk,
input#password.validationOk
	{
	/*border-color:#d8d8d8;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0);
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0);
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0);
	}

input#userName.validationOk:focus,
input#password.validationOk:focus
	{
	/*border-color:#009ee0;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0);
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0);
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0);
	}

/* validation not ok */
input#userName.validationNok,
input#password.validationNok
	{
	/*border-color:red;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0);
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0);
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0);
	}

input#userName.validationNok:focus,
input#password.validationNok:focus
	{
	/*border-color:#009ee0;*/

	/* NO GLOW! */
	-webkit-box-shadow:	0px 0px 20px rgba(0, 0, 0, 0);
	-moz-box-shadow:		0px 0px 20px rgba(0, 0, 0, 0);
	box-shadow:				0px 0px 20px rgba(0, 0, 0, 0);
	}


/*
=================
forgot password
=================
*/
/*
a#forgotPasswordLink
	{
	float:right;

	font-family: arial, helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align: center;
	color:#009ee0;
	}

a#forgotPasswordLink:hover
	{
	text-decoration: underline;
	}
*/



/*
=================
strike through 

technique:
http://jsfiddle.net/z8Hnz/
=================
*/
/*
div#orSignInWith
	{
	width:100%;
	background:transparent;
	font-family: arial, helvetica, sans-serif;
	font-size:10px;
	font-weight:normal;
	text-align:center;
	color:#808080;
	}

div#orSignInWith.strike 
	{
	display: block;
	text-align: center;
	overflow: hidden;
	white-space: nowrap; 
	}

div#orSignInWith.strike > span 
	{
	position: relative;
	display: inline-block;
	}

div#orSignInWith.strike > span:before,
div#orSignInWith.strike > span:after 
	{
	content: "";
	position: absolute;
	top: 60%;
	width: 9999px;
	height: 1px;
	background:#808080;
	}

div#orSignInWith.strike > span:before 
	{
	right: 100%;
	margin-right: 4px;
	}

div#orSignInWith.strike > span:after 
	{
	left: 100%;
	margin-left: 4px;
	}
*/
/* 
=================
alternativeSignInPos 
=================
*/
/*
div.alternativeSignInPos
	{
	display:inline-block;
	width:calc(50% - 5px);
	background:#d8d8d8;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;

	-moz-box-sizing:		border-box;
	-webkit-box-sizing:		border-box;
	-ms-box-sizing:			border-box;
	box-sizing:					border-box;

	font-family: arial, helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align: center;
	color:#ffffff;

	margin:0px;
	margin-right:0px!IMPORTANT;
	padding:10px;

	cursor:pointer;
	}
*/
/* first two (in order for nth to work, needs a wrap) */
div.alternativeSignInPos:nth-of-type(-n+2)
	{
	/*
    background-color:red;
	color:green;
	*/

	/*margin-bottom:10px;*/
	}

/* every two */
div.alternativeSignInPos:nth-child(2n) 
	{  
	/* or 2n+1 */	
	/*float:right;*/
	}

/* hover */
div.alternativeSignInPos:hover
	{
	/*background:#c2c2c2;*/
	}