html, body { height: 100%; }

img { border: none; }

body {
	margin: 0 auto;
	font: 62.5%/1.5 "Lucida Grande", "Trebuchet MS", "Tahoma", "Helvetica", "Arial", sans-serif;
	color: #444;
	background: #F4F4F4 url(../images/body-bg.png) repeat-x left top;
}

.image-replaced {
	display: block;
	text-indent: -9999em;
	overflow: hidden;
}

#flash { text-align: center; }

/* @group Splash Page */

body#splash {
	height: 50%;
	margin: 50% auto 0;
	font: 62.5%/1.5 "Lucida Grande", "Trebuchet MS", "Tahoma", "Helvetica", "Arial", sans-serif;
	color: #444;
	background: #F1401F;
}

#splash #wrapper {
	position: relative;
	width: 634px;
	height: 469px;
	margin: -35% auto 0;
	background: url(../images/splash-bg.jpg) no-repeat center center;
}

#splash h1 {
	float: none;
	width: auto;
}

#splash ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#splash li {
	position: absolute;
	bottom: 32px;
}

#splash li a { height: 51px; }

#splash li#english { left: 45px; }
#splash li#english a { width: 158px; }
#splash li#english a:hover { background: url(../images/splash-nav-on.jpg) no-repeat left top; }

#splash li#french { right: 41px; }
#splash li#french a { width: 183px; }
#splash li#french a:hover { background: url(../images/splash-nav-on.jpg) no-repeat right top; }

/* @end Splash Page */

#wrapper {
	width: 950px;
	margin: 0 auto;
	padding: 0 0 15px;
	background: #FFF url(../images/wrap-bg.png) repeat-y center top;
}

#wrapper:after, #tertiary-navigation:after {
    content: "."; 
    display: block; 
    height: 0; 
    overflow: hidden;
    clear: both; 
    visibility: hidden;
}

#header {
	position: relative;
	height: 200px;
	background: url(../images/header-bg.jpg) no-repeat left top;
}

h1 {
	float: left;
	margin: 0 20px;
	padding: 0;
	width: 168px;
	height: 191px;
}

h2 {
	position: absolute;
	top: 10px;
	right: 30px;
	margin: 0;
}

/* @group Navigation */

.navigation {
	padding: 0;
	list-style: none;
}

.navigation li {
	margin: 0;
	padding: 0;
}

/* @group Primary Navigation */

#primary-navigation {
	float: left;
	width: 160px;
	margin: 0 21px;
	background: url(../images/nav-bg.jpg) no-repeat 49% top;
}

#safety-village #primary-navigation,
#safety-village-fire #primary-navigation,
#safety-village-internet #primary-navigation,
#safety-village-railway #primary-navigation,
#safety-village-wheels #primary-navigation,
#safety-village-schoolbus #primary-navigation,
#safety-village-traffic #primary-navigation { background-image: url(../images/nav-safety-village-bg.jpg); }


#primary-navigation li, #primary-navigation a {
	display: block;
	width: 160px;
	text-indent: -9999em;
	overflow: hidden;
}

#primary-navigation a {
	margin: 2px 0;
	background: url(../images/navigation.png) no-repeat left top;
}

#primary-navigation a#nav-home { height: 76px; }
#primary-navigation a#nav-home:hover { background-position: right top; }

#primary-navigation a#nav-safety {
	height: 70px;
	background-position: left -76px;
}
#primary-navigation a#nav-safety:hover { background-position: right -76px; }

#primary-navigation a#nav-new {
	height: 60px;
	background-position: left -146px;
}
#primary-navigation a#nav-new:hover { background-position: right -146px; }

#primary-navigation a#nav-fun {
	height: 88px;
	background-position: left -206px;
}
#primary-navigation a#nav-fun:hover { background-position: right -206px; }

#primary-navigation a#nav-parents {
	height: 46px;
	margin: 275px 0 0;
	background-position: left -294px;
}
#primary-navigation a#nav-parents:hover { background-position: right -294px; }

#primary-navigation a#nav-about-elmer {
	height: 30px;
	margin: 0;
	background-position: left -340px;
}
#primary-navigation a#nav-about-elmer:hover { background-position: right -340px; }

#primary-navigation a#nav-about-csc {
	height: 30px;
	margin: 0;
	background-position: left -370px;
}
#primary-navigation a#nav-about-csc:hover { background-position: right -370px; }

/* @end Primary Navigation */

/* @group Secondary Navigation */

#secondary-navigation {
	clear: both;
	width: auto;
	margin: 0 auto;
	padding-top: 10px;
	text-align: center;
}

#secondary-navigation li { display: inline; }

#secondary-navigation li a {
	padding: 0 15px;
	font-size: 1.1em;
	font-weight: bold;
	color: #5EABDA;
	text-decoration: none;
	border-right: 1px solid #5EABDA;
}
#secondary-navigation li.last a { border: none; }

