/** TITLES */

#title1 { background: url(images/homepage12.gif) no-repeat left top; }
#title2 { background: url(images/homepage13.gif) no-repeat left top; }
#title3 { background: url(images/subpage1_01.gif) no-repeat left top; }
#title4 { background: url(images/subpage2_01.gif) no-repeat left top; }

.title {
	height: 15px;
	margin-bottom: 20px;
}

.title b {
	position: absolute;
	left: -10000px;
}

/** BASIC */

html, body {
/**	height: 100%; */
		/** color: #000000; **/
	/** background: #FFFFFF; **/
	background-color: #FFFFFF;
	
	/** Green borders **/
	/** background-color: #FFFFD3; **/
	background-image: url("http://www.lanapura.com/images/page_border.gif");
	
	/** Pink borders 
	background-color: #ECFFBF;
	background-image: url("http://www.lanapura.com/images/page_border3.gif"); **/
	
	/** background-color: #ECECC6;   /** used for coloured border */
	background-repeat: repeat-y;
	background-attachment: scroll;
	background-position: center top;
}

.text1 {
	margin-bottom: .5em;
}

.style41 {
	color: #FF0066;
	/**font-weight: bold;*/
	font-size: 14px;
}

.style42 {
	color: #E0219E;
	font-weight: bold;
	font-size: 14px;
}

/** Wrapper */
#wrapper {
	width: 800px;
	margin: 0 auto 0;
	text-align: left;
	background: #ffffff;
	height: auto;
	/** padding: 40px; /** added to frame page  *
	border-left:2px solid #C9FFAD; /** added to frame page - this works *
	/** CCFF33  B3D600  DFFF3D  FFADF1  C9FFAD *
	border-right:2px solid #C9FFAD; ** added to frame page - this works */
	/** border-right:1px solid #B8F500; /** added to frame page - this works */
	border-left:25px solid #FFFFFF; /* added for use with coloured borders */
	border-right:25px solid #FFFFFF; /* added for use with coloured borders */
}

/** HEADER */
#header {
float: left;
	width: 800px;
	height: auto;
	background: #ffffff;
	/**margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;*/
}

#logo {
	float: left;
	width: 500px;
	height: 140px;
}

#header-menu {
	float: left;
	margin-top: 34px;
}

#header-menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}


#header-menu li {
	display: inline;
}

#header-menu a {
	display: block;
	float: left;
	width: 65px;
	padding-left: 15px;
}

#header-menu1 { background: url(images/homepage03.gif) no-repeat left center; }
#header-menu2 { background: url(images/homepage04.gif) no-repeat left center; }

#info {
	/**clear: both;*/
	float:left;
	width: 800px;
	/**margin: 0px auto;
	padding-bottom: 15px;*/
	background: #ffffff;
}

#splash {
	width: 640px;
	height: 120px;
	background: url(images/homepage11.gif) no-repeat left bottom;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 16px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
}

/** Banner */
#banner {
	width: 660px;
	height: 110px;
	margin: 0px auto;
	clear: both;
}

/** Search Layout */
#search {
	width: 160px;
	/**height: 33px;*/
	height: 22px;
	margin: 10px 0px 0px 0px;
	float:right;
}

* html #search {
	height: 22px;
	he\ight: 21px;
}

#search form {
	height: 22px;
	he\ight: 21px;
}

input.search {
	height: auto;
	font-family: tahoma;
	font-size: 12px;
}

input.searchbutton {
	height: auto;
	padding-bottom: 10px;
}

#freedeliv {
	width: 160px;
	height: 95px;
	margin: 10px 0px 0px 0px;
	float:right;
}

/** Cart Menu */
#cartmenu {width:800px; height:20px; float:right; font-family:arial, sans-serif;}
#cartmenu ul {padding:0; margin:0; list-style-type:none;}
#cartmenu ul li {float:right; font-size:12px; color:#999; margin:0 7px 0 0; line-height:20px;}
#cartmenu ul li a, #cartmenu ul li a:visited {font-size:12px; color:#6E6E6E; text-decoration:none;}
#cartmenu ul li a:hover {color:#E0219E; text-decoration:underline;}

p.giftvoucher {
	float:left;
	font-size: 12px;
	line-height: 20px;
	font-family: tahoma, verdana, arial,sans-serif;
	font-weight: bold;
}
p.giftvoucher a{
	color:#E0219E;
}
p.giftvoucher a:hover{
	color:#E0219E;
	text-decoration:underline;
}

/** Spacer */
div.spacer {
  clear: both;
}
/** Full Width Spacer */
div.fullwidthspacer {
  width: 800px;
  clear: both;
}

