html, body, .screen { margin:0; width:100%; height:100% }
h1, ul, li { margin:0; padding:0 }

body, button, input { font:normal 16pt/170% 'Avenir','Segoe UI',sans-serif }
body { color:#000; background:#FFF }
h1 { font-size:14pt; text-align:center }

input+button { margin-left:0.5em }
button { margin:0.5em 0.3em; padding:0.1em 1em; border-radius:1.5em; border:none; background:#70A5BE; color:#FFF; -webkit-tap-highlight-color:transparent }
button:active { background:#92BDD1 }

#total { font-weight:normal }

.screen { display:none; position:relative; max-width:800px; margin:0 auto }
.screen header, .screen main, .screen footer { display:table-row }
.screen header button { position:absolute; top:1px; margin:0; font-size:10pt }
button.back { left:0; top:2px !important; background:none; border-radius:0.5em; color:#70A5BE }
button.back:active { background:#D5E9F2 }
.screen header button[type=submit] { right:0 }
.screen main { height:100% }
.screen footer { text-align:center }
.screen footer button { font-size:13pt }

[data-screen=intro] #intro-screen,
[data-screen=main] #main-screen,
[data-screen=add-expense] #add-expense-screen,
[data-screen=edit-categories] #edit-categories-screen { display:table }

#intro-screen p { display:table-cell; vertical-align:middle; text-align:center }

#main-screen main { -webkit-tap-highlight-color:transparent }
#main-screen ul { display:table; width:100% }
#main-screen li { display:table-row }
#main-screen li:hover { background:#F8F8F8 }
#main-screen li span { display:table-cell }
#main-screen li .name { padding:0 0 0 1em; color:#666 }
#main-screen li .amount { text-align:right; white-space:nowrap; padding:0 1em }
#main-screen li.empty .amount { color:#CCC }

#add-expense-screen main { text-align:center; vertical-align:middle }
#add-expense-current { color:#666 }
#add-expense-screen input { background:none; border:none; border-bottom:dashed 1px #666; outline:none }
#add-expense-amount { width:6em }
#add-expense-description { width:12em }
#add-expense-history small { font-size:12pt; margin:0 0.5em }

#edit-categories-screen li { display:block; position:relative; height:1.7em }
#edit-categories-screen input { position:absolute; left:1em; top:0; width:80%; border:none; background:none }
#edit-categories-screen .delete { position:absolute; right:0; top:0.3em; height:2em; font-size:11pt }
#edit-categories-screen .deleted input { text-decoration:line-through; color:#CCC }
#edit-categories-screen .deleted .delete { display:none }