body { background-color: #f7f7f7
     ; font-family: 'DejaVu Serif', 'xHoefler Text', Georgia, serif
     ; margin: 0
     }

body > header { display: block
              ; background-color: #a6bcdf
              ; border-bottom: solid 1em #eee
              /* some browsers have trouble with 100% for the height so use em units :/ */
              ; -moz-border-bottom-left-radius: 500px 7em
              ; -webkit-border-bottom-left-radius: 500px 7em
              ; border-bottom-left-radius: 500px 7em
              }

h1 { text-align: right
   ; font-size: 4em
   ; font-weight: normal
   ; margin: 0
   ; padding: 0.2em
   ; color: #9ab
   }

h1 a { color: #f7f7f7
     ; border-bottom: none
     ; text-decoration: none
     ; text-shadow: #999 1px 1px 3px
     }

a#sjs:hover { color: #f7f7a7 }

a { color: #22c }

a.img { border: none }

#breadcrumbs { font-size: 1.5em
             ; color: #444
             ; margin: 0.3em
             }

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

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

#index { display: none
       ; width: 80%
       ; min-width: 200px
       ; max-width: 800px
       ; border: solid 1px #999
       ; -moz-border-radius: 10px
       ; -webkit-border-radius: 10px
       ; border-radius: 10px
       ; background-color: #eee
       ; margin: 1em auto
       ; font-size: 1.2em
       }

#index ul { padding: 0 1em
          ; list-style-type: none
          }

#index li { height: 1.4em }

.date { float: right }

#posts { border-left: solid 0.15em #999
       ; width: 80%
       ; min-width: 400px
       ; max-width: 680px
       ; margin: 4em auto 2em
       ; padding: 0 5%
       ; font-size: 1.2em
       ; line-height: 1.4em
       }

article { color: #222
        ; padding-bottom: 1em
        }

article:last-child { padding-bottom: 0
                   ; margin-bottom: 1em
                   }

article h1 { text-align: left
           ; font-size: 2em
	   ; line-height: 1.1em
           ; font-weight: normal
           ; color: #222
           ; margin: 1em 0
           ; padding-left: 0
           }

article h1 a { color: #222
             ; text-decoration: underline
             ; border-bottom: none
             ; text-shadow: #999 1px 1px 5px
             ; -webkit-transition: text-shadow 0.4s ease-in
             }

article h1 a:hover { text-shadow: #990 1px 1px 8px
                   ; color: #222
                   }

article h2 { font-size: 1.8em
           ; font-weight: normal
           ; margin: 1em 0
           ; padding: 0
           ; color: #222
           }

article h3 { font-size: 1.6em
           ; font-weight: normal
           }

time { color: #444
     ; font-size: 1.2em
     }

.gist { font-size: 0.8em }

#around { width: 80%
        ; min-width: 400px
        ; max-width: 800px
        ; margin: 1em auto
        ; padding: 0 3em 1em
        ; font-size: 1.2em
        }

#prev { float: left }
#next { float: right }

.sep { text-align: center
     ; font-size: 2em
     ; color: #666
     }

/* show discussion */
#sd-container { margin: 3em 0 }

input[type=submit],
#sd { border: solid 1px #999
    ; border-right-color: #333
    ; border-bottom-color: #333
    ; padding: 0.4em 1em
    ; color: #444
    ; background-color: #ececec
    ; -moz-border-radius: 5px
    ; -webkit-border-radius: 5px
    ; border-radius: 5px
    ; text-decoration: none
    ; margin: 0 2px 2px 0
    }

input[type=submit]:active,
#sd:active { margin: 2px 0 0 2px
	   ; color: #000
	   ; background-color: #ffc
	   }

#comment-stuff { display: none
               ; color: #efefef
               ; margin: 0
               ; padding: 2em 0
               }

#comments-spinner { text-align: center }

#comments { width: 70%
	  ; max-width: 600px
	  ; margin: 0 auto
	  }

.comment { color: #555
	 ; border-top: solid 2px #ccc
	 ; padding-bottom: 2em
	 ; margin-bottom: 2em
	 }

.comment big { font-size: 2em
	     ; font-family: Georgia, serif
	     }

#comment-form { width: 400px
              ; margin: 2em auto 0
              }

input[type=text],
textarea { font-size: 1.4em
	 ; color: #333
         ; width: 100%
         ; padding: 0.2em
         ; border: solid 1px #999
         ; -moz-border-radius: 5px
         ; -webkit-border-radius: 5px
         ; border-radius: 5px
         ; font-family: verdana, sans-serif
         }

input:focus[type=text],
textarea:focus { border: solid 1px #333 }

textarea { height: 100px }

input[type=submit] { font-size: 1.1em
		   ; cursor: pointer
		   }

footer { text-align: center
       ; font-size: 1.2em
       ; margin: 0
       ; padding: 1em 0
       ; background-color: #cdf
       ; border-top: solid 1px #bbb
       ; clear: both
       }

footer a { border-bottom: none
         ; color: #25c
         ; font-size: 1.3em
         ; text-decoration: none
         }

/* 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 }

  article { width: 80%
          ; min-width: 100px
          ; max-width: 800px
          ; padding-left: 1em
          ; padding-bottom: 3em
          }

  footer { font-size: 1em }
}