* {
	margin: 0;
	padding: 0;
	text-align: left;
}

img {
	border: none;
}

html {
	background: #326895;
	min-height: 101%;
}

body {
	font-size: 25px;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #fff;
}

pre {
	font-size: 14px;
}

h1 {
	color: #fff;
	font-size: 33px;
	font-weight: normal;
	line-height: 58px;
	width: 916px;
	height: 80px;
	margin: 0 auto;
	text-align: left;
	padding: 0 0 0 50px;
}

h1 a, h1 a:link, h1 a:visited {
	color: #fff;
	text-decoration: none;
	border-bottom: dashed 1px #fff;
}

h1 a:hover, h1 a:active, h1:focus {
	border-bottom: dashed 1px #81a8cb;
	color: #81a8cb;
}

h2 {
	font-weight: normal;
	font-size: 24px;
	margin: 0 3px 7px 0;
	padding: 0 0 0 5px;
}

	h2 a, h2 a:link, h2 a:visited {
		background: transparent url(images/css3-help.jpg) no-repeat right -28px;
	}

	h2 a:hover, h2 a:active {
		background: transparent url(images/css3-help.jpg) no-repeat right 0;
	}

h3 {
	font-size: 20px;
	font-weight: normal;
	padding: 0 0 20px 0;
}

p {
	font-size: 15px;
	line-height: 21px;
}

.example p {
	text-align: center;
	padding: 18px;
}

.hide {
	display: none;
}

.show {
	display: block;
}

#content a, #content a:link, #content a:visited {
	color: #fff;
	text-decoration: none;
	display: block;
	outline: none;
}

#content a:hover, #content a:active {
	color: #ccc;
}

#help-message a, #help-message a:link, #help-message a:visited {
	color: #fff;
	outline: none;
}

