/* import reset stylesheet - resets most styles to 0 */

@import url(reset.css);

/* import menu stylesheet */
@import url(menu.css);



/*--------- page structure ---------*/

html{
	text-align: center;
}

body{
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	width: 820px;
	margin: 10px auto;
	text-align:  left;
	background-color: #000;
	background-position: center top;
	background-repeat: no-repeat;
}

body#home {
	background-image: url(images/templates/home-page.png);
}

body#packs{
	background-image: url(images/templates/packs-bg.png);
}

body#about{
	background-image: url(images/templates/about-bg.png);
}

body#portfolio{
	background-image: url(images/templates/portfolio-bg.png);
}

body#contactUs{
	background-image: url(images/templates/contact-us-bg.png);
}
     
#header{
	background: transparent;
	height: 90px;
	width: 820px;
	margin-top: 40px;
	position: relative;
}

#main{
	width: 780px; 
	margin: 0 auto;
	background: transparent;
	overflow: hidden;
}

#footer{
	position: absolute;
	top: 672px;
	width: 780px;
}

/* ------------ basic typography ---------- */
h1, h2, h3, h4, h5, p{
	margin-bottom: 0.85em;
}

h1{
	font-size: 24px;
	margin-bottom: 0.85em;
	color: #1046C7;
}

h2{
	font-size: 21px;
	color: #E41E26;
}

h3{
	font-size: 18px;
	line-height: 1.3em;
}

p{
	font-size: 14px;
	line-height: 1.45em;
	margin-bottom: 1em;
}

a{
	font-weight: bold;
}

a:link{
	color: #006AB6;
	text-decoration: none;
}

a:visited{
	color: #680F14;
	text-decoration: none;
}

a:hover, a:active{
	color: #e10006;
	text-decoration: underline;
}

/* ------------- generic floats ------------ */

.clearboth{
	clear:both;
}

.clearleft{
	clear: left;
}

.floatleft{
	float: left;
	padding: 0 10px 10px 0;
}

.floatright{
	float: right;
	padding: 0 0 10px 10px;
}

.topmargin{
	margin-top: 82px;
}

.nomargin{
	margin:0;
}


/* ---------- header content styles ---------- */
h1#logo{
text-indent: -999em;
 overflow: hidden;
 position: absolute;
 top: 0px;
 left: -50px;
 width: 195px;
 height: 115px;
 z-index: 99;
}

h1#logo a{
	display: block;
	width: 100%;
	height: 100%;
}

/* ----------- menu content styles ----------- */
 
/* menu styles in linked stylesheet menu.css */

/* -----------  main content styles ---------- */

#main p{
	text-align: center;
}

#about #main p, #portfolio #main p{
	text-align:left;
	font-size: 12px;
	line-height: 1.3em;
}

#main h1{
	text-indent: -999em;
 	overflow: hidden;
	margin: 15px auto 10px auto;
}

#main dl{
	clear: left;
	width: 315px;
	float:left;
	display: block;
}

#main dt{
	font-weight: bold;
	padding-left: 20px;
}

#main dd{
	margin: 0 0 10px 20px;
	font-size: 11px;
}

#home #main h1{
	text-indent: -999em;
 	overflow: hidden;
	width: 424px;
 	height: 32px;
 	background: url(images/templates/home-h1-bg.png) 0 0 no-repeat;
	margin: 20px auto 10px auto;
}

#portfolio #main p{
	padding-left: 55px;
}


/* -----------  page headings ---------- */

#packs #main h1#packsHeading{
	width: 650px;
 	height: 34px;
 	background: url(images/templates/packs-h1-bg.png) 0 0 no-repeat;
}

#about #main h1#aboutHeading{
	width: 500px;
 	height: 36px;
	background: url(images/templates/about-h1-bg.png) 0 0 no-repeat;
}

#portfolio #main h1#portfolioHeading{
	width: 417px;
 	height: 34px;
	background: url(images/templates/portfolio-h1-bg.png) 50% 20px no-repeat;
	padding-top: 40px;
	margin-right: 255px;
}

