/*------------------------------------*\
    $VIEWER/VIEWER-VIEW.PHP
\*------------------------------------*/

#article-panel {
    height: 100%;
}

#article-panel h3 {
    color: #E8E7E5;
    padding: .75em;
    cursor: pointer;
}
#article-panel h3 {
    font-weight: 600;
}
#article-panel-label {
    font-weight: 500;
}
#article-panel-articles {
    overflow-y: auto;
    height: 100%;
}
#article-panel-category {
    font-size: .8em;
    color: #ccc;
    padding: 0 1em;
    line-height: 2em;
}
#article-panel-container {
    width: 350px;
    height: 100%;
    background-color: #F9F9F9;
    position: absolute;
    top: 0;
    right: -350px;
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: all .3s;
       -moz-transition: all .3s;
        -ms-transition: all .3s;
         -o-transition: all .3s;
            transition: all .3s;
}
#article-panel-container .toggle-articles {
    background-color: #7B7976;
    color: #fff;
    position: absolute;
    left: -142px;
    top: 92px;
    z-index: -1;
    height: 35px;
    width: 250px;
    padding-right: 1.5em;
    padding-top: 7px;
    text-align: right;
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
}
#article-panel-container .toggle-articles:hover,
#article-panel-container .toggle-articles:focus {
    color: #fff;
    text-decoration: none;
}
#article-panel-container .toggle-articles i {
    padding: 0 .5em;
}
#article-panel-label {
    background-color: #CCC9C3;
    margin: 0;
    padding: .5em .75em !important;
    color: #fff;
}
#article-panel-main {
    overflow-y: scroll;
    height: 95.5%;
}
#article-panel-icons {
    font-size: 1em;
}
#article-panel-icons a {
    color: #BAB8B6;
    text-decoration: none;
    display: block;
    visibility: visible;
}
#article-panel-icons i {
    padding: .3em 0em;
    color: #BAB8B6;
}
#article-panel-icons span {
    font-size: .8em;
    color: #9B9A98;
}
#article-panel-icons span:hover,
#article-panel-icons span:focus {
    color: #BAB8B6;
    text-decoration: underline;
}
#article-panel #toggle-hide,
#article-panel #toggle-show {
    padding: .4em;
    margin-left: .5em;
}

#cite-code {
    margin-bottom: 1em;
}

#content-canvas {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
         -o-transform: translateX(0);
            transform: translateX(0);
    -webkit-transition: all .3s;
       -moz-transition: all .3s;
        -ms-transition: all .3s;
         -o-transition: all .3s;
            transition: all .3s;
}

#content-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 775px;
}
#content-wrapper.show-nav #article-panel-container {
    -webkit-transform: translateX(-350px);
       -moz-transform: translateX(-350px);
        -ms-transform: translateX(-350px);
         -o-transform: translateX(-350px);
            transform: translateX(-350px);
}

#page-controls-mobile .btn-group .center-button,
#page-controls-mobile .btn-group .right-button {
	border-left: none !important;
}

#page-controls-mobile > div {
	margin-bottom: 0.2em !important;
}

#page-select {
    background-color: #586A6B;
    color: #fff;
    border-color: #637F7F;
}
#page-select li a:hover {
    background-color: #6D8182;
}

#publication-title {
    margin: .5em 0;
}

#shareModal .modal-body a {
    display: block;
    padding: .25em 0;
}
#shareModal .modal-body a:hover {
    text-decoration: none;
    color: #fff !important;
}

#viewer {
    -webkit-transition: all .3s;
       -moz-transition: all .3s;
        -ms-transition: all .3s;
         -o-transition: all .3s;
            transition: all .3s;
}

#viewer-navigation i {
    font-size: 1.5em;
}

#viewer-rights img {
    padding-top: .75em;
    margin: 0 auto;
    height: 32px;
}

#wikiModal .form-control[readonly] {
    cursor: text;
}

.article-panel-share-header {
    background-color: #7B7976;
}

