/*---- CS Main css ----*/
/*---- 1/10/11 3:00PM ----*/
/*   
Theme Name: CSMain
Theme URI: www.chocolatesprings.com
Description: Theme for Chocolate Springs Cafe
Author: Allan Douglas, DDGraphics WebMedia
Author: URI: www.ddgwebmedia.com
 */
/*****************************/

/* @group HTML Elements */
/*------ HTML Elements ------*/

body {
	text-align: center;
  	font-family: "Lucida Calligraphy Italic";
  	font-size: 100%;
  	color: #000000;
	background-color: #510000;
	padding: 20px;
 }
 
#inhalt {
	text-align: left;
	margin: 0 auto;
	padding: 0;
	width: 985px;
	background-image: url(../SiteAssets/Jpeg/BackGround/abar1010.jpg);
	background-repeat: repeat;
}

p, h1, h2, h3, h4, h5, ul, td {
  	font-family: Lucida Calligraphy Italic, sans-serif;
	color: #000000;
}

p {
	font-size: .875em;
	line-height: 1.3em;
	margin-left: 5px;
}

h2 {
	margin: 0;
	vertical-align: top;
	
}

h4 {
	margin-top: 0;
}

a {
	color: #333;
	text-decoration: none;
}
a href img {
	border: none;
}
/*-- image center ----*/
img.center {   
	display: block;   
	margin-left: auto;   
	margin-right: auto; 
}
/* @end HTML Elements */
/**************************/
/* @group ID Selectors */

/* Selectors */
#maincontainer {
	width: 985px;
	position: relative;
	left: 1px;
	}

#lwrmaincontainer {
/* used in checkout template*/
	clear: both;
	width: 985px;
	position: relative;
	left: 1px;
	}
	
#newcontainer{
	background-image: url(../SiteAssets/Jpeg/BackGround/abar1010.jpg);
	background-repeat: repeat;
}

#top {
	width: 985px;
}

#leftcolumn {
	left: 0px;
	float: left;
	margin: 0px;
	padding: 0px;
	width: 160px;
}
/*-- mecontainer stuff --*/
#mecontainer {
	float: left;
	position: relative;
	top: -8px;
	width: 570px;
}
#mecontainer .box {
	float: left;
	position: relative;
	display: block;
	left: 26px;
}
#mecontainer img {
	float: left;
	clear: right;
	margin: 0 .5em .5em 0;
}
/************************/

#scndecontainer {
	float: left;
	position: relative;
	margin: 0 auto 0 46px;
	width: 570px;
	left: 150px;
}
#scndecontainer .box {
	float: left;
	position: relative;
	display: block;
	left: 0;
}

#rightcolumn {
	float: left;
	position: relative;
	left: 50px;
}

#rightcolumn img {
	width: 95%;
	margin: 0 auto;	
}
#lwrrightcolumn {
	float: left;
	position: relative;
	left: 10px;
}

/* Footer CSS 
#mnfooter {
	float: left;
	position: relative;
	font-size: 11px;
	text-decoration: none;
	width: 610px;
}
#mnfooter .box {
	float: left;
	position: relative;
	left: 0px;
}*/
#mnfooter {
	float: left;
	position: relative;
	font-size: .8EM;
	margin: 0 auto 0 46px;
	width: 570px;
	/*left: 150px;*/
}

#mnfooter .box {
	float: left;
	position: relative;
	display: block;
	left: 0;
}


/* @end ID Selectors */
/***********************/
/* @group Bars */

#middle {
	clear: both;
	width: 985px;
}

#bottombar {
	clear: both;
	width: 985px;
}

#topbar {
	width: 985px;
}

/* @end Bars */
/************************/
/* @group Nav */
/*--- Right Nav ---*/
#rghtnav {
	float: left;
	text-align: left;
	font-family: "Lucida Calligraphy Italic";
	font-size: .875em;
	margin: 0;
	padding: 0;
	width: 170px;
	left: 0px;
	top: -10px;
	z-index: 99;
}
	
#rghtnav ul {
	list-style: none;
	margin-left: 0;
	left: 0;
	}
#rghtnav li {
	list-style: none;
	text-align: left;
	margin-bottom: 0;
	margin-top: 0;
	padding-right: 2px;
	text-indent: 23px;
	background: url(../SiteAssets/GIF/NavSpring.gif) no-repeat;
	margin-left: -35px;
}


#rghtnav a:link, #rghtnav a:visited  {
	display: block;
	padding: 3px;
	text-decoration: none;
	color: #FFFFCC;
	border: 1px solid;
	border-color: #BF9946 #000 #000 #BF9946;
	}


