/*
	Name: BonBon Jewellery
	Date: November 2009
	Description: Global Style Sheet
	Version: 1.0
	Coder: Enrique Ramirez
	Coder URI: http://enrique-ramirez.com
*/

/* Imports
===============================================*/
@import url("reset.css");
@import url("global-forms.css");
@import url("magento.css");

/* Global Styles
===============================================*/
body {
	background: white;
	color: #333;
	font-size: 75%; /* Base font size: 12px */
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* Headers
-----------------------------------------------*/
h2 {font-size: 1.5em}	/* 18px */
h3 {font-size: 1.333em}	/* 16px */
h4 {font-size: 1.167em}	/* 14px */
h5 {font-size: 1em}		/* 12px */
h6 {font-size: 1em}		/* 12px */

h2, h3, h4, h5, h6 {color: #848384; font-weight: normal; line-height: 1.1; margin-bottom: 10px;}
	
/* Links
-----------------------------------------------*/
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {color: #F84094; text-decoration: none;}
a:hover, a:active {text-decoration: underline;}
	
/* Paragraphs
-----------------------------------------------*/
p {margin-bottom: 1.5em;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

/* Lists
-----------------------------------------------*/
ul {
	list-style: outside disc;
	margin: 1em 0 1.5em 1.5em;
}

ol {
	list-style: outside decimal;
	margin: 1em 0 1.5em 1.5em;
}

dl {
	margin: 0 0 1.5em 0;
}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}

/* Quotes
-----------------------------------------------*/
blockquote {font-style: italic; margin-bottom: 24px; font-size: 1.3em; background: url('../images/quote.jpg') no-repeat  top left; padding-left: 36px}
cite {}

q {}

/* Tables
-----------------------------------------------*/
table {margin: .5em auto 1.5em auto; width: 98%;}
	
	/* Thead */
	thead th {padding: .5em .4em; text-align: left;}
	thead td {}

	/* Tbody */
	tbody td {padding: .5em .4em;}
	tbody th {}
	
	tbody .alt td {}
	tbody .alt th {}
	
	/* Tfoot */
	tfoot th {}
	tfoot td {}

/* Layout
===============================================*/
.contents {margin: 0 auto; width: 960px;}
.contents:after, #menu:after,
#home:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

/* Header
-----------------------------------------------*/
#header {background: url('../images/bg-header.png') repeat-x bottom;}

	/* Logo */
	#logo {float: left; margin: 10px 0 12px 0;}
	
	/* Phone */
	#header .phone {color: #e95d94; float: right; line-height: 1.1; margin: 18px 0;}
	
	/* Top Menu */
	#header .top {float: right; list-style: none; margin: 18px 0;}
	#header .top li {
		border-right: 1px solid #d8d8d8;
		float: left;
		height: 1.1em;
		line-height: 1.1;
		margin: 0 10px 0 0;
		padding: 0 10px 0 0;
	}
	
	#header .top a:link, #header .top a:visited {color: #333; text-decoration: underline;}
	#header .top a:hover, #header .top a:active {text-decoration: none;}
	
	a.account {background: url('../images/icons/ico-user.gif') no-repeat center left; padding-left: 20px;}
	
	/* Search Box */
	#search-box {
		clear: right;
		float: right;
		margin: 0 0 12px 0;
		width: 300px;
	}
	
	#search-box label {color: #F84094; float: left; margin-top: 3px;}
	#search-box input {display: inline; float: left; margin: 0 0 0 10px;}
	#search-box .text {width: 200px;}
	
	/* Menu */
	#menu {clear: both; width: 100%;}
	
	#menu ul {float: left; font-size: 1.167em; list-style: none; margin: 0;}
	#menu li {float: left; margin: 0 4px 0 0;}
	
	#menu li a:link, #menu li a:visited {
		background: #44005E;
		border-bottom: 1px solid #44005E;
		color: #fff;
		display: block;
		float: left;
		font-weight: normal;
		height: 27px;
		line-height: 27px;
		padding: 0 15px;
	}
	
	#menu li.active a:link, #menu li.active a:visited,
	#menu li.active a:hover, #menu li.active a:active {
		background: #fff;
		border: 1px solid #F2EEEE;
		border-bottom: 1px solid #fff;
		color: #F84094;
		text-decoration: none;
	}
	
	/* Basket */
	#menu .basket {
		border-bottom: 1px solid #F2EEEE;
		float: right;
		height: 27px;
		line-height: 27px;
	}
	
	#menu .basket a:link, #menu .basket a:visited {
		background: url('../images/icons/ico-cart.gif') no-repeat center left;
		color: #333;
		padding-left: 20px;
		text-decoration: underline;
	}
	#menu .basket a:hover, #menu .basket a:active {text-decoration: none;}

