/* - - - - - - - - - - - - - - - - - - - - -
Title : Main CSS file
Author : Jon Hadley
URL :  http://www.kidsklub.com/stylesheets/main.css

Description :  Main CSS files, controls all major layout. Based on empty template from:

Utter mess ... but works, needs tidying up.

Created :  10 / 4 / 06
- - - - - - - - - - - - - - - - - - - - - */


/* 3 col footer and header layout from http://www.pmob.co.uk/temp/mac3column.htm */
/* commented backslash hides from ie5mac \*/ 
html{height:100%;margin:0;padding:0} 
/* end hack */ 

body {
	padding:0;
	margin:0;
	color: #000000;
	height:100%;
}
#outer{
	min-height:100%;
	margin-left:130px;
	margin-right:130px;
	/*border-left:1px solid #000;
	border-right:1px solid #000;*/
	margin-bottom:-52px;
	color: #000000;
}
 
* html #outer{height:100%;} /* IE win treats height as min-height anyway*/
* > html #macinner {/*mac obeys 100% height so we give it an inner with bg color which will expand past 100%*/	
	background:#F8E7EC;
	/*border-left:1px solid black;
	border-right:1px solid black;*/
	margin-left:-1px;/*drag borders wider to match the borders on outer*/
	margin-right:-1px;/*drag borders wider to match the borders on outer*/
}

#header{
	background:#FF6600 url(/images/headerkk_bg.gif) repeat-x;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:78px;
	overflow:hidden;
	text-align: center;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
#left {
	position:relative;/*ie needs this to show float */
	/*width:130px;*/
	width: 15%;
	float:left;
	margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */
}
* html #left {margin-right:-3px;padding-bottom:52px}/*fix gap in ie next to float */
* > html #left {padding-bottom:0}/* mac style */

#left p {padding-left:3px;padding-right:2px}
#right p {padding-left:3px;padding-right:2px}

#right {
	position:relative;/*ie needs this to show float */
	/*width:130px;*/
	width: 15%;
	float:right;
	margin-right:-129px;/*must be 1px less than width otherwise won't push footer down */
}

#footer {
	clear:both;
	height:180px;
	border-top:1px solid #000;
	/*border-bottom:1px solid #000;*/
	/*color: #000000;
	position:relative;*/
	text-align:center;
}
* html #footer {/*only ie gets this style*/
	height:180px;/* for ie5 and 5.5. ( and ie6 quirks mode) */
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:72px;width:100%;}/*needed to make room for footer*/

div,p  {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;}/* combat IE's 3 pixel jog */
* > html #centrecontent {height:auto;}/* mac style */
#centrecontent {position:relative;z-index:1}

html > body #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper thanks to Tim Connor*/

/* - - - - - - - - - - - - - - - - - - - - -
OLD css begins.
- - - - - - - - - - - - - - - - - - - - - */

/* ----- CSS ----- */

*{
	font-family: Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif;
	/* font-size: 80%; /* Steps default font size down, so i can use ems effectively*/
}

body{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background: #FFFFFF;
	/*text-align:center;*/
}

/* ----- IDS ----- */


#navline {
	text-align: center;
	background: Orange;
	position: relative;

}

#subnavline {
	text-align: center;
	background: Orange;
	position: relative;
	border-top: 1px solid white;

}

#mainImage {
	text-align:center;
	padding: 10px 0px 0px 0px;
}

#blurb {
	padding: 5px 10px 5px 10px;
	text-align: justify;
}
#largeBox {
	padding: 10px;
}

#boxContainer {
	position:relative;
	display: block;
	float: clear;
	width: 100%;
}

#boxLeft {
	/*display: inline;
	display: block;*/
	position:relative;
	float: left;
	width: 45%;
	padding: 5px 10px;
	background: white;
}

#boxRight {
	/*display: inline;
	display: block;*/
	position:relative;
	float: right;
	width: 45%;
	padding: 5px 10px;
	/*background: white;*/
}



/* ----- CLASSES ----- */

.hide{
/* display:none; */
}
.show{
/* display:block; */
}

.selected {
font-weight:bold;
}

/* ----- TEXT FORMATTING ----- */

strong{
}

em{
	background-color: #FFF0E6;
	text-decoration: none;
	font-weight: normal;
	font-style: normal;
}



/* ----- HEADINGS ----- */

h1{

}



#header h1 { 
	color:white; 
	margin:0; 
	line-height:0;
}

h2{
font-size: 1.8em;
}


h3 {
font-size: 1.5em;
font-weight:normal;
}

#largeBox h2, #largeBox h3, #boxRight h3, #boxLeft h3 {

border-bottom: 1px solid black;
}



h3{
text-align:left;
}

h4
{
text-align:left;
}

/* ----- PARAGRAPHS ----- */

p{

}

#navigation p {
	display: inline;
}

#blurb p {

font-size: 1.2em;
line-height: 1.5em;

}

#boxLeft p
{
text-align:left;	
}

#boxRight p
{
text-align:left;	
}

#updateBar p
{
text-align:center;	
font-size: 1.5em;
}

#footer p 
{

}

#largeNavBox p {
line-height: 1.5em;
}

/* ----- LISTS ----- */

ul {
	text-align:left;
}

li {
	text-align:left;
}

li a:hover {
	color: #000;
}


#navline ul {
	list-style: none;
	display: inline;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

#navline li {
	display: inline;
	height: 32px;
	padding: 0px 35px;
}

#navline a:hover {
	color: #000;
	text-decoration: none;
	border-bottom: none;
}

#subnavline ul {
	list-style: none;
	display: inline;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

#subnavline li {
	display: inline;
	height: 32px;
	padding: 0px 15px;
}

#subnavline p {
	display: inline;
	height: 32px;
	padding: 0px 15px;
	font-weight:bold;
	color: #FFFFFF;
}

#subnavline a:hover {
	color: #000;
	text-decoration: none;
	border-bottom: none;
}

/* ----- IMAGES ----- */

img{
border:0;
}

/* no fancy image replacment techniques. Big image just over lays header text!*/
#header img  { 
	/*display:block;*/
}

#boxRight img, #boxLeft img, #largeBox img {
	float: left;
	padding: 0px 1px 0px 1px;
	margin: 0px 0px 0px 0px;
}

img a{
	border:0;
	text-decoration:none;
}

img a:hover{
	border:0;
}

/* ----- BREAK ----- */

hr{
	display:none; /* so hr's can still be used as seperation in non-css version */
}

#hr {
	/* hr replacment div, dont forget IE *always* puts 3px of padding around hr */
	
	/* tried with straight css, failed miserably 
	border-top: 2px solid white; 
	border-bottom: 2px solid grey;
	display: block;*/

}


/* ----- LINKS ----- */

a{
color: #FF6600;
text-decoration: none;
}

h3 a:hover{
border-bottom: none;
text-decoration: none;
color: #000;
}

#navline a {
font-size: 1.3em;
font-weight: bold;
color: white;
text-decoration: none;
}

#subnavline a {
font-size: 1em;
font-weight: bold;
color: white;
text-decoration: none;
}

a:hover{
color: #000;
border-bottom: 1px solid #FF6600;
text-decoration: none;
}

a:visited{
color:#E65C00;
}

a:active{
color:#FF6600;
}

a:focus{
color:#FF6600;
}