/* Colour reference LEGACY:
	LSEG Warm Black: #16202c (lighter shades - ~80%: #454D56, ~60%: #737980, ~40%: #A2A6AB, ~20%: #D0D2D5)
	LSEG Gold: #806734 (lighter shades - ~80%: #8D7648, ~60%: #A69571, ~40%: #B3A485, ~20%: #D9D1C2)
	Info Services Grey: #807372 (lighter shades - ~80%: #8D8180, ~60%: #A69D9C, ~40%: #B3ABAA, ~20%: #D9D5D5)
*/

/* Colour Reference REBRAND
    LSEG Blue: #001EFF (lighter shades - #314CFF, #6578FF, #9CA5FF, #CBD1FF)
    LSEG Grey: #8C8C8C, #B2B2B2
*/

@font-face {
    font-family: 'fs_lola_webregular';
    src: url('fonts/fs_lola_web-regularWEB.eot');
    src: url('fonts/fs_lola_web-regularWEB.eot?#iefix') format('embedded-opentype'),
    /* RNS-369 url('fonts/fs_lola_web-regularWEB.woff') format('woff'),*/
    url('fonts/fs_lola_web-regularWEB.ttf') format('truetype'), url('fonts/fs_lola_web-regularWEB.svg#fs_lola_webregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fs_lola_web_boldregular';
    src: url('fonts/fs_lola_web-boldWEB.eot');
    src: url('fonts/fs_lola_web-boldWEB.eot?#iefix') format('embedded-opentype'),
    /*RNS-369 url('fonts/fs_lola_web-boldWEB.woff') format('woff'),*/
    url('fonts/fs_lola_web-boldWEB.ttf') format('truetype'), url('fonts/fs_lola_web-boldWEB.svg#fs_lola_web_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fs_lola_web_mediumregular';
    src: url('fonts/fs_lola_web-mediumWEB.eot');
    src: url('fonts/fs_lola_web-mediumWEB.eot?#iefix') format('embedded-opentype'),
    /* RNS-369 url('fonts/fs_lola_web-mediumWEB.woff') format('woff'),*/
    url('fonts/fs_lola_web-mediumWEB.ttf') format('truetype'), url('fonts/fs_lola_web-mediumWEB.svg#fs_lola_web_mediumregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    border: none;
    color: #000000;
    font-family: Arial, Helvetica, Sans-Serif;
    background: #f4f4f4 url(../images/IB_LSEG_Pathway_02_Master_Output.jpg) no-repeat fixed bottom;
}

.popOverTarget {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    /* Over everything! */
    z-index: 1000;
}

.transparentBack30 {
    background-color: rgba(0,0,0,0.3); /* Proper browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000); /* IE8 */
}

.transparentBack50 {
    background-color: rgba(0,0,0,0.5); /* Proper browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); /* IE8 */
}

.transparentBack70 {
    background-color: rgba(0,0,0,0.7); /* Proper browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000,endColorstr=#b2000000); /* IE8 */
}

.transparentBackWhite80 {
    background-color: rgba(255,255,255,0.8); /* Proper browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff); /* IE8 */
}

    .transparentBack30:nth-child(n), .transparentBack50:nth-child(n), .transparentBack70:nth-child(n), .transparentBackWhite80:nth-child(n) {
        /* Undo ms-filter for IE9+ */
        filter: none;
    }

#miscPopOverTarget {
    /* Misc pop-over needs to be over standard pop-ups. */
    z-index: 1001;
}

#loginPopOverTarget {
    /* Login pop-over needs to be over all other pop-ups. */
    z-index: 1002;
}

#errPopOverTarget {
    /* Error pop-over needs to be over all other pop-ups. */
    z-index: 1003;
}

#page {
    /* max-width: 1600px; */
    max-width: 1255px;
    min-width: 900px;
    margin: 0em auto;
}

.backgroundTarget {
    background-color: white;
}

.loadingTarget {
    position: relative;
}

.loadingMsg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
}

    .loadingMsg .msg {
        width: 70%;
        max-width: 1000px;
        margin: 10% auto 0 auto;
        z-index: 1001;
    }

#mobileClue {
    display: none;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
}

#head {
    position: relative;
    min-height: 56px;
    z-index: 50;
    background-color: #f4f4f4;
}

#pagecontent {
    padding: 8px;
    font-size: 0.95em;
    min-height: 500px;
}

    #pagecontent:after {
        content: "";
        clear: both;
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
    }

#needJs {
    display: none;
}

.no-js #needJs {
    display: block;
    font-weight: bold;
    font-size: 1.3em;
    text-align: center;
}

#footer {
    text-align: center;
    font-family: "fs_lola_webregular", Arial;
    font-size: 0.8em;
    color: white;
    padding: 4px 0;
    background-color: #001eff;
}

#head #logo {
    /*height: 56px;
	width: 240px;*/
    float: left;
}

