*
{
    margin: 0;
    padding: 0;
}

body
{
    background-color: #d2d2d2;
    background-image: url();
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: fixed;
    font-family: verdana,helvitica,arial;
    text-align: center;
}

#container
{
    margin: 1em auto;
    position: relative;
    text-align: left;
    width: 1050px;
    margin-top: 70px;
}

#main_content
{
    background-image: url('/Templates/dc_template/img/standard/body_bg.png');
    background-repeat: repeat-y;
    padding:0px 18px 0px 18px;
    width:1010px;
    margin:0px 20px;
    float:left;
    
}

#ctl00_Header1_Countdown1_countdown{
    background-image: url('/Templates/dc_template/img/maroon/countdown_bg.png');    
    width: 424px !important;
    margin: 5px 25px 0px 46px !important
}

#countdownTitle
{
    font-size: 13px !important;
    padding-left: 22px;
    color:#ffffff;
}

#countdownValue
{
    font-size: 15px !important;
    padding-left: 32px;
    color:#ffffff !important;
}

a:hover
{
    text-decoration: underline;
    color: #ff0000;
}

a
{
    text-decoration: none;
}
a.nav
{
    font-weight: bold;
    font-size: 8pt;
    font-variant: small-caps;
    text-decoration: none;
}
a, a:link, a:visited
{
    color: #002395;
}

#thisWeekBox
{
    width: 492px;
    float: left;
    background-color: #eeeeee;
    border-left: 1px solid #B5B9BA;
    border-right: 1px solid #B5B9BA;
}
.bottomWeek
{
    float: left;
}
.floatLeft
{
    float: left;
}
.eventDate
{
    width: 492px;
    float: left;
    background-color: #ccc;
    color: #000;
    font-weight: bold;
    text-align: center;
    line-height: 23px;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}
.eventInfo
{
    float: left;
    width: 480px;
    padding: 3px 0px 3px 4px;
    font-size: 9pt;
    line-height: 15px;
}
.eventIcon
{
    clear: both;
    float: left;
    margin: 6px 5px 5px;
    width: 18px;
}
#footer
{
    clear: both;
    float: left;
    text-align: center;
    width: 924px;
    background-color: #002395;
}
.footer
{
    margin: 10px 0px 10px 6px;
    padding: 6px 0px 4px 0px;
    font-size: 11px;
    color: Black;
    background-color: #EFEFEF;
    border-top: 1px solid #BABEBE;
    text-align: center;
}
.cf
{
    clear: both;
}
.cr
{
    clear: right;
}

.clear
{
    clear: both;
    line-height: 1px;
}
#header
{
    margin-top: 4px;
    margin-bottom: 6px;
    margin-left: 6px;
    width: 930px;
}
#broadcastHeader
{
    margin-top: 4px;
    margin-bottom: 6px;
    margin-left: 6px;
    width: 800px;
}
#navigation
{
    clear: both;
    float: left;
    margin-left: 6px;
    margin-top: 6px;
    margin-right: 7px;
    padding: 0px;
    width: 165px;
}

.svg{
    display:none;
}

.replaced-svg{
    display:inline;
}
.navigation
{
    background-color: #eeeeee;
}
.navHeader
{
    background-image: url(/Images/Frontpage/navTitle.gif);
    color: #FFFFFF;
    cursor: pointer;
    font-size: 10pt;
    font-weight: bold;
    margin: 0px;
    text-decoration: none;
    text-align: center;
    width: 165px;
}
a.navLink:link
{
    margin-left: 0px;
    padding-left: 4px;
}
a.navLink:visited
{
    padding-left: 4px;
}
a.navLink:hover
{
    font-weight: bold;
}
#navLinkGroup a:hover
{
    background-color: #fefefe;
    width: 165px;
}
a.navLink:hover
{
    font-weight: bold;
}
.navLink
{
    color: #002395;
    font-size: 9pt;
    line-height: 18px;
    font-variant: small-caps;
    font-weight: bold;
    text-decoration: none;
    width: 163px;
    margin-left: 0px;
    padding-left: 0px;
}
ul.navLink
{
    margin: 0px;
}
li.navLink
{
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid #B5B9BA;
    border-left: 1px solid #B5B9BA;
    border-right: 1px solid #B5B9BA;
    list-style-image: none;
    list-style-type: none;
    list-style-position: outside;
}
#content
{
    float: left;
    margin-top: 6px;
    width: 752px;
}

#menu
{
    background-image: url('/Templates/dc_template/img/blue/header_menu_bg.png');
    background-repeat: no-repeat;
    width: 1050px;
    height: 116px;
}

