/*
 * 
 * Find more about this app by visiting
 * http://miniapps.co.uk/
 *
 * Copyright (c) 2010 Alex Gibson, http://miniapps.co.uk/
 * Released under MIT license
 * http://miniapps.co.uk/license/
 *
 * Version 1.5 - Last updated: March 24 2010
 * 
 */

/* HTML5 CSS Reset
--------------------------------------------- */
/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section, menu,
time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body { line-height:1; }
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
nav ul, footer ul, aside ul { list-style:none; }
ol { list-style:none; }
article ol { list-style-type: decimal; }
a { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
:focus { outline: 0; }

* {
	-webkit-user-select: none;
}

body {
	background: rgb(197,204,211);
	color:rgb(76,86,108);
	font:17px/22px Helvetica, Arial, Verdana, sans-serif;
}

section {
	display: block;
	width:100%; 
	margin: 0 auto; 
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	-webkit-touch-callout: none; 
}

header { 
	width:100%; 
	height:43px;
	background: #73839c;
	background: -webkit-gradient(linear, left top, left bottom, from(#b2bcc8), to(#73839c));
	background: -moz-linear-gradient(top, #b2bcc8, #73839c);
	border-bottom: 1px solid rgb(0,0,0);
	position:relative;
}

article { 
	display: block;
	background: rgb(197,204,211);
	width:100%;  
	margin: 0 auto; 
	padding-bottom:10px;
	text-align:center;
}

footer {
	display: block;
	width:100%; 
	font-size: 12px;
	padding: 17px 0 17px 0;
	text-align:center;
	clear:both;
}

a:link, a:visited, a:hover, a:active, a:focus { 
	color:rgb(76,86,108);
	text-decoration:underline; 
}

h1 {
	font:21px Helvetica, Arial, Verdana, sans-serif;
	color: rgb(255,255,255);
	font-weight:bold;
	text-align: center;
	padding-top: 10px;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
}

p { 
	margin:17px auto;
	text-align: left;
	width:460px;
}

form { 
	width:100%;
	height:44px;
	padding: 10px 0 0 0;
	background: #cecdd2;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cecdd2));
	background: -moz-linear-gradient(top, #fff, #cecdd2);
	border-bottom: 1px solid rgb(0,0,0);
}

fieldset {
	margin:0 auto 17px auto;
	width:480px;
}

legend { 
	text-align: left; 
}

input[type=text] {
	font:17px Helvetica, Arial, Verdana, sans-serif; 
	-webkit-user-select: text;
	width: 380px;
}

input[type=checkbox] {
   	height: 18px;
	width: 18px;
	cursor: pointer;
}

label {
	color: rgba(0,0,0,1);
	padding: 0 0 0 10px;
	vertical-align:bottom;
	cursor: pointer;
	word-wrap: break-word;
}

.done {
	text-decoration: line-through;
	color:rgb(166,166,166);
}

button {
    background: #4a6c9b;
    background: -webkit-gradient(linear, left top, left bottom, from(#8ea4c1), to(#4a6c9b));
    background: -moz-linear-gradient(top, #8ea4c1, #4a6c9b);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    border: 1px solid #2B3942;
    height: 28px;
    font-size: 12px;
    font-weight:bold;
    color: #ffffff;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
    cursor: pointer;
} 

#add {
	background: #1f57c6;
	background: -webkit-gradient(linear, left top, left bottom, from(#6792e8), to(#1f57c6));
	background: -moz-linear-gradient(top, #6792e8, #1f57c6);
}

#sendmail {
	position: absolute;
	top: 7px;
	left: 10px;
}

#deletechecked {
	float:left;
	margin-left:10px;
}

#deleteall {
	float:right;
	margin-right:10px;
}

.delete {
	float:right;
	padding: 0 10px 0 15px;
	font-size: 24px;
	color:rgb(128,128,128);
	cursor: pointer;
}

ul {
	clear:both;
	margin: 17px auto 7px auto;
	list-style-type: none;
	background: #fff; 
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px; 
	border-radius: 8px;
	width:460px;
}

li {
	line-height: 44px;
	padding: 0 0 0 10px;
	color: rgba(0,0,0,1);
	font-weight:bold;
	text-align: left;
	border-bottom: 1px solid rgb(217,217,217);
	overflow:hidden;
}

li.empty {
	text-align: center;
	cursor: default;
}

#maillist {
	display:none;
	margin-bottom: 0;
	background: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#bdbec2));
	background: -moz-linear-gradient(top, #ececec, #bdbec2);
	border: 1px solid #34373E;
}

#maillist li {
	border-bottom: 0;
}

#maillink {
	text-decoration:none;
	color: rgba(0,0,0,1);
}

#tally1 {
	float:left;
	padding-bottom: 17px;
}

#tally2 {
	float:right;
	padding-bottom: 17px;
}

/* iPhone Portrait */ 
@media screen and (max-width: 320px)
{
	p { width:300px; }
	input[type=text] { width: 220px; }
	ul { width:300px; }
	fieldset { width:320px; }
}
 
/* iPhone Landscape */
@media screen and (min-width: 321px) and (max-width: 480px)
{
	p { width:460px; }
	input[type=text] { width: 380px; }
	ul { width:460px; }
	fieldset { width:480px; }
}