/** CONTENT */
#content {
	float: left;
	width: 800px;
	margin: 0px auto;
	height: auto;
}

.centeredImage {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
}


/** Page and Text divider image */
.page_divider img {
	float: right;
	padding: 0px;
}

/** Gift Voucher Container properties replacing  allfeatured class*/
.giftvoucherbox {
	width: 800px;
}

.giftvoucherbox h1 {
	margin:0;
	font-size:1.2em;
	padding:0 10px 5px 10px;
	/** border-bottom:1px solid #959596; */
	border-bottom:1px solid #fff;
}

.giftvoucherbox h1.main {
	font-size: 20px;
	color: #FF0066;
}

.giftvoucherbox p {
	margin: 0; 
	padding: 5px 10px; 
	font-family: tahoma, verdana, arial,sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
}

/** Featured Product Container properties */
.allfeatured {
	width: 800px;
}

.pfeatured h1 {
	margin:0;
	font-size:1.2em;
	padding:0 10px 5px 10px;
	border-bottom:1px solid #C3FF5C;
}

.allfeatured h1 {
	margin:0;
	font-size:1.2em;
	padding:0 10px 5px 10px;
	/** border-bottom:1px solid #959596; */
	border-bottom:1px solid #fff;
}

.allfeatured h1.main {
	font-size: 20px;
	color: #FF0066;
}

.pfeatured p {
	margin:0; 
	padding:5px 10px; 
	font-size:10px;
}

.allfeatured p {
	margin:0; 
	padding:5px 10px; 
	font-size:10px;
}

.pfeatured img {
	float: left;
	padding: 10px;
}

.pfeatured {
	background: transparent;
	width:212px;
	float:left;
	margin:0 3px;
}

.boxmaintext p {
	font-size:12px;
}

/** Cat Include Yarn Detail Table properties */
.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */ 

#yarndetails{
	width: 660px;
	height: auto;
}

#leftdetailcol{
	width: 145px; 
	float: left; 
	/** position: relative; */ 
	font-weight: bold;
	color: #6e6e6e;
/**  background-color:#FFFFFF;  */
}
 
#rightdetailcol{
/** 	background-color: #FFFFFF;   */
	float: right; 
	display: inline; 
	/** position: relative; */
	width: 510px;
	color: #6e6e6e;
}

 /* *** Float containers fix  */ 
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

/** Category Title Box properties */
#catbox h1, #catbox h2, #catbox p {margin:0 10px; letter-spacing:1px; padding:0;}
#catbox h1 {font-size:2.5em; font-weight:normal; line-height: 200%; color:#E0219E;}
#catbox h2 {font-size:2em;color:#E0219E; border:0;}
#catbox p {padding-bottom:0.5em;}
#catbox h2 {padding-top:0.5em;}
#catbox {background:transparent; margin:5px 1px 5px 1px;}

