/**************************HTML & BODY*********************************************/
body{
margin:0px;
padding:0px;
width:100%;
height: 100%;
position: relative;
margin: 0 auto;
background-image: url(images/concrete-background.jpg);
background-repeat: repeat;
}

html{
height: 100%;
}

h1 {
float: left;
margin: 25px 0px 0px 20px;
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{
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(149, 198, 60);
height: 40px;
opacity: 0.9;
}

#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(149, 198, 60); /*Green 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: white;
}

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

}

#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 {
width: 100%;
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:  #013c76; /*Dark blue color*/
}

#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: 0 auto;
padding: 0px 0px 20px 0px;
width: 800px;
background: white;
opacity: 0.9;  
}


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

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

#push-home{
	position: relative;
	padding: 55%;
	z-index: -100;
}

#push-services{
	position: relative;
	padding: 60%;
	z-index: -100;
}

#push-contact{
	position: relative;
	padding: 41%;
	z-index: -100;
}

#push-about{
	position: relative;
	padding: 60%;
	z-index: -100;
}

#push-employees{
	position: relative;
	padding: 12%;
	z-index: -100;
}

#push-employees-admin{
	position: relative;
	padding: 32%;
	z-index: -100;
}

#push-employees-add-shift{
	position: relative;
	padding: 31%;
	z-index: -100;
}

#push-employees-view-shift{
	padding: 50%;
	z-index: -100;
}

#push-employees-email-shifts{
		padding: 41%;
	z-index: -100;
}

#push-forgot-password{
		padding: 42%;
	z-index: -100;
}

#push-mail-success{
		padding: 42%;
	z-index: -100;
}

#push-site-map{
		padding: 42%;
	z-index: -100;
}

#select-home #home{
background:rgb(149, 198, 60);
}

#select-home #home a{
color: #013c76; /*Dark blue color*/
}

#select-services #services{
background:rgb(149, 198, 60);
}

#select-services #services a{
color: #013c76; /*Dark blue color*/
}

#select-contact-me #contact-me{
background:rgb(149, 198, 60);
}

#select-contact-me #contact-me a{
color: #013c76; /*Dark blue color*/
}

#select-about-me #about-me{
background:rgb(149, 198, 60);
}

#select-about-me #about-me a{
color: #013c76; /*Dark blue color*/
}

#select-employees #employees{
background:rgb(149, 198, 60);
}

#select-employees #employees a{
color: #013c76; /*Dark blue color*/
}

#employee-side-nav #selected-sub-menu{
	background:rgb(149, 198, 60);
}

#employee-side-nav #selected-sub-menu a{
color: #013c76; /*Dark blue color*/
}


/************************************FOOTER************************************/
#footer {
position: relative;
bottom: 0;
margin-bottom: 6%;
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);
opacity: 0.9;
}

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

#footer ul{
position: relative;
left: 130px;
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{
float: left;
margin: 25px 0px 0px 25px;
clear: left;

}

#home-image-1{
float: right;
margin: 100px 25px 0px 0px;

}

#home-image-3{
float: left;
clear: left;
margin: 100px 0px 50px 25px;
}

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

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

#banner-image-1{
position:absolute;
top: -7px;
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{
position: absolute;
top: -8px;
left: 15%;
}

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

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

#services-image-1{
	position: relative;
	float:right;
	margin: 65px 10px 0px 0px;
	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;
}

#employee-page-logo {
float: left;
clear: left;
margin: 75px 0px 0px 25px;
left: 0%;
}

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

#logo {
background-color: black; 
width: 100%;
text-align: center;
}

/*******************************TEXT**************************************/
#text{
float: right;
width: 450px;
margin: 25px 30px 0px 0px;
padding: 0% 1% 2% 1%;
}

#text-1{
float: left;
clear: left;
width: 400px;
margin: 100px 0px 0px 25px;
padding: 0% 1% 2% 1%;
}

#text-2{
float: right;
width: 400px;
margin: 100px 25px 0px 0px;
padding: 0% 1% 2% 1%;
}