#portfolio #main h2{
	text-indent: -999em;
 	overflow: hidden;
 	background-position: 55px 0;
	background-repeat: no-repeat;
	height: 19px;
	margin: 20px 0 0 0;
	}

#portfolio #main h2#characterHeading{
	background-image: url(images/templates/character-h2-bg.png);
	
}

#portfolio #main h2#makeandoHeading{
	background-image: url(images/templates/makeanddo-h2-bg.png);
}


#portfolio #main h2#browseHeading{
	background-image: url(images/templates/browse-h2-bg.png);
	height: 33px
}



#contactUs #main h1#contactHeading{
	width: 410px;
 	height: 34px;
	background: url(images/templates/contact-h1-bg.png) 0 0 no-repeat;
}

#contactUs #main h2#contactHeading{
	height: 60px;
	text-indent: -999em;
 		overflow: hidden;
	background: url(images/templates/contact-h2-bg.png) 50% 0 no-repeat;
	margin-top: 25px;
}

#contactUs #main p#phone, #contactUs #main p#fax{
	font-size: 26px;
	color:#7BD3F7;
	float: left;
	width: 300px;
	padding-top: 10px;
	background-position: 0 0;
	background-repeat: no-repeat;
}

#contactUs #main p#phone strong, #contactUs #main p#fax em{
		display: none;
}

#contactUs #main p#phone{
	background-image: url(images/templates/tel-icon.png);
	margin-left: 115px;
}

#contactUs #main p#fax{
	background-image: url(images/templates/fax-icon.png);
}

#contactUs p#email{
	clear: both;
}

a.emailLink{
		width: 568px;
		height: 57px;
		text-indent: -999em;
 		overflow: hidden;
		display: block;
		background: url(images/templates/emailLink-bg.png) 0 0 no-repeat;
		margin: 0 auto;
}

#about #main a#rowtypeLink {
		width: 385px;
		height: 57px;
		text-indent: -999em;
 		overflow: hidden;
		display: block;
		background: url(images/templates/rowtype-logo-link.png) 0 0 no-repeat;
		margin: 0 auto;
}

/* ------------------------------ packs menu ------------------------------ */
#main #packsMenu{
	margin: 30px 20px 10px 40px;
	height: 75px;
	overflow: hidden;
	}
	
* html body #main #packsMenu{
	margin-top: 10px;
}

*:first-child+html #main #packsMenu{
	margin-top: 10px;
}

#main #packsMenu li{
	float: left;
}

#main #packsMenu a{
text-indent: -999em;
 overflow: hidden;
 height: 52px;
 float: left;
 display: block;
 margin: 0 6px 0 0;
 background-position: 50% 50%;
 background-repeat: no-repeat;
}

* html body #main #packsMenu a{
	margin-right: 3px;
}


/* individual packs menu link bgs */

#main #packsMenu a#dinosaursLink{
	background-image: url(images/templates/pack-icon-dinosaurs.png);
	width: 104px;
}

#main #packsMenu a#piratesLink{
	background-image: url(images/templates/pack-icon-pirates.png);
	width: 107px;
}
#main #packsMenu a#fairyLink{
	background-image: url(images/templates/pack-icon-fairy.png);
	width: 102px;
}
#main #packsMenu a#undertheseaLink{
	background-image: url(images/templates/pack-icon-underthesea.png);
	width: 100px;
}
#main #packsMenu a#littleprincessLink{
	background-image: url(images/templates/pack-icon-princess.png);
	width: 89px;
}
#main #packsMenu a#junglefunLink{
	background-image: url(images/templates/pack-icon-jungle.png);
	width: 77px;
}
#main #packsMenu a#santaLink{
	background-image: url(images/templates/pack-icon-santa.png);
		width: 87px;
}

/* ------------------------------ packs pages details ------------------------------ */
#packs #main h1{
	margin-top:0;
	clear: both;
}

/* packs details headings background graphics */

#packs #main dt strong{
	display: block;
	margin:0;
	padding:0;
	height: 14px;
	text-indent: -999em;
 	overflow: hidden;
	background-position: 0 0;
	background-repeat: no-repeat;
}

