/*******************************************************************************************************/
/*                                       TOP LEVEL SETTINGS & DEFAULTS                                 */
/*******************************************************************************************************/

div { margin: auto; }

a { text-decoration: none; color: inherit; }

.button { font-weight:normal; font-size:10px; color:#ffffff; background-color:#006770; padding:4px; width:60px; border:none; }

img {     }
.imgRight { float:right; border:20px solid white; margin:20px 60px 20px 60px; }
.imgShadow { margin:5px; padding: 5px; background:#000000; box-shadow: 2px 4px #888888; }
.imgAlert  { margin:5px; padding: 5px; background:#0099CC; box-shadow: 2px 4px #9CDEDE; }

/*******************************************************************************************************/
/*                                                   FONTS                                             */
/*******************************************************************************************************/

.Headline       { font-family:'Libre Baskerville', cursive; font-size:50px; text-decoration:none; color:#0a0e69; }
.HeadlineWhite  { font-family:Quicksand, sans-serif; font-size:36px; text-decoration:none; color:white; }
.Feature        { font-family:Quicksand, sans-serif; font-size:28px; color:#0a0e69;   }
.FeatureWhite   { font-family:Quicksand, sans-serif; font-size:28px; color:white;   }
.Voice          { font-family:Quicksand, sans-serif; font-weight:normal; font-style:italic;font-size:20px; text-decoration:none; color:#008EBD; }
.Logo           { font-family:'Libre Baskerville', cursive; font-size:32px; text-decoration:none; color:white; }
.Sandbox        { font-family:Quicksand, sans-serif; font-size:16px; color: #a50202; text-shadow: 2px 2px 5px white; }

.BodyCopy       { font-family:Quicksand, sans-serif; font-weight:normal; font-style:normal; font-size:20px; color:#000000; }
.BodyWhite       { font-family:Quicksand, sans-serif; font-weight:normal; font-style:normal; font-size:20px; color:white; }




.LittleVoice    { font-family:Quicksand, sans-serif; font-weight:normal; font-style:italic;font-size:10px; text-decoration:none; color:#008EBD; }
.Wow            { font-family:Quicksand, sans-serif; font-weight:normal; font-style:normal;font-size:28px; text-decoration:none; color:#007DD1;  }
.Note           { font-family:Quicksand, sans-serif; font-weight:normal; font-style:normal; font-size:13px; color:#000000; }
.DataLabel      { font-family:Quicksand, sans-serif; font-weight:normal; font-style:normal; font-size:12px; color:#000000; }
.DataLabelWhite { font-family:Quicksand, sans-serif; font-weight:normal; font-style:normal; font-size:12px; color:white; }
p.Vertical      { writing-mode: vertical-lr; text-orientation:upright; text-align:center; font-size:16px; font-weight:bold; }
p.Horizontal     { font-family:Quicksand, sans-serif; font-weight:bold; font-style:normal; font-size:16px; color:#000000; }

.DataValue      { font-family:Quicksand, sans-serif; font-weight:normal; font-style:normal; font-size:12px; color:#0000DB;  }
.Title          { font-family:Quicksand, sans-serif; font-weight:bold; font-style:normal; font-size:24px; color:#000000; }
.TitleSmall     { font-family:Quicksand, sans-serif; font-weight:bold; font-style:normal; font-size:16px; color:#000000; text-align:left; }
.NoteWhite      { font-family:Quicksand, sans-serif; font-weight:normal; font-style:normal; font-size:12px; color:#ffffff; }
.HeaderId       { font-family:Quicksand, sans-serif; font-weight:normal; font-style:normal; font-size:15px; color:#ffffff; }
.Comment        { font-family:Quicksand, sans-serif; font-weight:normal; font-style:italic; font-size:12px; color:#4682B4; }

/*******************************************************************************************************/
/*                                       Sticky HEADER                                                 */
/*******************************************************************************************************/

.Header         { position:fixed; z-index:100; background:#24478F; top:0; height:80px; width:100%;  }

.HeaderMenu     { position:absolute; z-index:101; top:8px; left:18px;  }
.HeaderHeadline { position:absolute; z-index:101; top:15px; left:200px; width:1300px; text-align: center; }
.HeaderLogo     { position:absolute; z-index:101; top:12px; right:30px; }
.HeaderSite     { position:absolute; z-index:101; top:47px; right:75px; }


/*.HeaderFlash   { position:absolute; z-index:101; top:4px; left:0; right:0; width:900px; height:55px;
                  background:#2B56AB; padding: 5px; text-align:center; vertical-align:middle; }*/

/* Style The Dropdown Button */
.dropbtn { background-color: #CC0029; color: white; margin:12px 0 0 7px; padding: 8px; font-size: 20px; border:none; cursor: pointer; }

/* The container <div> - needed to position the dropdown content */
.dropdown { position: relative; display: inline-block; z-index:101; }

/* Dropdown Content (Hidden by Default) */
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); z-index:101; }

/* Links inside the dropdown */
.dropdown-content a { font-family:Quicksand, sans-serif; font-size:18px; color: black; padding: 12px 16px; display: block; }

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content { display: block; }

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn { background-color: #CC0029; }


/*******************************************************************************************************/
/*                                       CONTROL SETTINGS                                              */
/*******************************************************************************************************/

.Settings    { position:fixed; z-index:100; background:#ffffff; top:90px; width:90px; right:0; }

a.Control   { display:block; width:72px; height:36px; margin:0 0 6px 0; border:1px solid black; background-color:#24478F;
    padding:3px; font-family:Quicksand, sans-serif; font-weight:normal; font-size:13px; color:#ffffff;  }
a.Control:hover, a.Control:active {  }
a.Control:visited, a.Control:link { color:#ffffff; }

a.ControlGold   { display:block; width:72px; height:36px; margin:0 0 6px 0; border:1px solid black; background-color:#FF9933;
    padding:3px; font-family:Quicksand, sans-serif; font-weight:normal; font-size:13px; color:#ffffff;  }
a.ControlGold:hover, a.ControlGold:active {  }
a.ControlGold:visited, a.ControlGold:link { color:#ffffff; }



.Perspective    { position:fixed; z-index:200; top:460px; left:1250px; }



/*******************************************************************************************************/
/*  Body section color bands, actions tables construction                                              */
/*******************************************************************************************************/

.Body       { position: relative; top: 60px; width: 100%; }
.Content    { position: relative; padding: 0 100px 0 0;   }

.BandGray       { position: relative; width:100%; min-height:200px; top: 80px; padding:10px 0 20px 0; background-color:#F5F5F5; z-index: 0; overflow: hidden; }
.BandBlue       { position: relative; width:100%; min-height:200px; top: 80px; padding:10px 0 20px 0; background-color:#E7EDF9; z-index: 0; overflow: hidden; }
.BandWhite      { position: relative; width:100%; min-height:200px; top: 80px; padding:10px 0 20px 0;  background-color:#FFFFFF; z-index: 0; overflow: hidden; }
.BandWhiteTight { position: relative; width:100%;                   top: 80px; padding:0;               background-color:#FFFFFF; z-index: 0; overflow: hidden; }

.BandFooter     { position: relative; width:100%; height:40px; top:80px; padding:10px; background-color:#24478F; z-index: 0; overflow: hidden; }

a.Callout       { display:block; width:280px; height:140px; background-color:#F8F5FF; margin:10px; padding:6px; border:1px solid black; float:right; }


.RowTable        { border-collapse:collapse; width:100%; }
.RowTable th { padding: 0; vertical-align:bottom; border-bottom: 1px solid #ddd; font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:#0a0e69; }
.RowTable td { padding: 6px 6px 12px 6px; text-align:center; vertical-align:top; border-bottom: 1px solid #ddd; }

.LittleTable    { border-collapse:collapse; width:max-content; margin:auto; }
.LittleTable th { margin:6px; padding: 6px; text-align:center; }
.LittleTable td { margin:6px; padding: 6px; text-align:center; vertical-align:top; border-bottom-style:none; }

.EduTable        { border-collapse:collapse; width:100%; }
.EduTable th { padding: 12px; text-align:center; border-bottom: 1px solid #ddd; font-family:Quicksand, sans-serif; font-size:12px; color:#0a0e69; }
.EduTable td { padding: 12px 12px 20px 12px; vertical-align:middle; border-bottom: 1px solid #ddd; }


/*******************************************************************************************************/
/*   Tool Grid                                                                                         */
/*******************************************************************************************************/


.ToolGrid   { display:grid ;
    grid-template-rows: min-content min-content; grid-template-columns: 1fr 1fr 1fr; grid-gap:20px;
    align-content:center; align-items:center; font-family:Quicksand, sans-serif; font-size:16px; font-weight:bold; text-align:center; color:#000000;            }

.ToolGridOnePage   { grid-row: 1 / 3; grid-column: 1 / 4; width:100%; height:100%; padding: 3px; background-color:#F5F5F5;  }

.ToolGrid1   { grid-row: 1 / 2; grid-column: 1 / 2; width:100%; height:100%; padding: 3px; background-color:#F5F5F5;  }
.ToolGrid2   { grid-row: 1 / 2; grid-column: 2 / 3; width:100%; height:100%; padding: 3px; background-color:#F5F5F5;  }
.ToolGrid3   { grid-row: 1 / 2; grid-column: 3 / 4; width:100%; height:100%; padding: 3px; background-color:#F5F5F5;   }
.ToolGrid4   { grid-row: 2 / 3; grid-column: 1 / 2; width:100%; height:100%; padding: 3px; background-color:#F5F5F5;   }
.ToolGrid5   { grid-row: 2 / 3; grid-column: 2 / 3; width:100%; height:100%; padding: 3px; background-color:#F5F5F5;   }
.ToolGrid6   { grid-row: 2 / 3; grid-column: 3 / 4; width:100%; height:100%; padding: 3px; background-color:#F5F5F5;   }

/***** Shape Definitions including default color by Type *****/
a.ToolTool   { display:inline-block; width:144px; height:80px; margin:8px; border-radius:12px;
    padding:4px; text-align:center; vertical-align:top;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:15px; color:White; }
a.ToolTool:hover, a.ToolTool:active {  }
a.ToolTool:visited, a.ToolTool:link { color:White; }

a.ToolCourse   { display:inline-block; width:144px; height:80px; margin:8px; border-radius: 12px;
    padding:4px; text-align:center; vertical-align:top;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:15px; color:White; }
a.ToolCourse:hover, a.ToolCourse:active {  }
a.ToolCourse:visited, a.ToolCourse:link { color:White; }

a.ToolVoice   { display:inline-block; width:144px; height:80px; margin:8px; border-radius: 0 20px 20px 20px;
    padding:4px; text-align:left; vertical-align:top;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:15px; color:Black; }
a.ToolVoice:hover, a.ToolVoice:active {  }
a.ToolVoice:visited, a.ToolVoice:link { color:Black; }

a.ToolEpic   { display:inline-block; width:144px; height:80px; margin:8px;
    padding:4px;  text-align:left; vertical-align:top;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:15px; color:Blue; }
a.ToolEpic:hover, a.ToolEpic:active {  }
a.ToolEpic:visited, a.ToolEpic:link { color:Blue; }

/***** Colorize Type *****/
.ColorTool    { background-color:Teal; }
.ColorCourse  { background-color:RebeccaPurple; }
.ColorVoice   { background-color:Gold; }
.ColorEpic    { background-color:SkyBlue; }

/***** Colorize Impact *****/
.ColorMinor   { background-color:#D5F1E3; }
.ColorMajor   { background-color:#3EBB7D; }
.ColorSuper   { background-color:#246B47;  }

/***** Colorize Progress *****/
.ColorActive  { background-color:#24478F;  }
.ColorBuild   { background-color:#789ADD;  }
.ColorIdea    { background-color:#F5FBFF;  }

/***** Highlight overrides *****/
.HighlightGray    { box-shadow: 2px 4px 6px #888888; }
.HighlightFeature { box-shadow: 2px 4px 6px #FFD700; }
.HighlightNew     { box-shadow: 2px 4px 6px #789ADD; }


/***** Legend shapes *****/
p.TypeTool         { width:60px; height:30px; margin:auto; padding:2px; border:none; background-color:Teal;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:White;  }
p.TypeCourse       { width:60px; height:30px; margin:auto; padding:2px; border:none; background-color:RebeccaPurple;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:White;  }
p.TypeVoice        { width:60px; height:30px; margin:auto; padding:2px; border:none; background-color:Gold;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:Black;  }
p.TypeEpic         { width:60px; height:30px; margin:auto; padding:2px; border:none; background-color:SkyBlue;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:Blue;  }

p.ImpactMinor     { width:60px; height:30px; margin:auto; padding:2px; border:none; background-color:#D5F1E3;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:#000000;  }
p.ImpactMajor     { width:60px; height:30px; margin:auto; padding:2px; border:none; background-color:#7DD4A8;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:#000000;  }
p.ImpactSuper    { width:60px; height:30px; margin:auto; padding:2px; border:none; background-color:#246B47;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:#ffffff;  }

p.ProgressActive       { width:60px; height:30px; margin:auto; padding:2px; border:none; background-color:#24478F;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:#ffffff;  }
p.ProgressBuild        { width:60px; height:30px; margin:auto; padding:2px; border:none; background-color:#789ADD;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:#ffffff;  }
p.ProgressIdea         { width:60px; height:30px; margin:auto; padding:2px; border:none; background-color:#B6C8ED;
    font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:#000000;  }

/***** Inner Grid *****/
.ToolInnerGrid    { display:grid; grid-template-columns:auto; grid-template-rows:62px 15px; grid-gap:0;                }
.ToolInnerGrid1   { grid-row: 1 / 2; grid-column: 1 / 2; width:100%; height:100%;                                      }
.ToolInnerGrid2   { grid-row: 2 / 3; grid-column: 1 / 2; width:100%; height:100%; font-size:12px; text-align:center;   }


/***** Pseudo Pop-Up *****/
.ToolPopup       { position:fixed; z-index:102;  top:160px; left:0; right:0; height:800px; width:1300px; }
.ToolPopupGrid   { display:grid; grid-template-rows:700px; grid-template-columns:600px 600px;     }
.ToolPopupGrid1  { grid-row: 1 / 3; grid-column: 1 / 2; width:90%; height:90%; padding: 20px; text-align:left; background-color:#24478F; border:1px solid gray;  }
.ToolPopupGrid2  { grid-row: 1 / 3; grid-column: 2 / 3; width:90%; height:90%; padding: 20px; text-align:left; background-color:#24478F; border:1px solid gray; }
/* .ToolPopupGrid3  { grid-row: 2 / 3; grid-column: 2 / 3; width:90%; height:90%; padding: 20px; text-align:center; background-color:#24478F; border:1px solid gray; }






/*******************************************************************************************************/
/*                                       INDICATORS, MEASURES                                          */
/*******************************************************************************************************/

p.Datum       { width:54px; height:35px; margin:auto; padding:2px; border-top:6px #CCEEFF; background-color:#CCEEFF; font-family:Quicksand, sans-serif; font-size:16px; color:#0000DB;  }
p.DatumGold   { width:54px; height:35px; margin:auto; padding:2px; border-top:6px solid gold; background-color:#CCEEFF; font-family:Quicksand, sans-serif; font-size:16px; color:#0000DB;  }
p.DatumGreen  { width:54px; height:35px; margin:auto; padding:2px; border-top:6px solid green; background-color:#CCEEFF; font-family:Quicksand, sans-serif; font-size:16px; color:#0000DB;  }
p.DatumYellow { width:54px; height:35px; margin:auto; padding:2px; border-top:6px solid yellow; background-color:#CCEEFF; font-family:Quicksand, sans-serif; font-size:16px; color:#0000DB;  }
p.DatumRed    { width:54px; height:35px; margin:auto; padding:2px; border-top:6px solid red; background-color:#CCEEFF; font-family:Quicksand, sans-serif; font-size:16px; color:#0000DB;  }

p.DatumSmall       { width:30px; height:20px; margin:auto; padding:2px; border-top:6px #CCEEFF; background-color:#CCEEFF; font-family:Quicksand, sans-serif; font-size:16px; color:#0000DB;  }
p.DatumSmallGold   { width:30px; height:20px; margin:auto; padding:2px; border-top:6px solid gold; background-color:#CCEEFF; font-family:Quicksand, sans-serif; font-size:16px; color:#0000DB;  }
p.DatumSmallGreen  { width:30px; height:20px; margin:auto; padding:2px; border-top:6px solid green; background-color:#CCEEFF; font-family:Quicksand, sans-serif; font-size:16px; color:#0000DB;  }
p.DatumSmallYellow { width:30px; height:20px; margin:auto; padding:2px; border-top:6px solid yellow; background-color:#CCEEFF; font-family:Quicksand, sans-serif; font-size:16px; color:#0000DB;  }
p.DatumSmallRed    { width:30px; height:20px; margin:auto; padding:2px; border-top:6px solid red; background-color:#CCEEFF; font-family:Quicksand, sans-serif; font-size:16px; color:#0000DB;  }

p.DatumWide     { width:82px; height:22px; margin:auto; padding:5px; border-top:6px #CCEEFF; background-color:#CCEEFF; font-family:Quicksand, sans-serif; font-size:16px; color:#0000DB;  }



p.Team         { width:30px; height:20px; margin:auto; padding:2px; border:none; background-color:#B2CCE1; font-family:Quicksand, sans-serif; font-weight:normal; font-size:13px; color:#000000;  }
p.Impact       { width:40px; height:30px; margin:auto; padding:2px; border:none; background-color:#DBAF00; font-family:Quicksand, sans-serif; font-weight:normal; font-size:16px; color:#007DD1;  }
p.Comments     { width:40px; height:30px; margin:auto; padding:2px; border:none; background-color:#BAE8E8; font-family:Quicksand, sans-serif; font-weight:normal; font-size:16px; color:#000000;  }

a.Action   { display:inline-block; width:60px; height:60px; padding:6px; border:3px solid gray; background-color:#24478F; font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:#ffffff; }
a.Action:hover, a.Action:active {  }
a.Action:visited, a.Action:link { color:#ffffff; }

a.ActionSoon   { display:inline-block; width:60px; height:60px; padding:6px; border:3px solid gray; background-color:#E5F5FF; font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:#000000; }
a.ActionSoon:hover, a.ActionSoon:active {  }
a.ActionSoon:visited, a.ActionSoon:link { color:#ffffff; }

a.ActionSmall   { display:block; width:60px; height:30px; margin:0; padding:2px 2px 2px 2px; border:none; background-color:#007DD1; text-align:left; font-family:Quicksand, sans-serif; font-size:9px; color:#ffffff; }
a.ActionSmall:hover, a.ActionSmall:active {  }
a.ActionSmall:visited, a.ActionSmall:link { color:#000000; }

a.ProcessBoxSmall  { display:inline-block; width:60px; height:60px; margin:auto; padding:2px; border:none; background-color:#EBFFFF; font-family:Quicksand, sans-serif; font-size:10px; color:#000000;  }

p.Viewpoint       { display:inline-block; width:100px; height:18px; margin:0 0 0 20px; padding:0; border:none; background-color:#E5CCFF; font-family:Quicksand, sans-serif; font-style:italic; font-size:20px; text-align:center; color:#000000;  }

.CommentBoxSmall   { display:block; width:500px; height:150px; margin:0; padding:6px; border:none; background-color:#CCEEFF; text-align:left; font-family:Quicksand, sans-serif; font-size:10px; color:#000000; }
.NotesBoxSmall   { display:block; width:500px; height:150px; margin:0; padding:6px; border:none; background-color:#F8F5FF; text-align:left; font-family:Quicksand, sans-serif; font-size:10px; color:#000000; }

a.NextComment    { display:inline-block; width:45px; height:15px; margin:-5px 0 0 13px; padding:0; background-color:#24478F; font-size:10px; color:#ffffff;      }

p.TinyTag       { display:inline-block; width:50px; height:13px; margin:2px; padding:1px; border:none; background-color:#F8F5FF; font-family:Quicksand, sans-serif; font-style:normal; font-size:8px; text-align:center; color:#000000;  }


/*******************************************************************************************************/
/*                                              COMMENTS                                               */
/*******************************************************************************************************/

a.StickyYellow       { display:block; width:70px; height:70px; margin:2px 2px 20px 2px; padding:2px; border:none; background-color:#FFFF75; box-shadow: 3px 5px #888888; font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }
a.StickyGold       { display:block; width:70px; height:70px; margin:2px 2px 20px 2px; padding:2px; border:none; background-color:#F0F000; box-shadow: 3px 5px #888888; font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }
a.StickyGreen       { display:block; width:70px; height:70px; margin:2px 2px 20px 2px; padding:2px; border:none; background-color:#9CDEBD; box-shadow: 3px 5px #888888; font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }
a.StickyBlue       { display:block; width:70px; height:70px; margin:2px 2px 20px 2px; padding:2px; border:none; background-color:#2ED5FF; box-shadow: 3px 5px #888888; font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }

a.StickyYellowBig       { display:block; width:280px; height:140px; margin:0 auto; padding:2px; border:none; background-color:#FFFF75; box-shadow: 3px 5px #888888; font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }
a.StickyGoldBig       { display:block; width:280px; height:140px; margin:0 auto; padding:2px; border:none; background-color:#F0F000; box-shadow: 3px 5px #888888; font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }
a.StickyGreenBig       { display:block; width:280px; height:140px; margin:0 auto; padding:2px; border:none; background-color:#9CDEBD; box-shadow: 3px 5px #888888; font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }
a.StickyBlueBig       { display:block; width:280px; height:140px; margin:0 auto; padding:2px; border:none; background-color:#2ED5FF; box-shadow: 3px 5px #888888; font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }

a.StickyYellow3x       { display:block; width:70px; height:70px; margin:2px 2px 20px 2px; padding:2px; border:none; background-color:#FFFF75;
                            box-shadow: 3px 5px #888888, 6px 10px #ffff75, 9px 15px #888888, 12px 20px #ffff75, 15px 25px #888888;
                            font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }

a.StickyGold3x       { display:block; width:70px; height:70px; margin:2px 2px 20px 2px; padding:2px; border:none; background-color:#F0F000;
                            box-shadow: 3px 5px #888888, 6px 10px #F0F000, 9px 15px #888888, 12px 20px #F0F000, 15px 25px #888888;
                            font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }

a.StickyGreen3x       { display:block; width:70px; height:70px; margin:2px 2px 20px 2px; padding:2px; border:none; background-color:#9CDEBD;
                            box-shadow: 3px 5px #888888, 6px 10px #9CDEBD, 9px 15px #888888, 12px 20px #9CDEBD, 15px 25px #888888;
                            font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }

a.StickyBlue3x       { display:block; width:70px; height:70px; margin:2px 2px 20px 2px; padding:2px; border:none; background-color:#2ED5FF;
                            box-shadow: 3px 5px #888888, 6px 10px #2ED5FF, 9px 15px #888888, 12px 20px #2ED5FF, 15px 25px #888888;
                            font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }

a.StickyMixedYellow3x       { display:block; width:70px; height:70px; margin:2px 2px 20px 2px; padding:2px; border:none; background-color:#FFFF75;
                            box-shadow: 3px 5px #888888, 6px 10px #2ED5FF, 9px 15px #888888, 12px 20px #9CDEBD, 15px 25px #888888;
                            font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }

a.StickyMixedGreen3x       { display:block; width:70px; height:70px; margin:2px 2px 20px 2px; padding:2px; border:none; background-color:#9CDEBD;
                            box-shadow: 3px 5px #888888, 6px 10px #2ED5FF, 9px 15px #888888, 12px 20px #FFFF75, 15px 25px #888888;
                            font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }

a.StickyMixedBlue3x       { display:block; width:70px; height:70px; margin:2px 2px 20px 2px; padding:2px; border:none; background-color:#2ED5FF;
                            box-shadow: 3px 5px #888888, 6px 10px #FFFF75, 9px 15px #888888, 12px 20px #9CDEBD, 15px 25px #888888;
                            font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }

a.StickyMixedGold3x       { display:block; width:70px; height:70px; margin:2px 2px 20px 2px; padding:2px; border:none; background-color:#F0F000;
                            box-shadow: 3px 5px #888888, 6px 10px #2ED5FF, 9px 15px #888888, 12px 20px #9CDEBD, 15px 25px #888888;
                            font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }


/*******************************************************************************************************/
/*   Town Hall                                                                                         */
/*******************************************************************************************************/

.TownHallGrid   { display:grid ;
                       grid-template-rows: repeat( 8, 50px ) ;
                       grid-template-columns: repeat( 12, 1fr ) ;
                       grid-gap: 10px ;
                       font-family:Quicksand, sans-serif; font-size:12px; text-align:left; color:#000000;            }


.TownHallTime       { grid-row: 1 / 2; grid-column: 1 / 7;  width:100%; height:100%; padding: 2px; background-color:#F5F5F5;  }
.TownHallPurpose    { grid-row: 1 / 2; grid-column: 7 / 13; width:100%; height:100%; padding: 2px; background-color:#F5F5F5;  }
.TownHallVideo      { grid-row: 2 / 9; grid-column: 1 / 7;  width:100%; height:100%; padding: 2px; background-color:#F5F5F5;   }
.TownHallAudience   { grid-row: 2 / 9; grid-column: 7 / 13; width:100%; height:100%; padding: 2px; background-color:#F5F5F5;   }

.TownHallAudienceMemberRed { display:inline-block; width:16px; height:16px; border-radius: 50%; margin:1px; border:1px solid gray; background-color:#CC0029; font-family:Quicksand, sans-serif; font-size:8px; text-align:left; color:#ffffff;  }
.TownHallAudienceMemberBlue { display:inline-block; width:16px; height:16px; border-radius: 50%; margin:1px; border:1px solid gray; background-color:#007DD1; font-family:Quicksand, sans-serif; font-size:8px; text-align:left; color:#ffffff;  }
.TownHallAudienceMemberWhite { display:inline-block; width:16px; height:16px; border-radius: 50%; margin:1px; border:1px solid gray; background-color:#ffffff; font-family:Quicksand, sans-serif; font-size:8px; text-align:left; color:#ffffff;  }

.TownHallAudienceGrid { display:grid; width:90%; grid-template-rows: 16px 120px 120px; grid-template-columns: 30px 1fr 1fr 1fr; grid-gap: 10px; font-family:Quicksand, sans-serif; font-size:10px; text-align:center; color:#000000;  }

.TownHallAudienceX1     { grid-row: 1 / 2; grid-column: 2 / 3;  width:100%; height:100%; padding: 2px; background-color:#F0FFFF;  }
.TownHallAudienceX2     { grid-row: 1 / 2; grid-column: 3 / 4;  width:100%; height:100%; padding: 2px; background-color:#F0FFFF;  }
.TownHallAudienceX3     { grid-row: 1 / 2; grid-column: 4 / 5;  width:100%; height:100%; padding: 2px; background-color:#F0FFFF;  }
.TownHallAudienceY1     { grid-row: 2 / 3; grid-column: 1 / 2;  width:100%; height:100%; padding: 2px; background-color:#F0FFFF;  }
.TownHallAudienceY2     { grid-row: 3 / 4; grid-column: 1 / 2;  width:100%; height:100%; padding: 2px; background-color:#F0FFFF;  }

.TownHallAudienceGrid1  { grid-row: 2 / 3; grid-column: 2 / 3;  width:100%; height:100%; padding: 2px; background-color:#F0FFFF;  }
.TownHallAudienceGrid2  { grid-row: 2 / 3; grid-column: 3 / 4;  width:100%; height:100%; padding: 2px; background-color:#F0FFFF;  }
.TownHallAudienceGrid3  { grid-row: 2 / 3; grid-column: 4 / 5;  width:100%; height:100%; padding: 2px; background-color:#F0FFFF;  }
.TownHallAudienceGrid4  { grid-row: 3 / 4; grid-column: 2 / 3;  width:100%; height:100%; padding: 2px; background-color:#F0FFFF;  }
.TownHallAudienceGrid5  { grid-row: 3 / 4; grid-column: 3 / 4;  width:100%; height:100%; padding: 2px; background-color:#F0FFFF;  }
.TownHallAudienceGrid6  { grid-row: 3 / 4; grid-column: 4 / 5;  width:100%; height:100%; padding: 2px; background-color:#F0FFFF;  }







/*******************************************************************************************************/
/*   Organization Chart                                                                                 */
/*******************************************************************************************************/

p.OrgEntity { width:160px; height:35px; margin:5px; padding:2px; border:none; background-color:#9ECFFF; font-family:Quicksand, sans-serif; font-size:12px; text-align:left; color:#000000;  }
p.OrgTeam { width:44px; height:30px; margin:2px; padding:2px; border:1px solid gray; background-color:#66B2FF; font-family:Quicksand, sans-serif; font-size:10px; text-align:left; color:#000000;  }
p.OrgCommittee { width:160px; height:35px; margin:5px; padding:2px; border:none; background-color:#E5F2FF; font-family:Quicksand, sans-serif; font-size:12px; text-align:left; color:#000000;  }

/*******************************************************************************************************/
/*   Citizen Dashboard                                                                                 */
/*******************************************************************************************************/

.DashboardContainer  { display:grid;
                       grid-template-rows: 240px 100px 200px ;
                       grid-template-columns: repeat( 5, 265px ) ;
                       font-family:Quicksand, sans-serif; }

.DashboardCitizens   { grid-row: 1 / 2; grid-column: 1 / 2;  display:block; border-top:10px solid green; background-color:#F5F5F5; margin:5px; padding:2px; font-size:14px; text-align:left; color:#000000; }
.DashboardGovernment { grid-row: 1 / 2; grid-column: 2 / 3;  display:block; border-top:10px solid yellow; background-color:#F5F5F5; margin:5px; padding:2px; font-size:14px; text-align:left; color:#000000; }
.DashboardEconomy    { grid-row: 1 / 2; grid-column: 3 / 4;  display:block; border-top:10px solid green; background-color:#F5F5F5; margin:5px; padding:2px; font-size:14px; text-align:left; color:#000000; }
.DashboardThePress   { grid-row: 1 / 2; grid-column: 4 / 5;  display:block; border-top:10px solid red; background-color:#F5F5F5; margin:5px; padding:2px; font-size:14px; text-align:left; color:#000000; }
.DashboardParties    { grid-row: 1 / 2; grid-column: 5 / 6;  display:block; border-top:10px solid red; background-color:#F5F5F5; margin:5px; padding:2px; font-size:14px; text-align:left; color:#000000; }

.DashboardTools      { grid-row: 2 / 3; grid-column: 1 / 6;  }

.DashboardDisplay    { grid-row: 3 / 4; grid-column: 1 / 6;  display:block; border:none; background-color:#F5F5F5; margin:2px; padding:2px; font-size:14px; text-align:left; color:#000000; }


/*******************************************************************************************************/
/*   Get Involved                                                                                      */
/*******************************************************************************************************/

.InvolvedBox { position:relative; float:left; display:block; width:170px; height:120px; background-color:#0099CC; margin:10px; padding: 6px;
               text-align:center; font-family:Quicksand, sans-serif; font-weight:normal; font-size:16px; color:#ffffff;  }

.InvolvedStep { position:relative; float:left; display:block; width:280px; height:160px; background-color:#0099CC; margin:10px; padding: 10px;
               text-align:center; font-family:Quicksand, sans-serif; font-weight:normal; font-size:16px; color:#000000;  }


.SkillsTable    { table-layout:fixed; border-collapse:collapse; margin-left:auto; margin-right: auto; }
.SkillsTable th { width:200px;  }
.SkillsTable td { padding: 20px; vertical-align:top; font-size:16px;  }





/*******************************************************************************************************/
/*   Citizen Birdseye                                                                                 */
/*******************************************************************************************************/

a.EntityCitizenry   { display:block; background-color: #7DD4A8; border-radius: 60px 60px 0 0; width:1000px; height:140px; margin:0 20px 10px 0; padding:10px 25px 10px 50px;
	                 font-family:Quicksand, sans-serif; font-weight:normal; font-size:16px; color:#000000; }
a.EntityCitizenry:hover, a.EntityCitizenry:active {  }
a.EntityCitizenry:visited, a.EntityCitizenry:link { color:#000000; }

a.EntityMajor   { display:block; background-color: #008B8B; border-radius: 10px; width:400px; height:180px; margin:0 10px 10px 0; padding:10px 10px 10px 20px;
	                 font-family:Quicksand, sans-serif; font-weight:normal; font-size:16px; color:#000000; }
a.EntityMajor:hover, a.EntityMajor:active {  }
a.EntityMajor:visited, a.EntityMajor:link { color:#000000; }

a.EntityPress   { display:block; background-color: #4682B4; border-radius: 10px; width:800px; height:80px; margin:10px 10px 10px 0; padding:10px 10px 10px 20px;
	                 font-family:Quicksand, sans-serif; font-weight:normal; font-size:16px; color:#000000; }
a.EntityPress:hover, a.EntityPress:active {  }
a.EntityPress:visited, a.EntityPress:link { color:#000000; }

a.EntityParties   { display:block; background-color: #4682B4; border-radius: 10px; width:180px; height:100px; margin:10px 10px 10px 0; padding:10px 10px 10px 20px;
	                 font-family:Quicksand, sans-serif; font-weight:normal; font-size:16px; color:#000000; }
a.EntityParties:hover, a.EntityParties:active {  }
a.EntityParties:visited, a.EntityParties:link { color:#000000; }


/*******************************************************************************************************/
/*   Productive Economy                                                                                */
/*******************************************************************************************************/

a.ProdEconomy { display:block; width:756px; height:260px; margin:2px; padding:2px; border:1px solid green; background-color:#B6E7B6; font-family:Quicksand, sans-serif; font-size:12px; text-align:left; color:#000000;  }

a.UnprodFullSlice { display:block; width:502px; height:64px; margin-right:2px; margin-bottom:2px; padding:2px; border:1px solid red; background-color:#FFFFB8;
    font-family:Quicksand, sans-serif; font-size:12px; text-align:left; color:#000000;  }
a.UnprodHalfSlice { display:block; width:246px; height:32px; margin-right:2px; margin-bottom:2px; padding:2px; border:1px solid red; background-color:#FFFFB8;
    font-family:Quicksand, sans-serif; font-size:12px; text-align:left; color:#000000;  }

p.SliceAmount    { width:40px; height:16px; margin:auto; padding:2px; border:none; background-color:#C9EDC9; font-family:Quicksand, sans-serif; font-weight:normal; font-size:12px; color:#007DD1;  }


/*******************************************************************************************************/
/*   Voices Grid                                                                                         */
/*******************************************************************************************************/


.VoicesGrid   { display:grid ;
                grid-template-rows: 30px auto auto auto; grid-template-columns: 30px 1fr 1fr 1fr; grid-gap: 8px ;
                align-content:flex-start; font-family:Quicksand, sans-serif; font-size:12px; text-align:center; color:#000000;            }
.VoicesGridX1   { grid-row: 1 / 2; grid-column: 2 / 3; width:100%; height:100%; padding: 2px; background-color:#ffffff;  }
.VoicesGridX2   { grid-row: 1 / 2; grid-column: 3 / 4; width:100%; height:100%; padding: 2px; background-color:#ffffff;  }
.VoicesGridX3   { grid-row: 1 / 2; grid-column: 4 / 5; width:100%; height:100%; padding: 2px; background-color:#ffffff;  }
.VoicesGridY1   { grid-row: 2 / 3; grid-column: 1 / 2; width:100%; height:100%; padding: 2px; background-color:#ffffff;  }
.VoicesGridY2   { grid-row: 3 / 4; grid-column: 1 / 2; width:100%; height:100%; padding: 2px; background-color:#ffffff;  }
.VoicesGridY3   { grid-row: 4 / 5; grid-column: 1 / 2; width:100%; height:100%; padding: 2px; background-color:#ffffff;  }

.VoicesGrid1   { grid-row: 2 / 3; grid-column: 2 / 3; width:100%; height:100%; padding: 2px; background-color:#F5F5F5;  }
.VoicesGrid2   { grid-row: 2 / 3; grid-column: 3 / 4; width:100%; height:100%; padding: 2px; background-color:#F5F5F5;  }
.VoicesGrid3   { grid-row: 2 / 3; grid-column: 4 / 5; width:100%; height:100%; padding: 2px; background-color:#F5F5F5;   }
.VoicesGrid4   { grid-row: 3 / 4; grid-column: 2 / 3; width:100%; height:100%; padding: 2px; background-color:#F5F5F5;   }
.VoicesGrid5   { grid-row: 3 / 4; grid-column: 3 / 4; width:100%; height:100%; padding: 2px; background-color:#F5F5F5;   }
.VoicesGrid6   { grid-row: 3 / 4; grid-column: 4 / 5; width:100%; height:100%; padding: 2px; background-color:#F5F5F5;   }
.VoicesGrid7   { grid-row: 4 / 5; grid-column: 2 / 3; width:100%; height:100%; padding: 2px; background-color:#F5F5F5;   }
.VoicesGrid8   { grid-row: 4 / 5; grid-column: 3 / 4; width:100%; height:100%; padding: 2px; background-color:#F5F5F5;   }
.VoicesGrid9   { grid-row: 4 / 5; grid-column: 4 / 5; width:100%; height:100%; padding: 2px; background-color:#F5F5F5;   }

a.VoiceNew   { display:inline-block; width:50px; height:50px; margin:2px; padding:2px; border:3px solid black; background-color:#FFFF75; vertical-align:top; font-family:Quicksand, sans-serif; font-weight:normal; font-size:11px; color:#ffffff; }
a.VoiceNew:hover, a.VoiceNew:active {  }
a.VoiceNew:visited, a.VoiceNew:link { color:#ffffff; }

a.VoiceProtected   { display:inline-block; width:50px; height:50px; margin:2px; padding:2px; border:3px solid black; background-color:#D9D9D9; vertical-align:top; font-family:Quicksand, sans-serif; font-weight:normal; font-size:11px; color:#ffffff; }
a.VoiceProtected:hover, a.VoiceProtected:active {  }
a.VoiceProtected:visited, a.VoiceProtected:link { color:#ffffff; }

a.VoiceNormal   { display:inline-block; width:50px; height:50px; margin:2px; padding:2px; border:3px solid black; background-color:#E5F5FF; vertical-align:top; font-family:Quicksand, sans-serif; font-weight:normal; font-size:9px; color:#000000; }
a.VoiceNormal:hover, a.VoiceNormal:active {  }
a.VoiceNormal:visited, a.VoiceNormal:link { color:#000000; }

.VoicePopup     { position:fixed; z-index:101; background:#E5F5FF; top:200px; left:120px; height:410px; width:1200px; border:3px solid black; padding:10px;  }

.VoicePopupGrid   { display:grid; grid-template-rows:200px 200px; grid-template-columns:1fr 1fr; grid-gap:10px; align-content:flex-start;
                        font-family:Quicksand, sans-serif; font-size:12px; text-align:center; color:#000000;            }
.VoicePopupGrid1   { grid-row: 1 / 2; grid-column: 1 / 2; width:95%; height:90%; padding: 10px; text-align:left; background-color:#F5FBFF;  }
.VoicePopupGrid2   { grid-row: 1 / 2; grid-column: 2 / 3; width:95%; height:90%; padding: 10px; text-align:left; background-color:#F5FBFF;  }
.VoicePopupGrid3   { grid-row: 2 / 3; grid-column: 1 / 2; width:95%; height:90%; padding: 10px; background-color:#F5FBFF;  }
.VoicePopupGrid4   { grid-row: 2 / 3; grid-column: 2 / 3; width:95%; height:90%; padding: 10px; background-color:#F5FBFF;  }