body,ul,li {
	padding:0;
	margin:0;
	border:0;
}

body {
	font-size:12px;
	-webkit-user-select:none;
	-webkit-text-size-adjust:none;
/*	-webkit-box-sizing:border-box;*/
	font-family:helvetica;
/*	padding-bottom:44px;	/*	This prevents the scroller to lock if the user swipes down outside of the screen.
							 	NOT needed if in home screen mode. */
}

h1 { text-align:center; font-size:1em; display:inline; position:absolute; left:0px; width:100%; top:-.5em;}
#header {
	top:0px;
	width:100%;
	height:45px;
	line-height:45px;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #333333), color-stop(0.05, #333333), color-stop(1, #000000));
	padding:0;
	color:#eee;
	font-size:20px;
	/*text-align:center;*/
	margin:0;
	border-bottom: 1px solid #999;
}

#header a {
	color:#f3f3f3;
	text-decoration:none;
	font-weight:bold;
	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
	
}

#footer {
	width:100%;
	height:48px;
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));;
	padding:0;
	border-top:1px solid #444;
}

#footer li {
	display:block;
	float:left;
}

#footer li {
	width:50%;
	text-align:center;
}

#footer a.remove {
	border-right:1px solid #333;
}

#footer a.add {
	border-left:1px solid #6a6a6a;
}

#footer a {
	display:block;
	text-decoration:none;
	font-size:12px;
	color:#eee;
	line-height:24px;
	text-shadow:0 -1px 0 #000;
}

#footer span {
	display:block;
	font-size:30px;
	font-weight:bold;
}


#wrapper {
	height: 386px;		/* --386-- 460 - 49 (toolbar) - 45 (header) - 48 (footer) */
	position:relative;	/* On older OS versions "position" and "z-index" must be defined, */
	z-index:1;			/* it seems that recent webkit is less picky and works anyway. */

	width:100%;
	background:#000;
	overflow:hidden;
/*	background:#aaa url(wrapper-bg.png);*/
}

@media only screen and (device-width: 768px) {
	#wrapper {
		height:674px; /*768 - 49 toolbar - 45 header*/
	}
}

@media only screen and (orientation:landscape) and (device-width: 1024px) {
	#wrapper {
		height:930px;
		
	}
}

.edit, .add { 
	margin:0px;
	font-size:.7em;
	color:#fff; 
	-webkit-border-radius:4px; 
	/*background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); */
	background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #333333), color-stop(0.05, #333333), color-stop(1, #000000));
	top:.70em;
	display:block;
	
}

.edit { position:absolute; left:.5em;  width:4em; height:1.9em;  top:.925em;}
.add  { position:absolute; right:.5em; font-weight:bold;width:3em; height:1.5em;	font-size:.9em; float:right;}
.scroller {
/*	-webkit-touch-callout:none;*/
/*	-webkit-tap-highlight-color:rgba(0,0,0,0);*/

	float:left;
	width:100%;
	padding:0;
	
/*	-webkit-box-shadow:0 0 8px #555;	/* Don't use shadows in production, they slow down drastically CSS animations */
}



.scroller ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

.scroller li {
	padding:0 10px;
	height:40px;
	line-height:40px;
	border-bottom:1px solid #999;
	background-color:#000;
/*	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d4d4d4), to(#fafafa)); */
	-webkit-transform:translate3d(0,0,0); /* prevent flickering http://cubiq.org/you-shall-not-flicker */
	font-size:14px;
}

.scroller li a { color:#fff; text-decoration:none; -webkit-transform:translate3d(0,0,0);}

fieldset {
	display:block; float:left;
	width:100%;
}