/**************************HTML & BODY*********************************************/

html,body
{
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    overflow-x: hidden; 
	font-size: 40px;
}

h1 {
float: left;
margin: 20px 0px 0px 40px;
font-family: mistral, cursive;
color: #013c76;
font-size: 30px;

}

h3 {
font-family: mistral, cursive;
color:#013c76;
font-size: 25px;
}

i {
	color: red;
}

table {
border-spacing:0px 0px;
text-align: center;
}

th {
background: rgb(149, 198, 60);
}

td {
border: solid 1px;
border-color: #013c76;
}





/**********************MAIN NAVIGATION*******************************************/
#main-navigation {
	display: none;
}

#main-navigation-mobile{
position: relative;
z-index:100;
width: 100%;
background-color:  #013c76; /*Dark blue color*/
text-align: center;
border-top: solid 3px;
border-color: rgb(149, 198, 60); /*Green color*/
}

#main-navigation-mobile ul {
position: relative;
width: 100%;
list-style: none;
z-index: 100;
display: inline-table;
background-color:  #013c76; /*Dark blue color*/
margin: 0 0;
padding: 0;
z-index:100;
}

#main-navigation-mobile ul ul{
display:none;
position: relative;
top: 9px;
z-index:100;
max-width: 100%;

}

#main-navigation-mobile ul ul li{
float: none; 
position: relative;
z-index:100;
width: 100%;
}

#main-navigation-mobile ul li {
float: left;
max-width: 100%;
width: 100%;
left: 0;
padding: 9px 0px 9px 0px;
z-index:100;
}

#main-navigation-mobile ul li a{
display: block;
width: 100%;
font-size: 1.2em;
text-decoration: none;
text-align: center;
color: white;
z-index:100;
}

#main-navigation-mobile ul li:hover{
background: rgb(149, 198, 60); /*Green color*/
}

#main-navigation-mobile ul li:hover > a {
color: #013c76; /*Dark blue color*/
}





/********************************SIDE NAVIGATION****************************/
#employee-side-nav{
float: left;
z-index:100;
width: 100%;
background-color:  #013c76; /*Dark blue color*/
text-align: center;
border-top: solid 3px;
border-color: rgb(149, 198, 60);

}

#employee-side-nav ul {
position: relative;
width: 100%;
list-style: none;
z-index: 100;
display: inline-table;
background-color:  #013c76; /*Dark blue color*/
margin: 0 0;
padding: 0;
}

#employee-side-nav ul li {
float: left;
width: 50%;
left: 0;
padding: 0;
}

#employee-side-nav ul li:hover{
background: rgb(149, 198, 60); /*Green color*/
}

#employee-side-nav ul li:hover > a {
color:  white;
}

#employee-side-nav ul li a {
display: block;
width: 100%;
font-size: 1.2em;
text-decoration: none;
padding: 5px 0px 5px 0px;
text-align: center;
color: white;
}



/**********************MAIN CONTENT WRAPPER**************************************/
#main-content{
position: relative;
margin: 0px auto 0px auto;
width: 100%;
background: white;
max-width: 100%;
min-width: 400px;
}

#push{
	position: relative;
	padding: 55%;
}

#user-status-off{
float: right;
margin: 20px;
z-index: 50;
font-family: mistral, cursive;
font-size: 30px;
}

#user-status-on{
float: right;
margin: 20px;
z-index: 50;
font-family: mistral, cursive;
font-size: 30px;
}









/***************************************IMAGES***********************************/
#logo {
background: black;
width: 100%;
text-align: center;
}

#logo img {
position: relative;
left: 0;	
}

#home-image{
display:none;
}

#services-image-1{
display: none;
	position: relative;
	float:left;
	margin-right: 10px;
	background-color: white;
}

#services-image-2{
display: none;
	float:left;
	margin: 10px 0px 100px 10px;
	background-color: white;
}

#banner {
border: solid 2px;
border-color: white;
}

#banner-images {
display:none;
}

#banner-image-crane{
position: absolute;
top: -8px;
left: 15%;
}

#banner-image-crane-2{
position: absolute;
top: -30px;
left: 72%;
z-index: 100;
}

#logo-3{
display: none;
position: absolute;
left: 275px;
top: 60px;
}