/****************************************SERVICES********************************/
#services-text-1{
position: relative;
top: -75px;
float:left;
margin: 75px 0px 50px 10px;
max-width: 435px;
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;
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{
float: right;
width: 450px;
padding: 0px 23px 20px 20px;
margin: 50px 15px 0px 15px;
background-color: white;
}

#contact-me-numbers{
float: left;
clear: left;
width:225px;
margin: 30px 15px 0px 15px;
padding: 0px 15px 35% 5px;
}


/******************************MAIL CONFIRM************************************/
#mail-confirm-message {
float: left;
clear: left;
width: 725px;
margin: 50px 0px 25px 25px;
padding: 0px 0px 15px 15px;
}

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



/********************************EMPLOYEES LOGIN********************************/
#login {
position: relative;
width: 250px;
padding: 15px;
margin: 20% 30%;
}

.required {
color: red;
}

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

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




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

#add-employee-form{
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;
}

#submit-2{
position: relative;
width: 85%;
color: blue;
}
#submit-3{
position: relative;
width: 85%;
color: red;

}
#submit-4{
position: relative;
width: 85%;
color: blue;

}
#admin-sidepanel-form{
float: left;
clear:left;
margin: 200px 0px 0px 25px;
width:150px;
padding: 1% 0% 1% 1%;
position: relative;
z-index: 50;
}

#admin-table{
	margin: 50% 0px -45% 185px;
width: 600px;
padding: 1% 2% 2% 1%;
background-color: white;
font-size: 13px;
z-index: 0;
}


#admin-table caption{
	position: relative;
	

}

#admin-table a{
	text-decoration: none;
	color: black;
}

#admin-table a:hover{
	color: white;
}

#new-job-location{
	position: absolute;
	top: 150px;
	left: 200px;
}

#job-location-list{
float: right;
clear: left;
margin: 50px 125px 0px 0px;
padding: 1% 0% 1% 1%;
width: 285px;
}

#job-location-list-select{
min-width: 285px;
overflow-x:scroll;
}


#delete-shifts-button{
	position: absolute;
	margin: 520px 0 0 -112px;
	z-index: 100;
	width: 16%;
	color: red;
}

#changeLog
{
	float: left;
}
/******************************EMPLOYEES ADD SHIFT***************************/
#employee-list{
min-width: 125px;
color: red;
font: .8em bold;
}

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

}

#start-time-wrapper{
position: relative;
z-index: 150;
float: left;
}


#end-time-wrapper{
position: relative;
z-index: 100;
left: 25%;
}

#add-shift-form{
position: absolute;
top: 100px;
left: 25%;
border: solid 2px;
border-color: #013c76;
width: 400px;
padding: 1% 5% 5% 5%;
}

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

#add-shift-submit-button-wrapper{
position: relative;
top: 0;
left: 70%;
}

#add-shift-info{
position: absolute;
top: 275px;
z-index: 100;
color: red;
width: 100%;
min-width: 800px;
text-align: center;
margin-left: -75px;
}

#add-shift-info-success{
position: absolute;
top: 275px;
z-index: 100;
color: blue;
width: 100%;
min-width: 800px;
text-align: center;
margin-left: -75px;
}


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

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


/**********************************EMPLOYEES VIEW SHIFTS******************************/
#view-shifts-table{
float: left;
width: 800px;
padding: 1% 2% 15% 2%;
background-color: white;
z-index: -50;
padding: 0px 20px 20px 175px;
margin-top: -85px;
}

#view-shifts-table caption{
position: relative;
left: 10%;

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

#view-shifts-table a{
text-decoration: none;
color: black;
}

#view-shifts-table a:hover{
color: white;
}


/***********************************Email Employee Shifts***********************************/
#email-shifts-wrapper{
	float: left;
	clear: left;
	width: 150px;
	margin: 20px 0px 0px 20px;
}

/***********************************Forgot password ***********************************/
#forgot-password-form{
	float: left;
	clear: left;
	
	margin: 20px 0px 0px 20px;
}


/**************************SITE MAP*********************************************/
#site-map{
	float: left;
	clear: left;
}