@font-face {
    font-family: GTWalsheim; 
    src: url(../fonts/GT-Walsheim.otf);
}

@font-face {
    font-family: GTWalsheimBold;
    src: url(../fonts/GT-Walsheim-Bold.otf);
}
/*****
@font-face { font-family: GTWalsheimMedium; src: url(../fonts/GT-Walsheim-Medium.otf);}
@font-face { font-family: GTWalsheimLight; src: url(../fonts/GT-Walsheim-Light.otf);}
*****/
html {
    background-color: #efefef;
}

h1, h2, h3, h4, h5, .navbar-brand {
    font-family: 'GTWalsheimBold', sans-serif;
    font-weight: 100;
}

.yellowtxt {
    color: rgb(254, 211, 0);
}

a {
}

body {
    padding-top: 0px;
}

.body-content {
}

footer {
    padding-top: 25px;
    background-color: #efefef;
    padding-bottom: 20px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .navbar-right {
        padding-top: 15px;
    }
}
/* SITE.Master Styles */

img {image-rendering: -webkit-optimize-contrast;}

.storelogo {
    padding-right: 15px;
    max-width: 160px;
}

/* Theme Colours */

.navbar-inverse {
    background-color: rgb(0, 44, 117);
    border-color: rgb(0, 44, 117);
    border-bottom: 10px solid rgb(254, 211, 0);
}

    .navbar-inverse .navbar-brand {
        color: #fff;
    }
/* Booklist landing page*/

#BooklistContent {
    background-color: rgb(0, 44, 117);
    padding-right: 15px;
    padding-left: 15px;
    /*background-image: url(/images/booklistbg.jpg);*/
    background-image: url(https://officebrandsapps.blob.core.windows.net/booklist/images/booklistbg.jpg);
    background-position: center bottom;
    padding-bottom: 300px;
    color: #fff !important;
}

    #BooklistContent div.container.content {
        text-align: center;
        /*background-color: rgba(234,23,134,.5);*/
        padding: 3% 20%;
    }

.searcher a.input-group-addon {
    color: #fff;
}

    .searcher a.input-group-addon:hover {
        color: #333;
        background-color: #ffe57f;
    }

.searchSchoolInput, .searchSchoolIcon {
    font-size: 30px;
    height: auto;
}
.ListBoxCss {
    background-color:#fff;
    text-align:left;
}
.ListBoxCss .ItemStyleCss {
    color:#333;
    padding:5px;
}
.ListBoxCss .ItemStyleCss em {
    color:red;
    font-weight: 700;
}

.footerInfoBoxes {
    margin-bottom: 20px;
}

    .footerInfoBoxes h2 {
        text-align: center;
    }

    .footerInfoBoxes h3 {
        display: block;
        padding: 25px 0;
        text-align: center;
        color: #fff;
    }
	.footerInfoBoxes .InfoBoxesTxt {
		padding:5px 10px;
		text-align: justify;
		text-justify: inter-word;
	}
    .footerInfoBoxes .infoGraphic {
        width: 100%;
        /*background-image: url(/images/infoboxes-bg.png);*/
        background-image: url(https://officebrandsapps.blob.core.windows.net/booklist/images/infoboxes-bg.png);
    }
	
	@media screen and (min-width: 1200px) 	{ 
	.footerInfoBoxes .InfoBoxesTxt {
		min-height: 200px;
	}
    .footerInfoBoxes .infoGraphic {
                height: 260px;
            }
	}
	@media screen and (max-width: 1199px) 	{ 
	.footerInfoBoxes .infoGraphic {height: 60px;}
	}

    .footerInfoBoxes .box1 .infoGraphic, .footerInfoBoxes .box1 h3 {
        background-color: #2dbcc0;
    }

    .footerInfoBoxes .box2 .infoGraphic, .footerInfoBoxes .box2 h3 {
        background-color: #eb4a20;
        background-position: center center;
    }

    .footerInfoBoxes .box3 .infoGraphic, .footerInfoBoxes .box3 h3 {
        background-color: #f0ab12;
        background-position: right bottom;
    }

    .footerInfoBoxes .box4 .infoGraphic, .footerInfoBoxes .box4 h3 {
        background-color: #242424;
        background-position: left bottom;
    }

		@media screen and (max-width: 767px) 	{ }
		@media screen and (min-width: 1200px) 	{ }
	
	
@media screen and (max-width: 767px) {
    #BooklistContent {
        background-size: cover;
        height: 570px;
    }

        #BooklistContent div.container.content {
            padding: 3% 20%;
        }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.7em;
    }

    h3 {
        font-size: 1.4em;
    }

    .storelogo, #idStoreName {
        display: block;
        padding-bottom: 10px;
    }
}

