/* -------------------------------------------------------------------------

 Style Guide Boilerplate
 Repo: https://github.com/bjankord/Style-Guide-Boilerplate
 Author: Brett Jankord
 License: MIT

---------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 Layout
---------------------------------------------------------------------------- */
/* http:/paulirish.com/2012/box-sizing-border-box-ftw/ */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
}

.sg-header {
  background: #000;
  color: #fff;
  zoom: 1;
  padding-bottom:30px;
}

@media screen and (max-width: 650px) {
  .sg-header {
   /* text-align: center;*/
  }
}


.sg-info,
.sg-base-styles {
  padding-bottom: 24px; /* For older browsers */
  padding-bottom: 2rem;
}


/* -------------------------------------------------------------------------
 Utility Classes
---------------------------------------------------------------------------- */
.sg-container {
  overflow: visible;
  padding: 16px 24px; /* For older browsers */
  padding: 1rem 1.5rem;
  
  padding-bottom:37px;
  
}

.sg-animated {
  -webkit-transition: all 0.6s ease-out;
     -moz-transition: all 0.6s ease-out;
      -ms-transition: all 0.6s ease-out;
       -o-transition: all 0.6s ease-out;
          transition: all 0.6s ease-out;
}


/* -------------------------------------------------------------------------
 Modules
---------------------------------------------------------------------------- */

/* Branding
---------------------------------------------------------------------------- */
.sg-logo {
  float: left;
  font-size: 1.5em;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

  .sg-logo span {
    font-weight: bold;
  }

@media screen and (max-width: 650px) {
  .sg-logo {
   /* float: none;
    padding-bottom: .5em;
    text-align: center;*/
  }
}

/* Navigation
---------------------------------------------------------------------------- */
.sg-nav{
  float: right;
}

.js .sg-submit-btn {
  display: none;
}

.operamini .sg-nav {
  display: none;
}

@media screen and (max-width: 650px) {
  .sg-nav{
  /*  display: inline;
    float: none;*/
  }
}

/* Headings
---------------------------------------------------------------------------- */
.sg-h1,
.sg-h2,
.sg-h3 {
  font-family: sans-serif;
  font-weight: normal;
  margin-bottom: 1em;
  margin-top: 0;
}

.sg-h1 {
  font-size: 1.75em;
  font-weight: bold;
  padding-bottom: .2em;
}

.sg-h2 {
  border-bottom: 2px solid #ddd;
  font-size: 1.5em;
  margin-bottom: .5em;
  
}

.sg-h3 {
  font-size: 1.2em;
}


/* Buttons
---------------------------------------------------------------------------- */
.sg-btn {
  background: #cbcbcb;
  color: #222;
  float: left;
  padding: .5em 1em;
  text-decoration: none;
}

.sg-btn--top {
  float: right;
}

.sg-btn--select {
/*  border-radius: 0 0.3em;*/
  position: absolute;
  right: 0px;
  top: 0px;
}

.sg-btn--select.is-active:hover:after{
  background:#111;
  background:rgba(0,0,0,.8);
  border-radius:5px;
  top:45px;
  color:#fff;
  content:"Selected code ready to be copied";
  font-size: .8em;
  display:block;
  right:5px;
  padding:5px 15px;
  position:absolute;
  white-space:nowrap;
  z-index:98
}

.sg-btn--select.is-active:hover:before{
  border:solid;
  border-color:#111 transparent;
  border-width:0 6px 6px 6px;
  top:40px;
  content:"";
  display:block;
  left:75%;
  position:absolute;
  z-index:99
}

/* Hide specific buttons for use with JS */
.sg-btn--source,
.sg-btn--select {
  display: none;
}

/* Show specific buttons if JS enabled */
.js .sg-btn--source,
.js .sg-btn--select {
  display: block;
}

/* Hide specific buttons conditionally */
.operamini .sg-btn--source,
.legacy .sg-btn--source {
  display: none;
}

.sg-btn.sg-btn--source#sg-btn--source {
	background-color:#000000;
	color:#ffffff;
	text-decoration:none;
}
.sg-btn.sg-btn--source#sg-btn--source:hover {
	text-decoration:underline;
}


