/* The section is for styling all media types */
@media all {
    /* Styling for common tags */
    body {
        color: #505050;
        font: normal 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
        margin: 0pt;
    }

    h1 /*, h2, h3 */{
        color: #4169E1;
        background-image: url('Images/TitleBackground.png');
        background-position: bottom;
        background-repeat: repeat-x;
        font: normal 14pt "Segoe UI", "Calibri", "Verdana", "Arial";
        margin: 0pt;
        padding: 8pt;
    }
    h2 /*, h2, h3 */ {
        color: #4169E1;
        font: normal 12pt "Segoe UI", "Calibri", "Verdana", "Arial";
        margin: 0pt;
        padding: 0pt;
    }
    /* Used to divide the steps into sections */
    h5 {
        color: #1E90FF;
        font: normal 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
        margin: 0pt;
        padding-bottom: 4pt;
    }

    /* This overrides Google Chrome's default height for this tag */
    object {
        height: 0pt;
        width: 0pt;
    }

    /* For anchors (links) */
    a:focus {
        outline: none; /* Removes the dotted box around the link that has focus */
    }

    a:active {
        color: #0080ff;
        text-decoration: none;
    }

    a:hover {
        color: #0080ff;
        text-decoration: underline;
    }

    a:link {
        color: #0080ff;
        text-decoration: none;
    }

    a:visited {
        color: #0080ff;
        text-decoration: none;
    }

    /*Used to align images at the top*/
    img.top {
        vertical-align: top;
    }
    /*Used to align images at the middle*/
    img.middle {
        vertical-align: middle;
    }
    /*Used to align images at the bottom*/
    img.bottom {
        vertical-align: bottom
    }

    /* Styles for lists used in the tutorials */
    .bulletlist {
        margin: 0pt 0pt 8pt 0pt; /* top right bottom left */
        padding-left: 12pt;
        list-style-type: disc;
    }

    /* Styles for tip table */
    .tip {
        margin-bottom: 8pt;
        border-collapse: collapse;
    }

    .tip td {
        padding: 0px !important;
    }

    .tipimage {
        width: 25px;
        background-image: url('Images/Info16.svg');
        background-repeat: no-repeat;
        vertical-align: middle;
    }

        /* Used for numbered lists (steps) */
        .steplist {
    margin: 0pt;
    padding-left: 12pt;
    list-style-type: decimal;
}

    .steplist li {
        padding-bottom: 5pt;
    }

    /* TODO:  naming should be "steplistbullet" */
    .stepbulletlist { /*used for bullet lists inside steps that need to be numbered and also no padding at bottom like the bullet list has.*/
        margin: 0pt 0pt 0pt 0pt; /* top right bottom left */
        padding: 4pt 0pt 0pt 12pt;
        list-style-type: lower-roman;
        list-style-position: outside;
    }

    .left {
        text-align: left;
    }

    .cntr {
        text-align: center;
        white-space: nowrap
    }

    .spacer8pt p {
        height: 8pt;
    }

    .topofpage {
        font: normal 8pt "Segoe UI", "Calibri", "Verdana", "Arial";
        margin: 8pt;
        padding-bottom: 8pt;
    }

    .bottom {
        vertical-align: bottom;
    }

    /* Neo query language coding and syntax highlighting */
    .nql {
        font: normal 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
        white-space: nowrap;
        color: black;
    }

    .comment {
        color: green;
    }

    .string {
        color: #8B0000;
    }

    .command {
        color: #8b008b;
    }

    .keyword {
        color: blue;
    }

    .operator {
        color: #696969;
    }

    /* These styles are for the contents pages TODO: do we really need all these?*/
    .contentsintro {
        border-collapse: collapse;
        font: normal 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
        margin: 12pt;
        table-layout: fixed;
    }

    .contentsintro td {
        padding-top: 8pt;
        vertical-align: top;
    }

    .contentsintro p {
        margin: 0pt 0pt 8pt 0pt;
    }

    .contents {
        display: inline-block;
        list-style-type: none;
        margin: 8pt 8pt 8pt 20pt; /* top right bottom left */
        padding: 0pt;
    }

    .contents li {
        background-image: url('Images/YellowBullet.png');
        background-position: 0pt 6pt;
        background-repeat: no-repeat;
        display: inline-block;
        float: left;
        padding: 0pt 8pt 4pt 10pt;
        vertical-align: middle;
        width: 210pt;
    }

    .downloadcolour {
        color: #1E90FF
    }
    /* End of contents page styles */

    /* These are the styles for the Information Map table */
    .infomap {
        border-collapse: collapse;
        font: normal 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
        margin: 8pt;
        table-layout: fixed;
    }

    .infomap td {
        padding-top: 8pt;
        vertical-align: top;
    }

    .infomap p {
        margin: 0pt 0pt 8pt 0pt; /* top right bottom left */
    }

    .infolabel {
        color: #707070;
        font: bold 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
        padding: 8pt 8pt 0pt 0pt; /* top right bottom left */
        vertical-align: top;
        width: 82pt;
    }

    .infoblock {
        border-bottom: 1pt solid #FFA500;
        border-top: 1pt solid #FFA500;
    }
    /* End of Information Map table styles */

    /* Styles for the "Access" information block TODO : are these used? */
    .access {
        border-collapse: collapse;
        font: normal 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
        text-align: left;
        padding: 0pt;
        margin-bottom: 8pt;
    }

    .access td {
        padding: 0pt;
    }

    .access img {
        margin-top: 2pt;
        margin-right: 6pt;
    }
    /* End of styles for the "Access" information block */

    /* Styles for controls tables TODO: are these used in tutorials? */
    .ctrls {
        border-collapse: collapse;
        font: normal 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
        text-align: left;
        margin-bottom: 8pt;
    }

    .ctrls th {
        background-color: #dddddd;
        border: 1pt solid #000000;
        padding: 2pt 4pt; /* top&botton left&right */
        vertical-align: top;
    }

    .ctrls td {
        border: 1pt solid #000000;
        padding: 2pt 4pt;
    }

    /* Table for placing text alongside image TODO: Let's review these. */
    .textbyimage {
        border-collapse: collapse;
        font: normal 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
        margin: 0pt;
        table-layout: auto;
    }

    .textbyimage td {
        padding: 0pt 16pt 2pt 0pt;
        vertical-align: top;
    }

    /* Used to put image by text in download section TODO: we already have a tag related style for this above */
    .imagebytext {
        border-collapse: collapse;
        font: normal 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
        margin: 0pt;
        table-layout: fixed;
    }

    .imagebytxt td {
        padding: 0pt 6pt 0pt 0pt;
        vertical-align: middle;
    }

    /* Style for table for within tutorial steps TODO: why aren't these used instead of .steplist? */
    .steps {
        border-collapse: collapse;
        font: normal 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
        text-align: left;
        margin-bottom: 8pt;
        margin-top: 8pt;
    }

    .steps th {
        background-color: #f3f3f3;
        border: 1pt solid #dddddd;
        padding: 2pt 4pt; /* top&botton left&right */
        vertical-align: top;
        color: #696969
    }

    .steps td {
        border: 1pt solid #dddddd;
        padding: 2pt 5pt;
    }

    .steps ul {
        list-style-type: disc;
        margin: 10pt;
        padding: 0pt;
    }

    /* Used or related topic lists */
    ul.relatedtopic {
        list-style-type: none;
        margin: 0pt;
        padding: 0pt;
    }

    ul.relatedtopic li {
        background-image: url('Images/YellowBullet.png');
        background-position: 0pt 6pt;
        background-repeat: no-repeat;
        margin: 0pt;
        padding-left: 10pt;
        vertical-align: middle;
    }

    ul.learn {
        list-style-type: square;
        color: #505050;
        font: normal 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
        margin: 0pt;
        padding-left: 25pt;
        padding-bottom: 8pt;
    }

    ul.steps {
        font: normal 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
        margin: 0pt;
        padding-left: 0pt;
        padding-bottom: 0pt;
    }

        ul.steps li {
            margin: 0pt;
            vertical-align: top;
            padding: 0pt;
            padding-left: 0pt;
            padding-bottom: 0pt;
        }

    /* Used in tables when the bullets from the standard bullet list are too prominent and the spacing between the bullets is too large.*/
        ul.bulletsublist {
        list-style-type: none;
        margin: 0pt;
        padding-top: 3pt;
    }

        ul.bulletsublist li {
            background-image: url('Images/GreySquareBullet.png');
            background-position: 0pt 6pt;
            background-repeat: no-repeat;
            margin-top: 0pt;
            margin-left: 1pt;
            padding-left: 10pt;
            vertical-align: middle;
        }
}

