@charset "iso-8859-1"; /* many thanks to skidoo_too.css */
/* ~~~~~~~~~~ FONTS FOR ALL ~~~~~~~~~~ */
html, body, textarea {font-family: verdana, arial, helvetica, sans-serif;} /* note that both html and body elements are in the selector this is because we have margins applied to the body element and the HTML's background property will show through if it is ever set. _DO_NOT_ apply a font-size value to the html or body elements, set it in #pageWrapper. */

/* ~~~~~~~~~~ STANDARD HTML ~~~~~~~~~~ */
/* margin values and font sizes for headings, and margins on paragraphs and lists are not consistent across browser platforms. to achieve a consistent look we need to explicity set these values here. it may seem an odd way to declare the margins like this but you never  know what kind of horizontal padding a browser may be using on an element, and I only want to change the vertical padding. pixels are used here, rather than ems, because I want a consistent margin on the different headings. if I use ems, 1em for an h1 element is much larger than 1em on an h6 element. I don't wnat this. salt to taste */
ul, ol, dl, p, h1, h2, h3, h4, h5, h6{margin: 0 0 1em 0; 
	padding-top: 0; 
	padding-bottom: 0;}
h1{font-size: 1.4em; 
	font-weight:bold; }
h2{font-size: 1.2em; 
	line-height: 1.5em; 
	font-weight:bold; 
	margin-bottom:0; 
	padding: 3px 12px 15px 8px; 
	border-bottom: 1px solid #000000;} /* 1em 0.2em 0.5em; */
h3{font-size: 1.2em;}
h4{font-size: 1em; 
	height: 1.6em;}
h5{font-size: .7em;}
h6{font-size: .6em;}
code{}
a, label, button{cursor: pointer;}
a, a:link, a:visited, a:active {text-decoration: underline; }
a:hover{text-decoration: none; }
caption{text-align: left; 
	font-weight: bold;}
div{margin:0; padding:0;}
input, select, textarea {margin:0; 
	font-size:1em;}
label{display:block;}
table{font-size: 100%;}
td, th{vertical-align: top;}
table{width:100%;}
form{text-align: left;
	vertical-align: top;	
	margin: 0; 
	padding: 0;}
fieldset{border-width:0; 
	margin-bottom: 2em; 
	padding:0;}
fieldset p{margin-bottom: 0.2em;}
label span {width: 11em; 
	float:left; 
	font-weight: bold;}
html, body {background-color: #CCCCCC; 
	color: #000000;} /* note that both html and body elements are in the selector this is because we have margins applied to the body element and the HTML's background property will show through if it is ever set. _DO_NOT_ apply a font-size value to the html or body elements, set it in #pageWrapper. */


/* ~~~~~~~~~~ LAYOUT DIVS ~~~~~~~~~~ */
body{margin: 0;	/* margin instead of padding for the gutterspace around the layout because IE breaks the layout when horizontal padding is applied to the body element.% over pixels for that horizontal gutterspace so that it automatically goes below 20px on low-res browsers to create more space for the content. */ font-size: 100.1%; /* resolve some font size issues in some layouts for some browsers. (in other words, i got no clue.) */}
#accessibility {position:absolute; 
	top:100px; 
	left: 0; 
	z-index:-1;}
#pageWrapper{position: relative; 
	padding-top: 140px; 
	min-width: 40em;	/* IE doens't understand this property. EMs are used so that as the font size increases, the proportional limitations (min-width) increase with it, rather than creating a middle column that can only fit 3 or 4 characters in it. */
	width:955px; 
	margin: 0 auto 0 auto;}
	#banner{
	width:933px;}
	#outerColumnsContainer{padding-left:180px; 
		border-right: 0 solid transparent;}	/* reserves space for the left and right columns. you can use either padding, margins, or borders, depending on your needs. however you can use the border method to create a background color for both left and right columns */
		#innerColumnsContainer{border: solid 0 #fff; 
			margin: 0; /* compensate for the borders because of 100% width declaration */ 
			width: 100%;	
			z-index: 1;}
				#leftColumn, #middleColumn, #rightColumn, * html #middleAndLeft{ overflow: visible;	/* fix for IE italics bug */ position: relative;	/* fix some rendering issues */}
			#middleAndLeft {float: left; 
				margin: 0 -1px 0 0; 
				width: 100%; 
				z-index: 3;}
				#middleColumn{float: right; 
					margin: 0 0 0 -1px; 
					width: 100%; 
					z-index: 5; }
					#drillbar{margin-left: -20px}
						#drillbar ul {margin:0; 
							padding:0;}					
				#leftColumn{ float: left; 
					margin: 0 1px 0 -180px; 
					width: 165px; 
					z-index: 4;}
			#rightColumn {float: right; 
				width: 0; 
				margin: 0 0 0 1px; 
				z-index: 2;} /* if we need a right col, set width=180px and outerColumnsContainer border-right=180px */
	#bannerContainer{position:absolute; 
		top:0px; 
		left:0; 
		text-align:center; 
		width:100%; 
		background:#00f; 
		z-index:10; }
		#banner{position: relative; 
			border: solid 0 transparent; 
			height: 145px;}
			#logo{position:absolute; 
				top:20px; 
				left:15px; 
				width: 395px; 
				padding: 0;}
				#logo a, #logo a:hover {display:block; 
					height: 66px; 
					width: 300px;}
			#utility{position:absolute; 
				width: 230px; 
				top:0; 
				right:0; 
				padding: 0; 
				text-align: left;}
				#utilityNav ul {margin: 2px 0 5px 0; 
					padding: 0; 
					text-align: left;
					display:none;}
					#utilityNav ul li {margin-left:0;}
				#textSize{margin: 5px 0 40px 0; display:none;}
				#siteSearch{margin: 5px 0 10px 0; 
					position: absolute; 
					top: 45px; 
					margin-top: -1em; 
					right: 20px; 
					width: 209px;}
					#siteSearch .searchBox {width: 120px;}
				#basketLinks{position: absolute; 
					top: 120px; 
					margin-top: -1em; 
					right: 120px; 
					width: 107px; 
					height: 40px;
					display:none;} /*float:left; */
				#basket{position: absolute; 
					top: 120px; 
					margin-top: -1em; 
					right: 0px; 
					width: 123px;
					display:none;} /*float:left; */
				#contactInfo{position: absolute; 
					top: 105px; 
					margin-top: -1em; 
					right: 80px; 
					height: 40px;
					color:#FFFFFF;} /*float:left; */
			#message{position:absolute; 
				padding: 0; 
				top:17px; 
				left:357px; 
				display:none;}
			#moysesMotif{position:absolute; 
				top: 200px; 
				right: 50px; 
				z-index:100;}		
