/* MacDat 4.0 "Aeolus-MP" Macintosh Portal Stylesheet version 2026.07.01 */

:root {
    --max_page_width:1900px;
    --background:url("images/macbg4.jpg");
    --content_background:rgba(0,0,0,0.5);
    --font_color:white;
    --table_background:rgba(189,189,189,0.5);
    --image_invert:1;
    --highlight_gradient:linear-gradient(to bottom, rgb(255,140,0), rgb(255,174,0));
}

body {
    background: var(--background);
    font-family: Arial, Helvetica, sans-serif;
    color:var(--font_color);
    /*
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    */
}

a {
    color:var(--font_color);
}

p, h1, h2, h3, h4, h5,label {
    padding-left:5px;
    padding-right:5px;
}
table,th,td {
border:2px solid var(--font_color);
border-radius:0;
border-collapse:collapse;
}
th, td{
  padding:4px;
}
details {
        border:2px solid var(--font_color);
        background-color:rgba(255,255,255,0.25);
    }
    summary {
        border:1px solid var(--font_color);
        background-color:rgba(255,255,255,0.5);
        padding:5px;
    }
    details > table {
        margin:5px;
    }
    details > p {
        margin:5px;
    }
.divider {
    background-color:rgb(105,105,105);
    width:100%;
    height:5px;
}