/* This section is for changing styles from those above when printing */
@media print {
    body {
        color:#000000;
    }

    h1 /*, h2, h3 */{
        background-image: none;
        background-repeat: no-repeat;
        color: #000000;
        font: bold 14pt "Segoe UI", "Calibri", "Verdana", "Arial";
        padding-left: 0pt;
    }
/*
    h4 {
        margin:0pt;
    }
*/
    h5 {
        color: #000000;
        font: bold 10pt "Segoe UI", "Calibri", "Verdana", "Arial";
    }

/*
    ul.learnabout {
        color: #1E90FF;
    }
*/
    /* These styles are for the contents pages */
    .contents {
        margin:8pt 0pt; /* top&bottom left&right */
        padding-left:12pt;
        list-style-type:disc;
    }

    .contents li {
        float:none;
        padding:0pt;
    }
    /* End of contents page styles*/

    /* These are the styles for the Information Map table */
    .infomap {
        margin:0pt;
    }

    .infomap td {
        padding-bottom:8pt;
    }

    .infolabel {
        color:#000000;
        width:85pt;
    }

    .infoblock {
        border-color:#000000;
    }

/*    ul.relatedtopic {
        list-style-type: disc;
        color: #FFA500;
        padding-left: 12pt;
    }
*/
    ul.relatedtopic li {
        padding-left:0pt;
    }
    /* End of Information Map styles */

    a:link {
        color:#000000;
    }

    a:visited {
        color:#000000;
    }

    a:hover {
        color:#000000;
        text-decoration:none;
    }

    a:active {
        color:#000000;
    }

    .topofpage {
        display:none;
    }
}