/*
   style.css
   drap&drop   
   Created by Callum Wilson on 2008-08-21.
   Copyright 2008 Oxygen Kiosk. All rights reserved.
*/
#slider {
	width: 995px;
	margin: 0 -20px;
	position: relative;
	overflow: hidden;
}

.scroll {
	height: 1850px;
	width: 886px;
	overflow: auto;
	overflow-x: hidden;
	position: relative; /* fix for IE to respect overflow */
	clear: left;
}

.scrollContainer div.panel {
	height: 2050px;
	width: 866px;
	padding:  0 20px;

}
.scrollButtons {position: absolute;top: 200px;cursor: pointer;}
.scrollButtons.left {left: -20px;}
.scrollButtons.right {right: -20px;}
a.selected {background:  #000; color:  #fff;}
/* p.forminfo {float: left; width:  120px; margin-right: 20px;} */
img.product-shot {display: block; border-bottom: 1px solid #fff;}
li h4 {margin-top: 1em;}

ul li ol {margin-left: 10px;}

legend {font-size: 1.2em;font-weight:bold; color:  #fff; margin-bottom:  1em;}
fieldset.step {border:  1px solid #fff;}

#step-one-box ul {margin-bottom: 0;}
fieldset#step-two-box {background: #E7E8EA; padding: 10px;}
legend.boxchooser {margin-left:  20px;}
div#controls {background: #4C1A03; padding: 10px; border: 1px solid #fff; border-top: none; overflow:hidden; display: inline-block;} div#controls {display: block;}

p.continue-button {}
p.continue-button a.continue-button { background:url('../../skin/frontend/chocogram-interface/chocogram/images/next-step.jpg') top left no-repeat; width:152px; height:48px; text-indent: -9999em; display: block; bottom:10px; right:20px; position: absolute;}
p.previous a.continue-button { background:url('../../skin/frontend/chocogram-interface/chocogram/images/previous-step.jpg') top left no-repeat; position:relative; top:0; left:0;}
p.previous {margin-bottom: 0;}
p.previous a {margin-top: 0; float: left;}

p.add-button {text-align: right; margin-bottom: 0;} 
div#controls .form-button {background:url('/skin/frontend/chocogram-interface/chocogram/images/add-to-cart.jpg') top left no-repeat; width:150px; height:42px; text-indent: -9999px;}

table#box-configuration { margin-left: 20px;}
table#box-configuration th, table#box-configuration td {padding: 5px 10px;}

table#box-configuration th {text-align: center; font-weight: bold;font-size: 1.4em; padding: 0; border-bottom: 1px solid #fff;}
	table#box-configuration th span.tiny {font-size:  0.6em;}
table#box-configuration td {vertical-align: top; margin-top: 1em;}
table#box-configuration li {display: block; float: none; width: 100%;}
table#box-configuration li * {float: left;}
	table#box-configuration li input {clear: left;}


/* ================ */
/* = Step One Box = */
/* ================ */
fieldset#step-one-box { background:  #4C1A03; }
	fieldset#step-one-box li {color: #fff; font-weight: bold; margin: 0; border-bottom: 1px solid #fff; overflow: hidden; position: relative;}
	fieldset#step-one-box li img {float: left; display: block; margin-right: 10px; border-right: 1px solid #fff	;}
		fieldset#step-one-box li li {border-bottom: none; padding: 0;}
			fieldset#step-one-box li ol {margin: 10px 20px 0 20px; float: left;}
		
		
		fieldset#step-one-box li h4 {font-size: 1.6em; margin-bottom: 0;}
		fieldset#step-one-box li p {font-weight: normal;margin-bottom: 0;}
		fieldset#step-one-box li ol {margin-bottom: 0;}
	fieldset#step-one-box label {color: #fff; font-weight: bold;}



/* =================================================== */
/* = Drag & Drop chocolate Box - JQuery Gooey Center = */
/* =================================================== */
div#container { padding: 1em; min-width: 850px;}
.wrapper {display:  inline-block; overflow:  hidden; margin-bottom:  1em;} .wrapper {display:  block;}

p#theMessage { width: 300px; float: left; height: 200px; border: 1px solid #000; padding: 1em;}
ul#message {clear:  both;}
.droppable-active {opacity: 1.0;}
.droppable-hover {outline: 1px dotted black;}
/* ==================== */
/* = Make the letters = */
/* ==================== */
ul#message-list, ul#coming-soon {margin: 0; padding: 0;}
ul#message-list li, ul#coming-soon li {width:  47px; height:  47px; background:  #5C2F26; float:  left; margin: 0 5px 5px 0; 
                    background:  url(../img/alphabet.jpg); text-indent:  -9999em; list-style: none	; 
				    background-position:  -508px -53px;}
/*First Row*/
ul#message-list li.a {background-position: 0 0;}
ul#message-list li.b {background-position: -51px 0;}
ul#message-list li.c {background-position: -102px 0;}
ul#message-list li.d {background-position: -152px 0;}
ul#message-list li.e {background-position: -203px 0;}
ul#message-list li.f {background-position: -254px 0;}
ul#message-list li.g {background-position: -305px 0;}
ul#message-list li.h {background-position: -356px 0;}
ul#message-list li.i {background-position: -406px 0;}
ul#message-list li.j {background-position: -457px 0;}
ul#message-list li.darkspace, ul#coming-soon li.darkspace {background-position: -509px 0;}
ul#message-list li.whitespace {}


/*Second Row*/
ul#message-list li.k {background-position: 0 -52px;}
ul#message-list li.l {background-position: -51px -52px;}
ul#message-list li.m {background-position: -102px -52px;}
ul#message-list li.n {background-position: -152px -53px;}
ul#message-list li.o {background-position: -203px -53px;}
ul#message-list li.p {background-position: -254px -53px;}
ul#message-list li.q {background-position: -305px -53px;}
ul#message-list li.r {background-position: -357px -53px;}
ul#message-list li.s {background-position: -406px -53px;}
ul#message-list li.t {background-position: -457px -53px;}

/*Third Row*/
ul#message-list li.u {background-position: 0 -106px;}
ul#message-list li.v {background-position: -51px -106px;}
ul#message-list li.w {background-position: -102px -106px;}
ul#message-list li.x {background-position: -152px -106px;}
ul#message-list li.y {background-position: -203px -106px;}
ul#message-list li.z {background-position: -254px -106px;}
ul#message-list li.unhappy {background-position: -305px -106px;}
ul#message-list li.happy {background-position: -356px -106px;}
ul#message-list li.star {background-position: -406px -106px;}
ul#message-list li.darkheart, ul#coming-soon li.darkheart {background-position: -509px -106px;}

/*Fourth Row*/
ul#message-list li.zero {background-position: 0 -159px;}
ul#message-list li.one {background-position: -51px -159px;}
ul#message-list li.two {background-position: -102px -159px;}
ul#message-list li.three {background-position: -152px -159px;}
ul#message-list li.four {background-position: -203px -159px;}
ul#message-list li.five {background-position: -254px -159px;}
ul#message-list li.six {background-position: -305px -159px;}
ul#message-list li.seven {background-position: -356px -159px;}
ul#message-list li.eight {background-position: -406px -159px;}
ul#message-list li.nine {background-position: -457px -159px;}
ul#message-list li.milkheart, ul#coming-soon li.milkheart {background-position: -509px -159px;}

/*Fifth Row*/
ul#message-list li.apostrophe {background-position: 0 -212px;}
ul#message-list li.fullstop {background-position: -51px -212px;}
ul#message-list li.equals {background-position: -102px -212px;}
ul#message-list li.plus {background-position: -152px -212px;}
ul#message-list li.slash {background-position: -203px -212px;}
ul#message-list li.white-heart {background-position: -253px -212px;}
ul#message-list li.question {background-position: -305px -212px;}
ul#message-list li.exclaimation {background-position: -356px -212px;}
ul#message-list li.at {background-position: -406px -212px;}
ul#message-list li.percent {background-position: -457px -212px;}
ul#message-list li.lightpinkheart {background-position: -509px -212px;}

/*Sixth Row*/
ul#message-list li.comma {background-position: 0 -263px;}
ul#message-list li.and {background-position: -51px -263px;}
ul#message-list li.minus {background-position: -102px -263px;}
ul#message-list li.lt {background-position: -152px -263px;}
ul#message-list li.gt {background-position: -203px -263px;}
ul#message-list li.heart {background-position: -254px -263px;}
ul#message-list li.clover {background-position: -406px -263px;}
ul#message-list li.redheart {background-position: -457px -263px;}
ul#message-list li.lightblueheart {background-position: -509px -263px;}


/* Extra Additions */
ul#message-list li.rudolph {background-position: -304px -263px;}
ul#message-list li.greenrudolph {background-position: -304px -312px;}
ul#message-list li.tree {background-position: -355px -263px;}
ul#message-list li.greentree {background-position: -355px -312px;}


.text-unhappy {padding-left:3px;padding-right:3px;background:  url(../img/alphabet.png);background-position: -305px -106px;}
.text-happy {padding-left:3px;padding-right:3px;background:  url(../img/alphabet.png);background-position: -356px -106px;}
.text-star {padding-left:3px;padding-right:3px;background:  url(../img/alphabet.png);background-position: -406px -106px;}
.text-heart {padding-left:3px;padding-right:3px;background:  url(../img/alphabet.png);background-position: -254px -263px;}
/*#message-list{height:100px}*/
.drag-unit-unselected,.drag-unit-selected{
	/*float: left;	
	cursor:move;*/
}

.text-upper{
	text-transform:uppercase;
	font-family:Georgia, "Times New Roman", Times, serif	
}

fieldset#step-one-box li {zoom:1;}