#rghtnav li a:hover {
	padding: 3px;
	border: 1px solid;
	border-color: #4C0405 #000 #000 #4C0405;
	background: #DDBB50 url(../SiteAssets/GIF/ChcltSpring.gif) no-repeat;
	color: #4C0405;
}
/*--- Reverse for Shop Online --*/

#rghtnav li.reverse a:link, #rghtnav li.reverse a:visited  {
	display: block;
	padding: 3px;
	border: 1px solid;
	border-color: #4C0405 #000 #000 #4C0405;
	background: #DDBB50 url(../SiteAssets/GIF/ChcltSpring.gif) no-repeat;
	color: #FFF;

	}


#rghtnav li.reverse a:hover {
	padding: 3px;
	text-decoration: none;
	color: #FFFFCC;
	border: 1px solid;
	border-color: #BF9946 #000 #000 #BF9946;
	background: url(../SiteAssets/GIF/NavSpring.gif) no-repeat;
	}
div#mobilenav {
	display: none;
}
/* @end Nav */
/**********************/

/*-- turn off mobile directions --*/
.mobiledirections {
	display: none;
}
/*-------------------------*/
/**********************/
#privacy {
}
#privacy p {
	font-size: 11px;
}
#privacy h1 {
	font-size: 20px;
}
#privacy h2 {
	font-size: 16px;
}
#privacy h3 {
	font-size: 14px;
}
#newsletter a:link, #newsletter a:visited {
	margin-left: 9px;
	margin-top: 10px;
	display: block;
	width: 150px;
	border-top: 1px solid #4C0405;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #4C0405;
	color: #000;
	background-color: #DDBB50;
	text-align: center;
	font-size: 1.7em;
}
#newsletter a:hover, #newsletter a:active {
	border-color: #BF9946 #000 #000 #BF9946;
	color: #FF9;
	background-color: #BF9946;
}
#newsletter h3{
	text-align: center;
	display: block;
}

#terms p, #terms h1, #terms h2, #terms h3 {
	left: 0px;
	Width: 570px;
	position: relative;
}
#terms p {
	font-size: 11px;
}
#terms h1 {
	font-size: 20px;
}
#terms h2 {
	font-size: 16px;
}
#terms h3 {
	font-size: 14px;
}

#lwrleft {
	float: left;
	text-align: left;
	font-family: "Lucida Calligraphy Italic";
	color: #BF9946;
	font-size: .9em;
	margin: 0px;
	padding: 0px;
	width: 170px;
	left: 0px;
	top: 0px;
}
#bottom {
	clear: both;
}

/* @group Events Calender */

/* --- Events Calendar Stuff ---*/
#calendar {
	clear: both;
	margin-left: 0;
	width: 570px;
}
/* twoColumns class for implementing a simple 2-column structure wherever needed
 * inside the content column. 
 */
table.clndrColumns {
	border: 1px solid #500001;
	border-collapse: collapse;
	width: 100%;
}
table.clndrColumns td {
	border: 1px solid #500001;
}
.clndrColumns p {
	text-align: left;
	margin-top: 0em;
	margin-left: .5em;
	font-size: .9em;
}
.clndrColumns h5 {
	text-align: left;
	margin-bottom: 0em;
	margin-top: .2em;
	margin-left: .2em;
	font-size: 1em;
}
.clndrColumns td.leftColumn {
	width: 30%;
	overflow: visible;	/* fix for IE italics bug */
}
.clndrColumns td.rightColumn {
	width: 70%;
	overflow: visible;	/* fix for IE italics bug */
}
/*--- Printer Icon for Events Calendar ---*/
#printer{
	margin-left: 0;
	width: 570px;
}
#printer h5 {
	font-size: .9em;
	text-align: left;
}
#printericon {
	float: right;
	width: 10%;
}
#printertext {
	float: left;
	width: 85%;
	margin: 0;
}
#printer a:link, #printer a:visited {
	height: 32px;
	width: 32px;
	background-image: url(http://www.ddgwebmedia.com/DDGECom/DB/DBAssets/DBIcon/print_up.gif);
	display: block;
    }
#printer a:hover {
	height: 32px;
	width: 32px;
	background-image: url(http://www.ddgwebmedia.com/DDGECom/DB/DBAssets/DBIcon/print_dwn.gif);
	background-repeat: no-repeat;
	display: block;
 }

