@charset "UTF-8";

/* reset CSS */
  a, abbr, acronym, address, applet, article, aside,
  audio, b, big, blockquote, body, canvas, caption,
  center, cite, code, dd, del, details, dfn, dialog,
  div, dl, dt, em, embed, fieldset, figcaption,
  figure, font, footer, form, h1, h2, h3, h4, h5, h6,
  header, hgroup, hr, html, i, iframe, img, ins, kbd,
  label, legend, li, mark, menu, meter, nav, object,
  ol, output, p, pre, progress, q, rp, rt, ruby, s,
  samp, section, small, span, strike, strong, sub,
  summary, sup, table, tbody, td, tfoot, th, thead,
  time, tr, tt, u, ul, var, video, xmp 						{border:0; margin:0; padding:0; outline:0; font-size:100%; font:inherit; vertical-align:baseline;}
  body 														{line-height:1;}
  html, body 												{height:100%;}
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section 				{display:block;}
  b, strong 												{font-weight:bold;}
  em														{font-style:italic;}
  img 														{color:transparent; font-size:0; vertical-align:middle; -ms-interpolation-mode:bicubic;}
  li 														{display:list-item; list-style:none;}
  table 													{border-collapse:collapse; border-spacing:0;}
  th, td, caption 											{font-weight:normal; vertical-align:top; text-align:left;}
  blockquote, q 											{quotes:none;}
  blockquote:before, blockquote:after, q:before, q:after	{content:''; content:none;}
  sub, sup, small 											{font-size:75%;}
  sub, sup 													{line-height:0; position:relative;  vertical-align:baseline;}
  sub 														{bottom:-0.25em;}
  sup 														{top:-0.5em;}
  svg 														{overflow:hidden;}
  ins 														{text-decoration:none;}
  del 														{text-decoration:line-through;}

