.sg-list{ 
	margin:0 0 1em 0;
	}
.sg-list li{
	list-style: disc;
	margin:0 0 .5em 2em;
	}
.sg p{
	margin:0 0 1em 0;
	}

.sg-section{ min-height:100%;}
.sg-section:first-child{ padding-top: 0;}
/* .sg p{ font-size:1.2em; display:block;} */
.sg h1{ margin-bottom:1em; margin-top:4em;}
.sg h2{ font-size:1.2em; font-weight:600; margin-bottom:1em; padding-top:1em; }

/* Guide Table of Contents */

.menu ul{ margin: 0; padding: 0;}
.menu li{ margin: 0; padding: 0 0 8px 8px;}
.menu > ul > li{ padding: 0 0 8px 0;}
.menu > ul > li a { font-weight:600; }
.menu > ul > li > ul{ padding:8px 0 0 0;}
.menu > ul > li > ul a{ font-weight:300;}

/* For Code Display */

/* Component Example & Code Blocks */
.ex-title,
.pp-title{
	background: #333; 
	color: rgba(255, 255, 255, 0.8); 
	padding: 5px;
	width: 100%;
	display: block;
	}
.ex-content{ 
	padding:10px; 
	border:1px solid #333; 
	margin-bottom:1em;
	overflow:hidden;}
pre{ 
	overflow: auto; 
	border:1px solid black; 
	padding:120px; 
	font-family:'Source Code Pro';
	background:#333;
	}
.prettyprint{ margin-bottom:1em;}

/* remove some styling from items when used in examples, such as absolute positioning and excess margins*/
.sg .network-bar{ 
	position: relative;
	}
.ex-content h1, .ex-content h2, .ex-content h3{ margin:0 0 20px 0; padding:0;}

/* Syntax Highlighting - powered by prettify.js */
pre.prettyprint { display: block; background-color: #333 }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string  - pink */
pre .kwd { color: #f0e68c; }
pre .com { color: rgba(197, 212, 218, 0.57); } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type    - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #DFEEF6 }    /* punctuation */
pre .pln { color: #DFEEF6 }    /* plaintext */
pre .tag { color: #69AAC9; } /* html/xml tag    - lightyellow */
pre .atn { color: #A9CDDE; } /* attribute name  - khaki */
pre .atv { color: #F7E4AD } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal         - lightgreen */

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre.prettyprint { background-color: none }
  pre .str, code .str { color: #060 }
  pre .kwd, code .kwd { color: #006; font-weight: bold }
  pre .com, code .com { color: #600; font-style: italic }
  pre .typ, code .typ { color: #404; font-weight: bold }
  pre .lit, code .lit { color: #044 }
  pre .pun, code .pun { color: #440 }
  pre .pln, code .pln { color: #000 }
  pre .tag, code .tag { color: #006; font-weight: bold }
  pre .atn, code .atn { color: #404 }
  pre .atv, code .atv { color: #060 }
}

.menu a.active{ color:black; border-bottom:1px solid black;}
.active-parent{ background:white; border:1px solid black;}
.active2{ background:red;}

/* Colorize Grid for demonstration purposes */

.example .fixed-a,
.example .col-flex,
.example .fixed-b,
.example .col-flex .col-flex--interior{ height:200px;}
.example .row{ border:1px solid black; }
.example .fixed-a{ background: rgba(0, 0, 0,  .2); }
.example .col-flex { background: rgba(0, 0, 0, .2);}
.example .col-flex .col-flex--interior{ background: rgba(0, 0, 0,  .2);}
.example .fixed-b{ background: rgba(0, 0, 0,  .2);}

.ex-d2{ overflow:hidden;}
.ex-d2 .excerpt--d2{ white-space: nowrap;}
.ex-d2 .excerpt--title{ white-space: pre-wrap;}