@charset "utf-8";
/* CSS Document */

* { 
	margin:0; padding:0; border:none;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
}

body { 
	background: #e3eee9 url(images/kc_backgroundGradient.gif) repeat-x top; 
	font-size:12px;
}

div#outerFrame { 
	width:1180px; height:779px; 
	background:url(images/kc_frameBkg.jpg) top no-repeat;

	position:absolute; top:0px; left:50%; margin-left:-590px;
}

div#innerFrame {
	width:800px; height:500px;
	margin-left:202px;
	margin-top:46px;
}

div#bottomNav {
	margin-left:220px;
	margin-top:30px;
}


/*
	I had to abandon this correct way to do it, because of browser compatibility issues
	
	
div#bottomNav ul {
	margin-left:50px;
}

div#bottomNav ul li {
	position:relative;
	list-style:none;
	float:left;
	margin-right:62px;
	width:130px; height:50px;
	border:1px solid red;
}

div#bottomNav ul li div {
	border:1px solid green;
	position:absolute; top:50%; left:50%;
}

div#bottomNav ul li a {
	display:block; width:130px;
	position:relative; left:-50%;
	top:-1em;

	text-decoration:none; text-align:center;

	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:white;
}

*/

div#bottomNav table {
	width:780px; height:55px;
}

div#bottomNav td {
	width:25%;
	text-align:center;
	font-size:18px; font-weight:bold; color:black;
}

div#bottomNav td a {
	display:block;
	text-decoration:none; 
	width:100px; margin:0 auto;
	color:white;
}

div#bottomNav td a:hover {
	color:black;
	text-decoration:underline;
}


div#innerFrame h1 {
	padding:30px 30px 20px 30px;
	font-size:24px;
}

div#innerFrame h2 {
	padding:10px 0px 20px 0px;
	margin:0 30px;
	border-bottom:2px solid #555;
	font-size:14px; color:#555;
}

div#innerFrame p {
	padding:0px 30px 10px 30px;
}

div#innerFrame ul {
	margin:10px 30px 10px 30px;
	width:730px;
	overflow:hidden; /* forces FF to make the UL the same height as its contents (otherwise it's 0 height) */
	clear:both;
}
.guides div#innerFrame ul {
	padding:30px 0 0 30px;
	width:600px;
	margin-left:auto; margin-right:auto;
}

div#innerFrame li {
	list-style:none;
	display:block;
	float:left;
	width:200px;
	margin:0 30px 0 0;
}

.guides div#innerFrame li {
	margin-left:40px; margin-right:40px;
	width:auto;
	text-align:center;
}

div#innerFrame li img {
	float:left;
	margin-right:10px;
}

.guides div#innerFrame li img {
	float:none;
	display:block;
	margin:0;
}

div#innerFrame a {
	color:black;
}

div#innerFrame hr {
	margin:0px 30px;
	padding:0px;
	border-bottom:2px solid #555;
	clear:both;
}

div#innerFrame div#backLink {
	clear:both;
	width:270px; height:110px;
	padding-top:30px;
	font-weight:bold;
	position:absolute;
	bottom:180px; right:160px;
	overflow:visible;
}

div#innerFrame div#backLink img {
	float:left;
	margin-top:-20px;
}