/* CSS3 Detection -- nothing in this stylesheet should be used by pre-CSS3 browsers or Dillo */

/* I can keep MSIE 9 out of here; now if I could just stop Opera 9.5 through 12.02 from raising their hands to be recognized for CSS3 only to fall on their faces when told to do flexbox... */

/* Note that this may still include some not used for a long time legacy ids and classes that should be removed */


@media (min-width:1em)
   {
    /* Raise your hand if you know what CSS3 is */
    /* Change background and enable NullCont */
    /* Okay, and something called GallerySpacer */
    /* Optimized for most desktops; mobile is a modification of this */
    
    /* If this is unchanged further down, the layout is case gold */
    BODY
      {
        background-color: #FFFFFF;
        background-image: url("/images/CSL_Backdrop_1920px_8bit.png");
        -webkit-background-size: 55em 55em;
        -moz-background-size: 55em;
        -o-background-size: 55em;
                background-size: 55em;
        background-repeat: no-repeat;
        background-position: 0em 5em;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        box-orient: vertical;
        box-direction: normal;
                flex-direction: column;
        min-height: 100%;
        max-width: 100%;
        max-width: 100vw;
        min-height: 100vh;
        }
    #NullCont, #GallerySpacer
       {
        display: block;
        min-width: 22em;
        height:5em;
        /* background: #BFFFBF */
        }
    
    /* Remove CSS1/2 contentbox and menu item outlines */
    /* Or maybe leave the contentbox outlines and just remove the menu ones.if I borrow a change from LPedia */
    .linkbutton
       {
        border:none;
        -webkit-flex-shrink: 1;
            -ms-flex-negative: 1;
                flex-shrink: 1;
        }
    
    /* This is only for legacy; something bigger is used for CSS3+ */
    #LogoIMGCont
       {
        display:none;
        } 
    
    .contentbox
       {
        max-width: 250em;
        }
    
    /* Switch to Flexbox and hope certian legacy Opera users can deal with the breakage */
    #Pagecontainer
       {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-flex:1;
        -webkit-flex-grow:1;
        -moz-box-flex:1;
        -ms-flex-positive:1;
                flex-grow:1;
        -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
                flex-shrink: 1;

        
        }
    
    #Outercontainer
       {
        display:-webkit-box;
        display:-webkit-flex;
        display:-moz-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: space-betmween;
        -webkit-justify-content: space-betmween;
        -moz-box-pack: space-betmween;
        -ms-flex-pack: space-betmween;
                justify-content: space-betmween;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -moz-box-align: stretch;
        -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-flex:1;
        -webkit-flex-grow:1;
        -moz-box-flex:1;
        -ms-flex-positive:1;
                flex-grow:1;
        -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
                flex-shrink: 1;

        }

    #ContentCont, #LogoCont
       {
        -webkit-box-flex:1;
        -webkit-flex-grow:1;
        -moz-box-flex:1;
        -ms-flex-positive:1;
        flex-grow:1;
        -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
                flex-shrink: 1;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-direction: row;
                flex-direction: row;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        } 

    #MidCont
       {
        display:-webkit-box;
        display:-webkit-flex;
        display:-moz-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: space-betmween;
        -webkit-justify-content: space-betmween;
        -moz-box-pack: space-betmween;
        -ms-flex-pack: space-betmween;
                justify-content: space-betmween;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -moz-box-align: stretch;
        -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -moz-box-flex: 1;
        -ms-flex-positive: 1;
                flex-grow: 1;
        -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
                flex-shrink: 1;
        }
    
    #UpperCont
       {
        display:-webkit-box;
        display:-webkit-flex;
        display:-moz-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: space-betmween;
        -webkit-justify-content: space-betmween;
        -moz-box-pack: space-betmween;
        -ms-flex-pack: space-betmween;
                justify-content: space-betmween;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -moz-box-align: stretch;
        -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
                flex-shrink: 1;
        }
    
    #LowerCont, #GalleryCont
       {
        display:-webkit-box;
        display:-webkit-flex;
        display:-moz-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -moz-box-orient: horizontal;
        -moz-box-direction: normal;
        -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: space-evenly;
        -webkit-justify-content: space-evenly;
        -moz-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -moz-box-flex: 1;
        -ms-flex-positive: 1;
                flex-grow: 1;
        -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
                flex-shrink: 1;
        /* align-items: stretch;
        background-color: #FFFF00; */
        }
    #LowerCont
       {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        }

    #MenuCont, #LogoCont, #GalleryCont, #NoticeCont, #VertNameCont
       {
        
        }
    
    #NoticeCon
       {
        -webkit-box-flex:1;
        -webkit-flex-grow:1;
        -moz-box-flex:1;
        -ms-flex-positive:1;
        flex-grow:1;
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
                align-self: flex-end /* stretch */
        }
        
    #MenuCont
       {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
                flex-shrink: 1;

        /* margin: 0 */
        }
    }

/* Big Screens */
@media (min-width:130em) /* and (min-width:1600px) */
   {
    .contentbox
       {
        max-width: 80em;
        }
    .deckitem
       {
        height: 15em;
        width: 15em;  
        }
    .deckitem IMG
      {
        height:15.5em;
        width:15.5em;
        }
    }

