/* Styles for content pages */
/************************************************************
Breadcrumbs */
ul#breadcrumb{
	list-style: none;
	padding: 20px 0 10px 20px; 
	margin: 0;
}
#breadcrumb li{
	display: inline-block;
	vertical-align: middle;
	padding: 3px 2px;
}

#breadcrumb li:before{
	font-size: 10pt;
	content: '\00BB';
	position: relative;
	padding-right: .5em;
}

#breadcrumb li:first-child:before {
	display: none;
}

/************************************************************
Banners */

#banner {
	position:relative;
	background-repeat:no-repeat;
	background-position:center center;
	width: 903px;
	height: 330px;
}
#banner>a {
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
}

#banner .nivo-controlNav {
	display: none;
}

#bannerSlider {
	margin:auto;
	width:903px;
	background-color: #ffffff;
}
#bannerSlider img {
	display:none;
}
#bannerSlider>img:first-child,
#bannerSlider>a:first-child>img {
	display:block;
}
#bannerSlider .nivo-controlNav {
	display:none;
}
#bannerSlider .nivo-directionNav a {
	top:50%;
	margin-top:-22px;
	width:20px;
	height:44px;
	text-indent:-9999px;
}
/*#bannerSlider .nivo-prevNav {
	background:transparent url('../images/icons/slider-arrow-left.png') no-repeat right center;
	left:-32px;
}
#bannerSlider .nivo-nextNav {
	background:transparent url('../images/icons/slider-arrow-right.png') no-repeat left center;
	right:-32px;
}
*/

/*Coupon Callout*/
#coupon {
	position: relative;
	background: transparent url('../images/site/coupon_popcorn.png') no-repeat right top;	
	padding:5px;
	
}

/************************************************************
Popcorn Slider (home) */
#noSlider {
	background-color: #ffffff;
}

#slider {
	position: relative;
	background-color: #FCF9F5;	
	width: 95%;							
}
#slider:before {
	background: -webkit-radial-gradient(center top , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	background: -moz-radial-gradient(center top , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	background: -o-radial-gradient(center top , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	background: -ms-radial-gradient(center top , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	background: radial-gradient(center top , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	top: 0;
	content: " ";
	height: 1em;
	left: 5%;
	position: absolute;
	width: 90%;
}

#slider:after {
	background: -webkit-radial-gradient(center bottom , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	background: -moz-radial-gradient(center bottom , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	background: -o-radial-gradient(center bottom , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	background: -ms-radial-gradient(center bottom , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	background: radial-gradient(center bottom , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	bottom: 0;
	content: " ";
	height: 1em;
	left: 5%;
	position: absolute;
	width: 90%;
}

#slider>div{
	overflow: hidden;
	height: 135px;
	width: 900px;
	white-space: nowrap;
	margin-left: 0;
}
#slider-prev,
#slider-next {
	display: block;
	position: absolute;
	top:2em;
	width: 40px;
	height: 80px;
}
#slider-prev {
	left: 0em;
}
#slider-next {
	right: 0em;
}

#slider ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#slider li{
	display: inline-block;
	vertical-align: middle;
}
#slider li a{
	color: #5a4a43;
	display: block;
	margin: 0 0.7em;
}
#slider li img {
	display: block;
	max-height: 130px;
	margin: auto;
}
/************************************************************
Main Layouts*/
#mainContent {
	width: 880px;
	margin: 0 auto;
	padding:0;
}

.main {
	position: relative;
	width: 46%;
	margin:1em 0;
	padding: 0 2em;
}

.main>a {
	color:#d8ac5f;
	position: relative;
}
.main>a:after{
	content: url('../images/icons/yellow-arrow.png');
	position: absolute;
	width:20px;
	height: 20px;
	padding: 5px;
	left:365px;
	bottom:-7px;
}

/************************************************************
/*Side Nav (flavors) */
#customTin {
	padding:60px 10px;
}
#customTin:after{
	content: url('../images/site/bucketCorn.png');
	position: absolute;
	bottom:35px;
	right:15px;
}
#customTin p{
	width: 50%;	
	margin: 2em 0;
}
#customTin a:hover{
	color: #a62c33;
}

/****************************************************************
Side Navigation*/
.sidebar {
	background: #fdfaf5;
	border: 1px solid #ddb67c;
	border-radius: 8px;
	font:13.5pt/1.4 Futura,Arial,Helvetica,sans-serif;
	color: #6e6e6e;
	min-height: 300px;

}
.sidebar h2{
	border-bottom: 1px solid #ddb67c;
	width:75%;
	text-align: center;
	padding: 10px 16px;
	margin:6px 14px;
	letter-spacing: 2px;
}
.sidebar ul{
	list-style: none;
	margin: 0;
	padding: 10px;
}
ul#category-nav li{
	padding: 6px 0 6px 6px;
}

