/* ==========================================================================================================
   Treelogix style sheet 
   Updated to 27 June 2014
   Copyright (c) 2014 Treelogix Consulting http://www.treelogix.ca
   ========================================================================================================== 
   Table of Contents

   1.0  Base Type Styles
   2.0  Background colors
   3.0  Links
   4.0  Article Wrappers, Dated Posts
   5.0  Lists
        5.1 Unordered Lists
        5.2 Ordered Lists
        5.3 Definition Lists
        5.4 navlists
        5.5 Image Widget Small - for blocks of thumbnails 45x45
        5.6 Image Widget flickr - for thumbnails 100x100
        5.7 Image Widget Medium
   6.0  Panels
        6.1 Primary Panel (override of Bootstrap)
        6.2 Cream Panel
        6.3 Pearl Panel (override of Bootstrap) adapted from Arcsin Templates by Victor Persson
        6.4 Blue Panel
        6.5 Burgundy Panel
        6.55 Black Panel
        6.6 light panels
        6.7 dark panels
        6.8 charcoal bordered panel
        6.9 Tabs in panels
   7.0 Wells
   8.0 Buttons (gray and navy)
   9.0 Tables
   10.0 Pager - Troy goode
   12.0 Notification Messages - fade out after n seconds 
   13.0 Posts - format date in blog posts  
   14.0 Forms Input and Validation
       14.1  Form colours
       14.2  Form action buttons
       14.3  Validation and Error Messages
       14.4  Select styling and input focus color
  15.0 Components - overriding bootstrap
       15.1 Navbars 
       15.2 Accordions
       15.3 Tabs
  ===================================================================================================== */


/* 1.0 Base Type Styles - Using Modular Scale
   ---------------------------------------------------------------------------------------- */

/* Import the headings font from google */
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700");

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
    margin: 0;
    padding: 0;
    font-size: 15px;
    direction: ltr;
    font-family: "Segoe UI", "Helvetica Neue", "Helvetica", Helvitica, Arial, sans-serif;
}

*[class^="gap-"] {
    line-height: 1px;
    font-size: 1px;
    overflow: hidden;
    clear: both;
}

.gap-5 {
    height: 5px;
}

.gap-10 {
    height: 10px;
}

.gap-15 {
    height: 15px;
}

.gap-20 {
    height: 20px;
}

.gap-25 {
    height: 25px;
}

.gap-30 {
    height: 30px;
}

.gap-40 {
    height: 40px;
}

.gap-50 {
    height: 50px;
}

.gap-60 {
    height: 60px;
}

p {
    font-family: inherit;
    font-weight: normal;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

    p.lead {
        font-size: 17.5px;
        line-height: 1.6;
        margin-bottom: 17px;
    }

aside p {
    font-size: 13px;
    line-height: 1.35;
    font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open+Sans', "Segoe UI", "Helvetica Neue", "Helvetica", Arial, sans-serif;
    color: #222222;
    text-rendering: optimizeLegibility;
}

    h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
        font-size: 80%;
        color: #6f6f6f;
        line-height: 0;
    }

h1 {
    font-size: 44px;
}

h2 {
    font-size: 37px;
}

h3 {
    font-size: 27px;
}

h4 {
    font-size: 23px;
}

h5 {
    font-size: 17px;
}

h6 {
    font-size: 14px;
}

.subheader {
    line-height: 1.3;
    color: #6f6f6f;
    font-weight: 300;
    margin-bottom: 17px;
}

em {
    font-style: italic;
    line-height: inherit;
}

strong, b {
    font-weight: bold;
    line-height: inherit;
}

small {
    font-size: 80%;
    line-height: inherit;
}

code {
    font-weight: bold;
    background: #ffff99;
}


/* 2.0 Background Colors
   good for tables, panels, rows and columns 
   --------------------------------------------------------------------------*/
.seashell {
    background-color: #cdc5bf !important; /* seashell 3; */
}

.jetten-blue {
    color: white;
    background-color: #124b7e; /* Jetten Blue */
}

.light-yellow {
    background-color: #ffffe0; /* light yellow */
}

.greyback, .grayback {
    background-color: #efeeef; /* med grey */
}

.lightpanelback {
    background: #eee9e9 !important; /* same colour as light-panel */
}

.whiteback {
    background-color: #ffffff !important; /* white */
}

.blackback {
    background-color: #000000 !important; /* black */
}

.blueback {
    background-color: #6495ed !important; /* cornflower blue */
}

.greenback {
    background-color: #bdfcc9 !important; /* mint */
}

.yellowback {
    background-color: #fafad2 !important; /* light goldenrod */
}

.smokeback {
    background-color: whitesmoke !important;
}

/* borders */
.solid {
    border: 1px solid #c9c9c9;
}

.dashed {
    border: 1px dashed #c9c9c9;
}

.dotted {
    border: dotted 1px #c0c0c0;
}


/* 3.0 Links
   -------------------------------------------------------------------------- */
