@charset "utf-8";

#idBG
{
    position : absolute ;
    top      : 0.5rem ;
    left     : 0 ;
    z-index  : -1 ;
}

#idBGPict
{
    width : 100% ;
}

*.clsMenuBox
{
    vertical-align   : top ;
    background-color : transparent ; /* cyan ; */
}

*.clsMenuItem
{
    background-color : transparent ; /* yellow ; */
}

*.clsIconBody
{
    height : 100% ;
}

#idPhotoGrid
{
    display               : grid ;
    grid-template-columns : 50% 50% ;
    grid-template-rows    : auto auto auto auto ;
}

*.clsPhotoBox
{
    padding : 2% 0.5rem 2% 0.5rem ;
}

*.clsPhotoBoxL1 { grid-area : 1 / 1 / span 1 / span 1 ; }
*.clsPhotoBoxL2 { grid-area : 2 / 1 / span 1 / span 1 ; }
*.clsPhotoBoxL3 { grid-area : 3 / 1 / span 1 / span 1 ; }
*.clsPhotoBoxL4 { grid-area : 4 / 1 / span 1 / span 1 ; }
*.clsPhotoBoxR1 { grid-area : 1 / 2 / span 1 / span 1 ; }
*.clsPhotoBoxR2 { grid-area : 2 / 2 / span 1 / span 1 ; }
*.clsPhotoBoxR3 { grid-area : 3 / 2 / span 1 / span 1 ; }
*.clsPhotoBoxR4 { grid-area : 4 / 2 / span 1 / span 1 ; }

#idInfoArea
{
    margin       : auto ;
    border-style : solid ;
    border-width : thick ;
    border-color : darkgray ; /* deepskyblue ; */
    font-weight  : bold ;
    font-size    : large ;
}

.clsInfoHdr
{
    padding          : 0.5em 0 0 0 ;
    text-align       : center ;
    font-size        : x-large ;
    background-color : transparent ; /* lightyellow ; */
}

*.clsInfoDate
{
    padding          : 1.0em 0.5em 0 0.25em ;
    background-color : transparent ; /* lightgreen ; */
}

.clsInfoMsg
{
    padding          : 0.25em 0.5em 0.5em 2.5em ;
    background-color : transparent ; /* lightblue ; */
}

#idMsgTbl
{
    margin           : auto ;
    padding          : 0.5rem 0.5em 0.5rem 0.5em ;
    text-align       : left ;
    border-style     : double ;
    border-width     : thick ;
    border-color     : black ;
    font-weight      : bold ;
    font-size        : large ;
    background-color : lavenderblush ;
}

#colMrk { width : 1.5em ; }

*.clsTblHdr { padding : 0.5em  0.5em  0.5em  0.5em  ; }
*.clsMrk    { padding : 0.25em 0.25em 0.25em 0.5em  ; }
*.clsMsg    { padding : 0.25em 0.5em  0.25em 0.25em ; }


/* For PC or Tablet */
@media screen and ( min-width : 481px )
{

    #idBG
    {
        min-width : 784px ;
    }

    #idMenuArea
    {
        text-align       : center ;
        margin           : 1em 0 1em 0 ;
        background-color : transparent ; /* plum ; */
    }

    *.clsMenuBox
    {
        display : inline-block ;
        height  : 2.5em ; 
        margin  : 0 1em 0 1em ;
    }

    #idPhotoGrid
    {
        border-style : none ;
        border-width : thin ;
        border-color : red ;
    }

    *.clsPhotoBox
    {
        border-style : none ;
        border-width : thin ;
        border-color : green ;
    }

    *.clsPhotoBoxR1 { text-align : right ; }
    *.clsPhotoBoxR2 { text-align : right ; }
    *.clsPhotoBoxR3 { text-align : right ; }
    *.clsPhotoBoxR4 { text-align : right ; }

    *.clsPhotoBody { width : 40% ; }

    #idInfoArea
    {
        width : 640px ;
        /* max-width        : 42em ; */
    }

    #idMsgTbl
    {
        max-width : 45em ;
    }

}


/* For Smartphone */
@media screen and ( max-width : 480px )
{
    #idMenuArea
    {
        margin                : 1em 0 1em 0 ;
        display               : grid ;
        grid-template-columns : 50% 50% ;
        grid-template-rows    : auto auto auto ;
        grid-row-gap          : 1.5em ;
        border-style          : none ;
        border-width          : thin ;
        border-color          : violet ;
        background-color      : transparent ; /* thistle ; */
    }

    *.clsMenuBox
    {
        height : 2.0em ;
    }

    *.clsMenuBox1 { grid-area : 1 / 1 / span 1 / span 1 ; }
    *.clsMenuBox2 { grid-area : 2 / 1 / span 1 / span 1 ; }
    *.clsMenuBox3 { grid-area : 3 / 1 / span 1 / span 1 ; }
    *.clsMenuBox4 { grid-area : 1 / 2 / span 1 / span 1 ; text-align : right ; }
    *.clsMenuBox5 { grid-area : 2 / 2 / span 1 / span 1 ; text-align : right ; }
    *.clsMenuBox6 { grid-area : 3 / 2 / span 1 / span 1 ; text-align : right ; }

    #idSpacer
    {
        background-color : transparent ; /* yellow ; */
        width            : 10% ;
    }

    #idPhotoGrid
    {
        background-color : transparent ; /* pink ; */
    }

    *.clsPhotoBox { text-align : center ; }

    *.clsPhotoBoxL1 { background-color : transparent ; /* lightgreen  ; */ }
    *.clsPhotoBoxL2 { background-color : transparent ; /* yellowgreen ; */ }
    *.clsPhotoBoxL3 { background-color : transparent ; /* lightgreen  ; */ }
    *.clsPhotoBoxL4 { background-color : transparent ; /* yellowgreen ; */ }
    *.clsPhotoBoxR1 { background-color : transparent ; /* yellowgreen ; */ }
    *.clsPhotoBoxR2 { background-color : transparent ; /* lightgreen  ; */ }
    *.clsPhotoBoxR3 { background-color : transparent ; /* yellowgreen ; */ }
    *.clsPhotoBoxR4 { background-color : transparent ; /* lightgreen  ; */ }

    *.clsPhotoBody { width : 90% ; }

    #idInfoArea
    {
        width : 90% ;
    }

    #idMsgTbl
    {
        width : 96% ;
    }

}