.clearfix:after {
        content: ".";
        display: block;
        height: 0px;
        clear: both;
        visibility: hidden;
    }
    .clearfix { display: inline-block; }
    * html .clearfix { height: 1%;}
    .clearfix { display: block; }

#authModal{
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1000000000;
    text-align: center;
}

#authModal > div{
    padding:0.5em;
    height:12em;
    width:45em;
}

#authModal .authModalTitle{
    font-size:1.25em;
    margin-bottom:.25em;
}

#authModal .authModalContent{
    position:relative;
    height:10em;
    width:50%;
    margin-left: -0.125em;
}

#authModal .authModalContent2{
    position:absolute;
    top:0px;
    left:100%;
    height:10em;
    width:100%;
}

#authModal .authModalControl{
    background: transparent;
    padding:0.5em;
    width:90%;
    height:8em;
    color: #FFFFFF;
}

#authModal .authModalControl button{
    height:3em;
    white-space: nowrap;
    width: 90%;
}

.absoluteCenter{
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
}

    body {
        background-color: #ffffff;
        margin: 0 0;
        min-width: 850px;
        font-family: Tahoma, Helvetica, Geneva, Swiss, SunSans-Regular, Serif;
    }
    div#topbar {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        width: 95%;
        background-color:#ffffff;
        padding: 0 6px; /* 6px for the 3 border and the 3 padding in the outer1 div */
        height: 60px;
    }
    div#topbar img.topleft {
        margin-top: 7px;
        top: 0;
        left: 0;
    }
    div#topbar img.topright {
        position: absolute;
        margin-top: 5px;
        top: 0;
        right: 0;
    }
    div#outer1 {
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        background-color: #1059a4;
        padding: 3px 6px 0px 6px;
    }
    div#outer2 {
        margin-left: auto;
        margin-right: auto;
        background-color: #1059a4;
        padding: 3px;
    }
    div#maincontent {
        margin-left: auto;
        margin-right: auto;
        margin-top: 2px;
        background-color: #ffffff;
        padding: 2px;
    }

 /*
    The navigation bar - this version is compatible with ie
 */
    div#navigationbar {
        background-color: #A0A1A3;/*B47846*/
        position: relative;
        font-size: .75em;
    }
    div#navigationbar div {
        margin-left:5px;
        text-align: center;
    }
     div#navigationbar div.right {
       border-left: 1px solid white;
       padding: 0px 0px 0px .40em;
    }
    div#navigationbar a {
        color: white;
        font-size: .75em;
        text-decoration: none;
    }
    div#navigationbar a:hover { color: yellow; }
    div#navigationbar a img {
        border-width: 0px;
        margin-bottom: .2em;
        padding-left: 5px;
        text-align:center;
    }


    div#modulebar {
        background-color: #1059a4;
        padding: 5px;
        /*height: 1.0em;*/
        font-weight: bold;
        color: white;
        margin: 2px 2px;
    }
    div#modulebar * {
        margin-top: auto;
        margin-bottom: auto;
    }
    div#modulebar span#centername {
        font-weight: bold;
        font-size: 16px;
        margin-right: .25em;
        margin-left: .25em;
    }
    div#modulebar span.module {
        font-size: 12px;
    }
    div#modulebar img {
        border-width: 0px;
        margin-right: .25em;
    }
    div#modulebar a {
        margin-right: .45em;
    }
    div#modulebar a:link    { color: #FFFFFF; text-decoration:none; }
    div#modulebar a:active  { color: #FFFFFF; text-decoration:none; }
    div#modulebar a:visited { color: #FFFFFF; text-decoration:none; }
    div#modulebar a:hover   { color: #CCCCCC; text-decoration:none; }
    div#mainbody {
        padding: 5px 0 0 0;
        font-family: verdana,arial,helvetica,sans-serif; font-size: small;
    }
    div#feedback {
        color: #f7dc35;
        color: #FFFFFF;
        padding: 5px;
        position: relative;
    }
    div#feedback_text a {
        /*color: #f7dc35;*/
        color: #FFFFFF;
        font-weight: bold;
        text-decoration: none;
        font-size: 1em;
        font-variant:small-caps;
        float: right;
    }
    input, textarea, select, file {
        font-size: 10px;
        font-family: Tahoma,Verdana,Arial,Helvetica;
        background-color: #FFFFFF;
        border: 1px solid #999999;
        color: #000000;
    }
    /* ************************************************************************ */
    div#mainbody A:link    { color: #242775; text-decoration:underline; }
    div#mainbody A:active  { color: #242775; text-decoration:underline; }
    div#mainbody A:visited { color: #242775; text-decoration:underline; }
    div#mainbody A:hover   { color: #000000; text-decoration:none; }
    /* ************************************************************************ */

    div#mainbody table.bordered {
        border-collapse: collapse;
        border: 1px solid black;
    }
    div#mainbody table.bordered thead tr{
        background-color: #666666;
    }
    div#mainbody table.bordered thead td {
        padding: .5em;
        color: #FFFFFF;
        font-weight: bold;
        border-bottom: 1px solid black;
    }
    div#mainbody table.bordered tbody td {
        padding: 0em 1em;
    }

    td.tablehead {
        background-color: #1059a4;
        color: #FFFFFF;
        height: 22px;
        font-size: 1.0em;
        font-weight: bold;
        padding: 5px 3px;
        border: none;
        white-space: nowrap;
    }

    div.countrySelect {
        border:2px solid #ccc; 
        width: auto; 
        height: 100px; 
        overflow-y: scroll;
        text-align: left;
    }

    div#mainbody td.tablehead A:link    { color: #ffffff; text-decoration:none; }
    div#mainbody td.tablehead A:active  { color: #ffffff; text-decoration:none; }
    div#mainbody td.tablehead A:visited { color: #ffffff; text-decoration:none; }
    div#mainbody td.tablehead A:hover   { color: #ffffff; text-decoration:none; }

    td.filter {
        background-color: #1059a4;/*82B446*/
        color: #FF0000;
        height: 22px;
        font-size: 1.0em;
        font-weight: bold;
        padding: 5px 3px;
        border: none;
        white-space: nowrap;
    }

    td.whitefilter {
        background-color: #FFFFFF;
        color: #FF0000;
        height: 22px;
        font-size: 1.0em;
        font-weight: bold;
        padding: 5px 3px;
        border: none;
        white-space: nowrap;
    }
    /* ************************************************************************ */
    td.tablehead A:link    { color: #FFFFFF; text-decoration:underline; }
    td.tablehead A:active  { color: #FFFFFF; text-decoration:underline; }
    td.tablehead A:visited { color: #FFFFFF; text-decoration:underline; }
    td.tablehead A:hover   { color: #CCCCCC; text-decoration:none; }
    /* ************************************************************************ */

    td.tablehead a.pageselected { color: #FFFFFF; text-decoration:underline; }

    td.tablecell {
        background-color: #DDDDDD;
        height: 22px;
        color: #000000;
        font-size: .9em;
        border: 1px solid white;
    }

    td.tablecell2 {
        background-color: #EEEEEE;
        height: 22px;
        color: #000000;
        font-size: .9em;
        border: 1px solid white;
    }

    tr.tablerow {
        background-color: #DDDDDD;
        height: 22px;
        color: #000000;
        font-size: .9em;
        border: 1px solid white;
    }

    tr.tablerow2 {
        background-color: #EEEEEE;
        height: 22px;
        color: #000000;
        font-size: .9em;
        border: 1px solid white;
    }

    tr.highlight {
        background-color: #66CCFF;
        height: 22px;
        color: #000000;
        font-size: .9em;
        border: 1px solid white;
    }

    tr.highlight2 {
        background-color: #99CCFF;
        height: 22px;
        color: #000000;
        font-size: .9em;
        border: 1px solid white;
    }

    td.tablecellback {
        background-color: #1059a4;/*82B446*/
        height: 22px;
        color: #000000;
        font-size: .9em;
    }

    table.admintable {
        padding: .5px;
        width: 100%;
        background-color: #FFFFFF;
        border: none;
        border-collapse: collapse;
    }

    div.wrap {
        display: block;
        float: none;
        clear: both;
        margin: 0px;
        padding: 0px;
        padding-top: 5px;
        padding-bottom:5px;
        margin-left: 5%;
        margin-right: 5%;
        border: none;
        background-color: #1059a4;
    }
    div.body {
        display: block;
        float: none;
        clear: both;
        padding: 0;
        border: 3px solid #1059a4;
        border-collapse: collapse;
        background-color: #DDDDDD;
        text-align: left;
        vertical-align: middle;
    }
    div.sectionhead{
        display: block;
        float: none;
        clear: both;
        padding: 3px;
        height: 22px;
        background-color: #1059a4;
        color: #FFFFFF;
        font-weight: bold;
    }
    div.section{
        display: block;
        padding: 3px;
        text-align: left;
    }
    div.column0{
        display: inline;
        float: left;
        clear: both;
        width: 25%;
        margin: 0px;
    }
    div.column1{
        display: inline;
        float: left;
        clear: none;
        margin: 0px;
        overflow: visible;
    }
    div.emailbody {
        display: block;
        float: none;
        clear: both;
        padding: 5px;
        width: 800px;
        margin-bottom: 20px;
        border: 1px solid #1059a4;
        border-collapse: collapse;
        background-color: #FFFFFF;
        text-align: left;
        vertical-align: middle;
    }

    div#mainbody a.selected {
        color: #000000;
    }

    div#mainbody a.pagelink {
        color: #ffffff;
        text-decoration: none;
    }

    .modalOverlay {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: none;
    }

    .noticeOverlay {
        position:fixed;
        top:50%;
        left:40%;
        font-size:5em;
        width:100%;
        display:none;
    }

    .noticeOverlay #formSaveSpinnerDiv{
        height: 150px;
    }
    .noticeOverlay div {
        font-size:0.5em;
        clear:both;
    }

    .warning {
        font-weight: bold;
        font-size: 1.1em;
        color: #FF0000;
    }
    .button {
        font-weight: normal;
    }
    .buttonArea{
        margin-bottom: 5px;
        white-space: nowrap;
        background-color: inherit;
    }

    div#adminpage {
        padding: 2px 2px;
        position: relative;
    }
    div#outconfig {
        padding: 2px 2px;
        position: relative;
        background-color: #000000;
        width: 70%;
        margin: 0px auto;
    }
    div#config {
        padding: 2px 20px;
        position: relative;
        background-color: #EEEEEE;
    }
    div#adminpage table {
        border-collapse: collapse;
        display: inline;
        color: white;
        font-size: .75em;
        text-decoration: none;
        float: left;
        margin: 0px .25em 0px .25em;
    }
    div#adminpage table td {
        padding: 0px;
        margin: 0px;
        text-align: center;
    }
    div#adminpage a {
        color: white;
        font-size: 1em;
        text-decoration: none;
    }
    div#adminpage a img {
        border-width: 0px;
        margin-bottom: .2em;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    div.config_section {
        font-size: 1.5em;
        vertical-align: top;
    }
    div#feedback flags {
        padding-top: 5px;
    }
    div#flags a img {
        float: left;
        border: 1px solid yellow;
        padding: 0px;
    }

    div.border {
        background-color: #1059a4;
        margin: 0px auto;
        margin-right:5%;
        margin-left:5%;
        padding: 3px;
    }

    div.borderFull {
        background-color: #1059a4;
        margin: 0px auto;
        padding: 3px;
    }

    div.mediumborder {
        padding: 3px 3px;
        background-color: #1059a4;
        width: 60%;
        margin: 0px auto;
    }

    div.smallborder {
        padding: 3px 3px;
        background-color: #1059a4;
        width: 30%;
        margin: 0px auto;
    }

    div.statereportnumber {
        width:4em;
        float:left;
    }

    div.statereportoperator {
        width:2em;
        float:left;
    }

    table.reminders {
        background-color: #000000;
        width: 100%;
        border: #FFFFFF;
    }
    .noborder {
        border: none;
    }
    td.templates {
        font-style: oblique;
        font-weight: bold;
    }
    /* ************************************************************************ */
    td.templates A:link    { color: #FFFFFF; text-decoration:none; }
    td.templates A:active  { color: #FFFFFF; text-decoration:none; }
    td.templates A:visited { color: #FFFFFF; text-decoration:none; }
    td.templates A:hover   { color: #f7dc35; text-decoration:none; }
    /* ************************************************************************ */

    td.topic {
        font-size: large;
        font-style: oblique;
        font-weight: bold;
    }

    td.evenrow {
        background-color: #EEE9BF;
    }
/*
    //i had to move this into admin/index.php inline because i can't have two classes on one div and i need it clearfixed
    div#adminpage div.admin_center {
        margin-top: 1em;
    }
*/
    td.calendar_mouse_over {
        background: #C0C0C0;
    }

    td.calendar_event {
        color: #33CC00;
    }

    td.calendar_today {
        background: #99CCFF;
    }

    td.calendar_default {
        color: #0000BB;
    }

    /*
        Below are the css items I changed that appeared to be static
        or generic to the skins - maybe - but they are here for the distinction
        tinyText was added for the hints and notes in various places
    */
    .tinyText{
        font-size: xx-small;
    }
    td.tablecell {
        background-color: #DDDDDD;
        height: 22px;
        color: #000000;
        font-size: .9em;
        border: none;
        padding: 5px;
    }
    td.tablecell2 {
        background-color: #EEEEEE;
        height: 22px;
        color: #000000;
        font-size: .9em;
        border: none;
        padding: 5px;
    }
    div#modulebar span.module {
        font-size: 12px;
        padding: 5px;
    }
    .footer_text {
        color: #FFFFFF;
        text-decoration: none;
        font-size: 1em;
        font-variant:small-caps;
        white-space: nowrap;
    }
    .footer_text a {
        color: #FFFFFF;
        text-decoration: none;
        font-size: 1em;
        font-variant:small-caps;
        white-space: nowrap;
    }
    .right {
        float: right;
        margin-right: 1em;
        overflow: visible;
        vertical-align: middle;
        white-space: nowrap;
        background-color:inherit;
        block-overflow:float;
    }

   .left {
        float: left;
        margin-right: 1em;
        background-color:inherit;
        block-overflow:float;
   }
    .altHeaderLink{
        color: #FFFFFF;   /*when I need the link work with headers/footers*/
        font-weight: bold;
        text-decoration: none;
    }
    .altHeaderLink a:link{
        color: #FFFFFF;   /*when I need the link work with headers/footers*/
        font-weight: bold;
        text-decoration: none ! important;
    }
    .altHeaderLink a:visited{
        color: #FFFFFF;   /*when I need the link work with headers/footers*/
        font-weight: bold;
        text-decoration: none ! important;
    }
    div.filterHeader{
        text-align: left;
        padding: 0.2em 0px;
        line-height: 16px;
    }

    div.filterOpen, div.filterOpen.ui-state-hover{
        width:16px;
        border-style: none;
        float:left;
    }

    div#advancedSearch table td {
        padding: 10px;
        margin: 0px;
        text-align: right;
        width: 25%;
    }
    div#advancedSearch table td select {
            width:150px;
            vertical-align:top;
    }
    .checkbox, .radio {
       /* background: #1059A4;*/
       background: inherit;
       border: none;
       vertical-align: middle;
    }
    .totRecs {
        color: #FFFFFF;
        text-decoration: none;
        font-size: 1em;
        white-space: nowrap;
        font-weight: bold;
    }

/******** CONTACT PEOPLE LIST ******************/
    div.peopleList {

    }
    div.peopleList table {
        width: 100%;
        border: medium none;
        border-collapse: collapse;
        margin-bottom: 1em;
    }
    div.peopleList table tr.even_row{
        background-color: #EEEEEE ;
    }
    div.peopleList table tr.odd_row{
        background-color: #DDDDDD;
    }
    div.peopleList table td, div.peopleList table th{
        text-align: left;
        padding: 0.5em;
    }
    div.peopleList table th{
        background-color: #1059A4;
        color: #FFFFFF;
    }
    div.peopleList table td input:disabled{
        background-color: transparent;
        border: transparent solid 1px;
    }
    div.peopleList table td div.editable{
        min-width: 95%;
        min-height: 1.25em;
        padding-left: 0.25em;
        padding-right: 0.25em;
        border: transparent solid 1px;
    }
    div.peopleList table td div.editable[contenteditable='true']{
        background-color: #FFFFFF;
        border: gray solid 1px;
    }
    div.peopleList input.activePeoplePage{
        font-weight: bold;
        background-color: #4297D7;
        color: #FFFFFF;
    }
    div.peopleList table th:last-of-type{
        width: 10em;
    }
    div.peopleList table th:last-of-type input[type=button], div.peopleList table td:last-of-type input[type=button]{
        float:right;
    }
    div.peopleList table input[type=button]{
        margin-left: 0.25em;
        margin-right: 0.25em;
    }
    div.peopleList table th input{
        padding: 2px;
        min-width: 2em;
        text-align: center;
    }


/* punch clock stuff */
    span#totalTime{
        font-size:0.75em;
        font-weight:bold;
        margin-right:4px;
    }
    span.punchButton {
        padding:0px 4px;
        margin: 2px;
        cursor:pointer;
        text-align:center;
        font-size:1.25em;
        font-weight:bold;
        color:white;
        font-family: Segoe UI Symbol;
    }

    span.punchButton#addPunchClock{
        background-color: mediumseagreen;
        /*margin-left: 4px;*/
        padding: 0 5px;
    }

    span.punchButton#logPunchClock{
        background-color: royalblue;
        padding: 0 5px
    }

    span.punchButton#deletePunchClock{
        background-color: lightcoral;
        padding: 0 2px;
    }

    span.punchButton#clearAllPunchClocks{
        background-color: silver;
        padding: 0px 3px;
    }

    span.punchButton.punchClockClear{
        padding: 0px 2px;
    }

    div.punchClock.activeClock span.punchButton.punchClockClear{
        display:none;
    }

    span.punchButton.punchClockClose{
        padding: 0 6px;
    }

    div.punchClock.activeClock span.punchButton.punchClockClose{
        display:none;
    }

    span.punchButton.punchClockEdit{
        padding: 0px 3px;
    }

    div.punchClock {
        padding:5px;
        text-align: center;
        margin: 4px 4px;
        cursor: pointer;
        position:relative;
    }

    div#pausePunchClock{
        background-color: silver;
        color:white;
    }

    span.punchClockTime{
        font-weight: bold;
        padding-left:4px;
        padding-right:4px;
    }

    div.punchClock.activeClock span.punchClockTime{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    div.punchClock.activeClock{
        /*font-size: 1.5em;*/
    }

    span.punchTitle{
        float: left;
        text-align: right;
        width: 50%;
        margin:2px;
        clear:left;
    }

    .punchInput{
        float:left;
        margin:2px;
        max-width: 45%;
    }

    fieldset.punchEdit{
        margin-left: 4px;
        margin-right: 4px;
        border: 1px solid;
    }

    fieldset.punchEdit{
        text-align: left;
    }

    table.clocksTable{
        border-collapse: collapse;
        border-spacing: 0px;
        margin:1%;
        width:98%
    }

    table.clocksTable tr.noLog{
        color: silver;
    }

    table.clocksTable tr.noLog input, table.clocksTable tr.noLog select, table.clocksTable tr.noLog textarea{
        color: silver;
    }

    table.clocksTable th{
        font-size:0.75em;
    }

    table.clocksTable td{
        vertical-align: top;
        font-size:0.75em;
    }

    table.clocksTable tr.topRow .date-picker-control{
        margin-top:2px;
    }
    table.clocksTable tr.topRow input{
        margin-top:2px;
        width:100%;
        height:2em;
    }

    table.clocksTable tr.bottomRow{
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

    table.clocksTable tr.bottomRow input{
        margin-bottom:2px;
        width:100%;
        height:2em;
    }

    table.clocksTable select{
        margin-bottom:2px;
        width:100%;
        height:2em;
        min-width:99.5%;
    }

    table.clocksTable textarea{
        margin:2px 0px;
        width:100%;
        height:4.5em;
    }

    table.clocksTable tr.oddRow{
        background-color: #EEEEEE;
    }


    span.duplicateLogRow {
        padding:0px 4px;
        cursor:pointer;
        text-align:center;
        font-weight:bold;
        color:white;
        font-family: Segoe UI Symbol;
        background-color: mediumseagreen;
        margin-left: 4px;
        padding: 0 3px;
    }

    .absoluteCenter{
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow: auto;
    }

    div.punchControl{
        /*width: 90px;*/
        height: 30px;
        border: 1px solid;
        position:absolute;
        top: 1px;
        right: 1px;
        padding: 3px 1px 1px 1px;
    }

    #msgModal{
       z-index: 1000;
    }

    #msgDialog{
        z-index: 1001;
        max-width:90%;
    }

    #msgDialog>div{
        padding:3px;
        text-align: center;
    }

    #msgDialog input{
        margin: 0px 2px;
    }



    ol.listItems.plainList .sectionBody{
        padding: 0px;
    }

    ol.listItems.plainList .ui-widget-content{
        border: none;
    }

    ol.listItems.plainList .ui-widget-header{
        background: none;
        border:none;
    }


    ol.listItems .expandable .expanderDiv{
        margin: 0px;
    }

    div.processListItemContainer {
        width: 100%;
        margin-left: 0px;
        margin-top: 0.1em;
    }

    div.processListItemContainer table{
        width: 100%;
    }

    div.processListItemContainer table td{
        text-align: left;
        vertical-align: top;
    }

    div.processListItemContainer table td input{
        margin-top:0px;
    }

    div.processListItemContainer table td.processListContent{
        width: 100%;
    }

    div.processListItemContainer .processItem{
        width:100%;
    }

    ol.listItems li{
        list-style-type: none;
    }

    /*hide add button from level 5 on*/
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li input.addItemButton{
        display:none;
    }



    body{
        counter-reset: listItem1;
    }
    ol.listItems:not(ol.listItems ol.listItems){
        counter-reset: listItem2;
    }
    ol.listItems ol.listItems:not(ol.listItems ol.listItems ol.listItems){
        counter-reset: listItem3;
    }
    ol.listItems ol.listItems ol.listItems:not(ol.listItems ol.listItems ol.listItems ol.listItems){
        counter-reset: listItem4;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems:not(ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems){
        counter-reset: listItem5;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems:not(ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems){
        counter-reset: listItem6;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems:not(ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems){
        counter-reset: listItem7;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems:not(ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems){
        counter-reset: listItem8;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems:not(ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems){
        counter-reset: listItem9;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems:not(ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems){
        counter-reset: listItem10;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems:not(ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems){
        counter-reset: listItemStop;
    }


    ol.listItems>li{
        counter-increment:listItem1;
    }
    ol.listItems ol.listItems>li{
        counter-increment:listItem2;
    }
    ol.listItems ol.listItems ol.listItems>li{
        counter-increment:listItem3;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems>li{
        counter-increment:listItem4;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li{
        counter-increment:listItem5;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li{
        counter-increment:listItem6;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li{
        counter-increment:listItem7;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li{
        counter-increment:listItem8;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li{
        counter-increment:listItem9;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li{
        counter-increment:listItem10;
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li{
        counter-increment:listItemStop;
    }




    ol.listItems>li td:first-child:before{
        content:counter(listItem1);
    }
    ol.listItems ol.listItems>li td:first-child:before{
        content:counter(listItem1) "." counter(listItem2);
    }
    ol.listItems ol.listItems ol.listItems>li td:first-child:before{
        content:counter(listItem1) "." counter(listItem2) "." counter(listItem3);
    }
    ol.listItems ol.listItems ol.listItems ol.listItems>li td:first-child:before{
        content:counter(listItem1) "." counter(listItem2) "." counter(listItem3) "." counter(listItem4);
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li td:first-child:before{
        content:counter(listItem1) "." counter(listItem2) "." counter(listItem3) "." counter(listItem4) "." counter(listItem5);
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li td:first-child:before{
        content:counter(listItem1) "." counter(listItem2) "." counter(listItem3) "." counter(listItem4) "." counter(listItem5) "." counter(listItem6);
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li td:first-child:before{
        content:counter(listItem1) "." counter(listItem2) "." counter(listItem3) "." counter(listItem4) "." counter(listItem5) "." counter(listItem6) "." counter(listItem7);
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li td:first-child:before{
        content:counter(listItem1) "." counter(listItem2) "." counter(listItem3) "." counter(listItem4) "." counter(listItem5) "." counter(listItem6) "." counter(listItem7) "." counter(listItem8);
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li td:first-child:before{
        content:counter(listItem1) "." counter(listItem2) "." counter(listItem3) "." counter(listItem4) "." counter(listItem5) "." counter(listItem6) "." counter(listItem7) "." counter(listItem8) "." counter(listItem9);
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li td:first-child:before{
        content:counter(listItem1) "." counter(listItem2) "." counter(listItem3) "." counter(listItem4) "." counter(listItem5) "." counter(listItem6) "." counter(listItem7) "." counter(listItem8) "." counter(listItem9) "." counter(listItem10);
    }
    ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems ol.listItems>li td:first-child:before{
        content:"";
    }