body { background-color: #f7f7f7
     ; color: #222
     ; font-family: 'DejaVu Serif', 'Hoefler Text', Georgia, serif
     }

h1 { text-align: center
   ; vertical-align: center
   ; font-size: 4em
   ; font-weight: normal
   ; margin: 0.8em 0 0.4em
   ; padding: 0
   }

h2 { text-align: center
   ; vertical-align: center
   ; font-size: 2em
   ; font-weight: normal
   ; margin: 0.2em 0 1em
   ; padding: 0
   }

a { color: #22a
  ; text-decoration: none
  ; border-bottom: dashed 1px #22a
  }

a.img { border: none }

#breadcrumbs { font-size: 1.5em
             ; color: #222
             ; position: absolute
             ; top: 0.3em
             ; left: 0.3em
             }

#breadcrumbs a { text-shadow: none
               ; color: #222
               ; border: none
               ; text-decoration: underline
               }

ul { text-align: center
   ; margin: 0 auto
   ; padding: 1em
   ; border: solid 1px #ccc
   ; width: 90%
   ; max-width: 950px
   ; background-color: #fff
   ; -moz-border-radius: 20px
   ; -webkit-border-radius: 20px
   ; border-radius: 20px
   
   /* ie searches for this path relative to the referencing file,
    * not this file as any sane implementation would do.
    *
    * fuck ie
    */
   ; behavior: url(border-radius.htc)
   ; behavior: url(../border-radius.htc)
   }

li { display: inline
   ; font-size: 1.6em
   ; margin: 0
   ; padding: 0
   }

li:after { content: ' •' }
li:last-child:after { content: '' }

li.ie-bullet { display: none } /* fuck ie */
li.last:after { content: '' } /* fuck ie */

li a { padding: 5px
     ; text-shadow: #999 5px 5px 5px
     }
li a:visited { color: #227 }

li a:hover,
li a:active { color: #000
            ; text-shadow: #aa7 5px 5px 5px
            ; border-bottom: dashed 1px #000
            }

#sjs { text-align: center
     ; font-size: 1.2em
     }

#sjs a { border-bottom: none }

#forkme { position: absolute
        ; top: 0
        ; right: 0
        ; border: none
        }

#promote-js { margin-top: 3em
             ; text-align: center
             }

#promote-js img { border: none }

td { font-size: 1.5em
   ; line-height: 1.6em
   }

td:nth-child(2) { padding: 0 10px }


.highlight { background-image: -webkit-gradient(radial, 50% 50%, 5, 50% 50%, 15, from(#ffa), to(#f7f7f7))
           ; background-image: -moz-radial-gradient(center 45deg, circle contain, #ffa 0%, #f7f7f7 100%)
           ; font-size: 1.2em
           }


/* iPhone and iPad */

@media only screen and (orientation:portrait) and (device-height:1024px),
       only screen and (max-device-width:480px)
{
  ul { padding: 0.5em
     ; width: 70%
     ; max-width: 400px
     }
  
  li { display: block
     ; margin: 0.7em 0.7em 1em
     ; font-size: 1.5em
     }
  li:after { content: '' }
}

/* iPhone */

@media only screen and (max-device-width:480px) {
  h1 { font-size: 2em
     ; margin-top: 1em
     }
  h2 { font-size: 1em }

  #breadcrumbs { font-size: 0.8em }

  li { font-size: 1.2em }

  td { font-size: 1em
     ; line-height: 1.1em
     }

  #sjs { font-size: 1em }

  #forkme { display: none }  
}