#logo-3-record-shift{
	display: none;
position: absolute;
left: 56%;
top: 115px;
}

#employee-page-logo {
	display: none;
position: absolute;
margin-top: 45%;
margin-bottom: 10%;
left: 4%;
}

#view-shifts-logo{
	display: none;
position: absolute;
top: 250px;
left: 4%;
}

#home-image-1
{
	display: none;
}

#home-image-3
{
	display: none;
}




/***********************************TEXT*****************************************/
#text{
float: left;
clear: left;
margin: 20px;
width: 90%;
padding: 0% 2% 0% 2%;
}

#text-1{
float: left;
clear: left;
margin: 20px;
width: 90%;
padding: 0% 2% 0% 2%;
}

#text-2{
float: left;
clear: left;
margin: 20px;
width: 90%;
padding: 0% 2% 2% 2%;
}




/************************************SITE MAP*********************************/

#site-map{
float: left;
margin: 20px;
}
#site-map li a
{
	color: #013c76; 
	font-size: 25px;
}




/**********************************PRIVACY POLICY******************************/
#privacy-policy
{
	position: relative;
	border: solid 2px;
	border-color: #013c76; 
	padding: 10px;
	font-size: 25px;
}





/***************************************CONTACT ME*****************************/
#contact-first-name{
position: relative;
padding: 0px 50px 0px 0px;
min-width:95%;
left: 0;
}

#first-name{
	min-width: 100%;
	height: 50px;
	font-size: 25px;
}

#second-name{
	min-width: 100%;
	height: 50px;
	font-size: 25px;
}

#email{
	min-width: 100%;
	height: 50px;
	font-size: 25px;
}

#contact-second-name{
position: relative;
padding: 0px 50px 0px 0px;
min-width:95%;
top: 10px;
left: 0;
font-size: 25px;
}

#contact-email{
position: relative;
padding: 0px 50px 0px 0px;
min-width:95%;
top: 25px;
font-size: 25px;
}

#contact-me-form{
float: left;
width: 90%;
padding: 0px 80px 20px 20px;
margin: 20px 0px 0px 0px;
font-size: 25px;
background: rgba(149, 198, 60, 0.3);

}

#contact-me-numbers{
float: left;
padding: 0px 0px 10px 20px;
margin:0px 10px 0px 0px;
min-width: 400px;
max-width: 480px;
font-size: 25px;

}

#contact-enquiry{
	position: relative;
	top: 25px;
	width: 100%;
	padding: 0px 50px 0px 0px;
	font-size: 25px;
}

#registration-buttons{
	position: relative;
	top: 25px;
	width: 95%;
	padding: 0px 50px 0px 0px;
}

#contact-submit-button{
	min-width: 100%;
	height: 100px;
	margin: 0px 0px 5px 0px;
	font-size: 35px;
	background-color: white;
}

#contact-reset-button{
	min-width: 100%;
	height: 100px;
	margin: 0px 0px 20px 0px;
	font-size: 35px;
	background-color: white;
}





/*********************************SERVICES************************************/
#services-text-1{
position: relative;
top: -75px;
float:left;
margin: 75px 10px 50px 10px;
max-width: 100%;
padding: 0% 2% 2% 2%;
font-size: 13pt;
background-color: white;
}

#services-text-2{
position: relative;
top: 0;
float:right;
margin: 75px 10px 50px 10px;
top: -150px;
max-width: 100%;
padding: 2%;
font-size: 13pt;
background-color: white;
}





/******************************MAIL CONFIRM*********************************/
#mail-confirm-message {
position: relative;
left: 25px;
width: 90%;
margin: 50px 0px 25px 0px;
padding: 0px 0px 15px 15px;
}

#email-message{
position:relative;
border: solid 1px;
min-width: 95%;
padding: 0px 50px 0px 0px;
font-size: 25px;
}

#message{
	width: 100%
}





/*****************************EMPLOYEES LOGIN*******************************/
#login {
float: left;
min-width: 95%;
padding: 0px 80px 20px 50px;
background: rgba(149, 198, 60, 0.3);
}

#login-form{
	margin: 0px 50px 0px 0px;
	min-width: 75%;
	font-size: 25px;
	background: rgba(149, 198, 60, 0.3);
	
}