#packs #main dt strong#a3Heading{
		background-image: url(images/templates/a3heading-bg.png);
}

#packs #main dt strong#activityHeading{
		background-image: url(images/templates/activityheading-bg.png);
}

#packs #main dt strong#repeelableHeading{
		background-image: url(images/templates/repeelableheading-bg.png);
}

#packs #main dt strong#jigsawHeading{
		background-image: url(images/templates/jigsawheading-bg.png);
}

#packs #main dt strong#stackerHeading{
		background-image: url(images/templates/stackerheading-bg.png);
}

#packs #main dt strong#headerHeading{
		background-image: url(images/templates/headerheading-bg.png);
}



/* dinosaur page */
#main.dinosaurs h1{
	float: left;
	width: 315px;
	height: 80px;
	background: url(images/templates/dinosaur-h1-bg.png) 50% 0 no-repeat;
}

#packs #main.dinosaurs img{
	display: block;
	padding-top: 35px;
}

#packs #main.dinosaurs dt{
	background: url(images/templates/dino-odd.png) 0 50% no-repeat;
}

#packs #main.dinosaurs dt.even{
	background: url(images/templates/dino-even.png) 0 50% no-repeat;
}

/* fairy page */
#main.fairy h1{
	float: left;
	width: 315px;
	height: 69px;
	background: url(images/templates/fairy-h1-bg.png) 50% 0 no-repeat;
}

#packs #main.fairy img{
	display: block;
	padding-top: 35px;
}

#packs #main.fairy dt{
	background: url(images/templates/fairy-odd.png) 0 50% no-repeat;
}

#packs #main.fairy dt.even{
	background: url(images/templates/fairy-even.png) 0 50% no-repeat;
}

/* jungle page */
#main.jungle h1{
	float: left;
	width: 320px;
	height: 92px;
	background: url(images/templates/jungle-h1-bg.png) 50% 0 no-repeat;
}

#packs #main.jungle img{
	display: block;
	padding-top: 35px;
}

#packs #main.jungle dl{
	width: 320px;
	padding-left: 10px;
}

#packs #main.jungle dt{
	background: url(images/templates/jungle-odd.png) 0 50% no-repeat;
}

#packs #main.jungle dt.even{
	background: url(images/templates/jungle-even.png) 0 50% no-repeat;
}

/* pirates page */
#main.pirates h1{
	float: left;
	width: 315px;
	height: 81px;
	background: url(images/templates/pirates-h1-bg.png) 50% 0 no-repeat;
}

#packs #main.pirates img{
	display: block;
}

#packs #main.pirates dt{
	background: url(images/templates/pirates-odd.png) 0 50% no-repeat;
}

#packs #main.pirates dt.even{
	background: url(images/templates/pirates-even.png) 0 50% no-repeat;
}

/* little princess page */
#main.littleprincess h1{
	float: left;
	width: 355px;
	height: 83px;
	background: url(images/templates/littleprincess-h1-bg.png) 50% 0 no-repeat;
}

#packs #main.littleprincess img{
	display: block;
}

#packs #main.littleprincess dl{
	padding-left: 30px;
}

#packs #main.littleprincess dt{
	background: url(images/templates/littleprincess-odd.png) 0 50% no-repeat;
}

#packs #main.littleprincess dt.even{
	background: url(images/templates/littleprincess-odd.png) 0 50% no-repeat;
}

/* santa page */
#main.santa h1{
	float: left;
	width: 345px;
	height: 52px;
	background: url(images/templates/santa-h1-bg.png) 50% 0 no-repeat;
}

#packs #main.santa img{
	display: block;
}

#packs #main.santa dl{
	padding-left: 20px;
}

#packs #main.santa dt{
	background: url(images/templates/santa-odd.png) 0 50% no-repeat;
}

#packs #main.santa dt.even{
	background: url(images/templates/santa-even.png) 0 50% no-repeat;
}

/* under the sea page */
#main.underthesea h1{
	float: left;
	width: 385px;
	height: 76px;
	background: url(images/templates/underthesea-h1-bg.png) 50% 0 no-repeat;
}

