﻿/* ######################## */
/*       PAGE SPECIFIC      */
/* ######################## */

/* Home page */
.home_intro, .home_intro_top, .home_intro_bottom {
    text-align: center;
}

p.home_intro_bottom {
    margin-bottom: 0;
}

.home_intro_top a, .home_intro_bottom a {
    color: #444;
    font-weight: 400
}

.tp_reviews {
    text-align: center;
}

/* Desktop and Tablet Styles */
@media only screen and (min-width: 601px) {
    h1 .home_intro {
        margin: 10px 0;
        color: #444;
        font-weight: 400;
    }

    p.home_intro_bottom {
        display: none;
    }

    .trustpilot_reviews {
        width: 22%;
        vertical-align: top;
        display: inline-block;
        margin: 0 2.5% 30px 0;
    }

        .trustpilot_reviews span {
            float: left;
        }

    .trustpilot_reviews_name {
        color: #777;
        font-weight: bold;
        clear: both;
    }

    .trustpilot_reviews_text {
        margin-bottom: 8px;
        font-size: 1.2em;
        font-weight: bold;
    }

    .tp_reviews {
        display: none;
    }
}

/* Tablet Styles */
@media only screen and (max-width: 1000px) {
    #slider2 {
        display: none;
    }
}

/* Mobile Styles */
@media only screen and (max-width: 600px) {
    h1.home_intro {
        font-size: 15px;
        font-weight: normal;
    }

    p.home_intro_top {
        display: none;
    }

    .trustpilot_reviews {
        width: 46%;
        vertical-align: top;
        display: inline-block;
        margin: 0 2.5% 30px 0;
    }

        .trustpilot_reviews span {
            float: left;
        }

    .trustpilot_reviews_name {
        color: #777;
        font-weight: bold;
        clear: both;
    }

    .trustpilot_reviews_text {
        margin-bottom: 8px;
        font-size: 1.2em;
        font-weight: bold;
    }

    .mobile_TP {
        margin-bottom: 30px;
        display: inline-block;
    }

    #slider2 {
        display: none;
    }
}

/* Your account page */

/* Desktop Styles */
@media only screen and (min-width: 1001px) {
    #youraccount {
        width: 80%;
        margin-bottom: 50px;
    }

    .youraccount_section {
        border-bottom: 1px solid #64A70B;
        margin-bottom: 20px;
    }

    .youraccount_link {
        background-color: #64A70B;
        color: #fff;
        text-align: center;
        width: 240px;
        display: block;
        text-decoration: none;
        font-size: 1.4em;
        float: right;
        padding: 10px 12px;
        margin-right: 20px;
    }
}


/* Mobile and Tablet Styles */
@media only screen and (max-width: 1000px) {
    #youraccount {
        width: 100%;
        margin-bottom: 30px;
    }

    .youraccount_section {
        padding-bottom: 20px;
        border-bottom: 1px solid #64A70B;
        margin-bottom: 20px;
    }

    .youraccount_link {
        background-color: #64A70B;
        color: #fff;
        text-align: center;
        width: 90%;
        display: inline-block;
        text-decoration: none;
        font-size: 1.2em;
        padding: 10px 12px;
        margin-top: 10px;
    }
}


/* Order history page */
.order_history_right {
    float: right;
    width: 350px
}

.gridview_orderhistory_header {
    border-bottom: 1px solid #000;
}

.gridview_orderhistory_row td {
    border-bottom: 1px solid #000;
    padding: 10px 0 10px 0;
}

    .gridview_orderhistory_row td table tr td {
        border-bottom: 0;
        padding: 0;
    }

    .gridview_orderhistory_row td a {
        color: #333;
        font-weight: normal;
    }

.orderhistoryAll {
    background-color: #64A70B;
    width: 114px;
    text-align: center;
    margin-right: 5px;
    display: inline-block;
    text-decoration: none;
    padding: 5px 8px
}

    .orderhistoryAll:hover {
        color: #fff;
        text-decoration: underline;
    }

.orderhistoryAllText {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.1em;
}

.orderhistorySelected {
    border: 2px solid #64A70B;
    background-color: #fff;
    width: 114px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 5px;
    text-align: center;
    display: block;
    text-decoration: none;
    padding: 5px 8px
}

    .orderhistorySelected:hover {
        color: #fff;
        text-decoration: underline;
    }

