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: 250px; /* 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, #content h3 {
	clear: both;
    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 h3 {
	padding-top: 10px;
	font-size: 120%;
	font-weight: bold;
}

#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;
}

table.preview  {
    border: 0;
}

.preview th {
    text-align: left;
	border: 1px solid #D3DEAD;
}
.preview tr.pCat td {
	border: 1px solid #D3DEAD;
}
.preview tr td.pProd {
	padding-left: 20px;
}

.left {
    float: left;
}
.right {
    float: right;
	text-align: right;
}

.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: 102px;
    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;
}
.visibleDiv
{
	position: fixed;
	z-index: 1;
	bottom: 5%;
	right: 5%;
	clear: both;
	width: 200px;
	border: solid 1px #e1e1e1;
	vertical-align: middle;
	background: #6c7d33;
	color: white;
}
#content .visibleDiv p {
	padding: 2px;
}
div.visLabel {
	float: left;
	width: 67%;
	text-align: right;
	padding: 3px;
}
div.visValue {
	float: left;
	width: 27%;
	text-align: right;
	padding: 3px;
}
div#surcharge {
	clear: both;
	border: 1px solid red;
	background-color: wheat;
	padding: 5px;
	margin: 5px 0;
	color: black;
	vertical-align: middle;
}
div#surcharge p {
	margin: 0;
}
div.viewTotals {
	clear: both;
	width: 250px;
}
.clear {
	clear: both;
}
#content .clear p {
	padding: 15px 0;
}
div.showcategory {
	clear: both;
	/*width: 960px; */
}
.showcategory .col1 {
	clear: both;
	float: left;
	width: 28%;
}
.showcategory .col2 {
	float: left;
	min-width: 90px;
	width: 14%;
	text-align: right;
}
.showcategory .col25 {
	float: left;
	width: 4%;
	height: 22px;
	text-align: right;
}
.showcategory .col3 {
	float: left;
	width: 6%;
	text-align: right;
}
.showcategory .col4 {
	float: left;
	width: 46%;
	padding-left: 10px;
}
.showcategory .col2 select, .showcategory .col2 select option {
	text-align: right;
}
#totalbox {
	clear: both;
}
fieldset.balance {
	float: left;
	width: 500px;
}
table.balance th {
    text-align: left;
    padding: 0 10px;
}
table.balance td {
    padding: 0 10px;
}
td.dollar {
    text-align: right;
}
form#balance div {
    clear: both;
}
form#balance div label {
    float: left;
    width: 75px;
    padding: 0 10px;
    text-align: right;
}
form#balance div input {
    float: left;
    width: 150px;
}
form#balance div input.button {
    margin-left: 95px;
}
ul.manageshop {
	list-style-type: none;
}
ul.manageshop ul {
	list-style-type: none;
}
.manageshop span.col1 {
	display: inline-block;
}
#content ul.manageshop img {
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
}
.navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
.ud {
	border-bottom: none;
	border-top: 1px solid #778;
}

.navlist li
{
list-style: none;
margin: 0;
display: inline;
}

.navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
.ud li a {
	border-bottom: 1px solid #778;
}

.navlist li a:link { color: #448; }
.navlist li a:visited { color: #448; } 

.navlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

.navlist li a#current
{
background: white;
border-bottom: 1px solid white;
}
.ud li a#current {
	border-bottom: 1px solid #778;
	border-top: 1px solid white;
}
td select {
	width: 120px;
}
td select.wide {
	width: 240px;
}
form#categories {
	clear: both;
}
div.editcategory {
	clear: both;
	/*width: 960px; */
}
.editcategory .col1 {
	clear: both;
	float: left;
	width: 28%;
}
.editcategory .col2 {
	float: left;
	width: 90px;
	text-align: right;
}
.editcategory.parent {
	background: #ccc;
}
/*
#manageProducts tr:nth-child(odd) {
    background-color:#eee;
   }
#manageProducts tr:nth-child(even) {
   background-color:#fff;
   }*/
#manageProducts tr:hover {
	background-color: #83A240;
}
#manageProducts tr:active {
	background-color: #dfd;	
}
#manageProducts tr td input {
	width: 90%;
	padding: 0 4%;
	border: none;
}
span.red {
	color: red;
}
fieldset.details {
	float: left;
	width: 400px;
}
fieldset div {
	clear: both;
}
fieldset div label, fieldset div .label {
	margin: 0px 5px;
	padding-top: 3px;
	float: left;
	width: 120px;
	text-align: right;
}
fieldset div input, fieldset div select, fieldset div .input, td input.input {
	float: left;
	font-size: 110%;
	padding: 3px;
}
fieldset div input, fieldset div .input, td input.input {
	width: 250px;
}
fieldset div select {
	width: 130px;
}
.number {
	text-align: right;
}
.number input {
	width: 30px;
}
#MysteryBox div {
	width: 200px;
	float: left;
}
#MysteryBox select {
	width: 160px;
	margin: 2px 3px;
}
.mb_items input {
	width: 85px;
	margin: 0px 5px 0px 0px;
}
.item_no {
	float: left;
	width: 20px;
	text-align: right;
}
input.small_no {
	width: 20px;
}
input.large_no {
	width: 40px;
}
.sub_mgmt textarea {
	width: 100%;
	font-family: Arial;
	font-size: 110%;
}
.button {
	width: 250px;
	font-size: 110%;
	padding: 3px;
}
.visibleDiv p {
	text-align: center;
}
a.buttons, input.buttons {
	margin: 0 7px 0 0;
	/*width: 100px;*/
	background-color: #D3DEAD;
	border: 1px solid #6D7E34;
	border-top: 1px solid #EEE;
	border-left: 1px solid #EEE;
	text-decoration: none;
	font-size: 110%;
	font-weight: bold;
	color: #6D7E34;
	cursor: pointer;
	padding: 5px 10px 6px 7px;
	text-align: center;
}
.center {
	text-align: center;
}
.nostock {
	background: #eee;
}
.sub_mgmt tr:hover {
	background-color: #D3DEAD;
}
#confirm, #save {
	display: inline;
}
#paypal input {
	width: 107px;
}

/* iPhone */
@media screen and (max-device-width: 480px) {
	body{
		/* -webkit-text-size-adjust:none; */
		font-family:Helvetica, Arial, Verdana, sans-serif;
	}
	#container {
		width: 100%;
	}
	#image {
		background: none;
		height: 50px; 
	}
	#image h1 {
		padding: 0;
		text-align: left;
	}
	#image h2 {
		display: none;
	}
}