body {
    /* purples! */
    /* background-color: #d9b3ff;
    color: #26004d; */
    /*
    official 'WOU Gray'    */
    background-color:#c4c6c8;
    /*
    official 'WOU Black'    */
    color: #231f20;
    padding-top: 18px;
}
/******************************* MY NAVBAR ***************************/
.my_nav {
    /* purples! */
    /* background-color: #26004d;          /* color: #d9b3ff; */
    /* color:#26004d; */
    /*
    official 'WOU Red'  */
    /* okay there is a disconnect..... it says rgb(227,24,55) but that gives #e31837
        it also says hex#db0a29, but that gives rgb(219, 10, 41) -- and honestly neither one looks correct!! */
    /* the other colors at least came out looking right!!!      */
    background-color:#b30000;
    color:#b30000;
    height:18px;                        
}
/***************************** MY MAIN CONTAINER-FLUID ***************/
.my_main {
    /* for wireframe\testing */
    /* border: 1px solid orangered;
    margin: 5px 0px; */
    padding: 0px;
}
/******************************** MY ROWS ****************************/
.my_row_01 {
    padding-bottom: 15px;
    /* for wireframe\testing */
    /* border: 1px solid black;
    margin: 5px 0px; */
}
.my_row_02 {
    /* for wireframe\testing */
    /* border: 1px solid black; */
}
.my_row_03 {
    /* for wireframe\testing */
    /* border: 1px solid black; */
}
/****************************** MY COLUMNS ***************************/
.my_col_01 {
    padding-top:18px;
    /* purples! */
    background-color: #b366ff;
    /* 
        official 'WOU Silver'   */
        background-color:#a7a9ac;  
    /* 
    for wireframe\testing */
    /* border: 1px solid crimson; */
}
.image_box {
    text-align:center;
}
.me {
    max-width:96%;
    height:auto;
    text-align:center;
    margin-top:5px;
    /* purples! */
    border:1px solid #26004d;
    /*
        official 'WOU Black'    */
        border:1px solid #231f20;
    border-radius:180px;
}
.col_01_image {
    max-width:96%;
    height:auto;
    margin-top:5px;
    /* purples! */
    border:1px solid #26004d;
    /*
        official 'WOU Black'    */
        border:1px solid #231f20;
    border-radius:5px;
}
.my_col_02 {
    padding-top:35px;
    /* for wireframe\testing */
    /* border: 1px solid crimson; */
}
.my_col_03 {
    /* for wireframe\testing */
    /* border: 1px solid crimson; */
}
/******************************* MY TABS *****************************/
.my_tabs {
    /* why does it seem like my padding is so thick no matter what i do? */
    padding: 0px 1px 0px 1x;
    /**/
    /* purples! */
    /* background-color: #26004d;          color: #d9b3ff;
    border: 1px solid #d9b3ff; */
    /*
        (un)official 'WOU Red'  */
        background-color:#b30000;       color:#c4c6c8;
        border:1px solid #c4c6c8;
    border-radius: 11px 11px 0px 0px;
    /* what is with the fucking font-size?  looks fine local -- 
        and way too freaking huge live.....                          */
    font-size:14px;
}
/* li a .active {
    background-color: #26004d;
} */
    /* so do we have to have them all & in the right order here too? */
    .my_tabs:link {
        /* purples! */
        /* color: #d9b3ff; 
            border: 1px solid #d9b3ff;  */
        /*
            official 'WOU Gray'     */
            color:#c4c6c8;
            border:1px solid #c4c6c8;
        border-radius: 9px 9px 0px 0px;
    }
    .my_tabs:visited {
        /* purples! */
        /* color: #d9b3ff; 
            border: 1px solid #d9b3ff;  */
        /*
            official 'WOU Gray'     */
            color:#c4c6c8;
            border:1px solid #c4c6c8;
        border-radius: 9px 9px 0px 0px;
    }
    .my_tabs:hover {
        /* purples! */
        /* color: #26004d;
            border: 1px solid #d9b3ff; */
        /* 
            (un)official 'WOU Red & Gray'  */
            color:#b30000;
            border:1px solid #c4c6c8;
        border-radius: 9px 9px 0px 0px;
    }
    .my_tabs:active {
        /* purples! */
        /* color: #26004d;
            border: 1px solid #d9b3ff; */
        /* 
            (un)official 'WOU Red & Gray'  */
            color:#b30000;
            border:1px solid #c4c6c8;
        border-radius: 9px 9px 0px 0px;
    }
    .my_tabs a:hover {
        /* color: #ff3333; */
        /*
            official 'WOU Silver'   */
        color:#a7a9ac;
    }
    .my_tabs a:active {
        /* color: #ff3333; */
        /*
            official 'WOU Silver'   */
            color:#a7a9ac;
    }