.orderhistorySelectedText {
    color: #000;
    font-weight: normal;
    font-size: 1.1em;
}

    .orderhistorySelectedText:hover {
        color: #000;
        text-decoration: underline;
    }

.orderhistoryCancel {
    border: 2px solid #B303D0;
    background-color: #fff;
    width: 114px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 5px;
    text-align: center;
    display: block;
    text-decoration: none;
    padding: 5px 8px
}

    .orderhistoryCancel:hover {
        color: #fff;
        text-decoration: underline;
    }

.orderhistoryCancelText {
    color: #000;
    font-weight: normal;
    font-size: 1.1em;
}

    .orderhistoryCancelText:hover {
        color: #000;
        text-decoration: underline;
    }

.orderhistoryAddItems {
    border: 2px solid #0827F5;
    background-color: #fff;
    width: 175px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 5px;
    text-align: center;
    display: block;
    text-decoration: none;
    padding: 5px 8px
}

    .orderhistoryAddItems:hover {
        color: #fff;
        text-decoration: underline;
    }

.orderhistoryAddItemsText {
    color: #000;
    font-weight: normal;
    font-size: 1.1em;
}

    .orderhistoryAddItemsText:hover {
        color: #000;
        text-decoration: underline;
    }

.orderhistoryAmend {
    border: 2px solid #64A70B;
    background-color: #fff;
    width: 80px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 5px;
    text-align: center;
    display: block;
    text-decoration: none;
    padding: 5px 8px
}

/* Mobile Styles */
@media only screen and (max-width: 600px) {
    .orderhistoryAmendText {
        color: #000;
        font-weight: normal;
        font-size: 1.1em;
    }

    .orderhistoryAmend {
        width: 175px;
    }
}


/* Delivery slot page */
.delivery_day {
    width: 120px;
    float: left;
    margin-right: 20px;
    margin-bottom: 40px;
    height: 170px;
}

    .delivery_day h2 {
        font-size: .9em;
        margin-bottom: 4px
    }

.delivery_slot {
    display: block;
    margin: 2px;
    background-color: #eee;
    width: 88px;
    height: 21px;
    padding-top: 3px;
    padding-left: 10px;
    font-size: .9em
}

    .delivery_slot:hover {
        background-color: #ccc
    }

.delivery_slot_selected {
    display: block;
    margin: 2px;
    width: 88px;
    height: 21px;
    padding-top: 3px;
    padding-left: 10px;
    font-size: .9em;
    background-color: #ccc
}

.delivery_day a {
    color: #444
}

    .delivery_day a:hover {
        text-decoration: none
    }


/* Application form */
.app_title {
    margin-bottom: 5px
}

#application_form p {
    margin-top: 10px;
    margin-bottom: 3px;
    color: #e28236
}

#application_form th {
    color: #e28236;
    font-weight: 400
}

#application_form tr {
    vertical-align: top
}

.radbtn input {
    margin-right: 10px;
    margin-left: 10px
}

#app_position, #personal_details, #referee_1 {
    width: 400px;
    float: left
}

#app_date, #contact_details, #referee_2 {
    width: 400px;
    float: right
}

#experience, #health {
    width: 250px;
    float: left
}

#experience_details, #health_details {
    width: 550px;
    float: right
}

    #experience_details p, #health_details p {
        margin-bottom: 40px
    }

#application_form span {
    color: #444;
    margin-top: 10px;
    margin-bottom: 3px;
    display: block
}

.experience_info {
    margin-bottom: 10px
}

.health_info {
    margin-bottom: 13px
}

#application_form h2 {
    padding-top: 20px;
    border-bottom: 1px solid #ddd
}

#application_form h3 {
    padding-top: 20px;
    color: #444
}

.app_required2 {
    margin-left: 10px
}

@media only screen and (max-width: 1000px) {
    #app_position, #personal_details, #referee_1,
    #app_date, #contact_details, #referee_2,
    #experience, #health,
    #experience_details, #health_details {
        float: none;
        width: 90%;
    }
}


/* Shop locator page */
.locator {
    width: 43%;
    float: left;
    margin-right: 5%;
}

@media only screen and (max-width: 800px) {
    .locator {
        float: left;
        width: 96%;
    }
}


/* Edinburgh Stores page */
h1.edinburghstores_intro {
    margin: 10px 0 30px;
}

table.edinburghstores_page img {
    margin: 20px 0 15px 0;
}