.article-entry h3 {
    font-size: 1em;
    padding: 1em;
    margin: 0;
}
.article-entry p {
    font-size: .9em;
    text-align: justify;
    padding: .5em 0;
    margin: 0;
}
.article-entry p em {
    background: #F9E781;
    border-radius: 4px;
    padding: .1em;
    font-style: normal;
}
.article-entry:nth-child(odd) {
    background: #F2F0ED;
}
.article-entry .arrow:after {
    border-bottom-color: #128085;
}
.article-entry .popover {
    background-color: #4F5F60;
    border: 1px solid #128085;
    padding: 0;
}
.article-entry .popover-title {
    background-color: #128085;
    color: #fff;
    border-bottom: none;
}
.article-entry .popover-content {
    padding: 5px 10px;
}
.article-entry .popover-content i {
    color: #fff;
    padding: .5em 0;
}
.article-entry .toggle-arrow {
    float: right;
    top: -2em;
}

.article-segment.active {
    background: rgba(255, 197, 59, .3);
}
.article-segment.hover {
    background: rgba(123, 180, 183, .3);
}

.btn-viewer {
    background-color: #4F5F60;
    color: #fff;
    border-color: #4F5F60;
}
.btn-viewer:hover,
.btn-viewer:focus {
    background-color: #5E6A6B;
    color: #fff;
    border-color: #5E6A6B;
}

.centre-button:hover {
    color: #fff;
}

.content-viewer {
    background-color: #ccc;
    width: 100%;
}

.issue-date {
    font-size: 1em;
    line-height: .5em;
    color: #fff;
    font-weight: 600;
}

.highlight-segment {
    background: rgba(255, 127, 0, .5);
}

.restrict-height {
    max-height: 32em;
    overflow-y: auto;
}

.viewer-panel img {
    margin: .2em;
}

.shareModal,
.wikiModal {
    cursor: pointer !important;
}

#container-main, #article-panel {
	background-color: #4F5F60;
}

#content a {
	color: #fff;
}

#article-panel-label, .toggle-nav {
	background-color: #7B7976 !important;
}
.toggle-nav span {
	color: #fff;
}
.toggle-nav span:hover {
	text-decoration: none !important;
}
.article-entry {
	background-color: #47433F;
}
.article-entry:nth-child(odd) {
	background: #514F4D;
}
.article-entry h4 {
	color: #E8E7E5 !important;
}
.article-entry p {
	color: #F0ECE7;
	padding: 1em;
}

#article-panel-label {
	background-color: #72706A;
	color: #fff !important;
	font-size: 1.2em;
}

#content-header {
	-webkit-box-shadow: 0px 9px 6px -6px rgba(59,75,76,0.75);
	-moz-box-shadow: 0px 9px 6px -6px rgba(59,75,76,0.75);
	box-shadow: 0px 9px 6px -6px rgba(59,75,76,0.75);
}

em {
	background-color: #EFD599 !important;
	color: #47433F;
}

.modal-header, .modal-body, .modal-footer {
	color: #FFF !important;
	background-color: #4F5F60 !important;
}
.modal-header {
	padding: 20px;
	border-bottom: 1px solid #6D7C7C;
}
.modal-header .close {
	color: #B3CFD1 !important;
	opacity: 0.8;
	font-size: 1.2em;
	text-shadow: none;
}
.modal-title {
	color: #fff !important;
	padding-left: 0 !important;
} 
.modal-body a {
	color: #BEE6E8 !important;
}
.modal-footer {
	margin-top: 0;
	border-top: 1px solid #6D7C7C;
}

#viewer-rights {
    font-size: .7em;
    margin-bottom: 0;
}

/*------------------------------------*\
    XS 
    <768px
\*------------------------------------*/

@media (max-width: 767px) {

    #viewer-controls {
        font-size: 1.5em;
        text-align: center;
    }
    #viewer-controls a {
        color: #fff;
        font-size: 1.75em;
        padding: .2em .5em;
    }
    #viewer-controls #home,
    #viewer-controls #rotate-left,
    #viewer-controls #rotate-right {
        display: none !important;
    }

    #PrimaryViewer {
        height: 500px;
        width: 100%;
    }

}





/*------------------------------------*\
    XS & SM 
    <991px
\*------------------------------------*/
@media (max-width: 991px) {
    .container, #container-main {
        font-size: 90%;
    }
}





/*------------------------------------*\
    SM, MD & LG 
    >768px
\*------------------------------------*/

@media (min-width: 768px) {

    #PrimaryViewer {
        height: 790px;
        width: 100%;
    }

    #viewer-controls a {
        color: #fff;
        font-size: 1.45em;
        margin: 0 .2em;
    }
}