#container {
	position: relative;
	margin: 0 auto;
}

	#header {
		height: 86px;
		background: #3d6687;
		min-width: 960px;
	}

	#content {
		width: 960px;
		min-width: 960px;
		margin: 20px auto;
		padding: 20px 0 0 53px;
		position: relative;
	}

		#ad-spot {
			position: absolute;
			top: -98px;
			right: 0;
			width: 372px;
			height: 68px;
		}

		#promo ul {
			width: 890px;
			list-style: none;
			padding: 0;
		}
			
			#promo ul li {
				overflow: hidden;
				width: 890px;
				float: left;
			}

			#prevBtn, #nextBtn {
				display: block;
				width: 43px;
				height: 152px;
				position: absolute;
				top: 160px;
			}
			
			#prevBtn {
				left: 0;
			}

			#nextBtn {
				right: 20px;
			}

			#prevBtn a, #nextBtn a {
				display: block;
				width: 43px;
				height: 152px;
				background: url(images/btn-left.jpg) no-repeat 0 -152px;
				text-indent: -9999em;
			}

			#nextBtn a, #nextBtn a:link, #nextBtn a:visited {
				background: url(images/btn-right.jpg) no-repeat 0 -152px;	
			}

			#nextBtn a:hover, #nextBtn a:focus, #prevBtn a:hover, #prevBtn a:focus {
				background-position: 0 0;	
			}
			
		#support {
			font-weight: bold;
			margin: -72px auto 0 auto;
			padding: 0 0 20px 0;
			position: relative;
			height: 30px;
			width: 916px;
		}
	
		.item {
			width: 230px;
			float: left;
			margin: 0 60px 20px 20px;
		}
			
			.first {
				clear: left;
			}

			.last {
				margin-right: 0;
			}
			
			.double {
				width: 540px;
				margin-bottom: 40px;
			}
			
		.example {
			width: 228px;
			height: 100px;
			background: #6287a7;
			border: solid 1px #6d94b4;
		}
		
		#box-sizing {
			padding: 0 30px 0 30px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-o-box-sizing: border-box;
			box-sizing: border-box;
		}
		
		#border-radius {
			-webkit-border-radius: 12px;
			-moz-border-radius: 12px;
			border-radius: 12px;
			width: 228px;
		}
		
		#textshadow p {
			width: 228px;
			height: 100px;
			line-height: 100px;
			text-align: center;
			text-shadow: #555 4px 4px 4px;
			font-size: 26px;
			text-align: center;
			padding: 0;
		}

		#boxshadow {
			-webkit-box-shadow: #244766 5px 5px 10px;
			-moz-box-shadow: #244766 10px 10px 10px;
			box-shadow: #244766 10px 10px 10px;
		}
		
		#boxshadow p {
			padding: 30px;
		}
		
		#rgba-parent {
			position: relative;
			top: 0;
			left: 0;
		}
		
			.child {
				background: rgba(98, 135, 167, .5);
				position: absolute;
				top: 23px;
				left: 38px;
				width: 60%;
				height: 45%;
				padding: 5px;
			}
			
				#rgba-child p {
					text-align: center;
					color: #fff;
				}

		#multiple-columns {
			-webkit-column-count: 2;
			-webkit-column-width: 250px;
			-webkit-column-gap: 35px;
			-webkit-column-rule: 1px solid #6d94b4;
			-moz-column-count: 2;
			-moz-column-width: 240px;
			-moz-column-gap: 35px;
			-moz-column-rule: 1px solid #6d94b4;
			column-count: 2;
			column-width: 240px;
			column-gap: 35px;
			column-rule: 1px solid #6d94b4;
			height: 90px;
		}

		.hsla {
			height: 34px;
		}
		
			.hsla p {
				text-align: center;
				line-height: 34px;
			}
		
		#hsla-1 {
			background: hsla(207,38%,47%,.8);
		}

		#hsla-2 {
			background: hsla(208,41%,65%,1);
		}

		#hsla-3 {
			background: hsla(207,46%,59%,.8);
		}
		
		#gradient {
			background-image: -moz-linear-gradient(top, #4477a1, #81a8cb); /* FF3.6 */
			background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Saf4+, Chrome */
			filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb'); /* IE6,IE7 */
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477a1', endColorstr='#81a8cb')"; /* IE8 */
		}

		#radial {
			background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #cae0f2 10%, #4477a1 70%);
		    background-image: -webkit-gradient(radial, center center, 10, center center, 90, from(#cae0f2), to(#4477a1));
		}

		#multi-bg {
			background: url(images/bg-cake.gif) center center no-repeat, url(images/bg-diamond.gif) top left repeat;
		}
		
		.example-stroke {
			background: #6287a7;
			border: none;
		}

		#stroke {
			font-family: Arial, Helvetica, sans-serif;
			-webkit-text-fill-color: #fff;
			-webkit-text-stroke-color: lightblue;
			-webkit-text-stroke-width: 2px;
			font-size: 30px;
			text-align: center;
			width: auto;
			padding: 13px 0 0 0;
		}
		
		#reflect {
			text-align: center;
			padding: 25px 0 0 0;
			font-size: 22px;
			-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
		}
		
		#reflect:hover {
			cursor: pointer;
			color: lightblue;
		}
		
		.example-rotation {
			-webkit-transform: rotate(-5deg);
			-moz-transform: rotate(-5deg);
			-o-transform: rotate(-5deg);
		}
		
		.example-rotation p {
			padding-top: 28px;
			-webkit-transform: rotate(5deg);
			-moz-transform: rotate(5deg);
			-o-transform: rotate(5deg);
		}

		.example-scale {
			-webkit-transform: scale(.8);
			-moz-transform: scale(.8);
			-o-transform: scale(.8);
		}
		
		.example-scale p {
			padding-top: 28px;
			-webkit-transform: scale(1.2);
			-moz-transform: scale(1.2);
			-o-transform: scale(1.2);
		}
		
		.example-transition h3 {
			text-align: center;
			padding: 35px 0 0 0;
			font-size: 22px;
		}

		.example-transition {
			-webkit-transition: -webkit-transform 1s ease-in-out, background-color linear 1s, color linear 1s;
			-moz-transition: -moz-transform 1s ease-in-out, background-color linear 1s, color linear 1s;
			-o-transition: -o-transform 1s ease-in-out, background-color linear 1s, color linear 1s;
		}
	
		.example-transition:hover {
			-webkit-transform: rotateZ(-20deg) scale(1.2);
			-moz-transform: rotateZ(-20deg) scale(1.2);
			-o-transform: rotateZ(-20deg) scale(1.2);
			background-color: #aaa;
			color: #326895;
			cursor: pointer;
		}

		.example-borderimage {
			border-width: 19px;
			width: 188px;
			height: 60px;
			-webkit-border-image: url(images/border-image.gif) 19 19 19 19 repeat repeat;
			-moz-border-image: url(images/border-image.gif) 50 50 50 50 round round;
			border-image: url(images/border-image.gif) 50 50 50 50 round round;
			resize: both;
		}
		
		.example-borderimage p {
			padding: 10px 0 0 0;
		}

		.example-textselect p::selection {
			background: #50bc6b;
		}

		.example-textselect p::-moz-selection {
			background: #50bc6b;
		}
		
		.example-outlineoffset {
			outline: solid 1px #fff;
			outline-offset: 5px;
		}
		
		.example-outlineoffset p {
			padding: 30px 0 0 0;
		}

		.example-resizing p {
			width: 150px;
			height: 50px;
			overflow: hidden;
			resize: both;
			border: solid 1px #fff;
			margin: 15px auto;
			padding: 0;
		}

		.example-wordwrap p {
			font-size: 13px;
			word-wrap: break-word;
			padding: 5px 10px;
		}

		.example-bgsize {
			background: #6287a7 url(images/bg-berries.jpg) center center no-repeat;
			-webkit-background-size: 100% 100%;
			-moz-background-size: 100% 100%;
			-khtml-background-size: 100% 100%;
			background-size: 100% 100%;
		}

		#footer {
			width: 926px;
			margin: 0 auto;
			clear: left;
			padding: 20px 0 0 0;
		}
		
		#footer p {
			padding: 0 70px 0 0;
		}
		
		#footer a, #footer a:link, #footer a:visited {
			color: #fff;
			display: inline;
			text-decoration: underline;
		}
		
		#footer a:hover, #footer a:active {
			color: #9b9b9b;
		}
		
		#help-message {
			background: #4a6378;
			font-size: 17px;
			padding: 20px;
			position: relative;
			margin: 15px auto 0 auto;
			min-height: 210px;
			overflow: hidden;
			min-width: 960px;
		}
		
			.syntax {
				float: right;
				width: 350px;
				padding: 0 0 10px 30px;
				margin: 0 0 40px 20px;
				overflow: auto;
			}
		
			#help-content p {
				padding: 0 0 15px 0;
			}
		
			#help-message a#close:link, #help-message a#close:visited {
				color: #fff;
				position: absolute;
				top: 5px;
				right: 10px;
				text-decoration: none;
				z-index: 10;
			}
			
			#help-content {
				width: 880px;
				margin: 0 auto;
			}