#head #ident {
    float: right;
    text-align: right;
    color: #001eff;
    margin: 28px 15px 0 5px;
}

    #head #ident h1 {
        margin: 0 0 3px 0;
        padding: 0;
        line-height: 0.5;
    }

    #head #ident ul.staticlinks li {
        font-size: 0.8em;
        font-family: "fs_lola_webregular", Arial;
        font-weight: normal;
        display: inline;
    }

        #head #ident ul.staticlinks li:after {
            content: " | ";
            display: inline;
        }

        #head #ident ul.staticlinks li:last-child:after {
            /* Won't work in IE8, but no huge impact. */
            display: none;
        }

        #head #ident ul.staticlinks li a, #head #ident ul.staticlinks li a:active, #head #ident ul.staticlinks li a:visited {
            color: #001eff;
            text-decoration: none;
        }

            #head #ident ul.staticlinks li a:hover {
                text-decoration: underline;
            }

#head .envBannerCont span {
    font-weight: bold;
}

#head ul {
    list-style-type: none;
    margin: 0px;
    padding: 0;
    position: relative;
}

    #head ul:after {
        content: "";
        clear: both;
        display: block;
        margin: 0;
        padding: 0;
    }

    #head ul.pagetabs {
        margin-left: 0px;
        clear: both;
    }

        #head ul.pagetabs li {
            float: left;
            margin-left: 5px;
        }

            #head ul.pagetabs li a:link, #head ul.pagetabs li a:visited {
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
                outline: none;
                display: block;
                font-family: "fs_lola_webregular", Arial;
                font-size: 1.1em;
                text-align: center;
                padding: 0.2em 0.6em;
                text-decoration: none;
                color: white;
                background-color: #6578FF;
            }

            #head ul.pagetabs li a.current:link, #head ul.pagetabs li a.current:visited {
                outline: none;
                background-color: white;
                color: Black;
            }

            #head ul.pagetabs li > a:hover, #head ul.pagetabs li > a:active {
                background-color: #001EFF;
                outline: none;
            }

#footer a {
    color: white;
    text-decoration: underline;
    font-weight: normal;
}

    #footer a:hover {
        color: #ccc;
    }

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
}

h1, h2, h3 {
    font-family: "fs_lola_web_boldregular", Arial;
}

h4, h5, h6 {
    font-family: "fs_lola_web_mediumregular", Arial;
}

h1 {
}

h2 {
}

h3 {
}

h4 {
    font-size: 1.0em;
    text-decoration: underline;
}

h5 {
    font-size: 1.0em;
}

th {
    text-align: left;
    vertical-align: top;
}

a, a:visited, a:active {
    color: #16202c;
    text-decoration: underline;
}

    a:hover {
        color: #737980;
    }

.helpLinkBox {
    font-size: 0.8em;
    margin: 0 0 0.4em 0;
    padding: 0;
    text-align: center;
}

    .helpLinkBox.top {
        margin-bottom: 0.25em;
    }

    .helpLinkBox.bottom {
        margin-top: 0.25em;
    }
/* *** Styles for particular pages *** */
.loginbox {
    margin: 6px 204px 0 8px;
    position: relative;
    font-family: 'fs_lola_webregular', Arial, Sans-Serif;
}

    .loginbox h2 {
        margin-bottom: 0;
    }

    .loginbox table {
    }

    .loginbox th {
        text-align: left;
    }

.loginNiceBox {
    width: 25em;
    border: 1px solid #6578FF;
    border-top-width: 25px;
    padding: 0.5em 0.5em 0.5em 0.5em;
    margin-top: 0.5em;
}

.loginIntro {
    position: absolute;
    left: 27em;
    right: 0.5em;
    margin-top: 1.5em;
}

    .loginIntro p {
        font-size: 1.2em;
        max-width: 80%;
        margin: 0 auto 1em auto;
        text-align: center;
    }

.loginNiceBox th {
    font-weight: normal;
    line-height: 1.8em;
    font-size: 1.2em;
}

.loginNiceBox .cookieWarning {
    font-size: 0.9em;
    margin: 0.5em 0;
    text-align: right;
}

.loginNiceBox input[type=text], .loginNiceBox input[type=password] {
    width: 12em;
}

.loginNiceBox input[type=submit] {
    /*width: 100%;*/
    /*width: 6em;*/
    margin-top: 0.5em;
    font-size: 1em;
}

#broadcastMessage {
    background-color: darkred;
    color: white;
    text-align: center;
    padding: 10px 10px 5px 10px;
}

#brandingpanel {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 180px;
    height: 325px;
    border: 0;
    overflow: hidden;
    border: 0px solid black;
}

#notifAnchor {
    text-decoration: none;
    text-align: center;
    color: white;
}

#rnsNotification {
    width: 180px;
    height: 325px;
    display: grid;
}

#notifTitle {
    text-align: left;
    font-size: 26px;
    padding-left: 18px;
    padding-right: 9px;
    margin-top: 10px !important;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
}

#notifBody {
    text-align: center;
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 0% !important;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
}

#notifFooter {
    text-align: left;
    font-size: 12px;
    padding-left: 20px;
    padding-right: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
}

.refreshing {
    opacity: 0.2;
}

.showWhileRefreshing {
    display: none;
}

.refreshing > .showWhileRefreshing {
    display: block;
}

.loading, .loadFailed {
    display: none;
    position: absolute;
    width: 400px;
    top: 40%;
    left: 50%;
    padding: 0.5em;
    margin-left: -200px;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    background-color: White; /* For IE8 */
    background-color: rgba(255,255,255,0); /* For everyone else */
}

