/* Auto-numbering for DITA-style "tasksteps".  We also add the word
 * "Step" to each step and format it like we do on cisco.com with the
 * steps in a left column, and the step details, results, etc. in the
 * right column.
 */
.taskbody {
    counter-reset: my-task-steps;
    clear: both;
}
.taskstep {
    counter-increment: my-task-steps;
    margin-top: 1ex;
}
/* Place the step # to the left of the first paragraph.  I had to use
 * table-cell display to prevent the first paragraph text from flowing
 * around the floated "Step" label.
 */
.taskstep > p:first-child {
    display: table-row;
}
.taskstep > p:first-child::before {
    content: "Step " counter(my-task-steps) " ";
    font-weight: bold;
    display: table-cell;
    min-width: 6em;
}
.taskstep > p::content {
    display: table-cell;
}
/* The first paragraph in a .taskstep div is handled above.
 * With subsequent paragraphs, keep the left "column" clear.
 */
.taskstep > p:not(:first-child) {
    margin-left: 6em;
}
/* Other specialized containers within the .taskstep all produce a div element.
 * This rule is a general way to keep the left "columnn" clear for the whole
 * body of the step.  We cannot do this at a higher level since the initial
 * taskstep paragraph and "Step" label require special handling.
 */
.taskstep > div {
    margin-left: 6em;
}
/**
 * Same as the .taskstep > dev rule but for lists since they aren't contained in a div.
 */
 .taskstep > ul {
    margin-left: 6em;
}
.taskstep > ol {
    margin-left: 6em;
}
/* Ensure that our taskstep margin also works within the PubHub site since
 * they have more specific selectors in their CSS.
 */
#pubhub-container section.doc-content div.taskstep > p:not(:first-child) {
    margin-left: 6em;
}
#pubhub-container section.doc-content div.taskstep > div {
    margin-left: 6em;
}
#pubhub-container section.doc-content div.taskstep > ul {
    margin-left: 6em;
}
#pubhub-container section.doc-content div.taskstep > ol {
    margin-left: 6em;
}
/* Auto-add a "Result" label. */
.taskstep > .stepresult::before {
    content: "Result:";
    text-decoration: underline;
    padding-right: 1ex;
    float: left;
}
/* Auto-add an "Example" label. */
.taskstep > .stepxmp::before {
    content: "Example:";
    text-decoration: underline;
    padding-right: 1ex;
    float: left;
}
/* Trying to get rid of the fixed width body from the Sphinx default theme. */
div.document {
    width: unset;
}
/* Prevent PubHub from adding extra padding around .container divs generated by our .rst files. */
div.docutils.container {
    padding-left: 0;
    padding-right: 0;
}
/* The Sphinx theme is more compact than the PubHub site.  Disable the
 * line-height from the theme since it interferees with the PubHub CSS.
 */
div.body p {
    line-height: unset;
}
/* Since we're overriding the default Sphinx font family, the guilabel
 * class needs something other than font family to distinguish it.
 */
.guilabel, .menuselection {
    font-weight: bold;
}
/* Until I can get the one of our closer wrapper div elements to have an id of
 * #pubhub-widgets, just override the #pubhub-container styles with the values
 * from the #pubhub-widgets styles in pubhub.css.
 *
 */
#pubhub-container h1 {
    font-size:2.5rem;
    color:#049fd9;
    font-weight:200;
    margin:20px 0;
}
#pubhub-container h2 {
    font-size:2rem;
    font-weight:200;
    margin:45px 0 20px;
}
#pubhub-container h3 {
    font-size:1.75rem;
    margin:30px 0 10px;
    font-weight:300;
}
#pubhub-container h4 {
    font-size:1.5rem;
    font-weight:300;
}
#pubhub-container h5 {
   font-size:1.25rem;
   font-weight:400;
}
#pubhub-container h6 {
    font-size:1rem;
    font-weight:400;
    line-height:2em;
}