/*! jQuery UI - v1.10.1 - 2013-03-07 * http://jqueryui.com * Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px * Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */ /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } .ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-clearfix { min-height: 0; /* support: IE7 */ } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } .ui-front { z-index: 100; } /* Interaction Cues ----------------------------------*/ .ui-state-disabled { cursor: default !important; } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } /* Misc visuals ----------------------------------*/ /* Overlays */ .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .ui-resizable { position: relative; } .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted black; } .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin-top: 2px; padding: .5em .5em .5em .7em; min-height: 0; /* support: IE7 */ } .ui-accordion .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-noicons { padding-left: .7em; } .ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; } .ui-accordion .ui-accordion-header .ui-accordion-header-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; } .ui-autocomplete { position: absolute; top: 0; left: 0; cursor: default; } .ui-button { display: inline-block; position: relative; padding: 0; line-height: normal; margin-right: .1em; cursor: pointer; vertical-align: middle; text-align: center; overflow: visible; /* removes extra width in IE */ } .ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; } /* to make room for the icon, a width needs to be set here */ .ui-button-icon-only { width: 2.2em; } /* button elements seem to need a little more width */ button.ui-button-icon-only { width: 2.4em; } .ui-button-icons-only { width: 3.4em; } button.ui-button-icons-only { width: 3.7em; } /* button text element */ .ui-button .ui-button-text { display: block; line-height: normal; } .ui-button-text-only .ui-button-text { padding: .4em 1em; } .ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; } .ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; } .ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; } .ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } /* no icon support for input elements, provide padding by default */ input.ui-button { padding: .4em 1em; } /* button icon element(s) */ .ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } .ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } .ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; } .ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } /* button sets */ .ui-buttonset { margin-right: 7px; } .ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; } /* workarounds */ /* reset extra padding in Firefox, see h5bp.com/l */ input.ui-button::-moz-focus-inner, button.ui-button::-moz-focus-inner { border: 0; padding: 0; } .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: .2em 0; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month-year { width: 100%; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%; } .ui-datepicker table { width: 100%; font-size: .9em; border-collapse: collapse; margin: 0 0 .4em; } .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; } /* with multiple calendars */ .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group { float: left; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto .4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } /* RTL support */ .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } .ui-dialog { position: absolute; top: 0; left: 0; padding: .2em; outline: 0; } .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: .1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 21px; margin: -10px 0 0 0; padding: 1px; height: 20px; } .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin-top: .5em; padding: .3em 1em .5em .4em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } .ui-dialog .ui-resizable-se { width: 12px; height: 12px; right: -5px; bottom: -5px; background-position: 16px 16px; } .ui-draggable .ui-dialog-titlebar { cursor: move; } .ui-menu { list-style: none; padding: 2px; margin: 0; display: block; outline: none; } .ui-menu .ui-menu { margin-top: -3px; position: absolute; } .ui-menu .ui-menu-item { margin: 0; padding: 0; width: 100%; } .ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } .ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; min-height: 0; /* support: IE7 */ font-weight: normal; } .ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; } .ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; } .ui-menu .ui-state-disabled a { cursor: default; } /* icon support */ .ui-menu-icons { position: relative; } .ui-menu-icons .ui-menu-item a { position: relative; padding-left: 2em; } /* left-aligned */ .ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; } /* right-aligned */ .ui-menu .ui-menu-icon { position: static; float: right; } .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } .ui-progressbar .ui-progressbar-overlay { background: url(../www.khanacademy.org/stylesheets/jqueryui-package/images/animated-overlay.gif); height: 100%; filter: alpha(opacity=25); opacity: 0.25; } .ui-progressbar-indeterminate .ui-progressbar-value { background-image: none; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } /* For IE8 - See #6727 */ .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { -webkit-filter: inherit; filter: inherit; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: .8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } .ui-spinner { position: relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; } .ui-spinner-input { border: none; background: none; color: inherit; padding: 0; margin: .2em 0; vertical-align: middle; margin-left: .4em; margin-right: 22px; } .ui-spinner-button { width: 16px; height: 50%; font-size: .5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; } /* more specificity required here to overide default borders */ .ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; border-right: none; } /* vertical centre icon */ .ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; left: 0; } .ui-spinner-up { top: 0; } .ui-spinner-down { bottom: 0; } /* TR overrides */ .ui-spinner .ui-icon-triangle-1-s { /* need to fix icons sprite */ background-position: -65px -16px; } .ui-tabs { position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ padding: .2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; } .ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; box-shadow: 0 0 5px #aaa; } body .ui-tooltip { border-width: 2px; } /* Component containers ----------------------------------*/ .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; } .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; } .ui-widget-content a { color: #222222; } .ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; } .ui-widget-header a { color: #222222; } /* Interaction states ----------------------------------*/ .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #555555; } .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #dadada url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; } .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited { color: #212121; text-decoration: none; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; } /* Interaction Cues ----------------------------------*/ .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #fcefa1; background: #fbf9ee url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #363636; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #cd0a0a; background: #fef1ec url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; } .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; } .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } .ui-state-disabled .ui-icon { filter:Alpha(Opacity=35); /* For IE8 - See #6059 */ } /* Icons ----------------------------------*/ /* states and images */ .ui-icon { width: 16px; height: 16px; background-position: 16px 16px; } .ui-icon, .ui-widget-content .ui-icon { background-image: url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-icons_222222_256x240.png); } .ui-widget-header .ui-icon { background-image: url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-icons_222222_256x240.png); } .ui-state-default .ui-icon { background-image: url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-icons_888888_256x240.png); } .ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-image: url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-icons_454545_256x240.png); } .ui-state-active .ui-icon { background-image: url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-icons_454545_256x240.png); } .ui-state-highlight .ui-icon { background-image: url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-icons_2e83ff_256x240.png); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-icons_cd0a0a_256x240.png); } /* positioning */ .ui-icon-carat-1-n { background-position: 0 0; } .ui-icon-carat-1-ne { background-position: -16px 0; } .ui-icon-carat-1-e { background-position: -32px 0; } .ui-icon-carat-1-se { background-position: -48px 0; } .ui-icon-carat-1-s { background-position: -64px 0; } .ui-icon-carat-1-sw { background-position: -80px 0; } .ui-icon-carat-1-w { background-position: -96px 0; } .ui-icon-carat-1-nw { background-position: -112px 0; } .ui-icon-carat-2-n-s { background-position: -128px 0; } .ui-icon-carat-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -64px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -64px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 0 -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-start { background-position: -80px -160px; } /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ .ui-icon-seek-first { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } /* Misc visuals ----------------------------------*/ /* Corner radius */ .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 4px; } .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 4px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 4px; } /* Overlays */ .ui-widget-overlay { background: #aaaaaa url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .3; filter: Alpha(Opacity=30); } .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .3; filter: Alpha(Opacity=30); border-radius: 8px; } /* * qTip2 - Pretty powerful tooltips - v2.2.0 * http://qtip2.com * * Copyright (c) 2013 Craig Michael Thompson * Released under the MIT, GPL licenses * http://jquery.org/license * * Date: Thu Nov 21 2013 08:34 GMT+0000 * Plugins: tips modal viewport svg imagemap ie6 * Styles: basic css3 */ /* @noflip */ .qtip{ position: absolute; left: -28000px; top: -28000px; display: none; max-width: 280px; min-width: 50px; font-size: 10.5px; line-height: 12px; direction: ltr; box-shadow: none; padding: 0; } .qtip-content{ position: relative; padding: 5px 9px; overflow: hidden; text-align: left; word-wrap: break-word; } .qtip-titlebar{ position: relative; padding: 5px 35px 5px 10px; overflow: hidden; border-width: 0 0 1px; font-weight: bold; } .qtip-titlebar + .qtip-content{ border-top-width: 0 !important; } /* Default close button class */ .qtip-close{ position: absolute; right: -9px; top: -9px; cursor: pointer; outline: medium none; border-width: 1px; border-style: solid; border-color: transparent; } .qtip-titlebar .qtip-close{ right: 4px; top: 50%; margin-top: -9px; } * html .qtip-titlebar .qtip-close{ top: 16px; } /* IE fix */ .qtip-titlebar .ui-icon, .qtip-icon .ui-icon{ display: block; text-indent: -1000em; direction: ltr; } .qtip-icon, .qtip-icon .ui-icon{ border-radius: 3px; text-decoration: none; } .qtip-icon .ui-icon{ width: 18px; height: 14px; line-height: 14px; text-align: center; text-indent: 0; font: normal bold 10px/13px Tahoma,sans-serif; color: inherit; background: transparent none no-repeat -100em -100em; } /* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */ .qtip-focus{} /* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */ .qtip-hover{} /* Default tooltip style */ .qtip-default{ border-width: 1px; border-style: solid; border-color: #F1D031; background-color: #FFFFA3; color: #555; } .qtip-default .qtip-titlebar{ background-color: #FFEF93; } .qtip-default .qtip-icon{ border-color: #CCC; background: #F1F1F1; color: #777; } .qtip-default .qtip-titlebar .qtip-close{ border-color: #AAA; color: #111; } /*! Light tooltip style */ .qtip-light{ background-color: white; border-color: #E2E2E2; color: #454545; } .qtip-light .qtip-titlebar{ background-color: #f1f1f1; } /*! Dark tooltip style */ .qtip-dark{ background-color: #505050; border-color: #303030; color: #f3f3f3; } .qtip-dark .qtip-titlebar{ background-color: #404040; } .qtip-dark .qtip-icon{ border-color: #444; } .qtip-dark .qtip-titlebar .ui-state-hover{ border-color: #303030; } /*! Cream tooltip style */ .qtip-cream{ background-color: #FBF7AA; border-color: #F9E98E; color: #A27D35; } .qtip-cream .qtip-titlebar{ background-color: #F0DE7D; } .qtip-cream .qtip-close .qtip-icon{ background-position: -82px 0; } /*! Red tooltip style */ .qtip-red{ background-color: #F78B83; border-color: #D95252; color: #912323; } .qtip-red .qtip-titlebar{ background-color: #F06D65; } .qtip-red .qtip-close .qtip-icon{ background-position: -102px 0; } .qtip-red .qtip-icon{ border-color: #D95252; } .qtip-red .qtip-titlebar .ui-state-hover{ border-color: #D95252; } /*! Green tooltip style */ .qtip-green{ background-color: #CAED9E; border-color: #90D93F; color: #3F6219; } .qtip-green .qtip-titlebar{ background-color: #B0DE78; } .qtip-green .qtip-close .qtip-icon{ background-position: -42px 0; } /*! Blue tooltip style */ .qtip-blue{ background-color: #E5F6FE; border-color: #ADD9ED; color: #5E99BD; } .qtip-blue .qtip-titlebar{ background-color: #D0E9F5; } .qtip-blue .qtip-close .qtip-icon{ background-position: -2px 0; } .qtip-shadow{ box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15); } /* Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */ .qtip-rounded, .qtip-tipsy, .qtip-bootstrap{ border-radius: 5px; } .qtip-rounded .qtip-titlebar{ border-radius: 4px 4px 0 0; } /* Youtube tooltip style */ .qtip-youtube{ border-radius: 2px; box-shadow: 0 0 3px #333; color: white; border-width: 0; background: #4A4A4A; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4A4A4A),color-stop(100%,black)); background-image: -webkit-linear-gradient(top,#4A4A4A 0,black 100%); } .qtip-youtube .qtip-titlebar{ background-color: #4A4A4A; background-color: rgba(0,0,0,0); } .qtip-youtube .qtip-content{ padding: .75em; font: 12px arial,sans-serif; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000); -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);"; } .qtip-youtube .qtip-icon{ border-color: #222; } .qtip-youtube .qtip-titlebar .ui-state-hover{ border-color: #303030; } /* jQuery TOOLS Tooltip style */ .qtip-jtools{ background: #232323; background: rgba(0, 0, 0, 0.7); background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323)); background-image: -webkit-linear-gradient(top, #717171, #232323); border: 2px solid #ddd; border: 2px solid rgba(241,241,241,1); border-radius: 2px; box-shadow: 0 0 12px #333; } /* IE Specific */ .qtip-jtools .qtip-titlebar{ background-color: transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)"; } .qtip-jtools .qtip-content{ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)"; } .qtip-jtools .qtip-titlebar, .qtip-jtools .qtip-content{ background: transparent; color: white; border: 0 dashed transparent; } .qtip-jtools .qtip-icon{ border-color: #555; } .qtip-jtools .qtip-titlebar .ui-state-hover{ border-color: #333; } /* Cluetip style */ .qtip-cluetip{ box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4); background-color: #D9D9C2; color: #111; border: 0 dashed transparent; } .qtip-cluetip .qtip-titlebar{ background-color: #87876A; color: white; border: 0 dashed transparent; } .qtip-cluetip .qtip-icon{ border-color: #808064; } .qtip-cluetip .qtip-titlebar .ui-state-hover{ border-color: #696952; color: #696952; } /* Tipsy style */ .qtip-tipsy{ background: black; background: rgba(0, 0, 0, .87); color: white; border: 0 solid transparent; font-size: 11px; font-family: 'Lucida Grande', sans-serif; font-weight: bold; line-height: 16px; text-shadow: 0 1px black; } .qtip-tipsy .qtip-titlebar{ padding: 6px 35px 0 10px; background-color: transparent; } .qtip-tipsy .qtip-content{ padding: 6px 10px; } .qtip-tipsy .qtip-icon{ border-color: #222; text-shadow: none; } .qtip-tipsy .qtip-titlebar .ui-state-hover{ border-color: #303030; } /* Tipped style */ .qtip-tipped{ border: 3px solid #959FA9; border-radius: 3px; background-color: #F9F9F9; color: #454545; font-weight: normal; font-family: serif; } .qtip-tipped .qtip-titlebar{ border-bottom-width: 0; color: white; background: #3A79B8; background-image: -webkit-gradient(linear, left top, left bottom, from(#3A79B8), to(#2E629D)); background-image: -webkit-linear-gradient(top, #3A79B8, #2E629D); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)"; } .qtip-tipped .qtip-icon{ border: 2px solid #285589; background: #285589; } .qtip-tipped .qtip-icon .ui-icon{ background-color: #FBFBFB; color: #555; } /** * Twitter Bootstrap style. * * Tested with IE 8, IE 9, Chrome 18, Firefox 9, Opera 11. * Does not work with IE 7. */ .qtip-bootstrap{ /** Taken from Bootstrap body */ font-size: 14px; line-height: 20px; color: #333333; /** Taken from Bootstrap .popover */ padding: 1px; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); background-clip: padding-box; } .qtip-bootstrap .qtip-titlebar{ /** Taken from Bootstrap .popover-title */ padding: 8px 14px; margin: 0; font-size: 14px; font-weight: normal; line-height: 18px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; } .qtip-bootstrap .qtip-titlebar .qtip-close{ /** * Overrides qTip2: * .qtip-titlebar .qtip-close{ * [...] * right: 4px; * top: 50%; * [...] * border-style: solid; * } */ right: 11px; top: 45%; border-style: none; } .qtip-bootstrap .qtip-content{ /** Taken from Bootstrap .popover-content */ padding: 9px 14px; } .qtip-bootstrap .qtip-icon{ /** * Overrides qTip2: * .qtip-default .qtip-icon { * border-color: #CCC; * background: #F1F1F1; * color: #777; * } */ background: transparent; } .qtip-bootstrap .qtip-icon .ui-icon{ /** * Overrides qTip2: * .qtip-icon .ui-icon{ * width: 18px; * height: 14px; * } */ width: auto; height: auto; /* Taken from Bootstrap .close */ float: right; font-size: 20px; font-weight: bold; line-height: 18px; color: #000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20); } .qtip-bootstrap .qtip-icon .ui-icon:hover{ /* Taken from Bootstrap .close:hover */ color: #000000; text-decoration: none; cursor: pointer; opacity: 0.4; filter: alpha(opacity=40); } /* IE9 fix - removes all filters */ .qtip:not(.ie9haxors) div.qtip-content, .qtip:not(.ie9haxors) div.qtip-titlebar{ -webkit-filter: none; filter: none; -ms-filter: none; } .qtip .qtip-tip{ margin: 0 auto; overflow: hidden; z-index: 10; } /* Opera bug #357 - Incorrect tip position https://github.com/Craga89/qTip2/issues/367 */ x:-o-prefocus, .qtip .qtip-tip{ visibility: hidden; } .qtip .qtip-tip, .qtip .qtip-tip .qtip-vml, .qtip .qtip-tip canvas{ position: absolute; color: #123456; background: transparent; border: 0 dashed transparent; } .qtip .qtip-tip canvas{ top: 0; left: 0; } .qtip .qtip-tip .qtip-vml{ behavior: url(#default#VML); display: inline-block; visibility: visible; } #qtip-overlay{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; } /* Applied to modals with show.modal.blur set to true */ #qtip-overlay.blurs{ cursor: pointer; } /* Change opacity of overlay here */ #qtip-overlay div{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: black; opacity: 0.7; filter:alpha(opacity=70); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; } .qtipmodal-ie6fix{ position: absolute !important; } /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* End Reset */ /* Borrowed from those smart guys @ Fog Creek. Props to Justin & Bobby */ .fancy-scrollbar::-webkit-scrollbar { height: 8px; width: 8px; } .fancy-scrollbar::-webkit-scrollbar-button:start:decrement, .fancy-scrollbar::-webkit-scrollbar-button:end:increment { background: transparent; display: none; } .fancy-scrollbar::-webkit-scrollbar-track-piece { background: transparent; } .fancy-scrollbar::-webkit-scrollbar-track-piece:vertical:start { -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; } .fancy-scrollbar::-webkit-scrollbar-track-piece:vertical:end { -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px; } .fancy-scrollbar::-webkit-scrollbar-track-piece:horizontal:start { -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; } .fancy-scrollbar::-webkit-scrollbar-track-piece:horizontal:end { -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; } .fancy-scrollbar::-webkit-scrollbar-thumb:vertical, .fancy-scrollbar::-webkit-scrollbar-thumb:horizontal { background: #ccc; border: 1px solid #aaa; -webkit-border-radius: 4px; display: block; height: 50px; } /* * jQuery UI Menu 1.8.24 * * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * http://docs.jquery.com/UI/Menu#theming */ .ui-menu { list-style:none; padding: 2px; margin: 0; display:block; float: left; } .ui-menu .ui-menu { margin-top: -3px; } .ui-menu .ui-menu-item { margin:0; padding: 0; zoom: 1; float: left; clear: left; width: 100%; } .ui-menu .ui-menu-item a { text-decoration:none; display:block; padding:.2em .4em; line-height:1.5; zoom:1; } .ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; } /* From jquery-ui-1.10.1.custom.css, for homepage */ .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /*! * jQuery UI Autocomplete 1.8.24 * * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * * http://docs.jquery.com/UI/Autocomplete#theming */ .ui-autocomplete { position: absolute; cursor: default; } .ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(../www.khanacademy.org/stylesheets/jqueryui-package/images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; } .ui-autocomplete.ui-menu { padding:0; border-radius: 0; } ul.ui-autocomplete .ui-menu-item a, ul.ui-autocomplete .ui-menu-item .autocomplete-spacer { background: #f2f2f2; font-size: 11px; white-space: nowrap; padding: 0; padding-right: 10px; cursor: pointer; border: none; border-radius: 0; } ul.ui-autocomplete .ui-menu-item .autocomplete-spacer { cursor: auto; } ul.ui-autocomplete .ui-menu-item a.ui-state-focus { background: #89B908; border: none; margin: 0; color: #fff; } ul.ui-autocomplete .ui-menu-item a.ui-state-focus .autocomplete-type { background: #89B908; border-color: transparent; color: #fff; } ul.ui-autocomplete .ui-menu-item a .autocomplete-type, ul.ui-autocomplete .ui-menu-item .autocomplete-empty { background: #f7f7f7; border-right: 1px solid #ddd; -moz-box-sizing: border-box; box-sizing: border-box; color: #898989; display: inline-block; margin-right: 5px; padding-right: 5px; text-align: right; width: 60px; } .autocomplete-spacer { height: 7px; } /* Exercise Dashboard styles */ /* TODO(jasonrr): figure out how or why this is used in exercise files/templates */ #container { position: relative; } #container.dashboard { background: #fff; border-left: 1px solid #ddd; border-right: 1px solid #ddd; line-height: 18px; } .exercise-badge { position: relative; } .exercise-badge .topic-exercise-image { margin: -1px 5px 0 0; } .progress-item a.disabled { /* Disabled cursor for Athena version of knowledge map goal picker */ cursor: not-allowed; } #container .dashboard-drawer { position: absolute; background: #fff; width: 350px; height: 800px; z-index: 1; box-shadow: 2px 0 3 rgba(0, 0, 0, .1); overflow: hidden; } #container .dashboard-filter { overflow: hidden; padding: 0 0 10px 0; } #container .dashboard-filter-text { background-image: none; border-color: #ccc; padding: 0 55px 0 5px; width: 260px; } .ie #container .dashboard-filter-text { height: 24px; } .dashboard-filter .dashboard-filter-clear { height: 26px; padding-top: 4px; position: absolute; top: 10px; right: 13px; z-index: 100; } .dashboard-filter-clear:active { top: 10px; padding-top: 5px; } .ie .dashboard-filter-clear { top: 12px; } #container .dashboard-drawer-inner { position: relative; margin-right: 2px; overflow: auto; padding: 10px 3px 10px 5px; } #container .dashboard-drawer-inner h3 { margin-bottom: 0; } #container .dashboard-drawer h3 .subheader { font-weight: normal; } #container .dashboard-header { background: #fafafa; border-width: 0 0 1px 0; border-color: #ddd; border-style: solid; height: 24px; padding: 5px; position: relative; z-index: 0; } #container .dashboard-header .collapse-drawer, #container .dashboard-header .expand-drawer { border: none; height: 25px; position: absolute; top: 5px; width: 25px; } #container .dashboard-header .collapse-drawer { background: url(../www.khanacademy.org/images/expand-left.png) no-repeat 0 0; right: 0; } #container .dashboard-header .expand-drawer { background: url(../www.khanacademy.org/images/expand-right.png) no-repeat 0 0; left: 0; } #container .dashboard-header .dashboard-title { background: #fafafa; border-right: 1px solid #bbb; color: #444; font-size: 18px; font-family: "MuseoSans500", sans-serif; width: 340px; margin: -5px; padding: 8px 5px 0; height: 26px; position: absolute; box-shadow: 2px 0 3px rgba(0, 0, 0, .1); z-index: 1; } #container .dashboard-header .dashboard-title .dashboard-icon { background: url(../www.khanacademy.org/images/dashboard-icon-active.png) no-repeat 0 0; display: inline-block; height: 16px; position: relative; top: 1px; width: 18px; } #container .dashboard-header .dashboard-nav { float: right; font-weight: bold; position: relative; top: 3px; } #container .dashboard-header .dashboard-nav span.selected a { border: none; color: #333; cursor: default; } #container .dashboard-map .map-canvas { height: 100%; left: 350px; margin-left: 0; margin-right: 350px; } .exercise-filter-count { font-size: 11px; color: #444; } .exercise-sublist { margin-top: 24px; display: block; } .exercise-sublist:first-child { margin-top: 0; } .info-box { background: #eee; border: 1px solid #ccc; border-bottom: 1px solid #aaa; color: #333; margin-bottom: 10px; overflow-x: auto; padding: 10px; position: relative; z-index: 10; box-shadow: 0 1px 2px #ccc; } .info-box table { border-collapse: collapse; } .info-box .info-box-header, .info-box .info-box-subheader { color: #777; display: block; font-size: 18px; line-height: 100%; margin-bottom: 10px; font-weight: bold; text-shadow: 0 1px 0 #fff; } .info-box .info-box-subheader { line-height: 200%; font-size: 14px; color: #333; } .info-box .related-content-title { display: none; } .info-box #related-video-list { padding: 0; margin: 0; list-style: none; } .info-box #related-video-list li { display: block; margin: 0 0 5px 0; } .info-box #related-video-list a { display: block; float: left; margin: 0; width: 98%; overflow: hidden; text-overflow: ellipsis; } .info-box #related-video-list a .video-title { white-space: nowrap; } .info-box #related-video-list .separator { display: none; } .info-box .info-box-sub-description { display: block; color: #777; margin-bottom: 10px; } .info-box .info-box-sub-description strong { color: #444; font-style: italic; } .info-box .info-box-sub-submission { display: block; margin-top: 10px; } .info-box #check-answer-results #feedback { padding: 10px 0 5px; } .info-box #answer { width: 100px; } #thumbnails_container { clear: both; margin-top: 10px; } #thumbnails_container td { text-align: center; } #thumbnails > div { width: 100%; } #thumbnails td a { outline: none; color: #fff; white-space: pre; } #thumbnails td a:hover { text-decoration: none; } #thumbnails td div.thumb { background-repeat: no-repeat; background-position: top left; width: 200px; height: 100px; border: 1px solid #aaa; margin-left: auto; margin-right: auto; box-shadow: 0 0 3px #ccc; background-size: 200px 150px; } #thumbnails td.video-thumb div.thumb { background-position: 0 -25px; } #thumbnails td.selected div.thumb { border: 2px solid #89B908; } #thumbnails td div.thumbnail_label { padding: 5px 10px; max-width: 180px; margin: 0 auto; text-align: left; margin-top: -33px; background-color: #333; background-color: rgba(30, 30, 30, 0.9); color: #fff; overflow: hidden; text-overflow: ellipsis; } #thumbnails td div.thumbnail_desc { width: 180px; overflow: hidden; text-overflow: ellipsis; } #thumbnails td div.thumbnail_teaser { height: 0; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-decoration: none; font-size: 11px; } #thumbnails td.selected div.thumbnail_label { font-weight: bold; } .thumbnails_arrow { cursor: pointer; border: 1px solid #ccc; border-bottom: 1px solid #bbb; height: 100px; position: relative; width: 27px; border-radius: 5px; text-shadow: 0 1px 0 #fff; } .thumbnails_arrow:hover { border-color: #aaa; top: 1px; } #arrow-right { float: right; } div.arrow-right, div.arrow-left { width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; position: absolute; top: 35px; z-index: 2; } div.arrow-right { border-left: 15px solid #777; left: 7px; } div.arrow-left { border-right: 15px solid #777; right: 7px; } // TODO(benkomalo): some of this stuff really needs to be moved to a specific // stylesheet to power templates/viewbadges.html, and not be everywhere .achievement-badge-counts { text-decoration: none; } .achievement-badge-counts .badge { margin-right:10px; } .achievement-badge-counts .badge img { margin-right:-2px; } .achievement-badge { background: white; border: 1px solid #ddd; margin-bottom: 15px; margin-left: 15px; position: relative; width: 300px; height: 110px; opacity: 0.75; filter:alpha(opacity=75); border-radius: 5px; overflow: hidden; } .achievement-badge-owned { border: 1px solid #bbb; opacity: 1.0; filter:alpha(opacity=100); } .achievement-badge-owned { border: 1px solid #ccc; border-bottom-color: #aaa; background: #eee; } .achievement-badge-owned #outline-box { border-radius: 5px; } .achievement-badge .energy-points-badge { padding: 1px 0 0; width: 48px; height: 21px; line-height: 19px; position: absolute; right: 5px; top: 7px; } .achievement-badge .achievement-text { margin: 10px 4px 0 47px; padding: 7px 7px 7px 20px; } .achievement-badge .achievement-title { font-size: larger; } .achievement-badge .achievement-count { font-size: 16px; font-weight: bold; text-align: center; float: left; clear: left; width: 45px; } .achievement-badge .achievement-desc .badge-context-retired { color: red; } .achievement-badge .achievement-desc { font-size: 11px; line-height: 13px; margin: 8px 0 0; max-height: 39px; font-style: italic; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .achievement-badge .achievement-desc.expanded { max-height: 494px; -webkit-line-clamp: 38; } .achievement-badge #badge-icon { width: 40px; height: 40px; margin: 10px 0 0 12px; float: left; } .achievement-badge.category-5 #badge-icon { border-radius: 20px; } /*.achievement-badge.category-0 #badge-icon { margin-top: 10px; }*/ .achievement-badge .energy-points-badge { -webkit-transition: top 250ms ease-in-out; transition: top 250ms ease-in-out; } .achievement-badge .energy-points-badge.goal-added{ top:25px; } .achievement-badges-container .achievement-badge { float: left; } .achievement-badges-container h3 { font-size: 15px; color: #333; display: block; } .achievement-badges-explanation { padding: 15px 30px; } .achievement-badges-explanation table { width: 100%; } .achievement-badges-explanation table td { text-align: center; vertical-align: top; padding: 5px 10px; } #topic-jump > span { float: left; font-size: 15px; color: #555; text-shadow: 0 1px 0 rgba(255, 255, 255, .9); font-weight: bold; } #topic-jump nav ul { margin: 0; padding: 0; } #topic-jump nav > ul > li { font-size: 15px; color: #333; text-shadow: 0 1px 0 rgba(255, 255, 255, .9); } #topic-jump nav > ul > li.solo > a:visited { color: #333; } #topic-jump nav > ul > li.solo > a:hover { color: #00659E; } #topic-jump nav > ul > li:hover { color: #00659E; text-shadow: 0 0 5px #fff; } #topic-jump nav > ul > li > ul > li.sub { background: transparent; color: #aaa; text-shadow: 0 1px 0 rgba(255, 255, 255, .9); font-style: italic; padding-left: 2px; } #topic-jump nav > ul > li > ul > li.sub li { font-style: normal; } #topic-jump nav > ul > li ul { font-size: 12px; } /* Clearfix */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /* End Clearfix */ .tiny { font-size: 10px; } .large-font { font-size: 16px; } .large-font input, .large-font p, .large-font button { font-size: inherit; } .right { text-align: right; } .left { text-align: left; } .center { text-align: center; } .justify { text-align: justify; } .float-right { float: right; } .float-left { float: left; } .ampersand { font-family: Tahoma, sans-serif; } h2 .ampersand { font-size: 19px; } /* ellipses: You *must* set a width and display: (inline-)block otherwise.... this will 100% not work. */ .ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } /* End of basic typography */ img { -ms-interpolation-mode: bicubic; /* Fix IE image scaling so that it isn't crappy */ } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } .mobile-only { display: none; } /* Used on about pages and blog * .rounded-background */ img.rounded-background { display: block; padding: 10px; background: #f7f7f7; border: 1px solid #ccc; border-bottom: 1px solid #aaa; margin: 0 auto; max-width: 90%; border-radius: 5px; box-shadow: 0 1px 3px #ccc; } img.icon { vertical-align: -3px; width: 16px; height: 16px; padding-right: 2px; background: transparent; } nav { display: block; clear: both; width: 100%; margin: 0; } article, section { display: block; } div.video { margin-left: auto; margin-right: auto; min-width: 700px; } div.video #keywords { clear: both; } /* YouTube jump links found in video discussion and on /about */ span.youTube, .youTubeJump { padding-left: 18px; background: url(../www.khanacademy.org/images/play.png) no-repeat left top; color: #005987; cursor: pointer; } span.youTube:hover, .youTubeJump:hover { border-bottom: solid 1px #005987; } /***************For All-videos page******************/ /* Clear Floated Elements ----------------------------------------------------------------------------------------------------*/ /* http://sonspring.com/journal/clearing-floats */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 1px; height: 1px; } /**************end of elements for all-videos page*********************/ .exercise_message { padding: 1em; border: 1px solid silver; border-top: 0; background-color: #E5ECF9; margin: 0 10px; } .exercise_message.review { background-color: #F9ECE5; } #container h3 { display: block; font-size: 14px; color: #333; padding-bottom: 5px; border-bottom: 1px dotted #bbb; } /* End of Exercise Dashboard styles */ /* Exercise related styles */ #container.single-exercise { overflow: visible; min-width: 950px; } #container .dashboard-header.single-exercise { border: 1px solid #ccc; border-top: none; } #description .related-content { margin-top: -22px; line-height: 13px; } #description .related-content ul.related-exercise-list { list-style: none; padding: 0; margin: 0; display: inline; } #description .related-content ul.related-exercise-list li { display: inline; } #description .related-content ul.related-exercise-list li span.separator { padding-right: 5px; } #description .practice.simple-button { float: right; font-size: 110%; } #answer_area_wrap { float: right; width: 27%; margin-right: 10px; } /* End of exercise related styles */ /* Used in exercise_message_proficient_withgraph.html * TODO(jasonrr) determine if that file is still in use */ #you-are-here{ position:relative; left:10px; top:-10px; } /* Two column structure for content pages */ .col1, .col2 { min-width: 48%; max-width: 48%; float: left; } .col1 { margin-right: 4%; } .col1.sixty-forty { min-width: 63%; max-width: 63%; } .col2.sixty-forty { min-width: 33%; max-width: 33%; } .col1.forty-sixty { min-width: 33%; max-width: 33%; } .col2.forty-sixty { min-width: 63%; max-width: 63%; } .col1.fifty-fifty { min-width: 48%; max-width: 48%; } .col2.fifty-fifty { min-width: 48%; max-width: 48%; } .spinealign .col1 { text-align:right; } .spinealign .col2 { text-align:left; } /* End One-off page styles */ #back-to-top { position: fixed; bottom: 32px; right: 40px; text-align: center; cursor: pointer; opacity: 0.5; filter:alpha(opacity=50); display: none; z-index: 100; } #back-to-top a.text { display: block; background: transparent; visibility: hidden; position: relative; top: 10px; } #back-to-top a { text-decoration: none; border: 0; outline: none; } #back-to-top .arrow { padding: 5px 10px; font-size: 36px; color: #333; background: #eee; border: 1px solid #ccc; border-bottom: 1px solid #aaa; border-radius: 5px; } #back-to-top:hover { opacity: 1.0; filter:alpha(opacity=100); } #back-to-top:hover a.text { visibility: visible; } /* About the site styles */ #screenshot-tour img.rounded-background { background: white; } /* End about the site */ /* Report a problem styles */ #report-problem ol { list-style: decimal outside; margin: 18px 27px; font-size: 15px; } /* End Report a problem styles */ img.throbber { position: absolute; } a.control, a.control:visited, a.control:focus, a.control:link { color: #0075b1; } a.control:hover { color: #DD6900; } .clearFloat { overflow:hidden; height:1px; clear:both; } .exercise-edit { background: #f3f3f3; padding-top:3px; padding-left:5px; margin-left: 1px; position: relative; width: 320px; height: 23px; cursor: pointer; border: 1px solid #ddd; border-radius: 3px; } .drawer-hoverable .exercise-edit:hover { background: #FCF9CF; box-shadow: 0 0 3px #666; border: 1px solid #aaa; } .vid-progress { background-repeat: no-repeat; background-position: 0 50%; } /* There are 5 places where video completion icons are shown: * 1. Homepage * 2. Previous and next videos on video page * 3. Topic dropdown on video page * 4. Related videos in top left of exercises page * 5. Related videos in sidebar of exercises page * * All of these are layed out vertically except for #2 and #4. For the ones * layed out vertically we always want 14px left padding so the text will * always line up. For #2 and #4 we don't want left padding unless there is an * icon, to avoid an awkard space. Thus we add 14px of padding to #1, #3, and * #5 here and in /user_video_css we add 14px of left padding to any video with * an icon. */ #library .vl > .vid-progress, #related-video-list > .related-video-list > li > a > .vid-progress, #video_menu > .ui-menu .vid-progress { padding-left: 14px; } /* TODO(benkomalo): move this out of default.css */ #modpanel { margin: 9px auto; width:1000px; } .share-links { float: right; } .share-links a { border-width: 0; color: #aaa; display: inline-block; line-height: 18px; margin: 0 0 0 6px; padding: 2px; text-align: left; text-decoration: none; } .share-links a:hover { color: #666; text-decoration: none; } .simple-button.qtip-button { line-height: 8px; padding: 2px 5px; margin: 2px; font-size: 12px; } .qtip { font-size: 100%; line-height: 1.3; } @media screen and (max-width:1075px) { .small-social-links { display: none; } } /* For shared navigation elements */ /* Filtering controls for profile page and moderation queue */ .tabrow-container { margin: 22px 0; padding-bottom: 5px; border-bottom: 1px solid #ccc; position: relative; font-size: 13px; } .tabrow { text-align: center; list-style: none; padding: 0; line-height: 24px; height: 26px; float: right; } .tabrow li { display: inline-block; position: relative; z-index: 0; padding: 0 10px; } .tabrow li.hidden { display: none; } .tabrow li.selected { color: #333; z-index: 2; border-bottom-color: #FFF; position: relative; } .tabrow li.selected:after { content: " "; position: absolute; z-index: 3; width: 0; height: 15px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #CCC; left: 50%; margin-left: -7px; bottom: -3px; display: block; } @-moz-document url-prefix() { .tabrow li.selected:after { // workaround for positioning bug with absolute :after pseudos in FF bottom: -2px !important; } } /*============================================================================== Based on: http://www.grc.com/mainmenu.css Discussed at: http://www.grc.com/menu2/invitro.htm GRC multi-level script-free pure-CSS menuing system stylesheet. This code is hereby placed into the public domain by its author Steve Gibson. It may be freely used for any purpose whatsoever. Computed Geometries: with a default 12px font, 1.0em == 12px and 1px == 0.08333em. Thus, our 98px wide Freeware & Research buttons are 8.166666em wide. PUBLIC DOMAIN CONTRIBUTION NOTICE This work has been explicitly placed into the Public Domain for the benefit of anyone who may find it useful for any purpose whatsoever. Modified by Dean Brettle (dean@brettle.com) for the Khan Academy. ==============================================================================*/ /*========================= TOP OF THE MENU CASCADE =========================*/ .css-menu { position:relative; /* establish a menu-relative positioning context */ float:left; /* play nicely with others */ margin:0; padding:0; border:0; width: auto; z-index: 100; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .css-menu a { text-decoration: none !important; } .css-menu img { vertical-align: top; /* prevent images from being pushed down by text */ } .css-menu > ul, .css-menu > ul > li ul { margin:0; list-style-type:none; /* we don't want to view the list as a list */ line-height:3ex; /* globally set the menu's item spacing */ } .css-menu > ul > li, .css-menu > ul > li > ul > li { float:left; /* this creates the side-by-side array of top-level buttons */ position:relative; /* create local positioning contexts for each button */ margin: 0; white-space: nowrap; } /*======================== TOP LEVEL MENU DEFINITIONS ========================*/ .css-menu > ul > li, .css-menu > ul > li > ul { padding-left: 1ex; padding-right: 1ex; } .css-menu > ul > li { border-width: 1px 1px 0 1px; border-style: solid; border-color: transparent; color: white; margin-left: 0ex; margin-right: 0ex; padding-top: .25ex; padding-bottom: .25ex; font-weight: bold; z-index: 1; cursor: pointer; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .css-menu > ul > li:after { content: ""; width: 13px; height: 12px; background-image: url(../www.khanacademy.org/images/non-repeating-sprites.4.png); background-position: -72px -67px; display: inline-block; position: relative; top: 1px; } .css-menu > ul > li.solo:after { background: none; } .css-menu > ul > li:hover, .css-menu > ul > li > a:hover { color: black; cursor: pointer; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); } .css-menu.noscript > ul > li:hover, .css-menu.noscript > ul > li > a:hover, .css-menu > ul > li.css-menu-js-hover { z-index: 5; background-color: #f7f7f7; color: black; outline: none; border-color: #ddd; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); } .css-menu.noscript > ul > li.solo:hover, .css-menu.noscript > ul > li.solo > a:hover, .css-menu > ul > li.solo.css-menu-js-hover { z-index: 5; background-color: transparent; color: black; outline: none; border-color: transparent; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); } .css-menu > ul > li > ul { clear:left; position:absolute; left: -999em; /* initially hide the entire list hierarchy */ padding:0; /* this is our box border width */ z-index: 3; background-color: #f7f7f7; color: black; } .css-menu > ul > li > a, .css-menu > ul > li > a:visited { /* unselected top-level menu items */ display:block; float:left; text-decoration:none; } /*======================== 2ND LEVEL MENU DEFINITIONS ========================*/ .css-menu.noscript > ul > li:hover > ul, .css-menu.noscript > ul > li > a:hover > ul, .css-menu > ul > li.css-menu-js-hover > ul { /* 2nd level drop-down box */ border-top: 1px solid transparent; display:block; margin:0; left: -1px; /* left-align our drop-down to the previous button border */ height:auto; /* the drop-down height will be determiend by line count */ width:auto; min-width: 150px; z-index: 4; } .css-menu > ul > li > ul { overflow: hidden; border: solid 1px #ddd; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0, .5); -moz-box-shadow: 1px 1px 2px rgba(0,0,0, .5); -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topright: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-right-radius: 5px; } .css-menu > ul > li > ul li, .css-menu > ul > li > ul li > a { width: 100%; } .css-menu > ul > li > ul li > p, .css-menu > ul > li > ul li > a { display: block; padding-left: 1ex; padding-right: 1ex; font-weight: normal; background-color: #f7f7f7; /* IE7 needs this to workaround http://haslayout.net/css/Hover-White-Background-Ignore-Bug */ margin: 0; height:auto; color: black; /* this sets the unselected drop-down text color */ } .css-menu > ul > li > ul > li > ul > li > a { padding-left: 2ex !important; } .css-menu > ul > li > ul > li > ul { border-bottom: none; } .css-menu > ul > li > ul > li:last-child > ul { border-bottom: none 0px; } .css-menu > ul > li > ul li > p { text-decoration: none; font-weight: bold; } .css-menu > ul > li > ul li:hover > a, .css-menu > ul > li > ul li > a:hover, .css-menu > ul > li > ul li:focus > a, .css-menu > ul > li > ul li > a:focus, .css-menu > ul > li > ul li > a.css-menu-js-hover { /* 2nd level selected item */ color: #e45c02; background-color: white; } .css-menu > ul > li > ul > li { display: block; clear: left; padding: 0; height:auto; /* the drop-down height will be determiend by line count */ width: 100%; } .css-menu > ul > li > ul > li > ul { padding: 0; } @font-face { font-family: 'Proxima Nova'; src: url('../../fonts/Proxima-Nova-Regular.woff2?1c9ac9a7') format('woff2'), url('../../fonts/Proxima-Nova-Regular.woff?934549e7') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Proxima Nova'; src: url('../../fonts/Proxima-Nova-Semibold.woff2?4151c287') format('woff2'), url('../../fonts/Proxima-Nova-Semibold.woff?6227bce7') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Proxima Nova Semibold'; src: url('../../fonts/Proxima-Nova-Semibold.woff2?4151c287') format('woff2'), url('../../fonts/Proxima-Nova-Semibold.woff?6227bce7') format('woff'); font-weight: normal; font-style: normal; } /* Fall back colors? Eg coach-res, talks & interviews */ .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .input-block-level { display: block; width: 100%; min-height: 30px; -moz-box-sizing: border-box; box-sizing: border-box; } #khanType { /* Used to style the topic title on a topic page, eg "Introduction to algebra" on /math/algebra/introduction-to-algebra. Also used for the tutorial title on tutorial landing pages. Not restricted to styling the titles of "Topic" entities. */ } .vertical-shadow { border: 1px solid #cccccc; border-bottom: 1px solid #aaa; box-shadow: 0 1px 3px #ccc; } html.page-container-min-width-zero body, html.page-container-min-width-zero #page-container { min-width: 0; } .alert { padding: 8px 35px 8px 14px; margin-bottom: 20px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; border-radius: 4px; } .alert, .alert h4 { color: #c09853; } .alert h4 { margin: 0; } .alert .close { position: relative; top: -2px; right: -21px; line-height: 20px; } .alert-success { background-color: #dff0d8; border-color: #d6e9c6; color: #468847; } .alert-success h4 { color: #468847; } .alert-danger, .alert-error { background-color: #f2dede; border-color: #eed3d7; color: #b94a48; } .alert-danger h4, .alert-error h4 { color: #b94a48; } .alert-info { background-color: #edf2df; border-color: #e4e8c6; color: #4a7c17; } .alert-info h4 { color: #4a7c17; } .alert-block { padding-top: 14px; padding-bottom: 14px; } .alert-block > p, .alert-block > ul { margin-bottom: 0; } .alert-block p + p { margin-top: 5px; } .close { float: right; font-size: 20px; font-weight: bold; line-height: 20px; color: #000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20); } .close:hover, .close:focus { color: #000000; text-decoration: none; cursor: pointer; opacity: 0.4; filter: alpha(opacity=40); } button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; } .fade { opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .fade.in { opacity: 1; } .collapse { position: relative; height: 0; overflow: hidden; -webkit-transition: height 0.35s ease; transition: height 0.35s ease; } .collapse.in { height: auto; } .row { margin-left: -20px; *zoom: 1; } .row:before, .row:after { display: table; content: ""; line-height: 0; } .row:after { clear: both; } [class*="span"] { float: left; min-height: 1px; margin-left: 20px; } .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 940px; } .span12 { width: 940px; } .span11 { width: 860px; } .span10 { width: 780px; } .span9 { width: 700px; } .span8 { width: 620px; } .span7 { width: 540px; } .span6 { width: 460px; } .span5 { width: 380px; } .span4 { width: 300px; } .span3 { width: 220px; } .span2 { width: 140px; } .span1 { width: 60px; } .offset12 { margin-left: 980px; } .offset11 { margin-left: 900px; } .offset10 { margin-left: 820px; } .offset9 { margin-left: 740px; } .offset8 { margin-left: 660px; } .offset7 { margin-left: 580px; } .offset6 { margin-left: 500px; } .offset5 { margin-left: 420px; } .offset4 { margin-left: 340px; } .offset3 { margin-left: 260px; } .offset2 { margin-left: 180px; } .offset1 { margin-left: 100px; } .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; line-height: 0; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; width: 100%; min-height: 30px; -moz-box-sizing: border-box; box-sizing: border-box; float: left; margin-left: 2.12765957%; *margin-left: 2.07446809%; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .controls-row [class*="span"] + [class*="span"] { margin-left: 2.12765957%; } .row-fluid .span12 { width: 100%; *width: 99.94680851%; } .row-fluid .span11 { width: 91.4893617%; *width: 91.43617021%; } .row-fluid .span10 { width: 82.9787234%; *width: 82.92553191%; } .row-fluid .span9 { width: 74.46808511%; *width: 74.41489362%; } .row-fluid .span8 { width: 65.95744681%; *width: 65.90425532%; } .row-fluid .span7 { width: 57.44680851%; *width: 57.39361702%; } .row-fluid .span6 { width: 48.93617021%; *width: 48.88297872%; } .row-fluid .span5 { width: 40.42553191%; *width: 40.37234043%; } .row-fluid .span4 { width: 31.91489362%; *width: 31.86170213%; } .row-fluid .span3 { width: 23.40425532%; *width: 23.35106383%; } .row-fluid .span2 { width: 14.89361702%; *width: 14.84042553%; } .row-fluid .span1 { width: 6.38297872%; *width: 6.32978723%; } .row-fluid .offset12 { margin-left: 104.25531915%; *margin-left: 104.14893617%; } .row-fluid .offset12:first-child { margin-left: 102.12765957%; *margin-left: 102.0212766%; } .row-fluid .offset11 { margin-left: 95.74468085%; *margin-left: 95.63829787%; } .row-fluid .offset11:first-child { margin-left: 93.61702128%; *margin-left: 93.5106383%; } .row-fluid .offset10 { margin-left: 87.23404255%; *margin-left: 87.12765957%; } .row-fluid .offset10:first-child { margin-left: 85.10638298%; *margin-left: 85%; } .row-fluid .offset9 { margin-left: 78.72340426%; *margin-left: 78.61702128%; } .row-fluid .offset9:first-child { margin-left: 76.59574468%; *margin-left: 76.4893617%; } .row-fluid .offset8 { margin-left: 70.21276596%; *margin-left: 70.10638298%; } .row-fluid .offset8:first-child { margin-left: 68.08510638%; *margin-left: 67.9787234%; } .row-fluid .offset7 { margin-left: 61.70212766%; *margin-left: 61.59574468%; } .row-fluid .offset7:first-child { margin-left: 59.57446809%; *margin-left: 59.46808511%; } .row-fluid .offset6 { margin-left: 53.19148936%; *margin-left: 53.08510638%; } .row-fluid .offset6:first-child { margin-left: 51.06382979%; *margin-left: 50.95744681%; } .row-fluid .offset5 { margin-left: 44.68085106%; *margin-left: 44.57446809%; } .row-fluid .offset5:first-child { margin-left: 42.55319149%; *margin-left: 42.44680851%; } .row-fluid .offset4 { margin-left: 36.17021277%; *margin-left: 36.06382979%; } .row-fluid .offset4:first-child { margin-left: 34.04255319%; *margin-left: 33.93617021%; } .row-fluid .offset3 { margin-left: 27.65957447%; *margin-left: 27.55319149%; } .row-fluid .offset3:first-child { margin-left: 25.53191489%; *margin-left: 25.42553191%; } .row-fluid .offset2 { margin-left: 19.14893617%; *margin-left: 19.04255319%; } .row-fluid .offset2:first-child { margin-left: 17.0212766%; *margin-left: 16.91489362%; } .row-fluid .offset1 { margin-left: 10.63829787%; *margin-left: 10.53191489%; } .row-fluid .offset1:first-child { margin-left: 8.5106383%; *margin-left: 8.40425532%; } [class*="span"].hide, .row-fluid [class*="span"].hide { display: none; } [class*="span"].pull-right, .row-fluid [class*="span"].pull-right { float: right; } html, body { height: 100%; } body { font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 14px; margin: 0; color: #444; line-height: 1.4; /* extend background to cover #page-container on horizontal scroll */ min-width: 1000px; } #outer-wrapper { position: relative; background-color: #eeeeee; height: auto !important; height: 100%; margin: 0 0 -77px; min-height: 100%; } #outer-wrapper.white-outer-wrapper { background-color: #ffffff; } #page-container { min-width: 1000px; max-width: 1200px; position: relative; margin: 0 auto; } #page-container.full-bleed { max-width: none; } #page-container:focus { outline: none; } .tutorial-outer-wrapper #page-container, .scratchpad-outermost-wrapper #page-container { max-width: none; } #page-container-inner article { /* TODO(benkomalo): determine if this is correct. On the homepage we * definitely don't want the border (as it was for the old design). * Does it apply everywhere */ border-top: none; } #end-of-page-spacer { clear: both; } .external-styles-missing { display: none; } .contained-and-centered { margin: 0 auto; max-width: 1200px; } .min-contained-and-centered { margin: 0 auto; max-width: 1000px; } .visible-on-responsive-page { display: none !important; } article { padding: 0 20px; position: relative; border-top: 1px solid #C6D1AD; } /* Basic typography for the entire site */ h1, h2, h3, h4, h5 { color: #111; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; } h1 { font-size: 25px; margin-bottom: 22px; } .main-headline, .section-headline { padding-top: 22px; } .main-headline a, .section-headline a { text-decoration: none; } .main-headline a:hover, .section-headline a:hover { text-decoration: underline; } .main-headline a:visited, .section-headline a:visited { color: #7EA800; } h1.main-headline { font-size: 32px; position: relative; line-height: 37px; z-index: 10; } h2 { font-size: 20px; margin-bottom: 22px; } h3 { font-size: 18px; margin-bottom: 22px; } h4 { font-size: 15px; margin-bottom: 22px; } h5 { font-size: 15px; margin-bottom: -22px; } p { font-size: 14px; margin: 22px 0; } .pulls { margin-bottom: 9px; } /* "Pulls" the next block element up by halving the margin. */ .pulled { margin-top: 11px; margin-bottom: 22px; } /* Preserves vertical rhythm. Not always necessary */ b, strong { font-weight: bold; } em, cite { font-style: italic; } hr { background: #CCC; border: none; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.075); clear: both; color: #CCC; display: block; height: 1px; margin: 18px 0 36px 0; padding: 0; width: 100%; } hr.thin { margin-bottom: 18px; margin-left: auto; margin-right: auto; opacity: 0.40; filter: alpha(opacity=40); width: 50%; } /* Links in the header and footer don't change color when visited. */ a:link, a:visited, header a:visited, footer a:visited, .visited-no-recolor a:visited, a.visited-no-recolor:visited { color: #005987; } a:link.no-underline, a:visited.no-underline, header a:visited.no-underline, footer a:visited.no-underline, .visited-no-recolor a:visited.no-underline, a.visited-no-recolor:visited.no-underline { text-decoration: none; } a:visited { color: #7D00AD; } a:link:hover, a:link:focus, a:visited:hover, a:visited:focus { color: #707070; } a:link:hover.no-underline, a:link:focus.no-underline, a:visited:hover.no-underline, a:visited:focus.no-underline { text-decoration: none; } form { display: inline; } .fixed-width { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .superscript { /* http://stackoverflow.com/questions/501671/superscript-in-css-only */ font-size: .83em; line-height: 0.5em; vertical-align: baseline; position: relative; top: -0.4em; } ul.styled-list, ol.styled-list { margin-left: 16px; } ul.styled-list { list-style: disc; } ol.styled-list { list-style: decimal; } .float-left { float: left; } .float-right { float: right; } .domain-color { background: #314453 !important; } .subject-color { background: #4d6779 !important; } .topic-color { background: #6a8da6 !important; } .tutorial-color { background: #fff !important; } html .science { color: #ffffff; } html .science.domain-color, html .science .domain-color { background: #94424f !important; } html .science.subject-color, html .science .subject-color { background: #9d4a5a !important; } html .science.topic-color, html .science .topic-color { background: #c55f73 !important; } html .science.tutorial-color, html .science .tutorial-color { background: #fff; } html .science.accent-button, html .science .accent-button { border: 1px solid #893d49; color: #ffffff; text-shadow: none; background-color: #8a3e4a; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#94424f), to(#7b3742)); background-image: -webkit-linear-gradient(top, #94424f, #7b3742); background-image: linear-gradient(to bottom, #94424f, #7b3742); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff94424f', endColorstr='#ff7b3742', GradientType=0); border-color: #7b3742 #7b3742 #461f26; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #7b3742; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; -webkit-font-smoothing: antialiased; } html .science.accent-button:hover, html .science .accent-button:hover, html .science.accent-button:focus, html .science .accent-button:focus, html .science.accent-button:active, html .science .accent-button:active, html .science.accent-button.active, html .science .accent-button.active, html .science.accent-button.disabled, html .science .accent-button.disabled, html .science.accent-button[disabled], html .science .accent-button[disabled] { color: #ffffff; background-color: #7b3742; *background-color: #6a2f38; } html .science.accent-button:active, html .science .accent-button:active, html .science.accent-button.active, html .science .accent-button.active { background-color: #58272f \9; } html .science.accent-button:focus, html .science .accent-button:focus, html .science.accent-button:hover, html .science .accent-button:hover { border-bottom-color: #5f2a33; } html .humanities { color: #ffffff; } html .humanities.domain-color, html .humanities .domain-color { background: #ad3434 !important; } html .humanities.subject-color, html .humanities .subject-color { background: #c13b31 !important; } html .humanities.topic-color, html .humanities .topic-color { background: #d24a45 !important; } html .humanities.tutorial-color, html .humanities .tutorial-color { background: #fff; } html .humanities.accent-button, html .humanities .accent-button { border: 1px solid #a13030; color: #ffffff; text-shadow: none; background-color: #a23131; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ad3434), to(#922c2c)); background-image: -webkit-linear-gradient(top, #ad3434, #922c2c); background-image: linear-gradient(to bottom, #ad3434, #922c2c); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffad3434', endColorstr='#ff922c2c', GradientType=0); border-color: #922c2c #922c2c #571a1a; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #922c2c; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; -webkit-font-smoothing: antialiased; } html .humanities.accent-button:hover, html .humanities .accent-button:hover, html .humanities.accent-button:focus, html .humanities .accent-button:focus, html .humanities.accent-button:active, html .humanities .accent-button:active, html .humanities.accent-button.active, html .humanities .accent-button.active, html .humanities.accent-button.disabled, html .humanities .accent-button.disabled, html .humanities.accent-button[disabled], html .humanities .accent-button[disabled] { color: #ffffff; background-color: #922c2c; *background-color: #7e2626; } html .humanities.accent-button:active, html .humanities .accent-button:active, html .humanities.accent-button.active, html .humanities .accent-button.active { background-color: #6a2020 \9; } html .humanities.accent-button:focus, html .humanities .accent-button:focus, html .humanities.accent-button:hover, html .humanities .accent-button:hover { border-bottom-color: #722222; } html .economics-finance-domain { color: #ffffff; } html .economics-finance-domain.domain-color, html .economics-finance-domain .domain-color { background: #b77033 !important; } html .economics-finance-domain.subject-color, html .economics-finance-domain .subject-color { background: #bf7b34 !important; } html .economics-finance-domain.topic-color, html .economics-finance-domain .topic-color { background: #d1933b !important; } html .economics-finance-domain.tutorial-color, html .economics-finance-domain .tutorial-color { background: #fff; } html .economics-finance-domain.accent-button, html .economics-finance-domain .accent-button { border: 1px solid #ab6930; color: #ffffff; text-shadow: none; background-color: #ac6930; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b77033), to(#9b5f2b)); background-image: -webkit-linear-gradient(top, #b77033, #9b5f2b); background-image: linear-gradient(to bottom, #b77033, #9b5f2b); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb77033', endColorstr='#ff9b5f2b', GradientType=0); border-color: #9b5f2b #9b5f2b #5f3a1b; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #9b5f2b; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; -webkit-font-smoothing: antialiased; } html .economics-finance-domain.accent-button:hover, html .economics-finance-domain .accent-button:hover, html .economics-finance-domain.accent-button:focus, html .economics-finance-domain .accent-button:focus, html .economics-finance-domain.accent-button:active, html .economics-finance-domain .accent-button:active, html .economics-finance-domain.accent-button.active, html .economics-finance-domain .accent-button.active, html .economics-finance-domain.accent-button.disabled, html .economics-finance-domain .accent-button.disabled, html .economics-finance-domain.accent-button[disabled], html .economics-finance-domain .accent-button[disabled] { color: #ffffff; background-color: #9b5f2b; *background-color: #875326; } html .economics-finance-domain.accent-button:active, html .economics-finance-domain .accent-button:active, html .economics-finance-domain.accent-button.active, html .economics-finance-domain .accent-button.active { background-color: #734720 \9; } html .economics-finance-domain.accent-button:focus, html .economics-finance-domain .accent-button:focus, html .economics-finance-domain.accent-button:hover, html .economics-finance-domain .accent-button:hover { border-bottom-color: #7b4b22; } html .cs { color: #ffffff; } html .cs.domain-color, html .cs .domain-color { background: #437a39 !important; } html .cs.subject-color, html .cs .subject-color { background: #53893e !important; } html .cs.topic-color, html .cs .topic-color { background: #689b51 !important; } html .cs.tutorial-color, html .cs .tutorial-color { background: #fff; } html .cs.accent-button, html .cs .accent-button { border: 1px solid #3d7034; color: #ffffff; text-shadow: none; background-color: #3e7034; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#437a39), to(#36622e)); background-image: -webkit-linear-gradient(top, #437a39, #36622e); background-image: linear-gradient(to bottom, #437a39, #36622e); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff437a39', endColorstr='#ff36622e', GradientType=0); border-color: #36622e #36622e #192e15; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #36622e; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; -webkit-font-smoothing: antialiased; } html .cs.accent-button:hover, html .cs .accent-button:hover, html .cs.accent-button:focus, html .cs .accent-button:focus, html .cs.accent-button:active, html .cs .accent-button:active, html .cs.accent-button.active, html .cs .accent-button.active, html .cs.accent-button.disabled, html .cs .accent-button.disabled, html .cs.accent-button[disabled], html .cs .accent-button[disabled] { color: #ffffff; background-color: #36622e; *background-color: #2c5026; } html .cs.accent-button:active, html .cs .accent-button:active, html .cs.accent-button.active, html .cs .accent-button.active { background-color: #233f1d \9; } html .cs.accent-button:focus, html .cs .accent-button:focus, html .cs.accent-button:hover, html .cs .accent-button:hover { border-bottom-color: #264621; } html .hour-of-code { color: #ffffff; } html .hour-of-code.domain-color, html .hour-of-code .domain-color { background: #437a39 !important; } html .hour-of-code.subject-color, html .hour-of-code .subject-color { background: #53893e !important; } html .hour-of-code.topic-color, html .hour-of-code .topic-color { background: #689b51 !important; } html .hour-of-code.tutorial-color, html .hour-of-code .tutorial-color { background: #fff; } html .hour-of-code.accent-button, html .hour-of-code .accent-button { border: 1px solid #3d7034; color: #ffffff; text-shadow: none; background-color: #3e7034; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#437a39), to(#36622e)); background-image: -webkit-linear-gradient(top, #437a39, #36622e); background-image: linear-gradient(to bottom, #437a39, #36622e); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff437a39', endColorstr='#ff36622e', GradientType=0); border-color: #36622e #36622e #192e15; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #36622e; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; -webkit-font-smoothing: antialiased; } html .hour-of-code.accent-button:hover, html .hour-of-code .accent-button:hover, html .hour-of-code.accent-button:focus, html .hour-of-code .accent-button:focus, html .hour-of-code.accent-button:active, html .hour-of-code .accent-button:active, html .hour-of-code.accent-button.active, html .hour-of-code .accent-button.active, html .hour-of-code.accent-button.disabled, html .hour-of-code .accent-button.disabled, html .hour-of-code.accent-button[disabled], html .hour-of-code .accent-button[disabled] { color: #ffffff; background-color: #36622e; *background-color: #2c5026; } html .hour-of-code.accent-button:active, html .hour-of-code .accent-button:active, html .hour-of-code.accent-button.active, html .hour-of-code .accent-button.active { background-color: #233f1d \9; } html .hour-of-code.accent-button:focus, html .hour-of-code .accent-button:focus, html .hour-of-code.accent-button:hover, html .hour-of-code .accent-button:hover { border-bottom-color: #264621; } html .computer-programming { color: #ffffff; } html .computer-programming.domain-color, html .computer-programming .domain-color { background: #437a39 !important; } html .computer-programming.subject-color, html .computer-programming .subject-color { background: #53893e !important; } html .computer-programming.topic-color, html .computer-programming .topic-color { background: #689b51 !important; } html .computer-programming.tutorial-color, html .computer-programming .tutorial-color { background: #fff; } html .computer-programming.accent-button, html .computer-programming .accent-button { border: 1px solid #3d7034; color: #ffffff; text-shadow: none; background-color: #3e7034; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#437a39), to(#36622e)); background-image: -webkit-linear-gradient(top, #437a39, #36622e); background-image: linear-gradient(to bottom, #437a39, #36622e); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff437a39', endColorstr='#ff36622e', GradientType=0); border-color: #36622e #36622e #192e15; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #36622e; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; -webkit-font-smoothing: antialiased; } html .computer-programming.accent-button:hover, html .computer-programming .accent-button:hover, html .computer-programming.accent-button:focus, html .computer-programming .accent-button:focus, html .computer-programming.accent-button:active, html .computer-programming .accent-button:active, html .computer-programming.accent-button.active, html .computer-programming .accent-button.active, html .computer-programming.accent-button.disabled, html .computer-programming .accent-button.disabled, html .computer-programming.accent-button[disabled], html .computer-programming .accent-button[disabled] { color: #ffffff; background-color: #36622e; *background-color: #2c5026; } html .computer-programming.accent-button:active, html .computer-programming .accent-button:active, html .computer-programming.accent-button.active, html .computer-programming .accent-button.active { background-color: #233f1d \9; } html .computer-programming.accent-button:focus, html .computer-programming .accent-button:focus, html .computer-programming.accent-button:hover, html .computer-programming .accent-button:hover { border-bottom-color: #264621; } html .computing { color: #ffffff; } html .computing.domain-color, html .computing .domain-color { background: #437a39 !important; } html .computing.subject-color, html .computing .subject-color { background: #53893e !important; } html .computing.topic-color, html .computing .topic-color { background: #689b51 !important; } html .computing.tutorial-color, html .computing .tutorial-color { background: #fff; } html .computing.accent-button, html .computing .accent-button { border: 1px solid #3d7034; color: #ffffff; text-shadow: none; background-color: #3e7034; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#437a39), to(#36622e)); background-image: -webkit-linear-gradient(top, #437a39, #36622e); background-image: linear-gradient(to bottom, #437a39, #36622e); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff437a39', endColorstr='#ff36622e', GradientType=0); border-color: #36622e #36622e #192e15; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #36622e; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; -webkit-font-smoothing: antialiased; } html .computing.accent-button:hover, html .computing .accent-button:hover, html .computing.accent-button:focus, html .computing .accent-button:focus, html .computing.accent-button:active, html .computing .accent-button:active, html .computing.accent-button.active, html .computing .accent-button.active, html .computing.accent-button.disabled, html .computing .accent-button.disabled, html .computing.accent-button[disabled], html .computing .accent-button[disabled] { color: #ffffff; background-color: #36622e; *background-color: #2c5026; } html .computing.accent-button:active, html .computing .accent-button:active, html .computing.accent-button.active, html .computing .accent-button.active { background-color: #233f1d \9; } html .computing.accent-button:focus, html .computing .accent-button:focus, html .computing.accent-button:hover, html .computing .accent-button:hover { border-bottom-color: #264621; } html .partner-content { color: #ffffff; } html .partner-content.domain-color, html .partner-content .domain-color { background: #218270 !important; } html .partner-content.subject-color, html .partner-content .subject-color { background: #2c8d7b !important; } html .partner-content.topic-color, html .partner-content .topic-color { background: #329a86 !important; } html .partner-content.tutorial-color, html .partner-content .tutorial-color { background: #fff; } html .partner-content.accent-button, html .partner-content .accent-button { border: 1px solid #1e7665; color: #ffffff; text-shadow: none; background-color: #1e7766; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#218270), to(#1a6657)); background-image: -webkit-linear-gradient(top, #218270, #1a6657); background-image: linear-gradient(to bottom, #218270, #1a6657); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff218270', endColorstr='#ff1a6657', GradientType=0); border-color: #1a6657 #1a6657 #0a2923; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #1a6657; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; -webkit-font-smoothing: antialiased; } html .partner-content.accent-button:hover, html .partner-content .accent-button:hover, html .partner-content.accent-button:focus, html .partner-content .accent-button:focus, html .partner-content.accent-button:active, html .partner-content .accent-button:active, html .partner-content.accent-button.active, html .partner-content .accent-button.active, html .partner-content.accent-button.disabled, html .partner-content .accent-button.disabled, html .partner-content.accent-button[disabled], html .partner-content .accent-button[disabled] { color: #ffffff; background-color: #1a6657; *background-color: #155146; } html .partner-content.accent-button:active, html .partner-content .accent-button:active, html .partner-content.accent-button.active, html .partner-content .accent-button.active { background-color: #0f3d34 \9; } html .partner-content.accent-button:focus, html .partner-content .accent-button:focus, html .partner-content.accent-button:hover, html .partner-content .accent-button:hover { border-bottom-color: #12453b; } html .math { color: #ffffff; } html .math.domain-color, html .math .domain-color { background: #1c758a !important; } html .math.subject-color, html .math .subject-color { background: #46a8bf !important; } html .math.topic-color, html .math .topic-color { background: #4fbad4 !important; } html .math.tutorial-color, html .math .tutorial-color { background: #fff; } html .math.accent-button, html .math .accent-button { border: 1px solid #196a7d; color: #ffffff; text-shadow: none; background-color: #1a6b7e; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1c758a), to(#165c6c)); background-image: -webkit-linear-gradient(top, #1c758a, #165c6c); background-image: linear-gradient(to bottom, #1c758a, #165c6c); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1c758a', endColorstr='#ff165c6c', GradientType=0); border-color: #165c6c #165c6c #09262d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #165c6c; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; -webkit-font-smoothing: antialiased; } html .math.accent-button:hover, html .math .accent-button:hover, html .math.accent-button:focus, html .math .accent-button:focus, html .math.accent-button:active, html .math .accent-button:active, html .math.accent-button.active, html .math .accent-button.active, html .math.accent-button.disabled, html .math .accent-button.disabled, html .math.accent-button[disabled], html .math .accent-button[disabled] { color: #ffffff; background-color: #165c6c; *background-color: #124a57; } html .math.accent-button:active, html .math .accent-button:active, html .math.accent-button.active, html .math .accent-button.active { background-color: #0d3842 \9; } html .math.accent-button:focus, html .math .accent-button:focus, html .math.accent-button:hover, html .math .accent-button:hover { border-bottom-color: #0f3f4a; } html .test-prep { color: #ffffff; } html .test-prep.domain-color, html .test-prep .domain-color { background: #644172 !important; } html .test-prep.subject-color, html .test-prep .subject-color { background: #7e5f8e !important; } html .test-prep.topic-color, html .test-prep .topic-color { background: #9a72ac !important; } html .test-prep.tutorial-color, html .test-prep .tutorial-color { background: #fff; } html .test-prep.accent-button, html .test-prep .accent-button { border: 1px solid #5b3b68; color: #ffffff; text-shadow: none; background-color: #5c3c69; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#644172), to(#50345b)); background-image: -webkit-linear-gradient(top, #644172, #50345b); background-image: linear-gradient(to bottom, #644172, #50345b); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff644172', endColorstr='#ff50345b', GradientType=0); border-color: #50345b #50345b #25182b; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #50345b; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; -webkit-font-smoothing: antialiased; } html .test-prep.accent-button:hover, html .test-prep .accent-button:hover, html .test-prep.accent-button:focus, html .test-prep .accent-button:focus, html .test-prep.accent-button:active, html .test-prep .accent-button:active, html .test-prep.accent-button.active, html .test-prep .accent-button.active, html .test-prep.accent-button.disabled, html .test-prep .accent-button.disabled, html .test-prep.accent-button[disabled], html .test-prep .accent-button[disabled] { color: #ffffff; background-color: #50345b; *background-color: #422b4b; } html .test-prep.accent-button:active, html .test-prep .accent-button:active, html .test-prep.accent-button.active, html .test-prep .accent-button.active { background-color: #34223b \9; } html .test-prep.accent-button:focus, html .test-prep .accent-button:focus, html .test-prep.accent-button:hover, html .test-prep .accent-button:hover { border-bottom-color: #392541; } .sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .skip-to-main { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; background-color: #ffffff; left: 60px; line-height: 45px; padding: 0 10px; top: 60px; } .skip-to-main:focus, .skip-to-main:active { clip: auto; height: auto; width: auto; } .dropdown-toggle { cursor: pointer; border-color: transparent; border-width: 1px 1px 0px 1px; border-style: solid; } button.dropdown-toggle { background-color: white; } .dropdown.open .dropdown-toggle { color: #ffffff; background-color: #2c3747; border-color: #2c3747; } .right-arrow { top: 50%; right: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 3px solid #444444; position: absolute; right: 6px; margin-top: -3px; } .caret { bottom: 0; left: 50%; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #444444; display: inline-block; margin-left: 2px; margin-bottom: 2px; } .dropdown-toggle:hover .caret, .open.dropdown .caret { bottom: 0; left: 50%; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #ffffff; margin-left: 2px; } .dropdown.open > .dropdown-menu { display: block; } .dropdown-menu { position: absolute; z-index: 1000; float: left; display: none; list-style: none; background-color: #ffffff; padding: 3px 0; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; border-bottom: 1px solid #999; box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5); } .dropdown-menu li { position: relative; float: left; clear: both; width: 100%; } .dropdown-menu li > a, .dropdown-menu li > label { white-space: nowrap; display: block; padding: 5px 8px; } .dropdown-menu > li { color: #444444; } .dropdown-menu > li.disabled > a, .dropdown-menu > li.disabled > label { color: #ccc !important; cursor: not-allowed; } .dropdown-menu > li > a, .dropdown-menu > li > label { border-top: 1px solid transparent; border-bottom: 1px solid transparent; color: #444444; position: relative; } .dropdown-menu > li > a:link:hover, .dropdown-menu > li > a:visited:hover, .dropdown-menu > li > a:link:focus, .dropdown-menu > li > a:visited:focus { text-decoration: none; color: #444444; } .dropdown-menu.child-active > li.hover-active, .dropdown-menu.none-active > li:hover, .dropdown-menu.no-submenus > li:hover { text-decoration: none; background-color: #2c3747; } .dropdown-menu.child-active > li.hover-active.disabled > a, .dropdown-menu.none-active > li:hover.disabled > a, .dropdown-menu.no-submenus > li:hover.disabled > a, .dropdown-menu.child-active > li.hover-active.disabled > label, .dropdown-menu.none-active > li:hover.disabled > label, .dropdown-menu.no-submenus > li:hover.disabled > label { border-top: 1px solid transparent; border-bottom: 1px solid transparent; text-decoration: none; } .dropdown-menu.child-active > li.hover-active > a, .dropdown-menu.none-active > li:hover > a, .dropdown-menu.no-submenus > li:hover > a, .dropdown-menu.child-active > li.hover-active > label, .dropdown-menu.none-active > li:hover > label, .dropdown-menu.no-submenus > li:hover > label { border-bottom: 1px solid #dddddd; border-top: 1px solid #dddddd; color: #ffffff; text-decoration: none; cursor: pointer; } .dropdown-menu.child-active > li.hover-active > a:hover, .dropdown-menu.none-active > li:hover > a:hover, .dropdown-menu.no-submenus > li:hover > a:hover, .dropdown-menu.child-active > li.hover-active > label:hover, .dropdown-menu.none-active > li:hover > label:hover, .dropdown-menu.no-submenus > li:hover > label:hover { border-color: #2c3747; } .dropdown-menu.child-active > li.hover-active > div.right-arrow, .dropdown-menu.none-active > li:hover > div.right-arrow, .dropdown-menu.no-submenus > li:hover > div.right-arrow { top: 50%; right: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 3px solid #ffffff; position: absolute; right: 6px; } .dropdown-menu > li.has-submenu { cursor: default; } .dropdown-menu > li.is-subheader, .dropdown-menu > li.is-subheader:hover, .dropdown-menu > li.is-subheader.hover-active { cursor: default; background-color: transparent; border-bottom: 1px solid transparent; } .dropdown-menu > li.is-subheader > a, .dropdown-menu > li.is-subheader:hover > a, .dropdown-menu > li.is-subheader.hover-active > a { color: #777777; text-transform: uppercase; font-weight: inherit; bottom: 0px; text-shadow: none; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 9px; line-height: 17px; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .dropdown-menu > li.hover-active > ul, .dropdown-menu > li.hover-active > .sub-menu-custom { display: block; } .dropdown-menu > li.has-divider { border-top: solid 1px #dddddd; } .base-button, .simple-button { cursor: pointer !important; font-family: inherit; /* input[type=button] won't inherit by default */ line-height: 20px; margin: 0; position: relative; text-decoration: none !important; text-shadow: none; -webkit-transition: box-shadow ease-in-out 0.15s; transition: box-shadow ease-in-out 0.15s; -webkit-appearance: none; /* Special button types */ } .base-button.seethrough { /* Creating my own gradient instead of using a mixin because I explicitly * do not want to set a background color which the mixin does by default. */ background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 0.5)', endColorstr='rgba(255, 255, 255, 0)', GradientType=0); text-shadow: none; } .base-button.with-icon { padding-left: 30px; } .base-button.with-icon img { left: 7px; position: absolute; top: 3px; } .base-button.social-button { display: inline-block; font-size: 12px; font-weight: bold; margin-bottom: 9px; max-width: 200px; padding-top: 7px; text-transform: uppercase; } .base-button.social-button img { height: 24px; vertical-align: middle; width: 24px; } .base-button.donate-button { bottom: 1px; padding: 3px 7px; } .base-button.big-button { padding: 0 2em; line-height: 2.5; } .base-button.wide { padding-left: 25px; padding-right: 25px; } .base-button.rounded { border-radius: 20px; } /* A simple 3D button style */ .simple-button { border-radius: 3px; border: 1px solid #e6e6e6; color: #444444; text-shadow: none; background-color: #e7e7e7; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dcdcdc)); background-image: -webkit-linear-gradient(top, #eeeeee, #dcdcdc); background-image: linear-gradient(to bottom, #eeeeee, #dcdcdc); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdcdcdc', GradientType=0); border-color: #dcdcdc #dcdcdc #b6b6b6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #dcdcdc; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #444444 !important; padding: 5px 10px; } .simple-button:hover, .simple-button:focus, .simple-button:active, .simple-button.active, .simple-button.disabled, .simple-button[disabled] { color: #444444; background-color: #dcdcdc; *background-color: #cfcfcf; } .simple-button:active, .simple-button.active { background-color: #c3c3c3 \9; } .simple-button:focus, .simple-button:hover { border-bottom-color: #c8c8c8; } .simple-button:focus, .simple-button:hover { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35), inset 0 0 50px 5px rgba(255, 255, 255, 0.2); } .simple-button:active, .simple-button.toggled { border-color: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.4); } .simple-button:disabled, .simple-button.disabled { background-image: none !important; box-shadow: none; cursor: not-allowed !important; opacity: 0.5; top: 0 !important; } .simple-button.blue, .simple-button.secondary { border: 1px solid #344050; color: #ffffff; text-shadow: none; background-color: #344050; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3a4759), to(#2c3643)); background-image: -webkit-linear-gradient(top, #3a4759, #2c3643); background-image: linear-gradient(to bottom, #3a4759, #2c3643); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3a4759', endColorstr='#ff2c3643', GradientType=0); border-color: #2c3643 #2c3643 #0e1115; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #2c3643; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .simple-button.blue:hover, .simple-button.secondary:hover, .simple-button.blue:focus, .simple-button.secondary:focus, .simple-button.blue:active, .simple-button.secondary:active, .simple-button.blue.active, .simple-button.secondary.active, .simple-button.blue.disabled, .simple-button.secondary.disabled, .simple-button.blue[disabled], .simple-button.secondary[disabled] { color: #ffffff; background-color: #2c3643; *background-color: #222934; } .simple-button.blue:active, .simple-button.secondary:active, .simple-button.blue.active, .simple-button.secondary.active { background-color: #181d25 \9; } .simple-button.blue:focus, .simple-button.secondary:focus, .simple-button.blue:hover, .simple-button.secondary:hover { border-bottom-color: #1c222b; } .simple-button.green, .simple-button.primary { border: 1px solid #7fab07; color: #ffffff; text-shadow: none; background-color: #80ac07; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#8aba08), to(#719807)); background-image: -webkit-linear-gradient(top, #8aba08, #719807); background-image: linear-gradient(to bottom, #8aba08, #719807); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8aba08', endColorstr='#ff719807', GradientType=0); border-color: #719807 #719807 #3a4e03; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #719807; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .simple-button.green:hover, .simple-button.primary:hover, .simple-button.green:focus, .simple-button.primary:focus, .simple-button.green:active, .simple-button.primary:active, .simple-button.green.active, .simple-button.primary.active, .simple-button.green.disabled, .simple-button.primary.disabled, .simple-button.green[disabled], .simple-button.primary[disabled] { color: #ffffff; background-color: #719807; *background-color: #5e7f05; } .simple-button.green:active, .simple-button.primary:active, .simple-button.green.active, .simple-button.primary.active { background-color: #4c6704 \9; } .simple-button.green:focus, .simple-button.primary:focus, .simple-button.green:hover, .simple-button.primary:hover { border-bottom-color: #547105; } .simple-button.orange, .simple-button.warning { border: 1px solid #d45704; color: #ffffff; text-shadow: none; background-color: #d55704; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e35d04), to(#c04f03)); background-image: -webkit-linear-gradient(top, #e35d04, #c04f03); background-image: linear-gradient(to bottom, #e35d04, #c04f03); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe35d04', endColorstr='#ffc04f03', GradientType=0); border-color: #c04f03 #c04f03 #753002; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #c04f03; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .simple-button.orange:hover, .simple-button.warning:hover, .simple-button.orange:focus, .simple-button.warning:focus, .simple-button.orange:active, .simple-button.warning:active, .simple-button.orange.active, .simple-button.warning.active, .simple-button.orange.disabled, .simple-button.warning.disabled, .simple-button.orange[disabled], .simple-button.warning[disabled] { color: #ffffff; background-color: #c04f03; *background-color: #a74403; } .simple-button.orange:active, .simple-button.warning:active, .simple-button.orange.active, .simple-button.warning.active { background-color: #8e3a02 \9; } .simple-button.orange:focus, .simple-button.warning:focus, .simple-button.orange:hover, .simple-button.warning:hover { border-bottom-color: #983e03; } .simple-button.purple { border: 1px solid #808ce9; color: #ffffff; text-shadow: none; background-color: #818de9; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#8d98eb), to(#6f7de6)); background-image: -webkit-linear-gradient(top, #8d98eb, #6f7de6); background-image: linear-gradient(to bottom, #8d98eb, #6f7de6); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8d98eb', endColorstr='#ff6f7de6', GradientType=0); border-color: #6f7de6 #6f7de6 #2e42da; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #6f7de6; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .simple-button.purple:hover, .simple-button.purple:focus, .simple-button.purple:active, .simple-button.purple.active, .simple-button.purple.disabled, .simple-button.purple[disabled] { color: #ffffff; background-color: #6f7de6; *background-color: #5969e2; } .simple-button.purple:active, .simple-button.purple.active { background-color: #4355de \9; } .simple-button.purple:focus, .simple-button.purple:hover { border-bottom-color: #4c5de0; } .simple-button.gray { border: 1px solid #808080; color: #ffffff; text-shadow: none; background-color: #818181; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#888888), to(#767676)); background-image: -webkit-linear-gradient(top, #888888, #767676); background-image: linear-gradient(to bottom, #888888, #767676); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff888888', endColorstr='#ff767676', GradientType=0); border-color: #767676 #767676 #505050; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #767676; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .simple-button.gray:hover, .simple-button.gray:focus, .simple-button.gray:active, .simple-button.gray.active, .simple-button.gray.disabled, .simple-button.gray[disabled] { color: #ffffff; background-color: #767676; *background-color: #696969; } .simple-button.gray:active, .simple-button.gray.active { background-color: #5d5d5d \9; } .simple-button.gray:focus, .simple-button.gray:hover { border-bottom-color: #626262; } .simple-button.brightblue { border: 1px solid #55a4fa; color: #ffffff; text-shadow: none; background-color: #56a5fa; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#64acfa), to(#4199f9)); background-image: -webkit-linear-gradient(top, #64acfa, #4199f9); background-image: linear-gradient(to bottom, #64acfa, #4199f9); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff64acfa', endColorstr='#ff4199f9', GradientType=0); border-color: #4199f9 #4199f9 #0772e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #4199f9; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .simple-button.brightblue:hover, .simple-button.brightblue:focus, .simple-button.brightblue:active, .simple-button.brightblue.active, .simple-button.brightblue.disabled, .simple-button.brightblue[disabled] { color: #ffffff; background-color: #4199f9; *background-color: #298cf8; } .simple-button.brightblue:active, .simple-button.brightblue.active { background-color: #107ff7 \9; } .simple-button.brightblue:focus, .simple-button.brightblue:hover { border-bottom-color: #1a84f8; } .simple-button.mathblue { border: 1px solid #1e7c92; color: #ffffff; text-shadow: none; background-color: #1e7d93; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#20879f), to(#1a6e82)); background-image: -webkit-linear-gradient(top, #20879f, #1a6e82); background-image: linear-gradient(to bottom, #20879f, #1a6e82); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff20879f', endColorstr='#ff1a6e82', GradientType=0); border-color: #1a6e82 #1a6e82 #0d3842; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #1a6e82; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .simple-button.mathblue:hover, .simple-button.mathblue:focus, .simple-button.mathblue:active, .simple-button.mathblue.active, .simple-button.mathblue.disabled, .simple-button.mathblue[disabled] { color: #ffffff; background-color: #1a6e82; *background-color: #165c6c; } .simple-button.mathblue:active, .simple-button.mathblue.active { background-color: #124a57 \9; } .simple-button.mathblue:focus, .simple-button.mathblue:hover { border-bottom-color: #135160; } .simple-button.lightgreen { border: 1px solid #b9cd83; color: #ffffff; text-shadow: none; background-color: #b9cd84; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bfd18e), to(#b1c775)); background-image: -webkit-linear-gradient(top, #bfd18e, #b1c775); background-image: linear-gradient(to bottom, #bfd18e, #b1c775); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbfd18e', endColorstr='#ffb1c775', GradientType=0); border-color: #b1c775 #b1c775 #8faa45; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #b1c775; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .simple-button.lightgreen:hover, .simple-button.lightgreen:focus, .simple-button.lightgreen:active, .simple-button.lightgreen.active, .simple-button.lightgreen.disabled, .simple-button.lightgreen[disabled] { color: #ffffff; background-color: #b1c775; *background-color: #a6bf63; } .simple-button.lightgreen:active, .simple-button.lightgreen.active { background-color: #9cb850 \9; } .simple-button.lightgreen:focus, .simple-button.lightgreen:hover { border-bottom-color: #a0bb58; } .simple-button.exercise-orange { border: 1px solid #f09b00; color: #ffffff; text-shadow: none; background-color: #f19c00; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffa500), to(#db8e00)); background-image: -webkit-linear-gradient(top, #ffa500, #db8e00); background-image: linear-gradient(to bottom, #ffa500, #db8e00); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffa500', endColorstr='#ffdb8e00', GradientType=0); border-color: #db8e00 #db8e00 #8f5c00; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #db8e00; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .simple-button.exercise-orange:hover, .simple-button.exercise-orange:focus, .simple-button.exercise-orange:active, .simple-button.exercise-orange.active, .simple-button.exercise-orange.disabled, .simple-button.exercise-orange[disabled] { color: #ffffff; background-color: #db8e00; *background-color: #c27d00; } .simple-button.exercise-orange:active, .simple-button.exercise-orange.active { background-color: #a86d00 \9; } .simple-button.exercise-orange:focus, .simple-button.exercise-orange:hover { border-bottom-color: #b37300; } .simple-button.facebook { border: 1px solid #37538d; color: #ffffff; text-shadow: none; background-color: #37538e; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3b5998), to(#314a7e)); background-image: -webkit-linear-gradient(top, #3b5998, #314a7e); background-image: linear-gradient(to bottom, #3b5998, #314a7e); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b5998', endColorstr='#ff314a7e', GradientType=0); border-color: #314a7e #314a7e #1c2a47; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #314a7e; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .simple-button.facebook:hover, .simple-button.facebook:focus, .simple-button.facebook:active, .simple-button.facebook.active, .simple-button.facebook.disabled, .simple-button.facebook[disabled] { color: #ffffff; background-color: #314a7e; *background-color: #2a3f6c; } .simple-button.facebook:active, .simple-button.facebook.active { background-color: #23345a \9; } .simple-button.facebook:focus, .simple-button.facebook:hover { border-bottom-color: #263961; } .simple-button.facebook-light { border: 1px solid #4763a1; color: #ffffff; text-shadow: none; background-color: #4864a2; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4c6aac), to(#415b93)); background-image: -webkit-linear-gradient(top, #4c6aac, #415b93); background-image: linear-gradient(to bottom, #4c6aac, #415b93); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4c6aac', endColorstr='#ff415b93', GradientType=0); border-color: #415b93 #415b93 #2a3a5e; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #415b93; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .simple-button.facebook-light:hover, .simple-button.facebook-light:focus, .simple-button.facebook-light:active, .simple-button.facebook-light.active, .simple-button.facebook-light.disabled, .simple-button.facebook-light[disabled] { color: #ffffff; background-color: #415b93; *background-color: #395082; } .simple-button.facebook-light:active, .simple-button.facebook-light.active { background-color: #314570 \9; } .simple-button.facebook-light:focus, .simple-button.facebook-light:hover { border-bottom-color: #354977; } .simple-button.twitter { border: 1px solid #3191ff; color: #ffffff; text-shadow: none; background-color: #3291ff; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4099ff), to(#1c86ff)); background-image: -webkit-linear-gradient(top, #4099ff, #1c86ff); background-image: linear-gradient(to bottom, #4099ff, #1c86ff); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4099ff', endColorstr='#ff1c86ff', GradientType=0); border-color: #1c86ff #1c86ff #0060cf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #1c86ff; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .simple-button.twitter:hover, .simple-button.twitter:focus, .simple-button.twitter:active, .simple-button.twitter.active, .simple-button.twitter.disabled, .simple-button.twitter[disabled] { color: #ffffff; background-color: #1c86ff; *background-color: #0378ff; } .simple-button.twitter:active, .simple-button.twitter.active { background-color: #006ce8 \9; } .simple-button.twitter:focus, .simple-button.twitter:hover { border-bottom-color: #0071f3; } .simple-button.default-domain-color { border: 1px solid #24323d; color: #ffffff; text-shadow: none; background-color: #24323d; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#293946), to(#1c2730)); background-image: -webkit-linear-gradient(top, #293946, #1c2730); background-image: linear-gradient(to bottom, #293946, #1c2730); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff293946', endColorstr='#ff1c2730', GradientType=0); border-color: #1c2730 #1c2730 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #1c2730; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .simple-button.default-domain-color:hover, .simple-button.default-domain-color:focus, .simple-button.default-domain-color:active, .simple-button.default-domain-color.active, .simple-button.default-domain-color.disabled, .simple-button.default-domain-color[disabled] { color: #ffffff; background-color: #1c2730; *background-color: #131a20; } .simple-button.default-domain-color:active, .simple-button.default-domain-color.active { background-color: #090d10 \9; } .simple-button.default-domain-color:focus, .simple-button.default-domain-color:hover { border-bottom-color: #0d1216; } /* A group of simple-buttons */ .simple-button-group .simple-button { border-radius: 0px; /* Hide the overlapping blue focus outline */ } .simple-button-group .simple-button:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .simple-button-group .simple-button:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .simple-button-group .simple-button:focus { outline: none; } .action-gradient { /* TODO (jasonrr): remove this once the last few uses of it have been converted or removed */ color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #f7f7f7; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdfdfd), to(#eeeeee)); background-image: -webkit-linear-gradient(top, #fdfdfd, #eeeeee); background-image: linear-gradient(to bottom, #fdfdfd, #eeeeee); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffdfdfd', endColorstr='#ffeeeeee', GradientType=0); border-color: #eeeeee #eeeeee #c8c8c8; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #eeeeee; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .action-gradient:hover, .action-gradient:focus, .action-gradient:active, .action-gradient.active, .action-gradient.disabled, .action-gradient[disabled] { color: #ffffff; background-color: #eeeeee; *background-color: #e1e1e1; } .action-gradient:active, .action-gradient.active { background-color: #d5d5d5 \9; } input.simple-button { /* Inputs (specificically buttons) don't obey padding in some cases */ line-height: 15px; } a.big-button:link, a.big-button:visited { color: inherit; display: inline-block; text-decoration: none; /* For big solo buttons that should expand in width * to fill their container. */ } a.big-button:link.block-button, a.big-button:visited.block-button { display: block; text-align: center; } /** * Links that wrap divs and are big buttons, * such as badge description buttons. */ a.big-button:focus > div, a.big-button:hover > div, a.big-button:active > div { box-shadow: 0px 0px 4px 0px #aaa; } .ui-corner-right.strict { -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 0; -moz-border-radius-topleft: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 0; border-top-left-radius: 0; background-clip: padding-box; } /* TODO(joshnetterfield): less-ify this file */ /* Exercise Colors */ /** * Use this mixin when you're looking to apply our state colors to an element */ .unstarted { background: #dddddd; } .practiced { background: #9cdceb; } .mastery1 { background: #58c4dd; } .mastery2 { color: #fdfdfd; background: #29abca; } .mastered, .mastery3 { color: #fdfdfd; background: #1c758a; } .exercise-color.proficient { background-color: #1c758a; color: #eee !important; } .exercise-color.proficient:hover { background-color: #1c758a; } .exercise-color.suggested { background-color: #73982c; color: #eee !important; } .exercise-color.suggested:hover { background-color: #73982c; } .exercise-color.review { background-color: #e35d04; color: #eee !important; } .exercise-color.review:hover { background-color: #e35d04; } .exercise-color.not-started, .exercise-color.needsPractice { background-color: #cccccc; } .exercise-color.not-started:hover, .exercise-color.needsPractice { background-color: #cccccc; } .exercise-color.struggling { background-color: #c30202; color: #dfdfdf !important; } .exercise-color.struggling:hover { background-color: #c30202; } .exercise-color.started { background-color: #c7e5f7; } .exercise-color.started:hover { background-color: #c7e5f7; } .exercise-color.review.light { background-color: #f2b891; background-color: #c7e5f7; color: #333 !important; } .exercise-color.review.light:hover { background-color: #f2b891; } .exercise-color.border-only { background-color: transparent; } .exercise-color.border-only:hover { background-color: transparent; } .exercise-color.proficient.border-only { border-left: 5px solid #1c758a; } .exercise-color.review.border-only { border-left: 5px solid #e35d04; } .exercise-color.not-started.border-only, .exercise-color.needsPractice.border-only { border-left: 5px solid #cccccc; } .exercise-color.struggling.border-only { border-left: 5px solid #c30202; } .exercise-color.started.border-only { border-left: 5px solid #c7e5f7; } .exercise-color.practiced.border-only { border-left: 5px solid #9cdceb; } .exercise-color.mastery1.border-only { border-left: 5px solid #58c4dd; } .exercise-color.mastery2.border-only { border-left: 5px solid #29abca; } .exercise-color.mastery3.border-only { border-left: 5px solid #1c758a; } /*! * Font Awesome 3.6.5 * the iconic font designed for Bootstrap * ------------------------------------------------------------------------------ * The full suite of pictographic icons, examples, and documentation can be * found at http://fontawesome.io. Stay up to date on Twitter at * http://twitter.com/fontawesome. * * License * ------------------------------------------------------------------------------ * - The Font Awesome font is licensed under SIL OFL 1.1 - * http://scripts.sil.org/OFL * - Font Awesome CSS, LESS, and SASS files are licensed under MIT License - * http://opensource.org/licenses/mit-license.html * - Font Awesome documentation licensed under CC BY 3.0 - * http://creativecommons.org/licenses/by/3.0/ * - Attribution is no longer required in Font Awesome 3.0, but much appreciated: * "Font Awesome by Dave Gandy - http://fontawesome.io" * * Author - Dave Gandy * ------------------------------------------------------------------------------ * Email: dave@fontawesome.io * Twitter: http://twitter.com/davegandy * Work: Lead Product Designer @ Kyruus - http://kyruus.com */ /* FONT PATH * -------------------------- */ @font-face { font-family: 'FontAwesome'; src: url('../../fonts/fontawesome-webfont.woff2?v=3.6.7') format('woff2'), url('../../fonts/fontawesome-webfont.woff?v=3.6.7') format('woff'); font-weight: normal; font-style: normal; } /* FONT AWESOME CORE * -------------------------- */ [class^="icon-"], [class*=" icon-"] { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; *margin-right: .3em; } [class^="icon-"]:before, [class*=" icon-"]:before { text-decoration: inherit; display: inline-block; speak: none; } /* makes the font 33% larger relative to the icon container */ .icon-large:before { vertical-align: -10%; font-size: 1.33333333em; } /* makes sure icons active on rollover in links */ a [class^="icon-"], a [class*=" icon-"] { display: inline; } li { /* previous fontawesome fixed width list icon styling */ } li [class^="icon-"], li [class*=" icon-"] { display: inline-block; text-align: center; width: 1.25em; } /* increased font size for icon-large */ [class^="icon-"].icon-fixed-width, [class*=" icon-"].icon-fixed-width { display: inline-block; width: 1.14285714em; text-align: right; padding-right: 0.28571429em; } [class^="icon-"].icon-fixed-width.icon-large, [class*=" icon-"].icon-fixed-width.icon-large { width: 1.42857143em; } .icons-ul { margin-left: 2.14285714em; list-style-type: none; } .icons-ul > li { position: relative; } .icons-ul .icon-li { position: absolute; left: -2.14285714em; width: 2.14285714em; text-align: center; line-height: inherit; } [class^="icon-"].hide, [class*=" icon-"].hide { display: none; } .icon-muted { color: #eeeeee; } .icon-light { color: #ffffff; } .icon-dark { color: #333333; } .icon-border { border: solid 1px #eeeeee; padding: .2em .25em .15em; border-radius: 3px; } .icon-15x { font-size: 1.5em; } .icon-15x.icon-border { border-width: 2px; border-radius: 3px; } .icon-2x { font-size: 2em; } .icon-2x.icon-border { border-width: 2px; border-radius: 4px; } .icon-3x { font-size: 3em; } .icon-3x.icon-border { border-width: 3px; border-radius: 5px; } .icon-4x { font-size: 4em; } .icon-4x.icon-border { border-width: 4px; border-radius: 6px; } .icon-5x { font-size: 5em; } .icon-5x.icon-border { border-width: 5px; border-radius: 7px; } .pull-right { float: right; } .pull-left { float: left; } [class^="icon-"].pull-left, [class*=" icon-"].pull-left { margin-right: .3em; } [class^="icon-"].pull-right, [class*=" icon-"].pull-right { margin-left: .3em; } /* EXTRAS * -------------------------- */ /* Stacked and layered icon */ .icon-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: -35%; } .icon-stack [class^="icon-"], .icon-stack [class*=" icon-"] { display: block; text-align: center; position: absolute; width: 100%; height: 100%; font-size: 1em; line-height: inherit; *line-height: 2em; } .icon-stack .icon-stack-base { font-size: 2em; *line-height: 1em; } /* Animated rotating icon */ .icon-spin { display: inline-block; -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; } /* Prevent stack and spinners from being taken inline when inside a link */ a .icon-stack, a .icon-spin { display: inline-block; text-decoration: none; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } /* Icon rotations and mirroring */ .icon-rotate-90:before { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); } .icon-rotate-180:before { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } .icon-rotate-270:before { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .icon-flip-horizontal:before { -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .icon-flip-vertical:before { -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } /* ensure rotation occurs inside anchor tags */ a .icon-rotate-90:before, a .icon-rotate-180:before, a .icon-rotate-270:before, a .icon-flip-horizontal:before, a .icon-flip-vertical:before { display: inline-block; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .icon-glass:before { content: "\f000"; } .icon-music:before { content: "\f001"; } .icon-search:before { content: "\f002"; } .icon-envelope-alt:before { content: "\f003"; } .icon-heart:before { content: "\f004"; } .icon-star:before { content: "\f005"; } .icon-star-empty:before { content: "\f006"; } .icon-user:before { content: "\f007"; } .icon-film:before { content: "\f008"; } .icon-th-large:before { content: "\f009"; } .icon-th:before { content: "\f00a"; } .icon-th-list:before { content: "\f00b"; } .icon-ok:before { content: "\f00c"; } .icon-remove:before { content: "\f00d"; } .icon-zoom-in:before { content: "\f00e"; } .icon-zoom-out:before { content: "\f010"; } .icon-power-off:before, .icon-off:before { content: "\f011"; } .icon-signal:before { content: "\f012"; } .icon-gear:before, .icon-cog:before { content: "\f013"; } .icon-trash:before { content: "\f014"; } .icon-home:before { content: "\f015"; } .icon-file-alt:before { content: "\f016"; } .icon-time:before { content: "\f017"; } .icon-road:before { content: "\f018"; } .icon-download-alt:before { content: "\f019"; } .icon-download:before { content: "\f01a"; } .icon-upload:before { content: "\f01b"; } .icon-inbox:before { content: "\f01c"; } .icon-play-circle:before { content: "\f01d"; } .icon-rotate-right:before, .icon-repeat:before { content: "\f01e"; } .icon-refresh:before { content: "\f021"; } .icon-list-alt:before { content: "\f022"; } .icon-lock:before { content: "\f023"; } .icon-flag:before { content: "\f024"; } .icon-headphones:before { content: "\f025"; } .icon-volume-off:before { content: "\f026"; } .icon-volume-down:before { content: "\f027"; } .icon-volume-up:before { content: "\f028"; } .icon-qrcode:before { content: "\f029"; } .icon-barcode:before { content: "\f02a"; } .icon-tag:before { content: "\f02b"; } .icon-tags:before { content: "\f02c"; } .icon-book:before { content: "\f02d"; } .icon-bookmark:before { content: "\f02e"; } .icon-print:before { content: "\f02f"; } .icon-camera:before { content: "\f030"; } .icon-font:before { content: "\f031"; } .icon-bold:before { content: "\f032"; } .icon-italic:before { content: "\f033"; } .icon-text-height:before { content: "\f034"; } .icon-text-width:before { content: "\f035"; } .icon-align-left:before { content: "\f036"; } .icon-align-center:before { content: "\f037"; } .icon-align-right:before { content: "\f038"; } .icon-align-justify:before { content: "\f039"; } .icon-list:before { content: "\f03a"; } .icon-indent-left:before { content: "\f03b"; } .icon-indent-right:before { content: "\f03c"; } .icon-facetime-video:before { content: "\f03d"; } .icon-picture:before { content: "\f03e"; } .icon-pencil:before { content: "\f040"; } .icon-map-marker:before { content: "\f041"; } .icon-adjust:before { content: "\f042"; } .icon-tint:before { content: "\f043"; } .icon-edit:before { content: "\f044"; } .icon-share:before { content: "\f045"; } .icon-check:before { content: "\f046"; } .icon-move:before { content: "\f047"; } .icon-step-backward:before { content: "\f048"; } .icon-fast-backward:before { content: "\f049"; } .icon-backward:before { content: "\f04a"; } .icon-play:before { content: "\f04b"; } .icon-pause:before { content: "\f04c"; } .icon-stop:before { content: "\f04d"; } .icon-forward:before { content: "\f04e"; } .icon-fast-forward:before { content: "\f050"; } .icon-step-forward:before { content: "\f051"; } .icon-eject:before { content: "\f052"; } .icon-chevron-left:before { content: "\f053"; } .icon-chevron-right:before { content: "\f054"; } .icon-plus-sign:before { content: "\f055"; } .icon-minus-sign:before { content: "\f056"; } .icon-remove-sign:before { content: "\f057"; } .icon-goals:before, .icon-ok-sign:before { content: "\f058"; } .icon-question-sign:before { content: "\f059"; } .icon-info-sign:before { content: "\f05a"; } .icon-screenshot:before { content: "\f05b"; } .icon-remove-circle:before { content: "\f05c"; } .icon-ok-circle:before { content: "\f05d"; } .icon-ban-circle:before { content: "\f05e"; } .icon-arrow-left:before { content: "\f060"; } .icon-arrow-right:before { content: "\f061"; } .icon-arrow-up:before { content: "\f062"; } .icon-arrow-down:before { content: "\f063"; } .icon-mail-forward:before, .icon-share-alt:before { content: "\f064"; } .icon-resize-full:before { content: "\f065"; } .icon-resize-small:before { content: "\f066"; } .icon-plus:before { content: "\f067"; } .icon-minus:before { content: "\f068"; } .icon-asterisk:before { content: "\f069"; } .icon-exclamation-sign:before { content: "\f06a"; } .icon-gift:before { content: "\f06b"; } .icon-leaf:before { content: "\f06c"; } .icon-fire:before { content: "\f06d"; } .icon-eye-open:before { content: "\f06e"; } .icon-eye-close:before { content: "\f070"; } .icon-warning-sign:before { content: "\f071"; } .icon-plane:before { content: "\f072"; } .icon-calendar:before { content: "\f073"; } .icon-random:before { content: "\f074"; } .icon-comment:before { content: "\f075"; } .icon-magnet:before { content: "\f076"; } .icon-chevron-up:before { content: "\f077"; } .icon-chevron-down:before { content: "\f078"; } .icon-retweet:before { content: "\f079"; } .icon-shopping-cart:before { content: "\f07a"; } .icon-folder-close:before { content: "\f07b"; } .icon-folder-open:before { content: "\f07c"; } .icon-resize-vertical:before { content: "\f07d"; } .icon-resize-horizontal:before { content: "\f07e"; } .icon-bar-chart:before { content: "\f080"; } .icon-twitter-sign:before { content: "\f081"; } .icon-facebook-sign:before { content: "\f082"; } .icon-camera-retro:before { content: "\f083"; } .icon-key:before { content: "\f084"; } .icon-gears:before, .icon-cogs:before { content: "\f085"; } .icon-discussion:before, .icon-comments:before { content: "\f086"; } .icon-thumbs-up-alt:before { content: "\f087"; } .icon-thumbs-down-alt:before { content: "\f088"; } .icon-star-half:before { content: "\f089"; } .icon-heart-empty:before { content: "\f08a"; } .icon-signout:before { content: "\f08b"; } .icon-pushpin:before { content: "\f08d"; } .icon-external-link:before { content: "\f08e"; } .icon-signin:before { content: "\f090"; } .icon-trophy:before { content: "\f091"; } .icon-github-sign:before { content: "\f092"; } .icon-upload-alt:before { content: "\f093"; } .icon-lemon:before { content: "\f094"; } .icon-phone:before { content: "\f095"; } .icon-unchecked:before, .icon-check-empty:before { content: "\f096"; } .icon-bookmark-empty:before { content: "\f097"; } .icon-phone-sign:before { content: "\f098"; } .icon-twitter:before { content: "\f099"; } .icon-facebook:before { content: "\f09a"; } .icon-github:before { content: "\f09b"; } .icon-unlock:before { content: "\f09c"; } .icon-credit-card:before { content: "\f09d"; } .icon-rss:before { content: "\f09e"; } .icon-hdd:before { content: "\f0a0"; } .icon-bullhorn:before { content: "\f0a1"; } .icon-bell:before { content: "\f0a2"; } .icon-certificate:before { content: "\f0a3"; } .icon-hand-right:before { content: "\f0a4"; } .icon-hand-left:before { content: "\f0a5"; } .icon-hand-up:before { content: "\f0a6"; } .icon-hand-down:before { content: "\f0a7"; } .icon-circle-arrow-left:before { content: "\f0a8"; } .icon-circle-arrow-right:before { content: "\f0a9"; } .icon-circle-arrow-up:before { content: "\f0aa"; } .icon-circle-arrow-down:before { content: "\f0ab"; } .icon-globe:before { content: "\f0ac"; } .icon-wrench:before { content: "\f0ad"; } .icon-tasks:before { content: "\f0ae"; } .icon-filter:before { content: "\f0b0"; } .icon-briefcase:before { content: "\f0b1"; } .icon-fullscreen:before { content: "\f0b2"; } .icon-group:before { content: "\f0c0"; } .icon-link:before { content: "\f0c1"; } .icon-cloud:before { content: "\f0c2"; } .icon-beaker:before { content: "\f0c3"; } .icon-cut:before { content: "\f0c4"; } .icon-copy:before { content: "\f0c5"; } .icon-paperclip:before, .icon-paper-clip:before { content: "\f0c6"; } .icon-save:before { content: "\f0c7"; } .icon-sign-blank:before { content: "\f0c8"; } .icon-reorder:before { content: "\f0c9"; } .icon-list-ul:before { content: "\f0ca"; } .icon-list-ol:before { content: "\f0cb"; } .icon-strikethrough:before { content: "\f0cc"; } .icon-underline:before { content: "\f0cd"; } .icon-table:before { content: "\f0ce"; } .icon-magic:before { content: "\f0d0"; } .icon-truck:before { content: "\f0d1"; } .icon-google-plus-sign:before { content: "\f0d4"; } .icon-google-plus:before { content: "\f0d5"; } .icon-money:before { content: "\f0d6"; } .icon-caret-down:before { content: "\f0d7"; } .icon-caret-up:before { content: "\f0d8"; } .icon-caret-left:before { content: "\f0d9"; } .icon-caret-right:before { content: "\f0da"; } .icon-columns:before { content: "\f0db"; } .icon-sort:before { content: "\f0dc"; } .icon-sort-down:before { content: "\f0dd"; } .icon-sort-up:before { content: "\f0de"; } .icon-envelope:before { content: "\f0e0"; } .icon-linkedin:before { content: "\f0e1"; } .icon-rotate-left:before, .icon-undo:before { content: "\f0e2"; } .icon-legal:before { content: "\f0e3"; } .icon-dashboard:before { content: "\f0e4"; } .icon-comment-alt:before { content: "\f0e5"; } .icon-comments-alt:before { content: "\f0e6"; } .icon-bolt:before { content: "\f0e7"; } .icon-sitemap:before { content: "\f0e8"; } .icon-umbrella:before { content: "\f0e9"; } .icon-paste:before { content: "\f0ea"; } .icon-lightbulb:before { content: "\f0eb"; } .icon-exchange:before { content: "\f0ec"; } .icon-cloud-download:before { content: "\f0ed"; } .icon-cloud-upload:before { content: "\f0ee"; } .icon-user-md:before { content: "\f0f0"; } .icon-stethoscope:before { content: "\f0f1"; } .icon-suitcase:before { content: "\f0f2"; } .icon-bell-alt:before { content: "\f0f3"; } .icon-coffee:before { content: "\f0f4"; } .icon-food:before { content: "\f0f5"; } .icon-file-text-alt:before { content: "\f0f6"; } .icon-building:before { content: "\f0f7"; } .icon-hospital:before { content: "\f0f8"; } .icon-ambulance:before { content: "\f0f9"; } .icon-medkit:before { content: "\f0fa"; } .icon-beer:before { content: "\f0fc"; } .icon-h-sign:before { content: "\f0fd"; } .icon-plus-sign-alt:before { content: "\f0fe"; } .icon-double-angle-left:before { content: "\f100"; } .icon-double-angle-right:before { content: "\f101"; } .icon-double-angle-up:before { content: "\f102"; } .icon-double-angle-down:before { content: "\f103"; } .icon-angle-left:before { content: "\f104"; } .icon-angle-right:before { content: "\f105"; } .icon-angle-up:before { content: "\f106"; } .icon-angle-down:before { content: "\f107"; } .icon-desktop:before { content: "\f108"; } .icon-laptop:before { content: "\f109"; } .icon-tablet:before { content: "\f10a"; } .icon-mobile-phone:before { content: "\f10b"; } .icon-circle-blank:before { content: "\f10c"; } .icon-quote-left:before { content: "\f10d"; } .icon-quote-right:before { content: "\f10e"; } .icon-spinner:before { content: "\f110"; } .icon-circle:before { content: "\f111"; } .icon-mail-reply:before, .icon-reply:before { content: "\f112"; } .icon-github-alt:before { content: "\f113"; } .icon-folder-close-alt:before { content: "\f114"; } .icon-folder-open-alt:before { content: "\f115"; } .icon-expand-alt:before { content: "\f116"; } .icon-collapse-alt:before { content: "\f117"; } .icon-smile:before { content: "\f118"; } .icon-frown:before { content: "\f119"; } .icon-meh:before { content: "\f11a"; } .icon-gamepad:before { content: "\f11b"; } .icon-keyboard:before { content: "\f11c"; } .icon-flag-alt:before { content: "\f11d"; } .icon-flag-checkered:before { content: "\f11e"; } .icon-terminal:before { content: "\f120"; } .icon-code:before { content: "\f121"; } .icon-reply-all:before { content: "\f122"; } .icon-mail-reply-all:before { content: "\f122"; } .icon-star-half-full:before, .icon-star-half-empty:before { content: "\f123"; } .icon-location-arrow:before { content: "\f124"; } .icon-crop:before { content: "\f125"; } .icon-code-fork:before { content: "\f126"; } .icon-unlink:before { content: "\f127"; } .icon-question:before { content: "\f128"; } .icon-info:before { content: "\f129"; } .icon-exclamation:before { content: "\f12a"; } .icon-superscript:before { content: "\f12b"; } .icon-subscript:before { content: "\f12c"; } .icon-eraser:before { content: "\f12d"; } .icon-puzzle-piece:before { content: "\f12e"; } .icon-microphone:before { content: "\f130"; } .icon-microphone-off:before { content: "\f131"; } .icon-shield:before { content: "\f132"; } .icon-calendar-empty:before { content: "\f133"; } .icon-fire-extinguisher:before { content: "\f134"; } .icon-rocket:before { content: "\f135"; } .icon-chevron-sign-left:before { content: "\f137"; } .icon-chevron-sign-right:before { content: "\f138"; } .icon-chevron-sign-up:before { content: "\f139"; } .icon-chevron-sign-down:before { content: "\f13a"; } .icon-anchor:before { content: "\f13d"; } .icon-unlock-alt:before { content: "\f13e"; } .icon-bullseye:before { content: "\f140"; } .icon-ellipsis-horizontal:before { content: "\f141"; } .icon-ellipsis-vertical:before { content: "\f142"; } .icon-rss-sign:before { content: "\f143"; } .icon-play-sign:before { content: "\f144"; } .icon-ticket:before { content: "\f145"; } .icon-minus-sign-alt:before { content: "\f146"; } .icon-check-minus:before { content: "\f147"; } .icon-level-up:before { content: "\f148"; } .icon-level-down:before { content: "\f149"; } .icon-check-sign:before { content: "\f14a"; } .icon-edit-sign:before { content: "\f14b"; } .icon-external-link-sign:before { content: "\f14c"; } .icon-share-sign:before { content: "\f14d"; } .icon-compass:before { content: "\f14e"; } .icon-collapse:before { content: "\f150"; } .icon-collapse-top:before { content: "\f151"; } .icon-expand:before { content: "\f152"; } .icon-euro:before, .icon-eur:before { content: "\f153"; } .icon-gbp:before { content: "\f154"; } .icon-dollar:before, .icon-usd:before { content: "\f155"; } .icon-rupee:before, .icon-inr:before { content: "\f156"; } .icon-yen:before, .icon-jpy:before { content: "\f157"; } .icon-renminbi:before, .icon-cny:before { content: "\f158"; } .icon-won:before, .icon-krw:before { content: "\f159"; } .icon-bitcoin:before, .icon-btc:before { content: "\f15a"; } .icon-file:before { content: "\f15b"; } .icon-file-text:before { content: "\f15c"; } .icon-sort-by-alphabet:before { content: "\f15d"; } .icon-sort-by-alphabet-alt:before { content: "\f15e"; } .icon-sort-by-attributes:before { content: "\f160"; } .icon-sort-by-attributes-alt:before { content: "\f161"; } .icon-sort-by-order:before { content: "\f162"; } .icon-sort-by-order-alt:before { content: "\f163"; } .icon-thumbs-up:before { content: "\f164"; } .icon-thumbs-down:before { content: "\f165"; } .icon-youtube-sign:before { content: "\f166"; } .icon-youtube:before { content: "\f167"; } .icon-youtube-play:before { content: "\f16a"; } .icon-dropbox:before { content: "\f16b"; } .icon-tumblr:before { content: "\f173"; } .icon-long-arrow-down:before { content: "\f175"; } .icon-long-arrow-up:before { content: "\f176"; } .icon-long-arrow-left:before { content: "\f177"; } .icon-long-arrow-right:before { content: "\f178"; } .icon-trello:before { content: "\f181"; } .icon-female:before { content: "\f182"; } .icon-male:before { content: "\f183"; } .icon-gittip:before { content: "\f184"; } .icon-sun:before { content: "\f185"; } .icon-moon:before { content: "\f186"; } .icon-archive:before { content: "\f187"; } .icon-bug:before { content: "\f188"; } .icon-ok-dotted:before { content: "\f300"; } .icon-coach-rec:before { content: "\f301"; } .icon-badge:before { content: "\f302"; } .icon-activity:before { content: "\f303"; } .icon-focus:before { content: "\f304"; } .icon-progress:before { content: "\f306"; } .icon-scratchpad:before { content: "\f307"; } .icon-coaches:before { content: "\f309"; } .icon-google:before { content: "\f310"; } .icon-notification:before { content: "\f311"; } .icon-challenge:before { content: "\f321"; } .icon-cs_scratchpad:before { content: "\f322"; } .icon-talkie:before { content: "\f323"; } .icon-circle-thin:before { content: "\f1db"; } .large-search-form { display: block; position: relative; } /* HACK(benkomalo): The large search bar can't use the default sprite or a background image, because it's too large, so we use fontawesome to manually make an icon */ .large-search-form .icon-search { color: #aaaaaa; font-size: 18px; position: absolute; top: 14px; right: auto; bottom: auto; left: 9px; } .large-search-form .large-search-submit { position: absolute; top: 4px; right: 4px; } .large-search-form .typeahead-search input[type=text] { background-image: none; border-radius: 4px; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 14px; padding-left: 28px; width: 50px; height: 100%; height: 50px; width: 100%; } .large-search-form .typeahead-search input[type=text].placeholder { font-style: normal; } .large-search-form .typeahead-search .dropdown-menu { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; } .large-search-form .typeahead-search .dropdown-menu.touch .typeahead-result { width: 90%; } .large-search-form .typeahead-search .twitter-typeahead { width: 100%; } .progress-started, .progress-complete { display: none; } .progress-container { display: block; position: relative; } .progress-container .active .progress-icon:before { color: #aaaaaa; } .progress-container .active .progress-title { padding-top: 2px; } .progress-container:hover .progress-icon:before { color: #aaaaaa; } .progress-container .progress-item { border-top: 1px solid #dddddd; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 15px; font-weight: normal; line-height: 22px; -webkit-font-smoothing: antialiased; position: relative; } .progress-container .progress-item:first-child { border-top: none; } .progress-container .non-editing-progress-item-link { cursor: default; color: #444444; } .progress-container .progress-item-link, .progress-container .non-editing-progress-item-link { -moz-box-sizing: border-box; box-sizing: border-box; display: table; padding: 0 5px; text-decoration: none; width: 100%; } .progress-container .progress-item-link .small-icon:after, .progress-container .non-editing-progress-item-link .small-icon:after { top: 15px; left: 15px; } .progress-container .progress-icon { line-height: 20px; } .progress-container .progress-icon.icon-exercise-node, .progress-container .progress-icon.icon-scratchpad-node, .progress-container .progress-icon.icon-talkie-node, .progress-container .progress-icon.icon-challenge-node, .progress-container .progress-icon.icon-article-node, .progress-container .progress-icon.icon-video-node, .progress-container .progress-icon.icon-project-node { color: #dddddd; display: table-cell; font-size: 16px; text-indent: 0; } .progress-container .progress-icon.icon-exercise-node:after, .progress-container .progress-icon.icon-scratchpad-node:after, .progress-container .progress-icon.icon-talkie-node:after, .progress-container .progress-icon.icon-challenge-node:after, .progress-container .progress-icon.icon-article-node:after, .progress-container .progress-icon.icon-video-node:after, .progress-container .progress-icon.icon-project-node:after { color: #76a005; display: none; height: 10px; overflow: hidden; position: absolute; top: 2px; right: auto; bottom: auto; left: 3px; font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; } .progress-container .progress-icon.icon-exercise-node.small-icon, .progress-container .progress-icon.icon-scratchpad-node.small-icon, .progress-container .progress-icon.icon-talkie-node.small-icon, .progress-container .progress-icon.icon-challenge-node.small-icon, .progress-container .progress-icon.icon-article-node.small-icon, .progress-container .progress-icon.icon-video-node.small-icon, .progress-container .progress-icon.icon-project-node.small-icon { font-size: 12px; width: auto; line-height: 20px; } .progress-container .progress-icon.icon-exercise-node.small-icon:after, .progress-container .progress-icon.icon-scratchpad-node.small-icon:after, .progress-container .progress-icon.icon-talkie-node.small-icon:after, .progress-container .progress-icon.icon-challenge-node.small-icon:after, .progress-container .progress-icon.icon-article-node.small-icon:after, .progress-container .progress-icon.icon-video-node.small-icon:after, .progress-container .progress-icon.icon-project-node.small-icon:after { height: 10px; position: absolute; top: 0; right: auto; bottom: auto; left: 0; } .progress-container .progress-icon.icon-exercise-node { font-size: 18px; width: 20px; } .progress-container .progress-icon.icon-exercise-node:after { position: absolute; top: 1px; right: auto; bottom: auto; left: 2px; } .progress-container .progress-icon.icon-exercise-node:before, .progress-container .progress-icon.icon-exercise-node:after { content: "\f005"; } .progress-container .progress-icon.icon-video-node:before, .progress-container .progress-icon.icon-video-node:after { content: "\f03d"; } .progress-container .progress-icon.icon-scratchpad-node:before, .progress-container .progress-icon.icon-scratchpad-node:after, .progress-container .progress-icon.icon-talkie-node:before, .progress-container .progress-icon.icon-talkie-node:after .progress-container .progress-icon.icon-challenge-node:before, .progress-container .progress-icon.icon-challenge-node:after, .progress-container .progress-icon.icon-project-node:before, .progress-container .progress-icon.icon-project-node:after { content: "\f03e"; } .progress-container .progress-icon.icon-article-node:before, .progress-container .progress-icon.icon-article-node:after { content: "\f0f6"; } .progress-container .progress-icon.progress-started:after { display: inline-block !important; } .progress-container .progress-icon.progress-complete:before { color: #76a005 !important; } .progress-container .progress-title { display: table-cell; padding-left: 5px; line-height: 20px; } .tutorial-nav-node .progress-container .progress-icon { line-height: 1; } .tutorial-nav-node .progress-container .progress-icon.icon-video-node:after, .tutorial-nav-node .progress-container .progress-icon.icon-exercise-node:after { height: 9px; position: absolute; top: 8px; right: auto; bottom: auto; left: 7px; } .tutorial-nav-node .progress-container .progress-icon.icon-scratchpad-node:after, .tutorial-nav-node .progress-container .progress-icon.icon-talkie-node:after, .tutorial-nav-node .progress-container .progress-icon.icon-challenge-node:after, .tutorial-nav-node .progress-container .progress-icon.icon-project-node:after { height: 9px; position: absolute; top: 9px; right: auto; bottom: auto; left: 7px; } .related-video-list .progress-container .progress-icon.icon-exercise-node:after, .related-video-list .progress-container .progress-icon.icon-scratchpad-node:after, .related-video-list .progress-container .progress-icon.icon-talkie-node:after, .related-video-list .progress-container .progress-icon.icon-challenge-node:after, .related-video-list .progress-container .progress-icon.icon-video-node:after, .related-video-list .progress-container .progress-icon.icon-project-node:after { height: 10px; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; } .topic-video .progress-container .progress-icon.icon-exercise-node:after, .topic-video .progress-container .progress-icon.icon-scratchpad-node:after, .topic-video .progress-container .progress-icon.icon-talkie-node:after, .topic-video .progress-container .progress-icon.icon-challenge-node:after, .topic-video .progress-container .progress-icon.icon-video-node:after, .topic-video .progress-container .progress-icon.icon-project-node:after { height: 11px; top: 0; } .progress-container .progress-icon.small-icon.library-view { line-height: 18px; } .progress-container .progress-icon.small-icon.library-view:after { height: 9px; position: absolute; top: 2px; right: auto; bottom: auto; left: 14px; } .subway-icon { display: block; position: absolute; width: 40px; height: 100%; top: 0; } .subway-icon .pipe { background-color: #cdcdcd; height: 100%; padding-top: 2px; position: absolute; top: -1px; right: auto; bottom: auto; left: 18px; width: 4px; z-index: 10; } .subway-icon .status { height: 25px; width: 25px; background-size: 25px 75px; overflow: hidden; position: absolute; top: 50%; right: auto; bottom: auto; left: 8px; margin-top: -12px; z-index: 20; } .subway-icon + .progress-title { -moz-box-sizing: border-box; box-sizing: border-box; min-height: 40px; padding: 15px; padding-left: 50px; vertical-align: middle; } .progress-item:first-child .pipe, .tutorial-nav .tutorial-nav-node:first-child .pipe { bottom: -1px; height: 50%; top: auto; } .progress-item:last-child .pipe, .tutorial-nav .tutorial-nav-node:last-child .pipe { height: 50%; } .progress-item:last-child:first-child .pipe, .tutorial-nav .tutorial-nav-node:last-child:first-child .pipe { display: none; } .uncurated .subway-icon .pipe, .uncurated .subway-icon .pipe.completed, .pipe.completed { display: none; } .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-default.svg); /*! data-uri */ } .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-default.svg); /*! data-uri */ } .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-default.svg); /*! data-uri */ } .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-default.svg); /*! data-uri */ } .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-default.svg); /*! data-uri */ } .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-default.svg); /*! data-uri */ } .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-default.svg); /*! data-uri */ } .pipe.completed { background-color: #6a8da6; } .subway-icon.progress-started .pipe.completed, .subway-icon.progress-complete .pipe.completed { display: block; } .subway-icon.progress-started .status { background-position: center; } .subway-icon.progress-complete .status { background-position: bottom; } /** * Per-domain icon styles used with UserProgressCache's CSS output. * * These classes aren't in progress-icons.less because their inlined image size is * significant, hundreds of KBs, and sometimes only the default icons are needed, * e.g., in autocomplete on the logged-out homepage. */ /** * This supports custom icons for user_progress in topic page (and soon tutorial pages) * the whole setup is super messy right now, but if we modify user_progress to imbue each * started/completed node with a background position, then we can go back to having a * single image for .@{domain} .status and setting the video/exercise/scratchpad/etc stuff * in user_progress. That definitely shoves some of the cruft into that file and it's not * totally clear that it's a huge win since all of these solutions are gross in some way. */ #outer-wrapper .science .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-science.svg); /*! data-uri */ } #outer-wrapper .science .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-science.svg); /*! data-uri */ } #outer-wrapper .science .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-science.svg); /*! data-uri */ } #outer-wrapper .science .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-science.svg); /*! data-uri */ } #outer-wrapper .science .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-science.svg); /*! data-uri */ } #outer-wrapper .science .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-science.svg); /*! data-uri */ } #outer-wrapper .science .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-science.svg); /*! data-uri */ } #outer-wrapper .science .pipe.completed { background-color: #c55f73; } #outer-wrapper .science .progress-container:hover .progress-item:hover .progress-item-link { background: #94424f; color: #ffffff; text-decoration: none; } #outer-wrapper .humanities .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .pipe.completed { background-color: #d24a45; } #outer-wrapper .humanities .progress-container:hover .progress-item:hover .progress-item-link { background: #ad3434; color: #ffffff; text-decoration: none; } #outer-wrapper .economics-finance-domain .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .pipe.completed { background-color: #d1933b; } #outer-wrapper .economics-finance-domain .progress-container:hover .progress-item:hover .progress-item-link { background: #b77033; color: #ffffff; text-decoration: none; } #outer-wrapper .cs .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-cs.svg); /*! data-uri */ } #outer-wrapper .cs .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-cs.svg); /*! data-uri */ } #outer-wrapper .cs .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-cs.svg); /*! data-uri */ } #outer-wrapper .cs .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-cs.svg); /*! data-uri */ } #outer-wrapper .cs .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-cs.svg); /*! data-uri */ } #outer-wrapper .cs .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-cs.svg); /*! data-uri */ } #outer-wrapper .cs .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-cs.svg); /*! data-uri */ } #outer-wrapper .cs .pipe.completed { background-color: #689b51; } #outer-wrapper .cs .progress-container:hover .progress-item:hover .progress-item-link { background: #437a39; color: #ffffff; text-decoration: none; } #outer-wrapper .hour-of-code .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .pipe.completed { background-color: #689b51; } #outer-wrapper .hour-of-code .progress-container:hover .progress-item:hover .progress-item-link { background: #437a39; color: #ffffff; text-decoration: none; } #outer-wrapper .computer-programming .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .pipe.completed { background-color: #689b51; } #outer-wrapper .computer-programming .progress-container:hover .progress-item:hover .progress-item-link { background: #437a39; color: #ffffff; text-decoration: none; } #outer-wrapper .computing .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-cs.svg); /*! data-uri */ } #outer-wrapper .computing .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-cs.svg); /*! data-uri */ } #outer-wrapper .computing .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-cs.svg); /*! data-uri */ } #outer-wrapper .computing .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-cs.svg); /*! data-uri */ } #outer-wrapper .computing .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-cs.svg); /*! data-uri */ } #outer-wrapper .computing .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-cs.svg); /*! data-uri */ } #outer-wrapper .computing .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-cs.svg); /*! data-uri */ } #outer-wrapper .computing .pipe.completed { background-color: #689b51; } #outer-wrapper .computing .progress-container:hover .progress-item:hover .progress-item-link { background: #437a39; color: #ffffff; text-decoration: none; } #outer-wrapper .partner-content .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .pipe.completed { background-color: #329a86; } #outer-wrapper .partner-content .progress-container:hover .progress-item:hover .progress-item-link { background: #218270; color: #ffffff; text-decoration: none; } #outer-wrapper .math .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-math.svg); /*! data-uri */ } #outer-wrapper .math .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-math.svg); /*! data-uri */ } #outer-wrapper .math .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-math.svg); /*! data-uri */ } #outer-wrapper .math .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-math.svg); /*! data-uri */ } #outer-wrapper .math .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-math.svg); /*! data-uri */ } #outer-wrapper .math .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-math.svg); /*! data-uri */ } #outer-wrapper .math .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-math.svg); /*! data-uri */ } #outer-wrapper .math .pipe.completed { background-color: #4fbad4; } #outer-wrapper .math .progress-container:hover .progress-item:hover .progress-item-link { background: #1c758a; color: #ffffff; text-decoration: none; } #outer-wrapper .test-prep .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .pipe.completed { background-color: #9a72ac; } #outer-wrapper .test-prep .progress-container:hover .progress-item:hover .progress-item-link { background: #644172; color: #ffffff; text-decoration: none; } #outer-wrapper .progress-container:hover .progress-item:hover .progress-item-link { background: #314453; color: #ffffff; text-decoration: none; } #outer-wrapper .science .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-science.svg); /*! data-uri */ } #outer-wrapper .science .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-science.svg); /*! data-uri */ } #outer-wrapper .science .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-science.svg); /*! data-uri */ } #outer-wrapper .science .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-science.svg); /*! data-uri */ } #outer-wrapper .science .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-science.svg); /*! data-uri */ } #outer-wrapper .science .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-science.svg); /*! data-uri */ } #outer-wrapper .science .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-science.svg); /*! data-uri */ } #outer-wrapper .science .pipe.completed { background-color: #c55f73; } #outer-wrapper .science .progress-container:hover .progress-item:hover .progress-item-link { background: #94424f; color: #ffffff; text-decoration: none; } #outer-wrapper .humanities .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-humanities.svg); /*! data-uri */ } #outer-wrapper .humanities .pipe.completed { background-color: #d24a45; } #outer-wrapper .humanities .progress-container:hover .progress-item:hover .progress-item-link { background: #ad3434; color: #ffffff; text-decoration: none; } #outer-wrapper .economics-finance-domain .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-economics.svg); /*! data-uri */ } #outer-wrapper .economics-finance-domain .pipe.completed { background-color: #d1933b; } #outer-wrapper .economics-finance-domain .progress-container:hover .progress-item:hover .progress-item-link { background: #b77033; color: #ffffff; text-decoration: none; } #outer-wrapper .cs .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-cs.svg); /*! data-uri */ } #outer-wrapper .cs .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-cs.svg); /*! data-uri */ } #outer-wrapper .cs .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-cs.svg); /*! data-uri */ } #outer-wrapper .cs .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-cs.svg); /*! data-uri */ } #outer-wrapper .cs .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-cs.svg); /*! data-uri */ } #outer-wrapper .cs .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-cs.svg); /*! data-uri */ } #outer-wrapper .cs .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-cs.svg); /*! data-uri */ } #outer-wrapper .cs .pipe.completed { background-color: #689b51; } #outer-wrapper .cs .progress-container:hover .progress-item:hover .progress-item-link { background: #437a39; color: #ffffff; text-decoration: none; } #outer-wrapper .hour-of-code .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-cs.svg); /*! data-uri */ } #outer-wrapper .hour-of-code .pipe.completed { background-color: #689b51; } #outer-wrapper .hour-of-code .progress-container:hover .progress-item:hover .progress-item-link { background: #437a39; color: #ffffff; text-decoration: none; } #outer-wrapper .computer-programming .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-cs.svg); /*! data-uri */ } #outer-wrapper .computer-programming .pipe.completed { background-color: #689b51; } #outer-wrapper .computer-programming .progress-container:hover .progress-item:hover .progress-item-link { background: #437a39; color: #ffffff; text-decoration: none; } #outer-wrapper .computing .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-cs.svg); /*! data-uri */ } #outer-wrapper .computing .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-cs.svg); /*! data-uri */ } #outer-wrapper .computing .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-cs.svg); /*! data-uri */ } #outer-wrapper .computing .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-cs.svg); /*! data-uri */ } #outer-wrapper .computing .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-cs.svg); /*! data-uri */ } #outer-wrapper .computing .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-cs.svg); /*! data-uri */ } #outer-wrapper .computing .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-cs.svg); /*! data-uri */ } #outer-wrapper .computing .pipe.completed { background-color: #689b51; } #outer-wrapper .computing .progress-container:hover .progress-item:hover .progress-item-link { background: #437a39; color: #ffffff; text-decoration: none; } #outer-wrapper .partner-content .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-partnerContent.svg); /*! data-uri */ } #outer-wrapper .partner-content .pipe.completed { background-color: #329a86; } #outer-wrapper .partner-content .progress-container:hover .progress-item:hover .progress-item-link { background: #218270; color: #ffffff; text-decoration: none; } #outer-wrapper .math .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-math.svg); /*! data-uri */ } #outer-wrapper .math .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-math.svg); /*! data-uri */ } #outer-wrapper .math .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-math.svg); /*! data-uri */ } #outer-wrapper .math .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-math.svg); /*! data-uri */ } #outer-wrapper .math .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-math.svg); /*! data-uri */ } #outer-wrapper .math .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-math.svg); /*! data-uri */ } #outer-wrapper .math .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-math.svg); /*! data-uri */ } #outer-wrapper .math .pipe.completed { background-color: #4fbad4; } #outer-wrapper .math .progress-container:hover .progress-item:hover .progress-item-link { background: #1c758a; color: #ffffff; text-decoration: none; } #outer-wrapper .test-prep .status.video-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-video-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .status.exercise-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-exercise-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .status.scratchpad-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-scratchpad-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .status.talkie-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-talkie-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .status.challenge-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-challenge-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .status.article-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-article-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .status.project-node { background-image: url(../www.khanacademy.org/images/progress-icons/subway-sprites-project-testPrep.svg); /*! data-uri */ } #outer-wrapper .test-prep .pipe.completed { background-color: #9a72ac; } #outer-wrapper .test-prep .progress-container:hover .progress-item:hover .progress-item-link { background: #644172; color: #ffffff; text-decoration: none; } #library-content.library-rtl .topic-heading, #library-content.library-rtl .topic-desc { text-align: right; } .ie8 .subscription { visibility: hidden; } .subscription p { margin-top: 6px; } .subscription input.email { padding: 5px; outline: none; box-shadow: none; width: 97%; border: 1px solid #cccccc; height: 25px; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 14px; font-weight: normal; line-height: 20px; border-radius: 5px; } .subscription input.invalid { border-color: #FF0000; box-shadow: 0 0 10px #CC0000; } .subscription .dropdown-menu { margin-top: -92px; padding: 18px; margin-left: -19px; /** = padding-left + border **/ border-color: #94a170; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 12px; border: 1px solid #94a170; border-bottom: 1px solid #999; box-shadow: 0 5px 8px #555555; } .subscription .subscribe-button { display: inline-block; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; font-size: 14px; font-weight: bold; line-height: 20px; line-height: 30px; margin-top: 10px; padding: 0; text-align: center; width: 100%; } .subscription .subscribe-button span { white-space: nowrap; } .subscription .dropdown-table { font-size: 12px; line-height: 21px; color: #555555; } .subscription .dropdown-table td { padding: 0 7px 0 7px; } .subscription .dropdown-table tr.description td { padding-left: 10px; padding-top: 5px; } .subscription .dropdown .unsubscribe-teaser { text-align: center; position: relative; top: 12px; color: #898989; } .subscription .dropdown .dropdown-title { text-align: center; padding-bottom: 12px; } .subscription .dropdown .dropdown-title h2 { margin-bottom: 0; } .subscription .dropdown .dropdown-throbber { position: absolute; right: 20px; top: 5px; } .simple-input { background-color: #fafafa; border: 1px solid #C6D1AD; font-size: 10px; padding: 0; height: 24px; width: 160px; outline: none; } .simple-input:focus { box-shadow: 0 0 5px 1px rgba(115, 152, 44, 0.5); border-color: rgba(100, 140, 30, 0.5); } .ie .simple-input { height: 22px; padding-top: 5px; } .simple-input.placeholder { font-style: italic; } .simple-input:disabled { color: #999; } input.placeholder { color: #898989; } .form-horizontal .help-inline, .form-horizontal .help-block, .form-horizontal .success-message { font-size: 12px; } .form-horizontal .help-inline.error, .form-horizontal .help-block.error, .form-horizontal .help-inline .error, .form-horizontal .help-block .error { color: #bf4f04; } .form-horizontal .help-inline.success, .form-horizontal .help-block.success, .form-horizontal .help-inline .success, .form-horizontal .help-block .success { color: #76a005; } .form-horizontal .help-inline.neutral, .form-horizontal .help-block.neutral, .form-horizontal .help-inline .neutral, .form-horizontal .help-block .neutral { color: #999999; } .form-horizontal .success-message { color: #76a005; } .form-horizontal input + .success-message { font-size: 12px; color: green; margin-left: 9px; } .form-search input, .form-inline input, .form-horizontal input, .form-search textarea, .form-inline textarea, .form-horizontal textarea, .form-search select, .form-inline select, .form-horizontal select, .form-search .help-inline, .form-inline .help-inline, .form-horizontal .help-inline, .form-search .uneditable-input, .form-inline .uneditable-input, .form-horizontal .uneditable-input, .form-search .input-prepend, .form-inline .input-prepend, .form-horizontal .input-prepend, .form-search .input-append, .form-inline .input-append, .form-horizontal .input-append { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; margin-bottom: 0; } .form-search .hide, .form-inline .hide, .form-horizontal .hide { display: none; } .form-search label, .form-inline label { display: inline-block; } .form-search .input-append, .form-inline .input-append, .form-search .input-prepend, .form-inline .input-prepend { margin-bottom: 0; } .form-search .radio, .form-search .checkbox, .form-inline .radio, .form-inline .checkbox { padding-left: 0; margin-bottom: 0; vertical-align: middle; } .form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"], .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { float: left; margin-right: 3px; margin-left: 0; } .control-group { margin-bottom: 10px; } legend + .control-group { margin-top: 20px; -webkit-margin-top-collapse: separate; } .form-horizontal .control-group { margin-bottom: 20px; *zoom: 1; } .form-horizontal .control-group:before, .form-horizontal .control-group:after { display: table; content: ""; line-height: 0; } .form-horizontal .control-group:after { clear: both; } .form-horizontal .control-label { float: left; width: 140px; padding-top: 5px; text-align: right; } .form-horizontal .controls { *display: inline-block; *padding-left: 20px; margin-left: 160px; *margin-left: 0; } .form-horizontal .controls:first-child { *padding-left: 160px; } .form-horizontal .help-block { margin-top: 10px; margin-bottom: 0; } .form-horizontal .form-actions { padding-left: 160px; } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000000; } .modal-backdrop.fade { opacity: 0; } .modal-backdrop, .modal-backdrop.fade.in { opacity: 0.8; filter: alpha(opacity=80); } .modal { position: fixed; top: 10%; left: 50%; z-index: 1050; width: 560px; margin-left: -280px; background-color: #ffffff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); *border: 1px solid #999; /* IE6-7 */ border-radius: 6px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); background-clip: padding-box; outline: none; } .modal.fade { -webkit-transition: opacity .3s linear, top .3s ease-out; transition: opacity .3s linear, top .3s ease-out; top: -25%; } .modal.fade.in { top: 10%; } .modal-header { padding: 9px 15px; border-bottom: 1px solid #eee; } .modal-header .close { margin-top: 2px; } .modal-header h3 { margin: 0; line-height: 30px; } .modal-body { position: relative; overflow-y: auto; max-height: 400px; padding: 15px; } .modal-form { margin-bottom: 0; } .modal-footer { padding: 14px 15px 15px; margin-bottom: 0; text-align: right; background-color: #f5f5f5; border-top: 1px solid #ddd; border-radius: 0 0 6px 6px; box-shadow: inset 0 1px 0 #ffffff; *zoom: 1; } .modal-footer:before, .modal-footer:after { display: table; content: ""; line-height: 0; } .modal-footer:after { clear: both; } .modal-footer .btn + .btn { margin-left: 5px; margin-bottom: 0; } .modal-footer .btn-group .btn + .btn { margin-left: -1px; } .modal-footer .btn-block + .btn-block { margin-left: 0; } .hide { display: none; } .modal { color: #555555; margin: 0; padding: 15px; } .modal.modal-fullscreen { bottom: 30px; left: 30px; min-height: 440px; min-width: 940px; position: fixed; right: 30px; top: 30px; width: auto; } .modal.modal-default, .modal.modal-wide, .modal.modal-extra-wide { top: 0; margin-top: 60px; margin-bottom: 30px; position: absolute; } .modal.modal-default { width: 560px; margin-left: -280px; } .modal.modal-wide { width: 700px; margin-left: -350px; } .modal.modal-extra-wide { width: 1000px; margin-left: -500px; } .modal.modal-force-top { z-index: 2000; } .modal h2, .modal h4 { font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; color: #555555; } .modal-backdrop, .modal-backdrop.fade.in { opacity: 0.85; background: #314453; } .modal-backdrop.modal-force-top, .modal-backdrop.fade.in.modal-force-top { z-index: 1900; } .learnstorm.modal-backdrop, .learnstorm.modal-backdrop.fade.in { background: #4495ff; } .modal-header { border-bottom: 1px solid #ddd; padding: 0 0 9px 0; } .modal-header h2, .modal-header h4 { margin-bottom: 0; padding-top: 9px; } .modal-body { margin: 0; max-height: none; padding: 20px 0 9px 0; } .modal-footer { background-color: #ffffff; padding: 15px 0 0 0; text-align: right; } /* generic-dialog module */ .modal.generic-dialog { margin: 0 0 0 -250px; top: 50px; width: 500px; } .modal.generic-dialog .modal-body { padding: 0; } .ka-modal .error-message { color: red; font-size: 16px; padding: 10px 30px; } .ka-modal .tabs { font-size: 16px; height: 32px; width: 100%; margin-bottom: 5px; margin-top: 10px; border: 1px solid #eeeeee; border-width: 0 0 2px 0; } .ka-modal .tabs li { display: inline-block; text-align: center; margin-left: -5px; padding: 5px 20px; border: 1px solid #eeeeee; border-width: 0 0 2px 0; background-color: #ffffff; } .ka-modal .tabs li:hover, .ka-modal .tabs li.active { border-color: #76a005; background-color: #eeeeee; cursor: pointer; } @media screen and (max-width: 567px) { .notification-bar.banner-notification.learning-dashboard-callout, .notification-bar.banner-notification.sat-upsell-notification-bar { display: none !important; } } .notification-bar { background: #4858a4; color: #eeeeee; display: table; font-size: 16px; height: 40px; overflow: hidden; position: fixed; top: auto; right: 0; bottom: auto; left: 0; text-align: center; width: 100%; z-index: 2000; /* Override to base-element-styles.css link styling. */ } .notification-bar.auto-visible { top: 0; } .sandbox .notification-bar { position: relative; } .notification-bar a:not(.kui-button):link, .notification-bar a:not(.kui-button):visited, .notification-bar a:not(.kui-button):link:hover, .notification-bar a:not(.kui-button):visited:hover, .notification-bar a:not(.kui-button):link:focus, .notification-bar a:not(.kui-button):visited:focus { text-decoration: underline; color: #eeeeee; } .notification-bar .notification-bar-right, .notification-bar .notification-bar-close, .notification-bar .notification-bar-snooze, .notification-bar .notification-bar-long-snooze { display: table-cell; padding-right: 20px; vertical-align: middle; } .notification-bar .right-x { line-height: 40px; position: absolute; padding-right: 20px; right: 0; z-index: 10; } .notification-bar .right-x:hover { color: #999999; } .notification-bar .right-x i { cursor: pointer; } .notification-bar .notification-bar-content { display: table-cell; padding: 4px 8px; position: relative; vertical-align: middle; } .notification-bar .simple-button { white-space: nowrap; padding: 2px 10px; } .notification-bar.learn-storm-ticket-notification-bar { background-color: #227ab9; height: 300px; overflow: hidden; } .notification-bar.learn-storm-ticket-notification-bar .ls-slope-field { margin-left: -1000px; overflow: hidden; position: absolute; top: 0; right: auto; bottom: auto; left: 50%; width: 300px; height: 2000px; height: 300px; width: 2000px; } .notification-bar.learn-storm-ticket-notification-bar .notification-bar-content { display: block; left: 50%; margin-left: -250px; text-align: center; width: 500px; } .notification-bar.learn-storm-ticket-notification-bar .notification-bar-close { position: absolute; top: 10px; right: 10px; bottom: auto; left: auto; } .notification-bar.learn-storm-ticket-notification-bar .notification-bar-close span { color: #227ab9; } .notification-bar.learn-storm-ticket-notification-bar .notification-bar-close > a { -webkit-transition: all 320ms ease-in-out; transition: all 320ms ease-in-out; } .notification-bar.learn-storm-ticket-notification-bar .notification-bar-close > a:link, .notification-bar.learn-storm-ticket-notification-bar .notification-bar-close > a:link:visited, .notification-bar.learn-storm-ticket-notification-bar .notification-bar-close > a:link:focus, .notification-bar.learn-storm-ticket-notification-bar .notification-bar-close > a:link:hover, .notification-bar.learn-storm-ticket-notification-bar .notification-bar-close > a:link:active { background-color: #ffffff; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-topleft: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border-top-left-radius: 3px; background-clip: padding-box; color: #227ab9; padding: 3px 8px; text-decoration: none; } .notification-bar.learn-storm-ticket-notification-bar .notification-bar-close > a:link:focus, .notification-bar.learn-storm-ticket-notification-bar .notification-bar-close > a:link:hover { opacity: 0.8; } .notification-bar.learn-storm-ticket-notification-bar .notification-bar-close > a:link:active { opacity: 0.5; } .notification-bar.learn-storm-ticket-notification-bar .ls-h1 { font-size: 48px; color: #ffffff; text-align: center; text-transform: uppercase; } .notification-bar.learn-storm-ticket-notification-bar .ls-h2 { font-size: 24px; line-height: 24px; color: #4dc0b0; margin-left: 75px; width: 350px; } .notification-bar.learn-storm-ticket-notification-bar .ls-p { font-size: 14px; color: #ffffff; } .notification-bar.learn-storm-ticket-notification-bar .ls-form-hidden { display: none; } .notification-bar.learn-storm-ticket-notification-bar .learnstorm-parent-email-field, .notification-bar.learn-storm-ticket-notification-bar .learnstorm-parent-email-button { width: 70%; display: inline-block; } .notification-bar.learn-storm-ticket-notification-bar .learnstorm-parent-email-button { width: 24%; margin-left: 5%; } .notification-bar.learn-storm-ticket-notification-bar .learn-storm-button > .kui-button:hover:not(.kui-button-disabled) { background-color: white; border-color: white; color: #000; } .notification-bar .ls-dart { background-image: url(../www.khanacademy.org/images/learn-storm/dart.png); background-size: contain; background-repeat: no-repeat; display: inline-block; margin: 8px 6px; width: 25px; height: 36px; height: 25px; width: 36px; -webkit-animation: dartSpin 8s linear infinite; animation: dartSpin 8s linear infinite; } @-webkit-keyframes dartSpin { 100% { -webkit-transform: rotate(360deg); } } @keyframes dartSpin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .notification-bar.learn-storm-winner-notification-bar { background-color: #2c3747; } .notification-bar.learn-storm-winner-notification-bar .learnstorm-parent-email-field { display: inline-block; max-width: 200px; max-height: 32px; margin-left: 15px; } .notification-bar.learn-storm-winner-notification-bar .learnstorm-parent-email-field .kui-labeledfield__input { padding-top: 2px; padding-bottom: 2px; } .notification-bar.learn-storm-winner-notification-bar .learnstorm-parent-email-button { display: inline-block; margin-left: 15px; } .notification-bar.phantom-notification-bar { color: #d3d9cc; padding: 0 8px; } .notification-bar.phantom-notification-bar.error { background: #e5772e; border-bottom-color: #513326; text-align: center; } .notification-bar.phantom-notification-bar.error .notification-bar-content { color: #faebe1; text-shadow: 0 -1px 0 #743002; } .notification-bar.phantom-notification-bar .email-address { color: #eeeeee; } .notification-bar.phantom-notification-bar a.resend-link, .notification-bar.phantom-notification-bar a.change-link { color: #d3d9cc; line-height: 40px; margin-left: 8px; } .notification-bar.phantom-notification-bar a.resend-link.no-link, .notification-bar.phantom-notification-bar a.change-link.no-link { text-decoration: none; cursor: text; } .notification-bar.phantom-notification-bar a.resend-link:not(.no-link):link:hover, .notification-bar.phantom-notification-bar a.change-link:not(.no-link):link:hover { color: #eeeeee; } .notification-bar.phantom-notification-bar .simple-button { margin: 0 5px 0 7px; /* Adjust to work with envelope icon */ padding: 5px 5px 5px 10px; } .notification-bar.parent-checklist-notification .simple-button { margin-left: 10px; } .notification-bar.donate-notification { background: #639b24; color: #ffffff; position: static; min-height: 340px; height: auto; } .notification-bar.donate-notification .right-x { font-size: 24px; line-height: auto; padding-right: 0; right: 8px; top: 2px; } .notification-bar.donate-notification .right-x:hover { color: #bed47a; } .notification-bar.donate-notification > div { margin: 0 auto; max-width: 1200px; } @media screen and (max-width: 979px) and (max-height: 949px) { .notification-bar.donate-notification { display: none !important; } } .notification-bar.banner-notification { color: #444; background: #fff; font-size: 20px; height: 100px; position: static; } .notification-bar.banner-notification .notification-bar-content { line-height: 100px; } .notification-bar.banner-notification .notification-bar-content i { margin-left: 10px; } .notification-bar.banner-notification .notification-bar-content .action-button { border: 1px solid #7fab07; color: #ffffff; text-shadow: none; background-color: #80ac07; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#8aba08), to(#719807)); background-image: -webkit-linear-gradient(top, #8aba08, #719807); background-image: linear-gradient(to bottom, #8aba08, #719807); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8aba08', endColorstr='#ff719807', GradientType=0); border-color: #719807 #719807 #3a4e03; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #719807; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; margin-left: 20px; padding: 10px 20px; } .notification-bar.banner-notification .notification-bar-content .action-button:hover, .notification-bar.banner-notification .notification-bar-content .action-button:focus, .notification-bar.banner-notification .notification-bar-content .action-button:active, .notification-bar.banner-notification .notification-bar-content .action-button.active, .notification-bar.banner-notification .notification-bar-content .action-button.disabled, .notification-bar.banner-notification .notification-bar-content .action-button[disabled] { color: #ffffff; background-color: #719807; *background-color: #5e7f05; } .notification-bar.banner-notification .notification-bar-content .action-button:active, .notification-bar.banner-notification .notification-bar-content .action-button.active { background-color: #4c6704 \9; } .notification-bar.banner-notification .notification-bar-content .action-button:focus, .notification-bar.banner-notification .notification-bar-content .action-button:hover { border-bottom-color: #547105; } .notification-bar.banner-notification.learning-dashboard-callout .notification-bar-content .action-button { border: 1px solid #1e7c92; color: #ffffff; text-shadow: none; background-color: #1e7d93; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#20879f), to(#1a6e82)); background-image: -webkit-linear-gradient(top, #20879f, #1a6e82); background-image: linear-gradient(to bottom, #20879f, #1a6e82); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff20879f', endColorstr='#ff1a6e82', GradientType=0); border-color: #1a6e82 #1a6e82 #0d3842; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #1a6e82; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #ffffff !important; } .notification-bar.banner-notification.learning-dashboard-callout .notification-bar-content .action-button:hover, .notification-bar.banner-notification.learning-dashboard-callout .notification-bar-content .action-button:focus, .notification-bar.banner-notification.learning-dashboard-callout .notification-bar-content .action-button:active, .notification-bar.banner-notification.learning-dashboard-callout .notification-bar-content .action-button.active, .notification-bar.banner-notification.learning-dashboard-callout .notification-bar-content .action-button.disabled, .notification-bar.banner-notification.learning-dashboard-callout .notification-bar-content .action-button[disabled] { color: #ffffff; background-color: #1a6e82; *background-color: #165c6c; } .notification-bar.banner-notification.learning-dashboard-callout .notification-bar-content .action-button:active, .notification-bar.banner-notification.learning-dashboard-callout .notification-bar-content .action-button.active { background-color: #124a57 \9; } .notification-bar.banner-notification.learning-dashboard-callout .notification-bar-content .action-button:focus, .notification-bar.banner-notification.learning-dashboard-callout .notification-bar-content .action-button:hover { border-bottom-color: #135160; } .notification-bar.banner-notification.sat-beta-content-notification-bar { background: #644172; color: #ffffff; } .notification-bar.banner-notification.sat-beta-content-notification-bar .notification-bar-content { line-height: inherit; } .notification-bar.banner-notification.sat-beta-content-notification-bar .sat-beta-content-link { font-size: 14px; } .notification-bar.banner-notification.sat-upsell-notification-bar .notification-bar-content { display: table; line-height: inherit; margin: 20px auto; } .notification-bar.banner-notification.sat-upsell-notification-bar .text-container { display: table-cell; font-size: 16px; text-align: left; vertical-align: middle; } .notification-bar.banner-notification.sat-upsell-notification-bar .text-container .sub-title { color: #444444; font-size: 14px; } .notification-bar.banner-notification.sat-upsell-notification-bar .button-container { display: table-cell; padding-left: 20px; vertical-align: middle; } .notification-bar.banner-notification.sat-upsell-notification-bar .button-container .kui-button { border-radius: 25px; font-size: 18px; height: 50px; line-height: 29px; } @media screen and (max-width: 480px) { .notification-bar.banner-notification { font-size: 14px; } .notification-bar.banner-notification .notification-bar-content { line-height: 20px; } .notification-bar.banner-notification .notification-bar-content .action-button { display: block; margin: 10px auto; } .notification-bar.banner-notification .right-x { line-height: 0; padding-right: 0; right: 5px; top: 10px; } } /* TODO(cbhl): (i18n) These elements overlap on too-narrow screens; hide them when they don't fit. Re-measure these when strings have been i18n-ed. */ @media screen and (max-width: 1200px) { .demo-notification-bar { position: absolute; /* (not fixed) */ } } @media screen and (min-width: 1024px) { .mission-small { display: none; } } @media screen and (max-width: 750px) { .demo-notification-bar .notification-bar-content .last-ditch-report { text-decoration: underline; cursor: pointer; } .demo-notification-bar .notification-bar-content .simple-button { display: none; } } .notification-bar-spacer { height: 0; } .notification-bar-spacer.auto-visible { height: 40px; } /* TODO(benkomalo): these change-signup-email-dialog styles aren't strictly notification-bar related, but that dialog is triggered and only accessible via a notification bar, so there's no better place right now. */ .change-signup-email-dialog.modal { width: 300px; margin-left: -150px; } .change-signup-email-dialog.modal.fade.in { top: 200px; } .change-signup-email-dialog .field-row { margin-top: 8px; } .change-signup-email-dialog label { display: inline-block; font-size: 14px; margin-right: 6px; width: 48px; text-align: right; } .change-signup-email-dialog .simple-input { display: inline-block; font-size: 14px; padding: 0 4px; width: 231px; } .change-signup-email-dialog .simple-button { font-size: 14px; } .change-signup-email-dialog .error { color: red; } .orphan-notification-bar .throbber { position: relative; vertical-align: middle; } .orphan-notification-bar .notification-bar-snooze.hidden-link { display: none; } #orphan-modal { margin-top: 120px; z-index: 2000; } #orphan-modal .modal-body { padding-left: 10px; padding-right: 10px; } #orphan-modal .bottom-part input { display: block; font-size: 14px; margin-top: 15px; padding: 8px; width: 100%; } #orphan-modal .controls, #orphan-modal .controls input { -moz-box-sizing: border-box; box-sizing: border-box; color: black; display: inline-block; font-size: 14px; height: 30px; } #orphan-modal .controls .accept { right: 0; } #orphan-modal .controls, #orphan-modal .controls .full-width { width: 100%; } #orphan-modal h2 { text-align: left; } .warning-banner { background: #fbe2e0; border-color: #c52717; border-width: 1px; border-style: solid; padding: 10px 20px; margin-bottom: 30px; font-size: 16px; color: #c52717; } .popover { position: absolute; top: 0; left: 0; z-index: 1010; display: none; max-width: 276px; padding: 1px; text-align: left; background-color: #ffffff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); white-space: normal; } .popover.top { margin-top: -10px; } .popover.right { margin-left: 10px; } .popover.bottom { margin-top: 10px; } .popover.left { margin-left: -10px; } .popover-title { margin: 0; padding: 8px 14px; font-size: 14px; font-weight: normal; line-height: 18px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; } .popover-title:empty { display: none; } .popover-content { padding: 9px 14px; } .popover .arrow, .popover .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; } .popover .arrow { border-width: 11px; } .popover .arrow:after { border-width: 10px; content: ""; } .popover.top .arrow { left: 50%; margin-left: -11px; border-bottom-width: 0; border-top-color: #999; border-top-color: rgba(0, 0, 0, 0.25); bottom: -11px; } .popover.top .arrow:after { bottom: 1px; margin-left: -10px; border-bottom-width: 0; border-top-color: #ffffff; } .popover.right .arrow { top: 50%; left: -11px; margin-top: -11px; border-left-width: 0; border-right-color: #999; border-right-color: rgba(0, 0, 0, 0.25); } .popover.right .arrow:after { left: 1px; bottom: -10px; border-left-width: 0; border-right-color: #ffffff; } .popover.bottom .arrow { left: 50%; margin-left: -11px; border-top-width: 0; border-bottom-color: #999; border-bottom-color: rgba(0, 0, 0, 0.25); top: -11px; } .popover.bottom .arrow:after { top: 1px; margin-left: -10px; border-top-width: 0; border-bottom-color: #ffffff; } .popover.left .arrow { top: 50%; right: -11px; margin-top: -11px; border-right-width: 0; border-left-color: #999; border-left-color: rgba(0, 0, 0, 0.25); } .popover.left .arrow:after { right: 1px; border-right-width: 0; border-left-color: #ffffff; bottom: -10px; } .popover-title { display: none; } .qtip-youtube { border-color: #4A4A4A; } .qtip-default.dark-round-tip { background: #333333; border-radius: 10px; border: 0px solid #333333; /* border color used for arrow */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); color: #fdfdfd; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 16px; line-height: 22px; padding: 10px; width: 246px; z-index: 100!important; } .qtip-default.dark-round-tip .qtip-content { padding: 10px; } .qtip-default.top-left-tip .qtip-tip { left: 30px!important; right: initial!important; } .qtip-default.top-right-tip .qtip-tip { right: 30px!important; left: initial!important; } .qtip-default.centered .qtip-content { text-align: center; } .logotype { font-family: FontAwesome; font-size: 17px; letter-spacing: 0; text-align: center; -webkit-font-smoothing: antialiased; } .logotype-khan { text-transform: uppercase; } .logotype-khan:before { color: #9db63b; content: "•"; margin-right: 3px; } .logotype-academy { text-transform: lowercase; } .hide-header-el { visibility: hidden; opacity: 0; -webkit-transition: visibility 0s ease 0.3s, opacity 0.3s; transition: visibility 0s ease 0.3s, opacity 0.3s; } .show-header-el { visibility: visible; opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .urgent-wrapper { position: relative; } .urgent-wrapper.banner-notification { z-index: 1051; } /** * Contains site wide nav (nav links to the left, search, and user info)) as * well as the page sub nav (on dashboard, coach, and about pages). */ #top-header-container > .old-header { background: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); position: relative; top: 0; z-index: 1051; /* Primary navigation links (left side of header) ************************************************/ /** * Right side of the header, ie search bar, user notifications and dropdown *****************************************************/ /* Search box styles ************************************/ /* Logo Styles ************************************/ /* Mobile header bar icons ************************************/ } #top-header-container > .old-header a { text-decoration: none; } #top-header-container > .old-header #top-header { height: 45px; max-width: 1200px; position: relative; margin: 0 auto; } .tutorial-outer-wrapper #top-header-container > .old-header #top-header, .scratchpad-outermost-wrapper #top-header-container > .old-header #top-header { max-width: none; } #top-header-container > .old-header #top-header .dropdown.open .dropdown-toggle { background: #ffffff; border-radius: 0; border-color: #dddddd; color: #96ab4f; } #top-header-container > .old-header #top-header .dropdown.open .dropdown-toggle .icon-caret-down { color: #96ab4f; } #top-header-container > .old-header #top-header .dropdown.open .dropdown-toggle .learn-menu-subject { color: #96ab4f; } #top-header-container > .old-header .icon-caret-down { color: #999999; margin-left: 3px; position: relative; line-height: 100%; } #top-header-container > .old-header .sitewide-navigation { display: inline; line-height: 45px; margin: 0; padding: 0; position: relative; width: auto; } #top-header-container > .old-header .sitewide-navigation .nav-subheader .nav-link, #top-header-container > .old-header .sitewide-navigation .nav-subheader .nav-link:link, #top-header-container > .old-header .sitewide-navigation .nav-subheader .nav-link:visited { border-color: #dddddd; color: #444444; } #top-header-container > .old-header .sitewide-navigation .nav-subheader .nav-link.selected, #top-header-container > .old-header .sitewide-navigation .nav-subheader .nav-link:hover { color: #96ab4f; } #top-header-container > .old-header .sitewide-navigation .nav-subheader .nav-link { border: 0 solid #dddddd; border-right-width: 1px; display: block; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 14px; float: left; padding: 0 15px; } @media screen and (max-width: 400px) { #top-header-container > .old-header .sitewide-navigation .nav-subheader .nav-link { padding: 0 10px; border: none; } } #top-header-container > .old-header .sitewide-navigation .nav-subheader .nav-link#header-logo { border-left-width: 1px; } #top-header-container > .old-header .sitewide-navigation .nav-subheader .nav-link.selected, #top-header-container > .old-header .sitewide-navigation .nav-subheader .nav-link:hover { border-radius: 0; color: #96ab4f; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #top-header-container > .old-header .sitewide-navigation .nav-subheader .nav-link.selected .icon-caret-down, #top-header-container > .old-header .sitewide-navigation .nav-subheader .nav-link:hover .icon-caret-down { color: #96ab4f; } #top-header-container > .old-header .sitewide-navigation .nav-subheader .watch-link { float: left; position: relative; } #top-header-container > .old-header .sitewide-navigation .nav-subheader .watch-link:focus, #top-header-container > .old-header .sitewide-navigation .nav-subheader .watch-link:hover, #top-header-container > .old-header .sitewide-navigation .nav-subheader .watch-link:active { border-radius: 0; color: #96ab4f; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #top-header-container > .old-header .sitewide-navigation .nav-subheader .watch-link:focus .icon-caret-down, #top-header-container > .old-header .sitewide-navigation .nav-subheader .watch-link:hover .icon-caret-down, #top-header-container > .old-header .sitewide-navigation .nav-subheader .watch-link:active .icon-caret-down { color: #96ab4f; } #top-header-container > .old-header .sitewide-navigation .nav-subheader .watch-link .icon-caret-down { font-size: 14px; top: 1px; } #top-header-container > .old-header .sitewide-navigation .nav-subheader .watch-link .hacky-border-cover { background: white; display: none; left: -15px; margin-top: -4px; padding: 0 15px; width: 8px; height: 100%; height: 8px; width: 100%; z-index: 1; } #top-header-container > .old-header .sitewide-navigation .nav-subheader .watch-link.open .hacky-border-cover { display: block; } @media screen and (max-width: 908px) { #top-header-container > .old-header .sitewide-navigation .nav-subheader .about-link, #top-header-container > .old-header .sitewide-navigation .nav-subheader .donate-link { display: none; } } #top-header-container > .old-header .sitewide-navigation a { border: 0; } #top-header-container > .old-header .sitewide-navigation a.science .learn-menu-subject { color: #9d4a5a; } #top-header-container > .old-header .sitewide-navigation a.science:hover .learn-menu-subject { color: inherit; } #top-header-container > .old-header .sitewide-navigation a.humanities .learn-menu-subject { color: #c13b31; } #top-header-container > .old-header .sitewide-navigation a.humanities:hover .learn-menu-subject { color: inherit; } #top-header-container > .old-header .sitewide-navigation a.economics-finance-domain .learn-menu-subject { color: #bf7b34; } #top-header-container > .old-header .sitewide-navigation a.economics-finance-domain:hover .learn-menu-subject { color: inherit; } #top-header-container > .old-header .sitewide-navigation a.cs .learn-menu-subject { color: #53893e; } #top-header-container > .old-header .sitewide-navigation a.cs:hover .learn-menu-subject { color: inherit; } #top-header-container > .old-header .sitewide-navigation a.hour-of-code .learn-menu-subject { color: #53893e; } #top-header-container > .old-header .sitewide-navigation a.hour-of-code:hover .learn-menu-subject { color: inherit; } #top-header-container > .old-header .sitewide-navigation a.computer-programming .learn-menu-subject { color: #53893e; } #top-header-container > .old-header .sitewide-navigation a.computer-programming:hover .learn-menu-subject { color: inherit; } #top-header-container > .old-header .sitewide-navigation a.computing .learn-menu-subject { color: #53893e; } #top-header-container > .old-header .sitewide-navigation a.computing:hover .learn-menu-subject { color: inherit; } #top-header-container > .old-header .sitewide-navigation a.partner-content .learn-menu-subject { color: #2c8d7b; } #top-header-container > .old-header .sitewide-navigation a.partner-content:hover .learn-menu-subject { color: inherit; } #top-header-container > .old-header .sitewide-navigation a.math .learn-menu-subject { color: #46a8bf; } #top-header-container > .old-header .sitewide-navigation a.math:hover .learn-menu-subject { color: inherit; } #top-header-container > .old-header .sitewide-navigation a.test-prep .learn-menu-subject { color: #7e5f8e; } #top-header-container > .old-header .sitewide-navigation a.test-prep:hover .learn-menu-subject { color: inherit; } #top-header-container > .old-header .sitewide-navigation .learn-menu-title { display: inline-block; float: left; max-width: 150px; overflow: hidden; padding-right: 4px; text-overflow: ellipsis; white-space: nowrap; } #top-header-container > .old-header #page_auth { display: block; float: right; line-height: 45px; margin: 0; } #top-header-container > .old-header #page_auth #login-menu { margin-top: 9px; } #top-header-container > .old-header #page_auth .home-link { float: left; border: 0 solid #dddddd; border-right-width: 1px; display: block; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 14px; padding: 0 15px; border-left-width: 1px; border-right-width: 0; } @media screen and (max-width: 400px) { #top-header-container > .old-header #page_auth .home-link { padding: 0 10px; border: none; } } #top-header-container > .old-header #page_auth .home-link:link, #top-header-container > .old-header #page_auth .home-link:visited { color: #444444; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; } #top-header-container > .old-header #page_auth .home-link:hover { border-radius: 0; color: #96ab4f; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #top-header-container > .old-header #page_auth .home-link:hover .icon-caret-down { color: #96ab4f; } #top-header-container > .old-header .name-dropdown ul { width: 100%; } #top-header-container > .old-header .name-dropdown ul.with-coach-links { min-width: 130px; } #top-header-container > .old-header .name-dropdown .name-dropdown__link { padding: 10px 20px 10px 15px; white-space: normal; } #top-header-container > .old-header .name-dropdown .name-dropdown__separator { border-bottom: 1px solid #dddddd; } #top-header-container > .old-header .name-dropdown .primary { background-color: #76a005; color: #ffffff; } #top-header-container > .old-header .name-dropdown .primary:hover { background-color: #2c3747; } #top-header-container > .old-header #user-info { border-left: 1px solid #dddddd; display: block; float: right; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; } #top-header-container > .old-header #user-info .dropdown { border-right: 1px solid #dddddd; float: left; height: 45px; position: relative; vertical-align: top; } #top-header-container > .old-header #user-info .dropdown.open > span.username_and_notification > .nav-link { color: #ffffff; } #top-header-container > .old-header #user-info .dropdown .user-avatar { float: left; height: 24px; padding: 0 4px 0 0; position: relative; top: 10px; vertical-align: middle; width: 24px; } #top-header-container > .old-header #user-info .dropdown .user-notification { height: 45px; } #top-header-container > .old-header #user-info .dropdown .user-notification .icon-bell-alt { color: #999999; position: relative; top: -4px; } #top-header-container > .old-header #user-info .dropdown .user-notification .icon-bell-alt.brand-new { color: #96ab4f; } #top-header-container > .old-header #user-info .dropdown.open .icon { color: #555555; background-position: 0 0; } #top-header-container > .old-header #user-info .dropdown .username_and_notification { border: none; color: #444444; float: left; height: 45px; padding: 0 15px 0 10px; position: relative; top: 0; vertical-align: baseline; } #top-header-container > .old-header #user-info .dropdown .username_and_notification .user-name { display: inline-block; float: left; margin-right: 2px; max-width: 205px; overflow: hidden; text-overflow: ellipsis; vertical-align: baseline; white-space: nowrap; } #top-header-container > .old-header #user-info .dropdown .user-notifications-toggle { border: none; float: left; height: 45px; padding: 0 15px; vertical-align: baseline; } #top-header-container > .old-header #user-info .dropdown:hover { border-radius: 0; color: #96ab4f; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #top-header-container > .old-header #user-info .dropdown:hover .icon-caret-down { color: #96ab4f; } #top-header-container > .old-header #user-info .dropdown:hover > span.user-notifications-toggle > .nav-link, #top-header-container > .old-header #user-info .dropdown:hover > span.username_and_notification > .nav-link { border-radius: 0; color: #96ab4f; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #top-header-container > .old-header #user-info .dropdown:hover > span.user-notifications-toggle > .nav-link .icon-caret-down, #top-header-container > .old-header #user-info .dropdown:hover > span.username_and_notification > .nav-link .icon-caret-down { color: #96ab4f; } #top-header-container > .old-header #user-info .dropdown.open > span.user-notifications-toggle > .nav-link, #top-header-container > .old-header #user-info .dropdown.open > span.username_and_notification > .nav-link { background: #ffffff; border-radius: 0; border-color: #dddddd; color: #96ab4f; } #top-header-container > .old-header #user-info .dropdown.open > span.user-notifications-toggle > .nav-link .icon-caret-down, #top-header-container > .old-header #user-info .dropdown.open > span.username_and_notification > .nav-link .icon-caret-down { color: #96ab4f; } #top-header-container > .old-header #user-info .dropdown .dropdown-menu { padding: 0; right: 0; top: 45px; } #top-header-container > .old-header #user-info .dropdown .nav-link { color: #444444; display: inline-block; line-height: 45px; } #top-header-container > .old-header #user-info .dropdown .nav-link > span { position: relative; top: 1px; } #top-header-container > .old-header #user-info .dropdown.open .dropdown-toggle { border-radius: 0; } #top-header-container > .old-header #user-info .icon-caret-down { font-size: 12px; } #top-header-container > .old-header #user-info .hover-card-content-container { /** * Override the default blue/green link color for name and points. */ color: #444444; } #top-header-container > .old-header #user-info .hover-card-content-container .profile-link { color: #444444; } #top-header-container > .old-header #user-info .hover-card-content-container:hover { background: #2c3747; color: #ffffff; } #top-header-container > .old-header #user-info .hover-card-content-container:hover .hover-card-content .profile-link, #top-header-container > .old-header #user-info .hover-card-content-container:hover .hover-card-content .join-date, #top-header-container > .old-header #user-info .hover-card-content-container:hover .hover-card-content .points-label, #top-header-container > .old-header #user-info .hover-card-content-container:hover .hover-card-content .nickname { color: #ffffff; } #top-header-container > .old-header #user-info .hover-card-content-container:hover .hover-card-content .bio, #top-header-container > .old-header #user-info .hover-card-content-container:hover .hover-card-content .username { color: #aaaaaa; } #top-header-container > .old-header #user-info .sign-up-link, #top-header-container > .old-header #user-info .log-in-link { color: #444444; float: left; height: 45px; padding: 0 15px; vertical-align: top; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } #top-header-container > .old-header #user-info .sign-up-link.highlight, #top-header-container > .old-header #user-info .log-in-link.highlight { background: #639b24; color: #ffffff; } #top-header-container > .old-header #user-info .sign-up-link:hover, #top-header-container > .old-header #user-info .log-in-link:hover, #top-header-container > .old-header #user-info .sign-up-link.highlight:hover, #top-header-container > .old-header #user-info .log-in-link.highlight:hover { background: #2c3747; color: #ffffff; } @media screen and (max-width: 400px) { #top-header-container > .old-header #user-info .sign-up-link, #top-header-container > .old-header #user-info .log-in-link { padding: 0 10px; } } #top-header-container > .old-header #user-info .log-in-link.nav-link { border-right: 1px solid #dddddd; } #top-header-container > .old-header #user-info .user-dropdown-controls { background: #eee; border-top: 1px solid #ccc; padding: 5px 10px 5px 10px; } #top-header-container > .old-header #user-info .user-dropdown-controls .left-control { float: left; } #top-header-container > .old-header #user-info .user-dropdown-controls .right-control { float: right; } #top-header-container > .old-header .search-results-popup { margin-top: 9px; } #top-header-container > .old-header #top-header { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } #top-header-container > .old-header #page_auth { -webkit-order: 1; -ms-flex-order: 1; order: 1; } #top-header-container > .old-header .mobile-menu-buttons { -webkit-order: 2; -ms-flex-order: 2; order: 2; } #top-header-container > .old-header .nav-search-box { -webkit-flex: 1; -ms-flex: 1; flex: 1; } #top-header-container > .old-header #header-logo { color: #444444; height: 45px; position: relative; } @media screen and (max-width: 767px) { #top-header-container > .old-header #header-logo { text-align: left; padding-left: 15px; } } #top-header-container > .old-header #header-logo:hover { color: #96ab4f; } #top-header-container > .old-header #header-logo > span { position: relative; top: 1px; } #top-header-container > .old-header #header-logo > .logotype-locale { font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; } #top-header-container > .old-header .mobile-menu-buttons { float: right; min-width: 91px; } #top-header-container > .old-header .navbar-search-button, #top-header-container > .old-header .navbar-toggle-menu { border-left: 1px solid #dddddd; color: #999999; float: right; font-size: 20px; height: 45px; line-height: 45px; margin: 0; min-width: 45px; text-align: center; width: 45px; } #top-header-container > .old-header .navbar-search-button { margin-left: -1px; } #top-header-container > .old-header .navbar-toggle-menu { cursor: pointer; } #top-header-container > .old-header .navbar-toggle-menu .navbar-toggle-icon-close { display: none; } #top-header-container > .old-header .navbar-toggle-menu.navbar-menu-open .navbar-toggle-icon-close { display: inline-block; } #top-header-container > .old-header .navbar-toggle-menu.navbar-menu-open .navbar-toggle-icon-open { display: none; } @media screen and (min-width: 768px) { #top-header-container { /** * The YCLA redesign header is transparent by default, and then becomes * the old header on hover. * TODO(marcia): homepage-header-ycla is used for many pages that are * neither homepage nor ycla, but rather have some spiffy transparent * header that fades in on mouse hover. */ } #top-header-container.homepage-header-ycla > .old-header { background: #ffffff; left: 0; position: absolute; right: 0; top: 0; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } #top-header-container.homepage-header-ycla > .old-header .nav-link, #top-header-container.homepage-header-ycla > .old-header #user-info { -webkit-transition: border-color 0.3s; transition: border-color 0.3s; } #top-header-container.homepage-header-ycla > .old-header .log-in-link { -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } #top-header-container.homepage-header-ycla > .old-header .sitewide-navigation .nav-subheader .coach-link, #top-header-container.homepage-header-ycla > .old-header .sitewide-navigation .nav-subheader .about-link, #top-header-container.homepage-header-ycla > .old-header .sitewide-navigation .nav-subheader .donate-link { visibility: visible; opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } #top-header-container.homepage-header-ycla > .old-header .nav-search-box { visibility: visible; opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } #top-header-container.homepage-header-ycla > .old-header #user-info .log-in-link.nav-link { border-color: transparent; } #top-header-container.header-transparent > .old-header { background: transparent; box-shadow: none; } #top-header-container.header-transparent > .old-header #header-logo, #top-header-container.header-transparent > .old-header #header-logo:hover { color: #ffffff; } #top-header-container.header-transparent > .old-header #page_auth .home-link { display: none; } #top-header-container.header-transparent > .old-header #user-info { border-color: transparent; } #top-header-container.header-transparent > .old-header #user-info .log-in-link, #top-header-container.header-transparent > .old-header #user-info .log-in-link.highlight, #top-header-container.header-transparent > .old-header #user-info .log-in-link:hover, #top-header-container.header-transparent > .old-header #user-info .log-in-link.highlight:hover { color: #ffffff; background: transparent; } #top-header-container.header-transparent > .old-header #user-info .user-notifications { display: none; } #top-header-container.header-transparent > .old-header #user-info .dropdown { border-color: transparent; } #top-header-container.header-transparent > .old-header #user-info .dropdown .username_and_notification { color: #ffffff; } #top-header-container.header-transparent > .old-header #user-info .dropdown .username_and_notification .icon-caret-down { color: #ddd; } #top-header-container.header-transparent > .old-header .sitewide-navigation .nav-subheader .nav-link, #top-header-container.header-transparent > .old-header .sitewide-navigation .nav-subheader .nav-link:link, #top-header-container.header-transparent > .old-header .sitewide-navigation .nav-subheader .nav-link:visited { color: #ffffff; border-color: transparent; -webkit-transition: color 0.3s; transition: color 0.3s; } #top-header-container.header-transparent > .old-header .sitewide-navigation .nav-subheader .nav-link .icon-caret-down, #top-header-container.header-transparent > .old-header .sitewide-navigation .nav-subheader .nav-link:link .icon-caret-down, #top-header-container.header-transparent > .old-header .sitewide-navigation .nav-subheader .nav-link:visited .icon-caret-down { color: #ffffff; } #top-header-container.header-transparent > .old-header .sitewide-navigation .nav-subheader .coach-link, #top-header-container.header-transparent > .old-header .sitewide-navigation .nav-subheader .about-link, #top-header-container.header-transparent > .old-header .sitewide-navigation .nav-subheader .donate-link { visibility: hidden; opacity: 0; -webkit-transition: visibility 0s ease 0.3s, opacity 0.3s; transition: visibility 0s ease 0.3s, opacity 0.3s; } #top-header-container.header-transparent > .old-header .nav-search-box { visibility: hidden; opacity: 0; -webkit-transition: visibility 0s ease 0.3s, opacity 0.3s; transition: visibility 0s ease 0.3s, opacity 0.3s; } #top-header-container.header-transparent > .old-header .navbar-toggle-menu { border-color: transparent; color: white; } } /** * Notifications styles ************************************************************************/ .user-notifications { /* These are the bare minimum styles needed to display the notification * dropdown's "loading" status. The rest of notifications' styles for * the dropdown's content are loaded dynamically via notifications.css. */ } .user-notifications .user-notification .notification-bubble { position: absolute; right: -4px; top: -6px; padding: 0 2px; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); background-color: #76a005; color: #FFF; line-height: 13px; font-size: 10px; font-weight: bold; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; } .user-notifications .dropdown-menu { padding: 0; right: 0; top: 45px; width: auto; text-transform: none; } .user-notifications .dropdown-menu.inner-dropdown-menu { display: block; position: static; max-height: 310px; overflow: auto; overflow-x: hidden; border: 0; box-shadow: none; -webkit-overflow-scrolling: touch; } .user-notifications .dropdown-menu li { width: 400px; } .user-notifications .dropdown-menu li.notifications-heading { background: #eee; border-bottom: 1px solid #ccc; font-size: 14px; text-align: center; } .user-notifications .dropdown-menu li.loading { background: white; text-align: center; } .user-notifications .dropdown-menu li.loading img { vertical-align: middle; width: 16px; height: 16px; } .user-notifications .dropdown-menu li.empty { background: white; text-align: center; height: 150px; } .user-notifications .dropdown-menu li.empty div { margin-top: 59px; } .user-notifications .dropdown-menu.unloaded .loading { height: 150px; } .user-notifications .dropdown-menu.unloaded .loading img { margin-top: 65px; } /** * Page specific sub navigation styles (navigation links just below header) * Used for Computer Science scratchpads, Coach, and About ************************************************************************/ #page_sub_nav, #nav-container, .nav-bar { background: #f7f7f7; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; color: #444444; min-height: 16px; padding: 0; position: relative; width: auto; } #page_sub_nav .breadcrumbs_nav, #nav-container .breadcrumbs_nav, .nav-bar .breadcrumbs_nav { display: block; font-weight: normal; font-size: 14px; line-height: 36px; text-align: center; width: auto; float: none; } #page_sub_nav .breadcrumbs_nav .parent-teacher-toggle, #nav-container .breadcrumbs_nav .parent-teacher-toggle, .nav-bar .breadcrumbs_nav .parent-teacher-toggle { margin-top: 2px; position: relative; display: inline-block; line-height: 22px; border-radius: 20px; background: #fdfdfd; overflow: hidden; vertical-align: middle; } #page_sub_nav .breadcrumbs_nav .parent-teacher-toggle a:first-child, #nav-container .breadcrumbs_nav .parent-teacher-toggle a:first-child, .nav-bar .breadcrumbs_nav .parent-teacher-toggle a:first-child { border-radius: 20px 0 0 20px; } #page_sub_nav .breadcrumbs_nav .parent-teacher-toggle a:last-child, #nav-container .breadcrumbs_nav .parent-teacher-toggle a:last-child, .nav-bar .breadcrumbs_nav .parent-teacher-toggle a:last-child { border-radius: 0 20px 20px 0; border-left-width: 0; } #page_sub_nav .breadcrumbs_nav .parent-teacher-toggle a, #nav-container .breadcrumbs_nav .parent-teacher-toggle a, .nav-bar .breadcrumbs_nav .parent-teacher-toggle a { display: inline-block; border: 1px solid #aaaaaa; color: #aaaaaa; font-weight: bold; text-decoration: none; padding: 2px 12px; } #page_sub_nav .breadcrumbs_nav .parent-teacher-toggle a:hover, #nav-container .breadcrumbs_nav .parent-teacher-toggle a:hover, .nav-bar .breadcrumbs_nav .parent-teacher-toggle a:hover { background-color: #f3f3f3; } #page_sub_nav .breadcrumbs_nav .parent-teacher-toggle a.active, #nav-container .breadcrumbs_nav .parent-teacher-toggle a.active, .nav-bar .breadcrumbs_nav .parent-teacher-toggle a.active { background-color: #aaaaaa; color: #ffffff; box-shadow: inset -1px 1px 4px 0px rgba(0, 0, 0, 0.2); } #page_sub_nav .breadcrumbs_nav .parent-teacher-toggle a.disabled, #nav-container .breadcrumbs_nav .parent-teacher-toggle a.disabled, .nav-bar .breadcrumbs_nav .parent-teacher-toggle a.disabled { color: #eee; } #page_sub_nav .breadcrumbs_nav .parent-teacher-toggle a.disabled:hover, #nav-container .breadcrumbs_nav .parent-teacher-toggle a.disabled:hover, .nav-bar .breadcrumbs_nav .parent-teacher-toggle a.disabled:hover { background-color: inherit; } #page_sub_nav .breadcrumbs_nav a, #nav-container .breadcrumbs_nav a, .nav-bar .breadcrumbs_nav a { background: #f7f7f7; color: #222; display: inline-block; margin-left: 0; padding: 0 10px; position: relative; border-top: 2px solid #fdfdfd; border-bottom: 2px solid #f7f7f7; text-decoration: none; } #page_sub_nav .breadcrumbs_nav a.selected, #nav-container .breadcrumbs_nav a.selected, .nav-bar .breadcrumbs_nav a.selected, #page_sub_nav .breadcrumbs_nav a:hover, #nav-container .breadcrumbs_nav a:hover, .nav-bar .breadcrumbs_nav a:hover { border-bottom-color: #76a005; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #page_sub_nav .breadcrumbs_nav a.selected, #nav-container .breadcrumbs_nav a.selected, .nav-bar .breadcrumbs_nav a.selected { font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; position: static; } #page_sub_nav .breadcrumbs_nav a:hover, #nav-container .breadcrumbs_nav a:hover, .nav-bar .breadcrumbs_nav a:hover { text-decoration: none; color: #76a005; } #page_sub_nav .navbar-dropdown, #nav-container .navbar-dropdown, .nav-bar .navbar-dropdown { font-size: 13px; background-color: #ffffff; height: 26px; padding-left: 10px; margin-top: 7px; } #page_sub_nav .icon-chevron-left, #nav-container .icon-chevron-left, .nav-bar .icon-chevron-left { font-size: 10px; line-height: 1em; } #page_sub_nav .children-students-title, #nav-container .children-students-title, .nav-bar .children-students-title { margin-top: 2px; margin-bottom: 0px; color: #999999; padding-left: 17px; } /* Profile user card styles (for user-card-view.jsx) for old profile */ #tab-content-user-profile .user-info-container .user-info { color: #ffffff; background-size: cover; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 0; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topleft: 0; border-top-right-radius: 0; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-top-left-radius: 0; background-clip: padding-box; padding: 20px; position: relative; } #tab-content-user-profile .user-info-container .user-info .editable { cursor: pointer; } #tab-content-user-profile .user-info-container .user-info .editable:hover { background-color: #4b6382; background-color: rgba(255, 255, 255, 0.15); border-radius: 5px; } #tab-content-user-profile .user-info-container .widget-privacy-indicator, #tab-content-user-profile .user-info-container .widget-privacy-icon { color: #7c93a5; } #tab-content-user-profile .user-info-container .avatar-pic-container { display: inline-block; position: relative; } #tab-content-user-profile .user-info-container .avatar-pic { vertical-align: top; width: 100px; height: 100px; } #tab-content-user-profile .user-card-support-button, #tab-content-user-profile .user-card-signup-button { margin-top: 15px; } #tab-content-user-profile .user-info-container .progress-summary-container .progress-label { display: none; } #tab-content-user-profile .user-deets { -moz-box-sizing: border-box; box-sizing: border-box; color: #7c93a5; float: left; font-size: 14px; line-height: 18px; margin-left: 10px; max-width: 500px; padding: 10px; white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ } #tab-content-user-profile .user-deets .nickname { color: #ffffff; font-size: 24px; } #tab-content-user-profile .user-deets .empty-field { color: #7c93a5; font-size: 16px; text-decoration: underline; } #tab-content-user-profile .user-deets .username { font-size: 18px; margin-left: 10px; } #tab-content-user-profile .user-deets .bio { color: #ffffff; font-size: 16px; margin-top: 15px; } #tab-content-user-profile .user-deets .location-text { margin-top: 15px; } #tab-content-user-profile .basic-user-info { /* force a position-context and background color so that it can be * highlighted in the out-of-the-box experience. */ position: relative; padding: 10px; } #tab-content-user-profile #user-card-privacy-indicator { position: absolute; right: 0; top: 0; padding: 5px; } #tab-content-user-profile .user-card-bottom-right { margin: 20px; position: absolute; bottom: 0; right: 0; } #tab-content-user-profile .user-profile-controls .dropdown-toggle .caret { margin-left: 4px; } #tab-content-user-profile .user-profile-controls .dropdown-toggle { background: rgba(0, 0, 0, 0.15); border: 2px solid #617a8d; color: #ffffff; display: block; font-size: 14px; line-height: 18px; padding: 5px 10px; } #tab-content-user-profile .user-profile-controls .dropdown-toggle .caret { border-top-color: #ffffff; } /** * More search styles, which Marcia is hesitant to put into #top-header because * the search page and other unknown search-type inputs may use these styles... */ .page-search { display: block; position: relative; padding: 0 15px; } .page-search .search-submit { display: none; } .page-search .ui-autocomplete-loading { background-image: url(../www.khanacademy.org/images/spinner.gif); background-repeat: no-repeat; background-position: 4px 5px; } .page-search .icon-search { color: #AAA; font-size: 18px; left: 7px; position: absolute; top: 5px; z-index: 101; } .simple-input.search-input { padding-left: 25px; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 12px; height: 30px; } .noscript-warning { margin: 0 1px; background: #fff; padding: 22px 19px; border-top: 1px solid #c6d1ad; } .noscript-warning p { /* Copied from bootstrap .alert.alert-error */ color: #b94a48; background: #f2dede; border: 1px solid #eed3d7; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); border-radius: 4px; padding: 14px 14px; margin: 0; text-align: center; } .nav-search-box { display: block; float: left; } .nav-search-box .search-form { display: block; position: relative; z-index: 1000; } .nav-search-box .search-input { border: 1px solid #dddddd; border-radius: 2px; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 14px; font-style: normal; height: 29px; margin: 8px 0 0 0; padding: 1px 0 0 30px; width: 360px; } .nav-search-box .search-input *::-webkit-input-placeholder { color: #cccccc; } .nav-search-box .search-input *::-moz-placeholder { /* FF 19+ */ color: #cccccc; opacity: 1; } .nav-search-box .search-input *:-ms-input-placeholder { /* IE 10+ */ color: #cccccc; } .nav-search-box .input-wrapper { padding: 0 15px; } .nav-search-box .input-wrapper .icon-search { font-size: 16px; left: 25px; top: 11px; color: #aaa; position: absolute; } @media screen and (max-width: 1150px) { .nav-search-box .search-input { width: 250px; } } @media screen and (max-width: 1050px) { .nav-search-box .search-input { width: 200px; } } @media screen and (max-width: 700px) { .nav-search-box { visibility: hidden; } } .nav-search-box .search-form .search-input { width: 100%; } .nav-search-box.in-react-header { -webkit-flex: 1; -ms-flex: 1; flex: 1; } .nav-search-box.in-react-header .search-results-popup { margin-top: 9px; } /** * Fancy footer! Only the headings are usually visible, and then the user can * click on the headings to scroll + reveal the rest of the footer */ .push { height: 28px; } #end-of-page-spacer { height: 48px; } .absolute { position: absolute; } .ka-toggle { display: inline-block; line-height: 22px; border-radius: 20px; background: #fdfdfd; overflow: hidden; vertical-align: middle; } .ka-toggle a:first-child { border-radius: 20px 0 0 20px; } .ka-toggle a:last-child { border-radius: 0 20px 20px 0; border-left-width: 0; } .ka-toggle a { display: inline-block; border: 1px solid #aaaaaa; color: #aaaaaa; font-weight: bold; text-decoration: none; padding: 2px 12px; } .ka-toggle a:hover { background-color: #f3f3f3; } .ka-toggle a.active { background-color: #aaaaaa; color: #ffffff; box-shadow: inset -1px 1px 4px 0px rgba(0, 0, 0, 0.2); } .ka-toggle a.disabled { color: #eee; } .ka-toggle a.disabled:hover { background-color: inherit; } .responsive-nav-menu { background: white; display: block; width: 100%; } .flex-spring { -webkit-flex: 1; -ms-flex: 1; flex: 1; } /** * Styles for the domain/subjects dropdown menu in the header, whose toggle * text started as "watch", changed to "learn", and is now "subjects". * TODO(marcia): Currently reorganizing / cleaning up our styles for easier * animationability, I'll be getting rid of obtuse references like "watch-link" */ .topic-browser-menu.dropdown-menu a { white-space: normal; } .topic-browser-menu.dropdown-menu > li.hover-active, .topic-browser-menu.dropdown-menu > li.hover-active:hover { background-color: #f7f7f7; border-color: transparent; } .topic-browser-menu.dropdown-menu > li.hover-active > a, .topic-browser-menu.dropdown-menu > li.hover-active:hover > a { border-color: #f7f7f7; color: #444444; font-weight: bold; text-shadow: none; } .topic-browser-menu.dropdown-menu > li:hover { background-color: #fdfdfd; border-color: transparent; } .topic-browser-menu.dropdown-menu > li:hover > a { border-color: #fdfdfd; color: #444444; font-weight: bold; text-shadow: none; } .topic-browser-menu { box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5); font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; left: 0; position: absolute; text-transform: none; top: 45px; /** * This causes position: absolute div.sub-menu-custom to orient * itself relative to ul.dropdown-menu and thus top aligned. */ } body.lang-use-rtl .topic-browser-menu .icon-chevron-right { display: none; } body.lang-use-rtl .topic-browser-menu .icon-chevron-left { display: block; } .topic-browser-menu .dropdown-menu { border-color: #999999; /* override. */ } .topic-browser-menu > li { position: static; } .topic-browser-menu > li > a { padding: 9px 13px; } .topic-browser-menu li > a { font-size: 14px; line-height: 18px; width: 210px; } .topic-browser-menu li.has-submenu > a { cursor: default; } .topic-browser-menu .icon-chevron-right, .topic-browser-menu .icon-chevron-left { color: #aaaaaa; font-size: 10px; line-height: 36px; position: absolute; right: 10px; top: 0; } .topic-browser-menu .icon-chevron-right.icon-chevron-left, .topic-browser-menu .icon-chevron-left.icon-chevron-left { display: none; } .topic-browser-menu li:hover > .icon-chevron-right { color: #ffffff; } .topic-browser-menu li > .sub-menu-custom { /** * .dropdown-menu's have a box shadow, which we move to the * right for a sub menu. */ border-width: 0; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: 2px 5px 8px rgba(0, 0, 0, 0.5); min-height: 100%; padding: 1px 10px; position: absolute; top: -1px; right: auto; bottom: auto; left: 236px; width: 570px; } .topic-browser-menu li > .sub-menu-custom .submenu-title { font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 24px; border-bottom: 1px solid #ffffff; margin-left: 8px; padding: 17px 0 7px; /* Override the default link behavior for "Computer Science" in the sub menu, which is our only submenu title that is also a link. TODO(marcia): What extra styles might we need to make it look more like a link so people know to click there? */ } .topic-browser-menu li > .sub-menu-custom .submenu-title .topic-link { margin-left: -5px; padding: 0 5px; } .topic-browser-menu li > .sub-menu-custom .submenu-title .topic-link:hover { background: #46a8bf; } .topic-browser-menu li > .sub-menu-custom .submenu-title > a { color: #ffffff; } .topic-browser-menu li > .sub-menu-custom .submenu-title { color: #ffffff; } .topic-browser-menu li > .sub-menu-custom .grade-group-header, .topic-browser-menu li > .sub-menu-custom .subjects-header { margin: 15px 8px 4px; } .topic-browser-menu li > .sub-menu-custom .art-history-header { margin-top: 31px; } .topic-browser-menu li > .sub-menu-custom .partner-content-header { margin-top: 19px; } .topic-browser-menu li > .sub-menu-custom .grade-group .secondary-children { clear: none; float: left; width: 48.93%; } .topic-browser-menu li > .sub-menu-custom .grade-group .secondary-children:nth-child(2n+1) { clear: both; } .topic-browser-menu li > .sub-menu-custom.sub-menu-custom.computing li, .topic-browser-menu li > .sub-menu-custom.sub-menu-custom .sat li { width: 45%; } .topic-browser-menu li > .sub-menu-custom.sub-menu-custom.computing li a, .topic-browser-menu li > .sub-menu-custom.sub-menu-custom .sat li a { font-size: 15px; } .topic-browser-menu li > .sub-menu-custom.sub-menu-custom.computing li a p, .topic-browser-menu li > .sub-menu-custom.sub-menu-custom .sat li a p { font-size: 12px; margin-top: 10px; opacity: 0.9; } .topic-browser-menu li > .sub-menu-custom.sub-menu-custom.computing li:first-of-type, .topic-browser-menu li > .sub-menu-custom.sub-menu-custom .sat li:first-of-type { margin-right: 20px; } .topic-browser-menu li > .sub-menu-custom .grade-group-header strong, .topic-browser-menu li > .sub-menu-custom .subjects-header strong { color: #fff; font-size: 13px; opacity: 0.5; text-transform: uppercase; } .topic-browser-menu li > .sub-menu-custom .subjects-header a { color: inherit; } .topic-browser-menu li > .sub-menu-custom .menulink, .topic-browser-menu li > .sub-menu-custom .menulink:link, .topic-browser-menu li > .sub-menu-custom .menulink:visited { color: #ffffff; font: 13px/1.3 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; width: auto; } .topic-browser-menu li > .sub-menu-custom .menulink:hover, .topic-browser-menu li > .sub-menu-custom .topic-link:hover { background: #4d6779; } .topic-browser-menu li > .sub-menu-custom.science .menulink:hover, .topic-browser-menu li > .sub-menu-custom.science .topic-link:hover { background: #9d4a5a; } .topic-browser-menu li > .sub-menu-custom.humanities .menulink:hover, .topic-browser-menu li > .sub-menu-custom.humanities .topic-link:hover { background: #c13b31; } .topic-browser-menu li > .sub-menu-custom.economics-finance-domain .menulink:hover, .topic-browser-menu li > .sub-menu-custom.economics-finance-domain .topic-link:hover { background: #bf7b34; } .topic-browser-menu li > .sub-menu-custom.cs .menulink:hover, .topic-browser-menu li > .sub-menu-custom.cs .topic-link:hover { background: #53893e; } .topic-browser-menu li > .sub-menu-custom.hour-of-code .menulink:hover, .topic-browser-menu li > .sub-menu-custom.hour-of-code .topic-link:hover { background: #53893e; } .topic-browser-menu li > .sub-menu-custom.computer-programming .menulink:hover, .topic-browser-menu li > .sub-menu-custom.computer-programming .topic-link:hover { background: #53893e; } .topic-browser-menu li > .sub-menu-custom.computing .menulink:hover, .topic-browser-menu li > .sub-menu-custom.computing .topic-link:hover { background: #53893e; } .topic-browser-menu li > .sub-menu-custom.partner-content .menulink:hover, .topic-browser-menu li > .sub-menu-custom.partner-content .topic-link:hover { background: #2c8d7b; } .topic-browser-menu li > .sub-menu-custom.math .menulink:hover, .topic-browser-menu li > .sub-menu-custom.math .topic-link:hover { background: #46a8bf; } .topic-browser-menu li > .sub-menu-custom.test-prep .menulink:hover, .topic-browser-menu li > .sub-menu-custom.test-prep .topic-link:hover { background: #7e5f8e; } .topic-browser-menu li > .sub-menu-custom li.level1 { clear: none; float: left; width: 32%; } .topic-browser-menu li > .sub-menu-custom li.level1:nth-child(3n + 1) { clear: both; } .topic-browser-menu li > .sub-menu-custom .english-homepage-link { bottom: 17px; position: absolute; } .topic-browser-menu li > .sub-menu-custom .english-homepage-link a { padding: 5px 8px; } .topic-browser-mission-percentage { display: inline-block; opacity: 0.5; width: 38px; } #top-header-container.athena-big-menu .sitewide-navigation ul.topic-browser-menu { border: 0; box-shadow: none; top: 70px; } #top-header-container.athena-big-menu .sitewide-navigation ul.topic-browser-menu li > .sub-menu-custom { box-shadow: none; padding-top: 15px; top: -25px; } #top-header-container.athena-big-menu .sitewide-navigation ul.topic-browser-menu .dropdown-menu { border-bottom: 0; } #top-header-container.athena-big-menu .sitewide-navigation ul.topic-browser-menu .dropdown-menu.partner-content { overflow-y: auto; } /** * Styles responsible for the illusion of the learn menu's wingspan reaching * across to the edges of the window with the white + domain themed bg colors. */ .wide-learn-menu-background-container { background: #ffffff; box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15); height: 500px; left: 0; min-width: 1000px; position: absolute; right: 0; } .wide-learn-menu-background-container .wide-learn-menu-background { background: defaultDomainColor; height: 500px; } .wide-learn-menu-background-container .wide-learn-menu-background { background: #314453; left: 50%; position: absolute; right: 0; } .tutorial-outer-wrapper .wide-learn-menu-background-container .wide-learn-menu-background { left: 420px; } .wide-learn-menu-background-container.science .wide-learn-menu-background { background: #94424f; left: 50%; position: absolute; right: 0; } .tutorial-outer-wrapper .wide-learn-menu-background-container.science .wide-learn-menu-background { left: 420px; } .wide-learn-menu-background-container.humanities .wide-learn-menu-background { background: #ad3434; left: 50%; position: absolute; right: 0; } .tutorial-outer-wrapper .wide-learn-menu-background-container.humanities .wide-learn-menu-background { left: 420px; } .wide-learn-menu-background-container.economics-finance-domain .wide-learn-menu-background { background: #b77033; left: 50%; position: absolute; right: 0; } .tutorial-outer-wrapper .wide-learn-menu-background-container.economics-finance-domain .wide-learn-menu-background { left: 420px; } .wide-learn-menu-background-container.cs .wide-learn-menu-background { background: #437a39; left: 50%; position: absolute; right: 0; } .tutorial-outer-wrapper .wide-learn-menu-background-container.cs .wide-learn-menu-background { left: 420px; } .wide-learn-menu-background-container.hour-of-code .wide-learn-menu-background { background: #437a39; left: 50%; position: absolute; right: 0; } .tutorial-outer-wrapper .wide-learn-menu-background-container.hour-of-code .wide-learn-menu-background { left: 420px; } .wide-learn-menu-background-container.computer-programming .wide-learn-menu-background { background: #437a39; left: 50%; position: absolute; right: 0; } .tutorial-outer-wrapper .wide-learn-menu-background-container.computer-programming .wide-learn-menu-background { left: 420px; } .wide-learn-menu-background-container.computing .wide-learn-menu-background { background: #437a39; left: 50%; position: absolute; right: 0; } .tutorial-outer-wrapper .wide-learn-menu-background-container.computing .wide-learn-menu-background { left: 420px; } .wide-learn-menu-background-container.partner-content .wide-learn-menu-background { background: #218270; left: 50%; position: absolute; right: 0; } .tutorial-outer-wrapper .wide-learn-menu-background-container.partner-content .wide-learn-menu-background { left: 420px; } .wide-learn-menu-background-container.math .wide-learn-menu-background { background: #1c758a; left: 50%; position: absolute; right: 0; } .tutorial-outer-wrapper .wide-learn-menu-background-container.math .wide-learn-menu-background { left: 420px; } .wide-learn-menu-background-container.test-prep .wide-learn-menu-background { background: #644172; left: 50%; position: absolute; right: 0; } .tutorial-outer-wrapper .wide-learn-menu-background-container.test-prep .wide-learn-menu-background { left: 420px; } .wide-learn-menu-background-container.on-welcome { height: 440px; } .wide-learn-menu-background-container.on-welcome .wide-learn-menu-background { height: 440px; } .athena-big-menu .level0 { border-bottom: 1px solid transparent; border-top: 1px solid transparent; } .athena-big-menu .level0 .level0--menulink { border-bottom: 0 !important; border-left: 5px solid #dddddd !important; border-top: 0 !important; } .athena-big-menu .level0.science .level0--menulink { border-left: 5px solid #94424f !important; } .athena-big-menu .level0.humanities .level0--menulink { border-left: 5px solid #ad3434 !important; } .athena-big-menu .level0.economics-finance-domain .level0--menulink { border-left: 5px solid #b77033 !important; } .athena-big-menu .level0.cs .level0--menulink { border-left: 5px solid #437a39 !important; } .athena-big-menu .level0.hour-of-code .level0--menulink { border-left: 5px solid #437a39 !important; } .athena-big-menu .level0.computer-programming .level0--menulink { border-left: 5px solid #437a39 !important; } .athena-big-menu .level0.computing .level0--menulink { border-left: 5px solid #437a39 !important; } .athena-big-menu .level0.partner-content .level0--menulink { border-left: 5px solid #218270 !important; } .athena-big-menu .level0.math .level0--menulink { border-left: 5px solid #1c758a !important; } .athena-big-menu .level0.test-prep .level0--menulink { border-left: 5px solid #644172 !important; } .sub-menu-custom { height: 500px; } .on-welcome > .dropdown-menu { display: block; } .on-welcome .sub-menu-custom { height: 440px; } .on-welcome .has-divider { display: none; } .on-welcome .level0 { display: none; } .on-welcome .level0.science { display: block; } .on-welcome .level0.humanities { display: block; } .on-welcome .level0.economics-finance-domain { display: block; } .on-welcome .level0.cs { display: block; } .on-welcome .level0.hour-of-code { display: block; } .on-welcome .level0.computer-programming { display: block; } .on-welcome .level0.computing { display: block; } .on-welcome .level0.partner-content { display: block; } .on-welcome .level0.math { display: block; } .on-welcome .level0.test-prep { display: block; } .on-welcome .topic-browser-menu li > .sub-menu-custom .art-history-header { margin-top: 15px; } .hacked-rsat-link { display: none; } .hacked-rsat-link.show { display: block; } .typeahead-search input[type=text] { padding: 0 0 0 25px; border: 1px solid #C6D1AD; color: #000; vertical-align: top; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 12px; } .typeahead-search input[type=text].tt-hint { color: #aaaaaa; } .typeahead-search .dropdown-menu.new-typeahead { width: 100%; padding-top: 8px; padding-bottom: 0; } .typeahead-search .dropdown-menu.new-typeahead .typeahead-result { -moz-box-sizing: border-box; box-sizing: border-box; display: block; text-decoration: none; width: 100%; padding: 4px 2px 2px 8px; } .typeahead-search .dropdown-menu.new-typeahead .typeahead-result { background: #ffffff; color: #444444; } .typeahead-search .dropdown-menu.new-typeahead .typeahead-result .scented-content { overflow: hidden; padding: 5px 10px 5px 10px; text-overflow: ellipsis; white-space: nowrap; } .typeahead-search .dropdown-menu.new-typeahead .typeahead-result .scented-content .highlighted { font-weight: bold; } .typeahead-search .dropdown-menu.new-typeahead .tt-cursor .typeahead-result { background: #2c3747; color: #ffffff; } .typeahead-search .dropdown-menu.new-typeahead .subway-icon { display: inline-block; float: left; height: auto; position: static; width: auto; } .typeahead-search .dropdown-menu.new-typeahead .subway-icon .status { display: inline-block; position: static; margin: 0; } .typeahead-search .dropdown-menu.new-typeahead .subway-icon .pipe { display: none; } .typeahead-search .dropdown-menu.new-typeahead .typeahead-icon { display: inline-block; float: left; font-size: 18px; padding: 5px 6px 0px 5px; position: static; } .typeahead-search .dropdown-menu.new-typeahead .typeahead-footer { border-top: 1px dotted #cccccc; } .typeahead-search .dropdown-menu.legacy-typeahead { background: #ffffff url(../www.khanacademy.org/images/typeahead-search-bg.png) repeat-y 0 0; width: 100%; padding-top: 8px; padding-bottom: 0; } .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result, .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result-kind { display: block; float: left; position: relative; text-decoration: none; } .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result-content, .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result-footer { -moz-box-sizing: border-box; box-sizing: border-box; margin-left: -71px; padding-left: 71px; width: 100%; } .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result { background: #ffffff; color: #444444; } .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result.typeahead-result-footer { border-top: 1px dotted #cccccc; } .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result.typeahead-result-footer .scented-content { margin-left: 10px; } .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result.typeahead-result-footer-only-result { border-top: 0; } .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result .scented-content { margin-left: 40px; padding: 5px 10px 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result .icon-book { position: absolute; font-size: 20px; margin-left: 10px; margin-top: 5px; opacity: 0.8; } .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result .avatar-small { position: absolute; width: 25px; height: 25px; margin-left: 10px; margin-top: 5px; opacity: 0.8; } .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result-kind { z-index: 2; width: 71px; padding: 5px; background: #eeeeee; border-color: transparent; color: #444444; border-right: 1px solid #cccccc; text-transform: capitalize; text-align: right; -moz-box-sizing: border-box; box-sizing: border-box; } .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result-kind.last { padding-bottom: 15px; } .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result-kind.typeahead-result-kind-footer { border-top: 1px solid #eeeeee; } .typeahead-search .dropdown-menu.legacy-typeahead .typeahead-result-kind.typeahead-result-kind-footer-only-result { border-top: 0; } .typeahead-search .dropdown-menu.legacy-typeahead .tt-is-under-cursor .typeahead-result { background: #2c3747; color: #ffffff; } .typeahead-search .dropdown-menu.legacy-typeahead .subway-icon .pipe { display: none; } /** * Styles for a throbber made from a 9-block grid. * ------------- * | 0 | 1 | 2 | * | 7 | 8 | 3 | * | 6 | 5 | 4 | * ------------- * The result of all these animations is to have a dark blue block * (@colorProficient) move clockwise from numbers 0 through 7, with a light * blue block (@colorPracticed) trailing it. It makes one full cycle every * second, with the other blocks at @grayLighter. * * Like or hate this? Blame Marcia + Jason. :) */ .throbber-grid { margin: auto; position: relative; width: 96px; } .throbber-fallback { left: 0; position: absolute; top: 0; } .throbber-block { background: #dddddd; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; float: left; height: 30px; width: 30px; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; } .throbber-block.block-2, .throbber-block.block-3, .throbber-block.block-4 { border-right: 0; } .throbber-block.block-4, .throbber-block.block-5, .throbber-block.block-6 { border-bottom: 0; } .block-8 { background: #fdfdfd; } .block-0 { -webkit-animation-name: block0; animation-name: block0; } .block-1 { -webkit-animation-name: block1; animation-name: block1; } .block-2 { -webkit-animation-name: block2; animation-name: block2; } .block-3 { -webkit-animation-name: block3; animation-name: block3; } .block-4 { -webkit-animation-name: block4; animation-name: block4; } .block-5 { -webkit-animation-name: block5; animation-name: block5; } .block-6 { -webkit-animation-name: block6; animation-name: block6; } .block-7 { -webkit-animation-name: block7; animation-name: block7; } /* Keyframes */ @-webkit-keyframes block0 { 0% { background: #1c758a; } 12.5% { background: #9cdceb; } 25% { background: #dddddd; } 87.5% { background: #dddddd; } 100% { background: #1c758a; } } @keyframes block0 { 0% { background: #1c758a; } 12.5% { background: #9cdceb; } 25% { background: #dddddd; } 87.5% { background: #dddddd; } 100% { background: #1c758a; } } @-webkit-keyframes block1 { 0% { background: #dddddd; } 12.5% { background: #1c758a; } 25% { background: #9cdceb; } 37.5% { background: #dddddd; } } @keyframes block1 { 0% { background: #dddddd; } 12.5% { background: #1c758a; } 25% { background: #9cdceb; } 37.5% { background: #dddddd; } } @-webkit-keyframes block2 { 0% { background: #dddddd; } 12.5% { background: #dddddd; } 25% { background: #1c758a; } 37.5% { background: #9cdceb; } 50% { background: #dddddd; } } @keyframes block2 { 0% { background: #dddddd; } 12.5% { background: #dddddd; } 25% { background: #1c758a; } 37.5% { background: #9cdceb; } 50% { background: #dddddd; } } @-webkit-keyframes block3 { 0% { background: #dddddd; } 12.5% { background: #dddddd; } 25% { background: #dddddd; } 37.5% { background: #1c758a; } 50% { background: #9cdceb; } 62.5% { background: #dddddd; } } @keyframes block3 { 0% { background: #dddddd; } 12.5% { background: #dddddd; } 25% { background: #dddddd; } 37.5% { background: #1c758a; } 50% { background: #9cdceb; } 62.5% { background: #dddddd; } } @-webkit-keyframes block4 { 0% { background: #dddddd; } 12.5% { background: #dddddd; } 25% { background: #dddddd; } 37.5% { background: #dddddd; } 50% { background: #1c758a; } 62.5% { background: #9cdceb; } 75% { background: #dddddd; } } @keyframes block4 { 0% { background: #dddddd; } 12.5% { background: #dddddd; } 25% { background: #dddddd; } 37.5% { background: #dddddd; } 50% { background: #1c758a; } 62.5% { background: #9cdceb; } 75% { background: #dddddd; } } @-webkit-keyframes block5 { 0% { background: #dddddd; } 12.5% { background: #dddddd; } 25% { background: #dddddd; } 37.5% { background: #dddddd; } 50% { background: #dddddd; } 62.5% { background: #1c758a; } 75% { background: #9cdceb; } 87.5% { background: #dddddd; } } @keyframes block5 { 0% { background: #dddddd; } 12.5% { background: #dddddd; } 25% { background: #dddddd; } 37.5% { background: #dddddd; } 50% { background: #dddddd; } 62.5% { background: #1c758a; } 75% { background: #9cdceb; } 87.5% { background: #dddddd; } } @-webkit-keyframes block6 { 0% { background: #dddddd; } 12.5% { background: #dddddd; } 25% { background: #dddddd; } 37.5% { background: #dddddd; } 50% { background: #dddddd; } 62.5% { background: #dddddd; } 75% { background: #1c758a; } 87.5% { background: #9cdceb; } 100% { background: #dddddd; } } @keyframes block6 { 0% { background: #dddddd; } 12.5% { background: #dddddd; } 25% { background: #dddddd; } 37.5% { background: #dddddd; } 50% { background: #dddddd; } 62.5% { background: #dddddd; } 75% { background: #1c758a; } 87.5% { background: #9cdceb; } 100% { background: #dddddd; } } @-webkit-keyframes block7 { 0% { background: #dddddd; } 12.5% { background: #dddddd; } 25% { background: #dddddd; } 37.5% { background: #dddddd; } 50% { background: #dddddd; } 62.5% { background: #dddddd; } 75% { background: #dddddd; } 87.5% { background: #1c758a; } 100% { background: #9cdceb; } } @keyframes block7 { 0% { background: #dddddd; } 12.5% { background: #dddddd; } 25% { background: #dddddd; } 37.5% { background: #dddddd; } 50% { background: #dddddd; } 62.5% { background: #dddddd; } 75% { background: #dddddd; } 87.5% { background: #1c758a; } 100% { background: #9cdceb; } } #profile-throbber { display: none; height: 90px; padding-top: 130px; position: absolute; width: 100%; z-index: 11 !important; } #profile-gif-throbber { background-image: url(../www.khanacademy.org/images/progress-animated.gif); border-radius: 5px; display: none; height: 22px; left: 50%; margin-left: -200px; position: absolute; top: 100px; width: 400px; } /** * Energy points badge look. Should be used wherever we display energy points * * TODO(stephanie): Converted from energy-points.css and hence needs to be * less-ified/have variables extracted out. */ .info-box #related-video-list .video-energy-points, #user-info .energy-points-badge, .energy-points-badge { background: #005a88; float: right; line-height: 18px; text-align: center; padding: 2px 5px 3px; color: white; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; text-shadow: none; border-radius: 5px; } .infinity-energy-points { font-family: sans-serif; font-size: 24px; vertical-align: middle; } /** * For hover card tooltips * * TODO(stephanie): Converted from base-hovercard.css and hence needs to be * less-ified/have variables extracted out. */ .qtip.custom-override { max-width: 450px; } .qtip-default.custom-override { border-color: transparent; background-color: transparent; } .qtip-default.custom-override .qtip-tip { /* Because qtip seems to add inline styles in IE */ display: none !important; } .qtip-default.custom-override .qtip-content { border: none; background-color: transparent; padding: 0 0 10px 0; top: -7px; } .hover-card-triangle { position: relative; height: 10px; z-index: 1; } .hover-card-triangle:before { display: block; position: absolute; left: 26px; top: 2px; content: " "; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #BBB; } .hover-card-triangle:after { display: block; position: absolute; left: 26px; top: 3px; content: " "; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #FFF; } .hover-card-triangle.right:after, .hover-card-triangle.right:before { left: auto; right: 26px; } .hover-card-container { width: 450px; line-height: normal; } .hover-card-message { padding: 0 0 5px 5px; font-size: 115%; line-height: 20px; } .hover-card-content-container { position: relative; background: #FFF; } .hover-card-content { min-height: 60px; padding: 10px; position: relative; } .hover-card-content .private { visibility: hidden; } .hover-card-content .user-info { word-wrap: break-word; margin-left: 70px; margin-right: 110px; } .hover-card-content .user-info img.avatar { float: left; margin-left: -70px; height: 60px; width: 60px; } .hover-card-content .user-info .profile-link { text-decoration: none; } .hover-card-content .user-info .nickname-container { color: #999999; font-size: 16px; display: inline-block; text-overflow: ellipsis; max-width: 250px; overflow: hidden; white-space: nowrap; } .hover-card-content .user-info .nickname { color: #000000; font-weight: bold; float: left; max-width: 170px; text-overflow: ellipsis; overflow: hidden; } .hover-card-content .user-info .nickname:hover { text-decoration: underline; } .hover-card-content .user-info .username { margin-left: 10px; text-overflow: ellipsis; } .hover-card-content .user-info .bio { color: #999999; font-size: 14px; line-height: 16px; } .hover-card-content .user-stats { position: absolute; right: 10px; } .hover-card-content .user-stats .badge-container { text-align: right; } .hover-card-content .user-stats .badge-container .badge-icon { width: 20px; height: 20px; margin-left: -2px; } .hover-card-content .user-stats .energy-points-badge { margin-top: 10px; } .hover-card-content .user-actions { position: absolute; right: 10px; bottom: 10px; } .task-preview { border: 2px solid #dddddd; border-radius: 4px; height: 60px; width: 60px; position: relative; } .task-preview img, .task-preview .video-thumbnail-container, .task-preview .thumbnail-transparent-black { border-radius: 2px; display: block; width: 60px; height: 60px; overflow: hidden; } .task-preview__mastery { background: #1c758a; border-color: #29abca; text-align: center; } .task-preview__mastery i { font-size: 48px; position: relative; line-height: 60px; } .task-preview.video-task .video-thumbnail-container { background-position: center; background-size: 178%; } .task-preview.video-task .thumbnail-transparent-black { background-color: black; opacity: 0.4; position: absolute; } .task-preview.video-task .play-icon-container { line-height: 60px; position: absolute; text-align: center; width: 100%; } .task-preview.video-task .play-icon-container i { color: #ffffff; font-size: 25px; text-shadow: 0 0 3px #555555; } /* * Styles for "guiders" JS library. * * Modified for use by Khan Academy. * Based on guiders.js v1.2.0: * * Released under the Apache License 2.0. * www.apache.org/licenses/LICENSE-2.0.html */ .guider { background: #FFF; box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15); position: absolute; outline: none; z-index: 1035; /* Rounded corners */ border-radius: 4px; /* End rounded corners */ } .guider_buttons { height: 36px; margin-top: 20px; position: relative; width: 100%; } .guider_content { margin: 20px; position: relative; } .guider_title { font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; font-size: 18px; } .guider_close { float: right; padding: 10px 0 0; } .x_button { font-size: 1.5em; color: #999999; cursor: pointer; height: 22px; line-height: 22px; position: relative; right: -7px; text-align: center; top: -40px; width: 22px; } .x_button.icon-border { border-width: 2px; border-radius: 3px; } .x_button:before { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; *margin-right: .3em; content: "\f00d"; } .x_button:hover { color: #444444; } .guider_description { color: #333; font-size: 13px; } .guider_button { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5ca9ff), color-stop(100%, #3d79c3)); background-color: #4A95E0; /* overruled by background gradient, in browsers where they exist */ border: solid 1px #4B5D7E; color: #FFF; cursor: pointer; display: inline-block; float: right; font-size: 90%; font-weight: bold; margin-left: 6px; min-width: 40px; padding: 3px 5px; text-align: center; text-decoration: none; /* Rounded corners */ border-radius: 2px; /* End rounded corners */ } #guider_overlay { background-color: #000; width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); z-index: 1030; } #guider_click_mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1032; } .guider_arrow { width: 42px; height: 42px; position: absolute; display: none; background-repeat: no-repeat; z-index: 1036; /** * For optimization, the arrows image is inlined in the css below. * * To use your own arrows image, replace this background-image with your own arrows. * It should have four arrows, top, right, left, and down. */ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAACqCAYAAADbc92DAAAACXBIWXMAAAsTAAALEwEAmpwYAAA4H2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMTQgNzkuMTUxNDgxLCAyMDEzLzAzLzEzLTEyOjA5OjE1ICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgICAgICAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMTQtMDctMDlUMTY6MTE6MTMtMDc6MDA8L3htcDpDcmVhdGVEYXRlPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNC0wNy0wOVQxNjoxNTo0OS0wNzowMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6TWV0YWRhdGFEYXRlPjIwMTQtMDctMDlUMTY6MTU6NDktMDc6MDA8L3htcDpNZXRhZGF0YURhdGU+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgICAgIDxwaG90b3Nob3A6Q29sb3JNb2RlPjM8L3Bob3Rvc2hvcDpDb2xvck1vZGU+CiAgICAgICAgIDx4bXBNTTpJbnN0YW5jZUlEPnhtcC5paWQ6ZGIyYjU1NzUtYTNhZi00MmRmLWE3NGEtMjY2OTY0NWRhN2M1PC94bXBNTTpJbnN0YW5jZUlEPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD54bXAuZGlkOmRiMmI1NTc1LWEzYWYtNDJkZi1hNzRhLTI2Njk2NDVkYTdjNTwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD54bXAuZGlkOmRiMmI1NTc1LWEzYWYtNDJkZi1hNzRhLTI2Njk2NDVkYTdjNTwveG1wTU06T3JpZ2luYWxEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06SGlzdG9yeT4KICAgICAgICAgICAgPHJkZjpTZXE+CiAgICAgICAgICAgICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0iUmVzb3VyY2UiPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6YWN0aW9uPmNyZWF0ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDpkYjJiNTU3NS1hM2FmLTQyZGYtYTc0YS0yNjY5NjQ1ZGE3YzU8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMTQtMDctMDlUMTY6MTE6MTMtMDc6MDA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAoTWFjaW50b3NoKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgPC9yZGY6bGk+CiAgICAgICAgICAgIDwvcmRmOlNlcT4KICAgICAgICAgPC94bXBNTTpIaXN0b3J5PgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyMDAwMC8xMDAwMDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT42NTUzNTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+NDI8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTcwPC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz5TtHEdAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAATuSURBVHja7N2/ayNHFAfw7+jHWZxkcxcSCIR05opwKa8KSQj3D4SrUoQQCKRRcocIuMt/cIZ0CmquvpDWCIMrgU+4sSFETiULR8agwsWKRV7ZGr0UmbX39MvS7uzum2MGVB0cH6SdmffevB0LIoIJIwNDhlAfEPOvNtNoNN4HkBVCZIQQgq1USvlXo9H4BMAagCwAQUTg9gER0Xg8dg4ODj4HcB9AHkCGJZSISErZPz09/RnABoB73LA3UH/0er2XHLFTUCIix3Feb29vf8wJOxNKRHR1dfW3wq6p9VawhBIRjUaj7tHR0WccVoSFUH9FODk5+TbtFeFOqD/SXhGWhvqTLC3sSlAiosvLyzdpTLKVof6KsLu7+zjJSRYK6k+y/f39L5KaZKGhSU+yyNCktl0tUH9FqFarHwHIxfHMaktFCoXCY8dxsrGlNzq+Tc/zjsvl8iMApbi+UWhE8n1GpZT9er3+lPWsTxIZGjqBXEti3w8FPTw8/AHAw6SQoaCtVusXAB+orTPLMihRyA/VT55PMuJfGtrtdn8LIHnGoxcXF3+miVwKygFJRBCLqniDweCgWCx+DWAAwAMwIqIxq/rocDj8Z2tr6zsOyLlBSVL7d6Rn9Pr6+owbcgqa9P4duuzIFXkDTSPICAVtt9svADzgiiQioNvt/gTgvaSDjJUXfPVzA8AVgBEAjsc4JOzJnW7o+fl5Wf3cLD+e570RQmwAwHqn03lODIfneceVSmVTTXTcA7DRbrdfcEMGtvK8/5yyws4KiqBm/Q327OzsV25If2eawjqO85oT8i1o2ti7YuDpPTUF7DKB+uwA4H/sWhLYZcPL+dHKLfbhYDBopom8CypUNHW/Uqlsep53nBZyITSAzQPYKJfLj3Rhw2QTdwesgcmlAxs25VkuutaEjZKXLZ8KTGCllP0kK9Sr5S0BbL1ef7oKttlsPouS4a6eZIXAquQxUhoeLiNcAasDGRq6LFYXMhJ0Ettqtb6PCxkZOon1U5pOp/Ncd2lITxXjFlva2dn5VJ2Jaq1facvrhRAZBc4AGAMY6yz8ai1ABPtPdTfO2kqJhVqohVqohVqohVqohVqohaYwctyBfh6WY470s1qRY47MAchXq9UH7DodJqsve3t7X0kp/2WNDBbfjECSKUgyBUmmIMkUJJmCJA7IZdtDjECSKUgyBUmmIMkUJJmCpJiRfvfEuo6mrzgDZwEg67purVgsfmOzUA2DAMhSqfRjv9//I/r/ltBk6vV6L1lOJqOWJ6MWfKO2UKOCkqgtSTAFa1ORdya5m4Wt1WpP5jUositAzOumhClYmIJlXXasVCqbfiM4y3YiVW3Oqgwh77ru72z7ntQhgw/OsG7QCnSmCdtJZqEWaqEWaqEWaqEWaqEWaqEW+g5AtR6IqaxR3B646Mscdb8hllUfAJAApK63xDIakTkABdd1X7mu+wpAAUBO/Vv0obNWFDyc1X05daynHDov+Y39KCbVV4Kx4nlRKi9ZI+ShVlRsoseEUd6xT/TgNfarFaCxiSW2yyoQwzVL2q//QIx3QUkp+7Va7QmiXqgSRDabzWdpXfazzKU/oW7PiIide0FwqsggNnBJ2szbEFNH+mM4HLaw4BJrFsgZEdcUlg3yrvCQFXIRFtyQ87AAsM4N6Y+37jtpNBpfckT6Q/3dkuJ/AwDY20Nfh0qBfgAAAABJRU5ErkJggg==); *background-image: url('guider_arrows.png'); } .guider_arrow_right { display: block; background-position: 0 0; right: -42px; } .guider_arrow_down { display: block; background-position: 0 -45px; bottom: -42px; } .guider_arrow_up { display: block; background-position: 0 -126px; top: -42px; } .guider_arrow_left { display: block; background-position: 2px -84px; left: -42px; } .ka_guider_button { display: inline-block; float: right; font-size: 90%; font-weight: bold; margin-left: 6px; min-width: 40px; padding: 3px 5px; text-align: center; text-decoration: none; } .guider-title-smaller { font-size: 16px; } .bring-above-guider-overlay { z-index: 1035; } #avatar-pic-guider .guider-avatar-img { float: left; margin: 0 10px 0 -10px; } #avatar-pic-guider .guider_title { margin-bottom: 10px; } #avatar-pic-guider .open-customizer-button { min-width: 110px; } #avatar-pic-guider .skip-customizer-button { margin-right: 8px; } .dashboard-intro .guider_content .guider_description { font-size: 14px; } .dashboard-intro-mini { font-size: 14px; line-height: 18px; margin: 0px; } .dashboard-intro-mini .guider_arrow_left { width: 30px; height: 30px; left: -30px; } .dashboard-intro-mini .guider_close, .dashboard-intro-mini .guider_title { display: none; } .dashboard-intro-mini .guider_content .guider_description { font-size: 14px; line-height: 18px; margin: 0px; } #pants-welcome { z-index: 1029; } .welcome-container { margin-top: 160px; -webkit-transition: margin 300ms; transition: margin 300ms; width: 900px; } .welcome-container.moved-up { margin-top: 0px; } .welcome-container .contents .avatar-onboarding-container { display: inline-block; float: left; margin-right: 240px; -webkit-transition: all 300ms; transition: all 300ms; } .welcome-container .contents .avatar-onboarding-container.hide-avatar-container { opacity: 0; } .welcome-container .contents .avatar-onboarding-container.shrink-avatar-container { width: 0; margin: 0; } .welcome-container .contents .pants-container .pants-halo { background: #fe6; border-radius: 100px; overflow: visible; position: relative; height: 200px; width: 200px; text-align: center; } .welcome-container .contents .pants-container .pants-halo .pants { -webkit-transition-duration: 900ms; transition-duration: 900ms; position: absolute; } .welcome-container .contents .pants-container .pants-halo .pants.pants-enter { opacity: 0; } .welcome-container .contents .pants-container .pants-halo .pants.pants-enter-active { opacity: 1; } .welcome-container .contents .pants-container .pants-halo .pants.pants-leave { opacity: 1; } .welcome-container .contents .pants-container .pants-halo .pants.pants-leave-active { opacity: 0; } .welcome-container .contents .pants-container .pants-halo .idle-pants { left: -50px; top: -80px; } .welcome-container .contents .pants-container .pants-halo .awake-pants { top: -20px; left: 30px; } .welcome-container .contents .waiting-card { border-radius: 5px; border: 3px dashed #dddddd; -moz-box-sizing: border-box; box-sizing: border-box; color: #999999; line-height: 1.4; padding: 50px 50px 50px 100px; width: 190px; height: 400px; height: 190px; width: 400px; } .welcome-container .contents .waiting-card .waiting-title { font-size: 18px; } .welcome-container .contents .waiting-card .waiting-subtitle { font-size: 14px; } #topic-selector-splash.full_selector { padding-top: 80px; } #topic-selector-splash.full_selector .role-picker { text-align: center; margin-top: 0; margin-bottom: -30px; font-size: 16px; } #topic-selector-splash.full_selector .role-picker a { color: #76a005; } #topic-selector-splash.full_selector #full-selector-splash-title { font-size: 24px; text-align: center; } #topic-selector-splash.full_selector #full-selector-tabs-wrapper { background: #ffffff; font-size: 16px; height: 478px; margin: 60px auto 0; width: 950px; } #topic-selector-splash.full_selector #full-selector-tags-list { background: #f7f7f7; float: left; height: 100%; width: 200px; } #topic-selector-splash.full_selector .full-selector-tab-row { border-bottom: 3px solid #ffffff; overflow: hidden; position: relative; } #topic-selector-splash.full_selector .full-selector-tab { border-left: 14px solid #eeeeee; color: #999999; padding: 0 25px; } #topic-selector-splash.full_selector .full-selector-tab div { display: table-cell; height: 77px; vertical-align: middle; } #topic-selector-splash.full_selector .full-selector-tab.active, #topic-selector-splash.full_selector .full-selector-tab:hover { color: #ffffff; font-weight: bold; } #topic-selector-splash.full_selector .full-selector-tab:hover { cursor: pointer; } #topic-selector-splash.full_selector #full-selector-tab-math { border-left-color: #1c758a; } #topic-selector-splash.full_selector #full-selector-tab-math.active, #topic-selector-splash.full_selector #full-selector-tab-math:hover { background: #1c758a; } #topic-selector-splash.full_selector #full-selector-tab-science { border-left-color: #94424f; } #topic-selector-splash.full_selector #full-selector-tab-science.active, #topic-selector-splash.full_selector #full-selector-tab-science:hover { background: #94424f; } #topic-selector-splash.full_selector #full-selector-tab-humanities { border-left-color: #ad3434; } #topic-selector-splash.full_selector #full-selector-tab-humanities.active, #topic-selector-splash.full_selector #full-selector-tab-humanities:hover { background: #ad3434; } #topic-selector-splash.full_selector #full-selector-tab-economics { border-left-color: #314453; } #topic-selector-splash.full_selector #full-selector-tab-economics.active, #topic-selector-splash.full_selector #full-selector-tab-economics:hover { background: #314453; } #topic-selector-splash.full_selector #full-selector-tab-computing { border-left-color: #437a39; } #topic-selector-splash.full_selector #full-selector-tab-computing.active, #topic-selector-splash.full_selector #full-selector-tab-computing:hover { background: #437a39; } #topic-selector-splash.full_selector #full-selector-tab-other { border-left-color: #218270; } #topic-selector-splash.full_selector #full-selector-tab-other.active, #topic-selector-splash.full_selector #full-selector-tab-other:hover { background: #218270; } #topic-selector-splash.full_selector .full-selector-tab-inner { border: 8px solid #ffffff; border-bottom-width: 11px; -moz-box-sizing: border-box; box-sizing: border-box; height: 480px; margin-left: 200px; overflow-x: hidden; overflow-y: auto; padding: 40px 0 0 50px; } #topic-selector-splash.full_selector .full-selector-tab-inner h2 { color: #999999; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 17px; letter-spacing: 1px; margin-bottom: 0; margin-top: 44px; text-transform: uppercase; } #topic-selector-splash.full_selector .full-selector-tab-inner h2:first-child { margin-top: 0; } #topic-selector-splash.full_selector .full-selector-tab-inner .full-selector-tab-column { display: inline-block; margin-right: 20px; vertical-align: top; width: 190px; } #topic-selector-splash.full_selector .full-selector-tab-inner .full-selector-tab-column:last-child { margin-right: 0; } #topic-selector-splash.full_selector .full-selector-tab-inner h2 + .full-selector-option { margin-top: 16px; } #topic-selector-splash.full_selector .full-selector-tab-inner .full-selector-option { margin-top: 12px; } #topic-selector-splash.full_selector .full-selector-tab-inner .full-selector-option a { text-decoration: none; } #topic-selector-splash.full_selector .full-selector-tab-inner .full-selector-option a:hover { text-decoration: underline; } #topic-selector-splash.full_selector #full-selector-tab-inner-computing .full-selector-tab-column, #topic-selector-splash.full_selector #full-selector-tab-inner-other .full-selector-tab-column { width: 310px; } #topic-selector-splash.full_selector .full-selector-option.main { font-weight: bold; } #topic-selector-splash.full_selector #full-selector-tab-inner-math .full-selector-option a { color: #1c758a; } #topic-selector-splash.full_selector #full-selector-tab-inner-science .full-selector-option a { color: #94424f; } #topic-selector-splash.full_selector #full-selector-tab-inner-humanities .full-selector-option a { color: #ad3434; } #topic-selector-splash.full_selector #full-selector-tab-inner-economics .full-selector-option a { color: #314453; } #topic-selector-splash.full_selector #full-selector-tab-inner-economics h2 { height: 32px; } #topic-selector-splash.full_selector #full-selector-tab-inner-economics .full-selector-option { height: 27px; } #topic-selector-splash.full_selector #full-selector-tab-inner-computing .full-selector-option a { color: #437a39; } #topic-selector-splash.full_selector #full-selector-tab-inner-other .full-selector-option a { color: #218270; } .task-container .centered { text-align: center; } #coach-learning-home-modal { padding: 30px 20px 0; } #coach-learning-home-modal .guider_title { text-align: center; } .kui-button { background: transparent; border: 1px solid; border-radius: 19px; -moz-box-sizing: border-box; box-sizing: border-box; font: inherit; line-height: 18px; margin: 5px 0; padding: 10px 30px; position: relative; } .kui-button:hover { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .kui-button:not(.kui-button-disabled) { cursor: pointer; } .kui-button-borderless { border: none; } .kui-button-small { padding: 7px 20px; margin: 0; } .kui-button-borderless { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); } .kui-button-primary.kui-button-plain:not(.kui-button-white) { color: #56861f; } .kui-button-primary.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-primary.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-primary.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-primary.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(86, 134, 31, 0.15); color: #56861f; } .kui-button-primary.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(86, 134, 31, 0.15); color: #56861f; } .kui-button-primary.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #21340c; } .kui-button-primary.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-primary.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #56861f; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-primary.kui-button-submit:not(.kui-button-white) { background: #56861f; background: -webkit-linear-gradient(#70b029, #56861f); background: linear-gradient(#70b029, #56861f); color: #ffffff; } .kui-button-primary.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-primary.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-primary.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #49721a; background: -webkit-linear-gradient(#639b24, #49721a); background: linear-gradient(#639b24, #49721a); color: #ffffff; } .kui-button-primary.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #49721a; background: -webkit-linear-gradient(#49721a, #639b24); background: linear-gradient(#49721a, #639b24); color: #ffffff; } .kui-button-primary.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-primary.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #56861f; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-primary.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #56861f; } .kui-button-primary.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-primary.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-primary.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #56861f; } .kui-button-primary.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #56861f; } .kui-button-primary.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-primary.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-secondary.kui-button-plain:not(.kui-button-white) { color: #283743; } .kui-button-secondary.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-secondary.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-secondary.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-secondary.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(40, 55, 67, 0.15); color: #283743; } .kui-button-secondary.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(40, 55, 67, 0.15); color: #283743; } .kui-button-secondary.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #020203; } .kui-button-secondary.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-secondary.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #283743; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-secondary.kui-button-submit:not(.kui-button-white) { background: #283743; background: -webkit-linear-gradient(#445e73, #283743); background: linear-gradient(#445e73, #283743); color: #ffffff; } .kui-button-secondary.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-secondary.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-secondary.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #1e2a33; background: -webkit-linear-gradient(#3a5163, #1e2a33); background: linear-gradient(#3a5163, #1e2a33); color: #ffffff; } .kui-button-secondary.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #1e2a33; background: -webkit-linear-gradient(#1e2a33, #3a5163); background: linear-gradient(#1e2a33, #3a5163); color: #ffffff; } .kui-button-secondary.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-secondary.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #283743; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-secondary.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #283743; } .kui-button-secondary.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-secondary.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-secondary.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #283743; } .kui-button-secondary.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #283743; } .kui-button-secondary.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-secondary.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-gray { color: #aaaaaa; } .kui-button-gray:not(.kui-button-transparent) { background: #fff; } .kui-button-gray.kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-gray:not(.kui-button-disabled):hover, .kui-button-gray:not(.kui-button-disabled):focus { background-color: rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-gray:not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-gray:not(.kui-button-disabled):active { color: #777777; } .kui-button-gray:focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-gray:focus:before { border: 1px solid #aaaaaa; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-blue.kui-button-plain:not(.kui-button-white) { color: #2f8afc; } .kui-button-blue.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-blue.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-blue.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-blue.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(47, 138, 252, 0.15); color: #2f8afc; } .kui-button-blue.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(47, 138, 252, 0.15); color: #2f8afc; } .kui-button-blue.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #0358c1; } .kui-button-blue.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-blue.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #2f8afc; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-blue.kui-button-submit:not(.kui-button-white) { background: #2f8afc; background: -webkit-linear-gradient(#61a6fc, #2f8afc); background: linear-gradient(#61a6fc, #2f8afc); color: #ffffff; } .kui-button-blue.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-blue.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-blue.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #167cfb; background: -webkit-linear-gradient(#4898fc, #167cfb); background: linear-gradient(#4898fc, #167cfb); color: #ffffff; } .kui-button-blue.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #167cfb; background: -webkit-linear-gradient(#167cfb, #4898fc); background: linear-gradient(#167cfb, #4898fc); color: #ffffff; } .kui-button-blue.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-blue.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #2f8afc; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-blue.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #2f8afc; } .kui-button-blue.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-blue.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-blue.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #2f8afc; } .kui-button-blue.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #2f8afc; } .kui-button-blue.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-blue.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-white.kui-button-transparent { color: #ffffff; } .kui-button-white.kui-button-transparent:not(.kui-button-transparent) { background: #fff; } .kui-button-white.kui-button-transparent.kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-white.kui-button-transparent:not(.kui-button-disabled):hover, .kui-button-white.kui-button-transparent:not(.kui-button-disabled):focus { background-color: rgba(255, 255, 255, 0.15); color: #ffffff; } .kui-button-white.kui-button-transparent:not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.15); color: #ffffff; } .kui-button-white.kui-button-transparent:not(.kui-button-disabled):active { color: #cccccc; } .kui-button-white.kui-button-transparent:focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-white.kui-button-transparent:focus:before { border: 1px solid #ffffff; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #444444; } .kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #444444; } .kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #444444; } .kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain.kui-button-plain:not(.kui-button-white) { color: #314453; } .kui-button-domain.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-domain.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(49, 68, 83, 0.15); color: #314453; } .kui-button-domain.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(49, 68, 83, 0.15); color: #314453; } .kui-button-domain.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #0b0f13; } .kui-button-domain.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #314453; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain.kui-button-submit:not(.kui-button-white) { background: #314453; background: -webkit-linear-gradient(#4d6779, #314453); background: linear-gradient(#4d6779, #314453); color: #ffffff; } .kui-button-domain.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #283743; background: -webkit-linear-gradient(#435a69, #283743); background: linear-gradient(#435a69, #283743); color: #ffffff; } .kui-button-domain.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #283743; background: -webkit-linear-gradient(#283743, #435a69); background: linear-gradient(#283743, #435a69); color: #ffffff; } .kui-button-domain.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #314453; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #314453; } .kui-button-domain.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-domain.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #314453; } .kui-button-domain.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #314453; } .kui-button-domain.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain.kui-button-plain:not(.kui-button-complete) { color: #aaaaaa; } .kui-button-domain.kui-button-plain:not(.kui-button-complete):not(.kui-button-transparent) { background: #fff; } .kui-button-domain.kui-button-plain:not(.kui-button-complete).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):hover, .kui-button-domain.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { background-color: rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):active { color: #777777; } .kui-button-domain.kui-button-plain:not(.kui-button-complete):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain.kui-button-plain:not(.kui-button-complete):focus:before { border: 1px solid #aaaaaa; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-science.kui-button-plain:not(.kui-button-white) { color: #94424f; } .kui-button-domain-science.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-science.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-science.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-science.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(148, 66, 79, 0.15); color: #94424f; } .kui-button-domain-science.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(148, 66, 79, 0.15); color: #94424f; } .kui-button-domain-science.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #4d2329; } .kui-button-domain-science.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-science.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #94424f; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-science.kui-button-submit:not(.kui-button-white) { background: #94424f; background: -webkit-linear-gradient(#9d4a5a, #94424f); background: linear-gradient(#9d4a5a, #94424f); color: #ffffff; } .kui-button-domain-science.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-science.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-science.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #823a46; background: -webkit-linear-gradient(#8c4250, #823a46); background: linear-gradient(#8c4250, #823a46); color: #ffffff; } .kui-button-domain-science.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #823a46; background: -webkit-linear-gradient(#823a46, #8c4250); background: linear-gradient(#823a46, #8c4250); color: #ffffff; } .kui-button-domain-science.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-science.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #94424f; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-science.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #94424f; } .kui-button-domain-science.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-science.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-domain-science.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #94424f; } .kui-button-domain-science.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #94424f; } .kui-button-domain-science.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-science.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-science.kui-button-plain:not(.kui-button-complete) { color: #aaaaaa; } .kui-button-domain-science.kui-button-plain:not(.kui-button-complete):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-science.kui-button-plain:not(.kui-button-complete).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-science.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):hover, .kui-button-domain-science.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { background-color: rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-science.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-science.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):active { color: #777777; } .kui-button-domain-science.kui-button-plain:not(.kui-button-complete):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-science.kui-button-plain:not(.kui-button-complete):focus:before { border: 1px solid #aaaaaa; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-white) { color: #ad3434; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-humanities.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(173, 52, 52, 0.15); color: #ad3434; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(173, 52, 52, 0.15); color: #ad3434; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #5f1c1c; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #ad3434; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-humanities.kui-button-submit:not(.kui-button-white) { background: #ad3434; background: -webkit-linear-gradient(#c13b31, #ad3434); background: linear-gradient(#c13b31, #ad3434); color: #ffffff; } .kui-button-domain-humanities.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-humanities.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-humanities.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #992e2e; background: -webkit-linear-gradient(#ad352c, #992e2e); background: linear-gradient(#ad352c, #992e2e); color: #ffffff; } .kui-button-domain-humanities.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #992e2e; background: -webkit-linear-gradient(#992e2e, #ad352c); background: linear-gradient(#992e2e, #ad352c); color: #ffffff; } .kui-button-domain-humanities.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-humanities.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #ad3434; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-humanities.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #ad3434; } .kui-button-domain-humanities.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-humanities.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-domain-humanities.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #ad3434; } .kui-button-domain-humanities.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #ad3434; } .kui-button-domain-humanities.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-humanities.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-complete) { color: #aaaaaa; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-complete):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-complete).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):hover, .kui-button-domain-humanities.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { background-color: rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):active { color: #777777; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-complete):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-humanities.kui-button-plain:not(.kui-button-complete):focus:before { border: 1px solid #aaaaaa; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-white) { color: #b77033; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(183, 112, 51, 0.15); color: #b77033; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(183, 112, 51, 0.15); color: #b77033; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #673f1d; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #b77033; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-economics-finance-domain.kui-button-submit:not(.kui-button-white) { background: #b77033; background: -webkit-linear-gradient(#bf7b34, #b77033); background: linear-gradient(#bf7b34, #b77033); color: #ffffff; } .kui-button-domain-economics-finance-domain.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-economics-finance-domain.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-economics-finance-domain.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #a3642d; background: -webkit-linear-gradient(#ab6e2f, #a3642d); background: linear-gradient(#ab6e2f, #a3642d); color: #ffffff; } .kui-button-domain-economics-finance-domain.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #a3642d; background: -webkit-linear-gradient(#a3642d, #ab6e2f); background: linear-gradient(#a3642d, #ab6e2f); color: #ffffff; } .kui-button-domain-economics-finance-domain.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-economics-finance-domain.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #b77033; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-economics-finance-domain.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #b77033; } .kui-button-domain-economics-finance-domain.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-economics-finance-domain.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-domain-economics-finance-domain.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #b77033; } .kui-button-domain-economics-finance-domain.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #b77033; } .kui-button-domain-economics-finance-domain.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-economics-finance-domain.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-complete) { color: #aaaaaa; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-complete):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-complete).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):hover, .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { background-color: rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):active { color: #777777; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-complete):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-economics-finance-domain.kui-button-plain:not(.kui-button-complete):focus:before { border: 1px solid #aaaaaa; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-white) { color: #437a39; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-cs.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(67, 122, 57, 0.15); color: #437a39; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(67, 122, 57, 0.15); color: #437a39; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #1d3419; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #437a39; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-cs.kui-button-submit:not(.kui-button-white) { background: #437a39; background: -webkit-linear-gradient(#53893e, #437a39); background: linear-gradient(#53893e, #437a39); color: #ffffff; } .kui-button-domain-cs.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-cs.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-cs.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #396931; background: -webkit-linear-gradient(#487736, #396931); background: linear-gradient(#487736, #396931); color: #ffffff; } .kui-button-domain-cs.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #396931; background: -webkit-linear-gradient(#396931, #487736); background: linear-gradient(#396931, #487736); color: #ffffff; } .kui-button-domain-cs.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-cs.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #437a39; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-cs.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #437a39; } .kui-button-domain-cs.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-cs.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-domain-cs.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #437a39; } .kui-button-domain-cs.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #437a39; } .kui-button-domain-cs.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-cs.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-complete) { color: #aaaaaa; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-complete):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-complete).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):hover, .kui-button-domain-cs.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { background-color: rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):active { color: #777777; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-complete):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-cs.kui-button-plain:not(.kui-button-complete):focus:before { border: 1px solid #aaaaaa; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-white) { color: #437a39; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(67, 122, 57, 0.15); color: #437a39; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(67, 122, 57, 0.15); color: #437a39; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #1d3419; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #437a39; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-hour-of-code.kui-button-submit:not(.kui-button-white) { background: #437a39; background: -webkit-linear-gradient(#53893e, #437a39); background: linear-gradient(#53893e, #437a39); color: #ffffff; } .kui-button-domain-hour-of-code.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-hour-of-code.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-hour-of-code.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #396931; background: -webkit-linear-gradient(#487736, #396931); background: linear-gradient(#487736, #396931); color: #ffffff; } .kui-button-domain-hour-of-code.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #396931; background: -webkit-linear-gradient(#396931, #487736); background: linear-gradient(#396931, #487736); color: #ffffff; } .kui-button-domain-hour-of-code.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-hour-of-code.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #437a39; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-hour-of-code.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #437a39; } .kui-button-domain-hour-of-code.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-hour-of-code.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-domain-hour-of-code.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #437a39; } .kui-button-domain-hour-of-code.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #437a39; } .kui-button-domain-hour-of-code.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-hour-of-code.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-complete) { color: #aaaaaa; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-complete):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-complete).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):hover, .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { background-color: rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):active { color: #777777; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-complete):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-hour-of-code.kui-button-plain:not(.kui-button-complete):focus:before { border: 1px solid #aaaaaa; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-white) { color: #437a39; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(67, 122, 57, 0.15); color: #437a39; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(67, 122, 57, 0.15); color: #437a39; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #1d3419; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #437a39; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-computer-programming.kui-button-submit:not(.kui-button-white) { background: #437a39; background: -webkit-linear-gradient(#53893e, #437a39); background: linear-gradient(#53893e, #437a39); color: #ffffff; } .kui-button-domain-computer-programming.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-computer-programming.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-computer-programming.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #396931; background: -webkit-linear-gradient(#487736, #396931); background: linear-gradient(#487736, #396931); color: #ffffff; } .kui-button-domain-computer-programming.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #396931; background: -webkit-linear-gradient(#396931, #487736); background: linear-gradient(#396931, #487736); color: #ffffff; } .kui-button-domain-computer-programming.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-computer-programming.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #437a39; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-computer-programming.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #437a39; } .kui-button-domain-computer-programming.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-computer-programming.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-domain-computer-programming.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #437a39; } .kui-button-domain-computer-programming.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #437a39; } .kui-button-domain-computer-programming.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-computer-programming.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-complete) { color: #aaaaaa; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-complete):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-complete).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):hover, .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { background-color: rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):active { color: #777777; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-complete):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-computer-programming.kui-button-plain:not(.kui-button-complete):focus:before { border: 1px solid #aaaaaa; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-white) { color: #437a39; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-computing.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(67, 122, 57, 0.15); color: #437a39; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(67, 122, 57, 0.15); color: #437a39; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #1d3419; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #437a39; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-computing.kui-button-submit:not(.kui-button-white) { background: #437a39; background: -webkit-linear-gradient(#53893e, #437a39); background: linear-gradient(#53893e, #437a39); color: #ffffff; } .kui-button-domain-computing.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-computing.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-computing.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #396931; background: -webkit-linear-gradient(#487736, #396931); background: linear-gradient(#487736, #396931); color: #ffffff; } .kui-button-domain-computing.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #396931; background: -webkit-linear-gradient(#396931, #487736); background: linear-gradient(#396931, #487736); color: #ffffff; } .kui-button-domain-computing.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-computing.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #437a39; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-computing.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #437a39; } .kui-button-domain-computing.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-computing.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-domain-computing.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #437a39; } .kui-button-domain-computing.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #437a39; } .kui-button-domain-computing.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-computing.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-complete) { color: #aaaaaa; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-complete):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-complete).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):hover, .kui-button-domain-computing.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { background-color: rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):active { color: #777777; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-complete):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-computing.kui-button-plain:not(.kui-button-complete):focus:before { border: 1px solid #aaaaaa; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-white) { color: #218270; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(33, 130, 112, 0.15); color: #218270; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(33, 130, 112, 0.15); color: #218270; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #0c312a; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #218270; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-partner-content.kui-button-submit:not(.kui-button-white) { background: #218270; background: -webkit-linear-gradient(#2c8d7b, #218270); background: linear-gradient(#2c8d7b, #218270); color: #ffffff; } .kui-button-domain-partner-content.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-partner-content.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-partner-content.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #1c6e5e; background: -webkit-linear-gradient(#267a6a, #1c6e5e); background: linear-gradient(#267a6a, #1c6e5e); color: #ffffff; } .kui-button-domain-partner-content.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #1c6e5e; background: -webkit-linear-gradient(#1c6e5e, #267a6a); background: linear-gradient(#1c6e5e, #267a6a); color: #ffffff; } .kui-button-domain-partner-content.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-partner-content.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #218270; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-partner-content.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #218270; } .kui-button-domain-partner-content.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-partner-content.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-domain-partner-content.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #218270; } .kui-button-domain-partner-content.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #218270; } .kui-button-domain-partner-content.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-partner-content.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-complete) { color: #aaaaaa; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-complete):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-complete).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):hover, .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { background-color: rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):active { color: #777777; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-complete):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-partner-content.kui-button-plain:not(.kui-button-complete):focus:before { border: 1px solid #aaaaaa; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-math.kui-button-plain:not(.kui-button-white) { color: #1c758a; } .kui-button-domain-math.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-math.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-math.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-math.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(28, 117, 138, 0.15); color: #1c758a; } .kui-button-domain-math.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(28, 117, 138, 0.15); color: #1c758a; } .kui-button-domain-math.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #0b2d35; } .kui-button-domain-math.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-math.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #1c758a; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-math.kui-button-submit:not(.kui-button-white) { background: #1c758a; background: -webkit-linear-gradient(#46a8bf, #1c758a); background: linear-gradient(#46a8bf, #1c758a); color: #ffffff; } .kui-button-domain-math.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-math.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-math.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #186375; background: -webkit-linear-gradient(#3d99af, #186375); background: linear-gradient(#3d99af, #186375); color: #ffffff; } .kui-button-domain-math.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #186375; background: -webkit-linear-gradient(#186375, #3d99af); background: linear-gradient(#186375, #3d99af); color: #ffffff; } .kui-button-domain-math.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-math.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #1c758a; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-math.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #1c758a; } .kui-button-domain-math.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-math.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-domain-math.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #1c758a; } .kui-button-domain-math.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #1c758a; } .kui-button-domain-math.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-math.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-math.kui-button-plain:not(.kui-button-complete) { color: #aaaaaa; } .kui-button-domain-math.kui-button-plain:not(.kui-button-complete):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-math.kui-button-plain:not(.kui-button-complete).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-math.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):hover, .kui-button-domain-math.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { background-color: rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-math.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-math.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):active { color: #777777; } .kui-button-domain-math.kui-button-plain:not(.kui-button-complete):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-math.kui-button-plain:not(.kui-button-complete):focus:before { border: 1px solid #aaaaaa; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-white) { color: #644172; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(100, 65, 114, 0.15); color: #644172; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(100, 65, 114, 0.15); color: #644172; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #2b1c31; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #644172; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-test-prep.kui-button-submit:not(.kui-button-white) { background: #644172; background: -webkit-linear-gradient(#7e5f8e, #644172); background: linear-gradient(#7e5f8e, #644172); color: #ffffff; } .kui-button-domain-test-prep.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-test-prep.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-test-prep.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #563862; background: -webkit-linear-gradient(#70557f, #563862); background: linear-gradient(#70557f, #563862); color: #ffffff; } .kui-button-domain-test-prep.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #563862; background: -webkit-linear-gradient(#563862, #70557f); background: linear-gradient(#563862, #70557f); color: #ffffff; } .kui-button-domain-test-prep.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-test-prep.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #644172; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-test-prep.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #644172; } .kui-button-domain-test-prep.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-test-prep.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-domain-test-prep.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #644172; } .kui-button-domain-test-prep.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #644172; } .kui-button-domain-test-prep.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-test-prep.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-complete) { color: #aaaaaa; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-complete):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-complete).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):hover, .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { background-color: rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):active { color: #777777; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-complete):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-test-prep.kui-button-plain:not(.kui-button-complete):focus:before { border: 1px solid #aaaaaa; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-white) { color: #0084ce; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-white):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-white).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-sat.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { background-color: rgba(0, 132, 206, 0.15); color: #0084ce; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(0, 132, 206, 0.15); color: #0084ce; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-white):not(.kui-button-disabled):active { color: #004368; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-white):focus:before { border: 1px solid #0084ce; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } .kui-button-domain-sat.kui-button-submit:not(.kui-button-white) { background: #0084ce; background: -webkit-linear-gradient(#0084ce, #0084ce); background: linear-gradient(#0084ce, #0084ce); color: #ffffff; } .kui-button-domain-sat.kui-button-submit:not(.kui-button-white).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-sat.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):hover, .kui-button-domain-sat.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):focus { background: #0074b5; background: -webkit-linear-gradient(#0074b5, #0074b5); background: linear-gradient(#0074b5, #0074b5); color: #ffffff; } .kui-button-domain-sat.kui-button-submit:not(.kui-button-white):not(.kui-button-disabled):active { background: #0074b5; background: -webkit-linear-gradient(#0074b5, #0074b5); background: linear-gradient(#0074b5, #0074b5); color: #ffffff; } .kui-button-domain-sat.kui-button-submit:not(.kui-button-white):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-sat.kui-button-submit:not(.kui-button-white):focus:before { border: 1px solid #0084ce; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-sat.kui-button-white:not(.kui-button-transparent) { background: #ffffff; background: -webkit-linear-gradient(#ffffff, #ffffff); background: linear-gradient(#ffffff, #ffffff); color: #0084ce; } .kui-button-domain-sat.kui-button-white:not(.kui-button-transparent).kui-button-disabled { background: #d7d7d7; background: -webkit-linear-gradient(#fdfdfd, #d7d7d7); background: linear-gradient(#fdfdfd, #d7d7d7); color: #aaaaaa; cursor: default; opacity: 0.8; } .kui-button-domain-sat.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):hover, .kui-button-domain-sat.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):focus { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #0084ce; } .kui-button-domain-sat.kui-button-white:not(.kui-button-transparent):not(.kui-button-disabled):active { background: #f2f2f2; background: -webkit-linear-gradient(#f2f2f2, #f2f2f2); background: linear-gradient(#f2f2f2, #f2f2f2); color: #0084ce; } .kui-button-domain-sat.kui-button-white:not(.kui-button-transparent):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-sat.kui-button-white:not(.kui-button-transparent):focus:before { border: 1px solid #ffffff; border-radius: 21px; content: ""; display: block; height: 100%; left: -3px; padding-bottom: 4px; padding-right: 4px; position: absolute; top: -3px; width: 100%; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-complete) { color: #aaaaaa; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-complete):not(.kui-button-transparent) { background: #fff; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-complete).kui-button-disabled { color: #aaaaaa; cursor: default; opacity: 0.5; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):hover, .kui-button-domain-sat.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { background-color: rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):focus { box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.15); color: #aaaaaa; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-complete):not(.kui-button-disabled):active { color: #777777; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-complete):focus { /* * NOTE(jeresig): We remove the outline here so that we can * use an alternative focus styling, as specified below. */ outline: none; } .kui-button-domain-sat.kui-button-plain:not(.kui-button-complete):focus:before { border: 1px solid #aaaaaa; border-radius: 23px; content: ""; display: block; height: 100%; left: -4px; padding-bottom: 6px; padding-right: 6px; position: absolute; top: -4px; width: 100%; } a.kui-button { display: inline-block; text-align: center; text-decoration: none; } .kui-checkbox { background-image: -webkit-linear-gradient(#ffffff, #dddddd); background-image: linear-gradient(#ffffff, #dddddd); border: 1px solid #aaa; border-radius: 3px; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; height: 16px; margin: 3px; overflow: hidden; position: relative; vertical-align: -6px; width: 16px; } .kui-checkbox-checked:not(.kui-checkbox-disabled) { background: #49721a; color: #fff; } .kui-checkbox-disabled { color: #999; opacity: 0.4; } .kui-checkbox-disabled .kui-checkbox__input { cursor: default; } .kui-checkbox-focused { box-shadow: 0px 0px 3px rgba(99, 155, 36, 0.8); } .kui-checkbox__check { display: block; font-size: 12px; line-height: 15px; text-align: center; } .kui-checkbox__input { cursor: pointer; height: 100%; left: 0; margin: 0; opacity: 0; position: absolute; top: 0; width: 100%; } .kui-labeledfield { line-height: 1.4; margin-bottom: 20px; } .kui-labeledfield__title { color: #777; cursor: default; float: left; font-size: 14px; font-weight: bold; text-transform: uppercase; } .kui-labeledfield__error { color: #c52717; float: right; margin-left: 20px; text-align: right; } .kui-labeledfield__input { background: #fcfcfc; border: 1px solid #ccc; -moz-box-sizing: border-box; box-sizing: border-box; clear: both; font: inherit; padding: 8px 10px; margin: 5px 0 0; vertical-align: baseline; width: 100%; } .kui-labeledfield__input:focus { outline: none; box-shadow: 0px 0px 10px rgba(99, 155, 36, 0.8); } .kui-labeledfield__input-has-error { background: #fbe2e0; border-color: #c52717; } .kui-labeledfield__input-has-error:focus { box-shadow: 0px 0px 10px rgba(197, 39, 23, 0.4); } .kui-labeledfield__caption { color: #999; margin-top: 5px; text-align: right; } .kui-labeledtextarea { line-height: 1.4; margin-bottom: 20px; } .kui-labeledtextarea__title { color: #777; cursor: default; float: left; font-size: 14px; font-weight: bold; text-transform: uppercase; } .kui-labeledtextarea__error { color: #c52717; float: right; margin-left: 20px; text-align: right; } .kui-labeledtextarea__input { background: #fcfcfc; border: 1px solid #ccc; -moz-box-sizing: border-box; box-sizing: border-box; clear: both; font: inherit; padding: 8px 10px; margin: 5px 0 0; vertical-align: baseline; width: 100%; } .kui-labeledtextarea__input:focus { outline: none; box-shadow: 0px 0px 10px rgba(99, 155, 36, 0.8); } .kui-labeledtextarea__input-has-error { background: #fbe2e0; border-color: #c52717; } .kui-labeledtextarea__input-has-error:focus { box-shadow: 0px 0px 10px rgba(197, 39, 23, 0.4); } .kui-labeledtextarea__caption { color: #999; margin-top: 5px; text-align: right; } .kui-survey { background-color: #dddddd; border-color: #fdfdfd; border-radius: 14px 0 0 0; border-style: solid; border-width: 1px 1px 0 1px; bottom: 0; color: #111111; min-height: 10px; right: 40px; position: fixed; width: 340px; z-index: 1053; } .kui-survey__handle { background-color: #dddddd; border-color: #fdfdfd; border-radius: 9px 9px 0 0; border-style: solid; border-width: 1px 1px 0 1px; cursor: pointer; height: 30px; line-height: 30px; min-width: 40px; position: absolute; right: -1px; text-align: center; top: -31px; } .kui-survey__body { bottom: 0; left: 0; margin: 0 20px; position: absolute; right: 0; top: 0; } .kui-survey__question { margin: 10px 0; } .kui-survey__message { font-size: 22px; text-align: center; } .kui-survey__prompt { font-size: 16px; font-weight: bold; margin-bottom: 10px; } .kui-survey__answer { background-color: #639b24; border-radius: 18px; color: #ffffff; cursor: pointer; margin-bottom: 7px; padding: 5px; text-align: center; } .kui-survey-preview-wrapper { margin: 0 auto; overflow-y: hidden; padding: 35px 0 0 0; width: 342px; } .kui-survey-preview-wrapper > .kui-survey { position: relative; right: 0; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .hide-text { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .input-block-level { display: block; width: 100%; min-height: 30px; -moz-box-sizing: border-box; box-sizing: border-box; } #khanType { /* Used to style the topic title on a topic page, eg "Introduction to algebra" on /math/algebra/introduction-to-algebra. Also used for the tutorial title on tutorial landing pages. Not restricted to styling the titles of "Topic" entities. */ } .vertical-shadow { border: 1px solid #cccccc; border-bottom: 1px solid #aaa; box-shadow: 0 1px 3px #ccc; } html.page-container-min-width-zero body, html.page-container-min-width-zero #page-container { min-width: 0; } /* Fall back colors? Eg coach-res, talks & interviews */ /*a light mint color*/ /* grey */ /* the default card/stack view */ /* this handles much of pre-tutorials exercise layout which is encapsulated in stacks and cards: i.e. the stack of mini cards, the big exercise card, etc. */ .current-card-container { position: relative; } .current-card-container-inner { background-color: #fdfdfd; } .card-type-endofstack .current-card-container-inner { background-color: #e9efdd; } .current-card-container, .current-card-container-inner { -webkit-transition: all 0.18s ease-in-out; transition: all 0.18s ease-in-out; } .card-type-endofstack #extras, .card-type-endofassessment #extras { visibility: hidden; } .card-type-endoftask #extras { display: none; } .exercises-stack, .exercises-card { float: left; width: 7%; /* margin-bottom: -9999px; padding-bottom: 9999px; */ -moz-box-sizing: border-box; box-sizing: border-box; } .exercises-card { width: 86%; } .exercises-card.full-width { width: 98%; } .current-card { position: relative; margin-bottom: 20px; } .current-card #answer_area_wrap { margin: 10px -8px 0 0; } .current-card #answer_area .info-box { overflow: visible; } .current-card .info-box:before { content: " "; display: block; border-right: 8px solid transparent; border-bottom: 8px solid #cccccc; width: 0; height: 16px; position: absolute; right: -1px; top: -24px; } .card-type-endofstack .current-card-contents { padding: 20px; } .current-card #problemarea { margin-top: 35px; } .current-card #workarea { margin-top: 22px; } .current-card #answer_area_wrap { margin-top: 52px; } #footer { /* * This crazy little sucker invokes a different rendering path * for the entire page, even though it's only applied to the footer. * * This hints to webkit that GPU acceleration should be used where * possible, which fixes this annoying bug: http://code.google.com/p/chromium/issues/detail?id=103198 * as well as any screen flicker on macs when switching to/from GPU * rendering. * * If another fix for this bug is found, this can be removed. * See "the magic CSS bullet" here: http://www.html5rocks.com/en/tutorials/speed/html5/#toc-hardware-accell * * */ -webkit-transform: translateZ(0); transform: translateZ(0); } /* "Calculating End of Stack" Card Styling */ .calculating-end-of-stack { height: 380px; padding: 50px; text-align: center; } .calculating-end-of-stack .calc-text-spin { position: relative; top: -15px; } .calculating-end-of-stack .calc-text-spin span { display: none; } .calculating-end-of-stack .throbber { position: relative; top: -5px; } /** * General Exercise area styling */ .exercises-content { padding-left: 0; padding-right: 0; } .exercises-body { min-height: 380px; } .exercises-header .topic-exercise-badge { width: 7%; } .exercises-header .topic-exercise-image { width: 40px; height: 40px; } .exercises-header .topic-exercise-image.inline { display: inline-block; margin: -50% 0; } .exercises-header .practice-exercise-topic-context { -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; opacity: 0.3; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .exercises-header .practice-exercise-topic-context.solid-hover:hover { opacity: 1; } .exercises-header .practice-exercise-topic-context .topic-exercise-badge { width: 20px; height: 20px; margin-right: 2px; } /** * Bibliotron exercise style resets */ .bibliotron-exercise .current-card-container-inner { background-color: #fff; border: 0; box-shadow: none; } .bibliotron-exercise #extras { display: none; } .bibliotron-exercise .exercises-body { min-height: 0; } .bibliotron-exercise #problemarea { margin: 0 !important; min-height: 0; padding: 0; } .bibliotron-exercise #workarea { margin: 0 !important; } .bibliotron-exercise .exercises-card { width: 100%; } .bibliotron-exercise .exercises-card.full-width { width: 100%; } .diagnostic-landing .simple-input { font-size: 14px; height: 50px; width: 340px; } .honor-name-input { font-size: 15px; height: 30px; margin-top: 5px; padding: 5px; width: 200px; } .reminder-text { color: red; display: none; } .assessment-landing, .assessment-instructions, .assessment-report { background-color: #ffffff; display: table; padding: 30px; width: 100%; } .assessment-landing .assessment, .assessment-instructions .assessment, .assessment-report .assessment { margin-top: 42px; } .assessment-landing .content, .assessment-instructions .content, .assessment-report .content, .assessment-landing .docked-nav, .assessment-instructions .docked-nav, .assessment-report .docked-nav { display: table-cell; vertical-align: top; } .assessment-landing .docked-nav, .assessment-instructions .docked-nav, .assessment-report .docked-nav { min-width: 200px; position: static; } .assessment-landing .content, .assessment-instructions .content, .assessment-report .content { padding: 22px 0 0 22px; width: 100%; } .assessment-landing .summary img, .assessment-instructions .summary img, .assessment-report .summary img { width: 650px; } .assessment-landing h2, .assessment-instructions h2, .assessment-report h2 { color: #2c3747; display: block; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 24px; font-weight: normal; padding-top: 20px; } .assessment-landing h2 small, .assessment-instructions h2 small, .assessment-report h2 small { color: #898989; display: block; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin-top: 2px; } .assessment-landing h3, .assessment-instructions h3, .assessment-report h3 { color: #555; display: block; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 18px; font-weight: normal; line-height: 22px; } .assessment-landing .assessment-title, .assessment-instructions .assessment-title, .assessment-report .assessment-title { color: #555; display: block; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 18px; font-weight: normal; line-height: 22px; margin-bottom: 0px; padding: 5px 10px; } .assessment-landing .assessment-title .description, .assessment-instructions .assessment-title .description, .assessment-report .assessment-title .description { color: #898989; display: block; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; margin-top: 2px; color: #999999; } .assessment-landing .coach-callout img, .assessment-instructions .coach-callout img, .assessment-report .coach-callout img { height: 20px; margin-bottom: -3px; width: 20px; } .assessment-landing .assessment-past-results, .assessment-instructions .assessment-past-results, .assessment-report .assessment-past-results { padding-left: 28px; padding-top: 0px; } .assessment-landing .assessment-link:link, .assessment-instructions .assessment-link:link, .assessment-report .assessment-link:link, .assessment-landing .assessment-link:visited, .assessment-instructions .assessment-link:visited, .assessment-report .assessment-link:visited, .assessment-landing .assessment-link:focus, .assessment-instructions .assessment-link:focus, .assessment-report .assessment-link:focus, .assessment-landing .assessment-link:hover, .assessment-instructions .assessment-link:hover, .assessment-report .assessment-link:hover, .assessment-landing .assessment-link:active, .assessment-instructions .assessment-link:active, .assessment-report .assessment-link:active { display: block; } .assessment-landing .assessment-link:link .assessment-title, .assessment-instructions .assessment-link:link .assessment-title, .assessment-report .assessment-link:link .assessment-title, .assessment-landing .assessment-link:visited .assessment-title, .assessment-instructions .assessment-link:visited .assessment-title, .assessment-report .assessment-link:visited .assessment-title, .assessment-landing .assessment-link:focus .assessment-title, .assessment-instructions .assessment-link:focus .assessment-title, .assessment-report .assessment-link:focus .assessment-title, .assessment-landing .assessment-link:hover .assessment-title, .assessment-instructions .assessment-link:hover .assessment-title, .assessment-report .assessment-link:hover .assessment-title, .assessment-landing .assessment-link:active .assessment-title, .assessment-instructions .assessment-link:active .assessment-title, .assessment-report .assessment-link:active .assessment-title { color: #2c3747; } .assessment-landing .assessment-link:link .assessment-title .description, .assessment-instructions .assessment-link:link .assessment-title .description, .assessment-report .assessment-link:link .assessment-title .description, .assessment-landing .assessment-link:visited .assessment-title .description, .assessment-instructions .assessment-link:visited .assessment-title .description, .assessment-report .assessment-link:visited .assessment-title .description, .assessment-landing .assessment-link:focus .assessment-title .description, .assessment-instructions .assessment-link:focus .assessment-title .description, .assessment-report .assessment-link:focus .assessment-title .description, .assessment-landing .assessment-link:hover .assessment-title .description, .assessment-instructions .assessment-link:hover .assessment-title .description, .assessment-report .assessment-link:hover .assessment-title .description, .assessment-landing .assessment-link:active .assessment-title .description, .assessment-instructions .assessment-link:active .assessment-title .description, .assessment-report .assessment-link:active .assessment-title .description { color: #2c3747; } .assessment-landing .assessment-link:focus, .assessment-instructions .assessment-link:focus, .assessment-report .assessment-link:focus, .assessment-landing .assessment-link:hover, .assessment-instructions .assessment-link:hover, .assessment-report .assessment-link:hover { background-color: #eeeeee; } .assessment-landing .assessment-link:focus .assessment_title .title, .assessment-instructions .assessment-link:focus .assessment_title .title, .assessment-report .assessment-link:focus .assessment_title .title, .assessment-landing .assessment-link:hover .assessment_title .title, .assessment-instructions .assessment-link:hover .assessment_title .title, .assessment-report .assessment-link:hover .assessment_title .title { text-decoration: underline; } .assessment-landing h3 + h2, .assessment-instructions h3 + h2, .assessment-report h3 + h2 { margin-top: -21px; } .assessment-button { margin-top: 20px; } .diagnostic-landing .assessment-instructions ul { list-style: disc; } .diagnostic-landing .assessment-instructions ul li { font-size: 14px; } .diagnostic-landing .assessment-instructions a { display: block; } .diagnostic-landing .assessment-instructions .instructions { border-bottom: 1px solid #a9c0d1; margin-bottom: 14px; } .diagnostic-landing .assessment-instructions .assessment-button { display: inline-block; margin-bottom: 28px; } .assessment-report h3 { border-bottom: 1px solid #a9c0d1; } .assessment-report h3.score { border-bottom: 1px dotted #aaaaaa; } .assessment-report h3.score span { color: darkgrey; float: right; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; } .assessment-report h1 { color: #545454; font-weight: bold; font-size: 30px; } .assessment-report h2 { color: darkgrey; } .assessment-report hr { color: darkgrey; height: 1px; } .assessment-report p { text-align: left; color: #545454; } .assessment-report .feedback .simple-button { font-size: 14px; margin-left: 7px; } .assessment-report .feedback-link { color: #76a005; font-weight: bold; } .assessment-report th span { border-bottom: 1px dotted #aaaaaa; display: block; font-weight: bold; margin-right: 7px; } .assessment-report .assessment-data { margin-top: 42px; } .assessment-report g .topic-label { font-size: 18px; color: ghostwhite; } .assessment-report .assessment-correctness { padding-right: 28px; } .assessment-report .assessment-correctness.correct { color: #76a005; } .assessment-report .assessment-correctness.incorrect { color: #aaaaaa; } .assessment-report .assessment-accuracy { color: #555555; font-family: "courier new", courier, monospace; font-size: 14px; font-weight: bold; padding-right: 28px; } .assessment-report .assessment-table { font-size: 14px; line-height: 28px; margin-bottom: 7px; padding: 2px; text-align: left; width: 100%; } .assessment-report .thumb { display: table-cell; width: 90px; min-width: 90px; height: 90px; border-radius: 45px; -webkit-border-radius: 45px; -moz-border-radius: 45px; } .assessment-report .thumb img { width: 100%; } .coach-assessments .monoMagic { color: #000000; font-family: "Andale Mono", AndaleMono, "Lucida Console", LucidaConsole, monospace; position: relative; } .coach-assessments .assessment-summary { margin-bottom: 14px; width: 100%; } .coach-assessments .assessment-summary td { padding: 0; } .coach-assessments .assessment-header { color: #76a005; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 22px; padding: 12px; padding-left: 70px; position: relative; } .coach-assessments .assessment-header small { display: block; font-size: 16px; position: relative; top: -2px; } .coach-assessments .assessment-subheader { color: #76a005; font-family: 'Proxima Nova Semibold', 'Helvetica', 'Corbel', sans-serif; font-size: 16px; letter-spacing: 1px; margin-top: 12px; text-align: right; text-transform: uppercase; } .coach-assessments .assessment-info { color: #76a005; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; font-size: 14px; font-weight: normal; letter-spacing: 1px; margin-top: 16px; text-transform: uppercase; } .coach-assessments .assessment-info span, .coach-assessments .assessment-class-stats span { color: #000000; font-family: "Andale Mono", AndaleMono, "Lucida Console", LucidaConsole, monospace; position: relative; letter-spacing: 0; text-transform: none; } .coach-assessments .logo { background-color: #76a005; border-radius: 12px; display: table-cell; height: 24px; left: 0; padding: 8px; position: absolute; top: 11px; width: 40px; text-align: center; vertical-align: middle; } .coach-assessments .topic-all { clear: both; margin-bottom: 56px; } .coach-assessments .report { border: 1px solid #76a005; font-size: 16px; width: 100%; } .coach-assessments .topic-header .topic-name { color: #76a005; font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif; margin-bottom: 10.5px; } .coach-assessments .topic-header .topic-name .assessment-title, .coach-assessments .topic-header .topic-name .assessment-stats { color: #000000; font-family: "Andale Mono", AndaleMono, "Lucida Console", LucidaConsole, monospace; position: relative; display: inline-block; padding-left: .25em; } .coach-assessments th { background-color: #f4fed9; border-bottom: 1px solid #76a005; color: #356700; font-size: 14px; padding: 7px; padding-left: 14px; text-align: left; } .coach-assessments .assessment-class-stats th { background-color: #d7fb76; border-width: 0; color: #356700; text-transform: uppercase; } .coach-assessments td { padding: 14px; } .coach-assessments .score-header { border-bottom-width: 0; text-align: right; } .coach-assessments .report-score { background-color: #f4fed9; text-align: right; } .coach-assessments .student-data span { color: #000000; font-family: "Andale Mono", AndaleMono, "Lucida Console", LucidaConsole, monospace; position: relative; font-size: 14px; } .coach-assessments .student-data .report-info a { text-decoration: underline; } .coach-assessments a.correct, .coach-assessments a.incorrect { color: #d7fb76; position: relative; text-decoration: none; } .coach-assessments a.correct span, .coach-assessments a.incorrect span { left: 1px; position: absolute; top: -3px; } .coach-assessments a.correct:focus, .coach-assessments a.incorrect:focus, .coach-assessments a.correct:hover, .coach-assessments a.incorrect:hover { color: #76a005; } @media print { /** * --"quis leget haec?" * --"nemo hunc legit praeter ego" */ .coach-assessments span { left: -3px; top: 3px; } .coach-assessments a.correct span, .coach-assessments a.incorrect span { left: -2px; top: 1px; } } #worked-example-modal { border-radius: 2px; margin-left: -300px; min-width: 500px; position: absolute; text-align: left; z-index: 5000; } #worked-example-remove { font-size: 40px; height: 40px; } #worked-example-content { margin-left: 6px; } .example-hint { margin-bottom: 20px; } .example-hint:nth-child(odd) { background-color: #f0f0f0; } #skip-question-button, #opt-out-button { margin-top: 15px; } .skip-question-button-tooltip { background: #333333; border: 0px solid #333333; /* border color used for arrow */ border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); color: #fdfdfd; padding: 15px 30px 15px 15px; width: 215px; } .skip-question-button-tooltip .qtip-close { background: transparent; border: 0; color: #fdfdfd; right: 10px; top: 10px; } .skip-question-button-tooltip .qtip-close .ui-icon { font-size: 24px; height: 18px; } /** * our .@{domain} {color: white;} overrides mathjax eqs * FIXME(marcos): domain-colors mixins should not define color: @white; * except for in actual mixins, but not for .math, .{@domain}, et al. */ .MathJax .math { color: #444; } .exercises-body { /* Activate GPU rendering */ -webkit-transform: translatez(0); } div.exercises-card { width: 753px; } body.debug #workarea, body.debug #hintsarea { outline: 1px dashed #ddd; } body.debug #extras .debug-mode { display: none; }