/* 
    Default styles for jsPlumb Toolkit

    Copyright 2015 https://jsplumbtoolkit.com
*/

/* --------------------------------------------------------------------------------------------- */
/* --- SURFACE WIDGET -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------- */

/*
    Assigned to every node managed by an instance of the Toolkit. They are required to be positioned absolute, to
    enable dragging to work properly.
*/
.jtk-node {
    position: absolute;
}

/*
    This style was created in response to this Chrome bug:
    http://stackoverflow.com/questions/13758215/artifacts-when-css-scaled-in-chrome

    Basically it's about how sometimes there can be artefacts left on screen when the user drags an element. It seems
    the issue has been fixed in more recent versions of Chrome, but the style is left here in case you come across
    the problem.
*/
.jtk-node.jsplumb-drag {
    /*-webkit-backface-visibility: hidden;*/
}

/*
    Assigned to an element that is the `Container` in a `render` call.
    Elements that are acting as Surface widgets should have overflow:hidden set to prevent libs from
    scrolling them during drag (we don't want scrollbars; we have an infinite canvas). Position is set to
    `relative` as this is the parent for nodes, which are positioned absolute (and for absolute positioning
    to work, you need to ensure the parent node has `position:relative`). This style also sets some default
    values for the cursor - using a `grab` cursor where supported.
*/
.jtk-surface {
    overflow: hidden !important;
    position: relative;
    cursor: move;
    cursor: -moz-grab;
    cursor: -webkit-grab;

    /*
        For IE10+. As discussed on this page:

        https://msdn.microsoft.com/en-us/library/ie/jj583807(v=vs.85).aspx

        Microsoft have very helpfully implemented default behaviours for a bunch of touch events and
        then consumed the events so you don't have to be bothered by them. They've "done a lot of research"
        about this stuff and put together a really great default experience for everyone in the entire world.
    */
    touch-action:none;

    /*
        Another Chrome issue that appears to have been fixed in later versions
        http://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome
    */
    /*
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    */
}

