/* ++++++++++++++++  BEGIN CUSTOM CSS   ++++++++++++++  */

/* ------------- HEADER --------------- */

header {
    position: fixed;
    left: 0;
    top: 0;
    height: 80px;
    width: 100%;
    background:transparent;
    background-color: rgba(255, 255, 255, 0.0);
    background-image: linear-gradient(transparent, pink 111%);
    background-image: linear-gradient(white 66%, transparent 88%, transparent);
    clear: both;
    padding: 0px;
    margin: 0px;
    z-index: 999;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.25);
}

right-brain {
    float: right;
    padding: 0px;
    margin: 0px;
    width: auto;
    min-width: 75px;
    text-align: right;
}

crown {
    padding: 0px 0px;
    margin: 0px auto;
    width: auto;
    text-align: center;
}
milk-jug {
    
}

bor-conis {
    padding: 0px;
    margin: 0px auto;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    text-align: center;
}

honey-pot {
    
}

left-brain {   
    float: left;
    padding: 0px;
    margin: 0px;
    width: auto;
    min-width: 75px;
    text-align: left;
}

.door {
    background-color: rgba(255, 255, 255, 1);
    width: 70px;
    height: 80px;
    border-radius: 0 0 44% 44%;
    padding: 17px 12px;
    margin: 0px 0px;
    color: slategray;
    border: 1px gold groove;
    border-top:0px;
    box-shadow: 0px 11px 13px 0px rgba(255, 255, 255, 1), 0px 7px 7px 0px goldenrod, inset 0px 0px 11px 3px rgba(0, 0, 111, 0.11);
}

door {
    background-color: rgba(255, 255, 255, 1);
    width: 70px;
    height: 80px;
    border-radius: 0 0 44% 44%;
    padding: 0px 0px;
    margin: 0px 0px;
    color: slategray;
    border: 1px gold groove;
    border-top:0px;
    box-shadow: 0px 11px 13px 0px rgba(255, 255, 255, 1), 0px 7px 7px 0px goldenrod, inset 0px 0px 11px 3px rgba(0, 0, 111, 0.11);
}

header.header-line, #header-line {
    position: fixed;
    left: 0px;
    top: 70px;
    height: auto;
    width: 100%;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 24px;
    color: white;
    outline-color: rgb(255, 255, 255);
    text-shadow: 0px 0px 1px rgb(112, 128, 144), 0px 0px 11px rgb(255, 255, 255);
    background-color: rgba(29, 158, 303, 0.0);
    box-shadow: inset 0px 0px 20px 5px rgba(200, 200, 200, 0.0);
    background-image: linear-gradient(transparent, rgba(29, 158, 303, 0.88), rgba(29, 158, 303, .69), rgba(29, 158, 303, .69), rgba(29, 158, 303, 0.88), transparent);
    padding: 33px 0px;
    min-width: 340px;
    z-index: 987;
}

.header-line {
    position: relative;
    height: auto;
    width: 100%;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 24px;
    color: white;
    outline-color: rgb(255, 255, 255);
    text-shadow: 0px 0px 1px rgb(112, 128, 144), 0px 0px 11px rgb(255, 255, 255);
    background-color: rgba(29, 158, 303, 0.0);
    box-shadow: inset 0px 0px 20px 5px rgba(200, 200, 200, 0.0);
    background-image: linear-gradient(transparent, rgba(29, 158, 303, 0.88), rgba(29, 158, 303, .69), rgba(29, 158, 303, .69), rgba(29, 158, 303, 0.88), transparent);
    padding: 33px 0px;
    min-width: 340px;
    z-index: 987;
}

#header-line .hw-inner {
    text-align: center;
    text-shadow: 0px 0px 1px slategray, 0px 0px 11px white;
}

#sub-nav {
	background-color: rgba(255, 255, 255, 0.69);
    box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.25);
    min-width: 340px;
}

#sub-nav .inside {
    text-align: center;
    
}
#sub-nav .inside > a {
    display: block;
    margin: 11px;
    height: 50px;
    padding: 17px 21px 17px 21px;
    width: auto;
    background: 0;
    background-image: url("../images/buttons + icons/cloud_button.png");
    background-position:center;
    background-repeat:no-repeat;
    background-size: 100% 100%;
    line-height: 16px;
    font-size: 14px;
    font-weight: bold;
    color: #1d9eef;
    text-decoration: none;
    text-shadow: 0px 0px 1px gold, 0px 0px 33px white, 0px 27px 13px slategray;
}

#sub-nav .inside > a:hover {
    background-image: url("../images/buttons + icons/cloud_button_blue.png");
    color: #1d9eef;
    border: 0;
    text-shadow: 0px 0px 2px gold, 0px 0px 17px darkgoldenrod, 0px 27px 13px darkgoldenrod;
}
#sub-nav .inside > a.active {
    background-image: url("../images/buttons + icons/cloud_button_blue.png");
    color: darkgoldenrod;
    border: 0;
    text-shadow: 0px 0px 2px gold, 0px 0px 33px gold, 0px 27px 13px darkgoldenrod;
}

.uap_header-tictac {
    background-color: rgba(255, 255, 255, 0.33);
    background-image: linear-gradient(ghostwhite, white, transparent, lightskyblue);
    height: auto;
    width:auto;
    padding: 8px 33px 8px 21px;
    margin: 16px 8px 17px 8px;
    font-family: Copperplate, Papyrus, fantasy;
    font-size: 20px;
    font-weight: 500;
    color: darkgray;
    text-shadow: 0px 0px 3px white, 0px 0px 5px gold;
    box-shadow: 0px 0px 21px 17px rgba(255, 255, 255, 0.75), 0px 0px 3px 2px rgba(218, 165, 32, 0.75), inset 0px 0px 13px 3px rgba(255, 255, 255, 0.75);
    border-top-left-radius: 77px;
    border-top-right-radius: 77px;
    border-bottom-left-radius: 77px;
    border-bottom-right-radius: 77px;
    clear: none;  
}

.header_logo {
    width: 200px;
    height: 80px;
    padding: 3px 17px 10px 17px;
    margin: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 44px;
    border-bottom-right-radius: 44px;
    clear: none;
    background-color: rgba(255, 255, 255, 1);
    border: 1px gold groove;
    border-top:0px;
    box-shadow: 0px 11px 13px 0px rgba(255, 255, 255, 1), 0px 7px 7px 0px goldenrod, inset 0px 0px 11px 3px rgba(0, 0, 111, 0.11);
}