/*	
#00BC00 = Original Color
#123D12 = Low Contrast Color (lightest if given color has value above 70, darkest otherwise)
#003D00 = Low Contrast Color
#3BC63B = High Contrast Color 
#008900 = High Contrast Color (darkest if given color has value above 70, lightest otherwise)
*/


/***********************************************************
 ****************** TEMPLATE COLORS ************************
 **********************************************************/


a {
	color:#636663;
}

div {
	border: 0 solid;
	border-color: #008900;
}



.price.strike {
	color:#707070; /* TODO? */
}

.price-list {
	color:#4C4C4C;
}

.price-sale,
.price-options {
	color:#4C4C4C;
}


#header {
	background-color:#00BC00;
	border-bottom:1px solid #008900; /* NOTE: THis border was added by me */
}

#header > .name {
	color:#F9FEF9;
}



#quicksearch {
	background-color:#3BC63B;
}



#footer {
	background-color:#00BC00;
}

#footer,
#footer a {
	color:#F9FEF9;
}






/***********************************************************
 **************** NON-TEMPLATE COLORS **********************
 **********************************************************/


body {
	color:#333131;
}



/* Section containers */

.section-main,
.section-sub,
.section-content {
	background-color: #F9FEF9;
}

.section-row {
	background-color: #FEF9F9;
}

.section-main > .title {
	color:#F9FEF9;
	background-color: #00BC00;	
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00BC00), color-stop(1, #008900));
	background-image: -webkit-linear-gradient(top, #00BC00 0%, #008900 100%);
	background-image: linear-gradient(top, #00BC00 0%, #008900 100%);
}

.section-sub > .title {
	color:#F9FEF9;
	background-color: #00BC00;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #003D00), color-stop(1, #3BC63B));
	background-image: -webkit-linear-gradient(top, #003D00 0%, #3BC63B 100%);
	background-image: linear-gradient(top, #003D00 0%, #3BC63B 100%);
}


.section-main .section-row,
.section-sub .section-row,
.section-main .section-row + .section-content,
.section-sub .section-row + .section-content
.section-main .section-row + .section-sub,
.section-sub .section-row + .section-sub {
	-webkit-box-shadow: 0px 5px 10px 5px rgba(0,188,0, 0.2);
	box-shadow: 0px 5px 10px 5px rgba(0,188,0, 0.2);
}


.section-main .section-row:last-child,
.section-sub .section-row:last-child {
	-webkit-box-shadow: 0px 5px 10px 5px rgba(0,188,0, 0.2), 0px -5px 10px -5px rgba(0,188,0, 0.2) inset;
	box-shadow: 0px 5px 10px 5px rgba(0,188,0, 0.2), 0px -5px 10px -5px rgba(0,188,0, 0.2) inset;
}


.section-main > .title + .section-content,
.section-main > .title + .section-row,
.section-main > .title + .section-main > .title,
.section-main > .title + .section-sub > .title,
.section-main .section-row:first-of-type,
.section-main > .title + .section-wrapper > .section-row:first-of-type {
	-webkit-box-shadow: 0px 8px 10px -6px rgba(0,188,0, 0.2) inset;
	box-shadow: 0px 8px 10px -6px rgba(0,188,0, 0.2) inset;
}


.section-sub > .title + .section-content,
.section-sub > .title + .section-row,
.section-sub > .title + .section-wrapper > .section-row:first-of-type {
	-webkit-box-shadow: none;
	box-shadow: none;
}





/* Buttons */

button.button-primary,
button.button-secondary {
	border-color:#4C4C4C;
	background-color: #000000;
	color:#FEFEFE;
	text-shadow:1px 1px 0 rgba(102,102,102,0.7);
	
	-webkit-box-shadow:  0 0 3px rgba(153,153,153,0.3), 0 0 5px rgba(0,0,0,0.7) inset;
	box-shadow: 0 0 3px rgba(153,153,153,0.3), 0 0 5px rgba(0,0,0,0.7) inset;
	
	/* Purposely all transparencies, to allow background color to dictate color */
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.7)), to(rgba(64,64,64, 0.4)), color-stop(0.5,rgba(255, 255, 255, 0)), color-stop(0.5,rgba(64,64,64, 0)));
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 50%, rgba(64,64,64, 0) 50%, rgba(64,64,64, 0.4) 100%);
	background-image: linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 50%, rgba(64,64,64, 0) 50%, rgba(64,64,64, 0.4) 100%);
}



/* List */
div.list {
	background-color:#FEF9F9;
}

div.list div.list-item {
	background-color:#F9FEF9;
	border-color:#4C4C4C;
	color:#333131;
	text-shadow:1px 1px 0 rgba(0,188,0,0.25);
}

div.list .indicator {
	color:#000000;
}





/* Input, Select Box, Textarea */

div.form-entry div.field input,
div.form-entry div.field textarea,
div.form-entry div.field select,
input.form-field,
select.form-field,
textarea.form-field {
	background-color:#F9FEF9;
	border-color: #003D00;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.75), 0 1px 2px rgba(0,0,0,0.5) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,0.75), 0 1px 2px rgba(0,0,0,0.5) inset;
}




/* Popin */

.popin-container {
	background-color:#ccc; /* TODO */
	-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.3) inset, 0 -5px 5px rgba(0,0,0,0.3) inset; /* TODO */
	box-shadow: 0 5px 5px rgba(0,0,0,0.3) inset, 0 -5px 5px rgba(0,0,0,0.3) inset; /* TODO */
}

.popin {
	border-color:#A7A7A7; /* TODO */
	background-color:#fff; /* TODO */
}

.popin > .title-container {
	border-color:#a7a7a7; /* TODO */
}



/* Header */
/* DO NOT CHANGE COLORS */

#header > .aux {
	border-color:#bdbdbd;
	background-color:#d14c22;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #dedede));
	background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #dedede 100%);
	background-image: linear-gradient(top, #FFFFFF 0%, #dedede 100%);
}

#header > .aux > .cart {
	border-color:#bdbdbd;
}

#header .num-in-cart {
	color:#fff;
	background-color:#fefefe;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e05721), color-stop(1, #be3e23));
	background-image: -webkit-linear-gradient(top, #e05721 0%, #be3e23 100%);
	background-image: linear-gradient(top, #e05721 0%, #be3e23 100%);
}

































/**************************************
		Page specific CSS
**************************************/



/* Product Page */
/* DO NOT CHANGE COLORS */

.product-filmstrip {
	background-color: #CCCCCC;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CCCCCC), color-stop(1, #FEFEFE));
	background-image: -webkit-linear-gradient(top, #CCCCCC 0%, #FEFEFE 100%);
	background-image: linear-gradient(top, #CCCCCC 0%, #FEFEFE 100%);
}

.product-filmstrip img {
	border-color:#000000;
}