h1 {
	margin-bottom: 20px;
}
h2 {
	margin-top: 30px;
}

.ie-only {
	display: none;
}
.ie .ie-only {
	display: auto;
}
.ie .not-ie {
	display: none;
}

.sidebar {
	float: right;
	width: 150px;
	padding: 15px 15px 3px 15px;
	background: #f0f0f0 url(images/sidebar-bg.png) repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	background: -moz-linear-gradient(
		top,
		#f9f9f9,
		#e0e0e0
	);
	background: -webkit-gradient(
		linear,
		left top, left bottom,
		from(#f9f9f9),
		to(#e0e0e0)
	);
	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.5);
	box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.with-sidebar {
	margin-right: 200px;
}

#leftCol {
	float: left;
	width: 240px;
}
#rightCol {
	float: right;
	width: 500px;
}

.warning {
	background: #f0ede2;
	border: 1px solid #ccc4a6;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 10px 12px 14px 12px;
}

.block {
	position: relative;
	border: 1px solid #999999;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0 0 3px #999999;
	-webkit-box-shadow: 0 0 3px #999999;
	box-shadow: 0 0 3px #999999;
	padding: 10px;
	margin-bottom: 12px;
	background: #dfdfdf url("images/block-bg.png") repeat-x top;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background: -moz-linear-gradient(
        top,
        #f6f6f6,
        #dfdfdf
    );
    background: -webkit-gradient(
        linear,
        left top, left bottom,
        from(#f6f6f6),
        to(#dfdfdf)
    );
	}
	.block p:last-child {
		margin-bottom: 0;
	}
	.block p.last-child {
		margin-bottom: 0;
	}

.color-block p {
	margin-bottom: 0;
}

#direction {
	padding-right: 4px;
	}
	#direction p {
		position: relative;
		float: left;
		width: 48px;
		height: 48px;
		padding: 0;
		margin: 0 6px 0 0;
		border: 1px solid #999999;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 3px #999999;
		-webkit-box-shadow: 0 0 3px #999999;
		box-shadow: 0 0 3px #999999;
		background: #f0f0f0 url(images/direction-bg.png) repeat-x top;
		-o-background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		-webkit-background-size: 100% 100%;
		background: -moz-linear-gradient(
			top,
			#ffffff,
			#f0f0f0
		);
		background: -webkit-gradient(
			linear,
			left top, left bottom,
			from(#ffffff),
			to(#f0f0f0)
		);
		}
		#direction p label {
			position: absolute;
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 100%;
			}
			#direction p label img {
				position: absolute;
				left: 50%;
				top: 50%;
				margin: -8px 0 0 -8px;
			}
		#direction p input {
			position: absolute;
			left: 4px;
			top: 3px;
		}

