body {
    margin: 0;
    padding: 0;
    background: #EEF1E2;
    color: #000;
    font-family: arial, verdana, tahoma, times new roman;
    font-size: 80%;
}

a {
    /* text-decoration: none; */
    color: #6D7E34;
}

a:hover {
    /* text-decoration: none; */
    color: #1F4530;
}

img {
    border: 0;
}

#container {
    margin: 0 auto;
    width: 85%; /* change this to what ever percentage you like if you want a liquid layout or if you want a fixed size use for example 800px */
}

#image {
    width: auto;
    height: 150px;
    background: #FFF url('../images/symaralogo.jpg') no-repeat;
}

#image h1 {
    margin: 0;
    padding: 40px 20px 0 0;
    color: #4E9C2F;
    text-align: right;
    letter-spacing: -2px;
    font-size: 350%;
    font-weight: normal;
}

#image h2 {
    margin: -8px 0 0 0;
    padding: 0px 17px 0 0;
    color: #1F4530;
    text-align: right;
    letter-spacing: 1px;
    font-size: 175%;
    font-weight: normal;
}

#header {
    width: auto;
    height: 50px;
    background: #83C240;
    border-top: 1px solid #FFF;
}

#menu {
    float: right;
    width: auto;
    height: 50px;
    letter-spacing: -1px;
    font-weight: bold;
    font-size: 125%;
    color: #FFF;
    background: #83C240;
}

#menu a {
    text-decoration:none;
    color:#FFF
}

#menu ul {
    margin: 15px 0 0 0;
    padding: 0 20px 0 0;
}

#menu li {
    display: inline;
    padding: 0 0 0 15px;
}

#menu .active a {
    text-decoration: none;
    color: #6D7E34;
}

#menu a:hover {
    color: #6D7E34;
}

/* Begin crazy customisations */

#sidebar {
    float: right; /* this element must precede in the source order any element you would like it be positioned next to */
    width: 23%; /* since this element is floated, a width must be given */
    background: #FFF; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 0; /* top and bottom padding create visual space within this div */
    border-left: 1px solid #D3DEAD;
    border-bottom: 1px solid #D3DEAD;
}

#sidebar p, #sidebar h3 {
    margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
    margin-right: 10px;
}

/* End crazy customisations */
  
#content {
    width: auto;
    height: auto;
    background: #FFF;
    padding: 15px;
    line-height: 160%;
}

#content h2 {
    padding: 0 0 5px 0;
    margin: 0 0 10px 0;
    font-size: 140%;
    letter-spacing: -1px;
    font-weight: normal;
    color: #6C7D33;
    border-bottom: 1px solid #D3DEAD;
}

#content p {
    margin: 0 0 15px 0;
    padding: 0;
}

#content img {
    /* float: right; */
    border: 1px solid #CCC;
    padding: 5px;
    margin: 0 0 0 15px;
}

#footer {
    width: auto;
    height: 35px;
    background: #DDE3C4;
    border-top: 3px solid #EEF1E2;
    color: #B6C879;
}

#footerleft {
    float: left;
    width: 100%; /* change this percentage to fit any text in either footer div - the below will auto change (width: auto) */
    text-align: left;
    padding: 1% 2%;
}

#footerleft a {
    text-decoration: none;
    color: #6C7D33;
    margin: 0 5px;
}

#footerleft #nomarginleft {
    margin: 0 10px 0 0;
    letter-spacing: -1px;
}

#footerright {
    float: right;
    width: auto;
    text-align: right;
    padding: 1% 2%;
}

#footer p {
    margin: 0;
    padding: 0;
    letter-spacing: -1px;
    color: #B6C879;
}

#footer a {
    text-decoration: none;
    color: #6C7D33;
}

#footer a:hover {
    text-decoration: underline;
    color: #6C7D33;
}

div.row {
    clear: both;
    padding-top: 10px;
}

div.row label {
    float: left;
    text-align: right;
    width: 35%;
    margin-right: 5px;
    padding-right: 5px;
}

div.row input, div.row select  {
    text-align: left;
}

.register_form {
    width: 40%;
}

/*retail order form selects */
.qty {
    width: 41px;
}

/* wholesale order form inputs */
.wqty {
    width: 33px;
    text-align: right;
    padding: 0 4px;
}

.preview table {
    border: 0px;
}

.preview th {
    width: 200px;
    text-align: left;
}

.left {
    float: left;
}

.wlpeMangeUsersButtons {
    clear: both;
}

.wlpeUserPage .left {
    width: 320px;
}
#content form h2 {
    padding-top: 10px;
}
.sub_mgmt table {
    border-collapse: collapse;
}
.sub_mgmt th, .sub_mgmt td {
    border: 1px solid #ccc;
    padding: 0px 10px 0px 5px;
}
#subcriber_summary table {
	border: 1px solid black;
}
#wholesalesummary table {
	border: 1px solid black;
}
.category {
    width: 100px;
    height: 200px;
    float: left;
    border: 1px solid #ccc;
    margin: 10px;
}
.product {
    width: 122px;
    height: 310px;
    float: left;
    border: 1px solid #ccc;
    margin: 10px;
}
#content .category img {
    margin: 0;
    padding: 0;
}
#content .product img {
    margin: 0;
    padding: 0;
}
.category a {
    display: block;
    text-decoration: none;
}
.image {
    position:relative;
}
.image .text {
    color: #6C7D33;
    font-size: 16px;
    position:absolute;
    top: 100px; /* in conjunction with left property, decides the text position */
    left: 0px;
    width:100px; /* optional, though better have one */
    height: 100px;
    text-align: left;
}
.product .image .text {
    width: 120px;
    top: 160px;
    height: 120px;
}
#content .image .text p {
    display: table-cell;
    height: 100px;
    margin: 0;
    vertical-align: middle;
    padding-left: 5px;
}
#content .product .image .text p {
    padding-top: 5px;
    vertical-align: top;
}
.detail {
    font-size: 12px;
}
.large {
    height: 370px;
}
abbr {
    border-bottom: .1em dotted;
    cursor: help;
}
.mailchimp {
    width: 600px;
}
.mailchimp input {
    float: right;
    width: 450px;
    font-size: 110%;
    padding: 5px;
}
.mailchimp textarea {
    float: right;
    width: 450px;
    height: 100px;
    font-size: 1.3em;
    padding: 5px;
}
.mailchimp label {
    float: left;
    width: 130px;
    height: 34px;
}
.mailchimp label.big {
    height: 110px;
}