/*
Theme Name: WorkBook14
Description: Work book for working dynamically with excel spread sheets at feeding DB
Version: 1.4w
Author: BLE Solutions LLC
Author URI: http://www.blesolutions.com
Date: August 8/2017
*/

/* the base font size for the whole document */
body {
	font-size: 62.5%;
	height: 100%;
}

/*For menu at the header */
.style1 {
	font-family: "Adobe Garamond Pro";
	font-size: 2.2em;
	color:#495561;
	text-decoration: none;
	text-align: justify; 
	/*background-color: white;*/
	/*display: inline-table;*/
}

/*For content index page the description */
.style2 {
	font-family: "Adobe Garamond Pro";
	font-size: 4em;
	color:#495561;
	text-decoration: none;
	text-align: justify;
}

/*for inside of the form of sign in*/
.style22 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 2.5em;
	color:#495561;
	text-decoration: none;
	text-align: left;
}

/*For the footer*/
.style3 {
	font-family: "Adobe Garamond Pro";
	font-size: 1.9em;
	color: white;
	text-decoration: none;
	text-align: center;
}

/* for the logo IRH */
.style4 {
	font-family: "Consolas", Monaco, monospace;
	font-size: 5.5em;
	font-weight: bold;
	color:#009900;    /* midle tone green */
	text-decoration: none;
	text-align: justify;

}

/* for the logo part "survey's workbook" */
.style5 {
	font-family: "Adobe Garamond Pro";
	font-size: 3em;
	font-style: italic;
	color:#495561;
	text-decoration: none;
	text-align: justify;
}

#header {
	background-color: #80c1ff;  /* light blue */
	height: auto;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	display: inline-table;
}

#header #hdcontent {
	/*background-color: #ff704d;  pale orange for maintenance */
	width: 95%;
	height: auto;
	margin-left: 2.5%;
	padding-top: 10px;
	display: inline-table;
}

#header #hdcontent #bookPic {
	/*background-color: blue;*/
	position: relative;
	margin-left: 9%;
	width: 5.8%;
	padding-bottom: 4.1%;
	height: 0;
	float: left;
	display: inline-table;
}

#header #hdcontent #bookPic img{
	position: absolute;
	width: 100%;
    height: 100%;
    left: 0;
	top: 0;
}

#header #hdcontent #menu {
	/*background-color: pink;*/
	margin-left: 7%;
	margin-top: 30px;
	width: auto;
	height: auto;
	float: left;
	display: inline-table;	
}



#holderSignIn {
	background-color: #9DEB9D;  /* soft green #9DEB9D*/
	height: 500px;
	width: 100%;
	padding-top: 50px;
	display: inline-table;
}

#holderSignIn #signTxt {
	background-color: #66ff66;  /* stronger green #9DEB9D*/
	height: 400px;
	width: 38%;
	border:medium #edf2f7 outset;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	margin-left: 5%;
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 10px;
	padding-bottom: 10px;
	float: left;
	display: inline-table;
}

#holderSignIn #signIn {
	background-color: #66ff66;  /* stronger green #9DEB9D*/
	height: 400px;
	width: 38%;
	border:medium #edf2f7 outset;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	margin-left: 5%;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 2%;
	padding-right: 2%;
	margin-bottom: 50px;
	float: left;
	display: inline-table;
}

/*the form*/
#holderSignIn #signIn form#sgForm {
	/* background-color: yellow; */
	width: 100%;
	padding-top: 50px;
}

/*
#holderSignIn #signIn form#sgForm #spacer2 {
	background-color: red;
	width: 100%;
	height: 1px;
	display: inline-table;
} */

/* cells inside of the sign in form for email */
#holderSignIn #signIn form#sgForm input#cell {
	background-image:url('images/users.png');
	
	background-repeat:no-repeat;
 	background-attachment:relative;
	background-position: left;
	background-size: 50px 50px;
	
	
	background-color: #d4e6f7; /* #d4e6f7 soft blue sky */
	width: 70%;
	height: auto;
	margin-left: 9%;
	margin-bottom: 1.8em;
	padding: 0.5em;
	padding-left: 60px;
	color: #495561;
	display: inline-table;
}

/* cells inside of the sign in form for password */
#holderSignIn #signIn form#sgForm input#cell2 {
	background-image:url('images/key.png');
	background-repeat:no-repeat;
 	background-attachment:relative;
	background-position: left;
	background-size: 50px 50px;
	
	
	background-color: #d4e6f7; /* #d4e6f7 soft blue sky */
	width: 70%;
	height: auto;
	margin-left: 9%;
	margin-bottom: 1.8em;
	padding: 0.5em;
	padding-left: 60px;
	color: #495561;
	display: inline-table;
}

/*to modify properties of the button into the form*/
#holderSignIn #signIn form#sgForm input#btn1 {
	font-family: "Adobe Garamond Pro";
	font-size: 3em;
	color: #EBEBEB;	      /*color gray close to white*/ 
	width: 84%;
	background-color: #596AE1;
	line-height: 2em;   /* it was 161% */
	text-align: center;
	border: none;
	margin-left: 9%;
	display: inline-table;
}

