iOS.css.list.css

/*
 * iOS.css List (CSS) v1.0
 * http://www.raffael.me/iOS.css/
 * http://github.com/raffael-me/iOS.css/
 *
 * Copyright (c) 2012 Raffael Hannemann
 * Dual licensed under the MIT.
 * http://www.opensource.org/licenses/mit-license.php
 *
 */
 
/**
 * List Boxes
 * <ul class="list"><li></li></ul>
 * Add 'light' class to UL to make font weight light
 */
ul.iOSlist {
	list-style: none;
	background: #f7f7f7;
	border: 1px solid #a2a7ad;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 0 2px 0 -1px rgba(255,255,255,.9), 0 1px 0 #e4e4e4 inset;
	text-shadow: 0 1px 0 white;
	overflow: hidden;
	-webkit-transform: translateZ(0);
	font: bold 1em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
ul.iOSlist * {
	-webkit-user-select: none;
}
ul.iOSlist.light { font-weight: normal; }
ul.iOSlist li {
	padding: 9px 10px;
	border-top: 1px solid #d0d0d0;
	border-bottom: 1px solid #f3f3f3;
	position: relative;
	min-height: 43px;
	-webkit-box-sizing: border-box;
}
ul.iOSlist li:first-of-type {
	border-top: none;
}
ul.iOSlist li:last-of-type {
	border-bottom: none;
}
ul.iOSlist li .iOScheckbox {
	position: absolute;
	right: 10px;
	top: 8px;
}
ul.iOSlist + ul.iOSlist {
	margin-top: 20px;
}

/* you can embed the <ul /> into a div with the following class: */
div.iOSlist-background {
	padding: 10px 9px;
	background: -webkit-linear-gradient(left, #C5CCD4 71%, #CBD2D8 71%, #CBD2D8 100%);
	-webkit-background-size: 7px 1px;
}

/* you can place <p /> tags after lists to describe them further */
div.iOSlist-background > p {
	color: #4f596d;
	text-shadow: 0 1px 0 white;
	text-align: center;
	font: normal 15px/19px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	padding: 8px 10px 14px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* you can place <h2 /> tags before lists to title them */
div.iOSlist-background > h2 {
	font: bold 1em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	padding-left: 10px;
	padding-bottom: 6px;
	text-shadow: 0 1px 0 white;
	color: #4d576b;
}



/* Plastic lists */
ul.iOSplasticlist {
	background: white;
}
ul.iOSplasticlist
li {
	background: #e9eaec;
	border-bottom: 1px solid #e6e7e9;
	border-top: 1px solid #ecedef;
	box-shadow: 0 -1px 0 #fafafa,
				0 1px 0 #cccdcf;
	margin: 2px 0;
	height: 43px;
	color: #3e3e3e;
	font: bold 18px/23px "Helvetica Neue";
	padding: 1px 11px;
	-webkit-box-sizing: border-box;
	width: 100%;
	text-shadow: 0 1px 0 rgba(255,255,255,0.8);
	-webkit-font-smoothing: antialiased;
}
ul.iOSplasticlist
li small {
	font: normal 13px/12px "Lucida Grande";
	color: #909090;
	display: block;
	padding-left: 1px;
}

ul.iOSplasticlist
li:last-of-type {
	box-shadow: 0 -1px 0 #fafafa,
				0px 3px 5px grey;
}

ul.iOSplasticlist
li.iOSplasticlist-command {
	font-size: 21px;
	padding: 10px 11px;
}

ul.iOSplasticlist
li.iOSplasticlist-sorting {
	height: 25px;
	font-size: 15px;
	color: #4f4e4e;
	text-shadow: 0 1px 0 rgba(255,255,255,0.4);
	background: -webkit-linear-gradient(top, #cbcdcd, #bebfc0);
	border-bottom: 1px solid #aeafaf;
	border-top: 1px solid #dfe0e1;
	box-shadow: 0 1px 0 #b9babb;
	margin-top: -1px;
	padding-top: 0;
}


ul.iOSplasticlist
li.iOSplasticlist-search {
	height: 43px;
	text-shadow: 0 1px 0 rgba(255,255,255,0.4);
	background: -webkit-linear-gradient(top, #d9d9d9, #c1c3c3);
	border-bottom: 1px solid #bbbcbe;
	border-top: 1px solid #d3d3d5;
	box-shadow: 0 1px 0 #ababac;
	padding-top: 0;
}
ul.iOSplasticlist
li.iOSplasticlist-search input {
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	color: #767778;
	border-radius: 20px;
	box-shadow: 0 2px 0 #d1d2d2, 0 1px 2px rgba(0,0,0,0.4) inset;
	height: 29px;
	margin-top: 6px;
	border: 1px solid grey;
	background: #e9eaec;
	-webkit-box-sizing: border-box;
	padding: 4px 10px 4px 20px;
	width: 100%;
}
ul.iOSplasticlist
li.iOSplasticlist-search input::-webkit-input-placeholder {
	color: #767778
}