/*---colours---------
background & h1 #008194 
rightCol background #cce6e9
main text #001d38
red border & red hover #dc241f
grey links: #939598
-------------------*/

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
	margin: 0;
	padding: 0;
}
body {
	padding: 0 0 30px 0;
	font-size: small;
	font-family: "Trebuchet MS", "Comic Sans MS", Arial, sans-serif;
	color: #001d38;
	text-align:center; /*for IE6 and IE5*/
	background: #008194;
}
div.clearit {
	clear: both;
}
/*-------------------
contains everything
--------------------*/
div#outerWrap {
	width: 980px;
	margin: 0 auto;
	background: #fff url(../site_graphics/outerwrap_background.jpg) repeat-y left top;
}
/*---------------------------
contains all header including
the basket and checkout links
----------------------------*/
div#headerWrap {
	width: 100%;
	background: #fff;
	position: relative;

}
div#headerWrap img {
	display: block;/*prevents unwanted margins*/
	z-index: 1;
}
div#headerWrap ul#basketLinks {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 10;
}
div#headerWrap ul#basketLinks li {
	display: inline;
	padding: 0 5px;
	border-right: 1px solid #939598;
}
div#headerWrap ul#basketLinks li a:link, div#headerWrap ul#basketLinks li a:visited {
	color: #939598;
	font-weight: bold;
	font-size: 14px;
	text-decoration: none;
	display: inline;
}
div#headerWrap ul#basketLinks li a:hover, div#headerWrap ul#basketLinks li a:focus, div#headerWrap ul#basketLinks li a:active {
	color: #dc241f;
}
/*---------------------------------
contains menu and contact details
---------------------------------*/
div#menuBarWrap {
	margin: 0 15px 0 30px;
	background: #fff;
	padding: 0 0 15px 0;

	/*background: #008092 url(../site_graphics/menu_back_up.jpg) repeat-x left bottom;*/
}
/*------------
actual menu
------------*/
div#menuBarWrap div#menuWrap {
	width: 100%;
	position: relative;
	z-index: 9999999;
	background: #fff;
	background: #008092 url(../site_graphics/menu_back_up.jpg) repeat-x left bottom;

}
/*-------------
phone & email
--------------*/
div#menuBarWrap div#menuWrap ul#contact {
	margin: 0;
	padding: 7px 5px 5px 5px;
	background: url(../site_graphics/email_back.jpg) no-repeat right top;
	position: absolute;
	top: 0;
	right: 20px;
	z-index: 10000;
}
div#menuBarWrap div#menuWrap ul#contact li {
	color: #cce6e9;
	display: inline;
}
div#menuBarWrap div#menuWrap ul#contact li#phone {
	margin: 0 10px 0 0;
}

