@import url(font.bebas_neue.css);

html {
	overflow-y: scroll;
}

body {
	color: #444;
	font: 16px/1.5 Arial, sans-serif;
	margin: 0;
	overflow: hidden;
}

p {
	margin: 1em 0;
}

abbr {
	border-bottom: 1px dotted #DDD;
}

a {
	color: #126FA0;
}

.inner-content {
	margin: 0 auto;
	position: relative;
	width: 960px;
}

.site-heading {
	background: #87CEFA;
	border-bottom: 20px solid #126FA0;
	box-shadow: 0 0 40px #AAA;
	-moz-box-shadow: 0 0 40px #AAA;
	-webkit-box-shadow: 0 0 40px #AAA;
	margin: 0 0 40px;
}

.site-heading h1 {
	color: #FFF;
	font: 120px/1 'Bebas Neue';
	margin: 0;
	text-shadow: 2px 0 2px rgba(18, 111, 160, 0.5);
}

.site-heading h1 span {
	position: relative;
	top: 0.05em;
}

.site-heading img {
	position: absolute;
	right: 0;
	top: 0;
}

.main-content,
.footer-content {
	overflow: hidden;
}

.main-content h2 {
	font: bold 24px/32px Arial, sans-serif;
	margin: 16px 0;
}

.main-content p {
	max-width: 33em;
}

.footer-content {
	background: #87CEFA;
	border-top: 20px solid #126FA0;
	box-shadow: 0 0 40px #AAA;
	-moz-box-shadow: 0 0 40px #AAA;
	-webkit-box-shadow: 0 0 40px #AAA;
	color: #222;
	margin: 40px 0 0;
	text-shadow: 0 0 2px #FFF;
	font-size: 12px;
}

.footer-content a {
	color: #000;
	font-weight: bold;
}

.button {
	background-color: hsl(0, 0%, 75%);
	background-color: #9EE052;
	background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);
	background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png);
	background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);
	border-bottom: 1px solid rgba(0,0,0,0.1);
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-top: 1px solid rgba(255,255,255,0.8);
	box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px;
	box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em .3em, inset rgba(0, 0, 0, 0.15) 0 -0.1em .3em, #6BAD1F 0 .1em 3px, #508217 0 .3em 1px, rgba(0, 0, 0, 0.2) 0 .5em 5px;
	-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px;
	-moz-box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em .3em, inset rgba(0, 0, 0, 0.15) 0 -0.1em .3em, #6BAD1F 0 .1em 3px, #508217 0 .3em 1px, rgba(0, 0, 0, 0.2) 0 .5em 5px;
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px;
	-webkit-box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em .3em, inset rgba(0, 0, 0, 0.15) 0 -0.1em .3em, #6BAD1F 0 .1em 3px, #508217 0 .3em 1px, rgba(0, 0, 0, 0.2) 0 .5em 5px;
	color: hsl(0, 0%, 40%) !important;
	color: hsl(340, 100%, 30%) !important;
	display: inline-block;
	*display: inline;
	font: 12px/1em 'Droid Sans', sans-serif;
	font-weight: bold;
	margin: .5em;
	outline: 0;
	padding: .5em .6em .4em;
	position: relative;
	text-decoration: none;
	text-shadow: rgba(255,255,255,.5) 0 1px 0;
	transition: background .5s ease-in-out;
	-webkit-transition-duration: .05s, .05s, .05s;
	-webkit-transition-property: background, -webkit-box-shadow, -webkit-transform;
	-moz-transition: background .5s ease-in-out;
	-webkit-transition: transform 1000ms linear;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	*zoom: 1;
}

.button:active,
.button:focus,
.button:hover {
    box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, rgba(0,0,0,0.4) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px;
    -moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, rgba(0,0,0,0.4) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px;
	-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, rgba(0,0,0,0.4) 0 .1em 1px, rgba(0,0,0,0.2) 0 .2em 6px;
	transform: translateY(.2em);
	-moz-transform: translateY(.2em);
    -webkit-transform: translateY(.2em);
}

.icon {
	background: none no-repeat 6px 6px;
	display: inline-block;
	line-height: 32px;
	margin: 0 4px;
	padding: 6px 6px 6px 44px;
}

.icon-ie6 {
	background-image: url(../images/ie6_32x32.png);
}

.icon-ie7 {
	background-image: url(../images/ie7_32x32.png);
}

.icon-ie8 {
	background-image: url(../images/ie8_32x32.png);
}

.icon-ie9 {
	background-image: url(../images/ie9_32x32.png);
}

.icon-ff {
	background-image: url(../images/ff_32x32.png);
}

.icon-op {
	background-image: url(../images/op_32x32.png);
}

.icon-wk {
	background-image: url(../images/wk_32x32.png);
}

.rules {
	border-collapse: collapse;
	border-spacing: 0;
	font: 12px/1.5 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	margin: 0 0 24px;
	table-layout: fixed;
	width: 100%;
}

.rules .selector-column {
	width: 12.5%;
}

.rules .declaration-column {
	width: 21.875%;
}

.rules .selector-cell,
.rules .declaration-cell {
    background: #d2ebfa;
    border-right: 1px solid #FFF;
    border-top: 1px solid #FFF;
    color: #669;
    padding: 9px 12px;
    vertical-align: top;
}

.rules .selector-cell {
	background: #EBF4FA;
}

.rules .declaration-head {
    color: #339;
    font-weight: normal;
    padding: 12px;
    border-left: 1px dashed #EEE;
    border-right: 1px dashed #EEE;
}

.rules .declaration {
    margin: 0 auto;
    width: 184px;
}

.rules tbody tr:first-child th {
	border-radius: 10px 0 0 0;
	-moz-border-radius: 10px 0 0 0;
	-webkit-border-radius: 10px 0 0 0;
}

.rules tbody tr:last-child td:last-child {
	border-radius: 0 0 10px 0;
	-moz-border-radius: 0 0 10px 0;
	-webkit-border-radius: 0 0 10px 0;
}

.rules .value {
    color: #06960E;
}