/* ==== Font Styles - BEGIN ==============================================================================*/
@import url('/stylesheets/font_sizes.css'); /* NS4 can't see */

body, div, p, th, td, li, dd    {
    /* redundant selectors to help NS4 remember */
    font-family:  Verdana, sans-serif;
    font-size:    11px;
}
/* ^^^^ Font Styles - END ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

/* ==== Element Styles - BEGIN ===========================================================================*/
* {
margin:0;
padding:0;
border-collapse: collapse;
border-spacing: 0;
}

body { background-color: #fff; color: #5b441a; }

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
}

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

a:link, a:visited, a:hover { color: #689633; text-decoration: none;}
a:hover { color: #689633; text-decoration: underline;}

img {
	border: 0;
}

h1, h2, h3, h4, h5 {
	margin: 0.5em 0;
}

h1 {
	margin-bottom: 1em;
}

ul, ol {
	margin-left: 1.5em;
	padding-left: 1.5em;
}

p {
	margin: 1em 0;
}

#main ul, #main ol {
	margin-top: 1em;
	margin-bottom: 1em;
}

table {
	border-spacing: 1px;
	border-collapse: separate;
	padding: 2px;
}
th {
	background-color: #35614A;
	color: #EAF3D8;
	text-align: left;
}
th, td {
	padding: 5px;
}
tr.even td, tr td {
	background-color: #fff;
}
tr.odd td {
	background-color: #EAF3D8;
}

td.center {
	text-align: center;
}

option {
	padding: 0 5px 0 3px;
}

label {
	font-weight: bold;
}
/* ^^^^ Element Styles - END ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/


/* ==== Flash Styles - BEGIN =============================================================================*/
#flash_success, .message_success {
	border-top: 2px solid #009900;
	border-bottom: 2px solid #009900;
	background-color: #ccffcc;
	padding: 5px;
	margin-bottom: 10px;
}
#flash_notice, .message_notice {
	border-top: 2px solid #cc9933;
	border-bottom: 2px solid #cc9933;
	background-color: #ffffcc;
	padding: 5px;
	margin-bottom: 10px;
}
#flash_error, .message_error {
	border-top: 2px solid #cc0000;
	border-bottom: 2px solid #cc0000;
	background-color: #ffcccc;
	padding: 5px;
	margin-bottom: 10px;
}
/* ^^^^ Flash Styles - END ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/

a.small {
	font-size: 0.8em;
	font-weight: normal;
}

/* ==== Error Styles - BEGIN =============================================================================*/
.fieldWithErrors input, .fieldWithErrors textarea {
  background-color: #ff9999;
}

#errorExplanation {
	border-top: 2px solid #cc0000;
	border-bottom: 2px solid #cc0000;
  padding: 5px;
  margin-bottom: 20px;
	background-color: #ffcccc;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  font-size: 14px;
	color: #cc0000;
	margin: 0;
	margin-bottom: 10px;
}

#errorExplanation p {
  color: #000;
  margin: 5px 0;
}

#errorExplanation ul li {
	color: #000;
}
/* ^^^^ Error Styles - END ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/


/* ==== Status/Progress Styles - BEGIN ===================================================================*/
div.uploadStatus {
  margin: 5px;
}

div.progressBar {
  margin: 5px;
}

div.progressBar div.border {
  background-color: #fff;
  border: 1px solid #c0c0c0;
  width: 100%;
}

div.progressBar div.background {
  background-color: #5b441a;
  height: 18px;
  width: 0%;
}
/* ^^^^ Status/Progress Styles - END ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/


/* ==== Menu Styles - BEGIN ==============================================================================*/
ul.horizontal-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.horizontal-menu li {
	float: left;
	display: block;
}

ul.inline-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.inline-menu li {
	display: inline;
	padding: 0 4px;
}
/* ^^^^ Menu Styles - END ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/


/* ==== Tab Styles - BEGIN ===============================================================================*/
ul.tabs {
	background: transparent url("/images/35614a_1px.png") repeat-x bottom; /* bottom line */
	margin-bottom: 5px;
}

ul.tabs li {
	margin: 0;
	margin-right: 5px;
}

ul.tabs li a {
	display: block;
	position: relative;
	height: 24px;
	line-height: 24px;
	width: 111px; /* default width */
	overflow: hidden;
	font-size: 11px;
	background-color: #7bab4a;
	color: #ffffff;
	text-decoration: none;
}
ul.tabs li a span.text {
	padding-left: 5px;
	color: #ffffff;
}

