/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 02 Apr 2024, 13:52:36
    Author     : gerhardus
*/

.pagelayout {  
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: 200px 50px 40px 60px auto 60px;
    grid-auto-rows: 1fr;
    gap: 0em 0em;
    grid-auto-flow: row;
    grid-template-areas:
        "header header header"
        "navBar navBar navBar"
        "navBar2 navBar2 navBar2"
        "messageArea messageArea messageArea"
        "content content content"        
        "footer footer footer";
    grid-area: pagelayout;
    align-content: stretch;
}

.pagelayout .headercontent {
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "logo clubName affiliation";
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
}

.pagelayout .clubLogo { 
    grid-area: logo;
    align-items: center;
    margin: 10px;
}

.pagelayout .clubName { 
    grid-area: clubName;
    color: silver;
    font-size: 80px;
    font-weight: bold;
    /*text-align: left;*/
    /*padding-left: 70px;*/
    /*padding-top: 15px;*/
    margin-right: 250px;
    text-shadow: 10px 10px 10px #888888;
    align-items: center;
}

.clubMoto {
    font-size: 20%;
    /*color: #4169e1;*/
    color: white;
    /*color: black;*/
    padding-left: 40px;
    padding-bottom: 15px;
}

.pagelayout .affiliation { 
    grid-area: affiliation;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-align: right;
    justify-content: center;
    align-items: end;
    padding-top: 30px; 
}

.pagelayout .affiliation a:link {
    color: white;
}

.pagelayout .affiliation a:visited {
    /*color: red;*/
    color: white;
}

.pagelayout .navBar { 
    grid-area: navBar;
    gap: 1em;
    align-items: center;
    /*justify-items: center;*/
    /*justify-content: center;*/
    justify-self: center;
    padding-top: 5px;
}

.pagelayout .navBar2 { 
    grid-area: navBar2;
    gap: 1em;
    align-items: center;
    /*justify-items: center;*/
    /*justify-content: center;*/
    justify-self: center;
    padding-top: 5px;
}

.pagelayout .messageArea { 
    grid-area: messageArea;
    /*background-color: lightcoral;*/
    margin: 5px;
    justify-self: center;
}

.pagelayout .content {  
    display: grid;
    grid-area: content;
    /*grid-template-columns: repeat(4,1fr);*/
    /*grid-template-columns: 1fr 1fr 1fr;*/
    /*grid-template-rows: 1fr 1fr 1fr;*/
    /*grid-template-rows: auto auto auto;*/
    /*grid-gap: 1em;*/
    grid-auto-flow: row;
/*    grid-template-areas:
      "box1 box2 box3";*/
/*      "box4 box5 box6"
      "box7 box8 box9";*/    
    padding: 0em 1em 1em 1em;
    /*margin: 5px;*/ 
    justify-content: center;
    align-content: stretch;
}
.pagelayout .content > div {
    /*background: #eee;*/
/*    margin: 5px; */
/*    padding: 1em;   /* padding inside the grid block */
}

.pagelayout .content > div:nth-child(odd) {
    /*background: silver;*/
    /*padding: 1em;*/ 
}

.pagelayout .footer {
    display: grid;
    background-color: silver;
    grid-area: footer;
    text-align: center;
}

/*used for Home screen*/
.homepage {
    display: grid;
    grid-area: content;
    grid-template-columns: repeat(3,1fr);
    /*grid-template-columns: 1fr 1fr 1fr;*/
    /*grid-template-rows: 1fr 1fr 1fr;*/
    /*grid-template-rows: auto auto auto;*/
    grid-gap: 1em;
    grid-auto-flow: row;
    grid-template-areas:
      "box1 box2 box3";
/*      "box4 box5 box6"
      "box7 box8 box9";*/    
    padding: 0em 1em 1em 1em;
    /*margin: 5px;*/ 
    justify-content: center;
    align-content: stretch;
}

.pagelayout .homepage > div {
    background: #eee;
/*    margin: 5px; */
/*    padding: 1em;   /* padding inside the grid block */
}

.pagelayout .homepage > div:nth-child(odd) {
    background: silver;
    /*padding: 1em;*/ 
}

#box1 { 
    display: grid;
    grid-area: box1;
    background-color: #eee;
    /*background-color: yellow;*/
}

#box2 {
    display: grid;
    grid-area: box2;
    background-color: silver;
}

#box3 {
    display: grid;
    grid-area: box3;
    background-color: #eee;
}

/* Registration layout */

/*.regContent {
     grid for registration 
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 50px;
    grid-template-areas: "heading heading"
                         "article notes";
    gap: 1em;
}*/

.regSubheading {
    /*grid-area: heading;*/
    /*grid-column: span 2;*/
    height: 50px;
    color: whitesmoke;
    text-shadow: 10px 10px 5px #75998D;
    /*background-color: silver;*/
    margin: 10px;
}

.regSubContent {
    /*grid-area: article;*/
    -webkit-border-radius: 38;
    -moz-border-radius: 38;
    border-radius: 6px;
    /*    grid-column: span2;*/
    background-color: silver;
    padding: 10px;
}

