* { margin: 0; padding: 0; } /* Global Reset */

body { 
	font-size: small; 
	font-family: 'Hevetica Neue', Arial, Helvetica, sans-serif;
	line-height: 1.4;	text-align: center;
	color: #000; background: #FFF;
}

p {
	font-size: 110%;
}

a { color: #690; text-decoration: underline; }
a:hover { text-decoration: none; }

hr {
	border: 0; height: 0; display: block;
	background: transparent; visibility: hidden;
}

img { border: 0; }

h2 {
	font-size: 150%; font-weight: 600;
	letter-spacing: 0.1em; margin: 0 0 .6em;
}
h3 {
	font-size: 150%; font-weight: 600;
	letter-spacing: 0.1em; margin: .3em 0 0;
}
h4 {
	font-size: 130%; font-weight: 600;
	letter-spacing: 0.1em; margin: 1.5em 0 .6em;
}
h5 {
	font-size: 110%; font-weight: 600;
	letter-spacing: 0.1em; margin: 1em 0 .4em;
}

p#skip-link {
	padding: 8px 0 0 20px;
	background: url(../i/skip-down.gif) no-repeat 5px 10px;
	font-size: 85%;
	float:left;
}

p#top-link a {
	padding: 0 0 0 20px;
	background: url(../i/skip-up.gif) no-repeat 0px 0px;
	font-size: 100%; color: #FFF;
}
p#top-link a:hover {
	color: #9C0; background-position: 0px -30px;
}

blockquote {
	font-style: italic; font-size: 110%; color: #690;
}

dl { margin: 1em 0; }
dt { 
	font-size: 110%; font-weight: 600; 
	letter-spacing: 0.1em; margin: .5em 0 0;
}
dd { margin: 0 0 0 1em; }

/* LAYOUT */

#container {
	min-width: 750px;	text-align: center;
}
#top { width: 750px; height: 35px;	margin: 0 auto; }
#header {
	background: #000 url(../i/header.jpg) no-repeat 50%;
	height: 74px;	padding: 1px 0 0 0;
}
#header h1 {
	width: 745px;	height: 26px; margin: 10px auto 0;
	color: #fff; text-indent: -9999px;
 	background: url(../i/people-at-war.gif) no-repeat 0 0;
}
#wrapper { text-align: left; margin: 0 auto;	width: 750px; }


/* NAVIGATION */

ul#primary-nav { list-style: none; float: right; }
ul#primary-nav li {	list-style: none; float: left; }
ul#primary-nav li a {
	color: #000;
	background: url(../i/dot.gif) no-repeat 0 50%;
	font-size: 90%; text-decoration: none;
	float: left; display: block;
	padding: 9px 5px 9px 14px;
	text-transform: uppercase;
}
ul#primary-nav li a:hover { text-decoration: underline; }
ul#primary-nav li#nav-help a { background: transparent; }
ul#primary-nav li#nav-about a { padding-right:0; }
ul#secondary-nav { list-style: none; float: right; }
ul#secondary-nav li {	list-style: none; float: left; }
ul#secondary-nav li a {
	color: #000; text-transform: uppercase;
	padding: 6px 5px; float: left;
	font-size: 105%; text-decoration: none;
}
ul#secondary-nav li a:hover { text-decoration: underline; }
ul#secondary-nav li#nav-links a { padding-right: 0px; }

body#help ul#primary-nav li#nav-help a,
body#site-map ul#primary-nav li#nav-sitemap a,
body#parents ul#primary-nav li#nav-parents a,
body#teachers ul#primary-nav li#nav-teachers a,
body#about ul#primary-nav li#nav-about a,
body#default ul#secondary-nav li#nav-home a,
body#home ul#secondary-nav li#nav-home a,
body#imagebank ul#secondary-nav li#nav-image-bank a,
body#whatsthestory ul#secondary-nav li#nav-whats-the-story a,
body#connections ul#secondary-nav li#nav-connections a,
body#timetourists ul#secondary-nav li#nav-time-tourists a,
body#scrapbook ul#secondary-nav li#nav-scrap-book a,
body#links ul#secondary-nav li#nav-links a { font-weight: bold; }