/* basics */
  html														{background:#f8f2e7 url(../img/bg.jpg) 0 0 repeat; font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; font-weight:400; font-size:15px; line-height:24px; color:#3a241e;}
  h1														{font-weight:400; font-size:28px; line-height:1.3em; text-align:left; letter-spacing:0;}
  p															{font-size:11px; line-height:13px;}
  a															{text-decoration:none;}
  .clearfix:after 											{content:" "; clear:both;}
  .clearfix 												{*zoom:1;} /* IE 6/7 */

/* structural */
  .container												{max-width:1220px; margin:0 auto; overflow:hidden;}
  .header 													{margin:0 auto; border-bottom:1px dotted #7e4e40; margin-top:50px; padding-bottom:50px;}
  .logo														{float:left; background:#acd0ce; padding: 6px 10px; font-size:20px; letter-spacing:0.05em; color:#5c392f; line-height:14px;
															 -webkit-border-radius: 2px;
															 		 border-radius: 2px;
  																          behavior: url(../img/PIE.htc);}
  .hero 													{margin:0 auto; border-bottom:1px dotted #7e4e40; padding-top:10px; padding-bottom:10px;}
  .show-handheld											{display:none;}
  .footer													{width:100%; background:#f0e4cd; margin-top:30px;}
  .footer .container 										{width:1100px; margin:0 auto; overflow:hidden;}
  .footer h2												{margin:40px 0 0 0; font-weight:700;}
  .footer p													{font-size:15px; line-height:19px; margin:10px 0 40px 0; font-weight:400;}
  .footer a													{color:#5c392f; text-decoration:underline;}
  .footer a:hover											{color:#5ca8ab;}
  .footer a:active 											{position:relative; top:1px;}
  
/* nav */
  .nav														{width:auto; float:right; padding:5px; font-weight:700; font-size:12px; letter-spacing:0.2em; text-transform:uppercase;}
  .nav a 													{color:#ce333c;}
  .nav a:hover 												{color:#5ca8ab; text-decoration:none; text-transform:none;}
  .nav span													{margin:0 3px 0 3px; }

/* grid */
  .tapegrid													{}
  .tapegrid ul												{margin:0 auto; overflow:hidden;}
  .tapegrid ul, .hero, .header	 							{width:91.80327868852459%; /*1120px÷1220px*/}
  .tapegrid li												{float:left; width:17.857142857142857% /*200px÷1120px*/; z-index:10;}
  .tapegrid li, .cushion									{margin:0 1.071428571428571% 2.142857142857143%; /*12px÷1120px,24px÷1120px*/}

  .cassette 												{position:relative;}
  .cassette p												{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .cassette img												{width:100%; /*200px÷200px*/ height:auto; opacity: 1.0;}
  .cassette:hover img			 							{opacity:.6;}
  .cassette:hover .brand,
  .cassette:hover .detail			 						{color:#ce333c;}  
  
  p.brand													{color:#5c392f; padding-top:8px; padding-top:5px\9; font-weight:700;}
  p.detail 													{color:#5c392f; margin-bottom:5px; *margin-bottom:8px; font-weight:400}  

  .four-fix-plus											{display:none;} /* reveals excess tapes so columns end evenly */  
  #next 													{font-size:2.2em; display:block; width:200px; margin:0 auto 72px;}

/* back to top */
  #back-top 												{position:fixed; bottom:10px; right:5.0%; margin-right:10px; z-index:100;}
  #back-top a 												{display:block;}
  #back-top span 											{width:32px; height:32px; display: block;background:#d3d3d3 url(../img/arrow-up.png) no-repeat center center; opacity:.8; border:1px #ffffff solid;
															 -webkit-border-radius: 7px;
															         border-radius: 7px;
															    -webkit-transition: all 0.6s ease-out; 
															       -moz-transition: all 0.6s ease-out; 
															         -o-transition: all 0.6s ease-out; 
															            transition: all 0.6s ease-out;}
  #back-top a:hover span 									{opacity:1.0;}

/* infinite scrolling */
  #infscr-loading											{display:block; width:200px; margin:-20px auto 0; color:#7e4e40; text-align:left; font-size:12px; font-weight:700; text-align:center;} /* message that pops up momentarily while loading next page */
  #infscr-loading img										{margin-bottom:5px;}


/* media queries */ 
  /* HANDHELDS - viewport 552px and below */
  @media only screen and (max-width:552px) {
  .logo a 													{float:none; clear:both; display:block}
  .nav                                                      {float:none; margin-top:14px;}
  .hide-handheld											{display:none;}
  .show-handheld											{display:inline;}
  }

  /* 5 COLUMNS static - viewports 1220px and up */
  @media only screen and (min-width:1220px) {
  #back-top a 												{display:none;}
  }

  /* 5 COLUMNS dynamic - viewport 1024px to 1120px */
  @media only screen and (max-width:1240px) {
  h1														{font-size:26px;}
  .footer .container 										{width:90%;}
  }

  /* 4 COLUMNS - viewport 780px to 1024px */
  @media only screen and (min-width:780px) and (max-width:1024px) {
  h1														{font-size:22px;}
  .tapegrid ul												{width:92.578125%; /*948px÷973px*/}  
  .tapegrid li												{width:22.362869198312236% /*212px÷948px*/; margin:0 1.318565400843882% 2.637130801687764%; /*12.5px÷948px,25px÷948px*/}
  .four-fix-minus											{display:none;} /* hides excess tapes so columns end evenly */  
  .four-fix-plus											{display:block;} /* reveals excess tapes so columns end evenly */  
  }

  /* 3 COLUMNS - viewport 552px to 780px */
  @media only screen and (min-width:552px) and (max-width:780px) {
  h1														{font-size:22px;}
  .show-handheld											{display:inline;}
  .hide-handheld											{display:none;}
  .tapegrid ul												{width:93%; /*753px÷780px then tweaked*/}  
  .tapegrid li												{width:30.0132802124834% /*226px÷753px*/; margin:0 1.660026560424967% 3.320053120849934%; /*12.5px÷753px,25px÷753px*/}
  }

  /* 2 COLUMNS - viewport 350px to 552px */
  @media only screen and (min-width:350px) and (max-width:552px) {
  h1														{font-size:22px;}
  .nav                                                      {display:none;}
  .hero														{margin-top:10px; border:none;}
  .header													{margin-top:40px; padding-bottom:20px; border:none;}
  .tapegrid ul												{width:95%; /*520px÷552px then tweaked*/}  
  .tapegrid li												{width:45.192307692307692% /*235px÷520px*/; margin:0 2.403846153846154% 4.807692307692308%; /*12.5px÷520px,25px÷520px*/}
  }

  /* 1 COLUMN - viewport 350px and under */
  @media only screen and (max-width:350px) {
  h1														{font-size:20px; line-height:28px;}
  .header													{width:100%; border:none; margin-top:10px; padding-bottom:15px;}
  .cushion													{margin:0 15px 30px 0;}
  .logo														{margin:4px 0 2px 25px;}
  .logo a 													{float:left; display:block}
  .nav                                                      {display:none;}
  .hero 													{display:none;}

  .tapegrid ul												{margin:0 auto; width:100%;}
  .tapegrid li												{float:left; width:100%; margin:0;}

  .cassette													{background:none; border-top:1px dotted #c0a097;}
  .cassette:hover											{background:none;}
  .cassette img												{display:none;}

  p															{}
  p.brand													{padding-top:10px; font-weight:400; color:#5c392f; font-size:20px; line-height:24px; margin-left:25px;}
  p.detail 													{color:#5c392f; padding-bottom:5px; margin-left:25px;}  

  .footer h2												{margin-left:15px; margin-right:10px}
  .footer p													{margin-left:15px; margin-right:10px}

  #back-top 												{margin-right:0; bottom:8px right:8px;}
   }