header {
    margin-bottom: 20px;
}

#topnav {
    .navbar {
        margin-bottom: 0;
    }
}
#topsearch {
    padding: 15px 0;
    &, .navbar {
        background-color: #333;
    }
}

.item-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .item-grid-item {
        padding: 0 10px 20px;
        @media (min-width: $screen-sm-min) {
            width: 25%;
        }
        .main-image, .other-images {
            margin-bottom: 10px;
            img {
                width: 100%;
                height: auto;
            }
        }
        .other-images {
            display: flex;
            > * {
                width: 50%;
            }
        }
        .main-image {
            a {
                display: block;
            }
        }
        .item-image-stats {
            display: flex;
            justify-content: space-around;
            padding: 0 10px;
        }
    }
}

.drawingModeBtn {border: 1px solid orange; cursor: pointer; height: 25px; margin-bottom: 10px}

.form-drawing {border-bottom: 1px solid #C3C3C3; }

.form-drawing-wrapper .selected {border: 1px solid orange; color: white; background-color: orange}
.showPointer {cursor: pointer;}

.zoom-action-list {
	padding-left:21px;
}

.zoomTarget-wrapper {
	padding: 0px;
}

#zoomTarget {
	border: 1px solid #C3C3C3;
}

.no-padding {
	padding-left: 0;
	padding-right: 0;
}

.annotation-content{
	margin-top: 15px;
	margin-bottom: 15px;
}

.highlight {
	border: 1px solid orange;
}

.revision-proposal {
	background-color: #ECF0F1;
}

.collection-home-btn{
	margin-top: 5px;
}

.img-stats-dt{
	width: 250px !important;
}

.img-stats-dd{
	margin-left: 270px !important;
}

.revision-link:hover{
  	text-decoration: underline;
}

.item-image-thumbnail:hover{
	cursor: pointer;
}

ul.annotation-comments{
	background-color: #ededed;
}
li.list-group-item{
	border: 1px solid #bbb
}

