/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Feb 7, 2017, 1:11:45 PM
    Author     : vh
*/
* {
    box-sizing: border-box;
    font-family: "Arial Black";
}


 body {
    background-color: #F0ECEC;   
    margin: 0px;
    padding: 0px;
    width: auto;
    height: auto;
}



div#header {
text-align:center;
border: 3px;
border-radius: 20px;
background-color: #283138;
}
div#header h2{
    color: white;
}
div#header p{
    color: whitesmoke;
   
}
div#header img{
/*    width: 80px;
    height: 80px;*/
}




div#main {
border: 2px solid;
border-radius: 20px;
border-color: rgba(237, 28, 36, 0.25);
height:auto;
width: auto;
}

div#main p{
    text-align: center;
}

div#main1 {
border: 2px solid;
border-radius: 20px;
border-color: rgba(237, 28, 36, 0.25);
height:auto;
width: auto;
min-height: 500px;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
}

div#main1 p{
    text-align: center;
}


div#error_user{
    background: url('error_user.png') no-repeat;
    height:220px;
    position: relative;
    color: white;
}

div#error_user h2 {
    padding-top:20px;
    padding-left:20px;
}

div#error_user h3 {
    padding-left:20px;
}

div#error_user p {
    padding-top:10px;
    padding-left:20px;
}


div#error{
   	width: 550px;
        height: 40px;
	border: 1px solid #D8D8D8;
	border-radius: 5px;
	font-family: Arial;
	font-size: 13px;
        padding: 8px;
	text-transform: uppercase;
	background-color: rgb(255, 249, 242);
	color: rgb(211, 0, 0);
	text-align: center; 
        margin-left:15px;
}


div#error img{
    float:left;
}

div#info
{
 text-align: center;
 font-size: large;
 color: darkred;
}



.container { 
    margin: 25px auto; 
    position: relative; 
    width: 450px; 
}

form:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.container { 
    margin: 25px auto; 
    position: relative; 
    width: 400px; 
}

#content {
	background: #f9f9f9;
	background: -moz-linear-gradient(top,  rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
	background: -o-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
	background: -ms-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
	background: linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
	-webkit-box-shadow: 0 1px 0 #fff inset;
	-moz-box-shadow: 0 1px 0 #fff inset;
	-ms-box-shadow: 0 1px 0 #fff inset;
	-o-box-shadow: 0 1px 0 #fff inset;
	box-shadow: 0 1px 0 #fff inset;
	border: 1px solid #c4c6ca;
	margin: 0 auto;
	padding: 25px 0 0;
	position: relative;
	text-align: center;
	text-shadow: 0 1px 0 #fff;
	width: auto;
       
}




#content form { margin: 0 20px; position: relative }
#content form input[type="text"],
#content form input[type="password"] {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
	-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
	-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
	-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
	box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background: #eae7e7 url(login.png) no-repeat;
	border: 1px solid #c8c8c8;
	color: #777;
	font: bold 15px "Arial Black";
	margin: 0 0 10px;
	padding: 15px 10px 15px 40px;
	width: 85%;
}
#content form input[type="text"]:focus,
#content form input[type="password"]:focus {
	-webkit-box-shadow: 0 0 2px #ed1c24 inset;
	-moz-box-shadow: 0 0 2px #ed1c24 inset;
	-ms-box-shadow: 0 0 2px #ed1c24 inset;
	-o-box-shadow: 0 0 2px #ed1c24 inset;
	box-shadow: 0 0 2px #ed1c24 inset;
	background-color: #fff;
	border: 1px solid #ed1c24;
	outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