#login-password{
	min-width: 90%;
	height: 50px;
	margin: 10px 10px 10px 0px;
	font-size: 25px;
}

#userName{
	min-width: 90%;
	height: 50px;
	margin: 10px 10px 10px 0px;
	font-size: 25px;	
}

#password{
	min-width: 90%;
	height: 50px;
	margin: 10px 10px 10px 0px;
	font-size: 25px;
}

#submit-login-button
{
	min-width: 95%;
	height: 50px;
	margin: 10px 0px 20px 0px;
	font-size: 35px;
	background-color: white;
}

#forgot-password-login-button
{
	min-width: 95%;
	height: 50px;
	margin: 10px 0px 0px 0px;
	font-size: 35px;
}

.required {
color: red;
}

#required-description-login {
display: none;
}





/************************EMPLOYEES ADMIN************************************/
#add-remove-employee-buttons {
width: 50px;

}

#add-employee-form{
float: left;
width: 90%;
padding: 20px 80px 20px 60px;
background: rgba(149, 198, 60, 0.3);
}

#employee-form-first-name{
float: left;
font-size: 25px;
width: 75%;
margin-top: 20px;
}

#firstName{
	min-width: 100%;
	height: 50px;
	font-size: 25px;
	font-size: 25px;
}

#employee-form-second-name{
float: left;
font-size: 25px;
width: 75%;
margin-top: 20px;
}

#secondName{
	min-width: 100%;
	height: 50px;
	font-size: 25px;
	font-size: 25px;
}

#password{
	min-width: 100%;
	height: 50px;
	font-size: 25px;
}

#employee-form-password{
float: left;
font-size: 25px;
width: 75%;
margin-top: 20px;
}

#submit1{
float: left;
width: 50%;
margin: 10px 0px 10px 0px;
height: 50px;
font-size: 25px;
}

#submit-3{
position: relative;
float: right;
width: 30%;
height: 50px;
font-size: 25px;
}

#submit-2{
position: relative;
float: right;
width: 30%;
height: 50px;
font-size: 25px;
}


#admin-sidepanel-form{
float: left;
width:90%;
background: rgba(1, 60, 118, 0.5);
padding: 20px 80px 200px 60px;
height: 50px;
}

#employee-list{
position: relative;
float:left;
width: 75%;
color: red;
font: .8em bold;
font-size: 25px;
margin: 0px 0px 0px 0px;
}

#admin-table{
float: left;
margin: 20px 5px 20px -50px;
width: 95%;
font-size: 20px;
}
	
#new-job-location{
float: left;
background: rgba(1, 60, 118, 0.5);
padding: 20px 80px 20px 60px;
min-width: 100%;

}

#job-location-list{
float: left;
padding: 20px 80px 20px 60px;
background: rgba(149, 198, 60, 0.3);
overflow-x:scroll;
width: 95%;
}

#job-location-list-select{
float: left;
overflow-x:scroll;
min-width: 125px;
width: 75%;
height: 50px;
}

#add-new-job-location{
width: 100%;

}


#submit-job{
float: left;
width: 35%;
height: 50px;
font-size: 25px;
margin: 10px;
}

#delete-job{
float:left;
width: 35%;
height: 50px;
font-size: 25px;
margin: 10px;
}

#submit-3{
float: left;
width: 50%;
height: 50px;
font-size: 25px;
margin: 10px;
}

#submit-2{
float: left;
width: 50%;
height: 50px;
font-size: 25px;
margin: 10px;
}

#submit-4{
float: left;
width: 50%;
height: 50px;
font-size: 25px;
margin: 10px;
}

#delete-shift-form{
background: rgba(1, 60, 118, 0.5);
padding: 20px 80px 20px 65px;
float: left;
width: 100%;
}

#delete-shifts-button{
float: left;
width: 45%;
height: 50px;
font-size: 25px;

}

/*****************************************EMPLOYEES ADD SHIFT**********************************/	
#job-location-wrapper{
position: relative;
min-width: 50%;
margin: 0px 10px 10px 0px;
font-size: 25px;
}

#job-location{
min-width: 50%;
height: 50px;
font-size: 25px;
background-color: white;
}

#start-date-wrapper{
	float: left;
	font-size: 25px;
	width: 50%;
}

