/* 
forms
=====
- medium density: samsung galaxy tab 3
- high density: htc m8, iphone 5
*/

form.horizontal {width:100%; max-width:40em; overflow:auto; border-top:1px solid #ccc; margin-top:1em; padding-top:1em;}
form.horizontal label {color:#333; float:left; text-align:right; clear:both; width:25%; max-width:13em; xbackground:red;}
form.horizontal input[type=text], 
form.horizontal input[type=password], 
form.horizontal textarea, 
form.horizontal select {float:right; width:70%; max-width:25em; border:1px solid #333; font-size:inherit; xpadding:.4em; xheight:1.2em; xmargin-bottom:.5em;}
form.horizontal > * {display:inline-block; margin:.5em .5em .5em 0; float:left; height:2em; font-size:1.2em;}
form.horizontal label {line-height:200%;}
form.horizontal input[type=text], 
form.horizontal input[type=password], 
form.horizontal select {margin-right:1em; background:#fff; border:#bbb 1px solid; font-size:1.2em;}
form.horizontal input[type=text], 
form.horizontal input[type=password], 
form.horizontal select, 
form.horizontal textarea {padding-left:.5em;}
form.horizontal label[for=location_id-ip] {clear:left;}
form.horizontal button.controller {clear:none; float:right !important; margin:1em; font-size:1.2em;}

form.vertical {background:red;}

form.inline {width:100%; overflow:auto; padding-bottom:1em;}
form.inline label {float:left; xbackground:red; height:1.3em; font-size:200%; overflow:hidden; padding-right:.5em;}
form.inline select {float:left; xbackground:orange; height:1.7em; font-size:155%;}

/* mobile [high denisty] */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution:2dppx) { 
    form.horizontal label {}
    form.horizontal input[type=text], 
    form.horizontal textarea, 
    form.horizontal select {float:right; width:70%;}
}