#menu #social_media
{
    float:left;
    display:block;
    height:40px;
    width:600px;
    margin-top:10px;
}

.featureImgBg
{
    float:left;
    width:625px; 
    height:350px; 
    background:#d2d2d2 url('/Templates/dc_template/img/feature_bg.png');
    text-align: center;
    line-height: 350px;
    overflow: hidden;
}

.featureStorySection
{
    float:left;
    width:320px;
    height:305px;
    text-align:left;
    margin:0px 0px 8px 12px;
    line-height:21px;
    font-size:12px;
    color:#999999;
    overflow:hidden;
}
    
.featureStorySection h1
{        
    color: #002395;
    font-family: 'Roboto Slab', Rockwell, 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif; 
    font-size: 34px; 
    font-weight:bold;
}

.featureStorySection .storySnippet
{
    height: 130px;
    width: 320px;
    overflow: hidden;
}

.twitterlogo
{
    margin: 5px 0px 0px 15px;
    fill: #002395;
}

#social_media .facebooklogo
{
    margin: 5px 0px 0px 0px;
    width:32px; height:32px;
}

#social_media .facebooklogo #path
{
    fill: #002395;
}

#social_media .twitterlogo
{
    fill: #f6c816;
    width:32px; height:32px;
}

#social_media .twitterlogo #path
{
    fill: #002395;
}

#menu_logo
{
    float: left;
    display: block;
    margin: 7px 0px 0px 9px;
    background-image: url('https://www.prepconnectweb.com/Sites/daytoncarroll/img/header_logo.png');
    background-repeat: no-repeat;
    width: 110px;
    height: 91px;
}

#menu_horizontal_logo
{
    position: absolute;
    display: block;
    top: 34px;
    right: 8px;
   
}

#jsddm
{
    margin: 0px;
    padding: 0px;
    float: left;
    margin-top:13px;
    
}
#jsddm ul
{
    padding: 0px;
    margin: 0px;
}
#jsddm li
{
    float: left;
    list-style: none;
    font: 14px arial,helvetica,sans-serif;
    padding-top: 0px;
}

#jsddm > li > a
{
    font-family: 'Roboto Slab', Rockwell, 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif;
    margin-top:4px;
    display: block;
    padding: 0px 12px 0px 12px;
    line-height:34px;
    text-decoration: none;
    color: #FFFFFF;
    font-weight:bold;
    white-space: nowrap;
    text-transform: uppercase;
    text-align: center;
}

#jsddm > li > ul > a
{
    color: #FFF;
}

#jsddm img
{
    border: 0;

}

.menuBlock
{
    width: 1010px;
    height: 225px;
    margin: 5px 10px 5px 10px;
}

.menuBlock .facebooklogo 
{
    margin:0px 0px 0px 6px;
    width:12px;
    height:12px;
    fill:#003399;
}

.menuBlock .facebooklogo #path
{
    fill:#003399;
}

.menuBlock .twitterlogo 
{
    margin:0px 0px 0px 6px;
    width:12px;
    height:12px;
}

.menuBlock .twitterlogo #path
{
    fill:#003399;
}

.menuBlock .threeColumn h2
{
    font-family: 'Roboto Slab', Rockwell, 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif;
    color: #9e9e9e;
    font-size: 18px;
    text-transform:uppercase;
    line-height: 16px;
    height: 22px;
    border-bottom: 2px #CCC dotted;
    width: 325px;
    margin-top:8px;
}

.menuBlock .fourColumn h2
{
    font-family: 'Roboto Slab', Rockwell, 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif;
    color: #9e9e9e;
    font-size: 18px;
    text-transform:uppercase;
    line-height: 16px;
    height: 22px;
    border-bottom: 2px #CCC dotted;
    width: 215px;
    margin-top:8px;
}

.menuBlock h3
{
    width: 140px;
    font-size: 11px;
    background: #EEE;
    padding: 4px 3px;
    margin:3px 0px 1px -3px;
}
.menuBlock .teamlink
{
    width:136px;  
    font-size:14px;
    font-weight:bold;
    line-height:21px;
    color:#002395;
    display:inline-block;
    text-transform:uppercase;  
}

.menuBlock .teamlinkwide
{
    width:180px;  
    font-size:14px;
    font-weight:bold;
    line-height:21px;
    color:#002395;
    display:inline-block;
    text-transform:uppercase;  
}

