@font-face {
  font-family: centuryschoolbook;
  src: url(/images/centuryschoolbook.ttf) format("truetype");
}
@font-face {
  font-family: centuryschoolbook;
  src: url(/images/centuryschoolbookbold.ttf) format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: oldwest;
  src: url(/images/oldwest.ttf) format("truetype");
}
img, table,div,a{box-sizing: border-box;}

article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
	display: block;
}
fieldset {border: 1px dotted #888;border-radius: 6px;margin: 2px 4px;font-size: 100%;font: inherit;display:inline-block;vertical-align: top;}
fieldset legend {font-size: 14px;}

a:link,a:visited,a:active,.link{color:darkblue;text-decoration: none;}
a:hover,.link:hover{color:#045200;text-decoration: underline;}

a.button,span.button{
	display: inline-block;
	border: 1px outset #999;
	padding: 2px 8px;
	border-radius: 4px;
	background: #f5f5f5;
	margin: 2px;
	font-size: 0.7em;
	color: #000;
	text-decoration: none;
}
span:hover.button{cursor: pointer;}
a:hover.button,span:hover.button{border-style: inset;background: #e5e5e5;text-decoration: none;}
a.button.disabled,span.button.disabled{border-style: solid;background: #999;text-decoration: line-through;pointer-events: none;cursor: not-allowed;}
a.button.selected,span.button.selected{border-style: inset;background: #e5e5e5;text-decoration: none;}

table {border-collapse: collapse;border-spacing: 0;}
div,table,span,td,th,tr,input,textarea{box-sizing: border-box;-moz-box-sizing: border-box;}
html{
	background: #000 url('/images/cam24_1.jpg') no-repeat center center fixed;
	background-size: auto;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

body {
	FONT-FAMILY: arial,Helvetica,Verdana;
	FONT-SIZE: 18px;
	margin:0 auto 0; max-width: 1200px;
	background: #AAAAAA77;
	//background: #FFFFDFef;
	padding: 0;
}

#header {font-size:40px; background-color:#003000; position: relative;margin: 0;padding:0 10px;border:0;color:#fff;height:60px; overflow: hidden;}
#header #sub-title{position: absolute;top: 2px;left: 4px;font-size:12px;font-family: oldwest;}
#header #main-title{font-weight: bold;font-family: oldwest;display: inline-block;padding:10px 0 0;font-size: 50px;position: relative;}

#header #userbar {position: absolute;top: 2px;right: 3px;}
#header #userbar a{text-decoration: none;display: inline-block;text-align: center;padding: 2px 10px;margin:0;color: #fff;}
#header #userbar div{font-size:10px;margin-top: -5px;}
#header #userbar a:hover{color: #ccc;background-color: #004400;border-radius: 3px}

#HeadUserWelcome{font-size:16px;overflow:auto;position: absolute;right:4px;bottom:1px;}


#navbar{
	margin: 0 0 8px;
	padding: 2px 4px 2px;
	font-size: 18px;
	background-color: #FFFFEFEE;
	font-size: 18px;
}


#navbar a, a.navbutton,a.navbutton:link{
	display: inline-block;
	text-decoration: none;
	border: 1px outset #999;
	background-color:#003000;
	border-radius: 0px;
	color: #fff;
	margin: 3px;
	padding: 2px 6px;

}
#navbar .stockbutton{padding-left: 26px;background: #003000 url('/images/wcar.svg') 8px center / 20px 20px no-repeat local;}
#navbar a.msel{background-color:#005000;}
#navbar a:hover,a.navbutton:hover{text-decoration:none;border-style: inset;background-color:#000;color:#fff}


#navuser{float:right;}

nav div,nav form{display: inline-block;}

#content{padding: 4px 4px 8px;}

section h1:first-of-type, section h2:first-of-type{background-color: #005500;color:#fff;padding:3px 8px;font-size: 1em;font-weight:bold; font-family:centuryschoolbook;}
h1	{font-size: 20px;}
h2	{}
h3 {}

.box, section{margin-bottom:15px;overflow: auto;background-color: #FFFFEFEE;}

table.tb{width: 100%}
.tb th{vertical-align: bottom;font-size: 14px;}
.tb th.vtext {writing-mode: vertical-rl;transform: rotate(180deg);text-align: left;vertical-align: initial;}
.tb td {padding: 2px 4px;}
.tb tr:nth-child(odd),tr.row1{background-color: #c7e2c7;}
.tb tr:nth-child(even), tr.row0{background-color: #FFFFFF;}

//h1.bhead{background: #005000 url(images/wcar.svg) no-repeat left center;padding-left: 28px;}
.bhead{margin-top: 0;float: left;}
.bhead a:link,.bhead a:visited,.bhead a:active{color:#fff;text-decoration: underline;}
.bhead a:hover{color:#fff;text-decoration: none;}

section.box, section, .box{border:1px solid #005500;border-top-width:4px;}

.box-head{overflow: auto;font-size: 18px;}
.box-head .sub{overflow: auto;font-size: 16px;}
.box-head a.navbutton{font-size: 16px;}
.box-head-left,.box-head-right,.bhead{background-color: #005500;color:#fff;margin: -4px 0 0;padding:3px 8px 3px;font-weight:bold; font-family:centuryschoolbook;}
.box-head-left,.bhead{float: left;padding-right:12px;border-bottom-right-radius:10px;}
.box-head-right{float: right;padding-left:12px;border-bottom-left-radius:10px;}
.box-head-bar{background-color: #005500;color:#fff;padding:3px 8px 3px;font-weight:bold; font-family:centuryschoolbook;overflow: auto;}




.registration_form {margin:0 auto;padding:14px;max-width: 550px;}
.registration_form label {width: 10em;float: left;margin-right: 0.5em;display: block;text-align:right;}
.registration_form input[type=text]{width: 290px;}
.registration_form input[type=password]{width: 290px;}
.registration_form .submit {float:right;}
.registration_form .elements {padding:8px 8px;}
.registration_form .elements span{font-size:12px;margin-left:100px;}
.registration_form p {border-bottom:1px solid #B7DDF2;color:#666666;font-size:11px;margin-bottom:20px;padding-bottom:10px;}

.registration_form .elements.red input{border-color:red;}
.registration_form .elements.red label{font-weight:bold;color:red;}



.frm{max-width: 500px;margin: 0 auto}
.frm fieldset{margin: 8px 4px;display:block}
.frm-itm {padding: 4px 0px 10px;}
.frm-itm label{font-size:0.9em;display: block;padding-bottom:6px}
.frm-itm input{width: 290px;}
.frm-itm input[type=submit],.frm-itm input[type=checkbox]{width: auto;}
.frm-itm.red input{border-color:red;}
.frm-itm.red label{font-weight:bold;color:red;}
.cp-img-box{float: right;width: 300px;}
.cp-img-box img{display:block;max-width: 300px;max-height:300px;margin:6px auto;}




.errormsgbox{margin: 6px 20px;
    padding: 6px;
    border: 2px yellow dashed;
    background: #ffffb9;}

.success{margin: 6px 20px;
    padding: 6px;
    border: 2px green dashed;
    background: #d1ffd3;}
.tb .errormsgbox,.tb .success{margin: 0;padding: 4px;text-align: center;}


.carjobbox{
	overflow:auto;
	margin:10px 10px 20px 10px;
	border-radius: 0px;
	padding: 10px;
	border: 2px yellow dashed;background: #ffffb9;
}
.carjobbox.avi{border: 2px yellow dashed;background: #ffffb9;}
.carjobbox.grn{border: 2px dashed green;background: #d1ffd3;}
.carjobbox.red{color:#fff;background:red;border:1px solid #000;}
.carjobbox.att{background: #ffffb9;border:2px solid yellow;}
.carjobbox.cmpt{background: #ffffb9;border:2px solid green;}

.carjobbox .button{font-size:0.8em;}
#pickupdiv,#setoutdiv{margin-bottom:10px;display: inline-block;vertical-align: top;}

#os-town-btn{margin:4px 10px 10px;text-align: center;padding: 6px;background:#ffffa0;font-weight: bold;font-size: 1.1em;border:1px outset #999;border-radius: 4px;color: #000;text-decoration:none;
}


@media screen and (max-width: 500px) {
#pickupdiv,#setoutdiv{display:block;}
.carjobbox .button{display:block;text-align:center;font-size: 1em;padding: 6px 0;margin: 10px 0;}
}


.googlesignin1{height: 31px;width: 130px;display: block;margin:4px 2px;background-image: url(/images/google1.png);background-position: 0 0;}
.googlesignin1:hover{background-position: 0 31px;}
.googlesignin1:active{background-position: 0 62px;}
.googlesignin2{height: 46px;width: 191px;display: block;margin:4px 2px;background-image: url(/images/google2.png);background-position: 0 0;}
.googlesignin2:hover{background-position: 0 46px;}
.googlesignin2:active{background-position: 0 92px;}




@media (max-width: 900px){
	#content{padding: 0;}
	//body,html{background: #ccc;}
}

@media screen and (max-width: 700px){
.nonmoble {display:none !important;}
body,#pagebody{margin: 0;font-size: 20px;}
#header{font-size: 30px;height: inherit;background-image: none;overflow: auto;margin: 0;}
#header #htitle .the{font-size: 0.4em;vertical-align: top;}
#header #main-title{font-size: 30px;}
#header #userbar a{padding: 2px 6px;}
#header #userbar div{display: none;}
#header #userbar .nm{display: none;}

#HeadUserWelcome, #HeadUserPoints, #HeadUserLoc{font-size:13px;}


#content{padding: 0;}
//body,html{background: #fff url('/images/logo.png') no-repeat center center fixed !important;}
body,html{background: #fff};
.box{background-color: #FFFFEFEE;}
h1{font-size: 1.0em}

.registration_form label {margin: 0 0 2px;width: auto;float: none;display: block;text-align:left;}
.registration_form .elements span{margin-left:0;text-align:center;}
.registration_form input[type=text]{width: 100%;font-size: 1em;}
.registration_form input[type=password]{width: 100%;font-size: 1em}
.registration_form .elements {margin: 0 auto;}



}
@media screen and (min-width: 700px){
	.moble {display:none !important;}
}

@media screen and (max-width: 500px) {
#navbar a span{display: none;}
#header{}
//#header #htitle{margin: 10px 0 0 4px;}
#navbar{margin: 0 0 10px;}
#navbar a{text-align: center;padding: 4px 10px;}
#navbar a span{display: none;}
#navuser{display: none;}
}




.mlist {font-family:centuryschoolbook}
.mlist th{text-align:left;}
.listmoves td:nth-child(1){max-width:10px;text-align:center;}
.mlist .zone{font-size: 0.7em;vertical-align: top;padding-left:4px;}

@media (min-width: 600px){
.mlist .moble{display:none;}
}
@media screen and (max-width: 600px){
	//#MyCmpltMoves{display: none;}

	//div.moble {display:block;}
	//i.moble {display:inline;}

	/* Force table to not be like tables anymore */
	table.mlist, .mlist thead, .mlist tbody, .mlist th, .mlist td, .mlist tr {
		display: block;
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	.mlist thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.mlist tr { border: 1px solid #eee; }
	.mlist td {
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding:5px;
		padding-left: 100px;
	}
	.mlist td:before {
		position: absolute;
		top: 6px;
		left: 6px;
		width: 100px;
		padding-right: 10px;
		white-space: nowrap;
	}
	.listmoves td:nth-of-type(1){display: none;}
	.listmoves td:nth-of-type(2){padding-left:10px;font-weight:bold;font-size:1.1em;}
	.listmoves td:nth-of-type(3):before { content: "Pickup"; }
	.listmoves td:nth-of-type(4):before { content: "Set out"; }
	.listmoves td:nth-of-type(5){display:none }
	.listmoves td:nth-of-type(6){ text-align:right; }
	.listmoves .nonmoble {display:none;}

	.mymoves td {padding-left: 100px;}
	.mymoves td:nth-of-type(1){padding-left:10px;font-weight:bold;font-size:1.1em;}
	.mymoves td:nth-of-type(2):before { content: "Pickup"; }
	.mymoves td:nth-of-type(3):before { content: "Set out"; }

	.CmpltMoves td {padding-left:8px;}
	.CmpltMoves td:nth-of-type(1),.CmpltMoves td:nth-of-type(5){display:none;}

	#GetSwitchList fieldset {display: block;}
	#GetSwitchList select, .frm-itm select {width: 100%;font-size: 1em;}
	#GetSwitchList input, .frm-itm input{width: 100%;font-size: 1em;}
	#GetSwitchList input, .frm-itm input[type=checkbox]{width: auto}
	.frm-itm input[type=submit]{width: 100%}
	#home-list-moves .box-head .button{font-size: 1em}
	.cp-img-box{float: auto;width: 100%; max-width: none;}
	.cp-img-box img{display:block;max-width: 300px;max-height:100px;margin:6px auto;}
}

.print{display:none;}
@media print {
	.print{display:block;}
	.noprint,.moble{display:none;}
	#navbar, .printbutton,#navuser,#userbar,#HeadUserPoints{display:none}
	html,body,.box, .bhead{background:none!important}
	.bhead{color:#000!important}
	#content{padding: 0;}
	a:link,a:visited,a:active,.bhead{color:#000;}
	#header {background:none;}
	#header #htitle{color:#000;font-size: 70px;}
	.tb tr:nth-child(n+0){background:none;}
	.tb thead tr{border-bottom:2px solid #000;}
	.tb thead th{padding-bottom:4px;font-size: 18px;}
	.tb tbody tr:nth-child(n+1){background:none;border-bottom:1px dashed #000;}
	.tb td{padding-top:10px;padding-bottom:10px}
	#HeadUserWelcome{display:block;color:#000;font-size:18px!important}
}