
/*******************************
             Global
*******************************/


/*--------------
     Page
---------------*/

ul.list {
  list-style-type: disc;
}
ul.list li {
  list-style-position: outside;
}

p {
  margin: 1em 0em;
}
p:first-child {
  margin-top: 0em;
}
p:last-child {
  margin-bottom: 0em;
}


/*----------------
      Footer
-----------------*/

#example > .pusher > .footer {
  margin: 0em;
  border-radius: 0em;
  padding: 4em 0em 4em 0em;
}

/*--------------
     Code
---------------*/

/* Inline Code */
pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
pre {
  background-color: #FFFFFF;
  text-align: left;
}


/*rtl:ignore*/
pre.console {
  background-color: transparent;
  line-height: 1.6;
  font-family:  'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  height: 300px;
  overflow: auto;
  direction:ltr;
}
code {
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  display: inline-block;
  font-family: "Monaco","Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace;
  font-size: 0.875em;
  font-weight: bold;
  padding: 1px 6px;
  vertical-align: baseline;
}
pre code {
  border: none;
  padding: 0px;
  font-size: 1em;
}

blockquote {
  border-left: 4px solid #777777;
  font-size: 16px;
  line-height: 1.5;
  padding: 0em 2em;
  margin: 1em 0em 2em;
}
blockquote p {
  line-height: inherit;
}
blockquote .author {
  display: block;
  margin: 1em 0em 0em;
  font-weight: bold;
}

/* Code Inside Message */
.ui.message > p > code,
.ui.message > code {
  background-color: rgba(0, 0, 0, 0.06);
  line-height: 1;
  padding: 3px 4px;
}


/*--------------
    Docs Icon
---------------*/


/* Replace Code Icon */
@font-face {
  font-family: 'Docs';
  src:
    url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggi/LYAAAC8AAAAYGNtYXAaVcxXAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zl4DICgAAAFwAAAAeGhlYWQCOGXvAAAB6AAAADZoaGVhA6IB5gAAAiAAAAAkaG10eALAAAAAAAJEAAAAFGxvY2EAKABQAAACWAAAAAxtYXhwAAgAEAAAAmQAAAAgbmFtZVcZpu4AAAKEAAABRXBvc3QAAwAAAAADzAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAAHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYA//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAAAEABwAGAAAYADQAAAQcXBxc3JyMHFzcnNycBMDBwcDCQkKCQkDBwcDABgDBwcDCgoKCgMHBwMAAAAQAAAAEAAH1wL6hfDzz1AAsCAAAAAADQrRK5AAAAANCtErkAAAAAAcABgAAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAABwAABAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAEAAAABwAAAAAAAAAAKABQAHgA8AAEAAAAFAA4AAgAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'),
    url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ4AAsAAAAAA+wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgCCL8tmNtYXAAAAFoAAAATAAAAEwaVcxXZ2FzcAAAAbQAAAAIAAAACAAAABBnbHlmAAABvAAAAHgAAAB4XgMgKGhlYWQAAAI0AAAANgAAADYCOGXvaGhlYQAAAmwAAAAkAAAAJAOiAeZobXR4AAACkAAAABQAAAAUAsAAAGxvY2EAAAKkAAAADAAAAAwAKABQbWF4cAAAArAAAAAgAAAAIAAIABBuYW1lAAAC0AAAAUUAAAFFVxmm7nBvc3QAAAQYAAAAIAAAACAAAwAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gAB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmAP/9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAIAAABAAcABgAAGAA0AAAEHFwcXNycjBxc3JzcnATAwcHAwkJCgkJAwcHAwAYAwcHAwoKCgoDBwcDAAAAEAAAABAAB9cC+oXw889QALAgAAAAAA0K0SuQAAAADQrRK5AAAAAAHAAYAAAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAAcAAAQAAAAAAAAAAAAAAAAAAAAUAAAAAAAAAAAAAAAABAAAAAcAAAAAAAAAACgAUAB4APAABAAAABQAOAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');
  font-weight: normal;
  font-style: normal;
}

.docs.code.icon:before {
  font-family: 'Docs';
  content: "\e600";
  vertical-align: top;
}


/*--------------
   Fixed Menu
---------------*/

#example .main.menu .title.item b {
  margin-right: 0.5em;
}
#example .fixed.main.menu .launch.item {
  display: block;
}
#example .fixed.main.menu .search .icon {
  opacity: 0.9;
}






/*******************************
         Sidebar Layout
*******************************/

#example > .pusher > .full.height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
#example:not(.site) > .pusher > .full.height {
  background-color: #FFFFFF;
}

/* page layout */
#example .full.height > .toc {
  position: relative;
  z-index: 1;
  background-color: #cccccc;
  width: 150px;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
#example .full.height > .toc .ui.menu {
  border-radius: 0;
  border-width: 0 1px 0 0;
  box-shadow: none;
  margin: 0;
  width: inherit;
  overflow: hidden;
  will-change: transform;
}
#example .article {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0px;
}

/*******************************
      Definition Container
*******************************/