/* @end Events Calender */
/*****************************/
/* @group Forms N */
/*------ DDGraphics WebMedia css ------*/
/*------ 10/3/10 11:00AM ------*/
/*-- Needed in sites using our Forms --------*/
#frmcontainer {
	clear: both;
	width: 100%;
	margin: 0 auto;
}
#frmcontainerunsub {
	clear: both;
	background-color: #99C;
	color: #221E7F;
	width: 70%;
	border: thin dashed #660099;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;	
	margin: 1em auto 0;
}
#frmcontainerar {
	/*clear: both;*/
	background-color: #99C;
	width: 70%;
	border: medium groove #99C;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;	
	margin: 0 auto 0 28%;
}
#frmcontainer h2 {
	font-size: 1.1em;
	margin: .5em 0em;
	color: #004636;
}
#frmcontainer h4 {
	color: #004636;
}
fieldset {
	clear: both;
	margin: 1em auto .5em;
	width: 80%;
	border: thin groove #333;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;	
}
#frmcontainer fieldset p {
	margin: 0;
	color: #221E7F;
}
/*- IDs & classes used w fieldset --*/
.unsubscribe {
	width: 70%;
	margin: 1em auto 0;
}
.cb {
	clear: both;
}
.ncb {
	clear: none;
}

/*- End IDs & classes used w fieldset --*/

legend {
	text-align: center;
	text-transform: uppercase;
	font-size: 100%;
	background: #333;
	color: #FFF;
	padding: .1em .4em;
}

.default legend {
	display: none;
}

p.row1 {
	clear: both;
	padding-top: .5em;
	text-align: center;
}


label {
	width: 40%;
	float: left;
	text-align: right;
	color: #FFC;
}

p input, p select, p textarea {
	width: 50%;
	float: left;
	text-align: left;
	/*border: thin dashed red;*/
}

/*- classes for label & input tags --*/
.labelcntr {
	width: 100%;
	clear: both;
	text-align: center;
}

.labels {
	width: 33%;
	float: left;
	text-align: right;
	/*border: thin dashed red;*/
}

.labell {
	width: 48%;
	text-align: right;
}
.labelll {
	width: 68%;
	text-align: right;
}
.labelsl {
	width: 75%;
	text-align: right;
}
.labelwss {
	width: 15%;
	text-align: right;
	/*border: thin dashed green;*/
}
.labelws {
	width: 20%;
	text-align: right;
	/*border: thin dashed green;*/
}
.labelrbcb {
	width: 5%;
	float: left;
	text-align: right;
	/*border: thin dashed red;*/
}
.labelarrbcb {
	width: 20%;
	float: left;
	text-align: left;
	/*border: thin dashed red;*/
}
/*-- input --------*/
.inputcntr {
	width: 80%;
	clear: both;
	text-align: center;
}

.inputbttn {
	width: 20%;
	float: none;
	text-align: center;
	padding: .2em 0 0 .3em;
}
.inputbttngo {
	width: 20%;
	float: left;
	text-align: center;
	padding: .5em 0 0 .3em;
}

.inputwl {
	width: 80%;
	clear: both;
}

.inputw {
	width: 50%;
	float: left;
	padding-left: .2em;
}

.inputws {
	width: 20%;
	float: left;
}

.inputwp {
	width: 10%;
	/*float: left;*/
}

.inputwps {
	width: 5%;
	/*float: left;*/
}

.inputwrbcb {
	width: 7%;
	float: left;
	text-align: left;
	/*border: thin dashed red;*/
}
.inputarrbcb {
	width: 4%;
	float: left;
	text-align: right;
	/*border: thin dashed red;*/
}
.notice {
	font-weight: bold;
}
/*---- Form Stuff ----*/
div.row {
	clear: both;
	padding-top: .5em;
}

div.row1 {
	clear: both;
	padding-top: .5em;
	text-align: center;
}

div.row1 p {
	margin: 0 1em;
	text-align: left;
}

div.row1 h3 {
	color: #004636;
}

div.row span.label {
	float: left;
	width: 40%;
	text-align: right;
}

div.row span.labelpu {
	float: left;
	width: 25%;
	text-align: right;
}

div.row span.formpu {
	float: left;
	width: 5%;
	text-align: left;
} 

div.row span.labelpp {
	float: left;
	width: 20%;
	text-align: right;
}

div.row span.formpp {
	float: left;
	width: 4%;
	text-align: left;
} 
div.row span.formw {
	float: right;
	width: 60%;
	text-align: left;
} 

div.rowbttns {
	clear: both;
	padding-top: .5em;
	text-align: center;
}

form {
	margin: 0;
	padding: 0;
	font-size: 80%;
}


input.submit {
	border: 0;
	margin-bottom: -6px;
	padding: 2px;
	background: transparent;
	font-size: 10px;
}