/* Body
-----------------------------------------------*/
#body {padding: 25px 0 60px 0;}

	/* Sidebar */
	#side {float: left; width: 230px; }
/*VF new slogan and side*/
#side p.slogan{font-family:Georgia, "Times New Roman", Times, serif; font-size: 1.7em; letter-spacing: -.03em; line-height: 1.2em; padding-left: 12px; margin-bottom: 10px}
#side p em{font-style: normal; color: #e14681}
#side a.hmlink {display: block; background-color: #f7f7f7; padding: 8px 0 8px 12px; margin-bottom: 1px; background: #f7f7f7 url('../images/side-arr.jpg') no-repeat 14px center; padding-left: 32px}
#side a.last{margin-bottom: 20px}

		/* Sidebar NEwsletter */
		#side #newsletter {
			background: #FCFCFC url('../images/bg-sidebar-module.jpg') repeat-x bottom;
			height: auto;
			margin-bottom: 20px;
			overflow: hidden;
			padding: 15px;
			width: auto;
		}
		
		#side #newsletter .text {width: 190px;}
		#side #newsletter h2 {
			background: url('../images/icons/ico-mail.gif') no-repeat top right;
			color: #333;
			font-size: 1.167em;
			padding: 15px 0 20px 0;
		}
	
	/* Content */
	#content {float: right; width: 710px;}
	#content .content {width: 500px;}
	
		/* Lists */
		#content ul {list-style: none; margin-left: 0;}
		#content ul li {
			background: url('../images/icons/ico-bullet2.gif') no-repeat 0 3px;
			padding-left: 20px;
		}

/*classes*/
.imgright{float: right; margin: 0 0 24px 24px}
.imgleft{float: left; margin: 0 24px 0 0}


/* Footer
-----------------------------------------------*/
#footer {background: url('../images/bg-footer.png') repeat-x 0 20px; padding: 0 0 50px 0;}

	/* Back to Top */
	#footer #back-top:link, #footer #back-top:visited {
		background: #010101 url('../images/bg-top.png') repeat-x;
		clear: both;
		color: #fff;
		display: block;
		height: 20px;
		line-height: 20px;
		margin: 0 0 20px 0;
		text-align: center;
		width: 60px;
	}
	#footer #back-top:hover, #footer #back-top:active {background: #000; text-decoration: none;}
	
	/* Columns */
	#footer .col {
		float: left;
		margin-bottom: 15px;
		padding: 13px 3px 0 12px;
		width: 210px;
	}
	
	#footer .col ul {list-style: none; margin: 0;}
	#footer .col li {
		background: url('../images/icons/ico-bullet.gif') no-repeat 0 5px;
		padding-left: 10px;
	}
	
	#footer a:link, #footer a:visited {color: #333;}
	
	/* About */
	#footer .about {
		background: url('../images/logo-bonbon-small.gif') no-repeat left 15px;
		float: right;
		margin: 0 0 -15px 0;
		padding: 13px 12px 0 67px;
		width: 155px;
	}
	
	/* Copyright */
	#footer .copy {
		clear: both;
		padding: 0 0 0 12px;
		position: relative;
		width: 695px;
	}
	
	#footer .copy img {position: absolute; right: 0; top: 0;}

