﻿/* General
-------------------------------------------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
}
img{
    border: none 0 transparent;
}
.clearer
{
	clear: both;
	display: block;
	height: 1px;
	margin-bottom: -1px;
	font-size: 1px;
	line-height: 1px;
}
.hidden
{
	position: absolute;
	left: -10000px;
}
.strike{
	text-decoration:line-through;
}
.floatLeft{
	float:left;
}
.clearLeft{
	clear:left;
}
.center{
    text-align: center;
}
.clearRight{
	clear:right;
}
.floatRight{
	float:right;
}
.goToLink{
	font-size: 90%;
	font-style: italic;
	display: block;
	background: url(/Images/newWindow-icon.gif) no-repeat 0 4px;
	padding: 0 0 0 20px;
	line-height: 16px;
	margin: 0;
	float: left;
}
input.Qty{
	width:25px;
	text-align: center;
}
.Alert,
.SmallAlert{
    color: #FF0000;
}
.SmallAlert{
    font-size: 8pt;
}
a,
a:link,
a:active,
a:visited{
    text-decoration: none;
    color: #ED008C;;
}
a:hover{
    text-decoration: underline;
}

/* CSS to position the footer
-------------------------------------------------------------------------------------*/
html{
	height: 100%;
}
body{
	font-family: Arial, Helvetica, sans-serif;
	height: 100%;
	background: #fff url(/Img/body_bg.gif) repeat-y top center;
/*	color: #ED008C;*/
	color: #000;
}
form{
    height: 100%;
}
* html form{
    height: 92%;
}
#nonFooter{
	position: relative;
	min-height: 100%;
	padding-bottom: 20px;
}

* html #nonFooter{
	height: 100%;
}
#page{
	width: 765px;
	margin: 0 auto;
	min-height: 100%;
	text-align: left;
	padding-left: 14px;
}

* html #page{
	height: 100%;
}
#footer{
	position: relative;
	height: 1.5em;
	width: 765px;
	margin: -2.5em auto 0 auto;
}
* html #footer{
	height: 1.5em;
	margin: 0 auto 0 auto;
}
/* Headers
-------------------------------------------------------------------------------------*/
h1{
  font-size: 120%;  
}
h2{
  font-size: 110%;  
}
h3{
  font-size: 100%;  
}
h4{
  font-size: 90%;  
}
/* Header
-------------------------------------------------------------------------------------*/
#header{
	height: 85px;
}
#logo{
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 20;
	width: 310px;
	height: 62px;
	overflow: hidden;
	margin-top: 0;
}

#logo a{
	display: block;
	height: 62px;
	overflow: hidden;
	color: #FFFFFF;
	font-size: 150%;
	line-height: 62px;
}

#logo a:hover{
	cursor: hand;
	c\ursor: pointer;
}

#logo span.replacement{
	display: none;
	position: absolute;
	top: 0;
	width: 310px;
	height: 62px;
	background-repeat: no-repeat;
}

* h\tml #logo span.replacement{
	display: block;
	z-index: 30;
	background-image: url(/img/Logo.gif);
}

#logo a span.replacement{
	display: block;
	z-index: 35;
	background-image: url(/img/Logo.gif);
}

#logo span.linkText{
	position: relative;
	z-index: 25;
}

#menu{
	position: absolute;
	z-index: 10;
	top: 1em;
	right:0;
	list-style: none;
	border-bottom: 1px solid #FABFE2;
	padding: 5px 10px 5px 0;
}

#menu li{
	float:left;
	border-left: 1px solid #ccc;
	padding: 0 10px;
}

#menu li.first{
	border: 0 none transparent;
}

#menu a{
	display: block;
	color: #333;
	font-size: 70%;
}