.menuBlock .standardLink
{
    font-size:13px;
    line-height:21px;
    color:#002395;
    display:inline-block;
    /*text-transform:uppercase;  */
}

.menuBlock .sectionlink
{
    font-size:12px;
    line-height:23px;
    color:#999;
    display:inline-block;
}

.threeColumn
{
    width: 333px;
    display: inline;
    float: left;
}

.threeColumnWide
{
    width: 343px;
    display: inline;
    float: left;
}

.threeColumnThin
{
    width: 313px;
    display: inline;
    float: left;
}

.fourColumn
{
    width: 250px;
    display: inline;
    float: left;
}

.fallTeamBlock
{
    float: left;
    width: 135px;
    height: 60px;
}

.menuBlock a
{
    color: #639;
    font-size: 11px;
    line-height: 18px;
    font-weight: bold;
    text-decoration:none;
}

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

#jsddm > li > a:hover
{
    background: #FFF;
    color:#002395;
}

#jsddm li ul
{
    margin:0px 0px 0px 6px;
    position: absolute;
    display: none;
    padding: 5px;
    left: 0px;
    width: 1030px;
    
    background-color: #FFF;
    background-color:rgba(255,255,255,.95);
    border-bottom: 3px solid #002395;
    border-top: 0;
    z-index: 99999;    
}

#jsddm li ul li
{
    float: none;
    display: inline;
}

#jsddm li ul li a:hover
{
    background: #fff;
}

#jsddm li .twitter
{
    width: 25px;
    margin-left: 45px;
}
#jsddm li .rss
{
    width: 25px;
}

#featureBlock
{
    margin-bottom: 7px;
}

h1
{
    color: #002395;
    font-weight: bold;
    font-size: 22px;
    margin-top: 0px;
}

h2
{
    color: #aeaeae;
    font-weight: bold;
    font-size: 16px;
}
h1 + h2
{
}

p
{
    font-size: 11pt;
    margin-top: 10px;
}

.image
{
    height: 260px;
    width: 750px;
    padding: 0;
    margin: 0;
}

.image img
{
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #efefef;
    height: 250px;
    width: 740px;
    top: 0;
    left: 0;
}

.image iframe
{
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #efefef;
    height: 250px;
    width: 740px;
    top: 0;
    left: 0;
}

.hideOverflow
{
}

#featureBlock .description
{
}

#featureBlock .image .title
{
    overflow: hidden;
    width: 350px;
    height: 70px;
    font: bold;
    font-size: 24pt;
    font-family: Impact, Verdana, Georgia;
    color: #efefef;
}

#featureBlock .image .r
{
    top: 170px;
    left: 380px;
    width: 350px;
    position: absolute;
    text-align: right;
}

#featureBlock .image .l
{
    top: 170px;
    left: 25px;
    width: 350px;
    position: absolute;
    text-align: left;
}

#featureBlock .subtitle
{
}

.box
{
    float: left;
    margin-bottom: 4px;
    width: 245px;
    margin-left: 6px;
    margin-bottom: 6px;
}

.boxHeader
{
    background-color: #639;
    color: white;
    font-weight: bold;
    padding-left: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    border: 1px solid #ccc;
}