div#menuBarWrap div#menuWrap ul#contact li#email a:link, div#menuBarWrap div#menuWrap ul#contact li#email a:visited {
	color: #cce6e9;
	margin: 0 38px 0 0;
}
div#menuBarWrap div#menuWrap ul#contact li#email a:hover, div#menuBarWrap div#menuWrap ul#contact li#email a:focus, div#menuBarWrap div#menuWrap ul#contact li#email a:active {
	color: #008194;
	background: #cce6e9;
}
/*-------------------------
Everything below the menu
--------------------------*/
div#outerWrap div#lowerContent {
	width: 935px;
	margin: 0 15px 0 30px;
	padding: 0;
	position: relative;
	text-align: left;
	background: url(../site_graphics/lower_content_back.jpg) repeat-y right top;
}
/*----------------------------------------
main content including large banner photo
-----------------------------------------*/
div#outerWrap div#lowerContent div#leftCol {
	width: 644px;
	margin: 0;
	float: left;
	display: inline; /*prevents double margin in IE*/
}
div#outerWrap div#lowerContent div#leftCol div#bannerPix {
	width: 644px;
	margin: 0 0 20px 0;
}
div#outerWrap div#lowerContent div#leftCol p.homePara {
	padding: 0 0 26px 0;
	font-size: 15px;
	line-height: 22px;
}
div#outerWrap div#lowerContent div#leftCol p.homeParaTitle{
	color: #008194;
	font-size: 16px;
	font-weight:bold;
}
div#outerWrap div#lowerContent div#leftCol p.homePara a:link, a:visited {
	color: #008194;
	text-decoration: none;
}
div#outerWrap div#lowerContent div#leftCol p.homePara a:hover {
	color: #008194;
	text-decoration: underline;
}
div#outerWrap div#lowerContent div#leftCol h1.homeHOne {
	font-size: 18px;
	color: #008194;
	line-height: 26px;
	margin: 0 0 18px 0;
}
/*----------------------------------------------
Left contents boxes
-----------------------------------------------*/
div#outerWrap div#lowerContent div#leftCol div#contentsBoxWrap {
	width: 638px;
	margin: 0 0 0 0;
}
div#contentsBoxWrap p {
	padding: 0;
}
div#contentsBoxWrap a img {
	border: none;
	text-decoration:none;
}
div.contentsBoxLeft {
	/*this is for the first two boxes in the row - float:left*/
	width: 200px;
	height: 280px;
	margin: 10px 16px 0 0;
	float: left;
	border: 1px solid #008194;
}
div.contentsBoxLeft h2 {
	font-size: small;
	font-weight: bold;
	padding: 3px 3px;
	color: #fff;
	text-align: left;
	text-decoration: none;
	background-color: #008194;
}
.contentsPrice {
	color:#FF0000;
	font-size:medium;
	font-weight:bold;
}
div.contentsBoxLeft h2 a:link, div.contentsBoxLeft h2 a:visited {
	color: #fff;
	text-decoration: none;
}
div.contentsBoxLeft h2 a:hover, div.contentsBoxLeft h2 a:active, div.contentsBoxLeft h2 a:focus {
	color: #FF0000;
}
/*
div#contentsBoxLeftWrap h2 a:link, div#contentsBoxLeftWrap h2 a:visited {
	text-decoration: none;
	color: #fff;
}
div#contentsBoxLeftWrap h2 a:hover, div#contentsBoxLeftWrap h2 a:active {
	color: #FF0000;
	text-decoration: underline;
}*/
div.contentsBoxLeftRight {
	/*this is for the right box in the row - float:right*/
	width: 200px;
	height: 280px;
	margin: 10px 0 0 0;
	float: right;
	border: 1px solid #008194;
}
div.contentsBoxLeftRight h2 {
	font-size: small;
	font-weight: bold;
	padding: 3px 8px;
	color: #fff;
	text-align: left;
	background-color: #008194;
}
div#lowerRow {
	font-weight: bold;
	margin: 20px auto;
	background: #fff;
	clear: both;
}

div.contentsBoxLeftRight h2 a:link, div.contentsBoxLeftRight h2 a:visited {
	color: #fff;
	text-decoration: none;
}
div.contentsBoxLeftRight h2 a:hover, div.contentsBoxLeftRight h2 a:active, div.contentsBoxLeftRight h2 a:focus {
	color: #FF0000;
}
/*------------------------
all content on the right
--------------------------*/
div#outerWrap div#lowerContent div#rightCol {
	width: 260px;
	float: right;
	display: inline; /*prevents double margin in IE*/
}
/*
div#outerWrap div#lowerContent div#rightCol div.contentsBox {
	width: 270px;
	margin: 0 0 15px 0;
	overflow: hidden;
}
div#outerWrap div#lowerContent div#rightCol div.contentsBox p {
	padding: 3px 5px 3px 105px;
}*/
div#outerWrap div#lowerContent div#rightCol h2 {
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0.1em;
	background: url(../site_graphics/menu_back_up.jpg) left bottom;
}
/*--------------------------------
iframe container for the shop box
--------------------------------*/
div#rightCol div#frameWrap {
	width: 260px;
	height: 700px; /*this will allow for all the contents of the frame. A height MUST be specified here and for the iframe below  CHANGED to 700 JTW */
	margin: 0;
	background: #cde6ea;
	}
