customstyle.less

body {
    padding-top: @navbar-height + @navbar-margin-bottom;
}

.footer {
    margin-top: 50px;
    color: @gray-light;
    a {
        color: @gray-light;
    }
}

.jumbotron {
    border: 1px solid @tkweb-border-color;
}

//== The calendar app
//
//##

.cal-baseline-fix {
    margin-top: 11px;
}

.cal-facebook-icon {
  display: inline-block;
  border-radius: 5px;
  width: 1em;
  padding: 0 0.1em;
  background-color: #fff;

  &:hover {
      background-color: #2d4373;
  }

  svg {
      width: .8em;
      height: .8em;
      fill: #000;
      stroke: none;
  }
}

//== The tk-brand app
//
//##

.tk-brand {
    font-family: 'Computer Modern Typewriter', 'Courier New', Courier, monospace;
    font-size: 118%;
    line-height: 0;
    vertical-align: -0.005em;
    white-space: nowrap;
}

//== The gallery app
//
//##

//** gallery.html and album.html

.thumbcap {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    img {
        display: block;
        width:100%;
        margin-bottom:-100%;
    }
    .glyphicon {
        font-size: 50px;
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
    .caption {
        background-color: @gray;
        background-color: rgba(0,0,0,0.5);
        bottom: 0;
        left: 0;
        position: absolute;
        width: 100%;
        h5 small {
            color: @text-color;
            white-space: nowrap;
        }
    }
}


//** album.html
.imagetitle {
    padding: 0;
    margin-bottom: 10px;
    background: none;

    @media (min-width: @screen-sm-min) {
        font-size: @font-size-h4;
        margin-top: (@line-height-computed / 2);
        margin-bottom: (@line-height-computed / 2);
    }
    @media (min-width: @screen-md-min) {
        font-size: @font-size-h3;
        margin-top: @line-height-computed;
        margin-bottom: (@line-height-computed / 2);
    }
}

//** image.html
html, body {
    height: 100%; /* This is applied site-wide, but should not be a problem as
                     long pages are contained in a .container div */
}

#tkgal-container {
    height: ~'calc(100% +'@navbar-margin-bottom~')';
    margin-top: -@navbar-margin-bottom;

    .overlay {
        position: absolute;
        padding: 10px 20px;
        background-color: rgba(8,8,8,0.5);

        @media (min-width: @screen-sm-min) {
            font-size: @font-size-h4;
        }

        .breadcrumb {
            padding: 0;
            margin: 0;
            background: none;
        }

        a {
            color: @text-color;
        }
    }

    .overlay-top{
        top: 0px;
        margin-top: 0px;
    }

    .overlay-bottom{
        bottom: 0px;
        width: 100%;
    }
    > div, .mediawrapper {
        height: 100%;
        position:relative;
    }
    img, video, audio, .lg-file-download {
        display: block;
        margin: auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    img, video {
        max-width: 100%;
        max-height: 100%;
    }
    video {
        padding-bottom: 40px;
        @media (min-width: @screen-sm-min) {
            padding-bottom: 45px;
        }
    }
}