@media screen and (min-width: 768px) {
    #BooklistContent {
        background-size: cover;
        height: 470px;
    }

        #BooklistContent div.container.content {
            padding: 3% 20%;
        }
}

@media (min-width:992px) {
    #BooklistContent {
        background-size: cover;
        height: 570px;
    }

        #BooklistContent div.container.content {
            padding: 70px 20%;
        }
}

@media (min-width: 1200px) {
    #BooklistContent {
        background-size: cover;
        height: 870px;
    }

        #BooklistContent div.container.content {
            padding: 187px 224px;
        }
}

@media (min-width: 2050px) {
    #BooklistContent {
        /*background-size: 1920px 870px;*/
        height: 870px;
        background-repeat: no-repeat;
        background-color: #06b4d7;
    }

        #BooklistContent div.container.content {
            padding: 87px 224px;
        }
}



/* School Styling */
#SchoolHeader {
    padding-top: 0;
    padding-bottom: 1%;
}

    #SchoolHeader > .schoolLogo, .SchoolDetailsDiv .schoolLogo, .schoolLogo {
        margin: 0 auto;
    }

.SchoolLogoHori {
    padding: 0 20px;
}

#SchoolContent {
    background-color: rgb(0, 44, 117);
    padding-top: 5%;
    padding-bottom: 5%;
    padding-right: 15px;
    padding-left: 15px;
    /*background-image: url(/images/bgblue2.png);*/
    background-image: url(https://officebrandsapps.blob.core.windows.net/booklist/images/bgblue2.png);
}

    #SchoolContent .content {
        background-color: rgba(255,255,255,1);
        padding: 25px 35px 35px 35px;
        border-top: solid #fff 10px;
    }

.gridHeader {
    padding: 15px;
    background-color: #333;
    color: #fff;
}

    .gridHeader h3 {
        margin-top: 0;
    }

    .gridHeader p {
        margin-bottom: 0;
    }

    .gridHeader.MandatoryItems {
        background-color: rgb(0, 44, 117);
    }

    .gridHeader.OptionalItems {
        background-color: rgba(0, 44, 117, .5);
    }

    .gridHeader.CallOutExtraItems {
        background-color: rgb(254, 211, 0);
    }

    .gridHeader.ExtraItems {
        background-color: #efefef;
        color: #333;
    }

.SchoolDetailsDiv {
    border: 1px solid rgb(0, 44, 117);
    border-bottom-width: 0px;
    padding: 20px;
}
.CreditCardDiv {
    border: 1px solid rgb(221, 221, 221);
    padding: 20px;
}

.SchoolNotesDiv {
    background-color: rgb(0, 44, 117);
    padding: 20px;
    color: #fff;
    margin-bottom: 15px;
}

.greyBox {
    background-color: #efefef;
    padding: 20px;
    
}
.greyBoxHalf {
    padding: 20px;
    background-color: rgba(239, 239, 239, .6)
}
.addressBox {
    border: 1px solid rgb(0, 44, 117);
    padding: 20px 20px 10px 20px;
}

/* Account Pages */
.helpBox {
    background-color: rgb(254, 211, 0);
    display: table;
    border-left: solid 30px #ffe57f;
    color: rgb(0, 44, 117);
}

    .helpBox div {
        display: table-cell;
        vertical-align: middle;
        padding: 10px 15px;
    }

        .helpBox div p {
            margin: 0;
        }

table {
    /*table-layout: fixed;*/
    
}
.greyTableCell {
    background-color:#efefef;
}

