body {
    font-family: 'Playfair Display', serif;
    background-color: #CCCCCC;
    background-image: url("background.jpg");
    background-size: 100%;
    padding: 120px;
}

@media (max-width: 900px) {

    body {
        padding:  0px;
background: white;
    }    }


    #main-container {
        background: #CCCCCC;
        margin-top: 7em;
    }

.list-menu {list-style-type: none;
    text-align: left;
margin: 0 0 0 5px;}

 

 @media screen and (max-width: 900px) {
  .navbar-brand {
    height:  auto;
  }
}


    table.tableizer-table {
        font-size: 12px;
        border: 1px solid #CCC; 
        font-family: Arial, Helvetica, sans-serif !important;
    } 

table {
        width: 100%; 
    display: block;
    overflow: scroll;
} 

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: auto;
  padding: 15px; /* firefox bug fix */
  width: 100%;
}

.table-wrapper table {
        width: auto;
}


    .tableizer-table td {
        padding: 4px;
        margin: 3px;
        border: 1px solid #CCC !important;
    }
    .tableizer-table th {
        background-color: #104E8B; 
        color: #FFF;
        font-weight: bold;
    }


.navbar {
    font-family: 'Playfair Display', serif !important;
    margin-bottom: 0;
    background-color: #F4C430;
    color: #000000;
    border: 0;
    font-size: 12px !important;
    font-weight: bold;
    letter-spacing: 4px;
    opacity: 0.9;
}

.browse-header {
    background-color: #684f4f;
letter-spacing: 1rem;
}

.broswe-header a {
    text-decoration: none;
}

.browse-header h1 {
        color: #27175d !important;
    margin-top: 10px;
  font-weight: bold;
    font-size: 45px;
}

.browse-header h2 {
    color: #707070;
  font-weight: bold;
    font-size: 45px !important;
}

.browse-header img {
height: 150px;
padding: 5px;
}


.jumbotron a {
    font-family: 'Playfair Display', serif;
    text-decoration: none;
    font-size: 22px;
}

.carousel-inner img {
    height: 550px;
}

.event-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.event-list a {
    font-size: 12px;
}

.event-list > li {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 5px rgb(51, 51, 51);
    box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
    padding: 0px;
    margin: 0px 0px 20px;
}

.event-list > li > time {
    display: inline-block;
    width: 120px;
    color: rgb(255, 255, 255);
    background-color: #9530f4;
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
}

.event-list > li:nth-child(even) > time {
    background-color: #3330f4;
}

.tableizer-table {

    background-color: #f7e6ad;

}

.event-list > li > time > .day {
    display: block;
    font-size: 56pt;
    font-weight: 100;
    line-height: .7;
}

.event-list > li > time > .time {
    display: block;
    margin-top: -15px;
    line-height: .5;
}

.event-list > li time > .month {
    display: block;
    font-size: 24pt;
    font-weight: 900;
    line-height: 2.2;
}

.event-list > li > img {
    width: 100%;
}

.event-list > li > .info {
    padding-top: 5px;
    text-align: center;
}

.event-list > li > .info > .title {
    font-size: 15pt;
    font-weight: 700;
    margin: 0px;
}

.event-list > li > .info > .desc {
    font-size: 10pt;
    font-weight: 300;
    margin: 0px;
}

.event-list > li > .info > ul,
.event-list > li > .social > ul {
    display: table;
    list-style: none;
    margin: 10px 0px 0px;
    padding: 0px;
    width: 100%;
    text-align: center;
}

.event-list > li > .social > ul {
    margin: 0px;
}

.event-list > li > .info > ul > li,
.event-list > li > .social > ul > li {
    display: table-cell;
    cursor: pointer;
    color: rgb(30, 30, 30);
    font-size: 11pt;
    font-weight: 300;
    padding: 3px 0px;
}

.event-list > li > .info > ul > li > a {
    display: block;
    width: 100%;
    color: rgb(30, 30, 30);
    text-decoration: none;
}

