/*
	This is the main stylesheet for our footer bar.

	Right now it only contains copyright information.
*/
#divFooter {
  height: 20px;
  width: 100%;
  min-width: 1008px;
  padding: 10px 0px 10px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  font-size: 14px;
  color: #CCC;
  background: #45484d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #45484d), color-stop(100%, #000000));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #45484d 0%, #000000 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #45484d 0%, #000000 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #45484d 0%, #000000 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #45484d 0%, #000000 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
  /* IE6-9 */ }
  #divFooter a {
    color: #CCC;
    text-decoration: none;
    font-weight: bold; }

/*
	This is the main stylesheet for the header area
	
	For now it primarily contains:
		- Itself with a nice background gradient
		- The websites main header logo

	For now, the tabs that appear on the header will actually be part of
	the main-tabbed area.
*/
#divHeader {
  position: relative;
  height: 60px;
  border-bottom: 1px solid #BBBBBB;
  background: #eeeeee;
  /* Old browsers */
  background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
  /* IE6-9 */ }
  #divHeader #divLogo {
    position: absolute;
    top: 15px;
    left: 11px;
    height: 36px;
    width: 187px;
    background: url("/img/Icon_Sprites.png") top left no-repeat; }

/*
	This is the main stylesheet for the sidebar.

	The sidebar sits on the left side of the interface and houses:
		- The add / remove class buttons
		- The list of current classes
*/
#divSideBar {
  position: relative;
  height: 100%;
  width: 208px; }
  #divSideBar #divClassListArea {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    bottom: 350px; }
  #divSideBar #classListContainer {
    position: absolute;
    top: 25px;
    width: 100%;
    bottom: 0px; }
  #divSideBar .listContainer {
    border: 1px solid #BBB;
    background: #FFF;
    -webkit-box-shadow: inset 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    overflow-y: scroll; }
  #divSideBar .divSideBarList .listItem {
    cursor: pointer;
    color: #333;
    padding: 4px 10px;
    border-bottom: 1px solid #FFF;
    overflow: hidden;
    white-space: nowrap;
    background: #EBF4F7; }
    #divSideBar .divSideBarList .listItem:nth-child(even) {
      background: #D6E8EF;
      /* #C9E9F5; */ }
    #divSideBar .divSideBarList .listItem:hover {
      background: #65C9EF; }
    #divSideBar .divSideBarList .listItem.selectedClassItem {
      background: #65C9EF;
      /* Old browsers */
      background: linear-gradient(to bottom, #c1e9f9 0%, #7cd1f1 50%, #65C9EF 51%, #37b9ea 100%);
      /* W3C */
      background: -moz-linear-gradient(top, #c1e9f9 0%, #7cd1f1 50%, #65C9EF 51%, #37b9ea 100%);
      /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c1e9f9), color-stop(50%, #7cd1f1), color-stop(51%, #65C9EF), color-stop(100%, #37b9ea));
      /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #c1e9f9 0%, #7cd1f1 50%, #65C9EF 51%, #37b9ea 100%);
      /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #c1e9f9 0%, #7cd1f1 50%, #65C9EF 51%, #37b9ea 100%);
      /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #c1e9f9 0%, #7cd1f1 50%, #65C9EF 51%, #37b9ea 100%);
      /* IE10+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($color, 20%)', endColorstr='darken($color, 10%)',GradientType=0 );
      /* IE6-9 */
      font-weight: bold; }
  #divSideBar .addRemoveButtons {
    position: absolute;
    top: 0px;
    right: -2px; }
    #divSideBar .addRemoveButtons div {
      float: right;
      width: 44px;
      height: 24px;
      color: #333;
      font-weight: bold;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      border-top: 1px solid #FFF;
      border-left: 1px solid #FFF;
      border-bottom: 1px solid #BBB;
      border-right: 1px solid #BBB;
      background: #D3D1D1; }
      #divSideBar .addRemoveButtons div span {
        position: relative;
        top: -2px; }
    #divSideBar .addRemoveButtons div:hover {
      background: #dfdede; }
  #divSideBar #divExtraOptionsArea {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 328px; }
  #divSideBar #stylesListContainer {
    height: 250px; }
  #divSideBar #chkShowExtras {
    margin-top: 12px; }
  #divSideBar label {
    font-size: 12px;
    font-weight: 600; }
  #divSideBar .desc {
    position: relative;
    top: -3px;
    font-size: 10px;
    padding-left: 10px; }

