/* Layout for the public page (/register/): the kiosk stylesheet is built for an 800px portrait tablet. On a desktop the form
   is a centred column; on a phone the kiosk's own narrow-screen rules apply. Not used on the tablet. */
html.web body{background:#e8f1f8}
@media (min-width:860px){
 html.web #main{max-width:820px;margin:0 auto;padding-left:0;padding-right:0}
 html.web #hdr,html.web #ftr{left:50%;right:auto;width:820px;margin-left:-410px}
 html.web #hdr{border-left:1px solid #d3e5f3;border-right:1px solid #d3e5f3}
 html.web #ftr{border-left:1px solid #d3e5f3;border-right:1px solid #d3e5f3}
}
/* phones: tighter gutters and smaller type so a 360px screen is comfortable */
@media (max-width:520px){
 html.web #main{padding-left:10px;padding-right:10px}
 html.web #screen{padding:16px 14px 8px 14px}
 html.web h1{font-size:30px}
 html.web h2{font-size:26px}
 html.web #brandBar{padding-left:12px;padding-right:12px}
 html.web #brandLogo{height:44px}
 html.web #langBtn{height:46px;line-height:42px;font-size:17px;padding:0 10px 0 8px}
 html.web #langBtn img{width:30px;height:20px;margin-right:6px}
 html.web #progBar{padding:0 12px}
 html.web #progText{width:auto;margin-right:12px;font-size:17px}
 html.web #barOuter{margin-left:0;overflow:hidden}
 html.web #ftr{padding:12px 12px}
 html.web .btn{min-width:110px;padding:0 14px;font-size:21px}
 html.web .btn-pri{min-width:150px}
 html.web .langgrid .langcell{width:100%}
 html.web .welcome > img{width:220px}
 html.web .dlg{padding:20px 18px}
 html.web .seg{min-width:0}
 html.web .f.pw40{width:46% !important}
 html.web .f.pw60{width:54% !important}
 html.web .pickbtn{font-size:18px;padding:12px 40px 12px 10px;min-height:56px;line-height:24px}
 html.web .pickbtn:before{width:34px}
 html.web .pickbtn:after{right:10px}
 html.web input.t,html.web textarea.t{font-size:19px}
}