/*---- End Form CSS ----*/

/*------ Form Button ------*/
/*-- Form Button used in Contact page & all Checkout pages --*/
.formbttn {
	cursor: pointer;
	background-color: #500001;
	color: #FFC;
	border: outset 1px #ccc;
	padding: 1px 2px;
}

.formbttnoff {
	background-color: #666699;
	color: #CCCCCC;
	border: outset 1px #ccc;
	padding: 1px 2px;
}

/*---- Button Classes ----*/

.sbmtbutton a:link, .sbmtbutton a:visited {
	width: 40%;
	display: block;
	border-top: medium solid #CCCCCC;
	border-right: medium solid #666;
	border-bottom: medium solid #666;
	border-left: medium solid #CCCCCC;
	color: navy;
	background-color: #FF7745;
	text-align: center;
	font-size: 1em;
	padding: .3em .4em;
	margin: 0 auto;
}

.sbmtbutton a:hover, .sbmtbutton a:active {
	color: #FF7745;
	background-color: navy;
	text-align: center;
	border-top-color: #666;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #666;
}
/* @group log in */
/*-- modified 1/17/12 --*/
/*-- log in stuff --*/
#login {
	width: 90%;
	margin: 0 5%;
}
#login fieldset {
	clear: both;
	margin: 1em auto .5em;
	/*width: 98%;*/
	border: thin groove #06437D;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
#login legend {
	text-align: center;
	text-transform: uppercase;
	font-size: 100%;
	background: transparent;
	color: #333;
	padding: .1em .4em;
}
#login p {
	clear: both;
	padding-top: .3em;
}
.cntrtext {
	text-align: center;
}
#login label {
	width: 39%;
	float: left;
	text-align: right;
	color: #333;
	padding-top: .3em;
	/*border: thin dashed red;*/
}
#login label.labelright {
	width: 49%;
	float: left;
	text-align: left;
}
#login input, #login select, #login textarea {
	width: 49%;
	float: left;
	text-align: left;
}
#login input.inputpw {
	width: 49%;
	float: left;
	text-align: left;
}
#login input.inputleft {
	width: 39%;
	float: left;
	text-align: right;
}
#login input.inputrbcb {
	width: 5%;
	float: left;
	text-align: left;
	/*border: thin dashed red;*/
}

/*------ Form Button ------*/
#login input.formbttn {
	float: none;
	cursor: pointer;
	text-align: center;
	width: 40%;
	margin: .8em auto 0 30%;
	background: #500001;
	color: #FFC;
	border: outset 1px #ccc;
	padding: 1px 2px;
}

#login input.formbttnoff {
	background-color: #666699;
	color: #CCCCCC;
	border: outset 1px #ccc;
	padding: 1px 2px;
}
/* @end log in */

/*-- End Our Form Stuff CSS ----*/
/* @end Forms */
/************************/
/* @group Table Styles */
/*-- controls the layout of the table in facilities & fees --*/ 
table {
	width: 100%;
	text-align: center;
}

td.label {
	display: block;
	margin: 5px;
	width: auto;
	text-align: right;
	height: 20px;
	color: #000000;
	vertical-align: middle;
}
td.input {
	margin: 5px;
	color: #000066;
}
td a img {
	width: 5%;
}
	.hgroup {
		/*display: table-header-group;
		width: 100%;*/
		background: #7CAB4D;
		text-align: center;
	}
	.trow {
		background: #AFA24F;
		width: 100%;
		border-top: .8em solid #AFA24F;
		border-bottom: .8em solid #AFA24F;
	}
	.trow1 {
		width: 100%;
		border-top: 1em solid transparent;
		border-bottom: .8em solid transparent;
	}
	.cell {
		display: table-cell;
		border: 1px solid #7CAB4D;
	}
	.cellr {
		display: table-cell;
		text-align: right;
		padding-right: 1.5%;
	}
	.cellc {
		display: table-cell;
		text-align: center;
	}
	
	.col6 {
		width: 6%;
		text-align: justify;
	}
	.col8 {
		width: 8%;
	}
	.col10 {
		width: 10%;
	}
	.col14 {
		width: 14%;
	}
	.col20 {
		width: 20%;
	}
	.col45 {
		width: 45%;
	}
	
/* @end Table Styles */

/*--- Classes ---*/
/* @group Clearing-Floats */
/*------ ClearFix ------*/
/*---- Used to push divs ----*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

/*--- End ClearFix ---*/
/******************************/
/* =Clear Floated Elements -----*/
/* http://sonspring.com/journal/clearing-floats */

