html {
	border-top: 1em solid #0A5CA8;
}

body {
	margin: 1em;
}

@font-face {
	font-family: Kaffeesatz;
	src: url(fonts/YanoneKaffeesatz-Regular.otf);
}

a {
	color: #0A5CA8;
}

	a:hover {
		text-decoration: none;
		color: #0A5CA8;
	}

code {
	display: block;
	background: #f1f1f1;
	padding: 1em;
	border: 1px dashed #333;
	width: 80%;
}

h1 {
	margin: .8em 0 2em 0;
	color: #0A5CA8;
	font-size: 3.5em;
	line-height: .8em;
}

	h1 span {
		color: #B90A35;
	}
	
	h1 strong {
		font-weight: normal;
		display: block;
		font-size: .4em;
	}

h2 {
	color: #B90A35;
}

h3 {
	padding: 2px;
	margin: 2em 0 1em 0;
	color: #0A5CA8;
	font-weight: bold;
}

h4 {
	border-bottom: 1px solid #ccc;
	margin: 1em 0 1em 0;
	text-shadow: 1px 1px 1px #333;
	font-size: 1.5em;
}

ul.selectors {
	font-size: 1.5em;
}

#logo {
	position: absolute;
	top: 1.5em;
	right: 1em;
}

#beyondIE6 {
	margin-bottom: 10em;
}

#nav {
	list-style-type: none;
	margin: 0 0 2em 0;
	padding: 0;
	border-bottom: 4px solid #0A5CA8;
}

	#nav li {
		float: left;
		margin-right: .5em;
		background: #0A5CA8;
		-moz-border-radius-topright: 5px;
		-moz-border-radius-topleft: 5px;
		-webkit-border-top-right-radius: 5px;
		-webkit-border-top-left-radius: 5px;
	}
	
		#nav li a {
			color: #fff;
			font-size: 2em;
			padding: 0 .4em;
			text-decoration: none;
		}
		
		#nav li.ui-tabs-selected a, #nav li a:hover {
			color: #B90A35;
		}

.example {
	font-size: 1.3em;
	margin-bottom: 3em;
	padding-bottom: 1em;
	border-bottom: 1px dashed #ccc;
}

.word-wrap {
	background: #ccc;
	border: 1px solid #333;
	width: 250px;
	word-wrap: break-word;
	padding: 1em;
}

.text-shadow {
	text-shadow: 1px 1px 1px #000;
}

.box-shadow {
	-webkit-box-shadow: 10px 10px 5px #888; 
	-moz-box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px;
	box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px;
	background: #ccc; width: 20em; box-shadow: 10px 10px 5px #888; 
}

.border-image {
	-moz-border-image: url('images/border.png') 27 27 27 27 round round;
	-webkit-border-image: url('images/border.png') 27 27 27 27 round round;
	border-image: url(border.png) 27 27 27 27 round round; 
	padding: 15px 15px 15px 15px;
	border: double orange 1em;
	width: 60%;
}

.border-radius {
	background-color: #ccc;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	border: 1px solid #000;
	padding: 10px;
	width: 50%;
}

.multi-column {
	-moz-column-count: 4;
	-moz-column-gap: 2em;
	-moz-column-rule: 1px solid #333;
	-webkit-column-count: 4;
	-webkit-column-gap: 2em;
	-webkit-column-rule: 1px solid #333;
}

.resize {
	width: 150px;
	height: 100px;
	border: 1px solid;
	resize: both;
	overflow: auto;
}

.transition {
	background: #ccc;
	border: 5px solid #333;
	width: 60%;
	padding: 1em;
	opacity: 1;
	-webkit-transition: opacity 1s linear;
}

.transition:hover {
	opacity: 0;
}

.font-face {
	font-family: Kaffeesatz;
	font-size: 3em;
}

.no-box-sizing {
	width: 200px;
	border: 10px solid #333;
	padding: 1em;
	background: #ccc;
	margin-bottom: .5em;
}

.box-sizing {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 200px;
	background: #ccc;
	border: 10px solid #333;
	padding: 1em;
}

.outline {
	border: 3px solid green;
	outline-offset: .5em;
	outline: 3px solid #000;
	padding: .5em;
	background: #ccc;
	width: 50%;
}

.reflection {
	border: 1px solid white;
	-webkit-box-reflect:below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
	margin-bottom: 200px;
}

.mask1 {
	-webkit-mask-box-image: url(images/mask.png) 75 stretch;
	display: block;
}

.gradient {
	width:350px; 
	height:150px; 
	border:2px solid black; 
	padding: 10px; 
   	background: -webkit-gradient(linear, left top, left bottom, from(#0A5CA8), to(#fff), color-stop(0.9, #fff));
	-webkit-background-origin: padding; -webkit-background-clip: content;
	color: #fff;
}

.multiple-backgrounds {
	background: url(images/background.jpg) bottom right no-repeat, url(images/generator5.jpg) top left repeat-y;
	height: 500px;
	width: 700px;
	border: 1px solid green;
}

.background-size {
	padding-top: 100px;
	background: url(images/generator5.jpg) top left no-repeat #ccc;
	width: 60%;
	border: 1px solid #333;
	-webkit-background-size: 100% 100px;
	-o-background-size: 100% 100px;
}

.media-query {
	width: 200px;
	height: 100px;
	background: #ccc;
	border: 1px solid #333;
}

@media all and (max-width: 640px) {
	.media-query { background-color: #c00; }
}	

.background-origin {
	background: url(images/generator5.jpg) top left no-repeat #ccc;
	border: 10px solid #333;
	padding: 1em;
	width: 200px;
	height: 100px;
	-webkit-background-origin: content;
	-webkit-background-clip: content;
	-moz-background-origin: content;
	-moz-background-clip: content;
	color: #fff;
}

.demolink {
	font-size: 2em;
	display: block;
	margin-bottom: 2em;
}