/* Design Styles (Materials) Tab */
ul.tabs li.tab-materials .overlay {
	background-image: url("/images/tab-design-styles.png");
}

/* Design Options (Parts) Tab */
ul.tabs li.tab-parts a {
	width: 122px; /* non-default width */
}
ul.tabs li.tab-parts .overlay {
	background-image: url("/images/tab-design-options.png");
}

/* Your Wording Tab */
ul.tabs li.tab-wording .overlay {
	background-image: url("/images/tab-your-wording.png");
}

/* Design Extras Tab */
ul.tabs li.tab-extras {
	margin-right: 0; /* last in line */
}
ul.tabs li.tab-extras .overlay {
	background-image: url("/images/tab-design-extras.png");
}

/* Overlay setup */
span.overlay {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;
}

/* Hover State */
ul.tabs li a:hover .overlay {
	background-position: 0 -24px;
}
ul.tabs li a:hover {
	background-color: #dce9cd;
	color: #35614A;
}
ul.tabs li a:hover span.text {
	color: #35614A;
}

/* Active State */
ul.tabs li.active a .overlay { 
	background-position: 0 -48px !important; /* important to override :hover in IE6 */
}
ul.tabs li.active a {
	background-color: #dce9cd;
	color: #35614A;
}
ul.tabs li.active a span.text {
	color: #35614A;
}

/* ^^^^ Tab Styles - END ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/


a.button, .option-set-button {
	padding: 1px 5px;
	background-color: #EAF3D8;
	color: #35614A;
	border: 1px solid #35614A;
	margin: .3em 0;
}


/* "Vertical" Tables (for info presentation) */
table.vertical {
	border-spacing: 0;
}

table.vertical td, table.vertical th {
	border-bottom: 1px solid #BFDA95;
}

table.bare {
	background-color: transparent;
}
table.bare th {
	font-weight: normal;
}
table.bare td {
	vertical-align: top;
}
td.default_padding {
	padding: 10px;
}

.handle {
	cursor: move;
}

.small {
	color: #5b441a;
	font-size: 0.8em;
}
p.small {
	line-height: 1.3em;
}

.indented {
	margin-left: 40px !important;
}

.transparent {
	background-color: transparent !important;
}

a.removable {
	text-decoration: none;
}

a.removable:hover {
	text-decoration: line-through;
}

input.button-go, a.button-go {
	border: 1px solid #5b441a;
	border-top: 1px solid #7e6b48;
	border-left: 1px solid #7e6b48;
	color: #ffffff;
	background-color: #8cb75a;
	padding: 2px 7px;
	cursor: pointer;
	font-size: 12px;
	margin-right: 7px;
}
a.button-go {
	display: block;
	white-space: nowrap;
	text-decoration: none;
	float: left;
}
a:hover.button-go {
	background-color: #689633;
}

.required {
	color: #bb0e0e;
}

table.personalization-choices {
	width: 100%;
}

table.personalization-choices td {
	vertical-align: top;
	text-align: center;
	padding: 5px 0;
}

.saved-item {
	border: 1px solid #8cb75a;
	padding: 5px;
}

.builder-item-output form.button-to {
	float: left;
	margin: 10px 10px 0 0;
}

.disclosure-closed {
	padding-left: 15px;
	background: transparent url("/images/icons/disclosure-triangle.png") no-repeat left top;
}

.disclosure-opened {
	padding-left: 15px;
	background: transparent url("/images/icons/disclosure-triangle.png") no-repeat left -100px;
}

.cart {
	background-color: #b3d88c;
	padding: 3px;
	width: 762px; /* 768-6 */
	margin: 1em 0;
}

.cart td, .cart .cell {
	padding: 5px;
	background-color: #fff;
	vertical-align: top;
	border-bottom: 2px solid #b3d88c;
}

.cart .odd td {
	background-color: #fff;
}

.cart .even td {
	background-color: #eeffdb;
}

.cart .total td {
	background-color: #b3d88c;
	padding: 0 5px;
}

.cart .empty {
	text-align: center;
}

.cart h3 {
	margin-top: 0;
}

.cart .button-to {
	margin: 4px 0;
}

.cart .thumbnail {
	float: right;
}

.cart td.actions {
	width: 10%;
}
.cart td.product-info {
	width: 60%;
}
.cart td.price {
	width: 15%;
}
.cart td.subtotal {
	width: 15%;
}
.cart td.total {
	font-weight: bold;
}

.cart .total td.subtotal {
}

.cart .total td.price, .cart .total td.subtotal, .cart .total td.product-info {
	text-align: right;
}