/*
	This is the main style sheet for the "tabbed area"

	This area is complex, but includes:
		- The tabs along the top. This will be positioned with negative top values
		- The body for each tab, including source viewers for each section
		- The tab with the main editor interface
	
	This SASS document has three main areas:
		- GENERAL TAB STUFF
		- TABS
		- TAB PAGES
*/
#divTabbedArea {
  position: absolute;
  left: 209px;
  right: 12px;
  top: -2px;
  bottom: 12px;
  border: 1px solid #BBB; }

#topTabsContainer.smallMode li, #topTabsContainer.mediumMode li {
  font-size: 12px !important;
  padding: 4px 10px 2px 4px !important; }

#topTabsContainer.smallMode li:before, #topTabsContainer.mediumMode li:before {
  border-top: 12px solid #DCDCDC !important; }

#topTabsContainer.smallMode li:after, #topTabsContainer.mediumMode li:after {
  border-top: 13px solid #DCDCDC !important; }

#topTabsContainer.smallMode .tabIcon, #topTabsContainer.mediumMode .tabIcon {
  background: url("/img/Icon_Sprites_Small.png") !important;
  height: 22px !important; }

#topTabsContainer.smallMode .tabLabel, #topTabsContainer.mediumMode .tabLabel {
  margin-left: 3px !important; }

#topTabsContainer.smallMode .iconEditor .tabIcon, #topTabsContainer.mediumMode .iconEditor .tabIcon {
  background-position: -199px 0px !important;
  width: 19px !important; }

#topTabsContainer.smallMode .iconJava .tabIcon, #topTabsContainer.mediumMode .iconJava .tabIcon {
  background-position: -236px 0px !important;
  width: 22px !important; }

#topTabsContainer.smallMode .iconCSharp .tabIcon, #topTabsContainer.mediumMode .iconCSharp .tabIcon {
  background-position: -274px 0px !important;
  width: 29px !important; }

#topTabsContainer.smallMode .iconPython .tabIcon, #topTabsContainer.mediumMode .iconPython .tabIcon {
  background-position: -329px 0px !important;
  width: 19px !important; }

#topTabsContainer.smallMode .iconRuby .tabIcon, #topTabsContainer.mediumMode .iconRuby .tabIcon {
  background-position: -366px 0px !important;
  width: 18px !important; }

#topTabsContainer.smallMode .iconPHP .tabIcon, #topTabsContainer.mediumMode .iconPHP .tabIcon {
  background-position: -399px 0px !important;
  width: 27px !important; }

#topTabsContainer.smallMode .iconJS .tabIcon, #topTabsContainer.mediumMode .iconJS .tabIcon {
  background-position: -451px 0px !important;
  width: 17px !important; }

#topTabsContainer.smallMode .iconVB .tabIcon, #topTabsContainer.mediumMode .iconVB .tabIcon {
  background-position: -485px 0px !important;
  width: 16px !important; }

#topTabsContainer.smallMode .iconPerl .tabIcon, #topTabsContainer.mediumMode .iconPerl .tabIcon {
  background-position: -517px 0px !important;
  width: 18px !important; }

#topTabsContainer.smallMode .iconCpp .tabIcon, #topTabsContainer.mediumMode .iconCpp .tabIcon {
  background-position: -553px 0px !important;
  width: 16px !important; }

#topTabsContainer.smallMode .iconSwift .tabIcon, #topTabsContainer.mediumMode .iconSwift .tabIcon {
  background-position: -586px 0px !important;
  width: 19px !important; }

#topTabsContainer.mediumMode li {
  font-size: 14px !important;
  padding: 8px 16px 4px 8px !important; }

#topTabsContainer.mediumMode .tabLabel {
  transform: translateY(-30%) !important;
  margin-left: 8px !important; }

#topTabsContainer.smallMode .tabLabel {
  transform: translateY(-35%) !important; }

