/*
   style.css
   drap&drop   
   Created by Callum Wilson on 2008-08-21.
   Copyright 2008 Oxygen Kiosk. All rights reserved.
*/




/* =================================================== */
/* = Drag & Drop chocolate Box - JQuery Gooey Center = */
/* =================================================== */
#table1 td {
vertical-align:top;
}

.required {
color:#FF0000;
}


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 {margin: 0; padding: 0;}
ul#message-list li {width:  34px; height:  34px; background:  #5C2F26; float:  left; margin: 0 1px 1px 0; 
                    background:  url(letters.gif); text-indent:  -9999em; list-style: none	; 
				    background-position:  -509px -52px;}

/*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;}

/*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 -52px;}
ul#message-list li.o {background-position: -203px -52px;}
ul#message-list li.p {background-position: -254px -52px;}
ul#message-list li.q {background-position: -305px -52px;}
ul#message-list li.r {background-position: -356px -52px;}
ul#message-list li.s {background-position: -406px -52px;}
ul#message-list li.t {background-position: -457px -52px;}

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

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

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

/*Sixth Row*/
ul#message-list li.comma {background-position: 0 -262px;}
ul#message-list li.and {background-position: -51px -262px;}
ul#message-list li.minus {background-position: -102px -262px;}
ul#message-list li.lt {background-position: -152px -262px;}
ul#message-list li.gt {background-position: -203px -262px;}
ul#message-list li.heart {background-position: -254px -262px;}
ul#message-list li.clover {background-position: -203px -262px;}
ul#message-list li.tree {background-position: -152px -262px;}

ul#message-list li.w1 {background-position: -406px -262px;}
ul#message-list li.w2 {background-position: -458px -262px;}
ul#message-list li.w3 {background-position: -356px -262px;}
ul#message-list li.w4 {background-position: -509px -262px;}
ul#message-list li.w5 {background-position: -304px -262px;}


/* Extra Umlaute */
ul#message-list li.ae {background-position: -509px -105px;}
ul#message-list li.oe {background-position: -509px -211px;}
ul#message-list li.ue {background-position: -509px -157px;}

.text-unhappy {padding-left:3px;padding-right:3px;background:  url(alphabet.gif);background-position: -305px -105px;}
.text-happy {padding-left:3px;padding-right:3px;background:  url(alphabet.gif);background-position: -356px -105px;}
.text-star {padding-left:3px;padding-right:3px;background:  url(alphabet.gif);background-position: -406px -105px;}
.text-heart {padding-left:3px;padding-right:3px;background:  url(alphabet.gif);background-position: -254px -262px;}

/*#message-list{height:100px}*/
.drag-unit-unselected,.drag-unit-selected{
	/*float: left;	
	cursor:move;*/
}

.text-upper{
	text-transform:uppercase;
	font: 12px  verdana, arial, helvetica;
}