ul#category-nav a {
	display: block;
	width: 100%;
}


/*selected navigation*/
ul#category-nav li.sel {
	position: relative;
	background-color: #fff;
	border: 1px solid #ddb67c;
	border-right:none;
	padding:5px;
	border-radius: 8px 0 0 8px;
	width: 170px;
}
ul#category-nav li.sel:after{
	content: url('../images/icons/white-button-right.png');
	position: absolute;
	top:-1px;
	left:179px;
}



/**********************************************************
Categories - product list*/
ul.prodList {
	list-style: none;
	padding: 0;
	margin: 2em 5px;
}
.prodList li{
	display: inline-block;
	vertical-align: top;
	width:48%;
}
.prodList li img{
	width: 41%;
	vertical-align: middle;
	padding: 5px;

}
.prodList li p{
	font-weight: bold;
	display: inline-block;
	padding: 4px;
	width:50%;
}
.prodList span{
	padding: 8px;
	position: relative;
	top:-35px;
	left:125px;
	color: #7A1215;
}

/******************************************/
#content>div>div.rightCol {
	padding-left: 18px;
	padding-right: 18px;
	padding-top: 0;
	margin-top: 13px;
	border-radius:10px 10px 0 0;
}
.rightCol h1.banner {
	display: inline-block;
	vertical-align: top;
	color:#ddb67c;
	font-size: 35pt;
}
.paging{
	list-style: none;
	/*border-top: 1px solid #DDB67C;*/
}

/**********************
Categories/Flavors page*/

.catDescrip{
	border-top: 1px solid #DDB67C;
	border-bottom: 1px solid #DDB67C;
	font-size: 12pt;
	padding: 10px 0;
	margin:10px 0;
}	
dl.catList dt{
	margin: 0.7em 0 0;
	position: absolute;
	text-align: center;
	width: 11em;
}
d.catList dd img {
	max-height: 6em;
	max-width: 12em;
}
.catList dd:first-child,
.catList dt:first-child+dd{
	border-top:medium none;
}
.catList dt+dd {
	padding-left: 15em;
}
.catList dd {
	border-top:1px dotted #A5A5A5;
	margin: 0;
	min-height: 6em;
	padding: 0.5em 1em 1em;
}
.catList a{
	color: #7A1215;
}
/******************************
Product Detail*/
.prodDetail>div.leftCol{
	width: 58%;
}
.prodDetail>div.rightCol{
	width: 35%;
	padding-right: 0;
}
.prodDetail>div.leftCol h1{
	font-size: 30pt;
	margin: 0 0 1em 0;
}
.add2cart input[type="submit"]{
	background:url('../images/icons/red-arrow.png') no-repeat;
	padding: 11px 35px 11px 11px;
	cursor: pointer;
}

.prodDetail label {
	font-weight: bold;
}

.prodDetail input[type="radio"] + label {
	font-weight: normal;
}

ul.lightbox {
	list-style: none;
	width: 60%;
}
ul.lightbox li:first-child img {
	width:450px;
}
ul.lightbox li {
	display:inline-block;
	vertical-align:top;
}
/* -- Add to Cart*/
#prodForm {
	padding: 7px;
	width: 90%;
}
#prodForm p{
	padding: 5px 0;
}
#qty{
	width: 25%;
}
#inventoryCount{
	display: none;
}
#outOfStock {
	display: block;
}

/* -- Selected Tin Display*/
#tin-option-field {
	border: 1px solid #DDB67C;
	border-radius: 10px;
}

#tin-option-field a, #tin-option-field-sel a {
	color: #E9CC74;
}

#tin-option-field .leftCol {
	padding-right: 0px;
	width: 35%;
}

#tin-option-field .rightCol {
	box-shadow: none;
	width: 47%;
}

#tin-option-field .tin-name {
	font-weight: bold;
	display: block;
}

#tin-option-field .tin-size {
	display: block;
}

#tin-option-field a.button {
	margin-top: 1em;
}

#tin-option-field img {
	max-width: 100%;
}

/* Buttons are unique for the tin options - got a good global color name? */
#tin-option-field a.button, #tin-option-field-sel a.button {
	color: #FFF;
	background-color: #D7AC5F;
}

/************************************************************
Tin Modal Pop Up */

.tin-modal-container > small{
	font-size: 10pt;
}

.tin-modal-container ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tin-modal-container ul li {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	margin-left: 10px;
    margin-bottom: .5em;
    border: 2px solid #FFF;
    width: 150px;
}

.tin-modal-container ul img {
    display: block;
    max-width: 150px;
    margin:0 auto;
}

.tin-modal-container ul li:hover {
    border-radius: 10px;
    border: 2px solid #E9CC74;
}

.tin-modal-container ul li:hover img {
	border-radius: 10px;
}