#start-day{
	min-width: 30%;
	height: 50px;
	font-size: 25px;
	background-color: white;
}

#start-month{
	min-width: 30%;
	height: 50px;
	font-size: 25px;
	background-color: white;
}

#start-year{
	min-width: 30%;
	height: 50px;
	font-size: 25px;
	background-color: white;
}

#end-date-wrapper{
	float: right;
	font-size: 25px;
	left: 0;
	min-width: 50%;
	top: 25px;
}

#end-day{
	min-width: 30%;
	height: 50px;
	font-size: 25px;
	background-color: white;
}

#end-month{
	min-width: 30%;
	height: 50px;
	font-size: 25px;
	background-color: white;
}

#end-year{
	min-width: 30%;
	height: 50px;
	font-size: 25px;
	background-color: white;
}

#start-time-wrapper{
float: left;
clear: left;
left: 0;
min-width: 50%;
font-size: 25px;
}

#start-time-hour{
	min-width: 30%;
	height: 50px;
	font-size: 25px;
	background-color: white;
}

#start-time-minute{
	min-width: 30%;
	height: 50px;
	font-size: 25px;
	background-color: white;
}

#end-time-wrapper{
float: right;
left: 0;
min-width: 50%;
font-size: 25px;
}

#end-time-hour{
	min-width: 30%;
	height: 50px;
	font-size: 25px;
	background-color: white;
}

#break-duration-wrapper{
float: left;
min-width: 50%;
font-size: 25px;
}

#break-minutes{
min-width: 30%;
	height: 50px;
	font-size: 25px;
	background-color: white;
}

#end-time-minute{
	min-width: 30%;
	height: 50px;
	font-size: 25px;
	background-color: white;
}

#add-shift-form{
float: left;
padding: 20px 80px 20px 60px;
background: rgba(149, 198, 60, 0.3);
width: 90%;
}

#submit-1{
min-width: 95%;
height: 50px;
font-size: 25px;
background-color: white;
}

#reset-1{
min-width: 95%;
height: 50px;
font-size: 25px;
background-color: white;
}

#employee-options-list{
float: left;
width: 50%;
left: 0;
font-size: 25px;
margin: 0px 10px 40px 10px;

}

#add-shift-submit-button-wrapper{
float: left;
margin: 40px 0px 40px 0px;
left: 0;
min-width: 50%;

}

#start-time-am-pm{
	min-width: 30%;
	height: 50px;
	font-size: 25px;
	background-color: white;
}

#end-time-am-pm{
	min-width: 30%;
	height: 50px;
	font-size: 25px;
	background-color: white;
}

#shift-comments-wrapper{
	float: left;
	margin: 40px 0px 0px 0px;
	left: 0;
	min-width: 85%;
	font-size: 25px;
}




/********************************FEEDBACK MESSAGES************************************/
#incorrect_prompt{
position: absolute;
left: 0;
top: 265px;
z-index: 50;
min-width: 100%;
text-align: center;
margin-left: 0;
background-color: red;
color: white;
height: 20px;
font-size: 20px;
}

#correct_prompt{
position: absolute;
left: 0;
top: 265px;
z-index: 50;
color: white;
min-width: 100%;
text-align: center;
margin-left: 0;
background-color: blue;
color: white;
height: 20px;
font-size: 20px;
}





/*********************************EMPLOYEES VIEW SHIFTS***********************************/
#view-shifts-table{
float: left;
min-width: 95%;
font-size: 18px;
margin: 10px;
}

#shift-table-h3{
display: none;
position: absolute;
left: 140px;
top: -8px;
color: red;
}



/************************************FOOTER************************************/
#footer {
float: left;
width: 100%;
color: white;
background-color: #013c76; /*Dark blue color*/
padding: 0;
text-align: center;
color: #013c76;
font-size: 15px;
}

#footer li {
float: left;
list-style:	none;
width: 10%;
color: white;
}

#footer ul{
width: 100%;
}

#footer a {
color:  white;
}

#footer a:hover {
color:   rgb(255, 207, 42); /*Orange color*/
}

/*********************Forgot Password Form*******************************/

#forgot-password-form{
float: left;
margin: 20px;
}

#userName{
font-size: 25px;
}

#forgot-password-submit{
font-size: 25px;
}