.editorLoading, .editorSaving {
    display: none;
    position: absolute;
    width: 50%;
    top: 40%;
    left: 50%;
    padding: 4%;
    margin-left: -29%;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: White;
    z-index: 100;
}

/** Section Boxes **/
.sectionbox > .openCloseBoxHead h3 {
    width: 80%;
    margin: 0.25em 0 0 0;
    padding: 0;
}

.sectionbox > .openCloseBoxHead {
    border-bottom: 1px solid #16202c;
    width: 100%;
}

.statusList .sectionbox > .openCloseBoxHead {
    border-bottom: 0;
    width: 50%;
}

.sectionbox > .openCloseBoxHead.opened:before {
    content: "▼";
    display: block;
    float: left;
    line-height: 1.3em;
    font-size: 1.1em;
    margin: 0 0.5em 0 0;
    padding: 0;
    font-family: monospace;
}

.sectionbox > .openCloseBoxHead.closed:before {
    content: "►";
    display: block;
    float: left;
    line-height: 1.3em;
    font-size: 1.1em;
    margin: 0 0.5em 0 0;
    padding: 0;
    font-family: monospace;
}

.sectionbox {
    margin-bottom: 1em;
    position: relative;
}

/** Defaults for all open-close boxes, not just section boxes **/
.openCloseBox.defaultClose .openCloseBoxContent {
    display: none;
}

.openCloseBox .openCloseBoxHead {
    cursor: pointer;
}

.simpleOpenCloseBox > .openCloseBoxHead.opened:before {
}

.simpleOpenCloseBox > .openCloseBoxHead.closed:before {
}

.simpleOpenCloseBox > .openCloseBoxHead * {
    margin: 0;
    padding: 0;
}

.simpleOpenCloseBox .open, .simpleOpenCloseBox .close {
}

.loginFailMessage {
    border: 2px dashed red;
    padding: 5px;
    margin: 5px;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}

    .loginFailMessage p {
        margin: 0;
        padding: 0;
    }

.valMsg {
    font-size: 0.8em;
    font-weight: bold;
    color: Red;
}

.refreshBox {
    /*position: relative;*/
}

table.niceTable {
    border-collapse: collapse;
    border: 1px solid #16202c;
    width: 100%;
}

    table.niceTable th, table.niceTable td {
        padding: .25em;
        font-size: 0.8em;
    }

    table.niceTable thead a, table.niceTable tfoot a {
        font-weight: normal;
        color: black;
        text-decoration: none;
    }

        table.niceTable thead a:hover, table.niceTable tfoot a:hover {
            text-decoration: underline;
        }

    table.niceTable th, table.niceTable thead {
        background-color: #16202c;
        color: white;
        border: 1px solid #16202c;
    }

    table.niceTable tbody tr:nth-child(odd) {
        background: #D9D5D5;
    }

    table.niceTable tbody tr:nth-child(even) {
        background: #E6E3E3;
    }

    table.niceTable tbody tr.odd {
        background: #D9D5D5;
    }

    table.niceTable tbody tr.even {
        background: #E6E3E3;
    }

    table.niceTable tbody tr:hover {
        background: #fff;
    }

    table.niceTable td {
        border-right: 1px solid #777;
        color: black;
    }

    table.niceTable tfoot td {
        border-top: 1px solid #777;
    }

    table.niceTable tr.selectedRow td {
        background-color: #8D8180; /*gold: #806734;*/
        color: White;
    }

    table.niceTable th.sectionhead {
        text-decoration: underline;
    }

table.rowClickSelect td {
    cursor: pointer;
}

table.rowClickSelect tr.empty td {
    cursor: default;
}

th.sortable {
    cursor: pointer;
}

    th.sortable:hover {
        text-decoration: underline;
    }

th.currentSort {
    font-weight: bolder;
    text-decoration: underline;
}

th.currentSortDescending:after {
    content: "▼";
    display: block;
    float: right;
    margin: 0;
    padding: 0;
    text-align: right;
    font-family: monospace;
}

th.currentSortAscending:after {
    content: "▲";
    display: block;
    float: right;
    margin: 0;
    padding: 0;
    text-align: right;
    font-family: monospace;
}

tr.annGroupLeader.expanded td {
    background-color: Orange;
}

tr.annGroupLeader a.expandGroup {
    display: inline-block;
    border: 1px solid #999;
    background-color: White;
    text-align: center;
    font-size: 1.05em;
    margin-left: 2px;
    width: 0.8em;
    padding: 0 2px 0 1px;
    color: black;
    text-decoration: none;
}

    tr.annGroupLeader a.expandGroup .collapseText {
        display: none;
    }

    tr.annGroupLeader a.expandGroup:hover {
        text-decoration: none;
        border: 1px solid black;
    }

tr.annGroupClone {
    display: none;
}

    tr.annGroupClone td {
        background-color: Orange;
    }

tr.statusRowAwaitingApproval td {
    background-color: Red;
    color: White;
}

table.niceTable tr.statusRowAwaitingApproval.selectedRow td {
    background-color: OrangeRed;
}

a.disabled {
    color: #ccc;
    text-decoration: none;
    cursor: default;
}

    a.disabled:hover {
        color: #ccc;
        text-decoration: none;
        cursor: default;
    }