table.edinburghstores_page p a {
    font-size: 1.1em;
    height: 30px;
    color: #333;
}


/* Wholesale page */
#wholesale_landing {
    font-size: 15px
}

    #wholesale_landing h1 {
        font-size: 1.8em;
        margin-bottom: 32px
    }

#maincol #wholesale_landing h3 {
    font-size: 1.6em;
    margin-bottom: 0
}

#wholesale_landing h4 {
    color: #000;
    margin-bottom: 26px;
    margin-top: 40px
}

#wholesale_landing p {
    line-height: 30px;
    margin-bottom: 28px
}

#wholesale_landing ul li {
    list-style: none;
    margin-bottom: 16px
}

    #wholesale_landing ul li:before {
        content: "\2022";
        font-size: 22px;
        line-height: 20px;
        vertical-align: top;
        margin-right: 8px
    }

#wholesale_landing ul.sublist {
    margin-left: 40px
}

    #wholesale_landing ul.sublist li {
        list-style: none;
        margin-bottom: 16px
    }

        #wholesale_landing ul.sublist li:before {
            content: "\25E6";
            font-size: 36px;
            line-height: 19px;
            vertical-align: top;
            margin-right: 8px
        }

#wholesale_landing table {
    margin-bottom: 40px
}

h1.wholesale_heading {
    margin-top: 20px;
    margin-bottom: 20px
}

.wholesale_searchbox {
    float: right;
    width: 100%;
}

.wholesale_filters {
    width: 80%;
    float: left;
    border: 1px solid #64A70B;
    padding: 15px 15px 15px 10px;
    margin-bottom: 10px
}

.wholesale_dropdowns {
    width: 290px;
    float: left;
    text-align: right;
    margin-bottom: 20px;
}

.wholesale_attributes {
    width: 345px;
    float: right;
}

@media only screen and (max-width: 600px) {
    .wholesale_attributes {
        font-size: 0.8em;
        float: left;
        width: 300px;
    }
}

.ddl_wholesale {
    margin-bottom: 10px
}

.wholesale_larger_subtext span {
    margin-left: 20px
}

.wholesale_filter_button {
    margin-left: 10px;
    margin-top: 7px;
    float: right
}

.wholesale_add {
    float: right;
    margin-top: 9px;
    margin-left: 3px;
    margin-right: 8px
}

.wholesale_InBasket {
    margin: 4px 0 8px;
    color: #e16000;
    font-weight: 700;
    display: block
}

a.wholesale_cell {
    color: #333;
    font-weight: 400;
    text-decoration: none
}

    a.wholesale_cell:hover {
        text-decoration: none
    }

.WholesaleRowStyle:hover {
    background-color: #bbb
}

.wholesale_larger {
    font-size: 1.1em;
    margin-top: 5px;
    display: block;
    font-weight: 700
}

    .wholesale_larger span {
        color: #888
    }

.clear_pad_top_bottom {
    clear: both;
    margin-top: 9px;
    margin-bottom: 5px
}

tr.pager span {
    text-decoration: none;
    color: #333
}

tr.pager td table tr td {
    font-weight: 700;
    padding-right: 20px
}

tr.pager a {
    color: #ff760e;
    text-decoration: underline
}


/* Comments page */
tr.email2 {
    display: none;
}


/* Community pages*/
#container {
    margin-bottom: 15px;
}

#container_centre {
    width: 600px;
    margin: 0 auto 45px
}

    #container_centre h3 {
        text-align: center;
        font-style: normal;
        font-weight: 700;
        margin-bottom: 1em;
        font-size: 1.5em
    }


/* Article pages */
/* Mobile Styles */
@media only screen and (max-width: 600px) {

    .article_category {
        width: 100%;
        float: left;
        margin-bottom: 1.5em;
    }
}

/* Tablet Styles */
@media only screen and (min-width: 601px) and (max-width: 960px) {

    .article_category {
        width: 49%;
        float: left;
    }

    .article_search_main {
        display: none;
    }
}

/* Desktop Styles */
@media only screen and (min-width: 961px) {

    .article_category {
        width: 30%;
        float: left;
    }

    .article_search_main {
        display: none;
    }
}

.article_category_left {
    width: 35%;
    float: left
}

.article_category_right {
    width: 60%;
    float: right
}

@media only screen and (min-width: 601px) {
    .Article_Image {
        max-height: 120px;
        max-width: 120px;
        width: 95%
    }
}

