@charset "UTF-8";
/* CSS Document */

a:link {color: #995018; text-decoration: none;}
a:visited {text-decoration: none; color:#995018;}
a:hover {text-decoration: underline;}
a:active {text-decoration: none;}

body {
	margin:0px;
/* 	fff7e7 ebe7df*/
	background-color: #fff7e7;
	background-image: url(/home_files/ricepaper2.png);
	background-attachment: fixed;
}



.container {
	width: 1000px; 
	padding-top:30px;
	margin: 0 auto;
	border:1px dotted #ddd;
	background-color:transparent;
}

.outer-container {
	width: 250px;
	height:300px;
	position:absolute;
	margin-left:11%;
}

.horiz-menu {
	width:100%;
	height:auto;
	margin:0 auto;
	position:absolute;
	text-align:center;
	background-color:#ded4c3;
	border-bottom: 1px solid #995018;
}

ul.rig {
	list-style: none;
	font-size: 0px;
	margin-left: -35px; /* should match li left margin */

}
ul.rig>li {
	display: inline-block;
	padding: 10px;
	margin: 0 0 2.5% 2.5%;
	background:#f7f6f2;
	border: 1px solid #ddd;
	border-radius: 3px;
	z-index:40;
	font-size: 1rem;
	vertical-align: top;
	box-shadow: 0 0 5px #aaa;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
ul.rig>li>img {
	max-width: 100%;
	height: auto;
	margin: 0 0 10px;
	z-index:41;
}
ul.rig>li>a>img {
	max-width: 100%;
	height: auto;
	margin: 0 0 10px;
	z-index:41;
}
ul.rig>li>a>img:hover {
	opacity: 0.9;
}
ul.rig li h2 {
	font-family: 'Averia Serif Libre', cursive;
	font-size: 23px;
	font-weight:normal;
	line-height: 20px;
	color: #3C8042;
} 
ul.rig li h3 {
	font-family: 'IM Fell Great Primer', serif;
	font-size: 26px;
	font-weight:normal;
	text-rendering: optimizeLegibility;
	margin: 0 0 5px;
	color: #111;
}
ul.rig li h4 {
	display:none;
	font-family: 'IM Fell Great Primer', serif;
	font-size: 26px;
	font-weight:normal;
	text-rendering: optimizeLegibility;
	margin: 0 0 5px;
	color: #111;
}
ul.rig li p.subtitle {
	font-family: 'IM Fell Great Primer', serif;
	font-size: 21px;
	font-weight:normal;
	text-rendering: optimizeLegibility;
	text-transform: capitalize;
	margin: 0 0 15px;
	color: #111;
}
ul.rig li p {
	font-family: 'Averia Serif Libre', cursive;
	font-size: 16px;
	font-weight:normal;
	text-rendering: optimizeLegibility;
	line-height: 1.5em;
	color: #555;
}
ul.rig li p.social {
	display: inline;
	position: relative;
	margin-left: 50%;
	left:-75px;
	top: 10px;
	margin-bottom: 15px ;
	vertical-align: bottom;
}

ul.rig li p.text {
	font-family: 'Averia Serif Libre', cursive;
	font-size: 16px;
	font-weight:normal;
	text-rendering: optimizeLegibility;
	line-height: 1.5em;
	color: #444;
	text-indent: 10px;
}
ul.rig li article {
	text-indent:10px;
	color:#444;
	font-family: Georgia;
	font-size: 15px;
	line-height: 140%; 
	font-weight:normal;
	text-rendering: optimizeLegibility;
	display:block;
}
/* for the read more article text hide */
.morecontent span {
    display: none;
}
.morelink {
    display: block;
}

/* class for 1 column */
ul.rig.columns-1>li {
	width: 95%;
}
/* class for 2 columns */
ul.rig.columns-2 li {
	width: 45.9%; /* this value + 2.5 should = 50% */
}
/* class for 3 columns */
ul.rig.columns-3 li {
	width: 29.8%; /* this value + 2.5 should = 33% */
}
/* class for 4 columns */
ul.rig.columns-4 li {
	width: 22.5%; /* this value + 2.5 should = 25% */
}

.process-img {
	float:right; 
	margin-right: 10px; 
	margin-left: 20px; 
	width:35%;
	max-width: 200px !important;
	min-width: 140px;
	clear:right;
}
.process-img2 {
	float:right; 
	margin-right: 10px; 
	margin-left: 20px; 
	width:35%;
	max-width: 200px !important;
	min-width: 140px;
	clear:;
}


@media (max-width: 999px) {
	.container {
		width: auto;
		padding: auto;
	}
}

/* this puts a title (h4) over image gallery when single column */
@media only screen and (max-width: 700px) { ul.rig li h4 {display: block;} }
/* end puts a title... */

@media only screen and (min-width: 480px) and (max-width: 700px) {

	/* class for 3 columns */
	ul.rig.columns-3 li {
	width: 46%; /* this value + 2.5 should = 50% */
	}
		/* class for 2 columns */
	ul.rig.columns-2 li {
	width: 95%; /* this value + 2.5 should = 50% */
	}	
	
	/* removes header and full logo */
	header {
		display:block;
		height: 65px !important;
		padding-top:39px;
		border-bottom: 1px solid #995018;
	}
	  
	.container {
	padding-top:30px;
	}
/* end removes header and full logo */


/* not currently used- replaces full logo with small logo */
	.logo {
		display:none;
	}
	  
	  .logo-small {
    background:url(https://jdrscraftsman.com/product-grid/logo-new-opti.png);
	background-size: 263px 59px;
	width:263px;
	height: 59px;

	display: block;
	margin: 0px auto 0px;
}
/* end replaces full logo with small logo */
	 
}




@media only screen and (max-width: 479px) {
	ul.grid-nav li {
		display: block;
		margin: 0 0 5px;
	}
	ul.grid-nav li a {
		display: block;
	}
	ul.rig {
		margin-left: -30px;
		margin-right:10px
	}
	ul.rig>li {
		width: 100% !important; /* over-ride all li styles */
		margin: 0 0 20px;
	}

/* removes header and full logo */
	header {
		display:block;
		height: 65px !important;
		padding-top:39px;
		border-bottom: 1px solid #995018;
	}
	  
	.container {
	padding-top:30px;
	}
/* end removes header and full logo */


/* not currently used- replaces full logo with small logo */
	.logo {
		display:none;
	}
	  
	  .logo-small {
    background:url(https://jdrscraftsman.com/product-grid/logo-new-opti.png);
	background-size: 263px 59px;
	width:263px;
	height: 59px;

	display: block;
	margin: 0px auto 0px;
}
/* end replaces full logo with small logo */
}


/*
@media only screen and (max-width: 325px) {
	
	#blank_plaque {
		margin-left: -140px !important;

		height:128px !important;
	}
	
	
}
*/

/* for the relocation of the color option icon */
@media only screen and (min-width: 700px) and (max-width: 750px) {
	
		#myimage {
	margin: 25px 0px 0px 200px !important;

	width:80px !important;
}
	
}
/* for the relocation of the color option icon */
@media only screen and (max-width: 375px) {
	
	#myimage {
	margin: 25px 0px 0px 200px !important;

	width:80px !important;
}
	
}