form.normalForm label {
    font-weight: bold;
}

p:first-child {
    margin-top: 0;
}

p.loginWarning {
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
}

div.confirmBox {
    max-height: 80%;
    overflow-y: auto;
    width: 70%;
    max-width: 1000px;
    padding: 10px;
    margin: 10% auto 0 auto;
    border: 5px solid black;
    background-color: white;
    z-index: 90;
}

    div.confirmBox.niceCentred {
        text-align: center;
    }

        div.confirmBox.niceCentred *:first-child, div.confirmBox.niceCentred form *:first-child {
            margin-top: 0;
        }

        div.confirmBox.niceCentred *:last-child, div.confirmBox.niceCentred form *:last-child {
            margin-bottom: 0;
        }

    div.confirmBox.helpBox {
        font-size: 0.9em;
    }

/* Common for buttons and button-style links: */
input[type=button], input[type=submit], a.niceButton, a.niceButton:active, a.niceButton:visited {
    border: 0;
    border-radius: 3px;
    background-color: #001EFF;
    color: White;
    text-align: center;
    font-family: "fs_lola_web_mediumregular", Arial;
    font-weight: normal;
    text-decoration: none;
    /*text-transform: uppercase;*/
    font-size: 1.2em;
    padding: 0.25em 0.25em;
}

/* Just buttons: */
input[type=button], input[type=submit] {
    margin: 0;
}
/* Just button-style links: */
a.niceButton, a.niceButton:active, a.niceButton:visited {
    display: block;
    outline: none;
}

    input[type=button]:hover, input[type=submit]:hover, a.niceButton:hover {
        background-color: #314CFF;
    }

    /* Split into two separate definitions so as to not break IE8, which does not support the :disabled pseudo-class */
    a.niceButton.disabled {
        background-color: #9CA5FF;
        color: white;
    }

input[type=button]:disabled, input[type=submit]:disabled {
    background-color: #9CA5FF;
    color: white;
}

input[type=button].importantButton, input[type=submit].importantButton, a.niceButton.importantButton {
    font-family: "fs_lola_web_boldregular", Arial;
}

a.newDraftButton, a.newDraftButton:active, a.newDraftButton:visited {
    float: right;
    box-shadow: 0px 2px 5px 0px black, 0px 1px 3px 0px black;
    margin: 0.4em;
    font-size: 1.7em;
    width: 8em;
    padding: 1em 0.25em;
}

input.copybackButton {
    width: 60%;
}

table.annTable a.niceButton {
    font-size: 1.5em;
}

.filter select {
    vertical-align: middle;
}

/*.ui-widget { font-family: Arial, Helvetica, Sans-Serif; }*/
.ui-accordion .ui-accordion-content {
    padding: 0.5em;
    margin: 0;
}

.ui-accordion .ui-accordion-header {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    margin: 0;
    color: black;
}

textarea.ck {
    visibility: hidden;
}

.accordionContainer {
    padding: 0.5em;
}

.failed {
    font-weight: bold;
    color: red;
}

ul.niceList {
    list-style: none;
    margin: 0;
    padding: 0;
}

    ul.niceList li {
        margin: 0 0 0.25em 0;
        padding: 0.25em 0.25em 0.25em 0.5em;
        border-left: 0.5em solid #aaa;
    }

        ul.niceList li:nth-child(odd) {
            background: #eeeeee;
        }

        ul.niceList li:nth-child(even) {
            background: #f0f0f0;
        }

    ul.niceList.valFailList li {
        border-left-color: Red;
    }

    ul.niceList li.convMsgInformation {
        border-left-color: Blue;
    }

    ul.niceList li.convMsgWarning {
        border-left-color: Orange;
    }

    ul.niceList li.convMsgError {
        border-left-color: Red;
    }

    ul.niceList li.convMsgFailure {
        border-left-color: Red;
    }


ul.attachmentList li {
    font-size: 0.8em;
}

.conversionMessages .severity {
    font-weight: bold;
}

ul.conversionMessages li {
    font-size: 0.8em;
}

.info {
    font-size: 0.8em;
}

div.welcomeText {
}

dl.descrList {
    margin: 0.75em 0;
    padding: 0;
    display: block;
}

    dl.descrList dt {
        display: inline-block;
        margin: 0 0 5px 10px;
        padding: 0 0 0 3px;
    }

        dl.descrList dt:after {
            content: " - ";
        }

    dl.descrList dd {
        display: inline;
        margin: 0 0 5px 0;
        padding: 0;
    }

        dl.descrList dd:after {
            display: block;
            content: "";
        }

div.submissionsTblContainer {
    border-top: 1px solid black;
}

div.pendingTblContainer {
    border-top: 1px solid black;
}

div.draftTblContainer {
    border-top: 1px solid black;
}

div.pagination {
    font-size: 0.8em;
    border: 1px solid black;
    border-top: 0;
    padding: 3px;
}

    div.pagination select {
        font-size: 0.9em;
        margin: 0;
        padding: 0;
    }


div.wizardBox h4 {
    margin-bottom: 0;
    padding-bottom: 0;
}

