@charset "ISO-8859-1";

#header{position:absolute; margin-top:0%; margin-left:0%; width:100%; height:0%; background-color:rgb(255, 128, 64)}

#advt1{position:absolute; margin-top:1%; margin-left:0%; width:15%; height:0%; background-color:aquamarine}

#slider{position:absolute; margin-top:1%; margin-left:15%; width:70%; height:0%; background-color:cadetblue}

#advt2{position:absolute; margin-top:1%; margin-left:85%; width:15%; height:0%; background-color:aquamarine}

#scrollnews{position:absolute; margin-top:15%; margin-left:0%; width:80%; height:0%; background-color:blueviolet}

#linkmember{position:absolute; margin-top:15%; margin-left:80%; width:20%; height:0%; background-color:brown}

#verticalmenu{position:absolute; margin-top:25%; margin-left:0%; width:20%; height:0%; background-color:darkgray}

#displayarea{position:absolute; margin-top:25%; margin-left:24%; width:56%; height:200px; background-color:antiquewhite}

#notice{position:absolute; margin-top:15%; margin-left:80%; width:20%; height:0%; background-color:burlywood}

#gallery{position:absolute; margin-top:32%; margin-left:80%; width:20%; height:0%; background-color:darkorange}

#footer{position:absolute; margin-top:110%; margin-left:0%; width:100%; height:0%; background-color:brown}



.header{background-color:rgb(255, 128, 64);}

.advt1{background-color:aquamarine;}

.sliderdiv{background-color:cadetblue;}

.advt2{background-color:aquamarine;}

.scrollnews{background-color:blueviolet;}

.linkmember{background-color:brown;}

.verticalmenu{background-color:darkgray;}

.displayarea{background-color:antiquewhite;}

.notice{background-color:burlywood;}

.gallery{background-color:darkorange;}

.footer{background-color:brown;}



/* Mobile Styles (Default) */
.container {
  display: flex; /* Or just let elements stack */
  flex-direction: column;
/*  overflow: hidden;	*/
}

/* Desktop Styles (e.g., for screens wider than 768px) */
@media (min-width: 768px) {
  .container {
    flex-direction: row; /* Arrange items side-by-side */
    flex-wrap: wrap; /* Allow items to wrap if needed */
  }
  .column {
    flex: 1; /* Or flex: 50% for two equal columns */
    /* Or use CSS Grid: */
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
  }
  .column1 {
    flex: 2; /* three columns */
    /* Or use CSS Grid: */
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
  }
  .column0 {
    flex: 0; /* one column */
    /* Or use CSS Grid: */
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
  }
}

/* For hidden side menu vertical */
#sidebar {
    width: 212px; /* Initial width of the sidebar */
    transition: width 0.3s; /* Smooth transition for hiding/showing */
    /* Add other styling for your sidebar (background, etc.) */
}

#main-content {
    flex-grow: 1; /* Allows main content to fill remaining space */
    transition: margin-left 0.3s; /* Smooth transition when sidebar hides */
    /* Ensure iframe inside uses all available space */
}

#myIframe {
    width: 100%;
    height: 500px;
    border: none;
    overflow-y: auto;
    
}

/* CSS class to apply when the sidebar is hidden */
.sidebar-hidden #sidebar {
    width: 0;
}

.sidebar-hidden #main-content {
    margin-left: 0; /* No margin when sidebar is hidden */
}