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

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

h2 { text-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.nav { 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
       ; behavior: url(assets/border-radius.htc)
       ; behavior: url(../assets/border-radius.htc)
       }

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

ul.nav li:after { content: ' •' }
ul.nav li:last-child:after { content: '' }


ul.nav li a { padding: 5px
            ; text-shadow: #999 5px 5px 5px
            ; -webkit-transition: all 0.5s ease-out
            }
ul.nav li a:visited { color: #227 }

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

ul#projects { width: 40%
            ; max-width: 400px
            }

ul#projects li { display: block
               ; line-height: 1.8em
               }

ul.nav li.ie-bullet,
ul#projects li.ie-bullet { display: none }

ul.nav li.last:after,
ul#projects li:after { content: '' }

footer { text-align: center
       ; font-size: 1.2em
       ; margin: 1em
       }

footer 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.nav ul { padding: 0.5em
            ; width: 70%
            ; max-width: 400px
            }
  
  ul.nav li { display: block
            ; font-size: 1.5em
            ; line-height: 1.6em
            }

  ul.nav 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 }

  ul.nav li { font-size: 1.2em }

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

  footer { font-size: 1em }

  #forkme { display: none }  
}