.event-list > li > .social > ul > li {
    padding: 0px;
}

.event-list > li > .social > ul > li > a {
    padding: 3px 0px;
}

.event-list > li > .info > ul > li:hover,
.event-list > li > .social > ul > li:hover {
    color: rgb(30, 30, 30);
    background-color: rgb(200, 200, 200);
}

.twitter a {
    color: rgb(79, 213, 248) !important;
}

.facebook:hover a {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(75, 110, 168) !important;
}

.twitter:hover a {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(79, 213, 248) !important;
}


@media (min-width: 768px) {
    .event-list > li {
        position: relative;
        display: block;
        width: 100%;
        height: 120px;
        padding: 0px;
    }

    .event-list > li > time,
    .event-list > li > img {
        display: inline-block;
    }

    .event-list > li > time,
    .event-list > li > img {
        height: 120px;
        float: left;
    }

    .event-list > li > .info {
        background-color: rgb(245, 245, 245);
        overflow: hidden;
    }

    .event-list > li > time,
    .event-list > li > img {
        height: 120px;
        width: auto;
        padding: 0px;
        margin: 0px;
    }

    .event-list > li > .info {
        position: relative;
        height: 120px;
        text-align: left;
        padding-right: 40px;
    }

    .event-list > li > .info > .title,
    .event-list > li > .info > .desc {
        padding: 0px 10px;
    }

    .event-list > li > .info > ul {
        position: absolute;
        left: 0px;
        bottom: 0px;
    }

    .event-list > li > .social {
        position: absolute;
        top: 0px;
        right: 0px;
        display: block;
        width: 40px;
    }

    .event-list > li > .social > ul {
        border-left: 1px solid rgb(230, 230, 230);
    }

    .event-list > li > .social > ul > li {
        display: block;
        padding: 0px;
    }

    .event-list > li > .social > ul > li > a {
        display: block;
        width: 40px;
        padding: 10px 0px 9px;
    }
}



.audio a:link {
    color: #9530f4;
}

.audio a:visited {
    color: #9530f4;
}


.cart-item {
    padding-top: 10px;
}

.cart-header h4 {
    font-family: 'Playfair Display', serif;
}

.cart-tax p {
    font-size: 13px;
}

.condition div {
    float: left;
}


jumbotron {
    padding: 1em;
    margin-left: 0.5em;
}


.jumbotron h3 {
    margin-top: -1em;
}

.jumbotron h2 {
    margin-top: -1em;
}

h3 a {
    font-size: 24px;
}


.table > tbody > tr > td, .table > tfoot > tr > td {
    vertical-align: middle;
}

@media screen and (max-width: 600px) {
    table#cart tbody td .form-control {
        width: 20%;
        display: inline !important;
    }

    .actions .btn {
        width: 36%;
        margin: 1.5em 0;
    }

    .actions .btn-info {
        float: left;
    }

    .actions .btn-danger {
        float: right;
    }

    table#cart thead {
        display: none;
    }

    table#cart tbody td {
        display: block;
        padding: .6rem;
        min-width: 320px;
    }

    table#cart tbody tr td:first-child {
        background: #333;
        color: #fff;
    }

    table#cart tbody td:before {
        content: attr(data-th);
        font-weight: bold;
        display: inline-block;
        width: 8rem;
    }


    table#cart tfoot td {
        display: block;
    }

    table#cart tfoot td .btn {
        display: block;
    }


    div.form-group span.brackets {
        font-size: 7px;
    }
}

/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
    color: #333333 !important;
}

/* On hover, the links will turn white */
.navbar-nav li a:hover {
    color: #fff !important;
}

#prod-image-col img {
    padding-top: 10px;
}


#title-row {
    padding-left: 5px;
}

#gallery {
    background-color: white;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
}


#top-row {
    background-color: white;
}

#author-row {
    padding-left: 5px;
}