/*
    Assigned to the surface when it is being panned. The default is to change the cursor (in browsers that support
    a `grabbing` cursor), and to disable tex selection.
*/
.jtk-surface-panning {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*
    The work area in a surface renderer.
*/
.jtk-surface-canvas {
    overflow: visible !important;
}

/*
    For IE10+. Discussed above in the .jtk-surface styles. This one is specific to elements that are configured
    to be droppable on a Surface via its `registerDroppableNodes` method.
*/
.jtk-surface-droppable-node {
    touch-action:none;
}

/*
    Assigned to a Surface widget when panning is disabled (and therefore the app is relying on scrollbars when the content overflows).
*/
.jtk-surface-nopan {
    overflow: scroll !important;
    cursor:default;
}

/*
Assigned to tile images in a tiled background
*/
.jtk-surface-tile {
    border:none;
    outline:none;
    margin:0;
    -webkit-transition: opacity .3s ease .15s;
    -moz-transition: opacity .3s ease .15s;
    -o-transition: opacity .3s ease .15s;
    -ms-transition: opacity .3s ease .15s;
    transition: opacity .3s ease .15s;
}

/*
    Assigned to the element used for node select with the mouse ("lasso").
*/
.jtk-lasso {
    border: 2px solid rgb(49, 119, 184);
    background-color: WhiteSmoke;
    opacity: 0.5;
    display: none;
    z-index: 20000;
    position: absolute;
}

/*
    This class is added to the document body on lasso drag start and removed at the end of lasso dragging. Its purpose
    is to switch off text selection on all elements while the user is dragging the lasso.
*/
.jtk-lasso-select-defeat * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/**
    Added to the lasso mask when it is operating in 'inverted' mode, ie. the excluded parts of the UI are covered, rather
    than the normal mode in which the selected parts of the UI are covered.
*/
.jtk-lasso-mask {
    position:fixed;
    z-index:20000;
    display:none;
    opacity:0.5;
    background-color: #07234E;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

/*
    Assigned to some element that has been selected (either via lasso or programmatically).
*/
.jtk-surface-selected-element {
    border: 2px dashed #f76258 !important;
}

/*
    Assigned to all pan buttons in a surface widget.
*/
.jtk-surface-pan {
    background-color: Azure;
    opacity: 0.4;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    -webkit-transition: background-color 0.15s ease-in;
    -moz-transition: background-color 0.15s ease-in;
    -o-transition: background-color 0.15s ease-in;
    transition: background-color 0.15s ease-in;
}

/*
    Specific styles for the top and bottom pan buttons.
    Top/bottom are 100% width and 20px high by default
*/
.jtk-surface-pan-top, .jtk-surface-pan-bottom {
    width: 100%;
    height: 20px;
}

/*
    Hover styles for all pan buttons.
    On hover, change color, background color, font weight and opacity.
*/
.jtk-surface-pan-top:hover, .jtk-surface-pan-bottom:hover, .jtk-surface-pan-left:hover, .jtk-surface-pan-right:hover {
    opacity: 0.6;
    background-color: rgb(49, 119, 184);
    color: white;
    font-weight: bold;
}

/*
    Specific styles for the left and right pan buttons.
    Left/right pan buttons are 100% height and 20px wide
*/
.jtk-surface-pan-left, .jtk-surface-pan-right {
    width: 20px;
    height: 100%;
    line-height: 40;
}


/*
    Assigned to a pan button when the user is pressing it.
*/
.jtk-surface-pan-active, .jtk-surface-pan-active:hover {
    background-color: #f76258;
}

/* --------------------------------------------------------------------------------------------- */
/* --- MINIVIEW WIDGET ------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------- */

/*
    Assigned to an element that is acting as a Miniview.
    As with Surface, Miniview elements should have overflow:hidden set to prevent
    libs from scrolling them during drag. This style also provides a default width/height for a miniview,
    which you may wish to override.
*/
.jtk-miniview {
    overflow: hidden !important;
    width: 125px;
    height: 125px;
    position: relative;
    background-color: #B2C9CD;
    border: 1px solid #E2E6CD;
    border-radius: 4px;
    opacity: 0.8;
}

/* 
    Assigned to the element that shows the size of the related viewport in a Miniview widget, and which can be dragged to
    move the surface.
*/
.jtk-miniview-panner {
    border: 5px dotted WhiteSmoke;
    opacity: 0.4;
    background-color: rgb(79, 111, 126);
    cursor: move;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

/*
    Assigned to the miniview's panner when it is being dragged.
*/
.jtk-miniview-panning {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

/*
    Added to all elements displayed in a miniview.
*/
.jtk-miniview-element {
    background-color: rgb(96, 122, 134);
    position: absolute;
}

/*
    Assigned to the collapse/expand miniview button
*/
.jtk-miniview-collapse {
    color: whiteSmoke;
    position: absolute;
    font-size: 18px;
    top: -1px;
    right: 3px;
    cursor: pointer;
    font-weight: bold;
}

/*
    The '-' symbol when the miniview is expanded
*/
.jtk-miniview-collapse:before {
    content: "\2012";
}

/*
    Assigned to the miniview element when it is collapsed.
*/
.jtk-miniview-collapsed {
    background-color: #449ea6;
    border-radius: 4px;
    height: 22px;
    margin-right: 0;
    padding: 4px;
    width: 21px;
}

/*
    Hide all children of the miniview (except the expand button) when it is collapsed so you don't see anything
    poking through under the + icon.
*/
.jtk-miniview-collapsed .jtk-miniview-element, .jtk-miniview-collapsed .jtk-miniview-panner {
    visibility: hidden;
}

/*
    The '+' symbol when the miniview is collapsed.
*/
.jtk-miniview-collapsed .jtk-miniview-collapse:before {
    content: "+";
}

/*
    Hover state for the collapse/expand icon.
*/
.jtk-miniview-collapse:hover {
    color: #E4F013;
}

/* ------------------------------------------------------------------------------------------- */
/* --- DIALOGS --------------------------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------- */

/*
    This is the element that acts as the dialog underlay - the modal "mask". Note the high z-index default
    set here (and note also the overlay style below has a z-index with a value higher by one).
*/
.jtk-dialog-underlay {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 100000;
    opacity: 0.8;
    background-color: #CCC;
    display: none;
}

/*
    This is the element that acts as the parent for dialog content.
*/

.jtk-dialog-overlay-x {
    max-height:0;
    transition: max-height 0.5s ease-in;
    -moz-transition: max-height 0.5s ease-in;
    -ms-transition: max-height 0.5s ease-in;
    -o-transition: max-height 0.5s ease-in;
    -webkit-transition: max-height 0.5s ease-in;
}

.jtk-dialog-overlay-y {
    max-width:0;
    transition: max-width 0.5s ease-in;
    -moz-transition: max-width 0.5s ease-in;
    -ms-transition: max-width 0.5s ease-in;
    -o-transition: max-width 0.5s ease-in;
    -webkit-transition: max-width 0.5s ease-in;
}

.jtk-dialog-overlay-top {
    top:20px;
}

.jtk-dialog-overlay-bottom {
    bottom:20px;
}

.jtk-dialog-overlay-left {
    left:20px;
}

.jtk-dialog-overlay-right {
    right:20px;
}

.jtk-dialog-overlay-x.jtk-dialog-overlay-visible {
    max-height:1000px;
}

.jtk-dialog-overlay-y.jtk-dialog-overlay-visible {
    max-width:1000px;
}

/*
    The element containing buttons in a dialog.
*/
.jtk-dialog-buttons {
    text-align: right;
    margin-top: 5px;
}

/*
    An individual button in a dialog.
*/
.jtk-dialog-button {
    border: none;
    cursor: pointer;
    margin-right: 5px;
    min-width: 56px;
}

/*
    Hover style for an individual button in a dialog.
*/
.jtk-dialog-button:hover {
    
}

/*
    The titlebar of a dialog.
*/
.jtk-dialog-title {
    text-align: left;
    font-size: 14px;
    margin-bottom: 9px;
}

.jtk-dialog-content {
    font-size:12px;
    text-align:left;
    min-width:250px;
    margin: 0 14px;
}

.jtk-dialog-content ul {
    width:100%;
    padding-left:0;
}

.jtk-dialog-content label {
    cursor: pointer;
    font-weight: inherit;
}

.jtk-dialog-overlay input, .jtk-dialog-overlay textarea {
    background-color: #FFF;
    border: 1px solid #CCC;
    color: #333;
    font-size: 14px;
    font-style: normal;
    outline: none;
    padding: 6px 4px;
    margin-right: 6px;
}

.jtk-dialog-overlay input:focus, .jtk-dialog-overlay textarea:focus {
    
    color: #333;
    font-size: 14px;
    font-style: normal;
    outline: none;
}

/* -------------------------------------------------------------------------------------------- */
/* --- DRAWING TOOLS -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */

/*
    Assigned to the element that is drawn around some other element when a drawing operation is taking place.
*/
.jtk-draw-skeleton {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    outline: 2px solid #84acb3;
    opacity: 0.8;
}

/*
    Assigned to every handle (top left, top right, bottom left, bottom right, center) in a draw skeleton.
*/
.jtk-draw-handle {
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: #84acb3;
}

/*
    Assigned to the top left handle in a draw skeleton
*/
.jtk-draw-handle-tl {
    left: 0;
    top: 0;
    cursor: nw-resize;
}

/*
    Assigned to the top right handle in a draw skeleton
*/
.jtk-draw-handle-tr {
    right: 0;
    top: 0;
    cursor: ne-resize;
}

/*
    Assigned to the bottom left handle in a draw skeleton
*/
.jtk-draw-handle-bl {
    left: 0;
    bottom: 0;
    cursor: sw-resize;
}

/*
    Assigned to the bottom right handle in a draw skeleton
*/
.jtk-draw-handle-br {
    bottom: 0;
    right: 0;
    cursor: se-resize;
}

/*
    Assigned to the center handle in a draw skeleton (the handle by which the element may be dragged). This is
    not visible by defaut; enable if you need it.
*/
.jtk-draw-drag {
    display:none;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -10px;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    background-color: #84acb3;
    cursor: move;
}

/*
    This class is added to the document body on drag resize start and removed at the end of resizing. Its purpose
    is to switch off text selection on all elements while the user is resizing an element.
*/
.jtk-drag-select-defeat * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.jsplumb-bezier-handle {
    width:15px;
    height:15px;
    border-radius:50%;
    background-color:darkcyan;
    cursor:move;
    z-index:10;
}

.jsplumb-bezier-handle-secondary {
    cursor:default;
    background-color:lightgreen;
}

.jsplumb-bezier-handle-secondary-source {
    background-color: lavenderblush;
}

.jsplumb-bezier-guideline {
    position:absolute;
}

.jsplumb-bezier-guideline path {
    stroke:darkcyan;
    stroke-linewidth:3;
}

.jsplumb-connection-edit path {
    stroke-dasharray:2 2;
}
/* ---------------------------------------------------------------------------------------------------- */
/* --- page structure --------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */

body {
    background-color: #FFF;
    color: #434343;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    height: 100%;
    padding: 0;
}

.jtk-demo-main {
    background-color: transparent;
    font-family: Arial,sans-serif;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    clear:both;
    display:block;
    position: relative;
}
.jtk-demo-canvas {
    height:550px;
    max-height:700px;
    border:1px solid #CCC;
    background-color:white;
    position:absolute;
    /*background-image:url('grid.png');*/
    background-repeat:repeat;
    width:95%;
}
.overlay-jsplumb {
    height:550px; 
    max-height:700px;
    display:block;
    clear:both;
    opacity:0.1;
    position:absolute;width:100%;
}
.miniview {
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 100;
}


.jtk-demo-dataset {
    text-align: left;
    max-height: 600px;
    overflow: auto;
}

.demo-title {
    float:left;
    font-size:18px;
}

.controls {
    top: 25px;
    color: #FFF;
    margin-right: 10px;
    position: absolute;
    left: 25px;
    z-index: 1;
}

.controls i {
    background-color: #3E7E9C;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 0;
    padding: 4px;
}

/*li {
    list-style-type: none;
}*/

/* ------------------------ node palette -------------------- */

.sidebar-activity {
    margin:0;
    padding:0;
    clear:both;
    display:block;
    text-align:left;
    height: 550px;
    padding:5px;
    display:inline-block;
}

.sidebar-activity ul li {
    background-color: #234b5e;
    border-radius: 11px;
    color: #f7ebca;
    cursor: move;
    margin-bottom: 5px;
    padding: 5px;
    width:auto;
    display:inline-block;
}

.sidebar-activity ul {
    width:100%;
    padding:0;
}

.sidebar-activity ul li:hover {
    background-color: #577a8b;
}

.sidebar-activity i {
    float:left;
}

@media (max-width: 600px) {
    .sidebar-activity {
        float:none;
        height: 55px;
        width: 100%;
        padding-top:0;
    }

    .sidebar-activity ul li {
        display:inline-block;
        margin-top: 7px;
        width:67px;
    }
    .jtk-demo-canvas {
        margin-left: 0;
        margin-top:10px;
        height:364px;
    }
}

/* ---------------------------------------------------------------------------------------------------- */
/* --- jsPlumb setup ---------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */

.jsplumb-connector {
    z-index:9;
}

.jsplumb-endpoint {
    z-index:12;
    opacity:0.8;
    cursor:pointer;
}

.jsplumb-overlay {
    background-color: white;
    color: #434343;
    font-weight: 400;
    padding: 4px;
    z-index:10;
}
.jsplumb-overlay.jsplumb-hover {
    color: #434343;
}

path {
    cursor:pointer;
}

.delete {
    padding: 2px;
    cursor: pointer;
    float: left;
    font-size: 10px;
    line-height: 20px;
}

.add, .edit {
    cursor: pointer;
    float:right;
    font-size: 10px;
    line-height: 20px;
    margin-right:2px;
    padding: 2px;
}

.edit:hover {
    color: #ff8000;
}

.selected-mode {
    color:#E4F013;
}

.connect {
    width:10px;
    height:10px;
    background-color:#f76258;
    position:absolute;
    bottom: 13px;
    right: 5px;
}

/* header styles */

.demo-links {
    position: fixed;
    right: 0;
    top: 57px;
    font-size: 11px;
    background-color: white;
    opacity: 0.8;
    padding-right: 10px;
    padding-left: 5px;
    text-transform: uppercase;
    z-index:100001;
}

.demo-links div {
    display:inline;
    margin-right:7px;
    margin-left:7px;
}

.demo-links i {
    padding:4px;
}

.navbar-top {
    background-color: #58775d;
    border:none;
    font-size: 14px;
    font-weight: 700;
}

.navbar-nav > li > a {
    border: none;
    color: #FFF;
    padding: 6px 10px;
    text-decoration: none;
}

.social-nav {
    color: #FFF;
    float: right;
    font-size: 22px;
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: transparent;
    color: #cdcc73;
    text-decoration: none;
}





@media (max-width: 600px) {

    .docs-nav:before {
        content: "Contents";
    }

    .docs-nav {
        cursor:pointer;
        margin-bottom: 13px;
        font-size:17px;
        display:inline-block;
        position:relative;
        overflow-x:visible !important;
        overflow-y:visible !important;
    }

    .docs-nav > ul {
        cursor: default;
        position: absolute;
        z-index: 1;
        max-height:250px;
        visibility: hidden;
        transition: visibility 0.5s;
        -moz-transition: visibility 0.5s;
        -o-transition: visibility 0.5s;
        -ms-transition: visibility 0.5s;
        -webkit-transition: visibility 0.5s;
        width: 100%;
        left:0;
        top:41px;
        overflow: auto;
        background-color: inherit;
        box-shadow: 0px 2px 2px #ccc;
    }

    .docs-nav:focus > ul {
        visibility: visible;
    }

    .docs-nav li {
        padding-top:3px;
        padding-bottom:3px;
        margin-top:5px;
        margin-bottom:5px;
        border-bottom: 1px solid #eee;
    }

    .docs-nav li:last-of-type {
        border-bottom:none;
    }

    .markdown-body {
        width:100%;
    }

    .jtk-demo-dataset {
        margin-left:0 !important;
        height:175px !important;
    }
}

.docs-nav:focus {
    outline:none;
}


img {
    border: 0;
}

.markdown-body a[id].wiki-toc-anchor  {
    color: inherit;
    text-decoration: none;
}

.markdown-body>*:first-child {
    margin-top: 0!important;
}
.markdown-body>*:last-child {
    margin-bottom: 0!important;
}
.markdown-body a.absent {
    color: #c00;
}
.markdown-body a.anchor {
    display: block;
    padding-left: 30px;
    margin-left: -30px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    margin: 20px 0 10px;
    padding: 0;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    cursor: text;
    position: relative;
}
.markdown-body h1:hover a.anchor,
.markdown-body h2:hover a.anchor,
.markdown-body h3:hover a.anchor,
.markdown-body h4:hover a.anchor,
.markdown-body h5:hover a.anchor,
.markdown-body h6:hover a.anchor {
    background: url(../images/pin-20.png) no-repeat left center;
    text-decoration: none;
}
.markdown-body h1 tt,
.markdown-body h1 code,
.markdown-body h2 tt,
.markdown-body h2 code,
.markdown-body h3 tt,
.markdown-body h3 code,
.markdown-body h4 tt,
.markdown-body h4 code,
.markdown-body h5 tt,
.markdown-body h5 code,
.markdown-body h6 tt,
.markdown-body h6 code {
    font-size: inherit;
}
.markdown-body h1 {
    font-size: 28px;
    color: #000;
    margin-top: 50px;
    margin-bottom: 20px;
}
.markdown-body h2 {
    font-size: 24px;
    border-bottom: 1px dotted #ccc;
    color: #000;
    margin-top: 40px;
    margin-bottom: 20px;
}
.markdown-body h3 {
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 15px;
}
.markdown-body h4 {
    font-size: 16px;
}
.markdown-body h5 {
    font-size: 14px;
}
.markdown-body h6 {
    color: #777;
    font-size: 14px;
}
.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body li,
.markdown-body table,
.markdown-body pre {
    margin: 10px 0;
}
.markdown-body hr {
    border: 0 none;
    color: #ccc;
    height: 1px;
    padding: 0;
    background-color: #ccc;
}
.markdown-body>h1:first-child,
.markdown-body>h2:first-child,
.markdown-body>h3:first-child,
.markdown-body>h4:first-child,
.markdown-body>h5:first-child,
.markdown-body>h6:first-child {
}
.markdown-body h1+h2{
    margin-top: 30px;
}
.markdown-body h2+h3{
    margin-top: 10px;
}
.markdown-body a:first-child h1,
.markdown-body a:first-child h2,
.markdown-body a:first-child h3,
.markdown-body a:first-child h4,
.markdown-body a:first-child h5,
.markdown-body a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
}
.markdown-body h1+p,
.markdown-body h2+p,
.markdown-body h3+p,
.markdown-body h4+p,
.markdown-body h5+p,
.markdown-body h6+p {
    margin-top: 0;
}
.markdown-body li p.first {
    display: inline-block;
}
.markdown-body ul,
.markdown-body ol {
    padding-left: 30px;
}
.markdown-body ul li>:first-child,
.markdown-body ol li>:first-child {
    margin-top: 0;
}
.markdown-body ul li>:last-child,
.markdown-body ol li>:last-child {
    margin-bottom: 0;
}
.markdown-body dl {
    padding: 0;
}
.markdown-body dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px;
}
.markdown-body dl dt:first-child {
    padding: 0;
}
.markdown-body dl dt>:first-child {
    margin-top: 0;
}
.markdown-body dl dt>:last-child {
    margin-bottom: 0;
}
.markdown-body dl dd {
    margin: 0 0 15px;
    padding: 0 15px;
}
.markdown-body dl dd>:first-child {
    margin-top: 0;
}
.markdown-body dl dd>:last-child {
    margin-bottom: 0;
}
.markdown-body blockquote {
    border-left: 4px solid #DDD;
    padding: 0 15px;
    color: #777;
}
.markdown-body blockquote>:first-child {
    margin-top: 0;
}
.markdown-body blockquote>:last-child {
    margin-bottom: 0;
}
.markdown-body table {
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
}
.markdown-body table tr {
    border-top: 1px solid #ccc;
    background-color: #fff;
    margin: 0;
    padding: 0;
}
.markdown-body table tr:nth-child(2n) {
    background-color: #f8f8f8;
}
.markdown-body table tr th {
    font-weight: bold;
}
.markdown-body table tr th,
.markdown-body table tr td {
    border: 1px solid #ccc;
    text-align: left;
    margin: 0;
    padding: 6px 13px;
}
.markdown-body table tr th>:first-child,
.markdown-body table tr td>:first-child {
    margin-top: 0;
}
.markdown-body table tr th>:last-child,
.markdown-body table tr td>:last-child {
    margin-bottom: 0;
}
.markdown-body img {
    max-width: 100%;
}
.markdown-body span.frame {
    display: block;
    overflow: hidden;
}
.markdown-body span.frame>span {
    border: 1px solid #ddd;
    display: block;
    float: left;
    overflow: hidden;
    margin: 13px 0 0;
    padding: 7px;
    width: auto;
}
.markdown-body span.frame span img {
    display: block;
    float: left;
}
.markdown-body span.frame span span {
    clear: both;
    color: #333;
    display: block;
    padding: 5px 0 0;
}
.markdown-body span.align-center {
    display: block;
    overflow: hidden;
    clear: both;
}
.markdown-body span.align-center>span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: center;
}
.markdown-body span.align-center span img {
    margin: 0 auto;
    text-align: center;
}
.markdown-body span.align-right {
    display: block;
    overflow: hidden;
    clear: both;
}
.markdown-body span.align-right>span {
    display: block;
    overflow: hidden;
    margin: 13px 0 0;
    text-align: right;
}
.markdown-body span.align-right span img {
    margin: 0;
    text-align: right;
}
.markdown-body span.float-left {
    display: block;
    margin-right: 13px;
    overflow: hidden;
    float: left;
}
.markdown-body span.float-left span {
    margin: 13px 0 0;
}
.markdown-body span.float-right {
    display: block;
    margin-left: 13px;
    overflow: hidden;
    float: right;
}
.markdown-body span.float-right>span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: right;
}
.markdown-body code,
.markdown-body tt {
    margin: 0 2px;
    padding: 0 5px;
    white-space: nowrap;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    border-radius: 3px;
}
.markdown-body pre>tt,
.markdown-body pre>code {
    margin: 0;
    padding: 0;
    white-space: pre;
    border: none;
    background: transparent;
}
.markdown-body pre {
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    font-size: 11.5px;
    line-height: 18px;
    overflow: auto;
    padding: 6px 10px;
    border-radius: 3px;
}
.markdown-body pre pre,
.markdown-body pre code,
.markdown-body pre tt {
    background-color: transparent;
    border: none;
}
.markdown-body pre pre {
    margin: 0;
    padding: 0;
}
.toc {
    background-color: #F7F7F7;
    border: 1px solid #ddd;
    padding: 5px 10px;
    margin: 0;
    border-radius: 3px;
}
.toc-title {
    color: #888;
    font-size: 14px;
    line-height: 1.6;
    padding: 2px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 3px;
}
.toc ul {
    padding-left: 10px;
    margin: 0;
}
.toc>ul {
    margin-left: 10px;
    font-size: 17px;
}
.toc ul ul {
    font-size: 15px;
}
.toc ul ul ul {
    font-size: 14px;
}
.toc ul li{
    margin: 0;
}
#header-content .toc,
#footer-content .toc,
#sidebar-content .toc {
    border: none;
}
.highlight {
    background: #fff;
}
.highlight .c {
    color: #998;
    font-style: italic;
}
.highlight .err {
    color: #a61717;
    background-color: #e3d2d2;
}
.highlight .k {
    font-weight: bold;
}
.highlight .o {
    font-weight: bold;
}
.highlight .cm {
    color: #998;
    font-style: italic;
}
.highlight .cp {
    color: #999;
    font-weight: bold;
}
.highlight .c1 {
    color: #998;
    font-style: italic;
}
.highlight .cs {
    color: #999;
    font-weight: bold;
    font-style: italic;
}
.highlight .gd {
    color: #000;
    background-color: #fdd;
}
.highlight .gd .x {
    color: #000;
    background-color: #faa;
}
.highlight .ge {
    font-style: italic;
}
.highlight .gr {
    color: #a00;
}
.highlight .gh {
    color: #999;
}
.highlight .gi {
    color: #000;
    background-color: #dfd;
}
.highlight .gi .x {
    color: #000;
    background-color: #afa;
}
.highlight .go {
    color: #888;
}
.highlight .gp {
    color: #555;
}
.highlight .gs {
    font-weight: bold;
}
.highlight .gu {
    color: #800080;
    font-weight: bold;
}
.highlight .gt {
    color: #a00;
}
.highlight .kc {
    font-weight: bold;
}
.highlight .kd {
    font-weight: bold;
}
.highlight .kn {
    font-weight: bold;
}
.highlight .kp {
    font-weight: bold;
}
.highlight .kr {
    font-weight: bold;
}
.highlight .kt {
    color: #458;
    font-weight: bold;
}
.highlight .m {
    color: #099;
}
.highlight .s {
    color: #d14;
}
.highlight .na {
    color: #008080;
}
.highlight .nb {
    color: #0086B3;
}
.highlight .nc {
    color: #458;
    font-weight: bold;
}
.highlight .no {
    color: #008080;
}
.highlight .ni {
    color: #800080;
}
.highlight .ne {
    color: #900;
    font-weight: bold;
}
.highlight .nf {
    color: #900;
    font-weight: bold;
}
.highlight .nn {
    color: #555;
}
.highlight .nt {
    color: #000080;
}
.highlight .nv {
    color: #008080;
}
.highlight .ow {
    font-weight: bold;
}
.highlight .w {
    color: #bbb;
}
.highlight .mf {
    color: #099;
}
.highlight .mh {
    color: #099;
}
.highlight .mi {
    color: #099;
}
.highlight .mo {
    color: #099;
}
.highlight .sb {
    color: #d14;
}
.highlight .sc {
    color: #d14;
}
.highlight .sd {
    color: #d14;
}
.highlight .s2 {
    color: #d14;
}
.highlight .se {
    color: #d14;
}
.highlight .sh {
    color: #d14;
}
.highlight .si {
    color: #d14;
}
.highlight .sx {
    color: #d14;
}
.highlight .sr {
    color: #009926;
}
.highlight .s1 {
    color: #d14;
}
.highlight .ss {
    color: #990073;
}
.highlight .bp {
    color: #999;
}
.highlight .vc {
    color: #008080;
}
.highlight .vg {
    color: #008080;
}
.highlight .vi {
    color: #008080;
}
.highlight .il {
    color: #099;
}
.highlight .gc {
    color: #999;
    background-color: #EAF2F5;
}
.type-csharp .highlight .k {
    color: #00F;
}
.type-csharp .highlight .kt {
    color: #00F;
}
.type-csharp .highlight .nf {
    color: #000;
    font-weight: normal;
}
.type-csharp .highlight .nc {
    color: #2B91AF;
}
.type-csharp .highlight .nn {
    color: #000;
}
.type-csharp .highlight .s {
    color: #A31515;
}
.type-csharp .highlight .sc {
    color: #A31515;
}