#content form input[type="submit"] {
	background: #ed1c24;  
	background: -moz-linear-gradient(top, #ed1c24 0%,#900000 100%);
	background: -webkit-linear-gradient(top, #ed1c24 0%, #900000 100%);
	background: -o-linear-gradient(top, #ed1c24 0%, #900000 100%);
	background: -ms-linear-gradient(top, #ed1c24 0%,#900000  100%);
	background: linear-gradient(top, #ed1c24 0%,#900000  100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91b9e6', endColorstr='#91b9e6',GradientType=0 );
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 0 1px 0 whitesmoke inset;
	-moz-box-shadow: 0 1px 0 whitesmoke inset; 
	-ms-box-shadow: 0 1px 0 whitesmoke inset;
	-o-box-shadow: 0 1px 0 whitesmoke inset;
	border: 1px solid whitesmoke;
	color: whitesmoke;
	cursor: pointer;
	
	font: bold  18px "Arial Black";
	height: 35px;
	margin: 0px 0 35px 15px;
	position: relative;
	text-shadow: 0 0.1px 0 black;
	width: 50%;
}
#content form input[type="submit"]:hover {
	background: #66B2FF;
	background: -moz-linear-gradient(top, #66B2FF 0%, #66B2FF 100%);
	background: -webkit-linear-gradient(top, #66B2FF 0%,#66B2FF 100%);
	background: -o-linear-gradient(top, #66B2FF 0%,#66B2FF 100%);
	background: -ms-linear-gradient(top, #66B2FF 0%,#66B2FF 100%);
	background: linear-gradient(top, #66B2FF 0%,#66B2FF 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
       }





#menu {
width: 250px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: bold;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #504766; 
color: #333;
position: relative;
margin-left: auto;
margin-right: auto;
border:1px solid gray;
border-radius:10px ;
	}
       

#menu ul {
list-style: none;
margin: 0;
/*padding: 0;*/
padding: 10px; /*Ale*/
	}
        
#menu li {
border-bottom: 1px solid #90bade;
margin: 0;
width: 240px;
}

#menu li input[type="submit"] {
height: 35px;
width: 230px;
display: block;
/*padding: 3px 0px 3px 0.5em;*/
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
border-radius: 5px; /*Ale*/
/*background-color: #6898d0;*/ /*Ale*/
/*background:  url('menu.gif') 0 -30px;*/
text-decoration: none;
text-align: left; 
font-weight : bold;
color: #900000; /*Ale*/
padding: 7px 0 0 30px;
font-family: Calibri,Verdana, Arial, Helvetica, sans-serif; /* Ale added new font */
font-size : 18px; /*Ale changed size */
	}
	
#menu li input[type="submit"]:hover {
	color: black ;
	/*background:  url('menu.gif') 0 -30px;/* Ale*/
	padding: 7px 0 0 35px;
        cursor: pointer;
	}

.bt1 {
width : auto;
font-family : Verdana, Arial, Helvetica, sans-serif;  
font-size : 16px; 
text-align : left; 
font-weight : bold; 
color : #ffffff; 
/*background-color : #8AA1B6;*/
background-color: #504766; /*Alexandra*/
padding-top : 2px; 
padding-bottom : 4px; 
padding-left : 15px; 
display : block; 
}

.hw12 {
font-size : 16px; 
font-weight : bold; 
/*color : #ffffff; */
color : white; /* Ale changed */
font-family : verdana, arial, helvetica, sans-serif;
text-decoration : none; 
}

.hw {
font-size : 16px; 
font-weight : bold; 
/*color : #900000;*/
color : #e8dd14; /*Ale changed #008000; */
font-family : verdana, arial, helvetica, sans-serif;
text-decoration : none; 
}

.hw1 {
font-size : 16px; 
font-weight : bold; 
color : #e8dd14;
font-family : verdana, arial, helvetica, sans-serif;
text-decoration : none; 
}


div#shift {
    width: 900px;

}
div#shift h3{
    background-color: #c4def1;
    border:4px solid  #c4def1;
    border-radius: 15px;
    position: relative;
    left:56%;
}



input.back_img{
    background: url('back.png') left;
    background-repeat: no-repeat;
    background-size: 19px;
    background-color: lightgrey;
    border:2px solid gray;
    border-radius: 4px;
    margin-right: 1830px;
    font-weight: bold;
    display:inline-block;
    float: left;
    position: relative;
    left: 1%;
    cursor: pointer;  
    height: 26px;
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}   
input.back_img_lorry{
    background: url('lorry.png') left;
    background-repeat: no-repeat;
    background-size: 16px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}
input.back_img_deliver{
    background: url('delivery.png') left;
    background-repeat: no-repeat;
    background-size: 15px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}
input.back_img_key{
    background: url('key.png') left;
    background-repeat: no-repeat;
    background-size: 16px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}


input.back_img_status{
    background: url('list.png') left;
    background-repeat: no-repeat;
    background-size: 16px;
    border:2px solid gray;
    border-radius: 4px;
    margin-left: 12px;
    font-weight: bold;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}

input.back_img_status1{
    background: url('key.png') left;
    background-repeat: no-repeat;
    background-size: 16px;
    border:2px solid gray;
    border-radius: 4px;
    margin-left: 5px;
    height: 25px;
    font-weight: bold;
    font-style: italic;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}
input.insert_person{
    background: url('man-user.png') left;
    background-repeat: no-repeat;
    background-size: 20px;
    border:2px solid gray;
    border-radius: 4px;
    margin-left: 10px;
    height: 25px;
    font-weight: bold;
    font-style: italic;
    font-size: 15px;
    cursor: pointer; 
    color: blue;
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 5px #1b1b1b;
}  

input.insert_material{
    background: url('pencil-box.png') left;
    background-repeat: no-repeat;
    background-size: 20px;
    border:2px solid gray;
    border-radius: 4px;
    margin-left: 10px;
    height: 25px;
    font-weight: bold;
    font-style: italic;
    font-size: 15px;
    cursor: pointer; 
    color: blue;
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 5px #1b1b1b;
}


input.delete_person{
    background: url('remove-person.png') left;
    background-repeat: no-repeat;
    background-size: 17px;
    border:2px solid gray;
    border-radius: 4px;
    margin-left: 5px;
    height: 25px;
    font-weight: bold;
    font-style: italic;
    cursor: pointer; 
    color:darkred;
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 10px #1b1b1b;
}

input.print_btn{
    background: url('printer_off.png') left;
    background-repeat: no-repeat;
    background-size: 16px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold; 
    width:60px; 
    display:inline-block;
    float: left;
    position: relative;
    left: 1%;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}


input.excel_btn{
    background: url('table.png') left;
    background-repeat: no-repeat;
    background-size: 16px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold; 
    width:65px; 
    display:inline-block;
    float: left;
    position: relative;
    left: 2%;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}

input.excel_btn1{
    background: url('charts.png') left;
    background-repeat: no-repeat;
    background-size: 20px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold; 
    width:85px; 
    height:25px;
    display:inline-block;
    float: left;
    position: relative;
    left: 1%;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}

input.pdf_btn{
    background: url('pdf.png') left;
    background-repeat: no-repeat;
    background-size: 16px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold; 
    width:55px; 
    display:inline-block;
    float: left;
    position: relative;
    left: 7%;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}

input.pdf_btn1{
    background: url('pdf.png') left;
    background-repeat: no-repeat;
    background-size: 18px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold; 
    width:75px; 
    height:22px;
    display:inline-block;
    float: left;
    position: relative;
    left: 5%;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}

input.pdf_btn2{
    background: url('upload.png') left;
    background-repeat: no-repeat;
    background-size: 16px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold; 
    font-style: italic;
    width:130px; 
    height:22px;
    display:inline-block;
    float: left;
    position: relative;
    left: 11%;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}

input.pdf_btn3{
    background: url('upload.png') left;
    background-repeat: no-repeat;
    background-size: 16px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold; 
    font-style: italic;
    width:145px; 
    height:22px;
    display:inline-block;
    float: left;
    position: relative;
    left: 9%;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}

input.pdf_btn4{
    background: url('pdf.png') left;
    background-repeat: no-repeat;
    background-size: 16px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold; 
    width:140px; 
    display:inline-block;
    float: left;
    position: relative;
    left: 5%;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}
input.pdf_btn5{
    background: url('pdf.png') left;
    background-repeat: no-repeat;
    background-size: 16px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold; 
    width:140px; 
    display:inline-block;
    float: left;
    position: relative;
    left: 15%;
    cursor: pointer; 
    box-shadow: 0 3px 3px #002851, 0 3px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 3px 3px #000, 0 3px 13px #1b1b1b;
}


input.add_btn1{
    background: url('add.png') left;
    background-repeat: no-repeat;
    background-size: 15px;
    border:2px solid gray;
    border-radius: 3px;
    width: 21px;
    height: 21px;
    float: left;
    position: relative;
    left: 86%;
    cursor: pointer; 
    box-shadow: 0 2px 2px #002851, 0 2px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 2px 2px #000, 0 2px 8px #1b1b1b;
}

input.insert_btn{
    background: url('insert.png') left;
    background-repeat: no-repeat;
    background-size: 16px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold; 
    width:77px; 
    display:inline-block;
    float: left;
    position: relative;
    left: 1%;
    cursor: pointer;
    box-shadow: 0 2px 2px #002851, 0 2px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 2px 2px #000, 0 2px 10px #1b1b1b;
}


input.update_btn{
    background: url('update.png') left;
    background-repeat: no-repeat;
    background-size: 15px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold; 
    width:105px; 
    display:inline-block;
    float: left;
    position: relative;
    left: 1%;
    margin-right: 8px;
    margin-left: 5px;
    cursor: pointer; 
    box-shadow: 0 2px 2px #002851, 0 2px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 2px 2px #000, 0 2px 10px #1b1b1b;
}

input.update_btn1{
    background: url('update.png') left;
    background-repeat: no-repeat;
    background-size: 14px;
    border:2px solid gray;
    border-radius: 3px;
    font-weight: bold;
    font-style:italic;
    width:105px; 
    float: left;
    position: relative;
    left: 15%;
    cursor: pointer; 
    box-shadow: 0 2px 2px #002851, 0 2px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 2px 2px #000, 0 2px 8px #1b1b1b;
}


input.update_btn2{
    background: url('clock.png') left;
    background-repeat: no-repeat;
    background-size: 18px;
    border:2px solid gray;
    border-radius: 3px;
    font-weight: bold;
    font-style:italic;
    width:100px; 
    height: 26px;
    float: left;
    position: relative;
    left: 15%;
    cursor: pointer; 
    box-shadow: 0 2px 2px #002851, 0 2px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 2px 2px #000, 0 2px 8px #1b1b1b;
}


input.delete_btn{
    background: url('delete.png') left;
    background-repeat: no-repeat;
    background-size: 15px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold; 
    width:75px; 
    display:inline-block;
    float: left;
    position: relative;
    left: 1%;
    cursor: pointer; 
    box-shadow: 0 2px 2px #002851, 0 2px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 2px 2px #000, 0 2px 10px #1b1b1b;
}

input.delete_btn1{
    background: url('delete.png') left;
    background-repeat: no-repeat;
    background-size: 17px;
    border:2px solid gray;
    border-radius: 4px;
    font-weight: bold; 
    font-size: 16px;
    width:95px; 
    display:inline-block;
    float: left;
    position: relative;
    left: 32%;
    cursor: pointer; 
    box-shadow: 0 2px 2px #002851, 0 2px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 2px 2px #000, 0 2px 10px #1b1b1b;
}


input.submit_btn{
    background: url('correct.png') left no-repeat;
    font-weight: bold; 
    cursor: pointer; 
    box-shadow: 0 2px 2px #002851, 0 2px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 2px 2px #000, 0 2px 10px #1b1b1b;
}



input.mail_btn{
    background: url('signature_1.png') left;
    background-repeat: no-repeat;
    background-size: 13px;
    border:2px solid gray;
    border-radius: 3px;
    font-weight: bold;
    font-style: italic;
    color: red;
    width: 100px;
    height: 25px;
    float: left;
    position: relative;
    left: 3%;
    cursor: pointer; 
    box-shadow: 0 2px 2px #002851, 0 2px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 2px 2px #000, 0 2px 8px #1b1b1b;
}
  input.mail_btn1{
    background: url('mail_1.png') left;
    background-repeat: no-repeat;
    background-size: 13px;
    border:2px solid gray;
    border-radius: 3px;
    font-weight: bold;
    font-style: italic;
    color: red;
    width: 75px;
    height: 25px;
    float: left;
    position: relative;
    left: 20%;
    cursor: pointer; 
    box-shadow: 0 2px 2px #002851, 0 2px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 2px 2px #000, 0 2px 8px #1b1b1b;
}  

input.sign_btn{
    background: url('signature_1.png') left;
    background-repeat: no-repeat;
    background-size: 16px;
    border:2px solid gray;
    border-radius: 3px;
    font-weight:  500;
    font-size: larger;
    font-style: italic;
    color: red;
    width: 150px;
    height: 30px;
    float: left;
    position: relative;
    left: 30%;
    cursor: pointer; 
    box-shadow: 0 2px 2px #002851, 0 2px 0 #002851, -1px 0px 0 #003872, 0px 0px 0 #003872, 0px 2px 2px #000, 0 2px 8px #1b1b1b;
}




input.search_hall
{
    background: url('magnifier.png') center no-repeat;
    background-size: 13px;
    cursor: pointer; 
    position: relative;
    right: -3%;
    width: 20px;
}


div#buttons{
    border-radius: 7px;
    border: 5px solid #8AA1B6;
    background-color: #8AA1B6;
    position: relative;
    margin: 0 auto;
    width: 676px;
}

