<!-- PPS CSS -->

p {font-family: Verdana; font-size: 14pt; font-weight: bold; color: #000000; text-align: left;}
p.normal {font-family: Verdana; font-size: 10pt; font-weight: bold; color: #000000; text-align: left; margin-left: 30; margin-right: 30;}
p.large {font-family: Verdana; font-size: 14pt;  font-weight: bold; margin-left: 15px; margin-right: 10; text-align: left;}  
p.thick {font-family: Verdana; font-size: 10pt; font-weight: bold; text-align: left; margin-left: 15; margin-right: 15;} 
p.thick1 {font-family: Verdana; font-size: 12pt; font-weight: bold; text-align: left; margin-left: 30; margin-right: 30;} 
p.standout {font-family: Verdana; font-size: 10pt; font-weight: bold; font-style: italic; margin-left: 60px; text-align: left;} 
p.bolder {font-family: Verdana; font-size: 14pt;  font-weight: bold; color: #000000; text-align: left; margin-left: 20; margin-right: 20;}
p.emphasis {font-family: Verdana; font-size: 12pt; font-weight: bold; color: #000000; font-style: italic; }
p.big {font-family: Verdana; font-size: 16pt; font-weight: bold; color: #000000; text-align: left; margin-left: 20; margin-right: 20; }
h1 {font-family: Verdana; font-size: 24pt; color: #9E0000; text-align: center;}
h2 {font-family: Verdana; font-size: 20pt; color: #0000FF;}
h3 {font-family: Verdana; font-size: 18pt; color: #9E0000;}
h4 {font-family: Verdana; font-size: 16pt; color: #0000FF;}
h5 {font-family: Verdana; font-size: 14pt; color: #9E0000;}
h6 {font-family: Verdana; font-size: 12pt; color: #0000FF;}
.leftalign {text-align: left; margin: 30px;}

.centered {text-align: center;}

.lowepro {color: white; background-color: black; padding: 10px;}

.title {text-align: center; text-decoration: underline; font-weight: bold;}

.bluetext { color: #000080;}
.blacktext { color: #000000 }

a { font-family: Verdana; font-size: 12pt; text-decoration: underline; color: #000080;}

ol { font-family: Verdana; font-size: 10pt; color: #000080; letter-spacing: 1pt; text-align: left; line-height: 150%; list-style-type: decimal; margin-left: 18px; }

li { font-family: Verdana; font-size: 10pt; color: #000080; font-style:italic; font-weight: bold; text-align: left; line-height: 150%; margin-left: 40; margin-right: 40px;}

.feature-list {margin: 10px 0 15px 22px; padding: 0;}

.feature-list li {margin-bottom: 6px; line-height: 1.5;}

.feature-list li:last-child {margin-bottom: 0;}

hr {display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 40px;  margin-right: 40px; border-style: inset; border-width: 3px; border-color: #0000FF;} 

img.center {display: block; margin-left: auto; margin-right: auto; }

img.normal {margin: auto; }

div {background-color: #FFB92E;}

#pagewrap {padding: 5px; width: 980px; margin: 20px auto; background-color: #FFB92E;}

header {height: 150px; padding: 15px; }

#prodheader {width: 930px; float: left; padding: 15px; }

#highlights {width: 930px; float: left; padding: 15px; }

#whatfits {width: 930px; float: left; padding: 15px; }

#whybuy {width: 930px; float: left; padding: 15px; }

#promo {width: 930px; float: left; padding: 15px;}

#images {width: 930px; float: left; padding: 2px 15px; border: 4px solid blue; }

#productinfo {width: 930px; float: left; padding: 15px; }

#whatsincluded {width: 930px; float: left; padding: 15px; }

#specs {width: 930px; padding: 15px; }

#brandinfo {width: 930px; float: left; padding: 15px;}

#condition {width: 930px; float: left; padding: 15px;}

#terms {width: 930px; float:left; padding:15px;}

footer {clear: both; padding: 0 15px; }

div.gallery {margin: 5px; border: 1px solid #ccc; float: left; width: 400px; height: 450px; }

div.gallery:hover {border: 1px solid #777;}

div.gallery img {width: 100%; height: auto;}

div.desc {padding: 15px; text-align: center;}

div.galleryb {margin: 5px; border: 1px solid #ccc;}

div.galleryb:hover {border: 1px solid #777;}

div.galleryb img {max-width: 100%; height: auto; }

div.single {display: block; border: 4px solid blue; margin-left: auto; margin-right: auto; width: 750px; height: auto;}

div.single:hover {border: 1px solid #777;}

div.single img {max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;}

.responsive {padding: 0 6px; float: left; width: 49.99999%;}

.clearfix::after { content: ""; display: table; clear: both;}

* {box-sizing: border-box;}

/* tabs css */

 #terms {width: 940px; float:left; padding: 15px; height: 370px;}

 #tabs {width: 100%;}		

 #bottom { box-shadow: 5px 10px 15px #0000FF; border-radius: 25px; margin-top: 0px; background-color: #FFB92E; text-align: left; padding-left: 30px; padding-right:25px; padding-top: 20px; padding-bottom: 20px; width: 100%; margin-top: 20px;}

 #boxLinks { list-style: none; overflow: hidden; margin-bottom: 0px; }

 #boxLinks li { display: inline; } 

 #boxLinks li a { padding: 5px 10px; color: black; text-decoration: none; border: thin solid #000; border-radius: 20px 20px 0px 0px; float: left; display: block; margin-left: -1px;  left: 1px; font-weight: bold; background-color: #CCCCFF; color:#0000FF;}

 #boxLinks li a:hover { color: #fff; background: #000; }

 #box { height: 250px; border: solid #000;overflow: hidden; padding: 0px 30px 0px 30px;  top: -1px; border-radius: 0px 0px 20px 20px;}

 .box { display: none; height: 250px; overflow: auto; display: block; overflow-x: hidden; }

/* If you need to add another tab at the bottom, add #box5:target after #box4:target, etc.*/

 #box1:target, #box2:target, #box3:target #box4:target, #box5:target, #box6:target { display: block; }

/* tabs css end */

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
  #pagewrap {width: 94%;}

  #prodheader {width: 90%; padding: 1% 4%;}
  
  #highlights { width: 90%; padding: 1% 4%; float: left;} 
  
  #whatfits { width: 90%; padding: 1% 4%; float: left;}
  
  #whybuy { width: 90%; padding: 1% 4%; float: left;}

  #promos { width: 90%; padding: 1% 4%; float: left;}

  #images {width: 85%; padding: 1% 4%; float: left; border: 3px solid blue;}

  #productinfo {width: 90%; padding: 1% 4%; float: left;}
  
  #whatsincluded {width: 90%; padding: 1% 4%; float: left;}
 
  #specs {width: 90%; padding: 1% 4%; float: left;}

  #condition {width: 90%; padding: 1% 4%; float: left;}

  #brandinfo {width: 90%; padding: 1% 4%; float: left;}


  #terms {width: 90%; height: auto; padding: 1% 4%; float: left;}

  #bottom {box-shadow: 5px 10px 15px #0000FF; border-radius: 25px; margin-top: 0px; background-color: #FFB92E; text-align: left; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 20px; width: 90%; margin-top: 20px;}

  #boxLinks { list-style: none; overflow: hidden; margin-bottom: 0px; }

  #tab {width: 90%;}

  #box {width: 90%; padding: 1% 4%; float: left;}
  
  div.gallery {margin: 5px; border: 1px solid #ccc;}

  div.gallery:hover {border: 1px solid #777;}

  div.gallery img {width: 100%; height: auto;}

  div.desc {padding: 15px; text-align: center;}  

  div.galleryb {margin: 5px; border: 1px solid #ccc;}

  div.galleryb:hover {border: 1px solid #777;}

  div.galleryb img {max-width: 100%; height: auto;}

  div.single {display: block; border: 1px solid blue; width: 500px; height: 500px margin-left: auto; margin-right: auto; width: 100%}

  div.single:hover {border: 1px solid #777;}

  div.single img {display: block; margin-left: auto; margin-right: auto; width: auto; height: auto;}

  .responsive {width: 49.99999%; margin: 6px 0;}
  
  .clearfix:after { content: ""; display: table; clear: both;}

  header, footer {padding: 1% 4%;}

}
/* for 700px or less */
@media screen and (max-width: 700px) {

  header, footer { width: auto; float: none;} 

  #prodheader { width: auto; float: none;}

  #highlights {width: auto; float: none;}
  
  #whatfits {width: auto; float: none;}
  
  #whybuy {width: auto; float: none;}

  #promo {width: auto; float: none;}
  
  #promotions { width: auto; float: none;} 
     
  #images { width: auto; float: none; border: 3px solid blue;}

  #whatsincluded {width: auto; float: none;}

  #specs {width: auto; float: none;}
  
  #brandinfo {width: auto; float: none;}

  #condition {width: auto; float: none;}

  div.gallery {border: 1px solid #ccc;}
  
  div.galleryb {border: 1px solid #ccc;}

  div.single {border: 1px solid #ccc;}

  div.single img {display: block; margin-left: auto; margin-right: auto; border: 1px solid #ccc;}

  #condition {width: auto; float: none;}
  
 
  #terms {width: auto; padding: 1% 2%; float: none;}

 #bottom {box-shadow: 5px 10px 15px #0000FF; border-radius: 25px; margin-top: 0px; background-color: #FFB92E; text-align: left; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 20px; width: auto%; margin-top: 20px;}#boxLinks { list-style: none; overflow: hidden; margin-bottom: 0px; }

  #tab {width: auto;}

  #box { width: auto; float: none;}

 .responsive {width: 49.99999%; margin: 6px 0;}
 .clearfix:after { content: ""; display: table; clear: both;}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
  header, footer {height: auto;}
  h1 {font-size: 2em;}
  header, #prodheader, #highlights, #whatfits, #whybuy, #promo, #images, #productinfo, #whatsincluded, #specs, #brandinfo, #condition, #terms, #bottom, #tabs, #box, footer {margin-bottom: 5px;}
  #pagewrap, header, #prodheader, #highlights, #whatfits, #whybuy, #promo, #images, #productinfo, #whatsincluded, #specs, #brandinfo, #condition, #terms, #bottom, #tabs, #box, footer {border: solid 1px #ccc;}
  div.gallery {border: 1px solid #ccc; display: block; margin-left: auto; margin-right: auto; width: auto;}
  div.galleryb {border: 1px solid #ccc; display: block; margin-left: auto; margin-right: auto; width: auto;}
  div.single {border: 1px solid #ccc; display: block; margin-left: auto; margin-right: auto; width: auto;}
.responsive {width: 100%;}
.clearfix:after { content: ""; display: table; clear: both;}
}