.sg-btn.sg-btn--select#sg-btn--select {
	background-color:#ffffff;
	color:#000000;
	text-decoration:none;
	
	top:14px;
	right:14px;
}
.sg-btn.sg-btn--select#sg-btn--select:hover {
	text-decoration:underline;
}


/* Sections
---------------------------------------------------------------------------- */
.sg-section {
	/* For older browsers */
 /* margin-bottom: 32px; 
  margin-bottom: 3rem;
  
  overflow: hidden;
  */
}

  .sg-anchor {
    display: block;
    /*padding-top: 1em;*/
  }


/* Colors
---------------------------------------------------------------------------- */
.sg-color {
  background: #fff;
  border: 1px solid #bbb;
  display: inline-block;
  height: 89px;
  margin: 0 .5em .5em 0;
  padding: 5px;
  position: relative;
  width: 89px;
}

.sg-color-swatch {
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
}

.sg-color-swatch span {
  background: #000;
  background: rgba(0,0,0,.7);
  bottom: 0;
  color: #fff;
  font-size: .8em;
  margin: 0;
  opacity: 0;
  padding: 5px 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

.sg-color-swatch:hover span {
  opacity: 1;
}


/* Fonts
---------------------------------------------------------------------------- */
.sg-font {
  font-size: 1.4em;
  padding: 0 0 .2em 0;
}


/* Markup
---------------------------------------------------------------------------- */
.sg-markup {}

.sg-doc {
 /* border-bottom: 1px solid #ddd;
  margin-bottom: 1em;*/
}

.sg-markup-controls {
  overflow: hidden;
  padding-top: 1.5em;
  padding-top:10px;
}

.sg-source {
  position: relative;
}

.sg-source pre {
  /*background: #333;
  border-radius: .5em;
  border: 1px solid #ddd;
  */
  color: #fff;
  overflow-x: scroll;
  padding: .5em .3em;
  background-color:#000000;
  border-width:0;
  margin-bottom:0;
}

.sg-source pre code {
  background: transparent;
}

.js .sg-source {
  max-height: 0;
  overflow: hidden;
}

.js .sg-source.is-active,
.operamini .sg-source,
.legacy .sg-source {
 max-height: 62400px;
}


/* -------------------------------------------------------------------------
 Prettyprint
---------------------------------------------------------------------------- */
.pln {color: #fff} /* plain text */

@media screen {
  .str,
  .string {color: #E6DB74;} /* string content */

  .kwd,
  .keyword {color: #66D9EF;} /* a keyword */

  .com,
  .comment {color: #75715E;} /* a comment */

  .typ {color: #A6E22E;} /* a type name */

  .lit,
  .number {color: #AE81FF;} /* a literal value */

  /* punctuation, lisp open bracket, lisp close bracket */
  /* .pun, .opn, .clo { color: #660 } */

  .tag {color: #F92672;} /* a markup tag name */

  .atn {color: #A6E22E;} /* a markup attribute name */

  .atv {color: #E6DB74;} /* a markup attribute value */

  /*.dec, .var { color: #606 }*/ /* a declaration; a variable name */

  .fun {color: #FF0000;} /* a function name */
}

/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .str {color: #060}

  .kwd {color: #006; font-weight: bold }

  .com {color: #600; font-style: italic }

  .typ {color: #404; font-weight: bold }

  .lit {color: #044}

  .pun,
  .opn,

  .clo {color: #440}

  .tag {color: #006; font-weight: bold }

  .atn {color: #404}

  .atv {color: #060}
}

/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
  border-left:1px solid #444;
  margin: 0 0 0 3.3em; /* IE indents via margin-left */
  padding: 0;
}

ol.linenums li {
  color: #bebec5;
  line-height: 1.5;
  padding-left: .8em;
}


/* -------------------------------------------------------------------------
 Legacy IE
---------------------------------------------------------------------------- */
/**
 * IE 7 Fixes
 */
.sg-color {
  *display: inline;
  zoom: 1;
}
/* End IE 7 Fixes */


/**
 * IE 6 Fixes
 */
pre{
  _white-space: pre;
  _white-space: pre-wrap;
  _word-wrap: break-word;
}
/* End IE 6 Fixes */
/*
***************************************************************************************************************/	
/*
********
********
********
*/
/* EXTENDED CODE: START
***************************************************************************************************************/
/* NOTES:

	- You can run into trouble when very specified elements start passing their traits downward.
		- Don't specify styles onto elements which are likely to pass down their traits.
		- Just style elements very specifically on elements which wont pass down their triats.  
	
	- Live styles = the styles being demoed
	- Style guide styles = the styles for the style guide
	
	- Generally speaking, Live styles are coded loosely with no restrictions, while Style guide styles 
	  are coded strict, taking every precaution not to effect the Live styles or be effected by the Live styles. 
	  
	- Pretty much, I need to do the matching ID thing on all of the Style guide styles, so that 
	  they don't leak out, or get leaked on.
	  
	- If I'm adding styles to a Live style class, for demo purpose, I need to do the matching ID thing on 
	  the Style guide class, so that my styles don't leak out or get leaked on.
	  
	
	
	- Every style in this file should be specifically applied directly to it's intended element. 
	- Unless the following, never should there be a style in here which is present in Live styles.
		- The exception to this rule is if a style definition is coupled with a conditional 
		  rule, using the ID "sg-format". ie. #sg-format.my-live-style { ... }
	
	- All styles from here must start with "sg-"
	
	- "Live styles" means the styles being showcased 
	- sg-* classes refers to the style guide styles
	- sg-* styles are applied directly to elements
	- Classes applied directly to elements trumps, pretty much all others.
	  This allows Live styles to not be effected by Live styles.
	  
	- Use of ">" prevents inheritance from spilling down onto the Live styles.
	- We use IDs on the Style guide styles to gain speceficity, so that our Live styles don't
	  leak onto our Style guide styles.

	  

*/
/* 
We use this ID as a hook when we need to either alter or set properties to 
elements or components from the Live style guide. */
#sg-format {}


body.sg-global {
	line-height:145%;
	font-size:13px;
	color:#000000;
	
	font-family:Arial, Helvetica, sans-serif;
	
	background-image:none !important;
}

/*
.stars-sg-label {
	display:inline-block;
	background-color:#000000;
	color:#ffffff;
}*/

#example-primary-chip,
#example-success-chip,
#example-info-chip,
#example-warning-chip,
#example-danger-chip,
#example-attention-chip {
	display:inline-block;
	width:90px;
	height:90px;
	
	padding:13px;
	
	color:#ffffff;
}

.sg-global select.sg-section-switcher,
select.sg-section-switcher {
	color:#000000;
}
.sg-global select.sg-section-switcher > optgroup {
	color:#000000;
}


.sg-global #sg-format.stars-left-nav {
	width:100%;
}


.sg-code {
	color:#ffffff;
}

.sg-code > .tag {
	color:#66ffbd;
}



	/*
	********
	********
	********
	*/
	/* NATIVE HTML ELEMENTS: START
	*******************************************************************************************************/
	/*
	html > body.sg-body#sg-body {
		color:#000000;
		padding:0;
		margin:0;
		background-color:#ffffff;
		
		font-family:Helvetica, Arial, sans-serif;
		
		background-image:none;
	}
	*/
	
	html > body.sg-body#sg-body {
		max-width:1040px;
		margin:auto;
		
		background-image:none;
		background-color:#ffffff;
	}
	
	/* h1 and small */
	h1.sg-h1#sg-h1 {
		color:#000000;
		
		font-size:48px;
		line-height:100%;
		font-weight:normal;
		
		border-style:solid;
		border-width:0;
		border-color:#cccccc;
		border-bottom-width:1px;
		
		padding:0;
		margin:0;	
	}
	h1.sg-h1#sg-h1 > small {
		font-size:65%;
		color:#777777;
		line-height:120%;
		font-weight:normal;
	}
	
	
	div + div > div > h1.sg-h1#sg-h1,
	table + h1.sg-h1#sg-h1,
	ul + h1.sg-h1#sg-h1,
	p + h1.sg-h1#sg-h1,
	p.sg-lead#sg-lead + h1.sg-h1#sg-h1,
	h4 + h1.sg-h1#sg-h1,
	h3 + h1.sg-h1#sg-h1,
	h2 + h1.sg-h1#sg-h1,
	h1 + h1.sg-h1#sg-h1 {
		padding-top:48px;
	}
	
	/* h2 and small */
	h2.sg-h2#sg-h2 {
		color:#000000;
		
		font-size:36px;
		line-height:110%;
		font-weight:normal;
		
		border-style:solid;
		border-width:0;
		border-color:#cccccc;
		
		padding:0;
		margin:0;
		
		padding-top:27px;
	}
	h2.sg-h2#sg-h2 > small {
		font-size:65%;
		color:#777777;
		line-height:120%;
		font-weight:normal;
	}
	
	div + div > div > h2.sg-h2#sg-h2,
	table + h2.sg-h2#sg-h2,
	ul + h2.sg-h2#sg-h2,
	p + h2.sg-h2#sg-h2,
	p.sg-lead#sg-lead + h2.sg-h2#sg-h2,
	h4 + h2.sg-h2#sg-h2,
	h3 + h2.sg-h2#sg-h2,
	h2 + h2.sg-h2#sg-h2 {
		padding-top:48px;
	}
	
	h2.sg-h2#sg-h2 > a {
		text-decoration:none;
		color:#000000;
	}
	/*
	.sg-markup:first-of-type > .sg-display > h2.sg-h2#sg-h2 {
		margin-top:0;
	}*/
	
	/* h3 and small */
	h3.sg-h3#sg-h3 {
		color:#000000;
		
		font-size:27px;
		line-height:120%;
		font-weight:normal; 
	
		border-style:solid;
		border-width:0;
		border-color:#cccccc;
		
		padding:0;
		margin:0;
		
		padding-top:14px;
	}
	h3.sg-h3#sg-h3 > small {
		font-size:65%;
		color:#777777;
		line-height:120%;
		font-weight:normal;
	}
	
	
	div + h3.sg-h3#sg-h3,
	table + h3.sg-h3#sg-h3,
	ul + h3.sg-h3#sg-h3, 
	p + h3.sg-h3#sg-h3,
	p.sg-lead#sg-lead + h3.sg-h3#sg-h3,
	h4 + h3.sg-h3#sg-h3,
	h3 + h3.sg-h3#sg-h3 {
		padding-top:27px;
	}
	
	/* h4 and small */
	h4.sg-h4#sg-h4 {
		color:#000000;
		
		font-size:20px;
		line-height:120%;
		font-weight:normal;
	
		border-style:solid;
		border-width:0;
		border-color:#cccccc;
		border-bottom-width:1px;
		
		padding:0;
		margin:0;
		
		/* 
		Since an h4 has a border on its bottom, 
		we give the h4 a bit of bottom margin 
		to give space for elements under it. */
		margin-bottom:9px;
		
		/* 
		and a tad bit of padding so code style text
		clears the bottom border */
		padding-bottom:2px;
		
		padding-top:14px;
		
	}
	h4.sg-h4#sg-h4 > small {
		font-size:65%;
		color:#777777;
		line-height:120%;
		font-weight:normal;
	}
	
	div + h4.sg-h4#sg-h4,
	table + h4.sg-h4#sg-h4,
	ul + h4.sg-h4#sg-h4,
	p + h4.sg-h4#sg-h4,
	p.sg-lead#sg-lead + h4.sg-h4#sg-h4,
	h4 + h4.sg-h4#sg-h4 {
		padding-top:32px;
	}
	
	
	/* p.sg-lead */
	p.sg-lead#sg-lead {
		color:#000000;
		
		font-size:16px;
		line-height:125%;
		margin-bottom:0;
		padding-top:0;
		padding-top:8px;
	}
	
	table + p.sg-lead#sg-lead,
	ul + p.sg-lead#sg-lead,
	p.sg-p#sg-p + p.sg-lead#sg-lead,
	p.sg-lead#sg-lead + p.sg-lead#sg-lead {
		padding-top:16px;
	}
	
	/* p.sg-p */
	p.sg-p#sg-p {
		color:#000000;
		color:rgba(0, 0, 0, .67);
		
		font-size:14px;
		line-height:142%;
		
		padding:0;
		margin:0;
		padding-top:3px;
		
		
	}
	
	table + p.sg-p#sg-p,
	ul + p.sg-p#sg-p,
	p.sg-p#sg-p + p.sg-p#sg-p {
		padding-top:14px;
	}
	
	
	/* ol, ul */
	ul.sg-ul#sg-ul {
		font-size:14px;
		color:rgba(0, 0, 0, .67);
		
		display:block;
		list-style-type:disc;
		list-style-position:outside;
		
		/*
		padding:0;
		margin:0;
		margin-left:18px;
		*/
		
	}
		
	
	table + ul.sg-ul#sg-ul,
	ul.sg-ul#sg-ul + ul.sg-ul#sg-ul,
	p + ul.sg-ul#sg-ul {
		padding:0;
		margin:0;
		
		padding-top:14px;
		margin-left:18px;
	}
	
	ul.sg-ul#sg-ul > li {
		/*padding-top:4px;*/
	}
	
	/* hr */
	hr.sg-hr#sg-hr {
		border-width:0;
	
		border-top-width:1px;
		border-style:solid;
		
		border-color:#777777;
		
		margin-top:13px;
		margin-bottom:13px;
		
		width:100%;
	}
	
	/* code */
	code.sg-code#sg-code {
		background-color:#000000;
		font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
	}
	code.sg-inline-code#sg-inline-code {
		font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
		color:#c7254e;
		/*background-color:#f9f2f4;*/
		font-size:90%;
		font-weight:normal;
		
		background-color:transparent;
		
		background: linear-gradient(to bottom, rgba(199, 37, 78, .08), 
			    rgba(199, 37, 78, .08)), 
			    linear-gradient(to bottom, rgba(255, 255, 255, 1), 
			    rgba(255, 255, 255, 1));
			    
		border-radius:0;
	}
	
	
	h4 code.sg-inline-code#sg-inline-code {
		font-size:80%;
	}
	
	/* table.sg-reference */
	table.sg-reference-table#sg-reference-table {
		color:#000000;
		
		width: 100%;
		max-width: 100%;
		
		border-style:solid;
		border-width:1px;
		border-color:#cccccc;
		
		background-color:#ffffff;
		margin-top:14px;
	}
		
		table.sg-reference-table#sg-reference-table tr.sg-reference-row:nth-child(even) {
			background-color:#f2f2f2;
		}
		
			table.sg-reference-table#sg-reference-table tr.sg-reference-row > th.sg-reference-th {
				font-weight:bold;
				padding:5px;
				border-style:solid;
				border-width:1px;
				border-color:#cccccc;
			}
			table.sg-reference-table#sg-reference-table tr.sg-reference-row > th.sg-reference-th#sg-class {
				font-weight:bold;
				width:25%;
				padding:5px;
			}
			table.sg-reference-table#sg-reference-table tr.sg-reference-row > th.sg-reference-th#sg-apply-to {
				font-weight:bold;
				width:40%;
				padding:5px;
			}
			
			table.sg-reference-table#sg-reference-table tr.sg-reference-row > th.sg-reference-th#sg-provided-by-bootstrap {
				font-weight:bold;
				
				width:100px;
				padding:5px;
			}
			
			
			table.sg-reference-table#sg-reference-table tr.sg-reference-row > td {
				padding:5px;
				
				border-style:solid;
				border-width:1px;
				border-color:#cccccc;
			}
		
		
	
	/* NATIVE HTML ELEMENTS: END
	*******************************************************************************************************/
	/*
	********
	********
	********
	*/
	/* CALL OUTS: START
	*******************************************************************************************************/
	.sg-callout-gotcha#sg-callout-gotcha {
		width:100%;
		display:block;
		
		margin-top:14px;
		
		padding:14px;
		padding-bottom:16px;
		padding-left:16px;
		
		border-style:solid;
		border-width:1px;
		border-color:#cccccc;
		
		border-left-width:7px;
		border-left-color:#ad88ff;
	}
	
	.sg-callout-gotcha#sg-callout-gotcha::before {
		content: "GOTCHAS";
		color:#ad88ff;
		font-weight:bold;
		font-size:11px;
	}
	.sg-callout-gotcha#sg-callout-gotcha h1.sg-h1#sg-h1 {
		font-weight:bold;
		font-size:17px;
		
		margin-top:14px;
		margin-bottom:0;
		border-width:0;
	}
	
	
	/* CALL OUTS: END
	*******************************************************************************************************/
	/*
	********
	********
	********
	*/
	/* MISC LAYOUT CLASSES: START
	*******************************************************************************************************/
	div.sg-h1-section#sg-h1-section {
		/*padding-bottom:24px;*/
	}
	
	/* Code area */
	div.sg-source#sg-source {
		background-color:#000000;
	}
	/* Container for examples */
	div.sg-example-container#sg-example-container {
		padding:16px;
		border-style:solid;
		border-width:1px;
		border-color:#cccccc;
		
		margin-top:14px;
	}
	
	
	
	/* MISC LAYOUT CLASSES: START
	*******************************************************************************************************/
	/*
	********
	********
	********
	*/
	/* LIVE STYLE FORMATTING: START
	*******************************************************************************************************/
	
		/* BRAND COLORS: START
		***********************************************************************************************/
		.stars-brand-primary-background-color#sg-brand-primary-color-chip,
		.stars-brand-secondary-background-color#sg-brand-secondary-color-chip {
			display:inline-block;
			width:140px;
			height:90px;
			
			padding:13px;
			color:#ffffff;
		}

		/* BRAND COLORS: END
		***********************************************************************************************/
		/*
		********
		********
		********
		*/
		/* CONTEXTUAL TEXT COLORS: START
		***********************************************************************************************/
		p.text-attention#sg-text-attention {
			
			line-height:145%;
			
			padding:0;
			margin:0;
			margin-top:0px;
		}
		p.text-success#sg-text-success {
			
			line-height:145%;
			
			padding:0;
			margin:0;
			margin-top:14px;
		}
		p.text-info#sg-text-info {
			
			line-height:145%;
			
			padding:0;
			margin:0;
			margin-top:14px;
		}
		p.text-warning#sg-text-warning {
			
			line-height:145%;
			
			padding:0;
			margin:0;
			margin-top:14px;
		}
		p.text-danger#sg-text-danger {
			
			line-height:145%;
			
			padding:0;
			margin:0;
			margin-top:14px;
		}
		p.stars-text-cool#sg-stars-text-cool {
			
			line-height:145%;
			
			padding:0;
			margin:0;
			margin-top:14px;
		}
		/* CONTEXTUAL TEXT COLORS: END
		***********************************************************************************************/
		/*
		********
		********
		********
		*/
		/* CONTEXTUAL BACKGROUND COLORS: START
		***********************************************************************************************/
		p.bg-attention#sg-bg-attention,
		p.bg-success#sg-bg-success,
		p.bg-info#sg-bg-info,
		p.bg-warning#sg-bg-warning,
		p.bg-danger#sg-bg-danger {
			padding:9px;
		}
		p + p.bg-attention#sg-bg-attention, div + p.bg-attention#sg-bg-attention,
		p + p.bg-success#sg-bg-success, div + p.bg-success#sg-bg-success,
		p + p.bg-info#sg-bg-info, div + p.bg-info#sg-bg-info,
		p + p.bg-warning#sg-bg-warning, div + p.bg-warning#sg-bg-warning,
		p + p.bg-danger#sg-bg-danger, div + p.bg-danger#sg-bg-danger {
			margin-top:9px;
		}
		
		
		p.bg-primary.important#sg-bg-primary,
		p.bg-attention.important#sg-bg-attention,
		p.bg-success.important#sg-bg-success,
		p.bg-info.important#sg-bg-info,
		p.bg-warning.important#sg-bg-warning,
		p.bg-danger.important#sg-bg-danger {
			padding:9px;
		}
		
		p + p.bg-primary.important#sg-bg-primary, div + p.bg-primary.important#sg-bg-primary,
		p + p.bg-attention.important#sg-bg-attention, div + p.bg-attention.important#sg-bg-attention,
		p + p.bg-success.important#sg-bg-success, div + p.bg-success.important#sg-bg-success,
		p + p.bg-info.important#sg-bg-info, div + p.bg-info.important#sg-bg-info,
		p + p.bg-warning.important#sg-bg-warning, div + p.bg-warning.important#sg-bg-warning,
		p + p.bg-danger.important#sg-bg-danger, div + p.bg-danger.important#sg-bg-danger {
			margin-top:9px;
		}
		
		
		p.bg-primary.important#sg-bg-primary {
			/*margin-top:32px;*/
		}
		
		
		/* CONTEXTUAL BACKGROUND COLORS: END
		***********************************************************************************************/
		/*
		********
		********
		********
		*/
		/* STACKED NAV PILLS: START
		***********************************************************************************************/
		ul.nav.nav-pills.nav-stacked#sg-stacked-nav-pills-example {
			
		}
		
		#sg-stacked-nav-pills {
			
		}
		
		/* STACKED NAV PILLS: END
		***********************************************************************************************/
		
	
	/* LIVE STYLE FORMATTING: END
	*******************************************************************************************************/
	
	
	.stars-fat-grid#sg-main-panel-with-fat-grid {
	}
	
	.sg-toggle-grid-overlay-button {
		margin-top:7px !important;
		margin-bottom:7px !important; 
	}
	
	
	
	#sg-default-perimeter-and-default-grid-system-example > .row,
	#sg-default-perimeter-and-default-grid-system-example > .row > div[class^="col-"],
	#sg-default-perimeter-and-default-grid-system-example > .row > div[class^=" col-"] {
		/*border-color:#ffd9d1;*/
	}
	
	
	.sg-grid-overlay > tr > td,
	.sg-grid-overlay > tbody > tr > td,
	.sg-grid-overlay > .row,
	.sg-grid-overlay > .row > div[class^="col-"],
	.sg-grid-overlay > .row > div[class^=" col-"] {
		border-color:#ffd9d1 !important;
	}
	
	
	
	/*
	.sg-grid-overlay {
		border-color:#ffd9d1;
	}*/
	
	#sg-default-perimeter-and-fat-grid-system-example {}
	
	#sg-default-perimeter-and-flush-grid-system-example {}
	
	
	#sg-main-perimeter-and-default-grid-system-example {}
	
	#sg-main-perimeter-and-flush-grid-system-example {}
	
	#sg-flush-grid-example {
	}
	
	#sg-flush-grid-example-id > .row > #sg-flush-grid-example-food-pic-1 {
		background-image:url(../images/food-pic-1.png);
		background-repeat:no-repeat;
		background-position:center center;
		
		min-height:120px;
	}
	#sg-flush-grid-example-id > .row > #sg-flush-grid-example-food-pic-2 {
		background-image:url(../images/food-pic-2.png);
		background-repeat:no-repeat;
		background-position:center center;
		
		min-height:120px;
	}
	#sg-flush-grid-example-id > .row > #sg-flush-grid-example-food-pic-3 {
		background-image:url(../images/food-pic-3.png);
		background-repeat:no-repeat;
		background-position:center center;
		
		min-height:120px;
	}
	#sg-flush-grid-example-id > .row > #sg-flush-grid-example-food-pic-4 {
		background-image:url(../images/food-pic-4.png);
		background-repeat:no-repeat;
		background-position:center center;
		
		min-height:120px;
	}
	#sg-flush-grid-example-id > .row > #sg-flush-grid-example-food-pic-5 {
		background-image:url(../images/food-pic-5.png);
		background-repeat:no-repeat;
		background-position:center center;
		
		min-height:120px;
	}
	#sg-flush-grid-example-id > .row > #sg-flush-grid-example-food-pic-6 {
		background-image:url(../images/food-pic-6.png);
		background-repeat:no-repeat;
		background-position:center center;
		
		min-height:120px;
	}
	#sg-flush-grid-example-id > .row > #sg-flush-grid-example-food-pic-7 {
		background-image:url(../images/food-pic-7.png);
		background-repeat:no-repeat;
		background-position:center center;
		
		min-height:120px;
	}
	#sg-flush-grid-example-id > .row > #sg-flush-grid-example-food-pic-8 {
		background-image:url(../images/food-pic-8.png);
		background-repeat:no-repeat;
		background-position:center center;
		
		min-height:120px;
	}
	#sg-flush-grid-example-id > .row > #sg-flush-grid-example-food-pic-9 {
		background-image:url(../images/food-pic-9.png);
		background-repeat:no-repeat;
		background-position:center center;
		
		min-height:120px;
	}




	
	#sg-flush-grid-with-pinline-example {
	}
	
	#sg-main-document-text-flow-main-body {
		width:640px;
		margin:auto;
	}
	
	#sg-side-nav-headings-nav-1-id {
		width:265px;
		margin:auto;
		
		float:right;
	}
	#sg-side-nav-headings-nav-2-id {
		width:265px;
		margin:auto;
		
		float:left;
	}
	
	
	#sg-side-nav-lists-nav-1-id {
		width:265px;
		margin:auto;
		
		float:right;
	}
	#sg-side-nav-lists-nav-2-id {
		width:265px;
		margin:auto;
		
		float:left;
	}
	
	
	#stars-left-nav-expanded-id > .panel-group > .panel > .nested-panel {
		min-height:611px;
	}
	#stars-right-nav-expanded-id > .panel-group > .panel > .nested-panel {
		min-height:611px;
	}
	
	
	.linenums li {
		margin-top:0 !important;
	}
	
	
	#sg-ancillary-nav-example-background-id {
		min-height:100px;
		
		background-image: url(../images/big-food-pic-1.png);
		background-repeat: no-repeat;
		background-position: center center;
	}
	
	#sg-stars-icon-block-id {
		display:inline-block;
		width:118px;
		min-height:75px;
		text-align:center;
		
		padding:10px;
		vertical-align:top;

	}
		#sg-stars-icon-block-label-id {
			display:block;
			text-align:center;

		}
		
	#sg-stars-icon-block-id:hover {
		background-color:#000000;
		color:#ffffff;
	}
	
	
	#sg-modifier-text-color {
		color:#6431ff !important;
	}
	
	
	#sg-valign-floats-examples-id {
		text-align:center;
	}


/* EXTENDED CODE: END
***************************************************************************************************************/
/*
********
********
********
*/