/*============================================================================+
   File name   : main.css
   Version     : 1.0.0
   Begin       : 2024-08-15
   Last Update : 2024-08-15
   Author      : Winnie Chan
   License     :
  ---------------------------------------------------------------------------
   Copyright (C) Gratia Christian College
  
   This file is part of In-house & Community Service Management System (ICMS),
   the style sheet of the main screen which shows the list of all functions.
*/

* {
    box-sizing: border-box;
}
.row::after {
    content:"";
    clear: left;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}
@media only screen and (min-width: 481px) {
    .col-s-20 {width: 20%;}
    .col-s-80 {width: 80%;}
    .col-s-95 {width: 95%;}
    .col-s-100 {width: 100%;}
}
@media only screen and (min-width: 769px) {
    .col-20 {width: 20%;}
    .col-80 {width: 80%;}
    .col-95 {width: 95%;}
}
body {
    background-image: url(../images/bg.png);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1vw;
    color: #424242;
}
aside {
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.7);
}
div#resolution {
    position: fixed;
    width: 20%;
    height: 5%;
    top: 90%;
    left: 0%;
    background-color: transparent;
}
img {
    display: block;
    margin-left: auto;
    margin-top: 1vw;
    margin-right: auto;
    margin-bottom: auto;
    width: 40%;
}
a.link, a.logout{
    position: relative;
    width: 10%;
    height: 20%;
    left: 10%;
    top: auto;
    font-size: 1.2vw;
    text-decoration: underline;
    cursor: pointer;
}
header {
    position: fixed;
    width: 95%;
    height: 10%;
    top: 0;
    left: 20%;
    background-color: transparent;
}
div#title {
    position: fixed;
    width: 95%;
    height: 8%;
    top: 2%;
    left: 20%;
    background-color: rgba(255, 255, 255, 0.7);
}
h1 {
    margin-left: 1vw;
    font-size: 2vw;
}
main {
    position: fixed;
    width: 100%;
    height: 90%;
    top: 10%;
    left: 12%;
    background-color: transparent;
}
iframe {
    position: inherit;
    width: inherit;
    height: inherit;
    border: none;
    overflow: auto;
}
footer {
    position: fixed;
    width: 80%;
    height: 5%;
    top: 95%;
    left: 20%;
    background-color: transparent;
}
div#copyright {
    position: fixed;
    width: 80%;
    height: 5%;
    top: 95%;
    left: 20%;
    background-color: rgba(255, 255, 255, 0.7);
}
h4 {
    margin-left: 1vw;
    margin-top: 1vh;
}