* { margin: 0; padding: 0; }
body { font: 14px/1.4  Georgia,serif; }
#page-wrap { width: 700px; margin: 0 auto; }
#screen-wrap { width: 900px; margin: 0 auto; background: #DDD; border-radius: 10px; padding: 20px;  }
#banner {
    width: 900px;
    height: 150px;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 10px;
    background-repeat: no-repeat;
}
.navbar { width:900px; margin:0 auto; }

li { list-style-type:none; }
		
	
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid #AAA; padding: 5px 5px; }

#cust table td { border: 0; }
#cust input { margin: 5px 0; float: left; padding-left: 5px; }

#header { height: 30px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }

.form { margin:0 30px; width:420px; }


#address { width: 250px; height: 75px; padding:10px; float: left; }
#customer { padding: 10px 0px; }
input{ margin: 5px 0px; margin-left:5px; padding: 5px; }
#date { width: 80%; }
#logo { text-align: right; float: right; position: relative; margin-top: 0px; border: 1px solid #fff; max-width: 100%; max-height: 115px; overflow: hidden; }
#logo img { width: 710px; height: 105px;}
#logoctr { display: none; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }

#meta { margin: 0px 0px; width: 240px; float: right; vertical-align:bottom; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; border-left:none; }
#meta td.meta-body{ width:45%; }
#meta td textarea { width: 95%; height: 20px; text-align: right; }

#identity { width: 460px; overflow: hidden; float:left; margin-bottom: 15px;}
#customer { clear:both; width: 100%; }
#customer  table td{ text-transform: uppercase; font: bold 10px Arial; color:#555; letter-spacing: 2px; vertical-align: center; }
#customer textarea { font: 14px Sans-Serif; }
#customer textarea.colA, #customer td.colA { width: 125px; height:19px; vertical-align:top }
#customer textarea.colB, #customer td.colB, #customer span.colB { width: 240px; height:20px; padding: 0 20px; text-align:left;}
#company span { display:block; width:240px; font: 14px Sans-Serif; }
#customer .colB { font: 14px Sans-Serif; color:black; text-transform:none; padding: 5px 20px;}
#customer textarea.colE { width: 240px; height:20px; vertical-align:top; padding-left: 10px;}
#customer td.colB { }
#customer textarea.colf, textarea.coll { width:100px; height: 20px;}
#customer textarea.colf { padding-left: 20px;}

#vtitle { font:Arial; text-decoration:uppercase; }
#vehicle { clear:both; width:100%; }
#vehicle textarea.colA , td.colA{ width:125px; }
#vehicle textarea.colB , td.colB{ width:230px; }
#vehicle textarea.colC , td.colC{ width:70px; }
#vehicle textarea.colD , td.colD{ width:100%; }
#vehicle  table td{ text-transform: uppercase; font: bold 10px Arial; color:#555; letter-spacing: 2px; vertical-align: top; }
#vehicle textarea{ font: 14px Sans-Serif; height:20px; }

#items, #totals { clear: both; width: 100%; margin: 0px 0 0 0; border: 0;}
#item { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid #AAA; }
#item td.wrapper { padding:0 ; }
#item th { background: #eee; width:70px; }
#items textarea { width: 70px; height: 35px; text-align: left; }
#items textarea.cost, #items textarea.labour, #items span.price{ text-align: right; float:right; font: 14px Sans-Serif;  }
#items tr.item-row td { border: 0; vertical-align: top; width:70px; }
#items tr.list-row th { background: #fff; padding:2px; font-weight: normal;}
#items tr.list-row {border-bottom: 1px solid #AAA;}
#items tr.item-row {min-height:45px;}
#items table.itemlist { position:relative; left:45px; padding-top:5px; }
#items td.notes, #items td.notes textarea{ width: 400px; height: 90px; border: 0; vertical-align: top;}

#items td.description { width: 450px; }
#items td.item-name { width: 70px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#totals td.total-line { border-right: 0; text-align: right; }
#totals td.total-value { border-left: 0; padding: 10px; }
#totals td.total-value textarea { height: 20px; background: none; font: 14px Sans-Serif;  }
#totals td.notes, #totals td.notes textarea{ width: 400px; height: 90px; border: 0; vertical-align: top; resize:vertical;}
#totals tr { height:auto; }
#items td.blank { border: 0; }
#items tr.list-row td { border:0px; }
#items td.list-row { position:relative; left:45px; padding-top: 5px; border:0;}
#items textarea.item { width:400px; height:35px;}
#items textarea.qty { width:70px; height:25px; text-align: right; font: 14px Sans-Serif; }
#items div.item { width:400px; height:auto;}
#items div.qty { width:70px; height:25px; text-align: right; font: 14px Sans-Serif; }
#items td.list-item { border:0; }
#items td.list-wrapper {
    padding-left:45px;
}

/*
http://www.jacklmoore.com/autosize/
#bottom { vertical-align:bottom; position:absolute; bottom:0;  }
#page-wrap { min-height:28cm; position:relative; }*/

#subtotal, #gst, #total {text-align: right; font: 14px Sans-Serif; }