.page_container {
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.centered_table {
    margin-left:auto;
    margin-right:auto;
}

/* -----BEGIN NAVIGATION BAR STYLING----- */

.nav_aeolus {
    background: linear-gradient(to bottom, #858585, #b8b8b8);
    color:black;
    height:40px;
    width:100%;
    font-weight:bold;
}

.nav_aeolus p {
    margin-top:0px;
    margin-bottom:0px;
    padding-top:10px;
}

.nav_aeolus a {
    font-family: Arial, Helvetica, sans-serif;
    color:black;
}

.nav_aeolus a:hover {
    color:rgb(255,174,0);
}

html body {
    margin:0;
    padding:0;
}

/* -----END NAVIGATION BAR STYLING----- */

/* -----BEGIN HEADING STYLING----- */

.heading_container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    background: var(--highlight_gradient);
    width: 100%;
    height: 25px;
    box-sizing: border-box;
}
.heading_backlink_a {
    display: flex;
    justify-content: space-between; 
    align-items: center;            
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: black;
}

.heading_backlink {
    display: flex;
    align-items: center;
    height: 25px;
}

.heading_backnav {
    display: flex;
    align-items: center;
    height: 25px;
    white-space: nowrap;
    padding-right: 10px;
}

.heading_backnav a {
    color:black;
}

.heading_backnav p {
    color:black;
}

.heading_container p {
    margin: 0;
    padding: 0;
    line-height: 25px;
}

/* -----END HEADING STYLING----- */

/* -----BEGIN MAIN CONTENT DIV STYLING----- */

.main_content {
    background: var(--content_background);
    width:100%;
    max-width:var(--max_page_width);
    height:100%;
    margin-top:0;
    margin-left: auto;
    margin-right: auto;
    overflow:auto;
    padding-bottom:25px;
}

.heading_text {
    color:black;
    display:flex;
    width:50%;
    min-width:min-content;
    background: var(--highlight_gradient);
    min-height:50px;
    align-items:center;
    border-left:5px solid rgb(105,105,105);
    border-right:5px solid rgb(105,105,105);
    border-bottom:5px solid rgb(105,105,105);
    border-bottom-left-radius:20px;
    border-bottom-right-radius:100px;

}
.heading_text_centered {
    color:black;
    display:flex;
    margin:auto;
    justify-content:center;
    width:50%;
    min-width:min-content;
    background: var(--highlight_gradient);
    min-height:50px;
    align-items:center;
    border-left:5px solid rgb(105,105,105);
    border-right:5px solid rgb(105,105,105);
    border-bottom:5px solid rgb(105,105,105);
    border-bottom-left-radius:100px;
    border-bottom-right-radius:100px;
    text-align:center;

}
.heading_text h1 {
    margin:0;
}
.heading_text_centered h1 {
    margin:0;
}

.highlight_image {
    float:right;
    max-width:600px;
}
.highlight_image_border {
    float:right;
    max-width:600px;
    border-left:5px solid rgb(255,174,0);
    border-bottom:5px solid rgb(255,174,0);
    border-bottom-left-radius:20px;
}

@media (max-width:1200px) {
    .main_content {
        display:flex;
        flex-direction:column;
    }
    .highlight_image {
        float:none;
        order:2;
    }
    .heading_text {order:1}
    .model_info {order:3}
    .page_content {order:3}
    .spec_table {
        order:4;
        max-width:100%;
        overflow-x: auto;
    }
    .resource_table {order:5}
    .upgrades {order:6}
    .common_faults {order:7}
    .gallery {order:8}
}

@media(max-width:800px) {
    .heading_text {
        width:95%;
    }
    .heading_text_centered {
        width:95%;
        text-align:center;
    }
}


.specs_table_container {
border: 2px solid var(--font_color);
border-top-right-radius: 50px;
overflow: hidden;
display: inline-block;
}

.specs_table_container table {
    border:none;
    border-collapse:collapse;
    width:100%;
}

.specs_heading {
    background: var(--highlight_gradient);
    color:black;
    border-right:none;
    border-top:none;
    border-left:none;
}

.specs_multi_heading {
    border: 2px solid black; 
    border-top-right-radius: 50px; 
    overflow-x:auto;
    overflow-y:hidden;
    max-width:calc(100% - 10px);
    width:fit-content;
}

.specs_multi_heading table {
    background-color:var(--table_background);
    border:none;
    border-collapse:collapse;
    text-align:center;
}

.resources_heading {
border: 2px solid var(--font_color);
border-bottom:none; 
border-top-right-radius: 50px; 
overflow: hidden; 
display: inline-block;
}

.resources_heading table {
    border:none;
    border-collapse:collapse;
    width:100%
}
.resources_heading img {
    filter:invert(var(--image_invert));
}

.resources_table_heading {
    background: var(--highlight_gradient);
    color:black;
    border-right:none;
    border-top:none;
    border-left:none;
}

.upgrades_heading {
width:100%;
max-width:620px;
border: 2px solid var(--font_color);
border-top-right-radius: 50px;
border-bottom-right-radius:50px;
overflow: hidden; 
display: inline-block;
background: var(--highlight_gradient);
color:black;
}

.maintenance_heading {
width:100%;
max-width:620px;
border: 2px solid var(--font_color);
border-top-right-radius: 50px;
border-bottom-right-radius:50px;
overflow: hidden; 
display: inline-block;
background: var(--highlight_gradient);
color:black;
}

.gallery_heading {
width:100%;
max-width:620px;
border: 2px solid var(--font_color); 
border-top-right-radius: 50px; 
border-bottom-right-radius:50px;
overflow: hidden; 
display: inline-block;
background: var(--highlight_gradient);
color:black;
}

.gallery img {
    max-width:100%;
}


/* -----END MAIN CONTENT DIV STYLING-----*/

/* -----BEGIN LAPTOP MODEL LIST STYLING----- */

.model_list_grid_centering {
    text-align:center;
}

.model_list_grid_container {
    display: inline-grid;
    padding-right: 2px;
    padding-bottom: 2px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--font_color);
    margin-left: 5px;
}
.model_tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid var(--font_color);
    margin-right: -1px;
    margin-bottom: -1px;
    box-sizing: border-box;
}
.model_tile p {
font-size:20px;
font-weight:bold;
text-align:center;
    margin:0;
    margin-bottom:10px;
    padding:0;
}

/* END LAPTOP MODEL LIST STYLING----- */

/* -----BEGIN FOOTER STYLING----- */
.spacer {
    flex:1;
}
.footer_container {
    background:rgba(0,0,0,.5);
    color:white;
    padding:5px;
    margin-top:20px;
}
.footer_content_container {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    max-width:1200px;
    margin:0 auto;
    gap:clamp(20px, 10vw, 200px);
}
.footer_column {
    min-width:150px;
}
.footer_column h3 {
    margin-bottom:15px;
    font-size:1.1rm;
}
.footer_column p {
    margin:0;
    padding:0;
    font-size:15px;
}
.footer_container a {
    color:white;
}
.footer_container a:hover {
    color:rgb(255,174,0);
}

/* -----END FOOTER STYLING----- */

@font-face {
    font-family: 'Frutiger Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Frutiger Bold'), url('Frutiger_bold.woff') format('woff');
    }