﻿* {
    margin: 0;
    padding: 0;
}




.clear {
    clear: both;
}

    .clear:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

body {
    background-color: #f3f3f3;
    font-family: Arial;
    text-align: center;
    padding: 10px 0 0 0;
    font-size: 62.5%;
    background-image: url(../../images/bg-main.gif);
    background-repeat: repeat-y;
    background-position: center top;
}

    body.merge {
        background-color: #fff;
    }

p,
ul li,
ol li {
    font-size: 1.2em;
}

a {
    text-decoration: none;
    color: #D31145;
    outline: none;
}

    a:hover {
        color: #D31145;
    }

img {
    border: 0;
}

h2 {
    font-size: 1.8em;
}

    h2 span {
        color: #585858;
    }

h3 {
    margin: 0 0 35px 0;
    padding: 0 0 15px 0;
    color: #343434;
    font-size: 2em;
    font-weight: normal;
    border-bottom: 1px solid #ccc;
}

h4 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1.3em;
}

body.errorContainerBody {
    font-size: unset !important;
}
/* login panel */
body.login {
    font-family: Arial;
    padding: 170px 0 0 0;
    background-color: #333;
    background-image: none;
}



    body.login div#login {
        margin: auto;
        background-color: #fff;
        padding: 70px 100px;
        width: 750px;
        text-align: left;
    }

        body.login div#login h1 {
            background-image: url(../../images/tractivity_logo-sml.gif);
            background-repeat: no-repeat;
            text-indent: -5000px;
            margin: 0 0 45px 0;
        }

            body.login div#login h1.big {
                background-image: url(../../images/tractivity_logo.gif);
                height: 45px;
            }

p {
    margin: 0 0 10px 0;
}

.no-records {
    margin: 0 0 0 0;
}

.outText {
    FONT-SIZE: 70%;
}

button.button, input.button,
.linkbutton,
.cancel,
.back {
    font-size: 100%;
    text-transform: uppercase;
    border: 0;
    padding: 5px 12px;
    font-size: 1.2em;
    -moz-box-shadow: 2px 2px 0 #8c8c8c;
    -webkit-box-shadow: 2px 2px 0 #8c8c8c;
    box-shadow: 2px 2px 0 #8c8c8c;
}

    .cancel:hover,
    .back:hover {
        background-color: #ccc;
        cursor: pointer;
    }

input.button, button.button,
.linkbutton {
    color: #FFFFFF !important;
    background-color: #bb0b2f !important;
}

    .button:hover, button.button:hover,
    .linkbutton:hover {
        background-color: #862632;
        cursor: pointer;
    }

input.margin-right, button.margin-right {
    margin: 0 10px 0 0;
}

.back,
.cancel {
    margin: 0 7px;
    background-color: #e1e1e1;
    color: #656565;
}

.back {
    margin: 0 7px 0 0;
}

.linkbutton {
    padding: 5px 2px;
}

    .linkbutton:hover {
        color: #FFF;
    }

