/*Variables Section (ROOT)*/
:root {
    /*Radius Controls Variables*/
    --borderRadius: 15px;
    --border: 1px solid #ffffff;
    /*Padding for site Elements Variables*/
    --elementPadding: 5px;
    /*Color Scheme Variables*/
    --backGroundColor: #383838;
    /*Header Variables*/
    --headerHeight: 100px;
    /*Navigation Variables*/
    --navHeight: 40px;
    /*Body Variables*/
    /*Content 1 (left Column) Variables*/
    /*Main Variables*/
    --maxWidth: 730px;
    /*Aside Variables*/
    --asideWidth: 125px;
    /*Content 2 (right Column) Variables*/
    /*Footer Variables*/
    --footerHeight: 45px;

    /*Text Size Controls*/
    --mainH1Size: 40px;
    --subH1Sizes: 22px;
    --textContent: 18px;
}
/* ############################################################################################### */
/* CSS RESET*/
*{
    margin:0;
    padding:0;
}

/*Main Header Layout*/
.mainHeader {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);

    grid-column-start: 1;
    grid-column-end: 5;    
}
.mainHeader table{
    width:100%;
}
.mainHeader td{
    width:50%;    
}
.mainHeader img{
    float:right;
    margin-top:10px;
}
.mainHeader h1{
    float:left;
    margin-top:10px;
    font-size: var(--mainH1Size);
}

/*Body Main Layout*/
body {
    background-color: black;
    width: 98vw;
    height: 98vh;
    display: grid;
    grid-template-columns: 1fr 1.5fr var(--asideWidth) 1fr;
    grid-template-rows: var(--headerHeight) var(--navHeight) 1fr var(--footerHeight);
    font-weight: 100;
    color: white;
    text-align: center;
}
#centered3Columns {
    background-color: black;
    width: 98vw;
    height: 98vh;
    display: grid;
    grid-template-columns: 1fr 800px 1fr;
    grid-template-rows: var(--headerHeight) var(--navHeight) 1fr var(--footerHeight);
    font-weight: 100;
    color: white;
    text-align: center;
}

/*Body City-Layout*/
#cityLayout {
    background-color: black;
    width: 98vw;
    height: 98vh;
    display: grid;
    grid-template-columns: 600px 1fr 1fr;
    grid-template-rows: var(--headerHeight) var(--navHeight) 1fr var(--footerHeight);
    font-weight: 100;
    color: white;
    text-align: center;
}

/*Body InfoPage*/
.infoLayout {
    background-color: black;
    width: 98vw;
    height: 98vh;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: var(--headerHeight) var(--navHeight) 1fr var(--footerHeight);
    font-weight: 100;
    color: white;
    text-align: center;
}
.dataTable {
    border-collapse:separate;
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
    width: 98vw;
    height: 80vh;
}
.dataTable tr {
    height:75px;
}
.dataTable td {
    border-radius: var(--borderRadius);
    border: var(--border);
    border-spacing: 1px;
    font-size: var(--textContent);    
}
.dataTable th {
    font-family:'Franklin Gothic Medium', 'Arial Narrow';
    font-size:var(--subH1Sizes);
}
.dataTable a {
    text-decoration: none;
    color: white;
}
.dataTable a:hover {
    background-color: black;
}
.dataTable td:hover {
    background-color: black;
}

/* Contact Us Layout*/
.contactUs {
    background-color: black;
    width: 98vw;
    height: 98vh;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: var(--headerHeight) var(--navHeight) 1fr var(--footerHeight);
    font-weight: 100;
    color: white;
    text-align: center;
}
.contactUs form {
    font-size: var(--textContent);
    border-collapse: separate;
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
    width: 98vw;
    height: 80vh;
    padding: 10px 0px 10px 20px;
    text-align:left;
}
.contactUs form h1 {
    font-size: var(--subH1Sizes);
    padding: 10px 0px 10px 0px;
}
.contactUs form input {
    width: 400px;
    padding:5px 10px;
    margin: 5px 0px;
    box-sizing: border-box;
}
.contactUs form button {
    height:35px;
    width:200px;
    margin:10px 0px 0px 0px;
}

/*Navigation Layout uniform*/
.navigation {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
    grid-column-start: 1;
    grid-column-end: 5;
    position: relative;
    z-index: 999;
    text-align: left;
}
.navigation ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    border-radius: var(--borderRadius);
    background-color: #000000;
}
.navigation li {
    display: inline-block;
}
.navigation li a {
    color: white;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
}
.navigation ul ul {
    position: absolute;
    top: 100%;
    display: none;
}
.navigation ul ul li {
    display: block;
}
.navigation li:hover ul {
    display: block;
}
.navigation ul ul li a:hover {
    background-color: var(--backGroundColor);
    border-radius: var(--borderRadius);
    border: var(--border);
}
#mainProfilePageReturn{
    float:right;
}

/*Main Layout Content 1 - Left (1st) Column && Not Used in City Layout at all*/
.content1 {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
}
.content1 h1{
    font-size: var(--subH1Sizes);
}
.content1 p {
    display: none;
    font-size: var(--textContent);
    text-align: left;
    padding: 20px 5px;
}
.content1 ul{
    text-align: left;
}
.content1 ul li{
    padding: 10px 20px;
    font-size: var(--textContent);
}

/*Main Layout - Column 2 && City Layout - Column 1*/
.mainContent {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
}
#imageDisplayed.mainContent img {
    border-radius: var(--borderRadius);
    width: var(--maxWidth);
}
.mainContent img {
    border-radius: var(--borderRadius);
    width: 100%;
}

/*Main Aside Layout - Column 3*/
.asideMain {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
    display: flex;
    flex-direction: column;
    padding:2px;
    align-items: start;
}
.asideMain img{
    border-radius: var(--borderRadius);
    width:100%;
}

/* City Layout Aside - Column 2*/
.asideCityLayout {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
}
.asideCityLayout h1{
    font-size: var(--subH1Sizes);
}
.asideCityLayout ul{
    list-style-type: none;
}
.asideCityLayout ul{
    text-align: left;
}
.asideCityLayout ul li{
    padding: 10px 20px;
    font-size: var(--textContent);
}

/*Main Layout Content 2 - Column 4 && City Layout - Column 3*/
.content2 {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
}
.content2 h1{
    font-size: var(--subH1Sizes);
}
.content2 p {
    font-size: var(--textContent);
    text-align: left;
    padding: 10px 20px;
}
.content2 ul{
    list-style-type: none;
}

/*Footer Layout*/
footer {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
    grid-column-start: 1;
    grid-column-end: 5;
}
footer h5{
    margin:auto;
    padding:14px;
}

/*Citation Layouts*/
.references {
    background-color: black;
    width: 98vw;
    height: 98vh;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: var(--headerHeight) var(--navHeight) 1fr var(--footerHeight);
    font-weight: 100;
    color: white;
    text-align: center;
}
.singleColumn {
    border-radius: var(--borderRadius);
    border: var(--border);
    background-color: var(--backGroundColor);
    grid-column-start: 1;
    grid-column-end: 5;
    text-align:left;
}
.singleColumn h2 {
    text-align:center;
}
.singleColumn ul {
    padding: 10px 30px;
    font-size: var(--textContent);   
}
.singleColumn ul ol {
    padding: 5px 20px;
}
.singleColumn ul ol p {
    padding: 5px 20px;
}
.singleColumn a {
    text-decoration:none;
    color:white;
}
.singleColumn a:hover {
    background-color:black;
}
.singleColumn hr {
    margin: 20px;
}


/* ############################################################################################### */