/* -------------------- HTML ELEMENT STYLES -------------------- */

body {
    font-family: Segoe UI, Arial, sans-serif;
}

a {
    color: #0071BC;
    text-decoration: none;
}

h1 {
    margin-top: 6px;
    font-size: 160%;
}

h2 {
    color: #333;
    margin-top: 8px;
    font-size: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-transform: uppercase;
}

h3 {
    font-size: 18px
}

h5 {
    color: #666;
}

.tg-bold {
    font-weight: bold;
}

table.tg-table-full {
    width: 100%;
}

h6.tg-subtitle-top {
    margin-bottom: -8px;
    color: #999;
}

p.tg-bigletter:first-child:first-letter {
    float: left;
    color: #466a14;
    font-size: 65px;
    line-height: 50px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    font-family: Georgia;
}

/* 
    Both of these items are overriding styles normally set by boostrap. 
    The select padding is different because there appears to be different styling
    on select boxes, versus textboxes.  The primary reason for this update is to ensure that 
    small textobxes used on scorecards look reasonable without super wide margins.

*/
input {
    padding-left: 10px !important;
}

select {
    padding-left: 6px !important;
}

/* -------------------- GENERIC STYLES -------------------- */




/* Light text */

.tg-light {
    color: #999 !important;
}


/* Big text */
.tg-xbig {
    font-size: 140%;
}

.tg-small {
    font-size: 80%;
}


.tg-big {
    font-size: 110%;
}

.tg-small {
    font-size: 80%;
}

/* Center aligned */

.center {
    text-align: center;
}


/* Left aligned */

.left {
    text-align: left !important;
}


/* Right aligned */

.right {
    text-align: right;
}


/* Form labels */

.tg-lbl {
    text-transform: uppercase;
    line-height: 16pt;
    font-size: 80%;
    color: #666;
}


/* Buttons */

.btn-primary {
    background-color: #666;
    border: 1px solid #666;
}

    .btn-primary:hover {
        background-color: #999;
        border: 1px solid #999;
    }

.tg-btn-cta {
    background-color: #2385d8;
    color: #fff;
    padding: 5px 15px;
    border: solid 1px #2385d8;
    cursor: pointer;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.tg-btn-cta:hover {
    background-color: #65afee;
    color: #fff;
    text-decoration: none;
}

.tg-btn {
    background-color: #fff;
    color: #2385d8;
    padding: 5px 15px;
    border: solid 1px #2385d8;
    cursor: pointer;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.tg-btn:hover {
    background-color: #65afee;
    color: #fff;
    text-decoration: none;
}


/* Text inputs */

.tg-txt {
    border: solid 1px #dedede;
    height: 22px;
    text-align: center;
}

.tg-txt:focus {
    border: solid 1px #2385d8;
}

.tg-txt:hover {
    border: solid 1px #4597dc;
}


/* Dropdown lists */

.tg-ddl {
    border: solid 1px #dedede;
    height: 22px;
    text-align: center;
}

.tg-ddl:focus {
    border: solid 1px #2385d8;
}

.tg-ddl:hover {
    border: solid 1px #4597dc;
}

/* Leaderboard position up/down indicators */
.tg-pos-up {
    color: #74a234;
    font-size: 16pt;
}

.tg-pos-down {
    color: #903;
    font-size: 16pt;
}

/* Points boxes */
.tg-box-pts {
    width: 100px;
    text-align: center;
    border-left: solid 12px #fff;
    padding-top: 8px;
    padding-bottom: 8px;
}

.tg-pts-daily {
    background-color: #dedede;
    color: #333;
}

.tg-pts-total {
    background-color: #87c0f0;
    color: #fff;
}

.tg-pos-daily {
    background-color: #efefef;
    color: #333;
}

.tg-pos-total {
    background-color: #b0d3f1;
    color: #fff;
}

.tg-box-pos {
    width: 100px;
    height: 30px;
    text-align: center;
    border-left: solid 12px #fff;
    padding-top: 4px;
}                                                                                                                                                              }



/* Adds the gold color */

.winner {
    color: #cfb421;
}

.w40 {
    width: 40px;
}

.w60 {
    width: 60px;
}

.w80 {
    width: 80px;
}

.w100 {
    width: 100px;
}

.w120 {
    width: 120px;
}

.w140 {
    width: 140px;
}


/* --- Position Badge --- */
.tg-pos-ico {
    position: relative;
    z-index: 3;
    font-size: 24px;
    color: #fff;
}


.tg-pos {
    position: relative;
}

    .tg-pos:before {
        /* square */
        content: "\f0c8";
        /* Circle */
        font-family: FontAwesome;
        position: absolute;
        font-size: 48px;
        margin: -16px 0 0 -8px;
        z-index: 0;
        color: #34a75b;
    }

/* -------------------- NAVIGATION STYLES -------------------- */

.navbar-inverse {
    background-color: #0071BC;
    border-color: #0071BC;
    border-radius: 0px;       /* Overrride the rounded corners that come by default with the Bootstrap nav bar. */
    margin-bottom: 8px;     /* Override the bottom margin. */
    border-top-width: 0px;  /* Override the top border. */
}

    .navbar-inverse .navbar-toggle {
        margin-top: 16px;
        border-color: #0071BC;
    }

        .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
            background-color: #065a92;
        }

    .navbar-inverse .navbar-collapse {
        border-color: #0071BC;
    }

    .navbar-inverse .navbar-nav .dropdown .dropdown-toggle {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .navbar-inverse .navbar-nav .dropdown .dropdown-toggle .caret {
        margin-left: 6px;
    }

    .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
        background-color: #065a92;
    }

    .navbar-inverse .navbar-nav > li > a {
        color: #fff;
        font-size: 14pt;
    }

    .navbar-inverse .navbar-nav > li > a:hover {
        color: #f7b942;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu  {
        background-color: #fff;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        color: #333;
    }

        .navbar-inverse .navbar-nav .open .dropdown-menu > li > :hover {
            color: #4597dc;
        }

    .navbar-inverse .navbar-nav {
        margin-top: 10px;
    }

    .navbar-inverse .navbar-brand {
        height: 70px;
    }