div#wizardTabs ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: table;
    width: 100%;
}

    div#wizardTabs ul:after {
        content: "";
        clear: both;
        display: block;
    }

    div#wizardTabs ul li {
        float: left;
        width: 24%;
        margin-right: 1%;
    }

        div#wizardTabs ul li a:link, div#wizardTabs ul li a:visited {
            display: block;
            font-size: 0.9em;
            text-align: center;
            padding: 2px;
            text-decoration: none;
            color: black;
            border: 1px solid #ccc;
            background-color: #eee;
            outline: none;
            /* Shift down by 2px to overlap the box below */
            position: relative;
            top: 1px;
        }

        div#wizardTabs ul li a.disabled:not(.current):link, div#wizardTabs ul li a.disabled:not(.current):visited {
            color: #ccc;
        }

        div#wizardTabs ul li a.current:link, div#wizardTabs ul li a.current:visited {
            background-color: white;
            border-bottom: 1px solid white;
            font-weight: bold;
            z-index: 10;
        }

        div#wizardTabs ul li > a:hover:not(.disabled), #head ul li > a:active {
            background-color: white;
        }

.accordionHeader .noEmbargo, .annSummaryEmbargo .noEmbargo {
    font-weight: bold;
    color: Red;
}

.message {
    position: absolute;
    text-align: center;
    color: #666;
    background-color: white;
    font-family: "fs_lola_web_mediumregular", Arial;
}

.progressbar {
    height: 0.5em;
}

div.processingOverlay {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
}

    div.processingOverlay .words {
        position: absolute;
        text-align: center;
        top: 10%;
        left: 50%;
        margin-left: -45%;
        width: 80%;
        font-size: 2em;
        padding: 5%;
    }

.attachmentTarget div.processingOverlay .words {
    font-size: 1em;
    top: 5%;
    padding-bottom: 0;
    padding-top: 0;
}

    .attachmentTarget div.processingOverlay .words p {
        margin: 0;
        padding: 0 0 1em 0;
    }

.processing div.processingOverlay {
    display: block;
}

/* If we have an intermediate block processing bubble class applied 
    between processing and the overlay, don't display. Used when we have 
    multiple layers of processing overlays and processing blocks. */
.processing .blockProcessingBubble div.processingOverlay {
    display: none;
}

.annTableOptions ul, .annInlineOptions ul {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    .annTableOptions ul li {
        display: inline;
    }

        .annTableOptions ul li:after {
            content: " | ";
            display: inline;
        }

        .annTableOptions ul li:last-child:after {
            /* Won't work in IE8, but no huge impact. */
            display: none;
        }

    .annInlineOptions ul li {
        display: block;
        float: left;
        margin: 5px 5px 0px 0;
    }

#copybackOptions.disabled {
    display: none;
}

/* Default styles for wider screens (targetting 1280x1024 maximised or bigger for the best experience) 
    - wizard to the left of the viewer */
div.submitContainer {
    position: relative;
}

div.wizardBox {
    width: 330px;
    height: 710px;
}

div.viewerBox {
    position: absolute;
    top: 1px;
    left: 336px;
    width: 900px;
    height: 708px;
    border: 1px solid #ccc;
}

div#reviewEditTarget {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #ccc;
}

div.htmlViewContainer {
    height: 100%;
    background-color: White;
}

div.editor {
    width: 900px;
    height: 680px;
    margin: 5% auto 0 auto;
}

div.editorPopOut {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    z-index: 200;
}

div.editorPopOutContent {
    position: relative;
    width: 900px;
    /*height: 800px;*/
    margin: 2em auto;
}

.previewContainer {
    display: none;
    height: 532px;
    width: 898px;
    padding-top: 109px;
    position: absolute;
    top: 0px;
    left: 1px;
}

    .previewContainer .exit {
        position: absolute;
        bottom: 542px;
        right: 10px;
    }

    .previewContainer iframe {
        border: 0;
        width: 898px;
        height: 532px;
        overflow-y: scroll; /* always show the scroll bar */
        background-color: white;
    }

.editorContainer {
    background-color: white;
    height: 642px;
}

.editMode, .viewMode {
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    width: 30%;
    font-size: 0.9em;
    margin: 1em 1em 0 0;
}

.viewMode {
    color: White;
}

.cke_combo__fontsize .cke_combo_text {
    width: 150px !important;
}

.cke_combopanel__fontsize {
    width: 250px !important;
}

.cke_combo__font .cke_combo_text {
    width: 150px !important;
}

.cke_combopanel__font {
    width: 250px !important;
}

div#wizardTabs {
    width: 330px;
}

div#wizardTarget {
    position: relative;
    height: 610px;
    overflow-y: auto;
}

div#wizardContent {
    border: 1px solid #ccc;
    height: 681px;
    padding: 3px;
    position: relative;
}

div#buttonBar {
    margin: 0;
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 0.25em;
}

div.buttonBarLeft {
}

div.buttonBarRight {
    margin-bottom: 0.4em;
}

    div.buttonBarRight input {
        width: 100%;
    }

div.buttonBarLeft input {
    width: 49%;
    margin: 0;
}

div.buttonBarSingle input {
    width: 100%;
}

div.buttonBarLeft input:first-child {
    margin-right: 2%;
}

.charRemainingWarning {
    font-weight: bold;
    color: Red;
}