.cboxtop, .cboxbottom {display:block; background:transparent; font-size:1px;}
.cb1, .cb2, .cb3, .cb4 {display:block; overflow:hidden;}
.cb1, .cb2, .cb3 {height:1px;}
.cb2, .cb3, .cb4 {background:#FCE9F5; border-left:1px solid #EF8FCE; border-right:1px solid #EF8FCE;}
.cb1 {margin:0 5px; background:#EF8FCE;}
.cb2 {margin:0 3px; border-width:0 2px;}
.cb3 {margin:0 2px;}
.cb4 {height:2px; margin:0 1px;}

.catboxcontent {display:block; background:#FCE9F5; border:0 solid #EF8FCE; border-width:0 1px;} 

/** Featured Product Box properties */
.fboxtop, .fboxbottom {
	display:block;
	background:transparent;
	font-size:1px;
}
.fbox1, .fbox2, .fbox3, .fbox4 {
	display:block;
	overflow:hidden;
}
.fbox1, .fbox2, .fbox3 {
	height:1px;
}
.fbox2, .fbox3, .fbox4 {
	background:#fff;
	border-left:1px solid #C3FF5C;
	border-right:1px solid #C3FF5C;
}
.fbox1 {
	margin:0 5px;
	background:#C3FF5C;
}
.fbox2 {
	margin:0 3px;
	border-width:0 2px;
}
.fbox3 {
	margin:0 2px;
}
.fbox4 {
	height:2px;
	margin:0 1px;
}

.fboxcontent {
	display:block;
	border:0 solid #C3FF5C;
	border-width:0 1px;
	height:auto;
	color:#6e6e6e;/** added for text color */
}
* html .fboxcontent {
	height:1px;
}

.color_fbox_title {
/** background:#999933;
color:#fff; */
background:#fff;
color:#E0219E;
}
.color_leftbox {
/** background:#CC33FF; */
background:#75BA00;
color:#FFF;
}
.color_centrebox {
/** background:#FF33CC; */
background:#75BA00;
color:#fff;
}
.color_rightbox {
/** background:#FF3366; */
background:#75BA00;
color:#FFF;
}

.clear {clear:both;}

/** Events Calendar Styling **/
#calendar {
	width: 660px;
	margin: 0px auto;
	height: auto;
}

/** Center the Normal Calendar on the page **/
table.mainTable {
	margin-left:auto;
	margin-right:auto;
}

/** Center the Normal Calendar Nav Bar on the page **/
table.navTable {
	margin-left:auto;
	margin-right:auto;
}

/** Store Page Layout Div - IMPORTANT */
#storepage {
	float: left;
	width: 798px;
	height: auto;
	margin: 0px auto;
}

/** Product Detail GALLERY Styling **/
#gallery {width:650px; height:655px; padding:5px; border:1px solid #333; background: #FFFFFF; position:relative; }
#gallery b.default {position:absolute; left:10px; top:10px; width:465px; height:650px; text-align:left;}
#gallery b.default img {display:block; margin:0 auto 10px auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery b.default span {display:block; color:#613000; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}

#gallery ul {list-style:none; padding:0; margin:0; width:175px; position:relative; float:right;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000; border-color:#eee #555 #333 #ddd;}
#gallery ul li a span {display:none;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background:#D6FFAD;}
#gallery ul li a:hover b {position:absolute; left:-465px; top:0; width:465px; height:650px; text-align:left; background:#FFFFFF; z-index:20;}
#gallery ul li a:hover span {display:block; color:#613000; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:hover img {margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}

#gallery ul li a:active, #gallery ul li a:focus {white-space:normal; border-color:#555 #ddd #eee #333; background:#D6FFAD;}
#gallery ul li a:active b, #gallery ul li a:focus b {position:absolute; left:-465px; top:0; width:465px; height:650px; text-align:left; background:#FFFFFF; z-index:10;}
#gallery ul li a:active span, #gallery ul li a:focus span {display:block; color:#613000; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:active img, #gallery ul li a:focus img{margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}


/** or try this for the table in the content * NEED TO CHECK THIS STYLE IS NEEDED *
/* style the table so that it takes no part in the layout - required for IE to work *
#content table {position:absolute; top:0; left:0;} */
#content table {
	/*position:absolute;*/
	float: none;
	width: 100%; /** made 100% to make store tables width of site page **/
	height: auto;
	/*top:0;
	left:0;*/
} 

st {clear:both; border:0; height:1px; color:#888; background-color:#888;}
#productcolour {position: relative; width:100%; height: auto; float:left; text-align:justify;}
.grey {color:#888;}

#right {
	float: right;
	width: 330px;
	height: auto;
}

#left {
	float: left;
	width: 380px;
	padding: 30px 0px 10px 0px; /** 10px so that text that follows is not pushed down - was 30 30 10 30 **/
	text-align: left;
}

.help {
	float: left;
	width: 93%;
	height: auto;
	background: #FFE5F9;
	/** margin:0 0px 0 0px; **/
	padding: 20px 20px 10px 20px; /** 10px so that text that follows is not pushed down - was 30 30 10 30 **/
	text-align: left;
}

.helpimg {
	float: none;
	margin: 20px auto;
	clear: both;
}

.shop_right {
	float: right;
	width: 400px;
	height: 800px;
	background: #FFE5F9;
	padding: 20px 0px 10px 0px; /** 10px so that text that follows is not pushed down - was 30 30 10 30 **/
}

.shop_left {
	float: left;
	width: 400px;
	height: 800px;
	background: #FFE5F9;
	/** margin:0 0px 0 0px; **/
	padding: 20px 0px 10px 0px; /** 10px so that text that follows is not pushed down - was 30 30 10 30 **/
	text-align: left;
}

.shop_left p {
	margin:0; 
	padding:5px 10px; 
}

#leftcolumn{
	width: 130px; 
	float: left;  
	font-weight: bold;
	color: #6e6e6e;
}
 
#rightcolumn{
	float: right; 
	display: inline; 
	width: 270px;
	color: #6e6e6e;
}

#lowerright {
	float: right;
	width: 380px;
	text-align: left;
	height: auto;
}

#lowerleft {
	float: left;
	width: 380px;
	text-align: left;
	height: auto;
}

/** COLOUR BOX properties */
div.box {
	height: 200px;
	width: 250px;
	border: 1px solid black;
}

