html,body,div{padding:0;margin:0}
body{background-color:black}
#sms-form,#history{position:relative;max-width:24em;margin:auto}
#sms-form{padding:1ex;background-color:#FD9}
#dn>*{margin-bottom:1ex}
#dn>.clear{margin-bottom:0}
#from+#to_box{float:right}
#to[readonly]{background-color:#CCC}
#message{display:block;width:97%;padding:1%;color:white;background-color:black}
#send{float:left}
.clear{clear:both}
#control{text-align:right}
#control>*{margin-top:1ex}
output{display:inline-block}
#history{padding:0;font:80% sans-serif;width:100%;white-space:nowrap}
#history li{margin:1ex 0 0 0;padding:0 0 .25ex;background-color:#333;border:#CCC 1px solid}
#history li>*{margin:0}
#history h1{padding:.2ex 0 .2ex .5ex;font-size:inherit;color:black;background-color:#CCC;overflow:hidden}
#history p{margin:0 .5ex;padding:0;color:#CCC}
#history li.deleted{border-color:#666}
#history li.deleted h1{background-color:#666}
#history li.deleted p{color:#666}
#history .charge,#history .age{float:right;clear:right;text-align:right}
#history .state-sent{color:#FF3}
#history .state-delivered{color:#3F3}
#history .state-failed{color:#F33}
#history .state-unknown{color:#999}
@media(min-width:30em){
#sms-form,#history{max-width:40em}
#dn,#control{width:30%}
#to_box{float:left}
#to{width:97%}
#control{position:absolute;bottom:1ex}
#message{display:inline-block;float:right;min-width:20em;width:65%}
form>div{float:left}
}