/* PRIMARY STYLESHEET FOR MOBILE FRIENDLY 1STOPRETROSHOP.COM 
*  STARTED BY MCL 4-15-2015
*/

/* debug styling added 2/2/17 MCL */
.debuger{display:none;}

/* DEFAULT STYLING THAT WILL BE MODIFIED AS NEEDED BY THE MEDIA QUERIES */
html{font-size:20px; font-family:"Times New Roman", Times, serif;}

body{margin:0; padding:0;}

a:link{text-decoration:none; color:#191919;}
a:visited{color:/*#787878*/#191919;}

.err-msg{display:block; width:50%; min-width:320px; margin:0 auto 0 auto; font-size:2rem; font-weight:300; font-family:'Courier New', Courier, monospace;}
.err{display:block; margin:1em auto 2em auto; text-align:center; font-size:2em; }

.share-bar{position:absolute; display:none;}
button{padding:0; margin:0; border:0; background-color:/*#009898*/#7DB8A6;}


/* STYLE THE HEADER */

#header{width:100%; height:auto; text-align:center; margin:0 auto 0 auto;}

#top-bar{width:100%; height:auto; overflow:auto; background-color:/*#C8C5BC*//*#C0C0C0;*/#7DB8A6; 
         font-family:Arial, Helvetica, sans-serif;}
#logo, #menu{height:3rem; box-sizing:border-box;}

#logo{float:left; width:60%; text-align:left;  font-size:2rem; padding-left:5%; margin:0 0 0 0%; line-height:3rem; clear:left;
      /*background-image:url(//1stopretroshop.com/assets/logo.png); background-repeat:no-repeat; background-position:left center;*/
      color:#3B160D;}
#l1{font-size:1em;}
#l2{font-size:.4em;}

#menu{float:right; width:30%; text-align:right;}
#top-view-cart, #top-help{display:block; float:left; height:3rem; line-height:3rem; vertical-align:middle; text-align:center; background-color:/*#009898*/#C64726;}
#top-view-cart{width:65%;}
#top-help{width:35%;}

#top-cart-icon, #top-help-icon{vertical-align:middle;}

#mid-bar{width:100%; margin:0 auto 0 auto; text-align:left; font-size:1.2rem;}


/* THE PAGANATION CONTROL */
.pg-ctrl{width:300px; text-align:center; margin:0 auto 0 auto; padding-bottom:1em; font-family:Arial, Helvetica, sans-serif;}
.pg-cnt{display:block; padding-bottom:.75em;}
.pg-curr{font-size:1.4rem; }
.pg{display:inline-block; width:60px; height:36px;  vertical-align:middle; background-image: url(//1stopretroshop.com/assets/ui-sprite.png); background-repeat:no-repeat;}
.pg.left{background-position:-26px 0px; margin-right:1em;}
.pg.right{background-position:-86px 0px; margin-left:1em;}
.pg.left.inactive{background-position:-146px 0px;}
.pg.right.inactive{background-position:-206px 0px;}
.pg > a{display:block; width:100%; height:100%;}


/* WE'RE GOING TO USE DESCENDANT SELECTORS AND PSUEDO CLASSES HERE. (I DON'T THINK IS WILL REDUCE PROFORMANCE TOO MUCH) */
/*#sig{margin:.5rem 0 .5rem 0;}*/
p.sigline{display:inline-block; width:93%; margin:0; padding:0 2% 0 5%; font-size:1.2rem; font-family:'Courier New', Courier, monospace;
         /* background-color:#DBAC47;*/
          font-size:1.6rem;}

span.sigline{}
.sigline.first{display:none;}
.sigline.second{padding-left:1rem; font-size:1.3em;}


/* STYLE THE SEARCH BAR */
#search-bar{width:100%; height:auto; padding:1rem 0 1rem 0; text-align:center;
            background-color:/*#C8C5BC*//*#C0C0C0*/#7DB8A6;
            background: -webkit-gradient(linear, left top, left bottom, from(#7DB8A6), to(#C0DED5));
            background-image: -moz-linear-gradient(#7DB8A6, #C0DED5);
            background-image: -ms-linear-gradient(top, #7DB8A6 0%, #C0DED5 100%);
            background-image: -webkit-linear-gradient(#7DB8A6, #C0DED5);|
             background-image: linear-gradient(to bottom, #7DB8A6 0%, #C0DED5 100%);}
             
#search-bar > form{display:inline-block; width:66%; min-width:300px; max-width:600px;}
#search-terms{display:block; float:left; width:73%; max-width:500px; height:1.75rem; border:0; margin:0; padding:0 0 0 2%;
              font-size:1.4rem; font-style:italic; font-weight:300; color:#1C1C1C;
              -webkit-border-top-left-radius:.6rem;
              -webkit-border-bottom-left-radius:.6rem;
              -moz-border-top-left-radius:.6rem;
              -moz-border-bottom-left-radius:.6rem;
              border-top-left-radius:.6rem;
              border-bottom-left-radius:.6rem;}

#search-button{display:block; float:left; width:25%; min-width:50px; max-width:100px; height:1.75rem;
               -webkit-border-top-right-radius:.6rem;
               -webkit-border-bottom-right-radius:.6rem;
               -moz-border-top-right-radius:.6rem;
               -moz-border-bottom-right-radius:.6rem;
               border-top-right-radius:.6rem;
               border-bottom-right-radius:.6rem; 
              background-color:#c64726;}


#slider{background-color:#C0DED5;}

/* STYLE THE PAGE SCAFFOLD */
#page-title, #page-subtitle, .ipage.title{width:100%; text-align:center; margin:0; padding:1rem 0 1rem 0; font-size:1.75rem; font-weight:300; font-family:Arial, Helvetica, sans-serif;
                          /*color:#3B160D;*/}

                               
#page-subtitle > span{display:block; font-size:1.5rem; font-style:italic;}

.ipage{}
.photos{width:100%; list-style:none; margin:0; padding:0;}
.photos > li{position:relative;}
.ipage.description{width:98%; max-width:966px; margin:0 auto 0 auto; font-size:1.25rem;}
.ipage.photo{padding-bottom:0;}
.ipage.item-no{}
#main-content{width:100%; height:auto; padding-bottom:2.5em; background-color:#C0DED5;}


/* STYLE THE ITEMS */

#item-list{width:100%; height:auto; list-style:none; padding:0; margin:0; /*background-color:#E8E4DE;*/}

.item{}

.card{position:relative; display:inline-block; vertical-align:top; box-sizing:border-box; width:31.33%; height:auto; margin:0 1% 1.5rem 1%; 
     /* background-color:#FFFFFF; border:medium solid /*#C5BCAF*/ /*#C0C0C0;*/
     /* border:medium solid #DAA533;*/
      background-color:#FFFFFF;
      -webkit-border-radius:12px;
      -moz-border-radius:12px;
      border-radius:12px;
      -webkit-column-break-inside: avoid;
      -moz-column-break-inside: avoid;
      -o-column-break-inside: avoid;
      -ms-column-break-inside: avoid;
      page-break-inside: avoid;           
      break-inside: avoid-column;}  
 
.photo, .title, .description, .on-page, .price, .item-no, .as-page, .cart, .sold, .hold
{display:block; width:96%; height:auto; padding:1rem 0 1rem 0; margin:0 auto 0 auto; font-family:Arial, Helvetica, sans-serif;} 

.photo{width:100%; height:auto;}

.title{font-size:1.2rem;}
.description{font-size:.8em; font-family: 'Courier New', Courier, monospace;}


.on-page, .price, .as-page, .item-no, .cart, .sold, .hold{text-align:center;}

.price {margin:0 auto 0 auto; font-size:1.3rem ; vertical-align:baseline;}
.price > span{font-size:1.5rem; vertical-align:baseline; }
.price > span.sold{text-decoration:line-through;}
.price.sold{display:none;}


.item-no > span{font-size:1.2rem;}
    
.as-page a{text-decoration:underline; }  

.item.sold > span, .item.hold > span{font-size:1.5rem;}
.ipage.sold, .ipage.hold{font-size:1.8rem;}

#button-addcart{display:inline-block; width:auto; height:auto; box-sizing:border-box; font-size:1.2rem; padding:.25em .5em .25em .5em; 
                background-color:/*#009898*/#7DB8A6;
                -webkit-border-radius:.75rem;
                -moz-border-radius:.75rem;
                border-radius:.75rem;}
                
/* STYLE THE SUBCATEGORY LINKING */
#subCategories{width:100%; height:auto; overflow:auto; }
              
.subCategoryList{list-style:none; width:100%; height:auto; overflow:hidden; padding:0 0 1.5em 0; margin:0; 
                 -webkit-columns: auto 2;
                 -moz-columns: auto 2;
                 columns:auto 2;}
.subCategoryList > li{display:block; width:100%/*48%*/; height:auto; float:left; padding:1%; /*min-height:159px;*/
                      overflow: hidden; /* Fix for firefox and IE 10-11  */
                      -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
                      page-break-inside: avoid; /* Deprecated Firefox */
                      -moz-column-break-inside:avoid; /* Current Firefox */
                      column-break-inside:avoid;
                      break-inside: avoid; /* IE 10+ */
                      break-inside: avoid-column;}
.subCategoryList > li > a > img{display:block; float:left; width:212px; height:auto;}
.sci{display:block; overflow:hidden; padding:0/*.5em*/ 0 0/*.5em*/ 2%; font:1rem Arial, Helvetica, sans-serif;}

.subCategoryList > li > div > a.scdi{}
a.subcategory.default-image{display:block; float:left; width:52px; height:52px; padding-top:1px;
                            background-image: url(//1stopretroshop.com/assets/ui-sprite.png); 
                            background-repeat:no-repeat;
                            background-position:-352px 0px;}
                            
a.subcategory.default-image{display:block; float:left; width:52px; height:52px; padding-top:1px;
                            background-image: url(//1stopretroshop.com/assets/ui-sprite.png); 
                            background-repeat:no-repeat;
                            background-position:-352px 0px;}                            


/*
#subCategories{width:100%; height:auto; overflow:auto;}
.subCategoryList{list-style:none; height:auto; overflow:hidden; padding:0 0 1.5em 0; }
.subCategoryList > li{display:block; width:auto; height:auto; float:left; padding:1%; min-height:159px;}
.subCategoryList > li > a > img{display:block; width:212px; height:auto;}
.sci{display:block; padding:.5em 0 .5em 2%; font:1.5rem Arial, Helvetica, sans-serif;}
*/

/* STYLE THE NAVIGATION */
#category-header{width:100%; text-align:center; font-size: 1.8rem; font-weight:300; margin:0; font-family:Arial, Helvetica, sans-serif;}

nav{width:100%;
    background-image: -moz-linear-gradient(#C0DED5, #FFFFFF);
    background-image: -ms-linear-gradient(top, #C0DED5 0%, #FFFFFF 100%);
    background-image: -webkit-linear-gradient(#C0DED5, #FFFFFF);|
    background-image: linear-gradient(to bottom, #C0DED5 0%, #FFFFFF 100%);}

#category-navigation{width:50%; margin:0 auto 2em auto; padding-left:0; list-style:none; font: 1.5rem 'Courier New', Courier, monospace;}
#category-navigation > li{padding:.5em 0 .5em 0;}
#category-navigation > li::before{content:"";
                                  display:inline-block;
                                  margin-right:.5em;
                                  width:52px;
                                  height:52px;
                                  background-image: url(//1stopretroshop.com/assets/ui-sprite.png); 
                                  background-repeat: no-repeat;
                                  background-position:-352px 0px; 
                                  vertical-align:middle;}

.navigation.card{width:98%; list-style:none; margin:0 1% 1rem 1%; padding:1rem 0 1rem 0;
                 border:medium solid #7DB8A6;}

.navigation > li{padding:0 0 .5rem 25px; font-size:1.25rem; font-family:'Courier New', Courier, monospace;}      
li.link-header{font-size:1.7rem; font-weight:300; padding-left:0; text-align:center; font-family:Arial, Helvetica, sans-serif;}

#footer{font-family:Arial, Helvetica, sans-serif;}

#footer.card{width:99%; margin-left:.5%; margin-right:.5%;}

#site-navigation{text-align:center; font-size:2rem; padding-left:0; margin:0 auto 0 auto;}
#site-navigation > li{display:inline-block;} 

#badges{width:96%; margin:1rem auto 0 auto; padding:0 0 .5rem 0; text-align:center;} 

.badge{display:inline-block;}  

#add-this{width:320px; margin:2rem auto 0 auto;}

#copyright{text-align:center; padding:1rem 0 1rem 0; font-size:.8rem;} 

#avail-link:link{text-decoration:underline;}

/* STYLING FOR THE THE SHIPPING BANNER */
div.shp-msg{background-color:white; font-size:1em; font-style:italic; font-family: 'Courier New', Courier, monospace; padding:.25rem 0 .25rem 0;}
a.shp-msg{font-weight:bold; font-style:italic; white-space:nowrap;}





/* MEDIA QUERY STYLING FOR MOBILE SUPPORT */

@media only screen and (min-width: 1360px)
{
   .item.card{width:23%;} 
   .err-msg{font-size:1.3rem;}
   
  
}

@media only screen and (min-width: 1025px) and (max-width: 1359px)
{
   .item.card{width:31.33%;}
   .err-msg{font-size:1.3rem;}
}

@media only screen and (min-width: 966px) and (max-width: 1024px)
{
  .item.card{width:48%;}
  #category-navigation{width:60%;}
}

@media only screen and (min-width: 481px) and (max-width: 965px)
{
   .item.card{width:48%;}
   
   #middle-bar{text-align:center;}
   #signature{display:inline-block; margin:.5rem 0 .5rem .2rem; padding-left:0; font-size:1rem;}
   #sig1{margin-left:.2rem; font-size:.9em;}
   #sig3{margin-left:.2rem; font:1.2em Arial, Helvetica, sans-serif;}
   #sig4{margin-left:.2rem; font:1.3rem Georgia, "Times New Roman", serif;}
   #sig5{margin-left:.2rem; font:1.2rem "Courier New", Courier, monospace;}
 
  .subCategoryList > li{display:block; width:98%; height:auto; float:left; padding:1%; min-height:159px; }
  .subCategoryList > li > a > img{display:block; float:left; width:212px; height:auto;}
  .sci{display:block; overflow:hidden; padding:.5em 0 .5em 2%;} 
  
  #category-navigation{width:80%;}
}

@media only screen and (min-width: 300px) and (max-width:640px)
{
#category-navigation{width:70%;}
#category-navigation > li{padding:.5em 0 .5em 0; line-height:36px;text-align:left;}
                          
#category-navigation > li::before{content:"";
                                  display:inline-block;
                                  margin-right:.5em;
                                  width:32px;
                                  height:32px;
                                  background-image: url(//1stopretroshop.com/assets/ui-sprite.png); 
                                  background-repeat: no-repeat;
                                  background-position:0px -31px; 
                                  vertical-align:middle;}
}

@media only screen and (min-width: 300px) and (max-width: 480px)
{
  /* MAKE SIZE CHANGES TO HEADER */
   #logo{font-size:1.8rem;}
   #menu{width:100%; float:left;}
   #sig2{display:block;}
  
   .item.card{width:98%;}
   
   #category-navigation{width:98%; font-size:1.1rem; margin-left:2%; text-align:center;}
                     
 .subCategoryList > li{display:block; width:98%; height:auto;  padding:1%; min-height:159px; }
 .subCategoryList > li > a > img{display:block; margin:0 auto 0 auto; float:none; width:212px; height:auto;}
 .sci{display:block; overflow:hidden; width:100%; padding:.5em 0 .5em 2%; text-align:center; }                      
 
 div.shp-msg{font-size:1em;}
 a.shp-msg{font-size:.75em;}

}