/************************************************
Shopping Cart*/
.leftPad p:first-child{
}
.leftPad h1{
	color:#DDB67C;
	font-size: 25pt;
}
table.cart>thead>tr{
	background: #DDB67C;
	font:12pt/1.2 Futura, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

/*Static Pages*/
#static-pages {
	background-color:#ffffff;
	/*position: relative;
	display: inline-block;
	vertical-align: top;
	box-shadow:4px -8px 10px #f4f2f2;
	width: 60%;
	margin:13px 0 1em 1em;
	padding:15px;
	border-radius: .4em;*/
}
#static-pages a{
	color: #DDB67C !important;
}
#static-pages h2{
	font-size: 16pt;
}
#static-heading {
	border-bottom: 1px solid #DDB67C;
}
#static-heading h2{
	display: inline-block;
	vertical-align: top;
	color:#ddb67c;
	width:54%;
	font-size: 27pt;
}
#static-heading>img{
	display: inline-block;
	vertical-align: top;
}
#static-pages ul{
	list-style: none;
	margin:0;
	padding: 0;
}
#static-pages>div{
	padding-top: 1em;
}

.arrow {
	display: inline-block;
    margin-right: 1.3em;
    position: relative;
}
.arrow:after {
	background: url("../images/icons/yellow-arrow.png") no-repeat scroll right center transparent;
	margin: 0 -1em 0 5px;
    position: absolute;
    width: 16px;
    height: 20px;
    content: "";
}

div.fundCallout img{    /*(fundraising page)*/
	display: inline-block;
	vertical-align: middle;
	width:125px;
}
.fundCallout p{
	/*font:12pt/1.2 Futura, Arial, Helvetica, sans-serif;
	margin-bottom: 40px;*/
	display: inline-block;
	vertical-align: top;
	width:75%;
}

.callout-static {    /*(about page)*/
	background: none repeat scroll 0 0 #FDFAF5;
	padding: 20px;
	border-radius: 0.6em 0.6em 0.6em 0.6em;
}
	
.callout-static strong{
	color: #7B1315;
}


/* Input styles*/
.flavorAmt {
	background: #fafafa;
	border: 1px solid #e3dcd0;
	border-radius: 8px;
	padding: 7px;
	font-size: 11pt;
	color: #767779;
}
.flavorAmt optgroup{
	background: #fafafa;
	border: 1px solid #e3dcd0;
	padding: 3px;
}

/************************************************************
Order Preview */
#orderPreview {
	display:inline-block;
	vertical-align: top;
	margin: 0 20px 0 39px;
	width: 37%;
}
#orderPreview>div{
	border: 1px solid #ecd5ae;
	border-radius: 8px;
	min-height: 100px;
	min-width: 100px;
	padding: 12px 15px;
	margin:20px 0;
}
.fillTin img{
	width: 50%
}

/************************************************************
Contact Page */

#contact-page .sidebar {
	font-size: 10pt;
}

/************************************************************
Call Outs */

.callout {
	position: relative;
	background: #fcf8f2;
	border:1px solid #ddb67c;
	border-radius: 8px;
	margin: 1em 0;
	padding:17px 1em 7px;
	font:12pt/10px Sanchez, 'Arial', Helevetica, sans-serif;
}

.callout a{
	margin:12px 0;
	
}
.callout h3{

	font: 20pt/40px Sanchez, 'Arial', Helevetica, sans-serif;
	padding: 5px 5px 5px 0;
}
.callout h4{
	font: 12pt/23px Sanchez, 'Arial', Helevetica, sans-serif;
	
}
.colCallout {
	width: 42%;
	display: inline-block;
}

/************************************************************
Create Tin */


#page-create-tin h1 {
	color:#d9ae5f;
	margin:0.5em 0.2em;
	font-size:22.5pt;
	padding-bottom:0.2em;
	border-bottom:1px solid #e6c998;
}

#page-create-tin .disable {
	opacity: .4;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#page-create-tin .disable a {
	cursor: default;
}

/* Sidebar */
#page-create-tin .sidebar {
	text-align:center;
	max-height:720px;
	overflow:hidden;
}

#page-create-tin #prod-list {
	position: relative;
}

#page-create-tin #prod-list li {
	z-index: 25;
	position: relative;
}
#page-create-tin #prod-list ul {
	margin:0;
	padding:0;
}
#page-create-tin #prod-list a,
#page-create-tin .ui-draggable-html.ui-draggable-dragging a {
	display:block;
	position:relative;
	padding:0 0 0 100px;
	min-height:80px;
}
#page-create-tin #prod-list img,
#page-create-tin .ui-draggable-html.ui-draggable-dragging img {
	position:absolute;
	max-width:100px;
	left:0;
	top:0;
}
#page-create-tin #prod-list strong,
#page-create-tin .ui-draggable-html.ui-draggable-dragging strong {
	display:table-cell;
	text-align:left;
	vertical-align:middle;
	height:100px;
	width:110px;
	font-size:10pt;
	line-height:1.3;
	color:#616264;
}


