html{
	background-color: #878787;	
}

body {
	margin: 0;
	padding: 0;
	background-color: #878787;
	font-family: Verdana, Helvetica, sans-serif;
	color: #666;
	text-align: center;
	font-size: 70%;
}

p {
	margin: 0;
	padding: 0.5em 0;
	line-height: 1.5em;
	font-size:13px;
}

hr {
	background-color: #FFF;
	color: #FFF;
	border: 0;
	border-top: 1px solid #CCC;
	height: 1em;
}

acronym,
abbrev { 
	border-bottom: 1px dashed #999;
	cursor: pointer;
}

caption {
	padding: 0.5em;
	font-weight: bold;
}

input, select, option, textarea {
	font-family: Verdana, Helvetica, sans-serif;
	color: #666;
	font-size: 1em;
}

input, select, textarea {
	border: 1px solid #BBB;
}

.radio {
	border: 0;
	width: auto;
}

form { 
	padding: 0; 
	margin: 0; 
	line-height: 2em;
}

label {
	float: left;
	clear: left;
	display: block;
	width: 10em;
}

a:link,
a:visited,
a:hover { text-decoration:none; }

/* LEAHY/LANGRIDGE image replacement technique - begin */
h1 {
	float: left;
	margin-top: 125px;
	padding-top: 89px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: 30px 0;
	width: 240px;
	height: 0px !important;
	height /**/: 89px;
}
/* LEAHY/LANGRIDGE image replacement technique - end */

h2 {
	font-size: 125%;
	margin: 0;
	padding: 0.75em 0;
}

h3 {
	font-size: 110%;
	margin: 0;
	padding: 0.75em 0 0.25em 0;
}

h4 {
	font-size: 100%;
	margin: 0;
	padding: 0.75em 0 0.25em 0;
}

sup {
	font-weight: normal;
}

.button {
	background-color: #878787;
	color: #FFF;
	border: 1px solid #666;
}

.alert {
	color: #F34;
	background-color: #F6F6F6;
	border: 1px dashed #F89;
	padding: 0.5em;
	margin: 1em;
}

.highlight,
a.highlight,
.highlight a,
body #content .highlight:link,
body #content .highlight:visited,
body #content .highlight:hover
 {
	background-color: #EA1C38;
	color: #FFF;
	padding: 0.2em 0.5em;
}

#shrinkwrap {
	margin: 0 auto 0 auto;
	width: 850px;
	height: 402px;
	background-color: #FFF;
	text-align: left;
	clear: both;
}

#navwrap {
	margin: 4% auto 0 auto;
	width: 850px;	
}

#content {
	margin: 0 270px 0 250px;
	padding: 12px 0;
}

#squares {
	width: 260px;
	float: right;
	padding: 1px;
	margin-top: 12px;
}

#squares div {
	float: right;
	margin: 1px;
	width: 123px;
	height: 123px;
}

#referee {
	clear: right;
	text-align:right;
	color: #FFF;
	padding-top: 4em;
}

#footer #referee a {
	white-space: pre;
	width: auto;
	color: #CCC;
}

#footer {
	text-align: left;
	color: #FFF;
	margin: 0 auto;
	width: 850px;
}

#footer a {
	display: block;
	float: right;
	text-align: right;
	font-size:13px;
	width: 13em;
	padding: 0.5em;

}

#footer a:link,
#footer a:visited,
#navwrap a:link,
#navwrap a:visited { 
	color:#FFF; 
	text-decoration: none; 
}

#footer a:hover { 
	background: #777 url(../img/footcnr_bg.gif) bottom left no-repeat;
	color: #FFF; 
	text-decoration: none;
}

