/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* Albans Design style sheet */
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------- ALL PAGES --------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------- */
*                            {box-sizing:border-box; font-family:Verdana, sans-serif}
p, li, span                  {font-size:14px; color:DimGray}
body                         {color:#000; background-color:#FFFAF0}
.albans-center               {top:50%; width:100%; text-align:center}
.albans-border               {border:solid; border-color:#00008B; border-width:2px; background-color:white}
.albans-divider              {margin:70px 300px; 
                              border-top-style:none; border-bottom-style:solid; border-left-style:none; border-right-style:none;
                              border-color:#EEEEEE}
.albans-headline             {color:#00008B; font-family:Arial, sans-serif; font-weight:bold; font-size:70px; text-align:center; margin-bottom:15px}
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* Menu */
.albans-topnav               {background-color:#FFFAF0; border-style:none;
                              overflow:hidden; width:100%; 
                              display:flex; justify-content:center; align-items:center}
.albans-logo                 {margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:100px; width:13%}
.albans-topnav a             {background-color:#FFFAF0; color:Gray;
                              text-align:center; float:left; display:block; 
                              padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px;
                              margin-top:27px; margin-bottom:27px; margin-left:1px; margin-right:5px; 
                              text-decoration:none; font-size:25px}
.albans-topnav a:hover       {background-color:#22FFB7; color:DimGray; border-radius:12px}
.albans-topnav a.menu-active {background-color:#00008B; color:white; border-radius:12px}
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* Header */
.albans-banner               {overflow:hidden; width:100%; 
                              display:flex; justify-content:center; align-items:center}
.albans-bannerColumn1        {float:left; display:block; 
                              padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;
                              margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:50px}
.albans-bannerColumn2        {float:left; display:block;
                              padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;
                              margin-top:0px; margin-bottom:0px; margin-left:50px; margin-right:0px}

.albans-banner-text          {color:#00008B; text-align:left; margin-bottom:1px; margin-top:0px; font-family:Arial, sans-serif; font-weight:bold; font-size:35px}
.albans-banner-text>span     {color:#00008B; text-align:left; margin-bottom:1px; margin-top:0px; font-family:Arial, sans-serif; font-weight:bold; font-size:20px}
.albans-banner-bullets       {color:Gray; font-size:14px; text-align:left; margin-top:5px; margin-bottom:5px; margin-left:0px}
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* Footer */
.albans-footer               {background-color:#00008B; top:50%; width:100%; text-align:center}
.albans-footer-text          {color:White; font-size:18px}
.albans-footer-button        {background-color:LightGray; color:DimGray;
                              border:none; border-radius:5px;
                              padding:15px 32px; margin:4px 2px;
                              text-align:center; text-decoration:none; font-size:16px;
                              display:inline-block; cursor:pointer}
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------ SPECIFIC PAGES --------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* Home page */
.claimGroup                  {width:100%; margin:auto}
.claimGroup::after           {content:""; clear:both; display:table}
.claimGroupColumn1           {float:left; width:19%; position:relative;
                              padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px; 
                              margin-left:100px; margin-top:0px; margin-bottom:0px; margin-right:0px}
.claim-button                {color:black; background-color:#22FFB7; border-radius:16px;
                              padding:3px 9px; margin:1px;
                              text-align:center; text-decoration:none; font-size:14px;
                              display:inline-block; cursor:pointer}

.P1                          {opacity:0.5; width:55%; position:absolute; top:45px; left:30px; z-index:-1}
.T1                          {height:150px;
                              padding-top:0px; padding-bottom:50px; padding-left:0px; padding-right:0px; 
                              margin-top:10px; margin-bottom:20px; margin-left:0px;margin-right:0px; 
                              font-size:40px; color:#00008B; text-align:center}

.P2                          {opacity:0.5; width:40%; position:absolute; top:10px; left:30px; z-index:-1}
.T2                          {height:150px;
                              padding-top:0px; padding-bottom:50px; padding-left:0px; padding-right:0px; 
                              margin-top:10px; margin-bottom:20px; margin-left:0px;margin-right:0px; 
                              font-size:40px; color:#00008B; text-align:center}

.P3                          {opacity:0.5; width:28%; position:absolute; top:15px; left:30px; z-index:-1}
.T3                          {height:150px;
                              padding-top:0px; padding-bottom:50px; padding-left:3px; padding-right:0px; 
                              margin-top:10px; margin-bottom:20px; margin-left:0px;margin-right:0px; 
                              font-size:40px; color:#00008B; text-align:center}

.P4                          {opacity:0.5; width:40%; position:absolute; top:20px; left:30px; z-index:-1}
.T4                          {height:150px;
                              padding-top:0px; padding-bottom:50px; padding-left:7px; padding-right:0px; 
                              margin-top:10px; margin-bottom:20px; margin-left:0px;margin-right:0px; 
                              font-size:40px; color:#00008B; text-align:center}

.P5                          {opacity:0.5; width:65%; position:absolute; top:40px; left:30px; z-index:-1}
.T5                          {height:150px;
                              padding-top:0px; padding-bottom:50px; padding-left:0px; padding-right:0px; 
                              margin-top:10px; margin-bottom:20px; margin-left:0px;margin-right:0px;  
                              font-size:40px; color:#00008B; text-align:center}

.claimGroupColumn2           {float:left; width:60%; 
                              padding-top:0px; padding-bottom:0px; padding-left:0px;  padding-right:0px; 
                              margin-left:0px; margin-top:0px;     margin-bottom:0px; margin-right:0px}
.claim                       {color:gray;
                              padding-top:0px; padding-bottom:0px; padding-left:0px;  padding-right:20px; 
                              margin-top:7px; margin-bottom:7px;  margin-left:0px;   margin-right:0px}

.modal-title                 {text-align:center; font-size:20px}

.openModalButton             {border:none; display:inline-block; padding:4px 8px; vertical-align:middle; overflow:hidden; border-radius:12px;
                              text-decoration:none; color:black; background-color:#22FFB7; text-align:center; cursor:pointer; white-space:nowrap}
.openModalButton:hover       {color:black; background-color:gray}

.openModalLink               {border:none; display:inline-block; padding:0px; vertical-align:top; overflow:hidden;
                              text-decoration:underline; color:blue; cursor:pointer; white-space:nowrap}
.openModalLink:hover         {color:blue; background-color:lightgray}

.closeModal                  {border:none; display:inline-block; padding:8px 16px; vertical-align:middle; overflow:hidden; border-radius:12px;
                              text-decoration:none; color:white; background-color:#2196F3; text-align:center; cursor:pointer; white-space:nowrap;
                              position:absolute;right:0px;top:0px}
.closeModal:hover            {color:black; background-color:gray}

.aModal                      {z-index:3; display:none; 
                              position:fixed; left:0px; top:0px; width:100%; height:100%; 
                              overflow:auto; background-color:rgba(0,0,0,0.7)}
.aModal-content              {margin:auto; background-color:white; position:relative; outline:0; width:600px;
                              padding-top:5px; padding-bottom:10px; padding-left:30px; padding-right:30px;}
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* Vita page */
.vita                        {margin-right:100px; margin-left:100px}
.vitaGuideword               {color:#00008B; font-weight:bold; font-size:32px}
.vitaHeadline                {color:#00008B; font-weight:bold; font-size:16px}
.vita-tab                    {display:inline-block; margin-left:60px}
.vita-pullback               {margin-right:60px}
.vitaClaim                   {color:gray;
                              padding-top:0px; padding-bottom:0px; padding-left:0px;  padding-right:20px; 
                              margin-top:7px; margin-bottom:7px;  margin-left:0px;   margin-right:0px}
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* Portfolio page */
.portfolioColumn             {float:left; width:50%; padding:10px}
.portfolioHeadline           {color:#00008B; font-size:32px; text-align:center}
.portfolioStatement          {color:#00008B}
.projectCaption              {width:80%; margin:auto; font-size:16px}
.projectCaption::after       {content:""; clear:both; display:table}
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* CSS-only image sliders used in the Portfolio page */
.slider-container {background:#FFFAF0;            /* Set background color to match main website */
            display:flex;
            align-items:center;
            justify-content:center;
            height:100%;
            margin:5px}
.slider-viewport {width:100%;                    /* Properties for the window in which the slides appear */
            max-width:800px;
            height:600px;
            border:none;
            text-align:center;
            overflow:hidden;
            position:relative}
.slides    {display:flex;                        /* Properties for the collection of all slides */
            overflow-x:scroll;
            position:relative;
            scroll-behavior:smooth;
            scroll-snap-type:x mandatory}
.slide     {background-color:#FFFAF0;            /* Properties for each individual slide - Set background color to match main website */
            display:flex;
            justify-content:center;
            align-items:center;
            flex-shrink:0;
            width:100%;
            height:600px;
            margin-right:0px;
            box-sizing:border-box;
            background:#FFFAF0;                    /* Set background color to match main website */
            transform-origin:center center;
            transform:scale(1);
            scroll-snap-align:center}
.slide-text {font-size:20px;                    /* slide number */
            font-weight:bold;
            font-family:sans-serif;
            color:blue;
            margin-top:500px;
            margin-right:25px}
.slide a    {background:none;
            border:none}
a.slide-prev, .slider-viewport::before {        /* left navigation arrow */
            transform:rotate(135deg);
            -webkit-transform:rotate(135deg);
            left:2%}
a.slide-next, .slider-viewport::after {            /* right navigation arrow */
            transform:rotate(-45deg);
            -webkit-transform:rotate(-45deg);
            right:2%}
.slider-viewport::before, .slider-viewport::after, .slide-prev, .slide-next {           /* navigation arrows */
            position:absolute;
            top:48%;
            width:35px;
            height:35px;
            border:solid black;
            border-width:0 4px 4px 0;
            padding:3px;
            box-sizing:border-box}
.slider-viewport::before,.slider-viewport::after {content:'';
                                                    z-index:1;
                                                    background:none;
                                                    pointer-events:none}
.slider-nav        {box-sizing:border-box;                    /* dots */
                position:absolute;
                bottom:2%;
                left:50%;
                width:400px;
                margin-left:-170px;
                text-align:center}
.slider-navlink {display:inline-block;                    /* dots */
                height:15px;
                width:15px;
                border-radius:50%;
                background-color:blue;                    /* dot color */
                margin:0 8px 0 8px}
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* MRO modal in portfolio page */
.portalBullet                {color:gray;
                              padding-top:0px; padding-bottom:0px; padding-left:0px;  padding-right:0px; 
                              margin-top:7px; margin-bottom:7px;  margin-left:0px;   margin-right:0px}
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* Glossary page */
.glossaryBanner              {overflow:hidden; width:100%; 
                              display:flex; justify-content:center; align-items:center}
.glossaryBannerColumn1       {float:left; display:block; 
                              padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;
                              margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:50px}
.glossaryBannerColumn2       {float:left; display:block;
                              padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px;
                              margin-top:0px; margin-bottom:0px; margin-left:50px; margin-right:0px}
.glossaryHeading             {padding:0px; margin-top:0px; margin-bottom:10px; margin-right:0px; margin-left:0px; 
                              font-size:40px; color:#00008B}
.glossaryHeadingSmall        {font-size:16px; color:DimGray}
.instructionBox              {border-style:solid; border-width:1px; border-color:#D3D3D3;
                              margin:1px; margin-left:10px; margin-right:10px;
                              padding:5px; padding-left:40px; 
                              width:400px; color:DimGray; background-color:white}
.boxTitle                    {margin:0px; margin-left:-30px; padding:3px; color:#00008B; 
                              text-align:center; text-decoration-line:none; font-size:18px; font-weight:bold}

.listTitle                   {font-size:18px; text-decoration-line:none; font-weight:bold; color:#00008B}
.flex-container              {margin-left:35px; display:flex; flex-direction:row}
.treeView                    {flex:30%}
.spacer                      {flex:5%}
.listView                    {flex:65%}

summary                      {color:black; padding:0px; margin:0px; text-align:left; cursor:pointer}
details                      {padding:0px; margin:0px}

details > summary            {list-style-type:square; color:blue}
details[open] summary        {color:green}


.albans-list-letter-tab      {color:black; background-color:BurlyWood;
                              border:none; border-radius:12px 12px 0px 0px;
                              padding-top:10px; padding-right:100px; padding-bottom:10px; padding-left:100px;
                              margin-top:10px; margin-bottom:10px; margin-right:200px; margin-left:0px;
                              text-align:center; text-decoration:none; font-size:18px;
                              display:inline-block; cursor:pointer}
                              
.albans-tree-tab             {border:none; border-radius:12px 12px 0px 0px;
                              padding-top:1px; padding-right:10px; padding-bottom:0px; padding-left:10px;
                              margin-top:1px; margin-bottom:0px; margin-right:0px; margin-left:55px;
                              text-align:center; text-decoration:none; font-size:14px;
                              display:inline-block; cursor:pointer}
                                   
.albans-L1-tree-tab          {margin-top:2px; margin-bottom:2px; margin-right:0px; margin-left:5px}
.albans-L2-tree-tab          {margin-top:2px; margin-bottom:2px; margin-right:0px; margin-left:20px}
.albans-L3-tree-tab          {margin-top:2px; margin-bottom:2px; margin-right:0px; margin-left:35px}
.albans-L4-tree-tab          {margin-top:2px; margin-bottom:2px; margin-right:0px; margin-left:50px}
.albans-L5-tree-tab          {margin-top:2px; margin-bottom:2px; margin-right:0px; margin-left:65px}
.albans-L6-tree-tab          {margin-top:2px; margin-bottom:2px; margin-right:0px; margin-left:80px}
                                   
.albans-list-entry-tab       {border:none; border-radius:12px 12px 0px 0px;
                              padding-top:1px; padding-right:10px; padding-bottom:0px; padding-left:10px;
                              margin-top:2px; margin-bottom:0px; margin-right:200px; margin-left:0px;
                              text-align:center; text-decoration:none; font-size:16px;
                              display:inline-block; cursor:pointer}
                                   
.albans-glossary-entry       {color:DimGray; background-color:white;
                              border-style:solid; border-width:1px; border-color:#D3D3D3; 
                              padding-top:10px; padding-right:10px; padding-bottom:10px; padding-left:10px;
                              margin-top:0px; margin-bottom:10px; margin-right:200px; margin-left:15px}


.albans-similar-button      {border:solid; border-width:1px; border-color:#2196F3; border-radius:6px;
                              padding:3px 3px; margin:3px 3px;
                              text-align:center; text-decoration:none; font-size:12px;
                              display:inline-block; cursor:pointer}

/* Tables in Topic Entries */
.albans-topic-table                    {border-collapse:collapse; width:100%}
.albans-topic-table th                 {text-align:left; background-color:limegreen; color:black}
.albans-topic-table td                 {border:1px solid black; padding:8px}
.albans-topic-table th                 {border:1px solid black; padding:8px}
.albans-topic-table tr:nth-child(even) {background-color: #F2F2F2;}

/* Tree colors */
.albans-gray            {color:black;   background-color:#DDDDDD}    /* Color for Acronym/Abbreviation */
.albans-white           {color:black;   background-color:#FFFFFF}    /* Color for unfinished entries   */
.albans-red             {color:white;   background-color:#FF0000}
.albans-red-text        {color:#FF0000; background-color:white}
.albans-orange          {color:white;   background-color:#FF7700}
.albans-orange-text     {color:#FF7700; background-color:white}
.albans-yellow          {color:black;   background-color:#FFFF00}
.albans-yellow-text     {color:#FFFF00; background-color:#DDDDDD}    /* needed for readability contrast */
.albans-lime            {color:black;   background-color:#77FF00}
.albans-lime-text       {color:#77FF00; background-color:white}
.albans-green           {color:black;   background-color:#00FF00}
.albans-green-text      {color:#00FF00; background-color:white}
.albans-turquoise       {color:black;   background-color:#00FF77}
.albans-turquoise-text  {color:#00FF77; background-color:white}
.albans-cyan            {color:black;   background-color:#00FFFF}
.albans-cyan-text       {color:#00FFFF; background-color:white}
.albans-ocean           {color:white;   background-color:#0077FF}
.albans-ocean-text      {color:#0077FF; background-color:white}
.albans-blue            {color:white;   background-color:#0000FF}
.albans-blue-text       {color:#0000FF; background-color:white}
.albans-violet          {color:white;   background-color:#7700FF}
.albans-violet-text     {color:#7700FF; background-color:white}
.albans-magenta         {color:white;   background-color:#FF00FF}
.albans-magenta-text    {color:#FF00FF; background-color:white}
.albans-pink            {color:white;   background-color:#FF0077}
.albans-pink-text       {color:#FF0077; background-color:white}
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* Training page */
.veneer-jar                       {position:relative; height:240px; width:240px}
.veneer-image                     {display:block; width:100%; height:auto}
.veneer-overlay                   {position:absolute; top:0; bottom:0; left:0; right:0; height:240px; width:240px; opacity:0;
								   transition: .5s ease; background-color:#00008B}
.veneer-jar:hover .veneer-overlay {opacity:0.7}
.veneer-text                      {color:white; font-size:20px; position:absolute; top:40%; left:50%; width:100%; padding-left:5px; padding-right:5px;
								   -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); text-align:center}
.veneer-subtext                   {color:white; font-size:10px; position:absolute; bottom:0%; left:50%; width:100%;
								   -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); text-align:center}

.trainingTitle               {top:50%; width:100%; text-align:center; color:#00008B; font-weight:bold; font-size:32px}
.courseFeature               {color:#00008B; font-weight:bold; font-size:16px; text-decoration:underline}
/* ------------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------------- */