.checkout .addresses td {
	vertical-align: top;
}
.checkout .addresses td.billing {
	padding: 0 5px 0 0;
}
.checkout .addresses td.shipping {
	padding: 0 0 0 5px;
}

ul.table-like-list {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}

ul.table-like-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.table-like-list li.tr {
	display: block;
	margin: 0.3em 0;
}

ul.table-like-list li.td {
	float: left;
	width: 10em;
}

.bullet-like-check {
	padding-left: 20px;
	text-indent: -20px;
}

.highlight {
	background: #ffff99;
	color: #990000;
}

/* Generic stylings */
.rightgutter {
	margin-right: 1.5em;
}

.floatleft {
	float: left;
}

.breadcrumb {
	font-size: 1.2em;
	font-weight: bold;
	color: #689633;
	margin-bottom: 1em;
}

.image-left {
	float: left;
	clear: left;
	margin: 5px 10px 5px 0px;
}

.image-right {
	float: right;
	clear: right;
	margin: 5px 0 5px 10px;
}

.pagination-wrapper .page-entries {
	float: right;
}
.pagination-wrapper {
	margin-top: 1em;
	margin-bottom: 2em;
}

.pagination {
	font-weight: bold;
	margin: 1em 0;
}

table.builder-item-details {
	border-spacing: 0;
	border-collapse: collapse;
	background-color: transparent;
	padding: 0;
}

table.builder-item-details th, table.builder-item-details td {
	font-size: 0.85em;
	background-color: transparent;
	vertical-align: top;
	padding: 5px 0 1px 0;
}
table.builder-item-details th {
	font-weight: bold;
	text-align: right;
	padding-right: 5px;
	color: #689633;
	width: 220px;
	border-bottom: 1px dotted #689633;
	border-right: 1px dotted #689633;
}
.cart table.builder-item-details th {
	width: 130px;
}

table.builder-item-details td {
	padding-left: 5px;
	border-bottom: 1px dotted #689633;
	color: #5b441a;
}

table.builder-item-details td p {
	margin: 0 0 1em 0;
	font-size: inherit;
}

div.builder-item-details h4 {
	font-size: 1em;
	border-bottom: 1px solid #5b441a;
}

.draggable-wrapper {
	float: left;
	padding: 10px;
}

.draggable-container {
	width: 350px;
	border: 1px solid #ccc;
	padding: 10px;
}

ul.draggable {
	margin: 0;
	padding: 5px;
	list-style: none;
}
ul.draggable li {
	padding: 5px 0;
	margin: 0;
	list-style: none; 
	cursor: -moz-grab; 
}
.draggable-wrapper .hover { 
background-color: #ddd; 
} 

/* Saved Items */
.builder-item-output {
	margin: 1em 0;
	border: 1px solid #8cb75a;
	padding: 10px;
}

.builder-item-output .product-image {
	float: right;
}
.builder-item-output .product-name {
	font-size: 1.5em;
	font-weight: bold;
	color: #8cb75a;
}

/* Swatches */
#swatch-page {
	padding-bottom: 10px;
}

#swatch-page table td, #swatch-page table th {
	padding: 0;
}

#swatch-page ol {
	margin-left: 1.5em;
	padding-left: 1.5em;
}

#swatch-pallette {
	width: 525px;
	float: left;
}

#swatch-labels {
	width: 243px;
	float: right;
}

#swatch-pallette .swatch-holder {
	float: left;
}

#swatch-pallette .swatch {
	position: relative;
}

#swatch-pallette .swatch .index {
	position: absolute;
	bottom: 3px;
	right: 3px;
	background-color: #5b441a;
	color: #fff;
	font-size: 0.7em;
	line-height: 1em;
	font-weight: bold;
	padding: 0 3px;
}

#swatch-page .fonts .swatch .index,
#swatch-page .motifs .swatch .index {
	background-color: transparent;
	color: #666;
	border: 1px solid #666;
}

hr.separator {
	border: 0;
	border-bottom: 1px solid #b3d88c;
	color: #b3d88c;
	margin: 0.5em 0;
}

/* ===== BUTTONS =========================================================================================*/

/* Buttons created and styled a'la http://particletree.com/features/rediscovering-the-button-element/  */
.buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* STANDARD */
button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* POSITIVE */
button.positive, .buttons a.positive{
    color:#689633;
}
.buttons a.positive:hover, button.positive:hover{
    background-color:#ecf6e2;
    border:1px solid #b3d88c;
    color:#689633;
}
.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

/* NEGATIVE */
.buttons a.negative, button.negative{
    color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}
/* ^^^^^ END BUTTONS ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^*/