/* CSS Document */

/* Define the button area */
.button {	position: relative;
		width: 140px;} 

.button1 {	position: absolute;
		text-align: center;
		left: 0;
		width: 140px;} 

.button2 {	position: absolute;
		left: 141px;
		text-align: center;
		width: 140px;} 

.button3 {	position: absolute;
		left: 281px;
		text-align: center;
		width: 140px;} 

.button4 {	position: absolute;
		left: 421px;
		text-align: center;
		width: 140px;} 

.button5 {	position: absolute;
		left: 561px;
		text-align: center;
		width: 140px;} 

.button6 {	position: absolute;
		left: 701px;
		text-align: center;
		width: 140px;}
			
/* Define the containing box */
.all2 {		position: relative;
		left: 5%;
		background-color: Black;
		width: 90%;
		height: 700px;}

/* Define the containing box */
.all3 {		position: relative;
		left: 5%;
		background-color: Black;
		width: 90%;
		height: 1200px;}

/* Define the containing box */
.all4 {		position: relative;
		left: 5%;
		background-color: Black;
		width: 900px;
		height: 850px;}

/* Define Page header column layout */
.header {	position: absolute;
		left: 0;
		top: 0;
		height: 200px;
		width: 350px;}

/* Define navigational row layout for top of page */
.gennav {	position: absolute;
		top: 201px;
		text-align: center;
		border-top: solid white 1px;
		border-bottom: solid white 1px;
		height: 25px;
		width: 100%;}

/* Define navigational row layout for top of page */
.gennav2 {	position: absolute;
		top: 201px;
		text-align: center;
		border-top: solid white 1px;
		border-bottom: solid white 1px;
		height: 25px;
		width: 100%;}

/* Define the navigation columns used on the index page */
.navbuttons {	position: absolute;
		Left: 5px;
		top: 250px;
		width: 150px;}

/* Define index page top Centre events area */
.events{	position: absolute;
		top: 10px;
		right: 300px;
		height:200px;}
				
/* Define index page top rh shop picture area */
.shoppic{	position: absolute;
		top: 10px;
		right: 30px;
		height:200px;}

/* Definition of the main index picture right */
.bpc {	position: absolute;
		height: 380px;
		text-align: center;
		width:	250px;
		z-index: 10;
		top: 240px;
		left: 650px;}

/* Definition of the main index picture center */
.cpc {	position: absolute;
		height: 380px;
		text-align: center;
		width:	250px;
		z-index: 10;
		top: 240px;
		left: 400px;}

/* Definition of the main index picture left */
.mpc {	position: absolute;
		height: 380px;
		text-align: center;
		width:	250px;
		z-index: 10;
		top: 240px;
		left: 150px;}

/* Definition of the etiquette page help text */
.etinf {	position: absolute;
		height: 380px;
		width:	160px;
		z-index: 10;
		top: 240px;
		Right: 300px;}

/* Definition of the main index picture on etiquette page */
.epr {		position: absolute;
		height: 360px;
		width:	240px;
		top: 310px;
		Right: 30px;}

.epl {		position: absolute;
		height: 200px;
		width:	240px;
		top: 410px;
		left: 30px;}

.eph {		position: absolute;
		height: 30px;
		width:	190px;
		top: 300px;
		left: 30px;}

/* Page header text area definition */
.phdr { 	position: absolute;
		top: 240px;
		width: 100%;
		left: 0;
		padding-left: 5px;
		padding-right: 5px;
		text-align: center;}

/* Define the footer of the page */
.mydetails{	position: absolute;
		width: 100%;
		height: 20px;
		bottom: 0;
		text-align: center;}

/* Define the footer of the page - index page only */
.mydetails2{	position: absolute;
		width: 100%;
		height: 40px;
		bottom: 0;
		text-align: center;}

/* Definition of map display area */
.maps  {	position: absolute;
		left: 0;
		top: 290px;
		height: 330px;
		width: 100%;}

/* Definition of area map area */
.map1  {	position: absolute;
		top: 10px;
		left: 10px;
		height: 319px;
		width: 50%;
		text-align: center;}

/* Definition of town map area */
.map2  {	position: absolute;
		top: 10px;
		right: 10px;
		height: 319px;
		width: 50%;
		text-align: center;}

/* Descriptor for a offers page table */
.toffer {	width:	100%;}
				
/* Definition for a contacts' table cell */
.contact {	text-align: center;
		vertical-align: top;
		width: 33%;
		border: 1px silver solid;}

/* Definition of the address details area  */
.address {	position: absolute;
		top: 280px;
		left: 15%;
		width: 70%;
		height: 300px;}