/* MAIN CONTENT */

#main-content {
	position: relative; font-size: 110%;
	background: #000 url(../i/container-top.gif) no-repeat;
	padding: 20px 24px 20px; color: #fff;
}
#main-content p {	margin: 5px 0 0 0; }
#main-content a { color: #9C0; }
#main-content a:hover { color: #690; }
#main-content #inner a { color: #000; }
#main-content ul { margin: 0 0 0 1.5em; }

/* PAGE TITLES */

#main-content h2#pagetitle {
	height: 20px; width: 310px; line-height: 20px;
	text-indent: -9999px;	background-repeat: no-repeat;
	margin: 0 0 1em;
}
#main-content.single h2#pagetitle { margin-bottom: .5em; }
body#about h2#pagetitle { background-image: url(../i/titles/about.gif); }
body#connections h2#pagetitle { background-image: url(../i/titles/connections.gif); }
body#site-map h2#pagetitle { background-image: url(../i/titles/sitemap.gif); }
body#help h2#pagetitle { background-image: url(../i/titles/help_and_accessibility.gif); }
body#default h2#pagetitle, body#home h2#pagetitle { background-image: url(../i/titles/home.gif); }
body#imagebank h2#pagetitle { background-image: url(../i/titles/image_bank.gif); }
body#links h2#pagetitle { background-image: url(../i/titles/links.gif); }
body#parents h2#pagetitle { background-image: url(../i/titles/parents.gif); }
body#scrapbook h2#pagetitle { background-image: url(../i/titles/scrap_book.gif); }
body#teachers h2#pagetitle { background-image: url(../i/titles/teaching_resources.gif); }
body#timetourists h2#pagetitle { background-image: url(../i/titles/time_tourists.gif); }
body#whatsthestory h2#pagetitle { background-image: url(../i/titles/whats_the_story.gif); }


/* HOME */

#home #main-content { padding: 15px 20px 30px; }
#home #main-content p {	font-size: 120%; margin: 0 10px .7em; }
#home #main-content #home-boxes {
	list-style: none; display: block;
	font-size: 150%; text-align: center; line-height: 150px;
	margin: 0 0 1em; position: relative;
	width: 710px; height: 500px;
}
#home-boxes li { position: absolute; height: 245px; width: 350px; }
#home-boxes li a { display: block; height: 245px; width: 350px; }
#home-boxes li a b { position: absolute; display: block; height: 245px; width: 350px; cursor: pointer; top:0; left:0; }
#home-boxes li a:hover b { background-position: 0 1px; }
#home-boxes li.imagebank { top: 0; left: 0; background: url(../i/imagebank-icon.jpg) no-repeat; }
#home-boxes li.imagebank b { background: url(../i/imagebank-icon.jpg) no-repeat; }
#home-boxes li.whatsthestory { top: 0; left: 360px; background: url(../i/whatsthestory-icon.jpg) no-repeat; }
#home-boxes li.whatsthestory b { background: url(../i/whatsthestory-icon.jpg) no-repeat; }
#home-boxes li.connections { top: 250px; left: 0;	background: url(../i/connections-icon.jpg) no-repeat; }
#home-boxes li.connections b { background: url(../i/connections-icon.jpg) no-repeat; }
#home-boxes li.timetourists {	top: 250px; left: 360px; background: url(../i/timetourists-icon.jpg) no-repeat; }
#home-boxes li.timetourists b {	background: url(../i/timetourists-icon.jpg) no-repeat; }


/* IMAGE BANK */

