html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Verdana, Arial, Tahoma, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

a { text-decoration: none; }

/** content display **/
#view { display: block; max-width: 1000px; padding: 0; margin: 1; }

#container { display: block; margin-top: 169px; }
#container ul { }
#container ul a li { 
	display: block;
	width: 100%;
	height: 360px;
	border-bottom: 1px solid #b9b9b9;
	border-top: 1px solid #f7f7f7;
	background: #ebebeb;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff) to(#ebebeb));
  background-image: -webkit-linear-gradient(top, #ffffff, #ebebeb);
  background-image:    -moz-linear-gradient(top, #ffffff, #ebebeb);
  background-image:      -o-linear-gradient(top, #ffffff, #ebebeb);
  background-image:         linear-gradient(top, #ffffff, #ebebeb); 
}

#container ul a { display: block; position: relative; width: 100%; }
#container ul li h2 { font-size: 2.4em; line-height: 1.3em; font-weight: normal; letter-spacing: -0.03em; padding-top: 4px; color: #55678d; }
#container ul li h3 { font-size: 1.6em; line-height: 1.3em; font-weight: normal; letter-spacing: -0.03em; padding-top: 4px; color: #55678d; }

#container ul li p.desc { color: #555; font-family: Arial, sans-serif; font-size: 1.3em; line-height: 1.3em; white-space: nowrap; overflow: hidden; }

#container ul li .price { position: absolute; bottom: 10px; left: 90px; font-size: 1.2em; font-weight: bold; color: #6ea247; }

#container ul li img.thumbnail { 
	background: #fff;
	display: inline-block;
	float: left;
	padding: 2px;
	margin-top: 6px;
	margin-left: 5px;
	margin-right: 8px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

#container ul a:hover li h2 { color: #7287b1; }
#container ul a:hover li p.desc { color: #757575; }

#container ul a:hover li {
background: #efefef;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff) to(#efefef));
background-image: -webkit-linear-gradient(top, #ffffff, #efefef);
background-image:    -moz-linear-gradient(top, #ffffff, #efefef);
background-image:      -o-linear-gradient(top, #ffffff, #efefef);
background-image:         linear-gradient(top, #ffffff, #efefef);
}

/** top header bar **/
header { 
display: block;
position: fixed; 
top: 0;
z-index: 9999;
height: 60px;
width: 100%;
max-width: 800px;
border-bottom: 1px solid #262422;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); 
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
background: #5a5955;
background: -moz-linear-gradient(top,  #5a5955 0%, #51504c 50%, #494744 51%, #3f3d3a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a5955), color-stop(50%,#51504c), color-stop(51%,#494744), color-stop(100%,#3f3d3a));
background: -webkit-linear-gradient(top,  #5a5955 0%,#51504c 50%,#494744 51%,#3f3d3a 100%);
background: -o-linear-gradient(top,  #5a5955 0%,#51504c 50%,#494744 51%,#3f3d3a 100%);
background: -ms-linear-gradient(top,  #5a5955 0%,#51504c 50%,#494744 51%,#3f3d3a 100%);
background: linear-gradient(to bottom,  #5a5955 0%,#51504c 50%,#494744 51%,#3f3d3a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5955', endColorstr='#3f3d3a',GradientType=0 );
}

header h1 { font-size: 2.0em; font-family: Tahoma, Arial, sans-serif; font-weight: bold; line-height: 30px; text-align: center; color: #efefef; text-shadow: 1px 1px 0px #000; }


/** basic media queries **/
@media only screen and (max-width: 480px) {
	#container ul li h2 { font-size: 1.75em; }
	
	#container ul li img.thumbnail { margin-top: 2px; }
}

@media only screen and (max-width: 320px) {
	#container ul li p.desc { display: none; }
}


/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }