#DemoContent
{
    display: -ms-flexbox;
}

#ControlContainer
{
    margin-left: 50px;
}

#Controls
{
    margin-top: 30px;
    clear: both;
}

/* 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;
}

#ContentGridLeftGutter
{
    border-right: 1px dotted gray;
}

#ContentGridTopGutter
{
    border-bottom: 1px dotted gray;
}

#Example
{
    width: 500px;
    height: 500px;
}

#ContentGrid
{
    width: 500px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    display: -ms-grid;
    border: 1px solid gray;
}

.ContentGridColumn
{
    border-right: 1px dotted gray;
}

.ContentGridRow
{
    border-bottom: 1px dotted gray;
}

.GridItemControl
{
    display: -ms-grid;
    -ms-grid-columns: 40px 170px 100px auto;
    margin-bottom: 20px;
}

.RowColumnControl
{
    display: -ms-grid;
    -ms-grid-columns: 40px 170px 100px auto;
    margin-bottom: 10px;
}

.GridSizeControl
{
    display: -ms-grid;
    -ms-grid-columns: 40px 170px 100px auto;
    margin-bottom: 20px;
}

.SectionLabel
{
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    margin-bottom: 10px;
}

.ColumnLabel
{
    -ms-grid-column: 3;
    -ms-grid-column-align: start;
}

.PropertyLabel
{
    -ms-grid-column: 2;
    margin-right:20px;
    margin-bottom: 10px;
}

.Property1
{
    -ms-grid-row: 1;
}

.Property2
{
    -ms-grid-row: 2;
}

.Property3
{
    -ms-grid-row: 3;
}

.Property4
{
    -ms-grid-row: 4;
}

.Property5
{
    -ms-grid-row: 5;
}

.Property6
{
    -ms-grid-row: 6;
}

.ColorSwab
{
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 6;
    width: 20px;
    opacity: 0.5;
}

#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;
}

a.Minus, a.Plus
{
    width: 16px;
    height: 16px;
    text-decoration: none;
    border: 1px solid #999;
    background-image: url("hands-on-icons.png");
}

a.Plus
{
    background-position: -48px 0px;
}
        
a.Minus
{
    background-position: -64px 0;
}

a.Minus:hover, a.Plus:hover
{
    background-color: gold;
}

.PlusMinusRow
{
    margin-bottom: 10px;
}

.PlusMinusTitle
{
    margin-right: 10px;
}

.PlusMinusIcon
{
    display: inline-block;
    vertical-align: bottom;
}

.PlusMinusContainer
{
    display: -ms-grid;
    -ms-grid-columns: 40px 170px 100px auto;
    margin-bottom: 20px;
}

.PlaceHolderContainer
{
    display: -ms-grid;
    -ms-grid-columns: 40px 170px 100px auto;
    margin-bottom: 20px;
}

.Placeholder
{
    height: 0px;
    visibility: hidden;
}
.Checkbox
{
    -ms-grid-column-align: start;
}
.Checkbox input[type=checkbox]
{
	top: 1px;
	margin-top: 3px;
	margin-right: 3px;
	margin-bottom: 3px;
	margin-left: 4px;
	position: relative;
}

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

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

.IndentTwice
{
    padding-left: 40px !important;
}

.Markup div[active=false]
{
    display: none;
}