* { box-sizing: border-box; }
body {
    background-color: #FFFFFF;
    font-family: arial, helvetica, sans-serif;
    font-size: 1em;
    margin: 0px;
    padding: 0px;
    }
img { max-width: 100%; }
form {
    padding: 0px;
    margin: 0px;
    }

a:link {
    color: #586343;
    text-decoration: none;
    }

a:visited {
    color: #586343;
    text-decoration: none;
    }

a:hover {
    color: #b3384d;
    text-decoration: none;
    }

a:active {
    color: #586343;
    text-decoration: none;
    }

h1 {
	font-family:Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
	margin:0px;
	padding:0px;
	color:#586343;
	font-size: 1.25em;
    }
h3 {
	font-family:Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
    margin: 0px;
	padding:0px;
	color:#586343;
	font-size: 1.1em;
    }
h4 {
    font-weight: bold;
    margin: 0px;
    }

#page { max-width: 1440px; margin: auto; border: 1px solid #b3384d; background-image:url(canvas.png);
	border-bottom-right-radius: 12px; border-bottom-left-radius: 12px;
}

#top { background: linear-gradient( to bottom, #fff, transparent ); text-align: center; }
#topleft { color:#586343; float: left; padding: 4px 0 0 8px; }
#topmid { color:#453e2c; z-index: 0; position: relative; }
#phone { padding: 8px 0; }
#title { font-family: "Times New Roman", serif; color: #586343; text-shadow: 2px 2px 3px #999966; font-size: 1.5em; font-weight: bold; font-variant: small-caps; padding-bottom: 4px; }
#title a { position: relative; z-index: 99999; }

#leftnav {
	background-color: #e8ebc7;
	float:left;
	width:185px;
	padding-top: 4px;
	margin-top: 12px;
	box-shadow: 3px 3px 4px rgba(75,80,64,.5), 0px -1px 1px rgba(75,80,64,.5), 3px -1px 1px rgba(75,80,64,.5);
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border-top: 1px solid #757f4e;
	border-right: 1px solid #757f4e;
	border-bottom: 1px solid #757f4e;
}

.rightbox { border: 1px solid #b3384d; background-color: #fff; border-radius: 8px; margin: 8px; padding: 8px; text-align: center; font-size: .75em; }

#maincontent { padding: 0 8px;float:left; width: calc(100% - 205px); }

#footer { text-align: center; border-top-right-radius: 8px; }

.sm-button { background-color: #e8ebc7; padding: 4px; font-size: 1em; font-weight: bold; border-radius: 6px; box-shadow: 1px 1px 2px #333; margin-bottom: 4px; }

#content-table { max-width: 480px; }

#nav {
		padding: 0px;
		margin: 0;
		vertical-align: top;
	}

		#nav > a
		{
			display: none;
		}

		.nlineb {  }


		#nav li
		{
			position: relative;
			background-color: transparent;

		}
			#nav li a
			{
				display: block;
				text-decoration: none;

			}
			#nav li a:active
			{
				color: #cccccc;
			}


		/* first level */

		#nav > ul
		{
			list-style:none;
			vertical-align: bottom;
			padding-left: 0px;
			margin-top: 0px;
		}
			#nav > ul > li
			{
				height: 100%;
				border-bottom: 1px solid #b3384d;
			}
				#nav > ul > li > a
				{
					font-weight: normal;
					font-size: .875em;
					padding-left: 0px;
					margin-left: 2px;
					text-indent: 16px;
					color: #000;
					padding: 2px 0 2px 4px;
					background: url(flou.png) left no-repeat;
					font-family: serif;
				}

				#nav > ul > li > a:hover
				{
					color: #f0f0f0;
				}

					#nav > ul > li:not( :last-child ) > a
					{
					}
					#nav > ul > li:hover > a,
					#nav > ul:not( :hover ) > li.active > a
					{
						background-color: rgba(255,255,255,0.5);
						color: #000;
					}

		/* second level */

			#nav li ul
			{
				display: none;
				position: absolute;
				list-style:none;
				margin: 0; padding: 0;
				min-width: 150px;
				background-color: #d3d3c0;
			}

					#nav li:hover ul
					{
						display: block;
						left: 150px;
						right: 0;
						top: 0;
						z-index: 9999;
					}
						#nav li:hover ul
						{
							border: 1px solid #b3384d;
						}
						#nav li ul a
						{
							padding: 2px;
							padding-left: 12px;
							font-family: serif;
							font-size: .875em;
							color: #000;
						}

						#nav li ul li a {  z-index: 9999; }

							#nav li ul li a:hover,
							#nav li ul:not( :hover ) li.active a
							{
								background-color: rgba(255,255,255,0.5);
							}


@media only screen and ( max-width: 1080px ) {
	#title { font-size: 1.25em; }
}

@media only screen and ( max-width: 1000px ) {
}

@media only screen and ( max-width: 840px ) {
	#topmid img { max-width: 512px; }
}

@media only screen and ( max-width: 780px ) {
	#topmid img { max-width: 480px; }
}


@media only screen and ( max-width: 760px ) {

	#topleft { padding-left: 44px; }

	#leftnav { 
	 float:none;
	 width:auto;
	 padding:0;
	 position:static;
	 border: none;
	}

	#maincontent { padding: 0 4px; float:none; width: 100%; }


	#nav
	{
		position: absolute;
		top: 0;
		left: 0;
		width:100%;
		z-index: 9999;
	}
		#nav > a
		{
			width: 50px;
			height: 50px;
		}

		#nav:not( :target ) > a:first-of-type,
		#nav:target > a:last-of-type
		{
			display: block;
		}


	/* first level */

	#nav > ul
	{
		height: auto;
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		background-color: #e8ebc7;
		width: 100%;
		margin: 0; padding: 0;


	}
		#nav:target > ul
		{
			display: block;
		}
		#nav > ul > li
		{
			float: none;

		}
			#nav > ul > li > a
			{
				height: auto;
				text-align: left;
				font-size: 1.5em;
				padding: 8px;
				margin-left: 8px;


			}
				#nav > ul > li:not( :last-child ) > a
				{
					border-right: none;
				}

				/* second level */

				#nav li ul
				{
					position: static;
					padding: .5em; /* 20 */
					padding-top: 0;
					
				}

					#nav li ul a
					{
						font-size: 1em;
					}


}

