html{font-family:sans-serif}
body{min-width:320px;margin:0 auto;padding:0}
div,a{overflow:auto}

img{border:0;max-width:100%}
img.button{width:88px;height:31px}
p.ma,li.ma{line-height:1.8em}
a.ma{margin-right:1ex}

.ok   {color:green;border:1px solid green;background-color:#efe;text-align:left;padding:2px;border-radius:4px}
.error{color:#d71920;border:1px solid red;background-color:#fee;text-align:left;padding:4px;border-radius:4px}
.center{margin:auto;text-align:center}
.right{text-align:right}
.mp0{margin:0;padding:0}
.red{color:#d71920}
.monospace{font-family:monospace}
.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;zoom:1}

header {width:100%;height:44px;position:fixed;top:0;background-color:#393}
header a {color:white;text-shadow:1px 1px 1px #000;text-decoration:none}
#header_home   {position:absolute;top:4px;left:4px;font-size:32px}
#header_search {position:absolute;right:66px;top:-16px;font-size:56px;visibility:hidden}
#header_person {position:absolute;right:0}

header + p        {max-width:640px;margin:44px auto 0;padding:4px 2px}
header + p a      {color:#777;text-decoration:none}
header + p a:hover{text-decoration:underline}

h1{max-width:640px;margin:0 auto;padding:4px 0;text-shadow:2px 2px 8px #fcc;text-align:center;font: 26px sans-serif;color:#d71920;background-color:#eee;background:linear-gradient(to right,#ddd,#eee 50%,#ccc)}
h1 + p{width:96%;margin:0 auto;text-align:center;font:italic 14px sans-serif;color:#999}

body > div             {margin:16px 0 0;padding:0;display:flex;flex-flow:row;flex-wrap:wrap;align-content:flex-start;justify-content:center}
body > div > div       {width:320px;min-width:320px;margin:0;padding:0}
body > div > div > div {max-width:304px;padding:0 8px 8px}

form{padding:8px}
fieldset{padding:16px;border-radius:8px}
input[pattern]:invalid {background-color: #fdd}
input[pattern]:valid   {background-color: #dfd}

footer{background-color:#ddd;margin:32px 0 44px;padding:8px;border-top:1px dotted #333}
footer{margin:32px 0 0;padding:8px;border-top:1px dotted #333;background-color:#ddd}


@media screen and (min-width:640px)
{
#header_home   {left:calc(50% - 320px)}
#header_search {right:calc(50% - 254px)}
#header_person {right:calc(50% - 320px)}
p.ma,li.ma{line-height:normal}
a.ma{margin-right:0}
}