#footer{position: relative; 
	clear:both; 
	margin: 5px 0 0 0; 
	left: 160px;
	border: solid 1px #fff; 
	padding: 1.0em 0.5em 0.5em 0.5em;
	width:730px;}
#footerAdmin{position: relative; 
	clear:both; 
	margin: 5px 0 0 0; 
	border: solid 1px #fff; 
	padding: 1.0em 0.5em 0.5em 0.5em;
	width:730px;}
#details{border: 1px solid #000000; 
	padding: 10px; 
	margin-bottom: 1em;}
#homeFlash{width: 700px; 
	margin-bottom: 1em;}
#noDrillBar{margin-top: 40px;}
#deliverySlogan{display:block; 
	text-align: right; 
	padding: 20px 44px 0 0; 
	margin-right: 10px;
	height: 65px; 
	font-size: 1.5em;
	display:none;}
#mainImage {text-align:center; margin-top: 20px;}

/* ~~~~~~~~~~ ID SPECIFIC STYLES ~~~~~~~~~~ */
#middleColumn ul {list-style-type:disc; 
	margin:0; 
	padding:20px;}
.inside li a{text-decoration:none;}
.inside li a:hover{ text-decoration:underline;}
#banner, #innerColumnsContainer, #footer, #footerAdmin, img, .vnav ul, .vnav ul li, .hnav {border: none;}
#utility li, #drillbar li, #footer li, #footerAdmin li { list-style:none; 
	display:inline; }
.inside li{ /*list-style:none; 
	display:inline;*/ 
	margin:0;}
	