/* Definition for a contacts' table cell */
.offers {	position: reletive;
		border: 1px white solid;
		vertical-align: middle;
		width: 30%;
		height: 145px;}

/* Definition for a contacts' table cell */
.offers1 {	vertical-align: top;
		text-align: left;
		width: 50%;
		vertical-align: middle;
		float: right;
		right: 0;}

.off1pad {	width: 5px;
		float: right;}

/* Definition for a contacts' table cell */
.offers2 {	vertical-align: top;
		text-align: center;
		width: 50%;
		vertical-align: middle;
		float: left;
		left: 0;}

.off2pad {	width: 10px;
		float: left;}

/* Definition of contacts area */
.contacts {	position: absolute;
		left: 0;
		top: 285px;
		width: 100%;
		height: 350px;}

/* Definition of contacts area */
.listing {	position: absolute;
		left: 0;
		top: 420px;
		color: white;
		text-align: center;
		width: 100%;
		height: 600px;}

/* Definition of contacts area */
.listing2 {	position: absolute;
		left: 0;
		top: 380px;
		color: white;
		text-align: center;
		width: 100%;
		height: 600px;}

/* Definition of consultation form area */
.listing3 {	position: absolute;
		left: 0;
		top: 350px;
		color: white;
		text-align: center;
		width: 100%;
		height: 310px;}

/* Definition of consultation form area */
.listing4 {	position: absolute;
		left: 0;
		top: 350px;
		color: white;
		text-align: center;
		width: 100%;
		height: 400px;}

/* Definition of full size image area */
.fspic {	position: absolute;
		left: 0;
		top: 265px;
		color: white;
		text-align: center;
		width: 100%;
		height: 900px;}

/* Definition of CSS logo area */
.csslogo{	position: absolute;
		right: 0;
		bottom: 0;}

/* Definition of xhtml logo area */
.xhtmllogo{	position: absolute;
		left: 0;
		bottom: 0;}

/* *************************** Font definitions ************************ */

/* White lettering & bold */
.wb  {	color:			white;
	font-weight:		bold;}

/* Yellow lettering & bold */
.yb  {	color:			yellow;
	font-weight:		bold;}

/* Red lettering & bold */
.rb  {	color:			red;
	font-weight:		bold;}

/* Definition of an Italic style for headers etc */
.ital {	font-style: italic;
	color: white;
	text-align: center;}

/* Definition of an Italic style for descriptions etc */
.itall {font-style: italic;
	color: white;
	text-align: left;}

/* Define Descriptive paragraph layout centeraligned*/
p.cadescr { 	text-align:center;
		font-family: Arial, Helvetica, sans-serif; 
		font-weight: bold;
		font-style:italic;
		color: yellow;}

/* Small font TD description for accessories*/
.smf      {	font-size: small;
		width:	16%;}

/* Small font TD description for dresses*/
.smf2     {	font-size: small;
		width:	14%;}

/* *************************** Page body layout ************************ */
			
/* Define the Body background colour only */
body {		background-color: gray;}

/* *************************** Paragraph layout ************************ */ 

/* Define Descriptive paragraph layout */
p.descript {	text-align:	left;
		font-family: Arial, Helvetica, sans-serif; 
		font-weight: bold;
		font-style:italic;
		color: white;}

textarea{	vertical-align: top;}
			


/* Define a centre aligned paragraph */
p.centre  {	text-align: center;
		color: white;}


			
/* *************************** Image layouts ************************ */

/* Define the common image attributes */
img {		border: none;}


/* *************************** Button class mouseover layout ************************ */


/* Hyperlink attributes */
a.btn {		text-decoration:	none;
		display:		block;
		color:			white;
		font-weight:		bold;
		height:			25px;
		width:			138px;}

/* Definition of the above when the mouse pointer focuses on them */
a.btn:hover{	color:			black;
		background:		white;
		font-weight: 		bold;
		text-decoration:	none;}

/* Hyperlink attributes */
a {		text-decoration:	none;
		color:			silver;
		font-weight:		bold;}

/* Definition of the above when the mouse pointer focuses on them */
a:hover{	color:			white;
		background:		black;
		text-decoration:	none;
		font-weight: 		bold;}

/* ***************************** Table layout classes ******************************** */

/* Table */
.constbl{	width:			100%;}

/* left cell */
.conslc{	width:			30%;
		color:			white;
		font-family: 		Arial, Helvetica, sans-serif; 
		padding-right:		3px;
		text-align:		right;
		vertical-align:		top;}

/* right cell */
.consrc{	width:			70%;
		text-align:		left;
		padding-left:		3px;}

/* Left align layout cell */
.lhalgn{	text-align:		left;}