div#buttons1{
    border-radius: 10px;
    border: 3px solid lightgray;
    background-color: lightgray;
    float: left;
    position: relative;
    left: 0.9%;
    margin-top: 5px;
    margin-bottom: 5px;
}

div#buttons1_1{
    border-radius: 10px;
    border: 3px solid lightgray;
    background-color: lightgray;
    float: left;
    position: relative;
    left: 47%;
    margin-top: 5px;
    margin-bottom: 5px;
}


div#buttons2 {
    border-radius: 10px;
    border: 4px solid lightgray;
    background-color: lightgray;
    width: 210px;
    float:left;
    position: relative;
    left: 1%;
    }

div#buttons3{
    border-radius: 10px;
    border: 4px solid #8AA1B6;
    background-color: #8AA1B6;
    position: relative;
    margin: 0 auto;
    width: 300px;
}

div#buttons4 {
    border-radius: 10px;
    border: 4px solid lightgray;
    background-color: lightgray;
    width: 290px;
    height:30px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left:10px;
 
    }
  
div#buttons5 {
    border-radius: 10px;
    border: 4px solid lightgray;
    background-color: lightgray;
    float: left;
    position: relative;
    left: 0.8%;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 205px;
    height:30px;
    }

   div#buttons6 {
    border-radius: 10px;
    border: 4px solid lightgray;
    background-color: lightgray;
    width: 204px;
    height:35px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left:10px;
    } 
  
