@page {
    size: portrait;
}

body {
    margin: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 18px;
    color: #333;
    background-color: #fff;
}


.ui-widget {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
}

/* Should consider switching to font awesome icons so they appear larger */
#tabs li .ui-icon-close {
    float: left;
    margin: 10px 0px 0px 0px;
    cursor: pointer;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    font-weight: bold;
    color: #ffffff;
}

/* Remove border. Make this work a little better on mobile devices. Not true responsive though.*/
.ui-widget-content {
    border: none;
}

/* 
    This next line took me hours to figure out.
    It's done so that the non-active tabs have the same height
    as a tab with an avatar in it
*/
.ui-tabs .ui-tabs-nav li {
    line-height: 33px;
}

/*
    Adding 5/10/25 kill the padding except for top
*/
.ui-tabs .ui-tabs-panel {
    padding: 0;
    padding-top: 1em;
}


.closeIcon {
    color: grey;
    margin-top: auto;
    margin: .75em .2em .75em 0;
    cursor: pointer;
}


.alert-info {
    margin-bottom: 0;
    width: 100%;
}

.table td {
    padding: .5rem;
}

@@media print {
    .noprint {
        display: none;
    }

    .dataTables_filter {
        display: none;
    }
}

#individualResults tbody tr {
    cursor: pointer;
}

.splitCell {
    background-color: #CCF5FF;
}

#individualResults tbody tr:hover .splitCell {
    background-color: black;
    color: white;
}

#individualResults tbody tr:hover {
    cursor: pointer;
    background-color: black;
    color: white;
}



.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right;
    padding-top: 0.25em;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        box-sizing: border-box;
        display: inline-block;
        min-width: 1.5em;
        padding: 0.5em 1em;
        margin-left: 2px;
        text-align: center;
        text-decoration: none !important;
        cursor: pointer;
        *cursor: hand;
        color: #333333 !important;
        border: 1px solid transparent;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            color: #333333 !important;
            border: 1px solid #cacaca;
            background-color: white;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro));
            /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, white 0%, gainsboro 100%);
            /* Chrome10+,Safari5.1+ */
            background: -moz-linear-gradient(top, white 0%, gainsboro 100%);
            /* FF3.6+ */
            background: -ms-linear-gradient(top, white 0%, gainsboro 100%);
            /* IE10+ */
            background: -o-linear-gradient(top, white 0%, gainsboro 100%);
            /* Opera 11.10+ */
            background: linear-gradient(to bottom, white 0%, gainsboro 100%);
            /* W3C */
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
            cursor: default;
            color: #666 !important;
            border: 1px solid transparent;
            background: transparent;
            box-shadow: none;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            color: white !important;
            border: 1px solid #111111;
            background-color: #585858;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111111));
            /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #585858 0%, #111111 100%);
            /* Chrome10+,Safari5.1+ */
            background: -moz-linear-gradient(top, #585858 0%, #111111 100%);
            /* FF3.6+ */
            background: -ms-linear-gradient(top, #585858 0%, #111111 100%);
            /* IE10+ */
            background: -o-linear-gradient(top, #585858 0%, #111111 100%);
            /* Opera 11.10+ */
            background: linear-gradient(to bottom, #585858 0%, #111111 100%);
            /* W3C */
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:active {
            outline: none;
            background-color: #2b2b2b;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
            /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
            /* Chrome10+,Safari5.1+ */
            background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
            /* FF3.6+ */
            background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
            /* IE10+ */
            background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
            /* Opera 11.10+ */
            background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
            /* W3C */
            box-shadow: inset 0 0 3px #111;
        }

.dataTables_wrapper .dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 40px;
    margin-left: -50%;
    margin-top: -25px;
    padding-top: 20px;
    text-align: center;
    font-size: 1.2em;
    background-color: white;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
    /* Opera 11.10+ */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
    /* W3C */
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: #333333;
}

.teamThumbs {
    width: 20px;
    height: 20px;
    margin-top: -4px;
    border-radius: 50% !important;
}


.table > tbody > tr > td {
    vertical-align: middle;
}


.btn-strava {
     background-color: #fc5200;
    border-color: #fc5200;
    color: #fff !important;
}

    .btn-strava:hover {
        background-color: #cc4200;
        border-color: #cc4200;
        color: #fff !important;
    }

.btn-garmin {
    background-color: green;
    border-color: green;
    color: #fff !important;
}
    .btn-garmin:hover {
        background-color: darkgreen;
        border-color: darkgreen;
        color: #fff !important;
    }

.btn-runkeeper {
    background-color: #31a4d9;
    border-color: #31a4d9;
    color: #fff !important;
}

    .btn-runkeeper:hover {
        background-color: #1596d2;
        border-color: #1596d2;
        color: #fff !important;
    }


.avatar {
    height:30px;
    width:30px;
}

.progress {
    background-color:#c3c3c3;
}

/* 
    if large screen make search form and event buttons sticky at the top
    although as fo 12/13 i have removed buttons
*/
@media (min-width: 786px) {
    .events-button-row {
        position: sticky;
        top: 0px;
        background-color: white;
        z-index: 1000;
    }

    #tabs-1 form {
        position: sticky;
        top: 0px;
        background-color: white;
        z-index: 1000;
    }
}