#DemoContent
{
    display: -ms-flexbox;
}

#ControlContainer
{
    margin-left: 30px;
}

#FlexContainer div
{
    margin: 0px;
}

#FlexContainer div:nth-child(odd)
{
    background: rgb(0,225,0) !important;
}

.ControlRow
{
    margin-bottom: 10px;
}

.upIcon, .downIcon
{
    vertical-align: text-bottom !important;
}

.upIcon
{
    margin-left: 5px;
}

#Tabs
{
    display: -ms-flexbox;
    width: 100%;
}

.Tab
{
    border: 1px solid black;
    padding: 2px 8px 2px 8px;
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #E3E3E3 100%);
}

.Tab a:hover
{
    text-decoration: none;
}

.Tab[active="true"]
{
    border-bottom-color: transparent !important;
    background-image: none !important;
}

.TabSpacer
{
    width: 1em;
    border-bottom: 1px solid black;
}

.TabEnd
{
    border-bottom: 1px solid black;
    -ms-box-flex: 1;
    -ms-flex: 1 auto;
}

#DemoOptionsControl, #FlexboxPropertiesControl, #SamplesControl
{
    display: -ms-grid;
    -ms-grid-columns: auto 200px auto;   
}

/* hide the inactive controls offscreen. I would prefer to set this to display: none, but that breaks some of the control sizing logic that I am reusing */
.ControlGroup[active="false"]
{
    position: absolute;
    left: -10000px;
    top: 0px;
}

#controls
{
    margin-top: 30px;
}

.Markup
{
	font-family: Consolas, monospace;
	padding: 2px 8px;
	background-color: #e0e0e0;
	margin-top: 20px;
	line-height: 1.5em;
}
.Markup p
{
    padding: 0;
}

.Markup p a
{
    color: black;
}
.Markup p a:hover
{
    color: black;
}
.Markup p a:active
{
    color: black;
}
.Markup p a:visited
{
    color: black;
}

.Indent
{
    padding-left: 20px !important;
}

.Markup p[active="false"] a
{
    color: #808080 !important;
}

.Markup p[active]:hover
{
    text-decoration: underline;
}

.Markup p[active="true"]
{
    font-weight: bold;
}