/*title: calstrider.org Style Sheet"*/
/* W3C CSS 3 Validated: 12/22/20 */
/* W3C CSS Validated: 01/22/16 */
/* W3C CSS Validated: 11/06/15 */
/*  Media controls for different sized screens  */

@media screen and (max-width: 320px) {

   /* body::before{ content: "Smartphone <= 320 fired"; 
                  font-weight: bold; 
                  display: block; 
                  text-align: center; 
                  background: rgba(255,255,0, 0.9);  
                  position: absolute; top: 0; left: 0; right: 0; z-index: 99; 
                  }  */
                  
    body {
            width: 100%;
            font-size: 12px;
            background-image: none;
    }
    hr.topline {display: block;}
    .large-logo {display: none;}
div.large-screen {display: none;
                  visibility: hidden;}      
div.framework_logo  { text-align: center;
                      max-width: 100%;
                      margin: 0px auto;
            }   
                
div.framework_menu  { text-align: center;
                      max-width: 100%;
                      margin: 0px auto;
            } 
div.framework_menu_title  { text-align: center;}
div.framework_menu_lines  { text-align: center;}
    
.sponsor-image-t      {
                      max-height: 6rem; 
                   } 
                   
.sponsor-image-b      {
                      max-height: 5rem;
                   }                 
#slide-holder     { min-width:90%;
                    max-height:30rem;
       }  
       
#calendar-holder  {min-width: 90%;}
                                        
.header-image    {
                      max-width: 100%;
                      height:auto;
              } 
               
img.schedule-image   {
                      display:block;
                      height: auto !important; 
                      max-width: 80% !important; 
                      } 

img.announcement-image-lg   {
                      display:block;
                      height: auto !important; 
                      max-width: 90%; 
                      }
                      
img.announcement-image-sm   {
                      display:block;
                      height: auto !important; 
                      max-width: 80%;
                      }                      
                      
img.reminder-image-lg   {
                      display:block;
                      height: auto !important; 
                      max-width: 90%;
                      }  
                      
img.reminder-image-sm   {
                      display:block;
                      height: auto !important; 
                      max-width: 80%;
                      }       