.comment-form {

    $color-request-for-contribution: #f5e41c;
    $color-reference: #478ee0;
    $color-agree: #b8e986;
    $color-disagree: #ff7284;

    .btn-group-wrapper {
        text-align: center;
    }

    .form-group {
        margin-bottom: 10px;
    }

    .btn-group-metacategory {

        &.active {
            margin-bottom: 5px;
            padding-bottom: 0px;
            border-bottom: 2px solid #969696;
        }
        &.active.btn-group-request-for-contribution {
            border-bottom: 2px solid $color-request-for-contribution;
        }
        &.active.btn-group-reference {
            border-bottom: 2px solid $color-reference;
        }
        &.active.btn-group-agree {
            border-bottom: 2px solid $color-agree;
        }
        &.active.btn-group-disagree {
            border-bottom: 2px solid $color-disagree;
        }

        .btn {
            border: none;
            padding: 4px 8px;
            margin: 0 2px;
            border-radius: 0;
            border-radius: 4px !important;
        }
        .btn:first-child {
            margin-left: 0;
        }
        .btn:last-child {
            margin-right: 0;
        }
        .btn:focus,
        .btn.focus,
        .btn:active:focus,
        .btn:active.focus,
        .btn.active:focus,
        .btn.active.focus {
            outline: none;
        }
        .btn.active {
            padding: 4px 8px 8px;
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }
        .btn-comment {
            background-color: #969696;
            color: #fff;
            padding-left: 20px;
            padding-right: 20px;
            &:hover {
                background-color: darken(#969696, 10%);
            }
            &.active {
                padding-left: 20px;
                padding-right: 20px;
            }
        }
        .btn-request-for-contribution {
            background-color: $color-request-for-contribution;
            &:hover {
                background-color: darken($color-request-for-contribution, 10%);
            }
        }
        .btn-reference {
            background-color: $color-reference;
            color: #fff;
            &:hover {
                background-color: darken($color-reference, 10%);
            }
        }
        .btn-agree {
            background-color: $color-agree;
            &:hover {
                background-color: darken($color-agree, 10%);
            }
        }
        .btn-disagree {
            background-color: $color-disagree;
            &:hover {
                background-color: darken($color-disagree, 10%);
            }
        }
    }
}

.comment-reply-link{
	cursor: pointer;
}
.comment-subtext{
	font-size:0.9em;
	display:inline;
}
.comment-metacategories{
	font-size:0.9em;
	display:inline;
}
.comment-separator{
	margin-top: 10px;
	margin-bottom: 5px;
}

.pagination-shortcut{
	cursor: pointer;
}

/* BADGES */

.badge-error {
  background-color: #b94a48;
}
.badge-warning {
  background-color: #f89406;
}
.badge-success {
  background-color: #468847;
}
.badge-info {
  background-color: #3a87ad;
}
.badge-inverse {
  background-color: #333333;
}

.notif-badge{
  margin-bottom: 5px;
}

/* USER PAGE */

.show-all-notifications{
  cursor: pointer;
}
.annotation-panel{
	min-width: 535px;
}
.annotation-detail{
	display:inline-block;
	margin-right: 5px;
	margin-left: 5px;
	margin-top: 5px;
	white-space: normal;
	vertical-align: top;
	padding: 10px;
}

.stats-annotation-userpage{
	display:inline-block;
	vertical-align: top;
	padding: 10px;
}

.image-detail{
	display:inline-block;
	vertical-align: top;
	width:150px;
}
.large-image-detail{
	display:inline-block;
	vertical-align: top;
	width:400px;
}


.panel .dl-horizontal dt {
    white-space: normal;
	text-align: left;
}

.no-user-annotation{
	margin-left: 15px;
}
.dt-annotation{
	margin-bottom: 10px;
}
.userpage-annotation-btn{
	display:inline-block;
	vertical-align: top;
	margin-bottom:5px;
}

/* GLOBAL HOME PAGE */

.collection-title{
	margin-top:0px;
}

/* COLLECTION HOME PAGE */

.collection-summary{
	padding-bottom: 15px;
    .tab-pane {
        padding: 30px 0;
    }
    .fragment-container {
        margin-bottom: 20px;
    }
}

.collection-container{
	width:100%;
	padding-top: 15px;
	padding-bottom: 15px;
}

.tab-selector{
	margin-top: 15px;
}

.image-list-wrapper{
	margin-top: 15px;
}

li.image-list-li{
	margin-bottom: 5px;
	width: 370px;
	height: 430px;
	vertical-align:middle;
	padding:5px;
}
.image-list-image-container{
	 position: relative;
}
.object-info{
	margin-bottom:10px;
}
.collection-home-item-btn{
	margin-bottom:5px;
}
.collection-home-tab{
	cursor: pointer;
}


/* DIFF STYLE */

.diff-viewer-wrapper {margin-top: 5px;}
.diff-panel {border: 1px solid gray; width: 300px; heigth: 250px;}

del { text-decoration: line-through;	color: #b30000;	background: #fadad7;}

ins {	background: #eaf2c2; color: #406619; text-decoration: none; }

.diff-panel .close-btn {
	cursor: pointer;
	margin-right: 5px;
}

/* FOOTER STYLE */

footer div{
}


.partners-icons{
	margin-left: 20px;
}
.footer-link{
	margin-left: 20px;
}

.footer-info{
	margin-left:15px;
}

/* STATIC PAGES STYLE */

/* - LEGAL MENTIONS STYLE */

dl.legals-dl dd{
	margin-left: 10px;
}

/* HOME PAGE STYLE */

.show-complete-link, .hide-complete-link{
	cursor: pointer;
}

/* - COLLECTION HOME STYLE */

.description-col{
	padding: 10px;
}

.annotation-navigator {
    display: flex;
    margin-bottom: 30px;
    .annotation-navigator-list {
        width: 20%;
        .panel {
            max-height: 700px;
            height: 700px;
            overflow-y: auto;
        }
        .list-group-item {
            .list-group-item-heading {
                font-weight: bold;
                margin-bottom: 10px;
            }
            .close {
                display: none;
                line-height: floor(($font-size-small * $headings-line-height));
            }
            &.active .close {
                display: block;
                color: #fff;
            }
            .list-group-item-footer {
                margin-top: 10px;
                font-size: $font-size-small;
                text-align: right;
            }
        }
    }

    .annotation-navigator-canvas {
        width: 60%;
        height: 700px;
        padding: 0 15px;
    }

    .annotation-navigator-panel {
        width: 20%;
        height: 700px;

        display: flex;
        > div, .panel-body {
            display: flex;
            flex: 1;
        }
        .panel {
            margin-bottom: 0;
            overflow-y: auto;
        }
        .panel-body {
            flex-direction: column;
            .comment-form {
                padding: 10px 0;
            }
        }
    }
}

.annotation-navigator-metadata {
    margin-bottom: 30px;
    padding: 0 15px;
    dl {
        max-width: 60%;
        margin: 0 auto;
        margin-bottom: 20px;
    }
}