#holderSignIn #signIn form#sgForm input#btn1:hover {
	background-color: #1E1EA4; 	/*dark blue*/ 
	color: white;	             /*characters white*/
}

/* for informing/warning user of no-match and halting for 10 min */
#holderSignIn #signIn #notifW {
	background-color:#FDE9E6 ;   /*for OS that do not support gradient*/
	/*nice background for supporting all OS*/
	background:-webkit-linear-gradient(left top,rgba(255,0,0,0.2), white); /*Safari 5.1-6*/
	background:-o-linear-gradient(bottom right,rgba(255,0,0,0.2), white); /*Opera 11.1-12*/
	background:-moz-linear-gradient(bottom right,rgba(255,0,0,0.2), white); /*Fx 3.6-15*/
	background: linear-gradient(to bottom right, rgba(255,0,0,.2), white); /*My os*/
	height: auto;
	width: 50%;				/*not 35% to fit the borders*/
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: 10%;
	display: none;
	float: left;
}

/* for the anchor 'forgot password?' */
#holderSignIn #signIn a#ps {
	font-family: "Adobe Garamond Pro";
	font-size: 1.8em;
	color:#495561;
	text-decoration: none;
	float: right;
	background: none;
	border: none;
	margin-top: 40px;
	margin-right: 10px;
}

#holderSignIn #signIn a#ps:hover {
	color: #1E1EA4; 	/*dark blue*/ 
}


/* for notification to user when trying to retreive forgoten password */
#holderSignIn #signIn #notif {
	background-color:#FDE9E6 ;   /*for OS that do not support gradient*/
	/*nice background for supporting all OS*/
	background:-webkit-linear-gradient(left top,rgba(255,0,0,0.2), white); /*Safari 5.1-6*/
	background:-o-linear-gradient(bottom right,rgba(255,0,0,0.2), white); /*Opera 11.1-12*/
	background:-moz-linear-gradient(bottom right,rgba(255,0,0,0.2), white); /*Fx 3.6-15*/
	background: linear-gradient(to bottom right, rgba(255,0,0,.2), white); /*My os*/
	height: auto;
	width: 50%;				/*not 35% to fit the borders*/
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 10px;
	padding-bottom: 10px;
	display: none;  
	margin: 2px;
	float: right;
}

/* form for 'forget password?' */
#holderSignIn #signIn #notif form#forg {
	/*background-color: orange;*/
	margin-top: 15px;
}

#holderSignIn #signIn #notif form#forg input#cell3{
	background-color: #d4e6f7; /* #d4e6f7 soft blue sky */
	font-size: 0.9em;
	width: 90%;
	height: auto;
	padding: 0.3em;
	color: #495561;
	display: inline-table;
}

/* for button 'Find Password' */
#holderSignIn #signIn #notif form#forg input#ps {
	font-family: "Adobe Garamond Pro";
	font-size: 1.6em;  /* being multiplied cause parent using style1 2.2em */
	color:#495561;
	text-decoration: none;
	background: none;
	border: none;
	margin-top: 15px;
	margin-left: 0px;
	padding-left: 0px;
}

#holderSignIn #signIn #notif form#forg input#ps:hover {
	color: #00FF00; /*green fluorencent*/
}

#footer {
	background-color: #001a33; /* dark blue */
	height: 80px;
	width: 100%;
	padding-top: 20px;
}

#footer a {
		color: #36c1af;
		text-decoration: none;
}

#footer a:hover {
	color: #04f9d9;
}

#footer a:visited { 
    color: #36c1af;
} 

/*the filler for the rest of the page in position fixed*/
#filler {
	background-color: #001a33;
	background-position: left;
	width: 100%;
	/*height: auto;*/  
	/*parameters to extend it the size of screen in each computer*/
	height: 100%;
	position: fixed;
}

/* $$$$$$$$$$$$$$$$$$$$$ for items that can be used in multiples areas $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

#spacer2 {
	/*background-color: red; */
	width: 100%;
	height: 1px;
	display: inline-table;
}

/*closing button form the whole system of displaying the intro video*/
a#closDiv {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 23px;
	color:#495561;
	text-decoration: none;
	background-color: #FFC2BD; /*pale pink*/
	border: none;
	float: right;
	padding-left: 17px;
	padding-right: 17px;
	padding-bottom: 5px;
}

a#closDiv:hover {
	background-color: #FF5555; /*almost red*/
	color: white;
	-webkit-box-shadow: 0px 0px 8px rgba(232, 0, 0, 0.9);
	-moz-box-shadow: 0px 0px 8px rgba(232, 0, 0, 0.9);
	box-shadow: 0px 0px 8px rgba(232, 0, 0, 0.9);
}

* {
	margin: 0px;
}