/* ------------------------------------------------------------------
   Cal.com - handheld stylesheet
   $Id: iphone.css,v 1.3 2009/11/07 11:02:41 bailey Exp $
   Per Apple's iPhone OS 3 web guidelines. The desktop sheet is frozen;
   everything mobile lives here.
   ------------------------------------------------------------------ */

body { font-size: 14px; }

#wrap, #main, #col-left, #col-right, #hero .left, #hero .right {
	width: auto;
	float: none;
	margin: 0;
}

#wrap { padding: 0 8px; }
#header { height: auto; overflow: hidden; padding-bottom: 8px; }
#logo { float: none; margin: 10px 0 6px 8px; }
#nav { float: none; margin: 0 0 0 6px; }
#nav li a { padding: 6px 8px; font-size: 12px; }

#hero { padding: 14px; }
#hero h1 { font-size: 22px; }

.box { margin-bottom: 10px; }
.box .bd { padding: 10px; }

/* Fingers are not mice. */
.slots a { width: 30%; padding: 12px 0; font-size: 14px; }
table.cal td a, table.cal td span.off { padding: 12px 0; font-size: 14px; }
.btn, input.btn { padding: 9px 16px; font-size: 14px; }
.btn-big { padding: 12px 20px; font-size: 16px; }

input.txt, input[type=text], input[type=password], textarea, select {
	font-size: 16px;   /* under 16px and Safari zooms the whole page on focus */
	width: 95%;
}
select { width: auto; max-width: 100%; }

.plan { float: none; width: auto; margin: 0 0 10px 0; }
#footer .fcol { float: none; width: auto; margin-bottom: 10px; }
#footer .badges { float: none; text-align: left; margin-bottom: 10px; }

/* The layout tables are 2009 scaffolding; let them reflow on a phone. */
.box .bd table[width="100%"], .box .bd table[width="100%"] tbody,
.box .bd table[width="100%"] tr, .box .bd table[width="100%"] td {
	display: block;
	width: auto !important;
	padding-right: 0 !important;
}