.boxContent
{
    padding: 5px;
    width: 232px;
    overflow: hidden;
    font-size: 9pt;
    text-align: center;
    background-color: #efefef;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.boxContent table
{
    width: 230px;
}

.boxContent td
{
    padding-bottom: 4px;
    padding-top: 4px;
    border-top: 1px dashed #babebe;
    width: 230px;
}

SPAN.Loss
{
    color: tomato;
}
SPAN.Win
{
    color: Purple;
    font-weight: bolder;
}
SPAN.Tie
{
    color: Yellow;
}

/* This is the poll stuff */

.PDS_Poll
{
    float: left;
    margin-bottom: 4px;
    width: 245px;
    height: 157px;
    margin-left: 6px;
}
.pds-box-outer
{
    border: 1px solid #ccc;
}
.pds-question-inner
{
    background-color: #639;
    padding: 0px 3px 0px 0px;
}
.pds-question-outer
{
    font-size: 10pt;
    font-weight: bold;
    text-decoration: none;
}
.pds-answer
{
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width: 208px;
    left: 10px;
    position: relative;
    background-color: inherit;
    background-color: #efefef;
}
.pds-totalvotes-outer
{
    width: 208px;
    left: 10px;
    position: relative;
}
.pds-votebutton-outer
{
    left: 76px;
    position: relative;
    width: 55px;
    height: 22px;
    overflow: hidden;
}

.pds-totalvotes-outer
{
    width: 211px;
    height: 22px;
    overflow: hidden;
}

.pds-box-top
{
    clear: both;
}
.rightBar
{
    float: left;
    width: 250px;
    display: block;
}
.error
{
    background-color: #FFEBE8;
    border-color: #DD3C10;
}
.perror
{
    background-color: #EFEFEF;
    border: 1px solid #CCCCCC;
    color: #002395;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
}
.UIMessageBox
{
    border-style: solid;
    border-width: 1px;
    padding: 7px 10px 5px 10px;
    margin-bottom: 9px;
}
.title-gray
{
    float: left;
    margin: 10px 0px 10px 6px;
    color: #FFF;
    font-size: 1em;
    font-weight: bold;
    padding: 8px 10px 7px;
    width: 902px;
    background: none repeat scroll 0 0 #CCCCCC;
    border: 1px solid #999999;
}
.sectionTitle, .sectionTitle a, .sectionTitle a:link
{
    color: #002395;
    font-family: 'Roboto Slab', Rockwell, 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif;
    font-size: 21px; margin:0px 0px 0px 4px;
    text-transform:uppercase;
}

#recentphotos
{
    margin-top: 10px; 
    display: block; 
    float: left; 
    width: 340px;
}
.photocontainer
{
    float:left; 
    width:330px; 
    margin:3px 0px 3px 13px;
}
.photocontainer img
{
    width: 75px; height: 75px; padding: 3px; border: 1px solid #CDCDCD; float:left;
}

.photocontainer .titlelink
{
    font-size: 15px; color: #002395; font-weight: bold; float:left; width:225px; margin:8px 0px 0px 12px;
}

.photocontainer .datelink
{
    font-size: 14px; color: #666666; float:left; width:225px; margin:0px 0px 0px 12px;
}
.slashes
{
    background: url('/Templates/dc_template/img/standard/slashes.gif')repeat-x;
    height:14px;
    min-width:20px;
    display:inline-block; 
    margin:4px 5px 0px 0px;
}

#recentvideos
{
    width: 635px;
    margin-top: 10px; 
    display: block; 
    float: left; 
    min-height:440px;
}

.youtTubeItem
{
    width:155px;
    height:130px;
    margin:8px 0px 0px 0px;
    float:left;
}

.youtTubeItem a, .youtTubeItem a:link, .youtubelink
{
    font-size: 11px; color: #002395; font-weight: bold; width: 145px; height: 30px; float:left; margin:0px 0px 0px 0px; overflow:hidden;

}
.youtTubeItem .date
{
   font-size: 11px; color: #999; line-height:1.3em; width:145px; display:block;
}

#twitterbanner
{
    float: left;
    clear: both;
    margin-left: -30px;
    background-color: #002395;
    height: 65px;
    width: 1040px;
    margin-top: 10px;
}


.vertical .carousel-inner   {   height: 100%;   }    
.carousel.vertical .item
{
    -webkit-transition: 0.6s ease-in-out top;
    -moz-transition: 0.6s ease-in-out top;
    -ms-transition: 0.6s ease-in-out top;
    -o-transition: 0.6s ease-in-out top;
    transition: 0.6s ease-in-out top;
}    
.carousel.vertical .active { top: 0; }    
.carousel.vertical .next    {        top: 400px;    }    
.carousel.vertical .prev    {        top: -400px;    }    
.carousel.vertical .next.left, .carousel.vertical .prev.right    {        top: 0;    }
.carousel.vertical .active.left    {        top: -400px;    }
.carousel.vertical .active.right    {        top: 400px;    }    
.carousel.vertical .item    {   left: 0;    font-size: 12px;    color: #FFFFFF; font-weight: bold;  }

.headliner
{
    clear:both; 
    float:left; 
    margin-top:5px; 
    background: #002395 url('/Templates/dc_template/img/feature_bg.png'); 
    height:100px;
    width:970px;
}

.headliner table
{
    text-align:center; 
    height:100px; 
    width:770px;
}

.headerlineIconImg
{
    float:left; 
    margin:10px; 
    width:180px;
    text-align: center;
}

.headlineText
{
    float:left; 
    text-align:left; 
    font-size:12pt; 
    font-weight:bold; 
    width:760px; 
    color:#FFF; 
    line-height:28px;
}

.carousel-control.right
{
    background-image:none;
    width:15px;
}
.carousel-control.left
{
    background-image:none;
    width:15px;
}
.carousel-indicators
{
    width: 340px;
    height: 15px;
    margin: 0px 0px 0px 0px;
    right: 0px;
    bottom: 25px;
    left: inherit;
}

.carousel-indicators li
{
    border:1px solid #002395;
    margin:1px 2px 1px 2px;
}
.carousel-indicators .active
{
    background-color:#002395;
    margin:0px 2px 0px 2px;
}

#carouselButtons 
{
    text-align:center;
    width: 340px;
    height: 20px;
    right: 0px;
    bottom: 0px;
    position: absolute;
    margin: 0px 0px 0px 0px;
}

.glyphicon-play
{
    color:#002395;
}

.glyphicon-pause
{
    color:#002395;
}

#tweetScroller a, #tweetScroller a:link{
    color:#FFFFFF;
}

.sideBarBox{
    width:330px; float:right; clear:right;margin: 10px 0px 0px 10px;
}

.teamScheduleSection
{
    width:630px; float: left; margin: 10px 0px 0px 4px;
}

.teamScheduleSection .schedule
{
    width: 630px; margin: 15px 0px 15px 0px; display: block; float: left;
}

.teamScheduleSection .title-row,
#teamLinksDiv .title-row
{
    display: flex;
    align-items: center;
}

.teamScheduleSection .title-row .slashes,
#teamLinksDiv .title-row .slashes
{
    flex: 1;
    width: auto !important;
    margin-left: 10px;
}

.teamPageContent .title-row
{
    display: flex;
    align-items: center;
}

.teamPageContent .title-row .slashes
{
    flex: 1;
    width: auto !important;
    margin-left: 10px;
}

.showPrint
{
    display:none;
}

.scheduleSummary .sortable th:hover
{
    font-weight: bold;
    text-decoration: underline;
}    
.scheduleSummary .header-row-v2
{
    text-transform: uppercase;
    color: #666;
    font-size: 11px;
    cursor: pointer;
}    
    
.scheduleSummary table
{
    margin: 0px;
    padding: 0px;
}    
    
.scheduleSummary
{
    font-size: 11px;
}

.scheduleSummary  #locations td
{
    font-size: 12px;
    padding: 2px 6px;
    border: 1px solid white;
}
       
.scheduleSummary .result
{
    font-family: helvetica,arial,sans-serif;
    font-weight: 700;
    font-size: 14px;
    font-weight: 700;
    color: #666666;
}    
.scheduleSummary .header-row-v2 th
{
    border-color: #DDDDDD;
    border-width: 0 0 1px;
    color: #666666;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 6px 2px;
}
.scheduleSummary .datagrid td
{
    padding: 0px 3px 0px 5px;
}

.scheduleSummary .odd-row{color:#000;background-color:#e1e1e1;height:25px;}
.scheduleSummary .even-row{color:#000;background-color:#FFF;height:25px;}

.scheduleSummary .redfont
{
    color: #BF0000;
}
    
.scheduleSummary .greenfont
{
    color: #007F00;
} 

.scheduleSummary .aligncenter
{
    text-align: center;
}

.scheduleSummary .alignleft
{
    text-align: left;
}

/* ============================================================
   Common mobile overrides — link this after ltlStyleSheet
   in any master page to get responsive container behavior.
   ============================================================ */

@media (max-width: 1080px) {
    body {
        min-width: 375px;
    }

    #container {
        width: 100% !important;
        margin: 52px 0 0;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    #main_content {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
        box-sizing: border-box;
        padding: 16px 10px 0 10px !important;
        background-image: none !important;
        background-color: #fff !important;
    }

    /* Clearfix spacer divs in master pages have an inline width:800px that
       forces the page wider than the viewport on mobile. */
    #main_content > div[style*="width:800px"] {
        width: 100% !important;
        float: none !important;
    }

    /* Force #main_content to expand around its floated children so the
       white background covers the full page height. The existing clearfix
       div in the master uses float:left which doesn't expand the parent. */
    #main_content::after {
        content: '';
        display: table;
        clear: both;
    }

    /* Hide desktop menu; show mobile app bar */
    #menu {
        display: none !important;
    }

    #mobileMenuBar {
        display: flex !important;
    }

    /* Home page has the fixed TopScoreboard (64px) above the app bar (52px) */
    body.has-scoreboard #mobileMenuBar {
        top: 64px;
    }

    body.has-scoreboard #container {
        margin-top: 116px;
    }

    /* Stack sidebar boxes full-width instead of floating alongside content */
    .sideBarBox {
        width: 100% !important;
        float: none !important;
        clear: both;
        margin: 10px 0 !important;
    }

    /* Contain any floated children so they don't escape into adjacent sections */
    .sideBarBox::after {
        content: '';
        display: table;
        clear: both;
    }

    /* SportLinks inner div has inline float:right + width:330px. Its id is
       mangled by ASP.NET (runat="server"), so target by class instead. */
    .sideBarBox .hidePrint {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* TeamPageContent has a fixed 630px width on desktop */
    .teamPageContent {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    /* Constrain any user-added media/embeds so they never exceed the container */
    .teamPageContent img,
    .teamPageContent video,
    .teamPageContent embed,
    .teamPageContent object {
        max-width: 100% !important;
        height: auto !important;
    }

    .teamPageContent iframe {
        max-width: 100% !important;
    }

    /* Tables added by users scroll horizontally rather than breaking layout */
    .teamPageContent table {
        max-width: 100%;
        display: block;
        overflow-x: auto;
    }

    /* Upcoming events: full width, no longer needs to share with floating sidebar.
       Override inline min-height:400px which causes content to hang low. */
    #thisWeekContainer {
        width: 100% !important;
        float: none !important;
        min-height: 0 !important;
        box-sizing: border-box;
        min-width: 0;
    }

    /* Allow the datagrid to fill the full container */
    #thisWeekInSports {
        max-width: 100% !important;
    }

    /* --- TeamSchedule / TeamRoster pages --- */
    /* Both pages share the teamScheduleSection wrapper */
    .teamScheduleSection {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Slashes use flex:1 via .title-row — ensure full width on mobile */
    .teamScheduleSection .title-row {
        width: 100%;
    }

    .teamScheduleSection .schedule {
        width: 100% !important;
        min-width: 0 !important;
        /* auto allows the roster table to scroll horizontally if needed */
        overflow-x: auto;
        box-sizing: border-box;
    }

    /* ---- Schedule-only rules (roster table has id="rosterTable") ---- */

    /* Override any external schedule.css fixed column widths */
    .teamScheduleSection .data-grid:not(#rosterTable) {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Switch table and tbody to block so CSS grid can control <tr> layout */
    .teamScheduleSection .data-grid:not(#rosterTable),
    .teamScheduleSection .data-grid:not(#rosterTable) tbody {
        display: block;
    }

    /* Hide desktop column header row — schedule only */
    .teamScheduleSection .data-grid:not(#rosterTable) tr.header-row-v2 {
        display: none;
    }

    /* Each data row becomes a 3-col grid:
         Row 1: [date (auto)] [opponent/event (flex)] [result/time (auto)]
         Row 2: [location/record — full width]    */
    .teamScheduleSection .data-grid:not(#rosterTable) tr.even-row,
    .teamScheduleSection .data-grid:not(#rosterTable) tr.odd-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "date  opp  time"
            "loc   loc  loc";
        border-bottom: 1px solid #ccc;
        height: auto !important; /* override the height:35px set by Schedule.ascx.cs dynamic CSS */
    }

    /* Remove the white td borders from external schedule.css that create gaps
       against the alternating gray row backgrounds. */
    .teamScheduleSection .data-grid:not(#rosterTable) td {
        border: none !important;
    }

    /* Top row — date, event name, result: 12px.
       Needs !important to beat external schedule.css (#schedule2 td → 12px)
       and the global .result rule (14px) from ThisWeekInSports.ascx. */
    .teamScheduleSection .data-grid:not(#rosterTable) td.add-grid-date,
    .teamScheduleSection .data-grid:not(#rosterTable) td.add-grid-opponent,
    .teamScheduleSection .data-grid:not(#rosterTable) td.add-grid-opponent a,
    .teamScheduleSection .data-grid:not(#rosterTable) td.add-grid-score,
    .teamScheduleSection .data-grid:not(#rosterTable) td.add-grid-score .result {
        font-size: 12px !important;
    }

    /* Details row — location/comments: 11px */
    .teamScheduleSection .data-grid:not(#rosterTable) td.add-grid-time,
    .teamScheduleSection .data-grid:not(#rosterTable) td.add-grid-time a {
        font-size: 11px !important;
    }

    .teamScheduleSection .data-grid:not(#rosterTable) td.add-grid-date {
        grid-area: date;
        font-size: 12px;
        color: #333;
        padding: 5px 6px 4px 8px;
        white-space: nowrap;
        width: auto !important;
        height: auto !important;
    }

    .teamScheduleSection .data-grid:not(#rosterTable) td.add-grid-score {
        grid-area: time;
        font-size: 12px;
        color: #555;
        padding: 5px 8px 4px 4px;
        white-space: nowrap;
        width: auto !important;
        height: auto !important;
    }

    .teamScheduleSection .data-grid:not(#rosterTable) td.add-grid-opponent {
        grid-area: opp;
        padding: 5px 8px 4px 4px;
        font-size: 12px;
        font-weight: bold;
        width: auto !important;
        height: auto !important;
    }

    .teamScheduleSection .data-grid:not(#rosterTable) td.add-grid-time {
        grid-area: loc;
        padding: 1px 8px 6px;
        font-size: 11px;
        color: #555;
        width: auto !important;
        height: auto !important;
    }

    /* "Schedule unavailable" single-row — schedule only */
    .teamScheduleSection .data-grid:not(#rosterTable) tr.single-row {
        display: block;
    }

    .teamScheduleSection .data-grid:not(#rosterTable) tr.single-row td {
        display: block;
        width: 100% !important;
    }

    /* --- Event detail page --- */
    .event-detail-container {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
        margin: 10px 0 0 0 !important;
    }

    /* --- DirectionsPage ad sidebar --- */
    /* Remove float so the ad stacks above the main content on mobile */
    .adSideBar {
        float: none !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    /* --- Staff directory (DirectionsPage layout) --- */
    /* Override hardcoded width:630px float:left inline style on .staffSection */
    .staffSection {
        width: 100% !important;
        float: none !important;
        clear: both;
        box-sizing: border-box;
    }

    /* --- Directions page (DirectionsPage layout) --- */
    .directionsSection {
        width: 100% !important;
        float: none !important;
        clear: both;
        box-sizing: border-box;
    }

    /* Locations table: scroll horizontally rather than blowing out the viewport */
    .directions {
        overflow-x: auto;
    }

    /* Force locationBox to be at least as wide as its widest child (the table).
       This makes the width:100% LOCATIONS header bar stretch to the full scroll
       width so it tracks with the table when the user scrolls right. */
    .directions #locationBox {
        min-width: max-content;
    }

    /* The code-behind injects height:35px on every row via an inline <style> block;
       override it so rows can wrap their content on narrow screens */
    .directions .even-row,
    .directions .odd-row {
        height: auto !important;
    }

    /* --- EventLocation google map iframe --- */
    #googleMap iframe {
        width: 100% !important;
        max-width: 100%;
    }

    /* --- EventLocation locationInformation sidebar --- */
    #locationInformation {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* --- News page --- */
    /* Sidebar (image + ad) floats right on desktop; on mobile remove float so
       it stacks naturally in source order (after the article content). */
    .newsSidebar {
        float: none !important;
        clear: both;
        width: 100% !important;
        margin-top: 0 !important;
        text-align: center;
    }
    /* News image has a hardcoded width="320px" HTML attribute; make it scale down */
    .newsSidebar img {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }
    /* Main article content: remove fixed 630px width and float */
    .newsSection {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }
    /* Constrain user-added images/embeds inside news/media body content */
    .newsSection img,
    .newsSection video,
    .newsSection embed,
    .newsSection object {
        max-width: 100% !important;
        height: auto !important;
    }
    .newsSection iframe {
        max-width: 100% !important;
    }
    /* Tables in body content scroll horizontally rather than breaking layout */
    .newsSection table {
        max-width: 100%;
        display: block;
        overflow-x: auto;
    }
}


/* ============================================================
   Desktop overrides — fix elements that have no explicit desktop width
   ============================================================ */
@media (min-width: 1081px) {
    /* #thisWeekContainer has no explicit width on desktop; without one it
       shrinks to the max-width:625px cap on #thisWeekInSports instead of
       filling the ~630px available beside the sidebar. */
    #thisWeekContainer {
        width: 625px;
    }
    #thisWeekInSports {
        max-width: 100%;
    }
}

/* ============================================================
   Mobile App Bar
   ============================================================ */
#mobileMenuBar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 52px;
    z-index: 1001;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
}

#hamburgerBtn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 34px;
    width: 34px;
    flex-shrink: 0;
}

#hamburgerBtn span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #fff;
    border-radius: 2px;
}

#mobileMenuBar > a {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

#mobileMenuBar > a > img {
    height: 38px;
    width: auto;
}

/* ============================================================
   Mobile Menu Overlay
   ============================================================ */
#mobileMenuOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1002;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    flex-direction: column;
}

