div#featured {
position: relative;
margin: 0/* 1em 3em 1em 3em */;
 clear: both; 
 background: transparent;
 border-top: 1px dotted #ccc;
}
#featured h1{
margin-left: 10px;
font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 36px;font-weight: 700;color:#000;
}
/*========below is all the css for the image display======*/

div.pic {
position: relative;
 float:left;
 height: 400px /* auto 250px */;
 width: 250px;
 padding: 0 2px;
 margin: 5px 8px;
 border: 1px solid;
border-color:#828282 #E1E1E1 #E1E1E1 #828282; 
background:#fff;
color: #000;
}

div.pic img {
 /* border: 0;
border-color: #444 #aaa #aaa #444;  */
}

div.pic img:hover{
 /* border: 1px solid;
 border-color: #fff; */
}

.pic p.buttons{
text-align: center;
}

div.bots{
position: absolute;
width: 100%;
bottom: 2px; 
background: transparent;
}
/*========this makes ie show the border to the image on hover==============*/


div.pic a img{
}

div.pic  a:hover img{
 }

/* div.pt img {
 border: 1px solid;
 border-color: #000 #fff #fff #000;
 margin: 8px 16px 0 16px;
}

div.pt  img:hover{
 border: 1px solid;
 border-color: #000 #fff #fff #000;
} */


.pic p.catname {
 display: block;
 list-style: none;
font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 13px;font-weight: 700;color:#000;
 margin-top: 2px;
 text-align: center;
margin-top: 2px;
margin-bottom:0;

/*  margin-left: 12px; */
 /*  text-transform: uppercase;
padding-top: 50px; */
}








.pic p.title {
 display: block;
 list-style: none;
font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 16px;font-weight: 700;color:#000;
margin-top: 0; 
 text-align: center;
/*  margin-left: 12px; */
 /*  text-transform: uppercase;
padding-top: 50px; */
}


.pic p.description{
 /* display: block;
 list-style: none; */
 text-align: left;
 font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 13px;font-weight:700;
 text-transform:none;
 padding: /* 4px 0 0  */0;
 margin: 0  10px;
 color: #000;
}

.pic p.description a:link{
text-decoration: none;
}

div.space{
/* height: 1px;
background-color: purple; */
clear: both;
}

/* ================================================ */
@media only screen and (min-width: 600px) and (max-width: 1024px)
 {
div.pic {
width:270px;
padding: 0 2px;
/* margin-left: 10px; */
background:transparent;
}
div.pt img {
 margin: 4px 4px 0 4px;
max-width: 90%;
height: auto;
width: auto\9; /* ie8 */
}
.bbutton{
		-moz-border-radius: 8px; 
		-webkit-border-radius: 8px;
		border-radius: 8px; 
		background: red; 
		padding: 5px;
		font-size: 12px;
		margin-left: 5px;
		}



 
 }

/* ============for phone =================*/
@media only screen and (min-width: 300px) and (max-width: 479px)  {
div.pic {
width: 90%;
padding: 0 2px;
/* margin-left: 10px; */
background: transparent;
}
div.pt img {
 margin: 4px 4px 0 4px;
max-width: 95%;
height: auto;
width: auto\9; /* ie8 */
}
div.pic {
position: relative;
 float:left;
 height: 400px /* auto 250px */;
 width: 90%;
 padding: 0 2px;
 margin: 5px 8px;
 border: 1px solid;
border-color:#828282 #E1E1E1 #E1E1E1 #828282; 
background:#fff;
color: #000;
}
#featured h1{
margin-left: 10px;
font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 30px;font-weight: 700;color:#000;
}

}