/* Base */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family:Arial, Helvetica, sans-serif; line-height:1.4; color:#222; background:#f7f7f7; }

/* Header + nav */
header { background:#fff; border-bottom:1px solid #ddd; padding:16px; text-align:center; }
header h1 { margin:0; }
.tagline { margin:4px 0 10px; color:#555; }
nav a { display:inline-block; margin:0 6px; padding:6px 8px; text-decoration:none; color:#0044aa; }
nav a:hover { text-decoration:underline; }

/* Layout */
main { max-width:980px; margin:24px auto; padding:0 12px; }
section { background:#fff; border:1px solid #ddd; padding:16px; margin:12px 0; }
h2 { margin-top:0; }

/* Cards */
.card { display:inline-block; vertical-align:top; width:30%; min-width:240px; margin:8px; background:#fff; border:1px solid #ddd; padding:12px; }
.example { margin:12px 0; }
.example img { width:100%; height:auto; border:1px solid #e6e6e6; }

/* Lists */
ul, ol { margin:8px 0 8px 24px; }

/* Table */
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid #ddd; }
caption { font-weight:bold; padding:10px; }
th, td { border:1px solid #ddd; padding:8px; text-align:left; }
th { background:#f0f0f0; }
tbody tr:nth-child(even) { background:#fafafa; }

/* Footer */
footer { text-align:center; color:#666; padding:20px 10px; }