#main-content ul#image-nav-category {
	position: absolute; top: 20px; right: 24px; list-style: none;
}
#main-content ul#image-nav-category li { float: left; }
#main-content ul#image-nav-category li a { 
	display: block; float: left; margin: 0 0 0 10px;
	padding: 0 0 0 24px; height: 25px;
	background-repeat: no-repeat; color: #FFF;
}
#main-content ul#image-nav-category li a:hover {
	background-position: 0px -30px; color: #9C0;
}
#main-content ul#image-nav-category li a.all {
	background-image: url(../i/viewall.gif);
}
#main-content ul#image-nav-category li a.hartlepool, 
#main-content ul#image-nav-category li a.swansea {
	background-image: url(../i/category.gif);
}
#main-content.all ul#image-nav-category li a.all, 
#main-content.hartlepool ul#image-nav-category li a.hartlepool, 
#main-content.swansea ul#image-nav-category li a.swansea { 
	font-weight: 800; color: #9C0; font-size: 105%;
	background-position: 0px -30px;
	text-decoration: none; cursor: default;
}
#main-content ul#image-nav-single {
	position: absolute; top: 3.5em; right: 24px;
	list-style: none; text-align: right; font-size: 110%; 
}
#main-content ul#image-nav-single:after {
	content:"."; display:block; 
	height:0; clear:both; visibility:hidden;
}
#main-content ul#image-nav-single { display:inline-block; }
#main-content ul#image-nav-single { display:block; }

#main-content ul#image-nav-single li {
	float: left; margin: 0 0 0 20px;
}
#main-content ul#image-nav-single li a {
	float: left; height: 25px; color: #FFF;
	background-repeat: no-repeat; line-height: 25px;
}
#main-content ul#image-nav-single li.prev a {
	background: url(../i/image-nav.gif) no-repeat 0% -100px;
	padding: 0 0 0 30px;
}
#main-content ul#image-nav-single li.next a {
	background: url(../i/image-nav.gif) no-repeat 100% 0px;
	padding: 0 30px 0 0;
}
#main-content ul#image-nav-single li.prev a:hover {
	background-position: 0% -150px; color: #9C0;
}
#main-content ul#image-nav-single li.next a:hover {
	background-position: 100% -50px; color: #9C0;
}

#main-content ul#article-options {
	list-style: none; margin: .3em 0 3px;
}
#main-content ul#article-options:after {
	content:"."; display:block; 
	height:0; clear:both; visibility:hidden;
}
#main-content ul#article-options { display:inline-block; }
#main-content ul#article-options { display:block; }
#main-content ul#article-options li {
	list-style: none; float: left;
}
#main-content ul#article-options li a {
	display: block; text-indent: -9999px;
	width: 140px; height: 30px; color: #FFF;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#main-content ul#article-options li a:hover {	background-position: 0 -30px; }
#main-content ul#article-options li.print a {
	background-image: url(../i/print-option.png);
	width: 100px;
}
#main-content ul#article-options li.listen object {
	height: 30px; width: 117px;
}
#main-content ul#article-options li.large a {
	background-image: url(../i/large-option.png);
	width: 160px;
}
#main-content ul#article-options li.save a {
	background-image: url(../i/save-option.png);
	width: 180px;
}

/* THUMB IMAGE VIEW */
#main-content ul#thumb-list {
	margin: 0; padding: 0;
}
#main-content ul#thumb-list:after {
	content:"."; display:block; 
	height:0; clear:both; 
	visibility:hidden;
}
#main-content ul#thumb-list { display:inline-block; }
#main-content ul#thumb-list { display:block; }
#main-content ul#thumb-list li {
  list-style: none;	width: 117px;
	float: left; margin: 15px 0 0 0;
}
#main-content ul#thumb-list li a {
	display: block;	line-height: 1.2; color: #FFF;
	text-decoration: none; padding: 0 5px 0;
}
#main-content #thumb-list li br {	display: none; }
#main-content #thumb-list li a span {
	display: block;	height: 4em;
}
#main-content #thumb-list li a img { 
	border: 1px solid #fff; padding: 1px;
	width: 100px; height: 100px;
}
#main-content #thumb-list li a:hover { color: #9C0; }
#main-content #thumb-list li a:hover img { border-color: #9C0; }

/* SINGLE IMAGE VIEW */

