* { box-sizing: border-box; }
body { margin:0; padding:0; font-family:"Segoe UI", Tahoma, Arial, sans-serif; font-size:14px; color:#222;
  background:#1c2f57;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px), linear-gradient(#2a4a7f,#16294d); }
img { max-width:100%; height:auto; }
.wrap { max-width:900px; width:100%; margin:0 auto; background:#fff8e6; border:3px ridge #c9a227; box-shadow:0 0 25px rgba(0,0,0,.6); }
.header { text-align:center; padding:10px 0 0 0;
  background:linear-gradient(to bottom, #4a7fc1 0%, #1c4e9d 55%, #0d1b3e 55%, #0d1b3e 100%); }
.header h1 { color:#ffffff; font-family:"Segoe UI", Tahoma, Arial, sans-serif; font-weight:300; font-size:34px; margin:8px 0 2px 0; letter-spacing:2px; text-shadow:0 2px 3px rgba(0,0,0,.6); }
.header p { color:#cfe0f5; font-size:13px; margin:0 0 8px 0; }
.banner { width:100%; display:block; -webkit-box-reflect:below 0px linear-gradient(transparent 75%, rgba(255,255,255,.2)); }
.content { padding:18px 28px; font-size:14px; line-height:1.6; }
.footer { text-align:center; font-size:11px; color:#cccccc; background:linear-gradient(to bottom, #1c4e9d, #0d1b3e); padding:10px; }
@media (max-width:640px) {
  body { font-size:15px; }
  .wrap { border-width:2px; }
  .header h1 { font-size:23px; letter-spacing:1px; padding:0 8px; }
  .header p { font-size:12px; padding:0 8px; }
  .content { padding:14px 16px; }
}