wijsuperpanel Step 1 of 3: Setting up the View

In this step you’ll add the markup to add content to the superpanel. Complete the following:

In Visual studio, select File | New | Project.
Under Installed Templates, select Visual C#. .NET Framework 4 or above.
Select C1 ASP.NET MVC 5 Web Application (if you haven’t installed this, see Installing the MVC Classic Template), enter a name for the application, and click OK.
Your Wijmo project is created. You’ll notice it contains the Models, Views, and Controllers folders, which we will work with in the MVC Classic tutorials.
In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.

Add the following markup within the <body> tags of the page. This markup will style superpanel2 and superpanel3.

<style type="text/css">
        #superPanel2, #superPanel3
        {
            width: 600px;
            height: 200px;
            margin: 10px 0;
        }
        .elements ul
        {
            padding: 8px 0 0 8px;
            margin: 0px;
            width: 840px;
            float: left;
        }
       
        .elements ul li
        {
            background: #fff;
            color: #fff;
            font-weight: 900;
            height: 70px;
            margin: 0 8px 8px 0;
            padding: 0;
            padding-top: 62px;
            position: relative;
            text-align: center;
            width: 132px;
            text-shadow: 1px 1px 2px #000000;
        }
       
        .elements li
        {
            float: left;
            list-style: none;
        }
    </style>

Add the following markup within the <body> tags of the page. This markup will add the background style to each of the elements within the two superpanels.