#example > .pusher > .footer {
  clear: both;
}

#example .fixed.menu > .container,
#example .main.container,
#example .masthead > .container,
#example .footer > .container {
  position: relative;
}

#example .main.container {
  padding: 2em 0em 7em;
}
#example .wide.main.container {
  width: 80%;
  margin: 0 auto;
  
}

#example .main.container > .right.rail .sticky,
#example .main.container > .tab > .examples > .right.rail .sticky,
#example .main.container > .tab > .right.rail .sticky {
  padding-bottom: 2em;
}
#example .main.container > .right.rail .fixed.sticky,
#example .main.container > .tab > .examples > .right.rail .fixed.sticky,
#example .main.container > .tab > .right.rail .fixed.sticky {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

#example .following.menu .menu .active.item {
  font-weight: bold;
}

/*******************************
           Advert
*******************************/


/*******************************
          Responsive
*******************************/

/* Defaults */
#example .masthead > .container,
#example .main.container,
#example .fixed.menu > .container {
  margin-left: 3em !important;
  margin-right: 3em !important;
  width: auto !important;  
}
#example .masthead > .container {
  margin-right: 387px !important;
}
#example .main.container {
  margin-right: 200px !important;
}

/* Rail Default */
#example .main.container > .right.rail,
#example .main.container > .tab > .examples > .right.rail,
#example .main.container > .tab > .right.rail {
  background-color: #cccccc;
  margin-left: 3em;
  padding-top: 2em;
  width: 169px;
}



/* Remove Overview from pages with Examples */
@media only screen and (max-width: 1500px) {


  #example .fixed.column {
    right: auto;
    left: 100%;
    margin-left: 4.5em;
    width: 300px;
  }
  #example .fixed.column + .examples {
    margin-right: 0px;
  }
  #example .fixed.column + .examples .right.rail {
    display: none;
  }

}


/* Squish Content (Just For Small Computers) */
@media only screen and (max-width: 1272px) {

  /* Resize Main Container */
  #example .main.container {
    margin-right: 200px !important;
  }

  #example .fixed.column {
    width: 250px;
    margin-left: 2.5em;
  }

}

/* Hide Top Bar */
@media only screen and (min-width: 1145px) {
  #example .fixed.main.menu {
    display: none;
  }
}

/* Remove Fixed Sidebar /  Show Top Bar */
@media only screen and (max-width: 1144px) {

#compadd{
	  display: none;
	}
  
  /* Hide Fixed Launch Button */
  #example .fixed.launch.button {
    display: none !important;
  }

  /* Additional Padding for Fixed Menu */
  #example .masthead.segment {
    padding-top: 5em;
  }

  /* Hide GitHub Stars in Intro */
  #example .masthead iframe {
    display: none;
  }

  /* Less Left Padding */
  #example .masthead > .container,
  #example .main.container,
  #example .fixed.menu > .container {
    margin-left: 2em !important;
  }

  /* Padding Above Rail */
  #example .main.container > .right.rail .sticky,
  #example .main.container > .tab > .examples > .right.rail .sticky,
  #example .main.container > .tab > .right.rail .sticky {
    padding-top: 2.5em;
  }

  /* 100% Menu Width */
  #example .fixed.menu > .container {
    margin-left: 0em !important;
    margin-right: 0em !important;
    width: 100% !important;
    max-width: none !important;
  }

  /* Remove Bug Reports */
  #example .main.menu .bug.item {
    display: none;
  }

  /* Hide Music *]/
  #example .main.menu .music.item {
    display: none;
  }

  /* Space For Header Over Examples */
  #example .fixed.column .sticky {
    padding-top: 2em;
  }

}

/* Remove Rail */
@media only screen and (max-width: 992px) {

	#compadd{
	  display: none;
	}

  #example .full.height > .toc {
    width:100px;
  }
  
   #example .main.container {
    margin-right: 150px !important;
  }

}

@media only screen and (max-width: 820px) {

	#compadd{
	  display: none;
	}

/* Hide Fixed Sidebar */
  #example .full.height > .toc {
    display: none;
  }
  
  #example .main.container {
    margin-right: 30px !important;
  }
  
  #example .main.container > .right.rail,
  #example .main.container > .tab > .examples > .right.rail,
  #example .main.container > .tab > .right.rail {
    margin-right:0px;	
  }


  
}

@media only screen and (max-width: 768px) {

  	#compadd{
	  display: none;
	}

  /* Hide Some Fixed Menu Content (Pagination, Search) */
  #example .fixed.menu > .container > .section.item {
    display: none;
  }
  
  

  /* Add Sticky Footers */
  body.pushable > .pusher {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  }
  body.pushable > .pusher > .full.height {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  }
  

  /* Hide Sitemap */
  #example .pusher > .footer .grid .three.column {
    display: none !important;
  }
}


/* Small Phone */
@media only screen and (max-width: 500px) {

	#compadd{
		display: none;
	}
	#example .carbon-poweredby {
		display: none;
	}
	#sgivc_logo{
		width:200px;
	}

}
