#DemoContent
{
    display: -ms-box;
}

#Example
{
    margin-right: 30px;
}

#controls
{
    display: -ms-grid;
    -ms-grid-columns: auto 40px 130px 130px 130px 130px;
}

#controls .ControlRow
{
    margin-bottom: 10px;
}

#Example #ExampleContent
{
    position: relative;
}

#Example iframe
{
    display: none;
}
#Example[containerType="element"][design="simple"] iframe
{
    width: 100%;
    height: 100%;
    display: block !important;
}

#Example .Region
{
    width: 100%;
    height: 100%;
}

#Example[design="simple"][size="small"] #ExampleContent
{
    width: 50%;
}

#Example[design="complex"][size="small"] #ExampleContent
{
    width: 70%;
}

#Example[containerType="element"][design="simple"] .Region
{
    display: none;
}

#IFrameRegionContainer, .Region
{
    border: 1px solid gray;
}

#Example .RegionToggle
{
    visibility: hidden;
}

#Example[containerType="region"] .RegionToggle
{
    visibility: visible !important;
}

#Example[containerType="region"] .RegionToggle:hover
{
    text-decoration: none;
}

#Example[design="simple"][size="large"] #RegionContainer2,
#Example[design="simple"] #RegionContainer3,
#Example[design="simple"] #RegionContainer4,
#Example[design="simple"] #RegionContainer5,
#Example[design="simple"] #RegionContainer6,
#Example[design="simple"] #RegionContainer7,
#Example[design="simple"] #RegionContainer8,
#Example[design="simple"] #RegionContainer9,
#Example[design="simple"] #RegionContainer10
{
    display: none;
}

#Example[design="complex"] #Grid1
{
    display: -ms-grid;
    width: 100%;
    height: 100%;
    -ms-grid-columns: 3fr 1fr 4fr;
    -ms-grid-rows: 16fr 3fr 8fr 3fr 8fr 3fr 16fr;
}

.RegionContainer
{
    position: relative;
}

#Example[design="complex"] #RegionContainer1, #Example[design="complex"] #RegionContainer6
{
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    
}

#Example[design="complex"] #RegionContainer2, #Example[design="complex"] #RegionContainer7
{
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    -ms-grid-row-span: 3;
}

#Example[design="complex"] #RegionContainer3, #Example[design="complex"] #RegionContainer8
{
    -ms-grid-column: 1;
    -ms-grid-row: 7;
}

#Example[design="complex"] #RegionContainer4, #Example[design="complex"] #RegionContainer9
{
    -ms-grid-column: 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
}

#Example[design="complex"] #RegionContainer5, #Example[design="complex"] #RegionContainer10
{
    -ms-grid-column: 3;
    -ms-grid-row: 5;
    -ms-grid-row-span: 3;
}
    
.RegionContainer[active=false]
{
    left: -10000px !important;
}

.Region
{
    font-family: 'Segoe UI' , sans-serif;
    font-size: 12px;
    top: 0px;
    text-align: justify;
    -ms-hyphens: auto;
}

#Example[containerType="element"][size="small"] .Region
{
    overflow: scroll;
}


.Region p
{
    padding-right: 8px;
    padding-left: 8px;
    padding-bottom: 8px;
}

#RegionContainer1 p
{
    padding-top: 8px;
}

.Overlay
{
    opacity: 0.4;
}

#Example[design="simple"] .Overlay
{
    font-size: 250px;
}

#Example[design="complex"] .Overlay
{
    font-size: 100px;
}

#Example[design="simple"][containerType="element"] .Overlay
{
    display: none !important;
}

#Example[containerType="region"][size="small"][design="simple"] #RegionContainer1
{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 500px;
}


#Example[containerType="region"][size="small"][design="simple"] #RegionContainer2
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    height: 500px;
}

#Example[containerType="region"][size="large"][design="simple"] #RegionContainer1
{
    width: 100%;
    height: 100%;
    display: block;
}

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

.Markup .Source:before
{
    content: "Content source:";   
}

.Markup .Content:before
{
    content: "Content container(s):";   
}

#Example[containerType="element"] + #controls .Markup.region
{
    display: none !important;
}

#Example[design="simple"] + #controls .Markup .complex
{
    display: none !important;
}

#Example[design="complex"] + #controls .Markup .simple
{
    display: none !important;
}

#Example[containerType="region"] + #controls .Markup .element
{
    display: none !important;
}

#Example[containerType="element"] + #controls .Markup .region
{
    display: none !important;
}

#Example[size="large"] + #controls .Markup .small
{
    display: none !important;
}

#Example[size="small"] + #controls .Markup .large
{
    display: none !important;
}

.FlowProperties
{
    color: rgb(0,135,255);
}