#main-content #inner {
	width: 600px;
	background: #fff url(../i/inner-container-top.gif) no-repeat;
	margin: 10px 0 0 0;
	padding: 30px 50px;
 	color: #000;
}
#main-content #inner a { color: #690; }
#main-content #inner img { border: 1px solid #000; }
#main-content #inner p {
	padding: 5px 0 5px 0;
	font-size: 120%;
}
#main-content #inner h4 {
	border-top: 2px solid #000;
	padding: 1em 0 0; margin: 1.5em 0 1em;
	font-size: 130%; font-weight: 800;
}

#main-content.single #top-link {
	width: 700px; color: #fff;
	background: #000 url(../i/inner-container-bottom.gif) no-repeat;
	padding: 1.5em 0 0; margin: 0;
}

#main-content ul#map {
	width: 700px; height: 300px; margin: 0;
	background: url(../i/map.png) no-repeat 50% 0%;
	position: relative;	list-style: none;
}
#main-content ul#map li a {
	width: 300px;	height: 250px;
	font-size: 160%;
	position: absolute;
	display: block;	
}
#main-content ul#map li a b {
	position: absolute;
	display: block; height: 100%; width: 100%;
}
#main-content ul#map li#map-swansea a {
		top: 50px; left: 65px;
}
#main-content ul#map li#map-swansea a b {
		background: url(../i/map.png) no-repeat -15px -50px;
}
#main-content ul#map li#map-swansea a:hover b {
		background: url(../i/map.png) no-repeat -15px -350px;
}
#main-content ul#map li#map-hartlepool a {
	top: 50px; left: 370px;
}
#main-content ul#map li#map-hartlepool a b {
		background: url(../i/map.png) no-repeat -320px -50px;
}
#main-content ul#map li#map-hartlepool a:hover b {
		background: url(../i/map.png) no-repeat -320px -350px;
}

#main-content p#timetourists-footer-bg {
	width: 200px;
	height: 200px;
	float: right;
	background: url(../i/time-tourists-footer.jpg) no-repeat 10px 10px;
}

#main-content p#connections-footer-bg {
	width: 200px;
	height: 200px;
	float: right;
	background: url(../i/connections-footer.jpg) no-repeat 0 0;
}

/*

#main-content p#whatsthestory-footer-bg {
	width: 200px;
	height: 200px;
	float: right;
	background: url(../i/whatsthestory-footer.jpg) no-repeat 0 0;
}
*/

/* WHATS THE STORY */

#main-content #intro {
	background: url(../i/whats-the-story-bg.jpg) no-repeat 100% 0%;
	padding: 0 380px 0 0; min-height: 200px;
}

#main-content #inner #download {
	border: 1px solid #690; padding: 15px 15px 10px; margin: 1em 0 1.5em;
}
#main-content #inner #download h4 {
	border: 0; padding: 0; margin: 0 0 .2em; font-size: 140%;
	line-height: 1;
}
#main-content #inner #download p.save { margin: 0; }
#main-content #inner #download p.save a {
	display: block; height: 30px; width: 180px;
	background: url(../i/save-option.png) no-repeat;
	text-indent: -9999px; margin: 0;
}
#main-content #inner #download p.save a:hover {	background-position: 0 -30px; }

/* CONNECTIONS */

#connections #intro {
	background: url(../i/connections-top-bg.jpg) no-repeat 100% 0%;
	padding: 0 240px 0 0; min-height: 230px;
}

#connections ul#place-selection {	margin: 15px 0 0 0;	list-style: none; }
#main-content ul#place-selection:after {
	content:"."; display:block; 
	height:0; clear:both; visibility:hidden;
}
#main-content ul#place-selection { display:inline-block; }
#main-content ul#place-selection { display:block; }
#connections ul#place-selection li { float: left; margin: 0 20px 0 0; }
#connections ul#place-selection li a {
	padding: 20px 0 20px 95px; display: block; text-decoration: none;
	background: url(../i/connections-icons.png) no-repeat; color: #fff;
}
#connections ul#place-selection li b { display: block; font-size: 120%; line-height: 1; }
#connections ul#place-selection li.swansea a { background-position: 0 -200px; }
#connections ul#place-selection li.swansea a:hover { background-position: 0 -300px; color: #9C0; }
#connections ul#place-selection li.hartlepool a:hover { background-position: 0 -100px; color: #9C0; }

