GrafiteInc/CMS

html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.form-small {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 48px auto 0 auto;
}

.page-title {
    font-size: 1.4rem;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
    background-color: #f5f5f5;
    z-index: 9999;
}

.navbar {
    line-height: 1;
}

.navbar-brand {
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset 0 0 0 rgba(0, 0, 0, .25);
    height: 60px;
    line-height: 60px;
    width: 320px;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.alert {
    width: 330px;
    position: absolute;
    top: 72px;
    right: 24px;
    z-index: 1000;
}

.main {
    margin-bottom: 40px;
}

.table-striped td {
    line-height: 1.9;
}

.table-striped td .btn-sm {
    line-height: 1.8;
}

/*
|--------------------------------------------------------------------------
| Placeholders
|--------------------------------------------------------------------------
*/

.placeholders {
    margin-bottom: 30px;
    text-align: center;
}
.placeholders h4 {
    margin-bottom: 0;
}
.placeholder {
    margin-bottom: 20px;
}
.placeholder img {
    display: inline-block;
    border-radius: 50%;
}

/*
|--------------------------------------------------------------------------
| iFrame
|--------------------------------------------------------------------------
*/

#wrap {
    height: calc(645px * 0.65);
}

#frame {
    width: 150%;
    position: relative;
    z-index: 0;
    height: 645px;
    border: 1px solid #ddd;
}

#frame {
    transform: scale(0.65);
    transform-origin: 0 0;
    -ms-zoom: 0.65;
    -moz-transform: scale(0.65);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.65);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.65);
    -webkit-transform-origin: 0 0;
}

/*
|--------------------------------------------------------------------------
| Notifications
|--------------------------------------------------------------------------
*/

.cms-notification {
    width: 260px;
    min-height: 30px;
    position: fixed;
    z-index: 10000;
    right: -300px;
    top: 124px;
    display: none;
    padding: 8px 8px 0 8px;
    border-radius: 4px;
    color: #FFF;
    box-shadow: 0px 0px 3px;
}

.cms-notify {
    float: left;
    margin-left: 10px;
    width: 200px;
}

.cms-notify-closer {
    width: 20px;
    margin-left: 10px;
    float: left;
    line-height: 20px;
}

.cms-notify-closer-icon {
    cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Globals
|--------------------------------------------------------------------------
*/

textarea {
    resize: vertical;
}

.table-input {
    border: none;
    background-color: transparent;
}

    .table-input:focus {
        outline: 0;
        border-bottom: 1px solid #BBB;
    }

/*
|--------------------------------------------------------------------------
| Twitter Typeahead
|--------------------------------------------------------------------------
*/

span.twitter-typeahead {
    width: 100%;
}

.tt-menu {
    background-color: #FFF;
    border: 1px solid #DDD;
}

    .tt-suggestion {
        min-width: 200px;
        padding: 8px;
    }
        .tt-suggestion:hover {
            cursor: pointer;
            background-color: #222;
            color: #FFF;
        }

        .tt-suggestion:focus {
            text-decoration: underline;
        }

.navbar-header .back-link a, .navbar-header .back-link a:hover  {
    color: #EEE;
}

.navbar-nav {
    margin-right: 14px !important;
}

.list-row {
    margin-top: 12px;
}

.thumbnail-box {
    max-height: 90px;
    height: 90px;
    overflow: hidden;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.thumbnail-box .img {
    background-position: center center;
    background-size: cover;
    height: 100%;
    cursor: pointer;
}

.overflow-hidden {
    overflow: hidden;
}

.cms-errors li {
    list-style: none;
}

.profile-image {
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
    margin: 48px auto;
    background-position: center center;
    background-size: cover;
}

.profile-image:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

/*
|--------------------------------------------------------------------------
| CMS Styles
|--------------------------------------------------------------------------
*/

.bulk-image-delete {
    display: none;
}

.image-listing {
    max-height: 300px;
}

.card-help {
    height: auto !important;
    margin-bottom: 24px;
}

.image-panel {
    height: 320px;
}

    .image-panel .thumbnail {
        overflow: hidden;
        text-align: center;
    }

    .image-panel .img {
        width: 100%;
        height: 200px;
        background-size: cover;
        background-position: center center;
    }

.table-form {
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
}

.bootstrap-tagsinput .tag {
    font-size: 100% !important;
    padding: 0.6em !important;
}

.navbar-toggle span {
    color: #FFF;
}

.checkbox label {
    width: 200px;
    margin-left: 24px;
    padding-top: 20px;
}

pre {
    padding: 8px;
    background-color: #222;
    color: #eee;
    border-radius: 4px;
}

.tag {
    background-color: purple;
}

.well {
    padding: 16px;
    background-color: #ecf0f1;
    border-radius: 4px;
}

@media (max-width: 1024px) {
    .t-hidden {
        display: none;
    }
}

@media (max-width: 576px) {
    .m-hidden {
        display: none;
    }
    .main {

    }
}