#ISBN-row {
    padding-left: 5px;
}

#short-synopsis {
    padding-top: 10px;
}

.form-control-inline {
    min-width: 0;
    width: auto;
    display: inline;
}

.condition-detail p {
    font-size: 13px;
}

.edition {
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
    border: 1px solid black;
}

#quantity-row {
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;

}

#add-to-basket-row {
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;

}

#prod-info {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 18px;
}

#bottom-row h3 {
    padding: 10px;
}

#createaccount {
    display: inline;
}

.edit {
    width: 90px;
}

#bottom-row p {
    padding: 10px;
}

.form-controller-general {
    display: block;
    width: 50%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.hard {
    opacity: 1.0;
}

#gallery form {
    padding-left: 40px;
}

div.thecart {
    padding: 10px;
}

/* The active link */
.navbar-nav li.active a {
    color: #2ffffc !important;
    background-color: #29292c !important;
}

/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
    border-color: transparent;
}

/* Dropdown */
.open .dropdown-toggle {
    color: #fff;
    background-color: #333 !important;
}

/* Dropdown links */
.dropdown-menu li a {
    color: #000 !important;
}

/* On hover, the dropdown links will turn safron */
.dropdown-menu li a:hover {
    background-color: #F4C430 !important;
}

.jumbotron {
    margin-top: 320px;
    opacity: .94;
    font-family: 'Playfair Display', serif;
    color: #121111;
    position: relative;
    top: 110%;
    padding: 40px 0;
    text-align: center;
    background: #F4C430;
}

.nontrans {
    opacity: 1.0;

    background: #F4C430;
}

.white {
    color: #000;
    background-color: #fff;
}

.panel-title {
    padding-bottom: 5px;
}

.btn-light-blue {
    color: #f8f8f8;
    background-color: #02A8F3;
    border-color: #0396d8;
}

.btn-light-blue:hover {
    color: #fff;
    background-color: #0396d8;
}

.btn-amber {
    color: #f8f8f8;
    background-color: #FEC006;
    border-color: #e1aa05;
}

.btn-amber:hover {
    color: #fff;
    background-color: #e1aa05;
}


footer {
    color: grey;
}

footer p, a {
    font-size: 12px;
    font-family: 'Playfair Display', serif;
}

.browsepage a{
    font-size: 16px;
	}

ul {
  text-align: center;
  list-style: inside;
}

footer h6 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 40px;
    position: relative;
}

footer h6:after {
    position: absolute;
    content: "";
    background: grey;
    width: 12%;
    height: 1px;
    left: 0;
    bottom: -20px;
}

.btn-footer {
    color: grey;

    text-decoration: none;
    border: 1px solid;
    border-radius: 43px;
    font-size: 13px;
    padding: 7px 30px;
    line-height: 47px;
}

.btn-footer:hover {

    text-decoration: none;

}

.form-footer input[type="text"] {
    border: none;
    border-radius: 16px 0 0 16px;
    outline: none;
    padding-left: 10px;

}

::placeholder {
    font-size: 10px;
    padding-left: 10px;
    font-style: italic;
}

.form-footer input[type="button"] {
    border: none;
    background: #232323;
    margin-left: -5px;
    color: #fff;
    outline: none;
    border-radius: 0 16px 16px 0;
    padding: 2px 12px;
}

.social .fa {
    color: grey;
    font-size: 22px;
    padding: 10px 15px;
    background: #3c3c3c;
}

footer ul li {
    align-content: flex-end
    list-style: none;
    display: inline;
padding-left: 10px;
}

footer ul li img {

margin: 10px !important;
}


footer ul li a {
    text-decoration: none;
    color: grey;
    text-decoration: none;
}




footer img {
    padding: 10px !important;
}


a:hover {
    text-decoration: none;
    color: #f5f5f5 !important;

}

.logo-part {
    border-right: 1px solid grey;
    height: 100%;
}