.navbar .navbar-collapse {
    padding-right: 0px;
    -webkit-box-shadow: none;
   float: right;
}

/* Nav menu style overrides for XS (mobile) devices. */
@media(max-width:767px) {
    /* Left aligned */
    .navbar .navbar-collapse {
        float: left !important;
    }

    /* Standard color background */
    .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
        background-color: #0071BC;
    }

    /* Standard color background */
    .navbar-inverse .navbar-nav .open .dropdown-menu {
        background-color: #0071BC;
    }
        /* White menu links */
        .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
            color: #fff;
        }


}

.navbar .dropdown-menu {
    min-width: 140px;
    font-size: 14px;
}

.navbar > li > a {
    line-height:40px;
}

.navbar-brand {
    padding-top: 10px;   
    padding-left: 12px; 
}








/* -------------------- SECTION STYLES -------------------- */

.tg-section-hdr {
    background-color: #dedede;
    padding-left: 10px;
    height: 26px;
    line-height: 28px;
    color: #666;
    text-transform: uppercase;
    font-size: 80%;
}

.tg-section-body {
    padding-left: 10px;
    margin-bottom: 20px;
}

.tg-section-body div {
    height: 32px;
    line-height: 34px;
}

.tg-section-spcr {
    height: 10px;
    line-height: 12px;
}

.tg-row-lbl {
    float: left;
    color: #666;
}

.tg-row-lbldata {
    float: left;
}

.tg-row-data {
    padding-right: 10px;
    font-size: 110%; 
}

.tg-row-data-nrml {
}

.tg-row-data-scdry {
    padding-right: 10px;
    font-size: 90%;
    color: #666;
}

.tg-row-divide {
    height: 1px !important;
    line-height: 1px !important;
    background-color: #dedede;
}


/* -------------------- SCORE CARD TABLE -------------------- */

.tg-scorecard-stats {
    margin-left: 0px;
    margin-right: 0px;
    padding: 4px;
    border: solid 1px #ccc;
}

table.tg-scorecard {
    border: solid 1px #ccc;
}

table.tg-scorecard-xs td {
    text-align: center;
}

.tg-scorecard-val {
    min-width: 26px;
    max-width: 26px;
    text-align: center;
}

td.tg-scorecard-ttl {
    min-width: 40px;
    max-width: 40px;
    text-align: center;
}

td.tg-scorecard-plyr {}

td.tg-scorecard-hdr {
    background-color: #dedede;
    height: 24px !important;
    line-height: 24px !important;
    text-transform: uppercase;
    font-size: 80%;
    color: #666;
    text-align: center;
    padding: 0px !important;
}