div#rightCol div#frameWrap iframe {
	width: 260px;
	height: 700px; /*MUST HAVE A FIXED HEIGHT*/
	background: #cde6ea*;
	border: none;
	position:fixed;  /* added by JTW */

}
/*---------------------------
these are the links on the right
-----------------------------*/
div#outerWrap div#lowerContent div#rightCol h2 a:link, div#outerWrap div#lowerContent div#rightCol h2 a:visited {
	color: #fff;
	padding: 5px 5px 5px 40px;
	text-decoration: none;
	background: url(../site_graphics/menu_back_up.jpg) left bottom;
	display: block;
}
div#outerWrap div#lowerContent div#rightCol h2 a:hover, div#outerWrap div#lowerContent div#rightCol h2 a:focus, div#outerWrap div#lowerContent div#rightCol h2 a:active {
	background: url(../site_graphics/menu_back_hover.jpg) left bottom;
}
/*-------------------------------------------------
all the contentsBoxes have their own background
image and so need to be styled individually
-------------------------------------------------*/
.rolls {
	background: url(../site_graphics/contents_roll_of_felt.jpg) no-repeat left bottom;
}
.bobs {
	background: url(../site_graphics/contents_bobs.jpg) no-repeat left bottom;
}
.strips {
	background: url(../site_graphics/contents_strips.jpg) no-repeat left bottom;
}
.decorative {
	background: url(../site_graphics/contents_decorative.jpg) no-repeat left bottom;
}
.handicraft {
	background: url(../site_graphics/contents_handicraft.jpg) no-repeat left bottom;
}
.processed {
	background: url(../site_graphics/contents_processed.jpg) no-repeat left bottom;
}
.packs {
	background: url(../site_graphics/contents_packs.jpg) no-repeat left bottom;
}
.foam{
	background: url(../site_graphics/contents_foam.jpg) no-repeat left bottom;
}

/*-------------------------
contains the curved border
--------------------------*/
div#footer {
	height: 145px;
	background: url(../site_graphics/bottom2.jpg) no-repeat left bottom;
	clear: both;
	text-align: right;
}
div#outerWrap div#footer p {
	margin: 0 325px 0 0;
	padding: 20px 0 0 0;
	font-size: 14px;
	line-height: 20px;
}
div#outerWrap div#footer p#footerContact {
	margin: 0 320px 0 0;
	padding: 0;
	font-size: 16px;
	line-height: 20px;
}
div#outerWrap div#footer p#footerContact a:link, div#outerWrap div#footer p#footerContact a:visited {
	font-weight: bold;
	color: #008194;
	text-decoration: none;
}
div#outerWrap div#footer p#footerContact a:hover, div#outerWrap div#footer p#footerContact a:focus, div#outerWrap div#footer p#footerContact a:active {
	color: #dc241f;
}
div#outerWrap div#footer p#footerContact a:hover span {
	margin-left: 5px;
	padding: 0 5px 0 0;
}
div#outerWrap div#footer ul {
	margin: 10px 320px 0 70px;
}
div#outerWrap div#footer ul li {
	display: inline;
	border-right: 1px solid #939598;
	padding: 0 5px;
}
div#outerWrap div#footer ul li a:link, div#outerWrap div#footer ul li a:visited {
	color: #939598;
	font-weight: bold;
	font-size: 14px;
	text-decoration: none;
}
div#outerWrap div#footer ul li a:hover, div#outerWrap div#footer ul li a:focus, div#outerWrap div#footer ul li a:active {
	color: #dc241f;
}
div#bobsBox {
	width: 644px;
	text-align: left;
}
div#newsBox p {
	margin: 20px 30px 0 20px;
	letter-spacing: 0.1em;
}
div#newsBox h1 {
	color: #018592;
	font-weight: normal;
	font-size: 17px;
	letter-spacing: 0.1em;
	margin: 0 0 0 20px;
	padding: 34px 0 0 0;
}
div#newsBox img {
	float: right;
}
div#p7ABW1 {
	width: 644px;
}
.p7ABcontent p {
	margin: 6px 0 12px 0;
	font-size:16px;
	font-family: "Trebuchet MS", "Comic Sans MS", Arial, sans-serif;
}

