@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/



 Enable responsive view on mobile devices 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

#div1 {
	overflow: hidden;
      margin: 10px;
	width: 90%;
}

#homeimages {
	float: left;
      position: relative;
      width: 20%;
      padding-bottom: 20%;
}
#imagemenu {
	position: absolute;
	left: 19px;
	right: 20px;
	top: 10px;
	bottom: 10px;
	overflow: hidden;
}
#imagemenu img{
	width: 217px;
	height: 218px;
}

a.pack {
	width: 217px;
	height: 218px;
	display:block; 
	background: url(images/portfolio/th_books.jpg);
	background-position:top;
}
a.pack:hover {
	background-position: bottom;}
	
a.book {
	width: 217px;
	height: 218px;
	display:block; 
	background: url(images/portfolio/th_packaging.jpg);
	background-position:top;
}
a.book:hover {
	background-position: bottom;}
	
a.bro {
	width: 217px;
	height: 218px;
	display:block; 
	background: url(images/portfolio/th_brochures.jpg);
	background-position:top;
}
a.bro:hover {
	background-position: bottom;}
	
a.bro {
	width: 217px;
	height: 218px;
	display:block; 
	background: url(images/portfolio/th_brochures.jpg);
	background-position:top;
}
a.bro:hover {
	background-position: bottom;}
	
a.news {
	width: 217px;
	height: 218px;
	display:block; 
	background: url(images/portfolio/th_newsletters.jpg);
	background-position:top;
}
a.news:hover {
	background-position: bottom;}
	
a.style {
	width: 217px;
	height: 218px;
	display:block; 
	background: url(images/portfolio/th_styleguide.jpg);
	background-position:top;
}
a.style:hover {
	background-position: bottom;}
	
a.pop {
	width: 217px;
	height: 218px;
	display:block; 
	background: url(images/portfolio/th_pop.jpg);
	background-position:top;
}
a.sales:hover {
	background-position: bottom;}

a.sales {
	width: 217px;
	height: 218px;
	display:block; 
	background: url(images/portfolio/th_stylekits.jpg);
	background-position:top;
}
a.pop:hover {
	background-position: bottom;}
	
a.des {
	width: 217px;
	height: 218px;
	display:block; 
	background: url(images/portfolio/th_designer.jpg);
	background-position:top;
}
a.des:hover {
	background-position: bottom;}
	
a.post {
	width: 217px;
	height: 218px;
	display:block; 
	background: url(images/portfolio/th_posters.jpg);
	background-position:top;
}
a.post:hover {
	background-position: bottom;}

a.note {
	width: 217px;
	height: 218px;
	display:block; 
	background: url(images/portfolio/th_notecards.jpg);
	background-position:top;
}
a.note:hover {
	background-position: bottom;}





 @media only screen and (max-width : 480px) {
      /* Smartphone view: 1 tile */
	 
      #homeimages {
        width: 100%;
        padding-bottom: 100%;
      }
    }
    @media only screen and (max-width : 650px) and (min-width : 481px) {
      /* Tablet view: 2 tiles */
      #homeimages {
        width: 50%;
        padding-bottom: 50%;
      }
    }
    @media only screen and (max-width : 1050px) and (min-width : 651px) {
      /* Small desktop / ipad view: 3 tiles */
      #homeimages {
        width: 33.3%;
        padding-bottom: 33.3%;
      }
    }
    @media only screen and (max-width : 1290px) and (min-width : 1051px) {
      /* Medium desktop: 4 tiles */
      #homeimages {
        width: 25%;
        padding-bottom: 25%;
      }



}