html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
/* @end Clearing-Floats */
.buttn {
	margin: .3em auto 0 0;
	background-color: #4C0405;
	font-family: Lucida Calligraphy Italic, sans-serif;
	color: #BF9946;
	/*width: 150px;*/
	padding: .2em .5em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	text-align: center;}
.buttn:hover {
	text-decoration: none;
}
.buttn:active {
	/*position: relative;*/
	top: 1px;
}
.orange {
	color: #FFC;
	border: solid 1px #6e1f20;
	background: #4C0405;
	background: -webkit-gradient(linear, left top, left bottom, from(#4C0405), to(#6e1f20));
	background: -moz-linear-gradient(top,  #4C0405,  #6e1f20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4C0405', endColorstr='#6e1f20');
}
.orange:hover {
	color: #BF9946;
	background: #4C0405;
	background: -webkit-gradient(linear, left top, left bottom, from(#4C0405), to(#6e1f20));
	background: -moz-linear-gradient(top,  #4C0405,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4C0405', endColorstr='#6e1f20');
}
.orange:active {
	color: #BF9946;
	background: -webkit-gradient(linear, left top, left bottom, from(#6e1f20), to(#4C0405));
	background: -moz-linear-gradient(top,  #6e1f20,  #4C0405);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6e1f20', endColorstr='#4C0405');
}
.bttn {
	margin-left: 9px;
	margin-top: 10px;
	background-color: #4C0405;
	font-family: Lucida Calligraphy Italic, sans-serif;
	color: #BF9946;
	width: 150px;
	padding: 5px 8px 5px 5px;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #BF9946;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #BF9946;
	text-align: center;

}
.center {
	text-align: center;
}
font.warning {
  color: white;
  background-color: red;
  font-weight: bold;
}
.menu {
  font-family: Lucida Calligraphy Italic, sans-serif;
  font-size: 9px;
  font-weight: normal;
  color: #000000;
}
.style1 {
	color: #BF9946;
	text-align: center;
	font-size: 20px;
	margin-left: 10px;
}
.style2 {
	color: #BF9946;
	font-size: .8em;
	text-align: center;
	margin-left: 0px;
}
.style4 {
	color: #000000;
	font-weight: normal;
	color: #FFFFCC;
}

/*************************/
/* ============================= */
/* ! Layout for Smaller screens   */
/* ============================= */
@media only screen and (max-width: 1152px) {

	body {
	font-size: 0.8em;
	line-height: 1.5em;
	}
	
	
	}

@media only screen and (max-width: 1024px) {

	body {
	font-size: 0.8em;
	line-height: 1.5em;
	}
	
	}
/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {
	body {
		text-align: center;
		font-size: .875em;
		-webkit-text-size-adjust: none;
		background: #000;
		color: #DDBD50;
	 }
	 
	 body, .container12 {
		width: 100%;
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		background: #000;
	 }
	
	.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
		 width: auto;
		 float: none;
		 margin-left: 0;
		 margin-right: 0;
		 padding-left: .5em;
		 padding-right: .5em;
	 }
	 
	div#inhalt {
		width: 100%;
		min-width: 0;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		background-image: none;
	}
	a {
		color: #DDBD50;
		text-decoration: underline;
	}
	p, h1, h2, h3, h4, h5, ul, td {
		color: #DDBD50;
	}
	.mobile {
		display: none;
	}
	/* nav changes */
	/*-- shut off rghtnav --*/
	div#rghtnav {
		display: none;
	}
	/*-- turn on mobile nav --*/
	div#mobilenav {
		display: block;
		width: 100%;
		/*border: 1px solid orange;*/
	}
	
	
	#mobilenav li {
		text-align: left;
		text-indent: 25px;
		background: #262626 url(../SiteAssets/GIF/GoldSpring.gif) no-repeat;
		/*border: 1px solid red;*/
	}
		
	
		#mobilenav a:link, #mobilenav a:visited  {
			display: block;
			padding: 3px;
			text-decoration: none;
			color: #FFFFCC;
			border: 1px solid;
			border-color: #BF9946 #000 #000 #BF9946;
			}
		
		#mobilenav li a:hover {
			padding: 3px;
			border: 1px solid;
			border-color: #4C0405 #000 #000 #4C0405;
			background: #DDBB50 url(../SiteAssets/GIF/ChcltSpring.gif) no-repeat;
			color: #4C0405;
		}		
		/*--- Reverse for Shop Online --*/
		
		#mobilenav li.reverse a:link, #mobilenav li.reverse a:visited  {
			display: block;
			padding: 3px;
			border: 1px solid;
			border-color: #4C0405 #000 #000 #4C0405;
			background: #ccc url(../SiteAssets/GIF/GoldSpring.gif) no-repeat;
			color: #333;
		
			}
		
		#mobilenav li.reverse a:hover {
			padding: 3px;
			text-decoration: none;
			color: #FFFFCC;
			border: 1px solid;
			border-color: #BF9946 #000 #000 #BF9946;
			background: url(../SiteAssets/GIF/GoldSpring.gif) no-repeat;
			}
			
		/*-- highlight the current page in mobile version only --*/	
		body#home a#homenav,
		body#story a#storynav,
		body#escape a#escapenav,
		body#direct a#directnav ,
		body#contact a#contactnav {
			display: block;
			padding: 3px;
			border: 1px solid;
			border-color: #4C0405 #000 #000 #4C0405;
			background: #DDBB50 url(../SiteAssets/GIF/ChcltSpring.gif) no-repeat;
			color: #FFF;
		}
		body#shop li.reverse {
			display: block;
			padding: 3px;
			border: 1px solid;
			border-color: #4C0405 #000 #000 #4C0405;
			background: #DDBB50 /*url(../SiteAssets/GIF/ChcltSpring.gif) no-repeat*/;
			color: #333;
		}
		
	/* Selectors */
	#maincontainer, #lwrmaincontainer, #newcontainer, #top {
		width: auto;
		float: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: .5em;
		padding-right: .5em;
		background: none;
 		color: #DDBD50;
		}
	

		#leftcolumn, #mecontainer, #mecontainer .box, #scndecontainer, #scndecontainer .box, #rightcolumn, #lwrrightcolumn {
		width: auto;
		float: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: .5em;
		padding-right: .5em;
		background: none;
 		color: #DDBD50;
		}
		#mecontainer {
			clear: both;
			top: 0;
		}
		#mecontainer .box {
			position: relative;
			left: 0;
		}
		
		#scndecontainer .box {
			float: left;
			position: relative;
			display: block;
			left: 0;
		}
		#scndecontainer div.hdrprodgrpbdesc {
			margin: .3em 0 0 0;
		}
	
		/*-- Right Column Changes --*/
		#rightcolumn img {
			width: 90%;
			margin: 0 auto;
			height: auto;
		}
		#rightcolumn {
			clear: both;
			left: 0;
		}
		#lwrrightcolumn {
			left: 0;
		}
			div#newsletter {
				display: none;
			}
	div#top img {
		display: none;
	}
	div#top {
		height: 5em;
		background: #333 url('../SiteAssets/Jpeg/alogo310333.jpg') no-repeat left top;
	}
	div#middle img, div#bottom img {
		display: none;
	} 