.my_tab_panels {
    /* top right bottom left */ /* like clock-wise */
    border: 1px 1px 1px 1px; /* why is it so thick? */
    border-style: solid solid solid solid;
    /* purples */
    /* border-color: #26004d; */
    /* 
        (un)official 'WOU Red' */
        /* border-color:#b30000; */
        /* 
            no -- official 'WOU Black'  */
            border-color:#231f20;
    border-radius: 1px 1px 5px 5px;
    padding: 5px 5px 5px 5px;
    margin: 0px 0px 15px 0px;
    /* purples */
    /* background-color: #d9b3ff; */
    /* 
        official 'WOU Gray' */
        background-color:#c4c6c8;
    font-size: 15px;
}
.quote {
    text-align:right;
    /* purples! */
    /* border:1px solid #26004d; */
    /* 
        (un)official 'WOU Red'  */
    border:1px solid #231f20;
    border-radius:9px;
    padding:9px;
    /* purples! */
    /* box-shadow: 0 9px 13px 0 rgba(38, 0, 77,0.45); */
    /* 
        official 'WOU Black'  
            this is the rgb for #b30000     */
        box-shadow: 0 9px 13px 0 rgba(35, 31, 32, 0.45);
    transition: 0.3s;
    min-width:90px;
}
.my_res_left {
    padding:9px; 
    border-width:1px 0px 1px 1px ; 
    border-style: solid;
    /* purples! */
    /* border-color: #26004d; */
    /* 
        official 'WOU Black'  */
        border:1px solid #231f20;
    border-radius: 1px 0px 0px 5px;
    /*     background-color:#8000ff; 
    color:#d9b3ff; */
}
.my_res_right {
    padding:9px; 
    /* purples! */
    /* border-color: #26004d; */
    /* 
        official 'WOU Black'  */
        border:1px solid #231f20;
    border-radius: 0px 1px 5px 0px;
    /* background-color:#8000ff; 
    color:#d9b3ff; */
}
.my_edu_left {
    padding:9px; 
    border-width:1px 0px 1px 1px ; 
    border-style: solid;
    /* purples! */
    /* border-color: #26004d; */
    /* 
        official 'WOU Black'  */
        border:1px solid #231f20;
    border-radius: 1px 0px 0px 5px;
    /* background-color:#8000ff; 
    color:#d9b3ff; */
}
.my_edu_right {
    padding:9px; 
    /* purples! */
    /* border-color: #26004d; */
    /* 
        official 'WOU Black'  */
        border:1px solid #231f20;
    border-radius: 0px 1px 5px 0px;
    /* background-color:#8000ff; 
    color:#d9b3ff; */
}
.my_edu_logo {
    float:left; 
    max-width:90px; 
    height:auto; 
    margin-right:9px;
}
.sr_project_img {
    float:right;
    margin-left: 5px;
    /* purples! */
    /* border-color: #26004d; */
    /* 
        official 'WOU Black'  */
        border:1px solid #231f20;
    border-radius:9px;
    max-height:270px;
    width:auto;
}
.other_project_box_box {
    margin-bottom:35px;
    /* purples! */
    /* border-color: #26004d; */
    /* 
        official 'WOU Black'  */
        border:1px solid #231f20;
    border-radius:9px;
    padding:9px 9px 0px 9px;
    /* purples! */
    /* box-shadow: 0 9px 13px 0 rgba(38, 0, 77,0.45); */
    /* 
        official 'WOU Black'      */
            box-shadow: 0 9px 13px 0 rgba(35,31,32,0.45);
    transition: 0.3s;
    min-height:210px;
}
.other_project_box {
    margin-bottom:35px;
    /* purples! */
    /* border-color: #26004d; */
    /* 
        (un)official 'WOU Red'  */
        border:1px solid #231f20;
    border-radius:9px;
    padding:9px;
    /* box-shadow: 0 9px 13px 0 rgba(38, 0, 77,0.45); */
    /* 
        (un)official 'WOU Red'  
            this is the rgb for #b30000     */
            box-shadow: 0 9px 13px 0 rgba(35, 31, 32, 0.45);
    transition: 0.3s;
    min-height:210px;
}
.other_project_inner_box {
    margin-bottom: 9px;
    /* purples! */
    /* border-color: #26004d; */
    /* 
        (un)official 'WOU Red'  */
        border:1px dotted #231f20;
    border-radius:9px;
    padding:9px;
    min-height:210px;
}
.other_project_img {
    float:right;
    margin-left:5px;
    /* purples! */
    /* border-color: #26004d; */
    /* 
        (un)official 'WOU Red'  */
        border:1px dotted #231f20;
    border-radius:9px;
    max-height:180px;
    width:auto;
}
.other_project_a:link, .other_project_a:visited, 
.other_project_a:active {
    /* color: #ff3333; */
    color:#b30000;
    text-decoration: none;
    font-weight:bold;
}
.other_project_a:hover {
    color: #4d0000;
}
.me_online_li {
    margin-bottom:5px;
    font-size: 18px;
    font-weight: bold;
}
.other_experience_box {
    margin-bottom:35px;
    /* purples! */
    /* border-color: #26004d; */
    /* 
        (un)official 'WOU Red'  */
        border:1px dotted #231f20;
    border-radius:9px;
    padding:9px;
    /* box-shadow: 0 9px 13px 0 rgba(38, 0, 77,0.45); */
    /* 
        (un)official 'WOU Red'  
            this is the rgb for #b30000     */
            box-shadow: 0 9px 13px 0 rgba(35, 31, 32, 0.45);
    transition: 0.3s;
    min-height:90px;
}
/***************************** ABOUT ME ******************************/
.doggie_pics {
    max-height: 234px;
    width: auto;
    border: 1px solid black;
    border-radius: 5px;
    margin: 5px;
    
}
/******************************* FACULTY *****************************/
.faculty_box {
    border: 1px dotted black;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
    width: 96%;
}
.faculty_box:hover {
    box-shadow: 0 9px 13px 0 rgba(35,31,32,0.45);
}