/* Bigger Screens */
@media (min-width:180em) /* and (min-width:1600px) */
   {
    #TopCont
       {
        display:none;
        }
    #SideCont
       {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        width: 5em;
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
                justify-content: space-around;
        }

    .vertbox
       {
        width: 1em;
        font-size: 300%;
        text-align: center;
        line-height: 1.0em ;
        }
    .contentbox
       {
        }
    .deckitem
       {
        height: 25em;
        width:  25em;  
        }
    .deckitem IMG
      {
        height: 25.5em;
        width:  25.5em;
        }
    }

/* Not as big screens */
@media (max-width:85em)
   {
    #TopCont
       {
        /* Case Lime */
        /* background-color:#BFFF3F; */
        }
    BODY
      {
        background-color: #FFFFFF;
        background-image: url("/images/CSL_Backdrop_1920px_8bit.png");
        -webkit-background-size: 65% 65%;
        -moz-background-size: 65%;
        -o-background-size: 65%;
                background-size: 65%;
        background-repeat: no-repeat;
        background-position: 0em 5em;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
                flex-direction: column;
        min-height: 100%;
        min-height: 100vh;
        }
    #NullCont
       {
        display: block;
        /* width: 20em; */
        min-width: 25%;
        height:5em;
        /* border: 4px dashed #FF00BF; */
        }
    #GallerySpacer
       {
        display: none;
        width: 0;
        }
    }
    
@media (max-width:65em)
   {
    #TopCont
       {
        /* Case Red */
        /* background-color:#EF3F00; */
        }
    BODY
      {
        background-color: #FFFFFF;
        background-image: url("/images/CSL_Backdrop_1920px_8bit.png");
        -webkit-background-size: 40% 40%;
        -moz-background-size: 40%;
        -o-background-size: 40%;
                background-size: 40%;
        background-repeat: no-repeat;
        background-position: 0 7.5em;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
                flex-direction: column;
        min-height: 100%;
        min-height: 100vh;
        }
    #NullCont
       {
        display: block;
        /* width: 20em; */
        min-width: 15%;
        height:5em;
        /* border: 4px dashed #FF00BF; */
        }
    }

@media (max-width:50em)
   {
    BODY
      {
        background-image: none;
        }
    #TopCont
       {
        /* Case Blue */
        /* background-color:#3F3FFF; */
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
           -moz-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        background-image: url("/images/CSL2016_120px.png");
        min-height: 272px; 
        -webkit-background-size: 120px 272px; 
           -moz-background-size: 120px 272px; 
             -o-background-size: 120px 272px; 
                background-size: 120px 272px; 
        background-repeat: no-repeat;
        background-position: 0 center;
        -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
           -moz-box-orient: horizontal;
           -moz-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
         -webkit-align-self: center;
        -ms-flex-item-align: center;
                 align-self: center;
        max-width: 100%;
        
        }
    #MenuCont, .linkbutton, #InnerMenuCell, #Logomen
       {
        max-width: 100%;
        display: block;
        }
    #MenuCont
       {
        width: 80%
        }
    #NullCont
       {
        display: none;
        /* width: 20em; */
        min-width: 3em;
        height:20em;
        /*border: 4px dashed #FF00BF; */
        }
    .contentbox
       {
        width: 80%;        
        -webkit-align-self: flex-end;
        -ms-flex-item-align: end;
        align-self: flex-end;
        }
    #HeaderLogo
       {
        display:block;
        height: 4em; 
        width: 100px;
        /*border: 3px solid #FFBF00;*/
        } 
    }

@media (max-width:40em) and (max-width:511px), (orientation:portrait) and (max-width:40em)
   {
    BODY
      {
        background-image: none;
        }
    #TopCont
       {
        /* Case Violet */
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        /* background-color:#7F007F; */
        font-size:200%;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
           -moz-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        background-image: url("/images/CSL2016_120px.png");
        min-height: 272px; 
        -webkit-background-size: 120px 272px; 
           -moz-background-size: 120px 272px; 
             -o-background-size: 120px 272px; 
                background-size: 120px 272px; 
        background-repeat: no-repeat;
        background-position: 0 center;
        -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
           -moz-box-orient: horizontal;
           -moz-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
         -webkit-align-self: center;
        -ms-flex-item-align: center;
                 align-self: center;
        margin: auto;
        
        
        }
    #UpperCont
       {
        -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
           -moz-box-orient: vertical;
           -moz-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
         -webkit-align-self: center;
        -ms-flex-item-align: center;
                 align-self: center;

        }

    #NullCont
       {
        display: none;
        }
    #HeaderLogo
       {
        display:block;
        height: 4em; 
        width: 100px;
        /*border: 3px solid #FFBF00;*/
        } 
    
    #LSP_name_top
       {
        min-width: 0%;
        }


    #MidCont, #LowerCont
       {
        max-width: 90%;
        max-width: 90vw;
        align-items: center;
        align-self: center;
        margin: auto;
        /* overflow: scroll; */
        
        }
    #menuCont, .linkbutton, #InnerMenuCell, #Logomen
       {
        margin: auto;
        margin-top: 0;
        max-width: 100%;
        display: block;     
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
         -webkit-align-self: center;
        -ms-flex-item-align: center;
                 align-self: center;
        }
    #InnerMenuCell
       {
        width: 80%;
        width: 80vw;
        }
    .bigwords, H1, H2, H3, .linkbutton
       {
        /* word-break: break-all; This goes way too far */
        word-break: break-word;
        font-size: smaller;
        
        }
    .deckitem
       {
        height: 8em;
        width:  8em;  
        }
    .deckitem IMG
      {
        height: 8.5em;
        width:  8.5em;
        }
    }