/* @end ID Selectors */
/***********************/
/* @group Bars */

	#middle, #bottombar, #topbar, #catbottombar, #catbottombar .box {
		width: auto;
		float: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: .5em;
		padding-right: .5em;
		background: none;
	}
	div#bottombar {
		display: none;
	} 
	div#bottombar img {
		display: none;
	} 
	
	div#bottombar div#lwrleft, div#bottombar div#lwrrightcolumn {
		display: none;
	}
	div#bottombar div#footercntnr {
		display: none;
	}
	/*-- Changes for Catalog & Cart --	*/
	
	div#catbottombar div#lwrleft, div#catbottombar div#lwrrightcolumn  {
		display: none;
	} 
	/*div#bottombar .catalog img {
		display: block;
	} 
	*/
	div#catbottombar div#footercntnr {
		display: none;
	}
	div#catbottombar {
		/*border: 1px solid orange;*/
	}
	

/* @end Bars */	

	
	/* left & right col changes */
	.bttn {
		width: 90%;
		margin: .8em 0 0 .5em;
		padding: .3em .5em .3em .3em;
		background-color: #262626;
		font-family: Lucida Calligraphy Italic, sans-serif;
		color: #DDBD50;
		border-top: thin solid #DDBD50;
		border-right: thin solid #000;
		border-bottom: thin solid #000;
		border-left: thin solid #DDBD50;
		text-align: center;
	}
	.bttnimg {
		width: 90%;
		margin: .8em 0 0 .5em;
		padding: .3em .5em .3em .3em;
		background-color: #262626;
		font-family: Lucida Calligraphy Italic, sans-serif;
		color: #DDBD50;
		border-top: thin solid #DDBD50;
		border-right: thin solid #000;
		border-bottom: thin solid #000;
		border-left: thin solid #DDBD50;
		text-align: center;
	
	}	
	.style1 {
		color: #DDBD50;
		text-align: center;
		font-size: 2em;
		margin: 1em 0 1em 0;
	}
	/*-- Contact Changes --*/
	#contact {
		width: 90%;
		margin: 0 auto;
	}
	#contact h4, #contact h5 {
		color: #DDBD50;
	}
		#contact .contact {
		float: left;
		width: 100%;
		color: #DDBD50;
		}
	/*-- Directions Changes --*/
	/*-- turn on mobile directions --*/
	.mobiledirections {
		display: block;
		width: 100%;
		/*border: 1px solid orange;*/
	}
	.mobiledirections p a {
		color: #DDBD50;
	}