div#maincontainer {
    text-align: left;
    width: 1000px;
    margin: auto;
}

    div#maincontainer div#header {
        background-color: #fff;
        padding: 20px 0 40px 0;
        background-position: 0 -5px;
    }

    div#maincontainer div.nosesh {
        height: 35px;
    }

    div#maincontainer div#header h1 {
        float: left;
        width: 380px;
        height: 40px;
        display: block;
        background-image: url(../../images/TractivitySmartMailer.png);
        background-repeat: no-repeat;
        text-indent: -5000px;
        margin: 5px 0 0 28px;
    }

    div#maincontainer div#header h2 {
        float: left;
        margin: 10px 0 0 40px;
        color: #A3A3A3;
        font-size: 2em;
    }

    div#maincontainer div#mainmenu {
        background-color: #333;
        text-align: right;
    }

        div#maincontainer div#mainmenu p {
            margin: 0 0 0 0;
            text-align: center;
        }

            div#maincontainer div#mainmenu p a {
                color: #fff;
                display: block;
                width: 120px;
                float: right;
                padding: 11px 10px;
            }

                div#maincontainer div#mainmenu p a:hover {
                    background-color: #ba0c31;
                }

    div#maincontainer .main {
        padding: 50px 30px 0 30px;
    }

    div#maincontainer div#mainleft {
        width: 150px;
        float: left;
    }

        div#maincontainer div#mainleft table {
            border-collapse: collapse;
            border: 0;
            width: 100%;
            padding: 0;
            margin: -1px 0 0 0;
        }

            div#maincontainer div#mainleft table tr td.item {
                color: #ba0c31;
            }

            div#maincontainer div#mainleft table tr td span.LHNavHeading {
                font-size: 1.4em;
                color: #000;
                font-weight: bold;
            }

            div#maincontainer div#mainleft table tr td table {
                width: 150px !important;
            }

                div#maincontainer div#mainleft table tr td table tr td {
                    padding: 3px 0;
                }

        div#maincontainer div#mainleft a {
            color: #ba0c31;
            display: block;
            font-size: 1.3em;
        }

    div#maincontainer div#mainright {
        padding: 0 0 20px 0;
        width: 790px;
        float: left;
        min-height: 500px;
    }

        div#maincontainer div#mainright.fullwidth {
            width: 940px;
        }

div#mainright table.contenttable {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 20px 0 20px 0;
}

    div#mainright table.contenttable.fixed {
        table-layout: fixed;
        word-wrap: break-word
    }

.nomargin {
    margin: 0 !important;
}

div#mainright table.smlmargin {
    margin: 0 0 10px 0;
}

div#mainright table.contenttable tr th {
    font-size: 1.2em;
}

div#mainright table.contenttable tr th,
div#mainright table.contenttable tr.tableHeader td {
    background-color: #e0e0e0;
    padding: 10px 8px 8px 8px;
    border: 0;
    font-weight: bold;
    border-bottom: 1px solid #fff;
    text-align: left;
}

div#mainright table.contenttable tr.pagingText:hover td {
    background-color: #f4f4f4;
}

div#mainright table.contenttable tr.tableHeader:hover td {
    background-color: #e0e0e0;
}

div#mainright table.contenttable tr:hover td {
    background-color: #fcebf0;
}

div#mainright table.contenttable tr td {
    background-color: #f4f4f4;
    font-size: 1.2em;
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid #fff;
}

    div#mainright table.contenttable tr td.image-col {
        text-align: left;
    }

div#maincontainer table.formTable {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px 0;
}

.noMarginBottom {
    margin-bottom: 0 !important;
}

div#maincontainer table.formTable tr td.tableheader,
div#maincontainer table.formTable tr td.tableHeader {
    background-color: #e0e0e0;
    padding: 12px 10px;
    font-weight: bold;
    color: #343434;
    width: 25%;
}

div#maincontainer table.formTable tr td {
    border: 1px solid #fff;
    font-size: 1.2em;
}

    div#maincontainer table.formTable tr td .passive {
        margin: 10px 0 0 0;
    }

div#maincontainer table.formTable tr td {
    background-color: #f4f4f4;
    padding: 8px;
}

    div#maincontainer table.formTable tr td input,
    div#maincontainer table.formTable tr td textarea,
    div#maincontainer table.formTable tr td select {
        border: 1px solid #ccc;
        padding: 5px;
        color: #000;
        width: 300px;
    }

    div#maincontainer table.formTable tr td select {
        width: 312px;
    }

    div#maincontainer table.formTable tr td.tablecell .file-upload {
        float: left;
    }

    div#maincontainer table.formTable tr td.tablecell input.upload {
        width: 100px;
        margin: 0 0 0 6px;
        color: #fff;
        font-size: 100%;
        text-transform: uppercase;
        border: 0;
        padding: 7px;
        font-size: 1em;
        -moz-box-shadow: 2px 2px 0 #8c8c8c;
        -webkit-box-shadow: 2px 2px 0 #8c8c8c;
        box-shadow: 2px 2px 0 #8c8c8c;
        background-color: #e1e1e1;
        color: #656565;
        float: left;
    }

    div#maincontainer table.formTable tr td .radlist input {
        width: 20px;
        border: 0;
        margin: 0 0 10px 0;
        position: relative;
        top: 3px;
    }