.faculty_a:link {
    color: #b30000;
}
.faculty_a:hover {
    color: #4d0000;
}
/***************************** MY FOOTER *****************************/
.my_foot {
    /* purples! */
    /* background-color: #26004d;  color: #d9b3ff; */
    /*
        (un)official 'WOU Red'  */
        background-color:#b30000;           color:#b30000;
    height: 18px;
    font-size:13.5px;
 }
/*************************** MY BUTTONS ******************************/
.my_button {
    /* background-color: #26004d;    color: #d9b3ff;
    border-color: #26004d;  */   
    background-color:#b30000;   border-color:#b30000;
    color:#c4c6c8;
    border-radius: 18px;
}
.my_button:hover {
    /* background-color: #26004d;    color: #d9b3ff;
    border: 1px solid #d9b3ff; */
    background-color: #b30000;    color: #c4c6c8;
    border: 1px solid #c4c6c8;
}
.my_button:focus {
    /* background-color: #26004d;    color: #d9b3ff;
    border: 1px solid #d9b3ff; */
    background-color: #b30000;    color: #c4c6c8;
    border: 1px solid #c4c6c8;
}
.my_button:active {
    /* background-color: #26004d;    color: #d9b3ff;
    border: 1px solid #d9b3ff; */
    background-color: #b30000;    color: #c4c6c8;
    border: 1px solid #c4c6c8;
}
/******************************** MY LINKS ***************************/
/* When setting styles for several link states, there are order rules:
            a:hover MUST come after a:link and a:visited
            a:active MUST come after a:hover
 */
a:link {
    /* color: #d9b3ff; */
    color: #c4c6c8;
    text-decoration: none;
}
a:visited {
    /* color: #d9b3ff; */
    color: #c4c6c8;
    text-decoration: none;
}
a:hover {
    /* color: #ff3333; */
    color:#a7a9ac;
    text-decoration: none;
}
a:active {
    /* color: #ff3333; */
    color:#a7a9ac;
    text-decoration: none;
}
/***************************************************************************************/
/*                                 MEDIA QUERIES!                                      */
/*=====================================================================================*/
/* responsive stuff for the couple of spots that need that                             */
/*      beyond what bootstrap provides anyway                                          */
/*=====================================================================================*/
/*================================= 'TYPICAL' PHONES ==================================*/
@media only screen and (max-width: 500px) {

}
/*============================== OLD &/OR SKINNY PHONES ===============================*/
/* media Query for really old/skinny phones like iPhone 5/SE.....                      */
@media only screen and (max-width: 400px) {
    /* so 400px wide and narrower */

}
/*============================== stupid navbar shit ===================================*/
@media only screen and (min-width: 768px) {
    /* ACTUALLY -- this is for Chromebook-widths..... right?                           */
    .our_navbar {
        height: 42px;
    }
}
/*=====================================================================================*/
/*================================== HEIGHT ===========================================*/
/**/
/*============================= FOR SIDEWAYS PHONES ===================================*/
@media only screen and (max-height: 425px) { /* so 425px and shorter */

}