div#buttons7 {
    border-radius: 10px;
    border: 4px solid lightgray;
    background-color: lightgray;
    float: right;
    position: relative;
    right: 48%;
    margin-top: 3px;
    margin-bottom: 5px;
    width: 85px;
    height:30px;
    display: inline-block;
    } 
    
 div#buttons8 {
   position: relative;
   top: 5px;
   left: 1%;
   font-family: calibri;
   width: 220px;
   height:35px;
   padding-left: 10px;
   padding-top:5px;
   font-weight: bold; 
   font-size: 14px;
   font-style: italic;
   text-align: right;
   color: green;
   /*text-decoration: underline;*/
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border: 1px dashed green; 
   text-align: center;
   background: url('file_upload.png') left no-repeat;
   background-size: 28px;
   background-color: whitesmoke;
   cursor:pointer;
   overflow:hidden;
  }
  
    
div#buttons9 {
    float: right;
    position: relative;
    right: 0.8%;
    margin-top: -40px;
    width: 240px;
    height:40px;
    display: inline-block;
    } 

div#buttons10 {
    border-radius: 10px;
    border: 4px solid lightgray;
    background-color: lightgray;
    float: right;
    position: relative;
    right: 5%;
    margin-top: -32px;
    margin-bottom: 5px;
    width: 95px;
    height:30px;
    display: inline-block;
    }     
    
    