.listbox {
    width: 300px;
}

tr.pagingText table tr td {
    padding: 0px !important;
    border: 0px !important;
    font-size: 1em !important;
}

    tr.pagingText table tr td a, tr.pagingText table tr td span {
        margin-right: 5px !important;
    }

.marginbot {
    margin: 0 0 50px 0;
}

.subText {
    font-weight: normal;
    display: block;
    font-size: 85.5%;
}

div#subjectheader {
    float: left;
    display: inline;
    margin-top: 5px;
    margin-bottom: 30px;
}

div#subjectfield {
    float: left;
    display: inline;
}

    div#subjectfield input {
        margin-left: 20px;
        padding: 5px;
    }

h4 select {
    margin-left: 23px;
    padding: 5px;
}

div#innerleft {
    width: 320px;
    float: left;
    margin: 0 10px 0 0;
}

div#innerright {
    width: 500px;
    float: left;
}

div.inner {
    padding: 3px;
    border: 1px solid #848284;
    margin: 0 0 10px 0;
}

.articleContainer {
    height: 340px;
    overflow: auto;
}

.mailshotContainer {
    height: 340px;
    overflow: auto;
}

div#mailmerge table {
    width: 100px;
}

    div#mailmerge table tr td {
        font-size: 0.7em;
        padding: 5px;
    }

        div#mailmerge table tr td select {
            font-size: 0.9em;
        }

div#mailmerge {
    background-color: #fff;
}

.articleGrid {
    width: 100%;
}

.articleGridHeader th {
    background-color: #FFFFFF;
    font-size: 11px;
    text-align: left;
    padding: 2px 8px 2px 8px;
}

.articleGridCell td {
    padding: 2px 8px 2px 8px;
    border: solid 1px #DFDFDF;
}

.imageGridHeader th {
    background-color: #FFFFFF;
    font-size: 11px;
    padding: 2px 8px 2px 8px;
}

.center {
    text-align: center;
}

/**********************Popup box**************************/

.popupBox {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    color: #000000;
    padding: 0px;
    margin: 0px;
    position: absolute;
    width: 220px;
    left: 40%;
    top: 40%;
    z-index: 50 !important;
}

.popupBoxLarge {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    color: #000000;
    padding: 0px;
    margin: 0px;
    position: absolute;
    width: 600px;
    left: 20%;
    top: 20%;
    z-index: 1000000;
}

.popupBarBack {
    background-color: #ba0c2f;
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    padding: 7px;
    cursor: move;
    white-space: nowrap;
}

.popupBarFront {
    padding: 2px 3px 2px 3px;
    height: 16px;
    white-space: nowrap;
}

.popupBarTitle {
    white-space: nowrap;
    font-size: 1.5em;
}

.popupClose {
    cursor: pointer;
    white-space: nowrap;
}

.popupContent {
    padding: 10px;
    background-color: #FFFFFF;
    text-align: left;
}