.regSubContentNote {
    display: flex;
    grid-area: notes;
    -webkit-border-radius: 38;
    -moz-border-radius: 38;
    border-radius: 6px;
    /*    grid-column: span2;*/
    background-color: whitesmoke;
    padding: 10px;
    justify-items: center;
    align-items: center;
}

/* School screen layout  */

.school_content {
    display: grid;
    grid-area: content;    
    /*grid-template-columns: auto auto auto;*/
    grid-template-columns: 3fr 3fr 2fr;
    /*grid-template-rows: 50px 80px;  Grid row height */
    /*grid-row: auto auto;*/
    grid-template-areas: "heading heading heading"
                   "subheading subheading subheading"
                   /*"message message message"*/
                   "item1 item2 notes";
    grid-gap: 1em;
    /*justify-items: center;*/
    margin-bottom: 1em;
    padding: 0em 1em 1em 1em;
    /*margin: 5px;*/ 
    justify-content: center;
    align-content: stretch;
    grid-area: content;
}

.school_content .heading {
    display: grid;
    grid-area: heading;
    color: whitesmoke;
    text-shadow: 10px 10px 5px #75998D;
    /*margin: 5px;*/
}

.school_content .subheading {
    display: grid;
    grid-area: subheading;
    color: whitesmoke;
    text-shadow: 10px 10px 5px #75998D;
    /*margin: 5px;*/
}

.school_content .columnheading {
    /* this is for H3 culmmn heading */
    background-color: #00bace; 
    font-size: 25px; 
    font-weight: bold; 
    padding-bottom: 5px;
    -webkit-border-radius: 38px;
    -moz-border-radius: 38px;
    border-radius: 10px;
    height: 35px;
}

.school_content .item1 {
    display: grid;
    grid-area: item1;
    margin-left: 1em;
}

.school_content .item2 {
    display: grid;
    grid-area: item2;
}

.school_content .notes {
    grid-area: notes;
    padding: 1em;
    margin-bottom: 1em;
    margin-right: 2em;    
    background-color: lightblue;
    -webkit-border-radius: 38px;
    -moz-border-radius: 38px;
    border-radius: 10px;
}

.school_content .register {
    display: grid;
    grid-area: span;
}

/*Admin Layout*/

.admin_content {
    display: grid;
    grid-area: content;
/*    grid-template-columns: repeat(3,1fr);*/
    grid-template-columns: repeat(4, minmax(3fr, auto));
    grid-template-rows: auto;
    gap: 1em;
    grid-auto-flow: row;
/*    grid-template-areas:
      "box1 box2 box3";*/  
    padding: 0em 1em 1em 1em;
    /*margin: 5px;*/ 
    justify-content: center;
    align-content: stretch;
}

.admin_content .column1 { /* first column */
    display: grid;
    grid-column: 1 / 2;
}

.admin_content .column1a {
    display: grid;
    grid-column: 1fr;
}

.admin_content .column2 { /* second column */
    display: grid;
    grid-column: 2 / 3;
}

.admin_content .column2and3 { /* second and third */
    display: grid;
    grid-column: 2 / 4;
}

.admin_content .column3 { /* third column */
    display: grid;
    grid-column: 3 / 4;
}

.admin_content .column1to3 { /* First to third column */
    display: grid;
    grid-column: 1 / 4;
}

.admin_content .column1to5 { /* First to fourth column */
    display: grid;
    grid-column: 1 / 5;
}

.admin_content .column4 { /* fourth column */
    display: grid;
    grid-column: 4 / 5;
}


.column_content {
    padding: 1em;
    background-color: whitesmoke;
    border-radius: 6px;
}

.table_header {
    background-color: #00bace;
    font-size: 20px;
}

.other_content {
    display: grid;
    grid-area: content;
    /*grid-template-columns: repeat(3,1fr);*/
    grid-template-columns: 3fr 3fr 2fr;
    grid-template-rows: auto;
    gap: 1em;
    grid-auto-flow: row;
    padding: 0em 1em 1em 1em;
    /*margin: 5px;*/ 
    justify-content: center;
    align-content: stretch;
}

.other_content .column2and3 { /* second and third */
    display: grid;
    grid-column: 2 / 4;    
}

.info_style1 {
    background-color: #eee;
    -webkit-border-radius: 38px;
    -moz-border-radius: 38px;
    border-radius: 10px;
    padding: 10px 15px 0px 15px;
}

.other_content_column1 {
    display: grid;
    grid-column: 1;    
}

.other_content_column1to2 {
    display: grid;
    grid-column: 1/2;
}

.other_content_column1to3 {
    display: grid;
    grid-column: 1/3;    
}

.other_content_column1to4 {
    display: grid;
    grid-column: 1/4;
}

.other_content_column2 {
    display: grid;
    grid-column: 2;    
}

.other_content_column3 {
    display: grid;
    grid-column: 3;    
}

.other_content table {
    border-collapse: collapse;
    border-radius: 10px; 
    overflow: hidden;
    background-color: silver;
}

.other_content tbody td {
    padding: 5px;
}