div#buttons11 {
    border-radius: 10px;
    border: 4px solid lightgray;
    background-color: lightgray;
    float: right;
    position: relative;
    right: 2%;
    margin-top: -32px;
    margin-bottom: 5px;
    width: 100px;
    height:30px;
    display: inline-block;
    } 
    
div#buttons12 {
    border-radius: 10px;
    border: 4px solid lightgray;
    background-color: lightgray;
    float: right;
    position: relative;
    right: 3%;
    margin-top: -32px;
    margin-bottom: 5px;
    width: 160px;
    height:31px;
    display: inline-block;
    }     
div#buttons13 {
    border-radius: 10px;
    border: 4px solid lightgray;
    background-color: lightgray;
    float: right;
    position: relative;
    right: 2%;
    margin-top: -32px;
    margin-bottom: 5px;
    width: 275px;
    height:30px;
    display: inline-block;
    } 
    
div#mail{
    border-radius: 5px;
    background-color: #f2f2f2;
    position: relative;
    left:22%;
    padding: 20px;
    text-align: center;
    font-style: italic;
    font-size: larger;
    font-weight: 900;
    background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
    background-size: 30px 30px;
    background-position: 11px 8px;
    background-repeat: no-repeat;
    width: 1100px;
    } 
    
    div#mail label{
        
    }
    
    div#mail input:hover{
        border-color: red;
    }
    
    
    