a img {
    border: none;
}

a {
    color: #2ba6cb;
    text-decoration: none;
    line-height: inherit;
}

    a:hover {
        color: #2795b6;
    }

    a:focus {
        color: #2ba6cb;
        outline: none;
    }

p a, p a:visited {
    line-height: inherit;
}


/* 4.0 Image wrappers and Captions
----------------------------------------------------------------------------------------  */

.gutter {
    padding: 10px;
}

.no-gutter {
    padding: 0;
}

figcaption {
    color: #000000;
    font-variant: small-caps;
    font-size: 16px;
}

/* apply border directly to an image; avoids stretching of border ( from adminique) */
img.photoborder {
    padding: 5px;
    border: 1px solid #c0c0c0; /* silver */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #ececec; /* light grey */
}

    img.photoborder.mar-left {
        margin-left: 8px;
    }

    img.photoborder.mar-right {
        margin-right: 8px;
    }

.thumbnails {
    margin: 0 0 0 -8px;
}

    .thumbnails a.thumb, .thumb {
        background: #ececec;
        margin: 8px;
        padding: 3px;
    }

        .thumbnails a.thumb:hover, .thumbnails > .thumb:hover {
            background: #C6C6BA;
        }


/* block quotes */
blockquote {
    clear: both;
    margin: 0 0 20px 0;
    padding: 10px 20px 0 50px;
    position: relative;
    quotes: none;
    border: 0px;
    font-style: italic;
    font-size: 110%;
    line-height: 175%;
}

    blockquote:before {
        font-family: "FontAwesome";
        content: "\f10d";
        position: absolute;
        font-size: 100px;
        line-height: 100px;
        top: 50%;
        margin-top: -48px;
        left: 0;
        font-style: normal;
        opacity: 0.5;
    }

    blockquote p {
        font-size: 100%;
        line-height: 175%;
        margin: 0;
    }

        blockquote p:last-child {
            margin-bottom: 0px;
        }

    blockquote footer {
        clear: both;
        display: block;
        text-align: right;
        font-size: 80%;
    }

        blockquote footer:before {
            content: "\2014 \0020";
        }

.dropcap {
    display: block;
    color: #000;
    float: left;
    font-size: 45px;
    line-height: 45px;
    padding: 0;
    margin: -2px 5px 0 0;
    text-transform: uppercase;
    font-style: normal;
}

/* 5.0 Lists 
   --------------------------------------------------------------------------- */
ul, ol, dl {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 17px;
    list-style-position: inside;
}

    ul li ul, ul li ol {
        margin-left: 20px;
        margin-bottom: 0;
    }

    /* 5.1 Unordered Lists */

    ul.square, ul.circle, ul.disc {
        margin-left: 17px;
    }

    ul.square {
        list-style-type: square;
    }

        ul.square li ul {
            list-style: inherit;
        }

    ul.circle {
        list-style-type: circle;
    }

        ul.circle li ul {
            list-style: inherit;
        }

    ul.disc {
        list-style-type: disc;
    }

        ul.disc li ul {
            list-style: inherit;
        }

    ul.no-bullet {
        list-style: none;
    }

    ul.large li {
        line-height: 21px;
    }


/* 5.2 Ordered lists */

ol {
    font-size: 14px;
    line-height: 1.6;
    margin-left: 20px;
    list-style: decimal;
}

    ol li ul, ol li ol {
        margin-left: 20px;
        margin-bottom: 0;
    }

    ol.round {
        list-style-type: none;
        padding-left: 0;
    }

        ol.round li {
            margin: 25px 0;
            padding-left: 45px;
        }

            ol.round li.one {
                background: url("http://www.funinthesunclothing.ca/Images/Icons/orderedList1.png") no-repeat;
                display: block;
                width: 100%;
            }

            ol.round li.two {
                background: url("http://www.funinthesunclothing.ca/Images/Icons/orderedList2.png") no-repeat;
                display: block;
                width: 100%;
            }

            ol.round li.three {
                background: url("http://www.funinthesunclothing.ca/Images/Icons/orderedList3.png") no-repeat;
                display: block;
                width: 100%;
            }

            ol.round li.four {
                background: url("http://www.funinthesunclothing.ca/Images/Icons/orderedList4.png") no-repeat;
                display: block;
                width: 100%;
            }

            ol.round li.five {
                background: url("http://www.funinthesunclothing.ca/Images/Icons/orderedList5.png") no-repeat;
                display: block;
                width: 100%;
            }

            ol.round li.five {
                background: url("http://www.funinthesunclothing.ca/Images/Icons/orderedList5.png") no-repeat;
                display: block;
                width: 100%;
            }

            ol.round li.six {
                background: url("http://www.funinthesunclothing.ca/Images/Icons/orderedList6.png") no-repeat;
                display: block;
                width: 100%;
            }

            ol.round li.seven {
                background: url("http://www.funinthesunclothing.ca/Images/Icons/orderedList7.png") no-repeat;
                display: block;
                width: 100%;
            }

            ol.round li.eight {
                background: url("http://www.funinthesunclothing.ca/Images/Icons/orderedList8.png") no-repeat;
                display: block;
                width: 100%;
            }

            ol.round li.nine {
                background: url("http://www.funinthesunclothing.ca/Images/Icons/orderedList9.png") no-repeat;
                display: block;
                width: 100%;
            }

