html
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: arial, sans-serif;
	font-size: 62.5%;
}

.playground {background: #333 url(/images/layout/tarmac.jpg) repeat top left;}
.desk {background: #333 url(/images/layout/wood.jpg) repeat top left;}
.sandpit {background: #333 url(/images/layout/sand.jpg) repeat top left;}


img, div, a {behavior: url(/pngfix/iepngfix.htc)}

#container
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 870px;
	height: 570px;
	margin-left: -435px;
	margin-top: -285px;
	z-index: 100;
}
.playgroundStyle {background: transparent url(/images/layout/playground.png) no-repeat top left;}
.deskStyle {background: transparent url(/images/layout/desk.png) no-repeat top left;}

#innerContainer
{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 500px;
	margin-left: -400px;
	margin-top: -250px;
	z-index: 110;
}

a.styleSelector {z-index: 250; display: block; position: absolute; top: 50%; left: 50%; margin-top: -265px; margin-left: 260px; padding: 0; width: 100px; height: 15px; background: transparent url(/images/layout/style-selector.gif) no-repeat top left; text-decoration: none;}
a.styleSelector:hover {background: transparent url(/images/layout/style-selector.gif) no-repeat bottom left;}

#styleSelectorWindow {z-index: 300; display: none; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -160px; padding: 0; width: 320px; height: 200px; background: #333; border: 2px solid #bfde19;}
#styleSelectorWindow table td {text-align: center; font-weight: bold; color: #fff; font-size: 1.2em;}
#styleSelectorWindow table td img {margin: 5px; padding: 0; border: 1px solid #bfde19;}

#logo	{z-index: 200; position: absolute; top: 50%; left: 50%; margin-left: -460px; margin-top: -290px; border: 0;}

#snake			{z-index: 5; position: absolute; top: 0px; left: 0px; margin: 0; padding: 0; border: 0;}
#blobs			{z-index: 5; position: absolute; top: 200px; left: 0px; margin: 0; padding: 0; border: 0;}
#lines			{z-index: 5; position: absolute; bottom: 50px; right: 50px; margin: 0; padding: 0; border: 0;}
#bullseye		{z-index: 5; position: absolute; top: 20px; right: 20px; margin: 0; padding: 0; border: 0;}
#hoops			{z-index: 5; position: absolute; top: 100px; left: 100px; margin: 0; padding: 0; border: 0;}
#balls			{z-index: 5; position: absolute; top: 40%; right: 40px; margin: 0; padding: 0; border: 0;}

#letters		{z-index: 5; position: absolute; top: 0px; left: 0px; margin: 0; padding: 0; border: 0;}
#car			{z-index: 5; position: absolute; bottom: 0px; right: 0px; margin: 0; padding: 0; border: 0;}
#hills			{z-index: 5; position: absolute; top: 0px; right: 0px; margin: 0; padding: 0; border: 0;}
#holdinghands	{z-index: 5; position: absolute; top: 30%; right: 50px; margin: 0; padding: 0; border: 0;}
#pencils		{z-index: 5; position: absolute; bottom: 0px; left: 0px; margin: 0; padding: 0; border: 0;}

#footprints		{z-index: 5; position: absolute; top: 0px; left: 0px; margin: 0; padding: 0; border: 0;}
#spade			{z-index: 5; position: absolute; bottom: 0px; right: 0px; margin: 0; padding: 0; border: 0;}
#truck			{z-index: 5; position: absolute; bottom: 50px; left: 30px; margin: 0; padding: 0; border: 0;}


#navigation {display: block; position: absolute; top: 7px; left: 140px; z-index: 250; height: 69px; width: 600px;}
#navigation ul {margin: 0; padding: 0; list-style-type: none;}
#navigation ul li {margin: 0; padding: 0; float: left;}
#navigation ul li a {margin: 0; display: block; text-decoration: none;}
#navigation ul li a span {display: none;}

#home {display: block; width: 81px; height: 34px; background: transparent url(/images/layout/nav.gif) no-repeat 0px 0px;}
#home:hover {background: transparent url(/images/layout/nav.gif) no-repeat 0px -69px;}

#about {display: block; width: 116px; height: 34px; background: transparent url(/images/layout/nav.gif) no-repeat -81px 0px;}
#about:hover {background: transparent url(/images/layout/nav.gif) no-repeat -81px -69px;}

#publications {display: block; width: 152px; height: 34px; background: transparent url(/images/layout/nav.gif) no-repeat -197px -0px;}
#publications:hover {background: transparent url(/images/layout/nav.gif) no-repeat -197px -69px;}

#training {display: block; width: 117px; height: 34px; background: transparent url(/images/layout/nav.gif) no-repeat -349px 0px;}
#training:hover {background: transparent url(/images/layout/nav.gif) no-repeat -349px -69px;}

#equipment {display: block; width: 117px; height: 34px; background: transparent url(/images/layout/nav.gif) no-repeat -466px 0px;}
#equipment:hover {background: transparent url(/images/layout/nav.gif) no-repeat -466px -69px;}

#testimonials {display: block; width: 164px; height: 35px; background: transparent url(/images/layout/nav.gif) no-repeat 0px -34px;}
#testimonials:hover {background: transparent url(/images/layout/nav.gif) no-repeat 0px -103px;}

#contact {display: block; width: 135px; height: 35px; background: transparent url(/images/layout/nav.gif) no-repeat -164px -34px;}
#contact:hover {background: transparent url(/images/layout/nav.gif) no-repeat -164px -103px;}

#links {display: block; width: 84px; height: 35px; background: transparent url(/images/layout/nav.gif) no-repeat -299px -34px;}
#links:hover {background: transparent url(/images/layout/nav.gif) no-repeat -299px -103px;}

#news {display: block; width: 83px; height: 35px; background: transparent url(/images/layout/nav.gif) no-repeat -383px -34px;}
#news:hover {background: transparent url(/images/layout/nav.gif) no-repeat -383px -103px;}



#content
{
	display: block;
	position: absolute;
	top: 85px;
	left: 10px;
	height: 380px;
	width: 755px;
	border: 2px solid #bfde19;
	background: #e2d5b1;
	overflow: auto;
	padding: 10px;
}

#content h1	{margin: 0; padding: 0px 10px 10px 10px; font-size: 1.6em; color: #29261c; font-weight: bold;}
#content h2	{margin: 0; padding: 10px; font-size: 1.4em; color: #29261c; font-weight: bold;}
#content h3	{margin: 0; padding: 5px 10px; font-size: 1.2em; color: #29261c; font-weight: bold;}
#content p	{margin: 0; padding: 5px 15px; font-size: 1.2em; color: #29261c;}
#content p.centered {text-align: center;}
#content p.right {text-align: right;}
#content ul, #content ol {font-size: 1.2em;}
#content p.clear {clear: both; margin: 0; padding: 5px;}

#content a {font-weight: bold; color: #29261c; text-decoration: none;}
#content a:hover {color: #fff;}

.block {margin: 5px; border: 1px solid #ab9c72; background: #d6d87d;}
.equipmentBlock {margin: 3px; border: 1px solid #ab9c72; background: #d6d87d; float: left; width: 355px;}

#content div.image {background: #aaa085; margin: 10px; position: relative;}
#content div.left {float: left;}
#content div.right {float: right;}
#content div.image img {display: block; margin: 0; padding: 2px; position: relative; top: -3px; left: -3px; border: 2px solid #bfde19; background: #fff;}

.publication {float: left; margin: 0 7px 10px 7px; padding: 0; position: relative; text-decoration: none; text-align: center; font-size: 1.2em; font-weight: bold; color: #333333;}
.publication:hover {color: #fff;}
.publication img {display: block; border: 0; margin: 0;}

.downloadLink {float: left; border: 1px solid #ab9c72; background: #d6d87d; height: 150px; width: 160px; margin: 3px;}
.downloadLink:hover {border-color: #fff;}
.downloadLink img {display: block; margin: 0; padding: 0; border: 0;}


.training {float: left; margin: 0 15px 10px 20px; padding: 0; position: relative; text-decoration: none; text-align: center; font-size: 1.2em; font-weight: bold; color: #333333;}
.training:hover {color: #fff;}
.training img {display: block; border: 0; margin: 0;}


#enquiryForm {margin: 0; padding: 0;}
#enquiryForm div {float: left; margin: 3px; padding: 0px; background: #f6f6f6; border: 1px solid #666;}
#enquiryForm div.error {background: #ffeeee;}
#enquiryForm input, #enquiryForm textarea, #enquiryForm select {width: 220px;}
#enquiryForm p {margin: 0px 5px; padding: 0 0 1em 0; font-size: 1.2em; color: #666;}
#enquiryForm p.hidden {display: none; visibility: hidden;}
label {font-weight: bold; color: #666;}
label span {color: #f00;}
label.error {color: #f00;}

#frontPageNews {float: right; margin: 0 0 10px 10px; border: 1px solid #ab9c72; background: #d6d87d; height: 380px;}
#frontPageNews h2 {display: block; margin: 0; padding: 3px; background: #333; color: #bfde19; text-align: center;}
#frontPageNews p {text-align: center; border-bottom: 1px solid #333;}
#frontPageNews div {overflow: auto; width: 220px; height: 330px; margin: 0; padding: 0;}
#frontPageNews div a {display: block; border: 1px solid #ab9c72; margin: 3px; padding: 3px; background: #ecedae; font-weight: bold; font-size: 1.2em;}
#frontPageNews div a span {font-size: 0.8em;}


#termsConditions {z-index: 400; position: absolute; bottom: 10px; right: 20px; font-size: 1.2em; font-weight: bold; color: #fff;}
#termsConditions:hover {color: #f00;}