#login  { width:300px; margin:0px auto; margin-top:25px;}
#login  .loginfield{ width:300px; margin:0px auto;  }

#terms { text-align: center; margin: 20px 0 0 0; bottom:0px; position:absloute;}
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}

#bank { margin: 20px 0 0 0; }

.internal { margin:20px 0 0 0; bottom:0px; }
.internal h5 { text-transform: uppercase; font: 13px Helvetica, Serif; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0;}
.internal  textarea { width:100%; height:50px; }

textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }

.delete-wpr { position: relative; overflow:visible; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
.deleteitem { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }

.inputSugg
{
	float:none !important;
	width:200px !important;
}




#suggestions { position:absolute !important; background-color:#FFF; 	z-index:222; width:600px; padding-left:1px; padding-right:1px; border:2px solid #777; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; top:50px; height:auto; display:none; left:-130px; }
#suggestions div { position:relative; cursor:pointer; }

#loader {  width:auto; height:50px; line-height:50px; display:none; }

.error {	color:red; }



/* BOOKING DATEBLOCK STYLING */
#bookings { width:100%; background-color:#EEE; padding:5px; border:1px solid #777; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; }
.dateBlock { float:left; width:65px; height: 65px; background-color:#333; color:#FFF; text-transform: uppercase;}
#date { font-weight:bold; font-size:12px; margin:0 auto; vertical-align:bottom; position: relative; bottom: 4px; right: 25px; }
#dateNum { font-weight:bold; font-size:50px; padding-left:5px; margin:0 auto; vertical-align:bottom; position: relative; bottom: 0; text-align:center; }

#infoBlock {float:left; min-height:65px; margin-left:10px; width:398px; }

#time { }
#name {	}
#phone {  }

.avaBlock { height:70px; width:70px; border:1px solid #777; display:inline-block; margin:10px;  }

/* CUSTOM MOBILE CUSTOMER INFO */
.mobileBlock { height:44px; padding-top: 0; 
	background-image: linear-gradient(0deg, rgb(200, 199, 204), rgb(200, 199, 204) 50%, transparent 50%);
	background-size: 100% 1px; 
	background-repeat: no-repeat;
	background-position: bottom;
	z-index: 10;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	-webkit-touch-callout: none;
	background-color:rgba(248, 248, 248, 0.9);
	position:absolute;
	width:100%; 
	display:block; 
	top:0 ; 
	left:0; }
	
	.customerForm {
	margin-top:50px;
	}
	
	

	
	#vehicles {
		max-width:836px;
	}
	
	.search-box,.close-icon,#search-wrapper {
	
	padding: 10px;
}
#search-wrapper {
	width: 500px;
	margin: auto;
	margin-top: 50px;
}
#inputString {
	width:90%;
	border: 1px solid #ccc;
  outline: 0;
  border-radius: 15px;
}
#inputString:focus {
	box-shadow: 0 0 15px 5px #b0e0ee;
	border: 2px solid #bebede;
}
.close-icon {
	border:1px solid transparent;
	background-color: transparent;
	display: inline-block;
	vertical-align: middle;
  outline: 0;
  cursor: pointer;
}
.close-icon:after {
	content: "X";
	display: block;
	width: 15px;
	height: 15px;
	position: absolute;
	background-color: #FA9595;
	z-index:1;
	right: 55px;
	top: 0;
	bottom: 0;
	margin: auto;
	border-radius: 50%;
	text-align: center;
	color: white;
	font-weight: normal;
	font-size: 12px;
	box-shadow: 0 0 2px #E50F0F;
	cursor: pointer;
}
#inputString:not(:valid) ~ .close-icon {
	display: none;
}

#title {text-align:center; text-decoration:underline; text-transform:uppercase; font:25px Arial; }

.hider { position:relative; width:15px; color:#000; text-decoration:none; display:block; font-family:Verdana; border:1px solid; top:-85px; right:15px; font-weight:bold;  }
.hider a { text-align:center; }

.chatContent { height:300px; overflow-y:scroll; }

.borderless td, .borderless th {
    border: none;
}

.printCheckbox  input[type="checkbox"] {
	opacity:0;
}

.printCheckbox  label::before {
	content:"";
	display: inline-block;
	height:16px;
	width:16px;
	border:1px solid black;
}

.printCheckbox  label { 
	position:relative;
	font-weight:normal;
	margin:0;
}

.printCheckbox  label::before { 
	top: 3px;
	margin-right:3px;
}

.printCheckbox label::after { 
	left: 4px;
	top: 7px;
}

.printCheckbox  label::before,
.printCheckbox  label::after {
	position:relative;
}

.printCheckbox  label::after {
	content:"";
	display: inline-block;
	height:6px;
	width:9px;
	border-left:2px solid black;
	border-bottom:2px solid black;
	transform:rotate(-45deg);
}

.printCheckbox  input[type="checkbox"] + label::after{
	content:none;
}

.printCheckbox  input[type="checkbox"]:checked + label::after{
	content:"";
}

.printCheckbox  input[type="checkbox"]:focus + label::before{
	outline: rgb(59,153,252)auto 5px;
}