/* FORMS */
.form-group.required label:after {
    content: " *";
    color: red;
}

.form-group span.text-danger {
}

/* Overrides */
.badge {
    background-color: red;
}

.btn {
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
    box-shadow: 2px 2px 3px #888;
}

.btn-link {
    box-shadow: none;
    color: rgb(0, 44, 117);
}

.btn-primary {
    background-color: rgb(0, 44, 117);
    border-color: rgb(0, 44, 117);
}

.btn-success {
    background-color: #00be00;
    border-color: #00be00;
}

    .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
    }

.btn-default {
    color: rgb(0, 44, 117);
    border-color: #efefef;
}

.btn-dark {
    background-color: #333;
    border-color: #333;
    color: #aaa;
}

    .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .open .dropdown-toggle.btn-dark {
        color: #ccc;
        background-color: #999;
        border-color: #999;
    }

.btn-yellow {
    background-color: rgb(254, 211, 0);
    border-color: rgb(254, 211, 0);
    color: rgb(0, 44, 117);
}

    .btn-yellow:hover, .btn-yellow:focus, .btn-yellow:active, .btn-yellow.active, .open .dropdown-toggle.btn-yellow {
        background-color: #ffe57f;
    }

.no-shadow {
    box-shadow: none;
}

.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}
.navbar { margin-bottom:0;}

#BooklistContent .input-group-addon {
    background-color: rgb(254, 211, 0);
    border-color: rgb(254, 211, 0);
}
.itemFooter { text-align:right;background-color:#efefef; font-weight:700;}
/* Alerts */

.alert  h3 { margin-top:0;
}

/*ob469 */
.subjectselectorList {

}
.subjectselectorList li { display:inline-block;
}
.subjectInfoBox { width:100%; padding:25px; box-sizing:border-box;
}
.yellowBG { background-color:rgb(254, 211, 0);
}

.SchoolNotesDiv div div {
    height: 100% !important;
}

/* Helper Classess */
.d-flex {
    display: flex;
}

/* Order Table - All */
.order-table.body {
    border-bottom: 1px solid #dfdfdf;
    padding-top: 15px;
    padding-bottom: 15px;
}

.order-table.header {
    padding: 10px;
}

.order-table.header, .order-table.footer {
    background-color: #efefef;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.order-table .item {
    flex: 1;
}

.order-table .price.item, .order-table .quantity.item, .order-table .sub-total.item, .order-table .total.item, .order-table .manqty.item {
    align-self: center;
    text-align: center;
    max-width: 135px;
}

.order-table.body:nth-child(2n) {
    background-color: #fafafa;
}

.order-table.body select.option {
    width: 100%;
    margin-bottom: 15px;
}

.order-table.footer {
    justify-content: flex-end;
}

.order-table.footer .total.item{
    background-color: #fff;
    padding: 10px 0;
}

.order-table.body:nth-child(2n) {
    background-color: #fafafa;
}

/* Cart Table - All */
.cart-table {
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 20px;
}

.cart-table tr.order-total {
    font-size: 1.5em;
    color: #34495e;
    border-top: 2px dashed #000;
}

.cart-table tr.order-total td {
    padding-top: 20px;
}


/* Mobile */
@media only screen and (max-width: 600px) {
    /* order table */
    .order-table {
        display: block;
    }
    .order-table.header  {
        display: none;
    }
    .order-table.footer {
        display: flex;
        margin-bottom: 30px;
    }
    .order-table .price.item{
        text-align: left;
        margin: 10px 0;
    }
    .order-table .manqty.item {
        text-align: left;
        margin: 5px 0;
    }
    /* cart table */
}


/* Trage MOE and JUMBOS */

form.jumbo .navbar-inverse {
    background-color: #000;
}

form.jumbo footer {
    background-color: #000;
    color: #fff;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 120px;
    height: 20px;
    -webkit-mask: linear-gradient(90deg,#000 70%,#0000 0) 0/20%;
    background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd;
    animation: l4 2s infinite steps(6);
}

@keyframes l4 {
    100% {
        background-size: 120%
    }
}