#page-create-tin .ui-draggable-html.ui-draggable-dragging {
	z-index: 30;
	background-color: #FFF;
}

#page-create-tin .sidebar>div {
	position:relative;
	overflow:hidden;
	height: 535px;
}
#page-create-tin #slider-prev,
#page-create-tin #slider-next {
	position:absolute;
	background:transparent url('../images/icons/slider-arrows.png') no-repeat center top;
	z-index:30;
	width:100%;
	height:39px;
	left:0;
	text-align:left;
	text-indent:-9999px;
	outline:none;
}
#page-create-tin #slider-prev {
	background-position:center bottom;
	top:0;
}
#page-create-tin #slider-next {
	/*bottom:0; I cannot for the life of me figure out why this does not work */
	top:100%;
	margin-top:-39px;
}
#page-create-tin .ui-draggable:hover {
	-moz-box-shadow: 0 0 1em #CCC;
	-webkit-box-shadow: 0 0 1em #CCC;
	box-shadow: 0 0 1em #CCC;
}
#page-create-tin .ui-draggable a {
	cursor:hand;
	cursor:grab!important;
	cursor:-moz-grab;
	cursor:-webkit-grab;
}

#page-create-tin .ui-draggable-dragging {
	background-color: #FFFFFF;
	width: 230px;
	-moz-box-shadow: 0 0 1em #CCCCCC;
	cursor:hand;
	cursor:grabbing!important;
	cursor:-moz-grabbing;
	cursor:-webkit-grabbing;
}

/* Steps */
#tin-steps {

}
#tin-steps li {
	color:#7b1417;
	font-size:21pt;
	clear:left;
}
#tin-steps p {
	color:#959596;
	font-size:12pt;
}

#tin-steps li:first-child {
	float:left;
	width:45%;
	border-right:1px solid #f0dfc2;
}
#tin-steps li:first-child+li {
	float:right;
	clear:none;
	width:45%;
}

#tin-steps li:first-child+li+li {
	position:relative;
	padding-top:3em;
}
#tin-steps li:first-child+li+li:before {
	content:' ';
	position:absolute;
	height:0.4em;
	width:90%;	
	left:5%;
	top:1em;
	border-top:1px solid rgba(0, 0, 0, 0.05);

	background:-webkit-radial-gradient(center top , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	background:-moz-radial-gradient(center top , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	background:-o-radial-gradient(center top , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	background:-ms-radial-gradient(center top , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
	background:radial-gradient(center top , ellipse farthest-side, rgba(0, 0, 0, 0.15), transparent) repeat scroll 0 0 transparent;
}

/* Tin Preview */
#create-tin-canvas {
	background: transparent url('../images/site/tin.jpg') no-repeat scroll center center;
	width: 308px;
	height: 308px;
}

/* Details */
#form-create-tin table {
	font-size:10pt;
	color:#959596;
	width:205px;
	float:right;
	border:1px solid #ecd5ae;
	border-top:none;
	border-radius:0 0 0.3em 0.3em;
	border-collapse:collapse;
}
#form-create-tin caption {
	font:13.5pt/1.3 Sanchez,Arial,Helvetica,sans-serif;
	color:#9e1b1f;
	text-align:left;
	padding:0.3em 0.5em;
	border:1px solid #ecd5ae;
	border-bottom:none;
	border-radius:0.3em 0.3em 0 0;
}
#form-create-tin tr:nth-child(odd) {
	background:#fcf8f2;
}
#form-create-tin th,
#form-create-tin td {
	text-align:left;
	vertical-align:top;
	padding:0.6em 0.7em;
}
#form-create-tin td[colspan]:first-child {
	padding-left:1.5em;
}

#form-create-tin .prev-popcorn3 {
	display: none;
}

#form-create-tin tr.empty a.icon.delete {
	display: none;
}

#form-create-tin > p {
	text-align: right;
}

#modal-tin-list {
	display:none;
}



/************************************************************
Icons */

.icon {
	display:inline-block;
	text-align:left;
	outline:none;
	text-indent:-9999px;
	height:16px;
	width:16px;
	background:transparent none no-repeat center center;
}
.icon.edit { background-image:url('../images/icons/edit.png'); }
.icon.delete { background-image:url('../images/icons/delete.png'); }

/* Google map */
#map-canvas {
	margin:1em 0;
	height:250px;
	width:90%;
	border:0.5em solid #fff;
	border-radius:0.4em;
	box-shadow:0 0 0.3em rgba(0,0,0,0.2);
}

.desc {
	margin-right: 18px;
}