/* reset */
#header, #nav, #article, #footer, body, html, pre code {
  display:block; margin:0; color:#000; }

/* colors */
body                   { background-color:#eee; }
#header, #nav, #footer { background-color:#ddd; }
#article               { background-color:#aaa; }
pre code               { background-color:#ccc; }

/* round corners, margins */
html { margin:1.5em }
#header, #nav, #article, #footer { border-radius        : 1.5em;
                                   -moz-border-radius   : 1.5em;
                                   -webkit-border-radius: 1.5em;
                                    margin-bottom: 1.5em; padding: 1em; }
pre code { border-radius        : 1em;
           -moz-border-radius   : 1em;
           -webkit-border-radius: 1em;
           margin:1em; padding:0.5em;}
#nav ul { margin:  0;
          padding: 0 0 0 1em; }

/* margins */
#header, #nav, #article, #footer body { }

/* style */
a:visited { color: #822; }
a:hover   { color: #f50; }
#header span { font-size: 2.5em; font-weight: bold; }
#nav a { text-decoration: none; }

/* layout */
body     { width: 55em; margin: auto; }
#article { float:left; margin-left: 15.5em; width: 37.5em; }
#nav     { float:left; margin-left: -55em ; width: 12em; }
#footer  { clear: both; }