body { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 18px; line-height: 2; margin: 0 0 0 0; padding: 0 0 0 0; background-color: #F8F8F8; color: #111111; } header { margin-left: auto; margin-right: auto; max-width: 840px; height: 128px; border-bottom: solid 2px #AAAAAA; padding: 32px 0 32px 0; margin-bottom: 48px; } header img { display: inline-block; height: 128px; width: 128px; border-radius: 32px; margin-right: 16px; float: left; } header div.info div { display: inline-block; line-height: 1; padding-top: 12px; padding-bottom: 12px; margin-left: 16px; vertical-align: top; text-align: left; float: left; } header div.info span.title { display: block; font-size: 48px; font-weight: bold; margin-bottom: 24px; } header div.info span.subtext { display: block; font-size: 32px; margin-top: 24px; } nav { text-align: center; height: 42px; line-height: 32px; float: right; text-align: right; } nav a { color: #666666; display: block; } nav a:hover { color: #333333; } main { margin-left: auto; margin-right: auto; max-width: 840px; padding-left: 32px; padding-right: 32px; } footer { text-align: center; border-top: solid 2px #AAAAAA; padding-top: 16px; padding-bottom: 16px; margin-top: 48px; font-size: 16px; background-color: #DDDDDD; } footer span { display: block; } span, h1, h2, h3, h4 { padding: 0 0 0 0; margin: 0 0 0 0; } p { margin-top: 18px; margin-bottom: 18px; } div.block-small p { margin-top: 0px; margin-bottom: 0px; } h1, h2 { line-height: 1; margin-bottom: 32px; } h1 { font-size: 40px; } h2 { font-size: 32px; } h3 { font-size: 24px; } h4 { font-size: 20px; } div.title-subtext { color: #555555; font-weight: normal; font-size: 20px; margin-top: 18px; } a { color: #0074D9; text-decoration: none; } hr { height: 0; border: 0; border-top: 2px solid #AAAAAA; margin-top: 48px; margin-bottom: 48px; } div.block { padding-top: 48px; padding-bottom: 48px; border-top: solid 2px #AAAAAA; } div.block-small { padding-top: 32px; padding-bottom: 32px; } div.block:first-of-type, div.block-small { padding-top: 0; border-top: none; } pre { white-space: pre-wrap; } div.articles { display: flex; padding-top: 32px; padding-bottom: 32px; } div.article { display: flex; flex-direction: column; padding-left: 16px; padding-right: 16px; } div.article:first-of-type { padding-left: 0; border-right: solid 2px #AAAAAA; } div.article:last-of-type { padding-right: 0; border-left: solid 2px #AAAAAA; } div.article h4 { font-size: 18px; line-height: 1.4; } div.article p.summary { font-size: 14px; height: 100%; } div.article p.extra { color: #555555; font-size: 14px; line-height: 1.5; margin-top: 0; margin-bottom: 0; } p.openring { color: #555555; font-size: 14px; text-align: right; } @media only screen and (max-width: 950px) { header { height: 172px; } header div.info { text-align: center; } header div.info img { float: none; } header div.info div { padding-top: 19px; padding-bottom: 19px; float: none; } header div.info span.title { font-size: 50px; margin-bottom: 14px; } header div.info span.subtext { font-size: 26px; margin-top: 14px; } nav { float: none; line-height: 48px; text-align: center; } nav a { display: inline; margin-right: 32px; margin-left: 32px; } } @media only screen and (max-width: 550px) { body { font-size: 17px; } header { height: 220px; min-width: 230px; padding: 16px 16px 16px 16px; margin-bottom: 24px; } header img { display: block; margin-left: auto; margin-right: auto; margin-bottom: 6px; } header div.info div { margin: 0 0 0 0; padding: 0 0 0 0; } header div.info span.title { display: block; text-align: center; font-size: 24px; margin-top: 6px; margin-bottom: 6px; } header div.info span.subtext { display: block; text-align: center; font-size: 20px; margin-top: 6px; } nav a { display: inline; margin-right: 8px; margin-left: 8px; } hr { margin-top: 24px; margin-bottom: 24px; } h1, h2 { margin-bottom: 16px; } h1 { font-size: 36px; } h2 { font-size: 30px; } div.block, div.articles { padding-top: 24px; padding-bottom: 24px; } div.article p.summary { line-height: 1.5; } div.title-subtext { font-size: 18px; } }