/* Defaults / Desktop View */
/* ********************************************************************************************************** */

    .container { position:relative; margin:0px auto; padding:0px; width: 260px; height: 90%; overflow: hidden; }
    .ps-scrollbar-x { margin-top: 20px;}
    .ps-scrollbar-x { display: none !important;}

  body {
    background-color: #FFFFFF;
    font-family: Open Sans, Verdana, Arial, sans-serif;
    border: 0px; margin: 0px; padding: 0px;
    color: #222222;
    font-size: 18px;
  }
  .white {
    color: #FFFFFF;
  }
  p { line-height: 28px; }
  p.header-paragraph { line-height: 32px;}

  a { color: #2075a3; text-decoration: none;}

  h1 a, h2 a, h3 a { color: #222222; text-decoration: none;}
  p.color-link, p.color-link a { font-weight: 600; color: #157afb; }
  p.color-link a:hover { color: #888888; }
  a.color-link { font-weight: 600; color: #157afb; }
  a:hover, h1 a:hover, h2 a:hover, h3 a:hover { color: #555555; text-decoration: none;}
  a.blue { color: #2075a3; }
  #footer a { color: #FFFFFF;}
  #footer a:hover { color: #888888;}

  hr { margin: 40px 0px; border: none; height: 1px; color: #cdcdcd; background-color: #cdcdcd; }

  .crumbs { margin-top: 2px; }
  .crumbs, .crumbs span, .crumbs a { color: #666; font-size: 14px; font-style: italic; }
  .crumbs a:hover, .crumbs span:hover { color: #999;}

  h1 {
    text-align: center;
    font-weight: 300;
    font-size: 60px;
    margin: 0px;
    padding: 0px;
    text-align: left;
  }
  h2 {
    font-family: 'Noto Serif', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 34px;
    margin: 0px;
    padding: 0px;
  }
  h3 {
    font-family: 'Noto Serif', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 26px;
    padding: 0px;
    width: 80%;
    margin-top: 60px;
    margin-bottom: 60px;
  }
  h3.nowidth {
    width: auto;
  }
  h4 {
    font-weight: 100;
      font-size: 36px;
      margin: 0px;
      padding: 0px 0px 20px 0px;
  }
  h5 {
    font-weight: 700;
      font-size: 18px;
      margin: 0px;
      padding: 20px 0px 0px 0px;
  }
  ul.purple {
    margin: 0px;
    padding: 0px;
  }
  ul.purple li {
    list-style-type: none;
    border-left: 4px solid #c56fd5;
    padding-left: 15px;
    margin-bottom: 25px;
    width: 65%;

  }
  .dotted-div {
    background: url("../i/div-dotted.png") repeat-x;
    margin-bottom: 70px;
    height: 1px;
    clear: both;
  }
  .solid-div {
    border-bottom: 3px solid #050708;
    height: 3px;
  }

  #watch-video-button .wrap .button {
    width: 254px;
    height: 42px;
    background-color: #c56fd5;
    margin-left: auto;
    margin-right: auto;
    margin-top: -28px;
    color: #FFFFFF;
    text-align: center;
    padding-top: 14px;
    font-weight: 600;
    -moz-border-radius: 50px;
    border-radius: 50px;
  }

  #watch-video-button .wrap .button:hover {
    color: #111111;
    cursor: pointer;
  }

  #header { padding: 100px 0px 50px 0px; background-color: #222222;}
  #header #header-logos { height: 60px; }
  #header #new-school { margin: -7px 0px 0px 20px;}
  #header #new-school-homepage { margin: -7px 0px 0px 20px;}

  .wrap.homepage { padding-top: 100px; }

  body.sub-page #header #new-school { color: #FFFFFF; text-align: left; font-size: 26px; padding: 0px; margin: -8px 0px 0px 17px;}
  body.sub-page #header h1 { color: #FFFFFF; text-align: left; margin-top: 30px; }


  body.sub-page #header #header-logos { height: auto; margin-top: -45px; margin-left: 4px;   }
  body.sub-page #header #subhead-section { height: 141px;  }


  body.sub-page #header .subhead-methods { background: #222222 url("../i/icon-header-methods.png") no-repeat top right; }
  body.sub-page #header .subhead-icon-header-language { background: #222222 url("../i/icon-header-language.png") no-repeat top right; }
  body.sub-page #header .subhead-icon-header-interaction { background: #222222 url("../i/icon-header-interaction.png") no-repeat top right; }
  body.sub-page #header .subhead-icon-header-visual { background: #222222 url("../i/icon-header-visual.png") no-repeat top right; }
  body.sub-page #header .subhead-icon-header-motion { background: #222222 url("../i/icon-header-motion.gif") no-repeat top right; }

  #header-navigation { padding: 60px 0px 60px 0px; background-color: #FFFFFF;}
  #header-navigation img { float: left;}

  #header-navigation #nav-the-language { display: inline-block; background: url("../i/nav-the-language.png") no-repeat; margin: 0px 0px -5px 0px; padding: 0px 5px 0px 0px; width: 456px; height: 221px; font-size: 0px; text-indent: -1000em;}
  #header-navigation #nav-the-method { display: inline-block; background: url("../i/nav-design-method.png") no-repeat; margin: 0px 0px -5px 0px; padding: 0px 0px 0px 0px; width: 464px; height: 221px; font-size: 0px; text-indent: -1000em;}
  #header-navigation #nav-interaction { display: inline-block; background: url("../i/nav-interaction.png") no-repeat; margin: -5px 0px -5px 0px; padding: 0px 5px 0px 0px; width: 303px; height: 221px; font-size: 0px; text-indent: -1000em;}
  #header-navigation #nav-motion { display: inline-block; background: url("../i/nav-motion.png") no-repeat; margin: 0px; margin: -5px 0px -5px 0px; padding: 0px 5px 0px 0px; width: 304px; height: 221px; font-size: 0px; text-indent: -1000em;}
  #header-navigation #nav-visual { display: inline-block; background: url("../i/nav-visual.png") no-repeat; margin: 0px; margin: -5px 0px -5px 0px; padding: 0px 0px 0px 0px; width: 303px; height: 221px; font-size: 0px; text-indent: -1000em;}
  #header-navigation #nav-the-language:hover { background: url("../i/nav-the-language_over.gif") no-repeat; }
  #header-navigation #nav-the-method:hover { background: url("../i/nav-design-method_over.gif") no-repeat; }
  #header-navigation #nav-interaction:hover { background: url("../i/nav-interaction_over.gif") no-repeat; }
  #header-navigation #nav-motion:hover { background: url("../i/nav-motion_over.gif") no-repeat; }
  #header-navigation #nav-visual:hover { background: url("../i/nav-visual_over.gif") no-repeat; }

  #subhead-banner { background-color: #26d7fd; color: #FFFFFF; }
  #subhead-banner h1 { font-family: 'Noto Serif', serif;  font-weight: 400; font-style: italic; font-size: 34px; padding: 90px 19.531% 90px 19.531%; }

  #the-story h1 { color: #FFFFFF; padding-top: 40px;}
  #the-story h2 { color: #FFFFFF;}
  #the-story { background-color: #282729; }
  #the-story .intro-to-new-school { margin: 70px 0px 70px 0px; width: 930px; height: 575px;  }


  #color-heading-ui-toolkit { background-color: #26d7fd;}
  .heading-div-ui-toolkit { padding: 40px; }
  .heading-div-ui-toolkit img { max-width: 100%; height: auto; }
  .header-text-ui-toolkit { padding: 0px 0px 40px 0px;}
  .sub-div-ui-toolkit { padding: 40px 0px 20px 0px;}

  #additional-content {
    margin-top: 50px;
  }

  #additional-content .additional-content-item { float: left; width: 32.714%; margin: 0px 22px 0px 0px;}
  #additional-content .additional-content-item #the-language-header {
    background: url("../i/icon-the-language.png") no-repeat;
    padding-top: 70px;
    margin-top: -10px;
  }
  #additional-content .additional-content-item #the-resources-header {
    background: url("../i/icon-the-resources.png") no-repeat;
    padding-top: 70px;
    margin-top: -10px;
  }
  #additional-content .additional-content-half-item {
    float: left;
    width: 45.07%;
    /* padding: 60px 4.6875% 0px 0px; */
    padding: 20px 4.6875% 0px 0px;
  }

  #additional-content .additional-content-full-item {
    padding: 60px 0px 0px 0px;
  }

  #additional-content .additional-content-half-item#img-please-explain { height: 400px; background: url("../i/illustration_pleaseExplain.png") no-repeat 0px 60px; }
  #additional-content .additional-content-half-item#img-synthesis { height: 400px; background: url("../i/illustration_synthesis.png") no-repeat 0px 60px; }
  #additional-content .additional-content-half-item#img-concepting { height: 400px; background: url("../i/illustration_concepting.png") no-repeat 0px 60px; }

  #additional-content .additional-content-half-item#synthesis-text p { padding-left: 40px; }
  #additional-content .additional-content-half-item#synthesis-text h2 { padding-left: 40px; }


  #additional-content .additional-content-quarter-item {
    float: left;
    width: 24%;
    padding: 60px 1% 0px 0px;
  }

  #additional-content .additional-content-two-third-item {
    float: left;
    width: 61.4296%;
  }
  .additional-content-one-third-item {
    float: left;
    width: 30.664%;
    padding: 0px 0px 0px 0px;
  }
  #additional-content .padding-right {
    padding: 0px 40px 0px 0px;
  }
  #additional-content .padding-left {
    padding: 0px 0px 0px 40px;
  }

  .nav-button-image { width: 100%;}

  #interaction-patterns .pattern, #visual-patterns .pattern, #motion-patterns .pattern, #components-patterns .pattern { float: left; margin: 0px 10px 10px 0px; padding: 0px;}
  #interaction-patterns .pattern.last, #visual-patterns .pattern.last, #motion-patterns .pattern.last, #components-patterns .pattern.last { margin: 0px 0px 10px 0px; padding: 0px;}

  .intent-div, .language-div, .interaction-div, .visual-div, .motion-div, .components-div, .resources-div, .whatsnew-div  { margin-top: 80px; }

  .color-heading-div, .primary-color-div, .resources-heading-div, .whatsnew-heading-div, .components-heading-div  { padding-top: 80px; padding-bottom: 80px;}
  #color-heading { background-color: #e5e5e5;}
  #primary-colors { background-color: #f8f8f8; }

  .individual-color { width: 100%; padding: 30px 0px 30px 0px; clear: both; }
  .individual-color .color-swatch { height: 100px; width: 100px; -moz-border-radius: 50px; border-radius: 50px; float: left; }
  .individual-color .color-swatch-small { height: 70px; width: 70px; -moz-border-radius: 35px; border-radius: 35px; float: left; }
  .individual-color .color-name { width: 20.484%; float: left; padding: 0px 30px 0px 30px;}
  .individual-color .color-name-override {
  width: 60%;
}
  .individual-color .color-name .color-element-name { display: block; text-transform: uppercase;}
  .individual-color .color-name .color-element-name-lowercase { display: block;}
  .individual-color .color-name .color-element-hex { color: #333333; font-size: 34px; font-weight: 700;}
  .individual-color .color-description { width: 53.476%; float: left; }
  .individual-color .color-description .used-for-label { display: block; font-style: italic; }

  .individual-color .color-swatch#menu-grey { background-color: #272727; }
  .individual-color .color-swatch#dark-grey { background-color: #333333; }
  .individual-color .color-swatch#middle-grey { background-color: #666666; }
  .individual-color .color-swatch#component-grey { background-color: #cdcdcd; }
  .individual-color .color-swatch#light-grey { background-color: #e5e5e5; }
  .individual-color .color-swatch#background-grey { background-color: #f8f8f8;  border: 1px solid #cdcdcd; }
  .individual-color .color-swatch#extra-light-grey { background-color: #ffffff; border: 1px solid #cdcdcd; }
  .individual-color .color-swatch#bb-purple { background-color: #c56fd5; }
  .individual-color .color-swatch#bb-bright-blue { background-color: #26d7fd; }
  .individual-color .color-swatch#bb-red-orange { background-color: #ff6600; }
  .individual-color .color-swatch#bb-yellow { background-color: #ffe300; }
  .individual-color .color-swatch#bb-dark-blue { background-color: #2075a3; }
  .individual-color .color-swatch#bb-green { background-color: #39e379; }
  .individual-color .color-swatch#bb-red { background-color: #ff3b30; }
  .individual-color .color-swatch#bb-orange { background-color: #ff9600; }
  .individual-color .color-swatch#bb-grade-a { background-color: #39e379; }
  .individual-color .color-swatch#bb-grade-b { background-color: #ffe300; }
  .individual-color .color-swatch#bb-grade-c { background-color: #ff9600; }
  .individual-color .color-swatch#bb-grade-d { background-color: #ff6600; }
  .individual-color .color-swatch#bb-grade-f { background-color: #ff3b30; }
  .individual-color .color-swatch#course-blue { background-color: #157afb; }
  .individual-color .color-swatch#course-bluegreen { background-color: #14c6cc; }
  .individual-color .color-swatch#course-teal { background-color: #85f3da; }
  .individual-color .color-swatch#course-yellowgreen { background-color: #80f56b; }
  .individual-color .color-swatch#course-pink { background-color: #ff5991; }
  .individual-color .color-swatch#course-magenta { background-color: #cc14ae; }
  .individual-color .bb-grade-item h3 { color: #FFFFFF; font-size: 60px; text-align: center; width: 100%; padding: 0px; margin: 0px; padding-top: 4px; }

  .one-third-color { float: left; width: 32.664%; padding: 0px 0px 0px 0px; }
  #brand-colors, #icons { background-color: #f8f8f8;}

  .using-color-div, .brand-color-div, .visual-sub-div, .interaction-sub-div, .motion-sub-div, .components-sub-div, .resources-sub-div, .whatsnew-sub-div  { padding-top: 80px; padding-bottom: 80px;}
  #using-color-details { width: 48%; margin-left: auto; margin-right: auto; text-align: center; padding: 40px 0px 0px 0px;}
  #using-color-details #lets-say-blue { height: 100px; width: 100px; -moz-border-radius: 50px; border-radius: 50px; text-align: center; background-color: #26d7fd; margin-left: auto; margin-right: auto; color: #FFFFFF;}
  #using-color-details #lets-say-blue h3#lets-say-blue-swatch { padding: 0px; margin: 0px; text-align: center; width: 100%; padding: 10px 0px 0px 0px;}
  #using-color-details h3 { width: 100%; margin-top: 40px; margin-bottom: 40px; }
  #using-color-details #chemistry-course { color: #ffffff; height: 120px; line-height: 120px; background: #26d7fd url('../i/icon-course.png') no-repeat 80px 20px;}
  #using-color-details #chemistry-course h3 { padding-left: 20px;}

  .brand-color-div h3 { margin: 0px; }
  .brand-color-div h2 { margin: 40px 0px 20px 0px; }

  #goals .goals-div { margin-top: 80px;}

  #icons #icon-types { margin-right: 20px; margin-bottom: 20px; }
  #icons #icon-types h3 { margin-top: 130px; margin-bottom: 0px; }
  #icons #icon-types p.header { margin-top: 130px; margin-bottom: 0px; font-weight: bold; }

  #icons #icon-types p {  }
  #icons #icon-types #icon-list-items { background: url("../i/icon-list-item.png") no-repeat; }
  #icons #icon-types #icon-menu-item { background: url("../i/icon-menu-item.png") no-repeat; }
  #icons #icon-types #icon-header-item { background: url("../i/icon-header-item.png") no-repeat; }
  #icons #icon-types #icon-inline-items { background: url("../i/icon-inline-item.png") no-repeat; }
  #icons #icon-types #icon-dynamic-item { background: url("../i/icon-dynamic-item.png") no-repeat; }
  #icons #icon-types #icon-header-bar { background: url("../i/icon-header-bar.png") no-repeat; }
  #icons #icon-types #icon-avatar { background: url("../i/icon-avatar.png") no-repeat; }
  #icons #icon-types #icon-illustrations { background: url("../i/icon-illustration.png") no-repeat; }

  #additional-content .icon-state-div h3 { width: 100%; }
  #additional-content .icon-state-div .additional-content-half-item { padding-right: 40px; width: auto; }
  #additional-content .icon-state-div .additional-content-half-item.last { padding-right: 0px; width: auto; }
  #additional-content .icon-state-div h3, #additional-content .icon-resolution-div h3 { margin-top: 20px;}
  #additional-content .icon-state-div p.header { margin-top: 20px; font-weight: bold; }

  #additional-content .icon-full-width-blue { background: url("../i/icon-open-item-large.png") no-repeat center center; margin-top: 20px; background-color: #26d7fd; width: 100%; text-align: center; height: 215px;}

  #additional-content .icon-resolution-div #icon-mdpi { background: url("../i/icon-mdpi.png") no-repeat 0px 80px; }
  #additional-content .icon-resolution-div #icon-hdpi { background: url("../i/icon-hdpi.png") no-repeat 0px 60px; }
  #additional-content .icon-resolution-div #icon-xhdpi { background: url("../i/icon-xhdpi.png") no-repeat 0px 40px; }
  #additional-content .icon-resolution-div #icon-xxhdpi { background: url("../i/icon-xxhdpi.png") no-repeat 0px 20px; }
  #additional-content .icon-resolution-div p.header { margin-top: 70px;}

  #icons #icon-types .icon-item { padding-right: 20px; }

  .interaction-sub-div .interaction-menu-item { margin-top: 40px;}
  .interaction-sub-div .interaction-menu-item-image { float: left; }
  .interaction-sub-div .interaction-menu-item-image.stacked { margin: 0px 0px 0px 20px; }
  .interaction-sub-div .interaction-menu-item-description, .interaction-error-item-description { float: left; margin: -10px 0px 0px 20px; width: 40%;}
  .interaction-sub-div .interaction-menu-item-description p.no-padding { margin-top: -10px;}
  .interaction-sub-div .interaction-menu-item.last { margin-bottom: 40px;}

  .interaction-sub-div .interaction-menu-item-image#Ultra_MotionStudies_NavigationContinued_container { width: 450px; height: 450px;}

  .interaction-sub-div .interaction-menu-item-image#nav-layer-tree-web-1_mini { background: url("../i/nav-layer-tree-web-1_mini.png") no-repeat 0px 0px; width: 537px; height: 125px; }
  .interaction-sub-div .interaction-menu-item-image#nav-layer-tree-web-2_mini { background: url("../i/nav-layer-tree-web-2_mini.png") no-repeat 0px 0px; width: 537px; height: 125px; }
  .interaction-sub-div .interaction-menu-item-image#nav-layer-tree-web-3_mini { background: url("../i/nav-layer-tree-web-3_mini.png") no-repeat 0px 0px; width: 537px; height: 125px; }
  .interaction-sub-div .interaction-menu-item-image#nav-layer-tree-web-5_mini { background: url("../i/nav-layer-tree-web-5_mini.png") no-repeat 0px 0px; width: 537px; height: 125px; }

  .interaction-sub-div .interaction-menu-item-image#menu-web-expanded { background: url("../i/menu-web-expanded.png") no-repeat 0px 0px; width: 592px; height: 527px; }
  .interaction-sub-div .interaction-menu-item-image #menu-web-breakpoint-1-collapsed { float: left; background: url("../i/menu-web-breakpoint-1-collapsed.png") no-repeat 0px 0px; width: 286px; height: 527px; }
  .interaction-sub-div .interaction-menu-item-image #menu-web-breakpoint-1-expanded { float: left; background: url("../i/menu-web-breakpoint-1-expanded.png") no-repeat 0px 0px; width: 286px; height: 527px; margin-left: 20px;}
  .interaction-sub-div .interaction-menu-item-image #menu-web-breakpoint-2-collapsed { float: left; background: url("../i/menu-web-breakpoint-2-collapsed.png") no-repeat 0px 0px; width: 286px; height: 527px; }
  .interaction-sub-div .interaction-menu-item-image #menu-web-breakpoint-2-expanded { float: left; background: url("../i/menu-web-breakpoint-2-expanded.png") no-repeat 0px 0px; width: 286px; height: 527px; margin-left: 20px;}

  .interaction-sub-div .interaction-error-item-image#error-list-item { float: left; background: url("../i/interaction-error-list-item.png") no-repeat 0px 0px; width: 487px; height: 400px; margin: 20px 20px 0px 0px;}
  .interaction-sub-div .interaction-error-item-image#error-banner-item { float: left; background: url("../i/interaction-error-banner.png") no-repeat 0px 0px; width: 225px; height: 400px; margin: 20px 20px 0px 0px;}
  .interaction-sub-div .interaction-error-item-image#error-text-error-item { float: left; background: url("../i/interaction-error-text.png") no-repeat 0px 0px; width: 487px; height: 400px; margin: 20px 20px 0px 0px;}
  .interaction-sub-div .interaction-menu-item-description .streamCounter { background: url("../i/menu-web-stream-item.png") no-repeat 0px 0px; width: 24px; display: inline-block;}

  .visual-sub-div .error-type-item { display: inline-block; margin-bottom: 20px; width: 313px; margin-right: 25px; vertical-align: top;}

  .visual-sub-div.errors h3 { margin: 30px 0px 10px 0px; }
  .visual-sub-div .vis-errors#vis-error-inline { background: url("../i/vis-error-inline-error.png") no-repeat 0px 0px; width: 313px; height: 110px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-error-auth-error { background: url("../i/vis-error-auth-error.png") no-repeat 0px 0px; width: 313px; height: 110px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-error-system-not-responding { background: url("../i/vis-error-system-not-responding.png") no-repeat 0px 0px; width: 313px; height: 110px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-error-item-error { background: url("../i/vis-error-item-error.png") no-repeat 0px 0px; width: 313px; height: 110px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-error-user-error { background: url("../i/vis-error-user-error.png") no-repeat 0px 0px; width: 313px; height: 110px; display: inline-block; margin-top: 20px; }

  .visual-sub-div .error-type-item-half { display: inline-block; margin-bottom: 20px; width: 493px; margin-right: 15px; vertical-align: top;}
  .visual-sub-div .vis-errors#vis-error-color { background: url("../i/vis-error-color.png") no-repeat 0px 0px; width: 493px; height: 151px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-error-icon { background: url("../i/vis-error-icon.png") no-repeat 0px 0px; width: 493px; height: 151px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-error-caption { background: url("../i/vis-error-caption.png") no-repeat 0px 0px; width: 493px; height: 151px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-error-call-to-action { background: url("../i/vis-error-call-to-action.png") no-repeat 0px 0px; width: 493px; height: 151px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-error-white-on-red { background: url("../i/vis-error-white-on-red.png") no-repeat 0px 0px; width: 493px; height: 151px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-error-red-on-white { background: url("../i/vis-error-red-on-white.png") no-repeat 0px 0px; width: 493px; height: 151px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-error-standard { background: url("../i/vis-error-standard.png") no-repeat 0px 0px; width: 493px; height: 151px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-error-individual-item-error { background: url("../i/vis-error-individual-item-error.png") no-repeat 0px 0px; width: 493px; height: 151px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-error-messaging-tone { background: url("../i/vis-error-messaging-tone.png") no-repeat 0px 0px; width: 709px; height: 667px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-error-tone-container { text-align: center; }
  .visual-sub-div .vis-errors#ftue-mobile { background: url("../i/vis-ftue-mobile-small.png") no-repeat 0px 0px; width: 800px; height: 774px; margin: 20px 20px 0px 0px;}

  .visual-sub-div .vis-errors#vis-notification-modal { background: url("../i/vis-notification-modal.png") no-repeat 0px 0px; width: 314px; height: 200px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-notification-toast { background: url("../i/vis-notification-toast.png") no-repeat 0px 0px; width: 314px; height: 200px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .vis-errors#vis-notification-badge { background: url("../i/vis-notification-badge.png") no-repeat 0px 0px; width: 314px; height: 200px; display: inline-block; margin-top: 20px; }

  .visual-sub-div .navigation-half-section { display: inline-block; width: 45%;  vertical-align: top;  }
  .visual-sub-div .navigation-half-section li { margin-bottom: 10px;  }
  .visual-sub-div .navigation-half-section#vis-modal-takeover { background: url("../i/vis-modal-takeover.png") no-repeat 0px 0px; width: 492px; height: 278px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .navigation-half-section#vis-toast-notification { background: url("../i/vis-toast-notification.png") no-repeat 0px 0px; width: 492px; height: 332px; display: inline-block; margin-top: 20px; }
  .visual-sub-div .navigation-half-section#vis-badge-indicator { background: url("../i/vis-badge-indicator.png") no-repeat 0px 0px; width: 492px; height: 277px; display: inline-block; margin-top: 20px; }

  .visual-sub-div .vis-errors#vis-notification-messaging-tone { background: url("../i/vis-notification-messaging-tone.png") no-repeat 0px 0px; width: 709px; height: 667px; display: inline-block; margin-top: 20px; }





  .visual-sub-div .type-table td#large-font-size { font-size: 24px;  font-weight: 100;}
  .visual-sub-div .type-table td#medium-font-size { font-size: 17px;  font-weight: 600;}
  .visual-sub-div .type-table td#small-font-size { font-size: 13px;  font-weight: 500;}
  .visual-sub-div .type-table td#small-font-size-emphasis { font-size: 13px;  font-weight: 600; color: #333333;}
  .visual-sub-div .type-table td#extra-small-font-size-bold { font-size: 11px;  font-weight: 700; color: #333333;}
  .visual-sub-div .type-table td#extra-small-font-size { font-size: 11px;  font-weight: 500; color: #333333;}
  .visual-sub-div .type-table td#screen-titles { font-size: 17px; font-weight: 500; color: #FFFFFF;}
  .visual-sub-div .type-table td#secondary-screen-titles { font-size: 13px; font-weight: 500; color: #FFFFFF;}
  .visual-sub-div .type-table td#medium-font-size-black { font-size: 17px;  font-weight: 600; }
  .visual-sub-div .type-table td#small-font-size-black { font-size: 13px;  font-weight: 600; }
  .visual-sub-div .type-table td#item-section-titles { font-size: 13px; font-weight: 500; color: #333333; text-transform: uppercase;}
  .visual-sub-div .type-table td#grades { font-size: 15px; font-weight: 500; color: #222222;}
  .visual-sub-div .type-table td#grades .grading-green { display: block; float: left; background-color: #39e379; height: 21px; padding: 5px 10px 5px 10px; width: 135px;}
  .visual-sub-div .type-table td#grades .grading-green-bold { font-weight: 600;}
  .visual-sub-div .type-table td#grades .grading-yellow { display: block; float: left;  background-color: #ffe300; height: 31px;  width: 15px;}
  .visual-sub-div .type-table td#grades .grading-orange { display: block; float: left;  background-color: #ff9600; height: 31px;  width: 15px;}
  .visual-sub-div .type-table td#grades .grading-red { display: block; float: left;  background-color: #ff3b30; height: 31px;  width: 15px;}
  .visual-sub-div .type-table td#errors-warnings { font-size: 15px; font-weight: 600; color: #ff3b30;}

  .visual-sub-div .type-table td#web-large-font-size { font-family: 'Noto Serif', serif;  font-weight: 500; font-size: 30px;}
  .visual-sub-div .type-table td#web-large-font-size-headline { font-weight: 400; font-size: 30px;}
  .visual-sub-div .type-table td#web-large-body-copy { font-family: 'Noto Serif', serif;  font-weight: 500; font-size: 24px;}
  .visual-sub-div .type-table td#web-numerals { font-weight: 700; font-size: 24px;}
  .visual-sub-div .type-table td#web-medium-font-size { font-weight: 500; font-size: 24px;}
  .visual-sub-div .type-table td#web-medium-font-size-alt { font-weight: 500; font-size: 18px;}
  .visual-sub-div .type-table td#web-link-font { font-weight: 700; font-size: 14px;}
  .visual-sub-div .type-table td#web-link-font .underline, .visual-sub-div .type-table td#web-link-font-blue .underline { text-decoration: underline;}
  .visual-sub-div .type-table td#web-link-font-blue { color: #2075A3; font-weight: 600; font-size: 14px;}
  .visual-sub-div .type-table td#web-small-font { font-weight: 700; font-size: 14px;}
  .visual-sub-div .type-table td#web-small-font-semibold { font-weight: 600; font-size: 14px;}
  .visual-sub-div .type-table td#web-item-section-titles { font-weight: 500; font-size: 14px; text-transform: uppercase; }
  .visual-sub-div .type-table td#web-small-font-on-black .on-grey { font-weight: 600; font-size: 14px; background-color: #333333; color: #FFFFFF; display: block; padding: 1px 0px 1px 5px;}
  .visual-sub-div .type-table td#web-small-font-on-black .on-light-grey { font-weight: 600; font-size: 14px; background-color: #272727; color: #E5E5E5; display: block; padding: 1px 0px 1px 5px;}
  .visual-sub-div .type-table td#web-item-extra-small-font {  font-size: 12px;}
  .visual-sub-div .type-table td#web-item-extra-small-font-italic {  font-size: 12px; font-style: italic;}
  .visual-sub-div .type-table td#web-item-grading { color: #222222;}
  .visual-sub-div .type-table td#web-item-course-color { color: #222222;}
  .visual-sub-div .type-table td#web-item-error { font-weight: 600; font-size: 14px; color: #CC413A;}

  .visual-sub-div .type-table td#web-item-grading .grading-green { display: block; float: left; background-color: #39e379; height: 21px; padding: 5px 10px 5px 10px; width: 135px;}
  .visual-sub-div .type-table td#web-item-grading .grading-green-bold { font-weight: 600;}
  .visual-sub-div .type-table td#web-item-grading .grading-yellow { display: block; float: left;  background-color: #ffe300; height: 31px;  width: 15px;}
  .visual-sub-div .type-table td#web-item-grading .grading-orange { display: block; float: left;  background-color: #ff9600; height: 31px;  width: 15px;}
  .visual-sub-div .type-table td#web-item-grading .grading-red { display: block; float: left;  background-color: #ff3b30; height: 31px;  width: 15px;}

  .visual-sub-div .type-table td#web-item-course-color .course-colors-purple { display: block; float: left;  background-color: #C56FD5; height: 21px;  padding: 5px 10px 5px 10px; width: 135px;}
  .visual-sub-div .type-table td#web-item-course-color .course-colors-light-blue { display: block; float: left;  background-color: #26d7fd; height: 31px;  width: 15px;}
  .visual-sub-div .type-table td#web-item-course-color .course-colors-yellow { display: block; float: left;  background-color: #FFE300; height: 31px;  width: 15px;}
  .visual-sub-div .type-table td#web-item-course-color .course-colors-orange { display: block; float: left;  background-color: #ff6600; height: 31px;  width: 15px;}
  .visual-sub-div .type-table td#web-item-course-color .course-colors-teal { display: block; float: left;  background-color: #85F3DA; height: 31px;  width: 15px;}
  .visual-sub-div .type-table td#web-item-course-color .course-colors-pink { display: block; float: left;  background-color: #FF5991; height: 31px;  width: 15px;}
  .visual-sub-div .type-table td#web-item-course-color .course-colors-light-green { display: block; float: left;  background-color: #80F56B; height: 31px;  width: 15px;}
  .visual-sub-div .type-table td#web-item-course-color .course-colors-nice-blue { display: block; float: left;  background-color: #14C6CC; height: 31px;  width: 15px;}
  .visual-sub-div .type-table td#web-item-course-color .course-colors-deep-purple { display: block; float: left; color: #FFFFFF;  background-color: #cc14ae; height: 21px;  padding: 5px 10px 5px 10px; width: 135px;}
  .visual-sub-div .type-table td#web-item-course-color .course-colors-deep-blue { display: block; float: left; color: #FFFFFF; background-color: #157afb; height: 31px;  width: 15px;}

  .visual-sub-div .type-table td span.black-background { background-color: #333333; color: #FFFFFF; display: inline-block; margin: 0px; padding: 5px 5px 5px 5px; }
  .visual-sub-div .type-table td span.subtext { font-style: normal; font-size: 12px; font-weight: 500; color: #333333; text-transform: none; font-family: Open Sans, Verdana, Arial, sans-serif; }


  .visual-sub-div .type-table { margin-top: 40px; width: 100%;}
  .visual-sub-div .type-table th { vertical-align: top;  border-bottom: 1px solid #EBEBEB; padding: 10px 10px 10px 0px; text-align: left; width: 100px;}
  .visual-sub-div .type-table td { vertical-align: top;  border-bottom: 1px solid #EBEBEB; padding: 10px 10px 10px 0px; font-size: 13px; width: 100px; color: #333333;}

  .visual-sub-div .type-table .title-col { width: 250px;}
  .visual-sub-div .type-table .accessibility-col { width: 440px;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch { float: left; width: 90px; height: 60px; margin-right: 10px; margin-bottom: 10px; border: 1px solid #EBEBEB; padding: 10px;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-grey { background-color: #F8F8F8; color: #333333;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-white { background-color: #FFFFFF; color: #333333;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-mid-grey { background-color: #333333; color: #FFFFFF;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-mid-light-grey { background-color: #272727; color: #EBEBEB;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-green { background-color: #39E379;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-yellow { background-color: #FFE300;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-orange { background-color: #FF9600;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-red { background-color: #FF3B30;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-purple { background-color: #C56FD5;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-light-blue { background-color: #26d7fd;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-orange { background-color: #ff6600;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-teal { background-color: #85F3DA;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-pink { background-color: #FF5991;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-light-green { background-color: #80F56B;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-nice-blue { background-color: #14C6CC;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-deep-purple { background-color: #cc14ae; color: #FFFFFF;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-background-deep-blue { background-color: #157afb; color: #FFFFFF;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-web-item-error { color: #CC413A; font-weight: 600;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-web-link-font-blue { color: #2075A3; font-weight: 600; text-decoration: underline; }
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-web-small-font-mid-grey { color: #666666;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-web-small-font-light-grey { color: #999999;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-web-item-extra-small-font { font-size: 12px; color: #333333;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-web-item-extra-small-font-italic { font-size: 12px; color: #666666; font-style: italic;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-web-item-extra-small-font-mid-grey { font-size: 12px; color: #666666;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-web-item-extra-small-font-light-grey { font-size: 12px; color: #767676;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-web-item-grading { color: #222222;}
  .visual-sub-div .type-table .accessibility-col .accessibility-color-swatch.swatch-web-item-section-titles { text-transform: uppercase; }


  .template-choice-layout { }
  #template-choice-layout-container .template-choice-layout:first-child { margin-top: 80px; background: none; }

  .section-sub-div { background: url("../i/div-dotted.png") repeat-x;  margin-bottom: 40px; padding-top: 40px; clear: both;  }
  #template-choice-layout-container .template-choice-layout:first-child .section-sub-div:first-child { margin-top: 80px; padding-top: 0px; background: none; }


  .two-col-container { width: 100%; margin-top: 20px; }
  .two-col.left { float: left; max-width: 55%; min-height: 1px;}
  .two-col.left img { width: 100%; }
  .two-col.right { float: left; max-width: 40%; margin: 0px 0px 0px 40px; }
  .two-col.right img { max-width: 100%; height: auto; }
  .two-col-container-even { width: 100%; }
  .two-col-even.left { float: left; width: 45%; min-height: 1px; margin-right: 20px; }
  .two-col-even.right { float: left; width: 45%; min-height: 1px;}
  .two-col-even ul { padding-right: 50px; }
  .two-col-even ul li { padding-bottom: 10px; }
  .two-col-even img { max-width: 100%; height: auto; }
  .two-col.left .inner_swf { width: 550px; height: 550px; }
  .two-col.fixed-width { width: 48%; }

  .three-col { width: 31%; margin: 0px 20px 0px 0px; float: left; }
  .three-col img { max-width: 100%; height: auto; }


  .one-col { width: 60%; float: left; min-height: 1px; margin-top: 40px; clear: both; }
  .one-col.color { width: 85%; }
  .one-col-no-top { margin-top: 0px;  }
  .one-col-full { width: 100%; float: left; min-height: 1px;  clear: both; }
  .one-col-container { border-bottom: 1px solid #cdcdcd; padding: 20px 0px 10px 0px; margin: 0px 0px 20px 0px;}
  .one-col-container:last-child { border: 0px; }
  .one-col-container h4 { padding-bottom: 0px; }
  .one-col-sidebar { width: 30%; float: right; min-height: 1px; margin-top: 70px;  }
  .one-col-sidebar h4 { font-size: 16px; text-transform: uppercase; font-weight: 700; color: #666; }
  .one-col-sidebar ul { list-style-type: none; padding: 20px 0px 0px 0px; margin: 0px;  }
  .one-col-sidebar ul li { margin: 0px; padding: 0px;  font-size: 14px; margin-bottom: 10px; border-bottom: 1px solid #cdcdcd; padding-bottom: 20px;   }
  .one-col-sidebar ul li:last-child { border: 0px;   }

  .full-col-container, #full-coll-container { width: 100%; clear: both; }
  .full-col.illustration { margin: 50px 0px 0px 0px; border-bottom: 1px solid #c5c5c5;}
  .full-col .full-col-image-container { margin: 20px 0px; }
  .full-col .full-col-image-container img { max-width: 100%; height: auto;  }
  .full-col .full-col-text-container { width: 66%; margin-bottom: 50px; }
  .full-col .full-col-text-container.has-code { width: 100%; margin-bottom: 50px; }
  .code { overflow: auto; background-color: #EBEBEB; padding: 0px 0px 0px 20px; width: 100%; max-height: 300px; }
  .code pre { display: none; }
  .show_hide_button { float: right; cursor: pointer; font-size: 14px; margin-top: -40px; }
  .dark_background { background-color: #272727; padding: 20px 20px 0px 20px; }

  .colorSquare_container { width: 140px; height: 190px; float: left; margin-right: 10px; }
  .colorSquare_container .colorSquare_large { width: 100%; height: 100px; }
  .colorSquare_container .colorSquare_hex { font-weight: 600;  }
  .colorSquare_container .colorSquare_title { font-size: 12px;  }

  .colorRectangle_container { width: 286px; height: 40px; float: left; margin-right: 20px; }
  .colorRectangle_container .colorRectangle {width: 100%; height: 30px; padding: 7px 0px 3px 10px; margin: 0px; font-weight: 600; }

  .components-sub-div #Ultra_MotionStudies_GlobalButtons_main_button_container { width: 600px; height: 150px;}

  .resources-header-icons { float: left; margin-right: 60px;}
  .resources-image-icons { float: left; background: url("../i/resources-icons.png") no-repeat 0px 20px; width: 500px; height: 71px;}

  #next-section { margin-top: 70px; }

  #next-section #next-section-nav { width: 26.367%; height: 40px; margin-top: 60px;}
  #next-section #next-section-arrow {
    width: 27px;
    height: 40px;
    margin-top: 70px;
    background: url("../i/icon-right-arrow-thin.png") no-repeat;
  }

  #next-section #next-section-nav .next-header {
    text-transform: uppercase;
    font-style: italic;
    font-weight: 700;
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    text-align: right;
    margin-right: 20px;
  }
  #next-section #next-section-nav .next-section-name {
    margin: 0px;
    padding: 0px;
    font-weight: 500;
    text-align: right;
    margin-right: 20px;
  }


  #next-section #prev-section-nav { width: 26.367%; height: 40px; margin-top: 60px;}
  #next-section #prev-section-arrow {
    width: 27px;
    height: 40px;
    margin-top: 70px;
    background: url("../i/icon-left-arrow-thin.png") no-repeat;
  }

  #next-section #prev-section-nav .prev-header {
    text-transform: uppercase;
    font-style: italic;
    font-weight: 700;
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    text-align: left;
    margin-left: 20px;
  }
  #next-section #prev-section-nav .prev-section-name {
    margin: 0px;
    padding: 0px;
    font-weight: 500;
    text-align: left;
    margin-left: 20px;
  }

  #whats-new { background-color: #e5e5e5; margin-top: 50px;}
  #whats-new #whats-new-content {
    margin-top: 60px;
    padding-left: 90px;
    background: url("../i/icon-bb-news.png") no-repeat;
    width: 48.828%;
    margin-bottom: 60px;
  }
  #whats-new #whats-new-content h3 {
    display: block;
    margin: 0px;
    padding: 0px;
    font-weight: 700;
  }
  #whats-new #whats-new-content p {
    display: block;
    margin: 10px 0px 0px 0px;
    padding: 0px;
  }

  #whats-new #see-more {
    font-weight: 800;
    margin-top: 80px;

  }
  #whats-new #see-more p {
    padding-right: 40px;
    text-align: right;
    background: url("../i/icon-right-arrow-thin.png") no-repeat top right;
    width: 90px;
    height: 25px;
    text-transform: uppercase;
  }

  .prev-header a, .next-header a, .prev-section-name a, .next-section-name a, #whats-new a {
    color: #222222;
  }


  #footer {
    background-color: #333333;
    padding-bottom: 120px;
  }
  #footer p { color: #FFFFFF;}
  #footer #footer-top {
    padding-top: 70px;
    margin: 0px;
    color: #FFFFFF;
    font-size: 28px;
    font-weight: 100;
  }
  #footer img { margin-right: 10px; }

  #footer .footer-nav {
    padding: 0px;
    float: left;
  }
  #footer .footer-nav li {
    list-style-type: none;
    color: #FFFFFF;
    font-size: 16px;
    padding-bottom: 15px;
  }
  #footer #footer-1 { width: 32.714%; }
  #footer #footer-2 { width: 32.714%; }
  #footer #footer-3 { width: 32.714%; }

  .right-arrow { margin-left: 5px;}

  .wrap {
    width:930px;
    margin:0 auto;
    padding: 0px 20px;
  }
  .floatLeft { float: left;}
  .floatRight { float: right;}
  .clearBoth { clear: both; }

  .portal-admin-wrap {
    width: 1250px;
  }