Merge pull request #6125 from jdfreder/flex

Embrace the flexible box model in the widgets

IPython/html/widgets/widget_box.py

@@ -0,0 +1,73 b''
+"""Box class.  
+
+Represents a container that can be used to group other widgets.
+"""
+
+# Copyright (c) IPython Development Team.
+# Distributed under the terms of the Modified BSD License.
+
+from .widget import DOMWidget
+from IPython.utils.traitlets import Unicode, Tuple, TraitError, Int, CaselessStrEnum
+from IPython.utils.warn import DeprecatedClass
+
+class Box(DOMWidget):
+    """Displays multiple widgets in a group."""
+    _view_name = Unicode('BoxView', sync=True)
+
+    # Child widgets in the container.
+    # Using a tuple here to force reassignment to update the list.
+    # When a proper notifying-list trait exists, that is what should be used here.
+    children = Tuple(sync=True, allow_none=False)
+
+    def __init__(self, children = (), **kwargs):
+        kwargs['children'] = children
+        super(Box, self).__init__(**kwargs)
+        self.on_displayed(Box._fire_children_displayed)
+
+    def _fire_children_displayed(self):
+        for child in self.children:
+            child._handle_displayed()
+
+
+class Popup(Box):
+    """Displays multiple widgets in an in page popup div."""
+    _view_name = Unicode('PopupView', sync=True)
+    
+    description = Unicode(sync=True)
+    button_text = Unicode(sync=True)
+
+
+class FlexBox(Box):
+    """Displays multiple widgets using the flexible box model."""
+    _view_name = Unicode('FlexBoxView', sync=True)
+    orientation = CaselessStrEnum(values=['vertical', 'horizontal'], default_value='vertical', sync=True)
+    flex = Int(0, sync=True, help="""Specify the flexible-ness of the model.""")
+    def _flex_changed(self, name, old, new):
+        new = min(max(0, new), 2)
+        if self.flex != new:
+            self.flex = new
+
+    _locations = ['start', 'center', 'end', 'baseline', 'stretch']
+    pack = CaselessStrEnum(
+        values=_locations, 
+        default_value='start', allow_none=False, sync=True)
+    align = CaselessStrEnum(
+        values=_locations, 
+        default_value='start', allow_none=False, sync=True)
+
+
+def VBox(*pargs, **kwargs):
+    """Displays multiple widgets vertically using the flexible box model."""
+    kwargs['orientation'] = 'vertical'
+    return FlexBox(*pargs, **kwargs)
+
+def HBox(*pargs, **kwargs):
+    """Displays multiple widgets horizontally using the flexible box model."""
+    kwargs['orientation'] = 'horizontal'
+    return FlexBox(*pargs, **kwargs)
+
+
+# Remove in IPython 4.0
+ContainerWidget = DeprecatedClass(Box, 'ContainerWidget')
+PopupWidget = DeprecatedClass(Popup, 'PopupWidget')
+

docs/source/whatsnew/pr/incompat-deprecated-widget-names.rst

@@ -0,0 +1,6 b''
+* The widget classes have been renamed from `*Widget` to `*`.  The old names are 
+  still functional, but are deprecated.  i.e. `IntSliderWidget` has been renamed 
+  to `IntSlider`.
+* The ContainerWidget was renamed to Box and no longer defaults as a flexible
+  box in the web browser.  A new FlexBox widget was added, which allows you to
+  use the flexible box model.

IPython/html/static/base/less/flexbox.less

@@ -1,221 +1,269 b''
 
 /* Flexible box model classes */
 /* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
 
 /* This file is a compatability layer.  It allows the usage of flexible box 
 model layouts accross multiple browsers, including older browsers.  The newest,
 universal implementation of the flexible box model is used when available (see
 `Modern browsers` comments below).  Browsers that are known to implement this 
 new spec completely include:
 
     Firefox 28.0+
     Chrome 29.0+
     Internet Explorer 11+ 
     Opera 17.0+
 
 Browsers not listed, including Safari, are supported via the styling under the
 `Old browsers` comments below.
 */
 
 
 .hbox {
     /* Old browsers */
     display: -webkit-box;
     -webkit-box-orient: horizontal;
     -webkit-box-align: stretch;
 
     display: -moz-box;
     -moz-box-orient: horizontal;
     -moz-box-align: stretch;
 
     display: box;
     box-orient: horizontal;
     box-align: stretch;
 
     /* Modern browsers */
     display: flex;
     flex-direction: row;
     align-items: stretch;
 }
 
 .hbox > * {
     /* Old browsers */
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
 
     /* Modern browsers */
     flex: none;
 }
 
 .vbox {
     /* Old browsers */
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-box-align: stretch;
 
     display: -moz-box;
     -moz-box-orient: vertical;
     -moz-box-align: stretch;
 
     display: box;
     box-orient: vertical;
     box-align: stretch;
 
     /* Modern browsers */
     display: flex;
     flex-direction: column;
     align-items: stretch;
 }
 
 .vbox > * {
     /* Old browsers */
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
     
     /* Modern browsers */
     flex: none;
 }
 
 .hbox.reverse,
 .vbox.reverse,
 .reverse {
     /* Old browsers */
     -webkit-box-direction: reverse;
     -moz-box-direction: reverse;
     box-direction: reverse;
     
     /* Modern browsers */
     flex-direction: row-reverse;
 }
 
 .hbox.box-flex0,
 .vbox.box-flex0,
 .box-flex0 {
     /* Old browsers */
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
     
     /* Modern browsers */
     flex: none;
     width: auto;
 }
 
 .hbox.box-flex1,
 .vbox.box-flex1,
 .box-flex1 {
     /* Old browsers */
     -webkit-box-flex: 1;
     -moz-box-flex: 1;
     box-flex: 1;
 
     /* Modern browsers */
     flex: 1;
 }
 
 .hbox.box-flex,
 .vbox.box-flex,
 .box-flex {
     /* Old browsers */
     .box-flex1();
 }
 
 .hbox.box-flex2,
 .vbox.box-flex2,
 .box-flex2 {
     /* Old browsers */
     -webkit-box-flex: 2;
     -moz-box-flex: 2;
     box-flex: 2;
 
     /* Modern browsers */
     flex: 2;
 }
 
 .box-group1 {
     /*  Deprecated */
     -webkit-box-flex-group: 1;
     -moz-box-flex-group: 1;
     box-flex-group: 1;
 }
 
 .box-group2 {
     /* Deprecated */
     -webkit-box-flex-group: 2;
     -moz-box-flex-group: 2;
     box-flex-group: 2;
 }
 
 .hbox.start, 
 .vbox.start,
 .start {
     /* Old browsers */
     -webkit-box-pack: start;
     -moz-box-pack: start;
     box-pack: start;
     
     /* Modern browsers */
     justify-content: flex-start;
 }
 
 .hbox.end, 
 .vbox.end,
 .end {
     /* Old browsers */
     -webkit-box-pack: end;
     -moz-box-pack: end;
     box-pack: end;
     
     /* Modern browsers */
     justify-content: flex-end;
 }
 
 .hbox.center, 
 .vbox.center,
 .center {
     /* Old browsers */
     -webkit-box-pack: center;
     -moz-box-pack: center;
     box-pack: center;
     
     /* Modern browsers */
     justify-content: center;
 }
 
+.hbox.baseline, 
+.vbox.baseline,
+.baseline {
+    /* Old browsers */
+    -webkit-box-pack: baseline;
+    -moz-box-pack: baseline;
+    box-pack: baseline;
+    
+    /* Modern browsers */
+    justify-content: baseline;
+}
+
+.hbox.stretch, 
+.vbox.stretch,
+.stretch {
+    /* Old browsers */
+    -webkit-box-pack: stretch;
+    -moz-box-pack: stretch;
+    box-pack: stretch;
+    
+    /* Modern browsers */
+    justify-content: stretch;
+}
+
 .hbox.align-start, 
 .vbox.align-start,
 .align-start {
     /* Old browsers */
     -webkit-box-align: start;
     -moz-box-align: start;
     box-align: start;
     
     /* Modern browsers */
     align-items: flex-start;
 }
 
 .hbox.align-end, 
 .vbox.align-end,
 .align-end {
     /* Old browsers */
     -webkit-box-align: end;
     -moz-box-align: end;
     box-align: end;
     
     /* Modern browsers */
     align-items: flex-end;
 }
 
 .hbox.align-center, 
 .vbox.align-center,
 .align-center {
     /* Old browsers */
     -webkit-box-align: center;
     -moz-box-align: center;
     box-align: center;
     
     /* Modern browsers */
     align-items: center;
 }
+
+.hbox.align-baseline, 
+.vbox.align-baseline,
+.align-baseline {
+    /* Old browsers */
+    -webkit-box-align: baseline;
+    -moz-box-align: baseline;
+    box-align: baseline;
+    
+    /* Modern browsers */
+    align-items: baseline;
+}
+
+.hbox.align-stretch, 
+.vbox.align-stretch,
+.align-stretch {
+    /* Old browsers */
+    -webkit-box-align: stretch;
+    -moz-box-align: stretch;
+    box-align: stretch;
+    
+    /* Modern browsers */
+    align-items: stretch;
+}

IPython/html/static/style/ipython.min.css

@@ -1,1780 +1,1780 b''
 /*!
 *
 * IPython base
 *
 */
 .modal.fade .modal-dialog {
   -webkit-transform: translate(0, 0);
   -ms-transform: translate(0, 0);
   transform: translate(0, 0);
 }
 code {
   color: #000000;
 }
 pre {
   font-size: inherit;
   line-height: inherit;
 }
 label {
   font-weight: normal;
 }
 .border-box-sizing {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 .corner-all {
   border-radius: 4px;
 }
 .no-padding {
   padding: 0px;
 }
 /* Flexible box model classes */
 /* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
 /* This file is a compatability layer.  It allows the usage of flexible box 
 model layouts accross multiple browsers, including older browsers.  The newest,
 universal implementation of the flexible box model is used when available (see
 `Modern browsers` comments below).  Browsers that are known to implement this 
 new spec completely include:
 
     Firefox 28.0+
     Chrome 29.0+
     Internet Explorer 11+ 
     Opera 17.0+
 
 Browsers not listed, including Safari, are supported via the styling under the
 `Old browsers` comments below.
 */
 .hbox {
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
 }
 .hbox > * {
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .vbox {
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }
 .vbox > * {
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .hbox.reverse,
 .vbox.reverse,
 .reverse {
   /* Old browsers */
   -webkit-box-direction: reverse;
   -moz-box-direction: reverse;
   box-direction: reverse;
   /* Modern browsers */
   flex-direction: row-reverse;
 }
 .hbox.box-flex0,
 .vbox.box-flex0,
 .box-flex0 {
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   width: auto;
 }
 .hbox.box-flex1,
 .vbox.box-flex1,
 .box-flex1 {
   /* Old browsers */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
 }
 .hbox.box-flex,
 .vbox.box-flex,
 .box-flex {
   /* Old browsers */
   /* Old browsers */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
 }
 .hbox.box-flex2,
 .vbox.box-flex2,
 .box-flex2 {
   /* Old browsers */
   -webkit-box-flex: 2;
   -moz-box-flex: 2;
   box-flex: 2;
   /* Modern browsers */
   flex: 2;
 }
 .box-group1 {
   /*  Deprecated */
   -webkit-box-flex-group: 1;
   -moz-box-flex-group: 1;
   box-flex-group: 1;
 }
 .box-group2 {
   /* Deprecated */
   -webkit-box-flex-group: 2;
   -moz-box-flex-group: 2;
   box-flex-group: 2;
 }
 .hbox.start,
 .vbox.start,
 .start {
   /* Old browsers */
   -webkit-box-pack: start;
   -moz-box-pack: start;
   box-pack: start;
   /* Modern browsers */
   justify-content: flex-start;
 }
 .hbox.end,
 .vbox.end,
 .end {
   /* Old browsers */
   -webkit-box-pack: end;
   -moz-box-pack: end;
   box-pack: end;
   /* Modern browsers */
   justify-content: flex-end;
 }
 .hbox.center,
 .vbox.center,
 .center {
   /* Old browsers */
   -webkit-box-pack: center;
   -moz-box-pack: center;
   box-pack: center;
   /* Modern browsers */
   justify-content: center;
 }
 .hbox.align-start,
 .vbox.align-start,
 .align-start {
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
 }
 .hbox.align-end,
 .vbox.align-end,
 .align-end {
   /* Old browsers */
   -webkit-box-align: end;
   -moz-box-align: end;
   box-align: end;
   /* Modern browsers */
   align-items: flex-end;
 }
 .hbox.align-center,
 .vbox.align-center,
 .align-center {
   /* Old browsers */
   -webkit-box-align: center;
   -moz-box-align: center;
   box-align: center;
   /* Modern browsers */
   align-items: center;
 }
 div.error {
   margin: 2em;
   text-align: center;
 }
 div.error > h1 {
   font-size: 500%;
   line-height: normal;
 }
 div.error > p {
   font-size: 200%;
   line-height: normal;
 }
 div.traceback-wrapper {
   text-align: left;
   max-width: 800px;
   margin: auto;
 }
 /*!
 *
 * IPython notebook
 *
 */
 /* CSS font colors for translated ANSI colors. */
 .ansibold {
   font-weight: bold;
 }
 /* use dark versions for foreground, to improve visibility */
 .ansiblack {
   color: black;
 }
 .ansired {
   color: darkred;
 }
 .ansigreen {
   color: darkgreen;
 }
 .ansiyellow {
   color: brown;
 }
 .ansiblue {
   color: darkblue;
 }
 .ansipurple {
   color: darkviolet;
 }
 .ansicyan {
   color: steelblue;
 }
 .ansigray {
   color: gray;
 }
 /* and light for background, for the same reason */
 .ansibgblack {
   background-color: black;
 }
 .ansibgred {
   background-color: red;
 }
 .ansibggreen {
   background-color: green;
 }
 .ansibgyellow {
   background-color: yellow;
 }
 .ansibgblue {
   background-color: blue;
 }
 .ansibgpurple {
   background-color: magenta;
 }
 .ansibgcyan {
   background-color: cyan;
 }
 .ansibggray {
   background-color: gray;
 }
 div.cell {
   border: 1px solid transparent;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   border-radius: 4px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   border-width: thin;
   border-style: solid;
   width: 100%;
   padding: 5px 5px 5px 0px;
   /* This acts as a spacer between cells, that is outside the border */
   margin: 0px;
   outline: none;
 }
 div.cell.selected {
   border-color: #ababab;
 }
 div.cell.edit_mode {
   border-color: green;
 }
 div.prompt {
   /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
   min-width: 15ex;
   /* This padding is tuned to match the padding on the CodeMirror editor. */
   padding: 0.4em;
   margin: 0px;
   font-family: monospace;
   text-align: right;
   /* This has to match that of the the CodeMirror class line-height below */
   line-height: 1.21429em;
 }
 @media (max-width: 480px) {
   div.prompt {
     text-align: left;
   }
 }
 div.inner_cell {
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   /* Old browsers */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
 }
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_area {
   border: 1px solid #cfcfcf;
   border-radius: 4px;
   background: #f7f7f7;
   line-height: 1.21429em;
 }
 /* This is needed so that empty prompt areas can collapse to zero height when there
    is no content in the output_subarea and the prompt. The main purpose of this is
    to make sure that empty JavaScript output_subareas have no height. */
 div.prompt:empty {
   padding-top: 0;
   padding-bottom: 0;
 }
 /* any special styling for code cells that are currently running goes here */
 div.input {
   page-break-inside: avoid;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 @media (max-width: 480px) {
   div.input {
     /* Old browsers */
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-box-align: stretch;
     display: -moz-box;
     -moz-box-orient: vertical;
     -moz-box-align: stretch;
     display: box;
     box-orient: vertical;
     box-align: stretch;
     /* Modern browsers */
     display: flex;
     flex-direction: column;
     align-items: stretch;
     /* Old browsers */
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
     /* Modern browsers */
     flex: none;
   }
 }
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_prompt {
   color: #000080;
   border-top: 1px solid transparent;
 }
 div.input_area > div.highlight {
   margin: 0.4em;
   border: none;
   padding: 0px;
   background-color: transparent;
 }
 div.input_area > div.highlight > pre {
   margin: 0px;
   border: none;
   padding: 0px;
   background-color: transparent;
 }
 /* The following gets added to the <head> if it is detected that the user has a
  * monospace font with inconsistent normal/bold/italic height.  See
  * notebookmain.js.  Such fonts will have keywords vertically offset with
  * respect to the rest of the text.  The user should select a better font.
  * See: https://github.com/ipython/ipython/issues/1503
  *
  * .CodeMirror span {
  *      vertical-align: bottom;
  * }
  */
 .CodeMirror {
   line-height: 1.21429em;
   /* Changed from 1em to our global default */
   height: auto;
   /* Changed to auto to autogrow */
   background: none;
   /* Changed from white to allow our bg to show through */
 }
 .CodeMirror-scroll {
   /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
   /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
   overflow-y: hidden;
   overflow-x: auto;
 }
 .CodeMirror-lines {
   /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
   /* we have set a different line-height and want this to scale with that. */
   padding: 0.4em;
 }
 .CodeMirror-linenumber {
   padding: 0 8px 0 4px;
 }
 .CodeMirror-gutters {
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
 }
 .CodeMirror pre {
   /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
   /* .CodeMirror-lines */
   padding: 0;
   border: 0;
   border-radius: 0;
 }
 .CodeMirror-vscrollbar,
 .CodeMirror-hscrollbar {
   display: none !important;
 }
 /*
 
 Original style from softwaremaniacs.org (c) Ivan Sagalaev <[e-mail]>
 Adapted from GitHub theme
 
 */
 pre code {
   display: block;
   padding: 0.5em;
 }
 .highlight-base,
 pre code,
 pre .subst,
 pre .tag .title,
 pre .lisp .title,
 pre .clojure .built_in,
 pre .nginx .title {
   color: black;
 }
 .highlight-string,
 pre .string,
 pre .constant,
 pre .parent,
 pre .tag .value,
 pre .rules .value,
 pre .rules .value .number,
 pre .preprocessor,
 pre .ruby .symbol,
 pre .ruby .symbol .string,
 pre .aggregate,
 pre .template_tag,
 pre .django .variable,
 pre .smalltalk .class,
 pre .addition,
 pre .flow,
 pre .stream,
 pre .bash .variable,
 pre .apache .tag,
 pre .apache .cbracket,
 pre .tex .command,
 pre .tex .special,
 pre .erlang_repl .function_or_atom,
 pre .markdown .header {
   color: #BA2121;
 }
 .highlight-comment,
 pre .comment,
 pre .annotation,
 pre .template_comment,
 pre .diff .header,
 pre .chunk,
 pre .markdown .blockquote {
   color: #408080;
   font-style: italic;
 }
 .highlight-number,
 pre .number,
 pre .date,
 pre .regexp,
 pre .literal,
 pre .smalltalk .symbol,
 pre .smalltalk .char,
 pre .go .constant,
 pre .change,
 pre .markdown .bullet,
 pre .markdown .link_url {
   color: #080;
 }
 pre .label,
 pre .javadoc,
 pre .ruby .string,
 pre .decorator,
 pre .filter .argument,
 pre .localvars,
 pre .array,
 pre .attr_selector,
 pre .important,
 pre .pseudo,
 pre .pi,
 pre .doctype,
 pre .deletion,
 pre .envvar,
 pre .shebang,
 pre .apache .sqbracket,
 pre .nginx .built_in,
 pre .tex .formula,
 pre .erlang_repl .reserved,
 pre .prompt,
 pre .markdown .link_label,
 pre .vhdl .attribute,
 pre .clojure .attribute,
 pre .coffeescript .property {
   color: #8888ff;
 }
 .highlight-keyword,
 pre .keyword,
 pre .id,
 pre .phpdoc,
 pre .aggregate,
 pre .css .tag,
 pre .javadoctag,
 pre .phpdoc,
 pre .yardoctag,
 pre .smalltalk .class,
 pre .winutils,
 pre .bash .variable,
 pre .apache .tag,
 pre .go .typename,
 pre .tex .command,
 pre .markdown .strong,
 pre .request,
 pre .status {
   color: #008000;
   font-weight: bold;
 }
 .highlight-builtin,
 pre .built_in {
   color: #008000;
 }
 pre .markdown .emphasis {
   font-style: italic;
 }
 pre .nginx .built_in {
   font-weight: normal;
 }
 pre .coffeescript .javascript,
 pre .javascript .xml,
 pre .tex .formula,
 pre .xml .javascript,
 pre .xml .vbscript,
 pre .xml .css,
 pre .xml .cdata {
   opacity: 0.5;
 }
 /* apply the same style to codemirror */
 .cm-s-ipython span.cm-variable {
   color: black;
 }
 .cm-s-ipython span.cm-keyword {
   color: #008000;
   font-weight: bold;
 }
 .cm-s-ipython span.cm-number {
   color: #080;
 }
 .cm-s-ipython span.cm-comment {
   color: #408080;
   font-style: italic;
 }
 .cm-s-ipython span.cm-string {
   color: #BA2121;
 }
 .cm-s-ipython span.cm-builtin {
   color: #008000;
 }
 .cm-s-ipython span.cm-error {
   color: #f00;
 }
 .cm-s-ipython span.cm-operator {
   color: #AA22FF;
   font-weight: bold;
 }
 .cm-s-ipython span.cm-meta {
   color: #AA22FF;
 }
 .cm-s-ipython span.cm-tab {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
   background-position: right;
   background-repeat: no-repeat;
 }
 div.output_wrapper {
   /* this position must be relative to enable descendents to be absolute within it */
   position: relative;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 /* class for the output area when it should be height-limited */
 div.output_scroll {
   /* ideally, this would be max-height, but FF barfs all over that */
   height: 24em;
   /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
   width: 100%;
   overflow: auto;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
   display: block;
 }
 /* output div while it is collapsed */
 div.output_collapsed {
   margin: 0px;
   padding: 0px;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 div.out_prompt_overlay {
   height: 100%;
   padding: 0px 0.4em;
   position: absolute;
   border-radius: 4px;
 }
 div.out_prompt_overlay:hover {
   /* use inner shadow to get border that is computed the same on WebKit/FF */
   -webkit-box-shadow: inset 0 0 1px #000000;
   box-shadow: inset 0 0 1px #000000;
   background: rgba(240, 240, 240, 0.5);
 }
 div.output_prompt {
   color: #8b0000;
 }
 /* This class is the outer container of all output sections. */
 div.output_area {
   padding: 0px;
   page-break-inside: avoid;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 div.output_area .MathJax_Display {
   text-align: left !important;
 }
 div.output_area .rendered_html table {
   margin-left: 0;
   margin-right: 0;
 }
 div.output_area .rendered_html img {
   margin-left: 0;
   margin-right: 0;
 }
 /* This is needed to protect the pre formating from global settings such
    as that of bootstrap */
 .output {
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 @media (max-width: 480px) {
   div.output_area {
     /* Old browsers */
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-box-align: stretch;
     display: -moz-box;
     -moz-box-orient: vertical;
     -moz-box-align: stretch;
     display: box;
     box-orient: vertical;
     box-align: stretch;
     /* Modern browsers */
     display: flex;
     flex-direction: column;
     align-items: stretch;
     /* Old browsers */
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
     /* Modern browsers */
     flex: none;
   }
 }
 div.output_area pre {
   margin: 0;
   padding: 0;
   border: 0;
   vertical-align: baseline;
   color: #000000;
   background-color: transparent;
   border-radius: 0;
 }
 /* This class is for the output subarea inside the output_area and after
    the prompt div. */
 div.output_subarea {
   padding: 0.4em 0.4em 0em 0.4em;
   /* Old browsers */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
 }
 /* The rest of the output_* classes are for special styling of the different
    output types */
 /* all text output has this class: */
 div.output_text {
   text-align: left;
   color: #000000;
   /* This has to match that of the the CodeMirror class line-height below */
   line-height: 1.21429em;
 }
 /* stdout/stderr are 'text' as well as 'stream', but execute_result/error are *not* streams */
 div.output_stderr {
   background: #fdd;
   /* very light red background for stderr */
 }
 div.output_latex {
   text-align: left;
 }
 /* Empty output_javascript divs should have no height */
 div.output_javascript:empty {
   padding: 0;
 }
 .js-error {
   color: darkred;
 }
 /* raw_input styles */
 div.raw_input_container {
   font-family: monospace;
   padding-top: 5px;
 }
 span.raw_input_prompt {
   /* nothing needed here */
 }
 input.raw_input {
   font-family: inherit;
   font-size: inherit;
   color: inherit;
   width: auto;
   /* make sure input baseline aligns with prompt */
   vertical-align: baseline;
   /* padding + margin = 0.5em between prompt and cursor */
   padding: 0em 0.25em;
   margin: 0em 0.25em;
 }
 input.raw_input:focus {
   box-shadow: none;
 }
 p.p-space {
   margin-bottom: 10px;
 }
 .rendered_html {
   color: #000000;
   /* any extras will just be numbers: */
 }
 .rendered_html em {
   font-style: italic;
 }
 .rendered_html strong {
   font-weight: bold;
 }
 .rendered_html u {
   text-decoration: underline;
 }
 .rendered_html :link {
   text-decoration: underline;
 }
 .rendered_html :visited {
   text-decoration: underline;
 }
 .rendered_html h1 {
   font-size: 185.7%;
   margin: 1.08em 0 0 0;
   font-weight: bold;
   line-height: 1.0;
 }
 .rendered_html h2 {
   font-size: 157.1%;
   margin: 1.27em 0 0 0;
   font-weight: bold;
   line-height: 1.0;
 }
 .rendered_html h3 {
   font-size: 128.6%;
   margin: 1.55em 0 0 0;
   font-weight: bold;
   line-height: 1.0;
 }
 .rendered_html h4 {
   font-size: 100%;
   margin: 2em 0 0 0;
   font-weight: bold;
   line-height: 1.0;
 }
 .rendered_html h5 {
   font-size: 100%;
   margin: 2em 0 0 0;
   font-weight: bold;
   line-height: 1.0;
   font-style: italic;
 }
 .rendered_html h6 {
   font-size: 100%;
   margin: 2em 0 0 0;
   font-weight: bold;
   line-height: 1.0;
   font-style: italic;
 }
 .rendered_html h1:first-child {
   margin-top: 0.538em;
 }
 .rendered_html h2:first-child {
   margin-top: 0.636em;
 }
 .rendered_html h3:first-child {
   margin-top: 0.777em;
 }
 .rendered_html h4:first-child {
   margin-top: 1em;
 }
 .rendered_html h5:first-child {
   margin-top: 1em;
 }
 .rendered_html h6:first-child {
   margin-top: 1em;
 }
 .rendered_html ul {
   list-style: disc;
   margin: 0em 2em;
   padding-left: 0px;
 }
 .rendered_html ul ul {
   list-style: square;
   margin: 0em 2em;
 }
 .rendered_html ul ul ul {
   list-style: circle;
   margin: 0em 2em;
 }
 .rendered_html ol {
   list-style: decimal;
   margin: 0em 2em;
   padding-left: 0px;
 }
 .rendered_html ol ol {
   list-style: upper-alpha;
   margin: 0em 2em;
 }
 .rendered_html ol ol ol {
   list-style: lower-alpha;
   margin: 0em 2em;
 }
 .rendered_html ol ol ol ol {
   list-style: lower-roman;
   margin: 0em 2em;
 }
 .rendered_html ol ol ol ol ol {
   list-style: decimal;
   margin: 0em 2em;
 }
 .rendered_html * + ul {
   margin-top: 1em;
 }
 .rendered_html * + ol {
   margin-top: 1em;
 }
 .rendered_html hr {
   color: #000000;
   background-color: #000000;
 }
 .rendered_html pre {
   margin: 1em 2em;
 }
 .rendered_html pre,
 .rendered_html code {
   border: 0;
   background-color: #ffffff;
   color: #000000;
   font-size: 100%;
   padding: 0px;
 }
 .rendered_html blockquote {
   margin: 1em 2em;
 }
 .rendered_html table {
   margin-left: auto;
   margin-right: auto;
   border: 1px solid #000000;
   border-collapse: collapse;
 }
 .rendered_html tr,
 .rendered_html th,
 .rendered_html td {
   border: 1px solid #000000;
   border-collapse: collapse;
   margin: 1em 2em;
 }
 .rendered_html td,
 .rendered_html th {
   text-align: left;
   vertical-align: middle;
   padding: 4px;
 }
 .rendered_html th {
   font-weight: bold;
 }
 .rendered_html * + table {
   margin-top: 1em;
 }
 .rendered_html p {
   text-align: justify;
 }
 .rendered_html * + p {
   margin-top: 1em;
 }
 .rendered_html img {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 .rendered_html * + img {
   margin-top: 1em;
 }
 div.text_cell {
   padding: 5px 5px 5px 0px;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 @media (max-width: 480px) {
   div.text_cell > div.prompt {
     display: none;
   }
 }
 div.text_cell_render {
   /*font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
   outline: none;
   resize: none;
   width: inherit;
   border-style: none;
   padding: 0.5em 0.5em 0.5em 0.4em;
   color: #000000;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 a.anchor-link:link {
   text-decoration: none;
   padding: 0px 20px;
   visibility: hidden;
 }
 h1:hover .anchor-link,
 h2:hover .anchor-link,
 h3:hover .anchor-link,
 h4:hover .anchor-link,
 h5:hover .anchor-link,
 h6:hover .anchor-link {
   visibility: visible;
 }
 div.cell.text_cell.rendered {
   padding: 0px;
 }
 .cm-s-heading-1,
 .cm-s-heading-2,
 .cm-s-heading-3,
 .cm-s-heading-4,
 .cm-s-heading-5,
 .cm-s-heading-6 {
   font-weight: bold;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .cm-s-heading-1 {
   font-size: 150%;
 }
 .cm-s-heading-2 {
   font-size: 130%;
 }
 .cm-s-heading-3 {
   font-size: 120%;
 }
 .cm-s-heading-4 {
   font-size: 110%;
 }
 .cm-s-heading-5 {
   font-size: 100%;
   font-style: italic;
 }
 .cm-s-heading-6 {
   font-size: 90%;
   font-style: italic;
 }
 .widget-area {
   /*
     LESS file that styles IPython notebook widgets and the area they sit in.
 
     The widget area typically looks something like this:
      +------------------------------------------+
      | widget-area                              |
      |  +--------+---------------------------+  |
      |  | prompt | widget-subarea            |  |
      |  |        | +--------+  +--------+    |  |
      |  |        | | widget |  | widget |    |  |
      |  |        | +--------+  +--------+    |  |
      |  +--------+---------------------------+  |
      +------------------------------------------+
     */
   page-break-inside: avoid;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .widget-area .widget-subarea {
   padding: 0.44em 0.4em 0.4em 1px;
   margin-left: 6px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   /* Old browsers */
   -webkit-box-flex: 2;
   -moz-box-flex: 2;
   box-flex: 2;
   /* Modern browsers */
   flex: 2;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
 }
 /* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM (POSSIBLEY OUTSIDE OF
    THE WIDGET AREA). */
 .widget-hlabel {
   /* Horizontal Label */
   min-width: 10ex;
   padding-right: 8px;
   padding-top: 5px;
   text-align: right;
   vertical-align: text-top;
 }
 .widget-vlabel {
   /* Vertical Label */
   padding-bottom: 5px;
   text-align: center;
   vertical-align: text-bottom;
 }
 .widget-hreadout {
   padding-left: 8px;
   padding-top: 5px;
   text-align: left;
   vertical-align: text-top;
 }
 .widget-vreadout {
   /* Vertical Label */
   padding-top: 5px;
   text-align: center;
   vertical-align: text-top;
 }
 .slide-track {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
   border-radius: 4px;
   /* Round the corners of the slide track */
 }
 .widget-hslider {
   /* Horizontal jQuery Slider 
 
     Both the horizontal and vertical versions of the slider are characterized
     by a styled div that contains an invisible jQuery slide div which 
     contains a visible slider handle div.  This is requred so we can control
     how the slider is drawn and 'fix' the issue where the slide handle 
     doesn't stop at the end of the slide.
 
     Both horizontal and vertical sliders have this div nesting:
     +------------------------------------------+
     | widget-(h/v)slider                       |
     |  +--------+---------------------------+  |
     |  | ui-slider                          |  |
     |  |          +------------------+      |  |
     |  |          | ui-slider-handle |      |  |
     |  |          +------------------+      |  |
     |  +--------+---------------------------+  |
     +------------------------------------------+
     */
   /* Fix the padding of the slide track so the ui-slider is sized 
     correctly. */
   padding-left: 8px;
   padding-right: 5px;
   overflow: visible;
   /* Default size of the slider */
   width: 350px;
   height: 5px;
   max-height: 5px;
   margin-top: 13px;
   margin-bottom: 10px;
   /* Style the slider track */
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
   border-radius: 4px;
   /* Round the corners of the slide track */
   /* Make the div a flex box (makes FF behave correctly). */
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .widget-hslider .ui-slider {
   /* Inner, invisible slide div */
   border: 0px !important;
   background: none !important;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   /* Old browsers */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
 }
 .widget-hslider .ui-slider .ui-slider-handle {
   width: 14px !important;
   height: 28px !important;
   margin-top: -8px !important;
 }
 .widget-vslider {
   /* Vertical jQuery Slider */
   /* Fix the padding of the slide track so the ui-slider is sized 
     correctly. */
   padding-bottom: 8px;
   overflow: visible;
   /* Default size of the slider */
   width: 5px;
   max-width: 5px;
   height: 250px;
   margin-left: 12px;
   /* Style the slider track */
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
   border-radius: 4px;
   /* Round the corners of the slide track */
   /* Make the div a flex box (makes FF behave correctly). */
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .widget-vslider .ui-slider {
   /* Inner, invisible slide div */
   border: 0px !important;
   background: none !important;
   margin-left: -4px;
   margin-top: 5px;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   /* Old browsers */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
 }
 .widget-vslider .ui-slider .ui-slider-handle {
   width: 28px !important;
   height: 14px !important;
   margin-left: -9px;
 }
 .widget-text {
   /* String Textbox - used for TextBoxView and TextAreaView */
   width: 350px;
   margin: 0px !important;
 }
 .widget-listbox {
   /* Listbox */
   width: 350px;
   margin-bottom: 0px;
 }
 .widget-numeric-text {
   /* Single Line Textbox - used for IntTextView and FloatTextView */
   width: 150px;
   margin: 0px !important;
 }
 .widget-progress {
   /* Progress Bar */
   margin-top: 6px;
   width: 350px;
 }
 .widget-progress .progress-bar {
   /* Disable progress bar animation */
   -webkit-transition: none;
   -moz-transition: none;
   -ms-transition: none;
   -o-transition: none;
   transition: none;
 }
 .widget-combo-btn {
   /* ComboBox Main Button */
   min-width: 125px;
 }
 .widget-box {
   /* The following section sets the style for the invisible div that
     hold widgets and their accompanying labels.
 
     Looks like this:
     +-----------------------------+
     | widget-box (or similar)     |
     |  +-------+---------------+  |
     |  | Label | Actual Widget |  |
     |  +-------+---------------+  |
     +-----------------------------+
     */
   margin: 5px;
   /* Old browsers */
   -webkit-box-pack: start;
   -moz-box-pack: start;
   box-pack: start;
   /* Modern browsers */
   justify-content: flex-start;
-  /* ContainerWidget */
+  /* Box */
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
 }
 .widget-hbox {
   /* Horizontal widgets */
   /* The following section sets the style for the invisible div that
     hold widgets and their accompanying labels.
 
     Looks like this:
     +-----------------------------+
     | widget-box (or similar)     |
     |  +-------+---------------+  |
     |  | Label | Actual Widget |  |
     |  +-------+---------------+  |
     +-----------------------------+
     */
   margin: 5px;
   /* Old browsers */
   -webkit-box-pack: start;
   -moz-box-pack: start;
   box-pack: start;
   /* Modern browsers */
   justify-content: flex-start;
-  /* ContainerWidget */
+  /* Box */
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .widget-hbox-single {
   /* Single line horizontal widgets */
   /* Horizontal widgets */
   /* The following section sets the style for the invisible div that
     hold widgets and their accompanying labels.
 
     Looks like this:
     +-----------------------------+
     | widget-box (or similar)     |
     |  +-------+---------------+  |
     |  | Label | Actual Widget |  |
     |  +-------+---------------+  |
     +-----------------------------+
     */
   margin: 5px;
   /* Old browsers */
   -webkit-box-pack: start;
   -moz-box-pack: start;
   box-pack: start;
   /* Modern browsers */
   justify-content: flex-start;
-  /* ContainerWidget */
+  /* Box */
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   height: 30px;
 }
 .widget-hbox-single input[type="checkbox"] {
   margin-top: 9px;
 }
 .widget-vbox {
   /* Vertical widgets */
   /* The following section sets the style for the invisible div that
     hold widgets and their accompanying labels.
 
     Looks like this:
     +-----------------------------+
     | widget-box (or similar)     |
     |  +-------+---------------+  |
     |  | Label | Actual Widget |  |
     |  +-------+---------------+  |
     +-----------------------------+
     */
   margin: 5px;
   /* Old browsers */
   -webkit-box-pack: start;
   -moz-box-pack: start;
   box-pack: start;
   /* Modern browsers */
   justify-content: flex-start;
-  /* ContainerWidget */
+  /* Box */
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .widget-vbox-single {
   /* For vertical slides */
   /* Vertical widgets */
   /* The following section sets the style for the invisible div that
     hold widgets and their accompanying labels.
 
     Looks like this:
     +-----------------------------+
     | widget-box (or similar)     |
     |  +-------+---------------+  |
     |  | Label | Actual Widget |  |
     |  +-------+---------------+  |
     +-----------------------------+
     */
   margin: 5px;
   /* Old browsers */
   -webkit-box-pack: start;
   -moz-box-pack: start;
   box-pack: start;
   /* Modern browsers */
   justify-content: flex-start;
-  /* ContainerWidget */
+  /* Box */
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   width: 30px;
 }
 .widget-modal {
-  /* ContainerWidget - ModalView */
+  /* Box - ModalView */
   overflow: hidden;
   position: absolute !important;
   top: 0px;
   left: 0px;
   margin-left: 0px !important;
 }
 .widget-modal-body {
-  /* ContainerWidget - ModalView Body */
+  /* Box - ModalView Body */
   max-height: none !important;
 }
-.widget-container {
-  /* ContainerWidget */
+.widget-box {
+  /* Box */
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
 }
 .widget-radio-box {
   /* Contains RadioButtonsWidget */
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   padding-top: 4px;
 }
 .widget-radio-box label {
   margin-top: 0px;
 }
 .docked-widget-modal {
   /* Horizontal Label */
   overflow: hidden;
   position: relative !important;
   top: 0px !important;
   left: 0px !important;
   margin-left: 0px !important;
 }
 /*# sourceMappingURL=../style/ipython.min.css.map */
  No newline at end of file

IPython/html/static/style/style.min.css

@@ -1,10554 +1,10554 b''
 /*!
 *
 * Twitter Bootstrap
 *
 */
 /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
 html {
   font-family: sans-serif;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
 }
 body {
   margin: 0;
 }
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 main,
 nav,
 section,
 summary {
   display: block;
 }
 audio,
 canvas,
 progress,
 video {
   display: inline-block;
   vertical-align: baseline;
 }
 audio:not([controls]) {
   display: none;
   height: 0;
 }
 [hidden],
 template {
   display: none;
 }
 a {
   background: transparent;
 }
 a:active,
 a:hover {
   outline: 0;
 }
 abbr[title] {
   border-bottom: 1px dotted;
 }
 b,
 strong {
   font-weight: bold;
 }
 dfn {
   font-style: italic;
 }
 h1 {
   font-size: 2em;
   margin: 0.67em 0;
 }
 mark {
   background: #ff0;
   color: #000;
 }
 small {
   font-size: 80%;
 }
 sub,
 sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
 sup {
   top: -0.5em;
 }
 sub {
   bottom: -0.25em;
 }
 img {
   border: 0;
 }
 svg:not(:root) {
   overflow: hidden;
 }
 figure {
   margin: 1em 40px;
 }
 hr {
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   height: 0;
 }
 pre {
   overflow: auto;
 }
 code,
 kbd,
 pre,
 samp {
   font-family: monospace, monospace;
   font-size: 1em;
 }
 button,
 input,
 optgroup,
 select,
 textarea {
   color: inherit;
   font: inherit;
   margin: 0;
 }
 button {
   overflow: visible;
 }
 button,
 select {
   text-transform: none;
 }
 button,
 html input[type="button"],
 input[type="reset"],
 input[type="submit"] {
   -webkit-appearance: button;
   cursor: pointer;
 }
 button[disabled],
 html input[disabled] {
   cursor: default;
 }
 button::-moz-focus-inner,
 input::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
 input {
   line-height: normal;
 }
 input[type="checkbox"],
 input[type="radio"] {
   box-sizing: border-box;
   padding: 0;
 }
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 input[type="search"] {
   -webkit-appearance: textfield;
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box;
   box-sizing: content-box;
 }
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 fieldset {
   border: 1px solid #c0c0c0;
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
 }
 legend {
   border: 0;
   padding: 0;
 }
 textarea {
   overflow: auto;
 }
 optgroup {
   font-weight: bold;
 }
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 td,
 th {
   padding: 0;
 }
 @media print {
   * {
     text-shadow: none !important;
     color: #000 !important;
     background: transparent !important;
     box-shadow: none !important;
   }
   a,
   a:visited {
     text-decoration: underline;
   }
   a[href]:after {
     content: " (" attr(href) ")";
   }
   abbr[title]:after {
     content: " (" attr(title) ")";
   }
   a[href^="javascript:"]:after,
   a[href^="#"]:after {
     content: "";
   }
   pre,
   blockquote {
     border: 1px solid #999;
     page-break-inside: avoid;
   }
   thead {
     display: table-header-group;
   }
   tr,
   img {
     page-break-inside: avoid;
   }
   img {
     max-width: 100% !important;
   }
   p,
   h2,
   h3 {
     orphans: 3;
     widows: 3;
   }
   h2,
   h3 {
     page-break-after: avoid;
   }
   select {
     background: #fff !important;
   }
   .navbar {
     display: none;
   }
   .table td,
   .table th {
     background-color: #fff !important;
   }
   .btn > .caret,
   .dropup > .btn > .caret {
     border-top-color: #000 !important;
   }
   .label {
     border: 1px solid #000;
   }
   .table {
     border-collapse: collapse !important;
   }
   .table-bordered th,
   .table-bordered td {
     border: 1px solid #ddd !important;
   }
 }
 * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 *:before,
 *:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 html {
   font-size: 62.5%;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 13px;
   line-height: 1.42857143;
   color: #000000;
   background-color: #ffffff;
 }
 input,
 button,
 select,
 textarea {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
 }
 a {
   color: #428bca;
   text-decoration: none;
 }
 a:hover,
 a:focus {
   color: #2a6496;
   text-decoration: underline;
 }
 a:focus {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
 figure {
   margin: 0;
 }
 img {
   vertical-align: middle;
 }
 .img-responsive,
 .thumbnail > img,
 .thumbnail a > img,
 .carousel-inner > .item > img,
 .carousel-inner > .item > a > img {
   display: block;
   max-width: 100%;
   height: auto;
 }
 .img-rounded {
   border-radius: 6px;
 }
 .img-thumbnail {
   padding: 4px;
   line-height: 1.42857143;
   background-color: #ffffff;
   border: 1px solid #dddddd;
   border-radius: 4px;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   display: inline-block;
   max-width: 100%;
   height: auto;
 }
 .img-circle {
   border-radius: 50%;
 }
 hr {
   margin-top: 18px;
   margin-bottom: 18px;
   border: 0;
   border-top: 1px solid #eeeeee;
 }
 .sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .h1,
 .h2,
 .h3,
 .h4,
 .h5,
 .h6 {
   font-family: inherit;
   font-weight: 500;
   line-height: 1.1;
   color: inherit;
 }
 h1 small,
 h2 small,
 h3 small,
 h4 small,
 h5 small,
 h6 small,
 .h1 small,
 .h2 small,
 .h3 small,
 .h4 small,
 .h5 small,
 .h6 small,
 h1 .small,
 h2 .small,
 h3 .small,
 h4 .small,
 h5 .small,
 h6 .small,
 .h1 .small,
 .h2 .small,
 .h3 .small,
 .h4 .small,
 .h5 .small,
 .h6 .small {
   font-weight: normal;
   line-height: 1;
   color: #999999;
 }
 h1,
 .h1,
 h2,
 .h2,
 h3,
 .h3 {
   margin-top: 18px;
   margin-bottom: 9px;
 }
 h1 small,
 .h1 small,
 h2 small,
 .h2 small,
 h3 small,
 .h3 small,
 h1 .small,
 .h1 .small,
 h2 .small,
 .h2 .small,
 h3 .small,
 .h3 .small {
   font-size: 65%;
 }
 h4,
 .h4,
 h5,
 .h5,
 h6,
 .h6 {
   margin-top: 9px;
   margin-bottom: 9px;
 }
 h4 small,
 .h4 small,
 h5 small,
 .h5 small,
 h6 small,
 .h6 small,
 h4 .small,
 .h4 .small,
 h5 .small,
 .h5 .small,
 h6 .small,
 .h6 .small {
   font-size: 75%;
 }
 h1,
 .h1 {
   font-size: 33px;
 }
 h2,
 .h2 {
   font-size: 27px;
 }
 h3,
 .h3 {
   font-size: 23px;
 }
 h4,
 .h4 {
   font-size: 17px;
 }
 h5,
 .h5 {
   font-size: 13px;
 }
 h6,
 .h6 {
   font-size: 12px;
 }
 p {
   margin: 0 0 9px;
 }
 .lead {
   margin-bottom: 18px;
   font-size: 14px;
   font-weight: 200;
   line-height: 1.4;
 }
 @media (min-width: 768px) {
   .lead {
     font-size: 19.5px;
   }
 }
 small,
 .small {
   font-size: 85%;
 }
 cite {
   font-style: normal;
 }
 .text-left {
   text-align: left;
 }
 .text-right {
   text-align: right;
 }
 .text-center {
   text-align: center;
 }
 .text-justify {
   text-align: justify;
 }
 .text-muted {
   color: #999999;
 }
 .text-primary {
   color: #428bca;
 }
 a.text-primary:hover {
   color: #3071a9;
 }
 .text-success {
   color: #3c763d;
 }
 a.text-success:hover {
   color: #2b542c;
 }
 .text-info {
   color: #31708f;
 }
 a.text-info:hover {
   color: #245269;
 }
 .text-warning {
   color: #8a6d3b;
 }
 a.text-warning:hover {
   color: #66512c;
 }
 .text-danger {
   color: #a94442;
 }
 a.text-danger:hover {
   color: #843534;
 }
 .bg-primary {
   color: #fff;
   background-color: #428bca;
 }
 a.bg-primary:hover {
   background-color: #3071a9;
 }
 .bg-success {
   background-color: #dff0d8;
 }
 a.bg-success:hover {
   background-color: #c1e2b3;
 }
 .bg-info {
   background-color: #d9edf7;
 }
 a.bg-info:hover {
   background-color: #afd9ee;
 }
 .bg-warning {
   background-color: #fcf8e3;
 }
 a.bg-warning:hover {
   background-color: #f7ecb5;
 }
 .bg-danger {
   background-color: #f2dede;
 }
 a.bg-danger:hover {
   background-color: #e4b9b9;
 }
 .page-header {
   padding-bottom: 8px;
   margin: 36px 0 18px;
   border-bottom: 1px solid #eeeeee;
 }
 ul,
 ol {
   margin-top: 0;
   margin-bottom: 9px;
 }
 ul ul,
 ol ul,
 ul ol,
 ol ol {
   margin-bottom: 0;
 }
 .list-unstyled {
   padding-left: 0;
   list-style: none;
 }
 .list-inline {
   padding-left: 0;
   list-style: none;
   margin-left: -5px;
 }
 .list-inline > li {
   display: inline-block;
   padding-left: 5px;
   padding-right: 5px;
 }
 dl {
   margin-top: 0;
   margin-bottom: 18px;
 }
 dt,
 dd {
   line-height: 1.42857143;
 }
 dt {
   font-weight: bold;
 }
 dd {
   margin-left: 0;
 }
 @media (min-width: 768px) {
   .dl-horizontal dt {
     float: left;
     width: 160px;
     clear: left;
     text-align: right;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   .dl-horizontal dd {
     margin-left: 180px;
   }
 }
 abbr[title],
 abbr[data-original-title] {
   cursor: help;
   border-bottom: 1px dotted #999999;
 }
 .initialism {
   font-size: 90%;
   text-transform: uppercase;
 }
 blockquote {
   padding: 9px 18px;
   margin: 0 0 18px;
   font-size: inherit;
   border-left: 5px solid #eeeeee;
 }
 blockquote p:last-child,
 blockquote ul:last-child,
 blockquote ol:last-child {
   margin-bottom: 0;
 }
 blockquote footer,
 blockquote small,
 blockquote .small {
   display: block;
   font-size: 80%;
   line-height: 1.42857143;
   color: #999999;
 }
 blockquote footer:before,
 blockquote small:before,
 blockquote .small:before {
   content: '\2014 \00A0';
 }
 .blockquote-reverse,
 blockquote.pull-right {
   padding-right: 15px;
   padding-left: 0;
   border-right: 5px solid #eeeeee;
   border-left: 0;
   text-align: right;
 }
 .blockquote-reverse footer:before,
 blockquote.pull-right footer:before,
 .blockquote-reverse small:before,
 blockquote.pull-right small:before,
 .blockquote-reverse .small:before,
 blockquote.pull-right .small:before {
   content: '';
 }
 .blockquote-reverse footer:after,
 blockquote.pull-right footer:after,
 .blockquote-reverse small:after,
 blockquote.pull-right small:after,
 .blockquote-reverse .small:after,
 blockquote.pull-right .small:after {
   content: '\00A0 \2014';
 }
 blockquote:before,
 blockquote:after {
   content: "";
 }
 address {
   margin-bottom: 18px;
   font-style: normal;
   line-height: 1.42857143;
 }
 code,
 kbd,
 pre,
 samp {
   font-family: monospace;
 }
 code {
   padding: 2px 4px;
   font-size: 90%;
   color: #c7254e;
   background-color: #f9f2f4;
   white-space: nowrap;
   border-radius: 4px;
 }
 kbd {
   padding: 2px 4px;
   font-size: 90%;
   color: #ffffff;
   background-color: #333333;
   border-radius: 3px;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 pre {
   display: block;
   padding: 8.5px;
   margin: 0 0 9px;
   font-size: 12px;
   line-height: 1.42857143;
   word-break: break-all;
   word-wrap: break-word;
   color: #333333;
   background-color: #f5f5f5;
   border: 1px solid #cccccc;
   border-radius: 4px;
 }
 pre code {
   padding: 0;
   font-size: inherit;
   color: inherit;
   white-space: pre-wrap;
   background-color: transparent;
   border-radius: 0;
 }
 .pre-scrollable {
   max-height: 340px;
   overflow-y: scroll;
 }
 .container {
   margin-right: auto;
   margin-left: auto;
   padding-left: 15px;
   padding-right: 15px;
 }
 @media (min-width: 768px) {
   .container {
     width: 750px;
   }
 }
 @media (min-width: 992px) {
   .container {
     width: 970px;
   }
 }
 @media (min-width: 1200px) {
   .container {
     width: 1170px;
   }
 }
 .container-fluid {
   margin-right: auto;
   margin-left: auto;
   padding-left: 15px;
   padding-right: 15px;
 }
 .row {
   margin-left: -15px;
   margin-right: -15px;
 }
 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;
   padding-left: 15px;
   padding-right: 15px;
 }
 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
   float: left;
 }
 .col-xs-12 {
   width: 100%;
 }
 .col-xs-11 {
   width: 91.66666667%;
 }
 .col-xs-10 {
   width: 83.33333333%;
 }
 .col-xs-9 {
   width: 75%;
 }
 .col-xs-8 {
   width: 66.66666667%;
 }
 .col-xs-7 {
   width: 58.33333333%;
 }
 .col-xs-6 {
   width: 50%;
 }
 .col-xs-5 {
   width: 41.66666667%;
 }
 .col-xs-4 {
   width: 33.33333333%;
 }
 .col-xs-3 {
   width: 25%;
 }
 .col-xs-2 {
   width: 16.66666667%;
 }
 .col-xs-1 {
   width: 8.33333333%;
 }
 .col-xs-pull-12 {
   right: 100%;
 }
 .col-xs-pull-11 {
   right: 91.66666667%;
 }
 .col-xs-pull-10 {
   right: 83.33333333%;
 }
 .col-xs-pull-9 {
   right: 75%;
 }
 .col-xs-pull-8 {
   right: 66.66666667%;
 }
 .col-xs-pull-7 {
   right: 58.33333333%;
 }
 .col-xs-pull-6 {
   right: 50%;
 }
 .col-xs-pull-5 {
   right: 41.66666667%;
 }
 .col-xs-pull-4 {
   right: 33.33333333%;
 }
 .col-xs-pull-3 {
   right: 25%;
 }
 .col-xs-pull-2 {
   right: 16.66666667%;
 }
 .col-xs-pull-1 {
   right: 8.33333333%;
 }
 .col-xs-pull-0 {
   right: 0%;
 }
 .col-xs-push-12 {
   left: 100%;
 }
 .col-xs-push-11 {
   left: 91.66666667%;
 }
 .col-xs-push-10 {
   left: 83.33333333%;
 }
 .col-xs-push-9 {
   left: 75%;
 }
 .col-xs-push-8 {
   left: 66.66666667%;
 }
 .col-xs-push-7 {
   left: 58.33333333%;
 }
 .col-xs-push-6 {
   left: 50%;
 }
 .col-xs-push-5 {
   left: 41.66666667%;
 }
 .col-xs-push-4 {
   left: 33.33333333%;
 }
 .col-xs-push-3 {
   left: 25%;
 }
 .col-xs-push-2 {
   left: 16.66666667%;
 }
 .col-xs-push-1 {
   left: 8.33333333%;
 }
 .col-xs-push-0 {
   left: 0%;
 }
 .col-xs-offset-12 {
   margin-left: 100%;
 }
 .col-xs-offset-11 {
   margin-left: 91.66666667%;
 }
 .col-xs-offset-10 {
   margin-left: 83.33333333%;
 }
 .col-xs-offset-9 {
   margin-left: 75%;
 }
 .col-xs-offset-8 {
   margin-left: 66.66666667%;
 }
 .col-xs-offset-7 {
   margin-left: 58.33333333%;
 }
 .col-xs-offset-6 {
   margin-left: 50%;
 }
 .col-xs-offset-5 {
   margin-left: 41.66666667%;
 }
 .col-xs-offset-4 {
   margin-left: 33.33333333%;
 }
 .col-xs-offset-3 {
   margin-left: 25%;
 }
 .col-xs-offset-2 {
   margin-left: 16.66666667%;
 }
 .col-xs-offset-1 {
   margin-left: 8.33333333%;
 }
 .col-xs-offset-0 {
   margin-left: 0%;
 }
 @media (min-width: 768px) {
   .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
     float: left;
   }
   .col-sm-12 {
     width: 100%;
   }
   .col-sm-11 {
     width: 91.66666667%;
   }
   .col-sm-10 {
     width: 83.33333333%;
   }
   .col-sm-9 {
     width: 75%;
   }
   .col-sm-8 {
     width: 66.66666667%;
   }
   .col-sm-7 {
     width: 58.33333333%;
   }
   .col-sm-6 {
     width: 50%;
   }
   .col-sm-5 {
     width: 41.66666667%;
   }
   .col-sm-4 {
     width: 33.33333333%;
   }
   .col-sm-3 {
     width: 25%;
   }
   .col-sm-2 {
     width: 16.66666667%;
   }
   .col-sm-1 {
     width: 8.33333333%;
   }
   .col-sm-pull-12 {
     right: 100%;
   }
   .col-sm-pull-11 {
     right: 91.66666667%;
   }
   .col-sm-pull-10 {
     right: 83.33333333%;
   }
   .col-sm-pull-9 {
     right: 75%;
   }
   .col-sm-pull-8 {
     right: 66.66666667%;
   }
   .col-sm-pull-7 {
     right: 58.33333333%;
   }
   .col-sm-pull-6 {
     right: 50%;
   }
   .col-sm-pull-5 {
     right: 41.66666667%;
   }
   .col-sm-pull-4 {
     right: 33.33333333%;
   }
   .col-sm-pull-3 {
     right: 25%;
   }
   .col-sm-pull-2 {
     right: 16.66666667%;
   }
   .col-sm-pull-1 {
     right: 8.33333333%;
   }
   .col-sm-pull-0 {
     right: 0%;
   }
   .col-sm-push-12 {
     left: 100%;
   }
   .col-sm-push-11 {
     left: 91.66666667%;
   }
   .col-sm-push-10 {
     left: 83.33333333%;
   }
   .col-sm-push-9 {
     left: 75%;
   }
   .col-sm-push-8 {
     left: 66.66666667%;
   }
   .col-sm-push-7 {
     left: 58.33333333%;
   }
   .col-sm-push-6 {
     left: 50%;
   }
   .col-sm-push-5 {
     left: 41.66666667%;
   }
   .col-sm-push-4 {
     left: 33.33333333%;
   }
   .col-sm-push-3 {
     left: 25%;
   }
   .col-sm-push-2 {
     left: 16.66666667%;
   }
   .col-sm-push-1 {
     left: 8.33333333%;
   }
   .col-sm-push-0 {
     left: 0%;
   }
   .col-sm-offset-12 {
     margin-left: 100%;
   }
   .col-sm-offset-11 {
     margin-left: 91.66666667%;
   }
   .col-sm-offset-10 {
     margin-left: 83.33333333%;
   }
   .col-sm-offset-9 {
     margin-left: 75%;
   }
   .col-sm-offset-8 {
     margin-left: 66.66666667%;
   }
   .col-sm-offset-7 {
     margin-left: 58.33333333%;
   }
   .col-sm-offset-6 {
     margin-left: 50%;
   }
   .col-sm-offset-5 {
     margin-left: 41.66666667%;
   }
   .col-sm-offset-4 {
     margin-left: 33.33333333%;
   }
   .col-sm-offset-3 {
     margin-left: 25%;
   }
   .col-sm-offset-2 {
     margin-left: 16.66666667%;
   }
   .col-sm-offset-1 {
     margin-left: 8.33333333%;
   }
   .col-sm-offset-0 {
     margin-left: 0%;
   }
 }
 @media (min-width: 992px) {
   .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
     float: left;
   }
   .col-md-12 {
     width: 100%;
   }
   .col-md-11 {
     width: 91.66666667%;
   }
   .col-md-10 {
     width: 83.33333333%;
   }
   .col-md-9 {
     width: 75%;
   }
   .col-md-8 {
     width: 66.66666667%;
   }
   .col-md-7 {
     width: 58.33333333%;
   }
   .col-md-6 {
     width: 50%;
   }
   .col-md-5 {
     width: 41.66666667%;
   }
   .col-md-4 {
     width: 33.33333333%;
   }
   .col-md-3 {
     width: 25%;
   }
   .col-md-2 {
     width: 16.66666667%;
   }
   .col-md-1 {
     width: 8.33333333%;
   }
   .col-md-pull-12 {
     right: 100%;
   }
   .col-md-pull-11 {
     right: 91.66666667%;
   }
   .col-md-pull-10 {
     right: 83.33333333%;
   }
   .col-md-pull-9 {
     right: 75%;
   }
   .col-md-pull-8 {
     right: 66.66666667%;
   }
   .col-md-pull-7 {
     right: 58.33333333%;
   }
   .col-md-pull-6 {
     right: 50%;
   }
   .col-md-pull-5 {
     right: 41.66666667%;
   }
   .col-md-pull-4 {
     right: 33.33333333%;
   }
   .col-md-pull-3 {
     right: 25%;
   }
   .col-md-pull-2 {
     right: 16.66666667%;
   }
   .col-md-pull-1 {
     right: 8.33333333%;
   }
   .col-md-pull-0 {
     right: 0%;
   }
   .col-md-push-12 {
     left: 100%;
   }
   .col-md-push-11 {
     left: 91.66666667%;
   }
   .col-md-push-10 {
     left: 83.33333333%;
   }
   .col-md-push-9 {
     left: 75%;
   }
   .col-md-push-8 {
     left: 66.66666667%;
   }
   .col-md-push-7 {
     left: 58.33333333%;
   }
   .col-md-push-6 {
     left: 50%;
   }
   .col-md-push-5 {
     left: 41.66666667%;
   }
   .col-md-push-4 {
     left: 33.33333333%;
   }
   .col-md-push-3 {
     left: 25%;
   }
   .col-md-push-2 {
     left: 16.66666667%;
   }
   .col-md-push-1 {
     left: 8.33333333%;
   }
   .col-md-push-0 {
     left: 0%;
   }
   .col-md-offset-12 {
     margin-left: 100%;
   }
   .col-md-offset-11 {
     margin-left: 91.66666667%;
   }
   .col-md-offset-10 {
     margin-left: 83.33333333%;
   }
   .col-md-offset-9 {
     margin-left: 75%;
   }
   .col-md-offset-8 {
     margin-left: 66.66666667%;
   }
   .col-md-offset-7 {
     margin-left: 58.33333333%;
   }
   .col-md-offset-6 {
     margin-left: 50%;
   }
   .col-md-offset-5 {
     margin-left: 41.66666667%;
   }
   .col-md-offset-4 {
     margin-left: 33.33333333%;
   }
   .col-md-offset-3 {
     margin-left: 25%;
   }
   .col-md-offset-2 {
     margin-left: 16.66666667%;
   }
   .col-md-offset-1 {
     margin-left: 8.33333333%;
   }
   .col-md-offset-0 {
     margin-left: 0%;
   }
 }
 @media (min-width: 1200px) {
   .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
     float: left;
   }
   .col-lg-12 {
     width: 100%;
   }
   .col-lg-11 {
     width: 91.66666667%;
   }
   .col-lg-10 {
     width: 83.33333333%;
   }
   .col-lg-9 {
     width: 75%;
   }
   .col-lg-8 {
     width: 66.66666667%;
   }
   .col-lg-7 {
     width: 58.33333333%;
   }
   .col-lg-6 {
     width: 50%;
   }
   .col-lg-5 {
     width: 41.66666667%;
   }
   .col-lg-4 {
     width: 33.33333333%;
   }
   .col-lg-3 {
     width: 25%;
   }
   .col-lg-2 {
     width: 16.66666667%;
   }
   .col-lg-1 {
     width: 8.33333333%;
   }
   .col-lg-pull-12 {
     right: 100%;
   }
   .col-lg-pull-11 {
     right: 91.66666667%;
   }
   .col-lg-pull-10 {
     right: 83.33333333%;
   }
   .col-lg-pull-9 {
     right: 75%;
   }
   .col-lg-pull-8 {
     right: 66.66666667%;
   }
   .col-lg-pull-7 {
     right: 58.33333333%;
   }
   .col-lg-pull-6 {
     right: 50%;
   }
   .col-lg-pull-5 {
     right: 41.66666667%;
   }
   .col-lg-pull-4 {
     right: 33.33333333%;
   }
   .col-lg-pull-3 {
     right: 25%;
   }
   .col-lg-pull-2 {
     right: 16.66666667%;
   }
   .col-lg-pull-1 {
     right: 8.33333333%;
   }
   .col-lg-pull-0 {
     right: 0%;
   }
   .col-lg-push-12 {
     left: 100%;
   }
   .col-lg-push-11 {
     left: 91.66666667%;
   }
   .col-lg-push-10 {
     left: 83.33333333%;
   }
   .col-lg-push-9 {
     left: 75%;
   }
   .col-lg-push-8 {
     left: 66.66666667%;
   }
   .col-lg-push-7 {
     left: 58.33333333%;
   }
   .col-lg-push-6 {
     left: 50%;
   }
   .col-lg-push-5 {
     left: 41.66666667%;
   }
   .col-lg-push-4 {
     left: 33.33333333%;
   }
   .col-lg-push-3 {
     left: 25%;
   }
   .col-lg-push-2 {
     left: 16.66666667%;
   }
   .col-lg-push-1 {
     left: 8.33333333%;
   }
   .col-lg-push-0 {
     left: 0%;
   }
   .col-lg-offset-12 {
     margin-left: 100%;
   }
   .col-lg-offset-11 {
     margin-left: 91.66666667%;
   }
   .col-lg-offset-10 {
     margin-left: 83.33333333%;
   }
   .col-lg-offset-9 {
     margin-left: 75%;
   }
   .col-lg-offset-8 {
     margin-left: 66.66666667%;
   }
   .col-lg-offset-7 {
     margin-left: 58.33333333%;
   }
   .col-lg-offset-6 {
     margin-left: 50%;
   }
   .col-lg-offset-5 {
     margin-left: 41.66666667%;
   }
   .col-lg-offset-4 {
     margin-left: 33.33333333%;
   }
   .col-lg-offset-3 {
     margin-left: 25%;
   }
   .col-lg-offset-2 {
     margin-left: 16.66666667%;
   }
   .col-lg-offset-1 {
     margin-left: 8.33333333%;
   }
   .col-lg-offset-0 {
     margin-left: 0%;
   }
 }
 table {
   max-width: 100%;
   background-color: transparent;
 }
 th {
   text-align: left;
 }
 .table {
   width: 100%;
   margin-bottom: 18px;
 }
 .table > thead > tr > th,
 .table > tbody > tr > th,
 .table > tfoot > tr > th,
 .table > thead > tr > td,
 .table > tbody > tr > td,
 .table > tfoot > tr > td {
   padding: 8px;
   line-height: 1.42857143;
   vertical-align: top;
   border-top: 1px solid #dddddd;
 }
 .table > thead > tr > th {
   vertical-align: bottom;
   border-bottom: 2px solid #dddddd;
 }
 .table > caption + thead > tr:first-child > th,
 .table > colgroup + thead > tr:first-child > th,
 .table > thead:first-child > tr:first-child > th,
 .table > caption + thead > tr:first-child > td,
 .table > colgroup + thead > tr:first-child > td,
 .table > thead:first-child > tr:first-child > td {
   border-top: 0;
 }
 .table > tbody + tbody {
   border-top: 2px solid #dddddd;
 }
 .table .table {
   background-color: #ffffff;
 }
 .table-condensed > thead > tr > th,
 .table-condensed > tbody > tr > th,
 .table-condensed > tfoot > tr > th,
 .table-condensed > thead > tr > td,
 .table-condensed > tbody > tr > td,
 .table-condensed > tfoot > tr > td {
   padding: 5px;
 }
 .table-bordered {
   border: 1px solid #dddddd;
 }
 .table-bordered > thead > tr > th,
 .table-bordered > tbody > tr > th,
 .table-bordered > tfoot > tr > th,
 .table-bordered > thead > tr > td,
 .table-bordered > tbody > tr > td,
 .table-bordered > tfoot > tr > td {
   border: 1px solid #dddddd;
 }
 .table-bordered > thead > tr > th,
 .table-bordered > thead > tr > td {
   border-bottom-width: 2px;
 }
 .table-striped > tbody > tr:nth-child(odd) > td,
 .table-striped > tbody > tr:nth-child(odd) > th {
   background-color: #f9f9f9;
 }
 .table-hover > tbody > tr:hover > td,
 .table-hover > tbody > tr:hover > th {
   background-color: #f5f5f5;
 }
 table col[class*="col-"] {
   position: static;
   float: none;
   display: table-column;
 }
 table td[class*="col-"],
 table th[class*="col-"] {
   position: static;
   float: none;
   display: table-cell;
 }
 .table > thead > tr > td.active,
 .table > tbody > tr > td.active,
 .table > tfoot > tr > td.active,
 .table > thead > tr > th.active,
 .table > tbody > tr > th.active,
 .table > tfoot > tr > th.active,
 .table > thead > tr.active > td,
 .table > tbody > tr.active > td,
 .table > tfoot > tr.active > td,
 .table > thead > tr.active > th,
 .table > tbody > tr.active > th,
 .table > tfoot > tr.active > th {
   background-color: #f5f5f5;
 }
 .table-hover > tbody > tr > td.active:hover,
 .table-hover > tbody > tr > th.active:hover,
 .table-hover > tbody > tr.active:hover > td,
 .table-hover > tbody > tr.active:hover > th {
   background-color: #e8e8e8;
 }
 .table > thead > tr > td.success,
 .table > tbody > tr > td.success,
 .table > tfoot > tr > td.success,
 .table > thead > tr > th.success,
 .table > tbody > tr > th.success,
 .table > tfoot > tr > th.success,
 .table > thead > tr.success > td,
 .table > tbody > tr.success > td,
 .table > tfoot > tr.success > td,
 .table > thead > tr.success > th,
 .table > tbody > tr.success > th,
 .table > tfoot > tr.success > th {
   background-color: #dff0d8;
 }
 .table-hover > tbody > tr > td.success:hover,
 .table-hover > tbody > tr > th.success:hover,
 .table-hover > tbody > tr.success:hover > td,
 .table-hover > tbody > tr.success:hover > th {
   background-color: #d0e9c6;
 }
 .table > thead > tr > td.info,
 .table > tbody > tr > td.info,
 .table > tfoot > tr > td.info,
 .table > thead > tr > th.info,
 .table > tbody > tr > th.info,
 .table > tfoot > tr > th.info,
 .table > thead > tr.info > td,
 .table > tbody > tr.info > td,
 .table > tfoot > tr.info > td,
 .table > thead > tr.info > th,
 .table > tbody > tr.info > th,
 .table > tfoot > tr.info > th {
   background-color: #d9edf7;
 }
 .table-hover > tbody > tr > td.info:hover,
 .table-hover > tbody > tr > th.info:hover,
 .table-hover > tbody > tr.info:hover > td,
 .table-hover > tbody > tr.info:hover > th {
   background-color: #c4e3f3;
 }
 .table > thead > tr > td.warning,
 .table > tbody > tr > td.warning,
 .table > tfoot > tr > td.warning,
 .table > thead > tr > th.warning,
 .table > tbody > tr > th.warning,
 .table > tfoot > tr > th.warning,
 .table > thead > tr.warning > td,
 .table > tbody > tr.warning > td,
 .table > tfoot > tr.warning > td,
 .table > thead > tr.warning > th,
 .table > tbody > tr.warning > th,
 .table > tfoot > tr.warning > th {
   background-color: #fcf8e3;
 }
 .table-hover > tbody > tr > td.warning:hover,
 .table-hover > tbody > tr > th.warning:hover,
 .table-hover > tbody > tr.warning:hover > td,
 .table-hover > tbody > tr.warning:hover > th {
   background-color: #faf2cc;
 }
 .table > thead > tr > td.danger,
 .table > tbody > tr > td.danger,
 .table > tfoot > tr > td.danger,
 .table > thead > tr > th.danger,
 .table > tbody > tr > th.danger,
 .table > tfoot > tr > th.danger,
 .table > thead > tr.danger > td,
 .table > tbody > tr.danger > td,
 .table > tfoot > tr.danger > td,
 .table > thead > tr.danger > th,
 .table > tbody > tr.danger > th,
 .table > tfoot > tr.danger > th {
   background-color: #f2dede;
 }
 .table-hover > tbody > tr > td.danger:hover,
 .table-hover > tbody > tr > th.danger:hover,
 .table-hover > tbody > tr.danger:hover > td,
 .table-hover > tbody > tr.danger:hover > th {
   background-color: #ebcccc;
 }
 @media (max-width: 767px) {
   .table-responsive {
     width: 100%;
     margin-bottom: 13.5px;
     overflow-y: hidden;
     overflow-x: scroll;
     -ms-overflow-style: -ms-autohiding-scrollbar;
     border: 1px solid #dddddd;
     -webkit-overflow-scrolling: touch;
   }
   .table-responsive > .table {
     margin-bottom: 0;
   }
   .table-responsive > .table > thead > tr > th,
   .table-responsive > .table > tbody > tr > th,
   .table-responsive > .table > tfoot > tr > th,
   .table-responsive > .table > thead > tr > td,
   .table-responsive > .table > tbody > tr > td,
   .table-responsive > .table > tfoot > tr > td {
     white-space: nowrap;
   }
   .table-responsive > .table-bordered {
     border: 0;
   }
   .table-responsive > .table-bordered > thead > tr > th:first-child,
   .table-responsive > .table-bordered > tbody > tr > th:first-child,
   .table-responsive > .table-bordered > tfoot > tr > th:first-child,
   .table-responsive > .table-bordered > thead > tr > td:first-child,
   .table-responsive > .table-bordered > tbody > tr > td:first-child,
   .table-responsive > .table-bordered > tfoot > tr > td:first-child {
     border-left: 0;
   }
   .table-responsive > .table-bordered > thead > tr > th:last-child,
   .table-responsive > .table-bordered > tbody > tr > th:last-child,
   .table-responsive > .table-bordered > tfoot > tr > th:last-child,
   .table-responsive > .table-bordered > thead > tr > td:last-child,
   .table-responsive > .table-bordered > tbody > tr > td:last-child,
   .table-responsive > .table-bordered > tfoot > tr > td:last-child {
     border-right: 0;
   }
   .table-responsive > .table-bordered > tbody > tr:last-child > th,
   .table-responsive > .table-bordered > tfoot > tr:last-child > th,
   .table-responsive > .table-bordered > tbody > tr:last-child > td,
   .table-responsive > .table-bordered > tfoot > tr:last-child > td {
     border-bottom: 0;
   }
 }
 fieldset {
   padding: 0;
   margin: 0;
   border: 0;
   min-width: 0;
 }
 legend {
   display: block;
   width: 100%;
   padding: 0;
   margin-bottom: 18px;
   font-size: 19.5px;
   line-height: inherit;
   color: #333333;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
 }
 label {
   display: inline-block;
   margin-bottom: 5px;
   font-weight: bold;
 }
 input[type="search"] {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 input[type="radio"],
 input[type="checkbox"] {
   margin: 4px 0 0;
   margin-top: 1px \9;
   /* IE8-9 */
   line-height: normal;
 }
 input[type="file"] {
   display: block;
 }
 input[type="range"] {
   display: block;
   width: 100%;
 }
 select[multiple],
 select[size] {
   height: auto;
 }
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
 output {
   display: block;
   padding-top: 7px;
   font-size: 13px;
   line-height: 1.42857143;
   color: #555555;
 }
 .form-control {
   display: block;
   width: 100%;
   height: 32px;
   padding: 6px 12px;
   font-size: 13px;
   line-height: 1.42857143;
   color: #555555;
   background-color: #ffffff;
   background-image: none;
   border: 1px solid #cccccc;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
   transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 }
 .form-control:focus {
   border-color: #66afe9;
   outline: 0;
   -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
 }
 .form-control::-moz-placeholder {
   color: #999999;
   opacity: 1;
 }
 .form-control:-ms-input-placeholder {
   color: #999999;
 }
 .form-control::-webkit-input-placeholder {
   color: #999999;
 }
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
   cursor: not-allowed;
   background-color: #eeeeee;
   opacity: 1;
 }
 textarea.form-control {
   height: auto;
 }
 input[type="search"] {
   -webkit-appearance: none;
 }
 input[type="date"] {
   line-height: 32px;
 }
 .form-group {
   margin-bottom: 15px;
 }
 .radio,
 .checkbox {
   display: block;
   min-height: 18px;
   margin-top: 10px;
   margin-bottom: 10px;
   padding-left: 20px;
 }
 .radio label,
 .checkbox label {
   display: inline;
   font-weight: normal;
   cursor: pointer;
 }
 .radio input[type="radio"],
 .radio-inline input[type="radio"],
 .checkbox input[type="checkbox"],
 .checkbox-inline input[type="checkbox"] {
   float: left;
   margin-left: -20px;
 }
 .radio + .radio,
 .checkbox + .checkbox {
   margin-top: -5px;
 }
 .radio-inline,
 .checkbox-inline {
   display: inline-block;
   padding-left: 20px;
   margin-bottom: 0;
   vertical-align: middle;
   font-weight: normal;
   cursor: pointer;
 }
 .radio-inline + .radio-inline,
 .checkbox-inline + .checkbox-inline {
   margin-top: 0;
   margin-left: 10px;
 }
 input[type="radio"][disabled],
 input[type="checkbox"][disabled],
 .radio[disabled],
 .radio-inline[disabled],
 .checkbox[disabled],
 .checkbox-inline[disabled],
 fieldset[disabled] input[type="radio"],
 fieldset[disabled] input[type="checkbox"],
 fieldset[disabled] .radio,
 fieldset[disabled] .radio-inline,
 fieldset[disabled] .checkbox,
 fieldset[disabled] .checkbox-inline {
   cursor: not-allowed;
 }
 .input-sm {
   height: 30px;
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px;
 }
 select.input-sm {
   height: 30px;
   line-height: 30px;
 }
 textarea.input-sm,
 select[multiple].input-sm {
   height: auto;
 }
 .input-lg {
   height: 45px;
   padding: 10px 16px;
   font-size: 17px;
   line-height: 1.33;
   border-radius: 6px;
 }
 select.input-lg {
   height: 45px;
   line-height: 45px;
 }
 textarea.input-lg,
 select[multiple].input-lg {
   height: auto;
 }
 .has-feedback {
   position: relative;
 }
 .has-feedback .form-control {
   padding-right: 40px;
 }
 .has-feedback .form-control-feedback {
   position: absolute;
   top: 23px;
   right: 0;
   display: block;
   width: 32px;
   height: 32px;
   line-height: 32px;
   text-align: center;
 }
 .has-success .help-block,
 .has-success .control-label,
 .has-success .radio,
 .has-success .checkbox,
 .has-success .radio-inline,
 .has-success .checkbox-inline {
   color: #3c763d;
 }
 .has-success .form-control {
   border-color: #3c763d;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 .has-success .form-control:focus {
   border-color: #2b542c;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
 }
 .has-success .input-group-addon {
   color: #3c763d;
   border-color: #3c763d;
   background-color: #dff0d8;
 }
 .has-success .form-control-feedback {
   color: #3c763d;
 }
 .has-warning .help-block,
 .has-warning .control-label,
 .has-warning .radio,
 .has-warning .checkbox,
 .has-warning .radio-inline,
 .has-warning .checkbox-inline {
   color: #8a6d3b;
 }
 .has-warning .form-control {
   border-color: #8a6d3b;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 .has-warning .form-control:focus {
   border-color: #66512c;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
 }
 .has-warning .input-group-addon {
   color: #8a6d3b;
   border-color: #8a6d3b;
   background-color: #fcf8e3;
 }
 .has-warning .form-control-feedback {
   color: #8a6d3b;
 }
 .has-error .help-block,
 .has-error .control-label,
 .has-error .radio,
 .has-error .checkbox,
 .has-error .radio-inline,
 .has-error .checkbox-inline {
   color: #a94442;
 }
 .has-error .form-control {
   border-color: #a94442;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 .has-error .form-control:focus {
   border-color: #843534;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
 }
 .has-error .input-group-addon {
   color: #a94442;
   border-color: #a94442;
   background-color: #f2dede;
 }
 .has-error .form-control-feedback {
   color: #a94442;
 }
 .form-control-static {
   margin-bottom: 0;
 }
 .help-block {
   display: block;
   margin-top: 5px;
   margin-bottom: 10px;
   color: #404040;
 }
 @media (min-width: 768px) {
   .form-inline .form-group {
     display: inline-block;
     margin-bottom: 0;
     vertical-align: middle;
   }
   .form-inline .form-control {
     display: inline-block;
     width: auto;
     vertical-align: middle;
   }
   .form-inline .input-group > .form-control {
     width: 100%;
   }
   .form-inline .control-label {
     margin-bottom: 0;
     vertical-align: middle;
   }
   .form-inline .radio,
   .form-inline .checkbox {
     display: inline-block;
     margin-top: 0;
     margin-bottom: 0;
     padding-left: 0;
     vertical-align: middle;
   }
   .form-inline .radio input[type="radio"],
   .form-inline .checkbox input[type="checkbox"] {
     float: none;
     margin-left: 0;
   }
   .form-inline .has-feedback .form-control-feedback {
     top: 0;
   }
 }
 .form-horizontal .control-label,
 .form-horizontal .radio,
 .form-horizontal .checkbox,
 .form-horizontal .radio-inline,
 .form-horizontal .checkbox-inline {
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 7px;
 }
 .form-horizontal .radio,
 .form-horizontal .checkbox {
   min-height: 25px;
 }
 .form-horizontal .form-group {
   margin-left: -15px;
   margin-right: -15px;
 }
 .form-horizontal .form-control-static {
   padding-top: 7px;
 }
 @media (min-width: 768px) {
   .form-horizontal .control-label {
     text-align: right;
   }
 }
 .form-horizontal .has-feedback .form-control-feedback {
   top: 0;
   right: 15px;
 }
 .btn {
   display: inline-block;
   margin-bottom: 0;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   background-image: none;
   border: 1px solid transparent;
   white-space: nowrap;
   padding: 6px 12px;
   font-size: 13px;
   line-height: 1.42857143;
   border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 .btn:focus,
 .btn:active:focus,
 .btn.active:focus {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
 .btn:hover,
 .btn:focus {
   color: #333333;
   text-decoration: none;
 }
 .btn:active,
 .btn.active {
   outline: 0;
   background-image: none;
   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 .btn.disabled,
 .btn[disabled],
 fieldset[disabled] .btn {
   cursor: not-allowed;
   pointer-events: none;
   opacity: 0.65;
   filter: alpha(opacity=65);
   -webkit-box-shadow: none;
   box-shadow: none;
 }
 .btn-default {
   color: #333333;
   background-color: #ffffff;
   border-color: #cccccc;
 }
 .btn-default:hover,
 .btn-default:focus,
 .btn-default:active,
 .btn-default.active,
 .open .dropdown-toggle.btn-default {
   color: #333333;
   background-color: #ebebeb;
   border-color: #adadad;
 }
 .btn-default:active,
 .btn-default.active,
 .open .dropdown-toggle.btn-default {
   background-image: none;
 }
 .btn-default.disabled,
 .btn-default[disabled],
 fieldset[disabled] .btn-default,
 .btn-default.disabled:hover,
 .btn-default[disabled]:hover,
 fieldset[disabled] .btn-default:hover,
 .btn-default.disabled:focus,
 .btn-default[disabled]:focus,
 fieldset[disabled] .btn-default:focus,
 .btn-default.disabled:active,
 .btn-default[disabled]:active,
 fieldset[disabled] .btn-default:active,
 .btn-default.disabled.active,
 .btn-default[disabled].active,
 fieldset[disabled] .btn-default.active {
   background-color: #ffffff;
   border-color: #cccccc;
 }
 .btn-default .badge {
   color: #ffffff;
   background-color: #333333;
 }
 .btn-primary {
   color: #ffffff;
   background-color: #428bca;
   border-color: #357ebd;
 }
 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary:active,
 .btn-primary.active,
 .open .dropdown-toggle.btn-primary {
   color: #ffffff;
   background-color: #3276b1;
   border-color: #285e8e;
 }
 .btn-primary:active,
 .btn-primary.active,
 .open .dropdown-toggle.btn-primary {
   background-image: none;
 }
 .btn-primary.disabled,
 .btn-primary[disabled],
 fieldset[disabled] .btn-primary,
 .btn-primary.disabled:hover,
 .btn-primary[disabled]:hover,
 fieldset[disabled] .btn-primary:hover,
 .btn-primary.disabled:focus,
 .btn-primary[disabled]:focus,
 fieldset[disabled] .btn-primary:focus,
 .btn-primary.disabled:active,
 .btn-primary[disabled]:active,
 fieldset[disabled] .btn-primary:active,
 .btn-primary.disabled.active,
 .btn-primary[disabled].active,
 fieldset[disabled] .btn-primary.active {
   background-color: #428bca;
   border-color: #357ebd;
 }
 .btn-primary .badge {
   color: #428bca;
   background-color: #ffffff;
 }
 .btn-success {
   color: #ffffff;
   background-color: #5cb85c;
   border-color: #4cae4c;
 }
 .btn-success:hover,
 .btn-success:focus,
 .btn-success:active,
 .btn-success.active,
 .open .dropdown-toggle.btn-success {
   color: #ffffff;
   background-color: #47a447;
   border-color: #398439;
 }
 .btn-success:active,
 .btn-success.active,
 .open .dropdown-toggle.btn-success {
   background-image: none;
 }
 .btn-success.disabled,
 .btn-success[disabled],
 fieldset[disabled] .btn-success,
 .btn-success.disabled:hover,
 .btn-success[disabled]:hover,
 fieldset[disabled] .btn-success:hover,
 .btn-success.disabled:focus,
 .btn-success[disabled]:focus,
 fieldset[disabled] .btn-success:focus,
 .btn-success.disabled:active,
 .btn-success[disabled]:active,
 fieldset[disabled] .btn-success:active,
 .btn-success.disabled.active,
 .btn-success[disabled].active,
 fieldset[disabled] .btn-success.active {
   background-color: #5cb85c;
   border-color: #4cae4c;
 }
 .btn-success .badge {
   color: #5cb85c;
   background-color: #ffffff;
 }
 .btn-info {
   color: #ffffff;
   background-color: #5bc0de;
   border-color: #46b8da;
 }
 .btn-info:hover,
 .btn-info:focus,
 .btn-info:active,
 .btn-info.active,
 .open .dropdown-toggle.btn-info {
   color: #ffffff;
   background-color: #39b3d7;
   border-color: #269abc;
 }
 .btn-info:active,
 .btn-info.active,
 .open .dropdown-toggle.btn-info {
   background-image: none;
 }
 .btn-info.disabled,
 .btn-info[disabled],
 fieldset[disabled] .btn-info,
 .btn-info.disabled:hover,
 .btn-info[disabled]:hover,
 fieldset[disabled] .btn-info:hover,
 .btn-info.disabled:focus,
 .btn-info[disabled]:focus,
 fieldset[disabled] .btn-info:focus,
 .btn-info.disabled:active,
 .btn-info[disabled]:active,
 fieldset[disabled] .btn-info:active,
 .btn-info.disabled.active,
 .btn-info[disabled].active,
 fieldset[disabled] .btn-info.active {
   background-color: #5bc0de;
   border-color: #46b8da;
 }
 .btn-info .badge {
   color: #5bc0de;
   background-color: #ffffff;
 }
 .btn-warning {
   color: #ffffff;
   background-color: #f0ad4e;
   border-color: #eea236;
 }
 .btn-warning:hover,
 .btn-warning:focus,
 .btn-warning:active,
 .btn-warning.active,
 .open .dropdown-toggle.btn-warning {
   color: #ffffff;
   background-color: #ed9c28;
   border-color: #d58512;
 }
 .btn-warning:active,
 .btn-warning.active,
 .open .dropdown-toggle.btn-warning {
   background-image: none;
 }
 .btn-warning.disabled,
 .btn-warning[disabled],
 fieldset[disabled] .btn-warning,
 .btn-warning.disabled:hover,
 .btn-warning[disabled]:hover,
 fieldset[disabled] .btn-warning:hover,
 .btn-warning.disabled:focus,
 .btn-warning[disabled]:focus,
 fieldset[disabled] .btn-warning:focus,
 .btn-warning.disabled:active,
 .btn-warning[disabled]:active,
 fieldset[disabled] .btn-warning:active,
 .btn-warning.disabled.active,
 .btn-warning[disabled].active,
 fieldset[disabled] .btn-warning.active {
   background-color: #f0ad4e;
   border-color: #eea236;
 }
 .btn-warning .badge {
   color: #f0ad4e;
   background-color: #ffffff;
 }
 .btn-danger {
   color: #ffffff;
   background-color: #d9534f;
   border-color: #d43f3a;
 }
 .btn-danger:hover,
 .btn-danger:focus,
 .btn-danger:active,
 .btn-danger.active,
 .open .dropdown-toggle.btn-danger {
   color: #ffffff;
   background-color: #d2322d;
   border-color: #ac2925;
 }
 .btn-danger:active,
 .btn-danger.active,
 .open .dropdown-toggle.btn-danger {
   background-image: none;
 }
 .btn-danger.disabled,
 .btn-danger[disabled],
 fieldset[disabled] .btn-danger,
 .btn-danger.disabled:hover,
 .btn-danger[disabled]:hover,
 fieldset[disabled] .btn-danger:hover,
 .btn-danger.disabled:focus,
 .btn-danger[disabled]:focus,
 fieldset[disabled] .btn-danger:focus,
 .btn-danger.disabled:active,
 .btn-danger[disabled]:active,
 fieldset[disabled] .btn-danger:active,
 .btn-danger.disabled.active,
 .btn-danger[disabled].active,
 fieldset[disabled] .btn-danger.active {
   background-color: #d9534f;
   border-color: #d43f3a;
 }
 .btn-danger .badge {
   color: #d9534f;
   background-color: #ffffff;
 }
 .btn-link {
   color: #428bca;
   font-weight: normal;
   cursor: pointer;
   border-radius: 0;
 }
 .btn-link,
 .btn-link:active,
 .btn-link[disabled],
 fieldset[disabled] .btn-link {
   background-color: transparent;
   -webkit-box-shadow: none;
   box-shadow: none;
 }
 .btn-link,
 .btn-link:hover,
 .btn-link:focus,
 .btn-link:active {
   border-color: transparent;
 }
 .btn-link:hover,
 .btn-link:focus {
   color: #2a6496;
   text-decoration: underline;
   background-color: transparent;
 }
 .btn-link[disabled]:hover,
 fieldset[disabled] .btn-link:hover,
 .btn-link[disabled]:focus,
 fieldset[disabled] .btn-link:focus {
   color: #999999;
   text-decoration: none;
 }
 .btn-lg,
 .btn-group-lg > .btn {
   padding: 10px 16px;
   font-size: 17px;
   line-height: 1.33;
   border-radius: 6px;
 }
 .btn-sm,
 .btn-group-sm > .btn {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px;
 }
 .btn-xs,
 .btn-group-xs > .btn {
   padding: 1px 5px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px;
 }
 .btn-block {
   display: block;
   width: 100%;
   padding-left: 0;
   padding-right: 0;
 }
 .btn-block + .btn-block {
   margin-top: 5px;
 }
 input[type="submit"].btn-block,
 input[type="reset"].btn-block,
 input[type="button"].btn-block {
   width: 100%;
 }
 .fade {
   opacity: 0;
   -webkit-transition: opacity 0.15s linear;
   transition: opacity 0.15s linear;
 }
 .fade.in {
   opacity: 1;
 }
 .collapse {
   display: none;
 }
 .collapse.in {
   display: block;
 }
 .collapsing {
   position: relative;
   height: 0;
   overflow: hidden;
   -webkit-transition: height 0.35s ease;
   transition: height 0.35s ease;
 }
 @font-face {
   font-family: 'Glyphicons Halflings';
   src: url('../fonts/glyphicons-halflings-regular.eot');
   src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
 }
 .glyphicon {
   position: relative;
   top: 1px;
   display: inline-block;
   font-family: 'Glyphicons Halflings';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 .glyphicon-asterisk:before {
   content: "\2a";
 }
 .glyphicon-plus:before {
   content: "\2b";
 }
 .glyphicon-euro:before {
   content: "\20ac";
 }
 .glyphicon-minus:before {
   content: "\2212";
 }
 .glyphicon-cloud:before {
   content: "\2601";
 }
 .glyphicon-envelope:before {
   content: "\2709";
 }
 .glyphicon-pencil:before {
   content: "\270f";
 }
 .glyphicon-glass:before {
   content: "\e001";
 }
 .glyphicon-music:before {
   content: "\e002";
 }
 .glyphicon-search:before {
   content: "\e003";
 }
 .glyphicon-heart:before {
   content: "\e005";
 }
 .glyphicon-star:before {
   content: "\e006";
 }
 .glyphicon-star-empty:before {
   content: "\e007";
 }
 .glyphicon-user:before {
   content: "\e008";
 }
 .glyphicon-film:before {
   content: "\e009";
 }
 .glyphicon-th-large:before {
   content: "\e010";
 }
 .glyphicon-th:before {
   content: "\e011";
 }
 .glyphicon-th-list:before {
   content: "\e012";
 }
 .glyphicon-ok:before {
   content: "\e013";
 }
 .glyphicon-remove:before {
   content: "\e014";
 }
 .glyphicon-zoom-in:before {
   content: "\e015";
 }
 .glyphicon-zoom-out:before {
   content: "\e016";
 }
 .glyphicon-off:before {
   content: "\e017";
 }
 .glyphicon-signal:before {
   content: "\e018";
 }
 .glyphicon-cog:before {
   content: "\e019";
 }
 .glyphicon-trash:before {
   content: "\e020";
 }
 .glyphicon-home:before {
   content: "\e021";
 }
 .glyphicon-file:before {
   content: "\e022";
 }
 .glyphicon-time:before {
   content: "\e023";
 }
 .glyphicon-road:before {
   content: "\e024";
 }
 .glyphicon-download-alt:before {
   content: "\e025";
 }
 .glyphicon-download:before {
   content: "\e026";
 }
 .glyphicon-upload:before {
   content: "\e027";
 }
 .glyphicon-inbox:before {
   content: "\e028";
 }
 .glyphicon-play-circle:before {
   content: "\e029";
 }
 .glyphicon-repeat:before {
   content: "\e030";
 }
 .glyphicon-refresh:before {
   content: "\e031";
 }
 .glyphicon-list-alt:before {
   content: "\e032";
 }
 .glyphicon-lock:before {
   content: "\e033";
 }
 .glyphicon-flag:before {
   content: "\e034";
 }
 .glyphicon-headphones:before {
   content: "\e035";
 }
 .glyphicon-volume-off:before {
   content: "\e036";
 }
 .glyphicon-volume-down:before {
   content: "\e037";
 }
 .glyphicon-volume-up:before {
   content: "\e038";
 }
 .glyphicon-qrcode:before {
   content: "\e039";
 }
 .glyphicon-barcode:before {
   content: "\e040";
 }
 .glyphicon-tag:before {
   content: "\e041";
 }
 .glyphicon-tags:before {
   content: "\e042";
 }
 .glyphicon-book:before {
   content: "\e043";
 }
 .glyphicon-bookmark:before {
   content: "\e044";
 }
 .glyphicon-print:before {
   content: "\e045";
 }
 .glyphicon-camera:before {
   content: "\e046";
 }
 .glyphicon-font:before {
   content: "\e047";
 }
 .glyphicon-bold:before {
   content: "\e048";
 }
 .glyphicon-italic:before {
   content: "\e049";
 }
 .glyphicon-text-height:before {
   content: "\e050";
 }
 .glyphicon-text-width:before {
   content: "\e051";
 }
 .glyphicon-align-left:before {
   content: "\e052";
 }
 .glyphicon-align-center:before {
   content: "\e053";
 }
 .glyphicon-align-right:before {
   content: "\e054";
 }
 .glyphicon-align-justify:before {
   content: "\e055";
 }
 .glyphicon-list:before {
   content: "\e056";
 }
 .glyphicon-indent-left:before {
   content: "\e057";
 }
 .glyphicon-indent-right:before {
   content: "\e058";
 }
 .glyphicon-facetime-video:before {
   content: "\e059";
 }
 .glyphicon-picture:before {
   content: "\e060";
 }
 .glyphicon-map-marker:before {
   content: "\e062";
 }
 .glyphicon-adjust:before {
   content: "\e063";
 }
 .glyphicon-tint:before {
   content: "\e064";
 }
 .glyphicon-edit:before {
   content: "\e065";
 }
 .glyphicon-share:before {
   content: "\e066";
 }
 .glyphicon-check:before {
   content: "\e067";
 }
 .glyphicon-move:before {
   content: "\e068";
 }
 .glyphicon-step-backward:before {
   content: "\e069";
 }
 .glyphicon-fast-backward:before {
   content: "\e070";
 }
 .glyphicon-backward:before {
   content: "\e071";
 }
 .glyphicon-play:before {
   content: "\e072";
 }
 .glyphicon-pause:before {
   content: "\e073";
 }
 .glyphicon-stop:before {
   content: "\e074";
 }
 .glyphicon-forward:before {
   content: "\e075";
 }
 .glyphicon-fast-forward:before {
   content: "\e076";
 }
 .glyphicon-step-forward:before {
   content: "\e077";
 }
 .glyphicon-eject:before {
   content: "\e078";
 }
 .glyphicon-chevron-left:before {
   content: "\e079";
 }
 .glyphicon-chevron-right:before {
   content: "\e080";
 }
 .glyphicon-plus-sign:before {
   content: "\e081";
 }
 .glyphicon-minus-sign:before {
   content: "\e082";
 }
 .glyphicon-remove-sign:before {
   content: "\e083";
 }
 .glyphicon-ok-sign:before {
   content: "\e084";
 }
 .glyphicon-question-sign:before {
   content: "\e085";
 }
 .glyphicon-info-sign:before {
   content: "\e086";
 }
 .glyphicon-screenshot:before {
   content: "\e087";
 }
 .glyphicon-remove-circle:before {
   content: "\e088";
 }
 .glyphicon-ok-circle:before {
   content: "\e089";
 }
 .glyphicon-ban-circle:before {
   content: "\e090";
 }
 .glyphicon-arrow-left:before {
   content: "\e091";
 }
 .glyphicon-arrow-right:before {
   content: "\e092";
 }
 .glyphicon-arrow-up:before {
   content: "\e093";
 }
 .glyphicon-arrow-down:before {
   content: "\e094";
 }
 .glyphicon-share-alt:before {
   content: "\e095";
 }
 .glyphicon-resize-full:before {
   content: "\e096";
 }
 .glyphicon-resize-small:before {
   content: "\e097";
 }
 .glyphicon-exclamation-sign:before {
   content: "\e101";
 }
 .glyphicon-gift:before {
   content: "\e102";
 }
 .glyphicon-leaf:before {
   content: "\e103";
 }
 .glyphicon-fire:before {
   content: "\e104";
 }
 .glyphicon-eye-open:before {
   content: "\e105";
 }
 .glyphicon-eye-close:before {
   content: "\e106";
 }
 .glyphicon-warning-sign:before {
   content: "\e107";
 }
 .glyphicon-plane:before {
   content: "\e108";
 }
 .glyphicon-calendar:before {
   content: "\e109";
 }
 .glyphicon-random:before {
   content: "\e110";
 }
 .glyphicon-comment:before {
   content: "\e111";
 }
 .glyphicon-magnet:before {
   content: "\e112";
 }
 .glyphicon-chevron-up:before {
   content: "\e113";
 }
 .glyphicon-chevron-down:before {
   content: "\e114";
 }
 .glyphicon-retweet:before {
   content: "\e115";
 }
 .glyphicon-shopping-cart:before {
   content: "\e116";
 }
 .glyphicon-folder-close:before {
   content: "\e117";
 }
 .glyphicon-folder-open:before {
   content: "\e118";
 }
 .glyphicon-resize-vertical:before {
   content: "\e119";
 }
 .glyphicon-resize-horizontal:before {
   content: "\e120";
 }
 .glyphicon-hdd:before {
   content: "\e121";
 }
 .glyphicon-bullhorn:before {
   content: "\e122";
 }
 .glyphicon-bell:before {
   content: "\e123";
 }
 .glyphicon-certificate:before {
   content: "\e124";
 }
 .glyphicon-thumbs-up:before {
   content: "\e125";
 }
 .glyphicon-thumbs-down:before {
   content: "\e126";
 }
 .glyphicon-hand-right:before {
   content: "\e127";
 }
 .glyphicon-hand-left:before {
   content: "\e128";
 }
 .glyphicon-hand-up:before {
   content: "\e129";
 }
 .glyphicon-hand-down:before {
   content: "\e130";
 }
 .glyphicon-circle-arrow-right:before {
   content: "\e131";
 }
 .glyphicon-circle-arrow-left:before {
   content: "\e132";
 }
 .glyphicon-circle-arrow-up:before {
   content: "\e133";
 }
 .glyphicon-circle-arrow-down:before {
   content: "\e134";
 }
 .glyphicon-globe:before {
   content: "\e135";
 }
 .glyphicon-wrench:before {
   content: "\e136";
 }
 .glyphicon-tasks:before {
   content: "\e137";
 }
 .glyphicon-filter:before {
   content: "\e138";
 }
 .glyphicon-briefcase:before {
   content: "\e139";
 }
 .glyphicon-fullscreen:before {
   content: "\e140";
 }
 .glyphicon-dashboard:before {
   content: "\e141";
 }
 .glyphicon-paperclip:before {
   content: "\e142";
 }
 .glyphicon-heart-empty:before {
   content: "\e143";
 }
 .glyphicon-link:before {
   content: "\e144";
 }
 .glyphicon-phone:before {
   content: "\e145";
 }
 .glyphicon-pushpin:before {
   content: "\e146";
 }
 .glyphicon-usd:before {
   content: "\e148";
 }
 .glyphicon-gbp:before {
   content: "\e149";
 }
 .glyphicon-sort:before {
   content: "\e150";
 }
 .glyphicon-sort-by-alphabet:before {
   content: "\e151";
 }
 .glyphicon-sort-by-alphabet-alt:before {
   content: "\e152";
 }
 .glyphicon-sort-by-order:before {
   content: "\e153";
 }
 .glyphicon-sort-by-order-alt:before {
   content: "\e154";
 }
 .glyphicon-sort-by-attributes:before {
   content: "\e155";
 }
 .glyphicon-sort-by-attributes-alt:before {
   content: "\e156";
 }
 .glyphicon-unchecked:before {
   content: "\e157";
 }
 .glyphicon-expand:before {
   content: "\e158";
 }
 .glyphicon-collapse-down:before {
   content: "\e159";
 }
 .glyphicon-collapse-up:before {
   content: "\e160";
 }
 .glyphicon-log-in:before {
   content: "\e161";
 }
 .glyphicon-flash:before {
   content: "\e162";
 }
 .glyphicon-log-out:before {
   content: "\e163";
 }
 .glyphicon-new-window:before {
   content: "\e164";
 }
 .glyphicon-record:before {
   content: "\e165";
 }
 .glyphicon-save:before {
   content: "\e166";
 }
 .glyphicon-open:before {
   content: "\e167";
 }
 .glyphicon-saved:before {
   content: "\e168";
 }
 .glyphicon-import:before {
   content: "\e169";
 }
 .glyphicon-export:before {
   content: "\e170";
 }
 .glyphicon-send:before {
   content: "\e171";
 }
 .glyphicon-floppy-disk:before {
   content: "\e172";
 }
 .glyphicon-floppy-saved:before {
   content: "\e173";
 }
 .glyphicon-floppy-remove:before {
   content: "\e174";
 }
 .glyphicon-floppy-save:before {
   content: "\e175";
 }
 .glyphicon-floppy-open:before {
   content: "\e176";
 }
 .glyphicon-credit-card:before {
   content: "\e177";
 }
 .glyphicon-transfer:before {
   content: "\e178";
 }
 .glyphicon-cutlery:before {
   content: "\e179";
 }
 .glyphicon-header:before {
   content: "\e180";
 }
 .glyphicon-compressed:before {
   content: "\e181";
 }
 .glyphicon-earphone:before {
   content: "\e182";
 }
 .glyphicon-phone-alt:before {
   content: "\e183";
 }
 .glyphicon-tower:before {
   content: "\e184";
 }
 .glyphicon-stats:before {
   content: "\e185";
 }
 .glyphicon-sd-video:before {
   content: "\e186";
 }
 .glyphicon-hd-video:before {
   content: "\e187";
 }
 .glyphicon-subtitles:before {
   content: "\e188";
 }
 .glyphicon-sound-stereo:before {
   content: "\e189";
 }
 .glyphicon-sound-dolby:before {
   content: "\e190";
 }
 .glyphicon-sound-5-1:before {
   content: "\e191";
 }
 .glyphicon-sound-6-1:before {
   content: "\e192";
 }
 .glyphicon-sound-7-1:before {
   content: "\e193";
 }
 .glyphicon-copyright-mark:before {
   content: "\e194";
 }
 .glyphicon-registration-mark:before {
   content: "\e195";
 }
 .glyphicon-cloud-download:before {
   content: "\e197";
 }
 .glyphicon-cloud-upload:before {
   content: "\e198";
 }
 .glyphicon-tree-conifer:before {
   content: "\e199";
 }
 .glyphicon-tree-deciduous:before {
   content: "\e200";
 }
 .caret {
   display: inline-block;
   width: 0;
   height: 0;
   margin-left: 2px;
   vertical-align: middle;
   border-top: 4px solid;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
 }
 .dropdown {
   position: relative;
 }
 .dropdown-toggle:focus {
   outline: 0;
 }
 .dropdown-menu {
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 1000;
   display: none;
   float: left;
   min-width: 160px;
   padding: 5px 0;
   margin: 2px 0 0;
   list-style: none;
   font-size: 13px;
   background-color: #ffffff;
   border: 1px solid #cccccc;
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 4px;
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   background-clip: padding-box;
 }
 .dropdown-menu.pull-right {
   right: 0;
   left: auto;
 }
 .dropdown-menu .divider {
   height: 1px;
   margin: 8px 0;
   overflow: hidden;
   background-color: #e5e5e5;
 }
 .dropdown-menu > li > a {
   display: block;
   padding: 3px 20px;
   clear: both;
   font-weight: normal;
   line-height: 1.42857143;
   color: #333333;
   white-space: nowrap;
 }
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
   text-decoration: none;
   color: #262626;
   background-color: #f5f5f5;
 }
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
 .dropdown-menu > .active > a:focus {
   color: #ffffff;
   text-decoration: none;
   outline: 0;
   background-color: #428bca;
 }
 .dropdown-menu > .disabled > a,
 .dropdown-menu > .disabled > a:hover,
 .dropdown-menu > .disabled > a:focus {
   color: #999999;
 }
 .dropdown-menu > .disabled > a:hover,
 .dropdown-menu > .disabled > a:focus {
   text-decoration: none;
   background-color: transparent;
   background-image: none;
   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   cursor: not-allowed;
 }
 .open > .dropdown-menu {
   display: block;
 }
 .open > a {
   outline: 0;
 }
 .dropdown-menu-right {
   left: auto;
   right: 0;
 }
 .dropdown-menu-left {
   left: 0;
   right: auto;
 }
 .dropdown-header {
   display: block;
   padding: 3px 20px;
   font-size: 12px;
   line-height: 1.42857143;
   color: #999999;
 }
 .dropdown-backdrop {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   top: 0;
   z-index: 990;
 }
 .pull-right > .dropdown-menu {
   right: 0;
   left: auto;
 }
 .dropup .caret,
 .navbar-fixed-bottom .dropdown .caret {
   border-top: 0;
   border-bottom: 4px solid;
   content: "";
 }
 .dropup .dropdown-menu,
 .navbar-fixed-bottom .dropdown .dropdown-menu {
   top: auto;
   bottom: 100%;
   margin-bottom: 1px;
 }
 @media (min-width: 768px) {
   .navbar-right .dropdown-menu {
     left: auto;
     right: 0;
   }
   .navbar-right .dropdown-menu-left {
     left: 0;
     right: auto;
   }
 }
 .btn-group,
 .btn-group-vertical {
   position: relative;
   display: inline-block;
   vertical-align: middle;
 }
 .btn-group > .btn,
 .btn-group-vertical > .btn {
   position: relative;
   float: left;
 }
 .btn-group > .btn:hover,
 .btn-group-vertical > .btn:hover,
 .btn-group > .btn:focus,
 .btn-group-vertical > .btn:focus,
 .btn-group > .btn:active,
 .btn-group-vertical > .btn:active,
 .btn-group > .btn.active,
 .btn-group-vertical > .btn.active {
   z-index: 2;
 }
 .btn-group > .btn:focus,
 .btn-group-vertical > .btn:focus {
   outline: none;
 }
 .btn-group .btn + .btn,
 .btn-group .btn + .btn-group,
 .btn-group .btn-group + .btn,
 .btn-group .btn-group + .btn-group {
   margin-left: -1px;
 }
 .btn-toolbar {
   margin-left: -5px;
 }
 .btn-toolbar .btn-group,
 .btn-toolbar .input-group {
   float: left;
 }
 .btn-toolbar > .btn,
 .btn-toolbar > .btn-group,
 .btn-toolbar > .input-group {
   margin-left: 5px;
 }
 .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
   border-radius: 0;
 }
 .btn-group > .btn:first-child {
   margin-left: 0;
 }
 .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 .btn-group > .btn:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
 .btn-group > .btn-group {
   float: left;
 }
 .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
   border-radius: 0;
 }
 .btn-group > .btn-group:first-child > .btn:last-child,
 .btn-group > .btn-group:first-child > .dropdown-toggle {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 .btn-group > .btn-group:last-child > .btn:first-child {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
 .btn-group .dropdown-toggle:active,
 .btn-group.open .dropdown-toggle {
   outline: 0;
 }
 .btn-group > .btn + .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px;
 }
 .btn-group > .btn-lg + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px;
 }
 .btn-group.open .dropdown-toggle {
   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 .btn-group.open .dropdown-toggle.btn-link {
   -webkit-box-shadow: none;
   box-shadow: none;
 }
 .btn .caret {
   margin-left: 0;
 }
 .btn-lg .caret {
   border-width: 5px 5px 0;
   border-bottom-width: 0;
 }
 .dropup .btn-lg .caret {
   border-width: 0 5px 5px;
 }
 .btn-group-vertical > .btn,
 .btn-group-vertical > .btn-group,
 .btn-group-vertical > .btn-group > .btn {
   display: block;
   float: none;
   width: 100%;
   max-width: 100%;
 }
 .btn-group-vertical > .btn-group > .btn {
   float: none;
 }
 .btn-group-vertical > .btn + .btn,
 .btn-group-vertical > .btn + .btn-group,
 .btn-group-vertical > .btn-group + .btn,
 .btn-group-vertical > .btn-group + .btn-group {
   margin-top: -1px;
   margin-left: 0;
 }
 .btn-group-vertical > .btn:not(:first-child):not(:last-child) {
   border-radius: 0;
 }
 .btn-group-vertical > .btn:first-child:not(:last-child) {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 .btn-group-vertical > .btn:last-child:not(:first-child) {
   border-bottom-left-radius: 4px;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
 .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
   border-radius: 0;
 }
 .btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
 .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
 .btn-group-justified {
   display: table;
   width: 100%;
   table-layout: fixed;
   border-collapse: separate;
 }
 .btn-group-justified > .btn,
 .btn-group-justified > .btn-group {
   float: none;
   display: table-cell;
   width: 1%;
 }
 .btn-group-justified > .btn-group .btn {
   width: 100%;
 }
 [data-toggle="buttons"] > .btn > input[type="radio"],
 [data-toggle="buttons"] > .btn > input[type="checkbox"] {
   display: none;
 }
 .input-group {
   position: relative;
   display: table;
   border-collapse: separate;
 }
 .input-group[class*="col-"] {
   float: none;
   padding-left: 0;
   padding-right: 0;
 }
 .input-group .form-control {
   position: relative;
   z-index: 2;
   float: left;
   width: 100%;
   margin-bottom: 0;
 }
 .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .btn {
   height: 45px;
   padding: 10px 16px;
   font-size: 17px;
   line-height: 1.33;
   border-radius: 6px;
 }
 select.input-group-lg > .form-control,
 select.input-group-lg > .input-group-addon,
 select.input-group-lg > .input-group-btn > .btn {
   height: 45px;
   line-height: 45px;
 }
 textarea.input-group-lg > .form-control,
 textarea.input-group-lg > .input-group-addon,
 textarea.input-group-lg > .input-group-btn > .btn,
 select[multiple].input-group-lg > .form-control,
 select[multiple].input-group-lg > .input-group-addon,
 select[multiple].input-group-lg > .input-group-btn > .btn {
   height: auto;
 }
 .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
 .input-group-sm > .input-group-btn > .btn {
   height: 30px;
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px;
 }
 select.input-group-sm > .form-control,
 select.input-group-sm > .input-group-addon,
 select.input-group-sm > .input-group-btn > .btn {
   height: 30px;
   line-height: 30px;
 }
 textarea.input-group-sm > .form-control,
 textarea.input-group-sm > .input-group-addon,
 textarea.input-group-sm > .input-group-btn > .btn,
 select[multiple].input-group-sm > .form-control,
 select[multiple].input-group-sm > .input-group-addon,
 select[multiple].input-group-sm > .input-group-btn > .btn {
   height: auto;
 }
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
   display: table-cell;
 }
 .input-group-addon:not(:first-child):not(:last-child),
 .input-group-btn:not(:first-child):not(:last-child),
 .input-group .form-control:not(:first-child):not(:last-child) {
   border-radius: 0;
 }
 .input-group-addon,
 .input-group-btn {
   width: 1%;
   white-space: nowrap;
   vertical-align: middle;
 }
 .input-group-addon {
   padding: 6px 12px;
   font-size: 13px;
   font-weight: normal;
   line-height: 1;
   color: #555555;
   text-align: center;
   background-color: #eeeeee;
   border: 1px solid #cccccc;
   border-radius: 4px;
 }
 .input-group-addon.input-sm {
   padding: 5px 10px;
   font-size: 12px;
   border-radius: 3px;
 }
 .input-group-addon.input-lg {
   padding: 10px 16px;
   font-size: 17px;
   border-radius: 6px;
 }
 .input-group-addon input[type="radio"],
 .input-group-addon input[type="checkbox"] {
   margin-top: 0;
 }
 .input-group .form-control:first-child,
 .input-group-addon:first-child,
 .input-group-btn:first-child > .btn,
 .input-group-btn:first-child > .btn-group > .btn,
 .input-group-btn:first-child > .dropdown-toggle,
 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 .input-group-addon:first-child {
   border-right: 0;
 }
 .input-group .form-control:last-child,
 .input-group-addon:last-child,
 .input-group-btn:last-child > .btn,
 .input-group-btn:last-child > .btn-group > .btn,
 .input-group-btn:last-child > .dropdown-toggle,
 .input-group-btn:first-child > .btn:not(:first-child),
 .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
 .input-group-addon:last-child {
   border-left: 0;
 }
 .input-group-btn {
   position: relative;
   font-size: 0;
   white-space: nowrap;
 }
 .input-group-btn > .btn {
   position: relative;
 }
 .input-group-btn > .btn + .btn {
   margin-left: -1px;
 }
 .input-group-btn > .btn:hover,
 .input-group-btn > .btn:focus,
 .input-group-btn > .btn:active {
   z-index: 2;
 }
 .input-group-btn:first-child > .btn,
 .input-group-btn:first-child > .btn-group {
   margin-right: -1px;
 }
 .input-group-btn:last-child > .btn,
 .input-group-btn:last-child > .btn-group {
   margin-left: -1px;
 }
 .nav {
   margin-bottom: 0;
   padding-left: 0;
   list-style: none;
 }
 .nav > li {
   position: relative;
   display: block;
 }
 .nav > li > a {
   position: relative;
   display: block;
   padding: 10px 15px;
 }
 .nav > li > a:hover,
 .nav > li > a:focus {
   text-decoration: none;
   background-color: #eeeeee;
 }
 .nav > li.disabled > a {
   color: #999999;
 }
 .nav > li.disabled > a:hover,
 .nav > li.disabled > a:focus {
   color: #999999;
   text-decoration: none;
   background-color: transparent;
   cursor: not-allowed;
 }
 .nav .open > a,
 .nav .open > a:hover,
 .nav .open > a:focus {
   background-color: #eeeeee;
   border-color: #428bca;
 }
 .nav .nav-divider {
   height: 1px;
   margin: 8px 0;
   overflow: hidden;
   background-color: #e5e5e5;
 }
 .nav > li > a > img {
   max-width: none;
 }
 .nav-tabs {
   border-bottom: 1px solid #dddddd;
 }
 .nav-tabs > li {
   float: left;
   margin-bottom: -1px;
 }
 .nav-tabs > li > a {
   margin-right: 2px;
   line-height: 1.42857143;
   border: 1px solid transparent;
   border-radius: 4px 4px 0 0;
 }
 .nav-tabs > li > a:hover {
   border-color: #eeeeee #eeeeee #dddddd;
 }
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   color: #555555;
   background-color: #ffffff;
   border: 1px solid #dddddd;
   border-bottom-color: transparent;
   cursor: default;
 }
 .nav-tabs.nav-justified {
   width: 100%;
   border-bottom: 0;
 }
 .nav-tabs.nav-justified > li {
   float: none;
 }
 .nav-tabs.nav-justified > li > a {
   text-align: center;
   margin-bottom: 5px;
 }
 .nav-tabs.nav-justified > .dropdown .dropdown-menu {
   top: auto;
   left: auto;
 }
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li {
     display: table-cell;
     width: 1%;
   }
   .nav-tabs.nav-justified > li > a {
     margin-bottom: 0;
   }
 }
 .nav-tabs.nav-justified > li > a {
   margin-right: 0;
   border-radius: 4px;
 }
 .nav-tabs.nav-justified > .active > a,
 .nav-tabs.nav-justified > .active > a:hover,
 .nav-tabs.nav-justified > .active > a:focus {
   border: 1px solid #dddddd;
 }
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li > a {
     border-bottom: 1px solid #dddddd;
     border-radius: 4px 4px 0 0;
   }
   .nav-tabs.nav-justified > .active > a,
   .nav-tabs.nav-justified > .active > a:hover,
   .nav-tabs.nav-justified > .active > a:focus {
     border-bottom-color: #ffffff;
   }
 }
 .nav-pills > li {
   float: left;
 }
 .nav-pills > li > a {
   border-radius: 4px;
 }
 .nav-pills > li + li {
   margin-left: 2px;
 }
 .nav-pills > li.active > a,
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
   color: #ffffff;
   background-color: #428bca;
 }
 .nav-stacked > li {
   float: none;
 }
 .nav-stacked > li + li {
   margin-top: 2px;
   margin-left: 0;
 }
 .nav-justified {
   width: 100%;
 }
 .nav-justified > li {
   float: none;
 }
 .nav-justified > li > a {
   text-align: center;
   margin-bottom: 5px;
 }
 .nav-justified > .dropdown .dropdown-menu {
   top: auto;
   left: auto;
 }
 @media (min-width: 768px) {
   .nav-justified > li {
     display: table-cell;
     width: 1%;
   }
   .nav-justified > li > a {
     margin-bottom: 0;
   }
 }
 .nav-tabs-justified {
   border-bottom: 0;
 }
 .nav-tabs-justified > li > a {
   margin-right: 0;
   border-radius: 4px;
 }
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
 .nav-tabs-justified > .active > a:focus {
   border: 1px solid #dddddd;
 }
 @media (min-width: 768px) {
   .nav-tabs-justified > li > a {
     border-bottom: 1px solid #dddddd;
     border-radius: 4px 4px 0 0;
   }
   .nav-tabs-justified > .active > a,
   .nav-tabs-justified > .active > a:hover,
   .nav-tabs-justified > .active > a:focus {
     border-bottom-color: #ffffff;
   }
 }
 .tab-content > .tab-pane {
   display: none;
 }
 .tab-content > .active {
   display: block;
 }
 .nav-tabs .dropdown-menu {
   margin-top: -1px;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
 .navbar {
   position: relative;
   min-height: 36px;
   margin-bottom: 18px;
   border: 1px solid transparent;
 }
 @media (min-width: 768px) {
   .navbar {
     border-radius: 4px;
   }
 }
 @media (min-width: 768px) {
   .navbar-header {
     float: left;
   }
 }
 .navbar-collapse {
   max-height: 340px;
   overflow-x: visible;
   padding-right: 15px;
   padding-left: 15px;
   border-top: 1px solid transparent;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
   -webkit-overflow-scrolling: touch;
 }
 .navbar-collapse.in {
   overflow-y: auto;
 }
 @media (min-width: 768px) {
   .navbar-collapse {
     width: auto;
     border-top: 0;
     box-shadow: none;
   }
   .navbar-collapse.collapse {
     display: block !important;
     height: auto !important;
     padding-bottom: 0;
     overflow: visible !important;
   }
   .navbar-collapse.in {
     overflow-y: visible;
   }
   .navbar-fixed-top .navbar-collapse,
   .navbar-static-top .navbar-collapse,
   .navbar-fixed-bottom .navbar-collapse {
     padding-left: 0;
     padding-right: 0;
   }
 }
 .container > .navbar-header,
 .container-fluid > .navbar-header,
 .container > .navbar-collapse,
 .container-fluid > .navbar-collapse {
   margin-right: -15px;
   margin-left: -15px;
 }
 @media (min-width: 768px) {
   .container > .navbar-header,
   .container-fluid > .navbar-header,
   .container > .navbar-collapse,
   .container-fluid > .navbar-collapse {
     margin-right: 0;
     margin-left: 0;
   }
 }
 .navbar-static-top {
   z-index: 1000;
   border-width: 0 0 1px;
 }
 @media (min-width: 768px) {
   .navbar-static-top {
     border-radius: 0;
   }
 }
 .navbar-fixed-top,
 .navbar-fixed-bottom {
   position: fixed;
   right: 0;
   left: 0;
   z-index: 1030;
 }
 @media (min-width: 768px) {
   .navbar-fixed-top,
   .navbar-fixed-bottom {
     border-radius: 0;
   }
 }
 .navbar-fixed-top {
   top: 0;
   border-width: 0 0 1px;
 }
 .navbar-fixed-bottom {
   bottom: 0;
   margin-bottom: 0;
   border-width: 1px 0 0;
 }
 .navbar-brand {
   float: left;
   padding: 9px 15px;
   font-size: 17px;
   line-height: 18px;
   height: 36px;
 }
 .navbar-brand:hover,
 .navbar-brand:focus {
   text-decoration: none;
 }
 @media (min-width: 768px) {
   .navbar > .container .navbar-brand,
   .navbar > .container-fluid .navbar-brand {
     margin-left: -15px;
   }
 }
 .navbar-toggle {
   position: relative;
   float: right;
   margin-right: 15px;
   padding: 9px 10px;
   margin-top: 1px;
   margin-bottom: 1px;
   background-color: transparent;
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
 }
 .navbar-toggle:focus {
   outline: none;
 }
 .navbar-toggle .icon-bar {
   display: block;
   width: 22px;
   height: 2px;
   border-radius: 1px;
 }
 .navbar-toggle .icon-bar + .icon-bar {
   margin-top: 4px;
 }
 @media (min-width: 768px) {
   .navbar-toggle {
     display: none;
   }
 }
 .navbar-nav {
   margin: 4.5px -15px;
 }
 .navbar-nav > li > a {
   padding-top: 10px;
   padding-bottom: 10px;
   line-height: 18px;
 }
 @media (max-width: 767px) {
   .navbar-nav .open .dropdown-menu {
     position: static;
     float: none;
     width: auto;
     margin-top: 0;
     background-color: transparent;
     border: 0;
     box-shadow: none;
   }
   .navbar-nav .open .dropdown-menu > li > a,
   .navbar-nav .open .dropdown-menu .dropdown-header {
     padding: 5px 15px 5px 25px;
   }
   .navbar-nav .open .dropdown-menu > li > a {
     line-height: 18px;
   }
   .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-nav .open .dropdown-menu > li > a:focus {
     background-image: none;
   }
 }
 @media (min-width: 768px) {
   .navbar-nav {
     float: left;
     margin: 0;
   }
   .navbar-nav > li {
     float: left;
   }
   .navbar-nav > li > a {
     padding-top: 9px;
     padding-bottom: 9px;
   }
   .navbar-nav.navbar-right:last-child {
     margin-right: -15px;
   }
 }
 @media (min-width: 768px) {
   .navbar-left {
     float: left !important;
     float: left;
   }
   .navbar-right {
     float: right !important;
     float: right;
   }
 }
 .navbar-form {
   margin-left: -15px;
   margin-right: -15px;
   padding: 10px 15px;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
   margin-top: 2px;
   margin-bottom: 2px;
 }
 @media (min-width: 768px) {
   .navbar-form .form-group {
     display: inline-block;
     margin-bottom: 0;
     vertical-align: middle;
   }
   .navbar-form .form-control {
     display: inline-block;
     width: auto;
     vertical-align: middle;
   }
   .navbar-form .input-group > .form-control {
     width: 100%;
   }
   .navbar-form .control-label {
     margin-bottom: 0;
     vertical-align: middle;
   }
   .navbar-form .radio,
   .navbar-form .checkbox {
     display: inline-block;
     margin-top: 0;
     margin-bottom: 0;
     padding-left: 0;
     vertical-align: middle;
   }
   .navbar-form .radio input[type="radio"],
   .navbar-form .checkbox input[type="checkbox"] {
     float: none;
     margin-left: 0;
   }
   .navbar-form .has-feedback .form-control-feedback {
     top: 0;
   }
 }
 @media (max-width: 767px) {
   .navbar-form .form-group {
     margin-bottom: 5px;
   }
 }
 @media (min-width: 768px) {
   .navbar-form {
     width: auto;
     border: 0;
     margin-left: 0;
     margin-right: 0;
     padding-top: 0;
     padding-bottom: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
   }
   .navbar-form.navbar-right:last-child {
     margin-right: -15px;
   }
 }
 .navbar-nav > li > .dropdown-menu {
   margin-top: 0;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 .navbar-btn {
   margin-top: 2px;
   margin-bottom: 2px;
 }
 .navbar-btn.btn-sm {
   margin-top: 3px;
   margin-bottom: 3px;
 }
 .navbar-btn.btn-xs {
   margin-top: 7px;
   margin-bottom: 7px;
 }
 .navbar-text {
   margin-top: 9px;
   margin-bottom: 9px;
 }
 @media (min-width: 768px) {
   .navbar-text {
     float: left;
     margin-left: 15px;
     margin-right: 15px;
   }
   .navbar-text.navbar-right:last-child {
     margin-right: 0;
   }
 }
 .navbar-default {
   background-color: #f8f8f8;
   border-color: #e7e7e7;
 }
 .navbar-default .navbar-brand {
   color: #777777;
 }
 .navbar-default .navbar-brand:hover,
 .navbar-default .navbar-brand:focus {
   color: #5e5e5e;
   background-color: transparent;
 }
 .navbar-default .navbar-text {
   color: #777777;
 }
 .navbar-default .navbar-nav > li > a {
   color: #777777;
 }
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
   color: #333333;
   background-color: transparent;
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
   color: #555555;
   background-color: #e7e7e7;
 }
 .navbar-default .navbar-nav > .disabled > a,
 .navbar-default .navbar-nav > .disabled > a:hover,
 .navbar-default .navbar-nav > .disabled > a:focus {
   color: #cccccc;
   background-color: transparent;
 }
 .navbar-default .navbar-toggle {
   border-color: #dddddd;
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
   background-color: #dddddd;
 }
 .navbar-default .navbar-toggle .icon-bar {
   background-color: #888888;
 }
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
   border-color: #e7e7e7;
 }
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
   background-color: #e7e7e7;
   color: #555555;
 }
 @media (max-width: 767px) {
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
     color: #777777;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
     color: #333333;
     background-color: transparent;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #555555;
     background-color: #e7e7e7;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
     color: #cccccc;
     background-color: transparent;
   }
 }
 .navbar-default .navbar-link {
   color: #777777;
 }
 .navbar-default .navbar-link:hover {
   color: #333333;
 }
 .navbar-inverse {
   background-color: #222222;
   border-color: #080808;
 }
 .navbar-inverse .navbar-brand {
   color: #999999;
 }
 .navbar-inverse .navbar-brand:hover,
 .navbar-inverse .navbar-brand:focus {
   color: #ffffff;
   background-color: transparent;
 }
 .navbar-inverse .navbar-text {
   color: #999999;
 }
 .navbar-inverse .navbar-nav > li > a {
   color: #999999;
 }
 .navbar-inverse .navbar-nav > li > a:hover,
 .navbar-inverse .navbar-nav > li > a:focus {
   color: #ffffff;
   background-color: transparent;
 }
 .navbar-inverse .navbar-nav > .active > a,
 .navbar-inverse .navbar-nav > .active > a:hover,
 .navbar-inverse .navbar-nav > .active > a:focus {
   color: #ffffff;
   background-color: #080808;
 }
 .navbar-inverse .navbar-nav > .disabled > a,
 .navbar-inverse .navbar-nav > .disabled > a:hover,
 .navbar-inverse .navbar-nav > .disabled > a:focus {
   color: #444444;
   background-color: transparent;
 }
 .navbar-inverse .navbar-toggle {
   border-color: #333333;
 }
 .navbar-inverse .navbar-toggle:hover,
 .navbar-inverse .navbar-toggle:focus {
   background-color: #333333;
 }
 .navbar-inverse .navbar-toggle .icon-bar {
   background-color: #ffffff;
 }
 .navbar-inverse .navbar-collapse,
 .navbar-inverse .navbar-form {
   border-color: #101010;
 }
 .navbar-inverse .navbar-nav > .open > a,
 .navbar-inverse .navbar-nav > .open > a:hover,
 .navbar-inverse .navbar-nav > .open > a:focus {
   background-color: #080808;
   color: #ffffff;
 }
 @media (max-width: 767px) {
   .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
     border-color: #080808;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
     background-color: #080808;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
     color: #999999;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
     color: #ffffff;
     background-color: transparent;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #ffffff;
     background-color: #080808;
   }
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
   .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
     color: #444444;
     background-color: transparent;
   }
 }
 .navbar-inverse .navbar-link {
   color: #999999;
 }
 .navbar-inverse .navbar-link:hover {
   color: #ffffff;
 }
 .breadcrumb {
   padding: 8px 15px;
   margin-bottom: 18px;
   list-style: none;
   background-color: #f5f5f5;
   border-radius: 4px;
 }
 .breadcrumb > li {
   display: inline-block;
 }
 .breadcrumb > li + li:before {
   content: "/\00a0";
   padding: 0 5px;
   color: #5e5e5e;
 }
 .breadcrumb > .active {
   color: #999999;
 }
 .pagination {
   display: inline-block;
   padding-left: 0;
   margin: 18px 0;
   border-radius: 4px;
 }
 .pagination > li {
   display: inline;
 }
 .pagination > li > a,
 .pagination > li > span {
   position: relative;
   float: left;
   padding: 6px 12px;
   line-height: 1.42857143;
   text-decoration: none;
   color: #428bca;
   background-color: #ffffff;
   border: 1px solid #dddddd;
   margin-left: -1px;
 }
 .pagination > li:first-child > a,
 .pagination > li:first-child > span {
   margin-left: 0;
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
 }
 .pagination > li:last-child > a,
 .pagination > li:last-child > span {
   border-bottom-right-radius: 4px;
   border-top-right-radius: 4px;
 }
 .pagination > li > a:hover,
 .pagination > li > span:hover,
 .pagination > li > a:focus,
 .pagination > li > span:focus {
   color: #2a6496;
   background-color: #eeeeee;
   border-color: #dddddd;
 }
 .pagination > .active > a,
 .pagination > .active > span,
 .pagination > .active > a:hover,
 .pagination > .active > span:hover,
 .pagination > .active > a:focus,
 .pagination > .active > span:focus {
   z-index: 2;
   color: #ffffff;
   background-color: #428bca;
   border-color: #428bca;
   cursor: default;
 }
 .pagination > .disabled > span,
 .pagination > .disabled > span:hover,
 .pagination > .disabled > span:focus,
 .pagination > .disabled > a,
 .pagination > .disabled > a:hover,
 .pagination > .disabled > a:focus {
   color: #999999;
   background-color: #ffffff;
   border-color: #dddddd;
   cursor: not-allowed;
 }
 .pagination-lg > li > a,
 .pagination-lg > li > span {
   padding: 10px 16px;
   font-size: 17px;
 }
 .pagination-lg > li:first-child > a,
 .pagination-lg > li:first-child > span {
   border-bottom-left-radius: 6px;
   border-top-left-radius: 6px;
 }
 .pagination-lg > li:last-child > a,
 .pagination-lg > li:last-child > span {
   border-bottom-right-radius: 6px;
   border-top-right-radius: 6px;
 }
 .pagination-sm > li > a,
 .pagination-sm > li > span {
   padding: 5px 10px;
   font-size: 12px;
 }
 .pagination-sm > li:first-child > a,
 .pagination-sm > li:first-child > span {
   border-bottom-left-radius: 3px;
   border-top-left-radius: 3px;
 }
 .pagination-sm > li:last-child > a,
 .pagination-sm > li:last-child > span {
   border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
 }
 .pager {
   padding-left: 0;
   margin: 18px 0;
   list-style: none;
   text-align: center;
 }
 .pager li {
   display: inline;
 }
 .pager li > a,
 .pager li > span {
   display: inline-block;
   padding: 5px 14px;
   background-color: #ffffff;
   border: 1px solid #dddddd;
   border-radius: 15px;
 }
 .pager li > a:hover,
 .pager li > a:focus {
   text-decoration: none;
   background-color: #eeeeee;
 }
 .pager .next > a,
 .pager .next > span {
   float: right;
 }
 .pager .previous > a,
 .pager .previous > span {
   float: left;
 }
 .pager .disabled > a,
 .pager .disabled > a:hover,
 .pager .disabled > a:focus,
 .pager .disabled > span {
   color: #999999;
   background-color: #ffffff;
   cursor: not-allowed;
 }
 .label {
   display: inline;
   padding: .2em .6em .3em;
   font-size: 75%;
   font-weight: bold;
   line-height: 1;
   color: #ffffff;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: .25em;
 }
 .label[href]:hover,
 .label[href]:focus {
   color: #ffffff;
   text-decoration: none;
   cursor: pointer;
 }
 .label:empty {
   display: none;
 }
 .btn .label {
   position: relative;
   top: -1px;
 }
 .label-default {
   background-color: #999999;
 }
 .label-default[href]:hover,
 .label-default[href]:focus {
   background-color: #808080;
 }
 .label-primary {
   background-color: #428bca;
 }
 .label-primary[href]:hover,
 .label-primary[href]:focus {
   background-color: #3071a9;
 }
 .label-success {
   background-color: #5cb85c;
 }
 .label-success[href]:hover,
 .label-success[href]:focus {
   background-color: #449d44;
 }
 .label-info {
   background-color: #5bc0de;
 }
 .label-info[href]:hover,
 .label-info[href]:focus {
   background-color: #31b0d5;
 }
 .label-warning {
   background-color: #f0ad4e;
 }
 .label-warning[href]:hover,
 .label-warning[href]:focus {
   background-color: #ec971f;
 }
 .label-danger {
   background-color: #d9534f;
 }
 .label-danger[href]:hover,
 .label-danger[href]:focus {
   background-color: #c9302c;
 }
 .badge {
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
   font-size: 12px;
   font-weight: bold;
   color: #ffffff;
   line-height: 1;
   vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
   background-color: #999999;
   border-radius: 10px;
 }
 .badge:empty {
   display: none;
 }
 .btn .badge {
   position: relative;
   top: -1px;
 }
 .btn-xs .badge {
   top: 0;
   padding: 1px 5px;
 }
 a.badge:hover,
 a.badge:focus {
   color: #ffffff;
   text-decoration: none;
   cursor: pointer;
 }
 a.list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
   color: #428bca;
   background-color: #ffffff;
 }
 .nav-pills > li > a > .badge {
   margin-left: 3px;
 }
 .jumbotron {
   padding: 30px;
   margin-bottom: 30px;
   color: inherit;
   background-color: #eeeeee;
 }
 .jumbotron h1,
 .jumbotron .h1 {
   color: inherit;
 }
 .jumbotron p {
   margin-bottom: 15px;
   font-size: 20px;
   font-weight: 200;
 }
 .container .jumbotron {
   border-radius: 6px;
 }
 .jumbotron .container {
   max-width: 100%;
 }
 @media screen and (min-width: 768px) {
   .jumbotron {
     padding-top: 48px;
     padding-bottom: 48px;
   }
   .container .jumbotron {
     padding-left: 60px;
     padding-right: 60px;
   }
   .jumbotron h1,
   .jumbotron .h1 {
     font-size: 58.5px;
   }
 }
 .thumbnail {
   display: block;
   padding: 4px;
   margin-bottom: 18px;
   line-height: 1.42857143;
   background-color: #ffffff;
   border: 1px solid #dddddd;
   border-radius: 4px;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }
 .thumbnail > img,
 .thumbnail a > img {
   margin-left: auto;
   margin-right: auto;
 }
 a.thumbnail:hover,
 a.thumbnail:focus,
 a.thumbnail.active {
   border-color: #428bca;
 }
 .thumbnail .caption {
   padding: 9px;
   color: #000000;
 }
 .alert {
   padding: 15px;
   margin-bottom: 18px;
   border: 1px solid transparent;
   border-radius: 4px;
 }
 .alert h4 {
   margin-top: 0;
   color: inherit;
 }
 .alert .alert-link {
   font-weight: bold;
 }
 .alert > p,
 .alert > ul {
   margin-bottom: 0;
 }
 .alert > p + p {
   margin-top: 5px;
 }
 .alert-dismissable {
   padding-right: 35px;
 }
 .alert-dismissable .close {
   position: relative;
   top: -2px;
   right: -21px;
   color: inherit;
 }
 .alert-success {
   background-color: #dff0d8;
   border-color: #d6e9c6;
   color: #3c763d;
 }
 .alert-success hr {
   border-top-color: #c9e2b3;
 }
 .alert-success .alert-link {
   color: #2b542c;
 }
 .alert-info {
   background-color: #d9edf7;
   border-color: #bce8f1;
   color: #31708f;
 }
 .alert-info hr {
   border-top-color: #a6e1ec;
 }
 .alert-info .alert-link {
   color: #245269;
 }
 .alert-warning {
   background-color: #fcf8e3;
   border-color: #faebcc;
   color: #8a6d3b;
 }
 .alert-warning hr {
   border-top-color: #f7e1b5;
 }
 .alert-warning .alert-link {
   color: #66512c;
 }
 .alert-danger {
   background-color: #f2dede;
   border-color: #ebccd1;
   color: #a94442;
 }
 .alert-danger hr {
   border-top-color: #e4b9c0;
 }
 .alert-danger .alert-link {
   color: #843534;
 }
 @-webkit-keyframes progress-bar-stripes {
   from {
     background-position: 40px 0;
   }
   to {
     background-position: 0 0;
   }
 }
 @keyframes progress-bar-stripes {
   from {
     background-position: 40px 0;
   }
   to {
     background-position: 0 0;
   }
 }
 .progress {
   overflow: hidden;
   height: 18px;
   margin-bottom: 18px;
   background-color: #f5f5f5;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 .progress-bar {
   float: left;
   width: 0%;
   height: 100%;
   font-size: 12px;
   line-height: 18px;
   color: #ffffff;
   text-align: center;
   background-color: #428bca;
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   -webkit-transition: width 0.6s ease;
   transition: width 0.6s ease;
 }
 .progress-striped .progress-bar {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-size: 40px 40px;
 }
 .progress.active .progress-bar {
   -webkit-animation: progress-bar-stripes 2s linear infinite;
   animation: progress-bar-stripes 2s linear infinite;
 }
 .progress-bar-success {
   background-color: #5cb85c;
 }
 .progress-striped .progress-bar-success {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
 .progress-bar-info {
   background-color: #5bc0de;
 }
 .progress-striped .progress-bar-info {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
 .progress-bar-warning {
   background-color: #f0ad4e;
 }
 .progress-striped .progress-bar-warning {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
 .progress-bar-danger {
   background-color: #d9534f;
 }
 .progress-striped .progress-bar-danger {
   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
 }
 .media,
 .media-body {
   overflow: hidden;
   zoom: 1;
 }
 .media,
 .media .media {
   margin-top: 15px;
 }
 .media:first-child {
   margin-top: 0;
 }
 .media-object {
   display: block;
 }
 .media-heading {
   margin: 0 0 5px;
 }
 .media > .pull-left {
   margin-right: 10px;
 }
 .media > .pull-right {
   margin-left: 10px;
 }
 .media-list {
   padding-left: 0;
   list-style: none;
 }
 .list-group {
   margin-bottom: 20px;
   padding-left: 0;
 }
 .list-group-item {
   position: relative;
   display: block;
   padding: 10px 15px;
   margin-bottom: -1px;
   background-color: #ffffff;
   border: 1px solid #dddddd;
 }
 .list-group-item:first-child {
   border-top-right-radius: 4px;
   border-top-left-radius: 4px;
 }
 .list-group-item:last-child {
   margin-bottom: 0;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
 .list-group-item > .badge {
   float: right;
 }
 .list-group-item > .badge + .badge {
   margin-right: 5px;
 }
 a.list-group-item {
   color: #555555;
 }
 a.list-group-item .list-group-item-heading {
   color: #333333;
 }
 a.list-group-item:hover,
 a.list-group-item:focus {
   text-decoration: none;
   background-color: #f5f5f5;
 }
 a.list-group-item.active,
 a.list-group-item.active:hover,
 a.list-group-item.active:focus {
   z-index: 2;
   color: #ffffff;
   background-color: #428bca;
   border-color: #428bca;
 }
 a.list-group-item.active .list-group-item-heading,
 a.list-group-item.active:hover .list-group-item-heading,
 a.list-group-item.active:focus .list-group-item-heading {
   color: inherit;
 }
 a.list-group-item.active .list-group-item-text,
 a.list-group-item.active:hover .list-group-item-text,
 a.list-group-item.active:focus .list-group-item-text {
   color: #e1edf7;
 }
 .list-group-item-success {
   color: #3c763d;
   background-color: #dff0d8;
 }
 a.list-group-item-success {
   color: #3c763d;
 }
 a.list-group-item-success .list-group-item-heading {
   color: inherit;
 }
 a.list-group-item-success:hover,
 a.list-group-item-success:focus {
   color: #3c763d;
   background-color: #d0e9c6;
 }
 a.list-group-item-success.active,
 a.list-group-item-success.active:hover,
 a.list-group-item-success.active:focus {
   color: #fff;
   background-color: #3c763d;
   border-color: #3c763d;
 }
 .list-group-item-info {
   color: #31708f;
   background-color: #d9edf7;
 }
 a.list-group-item-info {
   color: #31708f;
 }
 a.list-group-item-info .list-group-item-heading {
   color: inherit;
 }
 a.list-group-item-info:hover,
 a.list-group-item-info:focus {
   color: #31708f;
   background-color: #c4e3f3;
 }
 a.list-group-item-info.active,
 a.list-group-item-info.active:hover,
 a.list-group-item-info.active:focus {
   color: #fff;
   background-color: #31708f;
   border-color: #31708f;
 }
 .list-group-item-warning {
   color: #8a6d3b;
   background-color: #fcf8e3;
 }
 a.list-group-item-warning {
   color: #8a6d3b;
 }
 a.list-group-item-warning .list-group-item-heading {
   color: inherit;
 }
 a.list-group-item-warning:hover,
 a.list-group-item-warning:focus {
   color: #8a6d3b;
   background-color: #faf2cc;
 }
 a.list-group-item-warning.active,
 a.list-group-item-warning.active:hover,
 a.list-group-item-warning.active:focus {
   color: #fff;
   background-color: #8a6d3b;
   border-color: #8a6d3b;
 }
 .list-group-item-danger {
   color: #a94442;
   background-color: #f2dede;
 }
 a.list-group-item-danger {
   color: #a94442;
 }
 a.list-group-item-danger .list-group-item-heading {
   color: inherit;
 }
 a.list-group-item-danger:hover,
 a.list-group-item-danger:focus {
   color: #a94442;
   background-color: #ebcccc;
 }
 a.list-group-item-danger.active,
 a.list-group-item-danger.active:hover,
 a.list-group-item-danger.active:focus {
   color: #fff;
   background-color: #a94442;
   border-color: #a94442;
 }
 .list-group-item-heading {
   margin-top: 0;
   margin-bottom: 5px;
 }
 .list-group-item-text {
   margin-bottom: 0;
   line-height: 1.3;
 }
 .panel {
   margin-bottom: 18px;
   background-color: #ffffff;
   border: 1px solid transparent;
   border-radius: 4px;
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 .panel-body {
   padding: 15px;
 }
 .panel-heading {
   padding: 10px 15px;
   border-bottom: 1px solid transparent;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
 .panel-heading > .dropdown .dropdown-toggle {
   color: inherit;
 }
 .panel-title {
   margin-top: 0;
   margin-bottom: 0;
   font-size: 15px;
   color: inherit;
 }
 .panel-title > a {
   color: inherit;
 }
 .panel-footer {
   padding: 10px 15px;
   background-color: #f5f5f5;
   border-top: 1px solid #dddddd;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 .panel > .list-group {
   margin-bottom: 0;
 }
 .panel > .list-group .list-group-item {
   border-width: 1px 0;
   border-radius: 0;
 }
 .panel > .list-group:first-child .list-group-item:first-child {
   border-top: 0;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
 .panel > .list-group:last-child .list-group-item:last-child {
   border-bottom: 0;
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 .panel-heading + .list-group .list-group-item:first-child {
   border-top-width: 0;
 }
 .panel > .table,
 .panel > .table-responsive > .table {
   margin-bottom: 0;
 }
 .panel > .table:first-child,
 .panel > .table-responsive:first-child > .table:first-child {
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
 }
 .panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
 .panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
 .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
 .panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
 .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
 .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
   border-top-left-radius: 3px;
 }
 .panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
 .panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
 .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
 .panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
 .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
 .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
   border-top-right-radius: 3px;
 }
 .panel > .table:last-child,
 .panel > .table-responsive:last-child > .table:last-child {
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
 }
 .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
 .panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
 .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
 .panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
 .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
 .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
   border-bottom-left-radius: 3px;
 }
 .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
 .panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
 .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
 .panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
 .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
 .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
   border-bottom-right-radius: 3px;
 }
 .panel > .panel-body + .table,
 .panel > .panel-body + .table-responsive {
   border-top: 1px solid #dddddd;
 }
 .panel > .table > tbody:first-child > tr:first-child th,
 .panel > .table > tbody:first-child > tr:first-child td {
   border-top: 0;
 }
 .panel > .table-bordered,
 .panel > .table-responsive > .table-bordered {
   border: 0;
 }
 .panel > .table-bordered > thead > tr > th:first-child,
 .panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
 .panel > .table-bordered > tbody > tr > th:first-child,
 .panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
 .panel > .table-bordered > tfoot > tr > th:first-child,
 .panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
 .panel > .table-bordered > thead > tr > td:first-child,
 .panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
 .panel > .table-bordered > tbody > tr > td:first-child,
 .panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
 .panel > .table-bordered > tfoot > tr > td:first-child,
 .panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
   border-left: 0;
 }
 .panel > .table-bordered > thead > tr > th:last-child,
 .panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
 .panel > .table-bordered > tbody > tr > th:last-child,
 .panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
 .panel > .table-bordered > tfoot > tr > th:last-child,
 .panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
 .panel > .table-bordered > thead > tr > td:last-child,
 .panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
 .panel > .table-bordered > tbody > tr > td:last-child,
 .panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
 .panel > .table-bordered > tfoot > tr > td:last-child,
 .panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
   border-right: 0;
 }
 .panel > .table-bordered > thead > tr:first-child > td,
 .panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
 .panel > .table-bordered > tbody > tr:first-child > td,
 .panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
 .panel > .table-bordered > thead > tr:first-child > th,
 .panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
 .panel > .table-bordered > tbody > tr:first-child > th,
 .panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
   border-bottom: 0;
 }
 .panel > .table-bordered > tbody > tr:last-child > td,
 .panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
 .panel > .table-bordered > tfoot > tr:last-child > td,
 .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
 .panel > .table-bordered > tbody > tr:last-child > th,
 .panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
 .panel > .table-bordered > tfoot > tr:last-child > th,
 .panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
   border-bottom: 0;
 }
 .panel > .table-responsive {
   border: 0;
   margin-bottom: 0;
 }
 .panel-group {
   margin-bottom: 18px;
 }
 .panel-group .panel {
   margin-bottom: 0;
   border-radius: 4px;
   overflow: hidden;
 }
 .panel-group .panel + .panel {
   margin-top: 5px;
 }
 .panel-group .panel-heading {
   border-bottom: 0;
 }
 .panel-group .panel-heading + .panel-collapse .panel-body {
   border-top: 1px solid #dddddd;
 }
 .panel-group .panel-footer {
   border-top: 0;
 }
 .panel-group .panel-footer + .panel-collapse .panel-body {
   border-bottom: 1px solid #dddddd;
 }
 .panel-default {
   border-color: #dddddd;
 }
 .panel-default > .panel-heading {
   color: #333333;
   background-color: #f5f5f5;
   border-color: #dddddd;
 }
 .panel-default > .panel-heading + .panel-collapse .panel-body {
   border-top-color: #dddddd;
 }
 .panel-default > .panel-footer + .panel-collapse .panel-body {
   border-bottom-color: #dddddd;
 }
 .panel-primary {
   border-color: #428bca;
 }
 .panel-primary > .panel-heading {
   color: #ffffff;
   background-color: #428bca;
   border-color: #428bca;
 }
 .panel-primary > .panel-heading + .panel-collapse .panel-body {
   border-top-color: #428bca;
 }
 .panel-primary > .panel-footer + .panel-collapse .panel-body {
   border-bottom-color: #428bca;
 }
 .panel-success {
   border-color: #d6e9c6;
 }
 .panel-success > .panel-heading {
   color: #3c763d;
   background-color: #dff0d8;
   border-color: #d6e9c6;
 }
 .panel-success > .panel-heading + .panel-collapse .panel-body {
   border-top-color: #d6e9c6;
 }
 .panel-success > .panel-footer + .panel-collapse .panel-body {
   border-bottom-color: #d6e9c6;
 }
 .panel-info {
   border-color: #bce8f1;
 }
 .panel-info > .panel-heading {
   color: #31708f;
   background-color: #d9edf7;
   border-color: #bce8f1;
 }
 .panel-info > .panel-heading + .panel-collapse .panel-body {
   border-top-color: #bce8f1;
 }
 .panel-info > .panel-footer + .panel-collapse .panel-body {
   border-bottom-color: #bce8f1;
 }
 .panel-warning {
   border-color: #faebcc;
 }
 .panel-warning > .panel-heading {
   color: #8a6d3b;
   background-color: #fcf8e3;
   border-color: #faebcc;
 }
 .panel-warning > .panel-heading + .panel-collapse .panel-body {
   border-top-color: #faebcc;
 }
 .panel-warning > .panel-footer + .panel-collapse .panel-body {
   border-bottom-color: #faebcc;
 }
 .panel-danger {
   border-color: #ebccd1;
 }
 .panel-danger > .panel-heading {
   color: #a94442;
   background-color: #f2dede;
   border-color: #ebccd1;
 }
 .panel-danger > .panel-heading + .panel-collapse .panel-body {
   border-top-color: #ebccd1;
 }
 .panel-danger > .panel-footer + .panel-collapse .panel-body {
   border-bottom-color: #ebccd1;
 }
 .well {
   min-height: 20px;
   padding: 19px;
   margin-bottom: 20px;
   background-color: #f5f5f5;
   border: 1px solid #e3e3e3;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 .well blockquote {
   border-color: #ddd;
   border-color: rgba(0, 0, 0, 0.15);
 }
 .well-lg {
   padding: 24px;
   border-radius: 6px;
 }
 .well-sm {
   padding: 9px;
   border-radius: 3px;
 }
 .close {
   float: right;
   font-size: 19.5px;
   font-weight: bold;
   line-height: 1;
   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.5;
   filter: alpha(opacity=50);
 }
 button.close {
   padding: 0;
   cursor: pointer;
   background: transparent;
   border: 0;
   -webkit-appearance: none;
 }
 .modal-open {
   overflow: hidden;
 }
 .modal {
   display: none;
   overflow: auto;
   overflow-y: scroll;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1050;
   -webkit-overflow-scrolling: touch;
   outline: 0;
 }
 .modal.fade .modal-dialog {
   -webkit-transform: translate(0, -25%);
   -ms-transform: translate(0, -25%);
   transform: translate(0, -25%);
   -webkit-transition: -webkit-transform 0.3s ease-out;
   -moz-transition: -moz-transform 0.3s ease-out;
   -o-transition: -o-transform 0.3s ease-out;
   transition: transform 0.3s ease-out;
 }
 .modal.in .modal-dialog {
   -webkit-transform: translate(0, 0);
   -ms-transform: translate(0, 0);
   transform: translate(0, 0);
 }
 .modal-dialog {
   position: relative;
   width: auto;
   margin: 10px;
 }
 .modal-content {
   position: relative;
   background-color: #ffffff;
   border: 1px solid #999999;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 6px;
   -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
   box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
   background-clip: padding-box;
   outline: none;
 }
 .modal-backdrop {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1040;
   background-color: #000000;
 }
 .modal-backdrop.fade {
   opacity: 0;
   filter: alpha(opacity=0);
 }
 .modal-backdrop.in {
   opacity: 0.5;
   filter: alpha(opacity=50);
 }
 .modal-header {
   padding: 15px;
   border-bottom: 1px solid #e5e5e5;
   min-height: 16.42857143px;
 }
 .modal-header .close {
   margin-top: -2px;
 }
 .modal-title {
   margin: 0;
   line-height: 1.42857143;
 }
 .modal-body {
   position: relative;
   padding: 15px;
 }
 .modal-footer {
   margin-top: 15px;
   padding: 14px 15px 15px;
   text-align: right;
   border-top: 1px solid #e5e5e5;
 }
 .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;
 }
 @media (min-width: 768px) {
   .modal-dialog {
     width: 600px;
     margin: 30px auto;
   }
   .modal-content {
     -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
   }
   .modal-sm {
     width: 300px;
   }
 }
 @media (min-width: 992px) {
   .modal-lg {
     width: 900px;
   }
 }
 .tooltip {
   position: absolute;
   z-index: 1030;
   display: block;
   visibility: visible;
   font-size: 12px;
   line-height: 1.4;
   opacity: 0;
   filter: alpha(opacity=0);
 }
 .tooltip.in {
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
 .tooltip.top {
   margin-top: -3px;
   padding: 5px 0;
 }
 .tooltip.right {
   margin-left: 3px;
   padding: 0 5px;
 }
 .tooltip.bottom {
   margin-top: 3px;
   padding: 5px 0;
 }
 .tooltip.left {
   margin-left: -3px;
   padding: 0 5px;
 }
 .tooltip-inner {
   max-width: 200px;
   padding: 3px 8px;
   color: #ffffff;
   text-align: center;
   text-decoration: none;
   background-color: #000000;
   border-radius: 4px;
 }
 .tooltip-arrow {
   position: absolute;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
 }
 .tooltip.top .tooltip-arrow {
   bottom: 0;
   left: 50%;
   margin-left: -5px;
   border-width: 5px 5px 0;
   border-top-color: #000000;
 }
 .tooltip.top-left .tooltip-arrow {
   bottom: 0;
   left: 5px;
   border-width: 5px 5px 0;
   border-top-color: #000000;
 }
 .tooltip.top-right .tooltip-arrow {
   bottom: 0;
   right: 5px;
   border-width: 5px 5px 0;
   border-top-color: #000000;
 }
 .tooltip.right .tooltip-arrow {
   top: 50%;
   left: 0;
   margin-top: -5px;
   border-width: 5px 5px 5px 0;
   border-right-color: #000000;
 }
 .tooltip.left .tooltip-arrow {
   top: 50%;
   right: 0;
   margin-top: -5px;
   border-width: 5px 0 5px 5px;
   border-left-color: #000000;
 }
 .tooltip.bottom .tooltip-arrow {
   top: 0;
   left: 50%;
   margin-left: -5px;
   border-width: 0 5px 5px;
   border-bottom-color: #000000;
 }
 .tooltip.bottom-left .tooltip-arrow {
   top: 0;
   left: 5px;
   border-width: 0 5px 5px;
   border-bottom-color: #000000;
 }
 .tooltip.bottom-right .tooltip-arrow {
   top: 0;
   right: 5px;
   border-width: 0 5px 5px;
   border-bottom-color: #000000;
 }
 .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 #cccccc;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 6px;
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   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: 13px;
   font-weight: normal;
   line-height: 18px;
   background-color: #f7f7f7;
   border-bottom: 1px solid #ebebeb;
   border-radius: 5px 5px 0 0;
 }
 .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: #999999;
   border-top-color: rgba(0, 0, 0, 0.25);
   bottom: -11px;
 }
 .popover.top > .arrow:after {
   content: " ";
   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: #999999;
   border-right-color: rgba(0, 0, 0, 0.25);
 }
 .popover.right > .arrow:after {
   content: " ";
   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: #999999;
   border-bottom-color: rgba(0, 0, 0, 0.25);
   top: -11px;
 }
 .popover.bottom > .arrow:after {
   content: " ";
   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: #999999;
   border-left-color: rgba(0, 0, 0, 0.25);
 }
 .popover.left > .arrow:after {
   content: " ";
   right: 1px;
   border-right-width: 0;
   border-left-color: #ffffff;
   bottom: -10px;
 }
 .carousel {
   position: relative;
 }
 .carousel-inner {
   position: relative;
   overflow: hidden;
   width: 100%;
 }
 .carousel-inner > .item {
   display: none;
   position: relative;
   -webkit-transition: 0.6s ease-in-out left;
   transition: 0.6s ease-in-out left;
 }
 .carousel-inner > .item > img,
 .carousel-inner > .item > a > img {
   line-height: 1;
 }
 .carousel-inner > .active,
 .carousel-inner > .next,
 .carousel-inner > .prev {
   display: block;
 }
 .carousel-inner > .active {
   left: 0;
 }
 .carousel-inner > .next,
 .carousel-inner > .prev {
   position: absolute;
   top: 0;
   width: 100%;
 }
 .carousel-inner > .next {
   left: 100%;
 }
 .carousel-inner > .prev {
   left: -100%;
 }
 .carousel-inner > .next.left,
 .carousel-inner > .prev.right {
   left: 0;
 }
 .carousel-inner > .active.left {
   left: -100%;
 }
 .carousel-inner > .active.right {
   left: 100%;
 }
 .carousel-control {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: 15%;
   opacity: 0.5;
   filter: alpha(opacity=50);
   font-size: 20px;
   color: #ffffff;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 }
 .carousel-control.left {
   background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0%), color-stop(rgba(0, 0, 0, 0.0001) 100%));
   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
 }
 .carousel-control.right {
   left: auto;
   right: 0;
   background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0%), color-stop(rgba(0, 0, 0, 0.5) 100%));
   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
 }
 .carousel-control:hover,
 .carousel-control:focus {
   outline: none;
   color: #ffffff;
   text-decoration: none;
   opacity: 0.9;
   filter: alpha(opacity=90);
 }
 .carousel-control .icon-prev,
 .carousel-control .icon-next,
 .carousel-control .glyphicon-chevron-left,
 .carousel-control .glyphicon-chevron-right {
   position: absolute;
   top: 50%;
   z-index: 5;
   display: inline-block;
 }
 .carousel-control .icon-prev,
 .carousel-control .glyphicon-chevron-left {
   left: 50%;
 }
 .carousel-control .icon-next,
 .carousel-control .glyphicon-chevron-right {
   right: 50%;
 }
 .carousel-control .icon-prev,
 .carousel-control .icon-next {
   width: 20px;
   height: 20px;
   margin-top: -10px;
   margin-left: -10px;
   font-family: serif;
 }
 .carousel-control .icon-prev:before {
   content: '\2039';
 }
 .carousel-control .icon-next:before {
   content: '\203a';
 }
 .carousel-indicators {
   position: absolute;
   bottom: 10px;
   left: 50%;
   z-index: 15;
   width: 60%;
   margin-left: -30%;
   padding-left: 0;
   list-style: none;
   text-align: center;
 }
 .carousel-indicators li {
   display: inline-block;
   width: 10px;
   height: 10px;
   margin: 1px;
   text-indent: -999px;
   border: 1px solid #ffffff;
   border-radius: 10px;
   cursor: pointer;
   background-color: #000 \9;
   background-color: rgba(0, 0, 0, 0);
 }
 .carousel-indicators .active {
   margin: 0;
   width: 12px;
   height: 12px;
   background-color: #ffffff;
 }
 .carousel-caption {
   position: absolute;
   left: 15%;
   right: 15%;
   bottom: 20px;
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
   color: #ffffff;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
 }
 .carousel-caption .btn {
   text-shadow: none;
 }
 @media screen and (min-width: 768px) {
   .carousel-control .glyphicon-chevron-left,
   .carousel-control .glyphicon-chevron-right,
   .carousel-control .icon-prev,
   .carousel-control .icon-next {
     width: 30px;
     height: 30px;
     margin-top: -15px;
     margin-left: -15px;
     font-size: 30px;
   }
   .carousel-caption {
     left: 20%;
     right: 20%;
     padding-bottom: 30px;
   }
   .carousel-indicators {
     bottom: 20px;
   }
 }
 .clearfix:before,
 .clearfix:after,
 .container:before,
 .container:after,
 .container-fluid:before,
 .container-fluid:after,
 .row:before,
 .row:after,
 .form-horizontal .form-group:before,
 .form-horizontal .form-group:after,
 .btn-toolbar:before,
 .btn-toolbar:after,
 .btn-group-vertical > .btn-group:before,
 .btn-group-vertical > .btn-group:after,
 .nav:before,
 .nav:after,
 .navbar:before,
 .navbar:after,
 .navbar-header:before,
 .navbar-header:after,
 .navbar-collapse:before,
 .navbar-collapse:after,
 .pager:before,
 .pager:after,
 .panel-body:before,
 .panel-body:after,
 .modal-footer:before,
 .modal-footer:after {
   content: " ";
   display: table;
 }
 .clearfix:after,
 .container:after,
 .container-fluid:after,
 .row:after,
 .form-horizontal .form-group:after,
 .btn-toolbar:after,
 .btn-group-vertical > .btn-group:after,
 .nav:after,
 .navbar:after,
 .navbar-header:after,
 .navbar-collapse:after,
 .pager:after,
 .panel-body:after,
 .modal-footer:after {
   clear: both;
 }
 .center-block {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 .pull-right {
   float: right !important;
 }
 .pull-left {
   float: left !important;
 }
 .hide {
   display: none !important;
 }
 .show {
   display: block !important;
 }
 .invisible {
   visibility: hidden;
 }
 .text-hide {
   font: 0/0 a;
   color: transparent;
   text-shadow: none;
   background-color: transparent;
   border: 0;
 }
 .hidden {
   display: none !important;
   visibility: hidden !important;
 }
 .affix {
   position: fixed;
 }
 @-ms-viewport {
   width: device-width;
 }
 .visible-xs,
 .visible-sm,
 .visible-md,
 .visible-lg {
   display: none !important;
 }
 @media (max-width: 767px) {
   .visible-xs {
     display: block !important;
   }
   table.visible-xs {
     display: table;
   }
   tr.visible-xs {
     display: table-row !important;
   }
   th.visible-xs,
   td.visible-xs {
     display: table-cell !important;
   }
 }
 @media (min-width: 768px) and (max-width: 991px) {
   .visible-sm {
     display: block !important;
   }
   table.visible-sm {
     display: table;
   }
   tr.visible-sm {
     display: table-row !important;
   }
   th.visible-sm,
   td.visible-sm {
     display: table-cell !important;
   }
 }
 @media (min-width: 992px) and (max-width: 1199px) {
   .visible-md {
     display: block !important;
   }
   table.visible-md {
     display: table;
   }
   tr.visible-md {
     display: table-row !important;
   }
   th.visible-md,
   td.visible-md {
     display: table-cell !important;
   }
 }
 @media (min-width: 1200px) {
   .visible-lg {
     display: block !important;
   }
   table.visible-lg {
     display: table;
   }
   tr.visible-lg {
     display: table-row !important;
   }
   th.visible-lg,
   td.visible-lg {
     display: table-cell !important;
   }
 }
 @media (max-width: 767px) {
   .hidden-xs {
     display: none !important;
   }
 }
 @media (min-width: 768px) and (max-width: 991px) {
   .hidden-sm {
     display: none !important;
   }
 }
 @media (min-width: 992px) and (max-width: 1199px) {
   .hidden-md {
     display: none !important;
   }
 }
 @media (min-width: 1200px) {
   .hidden-lg {
     display: none !important;
   }
 }
 .visible-print {
   display: none !important;
 }
 @media print {
   .visible-print {
     display: block !important;
   }
   table.visible-print {
     display: table;
   }
   tr.visible-print {
     display: table-row !important;
   }
   th.visible-print,
   td.visible-print {
     display: table-cell !important;
   }
 }
 @media print {
   .hidden-print {
     display: none !important;
   }
 }
 /*!
 *
 * Font Awesome
 *
 */
 /*!
  *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
  */
 /* FONT PATH
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
   src: url('../components/font-awesome/fonts/fontawesome-webfont.eot?v=4.1.0');
   src: url('../components/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../components/font-awesome/fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../components/font-awesome/fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../components/font-awesome/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 .fa {
   display: inline-block;
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 /* makes the font 33% larger relative to the icon container */
 .fa-lg {
   font-size: 1.33333333em;
   line-height: 0.75em;
   vertical-align: -15%;
 }
 .fa-2x {
   font-size: 2em;
 }
 .fa-3x {
   font-size: 3em;
 }
 .fa-4x {
   font-size: 4em;
 }
 .fa-5x {
   font-size: 5em;
 }
 .fa-fw {
   width: 1.28571429em;
   text-align: center;
 }
 .fa-ul {
   padding-left: 0;
   margin-left: 2.14285714em;
   list-style-type: none;
 }
 .fa-ul > li {
   position: relative;
 }
 .fa-li {
   position: absolute;
   left: -2.14285714em;
   width: 2.14285714em;
   top: 0.14285714em;
   text-align: center;
 }
 .fa-li.fa-lg {
   left: -1.85714286em;
 }
 .fa-border {
   padding: .2em .25em .15em;
   border: solid 0.08em #eeeeee;
   border-radius: .1em;
 }
 .pull-right {
   float: right;
 }
 .pull-left {
   float: left;
 }
 .fa.pull-left {
   margin-right: .3em;
 }
 .fa.pull-right {
   margin-left: .3em;
 }
 .fa-spin {
   -webkit-animation: spin 2s infinite linear;
   -moz-animation: spin 2s infinite linear;
   -o-animation: spin 2s infinite linear;
   animation: spin 2s infinite linear;
 }
 @-moz-keyframes spin {
   0% {
     -moz-transform: rotate(0deg);
   }
   100% {
     -moz-transform: rotate(359deg);
   }
 }
 @-webkit-keyframes spin {
   0% {
     -webkit-transform: rotate(0deg);
   }
   100% {
     -webkit-transform: rotate(359deg);
   }
 }
 @-o-keyframes spin {
   0% {
     -o-transform: rotate(0deg);
   }
   100% {
     -o-transform: rotate(359deg);
   }
 }
 @keyframes spin {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
     -webkit-transform: rotate(359deg);
     transform: rotate(359deg);
   }
 }
 .fa-rotate-90 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 .fa-rotate-180 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 .fa-rotate-270 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
   -webkit-transform: rotate(270deg);
   -moz-transform: rotate(270deg);
   -ms-transform: rotate(270deg);
   -o-transform: rotate(270deg);
   transform: rotate(270deg);
 }
 .fa-flip-horizontal {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
   -webkit-transform: scale(-1, 1);
   -moz-transform: scale(-1, 1);
   -ms-transform: scale(-1, 1);
   -o-transform: scale(-1, 1);
   transform: scale(-1, 1);
 }
 .fa-flip-vertical {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
   -webkit-transform: scale(1, -1);
   -moz-transform: scale(1, -1);
   -ms-transform: scale(1, -1);
   -o-transform: scale(1, -1);
   transform: scale(1, -1);
 }
 .fa-stack {
   position: relative;
   display: inline-block;
   width: 2em;
   height: 2em;
   line-height: 2em;
   vertical-align: middle;
 }
 .fa-stack-1x,
 .fa-stack-2x {
   position: absolute;
   left: 0;
   width: 100%;
   text-align: center;
 }
 .fa-stack-1x {
   line-height: inherit;
 }
 .fa-stack-2x {
   font-size: 2em;
 }
 .fa-inverse {
   color: #ffffff;
 }
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
 .fa-glass:before {
   content: "\f000";
 }
 .fa-music:before {
   content: "\f001";
 }
 .fa-search:before {
   content: "\f002";
 }
 .fa-envelope-o:before {
   content: "\f003";
 }
 .fa-heart:before {
   content: "\f004";
 }
 .fa-star:before {
   content: "\f005";
 }
 .fa-star-o:before {
   content: "\f006";
 }
 .fa-user:before {
   content: "\f007";
 }
 .fa-film:before {
   content: "\f008";
 }
 .fa-th-large:before {
   content: "\f009";
 }
 .fa-th:before {
   content: "\f00a";
 }
 .fa-th-list:before {
   content: "\f00b";
 }
 .fa-check:before {
   content: "\f00c";
 }
 .fa-times:before {
   content: "\f00d";
 }
 .fa-search-plus:before {
   content: "\f00e";
 }
 .fa-search-minus:before {
   content: "\f010";
 }
 .fa-power-off:before {
   content: "\f011";
 }
 .fa-signal:before {
   content: "\f012";
 }
 .fa-gear:before,
 .fa-cog:before {
   content: "\f013";
 }
 .fa-trash-o:before {
   content: "\f014";
 }
 .fa-home:before {
   content: "\f015";
 }
 .fa-file-o:before {
   content: "\f016";
 }
 .fa-clock-o:before {
   content: "\f017";
 }
 .fa-road:before {
   content: "\f018";
 }
 .fa-download:before {
   content: "\f019";
 }
 .fa-arrow-circle-o-down:before {
   content: "\f01a";
 }
 .fa-arrow-circle-o-up:before {
   content: "\f01b";
 }
 .fa-inbox:before {
   content: "\f01c";
 }
 .fa-play-circle-o:before {
   content: "\f01d";
 }
 .fa-rotate-right:before,
 .fa-repeat:before {
   content: "\f01e";
 }
 .fa-refresh:before {
   content: "\f021";
 }
 .fa-list-alt:before {
   content: "\f022";
 }
 .fa-lock:before {
   content: "\f023";
 }
 .fa-flag:before {
   content: "\f024";
 }
 .fa-headphones:before {
   content: "\f025";
 }
 .fa-volume-off:before {
   content: "\f026";
 }
 .fa-volume-down:before {
   content: "\f027";
 }
 .fa-volume-up:before {
   content: "\f028";
 }
 .fa-qrcode:before {
   content: "\f029";
 }
 .fa-barcode:before {
   content: "\f02a";
 }
 .fa-tag:before {
   content: "\f02b";
 }
 .fa-tags:before {
   content: "\f02c";
 }
 .fa-book:before {
   content: "\f02d";
 }
 .fa-bookmark:before {
   content: "\f02e";
 }
 .fa-print:before {
   content: "\f02f";
 }
 .fa-camera:before {
   content: "\f030";
 }
 .fa-font:before {
   content: "\f031";
 }
 .fa-bold:before {
   content: "\f032";
 }
 .fa-italic:before {
   content: "\f033";
 }
 .fa-text-height:before {
   content: "\f034";
 }
 .fa-text-width:before {
   content: "\f035";
 }
 .fa-align-left:before {
   content: "\f036";
 }
 .fa-align-center:before {
   content: "\f037";
 }
 .fa-align-right:before {
   content: "\f038";
 }
 .fa-align-justify:before {
   content: "\f039";
 }
 .fa-list:before {
   content: "\f03a";
 }
 .fa-dedent:before,
 .fa-outdent:before {
   content: "\f03b";
 }
 .fa-indent:before {
   content: "\f03c";
 }
 .fa-video-camera:before {
   content: "\f03d";
 }
 .fa-photo:before,
 .fa-image:before,
 .fa-picture-o:before {
   content: "\f03e";
 }
 .fa-pencil:before {
   content: "\f040";
 }
 .fa-map-marker:before {
   content: "\f041";
 }
 .fa-adjust:before {
   content: "\f042";
 }
 .fa-tint:before {
   content: "\f043";
 }
 .fa-edit:before,
 .fa-pencil-square-o:before {
   content: "\f044";
 }
 .fa-share-square-o:before {
   content: "\f045";
 }
 .fa-check-square-o:before {
   content: "\f046";
 }
 .fa-arrows:before {
   content: "\f047";
 }
 .fa-step-backward:before {
   content: "\f048";
 }
 .fa-fast-backward:before {
   content: "\f049";
 }
 .fa-backward:before {
   content: "\f04a";
 }
 .fa-play:before {
   content: "\f04b";
 }
 .fa-pause:before {
   content: "\f04c";
 }
 .fa-stop:before {
   content: "\f04d";
 }
 .fa-forward:before {
   content: "\f04e";
 }
 .fa-fast-forward:before {
   content: "\f050";
 }
 .fa-step-forward:before {
   content: "\f051";
 }
 .fa-eject:before {
   content: "\f052";
 }
 .fa-chevron-left:before {
   content: "\f053";
 }
 .fa-chevron-right:before {
   content: "\f054";
 }
 .fa-plus-circle:before {
   content: "\f055";
 }
 .fa-minus-circle:before {
   content: "\f056";
 }
 .fa-times-circle:before {
   content: "\f057";
 }
 .fa-check-circle:before {
   content: "\f058";
 }
 .fa-question-circle:before {
   content: "\f059";
 }
 .fa-info-circle:before {
   content: "\f05a";
 }
 .fa-crosshairs:before {
   content: "\f05b";
 }
 .fa-times-circle-o:before {
   content: "\f05c";
 }
 .fa-check-circle-o:before {
   content: "\f05d";
 }
 .fa-ban:before {
   content: "\f05e";
 }
 .fa-arrow-left:before {
   content: "\f060";
 }
 .fa-arrow-right:before {
   content: "\f061";
 }
 .fa-arrow-up:before {
   content: "\f062";
 }
 .fa-arrow-down:before {
   content: "\f063";
 }
 .fa-mail-forward:before,
 .fa-share:before {
   content: "\f064";
 }
 .fa-expand:before {
   content: "\f065";
 }
 .fa-compress:before {
   content: "\f066";
 }
 .fa-plus:before {
   content: "\f067";
 }
 .fa-minus:before {
   content: "\f068";
 }
 .fa-asterisk:before {
   content: "\f069";
 }
 .fa-exclamation-circle:before {
   content: "\f06a";
 }
 .fa-gift:before {
   content: "\f06b";
 }
 .fa-leaf:before {
   content: "\f06c";
 }
 .fa-fire:before {
   content: "\f06d";
 }
 .fa-eye:before {
   content: "\f06e";
 }
 .fa-eye-slash:before {
   content: "\f070";
 }
 .fa-warning:before,
 .fa-exclamation-triangle:before {
   content: "\f071";
 }
 .fa-plane:before {
   content: "\f072";
 }
 .fa-calendar:before {
   content: "\f073";
 }
 .fa-random:before {
   content: "\f074";
 }
 .fa-comment:before {
   content: "\f075";
 }
 .fa-magnet:before {
   content: "\f076";
 }
 .fa-chevron-up:before {
   content: "\f077";
 }
 .fa-chevron-down:before {
   content: "\f078";
 }
 .fa-retweet:before {
   content: "\f079";
 }
 .fa-shopping-cart:before {
   content: "\f07a";
 }
 .fa-folder:before {
   content: "\f07b";
 }
 .fa-folder-open:before {
   content: "\f07c";
 }
 .fa-arrows-v:before {
   content: "\f07d";
 }
 .fa-arrows-h:before {
   content: "\f07e";
 }
 .fa-bar-chart-o:before {
   content: "\f080";
 }
 .fa-twitter-square:before {
   content: "\f081";
 }
 .fa-facebook-square:before {
   content: "\f082";
 }
 .fa-camera-retro:before {
   content: "\f083";
 }
 .fa-key:before {
   content: "\f084";
 }
 .fa-gears:before,
 .fa-cogs:before {
   content: "\f085";
 }
 .fa-comments:before {
   content: "\f086";
 }
 .fa-thumbs-o-up:before {
   content: "\f087";
 }
 .fa-thumbs-o-down:before {
   content: "\f088";
 }
 .fa-star-half:before {
   content: "\f089";
 }
 .fa-heart-o:before {
   content: "\f08a";
 }
 .fa-sign-out:before {
   content: "\f08b";
 }
 .fa-linkedin-square:before {
   content: "\f08c";
 }
 .fa-thumb-tack:before {
   content: "\f08d";
 }
 .fa-external-link:before {
   content: "\f08e";
 }
 .fa-sign-in:before {
   content: "\f090";
 }
 .fa-trophy:before {
   content: "\f091";
 }
 .fa-github-square:before {
   content: "\f092";
 }
 .fa-upload:before {
   content: "\f093";
 }
 .fa-lemon-o:before {
   content: "\f094";
 }
 .fa-phone:before {
   content: "\f095";
 }
 .fa-square-o:before {
   content: "\f096";
 }
 .fa-bookmark-o:before {
   content: "\f097";
 }
 .fa-phone-square:before {
   content: "\f098";
 }
 .fa-twitter:before {
   content: "\f099";
 }
 .fa-facebook:before {
   content: "\f09a";
 }
 .fa-github:before {
   content: "\f09b";
 }
 .fa-unlock:before {
   content: "\f09c";
 }
 .fa-credit-card:before {
   content: "\f09d";
 }
 .fa-rss:before {
   content: "\f09e";
 }
 .fa-hdd-o:before {
   content: "\f0a0";
 }
 .fa-bullhorn:before {
   content: "\f0a1";
 }
 .fa-bell:before {
   content: "\f0f3";
 }
 .fa-certificate:before {
   content: "\f0a3";
 }
 .fa-hand-o-right:before {
   content: "\f0a4";
 }
 .fa-hand-o-left:before {
   content: "\f0a5";
 }
 .fa-hand-o-up:before {
   content: "\f0a6";
 }
 .fa-hand-o-down:before {
   content: "\f0a7";
 }
 .fa-arrow-circle-left:before {
   content: "\f0a8";
 }
 .fa-arrow-circle-right:before {
   content: "\f0a9";
 }
 .fa-arrow-circle-up:before {
   content: "\f0aa";
 }
 .fa-arrow-circle-down:before {
   content: "\f0ab";
 }
 .fa-globe:before {
   content: "\f0ac";
 }
 .fa-wrench:before {
   content: "\f0ad";
 }
 .fa-tasks:before {
   content: "\f0ae";
 }
 .fa-filter:before {
   content: "\f0b0";
 }
 .fa-briefcase:before {
   content: "\f0b1";
 }
 .fa-arrows-alt:before {
   content: "\f0b2";
 }
 .fa-group:before,
 .fa-users:before {
   content: "\f0c0";
 }
 .fa-chain:before,
 .fa-link:before {
   content: "\f0c1";
 }
 .fa-cloud:before {
   content: "\f0c2";
 }
 .fa-flask:before {
   content: "\f0c3";
 }
 .fa-cut:before,
 .fa-scissors:before {
   content: "\f0c4";
 }
 .fa-copy:before,
 .fa-files-o:before {
   content: "\f0c5";
 }
 .fa-paperclip:before {
   content: "\f0c6";
 }
 .fa-save:before,
 .fa-floppy-o:before {
   content: "\f0c7";
 }
 .fa-square:before {
   content: "\f0c8";
 }
 .fa-navicon:before,
 .fa-reorder:before,
 .fa-bars:before {
   content: "\f0c9";
 }
 .fa-list-ul:before {
   content: "\f0ca";
 }
 .fa-list-ol:before {
   content: "\f0cb";
 }
 .fa-strikethrough:before {
   content: "\f0cc";
 }
 .fa-underline:before {
   content: "\f0cd";
 }
 .fa-table:before {
   content: "\f0ce";
 }
 .fa-magic:before {
   content: "\f0d0";
 }
 .fa-truck:before {
   content: "\f0d1";
 }
 .fa-pinterest:before {
   content: "\f0d2";
 }
 .fa-pinterest-square:before {
   content: "\f0d3";
 }
 .fa-google-plus-square:before {
   content: "\f0d4";
 }
 .fa-google-plus:before {
   content: "\f0d5";
 }
 .fa-money:before {
   content: "\f0d6";
 }
 .fa-caret-down:before {
   content: "\f0d7";
 }
 .fa-caret-up:before {
   content: "\f0d8";
 }
 .fa-caret-left:before {
   content: "\f0d9";
 }
 .fa-caret-right:before {
   content: "\f0da";
 }
 .fa-columns:before {
   content: "\f0db";
 }
 .fa-unsorted:before,
 .fa-sort:before {
   content: "\f0dc";
 }
 .fa-sort-down:before,
 .fa-sort-desc:before {
   content: "\f0dd";
 }
 .fa-sort-up:before,
 .fa-sort-asc:before {
   content: "\f0de";
 }
 .fa-envelope:before {
   content: "\f0e0";
 }
 .fa-linkedin:before {
   content: "\f0e1";
 }
 .fa-rotate-left:before,
 .fa-undo:before {
   content: "\f0e2";
 }
 .fa-legal:before,
 .fa-gavel:before {
   content: "\f0e3";
 }
 .fa-dashboard:before,
 .fa-tachometer:before {
   content: "\f0e4";
 }
 .fa-comment-o:before {
   content: "\f0e5";
 }
 .fa-comments-o:before {
   content: "\f0e6";
 }
 .fa-flash:before,
 .fa-bolt:before {
   content: "\f0e7";
 }
 .fa-sitemap:before {
   content: "\f0e8";
 }
 .fa-umbrella:before {
   content: "\f0e9";
 }
 .fa-paste:before,
 .fa-clipboard:before {
   content: "\f0ea";
 }
 .fa-lightbulb-o:before {
   content: "\f0eb";
 }
 .fa-exchange:before {
   content: "\f0ec";
 }
 .fa-cloud-download:before {
   content: "\f0ed";
 }
 .fa-cloud-upload:before {
   content: "\f0ee";
 }
 .fa-user-md:before {
   content: "\f0f0";
 }
 .fa-stethoscope:before {
   content: "\f0f1";
 }
 .fa-suitcase:before {
   content: "\f0f2";
 }
 .fa-bell-o:before {
   content: "\f0a2";
 }
 .fa-coffee:before {
   content: "\f0f4";
 }
 .fa-cutlery:before {
   content: "\f0f5";
 }
 .fa-file-text-o:before {
   content: "\f0f6";
 }
 .fa-building-o:before {
   content: "\f0f7";
 }
 .fa-hospital-o:before {
   content: "\f0f8";
 }
 .fa-ambulance:before {
   content: "\f0f9";
 }
 .fa-medkit:before {
   content: "\f0fa";
 }
 .fa-fighter-jet:before {
   content: "\f0fb";
 }
 .fa-beer:before {
   content: "\f0fc";
 }
 .fa-h-square:before {
   content: "\f0fd";
 }
 .fa-plus-square:before {
   content: "\f0fe";
 }
 .fa-angle-double-left:before {
   content: "\f100";
 }
 .fa-angle-double-right:before {
   content: "\f101";
 }
 .fa-angle-double-up:before {
   content: "\f102";
 }
 .fa-angle-double-down:before {
   content: "\f103";
 }
 .fa-angle-left:before {
   content: "\f104";
 }
 .fa-angle-right:before {
   content: "\f105";
 }
 .fa-angle-up:before {
   content: "\f106";
 }
 .fa-angle-down:before {
   content: "\f107";
 }
 .fa-desktop:before {
   content: "\f108";
 }
 .fa-laptop:before {
   content: "\f109";
 }
 .fa-tablet:before {
   content: "\f10a";
 }
 .fa-mobile-phone:before,
 .fa-mobile:before {
   content: "\f10b";
 }
 .fa-circle-o:before {
   content: "\f10c";
 }
 .fa-quote-left:before {
   content: "\f10d";
 }
 .fa-quote-right:before {
   content: "\f10e";
 }
 .fa-spinner:before {
   content: "\f110";
 }
 .fa-circle:before {
   content: "\f111";
 }
 .fa-mail-reply:before,
 .fa-reply:before {
   content: "\f112";
 }
 .fa-github-alt:before {
   content: "\f113";
 }
 .fa-folder-o:before {
   content: "\f114";
 }
 .fa-folder-open-o:before {
   content: "\f115";
 }
 .fa-smile-o:before {
   content: "\f118";
 }
 .fa-frown-o:before {
   content: "\f119";
 }
 .fa-meh-o:before {
   content: "\f11a";
 }
 .fa-gamepad:before {
   content: "\f11b";
 }
 .fa-keyboard-o:before {
   content: "\f11c";
 }
 .fa-flag-o:before {
   content: "\f11d";
 }
 .fa-flag-checkered:before {
   content: "\f11e";
 }
 .fa-terminal:before {
   content: "\f120";
 }
 .fa-code:before {
   content: "\f121";
 }
 .fa-mail-reply-all:before,
 .fa-reply-all:before {
   content: "\f122";
 }
 .fa-star-half-empty:before,
 .fa-star-half-full:before,
 .fa-star-half-o:before {
   content: "\f123";
 }
 .fa-location-arrow:before {
   content: "\f124";
 }
 .fa-crop:before {
   content: "\f125";
 }
 .fa-code-fork:before {
   content: "\f126";
 }
 .fa-unlink:before,
 .fa-chain-broken:before {
   content: "\f127";
 }
 .fa-question:before {
   content: "\f128";
 }
 .fa-info:before {
   content: "\f129";
 }
 .fa-exclamation:before {
   content: "\f12a";
 }
 .fa-superscript:before {
   content: "\f12b";
 }
 .fa-subscript:before {
   content: "\f12c";
 }
 .fa-eraser:before {
   content: "\f12d";
 }
 .fa-puzzle-piece:before {
   content: "\f12e";
 }
 .fa-microphone:before {
   content: "\f130";
 }
 .fa-microphone-slash:before {
   content: "\f131";
 }
 .fa-shield:before {
   content: "\f132";
 }
 .fa-calendar-o:before {
   content: "\f133";
 }
 .fa-fire-extinguisher:before {
   content: "\f134";
 }
 .fa-rocket:before {
   content: "\f135";
 }
 .fa-maxcdn:before {
   content: "\f136";
 }
 .fa-chevron-circle-left:before {
   content: "\f137";
 }
 .fa-chevron-circle-right:before {
   content: "\f138";
 }
 .fa-chevron-circle-up:before {
   content: "\f139";
 }
 .fa-chevron-circle-down:before {
   content: "\f13a";
 }
 .fa-html5:before {
   content: "\f13b";
 }
 .fa-css3:before {
   content: "\f13c";
 }
 .fa-anchor:before {
   content: "\f13d";
 }
 .fa-unlock-alt:before {
   content: "\f13e";
 }
 .fa-bullseye:before {
   content: "\f140";
 }
 .fa-ellipsis-h:before {
   content: "\f141";
 }
 .fa-ellipsis-v:before {
   content: "\f142";
 }
 .fa-rss-square:before {
   content: "\f143";
 }
 .fa-play-circle:before {
   content: "\f144";
 }
 .fa-ticket:before {
   content: "\f145";
 }
 .fa-minus-square:before {
   content: "\f146";
 }
 .fa-minus-square-o:before {
   content: "\f147";
 }
 .fa-level-up:before {
   content: "\f148";
 }
 .fa-level-down:before {
   content: "\f149";
 }
 .fa-check-square:before {
   content: "\f14a";
 }
 .fa-pencil-square:before {
   content: "\f14b";
 }
 .fa-external-link-square:before {
   content: "\f14c";
 }
 .fa-share-square:before {
   content: "\f14d";
 }
 .fa-compass:before {
   content: "\f14e";
 }
 .fa-toggle-down:before,
 .fa-caret-square-o-down:before {
   content: "\f150";
 }
 .fa-toggle-up:before,
 .fa-caret-square-o-up:before {
   content: "\f151";
 }
 .fa-toggle-right:before,
 .fa-caret-square-o-right:before {
   content: "\f152";
 }
 .fa-euro:before,
 .fa-eur:before {
   content: "\f153";
 }
 .fa-gbp:before {
   content: "\f154";
 }
 .fa-dollar:before,
 .fa-usd:before {
   content: "\f155";
 }
 .fa-rupee:before,
 .fa-inr:before {
   content: "\f156";
 }
 .fa-cny:before,
 .fa-rmb:before,
 .fa-yen:before,
 .fa-jpy:before {
   content: "\f157";
 }
 .fa-ruble:before,
 .fa-rouble:before,
 .fa-rub:before {
   content: "\f158";
 }
 .fa-won:before,
 .fa-krw:before {
   content: "\f159";
 }
 .fa-bitcoin:before,
 .fa-btc:before {
   content: "\f15a";
 }
 .fa-file:before {
   content: "\f15b";
 }
 .fa-file-text:before {
   content: "\f15c";
 }
 .fa-sort-alpha-asc:before {
   content: "\f15d";
 }
 .fa-sort-alpha-desc:before {
   content: "\f15e";
 }
 .fa-sort-amount-asc:before {
   content: "\f160";
 }
 .fa-sort-amount-desc:before {
   content: "\f161";
 }
 .fa-sort-numeric-asc:before {
   content: "\f162";
 }
 .fa-sort-numeric-desc:before {
   content: "\f163";
 }
 .fa-thumbs-up:before {
   content: "\f164";
 }
 .fa-thumbs-down:before {
   content: "\f165";
 }
 .fa-youtube-square:before {
   content: "\f166";
 }
 .fa-youtube:before {
   content: "\f167";
 }
 .fa-xing:before {
   content: "\f168";
 }
 .fa-xing-square:before {
   content: "\f169";
 }
 .fa-youtube-play:before {
   content: "\f16a";
 }
 .fa-dropbox:before {
   content: "\f16b";
 }
 .fa-stack-overflow:before {
   content: "\f16c";
 }
 .fa-instagram:before {
   content: "\f16d";
 }
 .fa-flickr:before {
   content: "\f16e";
 }
 .fa-adn:before {
   content: "\f170";
 }
 .fa-bitbucket:before {
   content: "\f171";
 }
 .fa-bitbucket-square:before {
   content: "\f172";
 }
 .fa-tumblr:before {
   content: "\f173";
 }
 .fa-tumblr-square:before {
   content: "\f174";
 }
 .fa-long-arrow-down:before {
   content: "\f175";
 }
 .fa-long-arrow-up:before {
   content: "\f176";
 }
 .fa-long-arrow-left:before {
   content: "\f177";
 }
 .fa-long-arrow-right:before {
   content: "\f178";
 }
 .fa-apple:before {
   content: "\f179";
 }
 .fa-windows:before {
   content: "\f17a";
 }
 .fa-android:before {
   content: "\f17b";
 }
 .fa-linux:before {
   content: "\f17c";
 }
 .fa-dribbble:before {
   content: "\f17d";
 }
 .fa-skype:before {
   content: "\f17e";
 }
 .fa-foursquare:before {
   content: "\f180";
 }
 .fa-trello:before {
   content: "\f181";
 }
 .fa-female:before {
   content: "\f182";
 }
 .fa-male:before {
   content: "\f183";
 }
 .fa-gittip:before {
   content: "\f184";
 }
 .fa-sun-o:before {
   content: "\f185";
 }
 .fa-moon-o:before {
   content: "\f186";
 }
 .fa-archive:before {
   content: "\f187";
 }
 .fa-bug:before {
   content: "\f188";
 }
 .fa-vk:before {
   content: "\f189";
 }
 .fa-weibo:before {
   content: "\f18a";
 }
 .fa-renren:before {
   content: "\f18b";
 }
 .fa-pagelines:before {
   content: "\f18c";
 }
 .fa-stack-exchange:before {
   content: "\f18d";
 }
 .fa-arrow-circle-o-right:before {
   content: "\f18e";
 }
 .fa-arrow-circle-o-left:before {
   content: "\f190";
 }
 .fa-toggle-left:before,
 .fa-caret-square-o-left:before {
   content: "\f191";
 }
 .fa-dot-circle-o:before {
   content: "\f192";
 }
 .fa-wheelchair:before {
   content: "\f193";
 }
 .fa-vimeo-square:before {
   content: "\f194";
 }
 .fa-turkish-lira:before,
 .fa-try:before {
   content: "\f195";
 }
 .fa-plus-square-o:before {
   content: "\f196";
 }
 .fa-space-shuttle:before {
   content: "\f197";
 }
 .fa-slack:before {
   content: "\f198";
 }
 .fa-envelope-square:before {
   content: "\f199";
 }
 .fa-wordpress:before {
   content: "\f19a";
 }
 .fa-openid:before {
   content: "\f19b";
 }
 .fa-institution:before,
 .fa-bank:before,
 .fa-university:before {
   content: "\f19c";
 }
 .fa-mortar-board:before,
 .fa-graduation-cap:before {
   content: "\f19d";
 }
 .fa-yahoo:before {
   content: "\f19e";
 }
 .fa-google:before {
   content: "\f1a0";
 }
 .fa-reddit:before {
   content: "\f1a1";
 }
 .fa-reddit-square:before {
   content: "\f1a2";
 }
 .fa-stumbleupon-circle:before {
   content: "\f1a3";
 }
 .fa-stumbleupon:before {
   content: "\f1a4";
 }
 .fa-delicious:before {
   content: "\f1a5";
 }
 .fa-digg:before {
   content: "\f1a6";
 }
 .fa-pied-piper-square:before,
 .fa-pied-piper:before {
   content: "\f1a7";
 }
 .fa-pied-piper-alt:before {
   content: "\f1a8";
 }
 .fa-drupal:before {
   content: "\f1a9";
 }
 .fa-joomla:before {
   content: "\f1aa";
 }
 .fa-language:before {
   content: "\f1ab";
 }
 .fa-fax:before {
   content: "\f1ac";
 }
 .fa-building:before {
   content: "\f1ad";
 }
 .fa-child:before {
   content: "\f1ae";
 }
 .fa-paw:before {
   content: "\f1b0";
 }
 .fa-spoon:before {
   content: "\f1b1";
 }
 .fa-cube:before {
   content: "\f1b2";
 }
 .fa-cubes:before {
   content: "\f1b3";
 }
 .fa-behance:before {
   content: "\f1b4";
 }
 .fa-behance-square:before {
   content: "\f1b5";
 }
 .fa-steam:before {
   content: "\f1b6";
 }
 .fa-steam-square:before {
   content: "\f1b7";
 }
 .fa-recycle:before {
   content: "\f1b8";
 }
 .fa-automobile:before,
 .fa-car:before {
   content: "\f1b9";
 }
 .fa-cab:before,
 .fa-taxi:before {
   content: "\f1ba";
 }
 .fa-tree:before {
   content: "\f1bb";
 }
 .fa-spotify:before {
   content: "\f1bc";
 }
 .fa-deviantart:before {
   content: "\f1bd";
 }
 .fa-soundcloud:before {
   content: "\f1be";
 }
 .fa-database:before {
   content: "\f1c0";
 }
 .fa-file-pdf-o:before {
   content: "\f1c1";
 }
 .fa-file-word-o:before {
   content: "\f1c2";
 }
 .fa-file-excel-o:before {
   content: "\f1c3";
 }
 .fa-file-powerpoint-o:before {
   content: "\f1c4";
 }
 .fa-file-photo-o:before,
 .fa-file-picture-o:before,
 .fa-file-image-o:before {
   content: "\f1c5";
 }
 .fa-file-zip-o:before,
 .fa-file-archive-o:before {
   content: "\f1c6";
 }
 .fa-file-sound-o:before,
 .fa-file-audio-o:before {
   content: "\f1c7";
 }
 .fa-file-movie-o:before,
 .fa-file-video-o:before {
   content: "\f1c8";
 }
 .fa-file-code-o:before {
   content: "\f1c9";
 }
 .fa-vine:before {
   content: "\f1ca";
 }
 .fa-codepen:before {
   content: "\f1cb";
 }
 .fa-jsfiddle:before {
   content: "\f1cc";
 }
 .fa-life-bouy:before,
 .fa-life-saver:before,
 .fa-support:before,
 .fa-life-ring:before {
   content: "\f1cd";
 }
 .fa-circle-o-notch:before {
   content: "\f1ce";
 }
 .fa-ra:before,
 .fa-rebel:before {
   content: "\f1d0";
 }
 .fa-ge:before,
 .fa-empire:before {
   content: "\f1d1";
 }
 .fa-git-square:before {
   content: "\f1d2";
 }
 .fa-git:before {
   content: "\f1d3";
 }
 .fa-hacker-news:before {
   content: "\f1d4";
 }
 .fa-tencent-weibo:before {
   content: "\f1d5";
 }
 .fa-qq:before {
   content: "\f1d6";
 }
 .fa-wechat:before,
 .fa-weixin:before {
   content: "\f1d7";
 }
 .fa-send:before,
 .fa-paper-plane:before {
   content: "\f1d8";
 }
 .fa-send-o:before,
 .fa-paper-plane-o:before {
   content: "\f1d9";
 }
 .fa-history:before {
   content: "\f1da";
 }
 .fa-circle-thin:before {
   content: "\f1db";
 }
 .fa-header:before {
   content: "\f1dc";
 }
 .fa-paragraph:before {
   content: "\f1dd";
 }
 .fa-sliders:before {
   content: "\f1de";
 }
 .fa-share-alt:before {
   content: "\f1e0";
 }
 .fa-share-alt-square:before {
   content: "\f1e1";
 }
 .fa-bomb:before {
   content: "\f1e2";
 }
 /*!
 *
 * IPython base
 *
 */
 .modal.fade .modal-dialog {
   -webkit-transform: translate(0, 0);
   -ms-transform: translate(0, 0);
   transform: translate(0, 0);
 }
 code {
   color: #000000;
 }
 pre {
   font-size: inherit;
   line-height: inherit;
 }
 label {
   font-weight: normal;
 }
 .border-box-sizing {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 .corner-all {
   border-radius: 4px;
 }
 .no-padding {
   padding: 0px;
 }
 /* Flexible box model classes */
 /* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
 /* This file is a compatability layer.  It allows the usage of flexible box 
 model layouts accross multiple browsers, including older browsers.  The newest,
 universal implementation of the flexible box model is used when available (see
 `Modern browsers` comments below).  Browsers that are known to implement this 
 new spec completely include:
 
     Firefox 28.0+
     Chrome 29.0+
     Internet Explorer 11+ 
     Opera 17.0+
 
 Browsers not listed, including Safari, are supported via the styling under the
 `Old browsers` comments below.
 */
 .hbox {
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
 }
 .hbox > * {
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .vbox {
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
 }
 .vbox > * {
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .hbox.reverse,
 .vbox.reverse,
 .reverse {
   /* Old browsers */
   -webkit-box-direction: reverse;
   -moz-box-direction: reverse;
   box-direction: reverse;
   /* Modern browsers */
   flex-direction: row-reverse;
 }
 .hbox.box-flex0,
 .vbox.box-flex0,
 .box-flex0 {
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   width: auto;
 }
 .hbox.box-flex1,
 .vbox.box-flex1,
 .box-flex1 {
   /* Old browsers */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
 }
 .hbox.box-flex,
 .vbox.box-flex,
 .box-flex {
   /* Old browsers */
   /* Old browsers */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
 }
 .hbox.box-flex2,
 .vbox.box-flex2,
 .box-flex2 {
   /* Old browsers */
   -webkit-box-flex: 2;
   -moz-box-flex: 2;
   box-flex: 2;
   /* Modern browsers */
   flex: 2;
 }
 .box-group1 {
   /*  Deprecated */
   -webkit-box-flex-group: 1;
   -moz-box-flex-group: 1;
   box-flex-group: 1;
 }
 .box-group2 {
   /* Deprecated */
   -webkit-box-flex-group: 2;
   -moz-box-flex-group: 2;
   box-flex-group: 2;
 }
 .hbox.start,
 .vbox.start,
 .start {
   /* Old browsers */
   -webkit-box-pack: start;
   -moz-box-pack: start;
   box-pack: start;
   /* Modern browsers */
   justify-content: flex-start;
 }
 .hbox.end,
 .vbox.end,
 .end {
   /* Old browsers */
   -webkit-box-pack: end;
   -moz-box-pack: end;
   box-pack: end;
   /* Modern browsers */
   justify-content: flex-end;
 }
 .hbox.center,
 .vbox.center,
 .center {
   /* Old browsers */
   -webkit-box-pack: center;
   -moz-box-pack: center;
   box-pack: center;
   /* Modern browsers */
   justify-content: center;
 }
 .hbox.align-start,
 .vbox.align-start,
 .align-start {
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
 }
 .hbox.align-end,
 .vbox.align-end,
 .align-end {
   /* Old browsers */
   -webkit-box-align: end;
   -moz-box-align: end;
   box-align: end;
   /* Modern browsers */
   align-items: flex-end;
 }
 .hbox.align-center,
 .vbox.align-center,
 .align-center {
   /* Old browsers */
   -webkit-box-align: center;
   -moz-box-align: center;
   box-align: center;
   /* Modern browsers */
   align-items: center;
 }
 div.error {
   margin: 2em;
   text-align: center;
 }
 div.error > h1 {
   font-size: 500%;
   line-height: normal;
 }
 div.error > p {
   font-size: 200%;
   line-height: normal;
 }
 div.traceback-wrapper {
   text-align: left;
   max-width: 800px;
   margin: auto;
 }
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 body {
   background-color: white;
   /* This makes sure that the body covers the entire window and needs to
        be in a different element than the display: box in wrapper below */
   position: absolute;
   left: 0px;
   right: 0px;
   top: 0px;
   bottom: 0px;
   overflow: visible;
 }
 div#header {
   /* Initially hidden to prevent FLOUC */
   display: none;
   margin-bottom: 0px;
   padding-left: 30px;
   padding-bottom: 5px;
   border-bottom: 1px solid #e7e7e7;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 #ipython_notebook {
   padding-left: 0px;
 }
 #noscript {
   width: auto;
   padding-top: 16px;
   padding-bottom: 16px;
   text-align: center;
   font-size: 22px;
   color: red;
   font-weight: bold;
 }
 #ipython_notebook img {
   font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
   height: 24px;
   text-decoration: none;
   color: black;
 }
 #site {
   width: 100%;
   display: none;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 /* Smaller buttons */
 .ui-button .ui-button-text {
   padding: 0.2em 0.8em;
   font-size: 77%;
 }
 input.ui-button {
   padding: 0.3em 0.9em;
 }
 .navbar span {
   margin-top: 3px;
 }
 span#login_widget {
   float: right;
 }
 span#login_widget > .button,
 #logout {
   display: inline-block;
   margin-bottom: 0;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   background-image: none;
   border: 1px solid transparent;
   white-space: nowrap;
   padding: 6px 12px;
   font-size: 13px;
   line-height: 1.42857143;
   border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   color: #333333;
   background-color: #ffffff;
   border-color: #cccccc;
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px;
 }
 span#login_widget > .button:focus,
 #logout:focus,
 span#login_widget > .button:active:focus,
 #logout:active:focus,
 span#login_widget > .button.active:focus,
 #logout.active:focus {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
 span#login_widget > .button:hover,
 #logout:hover,
 span#login_widget > .button:focus,
 #logout:focus {
   color: #333333;
   text-decoration: none;
 }
 span#login_widget > .button:active,
 #logout:active,
 span#login_widget > .button.active,
 #logout.active {
   outline: 0;
   background-image: none;
   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 span#login_widget > .button.disabled,
 #logout.disabled,
 span#login_widget > .button[disabled],
 #logout[disabled],
 fieldset[disabled] span#login_widget > .button,
 fieldset[disabled] #logout {
   cursor: not-allowed;
   pointer-events: none;
   opacity: 0.65;
   filter: alpha(opacity=65);
   -webkit-box-shadow: none;
   box-shadow: none;
 }
 span#login_widget > .button:hover,
 #logout:hover,
 span#login_widget > .button:focus,
 #logout:focus,
 span#login_widget > .button:active,
 #logout:active,
 span#login_widget > .button.active,
 #logout.active,
 .open .dropdown-togglespan#login_widget > .button,
 .open .dropdown-toggle#logout {
   color: #333333;
   background-color: #ebebeb;
   border-color: #adadad;
 }
 span#login_widget > .button:active,
 #logout:active,
 span#login_widget > .button.active,
 #logout.active,
 .open .dropdown-togglespan#login_widget > .button,
 .open .dropdown-toggle#logout {
   background-image: none;
 }
 span#login_widget > .button.disabled,
 #logout.disabled,
 span#login_widget > .button[disabled],
 #logout[disabled],
 fieldset[disabled] span#login_widget > .button,
 fieldset[disabled] #logout,
 span#login_widget > .button.disabled:hover,
 #logout.disabled:hover,
 span#login_widget > .button[disabled]:hover,
 #logout[disabled]:hover,
 fieldset[disabled] span#login_widget > .button:hover,
 fieldset[disabled] #logout:hover,
 span#login_widget > .button.disabled:focus,
 #logout.disabled:focus,
 span#login_widget > .button[disabled]:focus,
 #logout[disabled]:focus,
 fieldset[disabled] span#login_widget > .button:focus,
 fieldset[disabled] #logout:focus,
 span#login_widget > .button.disabled:active,
 #logout.disabled:active,
 span#login_widget > .button[disabled]:active,
 #logout[disabled]:active,
 fieldset[disabled] span#login_widget > .button:active,
 fieldset[disabled] #logout:active,
 span#login_widget > .button.disabled.active,
 #logout.disabled.active,
 span#login_widget > .button[disabled].active,
 #logout[disabled].active,
 fieldset[disabled] span#login_widget > .button.active,
 fieldset[disabled] #logout.active {
   background-color: #ffffff;
   border-color: #cccccc;
 }
 span#login_widget > .button .badge,
 #logout .badge {
   color: #ffffff;
   background-color: #333333;
 }
 .nav-header {
   text-transform: none;
 }
 #header > span {
   margin-top: 10px;
 }
 .modal_stretch .modal-dialog {
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   min-height: 80%;
 }
 .modal_stretch .modal-dialog .modal-body {
   max-height: none;
   flex: 1;
 }
 @media (min-width: 768px) {
   .modal .modal-dialog {
     width: 700px;
   }
 }
 /*!
 *
 * IPython auth
 *
 */
 .center-nav {
   display: inline-block;
   margin-bottom: -4px;
 }
 /*!
 *
 * IPython tree view
 *
 */
 /* We need an invisible input field on top of the sentense*/
 /* "Drag file onto the list ..." */
 .alternate_upload {
   background-color: none;
   display: inline;
 }
 .alternate_upload.form {
   padding: 0;
   margin: 0;
 }
 .alternate_upload input.fileinput {
   background-color: red;
   position: relative;
   opacity: 0;
   z-index: 2;
   width: 295px;
   margin-left: 163px;
   cursor: pointer;
   height: 26px;
 }
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 ul#tabs {
   margin-bottom: 4px;
 }
 ul#tabs a {
   padding-top: 6px;
   padding-bottom: 4px;
 }
 ul.breadcrumb a:focus,
 ul.breadcrumb a:hover {
   text-decoration: none;
 }
 ul.breadcrumb i.icon-home {
   font-size: 16px;
   margin-right: 4px;
 }
 ul.breadcrumb span {
   color: #5e5e5e;
 }
 .list_toolbar {
   padding: 4px 0 4px 0;
   vertical-align: middle;
 }
 .list_toolbar .tree-buttons {
   padding-top: 2px;
 }
 .list_toolbar [class*="span"] {
   min-height: 24px;
 }
 .list_header {
   font-weight: bold;
 }
 .list_container {
   margin-top: 4px;
   margin-bottom: 20px;
   border: 1px solid #ababab;
   border-radius: 4px;
 }
 .list_container > div {
   border-bottom: 1px solid #ababab;
 }
 .list_container > div:hover .list-item {
   background-color: red;
 }
 .list_container > div:last-child {
   border: none;
 }
 .list_item:hover .list_item {
   background-color: #ddd;
 }
 .list_item a {
   text-decoration: none;
 }
 .action_col {
   text-align: right;
 }
 .list_header > div,
 .list_item > div {
   padding-top: 4px;
   padding-bottom: 4px;
   padding-left: 7px;
   padding-right: 7px;
   line-height: 22px;
 }
 .item_name {
   line-height: 22px;
   height: 24px;
 }
 .item_icon {
   font-size: 14px;
   color: #5e5e5e;
   margin-right: 7px;
 }
 .item_buttons {
   line-height: 1em;
 }
 .toolbar_info {
   height: 24px;
   line-height: 24px;
 }
 input.nbname_input,
 input.engine_num_input {
   padding-top: 3px;
   padding-bottom: 3px;
   height: 22px;
   line-height: 14px;
   margin: 0px;
 }
 input.engine_num_input {
   width: 60px;
 }
 .highlight_text {
   color: blue;
 }
 #project_name > .breadcrumb {
   padding: 0px;
   margin-bottom: 0px;
   background-color: transparent;
   font-weight: bold;
 }
 .tab-content .row {
   margin-left: 0px;
   margin-right: 0px;
 }
 .folder_icon:before {
   display: inline-block;
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f114";
 }
 .folder_icon:before.pull-left {
   margin-right: .3em;
 }
 .folder_icon:before.pull-right {
   margin-left: .3em;
 }
 .notebook_icon:before {
   display: inline-block;
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f02d";
 }
 .notebook_icon:before.pull-left {
   margin-right: .3em;
 }
 .notebook_icon:before.pull-right {
   margin-left: .3em;
 }
 .file_icon:before {
   display: inline-block;
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f016";
 }
 .file_icon:before.pull-left {
   margin-right: .3em;
 }
 .file_icon:before.pull-right {
   margin-left: .3em;
 }
 /*!
 *
 * IPython notebook
 *
 */
 /* CSS font colors for translated ANSI colors. */
 .ansibold {
   font-weight: bold;
 }
 /* use dark versions for foreground, to improve visibility */
 .ansiblack {
   color: black;
 }
 .ansired {
   color: darkred;
 }
 .ansigreen {
   color: darkgreen;
 }
 .ansiyellow {
   color: brown;
 }
 .ansiblue {
   color: darkblue;
 }
 .ansipurple {
   color: darkviolet;
 }
 .ansicyan {
   color: steelblue;
 }
 .ansigray {
   color: gray;
 }
 /* and light for background, for the same reason */
 .ansibgblack {
   background-color: black;
 }
 .ansibgred {
   background-color: red;
 }
 .ansibggreen {
   background-color: green;
 }
 .ansibgyellow {
   background-color: yellow;
 }
 .ansibgblue {
   background-color: blue;
 }
 .ansibgpurple {
   background-color: magenta;
 }
 .ansibgcyan {
   background-color: cyan;
 }
 .ansibggray {
   background-color: gray;
 }
 div.cell {
   border: 1px solid transparent;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   border-radius: 4px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   border-width: thin;
   border-style: solid;
   width: 100%;
   padding: 5px 5px 5px 0px;
   /* This acts as a spacer between cells, that is outside the border */
   margin: 0px;
   outline: none;
 }
 div.cell.selected {
   border-color: #ababab;
 }
 div.cell.edit_mode {
   border-color: green;
 }
 div.prompt {
   /* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
   min-width: 15ex;
   /* This padding is tuned to match the padding on the CodeMirror editor. */
   padding: 0.4em;
   margin: 0px;
   font-family: monospace;
   text-align: right;
   /* This has to match that of the the CodeMirror class line-height below */
   line-height: 1.21429em;
 }
 @media (max-width: 480px) {
   div.prompt {
     text-align: left;
   }
 }
 div.inner_cell {
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   /* Old browsers */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
 }
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_area {
   border: 1px solid #cfcfcf;
   border-radius: 4px;
   background: #f7f7f7;
   line-height: 1.21429em;
 }
 /* This is needed so that empty prompt areas can collapse to zero height when there
    is no content in the output_subarea and the prompt. The main purpose of this is
    to make sure that empty JavaScript output_subareas have no height. */
 div.prompt:empty {
   padding-top: 0;
   padding-bottom: 0;
 }
 /* any special styling for code cells that are currently running goes here */
 div.input {
   page-break-inside: avoid;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 @media (max-width: 480px) {
   div.input {
     /* Old browsers */
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-box-align: stretch;
     display: -moz-box;
     -moz-box-orient: vertical;
     -moz-box-align: stretch;
     display: box;
     box-orient: vertical;
     box-align: stretch;
     /* Modern browsers */
     display: flex;
     flex-direction: column;
     align-items: stretch;
     /* Old browsers */
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
     /* Modern browsers */
     flex: none;
   }
 }
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_prompt {
   color: #000080;
   border-top: 1px solid transparent;
 }
 div.input_area > div.highlight {
   margin: 0.4em;
   border: none;
   padding: 0px;
   background-color: transparent;
 }
 div.input_area > div.highlight > pre {
   margin: 0px;
   border: none;
   padding: 0px;
   background-color: transparent;
 }
 /* The following gets added to the <head> if it is detected that the user has a
  * monospace font with inconsistent normal/bold/italic height.  See
  * notebookmain.js.  Such fonts will have keywords vertically offset with
  * respect to the rest of the text.  The user should select a better font.
  * See: https://github.com/ipython/ipython/issues/1503
  *
  * .CodeMirror span {
  *      vertical-align: bottom;
  * }
  */
 .CodeMirror {
   line-height: 1.21429em;
   /* Changed from 1em to our global default */
   height: auto;
   /* Changed to auto to autogrow */
   background: none;
   /* Changed from white to allow our bg to show through */
 }
 .CodeMirror-scroll {
   /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
   /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
   overflow-y: hidden;
   overflow-x: auto;
 }
 .CodeMirror-lines {
   /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
   /* we have set a different line-height and want this to scale with that. */
   padding: 0.4em;
 }
 .CodeMirror-linenumber {
   padding: 0 8px 0 4px;
 }
 .CodeMirror-gutters {
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
 }
 .CodeMirror pre {
   /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
   /* .CodeMirror-lines */
   padding: 0;
   border: 0;
   border-radius: 0;
 }
 .CodeMirror-vscrollbar,
 .CodeMirror-hscrollbar {
   display: none !important;
 }
 /*
 
 Original style from softwaremaniacs.org (c) Ivan Sagalaev <[e-mail]>
 Adapted from GitHub theme
 
 */
 pre code {
   display: block;
   padding: 0.5em;
 }
 .highlight-base,
 pre code,
 pre .subst,
 pre .tag .title,
 pre .lisp .title,
 pre .clojure .built_in,
 pre .nginx .title {
   color: black;
 }
 .highlight-string,
 pre .string,
 pre .constant,
 pre .parent,
 pre .tag .value,
 pre .rules .value,
 pre .rules .value .number,
 pre .preprocessor,
 pre .ruby .symbol,
 pre .ruby .symbol .string,
 pre .aggregate,
 pre .template_tag,
 pre .django .variable,
 pre .smalltalk .class,
 pre .addition,
 pre .flow,
 pre .stream,
 pre .bash .variable,
 pre .apache .tag,
 pre .apache .cbracket,
 pre .tex .command,
 pre .tex .special,
 pre .erlang_repl .function_or_atom,
 pre .markdown .header {
   color: #BA2121;
 }
 .highlight-comment,
 pre .comment,
 pre .annotation,
 pre .template_comment,
 pre .diff .header,
 pre .chunk,
 pre .markdown .blockquote {
   color: #408080;
   font-style: italic;
 }
 .highlight-number,
 pre .number,
 pre .date,
 pre .regexp,
 pre .literal,
 pre .smalltalk .symbol,
 pre .smalltalk .char,
 pre .go .constant,
 pre .change,
 pre .markdown .bullet,
 pre .markdown .link_url {
   color: #080;
 }
 pre .label,
 pre .javadoc,
 pre .ruby .string,
 pre .decorator,
 pre .filter .argument,
 pre .localvars,
 pre .array,
 pre .attr_selector,
 pre .important,
 pre .pseudo,
 pre .pi,
 pre .doctype,
 pre .deletion,
 pre .envvar,
 pre .shebang,
 pre .apache .sqbracket,
 pre .nginx .built_in,
 pre .tex .formula,
 pre .erlang_repl .reserved,
 pre .prompt,
 pre .markdown .link_label,
 pre .vhdl .attribute,
 pre .clojure .attribute,
 pre .coffeescript .property {
   color: #8888ff;
 }
 .highlight-keyword,
 pre .keyword,
 pre .id,
 pre .phpdoc,
 pre .aggregate,
 pre .css .tag,
 pre .javadoctag,
 pre .phpdoc,
 pre .yardoctag,
 pre .smalltalk .class,
 pre .winutils,
 pre .bash .variable,
 pre .apache .tag,
 pre .go .typename,
 pre .tex .command,
 pre .markdown .strong,
 pre .request,
 pre .status {
   color: #008000;
   font-weight: bold;
 }
 .highlight-builtin,
 pre .built_in {
   color: #008000;
 }
 pre .markdown .emphasis {
   font-style: italic;
 }
 pre .nginx .built_in {
   font-weight: normal;
 }
 pre .coffeescript .javascript,
 pre .javascript .xml,
 pre .tex .formula,
 pre .xml .javascript,
 pre .xml .vbscript,
 pre .xml .css,
 pre .xml .cdata {
   opacity: 0.5;
 }
 /* apply the same style to codemirror */
 .cm-s-ipython span.cm-variable {
   color: black;
 }
 .cm-s-ipython span.cm-keyword {
   color: #008000;
   font-weight: bold;
 }
 .cm-s-ipython span.cm-number {
   color: #080;
 }
 .cm-s-ipython span.cm-comment {
   color: #408080;
   font-style: italic;
 }
 .cm-s-ipython span.cm-string {
   color: #BA2121;
 }
 .cm-s-ipython span.cm-builtin {
   color: #008000;
 }
 .cm-s-ipython span.cm-error {
   color: #f00;
 }
 .cm-s-ipython span.cm-operator {
   color: #AA22FF;
   font-weight: bold;
 }
 .cm-s-ipython span.cm-meta {
   color: #AA22FF;
 }
 .cm-s-ipython span.cm-tab {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
   background-position: right;
   background-repeat: no-repeat;
 }
 div.output_wrapper {
   /* this position must be relative to enable descendents to be absolute within it */
   position: relative;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 /* class for the output area when it should be height-limited */
 div.output_scroll {
   /* ideally, this would be max-height, but FF barfs all over that */
   height: 24em;
   /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
   width: 100%;
   overflow: auto;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
   display: block;
 }
 /* output div while it is collapsed */
 div.output_collapsed {
   margin: 0px;
   padding: 0px;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 div.out_prompt_overlay {
   height: 100%;
   padding: 0px 0.4em;
   position: absolute;
   border-radius: 4px;
 }
 div.out_prompt_overlay:hover {
   /* use inner shadow to get border that is computed the same on WebKit/FF */
   -webkit-box-shadow: inset 0 0 1px #000000;
   box-shadow: inset 0 0 1px #000000;
   background: rgba(240, 240, 240, 0.5);
 }
 div.output_prompt {
   color: #8b0000;
 }
 /* This class is the outer container of all output sections. */
 div.output_area {
   padding: 0px;
   page-break-inside: avoid;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 div.output_area .MathJax_Display {
   text-align: left !important;
 }
 div.output_area .rendered_html table {
   margin-left: 0;
   margin-right: 0;
 }
 div.output_area .rendered_html img {
   margin-left: 0;
   margin-right: 0;
 }
 /* This is needed to protect the pre formating from global settings such
    as that of bootstrap */
 .output {
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 @media (max-width: 480px) {
   div.output_area {
     /* Old browsers */
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-box-align: stretch;
     display: -moz-box;
     -moz-box-orient: vertical;
     -moz-box-align: stretch;
     display: box;
     box-orient: vertical;
     box-align: stretch;
     /* Modern browsers */
     display: flex;
     flex-direction: column;
     align-items: stretch;
     /* Old browsers */
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
     /* Modern browsers */
     flex: none;
   }
 }
 div.output_area pre {
   margin: 0;
   padding: 0;
   border: 0;
   vertical-align: baseline;
   color: #000000;
   background-color: transparent;
   border-radius: 0;
 }
 /* This class is for the output subarea inside the output_area and after
    the prompt div. */
 div.output_subarea {
   padding: 0.4em 0.4em 0em 0.4em;
   /* Old browsers */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
 }
 /* The rest of the output_* classes are for special styling of the different
    output types */
 /* all text output has this class: */
 div.output_text {
   text-align: left;
   color: #000000;
   /* This has to match that of the the CodeMirror class line-height below */
   line-height: 1.21429em;
 }
 /* stdout/stderr are 'text' as well as 'stream', but execute_result/error are *not* streams */
 div.output_stderr {
   background: #fdd;
   /* very light red background for stderr */
 }
 div.output_latex {
   text-align: left;
 }
 /* Empty output_javascript divs should have no height */
 div.output_javascript:empty {
   padding: 0;
 }
 .js-error {
   color: darkred;
 }
 /* raw_input styles */
 div.raw_input_container {
   font-family: monospace;
   padding-top: 5px;
 }
 span.raw_input_prompt {
   /* nothing needed here */
 }
 input.raw_input {
   font-family: inherit;
   font-size: inherit;
   color: inherit;
   width: auto;
   /* make sure input baseline aligns with prompt */
   vertical-align: baseline;
   /* padding + margin = 0.5em between prompt and cursor */
   padding: 0em 0.25em;
   margin: 0em 0.25em;
 }
 input.raw_input:focus {
   box-shadow: none;
 }
 p.p-space {
   margin-bottom: 10px;
 }
 .rendered_html {
   color: #000000;
   /* any extras will just be numbers: */
 }
 .rendered_html em {
   font-style: italic;
 }
 .rendered_html strong {
   font-weight: bold;
 }
 .rendered_html u {
   text-decoration: underline;
 }
 .rendered_html :link {
   text-decoration: underline;
 }
 .rendered_html :visited {
   text-decoration: underline;
 }
 .rendered_html h1 {
   font-size: 185.7%;
   margin: 1.08em 0 0 0;
   font-weight: bold;
   line-height: 1.0;
 }
 .rendered_html h2 {
   font-size: 157.1%;
   margin: 1.27em 0 0 0;
   font-weight: bold;
   line-height: 1.0;
 }
 .rendered_html h3 {
   font-size: 128.6%;
   margin: 1.55em 0 0 0;
   font-weight: bold;
   line-height: 1.0;
 }
 .rendered_html h4 {
   font-size: 100%;
   margin: 2em 0 0 0;
   font-weight: bold;
   line-height: 1.0;
 }
 .rendered_html h5 {
   font-size: 100%;
   margin: 2em 0 0 0;
   font-weight: bold;
   line-height: 1.0;
   font-style: italic;
 }
 .rendered_html h6 {
   font-size: 100%;
   margin: 2em 0 0 0;
   font-weight: bold;
   line-height: 1.0;
   font-style: italic;
 }
 .rendered_html h1:first-child {
   margin-top: 0.538em;
 }
 .rendered_html h2:first-child {
   margin-top: 0.636em;
 }
 .rendered_html h3:first-child {
   margin-top: 0.777em;
 }
 .rendered_html h4:first-child {
   margin-top: 1em;
 }
 .rendered_html h5:first-child {
   margin-top: 1em;
 }
 .rendered_html h6:first-child {
   margin-top: 1em;
 }
 .rendered_html ul {
   list-style: disc;
   margin: 0em 2em;
   padding-left: 0px;
 }
 .rendered_html ul ul {
   list-style: square;
   margin: 0em 2em;
 }
 .rendered_html ul ul ul {
   list-style: circle;
   margin: 0em 2em;
 }
 .rendered_html ol {
   list-style: decimal;
   margin: 0em 2em;
   padding-left: 0px;
 }
 .rendered_html ol ol {
   list-style: upper-alpha;
   margin: 0em 2em;
 }
 .rendered_html ol ol ol {
   list-style: lower-alpha;
   margin: 0em 2em;
 }
 .rendered_html ol ol ol ol {
   list-style: lower-roman;
   margin: 0em 2em;
 }
 .rendered_html ol ol ol ol ol {
   list-style: decimal;
   margin: 0em 2em;
 }
 .rendered_html * + ul {
   margin-top: 1em;
 }
 .rendered_html * + ol {
   margin-top: 1em;
 }
 .rendered_html hr {
   color: #000000;
   background-color: #000000;
 }
 .rendered_html pre {
   margin: 1em 2em;
 }
 .rendered_html pre,
 .rendered_html code {
   border: 0;
   background-color: #ffffff;
   color: #000000;
   font-size: 100%;
   padding: 0px;
 }
 .rendered_html blockquote {
   margin: 1em 2em;
 }
 .rendered_html table {
   margin-left: auto;
   margin-right: auto;
   border: 1px solid #000000;
   border-collapse: collapse;
 }
 .rendered_html tr,
 .rendered_html th,
 .rendered_html td {
   border: 1px solid #000000;
   border-collapse: collapse;
   margin: 1em 2em;
 }
 .rendered_html td,
 .rendered_html th {
   text-align: left;
   vertical-align: middle;
   padding: 4px;
 }
 .rendered_html th {
   font-weight: bold;
 }
 .rendered_html * + table {
   margin-top: 1em;
 }
 .rendered_html p {
   text-align: justify;
 }
 .rendered_html * + p {
   margin-top: 1em;
 }
 .rendered_html img {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 .rendered_html * + img {
   margin-top: 1em;
 }
 div.text_cell {
   padding: 5px 5px 5px 0px;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 @media (max-width: 480px) {
   div.text_cell > div.prompt {
     display: none;
   }
 }
 div.text_cell_render {
   /*font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
   outline: none;
   resize: none;
   width: inherit;
   border-style: none;
   padding: 0.5em 0.5em 0.5em 0.4em;
   color: #000000;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 a.anchor-link:link {
   text-decoration: none;
   padding: 0px 20px;
   visibility: hidden;
 }
 h1:hover .anchor-link,
 h2:hover .anchor-link,
 h3:hover .anchor-link,
 h4:hover .anchor-link,
 h5:hover .anchor-link,
 h6:hover .anchor-link {
   visibility: visible;
 }
 div.cell.text_cell.rendered {
   padding: 0px;
 }
 .cm-s-heading-1,
 .cm-s-heading-2,
 .cm-s-heading-3,
 .cm-s-heading-4,
 .cm-s-heading-5,
 .cm-s-heading-6 {
   font-weight: bold;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .cm-s-heading-1 {
   font-size: 150%;
 }
 .cm-s-heading-2 {
   font-size: 130%;
 }
 .cm-s-heading-3 {
   font-size: 120%;
 }
 .cm-s-heading-4 {
   font-size: 110%;
 }
 .cm-s-heading-5 {
   font-size: 100%;
   font-style: italic;
 }
 .cm-s-heading-6 {
   font-size: 90%;
   font-style: italic;
 }
 .widget-area {
   /*
     LESS file that styles IPython notebook widgets and the area they sit in.
 
     The widget area typically looks something like this:
      +------------------------------------------+
      | widget-area                              |
      |  +--------+---------------------------+  |
      |  | prompt | widget-subarea            |  |
      |  |        | +--------+  +--------+    |  |
      |  |        | | widget |  | widget |    |  |
      |  |        | +--------+  +--------+    |  |
      |  +--------+---------------------------+  |
      +------------------------------------------+
     */
   page-break-inside: avoid;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .widget-area .widget-subarea {
   padding: 0.44em 0.4em 0.4em 1px;
   margin-left: 6px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   /* Old browsers */
   -webkit-box-flex: 2;
   -moz-box-flex: 2;
   box-flex: 2;
   /* Modern browsers */
   flex: 2;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
 }
 /* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM (POSSIBLEY OUTSIDE OF
    THE WIDGET AREA). */
 .widget-hlabel {
   /* Horizontal Label */
   min-width: 10ex;
   padding-right: 8px;
   padding-top: 5px;
   text-align: right;
   vertical-align: text-top;
 }
 .widget-vlabel {
   /* Vertical Label */
   padding-bottom: 5px;
   text-align: center;
   vertical-align: text-bottom;
 }
 .widget-hreadout {
   padding-left: 8px;
   padding-top: 5px;
   text-align: left;
   vertical-align: text-top;
 }
 .widget-vreadout {
   /* Vertical Label */
   padding-top: 5px;
   text-align: center;
   vertical-align: text-top;
 }
 .slide-track {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
   border-radius: 4px;
   /* Round the corners of the slide track */
 }
 .widget-hslider {
   /* Horizontal jQuery Slider 
 
     Both the horizontal and vertical versions of the slider are characterized
     by a styled div that contains an invisible jQuery slide div which 
     contains a visible slider handle div.  This is requred so we can control
     how the slider is drawn and 'fix' the issue where the slide handle 
     doesn't stop at the end of the slide.
 
     Both horizontal and vertical sliders have this div nesting:
     +------------------------------------------+
     | widget-(h/v)slider                       |
     |  +--------+---------------------------+  |
     |  | ui-slider                          |  |
     |  |          +------------------+      |  |
     |  |          | ui-slider-handle |      |  |
     |  |          +------------------+      |  |
     |  +--------+---------------------------+  |
     +------------------------------------------+
     */
   /* Fix the padding of the slide track so the ui-slider is sized 
     correctly. */
   padding-left: 8px;
   padding-right: 5px;
   overflow: visible;
   /* Default size of the slider */
   width: 350px;
   height: 5px;
   max-height: 5px;
   margin-top: 13px;
   margin-bottom: 10px;
   /* Style the slider track */
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
   border-radius: 4px;
   /* Round the corners of the slide track */
   /* Make the div a flex box (makes FF behave correctly). */
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .widget-hslider .ui-slider {
   /* Inner, invisible slide div */
   border: 0px !important;
   background: none !important;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   /* Old browsers */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
 }
 .widget-hslider .ui-slider .ui-slider-handle {
   width: 14px !important;
   height: 28px !important;
   margin-top: -8px !important;
 }
 .widget-vslider {
   /* Vertical jQuery Slider */
   /* Fix the padding of the slide track so the ui-slider is sized 
     correctly. */
   padding-bottom: 8px;
   overflow: visible;
   /* Default size of the slider */
   width: 5px;
   max-width: 5px;
   height: 250px;
   margin-left: 12px;
   /* Style the slider track */
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
   border-radius: 4px;
   /* Round the corners of the slide track */
   /* Make the div a flex box (makes FF behave correctly). */
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .widget-vslider .ui-slider {
   /* Inner, invisible slide div */
   border: 0px !important;
   background: none !important;
   margin-left: -4px;
   margin-top: 5px;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   /* Old browsers */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
 }
 .widget-vslider .ui-slider .ui-slider-handle {
   width: 28px !important;
   height: 14px !important;
   margin-left: -9px;
 }
 .widget-text {
   /* String Textbox - used for TextBoxView and TextAreaView */
   width: 350px;
   margin: 0px !important;
 }
 .widget-listbox {
   /* Listbox */
   width: 350px;
   margin-bottom: 0px;
 }
 .widget-numeric-text {
   /* Single Line Textbox - used for IntTextView and FloatTextView */
   width: 150px;
   margin: 0px !important;
 }
 .widget-progress {
   /* Progress Bar */
   margin-top: 6px;
   width: 350px;
 }
 .widget-progress .progress-bar {
   /* Disable progress bar animation */
   -webkit-transition: none;
   -moz-transition: none;
   -ms-transition: none;
   -o-transition: none;
   transition: none;
 }
 .widget-combo-btn {
   /* ComboBox Main Button */
   min-width: 125px;
 }
 .widget-box {
   /* The following section sets the style for the invisible div that
     hold widgets and their accompanying labels.
 
     Looks like this:
     +-----------------------------+
     | widget-box (or similar)     |
     |  +-------+---------------+  |
     |  | Label | Actual Widget |  |
     |  +-------+---------------+  |
     +-----------------------------+
     */
   margin: 5px;
   /* Old browsers */
   -webkit-box-pack: start;
   -moz-box-pack: start;
   box-pack: start;
   /* Modern browsers */
   justify-content: flex-start;
-  /* ContainerWidget */
+  /* Box */
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
 }
 .widget-hbox {
   /* Horizontal widgets */
   /* The following section sets the style for the invisible div that
     hold widgets and their accompanying labels.
 
     Looks like this:
     +-----------------------------+
     | widget-box (or similar)     |
     |  +-------+---------------+  |
     |  | Label | Actual Widget |  |
     |  +-------+---------------+  |
     +-----------------------------+
     */
   margin: 5px;
   /* Old browsers */
   -webkit-box-pack: start;
   -moz-box-pack: start;
   box-pack: start;
   /* Modern browsers */
   justify-content: flex-start;
-  /* ContainerWidget */
+  /* Box */
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .widget-hbox-single {
   /* Single line horizontal widgets */
   /* Horizontal widgets */
   /* The following section sets the style for the invisible div that
     hold widgets and their accompanying labels.
 
     Looks like this:
     +-----------------------------+
     | widget-box (or similar)     |
     |  +-------+---------------+  |
     |  | Label | Actual Widget |  |
     |  +-------+---------------+  |
     +-----------------------------+
     */
   margin: 5px;
   /* Old browsers */
   -webkit-box-pack: start;
   -moz-box-pack: start;
   box-pack: start;
   /* Modern browsers */
   justify-content: flex-start;
-  /* ContainerWidget */
+  /* Box */
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   height: 30px;
 }
 .widget-hbox-single input[type="checkbox"] {
   margin-top: 9px;
 }
 .widget-vbox {
   /* Vertical widgets */
   /* The following section sets the style for the invisible div that
     hold widgets and their accompanying labels.
 
     Looks like this:
     +-----------------------------+
     | widget-box (or similar)     |
     |  +-------+---------------+  |
     |  | Label | Actual Widget |  |
     |  +-------+---------------+  |
     +-----------------------------+
     */
   margin: 5px;
   /* Old browsers */
   -webkit-box-pack: start;
   -moz-box-pack: start;
   box-pack: start;
   /* Modern browsers */
   justify-content: flex-start;
-  /* ContainerWidget */
+  /* Box */
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .widget-vbox-single {
   /* For vertical slides */
   /* Vertical widgets */
   /* The following section sets the style for the invisible div that
     hold widgets and their accompanying labels.
 
     Looks like this:
     +-----------------------------+
     | widget-box (or similar)     |
     |  +-------+---------------+  |
     |  | Label | Actual Widget |  |
     |  +-------+---------------+  |
     +-----------------------------+
     */
   margin: 5px;
   /* Old browsers */
   -webkit-box-pack: start;
   -moz-box-pack: start;
   box-pack: start;
   /* Modern browsers */
   justify-content: flex-start;
-  /* ContainerWidget */
+  /* Box */
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   width: 30px;
 }
 .widget-modal {
-  /* ContainerWidget - ModalView */
+  /* Box - ModalView */
   overflow: hidden;
   position: absolute !important;
   top: 0px;
   left: 0px;
   margin-left: 0px !important;
 }
 .widget-modal-body {
-  /* ContainerWidget - ModalView Body */
+  /* Box - ModalView Body */
   max-height: none !important;
 }
-.widget-container {
-  /* ContainerWidget */
+.widget-box {
+  /* Box */
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Old browsers */
   -webkit-box-align: start;
   -moz-box-align: start;
   box-align: start;
   /* Modern browsers */
   align-items: flex-start;
 }
 .widget-radio-box {
   /* Contains RadioButtonsWidget */
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: vertical;
   -moz-box-align: stretch;
   display: box;
   box-orient: vertical;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: column;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   padding-top: 4px;
 }
 .widget-radio-box label {
   margin-top: 0px;
 }
 .docked-widget-modal {
   /* Horizontal Label */
   overflow: hidden;
   position: relative !important;
   top: 0px !important;
   left: 0px !important;
   margin-left: 0px !important;
 }
 /*!
 *
 * IPython notebook webapp
 *
 */
 body {
   background-color: #ffffff;
 }
 body.notebook_app {
   overflow: hidden;
 }
 @media (max-width: 767px) {
   body.notebook_app {
     padding-left: 0px;
     padding-right: 0px;
   }
 }
 #ipython-main-app {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 span#notebook_name {
   height: 1em;
   line-height: 1em;
   padding: 3px;
   border: none;
   font-size: 146.5%;
 }
 div#notebook_panel {
   margin: 0px 0px 0px 0px;
   padding: 0px;
   -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
   box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 div#notebook {
   font-size: 14px;
   line-height: 20px;
   overflow-y: scroll;
   overflow-x: auto;
   width: 100%;
   /* This spaces the cell away from the edge of the notebook area */
   padding: 1em 0 1em 0;
   margin: 0px;
   border-top: 1px solid #e7e7e7;
   outline: none;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 div.ui-widget-content {
   border: 1px solid #ababab;
   outline: none;
 }
 pre.dialog {
   background-color: #f7f7f7;
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 0.4em;
   padding-left: 2em;
 }
 p.dialog {
   padding: 0.2em;
 }
 /* Word-wrap output correctly.  This is the CSS3 spelling, though Firefox seems
    to not honor it correctly.  Webkit browsers (Chrome, rekonq, Safari) do.
  */
 pre,
 code,
 kbd,
 samp {
   white-space: pre-wrap;
 }
 #fonttest {
   font-family: monospace;
 }
 p {
   margin-bottom: 0;
 }
 .end_space {
   height: 200px;
 }
 /* CSS for the cell toolbar */
 .celltoolbar {
   border: thin solid #CFCFCF;
   border-bottom: none;
   background: #EEE;
   border-radius: 3px 3px 0px 0px;
   width: 100%;
   -webkit-box-pack: end;
   height: 29px;
   padding-right: 4px;
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
   /* Old browsers */
   -webkit-box-direction: reverse;
   -moz-box-direction: reverse;
   box-direction: reverse;
   /* Modern browsers */
   flex-direction: row-reverse;
 }
 .ctb_hideshow {
   display: none;
   vertical-align: bottom;
 }
 /* ctb_show is added to the ctb_hideshow div to show the cell toolbar.
    Cell toolbars are only shown when the ctb_global_show class is also set.
 */
 .ctb_global_show .ctb_show.ctb_hideshow {
   display: block;
 }
 .ctb_global_show .ctb_show + .input_area,
 .ctb_global_show .ctb_show + div.text_cell_input {
   border-top-right-radius: 0px;
   border-top-left-radius: 0px;
 }
 .celltoolbar {
   font-size: 87%;
   padding-top: 3px;
 }
 .celltoolbar select {
   font-size: 87%;
   height: 22px;
 }
 .celltoolbar label {
   margin-left: 5px;
   margin-right: 5px;
 }
 .completions {
   position: absolute;
   z-index: 10;
   overflow: hidden;
   border: 1px solid #ababab;
   border-radius: 4px;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow: 0px 6px 10px -1px #adadad;
 }
 .completions select {
   background: white;
   outline: none;
   border: none;
   padding: 0px;
   margin: 0px;
   overflow: auto;
   font-family: monospace;
   font-size: 110%;
   color: #000000;
   width: auto;
 }
 .completions select option.context {
   color: #3071a9;
 }
 #kernel_selector_widget {
   margin-right: 1em;
   float: right;
 }
 #kernel_selector_widget > button {
   display: inline-block;
   margin-bottom: 0;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   background-image: none;
   border: 1px solid transparent;
   white-space: nowrap;
   padding: 6px 12px;
   font-size: 13px;
   line-height: 1.42857143;
   border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   color: #333333;
   background-color: #ffffff;
   border-color: #cccccc;
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px;
 }
 #kernel_selector_widget > button:focus,
 #kernel_selector_widget > button:active:focus,
 #kernel_selector_widget > button.active:focus {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
 #kernel_selector_widget > button:hover,
 #kernel_selector_widget > button:focus {
   color: #333333;
   text-decoration: none;
 }
 #kernel_selector_widget > button:active,
 #kernel_selector_widget > button.active {
   outline: 0;
   background-image: none;
   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 #kernel_selector_widget > button.disabled,
 #kernel_selector_widget > button[disabled],
 fieldset[disabled] #kernel_selector_widget > button {
   cursor: not-allowed;
   pointer-events: none;
   opacity: 0.65;
   filter: alpha(opacity=65);
   -webkit-box-shadow: none;
   box-shadow: none;
 }
 #kernel_selector_widget > button:hover,
 #kernel_selector_widget > button:focus,
 #kernel_selector_widget > button:active,
 #kernel_selector_widget > button.active,
 .open .dropdown-toggle#kernel_selector_widget > button {
   color: #333333;
   background-color: #ebebeb;
   border-color: #adadad;
 }
 #kernel_selector_widget > button:active,
 #kernel_selector_widget > button.active,
 .open .dropdown-toggle#kernel_selector_widget > button {
   background-image: none;
 }
 #kernel_selector_widget > button.disabled,
 #kernel_selector_widget > button[disabled],
 fieldset[disabled] #kernel_selector_widget > button,
 #kernel_selector_widget > button.disabled:hover,
 #kernel_selector_widget > button[disabled]:hover,
 fieldset[disabled] #kernel_selector_widget > button:hover,
 #kernel_selector_widget > button.disabled:focus,
 #kernel_selector_widget > button[disabled]:focus,
 fieldset[disabled] #kernel_selector_widget > button:focus,
 #kernel_selector_widget > button.disabled:active,
 #kernel_selector_widget > button[disabled]:active,
 fieldset[disabled] #kernel_selector_widget > button:active,
 #kernel_selector_widget > button.disabled.active,
 #kernel_selector_widget > button[disabled].active,
 fieldset[disabled] #kernel_selector_widget > button.active {
   background-color: #ffffff;
   border-color: #cccccc;
 }
 #kernel_selector_widget > button .badge {
   color: #ffffff;
   background-color: #333333;
 }
 #kernel_selector_widget > button > span.caret {
   margin-top: 0px;
 }
 #menubar {
   margin-top: 0px;
   margin-bottom: -19px;
   position: relative;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 #menubar .navbar {
   border-top: 1px;
   border-radius: 0px 0px 4px 4px;
 }
 #menubar li.dropdown {
   line-height: 12px;
 }
 #menubar li.dropdown a {
   padding-top: 6px;
   padding-bottom: 5px;
 }
 #menubar ul.navbar-right {
   padding-top: 2px;
 }
 .nav-wrapper {
   border-bottom: 1px solid #e7e7e7;
 }
 i.menu-icon {
   padding-top: 4px;
 }
 ul#help_menu li a {
   overflow: hidden;
   padding-right: 2.2em;
 }
 ul#help_menu li a i {
   margin-right: -1.2em;
 }
 #menus {
   min-height: 30px;
 }
 .dropdown-submenu {
   position: relative;
 }
 .dropdown-submenu > .dropdown-menu {
   top: 0;
   left: 100%;
   margin-top: -6px;
   margin-left: -1px;
   -webkit-border-radius: 0 6px 6px 6px;
   -moz-border-radius: 0 6px 6px 6px;
   border-radius: 0 6px 6px 6px;
 }
 .dropdown-submenu:hover > .dropdown-menu {
   display: block;
 }
 .dropdown-submenu > a:after {
   display: block;
   content: " ";
   float: right;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
   border-width: 5px 0 5px 5px;
   border-left-color: #cccccc;
   margin-top: 5px;
   margin-right: -10px;
 }
 .dropdown-submenu:hover > a:after {
   border-left-color: #ffffff;
 }
 .dropdown-submenu.pull-left {
   float: none;
 }
 .dropdown-submenu.pull-left > .dropdown-menu {
   left: -100%;
   margin-left: 10px;
   -webkit-border-radius: 6px 0 6px 6px;
   -moz-border-radius: 6px 0 6px 6px;
   border-radius: 6px 0 6px 6px;
 }
 #notification_area {
   float: right !important;
   float: right;
   z-index: 10;
 }
 .indicator_area {
   color: #777777;
   padding: 4px 3px;
   margin: 0px;
   width: 11px;
   z-index: 10;
   text-align: center;
 }
 #kernel_indicator {
   float: right !important;
   float: right;
   color: #777777;
   padding: 4px 3px;
   margin: 0px;
   width: 11px;
   z-index: 10;
   text-align: center;
   margin-right: 12px;
 }
 #modal_indicator {
   float: right !important;
   float: right;
   color: #777777;
   padding: 4px 3px;
   margin: 0px;
   width: 11px;
   z-index: 10;
   text-align: center;
   margin-right: 5px;
 }
 .edit_mode_icon:before {
   display: inline-block;
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f040";
 }
 .edit_mode_icon:before.pull-left {
   margin-right: .3em;
 }
 .edit_mode_icon:before.pull-right {
   margin-left: .3em;
 }
 .command_mode_icon:before {
   display: inline-block;
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: ' ';
 }
 .command_mode_icon:before.pull-left {
   margin-right: .3em;
 }
 .command_mode_icon:before.pull-right {
   margin-left: .3em;
 }
 .kernel_idle_icon:before {
   display: inline-block;
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f10c";
 }
 .kernel_idle_icon:before.pull-left {
   margin-right: .3em;
 }
 .kernel_idle_icon:before.pull-right {
   margin-left: .3em;
 }
 .kernel_busy_icon:before {
   display: inline-block;
   font-family: FontAwesome;
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f111";
 }
 .kernel_busy_icon:before.pull-left {
   margin-right: .3em;
 }
 .kernel_busy_icon:before.pull-right {
   margin-left: .3em;
 }
 .notification_widget {
   color: #777777;
   padding: 1px 12px;
   margin: 2px 4px;
   z-index: 10;
   background: rgba(240, 240, 240, 0.5);
   float: right !important;
   float: right;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   display: inline-block;
   margin-bottom: 0;
   font-weight: normal;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   background-image: none;
   border: 1px solid transparent;
   white-space: nowrap;
   padding: 6px 12px;
   font-size: 13px;
   line-height: 1.42857143;
   border-radius: 4px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   color: #333333;
   background-color: #ffffff;
   border-color: #cccccc;
   padding: 1px 5px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px;
 }
 .notification_widget:focus,
 .notification_widget:active:focus,
 .notification_widget.active:focus {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
 }
 .notification_widget:hover,
 .notification_widget:focus {
   color: #333333;
   text-decoration: none;
 }
 .notification_widget:active,
 .notification_widget.active {
   outline: 0;
   background-image: none;
   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 .notification_widget.disabled,
 .notification_widget[disabled],
 fieldset[disabled] .notification_widget {
   cursor: not-allowed;
   pointer-events: none;
   opacity: 0.65;
   filter: alpha(opacity=65);
   -webkit-box-shadow: none;
   box-shadow: none;
 }
 .notification_widget:hover,
 .notification_widget:focus,
 .notification_widget:active,
 .notification_widget.active,
 .open .dropdown-toggle.notification_widget {
   color: #333333;
   background-color: #ebebeb;
   border-color: #adadad;
 }
 .notification_widget:active,
 .notification_widget.active,
 .open .dropdown-toggle.notification_widget {
   background-image: none;
 }
 .notification_widget.disabled,
 .notification_widget[disabled],
 fieldset[disabled] .notification_widget,
 .notification_widget.disabled:hover,
 .notification_widget[disabled]:hover,
 fieldset[disabled] .notification_widget:hover,
 .notification_widget.disabled:focus,
 .notification_widget[disabled]:focus,
 fieldset[disabled] .notification_widget:focus,
 .notification_widget.disabled:active,
 .notification_widget[disabled]:active,
 fieldset[disabled] .notification_widget:active,
 .notification_widget.disabled.active,
 .notification_widget[disabled].active,
 fieldset[disabled] .notification_widget.active {
   background-color: #ffffff;
   border-color: #cccccc;
 }
 .notification_widget .badge {
   color: #ffffff;
   background-color: #333333;
 }
 .notification_widget.span {
   padding-right: 2px;
 }
 .notification_widget.warning {
   color: #ffffff;
   background-color: #f0ad4e;
   border-color: #eea236;
 }
 .notification_widget.warning:hover,
 .notification_widget.warning:focus,
 .notification_widget.warning:active,
 .notification_widget.warning.active,
 .open .dropdown-toggle.notification_widget.warning {
   color: #ffffff;
   background-color: #ed9c28;
   border-color: #d58512;
 }
 .notification_widget.warning:active,
 .notification_widget.warning.active,
 .open .dropdown-toggle.notification_widget.warning {
   background-image: none;
 }
 .notification_widget.warning.disabled,
 .notification_widget.warning[disabled],
 fieldset[disabled] .notification_widget.warning,
 .notification_widget.warning.disabled:hover,
 .notification_widget.warning[disabled]:hover,
 fieldset[disabled] .notification_widget.warning:hover,
 .notification_widget.warning.disabled:focus,
 .notification_widget.warning[disabled]:focus,
 fieldset[disabled] .notification_widget.warning:focus,
 .notification_widget.warning.disabled:active,
 .notification_widget.warning[disabled]:active,
 fieldset[disabled] .notification_widget.warning:active,
 .notification_widget.warning.disabled.active,
 .notification_widget.warning[disabled].active,
 fieldset[disabled] .notification_widget.warning.active {
   background-color: #f0ad4e;
   border-color: #eea236;
 }
 .notification_widget.warning .badge {
   color: #f0ad4e;
   background-color: #ffffff;
 }
 .notification_widget.success {
   color: #ffffff;
   background-color: #5cb85c;
   border-color: #4cae4c;
 }
 .notification_widget.success:hover,
 .notification_widget.success:focus,
 .notification_widget.success:active,
 .notification_widget.success.active,
 .open .dropdown-toggle.notification_widget.success {
   color: #ffffff;
   background-color: #47a447;
   border-color: #398439;
 }
 .notification_widget.success:active,
 .notification_widget.success.active,
 .open .dropdown-toggle.notification_widget.success {
   background-image: none;
 }
 .notification_widget.success.disabled,
 .notification_widget.success[disabled],
 fieldset[disabled] .notification_widget.success,
 .notification_widget.success.disabled:hover,
 .notification_widget.success[disabled]:hover,
 fieldset[disabled] .notification_widget.success:hover,
 .notification_widget.success.disabled:focus,
 .notification_widget.success[disabled]:focus,
 fieldset[disabled] .notification_widget.success:focus,
 .notification_widget.success.disabled:active,
 .notification_widget.success[disabled]:active,
 fieldset[disabled] .notification_widget.success:active,
 .notification_widget.success.disabled.active,
 .notification_widget.success[disabled].active,
 fieldset[disabled] .notification_widget.success.active {
   background-color: #5cb85c;
   border-color: #4cae4c;
 }
 .notification_widget.success .badge {
   color: #5cb85c;
   background-color: #ffffff;
 }
 .notification_widget.info {
   color: #ffffff;
   background-color: #5bc0de;
   border-color: #46b8da;
 }
 .notification_widget.info:hover,
 .notification_widget.info:focus,
 .notification_widget.info:active,
 .notification_widget.info.active,
 .open .dropdown-toggle.notification_widget.info {
   color: #ffffff;
   background-color: #39b3d7;
   border-color: #269abc;
 }
 .notification_widget.info:active,
 .notification_widget.info.active,
 .open .dropdown-toggle.notification_widget.info {
   background-image: none;
 }
 .notification_widget.info.disabled,
 .notification_widget.info[disabled],
 fieldset[disabled] .notification_widget.info,
 .notification_widget.info.disabled:hover,
 .notification_widget.info[disabled]:hover,
 fieldset[disabled] .notification_widget.info:hover,
 .notification_widget.info.disabled:focus,
 .notification_widget.info[disabled]:focus,
 fieldset[disabled] .notification_widget.info:focus,
 .notification_widget.info.disabled:active,
 .notification_widget.info[disabled]:active,
 fieldset[disabled] .notification_widget.info:active,
 .notification_widget.info.disabled.active,
 .notification_widget.info[disabled].active,
 fieldset[disabled] .notification_widget.info.active {
   background-color: #5bc0de;
   border-color: #46b8da;
 }
 .notification_widget.info .badge {
   color: #5bc0de;
   background-color: #ffffff;
 }
 .notification_widget.danger {
   color: #ffffff;
   background-color: #d9534f;
   border-color: #d43f3a;
 }
 .notification_widget.danger:hover,
 .notification_widget.danger:focus,
 .notification_widget.danger:active,
 .notification_widget.danger.active,
 .open .dropdown-toggle.notification_widget.danger {
   color: #ffffff;
   background-color: #d2322d;
   border-color: #ac2925;
 }
 .notification_widget.danger:active,
 .notification_widget.danger.active,
 .open .dropdown-toggle.notification_widget.danger {
   background-image: none;
 }
 .notification_widget.danger.disabled,
 .notification_widget.danger[disabled],
 fieldset[disabled] .notification_widget.danger,
 .notification_widget.danger.disabled:hover,
 .notification_widget.danger[disabled]:hover,
 fieldset[disabled] .notification_widget.danger:hover,
 .notification_widget.danger.disabled:focus,
 .notification_widget.danger[disabled]:focus,
 fieldset[disabled] .notification_widget.danger:focus,
 .notification_widget.danger.disabled:active,
 .notification_widget.danger[disabled]:active,
 fieldset[disabled] .notification_widget.danger:active,
 .notification_widget.danger.disabled.active,
 .notification_widget.danger[disabled].active,
 fieldset[disabled] .notification_widget.danger.active {
   background-color: #d9534f;
   border-color: #d43f3a;
 }
 .notification_widget.danger .badge {
   color: #d9534f;
   background-color: #ffffff;
 }
 div#pager_splitter {
   height: 8px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 #pager-container {
   position: relative;
   padding: 15px 0px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 div#pager {
   font-size: 14px;
   line-height: 20px;
   overflow: auto;
   display: none;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 div#pager pre {
   line-height: 1.21429em;
   color: #000000;
   background-color: #f7f7f7;
   padding: 0.4em;
 }
 .quickhelp {
   /* Old browsers */
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: stretch;
   display: -moz-box;
   -moz-box-orient: horizontal;
   -moz-box-align: stretch;
   display: box;
   box-orient: horizontal;
   box-align: stretch;
   /* Modern browsers */
   display: flex;
   flex-direction: row;
   align-items: stretch;
   /* Old browsers */
   -webkit-box-flex: 0;
   -moz-box-flex: 0;
   box-flex: 0;
   /* Modern browsers */
   flex: none;
 }
 .shortcut_key {
   display: inline-block;
   width: 20ex;
   text-align: right;
   font-family: monospace;
 }
 .shortcut_descr {
   display: inline-block;
   /* Old browsers */
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   box-flex: 1;
   /* Modern browsers */
   flex: 1;
 }
 span#save_widget {
   padding: 0px 5px;
   margin-top: 12px;
 }
 span#checkpoint_status,
 span#autosave_status {
   font-size: small;
 }
 @media (max-width: 767px) {
   span#save_widget {
     font-size: small;
   }
   span#checkpoint_status,
   span#autosave_status {
     font-size: x-small;
   }
 }
 @media (max-width: 767px) {
   span#checkpoint_status,
   span#autosave_status {
     display: none;
   }
 }
 @media (min-width: 768px) and (max-width: 979px) {
   span#checkpoint_status {
     display: none;
   }
   span#autosave_status {
     font-size: x-small;
   }
 }
 .toolbar {
   padding: 0px;
   margin-left: -5px;
   margin-top: -5px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 .toolbar select,
 .toolbar label {
   width: auto;
   vertical-align: middle;
   margin-right: 2px;
   margin-bottom: 0px;
   display: inline;
   font-size: 92%;
   margin-left: 0.3em;
   margin-right: 0.3em;
   padding: 0px;
   padding-top: 3px;
 }
 .toolbar .btn {
   padding: 2px 8px;
 }
 .toolbar .btn-group {
   margin-top: 0px;
   margin-left: 5px;
 }
 #maintoolbar {
   margin-bottom: -3px;
   margin-top: -8px;
   border: 0px;
   min-height: 27px;
   margin-left: 32px;
   padding-top: 6px;
   padding-bottom: 8px;
 }
 #maintoolbar .navbar-text {
   float: none;
   vertical-align: middle;
   text-align: right;
   margin-left: 5px;
   margin-right: 0px;
   margin-top: 0px;
 }
 #maintoolbar .toolbar {
   margin-top: 0px;
 }
 .select-xs {
   height: 24px;
 }
 /**
  * Primary styles
  *
  * Author: IPython Development Team
  */
 /** WARNING IF YOU ARE EDITTING THIS FILE, if this is a .css file, It has a lot
  * of chance of beeing generated from the ../less/[samename].less file, you can
  * try to get back the less file by reverting somme commit in history
  **/
 /*
  * We'll try to get something pretty, so we
  * have some strange css to have the scroll bar on
  * the left with fix button on the top right of the tooltip
  */
 @-moz-keyframes fadeOut {
   from {
     opacity: 1;
   }
   to {
     opacity: 0;
   }
 }
 @-webkit-keyframes fadeOut {
   from {
     opacity: 1;
   }
   to {
     opacity: 0;
   }
 }
 @-moz-keyframes fadeIn {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
 @-webkit-keyframes fadeIn {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
 /*properties of tooltip after "expand"*/
 .bigtooltip {
   overflow: auto;
   height: 200px;
   -webkit-transition-property: height;
   -webkit-transition-duration: 500ms;
   -moz-transition-property: height;
   -moz-transition-duration: 500ms;
   transition-property: height;
   transition-duration: 500ms;
 }
 /*properties of tooltip before "expand"*/
 .smalltooltip {
   -webkit-transition-property: height;
   -webkit-transition-duration: 500ms;
   -moz-transition-property: height;
   -moz-transition-duration: 500ms;
   transition-property: height;
   transition-duration: 500ms;
   text-overflow: ellipsis;
   overflow: hidden;
   height: 80px;
 }
 .tooltipbuttons {
   position: absolute;
   padding-right: 15px;
   top: 0px;
   right: 0px;
 }
 .tooltiptext {
   /*avoid the button to overlap on some docstring*/
   padding-right: 30px;
 }
 .ipython_tooltip {
   max-width: 700px;
   /*fade-in animation when inserted*/
   -webkit-animation: fadeOut 400ms;
   -moz-animation: fadeOut 400ms;
   animation: fadeOut 400ms;
   -webkit-animation: fadeIn 400ms;
   -moz-animation: fadeIn 400ms;
   animation: fadeIn 400ms;
   vertical-align: middle;
   background-color: #f7f7f7;
   overflow: visible;
   border: #ababab 1px solid;
   outline: none;
   padding: 3px;
   margin: 0px;
   padding-left: 7px;
   font-family: monospace;
   min-height: 50px;
   -moz-box-shadow: 0px 6px 10px -1px #adadad;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow: 0px 6px 10px -1px #adadad;
   border-radius: 4px;
   position: absolute;
   z-index: 1000;
 }
 .ipython_tooltip a {
   float: right;
 }
 .ipython_tooltip .tooltiptext pre {
   border: 0;
   border-radius: 0;
   font-size: 100%;
   background-color: #f7f7f7;
 }
 .pretooltiparrow {
   left: 0px;
   margin: 0px;
   top: -16px;
   width: 40px;
   height: 16px;
   overflow: hidden;
   position: absolute;
 }
 .pretooltiparrow:before {
   background-color: #f7f7f7;
   border: 1px #ababab solid;
   z-index: 11;
   content: "";
   position: absolute;
   left: 15px;
   top: 10px;
   width: 25px;
   height: 25px;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
 }
 /*# sourceMappingURL=../style/style.min.css.map */

  No newline at end of file

IPython/html/static/widgets/js/init.js

@@ -1,27 +1,27 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/manager",
     "widgets/js/widget_bool",
     "widgets/js/widget_button",
-    "widgets/js/widget_container",
+    "widgets/js/widget_box",
     "widgets/js/widget_float",
     "widgets/js/widget_image",
     "widgets/js/widget_int",
     "widgets/js/widget_selection",
     "widgets/js/widget_selectioncontainer",
     "widgets/js/widget_string",
 ], function(widgetmanager) { 
 
     // Register all of the loaded views with the widget manager.
     for (var i = 1; i < arguments.length; i++) {
         for (var target_name in arguments[i]) {
             if (arguments[i].hasOwnProperty(target_name)) {
                 widgetmanager.WidgetManager.register_widget_view(target_name, arguments[i][target_name]);
             }
         }
     }
 
     return {'WidgetManager': widgetmanager.WidgetManager}; 
 });

IPython/html/static/widgets/js/widget_box.js

@@ -1,283 +1,307 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     "widgets/js/widget",
     "jqueryui",
     "bootstrap",
 ], function(widget, $){
 
-    var ContainerView = widget.DOMWidgetView.extend({
+    var BoxView = widget.DOMWidgetView.extend({
         initialize: function(){
             // Public constructor
-            ContainerView.__super__.initialize.apply(this, arguments);
-            this.update_children([], this.model.get('children'));
+            BoxView.__super__.initialize.apply(this, arguments);
             this.model.on('change:children', function(model, value) {
                 this.update_children(model.previous('children'), value);
             }, this);
         },
 
         render: function(){
             // Called when view is rendered.
-            this.$el.addClass('widget-container').addClass('vbox');
+            this.$box = this.$el;
+            this.$box.addClass('widget-box');
+            this.update_children([], this.model.get('children'));
         },
         
         update_children: function(old_list, new_list) {
             // Called when the children list changes.
             this.do_diff(old_list, new_list, 
                 $.proxy(this.remove_child_model, this),
                 $.proxy(this.add_child_model, this));
         },
 
         remove_child_model: function(model) {
             // Called when a model is removed from the children list.
             this.pop_child_view(model).remove();
         },
 
         add_child_model: function(model) {
             // Called when a model is added to the children list.
             var view = this.create_child_view(model);
-            this.$el.append(view.$el);
+            this.$box.append(view.$el);
 
             // Trigger the displayed event of the child view.
             this.after_displayed(function() {
                 view.trigger('displayed');
             });
         },
     });
-    
 
-    var PopupView = widget.DOMWidgetView.extend({
+
+    var FlexBoxView = BoxView.extend({
+        render: function(){
+            FlexBoxView.__super__.render.apply(this);
+            this.model.on('change:orientation', this.update_orientation, this);
+            this.model.on('change:flex', this._flex_changed, this);
+            this.model.on('change:pack', this._pack_changed, this);
+            this.model.on('change:align', this._align_changed, this);
+            this._flex_changed();
+            this._pack_changed();
+            this._align_changed();
+            this.update_orientation();
+        },
+
+        update_orientation: function(){
+            var orientation = this.model.get("orientation");
+            if (orientation == "vertical") {
+                this.$box.removeClass("hbox").addClass("vbox");
+            } else {
+                this.$box.removeClass("vbox").addClass("hbox");
+            }
+        },
+
+        _flex_changed: function(){
+            if (this.model.previous('flex')) {
+                this.$box.removeClass('box-flex' + this.model.previous('flex'));
+            }
+            this.$box.addClass('box-flex' + this.model.get('flex'));
+        },
+
+        _pack_changed: function(){
+            if (this.model.previous('pack')) {
+                this.$box.removeClass(this.model.previous('pack'));
+            }
+            this.$box.addClass(this.model.get('pack'));
+        },
+
+        _align_changed: function(){
+            if (this.model.previous('align')) {
+                this.$box.removeClass('align-' + this.model.previous('align'));
+            }
+            this.$box.addClass('align-' + this.model.get('align'));
+        },
+    });
+
+    var PopupView = BoxView.extend({
+
         render: function(){
             // Called when view is rendered.
             var that = this;
             
             this.$el.on("remove", function(){
                     that.$backdrop.remove();
                 });
             this.$backdrop = $('<div />')
                 .appendTo($('#notebook-container'))
                 .addClass('modal-dialog')
                 .css('position', 'absolute')
                 .css('left', '0px')
                 .css('top', '0px');
             this.$window = $('<div />')
                 .appendTo(this.$backdrop)
                 .addClass('modal-content widget-modal')
                 .mousedown(function(){
                     that.bring_to_front();
                 });
 
             // Set the elements array since the this.$window element is not child
             // of this.$el and the parent widget manager or other widgets may
             // need to know about all of the top-level widgets.  The IPython
             // widget manager uses this to register the elements with the
             // keyboard manager.
             this.additional_elements = [this.$window];
 
             this.$title_bar = $('<div />')
                 .addClass('popover-title')
                 .appendTo(this.$window)
                 .mousedown(function(){
                     that.bring_to_front();
                 });
             this.$close = $('<button />')
                 .addClass('close fa fa-remove')
                 .css('margin-left', '5px')
                 .appendTo(this.$title_bar)
                 .click(function(){
                     that.hide();
                     event.stopPropagation();
                 });
             this.$minimize = $('<button />')
                 .addClass('close fa fa-arrow-down')
                 .appendTo(this.$title_bar)
                 .click(function(){
                     that.popped_out = !that.popped_out;
                     if (!that.popped_out) {
                         that.$minimize
                             .removeClass('fa fa-arrow-down')
                             .addClass('fa fa-arrow-up');
                             
                         that.$window
                             .draggable('destroy')
                             .resizable('destroy')
                             .removeClass('widget-modal modal-content')
                             .addClass('docked-widget-modal')
                             .detach()
                             .insertBefore(that.$show_button);
                         that.$show_button.hide();
                         that.$close.hide();
                     } else {
                         that.$minimize
                             .addClass('fa fa-arrow-down')
                             .removeClass('fa fa-arrow-up');
 
                         that.$window
                             .removeClass('docked-widget-modal')
                             .addClass('widget-modal modal-content')
                             .detach()
                             .appendTo(that.$backdrop)
                             .draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'})
                             .resizable()
                             .children('.ui-resizable-handle').show();
                         that.show();
                         that.$show_button.show();
                         that.$close.show();
                     }
                     event.stopPropagation();
                 });
             this.$title = $('<div />')
                 .addClass('widget-modal-title')
                 .html("&nbsp;")
-                .appendTo(this.$title_bar);
-            this.$body = $('<div />')
+                .appendTo(this.$title_bar);     
+            this.$box = $('<div />')
                 .addClass('modal-body')
                 .addClass('widget-modal-body')
-                .addClass('widget-container')
+                .addClass('widget-box')
                 .addClass('vbox')
                 .appendTo(this.$window);
             
             this.$show_button = $('<button />')
                 .html("&nbsp;")
                 .addClass('btn btn-info widget-modal-show')
                 .appendTo(this.$el)
                 .click(function(){
                     that.show();
                 });
             
             this.$window.draggable({handle: '.popover-title', snap: '#notebook, .modal', snapMode: 'both'});
             this.$window.resizable();
             this.$window.on('resize', function(){
-                that.$body.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight());
+                that.$box.outerHeight(that.$window.innerHeight() - that.$title_bar.outerHeight());
             });
 
             this._shown_once = false;
             this.popped_out = true;
 
             this.update_children([], this.model.get('children'));
             this.model.on('change:children', function(model, value) {
                 this.update_children(model.previous('children'), value);
             }, this);
         },
         
         hide: function() {
             // Called when the modal hide button is clicked.
             this.$window.hide();
             this.$show_button.removeClass('btn-info');
         },
         
         show: function() {
             // Called when the modal show button is clicked.
             this.$show_button.addClass('btn-info');
             this.$window.show();
             if (this.popped_out) {
                 this.$window.css("positon", "absolute");
                 this.$window.css("top", "0px");
                 this.$window.css("left", Math.max(0, (($('body').outerWidth() - this.$window.outerWidth()) / 2) + 
                     $(window).scrollLeft()) + "px");
                 this.bring_to_front();
             }
         },
         
         bring_to_front: function() {
             // Make the modal top-most, z-ordered about the other modals.
             var $widget_modals = $(".widget-modal");
             var max_zindex = 0;
             $widget_modals.each(function (index, el){
                 var zindex = parseInt($(el).css('z-index'));
                 if (!isNaN(zindex)) {
                     max_zindex = Math.max(max_zindex, zindex);
                 }
             });
             
             // Start z-index of widget modals at 2000
             max_zindex = Math.max(max_zindex, 2000);
             
             $widget_modals.each(function (index, el){
                 $el = $(el);
                 if (max_zindex == parseInt($el.css('z-index'))) {
                     $el.css('z-index', max_zindex - 1);
                 }
             });
             this.$window.css('z-index', max_zindex);
         },
         
-        update_children: function(old_list, new_list) {
-            // Called when the children list is modified.
-            this.do_diff(old_list, new_list, 
-                $.proxy(this.remove_child_model, this),
-                $.proxy(this.add_child_model, this));
-        },
-
-        remove_child_model: function(model) {
-            // Called when a child is removed from children list.
-            this.pop_child_view(model).remove();
-        },
-
-        add_child_model: function(model) {
-            // Called when a child is added to children list.
-            var view = this.create_child_view(model);
-            this.$body.append(view.$el);
-
-            // Trigger the displayed event of the child view.
-            this.after_displayed(function() {
-                view.trigger('displayed');
-            });
-        },
-        
         update: function(){
             // Update the contents of this view
             //
             // Called when the model is changed.  The model may have been 
             // changed by another view or by a state update from the back-end.
             var description = this.model.get('description');
             if (description.trim().length === 0) {
                 this.$title.html("&nbsp;"); // Preserve title height
             } else {
                 this.$title.text(description);
                 MathJax.Hub.Queue(["Typeset",MathJax.Hub,this.$title.get(0)]);
             }
             
             var button_text = this.model.get('button_text');
             if (button_text.trim().length === 0) {
                 this.$show_button.html("&nbsp;"); // Preserve button height
             } else {
                 this.$show_button.text(button_text);
             }
             
             if (!this._shown_once) {
                 this._shown_once = true;
                 this.show();
             }
             
             return PopupView.__super__.update.apply(this);
         },
         
         _get_selector_element: function(selector) {
             // Get an element view a 'special' jquery selector.  (see widget.js)
             //
             // Since the modal actually isn't within the $el in the DOM, we need to extend
             // the selector logic to allow the user to set css on the modal if need be.
             // The convention used is:
             // "modal" - select the modal div
             // "modal [selector]" - select element(s) within the modal div.
             // "[selector]" - select elements within $el
             // "" - select the $el
             if (selector.substring(0, 5) == 'modal') {
                 if (selector == 'modal') {
                     return this.$window;
                 } else {
                     return this.$window.find(selector.substring(6));
                 }
             } else {
                 return PopupView.__super__._get_selector_element.apply(this, [selector]);
             }
         },
     });
 
     return {
-        'ContainerView': ContainerView,
+        'BoxView': BoxView,
         'PopupView': PopupView,
+        'FlexBoxView': FlexBoxView,
     };
 });

IPython/html/static/widgets/less/widgets.less

@@ -1,289 +1,289 b''
 .widget-area {
     /*
     LESS file that styles IPython notebook widgets and the area they sit in.
 
     The widget area typically looks something like this:
      +------------------------------------------+
      | widget-area                              |
      |  +--------+---------------------------+  |
      |  | prompt | widget-subarea            |  |
      |  |        | +--------+  +--------+    |  |
      |  |        | | widget |  | widget |    |  |
      |  |        | +--------+  +--------+    |  |
      |  +--------+---------------------------+  |
      +------------------------------------------+
     */
 
     page-break-inside : avoid;
     .hbox();
 
     .widget-subarea {
         padding     : 0.44em 0.4em 0.4em 1px;
         margin-left : 6px;
 
         .border-box-sizing();
         .vbox();
         .box-flex2();
         .align-start();
     }
 }
 
 /* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM (POSSIBLEY OUTSIDE OF
    THE WIDGET AREA). */
 
 .widget-hlabel {
     /* Horizontal Label */
     min-width      : 10ex;
     padding-right  : 8px;
     padding-top    : 5px;
     text-align     : right;
     vertical-align : text-top;
 }
 
 .widget-vlabel {
     /* Vertical Label */
     padding-bottom : 5px;
     text-align     : center;
     vertical-align : text-bottom;
 }
 
 .widget-hreadout {
     padding-left   : 8px;
     padding-top    : 5px;
     text-align     : left;
     vertical-align : text-top;
 }
 
 .widget-vreadout {
     /* Vertical Label */
     padding-top : 5px;
     text-align     : center;
     vertical-align : text-top;
 }
 
 .slide-track {
     /* Slider Track */
     border     : 1px solid #CCCCCC;
     background : #FFFFFF;
 
     .corner-all(); /* Round the corners of the slide track */
 }
 
 .widget-hslider {
     /* Horizontal jQuery Slider 
 
     Both the horizontal and vertical versions of the slider are characterized
     by a styled div that contains an invisible jQuery slide div which 
     contains a visible slider handle div.  This is requred so we can control
     how the slider is drawn and 'fix' the issue where the slide handle 
     doesn't stop at the end of the slide.
 
     Both horizontal and vertical sliders have this div nesting:
     +------------------------------------------+
     | widget-(h/v)slider                       |
     |  +--------+---------------------------+  |
     |  | ui-slider                          |  |
     |  |          +------------------+      |  |
     |  |          | ui-slider-handle |      |  |
     |  |          +------------------+      |  |
     |  +--------+---------------------------+  |
     +------------------------------------------+
     */
 
     /* Fix the padding of the slide track so the ui-slider is sized 
     correctly. */
     padding-left  : 8px;
     padding-right : 5px;
     overflow      : visible;
 
     /* Default size of the slider */
     width        : 350px; 
     height       : 5px;
     max-height   : 5px;
     margin-top   : 13px;
     margin-bottom: 10px;
     
     /* Style the slider track */
     .slide-track();
 
     /* Make the div a flex box (makes FF behave correctly). */
     .hbox();
 
     .ui-slider {
         /* Inner, invisible slide div */
         border     : 0px !important;
         background : none !important;
         
         .hbox();
         .box-flex1();
 
         .ui-slider-handle {
             width      : 14px !important;
             height     : 28px !important;
             margin-top : -8px !important;
         }
     }
 }
 
 .widget-vslider {
     /* Vertical jQuery Slider */
     
     /* Fix the padding of the slide track so the ui-slider is sized 
     correctly. */
     padding-bottom : 8px;
     overflow       : visible; 
 
     /* Default size of the slider */
     width       : 5px;
     max-width   : 5px;
     height      : 250px;
     margin-left : 12px;
     
     /* Style the slider track */
     .slide-track();
 
     /* Make the div a flex box (makes FF behave correctly). */
     .vbox();
     
     .ui-slider {
         /* Inner, invisible slide div */
         border      : 0px !important;
         background  : none !important;
         margin-left : -4px;
         margin-top  : 5px;
         
         .vbox();
         .box-flex1();
 
         .ui-slider-handle {
             width       : 28px !important;
             height      : 14px !important;
             margin-left : -9px;
         }
     }
 }
 
 .widget-text {
     /* String Textbox - used for TextBoxView and TextAreaView */
     width         : 350px;
     margin : 0px !important;
 }
 
 .widget-listbox {
     /* Listbox */
     width         : 350px;
     margin-bottom : 0px;
 }
 
 .widget-numeric-text {
     /* Single Line Textbox - used for IntTextView and FloatTextView */
     width : 150px;
     margin : 0px !important;
 }
 
 .widget-progress {
     /* Progress Bar */
     margin-top: 6px;
     width : 350px;
 
     .progress-bar {
         /* Disable progress bar animation */
         -webkit-transition : none;
         -moz-transition    : none;
         -ms-transition     : none;
         -o-transition      : none;
         transition         : none;
     }
 }
 
 .widget-combo-btn {
     /* ComboBox Main Button */
     min-width : 125px;
 }
 
 .widget-box {
     /* The following section sets the style for the invisible div that
     hold widgets and their accompanying labels.
 
     Looks like this:
     +-----------------------------+
     | widget-box (or similar)     |
     |  +-------+---------------+  |
     |  | Label | Actual Widget |  |
     |  +-------+---------------+  |
     +-----------------------------+
     */
     margin : 5px;
 
     .start();
-    .widget-container();
+    .widget-box();
 }
 
 .widget-hbox {
     /* Horizontal widgets */
     .widget-box();
     .hbox();
 }
 
 .widget-hbox-single {
     /* Single line horizontal widgets */
     .widget-hbox();
     height : 30px;
 
     input[type="checkbox"] {
         margin-top: 9px;
     }
 }
 
 .widget-vbox {
     /* Vertical widgets */ 
     .widget-box();
     .vbox();
 }
 
 .widget-vbox-single {
     /* For vertical slides */ 
     .widget-vbox();
     width : 30px;
 }
 
 .widget-modal {
-    /* ContainerWidget - ModalView */   
+    /* Box - ModalView */   
     overflow    : hidden; 
     position    : absolute !important;
     top         : 0px; 
     left        : 0px; 
     margin-left : 0px !important;
 }
 
 .widget-modal-body {
-    /* ContainerWidget - ModalView Body */
+    /* Box - ModalView Body */
     max-height: none !important;
 }
 
-.widget-container {
-    /* ContainerWidget */
+.widget-box {
+    /* Box */
     .border-box-sizing();
     .align-start();
 }
 
 .widget-radio-box {
     /* Contains RadioButtonsWidget */
     .vbox();
     .border-box-sizing();
     
     padding-top: 4px;
 
     label {
         margin-top: 0px;
     }
 }
 
 .docked-widget-modal {
     /* Horizontal Label */
     overflow: hidden; 
     position: relative !important;
     top: 0px !important; 
     left: 0px !important; 
     margin-left: 0px !important;
 }
  No newline at end of file

IPython/html/tests/widgets/widget.js

@@ -1,188 +1,188 b''
 var xor = function (a, b) {return !a ^ !b;}; 
 var isArray = function (a) {
     try {
         return Object.toString.call(a) === "[object Array]" || Object.toString.call(a) === "[object RuntimeArray]";
     } catch (e) {
         return Array.isArray(a);
     }
 };
 var recursive_compare = function(a, b) {
     // Recursively compare two objects.
     var same = true;
     same = same && !xor(a instanceof Object || typeof a == 'object', b instanceof Object || typeof b == 'object');
     same = same && !xor(isArray(a), isArray(b));
 
     if (same) {
         if (a instanceof Object) {
             var key;
             for (key in a) {
                 if (a.hasOwnProperty(key) && !recursive_compare(a[key], b[key])) {
                     same = false;
                     break;
                 }
             }
             for (key in b) {
                 if (b.hasOwnProperty(key) && !recursive_compare(a[key], b[key])) {
                     same = false;
                     break;
                 }
             }
         } else {
             return a === b;
         }    
     }
     
     return same;
 };
 
 // Test the widget framework.
 casper.notebook_test(function () {
     var index;
     
     this.then(function () {
     
         // Check if the WidgetManager class is defined.
         this.test.assert(this.evaluate(function() {
             return IPython.WidgetManager !== undefined; 
         }), 'WidgetManager class is defined');
     });
 
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     this.then(function () {
         // Check if the widget manager has been instantiated.
         this.test.assert(this.evaluate(function() {
             return IPython.notebook.kernel.widget_manager !== undefined; 
         }), 'Notebook widget manager instantiated');
 
         // Functions that can be used to test the packing and unpacking APIs
         var that = this;
         var test_pack = function (input) {
             var output = that.evaluate(function(input) {
                 var model = new IPython.WidgetModel(IPython.notebook.kernel.widget_manager, undefined);
                 var results = model._pack_models(input);
                 return results;
             }, {input: input});
             that.test.assert(recursive_compare(input, output), 
                 JSON.stringify(input) + ' passed through Model._pack_model unchanged');
         };
         var test_unpack = function (input) {
             var output = that.evaluate(function(input) {
                 var model = new IPython.WidgetModel(IPython.notebook.kernel.widget_manager, undefined);
                 var results = model._unpack_models(input);
                 return results;
             }, {input: input});
             that.test.assert(recursive_compare(input, output), 
                 JSON.stringify(input) + ' passed through Model._unpack_model unchanged');
         };
         var test_packing = function(input) {
             test_pack(input);
             test_unpack(input);
         };
         
         test_packing({0: 'hi', 1: 'bye'});
         test_packing(['hi', 'bye']);
         test_packing(['hi', 5]);
         test_packing(['hi', '5']);
         test_packing([1.0, 0]);
         test_packing([1.0, false]);
         test_packing([1, false]);
         test_packing([1, false, {a: 'hi'}]);
         test_packing([1, false, ['hi']]);
 
         // Test multi-set, single touch code.  First create a custom widget.
         this.evaluate(function() {
             var MultiSetView = IPython.DOMWidgetView.extend({
                 render: function(){
                     this.model.set('a', 1);
                     this.model.set('b', 2);
                     this.model.set('c', 3);
                     this.touch();
                 },
             });
             IPython.WidgetManager.register_widget_view('MultiSetView', MultiSetView);
         }, {});
     });
 
     // Try creating the multiset widget, verify that sets the values correctly.
     var multiset = {};
     multiset.index = this.append_cell(
         'from IPython.utils.traitlets import Unicode, CInt\n' +
         'class MultiSetWidget(widgets.Widget):\n' +
         '    _view_name = Unicode("MultiSetView", sync=True)\n' +
         '    a = CInt(0, sync=True)\n' +
         '    b = CInt(0, sync=True)\n' +
         '    c = CInt(0, sync=True)\n' +
         '    d = CInt(-1, sync=True)\n' + // See if it sends a full state.
         '    def _handle_receive_state(self, sync_data):\n' +
         '        widgets.Widget._handle_receive_state(self, sync_data)\n'+
         '        self.d = len(sync_data)\n' +
         'multiset = MultiSetWidget()\n' +
         'display(multiset)\n' +
         'print(multiset.model_id)');
     this.execute_cell_then(multiset.index, function(index) {
         multiset.model_id = this.get_output_cell(index).text.trim();
     });
 
     this.wait_for_widget(multiset);
 
     index = this.append_cell(
         'print("%d%d%d" % (multiset.a, multiset.b, multiset.c))');
     this.execute_cell_then(index, function(index) {
         this.test.assertEquals(this.get_output_cell(index).text.trim(), '123',
             'Multiple model.set calls and one view.touch update state in back-end.');
     });
 
     index = this.append_cell(
         'print("%d" % (multiset.d))');
     this.execute_cell_then(index, function(index) {
         this.test.assertEquals(this.get_output_cell(index).text.trim(), '3',
             'Multiple model.set calls sent a partial state.');
     });
 
     var textbox = {};
     throttle_index = this.append_cell(
         'import time\n' +
-        'textbox = widgets.TextWidget()\n' +
+        'textbox = widgets.Text()\n' +
         'display(textbox)\n' +
         'textbox.add_class("my-throttle-textbox", selector="input")\n' +
         'def handle_change(name, old, new):\n' +
         '    display(len(new))\n' +
         '    time.sleep(0.5)\n' +
         'textbox.on_trait_change(handle_change, "value")\n' +
         'print(textbox.model_id)');
     this.execute_cell_then(throttle_index, function(index){
         textbox.model_id = this.get_output_cell(index).text.trim();
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.my-throttle-textbox'), 'Textbox exists.');
 
         // Send 20 characters
         this.sendKeys('.my-throttle-textbox', '....................');
     });
 
     this.wait_for_widget(textbox);
 
     this.then(function () { 
         var outputs = this.evaluate(function(i) {
             return IPython.notebook.get_cell(i).output_area.outputs;
         }, {i : throttle_index});
 
         // Only 4 outputs should have printed, but because of timing, sometimes
         // 5 outputs will print.  All we need to do is verify num outputs <= 5
         // because that is much less than 20.
         this.test.assert(outputs.length <= 5, 'Messages throttled.');
 
         // We also need to verify that the last state sent was correct.
         var last_state = outputs[outputs.length-1]['text/plain'];
         this.test.assertEquals(last_state, "20", "Last state sent when throttling.");
     });
 });

IPython/html/tests/widgets/widget_bool.js

@@ -1,86 +1,86 b''
 // Test widget bool class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     var bool_index = this.append_cell(
-        'bool_widgets = [widgets.CheckboxWidget(description="Title", value=True),\n' +
-        '    widgets.ToggleButtonWidget(description="Title", value=True)]\n' +
+        'bool_widgets = [widgets.Checkbox(description="Title", value=True),\n' +
+        '    widgets.ToggleButton(description="Title", value=True)]\n' +
         'display(bool_widgets[0])\n' +
         'display(bool_widgets[1])\n' +
         'print("Success")');
     this.execute_cell_then(bool_index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create bool widget cell executed with correct output.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea .widget-hbox-single input'),
             'Checkbox exists.');
 
         this.test.assert(this.cell_element_function(index, 
             '.widget-area .widget-subarea .widget-hbox-single input', 'prop', ['checked']),
             'Checkbox is checked.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea .widget-hbox-single .widget-hlabel'),
             'Checkbox label exists.');
 
         this.test.assert(this.cell_element_function(index, 
             '.widget-area .widget-subarea .widget-hbox-single .widget-hlabel', 'html')=="Title",
             'Checkbox labeled correctly.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea button'),
             'Toggle button exists.');
 
         this.test.assert(this.cell_element_function(index, 
             '.widget-area .widget-subarea button', 'html')=="Title",
             'Toggle button labeled correctly.');
 
         this.test.assert(this.cell_element_function(index, 
             '.widget-area .widget-subarea button', 'hasClass', ['active']),
             'Toggle button is toggled.');
 
     });
 
     index = this.append_cell(
         'bool_widgets[0].value = False\n' +
         'bool_widgets[1].value = False\n' +
         'print("Success")');
     this.execute_cell_then(index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Change bool widget value cell executed with correct output.');
 
         this.test.assert(! this.cell_element_function(bool_index, 
             '.widget-area .widget-subarea .widget-hbox-single input', 'prop', ['checked']),
             'Checkbox is not checked. (1)');
 
         this.test.assert(! this.cell_element_function(bool_index, 
             '.widget-area .widget-subarea button', 'hasClass', ['active']),
             'Toggle button is not toggled. (1)');
  
         // Try toggling the bool by clicking on the checkbox.
         this.cell_element_function(bool_index, '.widget-area .widget-subarea .widget-hbox-single input', 'click');
 
         this.test.assert(this.cell_element_function(bool_index, 
             '.widget-area .widget-subarea .widget-hbox-single input', 'prop', ['checked']),
             'Checkbox is checked. (2)');
 
         // Try toggling the bool by clicking on the toggle button.
         this.cell_element_function(bool_index, '.widget-area .widget-subarea button', 'click');
 
         this.test.assert(this.cell_element_function(bool_index, 
             '.widget-area .widget-subarea button', 'hasClass', ['active']),
             'Toggle button is toggled. (3)');
 
     });
 });
  No newline at end of file

IPython/html/tests/widgets/widget_box.js

@@ -1,80 +1,80 b''
 // Test container class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     var container_index = this.append_cell(
-        'container = widgets.ContainerWidget()\n' +
-        'button = widgets.ButtonWidget()\n'+
+        'container = widgets.Box()\n' +
+        'button = widgets.Button()\n'+
         'container.children = [button]\n'+
         'display(container)\n'+
         'container.add_class("my-test-class")\n'+
         'print("Success")\n');
     this.execute_cell_then(container_index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create container cell executed with correct output.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, 
-            '.widget-area .widget-subarea .widget-container'),
+            '.widget-area .widget-subarea .widget-box'),
             'Widget container exists.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea .my-test-class'),
             'add_class works.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea .my-test-class button'),
             'Container parent/child relationship works.');
     });
 
     index = this.append_cell(
         'container.set_css("float", "right")\n'+
         'print("Success")\n');
     this.execute_cell_then(index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Set container class CSS cell executed with correct output.');
         
         this.test.assert(this.cell_element_function(container_index, 
             '.widget-area .widget-subarea .my-test-class', 'css', ['float'])=='right',
             'set_css works.');
     });
 
     index = this.append_cell(
         'container.remove_class("my-test-class")\n'+
         'print("Success")\n');
     this.execute_cell_then(index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Remove container class cell executed with correct output.');
 
         this.test.assert(! this.cell_element_exists(container_index, 
             '.widget-area .widget-subarea .my-test-class'),
             'remove_class works.');
     });
 
     index = this.append_cell(
         'display(button)\n'+
         'print("Success")\n');
     this.execute_cell_then(index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Display container child executed with correct output.');
 
         this.test.assert(! this.cell_element_exists(index, 
-            '.widget-area .widget-subarea .widget-container'),
+            '.widget-area .widget-subarea .widget-box'),
             'Parent container not displayed.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea button'),
             'Child displayed.');
     });
 });
  No newline at end of file

IPython/html/tests/widgets/widget_button.js

@@ -1,43 +1,43 b''
 // Test widget button class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     var button_index = this.append_cell(
-        'button = widgets.ButtonWidget(description="Title")\n' +
+        'button = widgets.Button(description="Title")\n' +
         'display(button)\n' +
         'print("Success")\n' +
         'def handle_click(sender):\n' +
         '    display("Clicked")\n' +
         'button.on_click(handle_click)');
     this.execute_cell_then(button_index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n',
             'Create button cell executed with correct output.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea button'),
             'Widget button exists.');
 
         this.test.assert(this.cell_element_function(index, 
             '.widget-area .widget-subarea button', 'html')=='Title',
             'Set button description.');
 
         this.cell_element_function(index, 
             '.widget-area .widget-subarea button', 'click');
     });
 
     this.wait_for_output(button_index, 1);
 
     this.then(function () {
         this.test.assertEquals(this.get_output_cell(button_index, 1)['text/plain'], "'Clicked'",
             'Button click event fires.');
     });
 });
  No newline at end of file

IPython/html/tests/widgets/widget_float.js

@@ -1,100 +1,100 b''
 // Test widget float class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     var float_text = {};
     float_text.query = '.widget-area .widget-subarea .widget-hbox-single .my-second-float-text';
     float_text.index = this.append_cell(
-        'float_widget = widgets.FloatTextWidget()\n' +
+        'float_widget = widgets.FloatText()\n' +
         'display(float_widget)\n' + 
         'float_widget.add_class("my-second-float-text", selector="input")\n' + 
         'print(float_widget.model_id)\n');
     this.execute_cell_then(float_text.index, function(index){
         float_text.model_id = this.get_output_cell(index).text.trim();
         
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, float_text.query),
             'Widget float textbox exists.');
 
         this.cell_element_function(float_text.index, float_text.query, 'val', ['']);
         this.sendKeys(float_text.query, '1.05');
     });
 
     this.wait_for_widget(float_text);
 
     index = this.append_cell('print(float_widget.value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '1.05\n', 
             'Float textbox value set.');
         this.cell_element_function(float_text.index, float_text.query, 'val', ['']);
         this.sendKeys(float_text.query, '123456789.0');
     });
 
     this.wait_for_widget(float_text);
     
     index = this.append_cell('print(float_widget.value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '123456789.0\n', 
             'Long float textbox value set (probably triggers throttling).');
         this.cell_element_function(float_text.index, float_text.query, 'val', ['']);
         this.sendKeys(float_text.query, '12hello');
     });
 
     this.wait_for_widget(float_text);
 
     index = this.append_cell('print(float_widget.value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '12.0\n', 
             'Invald float textbox value caught and filtered.');
     });
 
     var float_text_query = '.widget-area .widget-subarea .widget-hbox-single .widget-numeric-text';
     var slider = {};
     slider.query = '.widget-area .widget-subarea .widget-hbox-single .slider';
     slider.index = this.append_cell(
-        'floatrange = [widgets.BoundedFloatTextWidget(), \n' +
-        '    widgets.FloatSliderWidget()]\n' +
+        'floatrange = [widgets.BoundedFloatText(), \n' +
+        '    widgets.FloatSlider()]\n' +
         '[display(floatrange[i]) for i in range(2)]\n' + 
         'print("Success")\n');
     this.execute_cell_then(slider.index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create float range cell executed with correct output.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, slider.query),
             'Widget slider exists.');
 
         this.test.assert(this.cell_element_exists(index, float_text_query),
             'Widget float textbox exists.');
     });
 
     index = this.append_cell(
         'for widget in floatrange:\n' +
         '    widget.max = 50.0\n' +
         '    widget.min = -50.0\n' +
         '    widget.value = 25.0\n' +
         'print("Success")\n');
     this.execute_cell_then(index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Float range properties cell executed with correct output.');
 
         this.test.assert(this.cell_element_exists(slider.index, slider.query), 
             'Widget slider exists.');
 
         this.test.assert(this.cell_element_function(slider.index, slider.query, 
             'slider', ['value']) == 25.0,
             'Slider set to Python value.');
     });
 });
  No newline at end of file

IPython/html/tests/widgets/widget_image.js

@@ -1,48 +1,48 b''
 // Test image class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     // Get the temporary directory that the test server is running in.
     var cwd = '';
     index = this.append_cell('!echo $(pwd)');
     this.execute_cell_then(index, function(index){
         cwd = this.get_output_cell(index).text.trim();
     });
 
     var test_jpg = '/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDACAWGBwYFCAcGhwkIiAmMFA0MCwsMGJGSjpQdGZ6eHJmcG6AkLicgIiuim5woNqirr7EztDOfJri8uDI8LjKzsb/2wBDASIkJDAqMF40NF7GhHCExsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsb/wgARCAABAAEDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAAA//EABUBAQEAAAAAAAAAAAAAAAAAAAME/9oADAMBAAIQAxAAAAECv//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAQUCf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Bf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Bf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEABj8Cf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAT8hf//aAAwDAQACAAMAAAAQn//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Qf//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Qf//EABQQAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQEAAT8Qf//Z';
 
     var image_index = this.append_cell(
         'import base64\n' + 
         'data = base64.b64decode("' + test_jpg + '")\n' +
-        'image = widgets.ImageWidget()\n' +
+        'image = widgets.Image()\n' +
         'image.format = "jpeg"\n' +
         'image.value = data\n' +
         'image.width = "50px"\n' +
         'image.height = "50px"\n' +
         // Set css that will make the image render within the PhantomJS visible
         // window.  If we don't do this, the captured image will be black.
         'image.set_css({"background": "blue", "z-index": "9999", "position": "fixed", "top": "0px", "left": "0px"})\n' + 
         'display(image)\n' + 
         'image.add_class("my-test-image")\n' + 
         'print("Success")\n');
     this.execute_cell_then(image_index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create image executed with correct output.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         var img_sel = '.widget-area .widget-subarea img';
         this.test.assert(this.cell_element_exists(index, img_sel), 'Image exists.');
 
         // Verify that the image's base64 data has made it into the DOM.
         var img_src = this.cell_element_function(image_index, img_sel, 'attr', ['src']);
         this.test.assert(img_src.indexOf(test_jpg) > -1, 'Image src data exists.');
     });    
 });
  No newline at end of file

IPython/html/tests/widgets/widget_int.js

@@ -1,157 +1,157 b''
 // Test widget int class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     var int_text = {};
     int_text.query = '.widget-area .widget-subarea .widget-hbox-single .my-second-int-text';
     int_text.index = this.append_cell(
-        'int_widget = widgets.IntTextWidget()\n' +
+        'int_widget = widgets.IntText()\n' +
         'display(int_widget)\n' + 
         'int_widget.add_class("my-second-int-text", selector="input")\n' + 
         'print(int_widget.model_id)\n');
     this.execute_cell_then(int_text.index, function(index){
         int_text.model_id = this.get_output_cell(index).text.trim();
         
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, int_text.query),
             'Widget int textbox exists.');
 
         this.cell_element_function(int_text.index, int_text.query, 'val', ['']);
         this.sendKeys(int_text.query, '1.05');
     });
 
     this.wait_for_widget(int_text);
 
     index = this.append_cell('print(int_widget.value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '1\n', 
             'Int textbox value set.');
         this.cell_element_function(int_text.index, int_text.query, 'val', ['']);
         this.sendKeys(int_text.query, '123456789');
     });
 
     this.wait_for_widget(int_text);
 
     index = this.append_cell('print(int_widget.value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '123456789\n', 
             'Long int textbox value set (probably triggers throttling).');
         this.cell_element_function(int_text.index, int_text.query, 'val', ['']);
         this.sendKeys(int_text.query, '12hello');
     });
 
     this.wait_for_widget(int_text);
 
     index = this.append_cell('print(int_widget.value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '12\n', 
             'Invald int textbox value caught and filtered.');
     });
     
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
 
     var slider_query = '.widget-area .widget-subarea .widget-hbox-single .slider';
     var int_text2 = {};
     int_text2.query = '.widget-area .widget-subarea .widget-hbox-single .my-second-num-test-text';
     int_text2.index = this.append_cell(
         'intrange = [widgets.BoundedIntTextWidget(),\n' +
         '    widgets.IntSliderWidget()]\n' +
         '[display(intrange[i]) for i in range(2)]\n' +
         'intrange[0].add_class("my-second-num-test-text", selector="input")\n' +  
         'print(intrange[0].model_id)\n');
     this.execute_cell_then(int_text2.index, function(index){
         int_text2.model_id = this.get_output_cell(index).text.trim();
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, slider_query),
             'Widget slider exists.');
 
         this.test.assert(this.cell_element_exists(index, int_text2.query),
             'Widget int textbox exists.');
     });
 
     index = this.append_cell(
         'for widget in intrange:\n' +
         '    widget.max = 50\n' +
         '    widget.min = -50\n' +
         '    widget.value = 25\n' +
         'print("Success")\n');
     this.execute_cell_then(index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Int range properties cell executed with correct output.');
 
         this.test.assert(this.cell_element_exists(int_text2.index, slider_query), 
             'Widget slider exists.');
 
         this.test.assert(this.cell_element_function(int_text2.index, slider_query, 
             'slider', ['value']) == 25,
             'Slider set to Python value.');
 
         this.test.assert(this.cell_element_function(int_text2.index, int_text2.query,
             'val') == 25, 'Int textbox set to Python value.');
 
         // Clear the int textbox value and then set it to 1 by emulating
         // keyboard presses.
         this.evaluate(function(q){
             var textbox = IPython.notebook.element.find(q);
             textbox.val('1');
             textbox.trigger('keyup');
         }, {q: int_text2.query});
     });
 
     this.wait_for_widget(int_text2);
 
     index = this.append_cell('print(intrange[0].value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '1\n', 
             'Int textbox set int range value');
 
         // Clear the int textbox value and then set it to 120 by emulating
         // keyboard presses.
         this.evaluate(function(q){
             var textbox = IPython.notebook.element.find(q);
             textbox.val('120');
             textbox.trigger('keyup');
         }, {q: int_text2.query});
     });
 
     this.wait_for_widget(int_text2);
 
     index = this.append_cell('print(intrange[0].value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '50\n', 
             'Int textbox value bound');
 
         // Clear the int textbox value and then set it to 'hello world' by 
         // emulating keyboard presses.  'hello world' should get filtered...
         this.evaluate(function(q){
             var textbox = IPython.notebook.element.find(q);
             textbox.val('hello world');
             textbox.trigger('keyup');
         }, {q: int_text2.query});
     });
 
     this.wait_for_widget(int_text2);
 
     index = this.append_cell('print(intrange[0].value)\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '50\n', 
             'Invalid int textbox characters ignored');
     });    
 });
  No newline at end of file

IPython/html/tests/widgets/widget_selection.js

@@ -1,138 +1,138 b''
 // Test selection class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     var combo_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group .widget-combo-btn';
     var multibtn_selector = '.widget-area .widget-subarea .widget-hbox-single .btn-group[data-toggle="buttons-radio"]';
     var radio_selector = '.widget-area .widget-subarea .widget-hbox .widget-radio-box';
     var list_selector = '.widget-area .widget-subarea .widget-hbox .widget-listbox';
 
     var selection_index;
     var selection_values = 'abcd';
     var check_state = function(context, index, state){
         if (0 <= index && index < selection_values.length) {
             var multibtn_state = context.cell_element_function(selection_index, multibtn_selector + ' .btn:nth-child(' + (index + 1) + ')', 'hasClass', ['active']);
             var radio_state = context.cell_element_function(selection_index, radio_selector + ' .radio:nth-child(' + (index + 1) + ') input', 'prop', ['checked']);
             var list_val = context.cell_element_function(selection_index, list_selector, 'val');
             var combo_val = context.cell_element_function(selection_index, combo_selector, 'html');
             
             var val = selection_values.charAt(index);
             var list_state = (val == list_val);
             var combo_state = (val == combo_val);
 
             return multibtn_state == state &&
                 radio_state == state &&
                 list_state == state &&
                 combo_state == state;
         }
         return true;
     };
 
     var verify_selection = function(context, index){
         for (var i = 0; i < selection_values.length; i++) {
             if (!check_state(context, i, i==index)) {
                 return false;
             }
         }
         return true;
     };
 
 //values=["' + selection_values + '"[i] for i in range(4)]
     selection_index = this.append_cell(
         'values=["' + selection_values + '"[i] for i in range(4)]\n' +
-        'selection = [widgets.DropdownWidget(values=values),\n' +
-        '    widgets.ToggleButtonsWidget(values=values),\n' +
-        '    widgets.RadioButtonsWidget(values=values),\n' +
-        '    widgets.SelectWidget(values=values)]\n' +
+        'selection = [widgets.Dropdown(values=values),\n' +
+        '    widgets.ToggleButtons(values=values),\n' +
+        '    widgets.RadioButtons(values=values),\n' +
+        '    widgets.Select(values=values)]\n' +
         '[display(selection[i]) for i in range(4)]\n' +
         'for widget in selection:\n' +
         '    def handle_change(name,old,new):\n' +
         '        for other_widget in selection:\n' +
         '            other_widget.value = new\n' +
         '    widget.on_trait_change(handle_change, "value")\n' +
         'print("Success")\n');
     this.execute_cell_then(selection_index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create selection cell executed with correct output.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, combo_selector),
              'Widget combobox exists.');
 
         this.test.assert(this.cell_element_exists(index, multibtn_selector),
             'Widget multibutton exists.');
 
         this.test.assert(this.cell_element_exists(index, radio_selector),
             'Widget radio buttons exists.');
 
         this.test.assert(this.cell_element_exists(index, list_selector),
             'Widget list exists.');
 
         // Verify that no items are selected.
         this.test.assert(verify_selection(this, 0), 'Default first item selected.');
     });
 
     index = this.append_cell(
         'for widget in selection:\n' +
         '    widget.value = "a"\n' +
         'print("Success")\n');
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Python select item executed with correct output.');
 
         // Verify that the first item is selected.
         this.test.assert(verify_selection(this, 0), 'Python selected');
 
         // Verify that selecting a radio button updates all of the others.
         this.cell_element_function(selection_index, radio_selector + ' .radio:nth-child(2) input', 'click');
     });
     this.wait_for_idle();
     this.then(function () {
         this.test.assert(verify_selection(this, 1), 'Radio button selection updated view states correctly.');
 
         // Verify that selecting a list option updates all of the others.
         this.cell_element_function(selection_index, list_selector + ' option:nth-child(3)', 'click');
     });
     this.wait_for_idle();
     this.then(function () {
         this.test.assert(verify_selection(this, 2), 'List selection updated view states correctly.');
 
         // Verify that selecting a multibutton option updates all of the others.
         // Bootstrap3 has changed the toggle button group behavior.  Two clicks
         // are required to actually select an item.
         this.cell_element_function(selection_index, multibtn_selector + ' .btn:nth-child(4)', 'click');
         this.cell_element_function(selection_index, multibtn_selector + ' .btn:nth-child(4)', 'click');
     });
     this.wait_for_idle();
     this.then(function () {
         this.test.assert(verify_selection(this, 3), 'Multibutton selection updated view states correctly.');
 
         // Verify that selecting a combobox option updates all of the others.
         this.cell_element_function(selection_index, '.widget-area .widget-subarea .widget-hbox-single .btn-group ul.dropdown-menu li:nth-child(3) a', 'click');
     });
     this.wait_for_idle();
     this.then(function () {
         this.test.assert(verify_selection(this, 2), 'Combobox selection updated view states correctly.');
     });
 
     this.wait_for_idle();
 
     index = this.append_cell(
         'for widget in selection:\n' +
         '    d = widget.values.copy()\n' +
         '    d["z"] = "z"\n' +
         '    widget.values = d\n' +
         'selection[0].value = "z"');
     this.execute_cell_then(index, function(index){
 
         // Verify that selecting a combobox option updates all of the others.
         this.test.assert(verify_selection(this, 4), 'Item added to selection widget.');
     });
 });
  No newline at end of file

IPython/html/tests/widgets/widget_selectioncontainer.js

@@ -1,113 +1,113 b''
 // Test multicontainer class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     // Test tab view
     var multicontainer1_query = '.widget-area .widget-subarea div div.nav-tabs';
     var multicontainer1_index = this.append_cell(
-        'multicontainer = widgets.TabWidget()\n' +
-        'page1 = widgets.TextWidget()\n' +
-        'page2 = widgets.TextWidget()\n' +
-        'page3 = widgets.TextWidget()\n' +
+        'multicontainer = widgets.Tab()\n' +
+        'page1 = widgets.Text()\n' +
+        'page2 = widgets.Text()\n' +
+        'page3 = widgets.Text()\n' +
         'multicontainer.children = [page1, page2, page3]\n' +
         'display(multicontainer)\n' +
         'multicontainer.selected_index = 0\n' +
         'print("Success")\n');
     this.execute_cell_then(multicontainer1_index, function(index){
         
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create multicontainer cell executed with correct output. (1)');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, multicontainer1_query),
             'Widget tab list exists.');
 
         this.test.assert(this.cell_element_exists(index, multicontainer1_query),
             'First widget tab list exists.');
 
         // JQuery selector is 1 based
         this.click(multicontainer1_query + ' li:nth-child(2) a');
     });
 
     this.wait_for_idle();
 
     index = this.append_cell(
         'print(multicontainer.selected_index)\n' +
         'multicontainer.selected_index = 2'); // 0 based
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '1\n', // 0 based
             'selected_index property updated with tab change.');
 
         // JQuery selector is 1 based
         this.test.assert(!this.cell_element_function(multicontainer1_index, multicontainer1_query + ' li:nth-child(1)', 'hasClass', ['active']),
                 "Tab 1 is not selected.");
         this.test.assert(!this.cell_element_function(multicontainer1_index, multicontainer1_query + ' li:nth-child(2)', 'hasClass', ['active']),
                 "Tab 2 is not selected.");
         this.test.assert(this.cell_element_function(multicontainer1_index, multicontainer1_query + ' li:nth-child(3)', 'hasClass', ['active']),
                 "Tab 3 is selected.");
     });
 
     index = this.append_cell('multicontainer.set_title(1, "hello")\nprint("Success")'); // 0 based
     this.execute_cell_then(index, function(index){
         this.test.assert(this.cell_element_function(multicontainer1_index, multicontainer1_query +
             ' li:nth-child(2) a', 'html') == 'hello',
             'Tab page title set (after display).');
     });
 
     // Test accordion view
     var multicontainer2_query = '.widget-area .widget-subarea .panel-group';
     var multicontainer2_index = this.append_cell(
-        'multicontainer = widgets.AccordionWidget()\n' +
-        'page1 = widgets.TextWidget()\n' +
-        'page2 = widgets.TextWidget()\n' +
-        'page3 = widgets.TextWidget()\n' +
+        'multicontainer = widgets.Accordion()\n' +
+        'page1 = widgets.Text()\n' +
+        'page2 = widgets.Text()\n' +
+        'page3 = widgets.Text()\n' +
         'multicontainer.children = [page1, page2, page3]\n' +
         'multicontainer.set_title(2, "good")\n' +
         'display(multicontainer)\n' +
         'multicontainer.selected_index = 0\n' +
         'print("Success")\n');
     this.execute_cell_then(multicontainer2_index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create multicontainer cell executed with correct output. (2)');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, multicontainer2_query),
             'Widget accordion exists.');
 
         this.test.assert(this.cell_element_exists(index, multicontainer2_query + 
             ' .panel:nth-child(1) .panel-collapse'),
             'First accordion page exists.');
 
         // JQuery selector is 1 based
         this.test.assert(this.cell_element_function(index, multicontainer2_query + 
             ' .panel.panel-default:nth-child(3) .panel-heading .accordion-toggle', 
             'html')=='good', 'Accordion page title set (before display).');
 
         // JQuery selector is 1 based
         this.click(multicontainer2_query + ' .panel:nth-child(2) .panel-heading .accordion-toggle');
     });
 
     this.wait_for_idle();
 
     index = this.append_cell('print(multicontainer.selected_index)'); // 0 based
     this.execute_cell_then(index, function(index){
         this.test.assertEquals(this.get_output_cell(index).text, '1\n', // 0 based
             'selected_index property updated with tab change.');
 
         var is_collapsed = this.evaluate(function(s){
              return $(s + ' div.panel:nth-child(2) a').hasClass('collapsed'); // 1 based
         }, {s: multicontainer2_query});
         this.test.assertEquals(is_collapsed, false, 'Was tab actually opened?');
     });
 });
  No newline at end of file

IPython/html/tests/widgets/widget_string.js

@@ -1,53 +1,53 b''
 // Test widget string class
 casper.notebook_test(function () {
     index = this.append_cell(
         'from IPython.html import widgets\n' + 
         'from IPython.display import display, clear_output\n' +
         'print("Success")');
     this.execute_cell_then(index);
 
     var string_index = this.append_cell(
-        'string_widget = [widgets.TextWidget(value = "xyz", placeholder = "abc"),\n' +
-        '    widgets.TextareaWidget(value = "xyz", placeholder = "def"),\n' +
-        '    widgets.HTMLWidget(value = "xyz"),\n' +
-        '    widgets.LatexWidget(value = "$\\\\LaTeX{}$")]\n' +
+        'string_widget = [widgets.Text(value = "xyz", placeholder = "abc"),\n' +
+        '    widgets.Textarea(value = "xyz", placeholder = "def"),\n' +
+        '    widgets.HTML(value = "xyz"),\n' +
+        '    widgets.Latex(value = "$\\\\LaTeX{}$")]\n' +
         '[display(widget) for widget in string_widget]\n'+
         'print("Success")');
     this.execute_cell_then(string_index, function(index){
 
         this.test.assertEquals(this.get_output_cell(index).text, 'Success\n', 
             'Create string widget cell executed with correct output.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea'),
             'Widget subarea exists.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea .widget-hbox-single input[type=text]'),
             'Textbox exists.');
 
         this.test.assert(this.cell_element_exists(index, 
             '.widget-area .widget-subarea .widget-hbox textarea'),
             'Textarea exists.');
 
         this.test.assert(this.cell_element_function(index, 
             '.widget-area .widget-subarea .widget-hbox textarea', 'val')=='xyz',
             'Python set textarea value.');
 
         this.test.assert(this.cell_element_function(index, 
             '.widget-area .widget-subarea .widget-hbox-single input[type=text]', 'val')=='xyz',
             'Python set textbox value.');
 
         this.test.assert(this.cell_element_exists(string_index, 
             '.widget-area .widget-subarea div span.MathJax_Preview'),
             'MathJax parsed the LaTeX successfully.');
 
         this.test.assert(this.cell_element_function(index, 
             '.widget-area .widget-subarea .widget-hbox textarea', 'attr', ['placeholder'])=='def',
             'Python set textarea placeholder.');
 
         this.test.assert(this.cell_element_function(index, 
             '.widget-area .widget-subarea .widget-hbox-single input[type=text]', 'attr', ['placeholder'])=='abc',
             'Python set textbox placehoder.');
     });
 });

IPython/html/widgets/__init__.py

@@ -1,12 +1,23 b''
 from .widget import Widget, DOMWidget, CallbackDispatcher
 
+from .widget_bool import Checkbox, ToggleButton
+from .widget_button import Button
+from .widget_box import Box, Popup, FlexBox, HBox, VBox
+from .widget_float import FloatText, BoundedFloatText, FloatSlider, FloatProgress
+from .widget_image import Image
+from .widget_int import IntText, BoundedIntText, IntSlider, IntProgress
+from .widget_selection import RadioButtons, ToggleButtons, Dropdown, Select
+from .widget_selectioncontainer import Tab, Accordion
+from .widget_string import HTML, Latex, Text, Textarea
+from .interaction import interact, interactive, fixed
+
+# Deprecated classes
 from .widget_bool import CheckboxWidget, ToggleButtonWidget
 from .widget_button import ButtonWidget
-from .widget_container import ContainerWidget, PopupWidget
+from .widget_box import ContainerWidget, PopupWidget
 from .widget_float import FloatTextWidget, BoundedFloatTextWidget, FloatSliderWidget, FloatProgressWidget
 from .widget_image import ImageWidget
 from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget
 from .widget_selection import RadioButtonsWidget, ToggleButtonsWidget, DropdownWidget, SelectWidget
 from .widget_selectioncontainer import TabWidget, AccordionWidget
 from .widget_string import HTMLWidget, LatexWidget, TextWidget, TextareaWidget
-from .interaction import interact, interactive, fixed

IPython/html/widgets/interaction.py

@@ -1,257 +1,257 b''
 """Interact with functions using widgets."""
 
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 
 from __future__ import print_function
 
 try:  # Python >= 3.3
     from inspect import signature, Parameter
 except ImportError:
     from IPython.utils.signatures import signature, Parameter
 from inspect import getcallargs
 
 from IPython.core.getipython import get_ipython
-from IPython.html.widgets import (Widget, TextWidget,
-    FloatSliderWidget, IntSliderWidget, CheckboxWidget, DropdownWidget,
-    ContainerWidget, DOMWidget)
+from IPython.html.widgets import (Widget, Text,
+    FloatSlider, IntSlider, Checkbox, Dropdown,
+    Box, DOMWidget)
 from IPython.display import display, clear_output
 from IPython.utils.py3compat import string_types, unicode_type
 from IPython.utils.traitlets import HasTraits, Any, Unicode
 
 empty = Parameter.empty
 
 #-----------------------------------------------------------------------------
 # Classes and Functions
 #-----------------------------------------------------------------------------
 
 
 def _matches(o, pattern):
     """Match a pattern of types in a sequence."""
     if not len(o) == len(pattern):
         return False
     comps = zip(o,pattern)
     return all(isinstance(obj,kind) for obj,kind in comps)
 
 
 def _get_min_max_value(min, max, value=None, step=None):
     """Return min, max, value given input values with possible None."""
     if value is None:
         if not max > min:
             raise ValueError('max must be greater than min: (min={0}, max={1})'.format(min, max))
         value = min + abs(min-max)/2
         value = type(min)(value)
     elif min is None and max is None:
         if value == 0.0:
             min, max, value = 0.0, 1.0, 0.5
         elif value == 0:
             min, max, value = 0, 1, 0
         elif isinstance(value, (int, float)):
             min, max = (-value, 3*value) if value > 0 else (3*value, -value)
         else:
             raise TypeError('expected a number, got: %r' % value)
     else:
         raise ValueError('unable to infer range, value from: ({0}, {1}, {2})'.format(min, max, value))
     if step is not None:
         # ensure value is on a step
         r = (value - min) % step
         value = value - r
     return min, max, value
 
 def _widget_abbrev_single_value(o):
     """Make widgets from single values, which can be used as parameter defaults."""
     if isinstance(o, string_types):
-        return TextWidget(value=unicode_type(o))
+        return Text(value=unicode_type(o))
     elif isinstance(o, dict):
-        return DropdownWidget(values=o)
+        return Dropdown(values=o)
     elif isinstance(o, bool):
-        return CheckboxWidget(value=o)
+        return Checkbox(value=o)
     elif isinstance(o, float):
         min, max, value = _get_min_max_value(None, None, o)
-        return FloatSliderWidget(value=o, min=min, max=max)
+        return FloatSlider(value=o, min=min, max=max)
     elif isinstance(o, int):
         min, max, value = _get_min_max_value(None, None, o)
-        return IntSliderWidget(value=o, min=min, max=max)
+        return IntSlider(value=o, min=min, max=max)
     else:
         return None
 
 def _widget_abbrev(o):
     """Make widgets from abbreviations: single values, lists or tuples."""
     float_or_int = (float, int)
     if isinstance(o, (list, tuple)):
         if o and all(isinstance(x, string_types) for x in o):
-            return DropdownWidget(values=[unicode_type(k) for k in o])
+            return Dropdown(values=[unicode_type(k) for k in o])
         elif _matches(o, (float_or_int, float_or_int)):
             min, max, value = _get_min_max_value(o[0], o[1])
             if all(isinstance(_, int) for _ in o):
-                cls = IntSliderWidget
+                cls = IntSlider
             else:
-                cls = FloatSliderWidget
+                cls = FloatSlider
             return cls(value=value, min=min, max=max)
         elif _matches(o, (float_or_int, float_or_int, float_or_int)):
             step = o[2]
             if step <= 0:
                 raise ValueError("step must be >= 0, not %r" % step)
             min, max, value = _get_min_max_value(o[0], o[1], step=step)
             if all(isinstance(_, int) for _ in o):
-                cls = IntSliderWidget
+                cls = IntSlider
             else:
-                cls = FloatSliderWidget
+                cls = FloatSlider
             return cls(value=value, min=min, max=max, step=step)
     else:
         return _widget_abbrev_single_value(o)
 
 def _widget_from_abbrev(abbrev, default=empty):
     """Build a Widget instance given an abbreviation or Widget."""
     if isinstance(abbrev, Widget) or isinstance(abbrev, fixed):
         return abbrev
     
     widget = _widget_abbrev(abbrev)
     if default is not empty and isinstance(abbrev, (list, tuple, dict)):
         # if it's not a single-value abbreviation,
         # set the initial value from the default
         try:
             widget.value = default
         except Exception:
             # ignore failure to set default
             pass
     if widget is None:
         raise ValueError("%r cannot be transformed to a Widget" % (abbrev,))
     return widget
 
 def _yield_abbreviations_for_parameter(param, kwargs):
     """Get an abbreviation for a function parameter."""
     name = param.name
     kind = param.kind
     ann = param.annotation
     default = param.default
     not_found = (name, empty, empty)
     if kind in (Parameter.POSITIONAL_OR_KEYWORD, Parameter.KEYWORD_ONLY):
         if name in kwargs:
             value = kwargs.pop(name)
         elif ann is not empty:
             value = ann
         elif default is not empty:
             value = default
         else:
             yield not_found
         yield (name, value, default)
     elif kind == Parameter.VAR_KEYWORD:
         # In this case name=kwargs and we yield the items in kwargs with their keys.
         for k, v in kwargs.copy().items():
             kwargs.pop(k)
             yield k, v, empty
 
 def _find_abbreviations(f, kwargs):
     """Find the abbreviations for a function and kwargs passed to interact."""
     new_kwargs = []
     for param in signature(f).parameters.values():
         for name, value, default in _yield_abbreviations_for_parameter(param, kwargs):
             if value is empty:
                 raise ValueError('cannot find widget or abbreviation for argument: {!r}'.format(name))
             new_kwargs.append((name, value, default))
     return new_kwargs
 
 def _widgets_from_abbreviations(seq):
     """Given a sequence of (name, abbrev) tuples, return a sequence of Widgets."""
     result = []
     for name, abbrev, default in seq:
         widget = _widget_from_abbrev(abbrev, default)
         if not widget.description:
             widget.description = name
         result.append(widget)
     return result
 
 def interactive(__interact_f, **kwargs):
     """Build a group of widgets to interact with a function."""
     f = __interact_f
     co = kwargs.pop('clear_output', True)
     kwargs_widgets = []
-    container = ContainerWidget()
+    container = Box()
     container.result = None
     container.args = []
     container.kwargs = dict()
     kwargs = kwargs.copy()
 
     new_kwargs = _find_abbreviations(f, kwargs)
     # Before we proceed, let's make sure that the user has passed a set of args+kwargs
     # that will lead to a valid call of the function. This protects against unspecified
     # and doubly-specified arguments.
     getcallargs(f, **{n:v for n,v,_ in new_kwargs})
     # Now build the widgets from the abbreviations.
     kwargs_widgets.extend(_widgets_from_abbreviations(new_kwargs))
 
     # This has to be done as an assignment, not using container.children.append,
     # so that traitlets notices the update. We skip any objects (such as fixed) that
     # are not DOMWidgets.
     c = [w for w in kwargs_widgets if isinstance(w, DOMWidget)]
     container.children = c
 
     # Build the callback
     def call_f(name, old, new):
         container.kwargs = {}
         for widget in kwargs_widgets:
             value = widget.value
             container.kwargs[widget.description] = value
         if co:
             clear_output(wait=True)
         try:
             container.result = f(**container.kwargs)
         except Exception as e:
             ip = get_ipython()
             if ip is None:
                 container.log.warn("Exception in interact callback: %s", e, exc_info=True)
             else:
                 ip.showtraceback()
 
     # Wire up the widgets
     for widget in kwargs_widgets:
         widget.on_trait_change(call_f, 'value')
 
     container.on_displayed(lambda _: call_f(None, None, None))
 
     return container
 
 def interact(__interact_f=None, **kwargs):
     """interact(f, **kwargs)
     
     Interact with a function using widgets."""
     # positional arg support in: https://gist.github.com/8851331
     if __interact_f is not None:
         # This branch handles the cases:
         # 1. interact(f, **kwargs)
         # 2. @interact
         #    def f(*args, **kwargs):
         #        ...
         f = __interact_f
         w = interactive(f, **kwargs)
         f.widget = w
         display(w)
         return f
     else:
         # This branch handles the case:
         # @interact(a=30, b=40)
         # def f(*args, **kwargs):
         #     ...
         def dec(f):
             w = interactive(f, **kwargs)
             f.widget = w
             display(w)
             return f
         return dec
 
 class fixed(HasTraits):
     """A pseudo-widget whose value is fixed and never synced to the client."""
     value = Any(help="Any Python object")
     description = Unicode('', help="Any Python object")
     def __init__(self, value, **kwargs):
         super(fixed, self).__init__(value=value, **kwargs)

IPython/html/widgets/tests/test_interaction.py

@@ -1,482 +1,482 b''
 """Test interact and interactive."""
 
 #-----------------------------------------------------------------------------
 #  Copyright (C) 2014 The IPython Development Team
 #
 #  Distributed under the terms of the BSD License.  The full license is in
 #  the file COPYING, distributed as part of this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 
 from __future__ import print_function
 
 from collections import OrderedDict
 
 import nose.tools as nt
 import IPython.testing.tools as tt
 
 # from IPython.core.getipython import get_ipython
 from IPython.html import widgets
 from IPython.html.widgets import interact, interactive, Widget, interaction
 from IPython.utils.py3compat import annotate
 
 #-----------------------------------------------------------------------------
 # Utility stuff
 #-----------------------------------------------------------------------------
 
 class DummyComm(object):
     comm_id = 'a-b-c-d'
     def send(self, *args, **kwargs):
         pass
     
     def close(self, *args, **kwargs):
         pass
 
 _widget_attrs = {}
 displayed = []
 
 def setup():
     _widget_attrs['comm'] = Widget.comm
     Widget.comm = DummyComm()
     _widget_attrs['_ipython_display_'] = Widget._ipython_display_
     def raise_not_implemented(*args, **kwargs):
         raise NotImplementedError()
     Widget._ipython_display_ = raise_not_implemented
 
 def teardown():
     for attr, value in _widget_attrs.items():
         setattr(Widget, attr, value)
 
 def f(**kwargs):
     pass
 
 def clear_display():
     global displayed
     displayed = []
 
 def record_display(*args):
     displayed.extend(args)
 
 #-----------------------------------------------------------------------------
 # Actual tests
 #-----------------------------------------------------------------------------
 
 def check_widget(w, **d):
     """Check a single widget against a dict"""
     for attr, expected in d.items():
         if attr == 'cls':
             nt.assert_is(w.__class__, expected)
         else:
             value = getattr(w, attr)
             nt.assert_equal(value, expected,
                 "%s.%s = %r != %r" % (w.__class__.__name__, attr, value, expected)
             )
 
 def check_widgets(container, **to_check):
     """Check that widgets are created as expected"""
     # build a widget dictionary, so it matches
     widgets = {}
     for w in container.children:
         widgets[w.description] = w
     
     for key, d in to_check.items():
         nt.assert_in(key, widgets)
         check_widget(widgets[key], **d)
     
 
 def test_single_value_string():
     a = u'hello'
     c = interactive(f, a=a)
     w = c.children[0]
     check_widget(w,
-        cls=widgets.TextWidget,
+        cls=widgets.Text,
         description='a',
         value=a,
     )
 
 def test_single_value_bool():
     for a in (True, False):
         c = interactive(f, a=a)
         w = c.children[0]
         check_widget(w,
-            cls=widgets.CheckboxWidget,
+            cls=widgets.Checkbox,
             description='a',
             value=a,
         )
 
 def test_single_value_dict():
     for d in [
         dict(a=5),
         dict(a=5, b='b', c=dict),
     ]:
         c = interactive(f, d=d)
         w = c.children[0]
         check_widget(w,
-            cls=widgets.DropdownWidget,
+            cls=widgets.Dropdown,
             description='d',
             values=d,
             value=next(iter(d.values())),
         )
 
 def test_single_value_float():
     for a in (2.25, 1.0, -3.5):
         c = interactive(f, a=a)
         w = c.children[0]
         check_widget(w,
-            cls=widgets.FloatSliderWidget,
+            cls=widgets.FloatSlider,
             description='a',
             value=a,
             min= -a if a > 0 else 3*a,
             max= 3*a if a > 0 else -a,
             step=0.1,
             readout=True,
         )
 
 def test_single_value_int():
     for a in (1, 5, -3):
         c = interactive(f, a=a)
         nt.assert_equal(len(c.children), 1)
         w = c.children[0]
         check_widget(w,
-            cls=widgets.IntSliderWidget,
+            cls=widgets.IntSlider,
             description='a',
             value=a,
             min= -a if a > 0 else 3*a,
             max= 3*a if a > 0 else -a,
             step=1,
             readout=True,
         )
 
 def test_list_tuple_2_int():
     with nt.assert_raises(ValueError):
         c = interactive(f, tup=(1,1))
     with nt.assert_raises(ValueError):
         c = interactive(f, tup=(1,-1))
     for min, max in [ (0,1), (1,10), (1,2), (-5,5), (-20,-19) ]:
         c = interactive(f, tup=(min, max), lis=[min, max])
         nt.assert_equal(len(c.children), 2)
         d = dict(
-            cls=widgets.IntSliderWidget,
+            cls=widgets.IntSlider,
             min=min,
             max=max,
             step=1,
             readout=True,
         )
         check_widgets(c, tup=d, lis=d)
 
 def test_list_tuple_3_int():
     with nt.assert_raises(ValueError):
         c = interactive(f, tup=(1,2,0))
     with nt.assert_raises(ValueError):
         c = interactive(f, tup=(1,2,-1))
     for min, max, step in [ (0,2,1), (1,10,2), (1,100,2), (-5,5,4), (-100,-20,4) ]:
         c = interactive(f, tup=(min, max, step), lis=[min, max, step])
         nt.assert_equal(len(c.children), 2)
         d = dict(
-            cls=widgets.IntSliderWidget,
+            cls=widgets.IntSlider,
             min=min,
             max=max,
             step=step,
             readout=True,
         )
         check_widgets(c, tup=d, lis=d)
 
 def test_list_tuple_2_float():
     with nt.assert_raises(ValueError):
         c = interactive(f, tup=(1.0,1.0))
     with nt.assert_raises(ValueError):
         c = interactive(f, tup=(0.5,-0.5))
     for min, max in [ (0.5, 1.5), (1.1,10.2), (1,2.2), (-5.,5), (-20,-19.) ]:
         c = interactive(f, tup=(min, max), lis=[min, max])
         nt.assert_equal(len(c.children), 2)
         d = dict(
-            cls=widgets.FloatSliderWidget,
+            cls=widgets.FloatSlider,
             min=min,
             max=max,
             step=.1,
             readout=True,
         )
         check_widgets(c, tup=d, lis=d)
 
 def test_list_tuple_3_float():
     with nt.assert_raises(ValueError):
         c = interactive(f, tup=(1,2,0.0))
     with nt.assert_raises(ValueError):
         c = interactive(f, tup=(-1,-2,1.))
     with nt.assert_raises(ValueError):
         c = interactive(f, tup=(1,2.,-1.))
     for min, max, step in [ (0.,2,1), (1,10.,2), (1,100,2.), (-5.,5.,4), (-100,-20.,4.) ]:
         c = interactive(f, tup=(min, max, step), lis=[min, max, step])
         nt.assert_equal(len(c.children), 2)
         d = dict(
-            cls=widgets.FloatSliderWidget,
+            cls=widgets.FloatSlider,
             min=min,
             max=max,
             step=step,
             readout=True,
         )
         check_widgets(c, tup=d, lis=d)
 
 def test_list_tuple_str():
     values = ['hello', 'there', 'guy']
     first = values[0]
     dvalues = OrderedDict((v,v) for v in values)
     c = interactive(f, tup=tuple(values), lis=list(values))
     nt.assert_equal(len(c.children), 2)
     d = dict(
-        cls=widgets.DropdownWidget,
+        cls=widgets.Dropdown,
         value=first,
         values=dvalues
     )
     check_widgets(c, tup=d, lis=d)
 
 def test_list_tuple_invalid():
     for bad in [
         (),
         (5, 'hi'),
         ('hi', 5),
         ({},),
         (None,),
     ]:
         with nt.assert_raises(ValueError):
             print(bad) # because there is no custom message in assert_raises
             c = interactive(f, tup=bad)
 
 def test_defaults():
     @annotate(n=10)
     def f(n, f=4.5, g=1):
         pass
     
     c = interactive(f)
     check_widgets(c,
         n=dict(
-            cls=widgets.IntSliderWidget,
+            cls=widgets.IntSlider,
             value=10,
         ),
         f=dict(
-            cls=widgets.FloatSliderWidget,
+            cls=widgets.FloatSlider,
             value=4.5,
         ),
         g=dict(
-            cls=widgets.IntSliderWidget,
+            cls=widgets.IntSlider,
             value=1,
         ),
     )
 
 def test_default_values():
     @annotate(n=10, f=(0, 10.), g=5, h={'a': 1, 'b': 2}, j=['hi', 'there'])
     def f(n, f=4.5, g=1, h=2, j='there'):
         pass
     
     c = interactive(f)
     check_widgets(c,
         n=dict(
-            cls=widgets.IntSliderWidget,
+            cls=widgets.IntSlider,
             value=10,
         ),
         f=dict(
-            cls=widgets.FloatSliderWidget,
+            cls=widgets.FloatSlider,
             value=4.5,
         ),
         g=dict(
-            cls=widgets.IntSliderWidget,
+            cls=widgets.IntSlider,
             value=5,
         ),
         h=dict(
-            cls=widgets.DropdownWidget,
+            cls=widgets.Dropdown,
             values={'a': 1, 'b': 2},
             value=2
         ),
         j=dict(
-            cls=widgets.DropdownWidget,
+            cls=widgets.Dropdown,
             values={'hi':'hi', 'there':'there'},
             value='there'
         ),
     )
 
 def test_default_out_of_bounds():
     @annotate(f=(0, 10.), h={'a': 1}, j=['hi', 'there'])
     def f(f='hi', h=5, j='other'):
         pass
     
     c = interactive(f)
     check_widgets(c,
         f=dict(
-            cls=widgets.FloatSliderWidget,
+            cls=widgets.FloatSlider,
             value=5.,
         ),
         h=dict(
-            cls=widgets.DropdownWidget,
+            cls=widgets.Dropdown,
             values={'a': 1},
             value=1,
         ),
         j=dict(
-            cls=widgets.DropdownWidget,
+            cls=widgets.Dropdown,
             values={'hi':'hi', 'there':'there'},
             value='hi',
         ),
     )
 
 def test_annotations():
-    @annotate(n=10, f=widgets.FloatTextWidget())
+    @annotate(n=10, f=widgets.FloatText())
     def f(n, f):
         pass
     
     c = interactive(f)
     check_widgets(c,
         n=dict(
-            cls=widgets.IntSliderWidget,
+            cls=widgets.IntSlider,
             value=10,
         ),
         f=dict(
-            cls=widgets.FloatTextWidget,
+            cls=widgets.FloatText,
         ),
     )
 
 def test_priority():
     @annotate(annotate='annotate', kwarg='annotate')
     def f(kwarg='default', annotate='default', default='default'):
         pass
     
     c = interactive(f, kwarg='kwarg')
     check_widgets(c,
         kwarg=dict(
-            cls=widgets.TextWidget,
+            cls=widgets.Text,
             value='kwarg',
         ),
         annotate=dict(
-            cls=widgets.TextWidget,
+            cls=widgets.Text,
             value='annotate',
         ),
     )
 
 @nt.with_setup(clear_display)
 def test_decorator_kwarg():
     with tt.monkeypatch(interaction, 'display', record_display):
         @interact(a=5)
         def foo(a):
             pass
     nt.assert_equal(len(displayed), 1)
     w = displayed[0].children[0]
     check_widget(w,
-        cls=widgets.IntSliderWidget,
+        cls=widgets.IntSlider,
         value=5,
     )
 
 @nt.with_setup(clear_display)
 def test_decorator_no_call():
     with tt.monkeypatch(interaction, 'display', record_display):
         @interact
         def foo(a='default'):
             pass
     nt.assert_equal(len(displayed), 1)
     w = displayed[0].children[0]
     check_widget(w,
-        cls=widgets.TextWidget,
+        cls=widgets.Text,
         value='default',
     )
 
 @nt.with_setup(clear_display)
 def test_call_interact():
     def foo(a='default'):
         pass
     with tt.monkeypatch(interaction, 'display', record_display):
         ifoo = interact(foo)
     nt.assert_equal(len(displayed), 1)
     w = displayed[0].children[0]
     check_widget(w,
-        cls=widgets.TextWidget,
+        cls=widgets.Text,
         value='default',
     )
 
 @nt.with_setup(clear_display)
 def test_call_interact_kwargs():
     def foo(a='default'):
         pass
     with tt.monkeypatch(interaction, 'display', record_display):
         ifoo = interact(foo, a=10)
     nt.assert_equal(len(displayed), 1)
     w = displayed[0].children[0]
     check_widget(w,
-        cls=widgets.IntSliderWidget,
+        cls=widgets.IntSlider,
         value=10,
     )
 
 @nt.with_setup(clear_display)
 def test_call_decorated_on_trait_change():
     """test calling @interact decorated functions"""
     d = {}
     with tt.monkeypatch(interaction, 'display', record_display):
         @interact
         def foo(a='default'):
             d['a'] = a
             return a
     nt.assert_equal(len(displayed), 1)
     w = displayed[0].children[0]
     check_widget(w,
-        cls=widgets.TextWidget,
+        cls=widgets.Text,
         value='default',
     )
     # test calling the function directly
     a = foo('hello')
     nt.assert_equal(a, 'hello')
     nt.assert_equal(d['a'], 'hello')
     
     # test that setting trait values calls the function
     w.value = 'called'
     nt.assert_equal(d['a'], 'called')
 
 @nt.with_setup(clear_display)
 def test_call_decorated_kwargs_on_trait_change():
     """test calling @interact(foo=bar) decorated functions"""
     d = {}
     with tt.monkeypatch(interaction, 'display', record_display):
         @interact(a='kwarg')
         def foo(a='default'):
             d['a'] = a
             return a
     nt.assert_equal(len(displayed), 1)
     w = displayed[0].children[0]
     check_widget(w,
-        cls=widgets.TextWidget,
+        cls=widgets.Text,
         value='kwarg',
     )
     # test calling the function directly
     a = foo('hello')
     nt.assert_equal(a, 'hello')
     nt.assert_equal(d['a'], 'hello')
     
     # test that setting trait values calls the function
     w.value = 'called'
     nt.assert_equal(d['a'], 'called')
 
 def test_fixed():
     c = interactive(f, a=widgets.fixed(5), b='text')
     nt.assert_equal(len(c.children), 1)
     w = c.children[0]
     check_widget(w,
-        cls=widgets.TextWidget,
+        cls=widgets.Text,
         value='text',
         description='b',
     )
 
 def test_default_description():
     c = interactive(f, b='text')
     w = c.children[0]
     check_widget(w,
-        cls=widgets.TextWidget,
+        cls=widgets.Text,
         value='text',
         description='b',
     )
 
 def test_custom_description():
-    c = interactive(f, b=widgets.TextWidget(value='text', description='foo'))
+    c = interactive(f, b=widgets.Text(value='text', description='foo'))
     w = c.children[0]
     check_widget(w,
-        cls=widgets.TextWidget,
+        cls=widgets.Text,
         value='text',
         description='foo',
     )

IPython/html/widgets/widget_bool.py

@@ -1,34 +1,43 b''
-"""BoolWidget class.  
+"""Bool class.  
 
 Represents a boolean using a widget.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget
 from IPython.utils.traitlets import Unicode, Bool
+from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
-class _BoolWidget(DOMWidget):
+class _Bool(DOMWidget):
+    """A base class for creating widgets that represent booleans."""
     value = Bool(False, help="Bool value", sync=True)
-    description = Unicode('', help="Description of the boolean (label).", sync=True) 
+    description = Unicode('', help="Description of the boolean (label).", sync=True)
     disabled = Bool(False, help="Enable or disable user changes.", sync=True)
 
 
-class CheckboxWidget(_BoolWidget):
+class Checkbox(_Bool):
+    """Displays a boolean `value`."""
     _view_name = Unicode('CheckboxView', sync=True)
 
 
-class ToggleButtonWidget(_BoolWidget):
-    _view_name = Unicode('ToggleButtonView', sync=True)
+class ToggleButton(_Bool):
+    """Displays a boolean `value`."""
     
+    _view_name = Unicode('ToggleButtonView', sync=True)
+
+
+# Remove in IPython 4.0
+CheckboxWidget = DeprecatedClass(Checkbox, 'CheckboxWidget')
+ToggleButtonWidget = DeprecatedClass(ToggleButton, 'ToggleButtonWidget')

IPython/html/widgets/widget_button.py

@@ -1,56 +1,65 b''
-"""ButtonWidget class.  
+"""Button class.  
 
 Represents a button in the frontend using a widget.  Allows user to listen for
 click events on the button and trigger backend code when the clicks are fired.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget, CallbackDispatcher
 from IPython.utils.traitlets import Unicode, Bool
+from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
-class ButtonWidget(DOMWidget):
+class Button(DOMWidget):
+    """Button widget.
+
+    This widget has an `on_click` method that allows you to listen for the 
+    user clicking on the button.  The click event itself is stateless."""
     _view_name = Unicode('ButtonView', sync=True)
 
     # Keys
     description = Unicode('', help="Description of the button (label).", sync=True)
     disabled = Bool(False, help="Enable or disable user changes.", sync=True)
     
     def __init__(self, **kwargs):
         """Constructor"""
-        super(ButtonWidget, self).__init__(**kwargs)
+        super(Button, self).__init__(**kwargs)
         self._click_handlers = CallbackDispatcher()
         self.on_msg(self._handle_button_msg)
 
     def on_click(self, callback, remove=False):
         """Register a callback to execute when the button is clicked.
 
         The callback will be called with one argument,
         the clicked button widget instance.
 
         Parameters
         ----------
         remove : bool (optional)
             Set to true to remove the callback from the list of callbacks."""
         self._click_handlers.register_callback(callback, remove=remove)
 
     def _handle_button_msg(self, _, content):
         """Handle a msg from the front-end.
 
         Parameters
         ----------
         content: dict
             Content of the msg."""
         if content.get('event', '') == 'click':
             self._click_handlers(self)
+
+
+# Remove in IPython 4.0
+ButtonWidget = DeprecatedClass(Button, 'ButtonWidget')

IPython/html/widgets/widget_float.py

@@ -1,61 +1,69 b''
-"""FloatWidget class.  
+"""Float class.  
 
 Represents an unbounded float using a widget.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget
 from IPython.utils.traitlets import Unicode, CFloat, Bool, Enum
+from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
-class _FloatWidget(DOMWidget):
+class _Float(DOMWidget):
     value = CFloat(0.0, help="Float value", sync=True) 
     disabled = Bool(False, help="Enable or disable user changes", sync=True)
     description = Unicode(help="Description of the value this widget represents", sync=True)
 
 
-class _BoundedFloatWidget(_FloatWidget):
+class _BoundedFloat(_Float):
     max = CFloat(100.0, help="Max value", sync=True)
     min = CFloat(0.0, help="Min value", sync=True)
     step = CFloat(0.1, help="Minimum step that the value can take (ignored by some views)", sync=True)
 
     def __init__(self, *pargs, **kwargs):
         """Constructor"""
         DOMWidget.__init__(self, *pargs, **kwargs)
         self._validate('value', None, self.value)
         self.on_trait_change(self._validate, ['value', 'min', 'max'])
 
     def _validate(self, name, old, new):
         """Validate value, max, min."""
         if self.min > new or new > self.max:
             self.value = min(max(new, self.min), self.max)
 
 
-class FloatTextWidget(_FloatWidget):
+class FloatText(_Float):
     _view_name = Unicode('FloatTextView', sync=True)
 
 
-class BoundedFloatTextWidget(_BoundedFloatWidget):
+class BoundedFloatText(_BoundedFloat):
     _view_name = Unicode('FloatTextView', sync=True)
 
 
-class FloatSliderWidget(_BoundedFloatWidget):
+class FloatSlider(_BoundedFloat):
     _view_name = Unicode('FloatSliderView', sync=True)
     orientation = Enum([u'horizontal', u'vertical'], u'horizontal', 
         help="Vertical or horizontal.", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
 
 
-class FloatProgressWidget(_BoundedFloatWidget):
+class FloatProgress(_BoundedFloat):
     _view_name = Unicode('ProgressView', sync=True)
+
+
+# Remove in IPython 4.0
+FloatTextWidget = DeprecatedClass(FloatText, 'FloatTextWidget')
+BoundedFloatTextWidget = DeprecatedClass(BoundedFloatText, 'BoundedFloatTextWidget')
+FloatSliderWidget = DeprecatedClass(FloatSlider, 'FloatSliderWidget')
+FloatProgressWidget = DeprecatedClass(FloatProgress, 'FloatProgressWidget')

IPython/html/widgets/widget_image.py

@@ -1,35 +1,46 b''
-"""ImageWidget class.  
+"""Image class.  
 
 Represents an image in the frontend using a widget.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 import base64
 
 from .widget import DOMWidget
 from IPython.utils.traitlets import Unicode, CUnicode, Bytes
+from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
-class ImageWidget(DOMWidget):
+class Image(DOMWidget):
+    """Displays an image as a widget.
+
+    The `value` of this widget accepts a byte string.  The byte string is the raw
+    image data that you want the browser to display.  You can explicitly define
+    the format of the byte string using the `format` trait (which defaults to
+    "png")."""
     _view_name = Unicode('ImageView', sync=True)
     
     # Define the custom state properties to sync with the front-end
     format = Unicode('png', sync=True)
     width = CUnicode(sync=True)
     height = CUnicode(sync=True)
     _b64value = Unicode(sync=True)
     
     value = Bytes()
     def _value_changed(self, name, old, new):
         self._b64value = base64.b64encode(new)
+
+
+# Remove in IPython 4.0
+ImageWidget = DeprecatedClass(Image, 'ImageWidget')

IPython/html/widgets/widget_int.py

@@ -1,60 +1,75 b''
-"""IntWidget class.  
+"""Int class.  
 
 Represents an unbounded int using a widget.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget
 from IPython.utils.traitlets import Unicode, CInt, Bool, Enum
+from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
-class _IntWidget(DOMWidget):
+class _Int(DOMWidget):
+    """Base class used to create widgets that represent an int."""
     value = CInt(0, help="Int value", sync=True) 
     disabled = Bool(False, help="Enable or disable user changes", sync=True)
     description = Unicode(help="Description of the value this widget represents", sync=True)
 
 
-class _BoundedIntWidget(_IntWidget):
+class _BoundedInt(_Int):
+    """Base class used to create widgets that represent a int that is bounded
+    by a minium and maximum."""
     step = CInt(1, help="Minimum step that the value can take (ignored by some views)", sync=True)
     max = CInt(100, help="Max value", sync=True)
     min = CInt(0, help="Min value", sync=True)
 
     def __init__(self, *pargs, **kwargs):
         """Constructor"""
         DOMWidget.__init__(self, *pargs, **kwargs)
         self.on_trait_change(self._validate, ['value', 'min', 'max'])
 
     def _validate(self, name, old, new):
         """Validate value, max, min."""
         if self.min > new or new > self.max:
             self.value = min(max(new, self.min), self.max)
 
 
-class IntTextWidget(_IntWidget):
+class IntText(_Int):
+    """Textbox widget that represents a int."""
     _view_name = Unicode('IntTextView', sync=True)
 
 
-class BoundedIntTextWidget(_BoundedIntWidget):
+class BoundedIntText(_BoundedInt):
+    """Textbox widget that represents a int bounded by a minimum and maximum value."""
     _view_name = Unicode('IntTextView', sync=True)
 
 
-class IntSliderWidget(_BoundedIntWidget):
+class IntSlider(_BoundedInt):
+    """Slider widget that represents a int bounded by a minimum and maximum value."""
     _view_name = Unicode('IntSliderView', sync=True)
     orientation = Enum([u'horizontal', u'vertical'], u'horizontal', 
         help="Vertical or horizontal.", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
 
 
-class IntProgressWidget(_BoundedIntWidget):
+class IntProgress(_BoundedInt):
+    """Progress bar that represents a int bounded by a minimum and maximum value."""
     _view_name = Unicode('ProgressView', sync=True)
+
+
+# Remove in IPython 4.0
+IntTextWidget = DeprecatedClass(IntText, 'IntTextWidget')
+BoundedIntTextWidget = DeprecatedClass(BoundedIntText, 'BoundedIntTextWidget')
+IntSliderWidget = DeprecatedClass(IntSlider, 'IntSliderWidget')
+IntProgressWidget = DeprecatedClass(IntProgress, 'IntProgressWidget')

IPython/html/widgets/widget_selection.py

@@ -1,125 +1,139 b''
-"""SelectionWidget classes.
+"""Selection classes.
 
 Represents an enumeration using a widget.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 
 from collections import OrderedDict
 from threading import Lock
 
 from .widget import DOMWidget
 from IPython.utils.traitlets import Unicode, List, Bool, Any, Dict, TraitError
 from IPython.utils.py3compat import unicode_type
+from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # SelectionWidget
 #-----------------------------------------------------------------------------
-class _SelectionWidget(DOMWidget):
+class _Selection(DOMWidget):
     """Base class for Selection widgets
     
     ``values`` can be specified as a list or dict. If given as a list,
     it will be transformed to a dict of the form ``{str(value):value}``.
     """
     
     value = Any(help="Selected value")
     values = Dict(help="""Dictionary of {name: value} the user can select.
     
     The keys of this dictionary are the strings that will be displayed in the UI,
     representing the actual Python choices.
     
     The keys of this dictionary are also available as value_names.
     """)
     value_name = Unicode(help="The name of the selected value", sync=True)
     value_names = List(Unicode, help="""Read-only list of names for each value.
         
         If values is specified as a list, this is the string representation of each element.
         Otherwise, it is the keys of the values dictionary.
         
         These strings are used to display the choices in the front-end.""", sync=True)
     disabled = Bool(False, help="Enable or disable user changes", sync=True)
     description = Unicode(help="Description of the value this widget represents", sync=True)
     
 
     def __init__(self, *args, **kwargs):
         self.value_lock = Lock()
         self._in_values_changed = False
         if 'values' in kwargs:
             values = kwargs['values']
             # convert list values to an dict of {str(v):v}
             if isinstance(values, list):
                 # preserve list order with an OrderedDict
                 kwargs['values'] = OrderedDict((unicode_type(v), v) for v in values)
             # python3.3 turned on hash randomization by default - this means that sometimes, randomly
             # we try to set value before setting values, due to dictionary ordering.  To fix this, force
             # the setting of self.values right now, before anything else runs
             self.values = kwargs.pop('values')
         DOMWidget.__init__(self, *args, **kwargs)
     
     def _values_changed(self, name, old, new):
         """Handles when the values dict has been changed.
 
         Setting values implies setting value names from the keys of the dict.
         """
         self._in_values_changed = True
         try:
             self.value_names = list(new.keys())
         finally:
             self._in_values_changed = False
         
         # ensure that the chosen value is one of the choices
         if self.value not in new.values():
             self.value = next(iter(new.values()))
     
     def _value_names_changed(self, name, old, new):
         if not self._in_values_changed:
             raise TraitError("value_names is a read-only proxy to values.keys(). Use the values dict instead.")
 
     def _value_changed(self, name, old, new):
         """Called when value has been changed"""
         if self.value_lock.acquire(False):
             try:
                 # Reverse dictionary lookup for the value name
                 for k,v in self.values.items():
                     if new == v:
                         # set the selected value name
                         self.value_name = k
                         return
                 # undo the change, and raise KeyError
                 self.value = old
                 raise KeyError(new)
             finally:
                 self.value_lock.release()
 
     def _value_name_changed(self, name, old, new):
         """Called when the value name has been changed (typically by the frontend)."""
         if self.value_lock.acquire(False):
             try:
                 self.value = self.values[new]
             finally:
                 self.value_lock.release()
 
 
-class ToggleButtonsWidget(_SelectionWidget):
+class ToggleButtons(_Selection):
+    """Group of toggle buttons that represent an enumeration.  Only one toggle
+    button can be toggled at any point in time.""" 
     _view_name = Unicode('ToggleButtonsView', sync=True)
 
 
-class DropdownWidget(_SelectionWidget):
+class Dropdown(_Selection):
+    """Allows you to select a single item from a dropdown."""
     _view_name = Unicode('DropdownView', sync=True)
 
 
-class RadioButtonsWidget(_SelectionWidget):
+class RadioButtons(_Selection):
+    """Group of radio buttons that represent an enumeration.  Only one radio
+    button can be toggled at any point in time.""" 
     _view_name = Unicode('RadioButtonsView', sync=True)
     
 
-class SelectWidget(_SelectionWidget):
+class Select(_Selection):
+    """Listbox that only allows one item to be selected at any given time."""
     _view_name = Unicode('SelectView', sync=True)
+
+
+# Remove in IPython 4.0
+ToggleButtonsWidget = DeprecatedClass(ToggleButtons, 'ToggleButtonsWidget')
+DropdownWidget = DeprecatedClass(Dropdown, 'DropdownWidget')
+RadioButtonsWidget = DeprecatedClass(RadioButtons, 'RadioButtonsWidget')
+SelectWidget = DeprecatedClass(Select, 'SelectWidget')

IPython/html/widgets/widget_selectioncontainer.py

@@ -1,58 +1,67 b''
-"""SelectionContainerWidget class.  
+"""SelectionContainer class.  
 
 Represents a multipage container that can be used to group other widgets into
 pages.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
-from .widget_container import ContainerWidget
+from .widget_box import Box
 from IPython.utils.traitlets import Unicode, Dict, CInt
+from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
-class _SelectionContainerWidget(ContainerWidget):
+class _SelectionContainer(Box):
+    """Base class used to display multiple child widgets."""
     _titles = Dict(help="Titles of the pages", sync=True)
     selected_index = CInt(0, sync=True)
 
     # Public methods
     def set_title(self, index, title):
         """Sets the title of a container page.
 
         Parameters
         ----------
         index : int
             Index of the container page
         title : unicode
             New title"""
         self._titles[index] = title
         self.send_state('_titles')
 
     def get_title(self, index):
         """Gets the title of a container pages.
 
         Parameters
         ----------
         index : int
             Index of the container page"""
         if index in self._titles:
             return self._titles[index]
         else:
             return None
 
 
-class AccordionWidget(_SelectionContainerWidget):
+class Accordion(_SelectionContainer):
+    """Displays children each on a separate accordion page."""
     _view_name = Unicode('AccordionView', sync=True)
 
 
-class TabWidget(_SelectionContainerWidget):
+class Tab(_SelectionContainer):
+    """Displays children each on a separate accordion tab."""
     _view_name = Unicode('TabView', sync=True)
+
+
+# Remove in IPython 4.0
+AccordionWidget = DeprecatedClass(Accordion, 'AccordionWidget')
+TabWidget = DeprecatedClass(Tab, 'TabWidget')

IPython/html/widgets/widget_string.py

@@ -1,73 +1,87 b''
-"""StringWidget class.  
+"""String class.  
 
 Represents a unicode string using a widget.
 """
 #-----------------------------------------------------------------------------
 # Copyright (c) 2013, the IPython Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
 # The full license is in the file COPYING.txt, distributed with this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget, CallbackDispatcher
 from IPython.utils.traitlets import Unicode, Bool
+from IPython.utils.warn import DeprecatedClass
 
 #-----------------------------------------------------------------------------
 # Classes
 #-----------------------------------------------------------------------------
-class _StringWidget(DOMWidget):
+class _String(DOMWidget):
+    """Base class used to create widgets that represent a string."""
     value = Unicode(help="String value", sync=True)
     disabled = Bool(False, help="Enable or disable user changes", sync=True)
     description = Unicode(help="Description of the value this widget represents", sync=True)
     placeholder = Unicode("", help="Placeholder text to display when nothing has been typed", sync=True)
 
 
-class HTMLWidget(_StringWidget):
+class HTML(_String):
+    """Renders the string `value` as HTML."""
     _view_name = Unicode('HTMLView', sync=True)
 
 
-class LatexWidget(_StringWidget):
+class Latex(_String):
+    """Renders math inside the string `value` as Latex (requires $ $ or $$ $$ 
+    and similar latex tags)."""
     _view_name = Unicode('LatexView', sync=True)
 
 
-class TextareaWidget(_StringWidget):
+class Textarea(_String):
+    """Multiline text area widget."""
     _view_name = Unicode('TextareaView', sync=True)
 
     def scroll_to_bottom(self):
         self.send({"method": "scroll_to_bottom"})
 
 
-class TextWidget(_StringWidget):
+class Text(_String):
+    """Single line textbox widget."""
     _view_name = Unicode('TextView', sync=True)
 
     def __init__(self, **kwargs):
-        super(TextWidget, self).__init__(**kwargs)
+        super(Text, self).__init__(**kwargs)
         self._submission_callbacks = CallbackDispatcher()
         self.on_msg(self._handle_string_msg)
 
     def _handle_string_msg(self, _, content):
         """Handle a msg from the front-end.
 
         Parameters
         ----------
         content: dict
             Content of the msg."""
         if content.get('event', '') == 'submit':
             self._submission_callbacks(self)
 
     def on_submit(self, callback, remove=False):
         """(Un)Register a callback to handle text submission.
 
         Triggered when the user clicks enter.
 
         Parameters
         ----------
         callback: callable
             Will be called with exactly one argument: the Widget instance
         remove: bool (optional)
             Whether to unregister the callback"""
         self._submission_callbacks.register_callback(callback, remove=remove)
+
+
+# Remove in IPython 4.0
+HTMLWidget = DeprecatedClass(HTML, 'HTMLWidget')
+LatexWidget = DeprecatedClass(Latex, 'LatexWidget')
+TextareaWidget = DeprecatedClass(Textarea, 'TextareaWidget')
+TextWidget = DeprecatedClass(Text, 'TextWidget')

IPython/utils/warn.py

@@ -1,67 +1,81 b''
 # encoding: utf-8
 """
 Utilities for warnings.  Shoudn't we just use the built in warnings module.
 """
 
 #-----------------------------------------------------------------------------
 #  Copyright (C) 2008-2011  The IPython Development Team
 #
 #  Distributed under the terms of the BSD License.  The full license is in
 #  the file COPYING, distributed as part of this software.
 #-----------------------------------------------------------------------------
 
 #-----------------------------------------------------------------------------
 # Imports
 #-----------------------------------------------------------------------------
 from __future__ import print_function
 
 import sys
+import warnings
 
 from IPython.utils import io
 
 #-----------------------------------------------------------------------------
 # Code
 #-----------------------------------------------------------------------------
 
 def warn(msg,level=2,exit_val=1):
     """Standard warning printer. Gives formatting consistency.
 
     Output is sent to io.stderr (sys.stderr by default).
 
     Options:
 
     -level(2): allows finer control:
       0 -> Do nothing, dummy function.
       1 -> Print message.
       2 -> Print 'WARNING:' + message. (Default level).
       3 -> Print 'ERROR:' + message.
       4 -> Print 'FATAL ERROR:' + message and trigger a sys.exit(exit_val).
 
     -exit_val (1): exit value returned by sys.exit() for a level 4
     warning. Ignored for all other levels."""
 
     if level>0:
         header = ['','','WARNING: ','ERROR: ','FATAL ERROR: ']
         print(header[level], msg, sep='', file=io.stderr)
         if level == 4:
             print('Exiting.\n', file=io.stderr)
             sys.exit(exit_val)
 
             
 def info(msg):
     """Equivalent to warn(msg,level=1)."""
 
     warn(msg,level=1)
 
     
 def error(msg):
     """Equivalent to warn(msg,level=3)."""
 
     warn(msg,level=3)
 
     
 def fatal(msg,exit_val=1):
     """Equivalent to warn(msg,exit_val=exit_val,level=4)."""
 
     warn(msg,exit_val=exit_val,level=4)
 
+
+def DeprecatedClass(base, class_name):
+    # Hook the init method of the base class.
+    def init_hook(self, *pargs, **kwargs):
+        base.__init__(self, *pargs, **kwargs)
+
+        # Warn once per class.
+        if base not in DeprecatedClass._warned_classes:
+            DeprecatedClass._warned_classes.append(base)
+            warn('"{}" is deprecated, please use "{}" instead.'.format(
+                class_name, base.__name__))
+    return type(class_name, (base,), {'__init__': init_hook})
+DeprecatedClass._warned_classes = []