/* ~~~~~~~~~~ USEFUL STYLES ~~~~~~~~~~ */
.example {background-color:#CCCCCC;}
.create {font-family:"Arial Black", Arial, sans-serif; color:#ccc; font-size:2.5em; padding-left: 25px;}
.author {color:#A5A5A5; font-weight: bold; margin-top: -12px;}
.valBox {border: solid 1px #FF0000; background-color:#FFD9D9; padding-left: 2px;}
.stockCol {background-color: #FBF7F7; }
.clear{clear: both; 
	padding-bottom: 1px; 
	margin-bottom: -1px; /* for Gecko-based browsers */}
.hide{ display: none !important;} /* increases the importance of this attribute with respect to cascading order. */
.inside { padding: 0 1em;} /* glitch in IE caused by vertical padding in this class, so 0 padding is set here and those blocks that need the vertical padding must be applied to the parent element. the purpose of this class is to provide	 horizontal padding without using hacks to get around IE's broken box model. so it's okay to apply vertical padding to the parent element, just not horizontal padding. */
.vertGap{margin-top: 5px;}
.normal{font-weight: normal;}/*used as an alternative to .hide in forgotten login */
.print-only{display:none;}
.errorMsg{/* colors only - see theme below*/}
.statementMsg{/* colors only - see theme below*/}
.centre{text-align: center;}
.right{text-align:right;}
.inline{display:inline;}
.pointer{cursor:pointer;}
.vertMiddle{vertical-align:middle;}
.line{border-bottom: 1px solid #777777;}
.parentSelect{overflow-y:scroll; 
	height: 200px; 
	width: 400px;}
.terms{overflow-y:scroll; 
	height: 200px; 
	width: 400px;}
.indent{margin-left: 30px;}
.floatRight{float: right; }
.floatLeft{float: left; }
.divider{border-bottom: 1px dotted #000000;}
.noPadding{padding:0;}
.box-med{width: 82%;}
.formSpacer {font-weight: normal; }
.greyout {color:#999999;}
.promo{text-transform: capitalize; font-weight:bold; color:#FFF; background-color:#FF0000; font-size:0.9em; padding: 0 5px 0 5px}
.h240 {height:240px;}
.h230 {height:230px;}
.h60{height: 60px;}

/* ~~~~~~~~~~ MENU ~~~~~~~~~~ */
#footer ul {margin: 0 0 1em 0; padding:0;}
#footerAdmin ul {margin: 0 0 1em 0; padding:0;}
#message p {margin-top: 2.7em; font-size:1.5em; color:#aaaaaa;}
.vnav{margin: 55px 0; padding: 0; border-right: 2px dotted #E59BB5; min-height:45em;}
.vnav ul, .vnav ul li{margin: 0; padding: 0; list-style-type: none; display: block;}
.vnav ul{padding-top:10px;}
.vnav ul li {}
.vnav ul li.header {font-weight:bold;
	padding: 10px 0 0 0; }
.vnav ul li, .vnav ul li a { margin: 0 0 5px 0; 
	display: block; 
	padding: 0; 
	line-height: normal;}
.vnav ul li a, .vnav ul li.menu-selected{ display: block; 
	padding: 0 5px 0 0; }
.vnav ul li a, .vnav ul li a:link, .vnav ul li a:visited, .vnav ul li a:active, .vnav ul li a:hover{ text-decoration: none; 
	cursor: pointer; font-weight: bold;}
.vnav ul li ul { margin-left: 10px; 
	margin-top: -10px !important; 
	margin-top: 0;}
.vnav h3 { margin-bottom: 0; 
	padding-bottom: 0; 
	font-size: 126%;}
* html .vnav ul li a/* hide from IE5.0/Win & IE5/Mac */ {	height: 0.01%; }
* html .vnav ul { position: relative;	/* IE needs this to fix a rendering problem */}

.vnavA{margin: 55px 0; padding: 0; border-right: 2px dotted #E59BB5; min-height:45em;}
.vnavA ul, .vnavA ul li{margin: 0; padding: 0; list-style-type: none; display: block;}
.vnavA ul{}
.vnavA ul li {}
.vnavA ul li.header {font-weight:bold;
	padding: 10px 0 0 0; }
.vnavA ul li, .vnav ul li a { margin: 0 0 5px 0; 
	display: block; 
	padding: 0; 
	line-height: normal;}
.vnavA ul li a, .vnavA ul li.menu-selected{ display: block; 
	padding: 0 5px 0 0; }
.vnavA ul li a, .vnavA ul li a:link, .vnavA ul li a:visited, .vnavA ul li a:active, .vnavA ul li a:hover{ text-decoration: none; 
	cursor: pointer;}
.vnavA ul li ul { margin-left: 10px; 
	margin-top: -10px !important; 
	margin-top: 0;}
.vnavA h3 { margin-bottom: 0; 
	padding-bottom: 0; 
	font-size: 126%;}
* html .vnavA ul li a/* hide from IE5.0/Win & IE5/Mac */ {	height: 0.01%; }
* html .vnavA ul { position: relative;	/* IE needs this to fix a rendering problem */}

#hotline{margin: 0 0 45px 5px; 
	color: #9B7B98; 
	font-weight: bold; 
	font-size: 1em; 
	font-family: tahoma, arial, helvetica, sans-serif;}
#hotline span{font-size: 1.3em;}

.hnav { border-bottom: solid 0 #fff;  
	position:absolute;
	top:131px; 
	left:190px; 
	display:block; 
	z-index: 11; 
	width: 530px; 
	margin-top:-1em;
}
.hnav ul, .hnav ul li{ display: inline; 
	list-style-type: none; 
	margin: 0; 
	padding: 0;}
.hnav, .hnav ul li a {padding-top: 3px; padding-bottom: 4px; /* need to middor vertical padding on .hnav and child anchor elements because the anchors are _not_ block elements. since they are not block elements web browsers will not expand .hnav to contain them even with the extra padding. by applying the same padding to both the parent .hnav _looks_ like its containing the child anchor elements. */}
.hnav ul li a{ margin: 0 -1px 0 0; 
	padding: 0 10px 4px 3px; /* short-hand padding attribute would overwrite top/bottom padding set in a previous rule */  
	border-left: 1px solid #fff; 
	white-space: nowrap; }
.hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover {text-decoration: none;}
.hnav ul li span.divider {display: none; }
* html .hnav ul li, * html .hnav ul li a {	width: 1%; /* IE/Mac needs this */ 
	display:inline-table; /* IE/Mac needs this */	/* \*/ 
	width: auto; 
	display: inline; /* reset above hack */}
* html .hnav, * html .hnav ul a { /* \*/ height: 0.01%; /* has Layout hack to fix render bugs in IE/Win.  IE/Mac will ignore this rule. */}
* html .HNAV {padding: 0;	/* IE5/Win will resize #hnav to fit the heights of its inline children that have vertical padding. So this incorrect case selector hack will be applied only by IE 5.x/Win */ }

#utility ul li, #utility ul li a, {	width: 1%; /* IE/Mac needs this */ 
	display:inline-table; /* IE/Mac needs this */	/* \*/
	width: auto; 
	display: inline; /* reset above hack */}
#utility li a{text-decoration:none; 
	margin-right: 0.5em;}
#utility li a:hover{ text-decoration:underline; }
#utility .smallText, #utility .mediumText, #utility .largeText{font-weight:bold; 
	margin-left:3px;}
#utility .smallText{font-size:80%; }
#utility .mediumText{font-size:110%; }
#utility .largeText{font-size:125%; }

/* ~~~~~~~~~~ BUNDLES ~~~~~~~~~~ */
.thumbnailCat{float:left; 
	margin:0 20px 10px 0; 
	height: 265px;
	width: 152px; }
.thumbnailProd{float:left; 
	margin:0 15px 10px 0; 
	width: 152px; 
	height: 280px; 
	overflow:hidden; 
	display:block;}
.recommendedProd{float:left; 
	margin:0 15px 30px 0; 
	width: 170px; 
	overflow:hidden;}
.box{border:1px solid #000000;
	padding:10px;}
.boxHeader{font-size: 1.2em; 
	line-height: 1.5em; 
	font-weight:bold; 
	margin-bottom:0; 
	padding-bottom:0; 
	border: 1px solid #000000; 
	border-bottom: none;}
.boxHeaderB{font-size: 1.2em; 
	line-height: 1.5em; 
	font-weight:bold; 
	margin-bottom:0; 
	padding-bottom:0; 
	border: 1px solid #000000; 
	border-bottom: none;}
.boxHeaderC{padding: 0.2em 1em 0 1em;}
a.linkButton{border: 1px solid #cc6666; 
	padding: 0.1em 0.5em 0.2em 0.5em; 
	font-weight: bold;
	text-decoration:none; }
.buttonA  {cursor:pointer; 
	padding:0 0.2em 0 0.2em; 
	vertical-align:middle; 
	margin: 0;}
.buttonB {background:none; 
	text-decoration:underline; 
	border:none; padding:0; 
	margin-bottom:7px;}
.thumbView{width: 71px; height: 94px; margin: 0 8px 1em 0; float: left;}
.productPics{width: 160px; margin-right: 20px; float: left; background-image:url(../pics/picBg.jpg); background-position:center; height:440px;}
.productDetails{width:350px; float:left; padding: 0 30px 0 0;}
.productDetailsB{width:150px; float:right; padding:0 10px 0 0;}
.recommended{width:450px; float:left; padding: 0 50px 0 0;}
.recommendedB{width:200px; float:right; padding:0 10px 0 0;}
.variant{float:left; width: 91px; margin-left:20px; text-align: right;}
.basketItemDetails{width:600px; float:left; padding:0; margin-bottom: 1em;}
.basketItemDetails em{width: 5em; font-style:normal; float:left;}
.table2{margin: 0; width: 100%;}
.table3 {margin: 1px; padding: 5px; width: 100%;}
.table4 {border:1px solid #999999;}
.table4 td {
	border:1px solid; 
	padding:3px 5px 3px 5px;}
.table4 td th {vertical-align:top; 
	border:1px solid; 
	padding:3px 5px 3px 5px;}
.boxB{border: 2px solid #fff; padding: 0 0 0 0.2em; margin: 0.3em 0 0.5em 0;}


/* ~~~~~~~~~~ SPECIALS ~~~~~~~~~~ */
#pageWrapper{background:#FFFFFF url("../set-to-just-pics-when-ready-/body.jpg") repeat-y; 
	border-color: #FFFFFF; 
	font-size: 69%;	/* set your default font size here. */}
#banner{ background-color:#CC0033; background:#CC0033 url("../set-to-just-pics-when-ready-/banner.jpg"); 
	color: #000000; } 
#outerColumnsContainer{border-left-color:transparent;	/* left column background color */
	border-right-color: #transparent;	/* right column background color */
	background-color: transparent;		/* set the background color for the middle column here */}
#recipientStart{border-color: #dce4c7; 
	background: #ecf4d7;}
#rightColumn .inside{font-size: 90%;/* if you apply a font size to just #rightColumn, then its width, which is specified in EMs, will also be affected. you don't want that. so apply font size changes to the .inside element which exists inside underneath all three columns */}
#rightColumn .inside .vnav {font-size: 110%;}
#footer{color: #000000;	
	text-align: left; 
	z-index: 10;
	background: url(../pics/footerIcon.jpg) no-repeat; background-position:right;}
#footerAdmin{color: #000000;	
	text-align: left; 
	z-index: 10;
	background: url(../pics/footerIcon.jpg) no-repeat; background-position:right;}
#middleColumn{}
.box{border-color:#CC0033;
	background:#F2F2F2;
	margin-bottom: 20px;}
.order {border:1px solid #CC0033;
		width: 100%;}
.order th {background: #F4D2D2; padding: 2px 5px 2px 5px; margin: 0; text-align:left;}
.order td {padding: 0 5px 0 5px; margin: 0; text-align:left;}
.minBasket {border:1px solid #dce4c7;
		width: 100%;}
.minBasket th {background: #ccd4b7; padding: 2px 5px 2px 5px; margin: 0; text-align:left; border-top: 1px solid #dce4c7; border-bottom: 1px solid #dce4c7;}
.minBasket td {background: #EDEFE4; padding: 5px 5px 5px 5px; margin: 0; text-align:left; border-bottom: 1px solid #dce4c7;}
.minBasketHeader {background: #DADFCA; }
.boxHeader{border-color: #F4D2D2; 
	background: #F4D2D2; 
	color:#000000;
	padding-left: 5px;}
.errorMsg{color:#ff0000;}
.statementMsg{color:#cc0000;}
#details{background: #ecf4d7; border-color:#dce4c7;}
a, a:link, a:visited, a:active {color:#BE2F5D;}
a:hover{color: #cc00bb;}
a.linkButton{border-color: #ffffff #000000 #000000 #ffffff; 
	background: #cae08f; }
a.linkButton:hover{color:#009900;}
.buttonA{ background: #cae08f; 
	margin-bottom: 0.5em; 
	border-width: 1px;} /* background:#86007f; */
.buttonB{color: #56004e; 
	border-bottom-color: #56004e;}
#banner a, .hnav ul li a {color: #FEE0E5; }
#banner a:visited, .hnav ul li a:visited {color: #FEE0E5; }
#banner a:hover, .hnav ul li a:hover {color: #000; 
	background: #fff;}
.hnav ul li a{border-left-color: #fff;}
#logo a, #logo a:hover {background: url("../pics/logo.gif"); width: 405px; height:112px;}
#menuFlower{background: url("../pics/menu-default.gif") no-repeat; 
	height: 200px; 
	width: 100px;}
#bannerPromo{background: url("../pics/banner-cactus.gif") no-repeat; 
	height: 98px; 
	width: 340px;}
#deliverySlogan{background: url("../pics/fairy.gif") right top no-repeat; 
	color: #acb497;}
#basketLinks{background: url("../pics/bag.gif") no-repeat 64px top ;}
.vnav ul li a, #rightColumn .vnav ul li a{text-decoration: none;}
.vnav ul li a:hover, #rightColumn .vnav ul li a:hover{ text-decoration: none; }
.boxHeaderB{border-color: #86007f; 
	background: #86007f; 
	color:#ffffff;}	
.boxHeaderC{background: #dfedc0;}

.table2{border:none; border: solid 1px #CC0033; }
.table2 th{background-color: #F4D2D2; padding: 2px 2px 2px 5px; margin: 0; text-align:left;}
.table2 td{background-color: #FBF7F7; padding: 0 5px 0 5px; margin: 0; text-align:left;}

.table3 th {background-color: #ecf4d7;}
.table3 td {background-color: #ecf4d7;}

.table4 {border-color:#CC0033}
.table4 th {background-color: #F4D2D2; padding: 2px 2px 2px 5px;}
.table4 td {border:none;}

.boxB{border-color:#dce4c7; background: #ecf4d7;}
.boxC{background: #dce4c7;}
.boxD{border:1px solid #dce4c7; 
	margin: 10px 0 10px 0; 
	padding: 5px 5px 10px 5px;}
	
.gridBg{background-color:#fff; height:205px;}
.keyLine{border: 1px solid #000000;}
	
a.activeTick{background-image:url(../pics/icon-tick.gif); width:12px; height: 12px;}
a.activeTick:hover{background-image:url(../pics/icon-cross.gif); width:12px; height: 12px;}

a.activeCross{background-image:url(../pics/icon-cross.gif); width:12px; height: 12px;}
a.activeCross:hover{background-image:url(../pics/icon-tick.gif); width:12px; height: 12px;}

a.recCross{background-image:url(../pics/icon-add.gif); width:12px; height: 12px;}
a.recCross:hover{background-image:url(../pics/icon-cross.gif); width:12px; height: 12px;}

a.recAdd{background-image:url(../pics/icon-cross.gif); width:12px; height: 12px;}
a.recAdd:hover{background-image:url(../pics/icon-add.gif); width:12px; height: 12px;}

#footerMsg{ border: 1px solid #CCD4B7; padding:5px; margin: 10px 30px; display:none;}

/*styles for tooltip box*/

.dvhdr1 {z-index: 100; background:#D6DFBD; font-family:arial; font-size:12px; font-weight:bold; border:1px solid #BECD96; padding:5px; width:250px;}
.dvbdy1 {z-index: 100; background:#FFFFFF; font-family:arial; font-size:12px; border-left:1px solid #BECD96; border-right:1px solid #BECD96; border-bottom:1px solid #BECD96; padding:5px; width:250px;}
.icon-help {padding-left:0px;}

/*-----------  */