/* Modules
===============================================*/
/* Breadcrumb */
.breadcrumb {color: #8c8c8c; margin: 0 0 20px 0;}
.breadcrumb strong {font-weight: normal;}

.breadcrumb a:link, .breadcrumb a:visited {color: #8c8c8c;}

/* Recently Viewed */
.recently-viewed h3 {background: #fbfbfb; font-size: 1.2em; padding: 8px 15px;}
.recently-viewed ul {list-style: none; margin: 0;}
.recently-viewed li {float: left; margin: 0 15px 15px 0; overflow: hidden; text-align: center; width: 150px;}
.recently-viewed li img {display: block; max-height: 150px; max-width: 150px;}
.recently-viewed a strong {font-weight: normal;}

.recently-viewed li a:link, .recently-viewed li a:visited {color: #696969;}
	
/* Sections
===============================================*/
/* homepage */
#home {overflow: hidden; width: 100%;}

	/* Categories */
	#home .cats {float: left; list-style: none; margin: 0; width: 89px;}
	#home .cats li {
		border: 1px solid #F2EEEE;
		height: 91px;
		margin: 0 0 9px 0;
		overflow: hidden;
	}
	
	#home .cats img {display: block;}
	
	#home .cats a:link, #home .cats a:visited {
		background: #44005E;
		color: #fff;
		display: block;
		text-align: center;
	}
	
	/* Primary */
	#home .primary {float: right; overflow: hidden; width: 849px;}
	
		/* Slideshow */
		#slideshow {
			border: 1px solid #F2EEEE;
			margin: 0 0 21px 0;
			overflow: hidden;
			position: relative;
			height: 280px; /*height from 318 */
			/*width: 847px;  ------ VF change new design  */
			width: 708px; /*-- VF psd width = 710px */
		}
		

		.rotate {position: relative}
		.rotate-content {position: absolute;top:75px;left:55px;width: 240px}/*VF moved to meet new slideshow heights*/
		.rotate-content h3 {color:#F84094;font-size: 2.3em}
		.rotate-content p{margin: 25px 0 12px 0; text-align: center; font-size: 1.2em}
		#content #slideshow #numbers li{background-image:none}
		.rotate-content a:link, .rotate-content a:visited {	
			color:#353535;
			/*background:transparent url(../images/icons/ico-bullet.gif) no-repeat scroll 0 4px;
			padding-left:10px;
			*/
			background-image: none;
			text-decoration: underline; color:#c12661 ;
		}
		#slideshow #numbers {margin: 0;padding: 0;list-style-type: none;position: absolute;z-index: 10px;top:254px;left:0}/*VF top was 293 */
		#slideshow #numbers li {float:left;margin-right: 0; margin-left: 0; padding-left: 4px}
		#slideshow #numbers li a:link, #slideshow #numbers li a:visited{background: #f9f9f9; display:block;border:1px solid black;padding:2px 4px;width: 14px;height: 16px;text-align: center;color:black; }
		#slideshow #numbers li a:hover, #slideshow #numbers li a:active, #slideshow #numbers li a.active:link, #slideshow #numbers li a.active:visited {
			color:white;
			background: black;
			text-decoration: none
		}
	
		/* Highlights */
		#home .highlights {list-style: none; margin: 0; width: 708px;}/* VF changed width from 900px*/
		#home .highlights li {
			border: 1px solid #F2EEEE;
			float: left;
			margin: 0 17px 17px 0; /*VF added 20px bottom and changed 17px left from 20.*/
			padding-left: 0;
		}
		/*VF no margin on right link*/
		#home .highlights li.nomarg {margin-right: 0px}
		#home .highlights li.bottom{margin-right: 18px}
		#home #content .highlights li{background-image:none}
		#home .highlights img {display: block; float: left;}
		
			/* Newsletter */
			#newsletter {
				height: 142px;
				margin: 0;
				overflow: hidden;
				padding: 8px;
				width: 128px;
			}
			
			#newsletter h2 {margin-bottom: 15px;}
			#home #newsletter img {float: none;}
			#newsletter p {line-height: 1.25; margin-bottom: 15px;}
			
			#newsletter input {float: left;}
			#newsletter .text {
				color: #c1c1c1;
				float: none;
				font-style: italic;
				margin: 0 0 10px 0;
				width: 120px;
			}
			
			#newsletter a:link, #newsletter a:visited {
				color: #333;
				float: right;
				font-size: 0.833em;
				text-decoration: underline;
			}