<div class="main demo">
    <!-- Begin demo markup -->
    <div id="superPanel2">
        <div class="elements">
            <ul>
                <li style="background: activeborder;"><span>ActiveBorder</span></li>
                <li style="background: activecaption;"><span>ActiveCaption</span></li>
                <li style="background: captiontext;"><span>ActiveCaptionText</span></li>
                <li style="background: appworkspace;"><span>AppWorkspace</span></li>
                <li style="background: buttonface;"><span>Control</span></li>
                <li style="background: buttonshadow;"><span>ControlDark</span></li>
                <li style="background: threeddarkshadow;"><span>ControlDarkDark</span></li>
                <li style="background: buttonface;"><span>ControlLight</span></li>
                <li style="background: buttonhighlight;"><span>ControlLightLight</span></li>
                <li style="background: buttontext;"><span>ControlText</span></li>
                <li style="background: background;"><span>Desktop</span></li>
                <li style="background: graytext;"><span>GrayText</span></li>
                <li style="background: highlight;"><span>Highlight</span></li>
                <li style="background: highlighttext;"><span>HighlightText</span></li>
                <li style="background: highlight;"><span>HotTrack</span></li>
                <li style="background: inactiveborder;"><span>InactiveBorder</span></li>
                <li style="background: inactivecaption;"><span>InactiveCaption</span></li>
                <li style="background: inactivecaptiontext;"><span>InactiveCaptionText</span></li>
                <li style="background: infobackground;"><span>Info</span></li>
                <li style="background: infotext;"><span>InfoText</span></li>
                <li style="background: menu;"><span>Menu</span></li>
                <li style="background: menutext;"><span>MenuText</span></li>
                <li style="background: scrollbar;"><span>ScrollBar</span></li>
                <li style="background: window;"><span>Window</span></li>
                <li style="background: windowframe;"><span>WindowFrame</span></li>
                <li style="background: windowtext;"><span>WindowText</span></li>
                <li style="background: Transparent;"><span>Transparent</span></li>
                <li style="background: AliceBlue;"><span>AliceBlue</span></li>
                <li style="background: AntiqueWhite;"><span>AntiqueWhite</span></li>
                <li style="background: Aqua;"><span>Aqua</span></li>
                <li style="background: Aquamarine;"><span>Aquamarine</span></li>
                <li style="background: Azure;"><span>Azure</span></li>
                <li style="background: Beige;"><span>Beige</span></li>
                <li style="background: Bisque;"><span>Bisque</span></li>
                <li style="background: Black;"><span>Black</span></li>
                <li style="background: BlanchedAlmond;"><span>BlanchedAlmond</span></li>
                <li style="background: Blue;"><span>Blue</span></li>
                <li style="background: BlueViolet;"><span>BlueViolet</span></li>
                <li style="background: Brown;"><span>Brown</span></li>
                <li style="background: BurlyWood;"><span>BurlyWood</span></li>
                <li style="background: CadetBlue;"><span>CadetBlue</span></li>
                <li style="background: Chartreuse;"><span>Chartreuse</span></li>
                <li style="background: Chocolate;"><span>Chocolate</span></li>
                <li style="background: Coral;"><span>Coral</span></li>
                <li style="background: CornflowerBlue;"><span>CornflowerBlue</span></li>
                <li style="background: Cornsilk;"><span>Cornsilk</span></li>
                <li style="background: Crimson;"><span>Crimson</span></li>
                <li style="background: Cyan;"><span>Cyan</span></li>
                <li style="background: DarkBlue;"><span>DarkBlue</span></li>
                <li style="background: DarkCyan;"><span>DarkCyan</span></li>
                <li style="background: DarkGoldenrod;"><span>DarkGoldenrod</span></li>
                <li style="background: DarkGray;"><span>DarkGray</span></li>
                <li style="background: DarkGreen;"><span>DarkGreen</span></li>
                <li style="background: DarkKhaki;"><span>DarkKhaki</span></li>
                <li style="background: DarkMagenta;"><span>DarkMagenta</span></li>
                <li style="background: DarkOliveGreen;"><span>DarkOliveGreen</span></li>
                <li style="background: DarkOrange;"><span>DarkOrange</span></li>
                <li style="background: DarkOrchid;"><span>DarkOrchid</span></li>
                <li style="background: DarkRed;"><span>DarkRed</span></li>
                <li style="background: DarkSalmon;"><span>DarkSalmon</span></li>
                <li style="background: DarkSeaGreen;"><span>DarkSeaGreen</span></li>
                <li style="background: DarkSlateBlue;"><span>DarkSlateBlue</span></li>
                <li style="background: DarkSlateGray;"><span>DarkSlateGray</span></li>
                <li style="background: DarkTurquoise;"><span>DarkTurquoise</span></li>
                <li style="background: DarkViolet;"><span>DarkViolet</span></li>
                <li style="background: DeepPink;"><span>DeepPink</span></li>
                <li style="background: DeepSkyBlue;"><span>DeepSkyBlue</span></li>
                <li style="background: DimGray;"><span>DimGray</span></li>
                <li style="background: DodgerBlue;"><span>DodgerBlue</span></li>
                <li style="background: Firebrick;"><span>Firebrick</span></li>
                <li style="background: FloralWhite;"><span>FloralWhite</span></li>
                <li style="background: ForestGreen;"><span>ForestGreen</span></li>
                <li style="background: Fuchsia;"><span>Fuchsia</span></li>
                <li style="background: Gainsboro;"><span>Gainsboro</span></li>
                <li style="background: GhostWhite;"><span>GhostWhite</span></li>
                <li style="background: Gold;"><span>Gold</span></li>
                <li style="background: Goldenrod;"><span>Goldenrod</span></li>
                <li style="background: Gray;"><span>Gray</span></li>
                <li style="background: Green;"><span>Green</span></li>
                <li style="background: GreenYellow;"><span>GreenYellow</span></li>
                <li style="background: Honeydew;"><span>Honeydew</span></li>
                <li style="background: HotPink;"><span>HotPink</span></li>
                <li style="background: IndianRed;"><span>IndianRed</span></li>
                <li style="background: Indigo;"><span>Indigo</span></li>
                <li style="background: Ivory;"><span>Ivory</span></li>
                <li style="background: Khaki;"><span>Khaki</span></li>
                <li style="background: Lavender;"><span>Lavender</span></li>
                <li style="background: LavenderBlush;"><span>LavenderBlush</span></li>
                <li style="background: LawnGreen;"><span>LawnGreen</span></li>
                <li style="background: LemonChiffon;"><span>LemonChiffon</span></li>
                <li style="background: LightBlue;"><span>LightBlue</span></li>
                <li style="background: LightCoral;"><span>LightCoral</span></li>
                <li style="background: LightCyan;"><span>LightCyan</span></li>
                <li style="background: LightGoldenrodYellow;"><span>LightGoldenrodYellow</span></li>
                <li style="background: LightGrey;"><span>LightGray</span></li>
                <li style="background: LightGreen;"><span>LightGreen</span></li>
                <li style="background: LightPink;"><span>LightPink</span></li>
                <li style="background: LightSalmon;"><span>LightSalmon</span></li>
                <li style="background: LightSeaGreen;"><span>LightSeaGreen</span></li>
                <li style="background: LightSkyBlue;"><span>LightSkyBlue</span></li>
                <li style="background: LightSlateGray;"><span>LightSlateGray</span></li>
                <li style="background: LightSteelBlue;"><span>LightSteelBlue</span></li>
                <li style="background: LightYellow;"><span>LightYellow</span></li>
                <li style="background: Lime;"><span>Lime</span></li>
                <li style="background: LimeGreen;"><span>LimeGreen</span></li>
                <li style="background: Linen;"><span>Linen</span></li>
                <li style="background: Magenta;"><span>Magenta</span></li>
                <li style="background: Maroon;"><span>Maroon</span></li>
                <li style="background: MediumAquamarine;"><span>MediumAquamarine</span></li>
                <li style="background: MediumBlue;"><span>MediumBlue</span></li>
                <li style="background: MediumOrchid;"><span>MediumOrchid</span></li>
                <li style="background: MediumPurple;"><span>MediumPurple</span></li>
                <li style="background: MediumSeaGreen;"><span>MediumSeaGreen</span></li>
                <li style="background: MediumSlateBlue;"><span>MediumSlateBlue</span></li>
                <li style="background: MediumSpringGreen;"><span>MediumSpringGreen</span></li>
                <li style="background: MediumTurquoise;"><span>MediumTurquoise</span></li>
                <li style="background: MediumVioletRed;"><span>MediumVioletRed</span></li>
                <li style="background: MidnightBlue;"><span>MidnightBlue</span></li>
                <li style="background: MintCream;"><span>MintCream</span></li>
                <li style="background: MistyRose;"><span>MistyRose</span></li>
                <li style="background: Moccasin;"><span>Moccasin</span></li>
                <li style="background: NavajoWhite;"><span>NavajoWhite</span></li>
                <li style="background: Navy;"><span>Navy</span></li>
                <li style="background: OldLace;"><span>OldLace</span></li>
                <li style="background: Olive;"><span>Olive</span></li>
                <li style="background: OliveDrab;"><span>OliveDrab</span></li>
                <li style="background: Orange;"><span>Orange</span></li>
                <li style="background: OrangeRed;"><span>OrangeRed</span></li>
                <li style="background: Orchid;"><span>Orchid</span></li>
                <li style="background: PaleGoldenrod;"><span>PaleGoldenrod</span></li>
                <li style="background: PaleGreen;"><span>PaleGreen</span></li>
                <li style="background: PaleTurquoise;"><span>PaleTurquoise</span></li>
                <li style="background: PaleVioletRed;"><span>PaleVioletRed</span></li>
                <li style="background: PapayaWhip;"><span>PapayaWhip</span></li>
                <li style="background: PeachPuff;"><span>PeachPuff</span></li>
                <li style="background: Peru;"><span>Peru</span></li>
                <li style="background: Pink;"><span>Pink</span></li>
                <li style="background: Plum;"><span>Plum</span></li>
                <li style="background: PowderBlue;"><span>PowderBlue</span></li>
                <li style="background: Purple;"><span>Purple</span></li>
                <li style="background: Red;"><span>Red</span></li>
                <li style="background: RosyBrown;"><span>RosyBrown</span></li>
                <li style="background: RoyalBlue;"><span>RoyalBlue</span></li>
                <li style="background: SaddleBrown;"><span>SaddleBrown</span></li>
                <li style="background: Salmon;"><span>Salmon</span></li>
                <li style="background: SandyBrown;"><span>SandyBrown</span></li>
                <li style="background: SeaGreen;"><span>SeaGreen</span></li>
                <li style="background: SeaShell;"><span>SeaShell</span></li>
                <li style="background: Sienna;"><span>Sienna</span></li>
                <li style="background: Silver;"><span>Silver</span></li>
                <li style="background: SkyBlue;"><span>SkyBlue</span></li>
                <li style="background: SlateBlue;"><span>SlateBlue</span></li>
                <li style="background: SlateGray;"><span>SlateGray</span></li>
                <li style="background: Snow;"><span>Snow</span></li>
                <li style="background: SpringGreen;"><span>SpringGreen</span></li>
                <li style="background: SteelBlue;"><span>SteelBlue</span></li>
                <li style="background: Tan;"><span>Tan</span></li>
                <li style="background: Teal;"><span>Teal</span></li>
                <li style="background: Thistle;"><span>Thistle</span></li>
                <li style="background: Tomato;"><span>Tomato</span></li>
                <li style="background: Turquoise;"><span>Turquoise</span></li>
                <li style="background: Violet;"><span>Violet</span></li>
                <li style="background: Wheat;"><span>Wheat</span></li>
                <li style="background: White;"><span>White</span></li>
                <li style="background: WhiteSmoke;"><span>WhiteSmoke</span></li>
                <li style="background: Yellow;"><span>Yellow</span></li>
                <li style="background: YellowGreen;"><span>YellowGreen</span></li>
                <li style=""><span>ButtonFace</span></li>
                <li style=""><span>ButtonHighlight</span></li>
                <li style=""><span>ButtonShadow</span></li>
                <li style="background: activecaption;"><span>GradientActiveCaption</span></li>
                <li style="background: inactivecaption;"><span>GradientInactiveCaption</span></li>
                <li style="background: menu;"><span>MenuBar</span></li>
                <li style="background: highlighttext;"><span>MenuHighlight</span></li>
            </ul>
        </div>
    </div>
  
    <div id="superPanel3">
        <div class="elements">
            <ul>
                <li style="background: activeborder;"><span>ActiveBorder</span></li>
                <li style="background: activecaption;"><span>ActiveCaption</span></li>
                <li style="background: captiontext;"><span>ActiveCaptionText</span></li>
                <li style="background: appworkspace;"><span>AppWorkspace</span></li>
                <li style="background: buttonface;"><span>Control</span></li>
                <li style="background: buttonshadow;"><span>ControlDark</span></li>
                <li style="background: threeddarkshadow;"><span>ControlDarkDark</span></li>
                <li style="background: buttonface;"><span>ControlLight</span></li>
                <li style="background: buttonhighlight;"><span>ControlLightLight</span></li>
                <li style="background: buttontext;"><span>ControlText</span></li>
                <li style="background: background;"><span>Desktop</span></li>
                <li style="background: graytext;"><span>GrayText</span></li>
                <li style="background: highlight;"><span>Highlight</span></li>
                <li style="background: highlighttext;"><span>HighlightText</span></li>
                <li style="background: highlight;"><span>HotTrack</span></li>
                <li style="background: inactiveborder;"><span>InactiveBorder</span></li>
                <li style="background: inactivecaption;"><span>InactiveCaption</span></li>
                <li style="background: inactivecaptiontext;"><span>InactiveCaptionText</span></li>
                <li style="background: infobackground;"><span>Info</span></li>
                <li style="background: infotext;"><span>InfoText</span></li>
                <li style="background: menu;"><span>Menu</span></li>
                <li style="background: menutext;"><span>MenuText</span></li>
                <li style="background: scrollbar;"><span>ScrollBar</span></li>
                <li style="background: window;"><span>Window</span></li>
                <li style="background: windowframe;"><span>WindowFrame</span></li>
                <li style="background: windowtext;"><span>WindowText</span></li>
                <li style="background: Transparent;"><span>Transparent</span></li>
                <li style="background: AliceBlue;"><span>AliceBlue</span></li>
                <li style="background: AntiqueWhite;"><span>AntiqueWhite</span></li>
                <li style="background: Aqua;"><span>Aqua</span></li>
                <li style="background: Aquamarine;"><span>Aquamarine</span></li>
                <li style="background: Azure;"><span>Azure</span></li>
                <li style="background: Beige;"><span>Beige</span></li>
                <li style="background: Bisque;"><span>Bisque</span></li>
                <li style="background: Black;"><span>Black</span></li>
                <li style="background: BlanchedAlmond;"><span>BlanchedAlmond</span></li>
                <li style="background: Blue;"><span>Blue</span></li>
                <li style="background: BlueViolet;"><span>BlueViolet</span></li>
                <li style="background: Brown;"><span>Brown</span></li>
                <li style="background: BurlyWood;"><span>BurlyWood</span></li>
                <li style="background: CadetBlue;"><span>CadetBlue</span></li>
                <li style="background: Chartreuse;"><span>Chartreuse</span></li>
                <li style="background: Chocolate;"><span>Chocolate</span></li>
                <li style="background: Coral;"><span>Coral</span></li>
                <li style="background: CornflowerBlue;"><span>CornflowerBlue</span></li>
                <li style="background: Cornsilk;"><span>Cornsilk</span></li>
                <li style="background: Crimson;"><span>Crimson</span></li>
                <li style="background: Cyan;"><span>Cyan</span></li>
                <li style="background: DarkBlue;"><span>DarkBlue</span></li>
                <li style="background: DarkCyan;"><span>DarkCyan</span></li>
                <li style="background: DarkGoldenrod;"><span>DarkGoldenrod</span></li>
                <li style="background: DarkGray;"><span>DarkGray</span></li>
                <li style="background: DarkGreen;"><span>DarkGreen</span></li>
                <li style="background: DarkKhaki;"><span>DarkKhaki</span></li>
                <li style="background: DarkMagenta;"><span>DarkMagenta</span></li>
                <li style="background: DarkOliveGreen;"><span>DarkOliveGreen</span></li>
                <li style="background: DarkOrange;"><span>DarkOrange</span></li>
                <li style="background: DarkOrchid;"><span>DarkOrchid</span></li>
                <li style="background: DarkRed;"><span>DarkRed</span></li>
                <li style="background: DarkSalmon;"><span>DarkSalmon</span></li>
                <li style="background: DarkSeaGreen;"><span>DarkSeaGreen</span></li>
                <li style="background: DarkSlateBlue;"><span>DarkSlateBlue</span></li>
                <li style="background: DarkSlateGray;"><span>DarkSlateGray</span></li>
                <li style="background: DarkTurquoise;"><span>DarkTurquoise</span></li>
                <li style="background: DarkViolet;"><span>DarkViolet</span></li>
                <li style="background: DeepPink;"><span>DeepPink</span></li>
                <li style="background: DeepSkyBlue;"><span>DeepSkyBlue</span></li>
                <li style="background: DimGray;"><span>DimGray</span></li>
                <li style="background: DodgerBlue;"><span>DodgerBlue</span></li>
                <li style="background: Firebrick;"><span>Firebrick</span></li>
                <li style="background: FloralWhite;"><span>FloralWhite</span></li>
                <li style="background: ForestGreen;"><span>ForestGreen</span></li>
                <li style="background: Fuchsia;"><span>Fuchsia</span></li>
                <li style="background: Gainsboro;"><span>Gainsboro</span></li>
                <li style="background: GhostWhite;"><span>GhostWhite</span></li>
                <li style="background: Gold;"><span>Gold</span></li>
                <li style="background: Goldenrod;"><span>Goldenrod</span></li>
                <li style="background: Gray;"><span>Gray</span></li>
                <li style="background: Green;"><span>Green</span></li>
                <li style="background: GreenYellow;"><span>GreenYellow</span></li>
                <li style="background: Honeydew;"><span>Honeydew</span></li>
                <li style="background: HotPink;"><span>HotPink</span></li>
                <li style="background: IndianRed;"><span>IndianRed</span></li>
                <li style="background: Indigo;"><span>Indigo</span></li>
                <li style="background: Ivory;"><span>Ivory</span></li>
                <li style="background: Khaki;"><span>Khaki</span></li>
                <li style="background: Lavender;"><span>Lavender</span></li>
                <li style="background: LavenderBlush;"><span>LavenderBlush</span></li>
                <li style="background: LawnGreen;"><span>LawnGreen</span></li>
                <li style="background: LemonChiffon;"><span>LemonChiffon</span></li>
                <li style="background: LightBlue;"><span>LightBlue</span></li>
                <li style="background: LightCoral;"><span>LightCoral</span></li>
                <li style="background: LightCyan;"><span>LightCyan</span></li>
                <li style="background: LightGoldenrodYellow;"><span>LightGoldenrodYellow</span></li>
                <li style="background: LightGrey;"><span>LightGray</span></li>
                <li style="background: LightGreen;"><span>LightGreen</span></li>
                <li style="background: LightPink;"><span>LightPink</span></li>
                <li style="background: LightSalmon;"><span>LightSalmon</span></li>
                <li style="background: LightSeaGreen;"><span>LightSeaGreen</span></li>
                <li style="background: LightSkyBlue;"><span>LightSkyBlue</span></li>
                <li style="background: LightSlateGray;"><span>LightSlateGray</span></li>
                <li style="background: LightSteelBlue;"><span>LightSteelBlue</span></li>
                <li style="background: LightYellow;"><span>LightYellow</span></li>
                <li style="background: Lime;"><span>Lime</span></li>
                <li style="background: LimeGreen;"><span>LimeGreen</span></li>
                <li style="background: Linen;"><span>Linen</span></li>
                <li style="background: Magenta;"><span>Magenta</span></li>
                <li style="background: Maroon;"><span>Maroon</span></li>
                <li style="background: MediumAquamarine;"><span>MediumAquamarine</span></li>
                <li style="background: MediumBlue;"><span>MediumBlue</span></li>
                <li style="background: MediumOrchid;"><span>MediumOrchid</span></li>
                <li style="background: MediumPurple;"><span>MediumPurple</span></li>
                <li style="background: MediumSeaGreen;"><span>MediumSeaGreen</span></li>
                <li style="background: MediumSlateBlue;"><span>MediumSlateBlue</span></li>
                <li style="background: MediumSpringGreen;"><span>MediumSpringGreen</span></li>
                <li style="background: MediumTurquoise;"><span>MediumTurquoise</span></li>
                <li style="background: MediumVioletRed;"><span>MediumVioletRed</span></li>
                <li style="background: MidnightBlue;"><span>MidnightBlue</span></li>
                <li style="background: MintCream;"><span>MintCream</span></li>
                <li style="background: MistyRose;"><span>MistyRose</span></li>
                <li style="background: Moccasin;"><span>Moccasin</span></li>
                <li style="background: NavajoWhite;"><span>NavajoWhite</span></li>
                <li style="background: Navy;"><span>Navy</span></li>
                <li style="background: OldLace;"><span>OldLace</span></li>
                <li style="background: Olive;"><span>Olive</span></li>
                <li style="background: OliveDrab;"><span>OliveDrab</span></li>
                <li style="background: Orange;"><span>Orange</span></li>
                <li style="background: OrangeRed;"><span>OrangeRed</span></li>
                <li style="background: Orchid;"><span>Orchid</span></li>
                <li style="background: PaleGoldenrod;"><span>PaleGoldenrod</span></li>
                <li style="background: PaleGreen;"><span>PaleGreen</span></li>
                <li style="background: PaleTurquoise;"><span>PaleTurquoise</span></li>
                <li style="background: PaleVioletRed;"><span>PaleVioletRed</span></li>
                <li style="background: PapayaWhip;"><span>PapayaWhip</span></li>
                <li style="background: PeachPuff;"><span>PeachPuff</span></li>
                <li style="background: Peru;"><span>Peru</span></li>
                <li style="background: Pink;"><span>Pink</span></li>
                <li style="background: Plum;"><span>Plum</span></li>
                <li style="background: PowderBlue;"><span>PowderBlue</span></li>
                <li style="background: Purple;"><span>Purple</span></li>
                <li style="background: Red;"><span>Red</span></li>
                <li style="background: RosyBrown;"><span>RosyBrown</span></li>
                <li style="background: RoyalBlue;"><span>RoyalBlue</span></li>
                <li style="background: SaddleBrown;"><span>SaddleBrown</span></li>
                <li style="background: Salmon;"><span>Salmon</span></li>
                <li style="background: SandyBrown;"><span>SandyBrown</span></li>
                <li style="background: SeaGreen;"><span>SeaGreen</span></li>
                <li style="background: SeaShell;"><span>SeaShell</span></li>
                <li style="background: Sienna;"><span>Sienna</span></li>
                <li style="background: Silver;"><span>Silver</span></li>
                <li style="background: SkyBlue;"><span>SkyBlue</span></li>
                <li style="background: SlateBlue;"><span>SlateBlue</span></li>
                <li style="background: SlateGray;"><span>SlateGray</span></li>
                <li style="background: Snow;"><span>Snow</span></li>
                <li style="background: SpringGreen;"><span>SpringGreen</span></li>
                <li style="background: SteelBlue;"><span>SteelBlue</span></li>
                <li style="background: Tan;"><span>Tan</span></li>
                <li style="background: Teal;"><span>Teal</span></li>
                <li style="background: Thistle;"><span>Thistle</span></li>
                <li style="background: Tomato;"><span>Tomato</span></li>
                <li style="background: Turquoise;"><span>Turquoise</span></li>
                <li style="background: Violet;"><span>Violet</span></li>
                <li style="background: Wheat;"><span>Wheat</span></li>
                <li style="background: White;"><span>White</span></li>
                <li style="background: WhiteSmoke;"><span>WhiteSmoke</span></li>
                <li style="background: Yellow;"><span>Yellow</span></li>
                <li style="background: YellowGreen;"><span>YellowGreen</span></li>
                <li style=""><span>ButtonFace</span></li>
                <li style=""><span>ButtonHighlight</span></li>
                <li style=""><span>ButtonShadow</span></li>
                <li style="background: activecaption;"><span>GradientActiveCaption</span></li>
                <li style="background: inactivecaption;"><span>GradientInactiveCaption</span></li>
                <li style="background: menu;"><span>MenuBar</span></li>
                <li style="background: highlighttext;"><span>MenuHighlight</span></li>
            </ul>
        </div>
    </div>