.mob-overlay-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.mob-overlay-logo {
    height: 44px;
    width: auto;
}

#closeMenuBtn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

/* Nav accordion list */
.mob-nav-list {
    padding: 0;
    list-style: none;
    margin: 0;
}

.mob-nav-section {
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.mob-nav-section > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.mob-nav-section > header > a {
    text-decoration: none;
    display: block;
    width: 100%;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 15px;
}

.mob-toggle {
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    flex-shrink: 0;
}

/* Collapsible sub-content */
.mob-sub {
    display: none;
    padding: 0 16px 12px;
}

.mob-widget {
    padding: 2px 0 6px;
}

.mob-widget a {
    display: block;
    padding: 7px 0;
    font-size: 15px;
    text-decoration: none;
    opacity: 0.9;
}

/* WebTeamMenu overrides inside the mobile overlay */
#mobileMenuOverlay .menuHeader {
    display: none !important;
}

#mobileMenuOverlay ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#mobileMenuOverlay .menuBlock {
    width: 100% !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    position: static !important;
}

#mobileMenuOverlay .threeColumn {
    width: 100% !important;
    float: none !important;
    display: block !important;
}

#mobileMenuOverlay .teamlink,
#mobileMenuOverlay .teamlinkwide {
    font-size: 16px !important;
    line-height: 40px !important;
    display: inline-block !important;
    color: inherit !important;
}