/* apidoc overrides */
.yui3-tabview-list/*, #api-tabview */.tabs {
    display:none;
}

.yui3-tab-label {
    background: none !important;
}

.yui3-tab-selected {
    background-color:#58775d !important;
    border-color: #58775d;
    color:white;
}

.yui3-tab-selected a, .yui3-tab-selected a:visited {
    color:white !important;
}

.yui3-tabview {
    font-size:13px;
    margin-top: 36px;
    margin-bottom: 50px;
}

.api-class-tabs.yui3-tabview-list {
    background-color:#f4f5ef !important;
    border:solid #58775d !important;
    border-width:0 0 5px !important;
}

.api-class-tab {
    font-size:15px;
}

#api-filter {
    border: 1px solid #CCC;
    margin-bottom: 5px;
}

kbd {
    padding: 2px 4px;
    font-size: 90%;
    color: #fff;
    background-color: #aaa;
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#docs-main h1 {
    font-size:24px;
}

#docs-main h2 {
    font-size:17px;
}

#docs-main h3 {
    font-size:15px;
}

#docs-main h6 {
    font-size: 14px;
    font-weight: bold;
}

#docs-main .params {
    margin-top:30px;
}

#docs-main code {
    color:inherit;
}

#docs-main a {
    color: #629f8d;
}

#docs-main .args {
    display:none;
}

#index h2 {
    font-size:18px;
}

@media (max-width: 600px) {
    .yui3-u-1-4, .yui3-u-3-4  {
        width:100%;
    }

    .yui3-u-1-4 {
        max-height:150px;
        overflow:auto;
    }

    .yui3-u-1-4:focus {
        max-height:180px;
    }
}