#menu a:hover{
	cursor: hand;
	c\ursor: pointer;
}
#descrete{
	position: absolute;
	z-index: 10;
	top: 3.5em;
	right:0;
	height: 1.5ems;
	color: #999;
	font-weight: bold;
	font-size: 70%;
	padding: 5px 80px 0 0;
}
/* Left Menu
-------------------------------------------------------------------------------------*/
#leftMenu{
	float: left;
	width: 180px;
	border-bottom: 10px solid #ED008C;
	background: url(/img/lmbgsmall.gif) repeat-y 0 5px;
}
* html #leftMenu{
	overflow:hidden;
}
#lmContainer{
	background: url(/img/lmbg.gif) no-repeat 0 0;
	padding: 25px 15px 10px 15px;
}
/* Login Form */
	#lmLogin{
		background: url(/img/loginbg.gif) no-repeat top center;
		height: 101px;
		width: 151px;
	}
	#lmLogin h2{
		font-size: 75%;
		padding: 5px 5px 2px 5px;
	}
	#lmLogin p{
		font-size: 75%;
		padding: 5px 5px 2px 5px;
	}
	#lmLogin label{
		font-size: 80%;
		padding: 5px;
		clear: both;
		width: 140px;
		display: block;
		text-align: right;
	}
	#lmLogin label input.lgnInput{
		width: 70px;
		float: right;
		height: 12px;
		line-height: 12px;
		font-size: .75em;
	}
	#lmLogin .btnLogin{
		padding: 2px 5px 0 50px;
	}
	
	* html #lmLogin .btnLogin{
		padding: 0 5px 0 50px;
	}
	
/* Best Sellers */
	#lmBestSellers{
	}
	#lmBestSellers h2{
		position: relative;
		top: 10px;
		z-index: 20;
		width: 108px;
		height: 35px;
		overflow: hidden;
		margin-top: 0;
		font-size: 50%;
	}
	
	#lmBestSellers h2 a{
		display: block;
		height: 17px;
		overflow: hidden;
		color: #FFFFFF;
		font-size: 150%;
		line-height: 17px;
	}
	
	#lmBestSellers h2 a:hover{
		cursor: hand;
		c\ursor: pointer;
	}
	
	#lmBestSellers h2 span.replacement{
		display: none;
		position: absolute;
		top: 0;
		width: 108px;
		height: 17px;
		background-repeat: no-repeat;
	}
	
	* h\tml #lmBestSellers h2 span.replacement{
		display: block;
		z-index: 30;
		background-image: url(/img/BestSellers.gif);
	}
	
	#lmBestSellers h2 a span.replacement{
		display: block;
		z-index: 35;
		background-image: url(/img/BestSellers.gif);
	}
	
	#lmBestSellers h2 span.linkText{
		position: relative;
		z-index: 25;
	}
	#ulBestSellers{
		margin: 0 0 10px 0;
		font-size: 75%;
		width: 140px;
        list-style: none;
    }
    #lmBestSellers #ulBestSellers li{
        background: url(/images/HeartPinkBG.gif) no-repeat 0 4px;
        padding: 2px 0 2px 20px;
    }

/* Special Offers */
	#lmSpecialOffers{
    }
	#lmSpecialOffers h2{
		position: relative;
		top: 10px;
		z-index: 20;
		width: 140px;
		height: 50px;
		overflow: hidden;
		margin-top: 0;
		font-size: 50%;
	}
	
	#lmSpecialOffers h2 a{
		display: block;
		height: 60px;
		overflow: hidden;
		color: #FFFFFF;
		font-size: 150%;
		line-height: 50px;
	}
	
	#lmSpecialOffers h2 a:hover{
		cursor: hand;
		c\ursor: pointer;
	}
	
	#lmSpecialOffers h2 span.replacement{
		display: none;
		position: absolute;
		top: 0;
		width: 140px;
		height: 50px;
		background-repeat: no-repeat;
	}
	
	* h\tml #lmSpecialOffers h2 span.replacement{
		display: block;
		z-index: 30;
		background-image: url(/img/SpecialOffers.gif);
	}
	
	#lmSpecialOffers h2 a span.replacement{
		display: block;
		z-index: 35;
		background-image: url(/img/SpecialOffers.gif);
	}
	
	#lmSpecialOffers h2 span.linkText{
		position: relative;
		z-index: 25;
	}
	#lmSpecialOffers p.lmsoLink{
		font-size: 80%;
		margin-top: 10px;
		text-align: right;
    }
	.lmsoProduct{
		border-bottom: 1px dotted #ccc;
		padding: 10px 0;
		font-size: 70%;
		clear: both;
		height: 60px;
	}
	.lmsoProduct img.lmsoProdImg{
		float: left;
		width: 60px;
		height: 60px;
		margin: 0 5px 0 0;
		clear: both;
	}
	.lmsoProduct p{
		margin: 0;
	}
	.lmsoProduct dl 
	{
	    width: 80px;
        float: left;
	}
	.lmsoProduct dl dt{
		float: left;
		font-weight: bold;
		padding-right: 5px;
	}
