﻿            <style type="text/css">
                /******************************/
                /* Colorbox                   */
                /******************************/
                .cbInner /* Content that displays inside a colorbox */ {
                    color: White;
                    margin-top: 0px;
                    margin-bottom: 0px;
                    margin-left: auto;
                    margin-right: auto;
                    padding: 2%;
                    max-width: 100%;
                    max-height: 100%;
                    border: 2px solid #bfc9e4;
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    border-radius: 5px;
                    background: #333;
                }

                    .cbInner a {
                        color: orange;
                        font-weight: bold;
                    }

                /* Close button */
                #cboxClose {
                    background-color: #71D09F;
                    color: white;
                    height: 50px;
                    width: 75%;
                    margin-left: 12.5%;
                    margin-top: -5%;
                    cursor: pointer;
                    font-weight: bold;
                    font-size: 1.3em;
                    display: none;
                    border: 2px solid white;
                    -webkit-border-radius: 3px;
                    -moz-border-radius: 3px;
                    border-radius: 3px;
                }

                    #cboxClose:hover {
                        background-color: #5AA67F;
                    }

                #cboxOverlay {
                    position: fixed;
                    height: 6000px;
                }


                /* Table that appears on the main admin page and on the BCC Continuing Education listing page */
                .bccContEdTable {
                    border-spacing: 0px;
                }

                    .bccContEdTable td {
                        width: 40px;
                        border-bottom: 1px solid #000; /* #dddddd */
                        border-right: 1px solid #000;
                        vertical-align: middle;
                        text-align: center;
                    }

                    .bccContEdTable tr td:first-child {
                        border-left: 1px solid #000;
                    }

                    .bccContEdTable td.editCell { /* Edit cells */
                        width: 60px;
                        background-color: #33CCFF;
                        font-weight: bold;
                    }

                .editLink {
                    color: white !important;
                    font-size: 1.8em;
                }

                    .editLink:hover {
                        color: black !important;
                        text-decoration: none;
                    }

                .bccContEdTable td.deleteCell { /* Delete cells */
                    width: 60px;
                    background-color: Red;
                    font-weight: bold;
                }

                .deleteLink {
                    color: white !important;
                    font-size: 1.15em;
                }

                    .deleteLink:hover {
                        color: black !important;
                        text-decoration: none;
                    }

                .bccContEdTable td.courseTitleCell { /* Course title */
                    max-width: 200px;
                    min-width: 200px;
                    text-wrap: normal;
                }

                .courseTitleCell p {
                    font-style: italic;
                    max-width: 200px;
                    overflow-wrap: break-word;
                    -ms-word-wrap: break-word;
                }

                .bccContEdEvenRow { /* Alternating background colors for each row */
                    background-color: white;
                }

                    .bccContEdEvenRow td {
                        padding: 3px;
                    }

                .bccContEdOddRow {
                    background-color: #E6E6E6;
                }

                    .bccContEdOddRow td {
                        padding: 3px;
                    }

                .bccContEdInactiveRow td {
                    border-color: red; /* For rows marked as not active */
                    border-top: 1px solid red;
                }

                .programLink {
                    font-weight: bold; /* Program/course name */
                }

                /* Hidden row with contact information. Activated when 'More info' is clicked */
                .contactRow {
                    display: none;
                }

                    .contactRow td {
                        text-align: left;
                        font-size: 14px;
                        color:white;
                        padding: 5px;

                    }

                .contactRow a {
                    color:#34495E;
                }

                .expandLink:hover {
                    cursor: pointer;
                }

                .contactCell {
                    background-color: #f39662;
                }

                .contactAdminCell:first-child {
                    border-left: 0 !important; /* Cells in the contact row below the Edit and Delete buttons */
                    border-right: 0 !important;
                }

                .bccContEdTable .contactRow:last-child .contactAdminCell {
                    border-bottom: 0; /* Also remove the bottom border from the last row's contact info section */
                }


                .bccContEdTable th {
                    border-bottom: 1px solid #000;
                    cursor: pointer;
                }

                    .bccContEdTable th.rotate-45 {
                        height: 144px; /* 80px */
                        width: 40px;
                        min-width: 40px;
                        max-width: 40px;
                        position: relative;
                        vertical-align: bottom;
                        padding: 0;
                        font-size: 11px;
                        line-height: 0.8;
                        z-index: -1;
                    }

                        .bccContEdTable th.rotate-45 > div {
                            position: relative;
                            top: 0px;
                            left: 71px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle */ /* 40px */
                            height: 100%;
                            -ms-transform: skew(-45deg,0deg);
                            -moz-transform: skew(-45deg,0deg);
                            -webkit-transform: skew(-45deg,0deg);
                            -o-transform: skew(-45deg,0deg);
                            transform: skew(-45deg,0deg);
                            overflow: hidden;
                            border-left: 1px solid #dddddd;
                            border-right: 1px solid #dddddd;
                            border-top: 1px solid #dddddd;
                        }

                        .bccContEdTable th.rotate-45 span {
                            -ms-transform: skew(45deg,0deg) rotate(315deg);
                            -moz-transform: skew(45deg,0deg) rotate(315deg);
                            -webkit-transform: skew(45deg,0deg) rotate(315deg);
                            -o-transform: skew(45deg,0deg) rotate(315deg);
                            transform: skew(45deg,0deg) rotate(315deg);
                            position: absolute;
                            bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
                            left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
                            display: inline-block;
                            width: 90px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/ /* 85px */
                            text-align: left;
                            letter-spacing: 3px;
                            line-height: 12px;
                            white-space: nowrap; /*whether to display in one line or not*/
                        }


                /* Sort headings row */
                #bccTitleSort, #bccDeliverySort, #bccScreeningSort, #bccCoachingSort, #bccAssSort, #bccIndividualsSort, #bccBusinessSort, #bccEthicsSort, #bccHoursSort {
                    /*background-image: url('/Images/UpDownArrow.png');*/ /* Default to up-down, then toggle between up and down on clicks */
                    background-repeat: no-repeat;
                    background-position-x: center;
                    min-width: 64px;
                    height: 32px;
                    cursor: pointer;
                }

                /* Title sort */
                #bccTitleSort {
                    background-color: #3399FF;
                }
                /* Delivery Method sort */
                #bccDeliverySort {
                    background-color: orange;
                }
                /* Competency Areas sort */
                #bccScreeningSort, #bccCoachingSort, #bccAssSort, #bccIndividualsSort, #bccBusinessSort, #bccEthicsSort {
                    background-color: #FFCC00;
                }
                /* Total Hours sort */
                #bccHoursSort {
                    background-color: #00CC66;
                }

                /* Sorting Misc. */
                #resetButton {
                    font-weight: bold;
                    cursor: pointer;
                    color: #3399FF;
                }

                /* Edit, Delete & Course Title headings */
                #bccEditHeading, #bccTitleHeading, #bccDeleteHeading {
                    vertical-align: bottom;
                    background-color: #3399FF;
                }

                    #bccTitleHeading div span {
                        font-size: 1.2em;
                        cursor: pointer;
                    }
                /* Triangle CSS3 shape to fill in the gap between Course Title and other headings on Admin page */
                #blueTriangle {
                    position: relative;
                    left: 85%;
                    top: 20px;
                    border-top: 150px solid #3399FF;
                    border-right: 150px solid transparent;
                    z-index: -1; /* Hide the bottom corner */
                }
                /* Triangle CSS3 shape in /BCC/ContinuingEducationOpportunities */
                #blueTrianglePublic {
                    position: relative;
                    left: 95%;
                    top: 22px;
                    border-top: 150px solid #3399FF;
                    border-right: 150px solid transparent;
                    z-index: -1; /* Hide the bottom corner */
                }


                /* Delivery Method heading */
                #bccDeliveryHeading > div {
                    background-color: orange;
                }
                /* Competency Areas headings */
                #bccScreeningHeading > div, #bccCoachingHeading > div, #bccAssHeading > div,
                #bccIndividualsHeading > div, #bccBusinessHeading > div, #bccEthicsHeading > div {
                    background-color: #FFCC00;
                }
                /* Total Hours heading */
                #bccHoursHeading > div {
                    background-color: #00CC66;
                }

                /* Add a new listing table */
                #bccAdminAddTable td {
                    padding: 3px;
                }

                #bccAdminAddTable tr td:first-child {
                    text-align: right;
                    font-weight: bold;
                    color: purple;
                }

                #bccAdminAddTable tr td:nth-child(3) {
                    text-align: right;
                    font-weight: bold;
                    color: purple;
                }

                /* Edit a listing table */
                /* Add a new listing table */
                #bccAdminEditTable td {
                    padding: 3px;
                }

                #bccAdminEditTable tr td:first-child {
                    text-align: right;
                    font-weight: bold;
                    color: purple;
                }

                #bccAdminEditTable tr td:nth-child(3) {
                    text-align: right;
                    font-weight: bold;
                    color: purple;
                }

                /* Add record */
                #addButton {
                    height: 40px;
                    width: 100px;
                    margin: auto;
                    background-color: orange;
                    font-weight: bold;
                    color: white;
                    font-size: 1.3em;
                    text-align: center;
                    border: 2px solid black;
                    border-radius: 4px;
                    -webkit-border-radius: 4px;
                    -moz-border-radius: 4px;
                }

                    #addButton:hover {
                        cursor: pointer;
                        background-color: #FF1919;
                    }

                    #addButton span {
                        line-height: 3em;
                    }

                #resultDiv {
                    text-align: center; /* Results message */
                }

                .bccContEdNewRow {
                    background-color: aliceblue; /* Newly added row gets special styling */
                }

                    .bccContEdNewRow td {
                        border-top: 2px solid Blue;
                        border-bottom: 2px solid Blue;
                    }

                        .bccContEdNewRow td:first-child {
                            border-left: 2px solid blue !important;
                        }

                        .bccContEdNewRow td:last-child {
                            border-right: 2px solid blue;
                        }

                /* Save record (Edit) */
                #saveButton {
                    height: 40px;
                    width: 100px;
                    margin: 10px;
                    background-color: green;
                    font-weight: bold;
                    color: white;
                    font-size: 1.3em;
                    text-align: center;
                    border: 2px solid black;
                    border-radius: 4px;
                    -webkit-border-radius: 4px;
                    -moz-border-radius: 4px;
                    display: inline-block;
                }

                    #saveButton:hover {
                        border: 3px solid black;
                        cursor: pointer;
                        background-color: #3399FF;
                    }

                    #saveButton span {
                        line-height: 3em;
                    }

                /* Back button (Edit) */
                #backButton {
                    height: 40px;
                    width: 100px;
                    margin: 10px;
                    background-color: Orange;
                    font-weight: bold;
                    font-size: 1.3em;
                    text-align: center;
                    border: 2px solid black;
                    border-radius: 4px;
                    -webkit-border-radius: 4px;
                    -moz-border-radius: 4px;
                    display: inline-block;
                }

                    #backButton:hover {
                        border: 3px solid black;
                        cursor: pointer;
                        background-color: #FF1919;
                    }

                    #backButton span {
                        line-height: 3em;
                    }

                    #backButton a {
                        color: white !important;
                        text-decoration: none;
                    }

                #editButtonsCell {
                    text-align: center !important;
                }

                /* Fix for Chrome - Removes arrows from number input */
                input::-webkit-outer-spin-button,
                input::-webkit-inner-spin-button {
                    /* display: none; <- Crashes Chrome on hover */
                    -webkit-appearance: none;
                    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
                }

                /* Fix for Firefox - Removes arrows from numeric input */
                input[type="number"] {
                    -moz-appearance: textfield;
                }
            </style>