.schedule-social-image   {max-width: 75%;}                            
.schedule_event_number   {width: 15%; /* column 1 */ } 
.schedule_event_when     {width: 35% !important; /* column 2 */}
.schedule_event_location {width: 50% !important; /* column 3 */ }
.schedule_event_director {width: 100% ; /* column 4 */ }    

    #left-column  {width: 100%;}
    .main-border-left   { border-left: 0px solid #3366CC; }
    #right-column  {width: 100%;}
    .main-border-right   { border-right: 0px solid #3366CC; }
    .main-border-top  { border-top: 0px solid #3366CC;}
    
    .leftof-3columns {width: 100%;}
    .centerof-3columns {width: 100%;}
    .rightof-3columns {width: 100%;}
    
    .leftof-2columns {width: 100%;}
    .rightof-2columns {width: 100%;}
    #footer-left {display: none;}
    #footer-center {width: 100%;}      
    #footer-right {display: none;}
}

@media screen and (min-width: 321px) and (max-width: 480px) {
                    
   /* body::before{ content: "321 < Smartphone <= 480 fired"; 
                  font-weight: bold; 
                  display: block; 
                  text-align: center; 
                  background: rgba(255,255,0, 0.9); 
                  position: absolute; top: 0; left: 0; right: 0; z-index: 99; 
                  } */    

    body {
            width: 100%;
            font-size: 13px;
            background-image: none;
    }
    hr.topline {display: block; visibility: visible;}
    .large-logo {display: none;}
div.large-screen {display: none;
                  visibility: hidden;}      
div.framework_logo  { text-align: center;
                      max-width: 100%;
                      margin: 0px auto;
            }   
                
div.framework_menu  { text-align: center;
                      max-width: 100%;
                      margin: 0px auto;
            } 
            
div.framework_menu_title  { text-align: center;}
div.framework_menu_lines  { text-align: center;}
    
.sponsor-image-t      {
                      max-height: 6rem; 
                   } 
                   
.sponsor-image-b      {
                      max-height: 5rem;
                   }                 
                   
#slide-holder     { min-width:80% !important;
                    max-height:30rem;
       }
       
#calendar-holder  {max-width: 90% !important;}
                      
.header-image    {
                      max-width: 100%;
                      height:auto;
              }
                    
img.schedule-image   {
                      max-width: 80% !important; 
                      height:auto;
                      } 

img.announcement-image-lg   {
                      display:block;
                      height: auto !important; 
                      max-width: 90%; 
                      }
                      
img.announcement-image-sm   {
                      display:block;
                      height: auto !important; 
                      max-width: 80%;
                      }                      
                      
img.reminder-image-lg   {
                      display:block;
                      height: auto !important; 
                      max-width: 90%;
                      }  
                      
img.reminder-image-sm   {
                      display:block;
                      height: auto !important; 
                      max-width: 80%;
                      }       

.schedule-social-image   {max-width: 75%;}                        
.schedule_event_number   {width: 15%; /* column 1 */ } 
.schedule_event_when     {width: 35% !important; /* column 2 */}
.schedule_event_location {width: 50% !important; /* column 3 */ }
.schedule_event_director {width: 100% ; /* column 4 */ }

    #left-column  {width: 100%;}
    .main-border-left   { border-left: 0px solid #3366CC; }
    #right-column  {width: 100%;}
    .main-border-right   { border-right: 0px solid #3366CC; }
    .main-border-top  { border-top: 0px solid #3366CC;}
    
    .leftof-3columns {width: 100%;}
    .centerof-3columns {width: 100%;}
    .rightof-3columns {width: 100%;}
    
    .leftof-2columns {width: 100%;}
    .rightof-2columns {width: 100%;}  
    #footer-left {display: none;}
    #footer-center {width: 100%;}
    #footer-right {display: none;}
}

@media screen and (min-width: 481px) and (max-width: 680px) {
                          
   /* body::before{ content: "481 < Tablet <= 680 fired"; 
                  font-weight: bold; 
                  display: block; 
                  text-align: center; 
                  background: rgba(255,255,0, 0.9); 
                  position: absolute; top: 0; left: 0; right: 0; z-index: 99; 
                  }  */ 

    body {
            width: 100%;
            font-size: 14px;
            background-image: none;
    }
    hr.topline {display: block; visibility: visible;}
    .large-logo {display: none;}
div.large-screen {display: none;
                  visibility: hidden;}      
    
div.framework_logo  { text-align: center;
                      max-width: 100%;
            }   
                
div.framework_menu  { text-align: center;
                      max-width: 100%;
            }    
    
.sponsor-image-t      {
                      max-height: 6rem; 
                   } 
                   
.sponsor-image-b      {
                      max-height: 5rem;
                   } 
                   
#slide-holder     { max-width: 75% !important;
                    max-height:30rem;
       }
       
#calendar-holder  {max-width: 75% !important;}
                      
.header-image    {
                      max-width: 100%;
              }
                    
img.schedule-image   {
                      max-width: 80%; 
                      height:auto;
                      } 

img.announcement-image-lg   {
                      display:block;
                      height: auto !important; 
                      max-width: 90%; 
                      }
                      
img.announcement-image-sm   {
                      display:block;
                      height: auto !important; 
                      max-width: 80%;
                      }                      
                      
img.reminder-image-lg   {
                      display:block;
                      height: auto !important; 
                      max-width: 90%;
                      }  
                      
img.reminder-image-sm   {
                      display:block;
                      height: auto !important; 
                      max-width: 80%;
                      }       
                                   
.schedule-social-image-column    {
                 max-width: 100%;
                      } 
                      
.schedule-social-image    {
                 max-width: 100%;
                      } 
                      
.schedule_event_number   {width: 15%; /* column 1 */ } 
.schedule_event_when     {width: 35% !important; /* column 2 */}
.schedule_event_location {width: 50% !important; /* column 3 */ }
.schedule_event_director {width: 100% ; /* column 4 */ }    

    #left-column  {width: 100%;}
    .main-border-left   { border-left: 0px solid #3366CC; }
    #right-column  {width: 100%;}
    .main-border-right   { border-right: 0px solid #3366CC; }
    .main-border-top  { border-top: 0px solid #3366CC;}

    .leftof-3columns {width: 100%;}
    .centerof-3columns {width: 100%;}
    .rightof-3columns {width: 100%;} 
    
    .leftof-2columns {width: 50%;}
    .rightof-2columns {width: 50%;} 
    
    .right2of-3columns {width: 100%;}
    .club_slides-height {min-height: 15rem;}          
    
    #footer-left {display: none;}
    #footer-center {width: 100%;}
    #footer-right {display: none;}
}

@media screen and (min-width: 681px) and (max-width: 768px) {

  /* body::before{ content: "681 < Tablet <= 768 fired"; 
                  font-weight: bold; 
                  display: block; 
                  text-align: center; 
                  background: rgba(255,255,0, 0.9); 
                  position: absolute; top: 0; left: 0; right: 0; z-index: 99; 
                  } */  

    body {
            width: 100%;
            font-size: 15px;
            background-image: none;
    }
    /*
    .large-logo {display: none;}
div.large-screen {display: none;
                  visibility: hidden;}  
                         */
.sponsor-image-t      {
                      max-height: 6rem; 
                   } 
                   
.sponsor-image-b      {
                      max-height: 5rem;
                   }
                   
#slide-holder     { max-width: 25rem !important;
                    max-height:30rem;
       }
       
#calendar-holder  {width: 50%;}
                    
img.schedule-image   {
                      max-width: 80%; 
                      height:auto;
                      } 
                      
    .schedule_event_location   {
                     width: 100%;
                }
                
    .right2of-3columns {width: 50%;}
    .club_slides-height {min-height: 22rem;}          
                  
/*    .leftof-3columns {width: 50%;}
    .centerof-3columns {width: 50%;}
    .rightof-3columns {width: 50%;}

    .leftof-3columns {width: 100%;}
    .centerof-3columns {width: 100%;}
    .rightof-3columns {width: 100%;}   */
    
    #footer-left {display: none;}
    #footer-center {width: 100%;}
    #footer-right {display: none;}
    
    nav.menu {display: none;}
}

@media screen and (min-width: 769px) and (max-width: 900px) {

   /* body::before{ content: "769 < Desktop <= 900 fired"; 
                  font-weight: bold; 
                  display: block; 
                  text-align: center; 
                  background: rgba(255,255,0, 0.9); 
                  position: absolute; top: 0; left: 0; right: 0; z-index: 99; 
                  } */ 

    body {
            width: 100%;
            font-size: 16px;
            
    }
   /* .large-logo {display: none; }  */
                   
#slide-holder     { min-width: 90% !important;
                    max-height: 23rem !important;
       }  
                    
/*               
img.schedule-image   {
                     max-width: 18rem;
                      max-width: 80%; 
                      height:auto;
                      }    */
                      
.sponsor-image-t      {
                      max-height: 7rem; 
                   } 
                   
.sponsor-image-b      {
                      max-height: 6rem;
                   } 
                   
img.umbrella-image   {
                      max-width: 5rem !important;
                      height:auto;
                      }   
                      
    .schedule_event_location   {
                     width: 100%;
                }
    #footer-left {display: none;}
    #footer-center {width: 100%;}
    #footer-right {display: none;}
    
    nav.menu {display: none;}

}

@media screen and (min-width: 901px) and (max-width: 1023px) {

  /*body::before{ content: "900 < Desktop <= 1023 fired"; 
                  font-weight: bold; 
                  display: block; 
                  text-align: center; 
                  background: rgba(255,255,0, 0.9); 
                  position: absolute; top: 0; left: 0; right: 0; z-index: 99; 
                  } */

    body {
            width: 100%;
            font-size: 16px;
    }
    
#slide-holder     { min-width: 90% !important;
                    max-height:30rem;
       }  
    
.sponsor-image-t      {
                      max-height: 8rem; 
                   } 
                   
.sponsor-image-b      {
                      max-height: 7rem;
                   }                    
                          
    nav.menu {display: none;} 
}

@media screen and (min-width: 1024px) {

    /*body::before{ content: "Desktop >= 1024 fired"; 
                  font-weight: bold; 
                  display: block; 
                  text-align: center; 
                  background: rgba(255,255,0, 0.9); 
                  position: absolute; top: 0; left: 0; right: 0; z-index: 99; 
                  }*/ 

    body {
            font-size: 16px;            
	          max-width: 100%;
    } 
    
    .header  {
            max-width: 32%;
            }
            
    .content  {
            max-width: 49.72%;
            }
    nav.menu {display: none;} 
}