.greybox {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
    background-color: black;
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.right {
    float: right;
}

.left {
    float: left;
}

/******************************************************************/

.formTitle {
    width: 100px;
    background-color: #eaeaea;
    font-size: 14px;
}

.formHelp {
    margin-left: 100px;
    margin-bottom: 10px;
    width: 500px;
}

.formField {
    text-align: left;
    width: 400px;
}

.passive {
    color: #AAAAAA;
}

.warning {
    color: #bb0b2f;
}


.articleBackground {
    background-color: #FFFBFF;
    background-image: url(../../images/article_list_background.gif);
    background-repeat: repeat-x;
    background-position: center;
    vertical-align: middle;
    padding: 0;
    margin: 0;
    clear: both;
    height: 24px;
}

.articleListTitle {
    padding: 5px 0px 0px 10px;
}

.pageNav {
    margin-bottom: 10px;
}

.popupSelect {
    font-size: 1em;
}

.reToolbar.Default .MailMergeField {
    background-image: url(/RadControls/Editor/Skins/Monochrome/buttons/star.png);
}

.grid-filter {
    background-color: #f4f4f4;
    padding: 7px;
}

    .grid-filter a {
        margin: 0 5px 0 0;
    }

.FilterLinks {
    font-size: 1.2em;
    margin-right: 10px;
}

.red-border {
    padding: 10px;
    border: 1px solid #ba0b32;
}

.excel-icon {
    vertical-align: middle;
    margin: 0 0 0 190px;
}

    .excel-icon a {
        float: left;
    }

    .excel-icon p {
        float: left;
        margin: 18px 0 0 0;
    }

/* IE7 */
.ie7 div#maincontainer table.formTable tr td .radlist label {
    position: relative;
    top: -8px;
    left: 10px;
}

.ie7 div#maincontainer .main {
    padding: 23px 30px 0 30px;
}

p.archivep {
    margin-bottom: 20px;
}

span.label, label.label {
    font-size: 1.2em;
}

div.RecipientLists {
    margin-bottom: 20px;
}

div.TableBreak {
    margin-bottom: 30px;
}

.redborder,
redborder1px {
    border: 1px solid #ba0c2d !important;
    padding: 5px !important;
}

div#tabpanel div.loading,
div.tabpanel div.loading {
    position: absolute;
    z-index: 0;
    width: 820px;
    padding: 0;
    text-align: right;
}

    div#tabpanel div.loading img,
    div.tabpanel div.loading img {
        margin: 50px 10px 0 0;
    }

.TabProgress {
    position: absolute;
    padding-top: 3px;
    padding-left: 755px;
    float: left;
}

/* Tabs
----------------------------------*/
.ui-tabs {
    padding: .2em;
    zoom: 1;
}

    .ui-tabs .ui-tabs-nav {
        list-style: none;
        position: relative;
        padding: .2em .2em 0;
    }

        .ui-tabs .ui-tabs-nav li {
            position: relative;
            float: left;
            border-bottom-width: 0 !important;
            margin: 0 .2em -1px 0;
            padding: 0;
        }

            .ui-tabs .ui-tabs-nav li a {
                float: left;
                text-decoration: none;
                padding: .5em 1em;
            }

            .ui-tabs .ui-tabs-nav li.ui-tabs-selected {
                padding-bottom: 1px;
                border-bottom-width: 0;
            }

                .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
                    cursor: text;
                }

            .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
                cursor: pointer;
            }
    /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
    .ui-tabs .ui-tabs-panel {
        padding: 1em 1.4em;
        display: block;
        border-width: 0;
        background: none;
    }

    .ui-tabs .ui-tabs-hide {
        display: none !important;
    }

div#tabpanel ul#tablabels li,
div.tabpanel ul#tablabels li {
    float: left;
    list-style-type: none;
    font-size: 1.2em;
    border-right: 1px solid #666;
}

    div#tabpanel ul#tablabels li a,
    div.tabpanel ul#tablabels li a {
        display: block;
        color: #fff;
        padding: 10px 15px;
    }

        div#tabpanel ul#tablabels li.tabs-selected a,
        div#tabcalpanel ul#tablabels li a.on,
        div#tabpanel ul#tablabels li a.on div.tabpanel ul#tablabels li a.on {
            background-color: #ba0c2d !important;
        }

    div#tabpanel ul#tablabels li.tabdisabled,
    div.tabpanel ul#tablabels li.tabdisabled {
        display: block;
        font-size: 1.2em;
        color: #fff;
        border-right: 1px solid #939393;
        padding: 10px 15px 10px 15px;
    }

a.linkPointer:hover {
    cursor: pointer;
}

.SendTestTable tr td {
    font-size: 1.2em;
    padding: 5px;
}

    .SendTestTable tr td.tableHeader {
        font-weight: bold;
    }

