/* Minification failed. Returning unminified contents.
(8468,15): run-time error CSS1062: Expected semicolon or closing curly-brace, found '%'
 */
/* Normalize.css   http://necolas.github.io/normalize.css/2.1.3/normalize.css
Use this in preference to the classic 'reset' options http://www.cssreset.com/which-css-reset-should-i-use/ as it is lighter and less confusing/easier to analyse.  
===================== */

/* Main Civil Contarctors Site */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden], template {
    display: none;
}

html {
    font-family: 'Open Sans', Arial, Sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

a {
    background: transparent;
}

    a:focus {
        outline: thin dotted;
    }

    a:active, a:hover {
        outline: 0;
    }

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

mark {
    background: #ff0;
    color: #000;
}

code, kbd, pre, samp {
    font-family: monospace, serif;
    font-size: 1em;
}

pre {
    white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button, input {
    line-height: normal;
}

button, select {
    text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

    button[disabled], html input[disabled] {
        cursor: default;
    }

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

    input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* HTML tags the streamSWEET way
===================== */
body {
    font-size: 18px;
    line-height: 1.7;
    color: #3d3d3d;
    font-weight: 300;
    font-style: normal;
    margin: 0;
    background-color: #fff;
}

p {
    margin: 0 0 1.313em
}

h1 {
    font-family: 'Open Sans Condensed',sans-serif;
    font-style: normal;
    font-size: 56px;
    line-height: 64px;
    font-weight: 700;
    letter-spacing: 0em;
    color: #000;
    margin: 20px 0px 32px 0px;
}

h2 {
    font-family: 'Open Sans Condensed',sans-serif;
    font-style: normal;
    color: #000;
    font-weight: 700;
    font-size: 50px;
    line-height: 54px;
    letter-spacing: -.035em;
    margin: 34px 0px 10px 0px;
}

h3 {
    font-family: 'Open Sans Condensed',sans-serif;
    font-style: normal;
    color: #000;
    font-weight: 700;
    font-size: 34px;
    line-height: 38px;
    letter-spacing: -.035em;
    margin: 34px 0px 10px 0px;
}

h4 {
    font-family: 'Open Sans Condensed',sans-serif;
    font-style: normal;
    color: #000;
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -.035em;
    margin: 34px 0px 10px 0px;
}

h5 {
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
    color: #999;
    margin: 10px 0px 2px 0px;
}

h6 {
    font-size: 13px;
    line-height: 16px;
    font-weight: bold;
    color: #999;
    margin: 10px 0px 2px 0px;
}

blockquote {
    quotes: none;
    font-style: italic;
}

hr {
    border-top-width: 1px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #d4d4d4;
    margin-right: 0px;
    margin-left: 0px;
}

img {
    border: 0;
    display: block;
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    background: transparent;
}

    a:link, a:visited {
        color: #425d91;
        text-decoration: none;
    }

    a:active, a:hover, a:focus {
        color: #f60;
        text-decoration: none;
    }

/* streamSWEET additional Fonts 
===================== */
.TextStd {
}

.TextEmphasis {
    color: #999;
    font-style: italic;
}

.TextBold {
    font-weight: bold;
}

.TextSml1 {
    font-size: 12px;
    color: #666;
    line-height: 14px;
}

.TextSml2 {
    font-size: 11px;
    color: #999;
}

.TextLarge {
    font-size: 18px;
}

.TextQuote {
    font-size: 16px;
    font-weight: bold;
    color: #4898d4;
    line-height: 22px;
    font-style: italic;
}

.TextLabel {
    color: #777 !important;
    vertical-align: top;
}

.TextInstruct {
    font-size: 12px;
    color: #999;
    font-style: italic;
}

.TextNoData {
    color: #999;
    padding: 20px 5px 10px 5px;
    display: block;
}

.TextTime {
    font-weight: normal;
}

.TextDate {
    font-weight: bold;
}

/* Font - Legacy Support until replaced throughout the code.  Meantime manually align with h1 h2 etc tags above and text classes used above.
===================== */
.Head1 {
    font-size: 36px;
    line-height: 42px;
    font-weight: normal;
    color: #384f7b;
}

.Head2 {
    font-size: 28px;
    line-height: 36px;
    font-weight: normal;
    color: #333;
}

.Head3 {
    font-size: 20px;
    line-height: 28px;
    font-weight: normal;
    color: #384f7b;
}

.Head4 {
    font-size: 14px;
    line-height: 18px;
    font-weight: bold;
    color: #3182e0;
}

.Text1 {
    font-size: 12px;
    color: #000;
}

.Text2 {
    font-size: 12px;
    color: #999;
}

.Text3 {
    font-size: 12px;
    color: #999;
    font-style: italic;
}

.Text4 {
    font-size: 14px;
    line-height: 17px;
    color: #000;
}

.Text5 {
    font-size: 14px !important;
}

.Text6 {
    font-size: 13px !important;
    line-height: 25px;
    color: #444444;
}

.TextStrong {
    font-weight: bold;
}

/* ======================================================================================== */
/* ======================================================================================== */
/* Template Layout */
/* ======================================================================================== */
/* ======================================================================================== */

/* First level full screen width horizontal containers for each logical section of content. Set vertical padding, background colours/images, height (if explicit) */
.ShellUserDetail {
    padding: 0 0;
    background-color: #f2f5f8;
    min-height: 48px;
}

.ShellLogoMenuHome {
    padding: 8px 0;
    background-color: #fff;
    z-index: 1000;
    height: 78px;
    border-bottom: 1px solid #ddd;
    transition: all 0.3s;
}

.ShellLogoMenu {
    padding: 8px 0;
    background-color: #fff;
    z-index: 1000;
    height: 78px;
    border-bottom: 1px solid #ddd;
    transition: all 0.3s;
}

.ShellLogoBanner {
    padding: 8px 0;
    background-color: #fff;
    z-index: 1000;
    height: 78px;
    border-bottom: 1px solid #ddd;
    transition: all 0.3s;
}

.ShellMenu {
    padding: 0 0;
    background-color: #e3e3e3;
    height: 78px;
}

.ShellHero {
    padding: 0;
    background-color: #8e897d;
}

.ShellContentStd {
    padding: 20px 0 30px 0;
    background-color: #fff;
    min-height: 500px;
}

.ShellFooter {
    padding: 50px 0;
    background-color: #f3f5f8;
    border-top: 3px solid #cdd6e1;
}

.ShellFooterSponsors {
    border-top: 3px solid #cdd6e1;
    padding-top: 20px;
}

.ShellBottom {
    padding: 10px 0;
    background-color: #f3f5f8;
    border-top: 3px solid #cdd6e1;
}

.ShellPageBanner {
    min-height: 260px;
    background-color: #000;
}

/* Second level container, nested within each logical section of the page per above. Set horizontal alignment, usable width and position (to give an anchor for nested elements with position handling). */
.SectionWrapper {
    margin: 0 auto;
    position: relative;
    max-width: 1380px;
    width: 96%;
}

/* Custom */

.EventSelectHeading {
    font-family: 'Open Sans Condensed',sans-serif;
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 5px 0;
}

.EventSelectIcon {
    width: 50px;
    margin: 5px auto;
}

    .EventSelectIcon em {
        color: #2b5886;
    }

.MinHeight200 p {
    line-height: normal;
}
/* Try to reduce the font size and vertical space of this form */
.EventForm > .FormSetHor > div > div:nth-of-type(2) > span, .EventForm > .FormSetHor > section > div > div:nth-of-type(2) > span, .EventForm > .FormSetVert > div > div:nth-of-type(2) > span, .EventForm > .FormSetVert > section > div > div:nth-of-type(2) > span {
    font-size: 16px;
    line-height: 20px;
}

/* Template specific layout handlers */

/* Home 
===================== */
.hContent1 {
    padding: 30px 0;
    background-color: #fff;
    text-align: left;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
}
/* Content 1 */
.hContent2 {
    padding: 30px 0;
    text-align: left;
    vertical-align: top;
}
/* Content 2 */

/* Content - Standard
===================== */
.cNavSub {
    padding: 0px 0px 5px 0px;
    background-color: #fff;
    vertical-align: top;
}

.cContent1 {
    width: 94%;
    padding: 20px 0;
    background-color: #fff;
    text-align: left;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
}
/* Content 1 */
.cContent2 {
    width: 94%;
    padding: 20px 0;
    text-align: left;
    vertical-align: top;
}
/* Content 2 */

/* Container for User Login Text/Name*/
.cLogin {
    float: right; /*background-color:#fff;*/
    padding: 0 24px;
    margin: 10px;
    font-weight: 300;
    font-size: 13px;
}

    .cLogin a:link, .cLogin a:visited {
        color: #11598a;
        text-decoration: none;
    }

    .cLogin a:hover, .cLogin a:active {
        color: #333;
        text-decoration: underline;
    }
/* Container for basket */
.cBasket {
    margin: 5px 20px 0 0;
    float: right;
    color: #666;
    font-size: 14px;
}

    .cBasket a:link, .cBasket a:visited {
        color: #11598a;
        text-decoration: none;
        text-align: right;
    }

    .cBasket a:hover, .cBasket a:active {
        text-decoration: underline;
    }

.CartIcon {
    float: left;
    padding-top: 8px;
}

/* Footer
===================== */
.FooterText {
    font-size: 9px;
    color: #666;
    line-height: 15px;
}

    .FooterText a:link, .FooterText a:visited {
        color: #666;
        text-decoration: underline;
    }

    .FooterText a:hover, .FooterText a:active {
        color: #f60;
        text-decoration: underline;
    }

/* Custom Footer Navigation */
/*  GRID OF FOUR  */
.span_1_of_4Footer {
    width: 23.8%;
}

.FooterNavText {
    color: #11598a;
    font-size: 14px;
    line-height: 18px;
    font-weight: 200;
}

    .FooterNavText a:link, .FooterNavText a:visited {
        color: #11598a;
        text-decoration: none;
    }

    .FooterNavText a:hover, .FooterNavText a:active {
        color: #11598a;
        text-decoration: underline;
    }

.ShellFooter hr {
    border-top-width: 2px;
    border-top-style: solid;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    border-top-color: #a7a7a7;
    margin-right: 0px;
    margin-left: 0px;
}

.FooterSocialIcons {
    float: left;
    margin: 5px;
}

/* Material Icons */

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr; /* WebKit */
    -webkit-font-smoothing: antialiased; /* Chrome */
    text-rendering: optimizeLegibility; /* Firefox */
    -moz-osx-font-smoothing: grayscale; /* IE */
    font-feature-settings: 'liga';
}

    /* Rules for sizing the icons. */
    .material-icons.md-14 {
        font-size: 14px;
    }

    .material-icons.md-16 {
        font-size: 16px;
    }

    .material-icons.md-18 {
        font-size: 18px;
    }

    .material-icons.md-24 {
        font-size: 24px;
    }

    .material-icons.md-30 {
        font-size: 30px;
    }

    .material-icons.md-36 {
        font-size: 36px;
    }

    .material-icons.md-48 {
        font-size: 48px;
    }

    .material-icons.md-70 {
        font-size: 70px;
    }

    /* Rules for using icons as black on a light background. */
    .material-icons.md-dark {
        color: rgba(0, 0, 0, 0.54);
    }

        .material-icons.md-dark.md-inactive {
            color: rgba(0, 0, 0, 0.26);
        }

    /* Rules for using icons as white on a dark background. */
    .material-icons.md-light {
        color: rgba(255, 255, 255, 1);
    }

        .material-icons.md-light.md-inactive {
            color: rgba(255, 255, 255, 0.3);
        }

/* ======================================================================================== */
/* ======================================================================================== */
/* Navigation */
/* ======================================================================================== */
/* ======================================================================================== */

/* Responsive Menu
===================== */
/* Menu bar setup */
#nav {
    z-index: 10000;
    position: absolute;
    top: 0;
    padding-left: 300px;
}
    /* 300px indent to allow for Logo */
    #nav > a {
        display: none;
    }

    /* Generic */
    #nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        background-color: #fff;
    }

    #nav li {
        position: relative;
        text-align: left;
    }

        #nav li a {
            display: block;
            text-decoration: none;
        }

    /* First level */
    #nav > ul > li {
        display: inline-block;
    }

        #nav > ul > li > a {
            color: rgba(0,0,0,.75);
            font-size: 14px;
            font-weight: 700;
            padding: 26px 20px;
        }

        #nav > ul > li.NavParent > a:after {
            content: '\25BC';
            font-size: 10px;
            color: rgba(0,0,0,.35);
            position: absolute;
            top: 30px;
            right: 5px;
        }
        /* Down Arrow */
        #nav > ul > li.NavParent > a:hover {
            cursor: context-menu;
        }

        #nav > ul > li.NavSelected > a {
            color: #2b5886;
            font-weight: bold;
        }

            #nav > ul > li.NavSelected > a:after {
                color: #8e897d;
            }

        #nav > ul > li:hover > a, #nav > ul > li:hover > a:after {
            color: #222;
        }

        /* Second level  */
        #nav > ul > li > ul {
            z-index: 10001;
            width: 200px;
            position: absolute;
            top: calc(100% - 14px);
            overflow: hidden;
            padding: 0;
            max-height: 0;
            opacity: 0;
            transition: padding 0.0s, max-height 1.5s, opacity 0.5s;
        }

        #nav > ul > li:hover > ul {
            padding: 15px 0;
            max-height: 800px;
            opacity: 1;
            overflow: visible;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #nav > ul > li > ul > li > a {
            font-size: 14px;
            padding: 8px 15px;
        }

        #nav > ul > li > ul > li.NavParent > a:after {
            content: '\25BA';
            font-size: 10px;
            color: #555;
            position: absolute;
            top: 8px;
            right: 5px;
        }

        #nav > ul > li > ul > li:hover > a, #nav > ul > li > ul > li:hover > a:after {
            color: #222;
        }

        /* Third level. !*!* Note that JQuery is used to affect the direction of the flyout on the last item in the main nav. */
        #nav > ul > li > ul > li > ul {
            z-index: 10002;
            position: absolute;
            top: -1px;
            left: calc(100% - 5px);
            padding: 0;
            width: 0;
            max-height: 0;
            opacity: 0;
            transition: padding 0.0s, width 0.0s, max-height 1.5s, opacity 0.75s;
        }

        #nav > ul > li > ul > li:hover > ul {
            padding: 5px 0;
            width: 200px;
            max-height: 800px;
            opacity: 1;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #nav > ul > li > ul > li > ul > li {
            display: none;
        }
        /* without this, the LI elements have size and were wrongly triggering hover events. */
        #nav > ul > li > ul > li:hover > ul > li {
            display: block;
        }

        #nav > ul > li > ul > li > ul > li > a {
            font-size: 14px;
            padding: 8px 15px;
        }

            #nav > ul > li > ul > li > ul > li > a:hover {
                color: #222;
            }

/* Second level Sub Nav - Vertical 
===================== */
#navSub, #navSub ul {
    width: 100%;
    list-style: none;
    line-height: 14px;
    padding: 0;
    margin: 0;
    font-size: 13px;
}

    #navSub .sel {
        background-color: #fff;
        color: #11598a;
        font-weight: 700;
        background-image: url(/assets/images/arrow_subnav_1_on.svg);
    }

    #navSub a {
        display: block;
        color: #8f897c;
        text-decoration: none;
    }

    #navSub li {
        margin: 0px;
        padding: 0px;
        background: url(/assets/images/arrow_subnav_1.svg) 10px 10px no-repeat;
        list-style: none;
    }

        #navSub li a {
            width: 90%;
            w\idth: 85%;
            padding: 8px 5px 5px 36px;
            background: url(/assets/images/arrow_subnav_1.svg) 10px 10px no-repeat;
        }

        #navSub li ul {
            border: 0;
        }

        #navSub li li .sel {
            background-color: #fff;
            color: #11598a;
            background-image: url(/assets/images/arrow_subnav_2_on.svg);
        }

        #navSub li li {
            margin: 0px;
            padding: 0px;
            background: url(/assets/images/arrow_subnav_2.svg) 26px 10px no-repeat;
        }

            #navSub li li a {
                width: 90%;
                w\idth: 85%;
                padding: 8px 5px 5px 50px;
                background: url(/assets/images/arrow_subnav_2.svg) 26px 10px no-repeat;
            }

    #navSub a:hover {
        background-color: #fff;
        color: #191e92;
        transition: all 0.5s linear;
    }

/* Second level Sub Nav - Horizontal 
===================== */
.navSubH {
    font-size: 10px;
    color: #5d6786;
    line-height: 14px;
}

    .navSubH a:link {
        color: #5d6786;
        text-decoration: none;
    }

    .navSubH a:visited {
        color: #666;
        text-decoration: none;
    }

    .navSubH a:active, .navSubH a:hover {
        color: #f60;
        text-decoration: underline;
    }

/* Breadcrumbs Nav 
===================== */
.MenuBCrumb {
    font-size: 10px;
    color: #333;
    font-weight: bold;
}

    .MenuBCrumb a:link, .menuBCrumb a:visited {
        color: #666;
        text-decoration: none;
    }

    .MenuBCrumb a:active, .menuBCrumb a:hover {
        color: #a60e0e;
        text-decoration: underline;
    }

/* Bottom Text Nav
===================== */
.MenuBotL1 {
    font-size: 12px;
    color: #11598a;
    font-weight: 700;
    line-height: 14px;
    margin-top: 20px;
}

    .MenuBotL1 a:link {
        color: #3488c1;
        text-decoration: underline;
        font-weight: 300;
    }

    .MenuBotL1 a:visited {
        color: #3488c1;
        text-decoration: underline;
        font-weight: 300;
    }

    .MenuBotL1 a:active, .MenuBotL1 a:hover {
        color: #8f897c;
        text-decoration: underline;
        font-weight: 300;
    }

    .MenuBotL1 span {
        padding: 0 5px 0 5px;
        color: #8f897c;
        font-weight: 300;
    }

.MenuBotL2 {
    font-size: 12px;
    color: #11598a;
    font-weight: 700;
    line-height: 14px;
    margin-top: 10px;
}

    .MenuBotL2 a:link {
        color: #3488c1;
        text-decoration: underline;
        font-weight: 300;
    }

    .MenuBotL2 a:visited {
        color: #3488c1;
        text-decoration: underline;
        font-weight: 300;
    }

    .MenuBotL2 a:active, .MenuBotL2 a:hover {
        color: #8f897c;
        text-decoration: underline;
        font-weight: 300;
    }

    .MenuBotL2 span {
        padding: 0 5px 0 5px;
        color: #8f897c;
        font-weight: 300;
    }

/* Main Logo */
.LogoMain {
    z-index: 10005;
    position: absolute;
    left: 3%;
    top: 0; /*height:68px;*/
    transition: all 0.3s;
}

/* streamSWEET Branding */
.streamSWEETLogo {
    float: right;
    margin: 20px auto;
}

/* group is used to replace clearfix */
.group:after {
    content: "";
    display: table;
    clear: both;
}

/* Sticky Panel */
.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

    .sticky:before, .sticky:after {
        content: ' ';
        display: table;
    }

/* Sticky top logo / Navigation row resize handling.  Triggered by JavaScript function "init"
===================== */
header.HdrSmaller {
    height: 40px;
    padding: 3px 0;
}

.HdrSmaller .LogoMain {
    height: 38px;
}

.HdrSmaller .SignUpLink {
    top: 5px;
    font-size: 14px;
}

.HdrSmaller #nav > ul > li > a {
    padding: 7px 20px;
}

.HdrSmaller #nav > ul > li > ul {
    top: calc(100%);
}

.HdrSmaller #nav > ul > li.NavParent > a:after {
    top: 12px;
}

/* Sign Up Button */
.SignUpLink { /*position:absolute; right:0;*/
    float: right;
    margin-top: 7px;
    text-align: center;
    font-weight: 300;
    padding: 7px 25px;
    font-size: 14px;
    line-height: normal;
    display: inline-block;
    border-radius: 3px;
    z-index: 10009;
    background-color: #11598a;
    transition: all 0.3s;
}

a.SignUpLink:link, a.SignUpLink:visited {
    text-decoration: none;
    color: #fff;
}

a.SignUpLink:hover, a.SignUpLink:active {
    text-decoration: none;
    color: #fff;
    background-color: #254c6f;
    transition: all 0.3s ease;
}

/* Add an item to the basket - animated flydown
===================== */
.BasketPreview {
    display: block;
    animation: BasketAdd 20.0s forwards;
    opacity: 0;
    width: 400px;
    max-width: calc(95vw - 40px);
    padding: 5px 10px 16px 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 4px 4px 8px 0px #ccc;
    position: fixed;
    top: 20px;
    right: 5%;
    z-index: 10000;
    overflow: hidden;
}

    .BasketPreview:target {
        display: none;
    }

    .BasketPreview > a {
        display: block;
    }
/* Close Button */
.CloseIt {
    float: right;
    vertical-align: middle;
    margin: 5px 10px 12px 5px;
    padding: 4px 16px 3px 12px;
    font-size: 12px;
    line-height: 12px;
    border: 1px solid transparent;
    border-radius: 12px;
}

    .CloseIt span {
        position: relative;
        top: -2px;
        left: 4px;
    }
    /* align text with icon */
    .CloseIt a:hover {
        border: 1px solid #ccc;
        transition: all 1.0s ease;
    }
/* Product Info */
.BasketPreviewName {
    float: left;
    padding: 3px 10px;
    font-size: 12px;
}

.BasketPreviewPrice {
    font-weight: 700;
}
/* View Cart Link */
.BasketPreviewCart {
    float: right;
}

.CartLink {
    float: right;
    vertical-align: middle;
    margin: 3px;
    color: #fff;
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    padding: 3px 20px 3px 16px;
    font-size: 12px;
    line-height: 12px;
    border-radius: 5px;
}

    .CartLink span {
        position: relative;
        top: -3px;
        left: 3px;
    }
    /* align text with icon */
    .CartLink:hover {
        border-color: #3eb7ed;
        box-shadow: 0 0 3px 3px rgba(76, 76, 76, 0.1);
        transition: all 1.0s ease;
    }

@keyframes BasketAdd {
    0% {
        top: -200px;
    }

    5% {
        top: 20px;
        opacity: 1.0;
    }

    90% {
        top: 20px;
        opacity: 1.0;
    }

    95% {
        top: 20px;
        opacity: 0.5;
    }

    99% {
        opacity: 0.0;
    }

    100% {
        top: -9000px;
    }
}

