/* STRUCTURE */

body {
	font: 12pt sans-serif;
	background: #FFFFE4;
	margin: 0;
	padding: 0;}

#box-outer {
	border: 12px solid;
	width: 954px;
	margin: -30px auto 27px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	position: relative;
	z-index: 1;}

#box {
	background: #fff;
	padding: 12px 38px;
	border: 4px solid;
	width: 874px;
	margin: -2px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	position: relative;
	z-index: 1;}

#head {
	margin: 0 auto;
	width: 994px;
	height: 302px;
	position: relative;}

#head a {
	position: absolute;
	left: 8px;
	top: 90px;
	width: 668px;
	height: 126px;
	background: url(i/t.png);}

#photo {
	position: absolute;
	left: 618px;
	top: 23px;}


#home #box-outer						{border-color: #003088;}
#domain #box-outer						{border-color: #88005c;}
#wordpress #box-outer						{border-color: #046819;}
#wpe #box-outer							{border-color: #883400;}
#info #box-outer						{border-color: #6b28c5;}

#home #box							{border-color: #ccdeff;}
#domain #box							{border-color: #fce;}
#wordpress #box							{border-color: #d2f9db;}
#wpe #box							{border-color: #ffeccc;}
#info #box							{border-color: #e3d5f7;}



#col1, #col2 {
	width: 410px;
	float: left;	
	padding: 0 24px;}

#col1 {	margin: -23px 0 24px -24px;}
#col2 {	margin: -23px -24px 24px 0;}

#divider {
	position: absolute;
	width: 2px;
	height: 1530px;
	background-color: #ccc;
	z-index: 2;
	left: 473px;
	top: 133px;}

.clear {
	clear: both;}



/* NAVIGATION */

.nav {
	margin: 0 auto;
	height: 80px;
	width: 987px;
	padding: 0 0 0 1px;
	z-index: 1;}

.nav a {
	height: 80px;
	width: 197px;
	float: left;
	display: block;
	outline: none;
	text-indent: -9999px;
	overflow: hidden;}

#home .btn-home,		.btn-home:hover 	{background: url(i/b.png) -0px -80px;}
#domain .btn-domain, 		.btn-domain:hover 	{background: url(i/b.png) -197px -80px;}
#wordpress .btn-wordpress, 	.btn-wordpress:hover	{background: url(i/b.png) -394px -80px;}
#wpe .btn-wpe, 			.btn-wpe:hover 		{background: url(i/b.png) -591px -80px;}
#info .btn-info, 		.btn-info:hover 	{background: url(i/b.png) -788px -80px no-repeat;}

#connector {
	height: 37px;
	width: 190px;
	margin: 0 auto 0;
	position: relative;
	top: -12px;
	z-index: -1;}

#home #connector					{background: #003088; right: 394px;}
#domain #connector					{background: #88005c; right: 197px;}
#wordpress #connector					{background: #046819;}
#wpe #connector						{background: #883400; right: -197px;}
#info #connector					{background: #6b28c5; right: -394px;}

.btn-home						{background: url(i/b.png);}
.btn-domain						{background: url(i/b.png) -197px -0px;}
.btn-wordpress						{background: url(i/b.png) -394px -0px;}
.btn-wpe						{background: url(i/b.png) -591px -0px;}
.btn-info						{background: url(i/b.png) -788px -0px no-repeat;}



/* TEXT */

.snippet-html {
	margin: 10px 30px;
	display: block;
	padding: 8px;
	border-left: 4px solid #630;
	background: #f7f0ea;
	font-family: "Courier New";
	color: #060;
	line-height: 100%;}

.snippet-css {
	margin: 10px 30px;
	display: block;
	padding: 8px;
	border-left: 4px solid #4d0066;
	font-family: "Courier New";
	color: #060;
	line-height: 100%;
	background: #f3eaf7;}

#footer {
	font-size: 8pt;
	color: #ccc;
	text-align: center;
	font-weight: bold;
	margin: 20px 0;}

.info-box {
	display: block;
	background: #cee;
	padding: 0 16px;
	border: 2px solid #37a6a6;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	font-style: italic;
	line-height: 125%;}

.info-box:before {
	content: "?";
	color: #fff;
	float: right;
	text-align: center;
	font-style: normal;
	font-weight: bold;
	font-size: 20pt;
	line-height: 24pt;
	display: block;
	height: 30px;
	width: 30px;
	margin: -15px -8px 0 0;
	background-color: #37a6a6;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;}

#box > p, li {
	line-height: 150%;}

a {
	font-weight: bold;}
	
h1 {
	margin-bottom: 24px;
	font-size: 24pt;
	letter-spacing: -1pt;}

h2 {
	font-size: 16pt;
	margin-top: 56px;
	letter-spacing: -0.5pt;}

kbd {
	font-size: 1.1em;
	word-spacing: -0.3em;
	letter-spacing: -0.05em;}

.fp {
	color: #777;}



/* CHARTS & GRIDS */

.chart {
	margin-bottom: 18px;}

td, th 				{padding: 6px 8px;}

.chart tbody th 		{width: 10%;}	
.chart tbody td 		{width: 30%;}

.chart thead th, .grid th {
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	color: #fff;}

.chart thead th + th	 	{background-color: #030;}
.chart thead th + th + th 	{background-color: #036;}
.chart thead th + th + th + th	{background-color: #520;}

.chart tbody th			{background-color: #605;
				color: #fff;
				-moz-border-radius-topleft: 8px;
				-moz-border-radius-bottomleft: 8px;
				-webkit-border-top-left-radius: 8px;
				-webkit-border-bottom-left-radius: 8px;
				border-top-left-radius: 8px;
				border-bottom-left-radius: 8px;}

.chart tbody th + td		{background-color: #cfc;}
.chart tbody th + td + td 	{background-color: #cef;}
.chart tbody th + td + td + td	{background-color: #edb;}

.grid					{width: 100%;}

.grid th				{background-color: #605;}
.grid tr + tr 				{background-color: #cfc;}
.grid tr + tr + tr			{background-color: #cef;}
.grid tr + tr + tr + tr			{background-color: #edb;}
.grid tr + tr + tr + tr	+ tr		{background-color: #fcf;}
.grid tr + tr + tr + tr	+ tr + tr	{background-color: #f0f56b;}
.grid td 				{font-weight: bold;}
.grid td + td 				{font-weight: normal;}

.grid h3 {
	font-size: 16pt;
	margin: 0;
	letter-spacing: -0.5pt;}

/* Exceptions */

#info .chart tbody p, #wpe .chart tbody p {
	font-size: 10pt;
	font-weight: normal;
	text-align: left;}

#wordpress .chart tbody td {
	width: 80%;}



/* FORMS */

.text-box {
	padding: 10px;
	margin: 0 0 5px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	width: 390px;
	border: 3px solid #a637a6;
	background: #ece;
	overflow: auto;
	font: bold 12pt sans-serif;}

#submit-btn {
	color: #ece;
	font-size: 12pt;
	height: 30px;
	width: 90px;
	font-weight: bold;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	border: 0;
	outline: none;
	background: #a637a6;}



/* MISC & MEDIA */

.wysiwyg {
	border: 2px solid #ccc;
	margin: 10px 30px;
	display: block;}

#fb {
	border: none;
	overflow: hidden;
	display: block;
	width: 200px;
	height: 30px;
	margin: 0;}

.screenshot {
	background: #fcfcfc;
	width: 870px;
	margin: 60px -38px -40px;
	padding: 15px 40px;}

.screenshot img {
	border: solid #000 1px;}