/******************************************/
	/* @group Catalog4 & Cart Mobile */
		/* @group cart cols */
		/*-- cols used in cart --*/
		.onecolc, .twocolc, .threecolc, .fourcolc, .sevencolc {
			 width: auto;
			 float: none;
			 margin-left: 0;
			 margin-right: 0;
			 padding-left: .5em;
			 padding-right: .5em;
		}
		
		.onecolc {
			float: left;
			width: 45%;
			text-align: center;
			/*border: thin dashed purple;*/
		}
		
		.twocolc {
			float: left;
			width: 45%;
			text-align: center;
			/*border: thin dashed orange;*/
		}
		
		.threecolc {
			text-align: right;
		}
		
		.fourcolc {
			text-align: left;
		}
		.sevencolc {
			border: thin dashed purple;
		}
		/*-- end cols used in cart --*/
		/* @end cart cols */
		
	#cartcontainer, #cart, #ship, #containerfyo, #containerdtl {
		width: auto;
		float: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: .5em;
		padding-right: .5em;
		background: none;
		color: #DDBD50;
		left: 0;
	}
	#containerfyo .box {
		float: left;
		position: relative;
		display: block;
		left: 0;
	}
	
	#cart, #ship {
		font: .7em Arial, Helvetica, Geneva, sans-serif;
	}
		.PrdctDscrptnTxt {
			font-family: Arial, Helvetica, sans-serif;
			font-size: 12px;
			font-style: normal;
			color: #DDBD50;
		}
		.PrdctNme {
		  	font-family: "Lucida Calligraphy Italic", sans-serif;
			font-size: 1.2em;
			font-weight: bold;
			color: #DDBD50;
		}
		.prodgroupb h3 {
			font-size: 14px;
			color: #DDBD50;	
		}
		.prodgrpbdesc {
			font-size: 12px;
			color: #DDBD50;
			vertical-align: top;
			text-align: center;
			padding-left: 5px;
		}
		.PrdctPrceTxt {
		  	font-family: "Lucida Calligraphy Italic", sans-serif;
			font-size: 18px;
			font-weight: bold;
			color: #DDBD50;
			text-decoration: none;
		}
		.addtcbutton a:link, .addtcbutton a:visited {
			font-size: 12px;
			display: block;
			padding: .3em;
			border: 1px outset #333333;
			background-color: #4C0405;
			color: #DDBD50;
			width: 75px;
			text-decoration: none;
			text-align: center;
			position: relative;
		}
		.addtcbutton a:hover, .addtcbutton a:active {
			display: block;
			padding: .3em;
			border: 1px solid #333333;
			background-color: #DDBD50;
			color: #4C0405;
			width: 75px;
		}
		.fillbxbutton a:link, .fillbxbutton a:visited {
			font-size: 12px;
			display: block;
			padding: .1em;
			border: 1px outset #333333;
			background-color: #DDBD50;
			color: #4C0405;
			width: 75px;
			text-decoration: none;
			text-align: center;
			position: relative;
		}
		.fillbxbutton a:hover, .fillbxbutton a:active {
			display: block;
			width: 75px;
			padding: .1em;
			border: 1px solid #333333;
			background-color: #4C0405;
			color: #DDBD50;
		}
		
		/*-- containerfyo stuff --*/
		#containerfyo  h3 {
			font-size: 1.5em;
			font-weight: bold;
			margin: 0 0 .5em 0;
			/*border: thin dotted #333;*/
		}
		/* @group Cart Log On Form Stuff */
		/* Needed for all checkout log on */
		fieldset {
			clear: both;
			margin: 0 auto;
			/*width: 98%;*/
			border-style: none;
		}
		legend {
			text-align: center;
			text-transform: uppercase;
			font-size: 100%;
			background-color: #262626;
			color: #DDBD50;
			padding: .1em .4em;
		}
		
		div.rowclo {
			clear: both;
			padding-top: .5em;
			margin: 0;
		}
		
		div.row1clo {
			clear: both;
			padding-top: .5em;
			text-align: center;
			margin: 0;
		}
		
		div.rowbttns {
			clear: both;
			padding-top: .5em;
			text-align: center;
		}
		
		span.labelclo {
			float: left;
			width: 40%;
			text-align: right;
		}
		div.row span.labelcr {
			float: left;
			width: 30%;
			text-align: right;
		}
		div.row span.labelbg {
			float: left;
			width: 15%;
			text-align: right;
		}
		
		span.formclo {
			float: right;
			width: 58%;
			text-align: left;
		}
		
		div.row span.formcr {
			float: right;
			width: 70%;
			text-align: left;
			color: #000066;
		} 
		
		div.row span.formbg {
		float: right;
		width: 10%;
		text-align: left;
		} 
		/*------ Form Button ------*/
		/*-- Form Button used in Contact page & all Checkout pages --*/
		.formbttn {
			cursor: pointer;
			background-color: #DDBD50;
			color: #4C0405;
			border: outset 1px #ccc;
			/*width: 40%;*/
			padding: .3em .4em;
			margin: 0 auto;
		}
		
		.formbttnoff {
			background-color: #666699;
			color: #CCCCCC;
			border: outset 1px #ccc;
			padding: 1px 2px;
		}
		/*-- end form button --*/
		 /*-- Cart Log On Form Stuff CSS --*/
		
		/* @end Cart Log On Form Stuff */
		
	/* @end  Catalog4 & Cart Mobile */	