td.tg-scorecard-hdr-left {
    background-color: #dedede;
    height: 24px !important;
    line-height: 24px !important;
    text-transform: uppercase;
    font-size: 80%;
    color: #666;
    text-align: left;
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 8px !important;
}

th {
    background-color: #dedede;
    height: 24px !important;
    line-height: 24px !important;
    text-transform: uppercase;
    font-size: 80%;
    font-weight: normal;
    color: #666;
    text-align: center;
    padding: 0px !important;
}

th.left {
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 8px !important;
}


/* -------------------- SCORE CARD STYLES -------------------- */


/* The magic here of using the font icon behind is found here: http://codepen.io/astrotim/pen/IjJzL/ */


/* This class is needed on any score/point value that has an icon overlay */

.tg-val-ico {
    position: relative;
    z-index: 3;
}


/* Since the color is dynamic, and done using an :after, we need to have a class for each color type. */

.tg-ahd-bhd-leader {
    position: relative;
}

    .tg-ahd-bhd-leader:before {
        /* square */
        content: "\f111";
        /* Circle */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        font-size: 30px;
        margin: -11px 0 0 -15px;
        z-index: 0;
        color: #f5edc3;
    }


/* Since the color is dynamic, and done using an :after, we need to have a class for each color type. */

.tg-sc-eagle {
    position: relative;
}

    .tg-sc-eagle:after {
        content: "\f111";
        /* Circle */
        font-family: "Font Awesome 5 Free";
        position: absolute;
        font-size: 30px;
        margin: -9px 0 0 -13px;
        z-index: 1;
        color: #34a75b;
    }

.tg-sc-birdie {
    position: relative;
}

    .tg-sc-birdie:after {
        content: "\f111";
        /* Circle */
        font-family: "Font Awesome 5 Free";
        position: absolute;
        font-size: 30px;
        margin: -9px 0 0 -15px;
        z-index: 1;
        color: #a0c769;
    }

.tg-sc-par {
    position: relative;
}

    .tg-sc-par:after {
        content: "\f0c8";
        /* Square */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        font-size: 30px;
        margin: -9px 0 0 -13px;
        z-index: 1;
        color: #deedc9;
    }

.tg-sc-bogey {
    position: relative;
}

    .tg-sc-bogey:after {
        content: "\f0c8";
        /* Square-o */
        font-family: "Font Awesome 5 Free";
        position: absolute;
        font-size: 30px;
        margin: -9px 0 0 -13px;
        z-index: 1;
        color: #ccc;
    }

.tg-sc-double {
    position: relative;
}

    .tg-sc-double:after {
        content: "\f0c8";
        /* Square-o */
        font-family: "Font Awesome 5 Free";
        position: absolute;
        font-size: 30px;
        margin: -9px 0 0 -13px;
        z-index: 1;
        color: #f7b942;
    }

.tg-sc-triple {
    position: relative;
}

    .tg-sc-triple:after {
        content: "\f0c8";
        /* Square-o */
        font-family: "Font Awesome 5 Free";
        position: absolute;
        font-size: 30px;
        margin: -9px 0 0 -13px;
        z-index: 1;
        color: #db5252;
    }

.tg-sc-worse {
    position: relative;
}

    .tg-sc-worse:after {
        content: "\f0c8";
        /* Square-o */
        font-family: "Font Awesome 5 Free";
        position: absolute;
        font-size: 30px;
        margin: -9px 0 0 -13px;
        z-index: 1;
        color: #c46abd;
    }


/* Formatting for points */

.tg-pts-neg {
    color: #bb2222;
}


/* -------------------- HOLE BY HOLE (LEADERBOARD) STYLES -------------------- */

table.tg-hbh {
    width: 100%;
}

td.tg-hbh-plyr {
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}


/* TODO: Refactor all these alignment classes to just use bootstrap. Center alignment */

.tg-align-center {
    text-align: center;
}

.tg-elipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}









.tg-prgbar-leader {
    display: block;
    float: left;
    width: 4px;
    height: 10px;
    background-color: mediumorchid;
    border-top: 2px solid #666;
    bottom: 0px;
}

.tg-prgbar-points {
    display: block;
    float: left;
    width: 9px;
    background-color: #65afee;
    border-right: 2px solid white;
    bottom: 0px;
}