#connections #main-content p.savewritesheet { margin: 10px 0 0 5px; }
#connections #main-content p.savewritesheet a {
	display: block; height: 30px; width: 180px;
	background: url(../i/save-option-invert.png) no-repeat;
	text-indent: -9999px; margin: 0;
}
#connections #main-content p.savewritesheet a:hover {	background-position: 0 -30px; }


/* TIME TOURISTS */

ul#tickets {
	display: block; list-style: none; height: 512px; width: 700px;
	margin: 1em 0 0; padding: 0; position: relative;
}
ul#tickets li a { 
	font-size: 120%; width: 230px; height: 128px;
	position: absolute; display: block;
}
ul#tickets li a:hover b { background-position: 0px 2px; }
ul#tickets li a b { 
	z-index: 200; position: absolute;
	width: 230px; height: 128px; cursor: pointer;
}
ul#tickets li#t99 a {	top: 0; left: 0; }
ul#tickets li#t88 a {	top: 0; left: 230px; }
ul#tickets li#t67 a {	top: 0; left: 460px; }
ul#tickets li#t66 a {	top: 128px; left: 0px; }
ul#tickets li#t65 a {	top: 128px; left: 230px; }
ul#tickets li#t64 a {	top: 128px; left: 460px; }
ul#tickets li#t63 a {	top: 256px; left: 0px; }
ul#tickets li#t50 a {	top: 256px; left: 230px; }
ul#tickets li#t42 a {	top: 256px; left: 460px; }
ul#tickets li#t35 a {	top: 384px; left: 0px; }
ul#tickets li#t30 a {	top: 384px; left: 230px; }
ul#tickets li#t14 a {	top: 384px; left: 460px; }
ul#tickets li#t99 a b {	background-image: url(../i/ticket-1.jpg); }
ul#tickets li#t88 a b { background-image: url(../i/ticket-2.jpg); }
ul#tickets li#t67 a b {	background-image: url(../i/ticket-3.jpg); }
ul#tickets li#t66 a b { background-image: url(../i/ticket-4.jpg); }
ul#tickets li#t65 a b {	background-image: url(../i/ticket-5.jpg); }
ul#tickets li#t64 a b {	background-image: url(../i/ticket-6.jpg); }
ul#tickets li#t63 a b {	background-image: url(../i/ticket-7.jpg); }
ul#tickets li#t50 a b {	background-image: url(../i/ticket-8.jpg); }
ul#tickets li#t42 a b {	background-image: url(../i/ticket-9.jpg); }
ul#tickets li#t35 a b {	background-image: url(../i/ticket-10.jpg); }
ul#tickets li#t30 a b {	background-image: url(../i/ticket-11.jpg); }
ul#tickets li#t14 a b {	background-image: url(../i/ticket-12.jpg); }



/* FORMS */

#teachers #zemContactForm fieldset {
	border: 0;
}
#teachers #zemContactForm legend {
	display: none;
}
#teachers #zemContactForm fieldset label {
	margin: .7em 0 0;
}
#teachers #zemContactForm fieldset p {
	margin: .5em 0 .7em;
}
#teachers #zemContactForm fieldset input {
	margin: 0;
}
#teachers #zemContactForm fieldset #zemSubmit {
	display: block; margin: 2em 0 0;
}
#teachers #zemContactForm ul.zemError { border: 1px solid red; margin: 0; padding: 10px 10px 10px 25px; }
.zemRequirederrorElement { color: red; }


/* FOOTER */

#footer {
	width: 750px;	padding: 40px 0 0; margin: 0 0 2em;
	background: #fff url(../i/container-bottom.gif) no-repeat;
}
#footer ul {
	list-style: none;	display: block; position: relative;
	height: 100px; width: 750px;
	background: url(../i/logos.png) no-repeat;
}
#footer ul li {
	display: none;
	width: 130px;	list-style: none; float: left;
}
#footer ul li a {
	float: left; padding: 5px;
}


/* GENERIC CLASSES */

.clear { clear: both; }
.clear hr { display: none; }