.floatstop {
	clear:both;
}

/** FOOTER */
#footer {
	clear: both;
	width: 660px;
	height: auto;
	margin: 0px auto;
	/** background: url(images/homepage11.gif) no-repeat left bottom; */
}

#footer_bar {
	height: 25px;
	width: 100%;
	padding-top: 4px;
	text-align: center;
	font-size: 14px;
	color: #ffffff;
	background-color: #737373;
	margin: 5px 0px 10px 0px;
}

#links {
	float: left;
	padding: 15px 0px 0px 20px;
}

#copyright {
	float: right;
	padding: 15px 20px 0px 0px;
}

#bottom_image {
	padding: 0px 50px 0px 110px;
}

div.logos {
	height: 50px;
	width: 660px;
}

div.logos img{
	float: left;
	padding-right: 9px;
}


/** ENQUIRY FORM STYLES **/
form.enquiry { 
	width: 50%;
	margin:0; 
	padding:0; 
} 
fieldset {
	font: normal 12px 'Lucida Grande', Verdana, sans-serif;
	margin:0 0 10px 0; 
	padding:5px; 
	border:1px solid #333;
}
fieldset p{
	margin:3px 0 2px 0; 
	padding:5px; 
	border:1px solid #666;
	background: #cccc66
}
legend {
	background-color: #DDDDDD; 
	margin: 0; 
	padding:5px; 
	border-style:solid; 
	border-width:1px; 
	border-color:#FFF #AAA #666 #FFF; 
}

/**legend { 
	background-color: #DDDDDD; 
	margin: 0; 
	padding:5px; 
	border-style:solid; 
	border-width:1px; 
	border-color:#FFF #AAA #666 #FFF; 
 }**/
label {
	font-weight:bold; 
} 
#name, #email, #message { 
	width:98%; 
}
#subject {
}
textarea {
	margin: 5px 0 5px 0;
	border:3px double #333; 
}
select {
	margin: 5px 0 5px 0;
}

form.enquiry #submitbutton, form.enquiry #resetbutton { background:#999933; border-bottom:1px solid #cccc66; border-left:1px solid #e2dfa8; border-top:1px solid #e2dfa8; border-right:1px solid #cccc66; color:#fff; padding-right:0.5em; cursor:pointer; width:140px; margin-left:12px;}

form.enquiry #submitbutton:hover, form.enquiry #resetbutton:hover {background:#F76541; border-bottom:1px solid #4A0018; border-right:1px solid #4A0018;  color:#fff; border-top:1px solid #cc0033; border-left: 1px solid #cc0033;} 

/** form#enquiryform #submitbutton { background:#666; border-bottom:1px solid #333; border-left:1px solid #999; border-top:1px solid #999; border-right:1px solid #333; color:#fff; padding-right:0.5em; cursor:pointer; width:205px; margin-left:12px;}

form#enquiryform #submitbutton:hover {background:#990033; border-bottom:1px solid #4A0018; border-right:1px solid #4A0018;  color:#fff; border-top:1px solid #cc0033; border-left: 1px solid #cc0033;} **/



/** ECOMMERCE TEMPLATES STYLES **/

/** CATEGORY STYLES - Titles and text left aligned and without an image border **/
/** Category Name alignment **/
P.catname {
	margin-top: 0px;
	margin-bottom: 4px;
	vertical-align:top;
	text-align: left;
}

/** Category Description alignment **/
P.catdesc {
	margin-top: 0px;
	margin-bottom: 4px;
	vertical-align:top;
}

/** Category Image properties **/
IMG.catimage {
	border-width:0px; /** 1px for a small image border, 0px for no border , had used 3px**/
	/** border-thickness: 1px; **/
	border-color: #a7a7a7;
	/**border-style: inset;**/
	vertical-align:top;
}

/** Category Image alignment **/
TD.catimage {
	vertical-align:top;
}

/** Category Name - alignment **/
TD.catname {
	vertical-align:top;
	text-align: left;
}
/** Catname active link - added **/
TD.catname a {
	color: #E0219E;  /** the colour of the active category name link on the products page - I hope**/
}

/** Catname active hover link - added**/
TD.catname a:hover {
	color: #E0219E;  /** the colour of the hover category name link on the products page - I hope**/
	text-decoration:underline;
}

/** Top Category Navigation Path alignment **/
TD.catnavigation {
	vertical-align: middle;
	text-align: left;
}

/** Other Category Style Classes **
P.navdesc: The properties of the text "View all products in all categories".
div.catdiscounts: The properties of the discounts text on the category pages.  **/