/* 5.3 Definition lists */

.brief dt {
    font-weight: 600;
    float: left;
    clear: left;
    display: block;
    width: 25%;
}

.brief dd {
    margin-bottom: 8px;
}

/* expanded definition lists */
.expanded dl {
    margin-bottom: 2em;
}

.expanded dt, .expanded dd {
    padding: 8px 10px;
}

.expanded dt {
    background: #eeeeee;
    border-bottom: 1px solid #CCB;
    color: #555;
    font-weight: bold;
}

.expanded dd {
    background: #f5f5f5; /* white smoke */
    border-bottom: 1px solid #DDC;
    padding-left: 20px;
}

/* 5.4 arrange links in a horizontal list - pulled right */
.navlist ul {
    margin-right: 10px;
}

.navlist li {
    float: right;
    display: inline;
    color: #ffffff;
    list-style-type: none;
    padding-right: 10px;
    margin-bottom: 10px;
}

/* 5.5  sidebar image widget-sm 45x45 */

.image-widget-sm {
    position: relative;
    left: -5px;
    margin: 0;
    padding: 0;
}

    .image-widget-sm li {
        float: left;
        margin: 0 5px 10px 5px;
        list-style: none;
        width: 45px;
        height: 45px;
    }

    .image-widget-sm a {
        position: relative;
        float: left;
    }

/* 5.6  sidebar image widget-flickr 100x100 */
.image-widget-flickr {
    position: relative;
    left: -5px;
    margin: 0;
    padding: 0;
}

    .image-widget-flickr li {
        float: left;
        margin: 0 5px 10px 5px;
        list-style: none;
        width: 100px;
        height: 100px;
    }

    .image-widget-flickr a {
        position: relative;
        float: left;
    }

/* 5.7 gallery image-widget-md 200x180 */
.image-widget-md {
    position: relative;
    left: -5px;
    margin: 0;
    padding: 0;
}

    .image-widget-md li {
        float: left;
        margin: 0 5px 10px 5px;
        width: 200px;
        height: 180px; /* an extra 30px for the name and description */
        list-style: none;
    }

        .image-widget-md li img {
            max-width: 200px;
        }

        .image-widget-md li a, .image-widget-md li h5 {
            color: #222222 !important;
            position: relative;
            float: left;
        }


/* 6.0 Panels 
   --------------------------------------------------------------------------------------------------------*/

/* modifies the bootstrap panel */
.panel {
    min-height: 30px;
    background-color: #f5f5f5; /* white smoke */
    border-radius: 5px;
}

    .panel .panel-heading {
        border-bottom: 1px solid #cccccc;
    }

/* for filtering dropdowns in panel headings */
.filter-form ul {
    display: inline;
    overflow: hidden; /* to autosize height based on contents*/
}

.filter-form li {
    margin-top: -2px;
    float: left; /* make sure that all li elements do not have a combined width > the ul containing them*/
}

/* 6.1 primary panel (override of Bootstrap) */
.panel-primary {
    background-color: #ffffff; /* white */
    border-color: #c4c4c4;
}

    .panel-primary > .panel-heading {
        color: #222222;
        font-size: 22px;
        font-weight: 500;
        background-image: url("../Images/Treelogix/content-header_bg.png");
        height: 38px; /* changed from 34px  5 jan 2014*/
        padding: 0 10px;
        border: 1px solid #efefef;
        border-bottom: 1px solid #c4c4c4;
    }

        .panel-primary > .panel-heading + .panel-collapse .panel-body {
            border-top-color: #428bca;
        }

    .panel-primary > .panel-footer + .panel-collapse .panel-body {
        border-bottom-color: #428bca;
    }