.message {
    top: 30%;
    left: 50%;
    margin-left: -30%;
    width: 50%;
    font-size: 2em;
    padding: 5%;
}

div.textViewContainer {
    padding-left: 8px;
}

pre.annContent { /* text announcements */
    margin: 0;
    padding: 0;
    height: 672px;
    width: 100%;
    border: 0;
    overflow-y: scroll; /* always show the scroll bar */
}

iframe.annContent { /* HTML annonucements */
    border: 0;
    width: 100%;
    height: 672px;
    overflow-y: scroll; /* always show the scroll bar */
    overflow-x: visible; /* always show the scroll bar */
}

.reviewEditButtonBar {
    background-color: #D0D2D5;
    /*height: 30px;*/
    padding: 3px;
    text-align: right;
}


.annTableOptions {
    width: 100%;
    padding-bottom: 0.2em;
}

    .annTableOptions .filter {
        position: absolute;
        right: 0px;
        top: 0px;
        text-align: right;
    }

.oamClassificationList {
    height: 170px;
    overflow-y: auto;
    font-size: 0.8em;
}

dl.oamClassificationDL dd label {
    font-weight: normal;
}

.additionalDestinationList {
    height: 176px;
    overflow-y: auto;
    font-size: 0.8em;
}

div.additionalCompanies select {
    width: 100%;
    height: 6em;
    overflow: auto;
}

dl.additionalDestinationDL, dl.oamClassificationDL {
    width: 100%;
    margin: 0;
    padding: 0;
}

    dl.additionalDestinationDL dt, dl.oamClassificationDL dt {
        float: left;
        width: 10%;
        margin: 0;
        padding: 0;
        margin-bottom: 0.3em;
        padding-top: 0.3em;
        border-top: 1px solid #ccc;
        clear: left;
    }

    dl.additionalDestinationDL dd, dl.oamClassificationDL dd {
        float: left;
        width: 90%;
        margin: 0;
        padding: 0;
        margin-bottom: 0.3em;
        padding-top: 0.4em;
        border-top: 1px solid #ccc;
        clear: right;
    }

/* Text editor styles (save a separate CSS call just for a few styles */
.textEditor_toolbar ul {
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0;
    position: relative;
}

    .textEditor_toolbar ul ul {
        margin-right: 10px;
    }

    .textEditor_toolbar ul:after {
        content: "";
        clear: both;
        display: block;
        margin: 0;
        padding: 0;
    }

    .textEditor_toolbar ul li {
        float: left;
        margin-right: 3px;
    }

/* Show warning for non-maximised screens where we're smaller than our ideal size - don't show this 
    to poor people with small screens, just those that have the device width available for our 
    nicest version. */
.nonMaximisedWarning {
    display: none;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    border: 2px solid #ccc;
    padding: 3px;
}

@media (max-width: 1270px) and (min-device-width: 1280px) {
    .nonMaximisedWarning {
        display: block;
    }
}

/* Show warning for using a mobile-sized window on a desktop browser */
.accidentalMobileWarning {
    display: none;
    font-weight: bold;
}

@media (max-width: 900px) and (min-device-width: 1025px) {
    .accidentalMobileWarning {
        display: block;
    }
}

/* Classes to selectively display content depending on screen width, use SPARINGLY, 
    and NEVER to hide functionality, only to switch wording (e.g. "See the viewer to 
    the right" or "See the viewer below") */
.wideScreenOnly {
    display: inline !important;
}

.wideScreenOnlyBlock {
    display: block !important;
}

.midScreenOnly {
    display: none !important;
}

.narrowScreenOnly {
    display: none !important;
}

.midOrNarrowOnly {
    display: none !important;
}

.wideOrMidOnly {
    display: inline !important;
}

.wideOrMidOnlyBlock {
    display: block !important;
}

/* Styles for screens which aren't wide enough to keep our viewer and wizard side-by-side. */
@media (max-width: 1270px) {
    .wideScreenOnly {
        display: none !important;
    }

    .wideScreenOnlyBlock {
        display: none !important;
    }

    .midScreenOnly {
        display: inline !important;
    }

    .narrowScreenOnly {
        display: none !important;
    }

    .wideOrMidOnly {
        display: inline !important;
    }

    .wideOrMidOnlyBlock {
        display: block !important;
    }

    .midOrNarrowOnly {
        display: inline !important;
    }

    /* On narrower screens, put the wizard on top of the viewer, remove all minimum/specified heights, 
        limit the wizard to the width of the viewer */
    div.wizardBox {
        width: auto;
        height: auto;
        float: none;
        margin: 0 auto 0.5em auto;
    }

    div#wizardTarget {
        height: auto;
        overflow-y: visible;
    }

        div#wizardTarget:after {
            content: "";
            clear: both;
            display: block;
            margin: 0;
            padding: 0;
            width: 100%;
        }

    div#wizardContent {
        height: auto;
    }

    div#buttonBar {
        margin: 0.5em 0 0 0;
        height: auto;
        position: relative;
        top: 0;
        left: 0;
    }

    div.editorPopOutContent {
        /* Narrow the top/bottom margin on the editor pop-over */
        margin: 0.5em auto;
    }

    div.viewerBox {
        position: relative;
        left: auto;
        margin: 0 auto;
        /*float: none;*/
    }

    .additionalDestinationList {
        height: 160px;
    }

    div.additionalCompanies select {
        height: 4em;
    }
}

