/* lhandheld.css */


@media handheld{


/* The px -> em translation was done by using this chart:
	 2px	0.15em  
	 5px	0.38em
	 9px	0.69em	xx-small
	10px	0.83em	x-small
	11px	0.90em
	12px	0.92
	13px	1.0em	small
	16px	1.2em
	25px	1.6em
  (based off the 13px == 1em == small equivalence, since ALA uses
   "small" as its paragraph-size font)
  and tweaking the result a bit (e.g. shifting 0.85em font sizes to 0.90
  and 0.77em font sizes to 0.83em) */

	/*  General rules */

/* Shrink images to fit within viewport; some phones
   can't scroll horizontally. */
img	{
	max-width: 100%;
	}

	/*  Establish general layout parameters */

/* Reduce margin slightly
   Drop border (it looks redundant when the spacing is small)
   Specify only generic font family, not specific screen font,
    because the handheld is likely to set a more readable default */
body	{
	
	font-family: sans-serif;
        padding:0;
        background-color: #FFFFFF;
        color:#000000;
        background-image:none;
	}

/* Reduce margin and border sizes slightly
   Use keyword for border-width above 3px
   Relax width to 'auto' and set max-width instead */
#wrapper{
	margin:1%;
	border: none;
	border-top: none;
        background:#FFFFFF;
	width: auto;
        max-height: 100%;
	max-width: 597px;
        padding:0;
  
}

#branding{
  max-height:1.5cm;
  padding:0;
  max-width:100%;  
  margin-left:.1%;
  background-color:#FFFFFF;
}

#branding img{
  max-height: 1.5cm;
  padding:0;
  max-width:100%;
  margin-left:.1%;
  background-color:#FFFFFF;
 
}

.info{
  margin-left: 1%;
  line-height:1em;

}


#navbar{ 
    
     float:none;
     width:auto;
     margin:0.4em;
     border:none;
     line-height:1em;
     height: auto;
     color:#000000;
     background:none;
     position:relative;
     display:list-item;
     
}

#navbar li{
  float:none;
}

#navbar ul{
   list-style-type:none;
}

#navbar a,
#navbar a:link,
#navbar a:visited{

   line-height: 1em;
   border:none;
   color:#3399FF;
   
   
}

#navbar a:hover,
#navbar a:active,
#navbar li.selected a:link,
#navbar li.selected a:visited{
   background:none;
   color: #000000;
   line-height:1em;
   border:none;
   width:auto;
   height:0;
}

  


/* Turn off float -> one-column layout
   Reduce padding to a percentage (scales well)
   Relax width to 'auto' and set max-width instead */
#content{
	float: none;
	padding: 2.5%;
        margin-left: 1%;
        margin-right: 1%;
	width: auto;
        background-color:#FFFFFF;
        color:#000000;
	max-width: 597px;
        line-height:1em;
        height:100%;
        margin-top:1%;
	margin-bottom: 1%;
        font-family: sanserif;
        font-size:1em;
        
        
}

#content img{
    margin-left:0%;
    max-width:100%;
}

#content hr{
   max-width:100%;
   margin-left:1%;
}

.info{
  max-width:100%;
  margin-left:1%;
  font-size:.83em;
}

.tattoo{
  margin-left:1%;
  max-width:100%;
}

#content p{
  margin:0%;
  max-width:100%;
  font-size:.83em;
}

#content a{
  margin-left:.5%;
  max-width:100%;
}

h3{
  margin-left:1%;
  max-width:100%;
  font-size:.83em;
  padding:0;
  
}

.resume{
  margin-left:1%;
  max-width:100%;
}

.resume a{
  margin-left:1%;
  max-width:100%;
}

#content hr{
  max-width:100%;
  margin-left:1%;
}

.site{
  max-width:100%;
  margin-left:1%;
}



#content object{
   margin: 1%;
   max-width:100%;
}


/* Vertical margins should be given either as small pixel values
    (a few pixels for a bit of graphical breathing room) or as
    ems (relative to the font size) so it scales with the font.
    10px is close to font size, so it fits under the latter
    category --> 0.8em
   Switch 5px margin/padding to percentages */
#content li	{
	line-height: 1.4em;
	margin-bottom: 1%;
	padding-left: 1%;
	margin-left: 1%;
}

/* Vertical margin -> em, as above*/
#content ul ul li {
	margin-top: 0.83em;
}

/* Horizontal spacing on inline elements
    should be given in em, not pixels, so
    that it scales with the font size */
#content .inlinelist li	{
	padding: 0 0.4em 0 0;
}




#footer {
       display:none;
}

#footer a{
     display:none;
}
    



/* Switch from pixels to ems in sidebar navigation margins/padding */
#navbar	{
	margin: 0 0 1.6em 0;
	padding: 0.4em;
 
}




/* Allow preformatted lines to break */
pre {
	white-space: pre-wrap; /* Opera 6 CSS Extension */
	white-space: pre-wrap; /* CSS2.1 Addition */
}

	/*  Typography */

/* Specific fonts are ok for headlines, so leave font-family alone
   Adjust top margin from px to em and reduce it a bit (the 2px on the
    bottom margin is small enough to be left alone)
   Reduce line height to 1em; headings frequently break into multiple
    lines on such small screen, and we don't want spacing /within/ the
    heading, only around it. */
 h1, h2, h3, h4, h5, h6	{
	line-height: 1em;
	margin-top: 1.3em;
}

/* Don't use keyword sizes based on small as default; we don't know the
    readability scale of the handheld's default font. (Even if we specify
    a font we won't know; handhelds rarely have much choice.)
   If you use keywords, base them off medium, or, as here, use relative
    sizes in 'em's for non-nesting cases. */
#pagebody h1	{
	font-size: 1.38em;
}
#pagebody h2	{
	font-size: 1.38em;
	margin-top: 1.5em;
}



h3 {
	font-size: 1.23em;
        margin-left:1%;
}


h4 {
	font-size: 1em;
        margin-left: 1%;
}


/* Use the default font size, because the device knows what's a good size for its screen and we don't. */
#body{
	font-size: 1em;
}



	/*  Forms */

/* Make sure inputs stay inside the content area */
input, textarea, select {
	max-width: 100%;
	}

#formarea label	{
	font-size: 0.90em;
	margin-top: 0.4em;
	}

.form-button{
  font-size: x-small;
}

.postdata 	{
	background: #fff;
	color: #999;
	font-size: 0.83em;
	margin: 0.83em 0 0.4em 0;
	border: 0;
	border-bottom: 1px dotted #ccc;
	border-top: 1px solid #f3f3f3
	}

.postdata p  	{
	margin: 0.83em 0;
	}

.postbody	{
	margin: 0 0 1.6em 0;
	line-height: 1.4;
	}

	/*  Helpers */

.linewrap {
	font-size: medium;
	}


#form {
	font-size: x-small;
	}

.form-button {
	font-size: x-small;
}

/* End handheld styles */	
}