.SendMailshotTable tr td.tableHeader {
    font-weight: bold;
    font-size: 1.2em;
}

.SendMailshotTable tr td {
    padding: 5px;
}

div#mainright table tr th.extrasmallcol, div#mainright table tr td.extrasmallcol {
    width: 6% !important;
}


div#mainright table tr th.smallcol, div#mainright table tr td.smallcol {
    width: 8% !important;
}

div#mainright table tr th.smallmedcol, div#mainright table tr td.smallmedcol {
    width: 14% !important;
}

div#mainright table tr th.tenpercentcol, div#mainright table tr td.tenpercentcol {
    width: 10% !important;
}

div#mainright table tr th.medcol, div#mainright table tr td.medcol {
    width: 14% !important;
}

div#mainright table tr th.bigcol, div#mainright table tr td.bigcol {
    width: 16% !important;
}

div#mainright table tr th.extraLargecol, div#mainright table tr td.extralargecol {
    width: 25% !important;
}


.confirmationPopup {
    padding: 10px;
}

    .confirmationPopup label,
    .confirmationPopup a {
        font-size: 1.2em;
    }

    .confirmationPopup ul {
        padding-left: 40px;
        line-height: 1.8em;
    }

    .confirmationPopup .chkConfirm label {
        font-weight: bold;
    }

/*Attachment Upload*/
.outerupload {
    background-color: #f4f4f4;
    padding: 5px;
    font-size: 14px;
}

    .outerupload .innerupload {
        text-align: center;
        display: block;
        word-wrap: break-word;
        width: 170px;
        margin: 0 auto;
    }

    .outerupload .box__dragndrop,
    .outerupload .box__uploading,
    .outerupload .box__success, .box__file, .box__error {
        display: none;
    }

    .outerupload .box {
        margin-bottom: 5px;
    }

        .outerupload .box.has-advanced-upload .box__dragndrop {
            display: inline;
        }

        .outerupload .box.is-dragover {
            background-color: grey;
        }

        .outerupload .box.pending-upload .uploadbutton,
        .outerupload .box.is-uploading .box__uploading,
        .outerupload .box.is-success .box__success,
        .outerupload .box.has-error .box__error,
        .outerupload .box.first-upload .box__input .first__upload,
        .outerupload .box.pending-upload .box__input .pending__upload,
        .outerupload .box.subsequent-upload .box__input .subsequent__upload {
            display: block;
        }

        .outerupload .box .uploadbutton,
        .outerupload .box.is-uploading .box__input,
        .outerupload .box.is-success .box__input,
        .outerupload .box.has-error .box__input,
        .outerupload .box .box__input .pending__upload,
        .outerupload .box .box__input .subsequent__upload,
        .outerupload .box .box__input .first__upload,
        .outerupload .box.pending-upload .box__input .first__upload,
        .outerupload .box.pending-upload .box__input .subsequent__upload {
            display: none;
        }

    .outerupload .box__button {
        display: none;
    }

    .outerupload .no-js .box__button {
        display: block;
    }

    .outerupload input.button {
        width: 100% !important;
        box-shadow: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .outerupload .box div.message {
        height: 100%;
        text-align: center;
        font-weight: bold;
    }

        .outerupload .box div.message img {
            height: 100%;
        }





body.is-dragover .outerupload .box.has-advanced-upload {
    padding: 0;
    border: 2px dashed #C8C8C8;
}

.outerupload .box.has-advanced-upload.is-dragover {
    padding: 0;
    border: 2px dashed #C8C8C8;
}

.outerupload .box.has-advanced-upload {
    padding: 2px;
}


/*End Attachment Upload*/


div.fileAttachment {
    margin: 5px;
    padding: 3px 0;
}

    div.fileAttachment span {
        float: left;
        margin-top: 2px;
    }

    div.fileAttachment img {
        margin-top: 2px;
        margin-left: 15px;
        width: 15px;
        float: left;
        cursor: pointer;
    }

img.documentAttachment {
    margin-left: 0 !important;
    margin-right: 10px;
    margin-top: 0 !important;
    cursor: default !important;
}

.linkColour {
    color: #D31145;
}

/**********************Popup box**************************/

.popupBox {
    background-color: #FFFFFF;
    color: #000000;
    padding: 0px;
    margin: 0px;
    position: absolute;
    min-width: 600px;
    top: 80px;
    overflow: hidden !important;
}

.DocumentGeneration .popupBox {
    min-width: 370px;
}

.popupBarBack {
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    padding: 0px;
    cursor: move;
    white-space: nowrap;
    height: 60px;
}

.popupBarFront {
    padding: 23px 23px 2px 23px;
    height: 60px;
    white-space: nowrap;
}

.popupBarTitle {
    white-space: nowrap;
    float: left;
    font-size: 1.5em;
    font-weight: normal;
}

.popupClose {
    float: right;
    cursor: pointer;
    white-space: nowrap;
}

.popupContent {
    padding: 30px;
    background-color: #FFFFFF;
    text-align: left;
}

    .popupContent label.label {
        font-size: 1.2em;
        padding-right: 10px;
    }

    .popupContent label.titlelabel,
    .popupContent p.fieldstitle {
        color: #585858;
        font-size: 1.4em;
        font-weight: bold;
        padding-right: 10px;
        margin: 10px 0;
    }

    .popupContent p.fieldstitle {
        padding: 40px 10px 20px 0;
    }

    .popupContent select {
        width: 310px;
        border: 1px solid #ccc;
        padding: 5px;
        font-size: 1.2em;
        margin: 0 10px 0 0;
    }

div#errorContainerDiv {
    width: 700px;
    margin: auto;
}

    div#errorContainerDiv div.popupContent p.boldcontent {
        font-size: 1em;
        font-weight: bold;
        padding-bottom: 15px;
        color: #333333;
    }

    div#errorContainerDiv div.popupContent p.normcontent {
        font-size: 0.9em;
        padding-bottom: 25px;
        color: #333333;
    }

