/* This is a css file for just the homepage i.e. index.html
*  it will load last to override the PRIMARY.CSS settings
*  4-10-2015 MCL
*/

  /* #X{display:none;}*/

   /* THE "GRAYED OUT" FILTER */
   #Y{display:none;}
   #Y.inactive{position:fixed; display:block; z-index:1;
               top:0; right:0; bottom:0; left:0; 
              
               opacity: 0.7;
               filter: alpha(opacity=70); /* For IE8 and earlier */
               
               background-color:#292929;  }
         
  .no-scroll{overflow:hidden; height:100%;} /* attach this class to the body while the light box is open */  

#details{display:block; position:fixed; z-index:2; width:80%; 
         height:90%; top:5%; left:10%; }
#B{width:100%; margin-left:0; margin-right:0;}

#E{width:23%; height:auto;}

#sidebar-content{display:none;}
#side-content{display:none}
#nav{margin-top:0; float:none;}
#category-header{font-size:1.8rem; font-style:italic; font-weight:300;}


#tabs{width:98%; height:auto; margin:0 0 0 0; overflow:auto;}
#subtitle{padding:0; text-align:center;}
.subtitle{margin:0; padding:0 0 0 0; font-size:1.75rem;}

.tab{display:block; width:98%; height:auto; text-align:center; padding:.5rem 1% 1rem 1%;
     border:#CCCCCC medium solid;
     border-bottom:none;
     -webkit-border-top-left-radius:12px;
     -moz-border-top-left-radius:12px;
     border-top-left-radius:12px;
     -webkit-border-top-right-radius:12px;
     -moz-border-top-right-radius:12px;
     border-top-right-radius:12px;}
/*
.sub{display:block;font-size:.8rem; padding:.5rem 0 .5rem 0;}
.sub a{text-decoration:underline;}
   */
      
.t1{background-color:#D8E1B7;}

.t2{position:relative; top:-1rem; background-color:#D0DDE6;}
.t2.sub{position:static;}

#items{position:relative; top:-2rem; /*width:98%;*/width:100%; /*height:770px;*/height:auto; min-height:1400px; margin:0 auto 1rem auto;
       overflow-x:hidden; overflow-y:auto;
       border:#CCCCCC medium solid;
       -webkit-border-bottom-left-radius:12px;
       -moz-border-bottom-left-radius:12px;
       border-top-bottom-radius:12px;
       -webkit-border-bottom-right-radius:12px;
       -moz-border-bottom-right-radius:12px;
       border-top-bottom-radius:12px;}
   
   
#categoryList{display:none;}    
#categoryList > ul{list-style:none; margin-top:0;} 

#view-category-list{display:inline-block; font-size:1.5rem; font-style:italic; width:auto; padding-bottom:1rem;} 

#categoryList > ul > li{width:95%; padding:0 2% 1rem 2%; margin-bottom:1rem;
                        -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;}
              
.category.card > ul > li,.category.card > ul > li > h3{font-size:1rem; padding:1rem 0 0 0;}

.category.card > h2{display:inline-block; font-size:1.25rem; padding:0; margin:.5em 0 0 0;}
.category.card > ul, .category.card > ul > ul{list-style:none; padding-left:1em;}

.category.card > ul > li > h3{margin:0; padding:0;}
.category.card > ul > li > ul{list-style:none;}
.category.card > ul > li > ul > li{font-size:1rem; padding:1rem 0 0 0;}



/*  I think the iframe tabs have to be set in their own set of media queries*/
@media only screen and (min-width: 604px)
{

#tabs{display:table;}
 #subtitle{width:48%;}
 .subtitle{display:table-cell; width:48%; height:4rem; margin:0; vertical-align:top;}
 .tab{display:inline-block; height:100%; border-bottom:none;}
 .tab.t2{position:static; padding-bottom:1rem; font-size:1.55rem;}
 

 #items{ position:static; border-top:none;}

}

@media only screen and (min-width: 300px) and (max-width: 603px)
{
 #subtitle{width:98%}
 .subtitle{width:98%; margin:0; padding:0 0 0 0;}
  #items{ border-top:none;}
}


@media only screen and (min-width:1360px)
{
               
  /* THIS IS STYLING TO CHANGE FROM THE OLD DESKTOP LAYOUT TO A NEW, MORE TABLET LIKE, ONE */
  #E{width:92%; margin-left:4%; margin-right:4%; }
  #nav{width:100%; 
       -webkit-columns: auto 3;
       -moz-columns:auto 3;
       columns:auto 3; }
       

  #categoryList{-webkit-columns:auto 3; 
                -moz-columns:auto 3; 
                columns:auto 3;}                
       
 #F{width:96%; margin-left:2%; margin-right:2%;}
 #tabs{width:100%;}
 #items{width:100%; height:auto; min-height:1400px;}
       
}

@media only screen and (min-width:1025px) and (max-width: 1359px)
{
  /* THIS IS STYLING TO CHANGE FROM THE OLD DESKTOP LAYOUT TO A NEW, MORE TABLET LIKE, ONE */
  #E{width:92%; margin-left:4%; margin-right:4%;}
  #nav{width:100%;
       -webkit-columns: auto 3;
       -moz-columns:auto 3;
       columns:auto 3; }
 
 #categoryList{-webkit-columns:auto 3; 
            -moz-columns:auto 3; 
            columns:auto 3;}
       
 #F{width:96%; margin-left:2%; margin-right:2%;}
 #tabs{width:100%;}
 #items{width:100%; height:auto; min-height:1400px;}
}

@media only screen and (min-width:993px) and (max-width: 1024px)
{
  /* THIS IS STYLING TO CHANGE FROM THE OLD DESKTOP LAYOUT TO A NEW, MORE TABLET LIKE, ONE */
  #E{width:92%; margin-left:4%; margin-right:4%;}
  #nav{width:100%;
       -webkit-columns: auto 3;
       -moz-columns:auto 3;
       columns:auto 3; }
       
 #categoryList{-webkit-columns:auto 2; 
            -moz-columns:auto 2; 
            columns:auto 2;}      
       
 #F{width:96%; margin-left:2%; margin-right:2%;}
 #tabs{width:100%;}
 #items{width:100%; height:auto; min-height:1400px;}
} 

@media only screen and (min-width: 481px) and (max-width: 992px)
{
 
 /* STYLE THE MOBILE HEADER */
 #A{width:92%; height:288px; overflow:auto; }



/* STYLE THE IFRAME AND TABS*/

 #E{width:100%;}
 
 #nav{ width:99%; height:auto; padding:1rem 0 0 1%;
       -webkit-columns:auto 2; 
       -moz-columns:auto 2; 
       columns:auto 2;}
       

#F{width:100%; padding:0; margin:0; height:auto; overflow:auto; }


#C{padding:1rem 2% 1rem 2%;}

 #categoryList{-webkit-columns:auto 2; 
            -moz-columns:auto 2; 
            columns:auto 2;}


}

@media only screen and (min-width:300px) and (max-width: 480px)
{

 /* STYLE THE MOBILE HEADER */
 #A{width:92%; height:288px;}

/* STYLE THE IFRAME AND TABS*/
 #E{width:100%; }
 #nav{ width:99%; height:auto; padding:1rem 0 0 1%;}
 
 #categoryList{-webkit-columns:auto 1; 
            -moz-columns:auto 1; 
            columns:auto 1;}

#F{width:100%; padding:0; margin:0; height:auto; overflow:auto;}

#C{ padding:1rem 2% 1rem 2%;}

}