/**************************HTML & BODY*********************************************/
body{
margin:0px;
padding:0px;
width:100%;
height: 100%;
position: relative;
margin: 0 auto;
}

html{
height: 100%;
}

h1 {
position: relative;
font-family: mistral, cursive;
font-size: 35px;
color: #013c76;
left: 2%;

}

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

i {
	color: red;
}

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

th {
background: rgb(149, 198, 60);
padding: 5px 0px 5px 0px;
}

td {
border: solid 1px;
margin: 0px 0px 0px -10px;
padding: 2px 10px 2px 10px;
border-color: #013c76;
}


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

#main-navigation{
display: none;
position: relative;
z-index:100;
width: 100%;
min-width: 800px;
background-color:  #013c76; /*Dark blue color*/
text-align: center;
border-top: solid 3px;
border-color: rgb(255, 207, 42);
height: 40px;
}

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

#main-navigation ul li {
float: left;
width: 17.5%;
left: 0;
padding: 5px 10px 4px 10px;
}

#main-navigation ul li:hover{
background: rgb(255, 207, 42); /*Orange color*/
}

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

#main-navigation ul li a {
display: block;
width: 100%;
font-size: 1.2em;
text-decoration: none;
padding: 5px 0px 5px 0px;
text-align: center;
color: rgb(149, 198, 60);
}


/**********************MAIN CONTENT WRAPPER**************************************/
#main-content{
position: relative;
margin: 0 auto;
padding: 0px 0px 20px 0px;
width: 800px;
background: white;
min-height: 72%;
opacity: 0.9;  
}

#user-status-off{
display: none;
position: absolute;
left: 85%;
top: 25px;
z-index: 100;
font-family: mistral, cursive;
font-size: 1em;
}

#user-status-on{
display: none;
position: absolute;
left: 83%;
top:25px;
z-index: 100;
font-family: mistral, cursive;
}

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

#select-home #home{
background:rgb(255, 207, 42);
}

#select-home #home a{
color: #013c76;
}

#select-services #services{
background:rgb(255, 207, 42);
}

#select-services #services a{
color: #013c76;
}

#select-contact-me #contact-me{
background:rgb(255, 207, 42);
}

#select-contact-me #contact-me a{
color: #013c76;
}

#select-about-me #about-me{
background:rgb(255, 207, 42);
}

#select-about-me #about-me a{
color: #013c76;
}

#select-employees #employees{
background:rgb(255, 207, 42);
}

#select-employees #employees a{
color: #013c76;
}





/************************************FOOTER************************************/
#footer {
display: none;
position: relative;
bottom: 0;
float: left;
background: #013c76; /*Dark blue color*/
width: 100%;
color: white;
padding: 0;
text-align: center;
height: 40px;
min-width: 800px;
border-top: solid 4px;
border-color:  rgb(149, 198, 60);
}

#footer li {
float: left;
padding: 0px 0px 0px 12px;
list-style:	none;
}

#footer ul{
position: relative;
left: 160px;
padding: 0;
width: 800px;
display: inline-table;
text-align: center;
}

#footer a {
color:  rgb(149, 198, 60); /*Green color*/
}



/*******************************IMAGES**********************************/
#logo img {
position: relative;	
margin: 0 600px 0 0;
}

#home-image{
position: absolute;
top: 100px;
left: 2%;
}

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

#banner-images {
display: none;
position: relative;
top: -215px;
left: 2%;
}

#banner-image-1{
position:absolute;
top: 60px;
left: 25%;
}

#banner-image-2{
position:absolute;
top: 35px;
left: 40%;
}

#banner-image-3{
position:absolute;
top: 60px;
left: 55%;
}

#banner-image-4{
position:absolute;
top: 10px;
left: 70%;
}

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

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

#logo-3{
position: absolute;
left: 7%;
top: 285px;
display: none;
}

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


#services-image-2{
	position: relative;
	top: -110px;
	float:left;
	margin: 10px 0px 100px 10px;
	background-color: white;
}

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

#employee-page-logo {
display:none;
position: relative;
top: 300px;
margin-bottom:0;
left: 4%;
}

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

#logo {
display: none;
width: 100%;
text-align: center;
background-color: white;
}

/*******************************TEXT**************************************/
#text{
position: absolute;
left: 35%;
top: 30px;
margin: 75px 0px 50px 0px;
width: 475px;
border: solid 1px;
padding: 0% 1% 2% 1%;
}





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

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




/****************************************SITE MAP***************************************/
#site-map li a{
color: #013c76; 
}



/****************************************CONTACT ME*************************************/
#contact-second-name{
position: relative;
top: -46px;
left: 200px;
}

#contact-email{
position: relative;
top: -25px;
}

#contact-me-form{
position: relative;
border: solid 1px;
left: 265px;
top: -50px;
width: 450px;
padding: 0px 23px 20px 20px;
margin: 100px 15px 0px 15px;
}

#contact-me-numbers{
position: absolute;
top:54px;
left: 15px;
width:225px;
border: solid 1px;
padding: 0px 15px 35% 5px;
}


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

#email-message{
position:relative;
border: solid 1px;
width: 450px;
}



/********************************EMPLOYEES LOGIN********************************/
#login {
position: relative;
border: solid 2px;
border-color: #013c76; 
width: 250px;
padding: 15px;
margin: 0 30%;
}

.required {
color: red;
}

#login-send-button {
position: absolute;
top: 85px;
left: 185px;
}

#required-description-login {
position: relative;
top: 25px;
left: 50%;
}




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

#add-employee-form{
display: none;
position: absolute;
top: 75px;
left: 24%;
width: 555px;
height: 50px;
padding: 0% 1% 0% 1%;
}

#employee-form-second-name{
position:absolute;
left: 29%;
top:0;
}

#employee-form-password{
position:absolute;
left: 56.5%;
top:0px;
}

#submit1{
position: relative;
left: 85%;
top: -27px;
}

#admin-sidepanel-form{
display: none;
position: absolute;
left: 5%;
top: 150px;
width:150px;
padding: 1% 0% 1% 1%;
}

#admin-table{
float: left;
width: 95%;
background-color: white;
}

#delete-shift{
display: none;
}



/******************************EMPLOYEES ADD SHIFT***************************/


#job-location-wrapper{
margin: 0px 0px 10% 0px;
}

#start-date-wrapper{
float: left;
}

#end-date-wrapper{
float: right;
}

#start-time-wrapper{
float: left;
}

#end-time-wrapper{
float: right;
}

#add-shift-form{
float: left;
border: solid 2px;
border-color: #013c76;
width: 400px;
padding: 1% 5% 5% 5%;
}

#employee-options-list{
display: none;
width: 125px;
position: absolute;
top: 100px;
left: 2%;
}

#add-shift-submit-button-wrapper{
float: left;
}

/*******************************FEEDBACK MESSAGES***********************************/
#incorrect_prompt{
float: left;
z-index: 50;
color: red;
min-width: 100%;
margin-left: 0;
color: blue;
}

#correct_prompt{
float: left;
z-index: 50;
color: red;
min-width: 100%;
margin-left: 0;
color: blue;
}


/**********************************EMPLOYEES VIEW SHIFTS******************************/\

#employee-list{
min-width: 125px;
color: red;
font: .8em bold;
}

#view-shifts-table{
float: left;
width: 95%;
padding: 1% 2% 15% 2%;
font-size: 25px;
}

#shift-table-h3{
position: absolute;
left: 18%;
top: 10px;
color: red;
}