/*GLOBAL*/
html {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

    *, *:before, *:after {
        box-sizing: inherit;
    }

.col-centered {
    float: none;
    margin: 0 auto;
}

.noMarg {
    margin: 0;
}

.noPad {
    padding: 0;
}

.clear {
    clear: both;
}

.text-left {
    text-align: left;
}

/*HEADER*/
.wrapperHeader {
    border-top: 5px solid #075290;
}

.mainHeader {
    padding: 10px 0;
}

.logo {
    margin-left: 0;
}

.nccd-titlebar h1 {
    color: #fff;
    margin-left: 15px;
}

.carouselWrapper {
    margin-bottom: 40px;
}


.templateVersion {
    padding-left: 15px;
    background: #e0e0e0;
    border: 1px solid#e5e5e5;
}

/*MAIN CONTENT*/

.galleryBoxWrap {
    margin-bottom:40px;
}

.galleryBox {
    padding-bottom: 0;
    height: 250px;
}

    .galleryBox img {
        display: block;
        padding: 0 15px;
        margin: 0;
    }

    .galleryBox h2 a {
        color: #fff;
    }

    .galleryBox a img {
        opacity: 1;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
    }

        .galleryBox a img:hover {
            opacity: 0.5;
        }


.home h1 {
    margin: 0 0 40px 0;
    font-size: 30px;
    color: #000;
}

.codeNav a .fa.fa-home {
    font-size: 30px;
    display: inline-block;
    position: relative;
    top: 8px;
    margin-right: 15px;
    color: #000;
}

    .codeNav a .fa.fa-home:hover {
        color: #414141;
    }

.galleryTitles a {
    color: #fff;
}


/*Template Routes*/
.wrapCodeSnippet {
    background: #e5e5e5;
    border: 1px solid#ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 15px;
    margin: 15px 0 30px 0;
}

    .wrapCodeSnippet input {
        width: 100%;
        padding: 10px;
    }

.codeSnippetTextarea {
    width: 100%;
    height: 200px;
}

.nccd-toolTitle h4 {
    color: #fff;
    margin: 0 0 20px 0;
    padding: 5px 15px;
}

.content {
    margin-top: 20px;
}

/*CAROUSEL*/
.carouselWrapper {
}

.wrapCounter {
    color: #fff;
    background: #212121;
    text-align: center;
    padding: 10px 0;
    opacity: .8;
}

.carouselV1Container {
    display: none;
}

    .carouselV1Container input {
        padding: 15px;
        width: 100%;
    }

span.carouselTitle {
    display: block;
}

/*DATA TABLE 1*/

/*HIDING TABLE*/

.wrapperTable1 {
    display: none;
}

.wrapperTable1 {
    margin-top: 20px;
    overflow: hidden;
    margin-bottom: 40px;
}

#dataTable {
    margin-top: 20px;
}

/*PAGINATION*/
.wrapPaginationTop {
    margin-bottom: 20px;
}

.table-pagination-inline {
    padding-left: 15px;
}

.multiPagePaginator .mp-pagination li.disabledHyperlink a {
    color: #c0c0c0 !important;
}

.multiPagePaginator .mp-pagination ul, .multiPagePaginatorToc .mp-pagination ul {
    text-align: center;
}

.multiPagePaginator {
    margin: 20px 0;
}

#body li.disabledHyperlink, .disabledHyperlink a {
    background-color: #f0f0f0;
    color: #404040;
}

.multiPagePaginator .mp-pagination li, .multiPagePaginatorToc .mp-pagination li {
    display: inline-block;
    margin: 0 4px;
}

.multiPagePaginator .mp-pagination ul, .multiPagePaginatorToc .mp-pagination ul {
    text-align: center;
    margin: 0 auto;
}

.multiPagePaginator .mp-pagination li a, .multiPagePaginatorToc .mp-pagination li a {
    cursor: pointer;
}

#multiPagePaginator, .multiPagePaginatorToc {
    padding-top: 0px !important;
}

.table-pagination-inline {
    display: inline-block;
}



/*Table 1 Code Snippet Styling*/

.flip-snippet {
    perspective: 800px;
    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    margin: 1em auto;
    border: solid 1em white;
    border-radius: 0.5em;
    font-family: Georgia;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}

    .flip-snippet:hover {
        box-shadow: 0 0 1em black;
    }

    .flip-snippet.flipped {
        transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -webkit-transform: rotateY(-180deg);
    }

    .flip-snippet .face {
        padding: 1em;
        text-align: center;
        backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    .flip-snippet .snippet-front {
        display: inline-block;
    }

    .flip-snippet.flipped .snippet-front {
        display: none;
    }

    .flip-snippet .snippet-back {
        background-color: rgba(0,0,0,0.075);
        color: black;
        transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        display: none;
    }

    .flip-snippet.flipped .snippet-back {
        display: block;
    }

.code-snippet-code {
    padding: 5px;
    font-size: 1.3em;
    border-radius: 7px;
    box-shadow: 0 5px 5px lightgrey;
}

.data-table-snippet {
    height: 5% !important;
    width: 80%;
}

    .data-table-snippet.text {
        color: red;
    }

/*Header Title Snippet Styling*/
.headerTitleContainer {
    display: none;
}

    .headerTitleContainer input {
        width: 100%;
        height: 5%;
        text-align: center;
    }

.header-title-example {
    text-align: center;
}

/*FACETED SEARCH*/
/*Search Text Box*/

.searchResults input {
    height: 30px;
}

#tbxSearch,
button.navSubmitSearch {
    height: 30px;
}

#tbxSearch {
    border-radius: 20px 0 0 20px;
    -moz-border-radius: 20px 0 0 20px;
    -webkit-border-radius: 20px 0 0 20px;
}

button.navSubmitSearch {
    border-radius: 0px 20px 20px 0px !important;
    -moz-border-radius: 0px 20px 20px 0px !important;
    -webkit-border-radius: 0px 20px 20px 0px !important;
}

/*Facets*/
/**ID's AND CLASS NAMES ARE SUBJECT TO CHANGE. THIS IS TEMPORARY AND WILL BE REMOVE. FOR TEMPORARY RD TEAM VIEW STYLING PURPOSES ONLY*/

aside[class*="span"] {
    margin: 0;
    padding: 0;
}

.facetgroup {
    background: #f0f0f0;
    border: 1px solid #D6D4D4;
}

.inner-content {
    margin: 0 0 20px 0;
    padding: 15px;
    background: #e0e0e0;
}

.facets h4 {
    background: #212121;
    color: #e0e0e0;
    padding: 10px 15px;
    margin: 0 0 15px 0;
}

.facets label,
.facets span {
    margin-left: 15px;
}

/*TABS*/

.wrapTabs {
    display: none;
}

ul.ui-tabs-nav.ui-helper-reset.ui-helper-clearfix.ui-widget-header.ui-corner-all {
    background: #eaeaea; /* Old browsers */
    background: -moz-linear-gradient(top, #eaeaea 1%, #cccccc 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #eaeaea 1%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #eaeaea 1%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    background: #f3f3f3;
}


/*Faceted Search*/

.facetedSearchFilterDiv {
    background: red;
}

    .facetedSearchFilterDiv ul {
        margin: 0;
        padding: 0;
    }


/*BUTTONS*/
.button-demo-container {
    background: #EFEBEB;
    padding-top: 2%;
    text-align: center;
}

.btn-demo-container {
    display: none;
}

    .btn-demo-container input {
        width: 100%;
        height: 5%;
        text-align: center;
    }