table{ 
     page-break-inside:auto
    
 }
 thead{
      color:#004D26;
 }
tr{ 
    page-break-inside:avoid; 
    page-break-after:auto ;   
}
tr:hover{
background-color: darkgrey;
}

@media print {
     @page {
      size: A4 landscape;
      margin: 1.5cm;   
      overflow: auto;
     }
     
     table.printTable{
        display: table-row-group !important;   
        overflow: auto;
        page-break-before: always;
        page-break-after: always;
      }

      table tr{
          page-break-inside: avoid;
      }
     thead {display: table-header-group ! important}
}

table, td{
    border: 3px solid black;
    height: 36px;
}
thead{
    color: green;
    font-size: larger;
    font-weight: bold;
    text-align: center;  
       
}


div#printTable_wrapper
{
    font: normal 13px "Arial Black";
}


input[type=number]{
    width: 42px;
}
.paging-nav {
  text-align: right;
  padding-top: 2px;
}

.paging-nav a {
  margin: auto 1px;
  text-decoration: none;
  display: inline-block;
  padding: 1px 7px;
  background: #91b9e6;
  color: white;
  border-radius: 3px;
}

.paging-nav .selected-page {
  background: #187ed5;
  font-weight: bold;
}

img#img_pad:hover
{
    height:100px;
    width: 200px;
}

img#map:hover
{
    height:200px;
    width: 650px;
}

div#change_input
{
  position:relative;
  width:700px;
  height:290px;
  text-align:center;
  font-weight: bold;
  font-size: large;
  font-style: italic;
  background:#ecf0f1;
  margin: 0px auto;
  margin-bottom: 15px;
  padding:30px;
  -webkit-border-radius:20px 0 0 0;
     -moz-border-radius:20px 0 0 0;
          border-radius:20px 0 0 0;
  -webkit-box-shadow: 1px 2px 1px gray, inset 1px 1px 1px gray;
     -moz-box-shadow: 1px 2px 1px gray, inset 1px 1px 1px gray;
          box-shadow: 1px 2px 1px gray, inset 1px 1px 1px gray;
  
}

div#change_input:after,
div#change_input:before {
	background: #ecf0f1;
	background: -moz-linear-gradient(top,  #ecf0f1 0%, #ecf0f1 100%);
	background: -webkit-linear-gradient(top,  #ecf0f1 0%,#ecf0f1 100%);
	background: -o-linear-gradient(top,  #ecf0f1 0%,#ecf0f1 100%);
	background: -ms-linear-gradient(top,  #ecf0f1 0%,#ecf0f1 100%);
	background: linear-gradient(top,  #ecf0f1 0%,#ecf0f1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
	border: 1px solid gray;
         -webkit-border-radius:14px 0 0 0;
         -moz-border-radius:14px 0 0 0;
        border-radius:14px 0 0 0;
	content: "";
	display: block;
	height: 100%;
	left: -1px;
	position: absolute;
	width: 100%;
}

div#change_input:after {
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	transform: rotate(4deg);
	top: 0;
	z-index: -1;
}
div#change_input:before {
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
	transform: rotate(-4deg);
	top: 0;
	z-index: -2;
}

div#change_input input[type = 'number']
{
    width: 80px;
}



div#footer {
  width: 100%;
  height:120px;
  margin: 0 auto;
  position: relative;
  bottom:0;
  border: 2px;
  border-radius: 20px;
  /*background-color: darkseagreen;*/
  background: #283138;
}
div#footer_logo
{
    background-image: url(ipi-logo1.png);
    height: 42px;
    width: 134px;
    background-repeat: no-repeat;
    position: relative;
    left: 47%;
    top:10px;
    padding-bottom: 60px;
}
div#footer p {
  text-align: center;
  padding-top: 12px;
  font-size: 13px;
  left: 150%;
  color: white;
}



.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    
    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    
    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}