/* Added heading styles where we do not want to use h1, h2 etc */
.Heading1 {
    font-size: 18px;
    line-height: 22px;
    height: 38px;
    vertical-align: top;
    color: #1c374a;
    font-weight: bold;
    background-color: #f8f8f8;
    padding: 0 0 0 20px;
    border: 1px solid #ccc;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    overflow: hidden;
}

    .Heading1 span, .Heading1 div {
        float: left;
        margin-top: 8px;
    }

    .Heading1 div {
        float: left;
        margin-top: 1px;
    }

    .Heading1 .BtnAddNew {
        border-top-right-radius: 6px;
        color: #1c374a;
        height: 38px;
    }

.Heading2 {
    font-size: 16px;
    line-height: 20px;
    height: 34px;
    color: #1c374a;
    font-weight: normal;
    padding: 0 0 0 10px;
    vertical-align: top;
    background-color: #dfe3ea;
    overflow: hidden;
}

.Heading2Top {
    font-size: 16px;
    line-height: 20px;
    height: 34px;
    color: #1c374a;
    font-weight: normal;
    padding: 0 0 0 10px;
    vertical-align: top;
    background-color: #dfe3ea;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 1px solid #ccc;
    border-bottom: 0;
    overflow: hidden;
}

    .Heading2 span, .Heading2Top span {
        float: left;
        margin-top: 6px;
    }

    .Heading2 div, .Heading2Top div {
        float: left;
        margin-top: 1px;
    }

    .Heading2 aside, .Heading2Top aside {
        float: right;
        margin: 3px 10px 0 0;
    }

    .Heading2Top .BtnAddNew {
        border-top-right-radius: 4px;
        color: #1c374a;
    }

    .Heading2Top i {
        color: #1c374a !important;
    }

    .Heading2Top select {
        float: right;
        margin: 2px 10px 0 0 !important;
        height: 20px !important;
        font-size: 11px;
        border-radius: 3px;
    }

.Heading3 {
    font-size: 12px;
    line-height: 17px;
    color: #1c374a;
    font-weight: bold;
    padding: 4px 5px 4px 8px !important;
    background-color: #e8eefa;
    overflow: hidden;
    border-bottom: 1px solid #d1d8e8;
    margin: 0;
}

.Heading3Top {
    font-size: 12px;
    line-height: 17px;
    height: 20px;
    color: #1c374a;
    font-weight: bold;
    padding: 0 0 0 5px;
    vertical-align: top;
    background-color: #e8eefa;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
}

    .Heading3 span, .Heading3Top span, .Heading3 div, .Heading3Top div {
        float: left;
        margin-top: 1px;
    }

.Heading3 > a {
    float: right;
    margin-right: 5px;
}

.Heading3Top .BtnAddNew {
    border-top-right-radius: 3px;
}

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* CONTENT LAYOUT - DIV based (being phased IN) */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* Main Content Area - Admin */
.ContentShell {
    overflow: hidden;
    padding: 0 5px 10px 5px;
    border-color: #eee;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    background-color: #fcfcfc;
    min-height: 600px;
}

.ContentColSet1Left {
    width: 30%;
    float: left;
}

.ContentColSet1Right {
    width: 70%;
    float: right;
}

.ContentColSet2Left {
    width: 40%;
    float: left;
}

.ContentColSet2Right {
    width: 60%;
    float: right;
}

.ContentColSet3Left {
    width: 50%;
    float: left;
}

.ContentColSet3Right {
    width: 50%;
    float: right;
}

.ContentColSet4Left {
    width: 65%;
    float: left;
}

.ContentColSet4Right {
    width: 35%;
    float: right;
}

.ContentColContRight {
    margin-left: 8px;
}

/* Panels within content area - Admin */
.PanelShell {
    margin: 13px 0 0 0;
}

