/* iPhone and iPad */

@media only screen and (orientation: portrait) and (min-device-width: 768px) and (max-device-width: 1024px),
       only screen and (min-device-width: 320px) and (max-device-width: 480px),
			 only screen and (min-device-pixel-ratio: 1.5),
			 only screen and (max-device-width: 800px)
{
  ul.nav { padding: 0.5em
         ; width: 60%
         ; max-width: 600px
         }

  ul.nav li { display: block
            ; font-size: 1.5em
            ; line-height: 1.8em
            }

  ul.nav li:after { content: '' }

  #browse { display: none }
}

@media only screen and (max-device-width: 480px), /* iPhone */
       only screen and (min-device-pixel-ratio: 1.5), /* iPhone (retina) */
			 only screen and (max-device-width: 800px) /* Nexus One */
{
  /* common */

  h1 { font-size: 2em
     ; margin-top: 1em
     }
  h2 { font-size: 1em }

  #breadcrumbs { font-size: 0.8em }

	#show-posts { margin-top: 1em
		          ; font-size: 0.8em
		          }

  #forkme { display: none }

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

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

  footer { font-size: 1em }

  #blog > header > h1 { margin-top: 0 }

  #blog img { max-width: 100% }

  nav#index { width: 90%
	          ; min-width: auto
	          ; max-width: auto
            ; margin: 0.3em auto
            ; padding-bottom: 0.3em
            }

  nav#index ul { font-size: 0.8em
	             ; padding-left: 2em
	             }

  nav#index li { list-style-type: disc }
  nav#index li > span.date { display: none }

  #blog article h1 { font-size: 1.2em }

  div#posts { width: 100%
	          ; margin: 0
            ; padding: 0
            ; border-left: none
            ; padding-left: 10px
            }

  article { margin: 0
          ; padding: 0
          ; font-size: 0.8em
          }

  .tags { margin: 0
          ; padding: 0
					; display: none
          }

  .tags li { padding: 0.2em 0.3em }
  
  time { font-size: 1.1em }

	pre, .gist { font-size: 0.8em }

  .sep { font-size: 1em }

  #around { width: 100%
	        ; min-width: auto
          ; max-width: auto
          ; margin: 0 auto
          ; padding: 0 0.2em
          }

  #prev, #next { padding: 0.3em 0
               ; font-size: 0.95em
               }

  #comment-stuff { padding: 0
                 ; margin-top: 2em
                 }

  #comments { width: 100% }

  #comment-form { width: 90%
                ; margin: 0 auto
                }

  input[type=text],
  textarea { font-size: 1.2em
           ; width: 95%
           }

  input[type=submit] { font-size: 1em }

  /* proj */
  #info { width: 70%
        ; padding: 0 1em
        }

  #info > div { clear: left
              ; width: 100%
              ; max-width: 100%
              ; padding: 0.5em 0.2em 1em
              ; border-left: none
              ; font-size: 1em
              }

	#stats { font-size: 0.8em }

}

/* iPhone and iPad landscape */

@media only screen and (orientation: landscape) and (min-device-width: 768px) and (max-device-width: 1024px),
       only screen and (orientation: landscape) and (min-device-width: 320px) and (max-device-width: 480px),
       only screen and (orientation: landscape) and (min-device-pixel-ratio: 1.5),
			 only screen and (orientation: landscape) and (max-device-width: 800px)
{
  body { font-size: 0.7em }
}


/* iPad portrait */
@media only screen and (orientation: portrait) and (min-device-width: 768px) and (max-device-width: 1024px)
{
  article > header > h1 { font-size: 1.8em }
}