div#projectText3 ul {
	margin-left: 50px;
}
div#projectText3 ul li {
	margin-top: 3px;
}
/*------------------------------------
oh oh - adeles bit here
--------------------------------------*/
table {
	width: 500px;
	margin: 10px auto;
	border: 2px solid #018592;
	border-right: 1px solid #018592;
	border-bottom: 1px solid #018592;
	background-color:#FFFFFF;
}
table td p {	
	margin: 0;
	padding: 0;
	line-height: 1em;
}
table tr td {
	padding: 4px;
	border-right: 1px solid #018592;
	border-bottom: 1px solid #018592;
	text-align: center;
	vertical-align:middle;
}
table td.title {
	font-weight: bold;
	color: #000;
	background-color: #cde6ea;
	vertical-align: middle;
}
/*------------------------------
table for the educational felts
------------------------------*/
div#contentsBoxWrap table#products {
	margin: 0;
	border: none;
}
div#contentsBoxWrap table#products td {
	width: 200px;
	border: 1px solid #008194;
	padding: 0 0 3px 0;
	vertical-align: top;
	text-align: left;
}
div#contentsBoxWrap table#products td h2 {
	font-size: small;
	font-weight: bold;
	color: #fff;
	text-align: left;
	text-decoration: none;
	background-color: #008194;
}
div#contentsBoxWrap table#products td h2 a:link, div#contentsBoxWrap table#products td h2 a:visited {
	color: #fff;
	padding: 3px 5px;
	text-decoration: none;
	display: block;
}
div#contentsBoxWrap table#products td h2 a:hover, div#contentsBoxWrap table#products td h2 a:active, div#contentsBoxWrap table#products td h2 a:focus {
	color: #fff;
	background-color: #DD2421;
}
div#contentsBoxWrap table#products td p {
	padding: 3px 5px;
}
div#contentsBoxWrap table#products td p.price a:link, div#contentsBoxWrap table#products td p.price a:visited {
	color: #DD2421;
	font-weight: bold;
}
div#contentsBoxWrap table#products td p.price a:hover, div#contentsBoxWrap table#products td p.price a:active, div#contentsBoxWrap table#products td p.price a:focus {
	background: #DD2421;
	color: #fff;
}
div#contentsBoxWrap table#products td p a:link
div#contentsBoxWrap table#products td img {
	display: block;
}
div#contentsBoxWrap table#products td a:hover {
	background-color: white;
}
div#contentsBoxWrap table#products td a:link img, div#contentsBoxWrap table#products td a:visited img {
	padding: 0;
}
div#contentsBoxWrap table#products td a:visited img {
 	padding-top: 0;
}
div#contentsBoxWrap table#products td a:hover img {
	width: 196px;
	height: 85px;
	padding: 2px;
}
/*------------------------
table for decorative felts
-------------------------*/
table#decorative {
	margin: 0 0 0 20px;
	border: none;
	text-align: center;
}
table#decorative td {
	width: 100px;
	border: none;
	padding: 0;
	vertical-align: top;
}
table#decorative td a:hover {
	background-color: white;/*fixes bug in IE6 for hover*/
}
table#decorative td a:link img, table#decorative td a:visited img {
	padding: 0;
	text-decoration: none;
}
table#decorative td a:hover img, table#decorative td a:active img, table#decorative td a:focus img {
	width: 94px;
	height: 94px;
	border: 3px solid #fff;
}
table#decorative td p {
	padding: 0 0 15px 0;
}
table#decorative td p a:link, table#decorative td p a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #008194;
}
table#decorative td p a:hover, table#decorative td p a:active, table#decorative td p a:focus {
	color: #dc241f;
}
/*---colours---------
background & h1 #008194 
rightCol background #cce6e9
main text #001d38
red border & red hover #dc241f
grey links: #939598
-------------------*/