/* Styles for JUST desktop screens between 900 and 1270 wide (e.g. 1024x768) but not smaller devices */
@media (min-width: 900px) and (max-width: 1270px) {
    div.wizardBox {
        width: 902px;
        margin: 0 auto;
    }

    div#wizardTarget {
        min-height: 250px;
    }

    div#wizardContent {
        /*height: 430px;*/
    }

    div.wizardChunk {
        width: 33%;
        margin-right: 0.5%;
        float: left;
    }

    div.wizardBigChunk {
        width: 66%;
        margin-right: 0.5%;
        float: left;
    }

    div.wizardMidChunk {
        width: 49%;
        margin-right: 0.5%;
        float: left;
    }

        div.wizardChunk:last-child, div.wizardBigChunk:last-child, div.wizardMidChunk:last-child {
            margin-right: 0;
        }
}

/* Mobile overrides */
@media (max-width: 900px) {
    #mobileClue {
        display: block;
    }

    .wideScreenOnly {
        display: none !important;
    }

    .wideScreenOnlyBlock {
        display: none !important;
    }

    .midScreenOnly {
        display: none !important;
    }

    .narrowScreenOnly {
        display: inline !important;
    }

    .forceBlock {
        display: block !important;
    }

    .wideOrMidOnly {
        display: none !important;
    }

    .wideOrMidOnlyBlock {
        display: none !important;
    }

    .midOrNarrowOnly {
        display: inline !important;
    }

    /* On very small screens, the top links don't fit well and take up an enormous amount of space. Collapse them down into a menu. Hide the LSEG Logo */
    #head {
        min-height: 0;
    }

        #head #logo {
            display: none;
        }

        #head #ident {
            margin: 0;
            float: none;
            text-align: left;
            width: 100%;
        }

            #head #ident h1 {
                line-height: normal;
                margin: 0 0 0 0.1em;
            }

        #head #menu {
            float: left;
        }

            #head #menu #menuCurrent a {
                outline: none;
                color: #6578FF;
                text-decoration: none;
                font-size: 1.2em;
            }

                #head #menu #menuCurrent a h2 {
                    display: inline;
                }

        #head ul.pagetabs li {
            float: none;
            margin-left: 0px;
        }

        #head > ul.pagetabs > li > a:link, #head > ul.pagetabs > li > a:visited {
            width: auto;
        }

        #head ul.pagetabs li a:link, #head ul.pagetabs li a:visited {
            border-radius: 0px;
            margin-bottom: 0.5em;
            padding: 0.25em;
            font-size: 1.5em;
        }

        #head ul.pagetabs li a.current:link, #head ul.pagetabs li a.current:visited {
        }

        #head ul.pagetabs li > a:hover, #head ul.pagetabs li > a:active {
            background-color: #001EFF;
            outline: none;
        }

        #head ul.pagetabs {
            position: absolute;
            left: 0;
            z-index: 100;
            width: 70%;
            background: rgba(0,0,0,0.6); /* No need to polyfill this for old IE as it's mobile specific and old IE won't show this anyway */
            padding: 5px 5px 5px 0;
        }

            #head ul.pagetabs.menuhidden {
                left: -100%;
            }

    /* On mobiles, boost the font size some */
    #pagecontent {
        font-size: 1.3em;
    }

    #page {
        max-width: 900px;
        min-width: 0;
        width: 100%;
        margin: 0;
    }

    /* Login page re-style */
    .loginbox {
        margin-right: 0;
    }

    .loginNiceBox {
        width: auto;
        border: 1px solid #001EFF;
        border-top-width: 25px;
        padding: 0.5em;
    }

    .loginIntro {
        position: relative;
        left: 0;
        right: 0;
        margin-top: 0;
    }

        .loginIntro p {
            font-size: 0.8em;
            max-width: 100%;
            margin: 0 0 1em 0;
            text-align: left;
        }


    .loginNiceBox input[type=text], .loginNiceBox input[type=password] {
        width: 6em;
    }

    #brandingpanel {
        position: relative;
        top: 0;
        right: 0;
        left: 50%;
        margin: 0.5em 0 0.5em -90px;
    }

    /* Buttons which are regular links on desktop, buttons on mobile. This should be in sync with the .niceButton stuff above more-or-less */
    a.mobileButton, a.mobileButton:active, a.mobileButton:visited, .annTableOptions .filter a.mobileButton {
        border: 0;
        border-radius: 3px;
        background-color: #001EFF;
        color: White;
        text-align: center;
        font-family: "fs_lola_web_mediumregular", Arial;
        font-weight: normal;
        text-decoration: none;
        font-size: 1.0em;
        padding: 0.25em 0.25em;
        display: inline-block;
    }

        a.mobileButton, a.mobileButton:active, a.mobileButton:visited {
            outline: none;
        }

    table.annTable a.niceButton {
        font-size: 1.2em;
    }

    .annTableOptions .filter a.showFilter {
        position: absolute;
        top: 0.25em;
        right: 0.25em;
    }

    a.newDraftButton, a.newDraftButton:active, a.newDraftButton:visited {
        float: none;
        padding: 0.35em;
        margin-bottom: 0.5em;
        font-size: 1em;
        width: auto;
    }

    #generalStatusListOptions ul {
        padding-bottom: 0.25em;
    }

    ul.statusListTabs {
        list-style-type: none;
        margin: 0px;
        padding: 0;
        margin: 0px;
        clear: both;
        width: 100%;
    }

        ul.statusListTabs li {
            display: table-cell;
            width: 33%;
            height: 100%;
        }

        ul.statusListTabs > li > a:link, ul.statusListTabs > li > a:visited {
            outline: none;
            margin: 0 0.25em 0 0;
        }

        ul.statusListTabs li a:link, ul.statusListTabs li a:visited {
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            outline: none;
            display: block;
            font-family: "fs_lola_web_mediumregular", Arial;
            font-size: 0.9em;
            text-align: center;
            padding: 0.25em;
            text-decoration: none;
            border: 1px solid #16202c;
            border-bottom: 1px solid white;
            color: white;
            border-bottom: 0;
            background-color: #6578FF;
        }

        ul.statusListTabs li a.current:link, ul.statusListTabs li a.current:visited {
            outline: none;
            background-color: white;
            color: Black;
            position: relative;
            top: 1px;
        }

        ul.statusListTabs li > a:hover, ul.statusListTabs li > a:active {
            background-color: #001EFF;
            outline: none;
        }

    div.statusListBar {
        width: 100%;
        border-top: 1px solid black;
    }

    .sectionbox {
        margin-bottom: 0em;
    }


    div.viewerBox {
        width: 100%;
        height: auto;
        position: relative;
    }

    div#reviewEditTarget {
        height: auto;
        min-height: 72vw;
    }

    div.htmlViewContainer {
        overflow: hidden;
    }

    iframe.annContent {
        min-height: 680px;
    }

    div.editorPopOut {
        overflow: hidden;
    }

    div.editorPopOutContent {
        position: relative;
        width: 900px;
        height: 800px;
        overflow-y: auto;
        margin: 0;
    }

    .message {
        top: 10%;
        left: 50%;
        margin-left: -42%;
        width: 80%;
        font-size: 1.5em;
        padding: 2%;
    }

    input[type=button], input[type=submit] {
        /* Reset the height of buttons to their normal basic size */
        height: initial;
    }

    input {
        font-size: 1.2em;
    }

    select {
        font-size: 1em;
    }

    div.additionalCompanies select {
        width: 100%;
        height: auto;
    }


    table.annTable.niceTable {
        /* Undo the table styling and turn it into an announcement list for mobile, just too wide to fit otherwise. */
        border: 0;
        border-top: 2px solid #ccc;
    }

        table.annTable.niceTable thead {
            display: none;
        }

        table.annTable.niceTable th, table.annTable.niceTable td {
            border: 0;
            margin: 0;
            padding: 0;
            background: none;
            display: inline;
        }

            table.annTable.niceTable td.headline {
                text-decoration: underline;
                font-weight: bold;
            }

            table.annTable.niceTable td.lastHeadline:after {
                content: "";
                display: block;
                clear: both;
            }

            table.annTable.niceTable td.secondline:after {
                content: " | ";
            }

            table.annTable.niceTable td.secondline.lastSecondline:after {
                content: "";
            }

            table.annTable.niceTable th.hideable, table.annTable.niceTable td.hideable {
                display: none;
            }

                table.annTable.niceTable th.hideable.show, table.annTable.niceTable td.hideable.show {
                    display: inline;
                }

                    table.annTable.niceTable td.hideable.show:before {
                        content: "";
                        display: block;
                    }

        table.annTable.niceTable tr {
            display: block;
            background: none;
            padding: 0.5em 0;
            border: 0;
            border-bottom: 2px solid #ccc;
        }

            table.annTable.niceTable tr.empty {
                display: none;
            }

        table.annTable.niceTable tbody tr {
            background: none;
        }

        table.annTable.niceTable tr.selectedRow td {
            background: none;
        }

        table.annTable.niceTable tr.selectedRow {
            background-color: #8D8180;
        }

        table.annTable.niceTable tbody tr.annGroupLeader.expanded {
            background-color: Orange;
        }

        table.annTable.niceTable tbody tr.annGroupClone {
            background-color: Orange;
            display: none;
        }

        table.annTable.niceTable tbody tr.statusRowAwaitingApproval {
            background-color: Red;
        }

            table.annTable.niceTable tbody tr.statusRowAwaitingApproval.selectedRow {
                background-color: OrangeRed;
            }

    div.pagination {
        font-size: 0.8em;
        border: 0;
        padding: 3px;
    }

    .annTableOptions ul li:after {
        content: "";
        display: none;
    }

    .annTableOptions .filter {
        width: 100%;
        float: none;
        text-align: right;
        position: relative;
    }

        .annTableOptions .filter ul {
            display: block;
            margin: 0;
            padding: 0;
        }

            .annTableOptions .filter ul li {
                display: block;
                margin: 0;
                padding: 0;
                font-size: 0.9em;
            }

    div.buttonBarLeft {
        text-align: right;
        float: none;
    }

    div.buttonBarRight {
        text-align: right;
        float: none;
        padding-bottom: 0.25em;
    }
}