/****************************************/	
/* @group Forms */
/*------ DDGraphics WebMedia css ------*/
/*------ 10/3/10 11:00AM ------*/
/*-- Needed in all sites that use our Forms --------*/
#frmcontainer {
	clear: both;
	width: 90%;
	margin: 0 auto;
	
	border: 1px solid #888;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;	
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	background-color: #333;
	padding: 1em;
	margin-bottom: 3em;
} 

	#frmcontainer h2 {
		font-size: 1.1em;
		margin: .5em 0em;
		color: #DDBD50;
	}
	#frmcontainer h4 {
		color: #DDBD50;
	}
	fieldset {
		clear: both;
		margin: 1em auto .5em;
		/*width: 98%;*/
		border: none;
	}
	#frmcontainer fieldset p {
		margin: 0;
		color: #DDBD50;
	}
		
	legend {
		text-align: center;
		text-transform: uppercase;
		font-size: 100%;
		background-color: #262626;
		color: #DDBD50;
		margin: 0 20%;
		padding: .1em .5em;
	}
	
	.default legend {
		display: none;
	}
	
	p {
		clear: both;
	}
	.row1 {
		padding-top: .5em;
		text-align: center;
	}

	#frmcontainer p label {
		color: #DDBD50;
		/*border: thin dashed red;*/
	}
/*-- End Our Form Stuff CSS ----*/
	/* @group log in */
	/*-- log in stuff --*/
	
	#login fieldset {
		clear: both;
		margin: 1em auto .5em;
		/*width: 98%;*/
		border: none;
	}
	
	#login label {
		color: #DDBD50;
		/*border: thin dashed red;*/
	}
	/*------ Form Button ------*/
	#login input.formbttn {
		margin: .8em auto 0 30%;
	}
	/* @end log in */

/* @end Forms */
/*---- Purple Header CSS ---- */
/*--- Chocolate Springs ---*/
/*--- All Browsers ---*/
/* Must have IE version allso */

a {
	text-decoration: none;
}
#purpleheader, #purpleheader ul {
	padding: 0;
	list-style: none;
	width: 99%;
	height: auto;
	margin: 0 auto;
}

#purpleheader  li {
	float: left;
	padding: .5em 3%;
	color: whitesmoke;
	text-align: center;
	display: block;
	/*border: 1px solid green;*/
}
#purpleheader .visited {
	font-family: sans-serif;
	color: #CCC;
	font-size: .9em;
	
}
#purpleheader .over {
	font-family: sans-serif;
	font-size: .9em;
	color: #FFFFFF;
}
#purpleheader .next {
	font-family: sans-serif;
	font-size: .9em;
	color: whitesmoke;
}
/* ---- classes only ---- */
.purpleheader {
	clear: both;
	display: block;
	width: 100%;
	text-align: center;
	height: auto;
	border-right: thin solid #000000;
	border-bottom: thin solid #000000;
	border-left: thin solid #FFFFCC;
	border-top: thin solid #FFFFCC;
	margin: 0 auto;
}
	
}

/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}