.PanelShellTop {
    margin: 0;
}
/* Occasionally needed for a panel that sits at the top, where spacing is already applied at the container level*/
.PanelContainTable {
    border: solid 1px #ccc;
    background-color: #efefef;
    background-image: linear-gradient(0deg, #efefef, #fff 90%);
}

.PanelContainText {
    padding: 10px;
    border: solid 1px #ccc;
    background-color: #efefef;
    background-image: linear-gradient(0deg, #efefef, #fff 90%);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.PanelContainTextSquare {
    padding: 10px;
    border: solid 1px #ccc;
    background-color: #efefef;
    background-image: linear-gradient(0deg, #efefef, #fff 90%);
}

.PanelContainChart {
    padding: 10px;
    border: solid 1px #ccc;
    background-color: #efefef;
    background-image: linear-gradient(0deg, #efefef, #fff 90%);
    border-radius: 5px;
}

.PanelContainTree {
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-color: #ccc;
    background-color: #efefef;
    background-image: linear-gradient(0deg, #efefef, #fff 90%);
    padding: 10px 5px 25px 5px;
}

.PanelContainColumns {
    overflow: hidden;
}

.PanelContainRow {
    overflow: hidden;
    background-color: #fff;
    border-top: 1px solid #ccc;
    padding: 6px;
}

    .PanelContainRow:hover {
        background-color: #fcfce3;
    }

    .PanelContainRow img {
        border: 1px solid #ccc;
    }

.PanelContainImgCrop {
    position: relative;
    width: 600px;
}
/* if desired to change container size, you must update class level variable inside ItemFileImageCrop control to match*/
.PanelTabsContentTelerik {
    margin-top: -1px;
    border: 1px solid #ccc;
    padding: 13px 10px 10px 10px;
    background-color: #fff;
    overflow: hidden;
}

.PanelContentItemSet {
    margin: 15px 10px 0 10px;
}

    .PanelContentItemSet > span {
        display: block;
        line-height: 16px;
    }

.PanelAccount {
    position: absolute;
    right: 75px;
    top: 0;
    padding-top: 5px;
    font-size: 14px;
}

.PanelAccountBasket {
    display: inline-block;
    margin: 0 30px 0 0;
}

.PanelAccountBasketCount {
    color: #f00;
    font-weight: bold;
}

.PanelLoginAccount {
    display: inline-block;
}

.PanelLoginAccount {
    color: #666;
}

    .PanelLoginAccount a {
    }

        .PanelLoginAccount a:hover {
            color: #006f98;
        }

.ChangeButton {
    background-color: #cdd6e1;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
}

.PanelLoginOuter1 {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10005;
}

.PanelLoginOuter2 {
    margin: 0 auto;
    max-width: 1100px;
    position: relative;
}

.PanelLogin {
    margin: 0 auto;
    background-color: #f5f5f5;
    padding: 15px 30px;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 5px solid #999;
}

.PanelLoginCont {
    position: absolute;
    top: 0;
    right: 150px;
    height: 0;
    overflow: hidden;
}

.PanelLogin input {
    display: inline-block;
    margin: 5px 0 !important;
}

.PanelLoginHide {
    float: right;
    margin: -20px -20px 50px 0;
    color: #666;
    padding: 0 10px;
    border: 1px solid transparent;
}

    .PanelLoginHide:hover {
        border: 1px solid #000;
        background-color: #fff;
        cursor: pointer;
    }

.PanelLoginProfile {
    background-color: #f5f5f5;
    padding: 15px 30px;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 5px solid #999;
    width: 300px;
    font-size: 14px;
}

.PanelLoginProfileCont {
    position: absolute;
    top: 0;
    right: 50px;
    height: 0;
    overflow: hidden;
}

.PanelLoginProfile a:link, .PanelLoginProfile a:visited {
    color: #69646c;
}

.PanelLoginProfile a:hover, .PanelLoginProfile a:active {
    color: #ff8c0a;
}

.PanelLoginProfileSelect {
    font-size: 12px;
    padding: 3px 10px;
}

/* Address Handling*/
/* data-address fields:Name, NameTradingAs, Building, StreetPOBox, Suburb, TownCity, PostZipCode, StateProvince, Country, Email, Phone*/
/* Note that for each country we may have custom formating, with several fields in one line. In those instances use first field data-address name i.e. TownCity for Auckland 1001*/
.PanelAddress > span {
    display: block;
}

.PanelAddress {
    margin: 15px 5px 5px 5px;
    font-size: 13px;
    line-height: 18px;
}

    .PanelAddress span[data-address=Name], .PanelAddress span[data-address=NameTradingAs] {
        font-size: 18px;
        line-height: 24px;
    }

    .PanelAddress span[data-address=Email] {
        margin-top: 15px;
    }

.PanelAddressBilling > span {
    display: block;
}

.PanelAddressBilling {
    margin: 15px 5px 5px 5px;
    font-size: 13px;
    line-height: 17px;
}

    .PanelAddressBilling span[data-address=Name], .PanelAddress span[data-address=NameTradingAs] {
        font-size: 18px;
        line-height: 24px;
    }

    .PanelAddressBilling span[data-address=Email] {
        margin-top: 15px;
    }

    .PanelAddressBilling span[data-address=PO] {
        margin-bottom: 20px;
        font-size: 14px;
    }

.PanelAddressDelivery > span {
    display: block;
}

.PanelAddressDelivery {
    margin: 15px 5px 5px 5px;
    font-size: 13px;
    line-height: 17px;
}

    .PanelAddressDelivery span[data-address=Name], .PanelAddress span[data-address=NameTradingAs] {
        font-size: 18px;
        line-height: 24px;
    }

    .PanelAddressDelivery span[data-address=Phone] {
        margin-top: 15px;
    }

/* Added heading styles where we do not want to use h1, h2 etc */
.Heading1 {
    font-size: 18px;
    line-height: 22px;
    height: 38px;
    vertical-align: top;
    color: #1c374a;
    font-weight: bold;
    background-color: #f8f8f8;
    padding: 0 0 0 20px;
    border: 1px solid #ccc;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    overflow: hidden;
}

    .Heading1 span, .Heading1 div {
        float: left;
        margin-top: 8px;
    }

    .Heading1 div {
        float: left;
        margin-top: 1px;
    }

    .Heading1 .BtnAddNew {
        border-top-right-radius: 6px;
        color: #1c374a;
        height: 38px;
    }

.Heading2 {
    font-size: 16px;
    line-height: 20px;
    height: 34px;
    color: #1c374a;
    font-weight: normal;
    padding: 0 0 0 10px;
    vertical-align: top;
    background-color: #dfe3ea;
    overflow: hidden;
}

.Heading2Top {
    font-size: 16px;
    line-height: 20px;
    height: 34px;
    color: #1c374a;
    font-weight: normal;
    padding: 0 0 0 10px;
    vertical-align: top;
    background-color: #dfe3ea;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 1px solid #ccc;
    border-bottom: 0;
    overflow: hidden;
}

    .Heading2 span, .Heading2Top span {
        float: left;
        margin-top: 6px;
    }

    .Heading2 div, .Heading2Top div {
        float: left;
        margin-top: 1px;
    }

    .Heading2 aside, .Heading2Top aside {
        float: right;
        margin: 3px 10px 0 0;
    }

    .Heading2Top .BtnAddNew {
        border-top-right-radius: 4px;
        color: #1c374a;
    }

    .Heading2Top i {
        color: #1c374a !important;
    }

    .Heading2Top select {
        float: right;
        margin: 2px 10px 0 0 !important;
        height: 20px !important;
        font-size: 11px;
        border-radius: 3px;
    }

.Heading3 {
    font-size: 12px;
    line-height: 17px;
    color: #1c374a;
    font-weight: bold;
    padding: 4px 5px 4px 8px !important;
    background-color: #e8eefa;
    overflow: hidden;
    border-bottom: 1px solid #d1d8e8;
    margin: 0;
}

.Heading3Top {
    font-size: 12px;
    line-height: 17px;
    height: 20px;
    color: #1c374a;
    font-weight: bold;
    padding: 0 0 0 5px;
    vertical-align: top;
    background-color: #e8eefa;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
}

    .Heading3 span, .Heading3Top span, .Heading3 div, .Heading3Top div {
        float: left;
        margin-top: 1px;
    }

.Heading3 > a {
    float: right;
    margin-right: 5px;
}

.Heading3Top .BtnAddNew {
    border-top-right-radius: 3px;
}

/* ======================================================================================== */
/* ======================================================================================== */
/* Content - Coded outputs */
/* ======================================================================================== */
/* ======================================================================================== */

/* Responsive Containers */
/* Video */
.VideoDetailOuter {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 2%;
}
/* iframe */
.iframe43 {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 75%;
}
/* Aspect ratio is achieved through "padding-bottom"....  75% = 4x3; 56.25% = 16x9. */
.iframe16x9 {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
}
    /* Aspect ratio is achieved through "padding-bottom"....  75% = 4x3; 56.25% = 16x9. */
    .iframe43, .iframe16x9 iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* Container for the DIV based Map handling	*/
.containerMap {
    width: 100%;
}

.outerMap {
    position: relative;
    width: 100%;
    padding-top: 50%;
}

.innerMap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.GoogleMapInfoWindow {
    min-height: 100px;
    min-width: 200px;
}

.GoogleMapHeading1 {
    font-size: 12px;
    font-weight: bold;
    color: #11598a;
}

.GoogleMapText1 {
    font-size: 11px;
}
/* St No. */
.GoogleMapText2 {
    font-size: 11px;
    color: #000;
}
/* Suburb. */
.GoogleMapText3 {
    font-size: 11px;
    color: #000;
}
/* City. */
.GoogleMapText4 {
    font-size: 11px;
    color: #000;
}
/* Country. */
.GoogleMapText5 {
    font-size: 10px;
    color: #000;
    padding: 7px 0;
}
/* Phone. */
.GoogleMapText6 {
    font-size: 10px;
    color: #3488c1;
    padding: 4px 0;
}
/* Web Address */
.GoogleMapText7 {
    font-size: 10px;
    color: #000;
    padding: 4px 0;
    border-top: 2px solid #8d897d;
}
/* Business type. */
.GoogleMapText8 {
    font-size: 10px;
    color: #000;
}
/* Untried as yet */
.GoogleMapText9 {
    font-size: 10px;
    color: #000;
}
/* Untried as yet */
.GoogleMapText10 {
    font-size: 10px;
    color: #000;
}
/* Untried as yet */

.GoogleMapButton {
    text-align: center;
    text-shadow: 0px 2px #0c1c5d;
    font-weight: 700;
    padding: 3px 20px;
    margin: 15px auto;
    font-size: 14px;
    line-height: normal;
    display: inline-block;
    border-radius: 5px;
    background-color: #0099ff;
    background-image: linear-gradient(0deg, #296abf, #1d327b 90%);
    cursor: pointer;
}

a.GoogleMapButton:link, a.GoogleMapButton:visited {
    text-decoration: none;
    color: #fff;
}

a.GoogleMapButton:hover, a.GoogleMapButton:active {
    text-decoration: none;
    background-color: #2a6abf;
    background-image: linear-gradient(0deg, #0099ff, #2a6abf 90%);
    transition: all 0.3s ease;
}

/* Table
===================== */
.TableBorder {
    background-color: #fff;
    border: 1px solid #888;
    margin-top: 1px;
}

.TableBasic {
    border: none;
    width: 100%;
    border-collapse: collapse;
}

    .TableBasic td {
        padding: 0;
    }

.TableInfoLayout {
    width: 100%;
    border-collapse: collapse;
}

    .TableInfoLayout > tbody > tr > th {
        text-align: left;
        font-size: 12px;
        color: #333;
        font-weight: bold;
        padding: 3px 5px 2px 10px !important;
        border: 1px solid #bebebe;
        background-color: #efefef;
        background-image: linear-gradient(0deg, #efefef, #fff 90%);
    }

    .TableInfoLayout > tbody > tr > td {
        text-align: left;
        vertical-align: top;
        padding: 7px 3px 3px 3px;
    }

    .TableInfoLayout > tbody > tr:first-of-type > td {
        padding: 10px 3px 3px 3px;
    }

/* should probably be reworked, because this has been moved from rugby for a handful of controls that we placed in streamSWEET. */
/* These controls are still not made part of the system properly, so we can either update them to use generic styles, or remove styles and controls */
/* usercontrol\SHOP\Payment\Front\CreditsLogBought.ascx */
/* usercontrol\front\custom\CreditsLogUsed.ascx */
/* usercontrol\front\Network\FriendsResultsList.ascx */
/* usercontrol\front\Network\MyFriends.ascx */
.AccountTable {
    margin-bottom: 6px;
}

    .AccountTable td {
        padding: 4px 2px;
    }

    .AccountTable th {
        text-align: left;
        background-color: #fff;
        border: 2px solid #cde9b4;
        font-size: 15px;
        padding: 6px;
        background-image: url(/assets/images/tile_header_profile.jpg);
        background-repeat: repeat-x;
    }

.AccountTableLeft {
    text-align: left;
    font-weight: bold;
    background-color: #fff;
    border-top: 2px solid #cde9b4;
    border-left: 2px solid #cde9b4;
    border-bottom: 2px solid #cde9b4;
    font-size: 15px;
    padding: 6px;
    background-image: url(/assets/images/tile_header_profile.jpg);
    background-repeat: repeat-x;
}

.AccountTableCenter {
    text-align: left;
    font-weight: bold;
    background-color: #fff;
    border-top: 2px solid #cde9b4;
    border-bottom: 2px solid #cde9b4;
    font-size: 15px;
    padding: 6px;
    background-image: url(/assets/images/tile_header_profile.jpg);
    background-repeat: repeat-x;
}

.AccountTableRight {
    text-align: left;
    font-weight: bold;
    background-color: #fff;
    border-top: 2px solid #cde9b4;
    border-right: 2px solid #cde9b4;
    border-bottom: 2px solid #cde9b4;
    font-size: 15px;
    padding: 6px;
    background-image: url(/assets/images/tile_header_profile.jpg);
    background-repeat: repeat-x;
}

.AccountTableSub {
    background-image: url(/assets/images/tile_account_sub.jpg);
    background-repeat: repeat-x;
    border-bottom: 1px solid #ccc;
}

/* Also from TR */
.TableInformation {
    padding: 2px;
    border: 1px solid #cde9b4;
    background-color: #fafcfa;
    width: 100%;
    max-width: 1200px;
}

    .TableInformation th {
        font-size: 12px;
        color: #000;
        background-image: url(/assets/images/tile_header_profile.jpg);
        background-repeat: repeat-x;
        text-align: left;
        padding: 5px;
        border-bottom: 2px solid #cde9b4;
    }

.TableInformationSub {
    font-size: 12px;
    padding: 4px;
    border-bottom: 2px solid #cde9b4;
    background-color: #ccc;
}

.TableInformation td {
    padding: 3px;
    vertical-align: top;
    border-bottom: 1px dashed #cde9b4;
    line-height: normal;
}

.TableAddAttendees {
    margin-top: 25px !important;
}

    .TableAddAttendees caption {
        text-align: left;
        padding-left: 5px;
        font-size: 12px;
        font-style: italic;
    }

/* streamSWEET predefined tables
===================== */
.Table1 {
    border-collapse: collapse;
    border: 1px solid #b7b8b8;
}

.Table1Head {
    background-color: #3c3c3c;
    padding: 5px 5px 5px 3px;
    font-size: 14px;
    font-weight: bold;
    color: #f7f7f7;
    text-align: left;
    border: 1px solid #b7b8b8;
}

.Table1SubHead {
    background-color: #d4d4d4;
    padding: 3px 3px 3px 3px;
    font-size: 12px;
    font-weight: bold;
    border-top: 1px solid #b7b8b8;
    border-bottom: 1px solid #b7b8b8;
}

.Table1Content {
    background-color: #fbfbfb;
    padding: 2px 2px 2px 3px;
    font-size: 12px;
    border-top: 1px solid #b7b8b8;
    border-bottom: 1px solid #b7b8b8;
}

.FormContItemFile {
    width: 90%;
    max-width: 800px;
    border-collapse: collapse;
    border: 1px solid #ccc;
}

    .FormContItemFile td {
        padding: 2px;
    }

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Data Repeater*/
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

.TableDataRepeat {
    width: 100%;
    border-collapse: collapse;
}

    .TableDataRepeat caption {
        text-align: left;
        font-size: 14px;
        color: #4b5267;
        font-weight: bold;
        padding: 7px 5px 4px 10px;
        border-color: #ccc;
        border-style: solid;
        border-width: 1px 1px 0 1px;
        background-color: #efefef;
        background-image: linear-gradient(0deg, #efefef, #fff 90%);
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .TableDataRepeat th {
        font-size: 12px;
        color: #4b5267;
        font-weight: normal;
        text-align: left;
        padding: 4px;
        background-color: #d6d8dc;
        background-image: linear-gradient(0deg, #d6d8dc, #eeeff1 90%);
    }

    .TableDataRepeat td {
        font-size: 12px;
        text-align: left;
        padding: 4px 3px;
    }

        .TableDataRepeat td a {
            text-decoration: none;
            display: block;
        }

            .TableDataRepeat td a:hover {
                text-decoration: none;
                color: #f30;
            }

    .TableDataRepeat tr:nth-child(even) {
        background-color: #fff;
        border-bottom: 1px solid #fff;
    }

    .TableDataRepeat tr:nth-child(odd) {
        background-color: #efefef;
        border-bottom: 1px solid #efefef;
    }

    .TableDataRepeat tr:hover {
        background-color: #fcfce3;
        border-bottom: 1px solid #c4c4b5;
    }

    .TableDataRepeat address {
        line-height: normal;
        font-style: normal;
        margin: 5px;
    }

        .TableDataRepeat address > a {
            margin-top: 5px;
        }

/* Data Grid 
===================== */
/* Note. There is a level of repetition and !important handling on the grid rows to override default Telerik values applied, where Telerik Grid is used.  */
.datagridTable {
    color: #f60;
    background-color: #fff;
    width: 100%;
}

.dataGridCont {
    border-width: 0 1px 1px 1px;
    border-style: sold;
    border-color: #999;
}

    .dataGridCont img {
        display: inline-block;
        margin: 0;
        vertical-align: middle;
    }

.datagrid {
    background-color: #fefefe;
    width: 100%;
}

    .datagrid td {
        padding: 0 1px 0 4px !important;
        font-size: 12px;
        border-top: 1px solid #ddd;
        height: 26px;
    }

        .datagrid td a {
            text-decoration: none;
            display: block;
        }

            .datagrid td a:before {
                content: '';
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }

    .datagrid tr:first-of-type td a {
        height: 100%;
        white-space: nowrap;
        display: block;
    }
    /* Custom hanlding for the sortable Header Row */
    .datagrid tr:last-of-type td {
        border-bottom: 1px solid transparent;
    }
    /* Stop the bottom row from vertical jumping - applicable where pagination exists */
    .datagrid tr td:last-of-type {
        padding-right: 3px !important;
    }
/* Make sure we have suitable white space at the right hand edge of the grid */

.datagridAlter {
    background-color: #f5f5f5;
}

    .datagridAlter td {
        padding: 0 1px 0 4px !important;
        font-size: 12px;
        border-top: 1px solid #ddd;
        height: 26px;
    }

        .datagridAlter td a {
            text-decoration: none;
            display: block;
        }

            .datagridAlter td a:before {
                content: '';
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }

.datagridSelected {
    background-color: #dfe6cf;
}

    .datagridSelected td {
        padding: 0 1px 0 4px !important;
        font-size: 12px;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
        height: 26px;
    }

        .datagridSelected td a {
            text-decoration: none;
            display: block;
        }

            .datagridSelected td a:before {
                content: '';
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }

.datagridOver {
    background-color: #fcfce3;
}

    .datagridOver td {
        padding: 0 1px 0 4px !important;
        font-size: 12px;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
        height: 26px;
    }

        .datagridOver td a {
            text-decoration: none;
            display: block;
        }

            .datagridOver td a:before {
                content: '';
                height: 100%;
                display: inline-block;
                vertical-align: middle;
            }

/* datagridHeader is only applied to the header row of non-sortable, non drag n drop grids. */
.datagridHeader {
    padding: 0;
}

    .datagridHeader td {
        padding: 4px 2px 4px 4px;
    }

/* Extra handling for the Header Row */
.datagridColumn {
    color: #2d4285;
    background-color: #C3CAD6;
    background-image: linear-gradient(0deg, #C3CAD6, #EBEFF5 90%);
}

    .datagridColumn a:link, .datagridColumn a:visited, .datagridColumn a:active {
        text-decoration: none;
        color: #2d4285;
    }

    .datagridColumn a:hover {
        color: #f30;
    }

    .datagridColumn a::after {
        content: "\21F5";
        margin-left: 4px;
        color: transparent;
    }

    .datagridColumn a:hover::after {
        content: "\21F5";
        margin-left: 4px;
        color: #333;
    }

.datagridColumnSelected {
    color: #2d4285;
    background-color: #C3CAD6;
    background-image: linear-gradient(0deg, #C3CAD6, #EBEFF5 90%);
}

    .datagridColumnSelected a:link, .datagridColumnSelected a:visited, .datagridColumnSelected a:active {
        text-decoration: none;
        color: #2d4285;
    }

    .datagridColumnSelected a::after {
        content: "\21F5";
        margin-left: 5px;
        color: #333;
    }
    /*\21C5 \21E7 \21E9 \2191 \2193 */
    .datagridColumnSelected a:hover {
        color: #f30;
    }

/*Format pagination handling. */
.datagridPager td {
    height: 35px;
    font-size: 14px;
    color: #006;
    font-weight: normal;
    background-color: #fff;
    padding: 8px 40px 6px 0 !important;
    text-align: right;
    vertical-align: bottom;
    border-top: 1px solid #999;
}

    .datagridPager td span {
        padding: 0 5px 0 5px;
        font-weight: bold;
    }

    .datagridPager td a {
        padding: 0 8px;
        margin: 0 1px 0 0;
        color: #999;
        font-weight: normal;
        border: 1px solid #666;
        display: inline-block;
        line-height: 20px;
        height: 24px;
        border-radius: 3px;
    }

        .datagridPager td a:hover {
            background-color: #555;
            border-color: #000;
            color: #fff;
            font-weight: bold;
        }

/*Apply colours to key columns with data such as "Yes" and "No" so they stand out more. */
.datagridRed {
    font-size: 11px;
    color: #006;
    font-weight: normal;
    background-color: #ffd9d9;
}

.datagridGreen {
    font-size: 11px;
    color: #006;
    font-weight: normal;
    background-color: #d0ffce;
}

.datagridOrange {
    font-size: 11px;
    color: #006;
    font-weight: normal;
    background-color: #ffe6b0;
}

/* RadGrid - used for drag and drop grid */
.HypergridTableHeader {
    overflow: hidden;
    width: 100%;
    table-layout: fixed;
    empty-cells: show;
    border-collapse: collapse;
}

    .HypergridTableHeader th {
        padding: 4px 2px 4px 4px;
    }

.DivDragDropImage {
    margin-left: auto;
    margin-right: auto;
    width: 16px;
    height: 16px;
    text-align: center;
    background-image: url(/assets/images/icon_sort_up_down.gif);
}

.RadGridDragDropEnabled {
    cursor: move;
}

.rgPager .rgCurrentPage {
    text-decoration: none;
    color: Black;
}

.rgPager .rgInfoPart {
    display: none;
}

.rgMasterTable {
    border-collapse: collapse !important;
}

    .rgMasterTable tr th {
        vertical-align: bottom;
    }

    .rgMasterTable tr:last-of-type td {
        border-bottom: 1px solid #999;
    }

.rgFooterWrapper {
    border-top: 2px solid #999;
    padding-top: 5px;
    color: #4b5267 !important;
    font-size: 11px;
}


/* TABS PANEL - Used for presentation of content in a tabbed view.  This handles the tabs that sit in Div which sits directly above a content panel. */
.Tabs {
    font-size: 14px;
    overflow: hidden;
    margin: 0 10px 0 10px;
    height: 30px;
}

    .Tabs a {
        float: left;
        display: block;
        height: 23px;
        line-height: 20px;
        padding: 3px 12px 2px 12px;
        margin: 3px 0 0 0;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        background-color: #e6ebf2;
        border: 1px solid #A6A6A6;
        border-bottom: none;
    }

    .Tabs:not(a:first-of-type) {
        margin-left: -1px;
    }

    .Tabs a:link, .Tabs a:visited, .Tabs a:active {
        color: #6e6e6e;
        text-decoration: none;
    }

    .Tabs a:hover {
        color: #2d4285;
        background-color: #fff;
    }

    .Tabs .TabsOn {
        height: 27px !important;
        line-height: 20px;
        margin-top: 0;
    }

.TabsOn {
    color: #2d4285 !important;
    background-color: #fafcff !important;
    border-top: 5px solid #536d80 !important;
}

    .TabsOn a:link, .TabsOn a:visited, .TabsOn a:active {
        color: #2d4285;
        text-decoration: none;
    }

    .TabsOn a:hover {
        color: #dfeaee;
        text-decoration: underline;
    }

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Telerik Tabs */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* Overrides to get the base environment as Stream needs it. Note this CSS Class "PanelTabsContentTelerik" (above) which is set to margin-top:-1px; */
.RadTabStrip .rtsLevel1 {
    border: none !important;
}

.RadTabStrip .rtsLink {
    border: none !important;
}

.RadTabStrip .rtsUL {
    border-bottom: 1px solid transparent;
    margin-bottom: 0 !important;
}

/* Primary handling - Class applies to the LI */
.RadTabStrip .RadTab {
    background-color: #f5f5f2;
    text-align: center;
    border: 1px solid #ccc;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: -1px;
    vertical-align: bottom !important;
}

    .RadTabStrip .RadTab:not(:first-child) {
        margin-left: -1px;
    }

/* Control the various additional states that a tab can have */
.RadTabStrip .RadTabSelected {
    background-color: #fff;
    border-bottom: 1px solid #fff;
}

.RadTabStrip .RadTabHovered {
    background-color: #e5e5de;
}

.RadTabStrip .RadTabSelected.RadTabHovered {
    background-color: #fff;
}

.RadTabStrip .RadTabDisabled {
    color: #999;
}

/* Control how the text sits within the tab, and in doing so also control the overall height of each tab */
.RadTabStrip .rtsLink {
    padding: 7px 14px 5px 14px !important;
}

.RadTabStrip .RadTabSelected .rtsLink {
    padding: 9px 14px 6px 14px !important;
}

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */


/* Stream 
===================== */

/* In-page alert and information panels */
.in-page-alert-panel {
    width: calc(100% - 126px);
    max-width: 800px;
    margin: 18px 10px;
    padding: 10px 30px 10px 70px;
    font-size: 1.1em;
    position: relative;
    min-height: 40px;
}

    .in-page-alert-panel i {
        position: absolute;
        top: 15px;
        left: 10px;
    }

    .in-page-alert-panel p {
        color: #333;
    }

    .in-page-alert-panel a {
        font-weight: bolder;
    }

.in-page-alert-title {
    font-size: 1.3em;
}

.in-page-alert-emphasis {
    font-style: italic;
}

.in-page-alert-btn {
    margin: 20px 10px 15px 10px;
}

.in-page-alert-note {
    background-color: #eaf7fd;
    border-left: 6px solid #2d465d;
}

    .in-page-alert-note i {
        color: #2d465d;
    }

.in-page-alert-warning {
    background-color: #fff8d0;
    border-left: 6px solid #ff9c2b;
}

    .in-page-alert-warning i {
        color: #ff9c2b;
    }

.in-page-alert-error {
    background-color: #f9e1df;
    border-left: 6px solid #e83724;
}

    .in-page-alert-error i {
        color: #e83724;
    }

/* Alert Message Handling - Appears at bottom right of screen after content/form updates */
.AlertBox {
    width: 350px;
    margin: 0;
    padding: 0;
    border-radius: 3px;
    box-shadow: 0 0 20px 0px #ccc;
    overflow: hidden;
    cursor: auto;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
}

.AlertBoxInner {
    padding: 10px 10px 10px 70px;
    overflow: hidden;
    z-index: 9999;
}

.AlertBoxTitle {
    margin: 5px 0 0 0;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.AlertBoxText {
    margin: 15px 10px 10px 0;
    font-size: 1.1em;
    color: #333;
}

.AlertBoxSuccess {
    background-color: #e0fcd0;
    border: 1px solid #b0cba7;
    animation: ActionSuccess 10.0s forwards;
}
/*Green Box */
.AlertBoxInnerSuccess {
    background-image: url('/assets/images/msg_type_01_01.svg');
    background-repeat: no-repeat;
    background-position: 5px 10px;
}

.AlertBoxError {
    background-color: #f9d6d5;
    border: 1px solid #cf756a;
    animation: ActionAlert 1.5s forwards;
}
/* Red Box */
.AlertBoxInnerError {
    background-image: url('/assets/images/msg_type_02_01.svg');
    background-repeat: no-repeat;
    background-position: 5px 10px;
}

.AlertBoxInfo {
    background-color: #fff8d0;
    border: 1px solid #dac48f;
    animation: ActionAlert 1.5s forwards;
}
/* Orange Box */
.AlertBoxInnerInfo {
    background-image: url('/assets/images/msg_type_03_01.svg');
    background-repeat: no-repeat;
    background-position: 5px 10px;
}

@keyframes ActionSuccess {
    0% {
        right: -360px;
    }

    5% {
        right: 40px;
        opacity: 0.6;
    }

    8% {
        right: 10px;
        opacity: 1.0;
    }

    10% {
        right: 27px;
    }

    12% {
        right: 17px;
    }

    13% {
        right: 22px;
    }

    14% {
        right: 20px;
    }

    80% {
        opacity: 1.0;
    }

    99% {
        right: 20px;
        opacity: 0.0;
    }

    100% {
        right: -1000px;
        opacity: 0.0;
    }
}

@keyframes ActionAlert {
    0% {
        right: -360px;
    }

    50% {
        right: 40px;
        opacity: 1.0;
    }

    70% {
        right: 10px;
    }

    85% {
        right: 27px;
    }

    90% {
        right: 17px;
    }

    95% {
        right: 22px;
    }

    100% {
        right: 20px;
    }
}

/* No Results Handling */
.AlertNoResult {
    padding: 20px 10px 20px 20px;
    border: 1px solid #e5e5e5;
    background: #f7f7f7;
    margin: 30px auto;
}

.AlertNoResultIcon {
    float: left;
    width: 7%;
    margin-right: 10px;
    color: #F93;
    text-align: center;
}

.AlertNoResultText {
    float: left;
    width: 88%;
    font-size: 18px;
    line-height: 24px;
    padding: 5px;
}

/* Error Pages */
.ErrorBox {
    margin-left: auto;
    margin-right: auto;
    width: 65%;
    max-width: 800px;
    margin-top: 60px;
    border-top: 9px solid #FF0;
    background-color: #96aebb;
    padding: 60px 60px;
    color: #fff;
    box-shadow: 0 0 10px 10px rgba(76, 76, 76, 0.1);
}

    .ErrorBox h1 {
        color: #fff !important;
    }

    .ErrorBox h2 {
        color: #ff0 !important;
    }

    .ErrorBox p {
        color: #3c515c !important;
    }

    .ErrorBox hr {
        border-top-width: 4px;
        border-top-style: solid;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        border-top-color: #b9c7ce;
        margin-right: 0px;
        margin-left: 0px;
    }

.ErrorLink {
    margin-left: auto;
    margin-right: auto;
    width: 65%;
    padding: 30px;
}

.ErrorIcon {
    font-size: 120px !important;
}


/* Telerik
===================== */
.RadTabStrip a:active, .RadTabStrip a:hover {
    color: #f60 !important;
}

.TabDisabled {
    color: #999;
}
/* Over-ride telerik generated styles */
.rwControlButtons li {
    list-style-type: none;
}

.rcbHeader ul, .rcbHeader ul li, .rcbFooter ul, .rcbFooter ul li, .rcbItem ul, .rcbItem ul li, .rcbHovered ul, .rcbHovered ul li, .rcbDisabled ul, .rcbDisabled ul li {
    list-style-type: none !important;
    margin: 0px;
    padding: 0px;
}

.RadWinManager {
    z-index: 9999999;
}
/* to make rad windows show above everything else */

/* Modal 
===================== */
.ModalBackground {
    background-color: Gray;
}

.ModalPopup {
    display: none;
}

/* Tool Tip 
===================== */

/* File Upload
===================== */
.FileUploadHeader {
    font-size: 12px;
    font-weight: bold;
    color: #464c55;
    background-color: #c1d82f;
    padding: 4px;
    border-bottom: 1px solid #666;
}

/* Ajax Popup 
===================== */
/* shop */
.FormTopPopup {
    background-image: url(/assets/images/tile_stripe.jpg);
    background-repeat: repeat-x;
    color: #fff;
    font-weight: bold;
    padding-left: 15px;
}

.FormButtonPopup {
    padding: 6px 12px 6px 12px;
    font-size: 14px;
    color: #393b4a;
    background-image: url(/assets/images/tile_ajaxform_header.jpg);
    background-repeat: repeat-x;
    background-color: #b0becd;
    text-decoration: none;
}
/* feedback only */
.FormTablePopup {
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
}
/* carried from rugby - PayPal popup,  Login Message popup */
.FormHeaderPopup {
    padding: 5px 30px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-image: url(/assets/images/tile_ajaxform_header.jpg);
    background-repeat: repeat-x;
}

.FormHeaderPopup {
    padding: 3px;
    font-size: 14px;
    font-weight: bold;
    color: #393b4a;
    background-image: url(/assets/images/tile_ajaxform_header.jpg);
    background-repeat: repeat-x;
}
/* \PayPal_HTML.aspx */
/* \usercontrol\SHOP\Payment\Front\CreditsBuy.ascx */
.CreditDisplay {
    font-size: 14px;
    color: #000;
    padding: 6px 10px;
    background-color: #dbefde;
    border: 1px solid #6eaf4e;
}
/* PayPal popup - \PayPal_HTML.aspx */
.TableBuyStuff {
    width: 100%;
    margin: 10px 0px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}

    .TableBuyStuff th {
        background-color: #f1eded;
        padding: 4px;
    }

    .TableBuyStuff td {
        padding: 4px;
    }
/* BUY NOW POP-UP */
/* ref:http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/ */
#fade {
    display: none;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .80;
    z-index: 9999;
}

.popup_block {
    display: none;
    background: #fff;
    padding: 0px;
    border: 2px solid #ddd;
    float: left;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
}


/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* FORMS */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */


/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Forms :: Layout (Note. The 'section' element is used to show panels of content based on user selection) */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

.FormSetHor, .FormSetVert {
    background-color: #fefefe;
    margin-bottom: 10px;
}

    .FormSetHor > section, .FormSetVert > section, .FormSetHor .FormSetHor, .FormSetVert .FormSetVert {
        margin: 0;
        padding: 0;
        border: none;
        width: 100%;
    }
    /*On occasion we need 'sub form' layout, so make it appear as though it is part of the standard form.*/
    .FormSetHor > h1, .FormSetVert > h1 {
        font-family: Open Sans, Arial;
        font-size: 20px;
        font-weight: 400;
        background-color: #f2f5f8;
        margin: 10px 0 0 0;
        padding: 10px 10px 5px 10px;
    }

    .FormSetHor > h2, .FormSetVert > h2 {
        font-family: Open Sans, Arial;
        font-size: 20px;
        border-left: 2px solid #384f7b;
        line-height: 30px;
        font-weight: 400;
        background-color: #f2f5f8;
        margin: 10px 0 0 0;
        padding: 12px 18px 12px 22px;
    }

        .FormSetHor > h2:first-of-type, .FormSetVert > h2:first-of-type {
            margin: 0;
        }

    .FormSetHor > h3, .FormSetHor > section > h3, .FormSetVert > h3, .FormSetVert > section > h3 {
        font-family: Open Sans, Arial;
        font-size: 16px;
        font-weight: 400;
        background-color: #eee;
        margin: 10px 0 0 0;
        padding: 14px 14px 14px 20px;
    }

        .FormSetHor > h3:first-child, .FormSetHor > section > h3:first-child, .FormSetVert > h3:first-child, .FormSetVert > section > h3:first-child {
            margin: 0;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            padding: 10px 15px;
            line-height: 20px;
        }
    /* For when used as a top heading where sub-level forms are needed. */

    .FormSetHor > div, .FormSetHor > section > div, .FormSetVert > div, .FormSetVert > section > div {
        padding: 14px 10px 4px 10px;
    }

        .FormSetHor > div:last-of-type, .FormSetVert > div:last-of-type {
            padding-bottom: 10px;
        }

        .FormSetHor > div > div:nth-of-type(1), .FormSetHor > section > div > div:nth-of-type(1) {
            width: 25%;
            min-width: 150px;
            max-width: 300px;
            font-size: 14px;
            line-height: 17px;
            color: #666;
            display: inline-block;
        }

        .FormSetHor > div > div:nth-of-type(2), .FormSetHor > section > div > div:nth-of-type(2) {
            width: 70%;
            max-width: 850px;
            display: inline-block;
            position: relative;
        }

        .FormSetVert > div > div:nth-of-type(1), .FormSetVert > section > div > div:nth-of-type(1) {
            width: 95%;
            min-width: 200px;
            max-width: 95%;
            font-size: 14px;
            color: #666;
            padding: 0 0 5px 0;
        }

        .FormSetVert > div > div:nth-of-type(2), .FormSetVert > section > div > div:nth-of-type(2) {
            width: 95%;
            position: relative;
            max-width: 850px;
        }

/* Forms that do not require any heading rows */
.FormSetFilter {
    border: 1px solid #ccc;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #fefefe;
    margin-bottom: 10px;
}

    .FormSetFilter > div {
        padding: 10px 10px 0 10px;
    }

        .FormSetFilter > div:last-of-type {
            padding-bottom: 10px;
        }

        .FormSetFilter > div > div:nth-of-type(1) {
            width: 25%;
            min-width: 150px;
            max-width: 200px;
            font-size: 14px;
            color: #666;
            display: inline-block;
        }

        .FormSetFilter > div > div:nth-of-type(2) {
            width: 70%;
            max-width: 850px;
            display: inline-block;
            position: relative;
        }

        /* Globally handle vertical alignment */
        .FormSetHor > div > div, .FormSetHor > section > div > div, .FormSetFilter > div > div {
            vertical-align: top;
        }

            .FormSetHor > div > div:nth-child(2) > *, .FormSetHor > section > div > div:nth-child(2) > *, .FormSetVert > div > div:nth-child(2) > *, .FormSetVert > section > div > div:nth-child(2) > *, .FormSetFilter > div > div:nth-child(2) > * {
                vertical-align: central;
            }
    /* Get the vertical alignment fully consistent */

    /* Provide for inline help text */
    .FormSetHor aside, .FormSetVert aside, .FormSetFilter aside {
        color: #999;
        font-style: italic;
        padding: 4px 0;
        max-width: calc(100% - 10px);
    }

    .FormSetHor > aside, .FormSetVert > aside, .FormSetFilter > aside {
        padding: 15px;
        max-width: calc(100% - 30px);
    }

/* Provide for situations where Text is presented in place of a form field */
.FormSetHor > div > div:nth-of-type(2) > span, .FormSetHor > section > div > div:nth-of-type(2) > span, .FormSetVert > div > div:nth-of-type(2) > span, .FormSetVert > section > div > div:nth-of-type(2) > span {
    font-size: 1.2em;
}

/* This is no longer used on forms but is still used in the display of LEGACY shopping invoices, CPD, activity history, etc */
.FormTable {
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1);
    -moz-box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1);
    box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1);
}

    .FormTable th {
        font-size: 24px;
        color: #333;
        font-weight: 300;
        padding: 18px 10px 18px 18px;
        background-color: #fafafa;
        text-align: left;
        border-bottom: 3px solid #e8e8e8;
    }

    .FormTable td {
        font-size: 16px;
        color: #333;
        font-weight: 300;
        padding: 6px 15px;
    }

.FormTableHead {
    font-size: 14px;
    color: #41ae35;
    font-weight: bold;
    padding: 7px 5px 5px 15px;
    border-left: 4px solid #41ae35;
}

.FormCellHeadSub {
    font-size: 14px;
    font-weight: 300;
    background-color: #fafafa !important;
}

.InstructTextSml {
    font-size: 10px;
    color: #999;
}

.FormRequired {
    font-size: 14px;
    color: #f60;
}

.ErrStdRed {
    font-size: 14px;
    color: #f00;
    vertical-align: top
}


/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Forms :: Generic styling of elements */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

.FormInvalid {
    background-color: #eaced1 !important;
}
/* IC: important useful when dealing with telerik */

/* Causes a star to display after mandatory form elements - apply class to a trailing span */
.FormRequiredField::after {
    content: "\25c9";
    color: #fa613e;
    font-size: 12px;
    position: absolute;
    top: 0;
    left: calc(90% + 5px);
}

.FormRequiredFieldNarrow::after {
    content: "\25c9";
    color: #fa613e;
    font-size: 12px;
    margin-left: 5px;
    vertical-align: top;
}

/* Default form element styling */
input[type="text"], input[type="password"], input[type="number"], textarea {
    display: inline-block;
    padding: 6px;
    font-size: 16px;
    color: #000;
    background-color: #fbfbfb;
    border: 1px solid #e5e5e5;
}

input[type="text"], input[type="password"], input[type="number"] {
    height: 24px;
    margin: 0 5px 0 0;
}

select {
    display: inline-block;
    padding: 2px;
    margin: 0 5px 0 0;
    font-size: 12px;
    color: #000;
    background-color: #fff;
    border: 2px solid #888;
    height: 36px;
}
/* Padding, border and margin are REDUCED from the 'height'.*/
fieldset {
    width: 90%;
    max-width: 800px;
    border: 2px solid #ccc;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
    margin: 0 5px;
    font-size: 12px;
    font-weight: normal;
}

label {
    padding: 0 3px 0 5px;
    vertical-align: top;
}

.RadInput_Default input[type="text"] {
    height: 32px !important;
    padding: 5px !important;
    font-size: 14px !important;
    color: #000 !important;
    background-color: #fff !important;
    border: 1px solid #bbb !important;
    margin: 0 20px 0 0 !important;
}
/* Telerik in their wisdom set: box-sizing:border-box; so padding and margin etc do not alter the set size.*/

/* Give a HOVER effect to form elements */
input[type="text"]:hover, input[type="password"]:hover, input[type="number"]:hover, textarea:hover, select:hover {
    border: 1px solid #333;
}

input[type="checkbox"]:hover, input[type="radio"]:hover {
    cursor: pointer;
    color: #f60;
}

label:hover {
    cursor: pointer;
    color: #f60;
}

/* Prevent the label from having the hover effect when the form element is disabled*/
input:disabled + label:hover {
    color: inherit !important;
    cursor: default !important;
}

.RadInput_Default input[type="text"]:hover {
    border: 1px solid #333 !important;
}

.RadComboBox input[type="text"]:hover {
    border: none;
}

/* Change the appearance on FOCUS of a form element */
textarea:focus, input:focus, select:focus {
    outline: none;
    box-shadow: 0 0 10px 0px #ccc;
}

input[type="text"]:focus, textarea:focus {
    background-color: #fffaed;
}

input[type="button"]:focus {
    background-color: #fffaed;
}

.RadInput_Default input[type="text"]:focus {
    background-color: #fffaed !important;
}

.RadComboBox input:focus {
    background-color: #fff !important;
}

/* Stop above styling affecting rad combo box*/
.rcbInputCell input[type="text"]:hover {
    border: initial !important;
}

.rcbInputCell input[type="text"]:focus {
    background-color: initial !important;
    outline: initial !important;
    box-shadow: initial !important;
}

/* Change the appearance if the element is disabled */
textarea:disabled, input:disabled, select:disabled, submit:disabled {
    box-shadow: 0 0 8px 0px #fab9b9;
}

/* Form element standard widths. Note the 'calc' handling, to account for padding and bordres etc and ensure the contained form elements match exactly their set % width. */
textarea {
    width: calc(100% - 12px);
    max-width: 800px;
    height: 75px;
}
/* Assumed to ALWAYS be in a maxchar DIV */
input[type="text"] {
    width: calc(90% - 19px);
    max-width: 800px;
}

input[type="file"] {
    width: 100px !important;
}

select {
    width: 200px;
}

.FormWidthLong {
    width: 400px !important;
}

.FormWidthMedium {
    width: 200px !important;
}

.FormWidthShort {
    width: 100px !important;
}

.FormWidthTiny {
    width: 50px !important;
}

.FormTextAreaLarge1 {
    font-size: 12px;
    width: 90%;
    max-width: 1200px;
    height: 400px;
}

.FormTextAreaLarge2 {
    font-size: 12px;
    width: 90%;
    max-width: 1200px;
    height: 700px;
}

.FormTextAreaLarge3 {
    font-size: 12px;
    width: 90%;
    max-width: 1200px;
    height: 200px;
}

.FormTextAreaSmall1 {
    font-size: 12px;
    height: 60px;
}

.FormTextAreaCodeSnippet {
    font-size: 10px;
    background-color: #f4f4f4;
    color: #2d4285;
    height: 50px;
}

.FormTextAreaEmailPreview {
    width: 100%;
    max-width: 1200px;
    height: 700px;
    border: none;
}

.CheckboxMultiCol td {
    padding-right: 15px;
}

/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Forms :: Containers */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* Wrap form elements and special sets of form elements to solves issues where the element is made up of multiple parts and/or comes from Telerik.  
This goes last as it often applies over-ride values
The standard width is calc(90% - 5px) to ensure no overlap. Some widths vary to suport contained elements with dodgy code, sch as: width:100%; border:1px solid #000; */

/* ItemFile control - applied at the central control level */
.FormContItemFile {
    width: calc(90% - 2px);
    max-width: 800px;
    border-collapse: collapse;
    border: 1px solid #ccc;
    background-color: #efefef;
}

    .FormContItemFile caption {
        text-align: left;
        font-size: 14px;
        color: #4b5267;
        font-weight: bold;
        padding: 7px 5px 4px 10px;
        border-color: #ccc;
        border-style: solid;
        border-width: 1px 1px 0 1px;
        background-color: #efefef;
        background-image: linear-gradient(0deg, #efefef, #fff 90%);
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .FormContItemFile td {
        padding: 7px 3px 3px 3px;
    }

    .FormContItemFile tr:first-of-type td {
        padding: 10px 3px 3px 3px;
    }

.FormContItemGroupSetStd {
    width: 205px;
    display: inline-block;
}

.FormContFileUp {
}

    .FormContFileUp input[type="text"] {
        width: 300px;
    }

    .FormContFileUp input[type="file"] {
        width: 65px !important;
    }

        .FormContFileUp input[type="file"]:hover {
            cursor: pointer;
        }
    /* Telerik overrides to get the presentation in line with streamSWEET standard */
    .FormContFileUp .ruFileWrap {
        height: 32px !important;
    }

    .FormContFileUp .ruFakeInput {
        height: 18px !important;
        padding: 5px !important;
        font-size: 14px !important;
        border: 2px solid #e5e5e5 !important;
    }

        .FormContFileUp .ruFakeInput:hover {
            border: 1px solid #333 !important;
        }

    .FormContFileUp .ruButton {
        height: 32px !important;
        background-image: none !important;
        padding: 2px 10px !important;
        font-size: 12px !important;
        color: #fff !important;
        background-color: #538bd0 !important;
        border-radius: 3px !important;
    }

    .FormContFileUp .ruButtonHover {
        background-color: #3f8f4b !important;
    }

/* Over-ride default image handling for the Telerik tree view - apply to a containing DIV */
.FormContTree img {
    display: inline;
}

/* Remove expand/colaps icon (plus/minus) at top level node of a tree */
.RadTreeView > ul > li > div > span:nth-child(2) {
    display: none
}

/* Prev Next Links */
.NavTreePrevNext {
    width: 94%;
    margin: 10px auto;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
}

    .NavTreePrevNext span {
        padding: 4px 10px;
        border-radius: 8px;
        border: 1px solid #BABABA;
        margin: 4px 4px 8px;
    }

        .NavTreePrevNext span:hover {
            background-color: #fafafa;
            border: 1px solid #458cc7;
        }

/* Over-ride default form element settings for auto-complete search box - apply to a containing DIV */
.FormContAutoComplete {
    width: 202px !important;
    float: left;
    margin: 0 5px 0 0;
    height: 24px;
    border: 1px solid #ccc;
    color: #666 !important;
    background-color: #fff;
}

    .FormContAutoComplete .RadComboBox_Default .rcbInputCell, .FormContAutoComplete .RadComboBox_Default .rcbArrowCell {
        background-image: none !important;
        padding: 0 !important;
        border: none !important;
    }

    .FormContAutoComplete .RadComboBox input[type="text"] {
        height: 24px !important;
        font-size: 16px !important;
        line-height: 24px !important;
        border: 0 !important;
        padding: 0 0 0 5px !important;
    }

/* Handle issues created by the the JQuery that handles the MaxChar functionality on textareas - apply to a containing DIV */
.FormContTextAreaMaxChar {
    width: calc(90% - 5px);
    max-width: 800px;
    display: inline-block;
    margin: 0 5px 0 0;
}

.maxlength-feedback {
    font-size: 12px;
    color: #ccc;
}

/* Over-ride default table cell formatting for the Telerik HTML editor and apply a max width - apply to a containing DIV */
.FormContHtmlEdit {
    width: calc(90% - 2px);
    max-width: 800px;
    display: inline-block;
}

.FormContHtmlEditWide {
    width: calc(90% - 2px);
    max-width: 1000px;
    display: inline-block;
}

    .FormContHtmlEdit td, .FormContHtmlEditWide td {
        padding: 0 !important;
    }
    /* Wrap a Telerik Editor with a Div and apply this Class, otherwise inherited cellpadding causes the editor layout to mess up. */
    .FormContHtmlEdit textarea, .FormContHtmlEditWide textarea {
        border: none !important;
        max-width: none !important;
    }

/* Over-ride default settings for the Telerik Date Picker - apply to a containing DIV */
.FormContDate {
    padding: 0;
    display: inline-block;
    margin-right: 10px;
}

    .FormContDate > div, .FormContDate > div > table {
        width: 140px !important;
    }

    .FormContDate td > span > input:first-of-type {
        height: 32px !important;
        margin-top: -1px !important;
        padding: 5px !important;
    }

/* OContain radio button in a controlled manner */
.FormContRadioSet {
    max-width: 800px;
    display: inline-block;
}

    .FormContRadioSet td {
        padding: 0 10px 0 0;
    }

/* Special handling to make a nice 'QUICK search' that appears at the top right of the screen, typically within an admin module */
.ContQuickSearch {
    right: 30px;
    position: absolute;
    top: 88px;
    width: 250px;
}

    .ContQuickSearch input[type="text"] {
        margin: 0;
        display: block;
        float: left;
    }

/* Special handling to make a nice 'FILTER search' where multiple form elements sit on a single row */
.ContFilterSearch {
    overflow: hidden;
}

    .ContFilterSearch img, .ContFilterSearch input[type="text"], .ContFilterSearch input[type="password"], .ContFilterSearch select, .ContFilterSearch input[type="button"], .ContFilterSearch input[type="submit"], .ContFilterSearch span, .ContFilterSearch .FormContDate {
        display: block;
        float: left;
    }

/* Give nice layout of the form buttons that sit at the bottom of each form - apply to a containing DIV */
.ContFormSubmit {
    overflow: hidden;
    margin: 10px 0 20px 5px;
}

/*Special handling for 'Groups' where added data is requested after ticking a checkbox.  This 'slides' the textbox into view on the user ticking the related checkbox.  Note!  Assumes only 1 checkbox per GroupSet.*/
.GroupCheckboxList label {
    margin-left: 5px;
}

.GroupCheckboxList input[type="checkbox"], .GroupCheckboxList label, .GroupCheckboxList input[type="text"] {
    display: block;
    float: left;
}

.GroupCheckboxList input[type="text"] {
    margin: -3px 0 0 10px;
    visibility: hidden;
    width: 0;
    transition: width 1.0s;
    -webkit-transition: width 1.0s
}

.GroupCheckboxList input[type="checkbox"]:checked + input[type="text"] {
    visibility: visible;
    width: 150px;
}

.GroupCheckboxList input[type="checkbox"]:checked + label + input[type="text"] {
    visibility: visible;
    width: 150px;
}


/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */
/* Forms :: Buttons */
/* =+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+==+=+=+= */

/* Applied 'OnClick' event to disable the button from being double clicked */
submit:disabled {
    box-shadow: 0 0 8px 0px #fab9b9;
    background-color: #993300;
    cursor: progress;
}

.FormButtonSubmitted {
    background-color: #993300;
    cursor: progress;
}

/* Full size buttons */
.BtnAdd, .BtnUpdate, .BtnDelete, .BtnCancel, .BtnSearch, .BtnUpload, .BtnSubmit, .BtnClone, .BtnImport, .BtnArchive, .BtnGo, .BtnContinue, .BtnUpdateQty, .BtnUnlock, .BtnActivate, .BtnResendActivateEmail, .BtnSynch, .BtnPreview, .BtnReportShow, .BtnReportExport, .BtnSchedule, .BtnSend, .BtnSendTest, .BtnSendStop, .BtnClearUnsent, .BtnConfirm, .BtnBack, .BtnSelect, .BtnAssign, .BtnClose, .BtnCheck, .BtnSet, .BtnInvite, .BtnRemind, .BtnClear, .BtnCloseOff, .BtnRecalculate, .BtnValidate, .BtnRestore, .BtnYes, .BtnNo, .BtnEdit, .BtnLogin {
    margin: 0 5px 0 0;
    padding: 8px 22px;
    font-size: 16px;
    color: #fff;
    border: 0;
    background-color: #11598a;
    cursor: pointer;
    border-radius: 4px;
}

    .BtnAdd:hover, .BtnYes:hover {
        background-color: #3f8f4b;
    }

    .BtnDelete:hover, .BtnNo:hover {
        background-color: #8f3f43;
    }

    .BtnUpdate:hover, .BtnCancel:hover, .BtnSearch:hover, .BtnUpload:hover, .BtnSubmit:hover, .BtnClone:hover, .BtnImport:hover, .BtnArchive:hover, .BtnGo:hover, .BtnContinue:hover, .BtnUpdateQty:hover, .BtnUnlock:hover, .BtnActivate:hover, .BtnResendActivateEmail:hover, .BtnSynch:hover, .BtnPreview:hover, .BtnReportShow:hover, .BtnReportExport:hover, .BtnSchedule:hover, .BtnSend:hover, .BtnSendTest:hover, .BtnSendStop:hover, .BtnClearUnsent:hover, .BtnConfirm:hover, .BtnBack:hover, .BtnSelect:hover, .BtnAssign:hover, .BtnClose:hover, .BtnCheck:hover, .BtnSet:hover, .BtnInvite:hover, .BtnRemind:hover, .BtnClear:hover, .BtnCloseOff:hover, .BtnRecalculate:hover, .BtnValidate:hover, .BtnRestore:hover, .BtnEdit:hover, .BtnLogin:hover {
        background-color: #000;
    }

    .BtnAdd:focus, .BtnYes:focus {
        background-color: #3f8f4b;
    }

    .BtnDelete:focus, .BtnNo:focus {
        background-color: #8f3f43;
    }

    .BtnUpdate:focus, .BtnCancel:focus, .BtnSearch:focus, .BtnUpload:focus, .BtnSubmit:focus, .BtnClone:focus, .BtnImport:focus, .BtnArchive:focus, .BtnGo:focus, .BtnContinue:focus, .BtnUpdateQty:focus, .BtnUnlock:focus, .BtnActivate:focus, .BtnResendActivateEmail:focus, .BtnSynch:focus, .BtnPreview:focus, .BtnReportShow:focus, .BtnReportExport:focus, .BtnSchedule:focus, .BtnSend:focus, .BtnSendTest:focus, .BtnSendStop:focus, .BtnClearUnsent:focus, .BtnConfirm:focus, .BtnBack:focus, .BtnSelect:focus, .BtnAssign:focus, .BtnClose:focus, .BtnCheck:focus, .BtnSet:focus, .BtnInvite:focus, .BtnRemind:focus, .BtnClear:focus, .BtnCloseOff:focus, .BtnRecalculate:focus, .BtnValidate:focus, .BtnRestore:focus, .BtnEdit:focus, .BtnLogin:focus {
        background-color: #3f578f;
    }

/* Small buttons (short to fit normal line height) */
.BtnSmlAdd, .BtnSmlUpdate, .BtnSmlSearch, .BtnSmlContinue, .BtnSmlSendTest, .BtnSmlReportShow, .BtnSmlSelect, .BtnSmlClear, .BtnSmlAssign, .BtnSmlGo, .BtnSmlYes, .BtnSmlNo {
    margin: 0 5px 0 0;
    padding: 1px 15px 3px 15px;
    border: 0;
    height: 24px;
    font-size: 12px;
    color: #fff;
    background-color: #11598a;
    cursor: pointer;
    border-radius: 3px;
}

    .BtnSmlAdd:hover, .BtnSmlYes:hover {
        background-color: #3f8f4b;
    }

    .BtnSmlNo:hover {
        background-color: #8f3f43;
    }

    .BtnSmlUpdate:hover, .BtnSmlSearch:hover, .BtnSmlContinue:hover, .BtnSmlSendTest:hover, .BtnSmlReportShow:hover, .BtnSmlSelect:hover, .BtnSmlClear:hover, .BtnSmlAssign:hover, .BtnSmlGo:hover {
        background-color: #000;
    }

    .BtnSmlAdd:focus, .BtnSmlYes:focus {
        background-color: #3f8f4b;
    }

    .BtnSmlNo:focus {
        background-color: #8f3f43;
    }

    .BtnSmlUpdate:focus, .BtnSmlSearch:focus, .BtnSmlContinue:focus, .BtnSmlSendTest:focus, .BtnSmlReportShow:focus, .BtnSmlSelect:focus, .BtnSmlClear:focus, .BtnSmlAssign:focus, .BtnSmlGo:focus {
        background-color: #3f578f;
    }

/* custom button for the generic search at the top right of the screen */
.BtnSmlGoSearch {
    margin: 0 0 0 -7px;
    padding: 1px 5px 3px 5px;
    border: 0;
    height: 26px;
    font-size: 12px;
    color: #fff;
    background-color: #584b7a;
    background-image: linear-gradient(0deg, #584b7a, #bab3c9 90%);
    cursor: pointer;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

    .BtnSmlGoSearch:hover {
        background-color: #3f578f;
    }

    .BtnSmlGoSearch:focus {
        background-color: #3f578f;
    }

/* Generic - create a new item button */
.BtnAddNew {
    background-color: transparent;
    margin: 0;
    padding: 0 10px 0 8px;
    font-size: 12px;
    height: 100%;
    border: none;
    cursor: pointer;
    color: #222;
    font-weight: normal;
    float: right;
    border: 1px solid transparent;
}

    .BtnAddNew:hover, .BtnAddNew:focus {
        background-color: #b9faca;
        text-decoration: none;
        color: #222;
        border: 1px solid #57bd71;
    }

/* Make a button that looks like Text that then looks like a button on hover */
.BtnText {
    color: #333;
    font-size: 100%;
    border: 1px solid transparent;
    padding: 5px 10px;
    background-color: transparent;
    cursor: pointer;
    border-radius: 4px;
}

    .BtnText:hover, .BtnText:focus {
        border: 1px solid #333;
        background-color: #fff !important;
    }
/* Update Shopping Cart Qty - make it  more obvious */
.BtnTextShow {
    border: 1px solid #191e92;
    color: #fff;
    background-color: #191e92;
    animation-name: UpdateCartQty;
    animation-duration: 2s;
    animation-iteration-count: 20;
    -webkit-animation-name: UpdateCartQty;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 20;
}

    .BtnTextShow:hover, .BtnTextShow:focus {
        color: #90c6fc;
    }

/* SHOPPING BASKET */
.ImgBtnBacketQtyUpdate
.ImgBtnBacketQtyUpdateAlert {
    border: 1px solid #f00;
    background-color: #f3f3f3;
}

.ImgBtnBacketQtyUpdate:hover, .ImgBtnBacketQtyUpdate:focus {
    color: #522e91;
    border: 1px solid #999;
    background-color: #ddd;
}

/* A HREF Buttons
===================== */

.ButtonOrangeLge {
    background-color: #ff9c2b;
    text-align: center;
    padding: 4px 20px 4px 20px;
    margin: 10px 6px 10px 6px;
    border-radius: 4px;
    font-size: 16px;
    white-space: nowrap;
}

a.ButtonOrangeLge:link, a.ButtonOrangeLge:visited {
    color: #fff;
    text-decoration: none;
}

a.ButtonOrangeLge:hover, a.ButtonOrangeLge:active {
    background-color: #ffae52;
}

.ButtonLink {
    background-color: #e4eaf5;
    text-align: center;
    padding: 3px 15px 3px 15px;
    margin: 0 6px 0 0;
    border-radius: 12px;
    border: 1px solid #ccc;
    font-size: 11px;
    line-height: 11px;
}

a.ButtonLink:link, a.ButtonLink:visited {
    color: #393b4a;
    text-decoration: none;
}

a.ButtonLink:hover, a.ButtonLink:active {
    color: #2b5886;
    background-color: #e4eaf5;
    border: 1px solid #2b5886;
    text-decoration: none;
}

/* Common HREF Buttons */

.ButtonLargeFullWidth {
    background-color: #11598a;
    text-align: center;
    padding: 7px 20px;
    margin: 0 6px;
    display: block;
    border-radius: 4px;
    font-size: 19px;
}

a.ButtonLargeFullWidth:link, a.ButtonLargeFullWidth:visited {
    color: #fff;
    text-decoration: none;
}

a.ButtonLargeFullWidth:hover, a.ButtonLargeFullWidth:active {
    background-color: #4b83ba;
    text-decoration: none;
}

.ButtonLargeRedFullWidth {
    color: #fff;
    background-color: #d6483b;
    text-align: center;
    padding: 7px 20px;
    margin: 0 6px;
    display: block;
    border-radius: 4px;
    font-size: 19px;
}

input.ButtonLargeRedFullWidth {
    border: none;
}

a.ButtonLargeRedFullWidth:link, a.ButtonLargeRedFullWidth:visited {
    color: #fff;
    text-decoration: none;
}

a.ButtonLargeRedFullWidth:hover, a.ButtonLargeRedFullWidth:active, input.ButtonLargeRedFullWidth:hover, input.ButtonLargeRedFullWidth:focus {
    background-color: #E9594C;
    text-decoration: none;
}

.ButtonLarge {
    background-color: #11598a;
    text-align: center;
    padding: 7px 30px 7px 30px;
    display: inline-block;
    margin: 0 6px;
    border-radius: 4px;
    font-size: 19px;
}

a.ButtonLarge:link, a.ButtonLarge:visited {
    color: #fff;
    text-decoration: none;
}

a.ButtonLarge:hover, a.ButtonLarge:active {
    background-color: #4b83ba;
    text-decoration: none;
}

.ButtonMedium {
    background-color: #11598a;
    text-align: center;
    padding: 7px 30px 7px 30px;
    display: inline-block;
    margin: 6px auto;
    border-radius: 4px;
    font-size: 14px;
}

a.ButtonMedium:link, a.ButtonMedium:visited {
    color: #fff;
    text-decoration: none;
}

a.ButtonMedium:hover, a.ButtonMedium:active {
    background-color: #4b83ba;
    text-decoration: none;
}

/* Button Base */
/* New direction for standardising buttons */
.BtnBase {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .BtnBase a {
        display: block;
    }

.BtnLarge {
    font-size: 1.3rem;
    padding: 0.5rem 1.3rem;
}

/* Image Buttons
===================== */
/* EVENT */
/* IC:these were created/scheduled for conversion while ago, and finally put to use now. I got them updated with correct sizes and new path (/cpd/) */
.ImgBtnEventAdd {
    width: 165px;
    height: 42px;
    background: url(/assets/images/cpd/button_add_event.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnEventRemove {
    width: 165px;
    height: 42px;
    background: url(/assets/images/cpd/button_remove_event.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnEventFind {
    width: 67px;
    height: 33px;
    background: url(/assets/images/cpd/button_find_events.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnReportFind {
    width: 133px;
    height: 33px;
    background: url(/assets/images/cpd/button_find_report.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnEventBook {
    width: 125px;
    height: 33px;
    background: url(/assets/images/button_booknow.svg) no-repeat 0px 0px;
    margin: 10px 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

    .ImgBtnEventBook:hover {
        opacity: .8;
    }

.ImgBtnEventBookLge {
    width: 193px;
    height: 51px;
    background: url(/assets/images/button_booknow_lge.svg) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

    .ImgBtnEventBookLge:hover {
        opacity: .8;
    }

/* EVENT MULTIPLE LOCATIONS */
.EventGridTable {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 30px;
    background-color: #f6f7f5;
}

    .EventGridTable th {
        background-color: #666;
        color: #fff;
        font-size: 12px;
        line-height: 15px;
        padding: 6px 5px;
    }

    .EventGridTable td {
        color: #000;
        font-size: 11px;
        font-size: 13px;
        padding: 3px;
        border-bottom: 1px solid #cfcfcf;
    }

/* RUGBY SEARCH */
.ImgBtnSearchGo {
    width: 33px;
    height: 35px;
    background: url(/assets/images/button_search_go.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnSearchGoLarge {
    width: 36px;
    height: 28px;
    background: url(/assets/images/button_go_lge.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

/* FEEDBACK BUTTONS */
.ImgBtnFeedbackSubmit {
    width: 186px;
    height: 38px;
    background: url(/assets/images/button_submit_feedback.svg) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnFeedbackIconPlus {
    width: 24px;
    height: 24px;
    background: url(/assets/images/icon_plus_feedback.svg) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

    .ImgBtnFeedbackIconPlus:hover {
        background: url(/assets/images/icon_plus_feedback_on.svg) no-repeat 0px 0px;
    }

.ImgBtnFeedbackIconPicture {
    width: 24px;
    height: 24px;
    background: url(/assets/images/icon_picture_feedback.svg) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

    .ImgBtnFeedbackIconPicture:hover {
        background: url(/assets/images/icon_picture_feedback_on.svg) no-repeat 0px 0px;
    }

/* CHECKOUT */
.BacktoCheckoutLink {
    background-color: #069;
    color: #fff;
    padding: 8px 20px;
    text-align: center;
    font-size: 12px;
    border-radius: 4px;
}

a.BacktoCheckoutLink:link, a.BacktoCheckoutLink:visited {
    color: #fff;
    text-decoration: none;
    display: block;
}

a.BacktoCheckoutLink:hover, a.BacktoCheckoutLink:active {
    color: #fff;
    text-decoration: none;
    background-color: #333;
    pointer: cursor;
}

/* MISC BUTTONS */
.ImgBtnSubmit {
    width: 101px;
    height: 29px;
    background: url(/assets/images/button_submit.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

    .ImgBtnSubmit:hover {
        opacity: .8;
    }

.ImgButtonCloseBox {
    width: 101px;
    height: 31px;
    background: url(/assets/images/button_closebox.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnFind {
    width: 66px;
    height: 24px;
    background: url(/assets/images/button_find.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnTop {
    width: 140px;
    height: 90px;
    background: url(/assets/images/button_top.svg)no-repeat 0px 0px;
    margin: 20px 0 20px 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-size: 13px;
    line-height: 27px;
}

    .ImgBtnTop a:link {
        text-decoration: none;
        display: block;
        width: 140px;
        height: 90px;
        margin: 0;
    }

    .ImgBtnTop:hover {
        background: url(/assets/images/button_top_on.svg) no-repeat 0px 0px;
    }

.IconButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background-color: #eaeaea;
    padding: 8px 16px 8px 8px;
}

    .IconButton:hover {
        cursor: pointer;
    }

/* IC:these are new classes, out of full ImageButton conversion */
.ImgBtnCPDPdfDownload {
    width: 132px;
    height: 25px;
    background: url(/assets/images/icon_download_report_pdf.png) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnCPDAddNew {
    width: 48px;
    height: 18px;
    background: url(/assets/images/CPD/button_addnew.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}

.ImgBtnLoginFeature {
    width: 101px;
    height: 29px;
    background: url(/assets/images/button_login.gif) no-repeat 0px 0px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-block;
}


/* ======================================================================================== */
/* ======================================================================================== */
/* Modules - Shared */
/* ======================================================================================== */
/* ======================================================================================== */

/* Home Feature Controls
===================== */
.NewsHomeFeatureHead {
    padding: 5px;
    background-color: #ccc;
}
/* usercontrol\front\homepage\News.ascx */
.EventsHomeFeatureHead {
    padding: 5px;
    background-color: #ccc;
}
/* usercontrol\front\homepage\Events.ascx */
.CaseStudyFeatureHead {
    padding: 5px;
    background-color: #ccc;
}
/* usercontrol\front\homepage\CaseStudy.ascx */
.HomeEvents {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.HomeCaseStudy {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.FriendsPanel {
    padding: 2px;
}

.FriendsPanelHeader {
    padding: 3px 5px;
    background-color: #e6e6e6;
    font-size: 11px;
}

/* Homepage Hero */
.HeroPosition {
    margin: 0 auto;
}

/* HERO - STATIC 
===================== */
.HeroPanel {
    width: 55%;
    margin: 180px auto;
    color: #fdfdfd;
    background-color: rgba(10, 10, 10, 0.8);
    padding: 60px;
    float: right;
    position: relative;
}

/* Homepage Blue Button */
.HeroStaticButton {
    background-color: #11598a;
    position: relative;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    font-weight: 300;
    border: 0.0625rem solid #11598a;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    margin: 10px 10px 10px 0;
    padding: 10px 30px;
    font-size: 18px;
    line-height: normal;
}

    .HeroStaticButton a:link, .HeroStaticButton a:visited {
        text-decoration: none !important;
        color: #fff !important;
    }

    .HeroStaticButton:hover {
        text-decoration: none !important;
        background-color: #4b83ba;
        border: 0.0625rem solid #11598a;
    }

    .HeroStaticButton:active {
        background-image: none;
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25);
    }

/* Homepage Red Button */
.HeroStaticButtonAlt {
    background-color: #d6483b;
    position: relative;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    font-weight: 300;
    border: 0.0625rem solid #d6483b;
    border-radius: 0.25rem;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    margin: 10px 0;
    padding: 10px 30px;
    font-size: 18px;
    line-height: normal;
}

    .HeroStaticButtonAlt a:link, .HeroStaticButtonAlt a:visited {
        text-decoration: none !important;
        color: #fff !important;
    }

    .HeroStaticButtonAlt:hover {
        text-decoration: none !important;
        background-color: #E9594C;
        border: 0.0625rem solid #d6483b;
    }

    .HeroStaticButtonAlt:active {
        background-image: none;
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.25);
    }

/* Citation */
.HomepageHeroStatic_Citation_Outer {
    max-width: 100%;
}

.HomepageHeroStatic_Citation {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    line-height: 1.4;
    opacity: 0.6;
}

    .HomepageHeroStatic_Citation i {
        font-family: Material Icons;
        font-size: 1em;
        font-style: normal;
        vertical-align: middle;
    }

        .HomepageHeroStatic_Citation i::before {
            content: "\E88F"
        }

    .HomepageHeroStatic_Citation span {
        font-size: 12px;
        font-style: italic;
        color: #fff;
        text-decoration: none;
    }

    .HomepageHeroStatic_Citation a {
        font-size: 12px;
        font-style: italic;
        color: #fff;
        text-decoration: none;
    }

        .HomepageHeroStatic_Citation a:hover {
            text-decoration: underline !important;
        }
/* Background Image */
.HeroImageStatic {
    min-height: 400px;
    margin-top: 0;
    background-repeat: no-repeat;
    background-size: cover; /*contain;*/
    background-position: 50% 50%;
    overflow: hidden; /*background-attachment:fixed;*/
}

    .HeroImageStatic h1 {
        font-weight: 700;
        line-height: 1.6;
        font-size: 2.4em;
        margin: 0.5em 0;
        color: #fff;
    }

    .HeroImageStatic h3 {
        font-weight: 400;
        line-height: 1.6;
        font-family: 'Open San', 'Arial';
        font-size: 1.2em;
        margin: 0.5em 0;
        color: #fff;
    }

    .HeroImageStatic hr {
        border-color: #bdbebf;
        margin: 20px 0;
    }

/* Product Listings 
===================== */
/*** THIS BLOCK OF CSS NEEDS TO BE FULLY REWORKED - IT WAS COPIED WITHOUT THOUGHT IS IS WAY, WAY, WAY OVER COMPLICATED FOR WHAT IT DOES ***/
.TableHeadProductList {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background-color: #666;
    padding: 3px 3px 3px 6px;
    text-align: left;
}

#ProductList, #ProductList ul, .ProductList, .ProductList ul {
    list-style: none;
    line-height: 14px;
    padding: 0;
    margin: 0;
    background-color: #e5e5e5;
}

    #ProductList .sel, .ProductList .sel {
        background-color: #fff;
        background-image: url(/assets/images/arrow_prod_toplevel_on.gif);
    }

    #ProductList a, .ProductList a {
        font-weight: normal;
        display: block;
        text-decoration: none;
        color: #000;
    }

    #ProductList li, .ProductList li {
        margin: 0;
        padding: 0;
        background: url(/assets/images/arrow_prod_toplevel.gif) 3px 6px no-repeat;
        list-style: none;
        border-bottom: 1px solid #f7f7f7;
    }

        #ProductList li a, .ProductList li a {
            width: 146px;
            width: 126px;
            padding: 4px 5px 3px 15px;
            background: url(/assets/images/arrow_prod_toplevel.gif) 3px 6px no-repeat;
            color: #878c9c;
        }

        #ProductList li ul, .ProductList li ul {
            border-width: 0;
        }

        #ProductList li li .sel, .ProductList li li .sel {
            background-color: #fff;
            color: #c00;
            background-image: url(/assets/images/arrow_prod_level2_on.gif);
        }

        #ProductList li li, .ProductList li li {
            margin: 0;
            padding: 0;
            background: url(/assets/images/arrow_prod_level2.gif) 10px 6px no-repeat;
            background-color: #f7f7f7;
            border-bottom: 1px solid #fff;
        }

            #ProductList li li a:hover, .ProductList li li a:hover {
                color: #c00;
                background-image: url(/assets/images/arrow_prod_level2_on.gif);
            }

            #ProductList li li a, .ProductList li li a {
                width: 146px;
                width: 116px;
                padding: 4px 5px 3px 25px;
                background: url(/assets/images/arrow_prod_level2.gif) 10px 6px no-repeat;
            }

    #ProductList a:hover, .ProductList a:hover {
        color: #c00;
        background-image: url(/assets/images/arrow_prod_toplevel_on.gif);
    }

.ProductVariationTable {
    width: 100%;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
}

    .ProductVariationTable th {
        padding: 3px 2px;
        font-size: 11px;
        background-color: #fafafa;
    }

    .ProductVariationTable td {
        padding: 3px 2px;
        font-size: 11px;
    }

.ProductHeader {
    border-radius: 8px;
    color: #fff;
    text-align: center;
    padding: 16px 0;
    background-color: #000;
    font-size: 18px;
    line-height: 20px;
    font-weight: 400;
    margin: 20px auto;
}

    .ProductHeader h3 {
        margin: 0;
    }

/* Image Album 
===================== */
.AlbumImagePopup {
    background-color: #fff;
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
    width: 955px;
}

.AlbumImagePopupCellHeader {
    vertical-align: top;
    font-size: 12px;
    height: 40px;
    background-image: url(/assets/images/tile_stripe.jpg);
    background-repeat: repeat-x;
    color: #fff;
    font-weight: bold;
}

.AlbumImagePopupCellImage {
    vertical-align: middle;
    text-align: center;
    padding: 0px 5px 5px 5px;
    width: 740px;
}

.AlbumImagePopupCellThumbs {
    vertical-align: top;
    text-align: left;
    width: 225px;
}

.AlbumImageScrollerMainImage {
    width: 100%;
    text-align: left;
    padding: 10px;
}

.AlbumImageScrollerThumbnails {
    width: 100%;
}

.AlbumImageLargeImage {
    width: 700px;
    height: 100%;
}

.AlbumImageThumbnailImageBorder {
    margin: 0px 5px 5px 0px;
    width: 90px;
    height: 90px;
}

    .AlbumImageThumbnailImageBorder td {
        border: 1px solid #ccc;
    }

        .AlbumImageThumbnailImageBorder td:hover, .AlbumImageThumbnailImageBorder .AlbumImageThumbnailSelected {
            border: 2px solid #f60;
        }

    .AlbumImageThumbnailImageBorder img {
        padding-top: 3px;
        margin-left: auto;
        margin-right: auto;
    }

.AlbumImageFileDescriptionBox {
    display: none;
    position: absolute;
    margin: 0px;
    padding: 0px;
    float: left;
    border: 1px solid #ccc;
    background-color: #ddd;
    text-align: left;
    width: 400px;
}

    .AlbumImageFileDescriptionBox p {
        padding: 5px;
        margin: 0px;
    }

/* Image Rotator 
===================== */
.RotatorImageList {
    margin-left: auto;
    margin-right: auto;
}

.AlbumImageRotatorImageBorder {
    margin: 0px 5px 5px 0px;
    width: 90px;
    height: 78px;
}

    .AlbumImageRotatorImageBorder td {
        border: 1px solid #ccc;
    }

        .AlbumImageRotatorImageBorder td:hover {
            border: 2px solid #f60;
        }

    .AlbumImageRotatorImageBorder img {
        padding-top: 3px;
    }

.RadRotator li {
    list-style: none;
}

/* Comments 
===================== */
.CommentHeader {
    border-bottom: 3px solid #666;
    color: #000;
    font-weight: bold;
    padding: 6px 0;
}

.CommentAvatar, .CommentAvatarAlt {
    border-bottom: 1px solid #808080;
    padding: 5px;
}

.CommentText, .CommentTextAlt {
    background-color: #fff;
    border-bottom: 1px solid #808080;
    color: #000;
    font-size: 12px;
    padding: 10px 5px 8px;
}

.CommentItemNumber {
    color: #333;
    font-size: 12px;
}

.CommentTextUserName {
    color: #333;
    font-size: 12px;
    font-weight: bold;
}

.CommentTextDate {
    color: #999;
    font-size: 11px;
}

.CommentTextTime {
    color: #999;
    font-size: 11px;
}

/* Ratings 
===================== */
.filledRatingStar {
    background-image: url(/assets/images/FilledStar.png);
}

.ratingStar {
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 12px;
    margin: 0;
    padding: 0;
    width: 13px;
}

.emptyRatingStar {
    background-image: url(/assets/images/EmptyStar.png);
}

.savedRatingStar {
    background-image: url(/assets/images/SavedStar.png);
}

/* Feedback 
===================== */
.FeedbackTable {
    width: 850px;
}

.feedbackPosition {
    position: fixed;
    bottom: 40px;
    right: 0px;
}

.FeedbackMenu {
    padding: 20px 0 0 0;
}

    .FeedbackMenu img {
        margin: 5px 0;
    }

.FeedbackSlider {
    width: 400px;
}

    .FeedbackSlider td {
        padding: 12px 0;
    }

/* Shop - Shared 
===================== */
.PriceText {
    Color: #333;
    font-size: 18px;
    font-weight: bold;
    line-height: 20px;
}

.PriceTextHasOnSale {
    Color: #333;
    font-size: 14px;
    text-decoration: line-through;
}

.PriceTextOnSale {
    Color: #333;
    font-size: 16px;
    font-weight: bold;
}

.PriceGroup {
    color: #999;
    font-size: 12px;
    font-style: italic;
    padding-left: 6px;
}

/* Search Form */
.SearchProductsBtn {
    height: 68px;
    width: 23%;
    float: left;
    background: url(/assets/images/btn_search_products.jpg) top center no-repeat;
    margin: 0 !important;
    padding: 0;
    border-bottom-right-radius: 1em;
    border-top-right-radius: 1em;
    border: 1px solid #97060f;
}

    .SearchProductsBtn:hover {
        opacity: .8;
    }

.SearchProductsTextBox {
    float: left;
    width: 72%;
    background-color: #fff;
    padding: 0;
    font-size: 20px;
    line-height: normal;
    color: #666 !important;
    height: 66px;
    border-left: 1px solid #333;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    border-right: 1px solid #97060f;
}

/*----------------------------------------------*/
/* Grid Layout -  Responsive Columns */

/* ----Generic handling----*/

/* Make the active area the same size as the contained DIV */
.PanelItemGrid {
    padding: 0 5px;
}

    .PanelItemGrid > article {
        float: left;
        position: relative; /* background-color:#fff;*/
    }

        .PanelItemGrid > article > a {
            display: block;
            text-decoration: none;
        }

            /* Set the primary content container, including a visual border and hover effect for the panel */
            .PanelItemGrid > article > a > div { /*border:1px solid #e1e1e1;*/
                overflow: hidden;
            }

                .PanelItemGrid > article > a > div:hover {
                    -webkit-box-shadow: 0 0 5px 5px rgba(76, 76, 76, 0.1);
                    -moz-box-shadow: 0 0 5px 5px rgba(76, 76, 76, 0.1);
                    box-shadow: 0 0 5px 5px rgba(76, 76, 76, 0.1);
                    transition: all 0.9s ease;
                }

                /* Manage design of each ELEMENT within the panel */
                .PanelItemGrid > article > a > div > div {
                    width: 86%;
                    margin: 25px auto;
                    text-align: center;
                }

                    .PanelItemGrid > article > a > div > div > img {
                        max-height: 170px;
                        margin: 5px auto;
                        z-index: 50;
                        transition: transform 1s;
                    }
                /* Forced the image height because of vertical book covers being used */
                .PanelItemGrid > article > a > div:hover > div > img {
                    transform: scale(1.025,1.025);
                }

                .PanelItemGrid > article > a > div > div h2 {
                    font-size: 18px !important;
                    line-height: 22px;
                    color: #000;
                    margin: 20px 0 5px 0;
                }

                .PanelItemGrid > article > a > div > div h4 {
                    font-size: 18px !important;
                    line-height: 22px;
                    color: #000;
                    margin: 20px 0 5px 0;
                }

                .PanelItemGrid > article > a > div > div p {
                    font-size: 12px !important;
                    line-height: 16px;
                    color: #333;
                    margin: 0;
                }

                    .PanelItemGrid > article > a > div > div p:hover {
                        cursor: pointer;
                    }

    /* Layer in special markers such as 'NEW' */
    .PanelItemGrid aside:nth-of-type(1) {
        position: absolute;
        z-index: 150;
        top: 10px;
        left: 0;
    }

    /* Layer in ADD TO BASKET button */
    .PanelItemGrid aside:nth-of-type(2) {
        position: absolute;
        z-index: 150;
        bottom: 10px;
        left: 0;
        right: 0;
    }

        .PanelItemGrid aside:nth-of-type(2) a {
            display: block;
            width: calc(90% - 16px);
            margin: 0 auto;
            text-align: center;
            padding: 8px 5px;
            border: 3px solid #fff;
        }

/* ----Case handling----*/

/* Downloads - 3 columns */
.PanelItemGrid3ColDownloads > article {
    width: 31%;
    min-width: 180px;
    margin: 10px 1% 14px 1%;
    background-color: #f5f8fa;
}

    .PanelItemGrid3ColDownloads > article > a > div {
        height: 400px;
    }

/* News - 3 columns */
.PanelItemGrid3ColNews > article {
    width: 31%;
    min-width: 180px;
    margin: 20px 1% 4px 1%;
    background-color: #f5f8fa;
}

    .PanelItemGrid3ColNews > article > a > div {
        height: 440px;
    }

/* Video - 3 columns */
.PanelItemGrid3ColVideo > article {
    width: 31%;
    min-width: 300px;
    margin: 0 1% 14px 1%;
    background-color: #f5f8fa;
}

    .PanelItemGrid3ColVideo > article > a > div {
        height: 350px;
    }

/* Generic - 4 columns */
.PanelItemGrid4Col > article {
    width: 23%;
    min-width: 130px;
    margin: 5px 1% 20px 1%;
}

    .PanelItemGrid4Col > article > a > div {
        height: 300px;
    }

/* Generic - 4 columns */
.PanelItemGrid4ColPartners > article {
    width: 23%;
    min-width: 130px;
    margin: 5px 1% 20px 1%;
}

    .PanelItemGrid4ColPartners > article > a > div {
        height: 220px;
    }

/* Products Categories - 4 columns */
.PanelItemGrid4ColProds > article {
    width: 23%;
    min-width: 220px;
    margin: 15px 1% 20px 1%;
    background-color: #f5f8fa;
}

    .PanelItemGrid4ColProds > article > a > div {
        height: 460px;
    }

/* Image Gallery - 4 columns */
.PanelItemGrid4ColImages {
    margin-top: 20px;
}

    .PanelItemGrid4ColImages > article {
        width: 23%;
        min-width: 200px;
        margin: 5px 1% 20px 1%;
    }

        .PanelItemGrid4ColImages > article > a > div {
            height: 180px;
            padding: 0;
            border: 1px solid #e1e1e1;
            box-shadow: none;
            background-color: #fcfcfc;
        }

            .PanelItemGrid4ColImages > article > a > div:hover {
                border: 1px solid #b7b7b7;
                box-shadow: none;
            }

            .PanelItemGrid4ColImages > article > a > div > img {
                margin: 0 auto;
                height: 100%;
                width: auto;
                max-width: 480px;
            }

        .PanelItemGrid4ColImages > article .ImgInfo {
            z-index: 51;
            overflow: hidden;
            background-color: #2b2b2b;
            color: #fff;
            opacity: 0.9;
            position: absolute;
            top: 40px;
            height: 0;
            width: 100%;
            -webkit-transition: -webkit-transform 0s, height 0.7s;
            transition: transform 0s, height 0.7s;
        }

        .PanelItemGrid4ColImages > article:hover .ImgInfo {
            transform: translate(0,0);
            -webkit-transform: translate(0,0);
            height: 110px;
            border-bottom: 2px solid #eee;
        }

    .PanelItemGrid4ColImages .ImgTitle {
        font-size: 13px;
        line-height: 15px;
        text-align: center;
        margin-top: 10px;
        font-weight: bold;
    }

    .PanelItemGrid4ColImages .ImgDesc {
        text-align: center;
        padding: 5px 10px 0px 10px;
        font-size: 12px;
        line-height: 14px;
    }

    .PanelItemGrid4ColImages .ImgRelatedProducts {
        text-align: left;
        padding: 5px 0px 0px 5px;
        font-size: 12px;
        line-height: 14px;
    }

/* Main Associate Partner Logo - 1 column - centered on the page */
/* Custom Handling to allow for consistent use of the panel grid throughout the site - This allows for a single column view */
/* IMPORTANT - If another logo is needed eg. 2 logos, this layout will likely fail. */
.PanelItemGrid1ColAssociates > article {
    width: 28%;
    min-width: 180px;
    margin: 10px 36% 14px 36%;
}

    .PanelItemGrid1ColAssociates > article > a > div {
        height: 200px;
    }

/* Associate Logos - 2 columns - centered on the page */
/* Custom Handling to allow for consistent use of the panel grid throughout the site */
/* IMPORTANT - If another logo is needed eg. 4 logos, this layout will likely fail. */
.PanelItemGrid3ColAssociates > article {
    width: 28%;
    min-width: 180px;
    margin: 10px 2% 14px 2%;
}

    .PanelItemGrid3ColAssociates > article > a > div {
        height: 200px;
    }

/* Custom Grids - Home */
.PanelItemGrid2ColHome > article {
    width: 42%;
    min-width: 180px;
    margin: 5px 1% 4px 1%;
}

    .PanelItemGrid2ColHome > article > a > div {
        height: 180px;
    }

.PanelItemGrid4ColHome > article {
    width: 23%;
    min-width: 130px;
    margin: 5px 1% 20px 1%;
}

    .PanelItemGrid4ColHome > article > a > div {
        height: 180px;
    }

/* Login Dashboard - usercontrol\front\customer\cust_login_dashboard.ascx
===================== */
.LoginField {
    padding: 3px;
    width: 120px;
    background-color: #f4f4f4;
    border: 2px solid #069;
}

.ProfileBoxTable {
    width: 160px;
    border: 0;
    color: #666;
    font-size: 11px;
}

.ProfileInnerTable {
    width: 130px;
    margin-left: auto;
    margin-right: auto;
    border: 0;
}

.ProfileBoxTile {
    background-image: url(/assets/images/profile_box_tile.gif);
    background-repeat: repeat-y;
    background-color: #fff;
    padding-left: 4px;
    padding-right: 3px;
}

.ProfileCountColumn {
    color: #666;
    font-size: 10px;
    text-align: right;
    padding-right: 3px;
}

.ProfileIcon {
    padding: 4px 8px 4px 8px;
    text-align: center;
}

.LoginPanelProfile {
    z-index: 1000;
    position: absolute;
    right: 10px;
    top: 35px;
    background-color: #fff;
    width: 250px;
}

    .LoginPanelProfile a:link, .LoginPanelProfile a:visited {
        color: #69646c;
    }

    .LoginPanelProfile a:hover, .LoginPanelProfile a:active {
        color: #ff8c0a;
    }

.LoginPanelProfileHeader {
    color: #fff;
    background-color: #384f7b;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: bold;
}

.LoginPanelProfileSelect {
    font-size: 12px;
    padding: 3px 10px;
}

.LoginPanelCancel {
    background-color: #ccc;
    font-size: 11px;
    text-align: center;
    padding: 2px 8px;
    margin: 0 10px 6px 0;
}

a.LoginPanelCancel:link, a.LoginPanelCancel:visited {
    text-decoration: none;
}

a.LoginPanelCancel:hover, a.LoginPanelCancel:active {
    color: #fff;
    background-color: #06c;
}

/* Dashboard */
.DashboardProfileBox {
    width: 95%;
    margin: 30px 0 30px 0;
    border: 1px solid #d9d9d9;
    font-size: 14px;
    padding: 2px 10px 10px 20px; /*background-color:#f5f5f5;*/
}

.DashboardAvatar img { /*-webkit-box-shadow:0 0 5px 5px rgba(76, 76, 76, 0.1); -moz-box-shadow:0 0 5px 5px rgba(76, 76, 76, 0.1); box-shadow:0 0 5px 5px rgba(76, 76, 76, 0.1);*/
    border: 1px solid #e1e1e1;
    margin: 4px auto;
    height: 50px !important;
}

.DashboardProfileName {
    font-size: 22px;
    font-weight: normal;
    color: #000;
}

.DashboardButtonRow {
    padding: 26px 0;
}

.DashboardCompanyInfo {
    width: 95%;
    margin: 30px 0 30px 0;
    border: 1px solid #d9d9d9;
    font-size: 14px;
    padding: 2px 10px 10px 20px; /*background-color:#f5f5f5;*/
}

.DashboardTable {
    width: 100%;
    margin: 50px auto;
    background-color: #fafafa;
}

    .DashboardTable th {
        padding: 12px 10px;
        color: #384f7b;
        background-color: #eee;
    }

    .DashboardTable td {
        padding: 5px 10px;
        color: #000;
        border-bottom: 1px solid #e6e6e6;
    }

.DashboardTableSub {
    background-color: #DEDEDE !important;
}

/* Wizard */
.WizardButtons {
    padding: 20px 10px;
    border-top: 2px solid #ccc;
    margin-top: 20px;
}

.WizardPrev {
    float: left;
    text-align: left;
}

.WizardNext {
    float: right;
    text-align: right;
}

.WizardSteps {
    padding: 5px;
}

    .WizardSteps > div {
        float: left;
        margin: 0 10px 10px 0;
        padding: 8px 8px 8px 20px;
        border: 1px solid #ccc;
        border-radius: 10px;
        width: 15%;
        min-width: 100px;
        text-align: center;
        white-space: nowrap;
    }

    .WizardSteps i, .WizardSteps span {
        vertical-align: middle !important; /*margin:0 !important;*/
        line-height: normal;
        padding: 0;
    }

    .WizardSteps aside {
        font-size: 0.8em;
    }

    .WizardSteps > .StepSel {
        color: #fff;
        background-color: #384f7b;
        border: 1px solid #384f7b;
    }

/* CRM Chat
===================== */
.CRMChatOuter {
    width: 100%;
}

.CRMChatPanel {
    padding: 20px 0 15px 0;
    border: 1px solid #ddd;
}

.CRMChat_Item {
    clear: both;
    padding: 8px;
}

.CRMChat_Right {
    Width: 90%;
    border-radius: 8px;
    float: right;
    border: 1px solid #aaa;
    background-color: #e6eefc;
    padding: 6px 10px;
}

.CRMChat_Left {
    Width: 90%;
    border-radius: 8px;
    float: left;
    border: 1px solid #aaa;
    background-color: #f4f4f4;
    padding: 6px 10px;
}

.CRMChat_FileNote {
    Width: 90%;
    border-radius: 8px;
    float: left;
    border: 1px solid #aaa;
    background-color: #ffea00;
    padding: 3px 6px;
}

.CRMComm_Left_NotRead {
    width: 32px;
    height: 32px;
    float: left;
}

.CRMComm_Right_NotRead {
    width: 32px;
    height: 32px;
    float: right;
}

.CRMChat_ItemDateTime {
    text-align: right;
    color: #999;
    font-size: 10px;
}

.ChatBoxPanel {
    background-color: #f0f0f0;
    border: 1px solid transparent;
}

.ChatBoxPanelInput {
    margin: 15px 10px 0 10px;
}

.ChatBox {
}

.ChatBoxButton {
    float: right;
    margin: 2px 30px 10px 0;
    overflow: hidden;
}

.CRMChat_AttachedFile {
    Margin-top: 5px;
}

.CRMChat_ChatSubject {
    color: #888;
    display: block;
}

/* Learning */
.QualStandout {
    border: 3px solid #cbcbcb;
    padding: 15px 10px;
    background-color: #f8f4de;
}

.CourseDetailBox {
    border: 1px solid #ccc;
    padding: 20px;
}

.TableInfoHeader {
    background-color: #ccc;
    font-size: 18px;
    color: #333;
    padding: 12px 18px;
}

    .TableInfoHeader h1 {
        margin: 0;
    }

/* ======================================================================================== */
/* ======================================================================================== */
/* Static */
/* ======================================================================================== */
/* ======================================================================================== */
.ShrinkWrap {
    display: block;
}

.ShrinkWrapInline {
    display: inline-block;
}

.nobr {
    display: inline;
    white-space: nowrap;
}

.BackgroundWhite {
    background-color: #fff;
}

.BackgroundGrey {
    background-color: #ccc;
}

.BackgroundTransparent {
    background-color: transparent;
}

.Hidden {
    visibility: hidden;
}

.NoDisplay {
    display: none;
}

.FloatLeft {
    float: left;
}

.FloatRight {
    float: right;
    overflow: hidden;
}

.OverflowHidden {
    overflow: hidden;
}

.Rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.Rotate270 {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.AlignLeft {
    text-align: left;
}

.AlignRight {
    text-align: right;
}

.AlignCenter {
    text-align: center;
}

.AlignTop {
    vertical-align: top;
}

.AlignBottom {
    vertical-align: bottom;
}

.AlignCenterImage {
    margin-left: auto;
    margin-right: auto;
}

.AlignCenterObject {
    margin-left: auto;
    margin-right: auto;
}

.AlignLeftImage {
    float: left;
}

.AlignRightImage {
    float: right;
}

.AlignVertMiddle {
    vertical-align: middle;
}

.AlignVertMiddle2 {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

.RemovePadding {
    padding: 0 !important;
}

.Padding2 {
    padding: 2px;
}

.Padding3 {
    padding: 3px;
}

.Padding4 {
    padding: 4px;
}

.Padding5 {
    padding: 5px;
}

.Padding10 {
    padding: 10px;
}

.Padding20 {
    padding: 20px;
}

.Padding25 {
    padding: 25px;
}

.Padding30 {
    padding: 30px;
}

.PaddingBottom6 {
    padding-bottom: 6px;
}

.PaddingBottom10 {
    padding-bottom: 10px;
}

.PaddingBottom20 {
    padding-bottom: 20px;
}

.PaddingTop5 {
    padding-top: 5px;
}

.PaddingTop6 {
    padding-top: 6px;
}

.PaddingTop8 {
    padding-top: 8px;
}

.PaddingTop20 {
    padding-top: 20px;
}

.PaddingTopBot2 {
    padding: 2px 0;
}

.PaddingRight2 {
    padding-right: 2px
}

.PaddingRight3 {
    padding-right: 3px
}

.PaddingRight5 {
    padding-right: 5px
}

.PaddingRight10 {
    padding-right: 10px
}

.PaddingRight15 {
    padding-right: 15px
}

.PaddingLeft10 {
    padding-left: 10px;
}

.PaddingLeft20 {
    padding-left: 20px;
}

.PaddingLeft50 {
    padding-left: 50px;
}

.PaddingLeft100 {
    padding-left: 100px;
}

.Margin0 {
    margin: 0;
}

.Margin5 {
    margin: 5px;
}

.Margin10 {
    margin: 10px;
}

.Margin20 {
    margin: 20px;
}

.MarginTop3 {
    margin-top: 3px;
}

.MarginTop5 {
    margin-top: 5px;
}

.MarginTop10 {
    margin-top: 10px;
}

.MarginTop20 {
    margin-top: 20px;
}

.MarginTop30 {
    margin-top: 30px;
}

.MarginTopBot2 {
    margin-top: 2px;
    margin-bottom: 2px;
}

.MarginLeft5 {
    margin-left: 5px;
}

.MarginLeft7 {
    margin-left: 7px;
}

.MarginLeft12 {
    margin-left: 12px;
}

.MarginLeft20 {
    margin-left: 20px;
}

.MarginBottom3 {
    margin-bottom: 3px;
}

.MarginBottom5 {
    margin-bottom: 5px;
}

.MarginBottom7 {
    margin-bottom: 7px;
}

.MarginBottom20 {
    margin-bottom: 20px;
}

.MarginRight6 {
    margin-right: 6px;
}

.MarginRight20 {
    margin-right: 20px;
}

.Border1Purple {
    border: 1px solid #e9dcf2;
}

.Border1Grey {
    border: 1px solid #ccc;
}

.Border3White {
    border: 3px solid #fff;
}

.BorderRightGrey {
    border-right: 1px solid #ccc;
}

.BorderLeftGrey {
    border-left: 1px solid #ccc;
}

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

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

.BorderTop {
    border-top: 3px solid #ccc;
}

.DividerLine {
    margin: 10px 0;
    background-color: #ccc;
    height: 4px;
}

.Border3Grey {
    border: 3px solid #e2dbe6;
}

.Border1Black {
    border: 1px solid #000;
}

.BorderMap {
    border-top: 3px solid #cdd6e1;
}

.BorderNone {
    border: none;
}

.BackgroundHighlight {
    background-color: #f7f8fd;
}

.BackgroundGreyLight {
    background-color: #e5e5e5;
}

.BackgroundGreyMid {
    background-color: #ccc;
}

.BackgroundDark {
    background-color: #333;
}

.Headline {
    padding: 20px;
    text-align: center;
    background-color: #eee;
}
/* Style Guide Presentation */

/* % WIDTH SETTINGS
===================== */
.Width1 {
    width: 1%;
}

.Width2 {
    width: 2%;
}

.Width3 {
    width: 3%;
}

.Width4 {
    width: 4%;
}

.Width5 {
    width: 5%;
}

.Width6 {
    width: 6%;
}

.Width7 {
    width: 7%;
}

.Width8 {
    width: 8%;
}

.Width9 {
    width: 9%;
}

.Width10 {
    width: 10%;
}

.Width12 {
    width: 12%;
}

.Width15 {
    width: 15%;
}

.Width17 {
    width: 17%;
}

.Width19 {
    width: 19%;
}

.Width20 {
    width: 20%;
}

.Width25 {
    width: 25%;
}

.Width30 {
    width: 30%;
}

.Width33 {
    width: 33%;
}

.Width34 {
    width: 34%;
}

.Width35 {
    width: 35%;
}

.Width40 {
    width: 40%;
}

.Width45 {
    width: 45%;
}

.Width50 {
    width: 50%;
}

.Width55 {
    width: 55%;
}

.Width60 {
    width: 60%;
}

.Width65 {
    width: 65%;
}

.Width70 {
    width: 70%;
}

.Width75 {
    width: 75%;
}

.Width80 {
    width: 80%;
}

.Width85 {
    width: 85%;
}

.Width90 {
    width: 90%;
}

.Width95 {
    width: 95%;
}

.Width96 {
    width: 96%;
}

.Width97 {
    width: 97%;
}

.Width98 {
    width: 98%;
}

.Width99 {
    width: 99%;
}

.Width100 {
    width: 100%;
}

.Height250 {
    height: 250px;
}

.Height500 {
    height: 500px;
}

.MinHeight200 {
    min-height: 200px;
}

.MinHeight400 {
    min-height: 400px;
}

.Zindex9 {
    z-index: 9000;
}

.Zindex7 {
    z-index: 7000;
}

.Zindex5 {
    z-index: 5000;
}

.Zindex3 {
    z-index: 3000;
}

.Zindex1 {
    z-index: 1000;
}

/* IMAGE SIZES
===================== */
.ImageBasic {
    border: 0px;
}

.ImageBorderWhite1 {
    border: 1px solid #fff;
}

.ImageBorderWhite2 {
    border: 2px solid #fff;
}

.ImageBorderWhite3 {
    border: 3px solid #fff;
}

.ImageBorderWhite10 {
    border: 10px solid #fff;
}

.ImageBorderGrey1 {
    border: 1px solid #ccc;
}

.ProductImage {
    margin: 5px auto !important;
}

/* Used for square images */
.Image16 {
    width: 16px;
    height: 16px;
}

.Image18 {
    width: 18px;
    height: 18px;
}

.Image24 {
    width: 24px;
    height: 24px;
}

.Image32 {
    width: 32px;
    height: 32px;
}

.Image40 {
    width: 40px;
    height: 40px;
}

.Image48 {
    width: 48px;
    height: 48px;
}

.Image72 {
    width: 72px;
    height: 72px;
}

.Image128 {
    width: 128px;
    height: 128px;
}

.Image256 {
    width: 256px;
    height: 256px;
}

.ImgItem {
    border: 1px solid #DFDFDF;
}


/* COLORS
===================== */
.Red {
    color: #f00;
}

.Green {
    color: #093;
}

.Black {
    color: #000;
}

.White {
    color: #fff;
}

.Orange {
    color: #f60;
}

.Yellow {
    color: #ff0;
}

.GreyDark {
    color: #333;
}
/* ======================================================================================== */
/* ======================================================================================== */
/* Responsive Layouts */
/* ======================================================================================== */
/* ======================================================================================== */

/* For Help with the responsive grid system, follow the link below */
/* http://www.responsivegridsystem.com */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Custom */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Apply this style directly within an 'img' tag to create images that automatically resize as the parent space shrinks */
.responsive-image img {
    height: auto !important;
    max-width: 100% !important;
    width: 100% !important;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Column system  */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*  GRID COLUMN SETUP   ==================================================================== */
.col {
    display: block;
    float: left;
    margin: 1% 0 1% 1.6%;
}

    .col:first-child {
        margin-left: 0;
    }

.colMargin_0 {
    display: block;
    float: left;
    margin: 0;
}
    /* Tight Columns */
    .colMargin_0:first-child {
        margin-left: 0;
    }

/*  GRID OF TWO   ============================================================================= */
.span_2_of_2 {
    width: 100%;
}

.span_1_of_2 {
    width: 49.2%;
}

/*  GRID OF THREE   ============================================================================= */
.span_3_of_3 {
    width: 100%;
}

.span_2_of_3 {
    width: 66.13%;
}

.span_1_of_3 {
    width: 32.26%;
}

/*  GRID OF FOUR   ============================================================================= */
.span_4_of_4 {
    width: 100%;
}

.span_3_of_4 {
    width: 74.6%;
}

.span_2_of_4 {
    width: 49.2%;
}

.span_1_of_4 {
    width: 23.8%;
}

/*  GRID OF FIVE   ============================================================================= */
.span_5_of_5 {
    width: 100%;
}

.span_4_of_5 {
    width: 79.68%;
}

.span_3_of_5 {
    width: 59.36%;
}

.span_2_of_5 {
    width: 39.04%;
}

.span_1_of_5 {
    width: 18.72%;
}

/*  GRID OF SIX   ============================================================================= */
.span_6_of_6 {
    width: 100%;
}

.span_5_of_6 {
    width: 83.06%;
}

.span_4_of_6 {
    width: 66.13%;
}

.span_3_of_6 {
    width: 49.2%;
}

.span_2_of_6 {
    width: 32.26%;
}

.span_1_of_6 {
    width: 15.33%;
}

/*  GRID OF SEVEN   ============================================================================= */
.span_7_of_7 {
    width: 100%;
}

.span_6_of_7 {
    width: 85.48%;
}

.span_5_of_7 {
    width: 70.97%;
}

.span_4_of_7 {
    width: 56.45%;
}

.span_3_of_7 {
    width: 41.94%;
}

.span_2_of_7 {
    width: 27.42%;
}

.span_1_of_7 {
    width: 12.91%;
}

/*  GRID OF EIGHT   ============================================================================= */
.span_8_of_8 {
    width: 100%;
}

.span_7_of_8 {
    width: 87.3%;
}

.span_6_of_8 {
    width: 74.6%;
}

.span_5_of_8 {
    width: 61.9%;
}

.span_4_of_8 {
    width: 49.2%;
}

.span_3_of_8 {
    width: 36.5%;
}

.span_2_of_8 {
    width: 23.8%;
}

.span_1_of_8 {
    width: 11.1%;
}

/*  GRID OF NINE   ============================================================================= */
.span_9_of_9 {
    width: 100%;
}

.span_8_of_9 {
    width: 88.71%;
}

.span_7_of_9 {
    width: 77.42%;
}

.span_6_of_9 {
    width: 66.13%;
}

.span_5_of_9 {
    width: 54.84%;
}

.span_4_of_9 {
    width: 43.55%;
}

.span_3_of_9 {
    width: 32.26%;
}

.span_2_of_9 {
    width: 20.97%;
}

.span_1_of_9 {
    width: 9.68%;
}

/*  GRID OF TEN   ============================================================================= */
.span_10_of_10 {
    width: 100%;
}

.span_9_of_10 {
    width: 89.84%;
}

.span_8_of_10 {
    width: 79.68%;
}

.span_7_of_10 {
    width: 69.52%;
}

.span_6_of_10 {
    width: 59.36%;
}

.span_5_of_10 {
    width: 49.2%;
}

.span_4_of_10 {
    width: 39.04%;
}

.span_3_of_10 {
    width: 28.88%;
}

.span_2_of_10 {
    width: 18.72%;
}

.span_1_of_10 {
    width: 8.56%;
}

/*  GRID OF ELEVEN   ============================================================================= */

.span_11_of_11 {
    width: 100%;
}

.span_10_of_11 {
    width: 90.76%;
}

.span_9_of_11 {
    width: 81.52%;
}

.span_8_of_11 {
    width: 72.29%;
}

.span_7_of_11 {
    width: 63.05%;
}

.span_6_of_11 {
    width: 53.81%;
}

.span_5_of_11 {
    width: 44.58%;
}

.span_4_of_11 {
    width: 35.34%;
}

.span_3_of_11 {
    width: 26.1%;
}

.span_2_of_11 {
    width: 16.87%;
}

.span_1_of_11 {
    width: 7.63%;
}

/*  GRID OF TWELVE   ============================================================================= */
.span_12_of_12 {
    width: 100%;
}

.span_11_of_12 {
    width: 91.53%;
}

.span_10_of_12 {
    width: 83.06%;
}

.span_9_of_12 {
    width: 74.6%;
}

.span_8_of_12 {
    width: 66.13%;
}

.span_7_of_12 {
    width: 57.66%;
}

.span_6_of_12 {
    width: 49.2%;
}

.span_5_of_12 {
    width: 40.73%;
}

.span_4_of_12 {
    width: 32.26%;
}

.span_3_of_12 {
    width: 23.8%;
}

.span_2_of_12 {
    width: 15.33%;
}

.span_1_of_12 {
    width: 6.86%;
}


/* Image Crop - Keep this so the refrence point of the selector is the immediate container, and NOT <BODY>.  Refer the _ReadMe file with this tool.
===================== */
#MyImgAreaSelect {
    position: relative;
}


/* Expanding Panels  (FAQ's or Attach a File Link)
===================== */
/* Format our link that will be used to trigger the toggle */
.TriggerText {
    font-size: 20px;
    width: 95%;
    color: #333;
    padding: 15px 10px 15px 10px;
}

.CRMAttchFile .TriggerText {
    font-family: Arial Narrow, Arial;
    font-size: 16px;
    width: 95%;
    color: #333;
    padding: 15px 10px 5px 10px;
}

div.TriggerText:hover {
    color: #f60;
    text-decoration: none;
    cursor: pointer;
}

/* Set the container DIV that will be transitioned */
.Outer {
    height: 0;
    position: relative;
    overflow: hidden;
    width: auto
}

/* Set the inner DIV(s), that hold the real content.  *** THIS MUST HAVE A BORDER OR PADDING APPLIED!  Otherwise the dynamic height calc may fail due to not recognising margin values */
.Inner {
    padding: 5px 5px 5px 30px;
    width: auto;
}



/* ======================================================================================== */
/* ======================================================================================== */
/* Custom */
/* ======================================================================================== */
/* ======================================================================================== */


/*Example Generic Table Handling*/
.TableStd {
    width: 90%;
    border-collapse: collapse;
    max-width: 1000px;
}

    .TableStd > tbody {
        border: 1px solid #ccc;
    }

    .TableStd caption {
        text-align: left;
        font-size: 14px;
        color: #4b5267;
        font-weight: bold;
        padding: 10px 5px 4px 10px;
        border-color: #ccc;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        background-color: #efefef;
        background-image: linear-gradient(0deg, #efefef, #fff 90%);
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .TableStd th {
        font-weight: bold;
        text-align: left;
        vertical-align: bottom;
        padding: 10px 5px 4px 5px;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
    }

    .TableStd td {
        vertical-align: bottom;
        line-height: 30px;
        border-top: 1px solid transparent;
        padding: 0 5px;
    }

    .TableStd > tbody > tr:nth-child(odd) {
        background-color: #efefef;
    }

    .TableStd > tbody > tr:nth-child(even) {
        background-color: #fefefe;
    }

    .TableStd > tbody > tr:hover td {
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
        background-color: #fcf4e6;
    }

    .TableStd > tbody > tr > td > a {
        display: block;
        text-decoration: none;
        position: relative;
    }

        .TableStd > tbody > tr > td > a:hover, .TableStd > tbody > tr > td > a:active {
            text-decoration: underline;
            color: #f63;
            cursor: pointer;
        }

/*Apply additional custom rendering per table*/
/*Customer Profile Table*/
.TableCustProf > thead {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
    /*Set matching left and right borders in the heading row*/
    .TableCustProf > thead > tr > th:nth-of-type(3), .TableCustProf > tbody > tr > td:nth-of-type(3) {
        text-align: right;
    }
    /*Make the number in the 3rd column align right*/
    .TableCustProf > thead > tr > th:nth-of-type(4), .TableCustProf > tbody > tr > td:nth-of-type(4) {
        text-align: center;
    }
/*Make the size / button in the 4th column align in the middle*/
.TableCustProf > tbody > tr > td:first-of-type {
    font-weight: bold;
}
/*Make the text in the first column bold*/
.TableCustProf > tbody > tr > td > a.ABtnStd {
    display: inline-block;
    text-decoration: none;
    width: 75px;
}
/*Override the A tag handling that the table handling applies over the standard button*/


/*Site wide button style from an Anchor tag */
.ABtnStd {
    text-align: center;
    padding: 4px 12px;
    margin: 3px;
    font-size: 14px;
    line-height: normal;
    display: inline-block;
}

a.ABtnStd:link, a.ABtnStd:visited {
    text-decoration: none;
}

a.ABtnStd:hover, a.ABtnStd:active {
    text-decoration: none;
    color: #fff !important;
    background-color: #f08c3d;
    border-radius: 3px;
}

/* Rounded Button */
.BtnRounded {
    text-align: center;
    font-weight: 400;
    padding: 6px 18px;
    margin: 3px;
    font-size: 12px;
    line-height: normal;
    display: inline-block;
    border-radius: 12px;
    background-color: #fff;
}

a.BtnRounded:link, a.BtnRounded:visited {
    text-decoration: none;
}

a.BtnRounded:hover, a.BtnRounded:active {
    text-decoration: none;
    color: #fff !important;
    background-color: #458cc7;
    transition: all 0.3s ease;
}

.BtnGroup {
    display: inline-block;
}

/*video list icons*/
.ib_gallery img {
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #f5f5f5;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.ib_gallery_on img {
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #fb9d18;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.ib_brief img {
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #f5f5f5;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.ib_brief_on img {
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #fb9d18;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.ib_list img {
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #f5f5f5;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.ib_list_on img {
    display: inline-block;
    border: 1px solid #aaa;
    background-color: #fb9d18;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

/*----------------------------------------------*/
/* List Grid Layout -  Responsive Columns */

/*Containers */
.ListItem {
}

    .ListItem article {
        border-top: 1px solid #e3e3e3;
        padding: 10px 5px;
        overflow: hidden;
    }

        .ListItem article > div:nth-of-type(1) {
            float: left;
            margin: 0 20px 0 0;
            vertical-align: top;
        }

        .ListItem article > div:nth-of-type(2) {
            float: left;
            width: 50%;
            vertical-align: top;
        }

/* Responsive News */

.NewsMenuHeader {
    font-weight: 700;
    font-size: 18px;
}

.NewsNavCont {
    border: 1px solid #ccc;
    padding: 0 0 0 10px;
    border-radius: 4px;
    width: 100%; /*max-width:600px;*/
}

#NewsNav {
    position: relative;
    top: 0;
    height: 40px;
    background-color: #fafafa;
}

    #NewsNav > nav {
        line-height: 40px;
    }

        #NewsNav > nav > article {
            float: left;
        }

        #NewsNav > nav > aside {
            float: right;
            background-color: #777;
            border-radius: 4px;
            color: #fff;
            font-weight: 600;
            font-size: 16px;
            width: 40px;
            height: 40px;
            text-align: center;
        }

    #NewsNav:hover {
    }

        #NewsNav:hover > nav > aside {
            background-color: #555;
        }

    #NewsNav a {
        display: block;
        padding: 5px 8px;
        text-decoration: none;
        color: #222;
        border-radius: 5px;
        font-size: 18px;
        border: 1px solid transparent;
    }

        #NewsNav a:nth-child(odd) {
            background-color: #fff;
            color: #000;
            border: 1px solid #ccc;
        }

        #NewsNav a:nth-child(even) {
            background-color: #f7f7f7;
            color: #000;
            border: 1px solid #ccc;
        }

        #NewsNav a:hover {
            background-color: #fcf6e8;
            color: #000;
            border: 1px solid #e6d39e;
        }

    #NewsNav > div {
        border: 1px solid #666;
        border-radius: 4px;
        margin: 0;
        overflow: hidden;
        width: 100%;
        position: absolute;
        top: 40px;
        left: -10px;
        max-height: 0;
        opacity: 0;
        transition: max-height 2.0s, opacity 0.75s;
        -webkit-transition: max-height 2.0s, opacity 0.75s;
        font-weight: 200;
        color: #333;
        background-color: #fff;
        z-index: 500;
        text-align: left;
    }

        #NewsNav > div > div {
            padding: 7px 7px;
            background-color: #e0e0e0;
        }

    #NewsNav:hover > div {
        max-height: 600px;
        opacity: 1.0;
        overflow: visible;
        overflow-y: scroll;
    }

.NewsMenuDate {
    font-size: 12px;
    color: #999;
}

.NewsMenuTitle {
    font-weight: 700;
}

.NewsMenuTeaser {
    font-size: 12px;
    color: #666;
}

.NewsTeaser {
    font-size: 14px;
    color: #666;
}

.CommentCount {
    font-size: 10px;
    color: #333;
    padding: 1px 5px;
    background-color: #f7f7f7;
    margin-left: 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.NewsMenuViewCount {
    font-size: 10px;
    color: #333;
    padding: 1px 5px;
    background-color: #f7f7f7;
    margin-left: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.NewsPrevNext {
    text-decoration: none !important;
    display: block;
    float: right;
    overflow: hidden;
    padding: 0 10px;
    background-color: #fff;
    border-radius: 10px;
}

    .NewsPrevNext div {
        display: block;
        float: left;
        line-height: 40px;
        margin: 0 3px;
    }

    .NewsPrevNext:hover {
        background-color: #ddd;
        color: #fff;
    }

.NewsArrow {
    font-weight: bold;
    font-size: 30px;
}

.NewsArrowLeft {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.NewsArrowRight {
    float: right;
}

.NewsList {
    padding-left: 24px;
    background-image: url(/assets/images/bullet_arrow_circle.gif);
    background-repeat: no-repeat;
    line-height: 22px;
}

.NewsHeader {
    height: 42px;
    padding-left: 12px;
}

/* Product Keyword Search */
.SearchPanel .RadComboBox input[type="text"] {
    line-height: normal !important;
    border: 0 !important;
    margin: 0;
}

.SearchPanel .RadComboBox_Default .rcbInputCell, .SearchPanel .RadComboBox_Default .rcbArrowCell {
    background-image: none !important;
    padding: 0 !important;
}

.SearchPanel {
}

.SearchPanelCol1 {
    float: left;
    width: 80%;
}

    .SearchPanelCol1 input[type="text"] {
        width: 95% !important;
        margin-right: 4px;
    }

.SearchPanelCol2 {
    float: left;
    width: 15%;
    padding: 3px 0;
}

/*
	Support for the 'Auto Complete' search handling, which is based on "Typeahead". On GIT: https://github.com/twitter/typeahead.js
	'Typeahead' is the 'UI' view. Find documentation here: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names
	'Bloodhound' is a paired component that is the 'suggstion engine'.
*/
.typeahead, .tt-query, .tt-hint {
    height: 26px !important;
    padding: 8px 0 8px 12px !important;
    font-size: 18px !important;
    border: 2px solid #ccc;
    border-radius: 2px;
    outline: none;
    width: 100%;
}

.typeahead {
    background-color: #fff;
}

    .typeahead:focus {
        border: 1px solid #0097cf;
    }

.tt-query {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    color: red !important;
}

.tt-hint {
    color: #bbb !important;
}
/* This is the text that shows after the cursor within the form field. */
.tt-menu {
    width: 420px;
    margin: 0;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
    color: #000;
}
    /* This is the text that shows as the suggestions below the form field. */
    .tt-suggestion:hover {
        cursor: pointer;
        color: #fff;
        background-color: #0097cf;
    }
    /* .tt-suggestion.tt-cursor				{color:#fff; background-color:#0097cf;  color:purple !important;} */
    .tt-suggestion p {
        margin: 0;
    }

.gist {
    font-size: 14px;
    color: yellow !important;
}


/* Modal pop-up styles - Used to replace JavaScript Alert/Confirm dialogues*/
@keyframes ModalPopup_ModalContent {
    from {
        top: -100px;
        opacity: 0;
    }

    to {
        top: 0px;
        opacity: 1;
    }
}

.ModalPopup_ModalOuter {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 10s ease-in;
    transition: opacity 2s ease-in;
    display: none;
}

    .ModalPopup_ModalOuter:target {
        opacity: 1;
        display: block;
    }

    .ModalPopup_ModalOuter > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 0 10px 5px #555;
        animation-name: ModalPopup_ModalContent;
        animation-duration: 0.8s;
        text-align: left;
    }

.ModalPopup_ModalCloser {
    background: #606061;
    color: #fff;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 12px;
    box-shadow: 1px 1px 3px #000;
}

    .ModalPopup_ModalCloser:hover, .ModalPopup_ModalCloser:link, .ModalPopup_ModalCloser:visited {
        text-decoration: none;
        color: #fff;
    }

    .ModalPopup_ModalCloser:hover {
        background: #00d9ff;
    }


/* EFFECTS */
/* Many of these effects come from here:http://ianlunn.github.io/Hover/  */
/*----------------------------------------------*/

/* STREAMSWEET PRODUCTS - HOVER TEXT */
.streamSweet-item {
    height: auto;
    float: left;
    position: relative;
}

    .streamSweet-item:hover .img-title {
        opacity: 0.8;
    }

.img-title {
    position: absolute;
    top: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    opacity: 0;
    background-color: #fff;
    transition: all 1.0s ease;
}

    .img-title p {
        position: absolute;
        color: #333;
        top: 30%;
        width: 100%;
        text-align: center;
    }

/* Shadow */
.BtnShadow {
    -webkit-transition: box-shadow 0.3s;
    transition: box-shadow 0.3s;
}

    .BtnShadow:hover, .BtnShadow:focus, .BtnShadow:active {
        box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    }

/* Shrink */
.HoverShrink {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

    .HoverShrink:hover, .HoverShrink:focus, .HoverShrink:active {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

/* Grow */
.HoverGrow {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

    .HoverGrow:hover, .HoverGrow:focus, .HoverGrow:active {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

/* Hover Fade */
.HoverFade {
}

    .HoverFade:hover {
        opacity: 0.8;
    }


/* 'Lazy Load' Animations
===================== */

.animation-element {
    opacity: 0;
    position: relative;
}

    /*animation element sliding from the left*/
    .animation-element.slide-left {
        opacity: 0;
        -webkit-transition: all 1200ms linear;
        transition: all 1200ms linear;
        -webkit-transform: translate(-300px, 0px);
        transform: translate(-300px, 0px);
    }

        .animation-element.slide-left.in-view {
            opacity: 1;
            -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
        }


/* USEFUL SNIPPETS */
/* ----------------------------------------------------------------------------------------------------------------------  *
/* Download */
.DownloadFeature {
    background-color: #f2f9fb;
    padding: 8px 10px;
    color: #6c6c6c;
    border-bottom: 3px solid #e5f4f7;
    border-top: 3px solid #e5f4f7;
    margin: 30px auto;
}

    .DownloadFeature img {
        margin: 6px auto;
    }

/* Editor Images */
.FloatLeftImage {
    float: left;
    margin: 20px 20px 20px 0;
}

.FloatRightImage {
    float: right;
    margin: 20px 10px 20px 20px;
}

.CaptionRight {
    width: 45%;
    float: right;
    margin: 0 10px 20px 20px;
    padding: 20px;
}

    .CaptionRight img {
        margin-bottom: 14px;
    }

/* TABLE NO BORDER */
.TableNoBorder {
    margin-bottom: 20px;
    line-height: 1.5;
    border-top: 1px solid #bdbebf;
    background-color: #fff;
}

    .TableNoBorder th {
        background-color: #f5f5f5;
        font-weight: 300;
        color: #939598;
        padding: 10px;
    }

    .TableNoBorder tr {
        border-bottom: 1px solid #bdbebf;
    }

        .TableNoBorder tr:hover {
            background-color: #f2f9fb;
        }

    .TableNoBorder td {
        font-size: 14px;
        padding: 8px; /*vertical-align:top;*/
    }

.TableNoBorderSubHead {
    color: #939598;
    font-weight: bold;
}

/* TABLE WITH BORDER */
.TableWithBorder {
    margin-bottom: 20px;
    line-height: 1.5;
    border: 2px solid #bdbebf;
    background-color: #fff;
}

    .TableWithBorder th {
        background-color: #f5f5f5;
        font-weight: 300;
        color: #939598;
        padding: 10px;
    }

    .TableWithBorder tr {
        border-bottom: 1px solid #bdbebf;
    }

        .TableWithBorder tr:hover {
            background-color: #f2f9fb;
        }

    .TableWithBorder td {
        font-size: 14px;
        padding: 8px; /*vertical-align:top;*/
    }

.TableWithBorderSubHead {
    color: #939598;
    font-weight: bold;
}

/* FEATURE TABLE */
.TableFeature {
    margin-bottom: 20px;
    line-height: 1.5;
    border-top: 1px solid #bdbebf;
    background-color: #fff;
}

    .TableFeature th {
        background-color: #f5f5f5;
        font-weight: 300;
        color: #939598;
        padding: 10px;
    }

    .TableFeature tr {
        border-bottom: 1px solid #bdbebf;
    }

        .TableFeature tr:hover {
            background-color: #f2f9fb;
        }

    .TableFeature td {
        font-size: 14px;
        padding: 8px; /*vertical-align:top;*/
    }

.TableFeatureSubHead {
    color: #939598;
    font-weight: bold;
}


/* KEYNOTE */
.Keynote {
    margin: 20px auto;
    width: 90%;
    padding: 25px 30px;
    border-left: 4px solid #BCCEE0;
    font-size: 16px;
    line-height: 24px;
    display: block
}

/* Vote */
.VotePanel {
    text-align: center;
    max-width: 160px;
    color: #ccc;
    margin: 8px auto;
}

.VoteHeading {
    font-size: 18px;
    margin: 0;
    color: #333;
}

.VoteSelect {
    text-align: center;
}

.VoteCountLge {
    font-size: 34px;
    line-height: 34px;
    padding: 5px;
}

    .VoteCountLge p {
        margin: 0 0 4px 0;
        color: #666;
    }

.VoteUp {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.VoteDown {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* Ratings */
.RatingHeading {
    padding: 10px 0;
    color: #666;
    font-size: 14px;
    font-weight: bold;
}

.RatingContainer {
    padding: 16px 0;
}

.RatingContainerIndividual {
    padding: 8px 0;
}
/* Reduce vertical space a bit */

.SocialCount {
    color: #ccc;
    font-weight: normal;
}

.SocialTextSmall {
    font-size: 12px;
    color: #909090;
}

/* Custom Styles */

.Biline {
    float: left;
    color: #11598a;
    margin-top: 7px;
}

.BoxFeature {
    background-color: #11598a;
    padding: 28px;
    color: #fff;
    border-radius: 20px;
}

/* Homepage Custom */
.HomepageFeaturePanel {
    background-color: #d6483b;
    padding: 40px 30px;
    color: #fff;
    text-align: center;
}

    .HomepageFeaturePanel h2 {
        font-family: 'Open Sans Condensed', Arial, Helvetica;
        font-weight: 700;
        font-size: 52px;
        line-height: 58px;
        color: #fff;
        letter-spacing: -.035em;
        margin-bottom: 22px;
    }

.HomepageFeaMagazine {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding: 30px 0;
}

    .HomepageFeaMagazine h2 {
        font-family: 'Open Sans Condensed', Arial, Helvetica;
        font-weight: 700;
        font-size: 52px;
        line-height: 58px;
        letter-spacing: -.035em;
        margin-bottom: 22px;
    }

/* Hide Title */
.PageTitleAlt {
    display: none;
}
/* To get the nice large text over the top of the image in the banner we need to hide the dynamic H1 on the page - we still generate the page title however which is good for SEO */

/* Banners */
/* About */
.BannerAbout {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_about.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerAbout h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }

.BannerOurOrg {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_ourorg.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerOurOrg h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }

.BannerStrategicPlan {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_strategic_plan.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerStrategicPlan h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }

.BannerPartners {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_partners.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerPartners h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }
/* Membership */
.BannerMembership {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_membership.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerMembership h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }

.BannerBenefits {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_benefits.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerBenefits h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }

.BannerTypes {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_types.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerTypes h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }

.BannerEthics {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_ethics.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerEthics h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }
/* Branches */
.BannerBranches {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_branches.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerBranches h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }
/* Contact */
.BannerContact {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_contact.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerContact h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }

/* Industry Resources */
.BannerCivilShare {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_civilshare.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerCivilShare h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }

.BannerBPGuidelines {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_ethics.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerBPGuidelines h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }
/* Events */
.BannerExcavatorChamps {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_excavator_champs.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerExcavatorChamps h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }

.BannerAwards {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_awards.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerAwards h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }
/* Engagement */
.BannerCareers {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_careers.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerCareers h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }

.BannerCivilTrades {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_civil_trades.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerCivilTrades h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }

.BannerIjobsite {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_ijobsite.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerIjobsite h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }

.BannerBNZ {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_bnz.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerBNZ h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }

/* Events */

/* About */
.BannerEvents {
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url(/ImagesCust/imagescont/CMS/Banners/banner_events.jpg) no-repeat;
    min-height: 260px;
    background-size: cover;
    background-position: 50% 50%;
    overflow: hidden;
    padding: 0;
}

    .BannerEvents h1 {
        color: #fff;
        margin: 110px 0;
        font-size: 58px;
        opacity: 1.0;
        font-family: 'Open Sans Condensed',sans-serif;
        font-weight: 700;
    }



/* Strategic Plan Panels */
.StrategyPanel {
    background-color: #ddd;
    padding: 0 0 20px 0;
    min-height: 200px;
    color: #015c9c;
    font-weight: 400;
}

    .StrategyPanel h3 {
        color: #fff;
        text-align: center;
        font-weight: 700;
        background-color: #015c9c;
        padding: 12px 10px;
        font-size: 24px;
    }

    .StrategyPanel p {
        color: #015c9c;
        text-align: center;
        margin: 20px 10px 10px 20px;
    }

    .StrategyPanel ul {
        width: 60%;
        margin: 20px auto 10px auto;
    }

.StandoutPanel {
    background-color: #d6483b;
    padding: 40px 30px;
    color: #fff;
    text-align: center;
}

    .StandoutPanel h2 {
        font-family: 'Open Sans Condensed', Arial, Helvetica;
        font-weight: 700;
        font-size: 52px;
        line-height: 58px;
        color: #fff;
        letter-spacing: -.035em;
        margin-bottom: 22px;
    }

.IconLargeCentered {
    height: 90px;
    width: 90px;
    margin: 8px auto;
    border-radius: 50%;
    overflow: hidden;
    padding: 10px;
    position: relative; /*background-color:#2b5886;*/
    background-image: linear-gradient(-44deg,#0e3256,#2b5886);
    box-shadow: 0 15px 40px -25px rgba(0,0,0,.16);
}

    .IconLargeCentered em {
        margin: 10px;
        color: #fff;
    }

.StandoutFeature {
    background-color: #d6483b;
    padding: 30px 30px;
    color: #fff;
    text-align: center;
    border-radius: 20px;
}

    .StandoutFeature h3 {
        font-family: 'Open Sans Condensed', Arial, Helvetica;
        font-weight: 700;
        font-size: 40px;
        line-height: 44px;
        color: #fff;
        letter-spacing: -.035em;
        margin-bottom: 22px;
    }

.BranchGridContainer {
    width: 90%;
    margin: 0 auto;
}
/* Sets the page width of the Branches displayed in a grid view */
.BranchGridBox {
    float: left;
    width: 48%;
    margin-right: 1%;
    margin-left: 1%;
    margin-bottom: 20px;
    background-color: #000;
    position: relative;
    text-align: center; /*height:240px;*/
    overflow: hidden;
}
    /* Box containing the link & image of the branch -- Image height can be removed if we control the image size being uploaded via 'Branch Info' in admin */
    .BranchGridBox h2 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .BranchGridBox h2 {
        margin: 0;
        color: #fff;
        font-size: 36px;
        line-height: 40px;
    }

.BranchGridImage {
    opacity: 0.3;
    width: 100%;
}

    .BranchGridImage:hover {
        opacity: 1.0;
        transition: all 0.9s;
    }

.GreyBox {
    background-color: #f2f5f8;
    padding: 25px;
    margin: 20px 0;
}

/* Awards */
.AwardPrice {
    padding: 14px 0;
}

.AwardButtons {
    padding: 14px 0;
}

.AwardDescription {
    padding: 14px 0;
}

.EntriesCloseText {
    font-size: 16px;
    line-height: 20px;
    color: #D36500;
    padding: 10px 0;
}

.AwardType {
    font-size: 18px;
    font-weight: bold;
    padding: 20px 0;
    text-align: center;
    border-top: 3px solid #cdd6e1;
    border-bottom: 3px solid #cdd6e1;
    margin: 10px auto;
}

/* Add to Cart or Buy Now*/
.BtnShopAddToCart {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    display: inline-block;
    color: #fff;
    letter-spacing: 1px;
    background-color: #11598a;
    font-size: 18px;
    padding: 8px 40px;
    text-decoration: none !important;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
}

    .BtnShopAddToCart:link {
        color: #fff;
    }

    .BtnShopAddToCart:hover {
        color: #fff;
        opacity: 0.8;
    }

    .BtnShopAddToCart:active {
        position: relative;
        top: 1px;
    }

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
    .BtnShopAddToCart {
        width: 99% !important;
        padding: 8px 0;
    }
}

.BtnLearnMore {
    width: 160px;
    height: 38px;
    display: block;
    background: url(/assets/images/button_learnmore.svg) no-repeat;
    margin: 20px 0;
}

    .BtnLearnMore:hover {
        opacity: 0.8;
    }

.BtnCreateAccount {
    width: 228px;
    height: 38px;
    display: block;
    background: url(/assets/images/button_create_account.svg) no-repeat;
    margin: 20px 0;
}

    .BtnCreateAccount:hover {
        opacity: 0.8;
    }

.BtnLoginNow {
    width: 160px;
    height: 38px;
    display: block;
    background: url(/assets/images/button_login_now.svg) no-repeat;
    margin: 20px 0 20px 0;
}

    .BtnLoginNow:hover {
        opacity: 0.8;
    }

/* Handle display of a checkbox list that serves as a category filter for searching News Articles. Apply the 'ListFilter' Class to the checkbox list container. */
/*
.ListFilter {
	column-count: 3;
	column-width: 200px;
	column-gap: 10px;
	display: block
}*/

.ListFilter {
    padding: 10px 0 20px 0;
}

    .ListFilter input {
        display: none;
    }
    /* Hide the checkbox */
    .ListFilter label {
        margin: 4px 10px 4px 0;
        white-space: nowrap;
        display: inline-block;
        padding: 0 5px 5px 30px;
        background: url(/assets/images/check_cross.svg) no-repeat;
        color: #666;
        column-width: 200px;
        column-gap: 10px;
    }
        /* Apply formatting to the LABEL tag */
        .ListFilter label:hover {
            opacity: 0.7;
        }
    /* Apply formatting when the LABLE tag is hovered. Need the !important to override the 'checked' styling applied next. */
    .ListFilter input:checked + label {
        background: url(/assets/images/check_tick.svg) no-repeat;
        color: #11598a;
    }
/* Apply formatting to the LABEL tag where it immediately follows a 'ticked checkbox' */

/* Contractors Map Results */

.GMapResultTable {
    margin-bottom: 20px;
    line-height: 1.5;
    border-top: 1px solid #bdbebf;
    background-color: #fff;
    width: 99%;
}

    .GMapResultTable th {
        background-color: #11598a;
        font-weight: 300;
        color: #fff;
        padding: 10px;
    }

    .GMapResultTable tr {
        border-bottom: 1px solid #cdd6e1;
    }

        .GMapResultTable tr:hover {
            background-color: #f3f5f8;
        }

    .GMapResultTable td {
        font-size: 14px;
        padding: 12px 8px; /*vertical-align:top;*/
    }

        .GMapResultTable td > h4 {
            margin: 4px 0 6px 0;
        }

.GMapResultTableSubHead {
    color: #939598;
    font-weight: bold;
}

.GMapResultCol1 {
    width: 20%;
}

.GMapResultCol2 {
    width: 50%;
}

.GMapResultCol3 {
    width: 12%%;
}

.GMapResultCol4 {
    width: 18%;
}

.GoogleMapFilters {
    background-color: #fafafa;
    padding: 20px;
}

.SearchFilterLink {
    float: right;
    border: 1px solid #60a8ef;
    border-radius: 7px;
    padding: 4px 20px;
    display: inline-block;
    font-size: 14px;
    color: #60a8ef;
}

.AssociateLogo {
    width: 200px;
    margin: 0 auto;
}
/* Custom handling of the main logo */

.CoreAssociatesLogo {
    width: 600px;
    margin: 0 auto;
}
/* Custom handling of the main logo */

/* Modal Window */
.modalDialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

    .modalDialog:target {
        opacity: 1;
        pointer-events: auto;
    }

    .modalDialog > div {
        max-width: 800px;
        width: 80%;
        position: relative;
        margin: 10% auto;
        padding: 5px 30px 20px 30px;
        border-radius: 10px;
        background: #fff;
    }

.close {
    background: #fff;
    color: #000;
    line-height: 35px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 35px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

    .close:hover {
        background: #11598a;
        color: #fff;
    }


/* A set of links / buttons for directly adding an Event Instance to a Calendar. MUST BE in master.css as these classes are used on the checkout5 user control as well as Event pages. to avoid duplicating the CSS place it centrally here. */
.event-calendar-link {
    margin: 30px 0 5px 0;
    padding: 15px 5px 5px 5px;
    position: relative;
    border-top: 1px solid #ddd;
    max-width: 1000px;
}

    .event-calendar-link > div:nth-of-type(1) {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: start;
        padding: 0 0 10px 0;
    }

        .event-calendar-link > div:nth-of-type(1) > div {
            box-sizing: border-box;
        }

            .event-calendar-link > div:nth-of-type(1) > div:nth-of-type(1) {
                width: 50px;
                text-align: right;
                padding: 2px 0 0 0;
            }

            .event-calendar-link > div:nth-of-type(1) > div:nth-of-type(2) {
                width: calc(100% - 140px);
                font-size: 1.2em;
                padding: 0 10px;
            }

            .event-calendar-link > div:nth-of-type(1) > div:nth-of-type(3) {
                width: 20px;
            }

                .event-calendar-link > div:nth-of-type(1) > div:nth-of-type(3) > span {
                    font-size: 16px;
                }

            .event-calendar-link > div:nth-of-type(1) > div:nth-of-type(4) {
                width: 70px;
                font-size: 14px;
            }

    .event-calendar-link > div:nth-of-type(2) {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
        height: 30px;
    }

        .event-calendar-link > div:nth-of-type(2) > a {
            width: calc(33% - 8px);
            box-sizing: border-box;
            font-size: 14px;
            line-height: 16px;
            text-align: center;
            padding: 10px 10px;
            color: #fff;
            background-color: #425d91;
            border-radius: 3px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

            .event-calendar-link > div:nth-of-type(2) > a:hover {
                text-decoration: none;
                background-color: #254c6f;
            }

/* For situations there are multiple links, or we just want separation, use a containing element. */
.event-calendar-link-cont {
    border: 1px solid #bbb;
    margin: 30px 0 50px;
    padding: 0 20px 30px 20px;
    border-radius: 4px;
}


/* Custom extenders for the Awards Management */
.cont-scroll-tree {
    max-height: 200px;
}

.cont-scroll-med {
    max-height: 300px;
}

.cont-scroll {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #4d6681 #e1eaf1;
    scrollbar-gutter: stable;
}



/* ----------------------------------------------------------------------------------------------------------------------  */
/* Media Queries - MUST ALWAYS BE THE LAST BLOCK OF CSS - Always work with biggest screen to smallest.  */
/* ----------------------------------------------------------------------------------------------------------------------  */
/* 1200px*/
@media only screen and (max-width:1200px) {

    /* Menu icon / menu row */
    #nav {
        top: 0;
        padding: 0;
        width: 100%;
        text-align: right;
    }

        #nav > a {
            color: #888;
        }

            #nav > a:hover {
                text-decoration: none;
                color: #222;
            }

        #nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {
            display: inline-block;
        }

        #nav > ul {
            display: none;
            position: absolute;
            top: calc(100% + 15px);
            border: 0;
            width: 100%;
            height: auto;
            max-height: 90vh;
            overflow-y: auto;
        }

        #nav .menuicon {
            font-size: 60px;
            margin: 3px 30px 3px 0;
            line-height: 48px;
        }

        #nav .menutext {
            display: none;
        }

        /* First level */
        #nav:target > ul {
            display: block;
        }

        #nav > ul > li {
            display: block;
            border-bottom: 1px solid #ddd;
        }

            #nav > ul > li:first-child {
                border-top: 1px solid #ddd;
            }

            #nav > ul > li > a {
                padding: 10px 15px;
                font-size: 16px;
            }

            #nav > ul > li.NavParent > a:after {
                content: "\25BC";
                font-size: 14px;
                color: #888;
                position: absolute;
                top: 8px;
                right: 10px;
            }
            /*  ? = &#9660; = \25BC  || For special chars, convert entity code to CSS hex here: http://www.evotech.net/articles/testjsentities.html */

            /* Second level */
            #nav > ul > li > ul {
                width: 100%;
                position: static;
            }

            #nav > ul > li:hover > ul {
                padding: 5px 0 15px 0;
                border: none;
                border-top: 1px solid #efefef;
            }

            #nav > ul > li > ul > li > a {
                padding: 8px 20px;
                font-size: 14px;
            }

            #nav > ul > li > ul > li.NavParent > a:after {
                content: "\25BC";
                font-size: 12px;
                color: #555;
                position: absolute;
                top: 8px;
                right: 20px;
            }
            /*  ? = &#9660; = \25BC  || For special chars, convert entity code to CSS hex here: http://www.evotech.net/articles/testjsentities.html */

            /* Third level */
            #nav > ul > li > ul > li > ul {
                width: 100%;
                position: static;
            }

            #nav > ul > li > ul > li:hover > ul {
                padding: 5px 0 15px 0;
                border: none;
                border-top: 1px solid #efefef;
                max-height: 800px;
            }

            #nav > ul > li > ul > li > ul > li > a {
                padding: 8px 25px;
                font-size: 12px;
            }
}

/* 1000px*/
@media only screen and (max-width:1000px) {
    /* Use most of the width of the screen */
    .ShellLogoMenuHome .SectionWrapper {
        width: 100%;
    }

    /* Panel grid */
    .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColPartners > article, .PanelItemGrid4ColImages > article {
        width: 31%;
        margin: 0 1% 14px 1%;
    }

    /*#nav {padding-left:20%;}*/

    /* Logo / header rows. Smaller for smaller screen + smaller on scroll */
    .ShellLogoMenuHome, .ShellLogoMenu {
        height: 45px;
    }

    .LogoMain {
        height: 45px;
    }

    .SignUpLink {
        padding: 3px 15px;
        font-size: 14px;
        top: 10px;
        right: 3%;
    }

    #nav > ul > li > a {
        padding: 15px 20px;
    }

    #nav > ul > li.NavParent > a:after {
        top: 17px;
    }

    header.HdrSmaller {
        height: 35px;
    }

    .HdrSmaller .LogoMain {
        height: 30px;
    }

    .HdrSmaller .SignUpLink {
        padding: 2px 18px;
        font-size: 12px;
    }

    .HdrSmaller #nav > ul > li > a {
        padding: 7px 20px;
    }

    .HdrSmaller #nav > ul > li.NavParent > a:after {
        top: 8px;
    }
}

/* 870px*/
@media only screen and ( max-width:870px) {
    .SignUpLink {
        right: 30%;
    }

    .HdrSmaller #nav {
        top: 5px;
    }

        .HdrSmaller #nav > ul {
            top: calc(100% + 5px);
        }

    .menuicon {
        font-size: 40px !important;
        margin: 0 30px 3px 0;
        line-height: 34px !important;
    }

    .FormSetHor > div > div:nth-of-type(1), .FormSetHor > section > div > div:nth-of-type(1), .FormSetFilter > div > div:nth-of-type(1) {
        width: 100%;
        display: block;
        padding: 0 0 3px 0;
    }

    .FormSetHor > div > div:nth-of-type(2), .FormSetHor > section > div > div:nth-of-type(2), .FormSetFilter > div > div:nth-of-type(2) {
        width: 100%;
        display: block;
        padding: 0 0 5px 0;
    }

    .ShellUserDetail {
        min-height: 40px;
    }

    .Biline {
        display: none;
    }

    .cBasket {
        margin: 5px 50px 0 0;
    }
}

/* 768px */
@media only screen and (max-width:768px) {
    .PanelItemGrid3Col > article, .PanelItemGrid3ColNarrow > article, .PanelItemGrid3ColDownloads > article, .PanelItemGrid3ColAssociates > article, .PanelItemGrid3ColVideo > article, .PanelItemGrid4ColPartners > article, .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article {
        width: 48%;
        margin: 0 1% 14px 1%;
    }

    .FloatRightImage {
        float: none !important;
        margin: 30px 0 !important;
    }

    .FloatLeftImage {
        float: none !important;
        margin: 30px 0 !important;
    }

    .CaptionRight {
        width: 100%;
        float: none;
        margin: 20px auto;
    }

    .OuterShadowBox {
        width: 98%;
    }

    .FooterNavText {
        text-align: center;
        font-size: 18px !important;
        line-height: 26px !important;
        border-bottom: 1px solid #666;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .ShellFooter hr {
        border-top-width: 2px;
        border-top-style: solid;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        border-top-color: #ccc;
        margin-right: 0px;
        margin-left: 0px;
    }

    .HeroPanel {
        width: 70% !important;
        margin: 50px auto;
        float: none !important;
    }

    .span_1_of_4Footer {
        width: 100%;
    }

    .SearchPanelCol1 {
        float: left;
        width: auto;
    }

    .SearchFilterLink {
        float: left;
    }

    .BranchGridBox {
        width: 96%;
        margin-right: auto;
        margin-left: auto;
    }
}

/* 720px*/
@media only screen and (max-width:720px) {
    .FormWidthLong {
        width: 100px;
    }

    /* Add to Calendar component */
    .event-calendar-link > div:nth-of-type(1) {
        padding: 0 0 5px 0;
    }

        .event-calendar-link > div:nth-of-type(1) > div:nth-of-type(1) {
            width: 40px;
        }

            .event-calendar-link > div:nth-of-type(1) > div:nth-of-type(1) > span {
                font-size: 18px;
            }

        .event-calendar-link > div:nth-of-type(1) > div:nth-of-type(2) {
            font-size: 0.9em;
        }

    .event-calendar-link > div:nth-of-type(2) {
        height: 50px;
    }
}

/* 640px */
@media only screen and (max-width:640px) {
    .PanelItemGrid > article > a > div {
        height: auto;
    }

    .PanelItemGrid3Col > article, .PanelItemGrid3ColNarrow > article, .PanelItemGrid3ColVideo > article, .PanelItemGrid3ColDownloads > article, .PanelItemGrid3ColAssociates > article, .PanelItemGrid4Col > article, .PanelItemGrid4ColProds > article, .PanelItemGrid4ColImages > article {
        width: 98%;
        float: none;
        margin: 0 auto 10px auto;
    }

        .PanelItemGrid4ColProds > article > a > div {
            padding-bottom: 60px;
        }
        /* Give white space for the layered, bottom positioned 'Buy Now' button, now the height changes to auto. */
        .PanelItemGrid4ColImages > article .ImgInfo {
            top: 100%;
        }

    /* Control images when they have more space to display */
    .responsive-image img {
        height: auto !important;
        max-width: 80% !important;
        width: 80% !important;
    }

    /* Navigation */
    .cNavSub {
        display: none;
    }

    .streamSWEETLogo {
        float: none;
        margin: 10px auto !important;
    }

    /* Position the flydown login panel for smaller screens  */
    .PanelLoginCont {
        right: 5vw;
    }

    .GMapResultTable {
        width: 96%;
        margin-left: auto;
        margin-right: auto;
    }

    .GMapResultCol1 {
        display: none;
    }

    .GMapResultCol2 {
        width: 60%;
    }

    .GMapResultCol3 {
        width: 15%;
    }

    .GMapResultCol4 {
        width: 25%;
    }

    .outerMap {
        padding-top: 98%;
    }


    /* Grid Column Handling */
    .col {
        margin: 1% 0 1% 0%;
    }

    .span_2_of_2 {
        width: 100%;
    }

    .span_1_of_2 {
        width: 100%;
    }

    .span_3_of_3 {
        width: 100%;
    }

    .span_2_of_3 {
        width: 100%;
    }

    .span_1_of_3 {
        width: 100%;
    }

    .span_4_of_4 {
        width: 100%;
    }

    .span_3_of_4 {
        width: 100%;
    }

    .span_2_of_4 {
        width: 100%;
    }

    .span_1_of_4 {
        width: 100%;
    }

    .span_5_of_5 {
        width: 100%;
    }

    .span_4_of_5 {
        width: 100%;
    }

    .span_3_of_5 {
        width: 100%;
    }

    .span_2_of_5 {
        width: 100%;
    }

    .span_1_of_5 {
        width: 100%;
    }

    .span_6_of_6 {
        width: 100%;
    }

    .span_5_of_6 {
        width: 100%;
    }

    .span_4_of_6 {
        width: 100%;
    }

    .span_3_of_6 {
        width: 100%;
    }

    .span_2_of_6 {
        width: 100%;
    }

    .span_1_of_6 {
        width: 100%;
    }

    .span_7_of_7 {
        width: 100%;
    }

    .span_6_of_7 {
        width: 100%;
    }

    .span_5_of_7 {
        width: 100%;
    }

    .span_4_of_7 {
        width: 100%;
    }

    .span_3_of_7 {
        width: 100%;
    }

    .span_2_of_7 {
        width: 100%;
    }

    .span_1_of_7 {
        width: 100%;
    }

    .span_8_of_8 {
        width: 100%;
    }

    .span_7_of_8 {
        width: 100%;
    }

    .span_6_of_8 {
        width: 100%;
    }

    .span_5_of_8 {
        width: 100%;
    }

    .span_4_of_8 {
        width: 100%;
    }

    .span_3_of_8 {
        width: 100%;
    }

    .span_2_of_8 {
        width: 100%;
    }

    .span_1_of_8 {
        width: 100%;
    }

    .span_9_of_9 {
        width: 100%;
    }

    .span_8_of_9 {
        width: 100%;
    }

    .span_7_of_9 {
        width: 100%;
    }

    .span_6_of_9 {
        width: 100%;
    }

    .span_5_of_9 {
        width: 100%;
    }

    .span_4_of_9 {
        width: 100%;
    }

    .span_3_of_9 {
        width: 100%;
    }

    .span_2_of_9 {
        width: 100%;
    }

    .span_1_of_9 {
        width: 100%;
    }

    .span_10_of_10 {
        width: 100%;
    }

    .span_9_of_10 {
        width: 100%;
    }

    .span_8_of_10 {
        width: 100%;
    }

    .span_7_of_10 {
        width: 100%;
    }

    .span_6_of_10 {
        width: 100%;
    }

    .span_5_of_10 {
        width: 100%;
    }

    .span_4_of_10 {
        width: 100%;
    }

    .span_3_of_10 {
        width: 100%;
    }

    .span_2_of_10 {
        width: 100%;
    }

    .span_1_of_10 {
        width: 100%;
    }

    .span_11_of_11 {
        width: 100%;
    }

    .span_10_of_11 {
        width: 100%;
    }

    .span_9_of_11 {
        width: 100%;
    }

    .span_8_of_11 {
        width: 100%;
    }

    .span_7_of_11 {
        width: 100%;
    }

    .span_6_of_11 {
        width: 100%;
    }

    .span_5_of_11 {
        width: 100%;
    }

    .span_4_of_11 {
        width: 100%;
    }

    .span_3_of_11 {
        width: 100%;
    }

    .span_2_of_11 {
        width: 100%;
    }

    .span_1_of_11 {
        width: 100%;
    }

    .span_12_of_12 {
        width: 100%;
    }

    .span_11_of_12 {
        width: 100%;
    }

    .span_10_of_12 {
        width: 100%;
    }

    .span_9_of_12 {
        width: 100%;
    }

    .span_8_of_12 {
        width: 100%;
    }

    .span_7_of_12 {
        width: 100%;
    }

    .span_6_of_12 {
        width: 100%;
    }

    .span_5_of_12 {
        width: 100%;
    }

    .span_4_of_12 {
        width: 100%;
    }

    .span_3_of_12 {
        width: 100%;
    }

    .span_2_of_12 {
        width: 100%;
    }

    .span_1_of_12 {
        width: 100%;
    }

    .ForumAvatar {
        width: 128px;
        height: 128px;
        margin: 10px auto;
    }
}

/* 480px */
@media only screen and (max-width:480px) {
}

/* TELERIK RAD WINDOW Transparency overrides */
div.RadWindow.RadWindow_Stream .rwCorner,
div.RadWindow.RadWindow_Stream .rwTitlebar,
div.RadWindow.RadWindow_Stream .rwStatusbarRow,
div.RadWindow.RadWindow_Stream .rwFooterCenter 
{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:100; -moz-opacity:100; display:none; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}

div.RadWindow.RadWindow_Stream .rwTitlebar .rwIcon	{display:none;}

div.RadWindow.RadWindow_Stream .rwWindowContent div	{width:100%;}

div.RadWindow.RadWindow_Stream .rwWindowContent .CloseButton	{margin-right:5px;}
div.RadWindow.RadWindow_Stream	{background-color:#ced7e5; border-width:3px; border-style:solid; border-color:#5176B5; padding:3px;}

/* RadEditor Overrides */
.RadEditor	{height:100%;}

/* RadToolTip Overrides */
div.RadToolTip_ImagePopup .rtWrapperTopLeft,
div.RadToolTip_ImagePopup .rtWrapperTopCenter,
div.RadToolTip_ImagePopup .rtWrapperTopRight,
div.RadToolTip_ImagePopup .rtWrapperLeftMiddle,
div.RadToolTip_ImagePopup .rtWrapperRightMiddle,
div.RadToolTip_ImagePopup .rtWrapperBottomLeft,
div.RadToolTip_ImagePopup .rtWrapperBottomCenter,
div.RadToolTip_ImagePopup .rtWrapperBottomRight
{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); opacity:100; -moz-opacity:100; display:none; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;}