/** TOP PRODUCT NAVIGATION STYLES - text shows as mauve with Verdana 11px font **/
td.prodnavigation {
	font-size: 11px;
	font-family: Verdana;
	color: #ff3333; /** 663399; **/
}

P.prodnavigation {
	font-size: 11px;
	font-family: Verdana;
	color: #ff3333; /** the colour of the current page in the breadcrumbs - RED **/
}

/** Style the prodnav links **/
P.prodnavigation a {
	font-size: 11px;
	font-family: Verdana;
	color: #8547c2; /** the colour of the active links in the breadcrumbs - PURPLE **/
	text-decoration: none;
}

/** TABLE BACKGROUND STYLE CLASSES - for table and cell background properties in the files search / tracking / order status / checkout via CSS classes. **/
/** Table Cell Border Colour **/
TABLE.cobtbl{
	background-color: #999933;
}

/** Table Cell Highlight Colour **/
TD.cobhl{
	background-color: #D0FF80;
}

/** Table Cell Lowlight Colour **/
TD.cobll{
	background-color: #E3FFB3;
	color : #666666;
}

/** PAGE NUMBER STYLES **
P.pagenums {
	font-size: 12px;
	font-family : Verdana;
}

/** change the appearance of the page number currently being viewed **/
SPAN.currpage {
	color: #FF0000; /* Red */
	font-weight: bold;
}

/** try and force products table to stay at max width for IE 
table.products {
	width: 658px;
} **/

/** try and get product info centered - esp quant box and buy button  **/
div.product {
	text-align: center;
	/* width: 100%; */
}

/**div.product input {
	text-align: right;
}**/

/** PRODUCT DETAIL PAGE STYLE CLASSES **
div.detailid: The properties of the text "Product ID"
div.detailname: The properties of the product name on the product detail page
div.detaildiscounts: The properties of the discounts text for the product detail page
td.detailimage: The alignment of the product image on the product detail page **/
td.detailimage {
    vertical-align: top;
}

.detailimage {
	text-align:center;
}

.detailname {
	font-size: 14px;
	font-family: Verdana, sans-serif;
	color: #E0219E;
}

span.extraimage{
	color: #E0219E;
	font-size: 16px;
	font-weight: bold;
	margin: 30px 20px 0 0;
}

span.extraimagenum{
	margin: 30px 0 0 20px;
}

/** img.prodimage: The properties of the product image
/** Product Image properties **/
IMG.prodimage {
	border-width:0px; /** 1px for a small image border, 0px for no border **/
	/** border-thickness: 4px; **/
	border-color: #a7a7a7;
	vertical-align:top;
	/**border-style: outset;**/
	/** vertical-align:top; **/
}
/**
div.detaildescription: The properties of the text in the long product description
div.detailoptions: The properties of the product options on the product detail page
div.detailprice: The properties of the price on the product detail page
div.detailcurrency: The properties of the alternative currencies on the product detail page

/** PRODUCT PAGE STYLE CLASSES **
div.prodid: The properties of the text "Product ID"
div.prodname: The properties of the product name on the product page **/
div.prodname {
	/**font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;**/
	color: #CC33FF;  /** the colour of the product name on the products page **/
	text-decoration: none;
}

div.prodname a {
	/**font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;**/
	color: #E0219E;  /** the colour of the active product name link on the products page **/
	text-decoration: none;
}

div.prodname a:hover {
	color:#E0219E; 
	text-decoration:underline;
}

/**
div.proddiscounts: The properties of the discounts text for the product page
td.prodimage: The alignment of the product image on the product page
img.prodimage: The properties of the product image **/
/** div.proddescription: The properties of the text in the short product description **/
div.proddescription {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #800000;
	line-height: normal;
}
/** div.prodoptions: The properties of the product options on the product page **/
div.prodoptions{
	width: 125px;
	text-align: center;
	clear: both;
}

/** sets the width of the product option drop-down window **/
select.prodoption {
	width: 110px;
	/** right: 200px; **/
}

span.prodoption {
	color: #FF0000;
}

/** div.prodprice: The properties of the price on the product page **/
div.prodprice {
	/** text-align: left; **/
}

/** div.prodcurrency: The properties of the alternative currencies on the product page
/** Editing the number of items in stock message
/** Number of Items In Stock style for the Product Page **
div.prodinstock {
	font-size: 10px;
	font-family : Verdana;
	color: 666666
}
**/

/** IMG.cartimage: The properties of the image on the shopping cart page **/
IMG.cartimage {
width: 55px;
border:1px;
border-width: 1px;
border-color: #999933;
border-style: solid;
}

IMG.clearance {
float: right;
border: none;
}