#topTabsContainer {
  position: absolute;
  top: -50px;
  height: 50px;
  width: 100%; }
  #topTabsContainer #topTabs {
    list-style: none;
    position: absolute;
    bottom: -0px;
    margin: 0px 0px 0px 11px !important;
    padding: 0px !important;
    white-space: nowrap; }
    #topTabsContainer #topTabs li {
      display: inline-block;
      margin: 0px 0px 0px -1px;
      color: #FFF;
      font-size: 16px;
      font-weight: 600;
      text-shadow: 1px 1px 1px #333333;
      padding: 3px 12px 0px;
      border: 1px solid #BBB;
      border-bottom: 0px none !important;
      cursor: pointer;
      position: relative;
      background-color: blue;
      border: 1px solid #BBB;
      display: inline-block; }
    #topTabsContainer #topTabs #tab_Editor {
      color: #444 !important;
      text-shadow: 0px 1px 1px #888; }
    #topTabsContainer #topTabs li:hover .tabIcon {
      -moz-opacity: 0.80;
      -khtml-opacity: 0.80;
      opacity: 0.80;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha" Opacity=80;
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
      filter: alpha(opacity=80); }
    #topTabsContainer #topTabs li:before {
      position: absolute;
      right: -1px;
      top: -1px;
      content: '';
      border-top: 12px solid #BBB;
      border-left: 12px solid transparent; }
    #topTabsContainer #topTabs li:after {
      position: absolute;
      right: -2px;
      top: -2px;
      content: '';
      border-top: 13px solid #E7E7E7;
      border-left: 13px solid transparent; }
    #topTabsContainer #topTabs .tabLabel {
      display: inline-block;
      margin-left: 10px;
      position: relative;
      top: 50%;
      transform: translateY(-50%); }
    #topTabsContainer #topTabs .tabIcon {
      background: url("/img/Icon_Sprites.png");
      height: 36px;
      display: inline-block; }
    #topTabsContainer #topTabs .iconEditor {
      background: #fcfcfc; }
      #topTabsContainer #topTabs .iconEditor.activeTab, #topTabsContainer #topTabs .iconEditor:hover {
        background: #EFEFEF;
        /* Old browsers */
        background: linear-gradient(to bottom, white 0%, white 50%, #EFEFEF 51%, #d5d5d5 100%);
        /* W3C */
        background: -moz-linear-gradient(top, white 0%, white 50%, #EFEFEF 51%, #d5d5d5 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(50%, white), color-stop(51%, #EFEFEF), color-stop(100%, #d5d5d5));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, white 0%, white 50%, #EFEFEF 51%, #d5d5d5 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, white 0%, white 50%, #EFEFEF 51%, #d5d5d5 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, white 0%, white 50%, #EFEFEF 51%, #d5d5d5 100%);
        /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($color, 35%)', endColorstr='darken($color, 10%)',GradientType=0 );
        /* IE6-9 */ }
      #topTabsContainer #topTabs .iconEditor .tabIcon {
        background-position: -199px 0px;
        width: 32px; }
    #topTabsContainer #topTabs .iconJava {
      background: #e0a56f; }
      #topTabsContainer #topTabs .iconJava.activeTab, #topTabsContainer #topTabs .iconJava:hover {
        background: #E69750;
        /* Old browsers */
        background: linear-gradient(to bottom, #fcf4ec 0%, #f0bf93 50%, #E69750 51%, #e07c23 100%);
        /* W3C */
        background: -moz-linear-gradient(top, #fcf4ec 0%, #f0bf93 50%, #E69750 51%, #e07c23 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcf4ec), color-stop(50%, #f0bf93), color-stop(51%, #E69750), color-stop(100%, #e07c23));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #fcf4ec 0%, #f0bf93 50%, #E69750 51%, #e07c23 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #fcf4ec 0%, #f0bf93 50%, #E69750 51%, #e07c23 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #fcf4ec 0%, #f0bf93 50%, #E69750 51%, #e07c23 100%);
        /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($color, 35%)', endColorstr='darken($color, 10%)',GradientType=0 );
        /* IE6-9 */ }
      #topTabsContainer #topTabs .iconJava .tabIcon {
        background-position: -236px 0px;
        width: 32px; }
    #topTabsContainer #topTabs .iconCSharp {
      background: #57b4cf; }
      #topTabsContainer #topTabs .iconCSharp.activeTab, #topTabsContainer #topTabs .iconCSharp:hover {
        background: #37B2D5;
        /* Old browsers */
        background: linear-gradient(to bottom, #cbebf4 0%, #76cae2 50%, #37B2D5 51%, #2694b3 100%);
        /* W3C */
        background: -moz-linear-gradient(top, #cbebf4 0%, #76cae2 50%, #37B2D5 51%, #2694b3 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbebf4), color-stop(50%, #76cae2), color-stop(51%, #37B2D5), color-stop(100%, #2694b3));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #cbebf4 0%, #76cae2 50%, #37B2D5 51%, #2694b3 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #cbebf4 0%, #76cae2 50%, #37B2D5 51%, #2694b3 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #cbebf4 0%, #76cae2 50%, #37B2D5 51%, #2694b3 100%);
        /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($color, 35%)', endColorstr='darken($color, 10%)',GradientType=0 );
        /* IE6-9 */ }
      #topTabsContainer #topTabs .iconCSharp .tabIcon {
        background-position: -274px 0px;
        width: 49px; }
    #topTabsContainer #topTabs .iconPython {
      background: #7790a5; }
      #topTabsContainer #topTabs .iconPython.activeTab, #topTabsContainer #topTabs .iconPython:hover {
        background: #5B84A7;
        /* Old browsers */
        background: linear-gradient(to bottom, #cfdbe5 0%, #8da9c2 50%, #5B84A7 51%, #486a87 100%);
        /* W3C */
        background: -moz-linear-gradient(top, #cfdbe5 0%, #8da9c2 50%, #5B84A7 51%, #486a87 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfdbe5), color-stop(50%, #8da9c2), color-stop(51%, #5B84A7), color-stop(100%, #486a87));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #cfdbe5 0%, #8da9c2 50%, #5B84A7 51%, #486a87 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #cfdbe5 0%, #8da9c2 50%, #5B84A7 51%, #486a87 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #cfdbe5 0%, #8da9c2 50%, #5B84A7 51%, #486a87 100%);
        /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($color, 35%)', endColorstr='darken($color, 10%)',GradientType=0 );
        /* IE6-9 */ }
      #topTabsContainer #topTabs .iconPython .tabIcon {
        background-position: -329px 0px;
        width: 31px; }
    #topTabsContainer #topTabs .iconRuby {
      background: #d46161; }
      #topTabsContainer #topTabs .iconRuby.activeTab, #topTabsContainer #topTabs .iconRuby:hover {
        background: #DA4242;
        /* Old browsers */
        background: linear-gradient(to bottom, #f7d7d7 0%, #e78282 50%, #DA4242 51%, #c32626 100%);
        /* W3C */
        background: -moz-linear-gradient(top, #f7d7d7 0%, #e78282 50%, #DA4242 51%, #c32626 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7d7d7), color-stop(50%, #e78282), color-stop(51%, #DA4242), color-stop(100%, #c32626));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #f7d7d7 0%, #e78282 50%, #DA4242 51%, #c32626 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #f7d7d7 0%, #e78282 50%, #DA4242 51%, #c32626 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #f7d7d7 0%, #e78282 50%, #DA4242 51%, #c32626 100%);
        /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($color, 35%)', endColorstr='darken($color, 10%)',GradientType=0 );
        /* IE6-9 */ }
      #topTabsContainer #topTabs .iconRuby .tabIcon {
        background-position: -366px 0px;
        width: 27px; }
    #topTabsContainer #topTabs .iconPHP {
      background: #8f8fac; }
      #topTabsContainer #topTabs .iconPHP.activeTab, #topTabsContainer #topTabs .iconPHP:hover {
        background: #7575AC;
        /* Old browsers */
        background: linear-gradient(to bottom, #e4e4ef 0%, #a5a5c9 50%, #7575AC 51%, #595995 100%);
        /* W3C */
        background: -moz-linear-gradient(top, #e4e4ef 0%, #a5a5c9 50%, #7575AC 51%, #595995 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4e4ef), color-stop(50%, #a5a5c9), color-stop(51%, #7575AC), color-stop(100%, #595995));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #e4e4ef 0%, #a5a5c9 50%, #7575AC 51%, #595995 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #e4e4ef 0%, #a5a5c9 50%, #7575AC 51%, #595995 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #e4e4ef 0%, #a5a5c9 50%, #7575AC 51%, #595995 100%);
        /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($color, 35%)', endColorstr='darken($color, 10%)',GradientType=0 );
        /* IE6-9 */ }
      #topTabsContainer #topTabs .iconPHP .tabIcon {
        background-position: -399px 0px;
        width: 46px; }
    #topTabsContainer #topTabs .iconJS {
      background: #dfd98f; }
      #topTabsContainer #topTabs .iconJS.activeTab, #topTabsContainer #topTabs .iconJS:hover {
        background: #E2D973;
        /* Old browsers */
        background: linear-gradient(to bottom, white 0%, #efeab2 50%, #E2D973 51%, #d9ce49 100%);
        /* W3C */
        background: -moz-linear-gradient(top, white 0%, #efeab2 50%, #E2D973 51%, #d9ce49 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(50%, #efeab2), color-stop(51%, #E2D973), color-stop(100%, #d9ce49));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, white 0%, #efeab2 50%, #E2D973 51%, #d9ce49 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, white 0%, #efeab2 50%, #E2D973 51%, #d9ce49 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, white 0%, #efeab2 50%, #E2D973 51%, #d9ce49 100%);
        /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($color, 35%)', endColorstr='darken($color, 10%)',GradientType=0 );
        /* IE6-9 */ }
      #topTabsContainer #topTabs .iconJS .tabIcon {
        background-position: -451px 0px;
        width: 28px; }
    #topTabsContainer #topTabs .iconVB {
      background: #88afae; }
      #topTabsContainer #topTabs .iconVB.activeTab, #topTabsContainer #topTabs .iconVB:hover {
        background: #6eb0af;
        /* Old browsers */
        background: linear-gradient(to bottom, #e2efef 0%, #a0cbca 50%, #6eb0af 51%, #539897 100%);
        /* W3C */
        background: -moz-linear-gradient(top, #e2efef 0%, #a0cbca 50%, #6eb0af 51%, #539897 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e2efef), color-stop(50%, #a0cbca), color-stop(51%, #6eb0af), color-stop(100%, #539897));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #e2efef 0%, #a0cbca 50%, #6eb0af 51%, #539897 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #e2efef 0%, #a0cbca 50%, #6eb0af 51%, #539897 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #e2efef 0%, #a0cbca 50%, #6eb0af 51%, #539897 100%);
        /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($color, 35%)', endColorstr='darken($color, 10%)',GradientType=0 );
        /* IE6-9 */ }
      #topTabsContainer #topTabs .iconVB .tabIcon {
        background-position: -485px 0px;
        width: 28px; }
    #topTabsContainer #topTabs .iconPerl {
      background: #6a9ab3; }
      #topTabsContainer #topTabs .iconPerl.activeTab, #topTabsContainer #topTabs .iconPerl:hover {
        background: #4D93B7;
        /* Old browsers */
        background: linear-gradient(to bottom, #cce0ea 0%, #83b4cd 50%, #4D93B7 51%, #3c7795 100%);
        /* W3C */
        background: -moz-linear-gradient(top, #cce0ea 0%, #83b4cd 50%, #4D93B7 51%, #3c7795 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cce0ea), color-stop(50%, #83b4cd), color-stop(51%, #4D93B7), color-stop(100%, #3c7795));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #cce0ea 0%, #83b4cd 50%, #4D93B7 51%, #3c7795 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #cce0ea 0%, #83b4cd 50%, #4D93B7 51%, #3c7795 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #cce0ea 0%, #83b4cd 50%, #4D93B7 51%, #3c7795 100%);
        /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($color, 35%)', endColorstr='darken($color, 10%)',GradientType=0 );
        /* IE6-9 */ }
      #topTabsContainer #topTabs .iconPerl .tabIcon {
        background-position: -517px 0px;
        width: 30px; }
    #topTabsContainer #topTabs .iconCpp {
      background: #93b4d3; }
      #topTabsContainer #topTabs .iconCpp.activeTab, #topTabsContainer #topTabs .iconCpp:hover {
        background: #78A8D4;
        /* Old browsers */
        background: linear-gradient(to bottom, white 0%, #b2cde6 50%, #78A8D4 51%, #518fc8 100%);
        /* W3C */
        background: -moz-linear-gradient(top, white 0%, #b2cde6 50%, #78A8D4 51%, #518fc8 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(50%, #b2cde6), color-stop(51%, #78A8D4), color-stop(100%, #518fc8));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, white 0%, #b2cde6 50%, #78A8D4 51%, #518fc8 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, white 0%, #b2cde6 50%, #78A8D4 51%, #518fc8 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, white 0%, #b2cde6 50%, #78A8D4 51%, #518fc8 100%);
        /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($color, 35%)', endColorstr='darken($color, 10%)',GradientType=0 );
        /* IE6-9 */ }
      #topTabsContainer #topTabs .iconCpp .tabIcon {
        background-position: -553px 0px;
        width: 27px; }
    #topTabsContainer #topTabs .iconSwift {
      background: #eb9a8f; }
      #topTabsContainer #topTabs .iconSwift.activeTab, #topTabsContainer #topTabs .iconSwift:hover {
        background: #EF8172;
        /* Old browsers */
        background: linear-gradient(to bottom, white 0%, #f7beb7 50%, #EF8172 51%, #ea5844 100%);
        /* W3C */
        background: -moz-linear-gradient(top, white 0%, #f7beb7 50%, #EF8172 51%, #ea5844 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(50%, #f7beb7), color-stop(51%, #EF8172), color-stop(100%, #ea5844));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, white 0%, #f7beb7 50%, #EF8172 51%, #ea5844 100%);
        /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, white 0%, #f7beb7 50%, #EF8172 51%, #ea5844 100%);
        /* Opera 11.10+ */
        background: -ms-linear-gradient(top, white 0%, #f7beb7 50%, #EF8172 51%, #ea5844 100%);
        /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($color, 35%)', endColorstr='darken($color, 10%)',GradientType=0 );
        /* IE6-9 */ }
      #topTabsContainer #topTabs .iconSwift .tabIcon {
        background-position: -586px 0px;
        width: 30px; }

.tabPageEditorBG {
  background: #EFEFEF;
  /* Old browsers */
  background: linear-gradient(to bottom, #d5d5d5 0%, white 100%);
  /* W3C */
  background: -moz-linear-gradient(top, #d5d5d5 0%, white 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d5d5d5), color-stop(100%, white));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #d5d5d5 0%, white 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #d5d5d5 0%, white 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #d5d5d5 0%, white 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken($color, 10%)', endColorstr='lighten($color, 42%)', GradientType=0 );
  /* IE6-9 */ }

.tabPageJavaBG {
  background: #E69750;
  /* Old browsers */
  background: linear-gradient(to bottom, #e07c23 0%, white 100%);
  /* W3C */
  background: -moz-linear-gradient(top, #e07c23 0%, white 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e07c23), color-stop(100%, white));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #e07c23 0%, white 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #e07c23 0%, white 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #e07c23 0%, white 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken($color, 10%)', endColorstr='lighten($color, 42%)', GradientType=0 );
  /* IE6-9 */ }

.tabPageCSharpBG {
  background: #37B2D5;
  /* Old browsers */
  background: linear-gradient(to bottom, #2694b3 0%, #e8f6fa 100%);
  /* W3C */
  background: -moz-linear-gradient(top, #2694b3 0%, #e8f6fa 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2694b3), color-stop(100%, #e8f6fa));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #2694b3 0%, #e8f6fa 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #2694b3 0%, #e8f6fa 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #2694b3 0%, #e8f6fa 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken($color, 10%)', endColorstr='lighten($color, 42%)', GradientType=0 );
  /* IE6-9 */ }

.tabPagePythonBG {
  background: #5B84A7;
  /* Old browsers */
  background: linear-gradient(to bottom, #486a87 0%, #e6edf2 100%);
  /* W3C */
  background: -moz-linear-gradient(top, #486a87 0%, #e6edf2 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #486a87), color-stop(100%, #e6edf2));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #486a87 0%, #e6edf2 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #486a87 0%, #e6edf2 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #486a87 0%, #e6edf2 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken($color, 10%)', endColorstr='lighten($color, 42%)', GradientType=0 );
  /* IE6-9 */ }

.tabPageRubyBG {
  background: #DA4242;
  /* Old browsers */
  background: linear-gradient(to bottom, #c32626 0%, #fdf5f5 100%);
  /* W3C */
  background: -moz-linear-gradient(top, #c32626 0%, #fdf5f5 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c32626), color-stop(100%, #fdf5f5));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #c32626 0%, #fdf5f5 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #c32626 0%, #fdf5f5 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #c32626 0%, #fdf5f5 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken($color, 10%)', endColorstr='lighten($color, 42%)', GradientType=0 );
  /* IE6-9 */ }

.tabPagePHPBG {
  background: #7575AC;
  /* Old browsers */
  background: linear-gradient(to bottom, #595995 0%, #fbfbfc 100%);
  /* W3C */
  background: -moz-linear-gradient(top, #595995 0%, #fbfbfc 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #595995), color-stop(100%, #fbfbfc));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #595995 0%, #fbfbfc 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #595995 0%, #fbfbfc 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #595995 0%, #fbfbfc 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken($color, 10%)', endColorstr='lighten($color, 42%)', GradientType=0 );
  /* IE6-9 */ }

.tabPageJSBG {
  background: #E2D973;
  /* Old browsers */
  background: linear-gradient(to bottom, #d9ce49 0%, white 100%);
  /* W3C */
  background: -moz-linear-gradient(top, #d9ce49 0%, white 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9ce49), color-stop(100%, white));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #d9ce49 0%, white 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #d9ce49 0%, white 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #d9ce49 0%, white 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken($color, 10%)', endColorstr='lighten($color, 42%)', GradientType=0 );
  /* IE6-9 */ }

.tabPageVBBG {
  background: #6eb0af;
  /* Old browsers */
  background: linear-gradient(to bottom, #539897 0%, #f9fcfc 100%);
  /* W3C */
  background: -moz-linear-gradient(top, #539897 0%, #f9fcfc 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #539897), color-stop(100%, #f9fcfc));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #539897 0%, #f9fcfc 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #539897 0%, #f9fcfc 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #539897 0%, #f9fcfc 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken($color, 10%)', endColorstr='lighten($color, 42%)', GradientType=0 );
  /* IE6-9 */ }

.tabPagePerlBG {
  background: #4D93B7;
  /* Old browsers */
  background: linear-gradient(to bottom, #3c7795 0%, #e6f0f5 100%);
  /* W3C */
  background: -moz-linear-gradient(top, #3c7795 0%, #e6f0f5 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c7795), color-stop(100%, #e6f0f5));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #3c7795 0%, #e6f0f5 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #3c7795 0%, #e6f0f5 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #3c7795 0%, #e6f0f5 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken($color, 10%)', endColorstr='lighten($color, 42%)', GradientType=0 );
  /* IE6-9 */ }

.tabPageCppBG {
  background: #78A8D4;
  /* Old browsers */
  background: linear-gradient(to bottom, #518fc8 0%, white 100%);
  /* W3C */
  background: -moz-linear-gradient(top, #518fc8 0%, white 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #518fc8), color-stop(100%, white));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #518fc8 0%, white 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #518fc8 0%, white 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #518fc8 0%, white 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken($color, 10%)', endColorstr='lighten($color, 42%)', GradientType=0 );
  /* IE6-9 */ }

.tabPageSwiftBG {
  background: #EF8172;
  /* Old browsers */
  background: linear-gradient(to bottom, #ea5844 0%, white 100%);
  /* W3C */
  background: -moz-linear-gradient(top, #ea5844 0%, white 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ea5844), color-stop(100%, white));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ea5844 0%, white 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ea5844 0%, white 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ea5844 0%, white 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='darken($color, 10%)', endColorstr='lighten($color, 42%)', GradientType=0 );
  /* IE6-9 */ }

.tabPage {
  position: absolute;
  top: 11px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  overflow-y: scroll;
  border: 1px solid #CCC;
  background: #FFF;
  display: none; }
  .tabPage .hljs {
    padding: 10px !important;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    -webkit-box-shadow: inset 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 3px 3px 10px -2px rgba(0, 0, 0, 0.2);
    box-shadow: inset 3px 3px 10px -2px rgba(0, 0, 0, 0.2); }

.GenHeader {
  padding: 10px;
  font-size: 14px;
  color: #555; }
  .GenHeader label {
    font-weight: 600; }
  .GenHeader .options {
    padding: 8px 0px 2px 20px; }

#tabPage_JS {
  padding: 0px;
  margin: 0px; }
  #tabPage_JS .GenHeader {
    background: #F5FFCB;
    border-bottom: 1px solid #D9CE4B; }

#tabPage_VB {
  padding: 0px;
  margin: 0px; }
  #tabPage_VB .GenHeader {
    background: #CBE2E2;
    border-bottom: 1px solid #549998; }

.tabsRow {
  display: inline-block; }

/*
	This is the main stylesheet for the class Editor interface.

	The editor consists of a serries of expandable / collapsable regions, similar to a jQuery accordian.

	The editor is also responsible for all the input controls, such as textboxes and buttons.
*/
#divEditor {
  padding: 10px;
  width: 671px; }
  #divEditor p {
    margin: 4px 0px 0px;
    font-size: 12px;
    color: #616161; }
  #divEditor input {
    padding: 4px;
    font-weight: 600;
    font-size: 14px;
    font-family: "Lucida Console", Monaco, monospace; }
    #divEditor input::-webkit-input-placeholder {
      font-style: italic;
      font-weight: 100; }
    #divEditor input:-moz-placeholder {
      font-style: italic;
      font-weight: 100; }
    #divEditor input::-moz-placeholder {
      font-style: italic;
      font-weight: 100; }
    #divEditor input:-ms-input-placeholder {
      font-style: italic;
      font-weight: 100; }
  #divEditor button {
    padding: 4px 10px;
    color: #333;
    float: right; }
  #divEditor label {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 14px;
    margin-right: 15px; }
  #divEditor table {
    font-size: 12px;
    font-family: "Lucida Console", Monaco, monospace;
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #999999; }
    #divEditor table tr {
      background: #E6E6E6; }
      #divEditor table tr:nth-child(odd) {
        background: #F8F8F8; }
      #divEditor table tr:nth-child(1) {
        background: #999;
        color: #FFF;
        font-size: 14px; }
      #divEditor table tr .deleteRow {
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: -30px;
        width: 29px;
        background: red;
        cursor: pointer;
        border: 1px solid #999;
        border-left: 0px none;
        font-weight: 600;
        color: white;
        text-align: center;
        padding: 3px 0px 0px;
        visibility: hidden; }
        #divEditor table tr .deleteRow:hover {
          text-decoration: underline; }
      #divEditor table tr:hover .deleteRow {
        visibility: visible; }
    #divEditor table .deleteRowTr td, #divEditor table .deleteRowTr div, #divEditor table .deleteRowTr span, #divEditor table .deleteRowTr select {
      background: red !important;
      color: white !important; }
    #divEditor table td {
      padding: 2px 10px;
      position: relative; }
    #divEditor table select {
      font-size: 12px;
      font-family: "Lucida Console", Monaco, monospace;
      background: transparent;
      border: 0px none !important; }
    #divEditor table .editableTextField {
      cursor: pointer;
      overflow: hidden;
      max-width: 93px !important;
      display: inline-block; }
      #divEditor table .editableTextField.unset {
        font-style: italic; }
    #divEditor table .editableTextField:hover {
      text-decoration: underline; }
    #divEditor table .editInPlaceBox {
      font-size: 12px;
      font-weight: 100;
      padding: 0px;
      margin-bottom: -1px; }
  #divEditor .toggleBar {
    color: #FEFEFE;
    font-weight: 100;
    padding: 2px 5px;
    cursor: pointer;
    margin-bottom: 0px !important;
    background: #7EB0CE;
    border-top: 1px solid #A6C3D4;
    border-bottom: 1px solid #598DAD; }
  #divEditor .toggleWrapper {
    padding: 10px 30px 15px 30px;
    background: #EBF4F7;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #DEEAEF; }
  #divEditor .infobox {
    font-size: 12px; }
    #divEditor .infobox .warning {
      padding: 0px 7px;
      background: #FFFCD1;
      border-bottom: 1px solid #CECA92;
      border-top: 1px solid #FFF; }

img {
  border: none; }

html {
  overflow: -moz-scrollbars-vertical;
  overflow: scroll; }

body {
  font-family: 'Open Sans', sans-serif;
  padding: 0px;
  margin: 0px;
  background: #cccccc;
  min-width: 1008px !important;
  min-height: 585px !important; }

pre {
  margin: 0px; }

#divMainContentArea {
  position: absolute;
  top: 60px;
  bottom: 40px;
  left: 0px;
  right: 0px;
  min-width: 1008px !important;
  min-height: 465px !important;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #000;
  background: #EAE8E8; }
  #divMainContentArea h1, #divMainContentArea h2, #divMainContentArea h3, #divMainContentArea h4, #divMainContentArea h5 {
    margin: 0px 0px 4px; }
  #divMainContentArea h1 {
    color: #222; }
  #divMainContentArea h2, #divMainContentArea h3, #divMainContentArea h4, #divMainContentArea h5 {
    color: #555; }

#divWelcome {
  padding: 25px !important; }
  #divWelcome .indent {
    margin-left: 20px; }
  #divWelcome ol {
    margin: 0px; }


.SubTab .javascript, .SubTab .typescript, .SubTab .vbnet, .SubTab .vbscript {
    top: 70px !important;
}