/* CT4034 2022-23 001 s4203083 22 May 2023 */

body {
background-color:#C2B2B4;

}

/* topnav general properties */
.topnav {
    background-color: #404040;
    overflow: hidden;
    top:0;
    left:0;
    right: 0;
    position: fixed;
    z-index: +2;
 
}

/* link formatting */
.topnav a{
    float:left;
    color:aliceblue;
    padding: 15px 15px;
    text-decoration: none;
    font-size: 17px;

}
/* button formatting  */
.topnav a.active {
background-color: #118062;
color: aliceblue;

}

/* action on topnav hover */
.topnav a:hover {
background-color: #8b008b;
color:white

}

/* lower section of every page */
.navbar {

    background-color:#404040 ;
    position:fixed;
    bottom: 0;
    left: 0;
    width:100%;
    color:white;
    font-family:"Times New Roman","Times","serif" ;
    z-index: +2;

}

/* generic label area */
.greenlabel {
    background-color: #118062;
    color: aliceblue;  
}

/* Area for functional website content */
.whitebox  {
    background-color: azure;
    height:100%;
    width: 80%;
    position:fixed;
    left:10%;
    top:5%;
    z-index: 1;
}
/* alternative sizing */
.altwhitebox  {
    background-color: azure;
    height:100%;
    width: 70%;
    position:fixed;
    left:20%;
    top:5%;
    z-index: 1;
}

/* scrollable area */
.scroll{
    background-color: azure;
    width: 70%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
    padding: 20px;
    margin-left:20%;
    top:5%;
}


/* sidebar */
.accessbar {
    background-color: #390039;
    height:100%;
    width: 10%;
    position:fixed;
    left:10%;
    top:5%;
    z-index: 1;  
    text-align: center;
}

/* generic box */
.formatbox{
    background-color: #118062 ;
    height: 10%;
    width: 71.8%;
    position: fixed;
    bottom: 7%;
    left:20%;
    z-index:4
}
/* bar to split elements */
.homesplit  {
    background-color: black;
    height:100%;
    width: 0.2%;
    position:fixed;
    left:20%;
    top:5%;
    z-index: 1;
}

/* form */
.form{
    z-index: 1;
}

/* access bar but it can move */
.accessscroll{
    background-color: white;
    height:70%;
    width: 8%;
    position: fixed;
    overflow-y:scroll;
    text-align: center;
    padding:20px;
    z-index: 3;
}

/* google map */
/* # makes it refer to only the map inside the make post section */
#map{
    height:70%;
    width: 100%;
}
/* div that map will be stored in, colour is only used to make it visable for sizing pre map generation */
.mapholder{
    height: 30%;
    width: 100%;
    background-color: white;
}