#secondary-navigation li a:hover { color: #ED6157; }

/* @end Secondary Navigation */

/* @group Tertiary Navigation */

#content ul#tertiary-navigation {
	width: 100%;
	margin: 0;
	padding: 7px 0 10px;
	background: url(../images/content-bg.png) no-repeat left bottom;
}

#tertiary-navigation li { display: inline; }

#tertiary-navigation li a {
	padding: 0 15px;
	font-weight: bold;
	color: #5EABDA;
	text-decoration: none;
}

#safety-village #tertiary-navigation li a,
#safety-village-fire #tertiary-navigation li a,
#safety-village-internet #tertiary-navigation li a,
#safety-village-railway #tertiary-navigation li a,
#safety-village-wheels #tertiary-navigation li a,
#safety-village-schoolbus #tertiary-navigation li a,
#safety-village-traffic #tertiary-navigation li a { padding: 0 9px; }

#tertiary-navigation li a:hover { color: #ED6157; }

/* @end Tertiary Navigation */

/* @group Quaternary Navigation */

#content ul#quaternary-navigation {
	float: right;
	width: 195px;
	margin: 0 0 0 20px;
	padding: 0;
}

#safety-village-fire #content ul#quaternary-navigation {
	width: 225px;
	margin-top: 15px;
	padding-top: 264px;
	background: url(../images/elmer-fire.png) no-repeat center top;
}

#safety-village-internet #content ul#quaternary-navigation {
	width: 264px;
	margin-top: 15px;
	padding-top: 264px;
	background: url(../images/elmer-internet.png) no-repeat center top;
}

#safety-village-railway #content ul#quaternary-navigation {
	width: 264px;
	margin-top: 15px;
	padding-top: 264px;
	background: url(../images/elmer-railway.png) no-repeat center top;
}

#safety-village-wheels #content ul#quaternary-navigation {
	width: 224px;
	margin-top: 15px;
	padding-top: 271px;
	background: url(../images/elmer-safety-on-wheels.png) no-repeat center top;
}

#safety-village-schoolbus #content ul#quaternary-navigation {
	width: 224px;
	margin-top: 15px;
	padding-top: 247px;
	background: url(../images/elmer-school-bus.png) no-repeat center top;
}

#safety-village-traffic #content ul#quaternary-navigation {
	width: 260px;
	margin-top: 15px;
	padding-top: 247px;
	background: url(../images/elmer-traffic.png) no-repeat center top;
}

#find-out-more #content ul#quaternary-navigation {
	width: 224px;
	margin-top: 15px;
	margin-bottom: 15px;
}

#quaternary-navigation li a {
	display: block;
	width: 195px;
	background: url(../images/quaternary-navigation.png) no-repeat;
	text-indent: -9999em;
	overflow: hidden;
}

#quaternary-navigation li a#quaternary-nav-colouring {
	height: 44px;
	background-position: left top;
}
#quaternary-navigation li a#quaternary-nav-colouring:hover { background-position: right top; }

#quaternary-navigation li a#quaternary-nav-activities {
	height: 39px;
	background-position: left -44px;
}
#quaternary-navigation li a#quaternary-nav-activities:hover { background-position: right -44px; }

#quaternary-navigation li a#quaternary-nav-games {
	height: 40px;
	background-position: left -83px;
}
#quaternary-navigation li a#quaternary-nav-games:hover { background-position: right -83px; }

#quaternary-navigation li a#quaternary-nav-parents {
	height: 51px;
	background-position: left -123px;
}
#quaternary-navigation li a#quaternary-nav-parents:hover { background-position: right -123px; }

#quaternary-navigation li a#quaternary-nav-new {
	height: 44px;
	background-position: left -178px;
}
#quaternary-navigation li a#quaternary-nav-new:hover { background-position: right -178px; }

/* @end Quaternary Navigation */

/* @end Navigation */

/* @group Main */

#main {
	float: right;
	width: 740px;
}

#home #main { margin-top: -40px; }

#csc {
	clear: both;
	text-align: center;
}

#home #main { background: url(../images/welcome-bg.png) no-repeat 535px bottom; }

#content {
	width: 705px;
	padding: 0 0 15px;
}

#content h4, #content h5, #content p, #content ul { margin: 10px 15px; }

#content h4 {
	font-size: 1.5em;
	clear: left;
}

#content h5 { font-size: 1.3em; }

#content p, #content ul, #content ol { font-size: 1.2em; }

#content h3 {
	height: 41px;
	margin: 0;
	background-position: left top;
}

#information {
	float: left;
	width: 410px;
	margin-bottom: 15px;
	padding: 5px;
	background: #FFFAEA;
}

#game {
	padding: 50px;
	background: #FFFAEA;
	text-align: center;
}

