div#gallery {
margin: 0/* 1em 3em 1em 3em */;
 clear: both; 
 background: transparent;

}

/*========below is all the css for the image display======*/

div.pic {
 float:left;
 height: auto/* 200px230px */;
 width: 90%;
 padding: 0 10px;
 margin: 5px 3px;
 border: 1px solid #444;
background: #E6E4DF;
color: #000;
-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
background-color:#E6E4DF;-webkit-box-shadow: #858585 5px 5px 5px;-moz-box-shadow: #858585 5px 5px 5px; box-shadow: #858585 5px 5px 5px;
/* clear: right; */
}


div.pic img {
width: 96px;
height: 128px;
border: 1px solid;
border-color: #444 #aaa #aaa #444;
}


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

/*=================this makes ie show the border to the image on hover==============*/
div.pic a img{
border: 6px solid;
border-color: #444 #aaa #aaa #444;
}

div.pic  a:hover img{
border: 1px solid;
border-color: #ccc; 
}
/* 
div.ls img {
 height: 96px;
 width: 128px;
 margin: 6px 0 0 0;
 border: 1px solid;
border-color: #444 #aaa #aaa #444;
}

div.ls  img:hover{
 border: 1px solid;
 border-color: red;
}

div.pt img {
height: 128px;
 width: 96px; 
 margin: 8px 16px 0 16px;
 border: 1px solid;
border-color: #444 #aaa #aaa #444;
}

div.ls  img:hover{
 border: 1px solid;
 border-color: #000 #fff #fff #000;
} */
div.clearpic{
height:2px; 
/* background: green;  */
visibility:hidden;
margin-bottom:10px;
clear: both;
}

div.menucont{
clear: both;
}


#gallery, #gallery .title {
 display: block;
 list-style: none;
 text-align: left;
 /* font: bold 14px verdana, arial, helvetica, sans-serif; 
 line-height: 19px; 
 color: #000;*/ /* this changes the colour of the title of the photo*/
 font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 1.5em;
color: #000;
 margin: 0;
 padding: 10px 5px; 
}

#gallery, #gallery .description{
 display: block;
 list-style: none;
 text-align: left;
/*  font: 12px verdana, arial, helvetica, sans-serif;  */
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 200;
line-height: 1.5em;
color: #000;
 padding: 4px 0 0 0;
 margin: 0;
 color: #000;
}

/* #gallery, #gallery p */.outlet{
/* font:italic 11px verdana, arial, helvetica, sans-serif  ; 
line-height: 16px;
color: #000;*/
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
font-style: italic;
line-height: 1.5em;
color: #8B1C2D/*#44352C #000 */;
margin: 20px 0 0 0;
padding: 0;
text-align: left;   
}

/* #gallery, #gallery  */.price{
 display: block;
 list-style: none;
 text-align: right;
 /* font: bold 11px verdana, arial, helvetica, sans-serif;  */
 font-family: "Open Sans", Helvetica, Arial, sans-serif;
 font-size: 14px;
 font-weight: 600;
 padding: 4px 20px 0 0;
 margin: 0;
 color: #000;
}

/*===============this is for the input form===============*/

#gallery input.inputtitle{
 background-color: #E9D9C4;
 border:none;
 text-align: center;
 font: bold 12px verdana, arial, helvetica, sans-serif; 
 line-height: 19px;
 color: #000;
}

#gallery textarea.inputtext{
 background-color: #E9D9C4;
 border:none;
 text-align: left;
 font: 10px verdana, arial, helvetica, sans-serif; 
 padding: 0;
 margin: 0;
 color: #000;
 scrollbars: none;
 overflow: hidden;
}

/*===============above is for the input form===============*/

.next {
margin: 0 20px 0 0;
padding: 0 5px 0 0;
text-align: right;
color: #000;
height: 30px;
clear: both;
}

#cart{
background: transparent; 
/* border: solid 2px #003482; */
} 
 
#cart p{text-align: center; padding: 5px; background-color: #E3C57C; border: solid 1px #ccc; font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 16px;font-weight: 700; color:#000/* 9A0020 */;}

p.download{
/* font-style: italic; */
font: bold 12px arial, verdana, helvetica, sans-serif; 
/* font-weight: 400;
font-size: 14px; */
color: #000;
}
/* ++++++++++++++++++MEDIA QUERIES FOR SHOP +++++++++++++++++++++++++++++ */
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
table, thead, tbody, th, td, tr {display: block;}
div#gallery {
margin: 0/* 1em 3em 1em 3em */;
 clear: both; 
 /* background: blue; */
 width: 100%;
}
}

@media screen and (max-width: 980px) {
div#gallery {
margin: 0/* 1em 3em 1em 3em */;
 /* clear: both; 
 background: green; */
 width: 100%;
}
div.pic {
/*background: purple;
 width: 100%; 
clear: both; */
}
}

@media screen and (max-width: 480px) {
#gallery, #gallery .title { font-size: 12px;
font-weight: 600;/* font: bold 12px verdana, arial, helvetica, sans-serif; */}

#gallery, #gallery .description{ font-size: 10px;
font-weight: 200;/* font: 10px verdana, arial, helvetica, sans-serif; */}

/* #gallery, #gallery p */.outlet{font-size: 11px; font-weight: 400; color: #8B1C2D;}
.ybutton{margin-top: 3px;}
#cart p{text-align: center; padding: 2px; background-color: #E3C57C; border: solid 1px #ccc; font-family: "Open Sans", Helvetica, Arial, sans-serif;font-size: 14px;font-weight: 700; color:#000/* 9A0020 */;}
}