#mobileMenuOverlay .sectionlink {
    font-size: 13px !important;
    color: inherit !important;
    opacity: 0.85;
}

#mobileMenuOverlay h2 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin: 10px 0 2px;
    font-weight: 600;
}

/* Social Footer */
#mobileSocialFooter {
    padding: 20px 16px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
}

.mob-social-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 12px;
}

#mobileSocialFooter .icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

#mobileSocialFooter .icons a {
    color: inherit;
    text-decoration: none;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
}

#mobileSocialFooter .icons img,
#mobileSocialFooter .icons svg {
    width: 26px;
    height: 26px;
}

/* ============================================================
   Directions page — title-row / slashes pattern
   ============================================================ */
.directionsSection .title-row {
    display: flex;
    align-items: center;
}
.directionsSection .title-row .slashes {
    flex: 1;
    width: auto !important;
    margin-left: 10px;
}

/* ============================================================
   News page — title-row / slashes pattern
   ============================================================ */

/* Creates a BFC so the inner clear:both (after the publish date) does not
   clear past the outer float:right newsSidebar, which would push the article
   text below the entire sidebar/ad column. */
.newsSection {
    overflow: hidden;
}

.newsSection .title-row {
    display: flex;
    align-items: center;
}
.newsSection .title-row .slashes {
    flex: 1;
    width: auto !important;
    margin-left: 10px;
}