@media only screen and ( max-width: 720px ) {
	#topmid img { max-width: 400px; }
}

@media only screen and ( max-width: 680px ) {
	#title { margin-left: 0px; }
	#topmid img { margin-left: 0px; }
	#topmid { float: left; }
	#topright { margin-top: 0px; float: left; }
	#logintable > tbody > tr > td { display: block; }
	#contact-table textarea { width: 100%; }
	#addrtable input { width: 100%; }

}

@media only screen and ( max-width: 632px ) {
	#title {  }
	#topmid img { max-width: 100%; }
	#topleft { float: none;  text-align: center; padding-left: 0; }
	#topmid { float: none; text-align: center; }
	#topright { float: none; text-align: center; padding-right: 0; }
	.mhid { display: none; }
}

@media only screen and ( max-width: 512px ) {
	.checkoutbuttontable > tbody > tr > td { display: block; }
}


.midcol {background-color:#fff;}
.rightcol {background-color:#fff;}
.ctable {text-align:left; padding:10px; margin-left:5px; margin-right:5px;}
.ctable h2{font-size:14pt; margin:0px; padding:0px;}
.leftcolbot {background-color:#f3f3ed;}
.midcolbot {background-color:#f3f3ed; font-size:10px; color:#999966; padding-top:10px; padding-bottom:10px;}
.midcolbot a:link{color:#999966;}
.midcolbot a:visited{color:#999966;}
.midcolbot a:hover{color:#999966;}
.rightcolbot {background-color:#f3f3ed;}
.home-feat-table td{ text-align:center; vertical-align: top; }
.home-feat-table td img{border:4px #000066 outset;}
.maintable {
    padding: 0px;
    margin: 0px;
    border:1px solid #b3384d;
	margin-top:5px;
    }
.maintablecart {
    padding: 0px;
    margin: 0px;
    border-top:0px;
	border-right:1px solid #b3384d;
	border-bottom:1px solid #b3384d;
	border-left:1px solid #b3384d;			
	margin-top:0px;
    }	
.cartheader {
    padding: 0px;
    margin: 0px;
    border-top:1px solid #b3384d;
	border-right:1px solid #b3384d;
	border-bottom:0px;
	border-left:1px solid #b3384d;			
	margin-top:5px;
    }	
.goldrule {background-image:url(top_goldbar.gif); line-height:4px;}	
	


.clear {
    clear: both;
    color: #ffffff;
    }


.logged-in-message {
    color: red;
    font-weight: bold;
    }

.feat-table {
    margin: 0px;
    padding: 0px;
    width: 100%;
    }

.feat-head {
    color: #586343;
    vertical-align: middle;
    text-align: left;
    font-weight: bold;
    font-size: 10pt;
	line-height:22px;
    background-image: url(topprodhead.gif);
    margin: 0px;
    padding: 5px 0px 0px 15px;
    background-repeat: no-repeat;
    border-bottom: 2px solid #e8ebc7;
    }

.feat-cell {
    text-align: center;
    vertical-align: top;
    padding: 10px;
	width:33%;
    }

.feat-cell div {
    text-align: center;
	
    }
	
.tinytxt {
    font-size: 7pt;
    line-height: 10px;
    margin: 0px;
    padding: 0px;
    }

.tinytxt input {
    font-size: 7pt;
    line-height: 10px;
    margin: 0px;
    padding: 0px;
    }

.tinytxt a:link {
    margin: 0px;
    padding: 0px;
    }

.tinytxt a:visited {
    margin: 0px;
    padding: 0px;
    }

.tinytxt a:hover {
    margin: 0px;
    padding: 0px;
    }