.links {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.links li {
	margin: 0;
	padding: 0.75em 0;
}

.scroll {
	overflow: auto;
	height: 375px;
	width:420px;
	float:;
	border: 2px solid #E8E8E8;
	padding: 0 1em;
}

/* default styles */
h1 { background-image: url(../img/home_title.gif); }
#shrinkwrap { background: #FFF url(../img/home_bg.jpg) bottom left no-repeat; }
#square1 { background: #FFF url(../img/home_1.jpg) top left no-repeat; }
#square2 { background: #FFF url(../img/home_2.jpg) top left no-repeat; }
#square3 { background: #FFF url(../img/home_3.jpg) top left no-repeat; }
#square4 { background: #FFF url(../img/home_4.jpg) top left no-repeat; }
#square5 { background: #FFF url(../img/home_5.jpg) top left no-repeat; }
#square6 { background: #FFF url(../img/home_6.jpg) top left no-repeat; }
#content a:link,
#content a:visited { color: #333; font-size:13px; }
#content a:hover { color: #999; text-decoration:underline; }

/* groups styles */
#groups #squares { width: 130px; }
#groups #content { margin-right: 140px; }

/* homepage styles */
#homepage #content { padding-top: 100px; }

/* artpaverpol styles */
#classes h1 { background-image: url(../img/classes_title.gif); }
#classes #content { padding-top: 100px; }
#classes #shrinkwrap { background: #FFF url(../img/classes_bg.jpg) bottom left no-repeat; }
#classes #square1 { background: #FFF url(../img/classes_1.jpg) top left no-repeat; }
#classes #square2 { background: #FFF url(../img/classes_2.jpg) top left no-repeat; }
#classes #square3 { background: #FFF url(../img/classes_3.jpg) top left no-repeat; }
#classes #square4 { background: #FFF url(../img/classes_4.jpg) top left no-repeat; }
#classes #square5 { background: #FFF url(../img/classes_5.jpg) top left no-repeat; }
#classes #square6 { background: #FFF url(../img/classes_6.jpg) top left no-repeat; }
#classes #content a:link,
#classes #content a:visited { color: #333; }
#classes #content a:hover { color: #999; }

/* franchise styles */
#franchise #content { margin-right: 2em; }

/* owngroup styles */
#owngroup #content { margin-right: 2em; }

/* events styles */
#events #squares { width: 130px; }
#events #content { margin-right: 140px; }

/* about us styles */
#aboutus #squares { width: 130px; }
#aboutus #content { margin-right: 140px; }

/* contact us styles */
#contactus #squares { width: 130px; }
#contactus #content { margin-right: 140px; }

/* getaways styles */
#getaways #squares { width: 130px; }
#getaways #content { margin-right: 140px; }

/* terms of trade styles */
#terms #squares { width: 130px; }
#terms #content { margin-right: 140px; }
#terms .scroll { height: 380px; }

/* terms of trade styles */
#enquiry #squares { width: 130px; }
#enquiry #content { margin-right: 140px; }

/* copyright styles */
#copyright #squares { width: 130px; }
#copyright #content { margin-right: 140px; }

/* art classes styles */
.classinfo #content { margin-right: 2em; }
.classinfo .scroll {  }
.artclasses #squares { width: 130px; }
.artclasses #content { margin-right: 140px; }

#paverpol h1 { background-image: url(../img/paverpol_title.gif); }
#paverpol #shrinkwrap { background: #FFF url(../img/paverpol_bg.jpg) bottom left no-repeat; }
#paverpol #square1 { background: #FFF url(../img/paverpol_1.jpg) top left no-repeat; }
#paverpol #square2 { background: #FFF url(../img/paverpol_2.jpg) top left no-repeat; }
#paverpol #square3 { background: #FFF url(../img/paverpol_3.jpg) top left no-repeat; }
#paverpol #square4 { background: #FFF url(../img/paverpol_4.jpg) top left no-repeat; }
#paverpol #square5 { background: #FFF url(../img/paverpol_5.jpg) top left no-repeat; }
#paverpol #square6 { background: #FFF url(../img/paverpol_6.jpg) top left no-repeat; }
#paverpol #content a:link,
#paverpol #content a:visited { color: #333; }
#paverpol #content a:hover { color: #999; }
#paverpol .scroll { border-color: #F1E3E4; }
#paverpol #content .highlight,
#paverpol #content .highlight a,
#paverpol #content a.highlight { background-color: #944D51; color: #FFF; padding: 0.2em 0.5em; }

#natural {}

#jewellery h1 { background-image: url(../img/jewellery_title.gif); }
#jewellery #shrinkwrap { background: #FFF url(../img/jewellery_bg.jpg) bottom left no-repeat; }
#jewellery #square1 { background: #FFF url(../img/jewellery_1.jpg) top left no-repeat; }
#jewellery #square2 { background: #FFF url(../img/jewellery_2.jpg) top left no-repeat; }
#jewellery #square3 { background: #FFF url(../img/jewellery_3.jpg) top left no-repeat; }
#jewellery #square4 { background: #FFF url(../img/jewellery_4.jpg) top left no-repeat; }
#jewellery #square5 { background: #FFF url(../img/jewellery_5.jpg) top left no-repeat; }
#jewellery #square6 { background: #FFF url(../img/jewellery_6.jpg) top left no-repeat; }
#jewellery #content a:link,
#jewellery #content a:visited { color: #333; }
#jewellery #content a:hover { color: #999; }
#jewellery .scroll { border-color: #E9E9F4; }
#jewellery #content .highlight,
#jewellery #content .highlight a,
#jewellery #content a.highlight { background-color: #595987; color: #FFF; padding: 0.2em 0.5em; }

#mixedmedia h1 { background-image: url(../img/mixed_title.gif); }
#mixedmedia #shrinkwrap { background: #FFF url(../img/mixed_bg.jpg) bottom left no-repeat; }
#mixedmedia #square1 { background: #FFF url(../img/mixed_1.jpg) top left no-repeat; }
#mixedmedia #square2 { background: #FFF url(../img/mixed_2.jpg) top left no-repeat; }
#mixedmedia #square3 { background: #FFF url(../img/mixed_3.jpg) top left no-repeat; }
#mixedmedia #square4 { background: #FFF url(../img/mixed_4.jpg) top left no-repeat; }
#mixedmedia #square5 { background: #FFF url(../img/mixed_5.jpg) top left no-repeat; }
#mixedmedia #square6 { background: #FFF url(../img/mixed_6.jpg) top left no-repeat; }
#mixedmedia #content a:link,
#mixedmedia #content a:visited { color: #333; }
#mixedmedia #content a:hover { color: #999; }
#mixedmedia .scroll { border-color: #F2E7E6; }
#mixedmedia #content .highlight,
#mixedmedia #content .highlight a,
#mixedmedia #content a.highlight { background-color: #A42F1F; color: #FFF; padding: 0.2em 0.5em; }

#mosaic h1 { background-image: url(../img/mosaic_title.gif); }
#mosaic #shrinkwrap { background: #FFF url(../img/mosaic_bg.jpg) bottom left no-repeat; }
#mosaic #square1 { background: #FFF url(../img/mosaic_1.jpg) top left no-repeat; }
#mosaic #square2 { background: #FFF url(../img/mosaic_2.jpg) top left no-repeat; }
#mosaic #square3 { background: #FFF url(../img/mosaic_3.jpg) top left no-repeat; }
#mosaic #square4 { background: #FFF url(../img/mosaic_4.jpg) top left no-repeat; }
#mosaic #square5 { background: #FFF url(../img/mosaic_5.jpg) top left no-repeat; }
#mosaic #square6 { background: #FFF url(../img/mosaic_6.jpg) top left no-repeat; }
#mosaic #content a:link,
#mosaic #content a:visited { color: #333; }
#mosaic #content a:hover { color: #999; }
#mosaic .scroll { border-color: #F0D8D8; }
#mosaic #content .highlight,
#mosaic #content .highlight a,
#mosaic #content a.highlight { background-color: #BF2D2A; color: #FFF; padding: 0.2em 0.5em; }


/* HORIZONTAL FREESTYLE MENU LAYOUT - begin */

/* All <ul> tags in the menu including the first level */
.menulist, .menulist  ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul {
	display: none;
	position: absolute;
	top: 2.5em; /* I'm using ems rather than px to allow people to zoom their font */
	left: 0.2em;
	width: 15em;
	background-color: #878787;
	background-image: url(../img/nav_bg.jpg);
	background-position: top left;
	background-repeat: repeat-y;
}

/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul {
	top: 0px;
	left: 15.2em;
}

/*
 All menu items (<li> tags). 'float: left' lines them up horizontally, and they are
 positioned relatively to correctly offset submenus. Also, they have overlapping borders.
*/
.menulist li {
	float: left;
	position: relative;
	padding: 0;
	margin: 0;
	width: 15em;
	text-align: left;
}

/* Items in submenus - override float/border/margin from above, restoring default vertical style */
.menulist ul li {
	float: none;
	margin-right: 0;
	margin-bottom: -1px;
	background-image: none;
}

.menulist ul>li:last-child {
	margin-bottom: 1px;
}

/* Links inside the menu */
.menulist a {
	display: block;
	padding: 5px;
	color: #FFF;
	font-size:13px;
	text-decoration: none;
}

/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
	color: #FFF;
	background-color: #777;
	background-image: url(../img/navcnr_bg.gif);
	background-position: top right;
	background-repeat: no-repeat;
}
.menulist ul a:hover, .menulist ul a.highlighted:hover, .menulist ul a:focus {
	color: #FFF;
	background-image: none;
}