@media only screen and (max-width: 600px) {

    .Article_Image_Wrapper {
        width: 40%;
    }

    .Article_Image {
        width: 95%
    }
}


/* Admin */
.th_align_right {
    text-align: right;
}

.th_align_center {
    text-align: center;
}



/* Social Media */
.social_media {
    float: left;
    width: 31%;
    text-align: center;
    margin-bottom: 60px;
}

.sm_facebook {
    border-right: 1px solid #aaa;
    padding-right: 1%;
    margin-right: 1%;
}

.sm_twitter {
    border-right: 1px solid #aaa;
    padding-right: 1%;
    margin-right: 1%;
}

.sm_instagram {
}

@media only screen and (min-width: 901px) and (max-width: 1160px) {
    .social_media {
        float: left;
        width: 47%;
    }

    .sm_facebook {
        border-right: 1px solid #aaa;
        padding-right: 1%;
        margin-right: 1%;
    }

    .sm_twitter {
        border-right: 0;
        padding-right: 1%;
        margin-right: 1%;
    }

    .sm_instagram {
    }
}

@media only screen and (max-width: 900px) {
    .social_media {
        float: left;
        width: 100%;
    }

    .sm_facebook {
        border-right: 0;
        padding-right: 0;
        margin-right: 0;
    }

    .sm_twitter {
        border-right: 0;
        padding-right: 0;
        margin-right: 0;
    }

    .sm_instagram {
    }
}



/* Amend Order */
.amendorder {
    background-color: #eee;
    padding: 2% 2% 1% 2%;
    margin-bottom: 100px;
}

@media only screen and (max-width: 800px) {
    .amendorder {
        width: 95%;
    }
}

@media only screen and (min-width: 801px) and (max-width: 1100px) {
    .amendorder {
        width: 70%;
    }
}

@media only screen and (min-width: 1101px) {
    .amendorder {
        width: 45%;
    }
}

/* Amend Order Header */
.amendorder_header {
    width: 100%;
    height: 30px;
    background-color: #DBF4BA;
    border: 1px solid #64A70B;
    margin-bottom: 20px;
    padding: 5px 0 15px 0;
}

.amendorder_header_text {
    padding: 10px 15px 0 15px;
    display: inline-block;
    color: #000;
    font-size: 1.1em;
}

@media only screen and (min-width: 801px) and (max-width: 1250px) {
    .amendorder_header {
        height: 70px;
    }

    .amendorder_header_text {
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 800px) {
    .amendorder_header {
        height: 100px;
    }

    .amendorder_header_text {
        margin-bottom: 10px;
    }
}

/* SLIDESHOWS */
.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}

.swipe-wrap {
    overflow: hidden;
    position: relative;
}

    .swipe-wrap > div {
        float: left;
        width: 100%;
        position: relative;
    }



/* Vacancies */
@media only screen and (min-width: 1201px) {
    .vacancies {
        width: 70%;
        margin-bottom: 30px;
    }
}


@media only screen and (max-width: 1200px) {
    .vacancies {
        width: 100%;
        margin-bottom: 30px;
    }
}



/* Gift Voucher */
.gift_voucher {
    background-color: #D6E5C2;
    width: 40%;
    float: left;
    padding: 10px;
    margin: 0 20px 40px 0;
    min-width: 530px;
    border: 1px solid #000000;
}

@media only screen and (max-width: 600px) {
    .gift_voucher {
        background-color: #D6E5C2;
        width: 95%;
        padding: 20px 30px 10px 0;
        margin: 0 0 40px 0;
        min-width: 95%;
        display: block;
    }
}

.gift_voucher h2 {
    color: #000000;
    text-align: center;
}

.gift_voucher_highlight {
    color: #ff760e;
    font-weight: bold;
}

.gift_voucher input, .gift_voucher textarea {
    margin-left: 10px;
}

.gift_voucher table {
    border-collapse: collapse;
    max-width: 500px;
}

ul.gift_voucher_list li {
    list-style: disc inside;
    text-indent: 10px;
}



@media only screen and (min-width: 1201px) {
    .gift_voucher_image {
        width: 30%;
    }
}

@media only screen and (min-width: 801px) and (max-width: 1250px) {
    .gift_voucher_image {
        width: 50%;
    }
}

@media only screen and (max-width: 800px) {
    .gift_voucher_image {
        width: 100%;
    }
}
