body { background-color: #f7f7f7
     ; color: #222
     ; font-family: 'hoefler text', georgia, serif
     }

h1 { text-align: center
   ; vertical-align: center
   ; font-size: 4em
   ; font-weight: normal
   ; margin: 0.6em 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
   }

ul { text-align: center
   ; margin: 0 auto
   ; padding: 1em
   ; border: solid 1px #ccc
   ; width: 90%
   ; max-width: 950px
   ; background-color: #fff
   ; border-radius: 20px
   ; -webkit-border-radius: 20px
   ; -moz-border-radius: 20px
   }

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

li { display: inline
   ; font-size: 2em
   ; margin: 0
   ; padding: 0
   }
li:after { content: ' •' }
li:last-child:after { content: '' }

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
            }

a.img { border: none }

a.up { font-size: 1.5em
     ; text-shadow: none
     ; color: #222
     ; border: none
     ; text-decoration: underline
     }

p#promoteJS { margin-top: 3em
            ; text-align: center
            }

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
           }


/* iPad (landscape) */

@media only screen and (orientation:landscape) and (device-height:1024px) {
  h1 { font-size: 2em }
  li { font-size: 1.5em }
  a.up { font-size: 1.2em }
}

/* iPhone and iPad */

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