div#maincontainer div#mainright div.popupContent .settingsleft {
    width: 337px;
    float: left;
    padding: 0;
}



div#maincontainer div#mainright div.popupContent .settingsright {
    width: 45px;
    float: left;
}

div#maincontainer div#mainright div.popupContent .settingsadded {
    width: 385px;
    float: left;
    padding: 0;
}

div#maincontainer div#mainright div.popupContent .updown {
    float: right;
}

    div#maincontainer div#mainright div.popupContent .updown input {
        padding-left: 15px;
    }

        div#maincontainer div#mainright div.popupContent .updown input.removeimg {
            padding-left: 30px;
        }

div#maincontainer div#mainright div.popupContent div.left {
    width: 420px;
    margin: 0 10px 0 0;
}

div#maincontainer div#mainright div.popupContent div.right {
    width: 420px;
}



div#maincontainer div#mainright div.popupContent div.leftcolumns {
    width: 240px;
    margin: 0 10px 0 0;
    float: left;
}

div#maincontainer div#mainright div.popupContent div.rightcolumns {
    width: 240px;
    float: left;
}


.greybox {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
    background-color: black;
    filter: alpha(opacity=75);
    opacity: 0.75;
}

* html .greybox {
    position: absolute;
}


.popup.levelOne .greybox {
    z-index: 1100;
}

.popup.levelOne .popupBox {
    z-index: 1200 !important;
}

.popup.levelTwo .greybox {
    z-index: 1300;
}

.popup.levelTwo .popupBox {
    z-index: 1400;
}

.popup.levelThree .greybox {
    z-index: 1500;
}

.popup.levelThree .popupBox {
    z-index: 1600;
}

/**********************END Popup box**************************/

ul.listHorizontalStack {
    list-style: none;
    font-size: 10px;
}

    ul.listHorizontalStack li {
        float: left !important;
        margin-left: 30px;
    }

        ul.listHorizontalStack li:first-child {
            margin-left: 0 !important;
        }

    ul.listHorizontalStack li {
        margin-top: 10px;
    }
