webshim/demos/css/styles.css

modular capability-based polyfill loading libary, which extends jQuery with HTML5 features in legacy browsers

body {
	font-size: 14px;
	line-height: 22px;
	font-family: Helvetica Neue, Helvetica, Arial;
	background: #f4f4f4 url(../images/background.png);
}
.interface {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif !important;
}
div#sidebar {
	background: #fff;
	position: fixed;
	z-index: 10;
	top: 0; left: 0; bottom: 0;
	width: 200px;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding: 15px 0 30px 30px;
	border-right: 1px solid #bbb;
	box-shadow: 0 0 20px #ccc;
}
	a.toc_title, a.toc_title:visited {
		display: block;
		color: black;
		font-weight: bold;
		margin-top: 15px;
	}
		a.toc_title:hover {
			text-decoration: underline;
		}

		#sidebar .version {
			font-size: 10px;
			font-weight: normal;
		}
	ul.toc_section {
		font-size: 11px;
		line-height: 14px;
		margin: 5px 0 15px;
		padding-left: 0px;
		list-style-type: none;
		font-family: Lucida Grande;
	}
		.toc_section li {
			margin: 0 0 3px 0;
		}
			.toc_section li a {
				text-decoration: none;
				color: black;
			}
				.toc_section li a.active,
				a.toc_title.active {
					color: #18b6e5;
				} 
				.toc_section li a:hover {
					text-decoration: underline;
				}
div.container {
	position: relative;
	width: 600px;
	margin: 40px 0 50px 260px;
}
img#logo {
	width: 300px;
	height: 71px;
}

a.download-button {
	display: inline-block;
	margin: 5px 0;
	color: #000;
	text-align: center;
	text-decoration: none;
}

.download-button strong {
	display: block;
	border: 1px solid #7CE0FF;
	margin: 0 0 5px;
	padding: 5px 25px;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
	background: #00C6FF;
	color: #fff;
	font-family: Arial, serif;
}

.fiddle-example {
    height: 200px;
    width: 100%;
    border: none;
}


div.container p, div.container ul {
	margin: 20px 0;
}
	div.container ul.list {
		margin: 10px 0;
	}
	div.container ul.list li {
		margin-bottom: 1px;
	}
	p.warning {
		font-size: 12px;
		line-height: 18px;
		font-style: italic;
	}
	div.container ul {
		list-style: circle;
		padding-left: 15px;
		font-size: 13px;
		line-height: 18px;
	}
	
		div.container ul li {
			margin-bottom: 6px;
		}
		div.container ul.small {
			font-size: 12px;
		}
a, a:visited {
	color: #18b6e5;
}
a:active, a:hover {
	color: #1283a8;
}

a img {
	border: 0;
}
a.travis-badge {
	display: block;
}
h1, h2, h3, h4, h5, h6 {
	padding-top: 20px;
}
	h2 {
		font-size: 22px;
	}
b.header {
	font-size: 18px;
	line-height: 35px;
}
span.alias {
	font-size: 14px;
	font-style: italic;
	margin-left: 20px;
}
table {
	margin: 15px 0 0; padding: 0;
}
	tr, td {
		margin: 0; padding: 0;
	}
		td {
			padding: 0px 15px 5px 0;
		}
		table .rule {
			height: 1px;
			background: #ccc;
			margin: 5px 0;
		}
code, pre{
	font-family: Monaco, Consolas, "Lucida Console", monospace;
	font-size: 12px;
	line-height: 18px;
	font-style: normal;
}
	code.i {
		padding: 0px 3px;
		background: #fff;
		border: 1px solid #ddd;
		zoom: 1;
	}
	code {
		margin-left: 0px;
		padding: 3px;
	}
	pre {
		font-size: 12px;
		padding: 2px 0 2px 15px;
		border: 4px solid #bbb; border-top: 0; border-bottom: 0;
		margin: 0px 0 25px;
	}
	img.example_image {
		margin: 0px auto;
	}
		img.example_retina {
			margin: 20px;
			box-shadow: 0 8px 15px rgba(0,0,0,0.4);
		}
@media only screen and (-webkit-max-device-pixel-ratio: 1) and (max-width: 600px),
			 only screen and (max--moz-device-pixel-ratio: 1) and (max-width: 600px) {
	div#sidebar {
		display: none;
	}
	img#logo {
		max-width: 450px;
		width: 100%;
		height: auto;
	}
	div.container {
		width: auto;
		margin-left: 15px;
		margin-right: 15px;
	}
		p, div.container ul {
			width: auto;
		}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-width: 640px),
			only screen and (-o-min-device-pixel-ratio: 3/2) and (max-width: 640px),
			only screen and (min-device-pixel-ratio: 1.5) and (max-width: 640px) {
	img {
		max-width: 100%;
		height: auto;
	}
	div#sidebar {
		-webkit-overflow-scrolling: initial;
		position: relative;
		width: 90%;
		height: 120px;
		left: 0;
		top: -7px;
		padding: 10px 0 10px 30px;
		border: 0;
	}
	img#logo {
		width: auto;
		height: auto;
	}
	div.container {
		margin: 0;
		width: 100%;
	}
	p, div.container ul {
		max-width: 98%;
		overflow-x: scroll;
	}
	table {
		position: relative;
	}
		tr:first-child td {
			padding-bottom: 25px;
		}
		td.text {
			line-height: 12px;
			padding: 0;
			position: absolute;
			left: 0;
			top: 48px;
		}
		tr:last-child td.text {
			top: 122px;
		}
	pre {
		overflow: scroll;
	}
}

pre code.language-dir {
    -moz-tab-size: 3;
    -webkit-tab-size: 3;
    tab-size: 3;
}