﻿body {
}

.pageHeaderContainer {
    width: 100%;
    height: 40px;
    color: white;
    font-weight: bold;
    background-color: yellow;
}

.loginContainer {
    height:auto;
    padding:20px;
    margin:0px;
    border: 1px solid #54585F;
    border-radius:20px;
}

/**********/
/* FOOTER */
/**********/
.CSSFooterContainer {
    width: 100%;
    height: 100%;
}

.footerFix {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
}

.bannerFix {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    border: 1px solid #54585F;
}

.CSSFooter {
    color: #D5D5D5;
    height: auto;
    padding-top: 10px;
    padding-bottom: 5px;
    width: 100%;
}

.footerTopContainer {
    background-color: #54585F;
    -webkit-box-shadow: inset 0 4px 4px rgba(0,0,0,0.1);
    box-shadow: inset 0 4px 4px rgba(0,0,0,0.1);
    color: #fff;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

.footerOuterContainer {
    width: 100%;
}

.footerContentContainer {
    width: 100%;
    height: auto;
}

.copyrightContainer {
    width: 100%;
    padding-top: 5px;
}

.termsContainer {
    width: 100%;
    padding-top: 5px;
}

.privacyContainer {
    width: 100%;
    padding-top: 5px;
}

.sitemapContainer {
    width: 100%;
    padding-top: 5px;
}

/**************/
/* CONTAINERS */
/**************/
.contentContainer {
    width: 100%;
    height: auto;
}

.topContainer {
    background-color: #ffffff;
    -webkit-box-shadow: inset 0 4px 4px rgba(0,0,0,0.1);
    box-shadow: inset 0 4px 4px rgba(0,0,0,0.1);
    color: #fff;
    height: 120px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.container {
    background-color: white;
}

.jumbotron {
    background-color: #BDEDFF; /*#37cade*/
    /*min-height: 400px;*/
    height: auto;
    padding: 0px;
}


.forceMarginTop{
    margin-top:10px;
}

.moveToTop {
    margin-top: 10px;
}

/******************/
/* INFO CONTAINER */
/******************/

.infoContainer {
    width:85%;
    height:auto;
    background-color: #D7F4FF;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
}
.infoContainerTitle {
    width: 100%;
    height: 35px;
    background-color: #BDEDFF;
}
.infoTitleText {
    color: black;
    font-size: 1.2rem;
    font-weight: bold;
}
.infoTitlePadding {
    margin-top: 10px;
    margin-bottom: 10px;
}
.infoTextPadding {
    padding-left: 50px;
    padding-right: 50px;
}
.paddingLeft{
    padding-left:20px;
}
.paddingRight {
    padding-right: 20px;
}


/*****************************************/
/* JUMBOTRON RE-CUSTOMISED FOR ALL PAGES */
/*****************************************/

.pageContentContainer {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
 /*   margin-top: 20px;*/
 padding-bottom:50px;
}

.pageContentTitleBackdrop {
    width: 100%;
  /*  height: 40px;*/
 /*   background-color: #54585F;*/
    margin-top:30px;
    margin-bottom: 10px;
  /*  padding-top: 20px;*/
  /*  padding-top: 10px;*/
}
.pageContentTextBackdrop {
    width: 100%;
    height: auto;
/*    background-color: #D7F4FF;*/
    margin-bottom: 10px;
}


.pageContentTitleForeground {
    color: white;
    font-size: 1.4rem;
    font-weight: bold;
}
.pageContentTextForeground {
    color: black;
    font-size: 1.2rem;
    font-weight: normal;
}




/**********/
/* BUTTONS*/
/**********/
.btn {
    color: black;
    display: inline-block;
    padding: 5px 5px 5px 5px;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
}
.btn-primary {
    background-color: #37A6DE;
    color: white;
    width: 160px;
    min-width: 160px;
    border-color: #37A6DE;
}
.btn-primary:hover {
    background-color: #54585F;
    border-color: #54585F;
}
.btnPadding {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*******************/
/* WELCOME STYLING */
/*******************/

.welcomeContainer {
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    display: inline-block;
    letter-spacing: 0;
    float: none;
    padding-top: 5px;
    padding-bottom: 5px;
}
.welcomeText {
    color: white;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    margin-top: 50px;
    background-color: yellow;

    vertical-align: middle;
    top:50%;
}
.phoneContainer {
    width: 100%;
}
.facebookContainer {
    width: 100%;
}
.textContainer {
    padding-left: 10px;
}
.menuContainer {
    padding-top: 0px;
    padding-bottom: 0px;
}

/****************/
/* LOGO STYLING */
/****************/

.logoContainer {
    margin-left: auto;
    margin-right: auto;
    background-color: #861728;
}

.logo {
    background: url("../Images/ChesterfieldCremLogo.png") no-repeat center;
    height:140px;
    background-size: contain;
}
logoContainer img {  
    width:100%;
    border-style:none;
}


.logoFooterContainer {
    margin-left: auto;
    margin-right: auto;
    height: 70px;
    position: fixed;
    background-color: white;
    z-index: 10;
    border-top: solid 1px #861728;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-top: 10px;
    margin-bottom: 0px;
}

.logoFooter {
    height: 60px;
    margin-top: 10px;
    margin-bottom: 10px;
    background: url("../Images/logos.jpg") no-repeat center;
    background-size: contain;
}


.bg {
    position: absolute;
    top: 175px;
    bottom: 13px;
    left: 0px;
    right: 0px;
    width: 100%;
}

.CardContainer {
    background-color:lavenderblush;
    border-radius:20px;
}
.CardTitle {
    background-color: #861728;
    color:white;
    font-size:2.3em;
    padding-top:5px;
    padding-bottom:5px;
}
.CardBody {
    background-color: lavenderblush;
    padding-top: 10px;
    padding-bottom: 10px;
}
.CardFooter {
    background-color: #861728;
    padding-top: 10px;
    padding-bottom: 10px;
}

.CardUploadContainer {
    background-color: lavenderblush;
    margin-left: 50px;
    margin-right: 50px;
}
.CardUploadButton {
    width: 100%;
    height: 40px;
    background-color:aquamarine;
    color:black;
}

.CardRepeaterBottomMargin {
    margin-bottom: 50px !important;
    padding-bottom: 50px !important;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


img a:link, a:visited {
    color: black;
    border-style: none;
    outline-style: none;
}
.Absolute {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 40px;
    margin-bottom: 30px;
    left: 0px;
    right: 0px;
    top: -30px;
    bottom: 50px;
    Background: transparent;
}
.VertSpacerScrollDiary {
    font-size: 24px;
    padding-top: 0px;
}

.stickySimm {
    position: fixed;
    left: 50px;
    right:50px;
    top: 50px;
    bottom:50px;
    height: 100px;
    width: 100%;
    Background: red;
     padding-top: 20px; 
    /*padding-bottom: 20px;*/
    border-top: 1px solid black;
    /*z-index: 10;*/
}

/**********************/
/* BACAS MENU STYLING */
/**********************/

a{
    color:white;
}
.btnFixSize{
    width:100px;
    height:auto;
}
.menuButtonContainer {
    width: 100%;
    height: auto;
    color: black;

    padding-top:10px;
    padding-bottom:10px;
}
.loggedInAsContainer {
    width: 100%;
 /*   height: 40px;*/
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    /*    padding-top: 10px;
    padding-bottom: 10px;*/
    background-color: white;
   
    color: black;
/*    background-color: red;*/
    text-align: center;
}
.menuButtons {
    font-size: 14px;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 4px;
    background-color: #28a0d7;
}

.menuButtons a {
    font-size: 14px;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    /*padding-top: 5px;
    padding-bottom: 5px;*/
    border-radius: 4px;
}
.menuButtons a:hover {
    text-decoration: none;
    background-color: #54585F;
    color: white;
}
.menuPaddingBottom {
    padding-bottom: 20px;
    background-color: black;
}

.menuButtonSize{
    /*width:200px;
    height:auto;*/
}
/****************/
/* DIARY STYLING*/
/****************/
.diaryContainer {
    margin-left: auto;
    margin-right: auto;
    color: darkblue;
    background-color: white;
    border-style: solid;
    border-width: thin;
    border-color: black;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    height: 400px;
}
.diaryContent {
    width: 100%;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: #54585F;
    color: darkblue;
}
.setFont {
    font-size: 1.2rem;
    color: darkblue;
}
.setHeight {
    height: 30px;
    color: darkblue;
}
.whiteRow {
    background-color: white;
    color: darkblue;
}
.greenRow {
    background-color: #EFF2B6;
}
.diaryHeaderText {
    color: white;
    background-color: black;
}
table {
    max-width: 100%;
    background-color: transparent;
    text-align: center;
    border: 0;
    text-decoration: none;
}
.diaryContent th a {
    text-decoration: none;
}
th {
    text-align: center;
}
tr {
    border: 0;
    text-decoration: none;
}

/****************************/
/* SEARCH CONTAINER STYLING */
/****************************/

.searchContainer {
    margin-left: auto;
    margin-right: auto;
    color: darkblue;
    background-color: white;
    border-style: solid;
    border-width: thin;
    border-color: black;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    height:300px;
}
.searchPaddingBottom{
    padding-bottom:20px;
}

/*******************/
/* MUSIC CONTAINER */
/*******************/
.musicContainer {
    margin-left: auto;
    margin-right: auto;
    color: darkblue;
    background-color: white;
    border-style: solid;
    border-width: thin;
    border-color: black;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    height: 400px;
}
.musicPaddingBottom {
    padding-bottom: 20px;
}

/*************************/
/* BOOKINGLIST CONTAINER */
/*************************/
.bookingListContainer {
    margin-left: auto;
    margin-right: auto;
    color: darkblue;
    background-color: white;
    border-style: solid;
    border-width: thin;
    border-color: black;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    height: 400px;
}

.bookingListPaddingBottom {
    padding-bottom: 20px;
}


/********************/
/* BOOKINGS STYLING */
/********************/
.bookingContainer {
    margin-left: auto;
    margin-right: auto;
    color: darkblue;
 /*   background-color: #BDEDFF;*/
    /*border-style: solid;
    border-width: thin;
    border-color: black;*/
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
}
.bookingMenuContainer {
    /*background-color: #fff;*/
    border-color: #e7e7e7;
    padding: 0px;
    margin: 0px;
}
.appointmentContainer {
    width: 99%;
    /*background-color: #BDEDFF;*/
    margin-left: auto;
    margin-right: auto;
}
.maidenContainer {
    width: 99%;
  /*  background-color: #BDEDFF;*/
    margin-left: auto;
    margin-right: auto;
}
.addressContainer {
    width: 99%;
  /*  background-color: #BDEDFF;*/
    margin-left: auto;
    margin-right: auto;
}
.ageContainer {
    width: 99%;
  /*  background-color: #BDEDFF;*/
    margin-left: auto;
    margin-right: auto;
}
.titleContainer {
    width: 99%;
/*    background-color: #BDEDFF;*/
    margin-left: auto;
    margin-right: auto;
}
.generalContainer {
    width: 99%;
/*    background-color: #BDEDFF;*/
    margin-left: auto;
    margin-right: auto;
}

.bacasErrorContainer{
    width:100%;    
    color:white;
    height:300px;
    margin-top:20px;
}
.bacasErrorTitle {
    width: 80%;
    color: black;
    font-weight: bold;
}
.bacasErrorText{
    width:80%;
    color:black;
    font-weight:normal;
}
.errorPaddingTop{
    margin-top:20px;
}
.errorImageContainer{
    margin-left:auto;
    margin-right:auto;

}
.errorImageContainer img {
    width: 200px;
    height: 120px;
}


.modal-footer {
    width: 100%;
    padding: 0;
}
.buttonContainer {
    width: 100%;
    height: 70px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding-left:20px;
    padding-right:20px;
}
.popupButtonZone{
    width:100%;
    height:100px;
    background-color:blue;
}
.popupButtonZoneA{
    width:30%;
  /*  background-color:;*/
    height:35px;
    padding-top:10px;
}
.popupButtonZoneB {
    width: 70%;
  /*  background-color: ;*/
    height: 35px;
}
.vertSpacerMoveButtonTop {
    margin-top: 20px;
}
.vertSpacerMoveButtonBottom{
    margin-bottom:20px;
}

.cancelOrMoveBookingContainer {
    width: 100%;
    height: 40px;
    color: red;
    font-size: 1.6rem;
    font-weight: bold;
}
.bookingMessageContainer {
    width: 100%;
    height: 20px;
    color: red;
    font-size: 1.6rem;
    font-weight: bold;
    padding-top:10px;
}


/*==================================================
 * Effect 8
 * ===============================================*/
.effect8 {
    position: relative;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

    .effect8:before, .effect8:after {
        content: "";
        position: absolute;
        z-index: -1;
        -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
        -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
        box-shadow: 0 0 20px rgba(0,0,0,0.8);
        top: 10px;
        bottom: 10px;
        left: 0;
        right: 0;
        -moz-border-radius: 100px / 10px;
        border-radius: 100px / 10px;
    }

    .effect8:after {
        right: 10px;
        left: auto;
        -webkit-transform: skew(8deg) rotate(3deg);
        -moz-transform: skew(8deg) rotate(3deg);
        -ms-transform: skew(8deg) rotate(3deg);
        -o-transform: skew(8deg) rotate(3deg);
        transform: skew(8deg) rotate(3deg);
    }
.btnSimm {
    color:black;
/*    display: block;*/
    padding: 12px 12px;
    font-size: 1em;
    border: 1px solid #DADADA;
    background: transparent linear-gradient(to bottom, #FFF 0%, #EAEAEA 100%) repeat scroll 0% 0%;
}
.containerSimm {
    width: 100%;
    height: auto;
    background-color: #54585F;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    text-align: center;
    padding-top:10px;
    padding-bottom:10px;
}
.leftPanel{
    background-color:yellow;
}
.middlePanel {
    background-color: pink;
}
.rightPanel {
    background-color: green;
}

.insertFix {
    position: relative;
    bottom: 0;
    right: 0;
    width: 100%;
    border: 1px solid #54585F;

    background-color: #54585F;
    -webkit-box-shadow: inset 0 4px 4px rgba(0,0,0,0.1);
    box-shadow: inset 0 4px 4px rgba(0,0,0,0.1);
    color: #fff;
    height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.InsertTopContainer {

}
.insertOuterContainer {
    width: 100%;
}
.btnSpacerMargin{
    margin-bottom:20px;
}
.btnSpacerMarginTop {
    margin-top: 40px;
}