@import url("activestyle/reset.css");
@import url("activestyle/base.css");


/* ---- base styles ---- */

h2 {
    border-top: 5px solid #ccc;
    margin: 2em 0 0.5em;
    padding-top: 0.4em;
}
h2.first {
    border-top: none;
}
h3 {
    color: #333333;  /* the red from AS styleguide is weird */
    border-top: 2px solid #ccc;
    margin: 1.5em 0 0.5em;
    padding-top: 0.4em;
}

code,
pre {
    /* Avoiding "Courier New" here because its line-height changes with
     * different char styling which can cause alignment problems (e.g. with
     * the recipe code blocks on ActiveState Code Recipes). */
    font-family: Consolas, Monaco, "Lucida Console", "Courier New", monospace;
    font-size: 9pt;
    background-color: #f1f1f1;
    border: 1px solid #dedede;
    color: #444444;
}
code {
    padding: 0 0.2em;
}
pre {
    margin: 1em 0;
    padding: .75em;
    overflow: auto;
}
pre code  {
    border: medium none;
    padding: 0;
}
a code {
    text-decoration: underline;
}


/* ---- special classes for the Komodo docs ---- */

/* box for feature showcases and tutorials */
div.right-float-box {
    float: right;
    width: 25%;
    background-color: #EEEEEE;
    border:1px solid #CCCCCC;
    padding: 0 1em;
    margin: 0 0 1em 1em;
}

span.cursor {
    font-size: 120%;
    color: black;
    font-weight: bold;
}

.version_alert {
    font-size: small;
    margin-left: 2em;
    color: #777;
}

.startupBox {
    background-color: #EEEEEE;
    border-top: 3px double #BBBBBB;
    border-right: 3px double #BBBBBB;
    border-bottom: 3px double #BBBBBB;
    border-left: 3px double #BBBBBB;
    padding: 5px;
}

.icon-list {
    list-style-type: none;
}
.icon-list li {
    padding-left: 25px;
    padding-bottom: 8px;
    list-style-image: none;
}


/* ---- Styling for app-specific sections ----
 *
 * Customarily, sections of the Komodo docs that are specific to a
 * particular app/flavour are maked with:
 *      class="app-NAME"
 * For example:
 *      <div class="app-ide">
 *          ...
 *      </div>
 * or:
 *      <li class="app-edit">
 *          ...
 *      </li>
 *
 * TODO: add subtle background text (via bg img perhaps?) that says
 *       when specific to an app
 */
div.app-edit {
    /*border: 2px solid #ddd;*/
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/app-edit.png) no-repeat right top;
}

div.app-ide {
    /*border: 2px solid #ddd;*/
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/app-ide.png) no-repeat right top;
}

div.app-ide-edit {
    /*border: 2px solid #ddd;*/
    padding: 2px 0px;
    margin: 2px 0px;
    background: url(../img/app-ide-edit.png) no-repeat right top;
}


/* ---- layout and branding ---- */

#content {
    padding: 15px;
    background: url("../img/bodybg.gif") repeat-x top;
}

.top#content {
    background: url("../img/ribbons.png") top right no-repeat;
}
.top #title {
    height: 100px;
}

/* ---- resets for styling on docs.activestate.com ----
 * Based on the assumption that page content is in a
 *    <div id="as_docs_content">...</div>
 */