/* Main Content
-------------------------------------------------------------------------------------*/
#content{
	margin-left: 180px;
	margin-right: -3px;
}
/* Header / Quick Search */
	#topMenu{
		margin: 10px 3px 0 0;
		background: url(/img/MenuBG.gif) repeat-x;
		float:left;
	}
	* html #topMenu{
		margin: 10px 0 0 0;
		float:left;
	}
	#mnu{
		z-index: 10;
		list-style: none;
		height: 31px;
		width: 100%;
		clear:both;
	}
	#mnu li{
		float:left;
		padding: 0 0 0 3px;
		background: url(/img/MenuDivide.gif) no-repeat 0 0;
	}
	
	#mnu li.first{
		background: none;
		padding: 0;
	}
	
	#mnu a{
		display: block;
		color: #333;
		font-size: 70%;
		height: 31px;
		line-height: 31px;
		padding: 0 10px;
	}
	
	* html #mnu a{
		float: left;
	}
	
	#mnu a:hover{
		cursor: hand;
		c\ursor: pointer;
		background: url(/img/MenuBG.gif) repeat-x 0 -31px;
	}
	#topMenu p{
		font-weight: bold;
		color: #fff;
	}
	#orderNow{
		padding: 2px 0 2px 25px;
		background-color: #ED008C;
	}
	#quickSearch{
		float: right;
		height: 23px;
		padding: 1px 5px 1px 0;
	}
	#quickSearch p{
		font-size: 80%;
		float: left;
		padding-right: 5px;
	}
	#quickSearch .qsInputBox{
		border: 0 none #ED008C;
		width: 125px;
	}
	#quickSearch .qsSubmit{
		position: relative;
		top: 2px;
	}
/* Sidebar */
	#sidebar {
		float: right;
		width: 157px;
		margin: 0 0 0 5px;
	}
	#sidebar .box {
		margin: 0 0 20px 0;
		padding: 0;
		font-size: 90%;
		color: #182836;
		background: url(/img/ContainerMain.gif) no-repeat bottom left;
	}
	#sidebar .box h4 {
		margin: 0;
		padding: 8px 0 10px 40px;
		font-size: 110%;
		font-style: italic;
		color:#FFF;
		background: url(/img/Container-Header.gif) no-repeat top left;
	}
	#sidebar .box p {
		margin: 0;
		padding: 0 20px 20px 20px;
		line-height: 1.2em;
		font-size: 90%;
	}
/* about cart */
	#sidebar .cart h4 {
		background-image: url(/img/CartHeader.gif);
	}
	#sidebar .cart ul {
		font-size: 70%;
		margin: 0 0 5px 25px;
		padding: 0 0 5px 0;
	}
	#sidebar .cart ul li{
		padding: 2px 0 2px 0;
    }
    #sidebar .cart .CartBtn{
        position: relative;
        left: 90px;
        top: -1px;
    }
/* about news */
	#sidebar .news h4 {
		background-image: url(/img/NewsLetterHead.gif);
	}
    #sidebar .news p{
        padding: 0 10px;
    }
    #sidebar .news .MailingListBtn{
        position: relative;
        left: 80px;
        top: -1px;
    }
    #sidebar .news .MailingListBox input{
        width: 100%;
    }
    #sidebar .news #MailingListFormName,
    #sidebar .news #MailingListFormEmail{
        font-weight:bold;
        margin-top: 10px;
    }

/* about store */
	#sidebar .store h4 {
		background-image: url(/img/MapHeader.gif);
		padding: 8px 0 10px 32px;
	}
	#sidebar .store img {
		border: 1px solid #ccc;
		margin: 3px 10px 10px 8px;
	}