/* ============================================================
   EventLocation — scheduleSummary & locationInformation title-row
   ============================================================ */
.scheduleSummary .title-row,
#locationInformation .title-row {
    display: flex;
    align-items: center;
}
.scheduleSummary .title-row .slashes,
#locationInformation .title-row .slashes {
    flex: 1;
    width: auto !important;
    margin-left: 10px;
}

/* ============================================================
   Print — hide mobile chrome and footer on all pages
   ============================================================ */
@media print {
    #mobileMenuBar     { display: none !important; }
    #mobileMenuOverlay { display: none !important; }
    #footer            { display: none; }

    /* The @media (max-width:1080px) block above applies during print
       (print page width ~816px < 1080px). These rules counteract it. */

    /* Guarantee hidePrint elements stay hidden despite the mobile block */
    .hidePrint { display: none !important; }

    /* Remove the 52px mobile-bar top margin injected by the mobile block */
    #container { margin-top: 0 !important; }

    /* Reset mobile schedule grid back to native table layout so rows
       don't render as a two-row CSS grid with extra whitespace */
    .teamScheduleSection .data-grid:not(#rosterTable),
    .teamScheduleSection .data-grid:not(#rosterTable) tbody {
        display: table !important;
    }
    .teamScheduleSection .data-grid:not(#rosterTable) tr.header-row-v2,
    .teamScheduleSection .data-grid:not(#rosterTable) tr.even-row,
    .teamScheduleSection .data-grid:not(#rosterTable) tr.odd-row {
        display: table-row !important;
        height: auto !important; /* override Schedule.ascx.cs inline height:35px */
    }
    .teamScheduleSection .data-grid:not(#rosterTable) td {
        display: table-cell !important;
        height: auto !important;
    }

    /* Hide br tags in the info column — they only appear as separators
       between links (already hidden) and would otherwise leave blank lines */
    .add-grid-time br { display: none; }
}