#about-elmer h3, #parents-educators-story h3 { background: url(../images/h3-elmers-story.png) no-repeat; }
#about-elmer-video h3, #parents-educators-video h3 { background: url(../images/h3-elmers-video.png) no-repeat; }
#fun-elmer h3, #parents-educators h3, #safety-village h3 { background: url(../images/h3-welcome.png) no-repeat; }
#parents-educators-csc h3, #about-csc h3 { background: url(../images/h3-about-csc.png) no-repeat; }
#parents-educators-resources h3 { background: url(../images/h3-resources.png) no-repeat; }
#safety-village-fire h3 { background: url(../images/h3-fire-safety.png) no-repeat; }
#safety-village-internet h3, #content h3.internet { background: url(../images/h3-internet-safety.png) no-repeat; }
#safety-village-railway h3, #content h3.railway { background: url(../images/h3-railway-safety.png) no-repeat; }
#safety-village-wheels h3, #content h3.wheels { background: url(../images/h3-safety-on-wheels.png) no-repeat; }
#safety-village-schoolbus h3 { background: url(../images/h3-school-bus-safety.png) no-repeat; }
#safety-village-traffic h3, #content h3.traffic { background: url(../images/h3-traffic-safety.png) no-repeat; }
#find-out-more h3 { background: url(../images/h3-find-out-more.png) no-repeat; }
#past-topics h3 { background: url(../images/h3-past-topics.png) no-repeat; }
h3#fun-colouring { background: url(../images/h3-colouring-pages.png) no-repeat; }
h3#fun-activities { background: url(../images/h3-activities.png) no-repeat; }
h3#fun-games { background: url(../images/h3-games.png) no-repeat; }
h3#fun-parents { background: url(../images/h3-parents-educators.png) no-repeat; }

h3#fun-colouring, h3#fun-activities, h3#fun-games, h3#fun-parents { margin-top: 20px; }

/* @end Main */

/* @group Home */

#heykids {
	position: relative;
	width: 562px;
	padding: 0 0 20px;
	background: url(../images/heykids-bg.png) no-repeat left bottom;
}

#heykids h3 {
	height: 53px;
	margin: 0;
	background: url(../images/heykids-h3.png) no-repeat left top;
}

#heykids .elmer {
	position: absolute;
	top: 5px;
	right: -70px;
}

#heykids p {
	margin: 10px 25px;
	width: 275px;
	font-size: 1.2em;
}

#fun-elmer #heykids p {
	padding: 40px 0;
	font-size: 1.6em;
}

.sig { margin-left: 150px; }

#home #safety-village, #home #fun-with-elmer {
	float: left;
	width: 290px;
	margin: 10px 0 0;
}

#home #fun-with-elmer { clear: left; }

#home #new {
	float: right;
	width: 236px;
	margin: 10px 200px 0 0;
	background: url(../images/new-bg.png) no-repeat left bottom;
}

#home #new h4 {
	height: 72px;
	margin: 0;
	padding: 0;
	background: url(../images/new-h4.png) no-repeat left bottom;
}

#home #new h5, #home #new p {
	width: 198px;
	margin: 10px;
}

#home #new h5 {
	color: #F9531F;
	font-size: 1.7em;
}

#home #new p { font-size: 1.2em; }

#home #new .navigation { margin: 15px 0; }

#home #new .navigation a {
	display: block;
	width: 212px;
	height: 26px;
	margin: 10px 0 10px 3px;
	background: url(../images/new-nav.png) no-repeat;
	text-indent: -9999em;
	overflow: hidden;
}

#home #new a#more { background-position: left top; }
#home #new a#more:hover { background-position: right top; }
#home #new a#past { background-position: left bottom; }
#home #new a#past:hover { background-position: right bottom; }

div#sponsors {
	clear: both;
	margin: 20px 25px 15px;
}

#sponsors h4 {
	float: left;
	width: 148px;
	height: 26px;
	margin-right: 15px;
	background: url(../images/sponsored-h4.png) no-repeat left top;
}

#sponsors p { padding-top: 15px; }

/* @end Home */

/* @group Fun with Elmer */

ul.thumbnails {
	width: 500px;
}

ul.thumbnails:after {
    content: "."; 
    display: block; 
    height: 0; 
    overflow: hidden;
    clear: both; 
    visibility: hidden;
}

ul.thumbnails, ul.thumbnails li {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.thumbnails li {
	float: left;
	width: 100px;
	height: 17em;
	margin: 10px 15px;
	text-align: center;
	font-size: 0.9em;
}

ul.thumbnails a img { border: 1px solid #5EABDA; }

/* @end Fun with Elmer */

#content ul.rules { font-size: 1.0em; }

.content-right {
	float: right;
	margin: 10px 0 10px 10px;
}

.content-left {
	float: left;
	margin: 10px 10px 10px 0;
}