/* 6.2 cream panel (override of Bootstrap) */
.panel-cream {
    background-color: #f6f1df; /* light pumpkin */
    border-color: #c4c4c4;
}

    .panel-cream > .panel-heading {
        background-color: #f6f1df; /* light pumpkin */
        background-image: -moz-linear-gradient(top, #f6f1df, #eedc82);
        background-image: -ms-linear-gradient(top, #f6f1df, #eedc82);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f6f1df), to(#eedc82));
        background-image: -webkit-linear-gradient(top, #f6f1df, #eedc82);
        background-image: -o-linear-gradient(top, #f6f1df, #eedc82);
        background-image: linear-gradient(top, #f6f1df, #ededed);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f1df', endColorstr='#eedc82', GradientType=0);
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        color: #222222;
        font-size: 23px;
        height: 38px;
        padding: 0 10px;
        border: 1px solid transparent;
    }

        .panel-cream > .panel-heading + .panel-collapse .panel-body {
            border-top-color: #428bca;
        }

    .panel-cream > .panel-footer + .panel-collapse .panel-body {
        border-bottom-color: #428bca;
    }

/* 6.3 pearl panel (override of Bootstrap) */
.panel-pearl {
    background-color: #ffffff; /* white */
}

    .panel-pearl > .panel-heading {
        background-color: #f8f8f8; /* very pale grey */
        background-image: -moz-linear-gradient(top, #ffffff, #ededed);
        background-image: -ms-linear-gradient(top, #ffffff, #ededed);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ededed));
        background-image: -webkit-linear-gradient(top, #ffffff, #ededed);
        background-image: -o-linear-gradient(top, #ffffff, #ededed);
        background-image: linear-gradient(top, #ffffff, #ededed);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        color: #222222;
        font-size: 23px;
        height: 38px;
        padding: 0 10px;
        border: 1px solid transparent;
    }

        .panel-pearl > .panel-heading + .panel-collapse .panel-body {
            border-top-color: #428bca;
        }

    .panel-pearl > .panel-body {
        border: 1px solid #eaeaea;
        border-top: none;
    }

    .panel-pearl > .panel-footer + .panel-collapse .panel-body {
        border-bottom-color: #428bca;
    }

/* 6.4 blue panel (override of Bootstrap) */
.panel-blue {
    color: #ffffff;
    background-color: #6495ed !important; /* cornflower blue */
    border: 1px solid #000080; /* navy */
}

    .panel-blue > .panel-heading {
        color: #ffffff;
        font-size: 37px;
        font-weight: 500;
        padding: 0 10px;
    }

    .panel-blue .panel-body label {
        color: #ffffff; /* form labels inside the panel body */
    }

    .panel-blue > .panel-heading + .panel-collapse .panel-body {
        border-top-color: #428bca;
    }

    .panel-blue > .panel-footer + .panel-collapse .panel-body {
        border-bottom-color: #428bca;
    }

/* 6.5 Burgundy panel (override of Bootstrap) */
.panel-burgundy {
    color: #000000;
    background-color: #efdfbf !important;
    border: 1px solid #c4c4c4;
}

    .panel-burgundy > .panel-heading {
        background-color: #990022;
        border-color: #78001b;
        background-image: -webkit-gradient(linear, left 0%, left 100%, from(#cc002d), to(#990022));
        background-image: -webkit-linear-gradient(top, #cc002d, 0%, #990022, 100%);
        background-image: -moz-linear-gradient(top, #cc002d 0%, #990022 100%);
        background-image: linear-gradient(to bottom, #cc002d 0%, #990022 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcc002d', endColorstr='#ff990022', GradientType=0);
        color: #f1f1de;
        font-size: 23px; /* h4 */
        font-weight: 500;
        padding: 0 10px;
    }

    .panel-burgundy .panel-body label {
        color: #ffffff; /* form labels inside the panel body */
    }

    .panel-burgundy > .panel-heading + .panel-collapse .panel-body {
        border-top-color: #428bca;
    }

    .panel-burgundy > .panel-footer + .panel-collapse .panel-body {
        border-bottom-color: #428bca;
    }

    .panel-burgundy .panel-body ul {
        margin-left: 15px;
        padding: 0 0 0 14px;
        list-style-image: url("http://www.funinthesunclothing.ca/Images/McWines/star.gif");
    }

    .panel-burgundy .panel-body li, .panel-burgundy .panel-body li a {
        padding: 2px 0px 2px 14px;
        font-size: 110%;
        color: #228b22; /* leaf green */
    }

/* 6.55 black panel (override of Bootstrap) */
.panel-black {
    color: #000000;
    background-color: #fffffe !important;
    border: 1px solid #c4c4c4;
}

    .panel-black > .panel-heading {
        background-color: #000000;
        border: 1px solid #c4c4c4;
        color: #ffffff;
        font-size: 23px; /* h4 */
        font-weight: 500;
        padding: 0 10px;
    }

    .panel-black .panel-body {
        background: url("http://www.funinthesunclothing.ca/Images/treelogix/content-bg.png") scroll transparent repeat-y; /* 960x20 */
    }

        .panel-black .panel-body ul {
            margin-left: 15px;
            padding: 0 0 0 14px;
            list-style-type: none;
        }

        .panel-black .panel-body li, .panel-black .panel-body li a {
            padding: 2px 0px 2px 14px;
            color: #000000; /* black */
        }

        .panel-black .panel-body label {
            color: #ffffff; /* form labels inside the panel body */
        }

    .panel-black .panel-footer {
        background-color: #000000;
        color: #ffffff;
    }

    .panel-black > .panel-heading + .panel-collapse .panel-body {
        border-top-color: #428bca;
    }

    .panel-black > .panel-footer + .panel-collapse .panel-body {
        border-bottom-color: #428bca;
    }


/* 6.6 light bordered panel */
.panel.panel-light {
    padding: 15px;
    background-color: #eee9e9;
    background-image: -o-linear-gradient(top, #eee9e9 0%, #F6F6F6 60%);
    background-image: -ms-linear-gradient(top, #eee9e9 0%, #F6F6F6 60%);
    background-image: -moz-linear-gradient(top, #eee9e9 0%, #F6F6F6 60%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eee9e9), color-stop(0.5, #F6F6F6));
    background-image: -webkit-linear-gradient(top, #eee9e9 0%, #F6F6F6 60%);
    background-image: linear-gradient(top, #eee9e9 0%, #F6F6F6 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#eee9e9, endColorstr=#F6F6F6);
    margin: 0 0 20px 0;
    border: 1px solid #c4c4c4;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.panel-light > .panel-heading {
    color: #222222;
    font-size: 20px;
    font-weight: 500;
    padding: 0 10px;
    border: 1px solid #cccccc;
    border-bottom: 1px solid #c4c4c4;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-light > .panel-body {
    border: 1px solid #cccccc;
}

/* 6.7 dark bordered panel */
.panel.panel-dark {
    padding: 15px;
    background-color: #e8e8e8;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e8e8e8), color-stop(0.5, #F6F6F6));
    background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #F6F6F6 60%);
    background-image: linear-gradient(top, #e8e8e8 0%, #F6F6F6 60%);
    margin: 0 0 20px 0;
    border: 2px solid #a0a0a0;
    border-radius: 5px;
}

.panel-dark > .panel-heading {
    color: #222222;
    background-color: #F4F4F4;
    font-size: 18px;
    font-weight: 600;
    padding: 10px;
    border: 1px solid #cccccc;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-dark > .panel-body {
    border: 1px solid #a0a0a0;
    border-top-width: 0;
    padding: 10px;
    background-color: #fffff0;
}


/* 6.8 charcoal bordered panel */
.panel.panel-charcoal {
    padding: 10px;
    background-color: #c0c0c0;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c0c0c0), color-stop(0.5, #878787));
    background-image: -webkit-linear-gradient(top, #c0c0c0 0%, #878787 60%);
    background-image: linear-gradient(top, #c0c0c0 0%, #878787 60%);
    margin: 0 0 20px 0;
    border: 2px solid #a0a0a0;
    border-radius: 5px;
}

.panel-charcoal > .panel-heading {
    color: #222222;
    background-color: #F4F4F4;
    font-size: 18px;
    font-weight: 600;
    padding: 10px;
    border: 1px solid #cccccc;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel-charcoal > .panel-body {
    border: 1px solid #a0a0a0;
    border-top-width: 0;
    padding: 15px;
    background-color: #8b8682;
}

/* 6.9 Tabs in a panel */
.panel .panel-heading ul {
    float: right;
    margin-top: 4px;
    margin-right: -3px;
    list-style: none;
}

    .panel .panel-heading ul li {
        display: inline;
    }

.panel-heading ul li a {
    background: url("../Images/Treelogix/tab_bg.png");
    border: 1px solid #a9a9a9; /* dark gray */
    border-left: none;
    color: #696969; /* dim gray (gray 42) */
    display: block;
    float: left;
    font-size: 16px;
    line-height: 24px;
    padding: 0 10px;
    text-decoration: none;
}

.panel-heading ul li:first-child a {
    border-left: 1px solid #a9a9a9; /* dark gray */
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.panel-heading ul li:last-child a {
    border-right: 1px solid #2b2b2b; /* gray 17 */
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.panel-heading ul li a:hover, .panel-heading ul li a:active {
    background: url("http://www.funinthesunclothing.ca/Images/Treelogix/tab-active-bg-blue.png");
    border-top: 1px solid #2b2b2b; /* gray 17 */
    border-bottom: 1px solid #2b2b2b; /* gray 17 */
    color: #ffffff; /* white */
}

.panel-heading ul li:first-child a:active {
    border-left: 1px solid #2b2b2b; /* gray 17 */
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.panel-heading ul li:last-child a:active {
    border-right: 1px solid #2b2b2b; /* gray 17 */
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* 7.0 Wells ---------------------------------------------------------------------*/

.well {
    background-color: #d3d3d3 !important;
    border: groove 2px silver;
}


/* 8.0 Buttons ---------------------------------------------------------------------*/
.btn-blue {
    background-color: hsl(214, 37%, 28%) !important;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7a99c1", endColorstr="#2c4361");
    background-image: -khtml-gradient(linear, left top, left bottom, from(#7a99c1), to(#2c4361));
    background-image: -moz-linear-gradient(top, #7a99c1, #2c4361);
    background-image: -ms-linear-gradient(top, #7a99c1, #2c4361);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7a99c1), color-stop(100%, #2c4361));
    background-image: -webkit-linear-gradient(top, #7a99c1, #2c4361);
    background-image: -o-linear-gradient(top, #7a99c1, #2c4361);
    background-image: linear-gradient(#7a99c1, #2c4361);
    border-color: #2c4361 #2c4361 hsl(214, 37%, 19.5%);
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.56);
    -webkit-font-smoothing: antialiased;
}

.btn-gray {
    background-color: hsl(233, 10%, 63%) !important;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fcfcfc", endColorstr="#9799aa");
    background-image: -khtml-gradient(linear, left top, left bottom, from(#fcfcfc), to(#9799aa));
    background-image: -moz-linear-gradient(top, #fcfcfc, #9799aa);
    background-image: -ms-linear-gradient(top, #fcfcfc, #9799aa);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #9799aa));
    background-image: -webkit-linear-gradient(top, #fcfcfc, #9799aa);
    background-image: -o-linear-gradient(top, #fcfcfc, #9799aa);
    background-image: linear-gradient(#fcfcfc, #9799aa);
    border-color: #9799aa #9799aa hsl(233, 10%, 54%);
    color: #333 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.59);
    -webkit-font-smoothing: antialiased;
}

/* custom btn-group*/
.btn-group.group-dropdown {
    margin: 0px;
    padding: 0px;
    margin-left: -1px;
}

    .btn-group.group-dropdown .dropdown-toggle {
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .btn-group.group-dropdown:first-child {
        margin: 0px;
        padding: 0px;
        margin-right: -1px;
    }

        .btn-group.group-dropdown:first-child .dropdown-toggle {
            -webkit-border-top-left-radius: 4px;
            -moz-border-radius-topleft: 4px;
            border-top-left-radius: 4px;
            -webkit-border-bottom-left-radius: 4px;
            -moz-border-radius-bottomleft: 4px;
            border-bottom-left-radius: 4px;
        }

            .btn-group.group-dropdown:first-child .dropdown-toggle.btn-large {
                -webkit-border-top-left-radius: 6px;
                -moz-border-radius-topleft: 6px;
                border-top-left-radius: 6px;
                -webkit-border-bottom-left-radius: 6px;
                -moz-border-radius-bottomleft: 6px;
                border-bottom-left-radius: 6px;
            }

    .btn-group.group-dropdown:last-child {
        margin: 0px;
        padding: 0px;
        margin-left: -1px;
    }

        .btn-group.group-dropdown:last-child .dropdown-toggle {
            -webkit-border-top-right-radius: 4px;
            -moz-border-radius-topright: 4px;
            border-top-right-radius: 4px;
            -webkit-border-bottom-right-radius: 4px;
            -moz-border-radius-bottomright: 4px;
            border-bottom-right-radius: 4px;
        }

            .btn-group.group-dropdown:last-child .dropdown-toggle.btn-large {
                -webkit-border-top-right-radius: 6px;
                -moz-border-radius-topright: 6px;
                border-top-right-radius: 6px;
                -webkit-border-bottom-right-radius: 6px;
                -moz-border-radius-bottomright: 6px;
                border-bottom-right-radius: 6px;
            }

/* Round Buttons */
.btn.round {
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    font-size: 13px;
}

/* positions and removes background for "image only" buttons such as looking glass */
.btn-image {
    border: none;
    background: none;
    position: absolute;
    right: 30px;
    top: 6px;
}



/* 9.0 Tables
   ----------------------------------------------------------------------*/

.table-bordered {
    border: 1px solid #b7b7b7;
}

/* color alternate rows "white smoke" */
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
    background-color: #f5f5f5; /* white smoke */
}

/* make padding and font size smaller in condensed tables */
.table-condensed th,
.table-condensed td {
    padding: 3px 4px;
    font-family: "Myriad Web",Verdana,Helvetica,Arial,sans-serif;
    font-size: 80%;
}

​
/* 10.0 Pager - by Troy Goode
------------------------------------------------------------------------- */
.pagination {
    display: inline-block;
    padding-left: 10px;
    margin: 20px 0;
    border-radius: 4px;
}

.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    font-size: 12px;
    line-height: 1.4;
    color: #222222; /* Mine Shaft */
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #222222; /* Mine Shaft */
}

    .pagination > li > a:hover,
    .pagination > li > span:hover,
    .pagination > li > a:focus,
    .pagination > li > span:focus {
        color: #2a6496;
        background-color: #eee;
        border-color: #222222; /* Mine Shaft */
        font-size: 12px;
    }

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #124b7e; /* Jetten Blue */
    border-color: #222222; /* Mine shaft */
    font-size: 12px;
}


/* 12.0  Notification Messages and Alerts
--------------------------------------------------------------------------*/

.notification {
    margin-bottom: 20px;
    padding: 10px 60px;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

div.notification:hover {
    cursor: pointer;
}

.success {
    background: url("../Images/Notifications/success.png") 1% 50% no-repeat #cbffd1;
    border: 1px solid #63d872;
    color: #2f7038; /* green */
}

.information {
    background: url("../Images/Notifications/info.png") 1% 50% no-repeat #c7e8f4;
    border: 1px solid #a3d5e7;
    color: ##466773; /* aqua-blue */
}

.warning {
    background: url("../Images/Notifications/warning.png") 1% 50% no-repeat #fff9c2;
    border: 1px solid #d5cd84;
    color: #8c560c; /* brown */
}

.error,
.danger {
    background: url("../Images/Notifications/error.png") 1% 50% no-repeat #f8c9c9;
    border: 1px solid #ee9b9b;
    color: ##864d4d; /* rusty brown */
}

form span.notification {
    background-color: transparent;
    border: none;
    padding: 5px 10px 5px 30px;
}

/* 13.0 Posts: used in Articles such as Calendar Events and News Event pages
-----------------------------------------------------------------------------*/

.post {
    vertical-align: top;
}

    .post ul {
        list-style: none;
    }

    .post .date {
        float: left;
        top: 0;
        left: 5px;
        width: 2.3em;
        text-align: right;
    }

        .post .date .month {
            text-transform: uppercase;
            font-weight: 700;
            color: #888888;
        }

        .post .date .day {
            display: block;
            margin-top: -5px;
            font-size: 15px;
            color: #888888;
        }

    .post .title {
        display: block;
        margin-left: 47px;
        padding: 0px 0px 5px 12px;
        border-left: 1px solid #273D4B;
        font-size: 18px;
        font-weight: normal;
        color: #586B7A;
    }

    .post .post-content {
        font: 15px/22px "Palatino Linotype", Georgia, "Lucida Bright" Serif;
        color: #282828;
        margin: 0 0 0 47px;
        padding: 0 0 8px 10px;
        border-left: 1px solid #273D4B;
    }




/* 14.0 Forms Input and Validation
--------------------------------------------------------------------------------------------------- */

/* 14.1 input colours */
label, .control-label {
    color: #000080; /* Navy */
}

input {
    color: #000000;
}


/* 14.2 surround style for bottom-of-form action buttons */

.actions {
    background-color: #f5f5f5; /* white smoke */
    padding: 17px 20px 18px 10px;
    margin: 10px 0 10px 0;
    border: 1px solid #cccccc;
    border-radius: 0 0 4px 4px;
}

/* 14.3 Validation and error messages    */
.field-validation-error {
    display: block;
    color: #ff0000; /* Red */
    margin-bottom: 10px;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000; /* Red */
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000; /* red */
}

/* 14.3 Input error and status messages */
.message {
    font-size: 15px;
    margin: 10px 0;
    padding: 10px 20px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.1);
    zoom: 1;
}

    .message.info {
        border: 1px solid #cadcea;
        background-color: #cdf;
        background-image: -o-linear-gradient(top, #eef, #cdf);
        background-image: -ms-linear-gradient(top, #eef, #cdf);
        background-image: -moz-linear-gradient(top, #eef, #cdf);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#eef), to(#cdf));
        background-image: -webkit-linear-gradient(top, #eef, #cdf);
        background-image: linear-gradient(top, #eef, #cdf);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEFF', endColorstr='#CCDDFF');
        color: #225b86;
        text-shadow: 0 1px 1px #fff;
    }

/* 14.4 Drop down controls */
select {
    background-color: #FFFFFF;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #cccccc;
    padding: 4px;
    -moz-box-shadow: 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 0 #fff;
    box-shadow: 0 1px 0 #fff;
}

    select option {
        padding: 3px 4px;
    }

    /* outline all inputs in blue when they are given focus */
    .input:focus, select:focus {
        outline: solid 1px #4099FF; /* twitter blue */
    }


/* 15.0 Components
   ---------------------------------------------------------------------------------------------------*/

/* 15.1 Navbars (styling adapted from Sadam Azad, UI Designer & Front-end Developer http://azadcreative.com  */

nav.navbar.navbar-pearl {
    background-color: #f8f8f8 !important; /* very pale grey */
    background-image: -moz-linear-gradient(top, #ffffff, #ededed);
    background-image: -ms-linear-gradient(top, #ffffff, #ededed);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ededed));
    background-image: -webkit-linear-gradient(top, #ffffff, #ededed);
    background-image: -o-linear-gradient(top, #ffffff, #ededed);
    background-image: linear-gradient(top, #ffffff, #ededed);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px !important;
    height: 48px;
    margin: 0 -5px 10px -5px;
    z-index: 5000; /* keep navbar on top of other content */
}

.navbar-pearl .navbar-brand {
    color: #b0171f;
}

    .navbar-pearl .navbar-brand:hover,
    .navbar-pearl .navbar-brand:focus {
        color: #777777;
        background-color: transparent;
    }

.navbar-pearl .navbar-text {
    color: #777777;
}

.navbar-pearl .navbar-nav > li > a {
    color: #777777;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px !important;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
}

    .navbar-pearl .navbar-nav > li > a.current {
        color: #b0171f;
        text-decoration: none;
        background-color: #f4f4f4;
        background-image: -moz-linear-gradient(top, #ededed, #ffffff);
        background-image: -ms-linear-gradient(top, #ededed, #ffffff);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ededed), to(#ffffff));
        background-image: -webkit-linear-gradient(top, #ededed, #ffffff);
        background-image: -o-linear-gradient(top, #ededed, #ffffff);
        background-image: linear-gradient(top, #ededed, #ffffff);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff', GradientType=0);
        -webkit-transition: all 0.1s ease;
        -moz-transition: all 0.1s ease;
        -ms-transition: all 0.1s ease;
        -o-transition: all 0.1s ease;
        transition: all 0.1s ease;
        outline: none;
        height: 48px;
        border-left: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
    }

    .navbar-pearl .navbar-nav > li > a:hover,
    .navbar-pearl .navbar-nav > li > a:focus {
        color: #a67b45;
        background-color: #f4f4f4;
        height: 48px;
        border-left: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
    }

.navbar-pearl .navbar-nav > .active > a,
.navbar-pearl .navbar-nav > .active > a:hover,
.navbar-pearl .navbar-nav > .active > a:focus {
    color: #a67b45;
    text-decoration: none;
    background-color: #f4f4f4;
    background-image: -moz-linear-gradient(top, #ededed, #ffffff);
    background-image: -ms-linear-gradient(top, #ededed, #ffffff);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ededed), to(#ffffff));
    background-image: -webkit-linear-gradient(top, #ededed, #ffffff);
    background-image: -o-linear-gradient(top, #ededed, #ffffff);
    background-image: linear-gradient(top, #ededed, #ffffff);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff', GradientType=0);
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    transition: all 0.1s ease;
    outline: none;
    height: 48px;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
}

.navbar-pearl .navbar-nav li ul li a {
    border-top: 1px solid #cfcfcf;
    background-color: #f4f4f4;
    height: 40px !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px !important;
    padding-top: 5px;
}

    .navbar-pearl .navbar-nav li ul li a:hover {
        color: #a67b45 !important;
        background-color: #f8f8f8 !important;
    }


.navbar-pearl .navbar-nav > .disabled > a,
.navbar-pearl .navbar-nav > .disabled > a:hover,
.navbar-pearl .navbar-nav > .disabled > a:focus {
    color: #cccccc;
    background-color: transparent;
}

.navbar-pearl .navbar-toggle {
    border-color: #dddddd;
}

    .navbar-pearl .navbar-toggle:hover,
    .navbar-pearl .navbar-toggle:focus {
        background-color: #dddddd;
    }

    .navbar-pearl .navbar-toggle .icon-bar {
        background-color: #cccccc;
    }

.navbar-pearl .navbar-collapse,
.navbar-pearl .navbar-form {
    border-color: #e6e6e6;
}

.navbar-pearl .navbar-nav > .dropdown > a:hover .caret,
.navbar-pearl .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333333;
    border-bottom-color: #333333;
}

.navbar-pearl .navbar-nav > .open > a,
.navbar-pearl .navbar-nav > .open > a:hover,
.navbar-pearl .navbar-nav > .open > a:focus {
    color: #555555;
    background-color: #e7e7e7;
}

    .navbar-pearl .navbar-nav > .open > a .caret,
    .navbar-pearl .navbar-nav > .open > a:hover .caret,
    .navbar-pearl .navbar-nav > .open > a:focus .caret {
        border-top-color: #555555;
        border-bottom-color: #555555;
    }

.navbar-pearl .navbar-nav > .dropdown > a .caret {
    border-top-color: #777777;
    border-bottom-color: #777777;
}

/* .rbga is a modernizr class */
.rgba nav li > ul {
    padding: 10px;
    left: -10px;
    background: rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}



.navbar-pearl .navbar-link {
    color: #777777;
}

    .navbar-pearl .navbar-link:hover {
        color: #333333;
    }


/* 15.2 Panels */

.panel-default .panel-heading {
    background: #e1e1e1;
    background-image: linear-gradient(to bottom, #fafafa, #e1e1e1);
    border: 1px solid #c0c0c0;
    font-weight: 600;
    color: #222222;
}

/* 15.3 Tabs */

.nav-tabs > li {
    float: left;
    margin-bottom: -1px;
}

    .nav-tabs > li > a {
        background: #ddd;
        background: -moz-linear-gradient(top, #eee, #ddd);
        background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
        -pie-background: linear-gradient(top, #eee, #ddd);
        border: 1px solid #808080;
        -webkit-border-top-left-radius: 4px;
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius: 4px 4px 0 0;
        border-radius: 4px 4px 0 0;
        -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
        color: navy;
        margin-right: 2px;
        line-height: 1.3;
    }

        .nav-tabs > li > a:hover {
            border-color: #124b7e; /* Jetten Blue */
            border-bottom-color: transparent;
        }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        font-weight: bold;
        color: #555555;
        cursor: default;
        background-color: #ffffff !important;
        border: 1px solid #808080;
        border-bottom-color: transparent;
    }