.tags-list {
	padding: 5px 0;
	margin-left: -4px;
	}
	.tags-list span {
		display: block;
		position: relative;
		float: left;
		border: 1px solid white;
		background: #0c5fa5 url(images/tags-list-span-bg.png) repeat-x top;
		-o-background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		-webkit-background-size: 100% 100%;
		background: -moz-linear-gradient(
			top,
			#72c6e4,
			#0c5fa5
		);
		background: -webkit-gradient(
			linear,
			left top, left bottom,
			from(#72c6e4),
			to(#0c5fa5)
		);
		padding: 0 7px 2px 23px;
		line-height: 22px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 3px #999999;
		-webkit-box-shadow: 0 0 3px #999999;
		box-shadow: 0 0 3px #999999;
		color: white;
		margin-left: 4px;
		}
		.tags-list span input {
			position: absolute;
			margin: 0;
			left: 6px;
			top: 4px;
		}
.mini-input {
	width: 33px;
}

.color-value {
	height: 23px;
}

p.color-position {
	border-top: 1px solid #999999;
	margin: 6px -10px -10px -10px;
	padding: 4px 10px 5px;
	background: #666666 url("images/color-position-bg.png") repeat-x top;
	-o-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	background: -moz-linear-gradient(
		top,
		#999999,
		#666666
	);
	background: -webkit-gradient(
		linear,
		left top, left bottom,
		from(#999999),
		to(#666666)
	);
	-moz-border-radius: 0 0 4px 4px;
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-radius: 0 0 4px 4px;
	color: #FFFFFF;
	}
	p.color-position input {
		width: 30px;
	}

.remove-color {
	display: block;
	position: absolute;
	right: -10px;
	top: -10px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	background: url(images/add.png) no-repeat right top;
	overflow: hidden;
	text-indent: 100px;
	}
	.remove-color:hover {
		background-position: right -30px;
	}

.add-color {
	display: block;
	position: absolute;
	left: -32px;
	bottom: -22px;
	width: 37px;

	height: 30px;
	line-height: 30px;
	background: url(images/add.png) no-repeat;
	overflow: hidden;
	text-indent: 100px;
	}
	.add-color:hover {
		background-position: 0 -30px;
	}

.block-preview {
	padding: 4px;
	}
	.block-preview .block-preview-bg {
		border: 1px solid #999999;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		padding: 20px;
		background: #666666 url("images/block-preview-div-bg.png") repeat-x top;
		-o-background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		-webkit-background-size: 100% 100%;
		background: -moz-linear-gradient(
			top,
			#000000,
			#666666
		);
		background: -webkit-gradient(
			linear,
			left top, left bottom,
			from(#000000),
			to(#666666)
		);
		margin-bottom: 0;
	}
	.block-preview div#preview {
		filter: none;
		-moz-box-shadow: 0 0 5px black;
		-webkit-box-shadow: 0 0 5px black;
		box-shadow: 0 0 5px black;
		border: 1px solid black;
		height: 200px;
		padding: 0;
		line-height: 200px;
		text-align: center;
	}
	.block-preview p {
		margin-top: 4px;
	}
	
#code {
	font-family: "Courier New", Courier, monospace;
	margin: 0;
	overflow: auto;
}

.block-options p {
	padding-left: 140px;
	line-height: 22px;
	}
	.block-options p strong {
		float: left;
		margin-left: -140px;
	}

.img-link {
	padding: 0;
	}
	.img-link a {
		display: block;
		height: 28px;
		line-height: 28px;
		text-decoration: none;
		position: relative;
		font-size: 14px;
		font-weight: bold;
		padding: 10px 10px 10px 84px;
		color: #666666;
		}
		.img-link a:hover {
			color: #3399cc;
		}
		.img-link a img {
			position: absolute;
			left: 10px;
			top: -8px;
		}

.syntaxhighlighter {
	margin: 0 !important;
	border: 1px solid #CCCCCC !important;
}

.compatibility {
	text-align: center;
	border-collapse: collapse;
	}
	.compatibility thead tr th {
		background: #DDDDDD;
		padding: 10px 0;
		border: 4px solid white;
		border-bottom: 0;
		}
		.compatibility thead tr th.compat-empty {
			background: none;
		}
	.compatibility tbody tr th,
	.compatibility tbody tr td {
		vertical-align: middle;
		height: 50px;
	}
	.compatibility tbody tr th {
		text-align: left;
		padding: 0 6px;
		background: #EFEFEF;
	}
	.compatibility tbody tr td {
		border: 4px solid white;
		border-width: 1px 4px;
		background: #666666;
		color: white;
	}
	.compatibility tbody tr.compat-version th,
	.compatibility tbody tr.compat-version td {
		font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
		font-size: 15px;
		background: #999999;
		color: white;
		height: auto;
		padding: 5px 6px 7px 6px;
	}
	.compatibility tbody tr td.compat-green {
		background-color: #009933;
	}
	.compatibility tbody tr td.compat-orange {
		background-color: #CC6600;
	}
	.compatibility tbody tr td.compat-red {
		background-color: #990000;
	}