#packs #main.underthesea img{
	display: block;
}

#packs #main.underthesea dl{
	width: 340px;
	padding-left: 40px;
}

#packs #main.underthesea dt{
	background: url(images/templates/underthesea-odd.png) 0 50% no-repeat;
}

#packs #main.underthesea dt.even{
	background: url(images/templates/underthesea-odd.png) 0 50% no-repeat;
}

/* ------------------------------ portfolio thumbnails grid ------------------------------ */

#portfolioThumbs{
	float: right;
	width: 220px;
	padding: 30px 0 0 10px;
}

#portfolioThumbs a{
	display: block;
	float: left;
	margin: 0 2px 2px 0;
	width: 46px;
	height: 46px;
}

#portfolioThumbs img{
	width: 44px;
	height: 44px;
	border: 1px solid #000;
}

#portfolioThumbs img.blank{
	border: 1px solid #E9EAEB;
}

#portfolioThumbs h3{
	text-indent: -999em;
 	overflow: hidden;
 	height: 34px;
	margin:0;
	padding:0;
	background-position: 0 0;
	background-repeat: no-repeat;
}

#portfolioThumbs h3#illustHead{
	background-image: url(images/templates/portfolio-illust-head.png);
}

#portfolioThumbs h3#makedoHead{
	clear: both;
	background-image: url(images/templates/portfolio-makedo-head.png);
}

#portfolio #main #portfolioThumbs p{
	padding: 10px 0 0 50px;
	margin:0;
	background: url(images/templates/portfolio-p-bg.png) 10px 0 no-repeat;
	overflow: hidden;
	width: 150px
}

/* ------------------------------ home page news panel  ------------------------------ */

#newsPanel{
	margin: 20px 0;
	background: url(images/templates/newsPanel-bg.png) 0 0 no-repeat;
	width: 738px;
	height: 227px;
	padding: 15px 20px;
}

#main h2#newsHeading{
	text-indent: -999em;
 	overflow: hidden;
	width: 162px;
 	height: 116px;
 	background: url(images/templates/news-icon.png) 0 0 no-repeat;
	margin: 0 auto 10px auto;
}

#newsPanel p{
	text-align: center;
}

#newsPanel img{
	float: left;
}
/* -------- footer content styles ---------- */

/*---------- contact form ------------*/

form#contactform{
	width: 365px;
	float: left;
	margin: 5px 0 0 30px;
	padding-top: 10px;
	background: #DEF4F9 url(images/templates/contact-top-bg.png) 0 0 no-repeat;
}

#main div#contactDetails{
	float: left;
	width: 340px;
	padding: 10px 0 0 10px;
}

#main div#contactDetails p{
	text-align:left;
}

#contactform label{
	display:block;
	padding: 4px 5px 5px 150px;
	background: #DEF4F9;
	border-bottom: 1px solid  #92D8EC;
	font-weight: bold;
	color: #004569;
	width: 210px;
}

#contactform label.enquiry{
	border: none;
}

#contactform span{
	position: relative;
	left: -130px; /* this pushes the left edge of the span over to the left edge of the space created by the padding set above */
	float: left;
	padding-top: 5px;
	margin-right: -130px; /*reduce the values of this and the above commented elements to make a narrower label*/
}

#contactform input{
	width: 200px;
	border: 1px solid #92D8EC;
}

#contactform textarea{
	width: 200px;
	border: 1px solid #92D8EC;
}

#contactform p{
	text-align: left;
	padding: 0 10px;
}

#contactform p strong img{
	vertical-align: middle;
}

#contactform p#buttons{
	text-align : right;
	margin: 0;
	padding:15px 0 0 0;
	background: #fff url(images/templates/contact-bottom-bg.png) 0 0 no-repeat;
}

#contactform p#buttons input{
	width: 85px;
	height: 61px;
	border: none;
}
/* ------------------------------ footer content ------------------------------ */
#footer p{
	text-align: center;
	color: #004569;
	font-size: 12px;
	margin: 0;
}