/* contentMain */
/*
	#contentMain{
		padding: 75px 10px 10px 10px;
	}
*/
	* html #contentMain{
		padding: 10px;
		width: 95%;
	}
	#contentMain p{
		font-size: 80%;
	}
/* breadcrumbs */
    .breadcrumbs{
        font-size: 80%;
        margin-bottom: 10px;
    }
/* Footer
-------------------------------------------------------------------------------------*/
	#footer .clearer{ 
		border-top: 1px dashed #ccc;
	}
/* Credit cards */
	#ftrCards{
		list-style: none;
		padding: 5px 5px 5px 0;
	}
	
	#ftrCards li{
		float:left;
		padding: 0 2px;
	}
	#ftrLinks{
		float: right;
		list-style: none;
	}
	
	#ftrLinks li{
		float:left;
		border-left: 1px solid #ccc;
		padding: 0 10px;
	}
	
	#ftrLinks li.first{
		border: 0 none transparent;
	}
	
	#ftrLinks a{
		display: block;
		color: #333;
		font-size: 70%;
	}
	
	#ftrLinks a:hover{
		cursor: hand;
		c\ursor: pointer;
	}
/* Modal Styles
-------------------------------------------------------------------------------------*/
#popupMask 
{
	position: absolute;
	z-index: 200;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: .4;
	filter: alpha(opacity=40);
	/* this hack is so it works in IE
	 * I find setting the color in the css gives me more flexibility 
	 * than the PNG solution.
	 */
	background-color:transparent !important;
	background-color: #333333;
	/* this hack is for opera support
	 * you can uncomment the background-image if you don't care about opera.
	 * this gives you the flexibility to use any bg color that you want, instead of the png
	 */
	background-image/**/: url("/Utility/Modal/maskBG.png") !important; /*For browsers Moz, Opera, etc.*/
	background-image:none;
	background-repeat: repeat;
	display:none;
}

#popupContainer 
{
	position: absolute;
	z-index: 201;
	top: 0px;
	left: 0px;
	display:none;
	padding: 0px;
}

#popupInner 
{
	border-style: solid;
	border-width: 1px;
	border-color: #888888;
	border-right-width: 3px;
	border-right-color: #888888;
	border-bottom-width: 3px;
	border-bottom-color: #888888;
	background-color: #eeeeee;
}

#popupFrame 
{
	margin: 0px;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 202;
}

#popupTitleBar 
{
	font-family: Tahoma, Arial, Helvetica;
	height: 1.3em;
	padding: 5px;
	padding-bottom: 7px;
	border-style: solid;
	border-width: 0px;
	border-color: #888888;
	border-bottom-width: 1px;
	position: relative;
	z-index: 203;

	border-color: #cccccc;
	background-color: #e2eecd;
	color: #698d73;
	font-weight: bold;
	margin: 0px;
}

#popupTitle 
{
	float:left;
	font-size: 1.1em;
	color: #698d73;
}

#popupControls 
{
	float: right;
	cursor: pointer;
	cursor: pointer;
}
/* ContentParts
-------------------------------------------------------------------------------------*/
.CommonContentPartBorderOff
{
	padding: 1px;
}

.CommonContentPartBorderOn
{
	border-style: dashed;
	border-width: 1px;
	border-color: #999999;
	background-color: #efefef;
}

.CommonInlineEditOn
{
	background-color: #efefef;
}

.CommonInlineEditOff
{
	padding: 0px;
}
/* Cart
-------------------------------------------------------------------------------------*/
.cartTable{
    font-size: 80%;
}
.cartTable .hitem{
    background-color: #FABFE2;
}
.cartTable .hitem th{
    padding: 3px 0;
}
.cartTable .aitem{
    background-color: #FEF3FA;
}
.cartTable .item td,
.cartTable .aitem td{
    padding: 3px 0;
}
/*.btnAddToCart*/
/* FAQ
-------------------------------------------------------------------------------------*/
#faqItems{
    list-style: none;
    margin: 10px;
}
#faqItems li{
    background: url(/images/HeartWhiteBG.gif) no-repeat 0 4px;
    padding: 2px 0 2px 20px;
}
#SiteMap ul{
    margin: 0 0 0 20px;
}