/* .menulist  a.highlighted {
	color: #FFF;
	background-color: #888;
} */

/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/
/* Only style submenu indicators within submenus. */
.menulist a .subind {
	display:  none;
}

.menulist ul a .subind {
	display:  block;
	float: right;
}

/* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */
.menulist a {
	float: left;
}

.menulist ul a {
	float: none;
}

/* \*/
.menulist a {
	float: none;
}
/* */

/* This semi-commented section exists to fix bugs in IE/Windows (the 'Holly Hack'). \*/
* html .menulist  ul li {
	float: left;
	height: 1%;
}
* html .menulist  ul a {
	height: 1%;
}
/* End Hack */

/* HORIZONTAL FREESTYLE MENU LAYOUT - end */


.data {
	border: 1px solid #CCC;
	border-collapse: collapse;
}

thead tr td {
	background-color: #666;
	color: #FFF;
}

td {
	border: 1px solid #CCC;
	padding: 0.2em 0.5em;
}

.hover tr.over td,
.hover tr:hover td {
	background-color: #8AD;
	color: #FFF;
	cursor: pointer;
}

.zebra1 td { background-color: #EEE; }
.zebra2 td { background-color: #FFF; }

.navlinks { padding:1em; }
.navlinks .back { float:left; }
.navlinks .next { float:right; }