/* ------------------------------ pull in stylesheets that define component display ----------------------------- */ @import url(schedule.css); @import url(champs.css); @import url(forms.css); @import url(leaguelistings.css); @import url(leaguedetail.css); /*-------------------------- * outer container for each row *---------------------------*/ div.componentRow { margin: 20px 0; border: 1px solid #E1E5EC; width: 768px; } div#componentRow_1 { margin-top: 0; } div#componentRow_1.three { border: 0; background: transparent; margin: 0; } div.three div#component_1_1 { padding: 0; width: 768px; } div.one-two { background: url(../graphics/bg-component-one-two.gif) repeat-y top left; } div.two-one { background: url(../graphics/bg-component-two-one.gif) repeat-y top left; } div.one-one-one { background: url(../graphics/bg-component-one-one-one.gif) repeat-y top left; } /*-------------------------- * individual component boxes *---------------------------*/ div.component { position: relative; float: left; padding: 12px; } div.component.size_3 { width: 742px; } div.component.size_2 { width: 488px; } div.component.size_2.noPadding { width: 512px; } div.component.size_1 { width: 232px; } div.component.size_1.noPadding { width: 256px; } /*-------------------------- * titles *---------------------------*/ div.component h2, div.component h3 { text-align: left; } div.component h2, div.siteContent h2 { margin-bottom: 12px; } div.component h3, div.siteContent h3 { margin-bottom: 8px; } div.leagueDetail h3 { margin-bottom: 1px; } div.component.size_3 div.siteContent h2 { font-size: 24px; line-height: 26px; } div.component.size_3 div.siteContent h3 { font-size: 14px; } div.component.size_2 div.siteContent h2 { font-size: 18px; line-height: 21px; } div.component.size_2 div.siteContent h3 { font-size: 12px; } div.component.size_1 div.siteContent h2 { font-size: 18px; line-height: 21px; } div.component.size_1 div.siteContent h3 { font-size: 12px; } /*-------------------------- * images and captions *---------------------------*/ div.contentImage img, div.component img.teamPic { border: 1px solid #777; } div.component div.contentImage { float: left; clear: left; text-align: left; margin: 0 8px 8px 0; } div.component.size_1 div.contentImage { width: 68px; } div.component.size_2 div.contentImage { width: 308px; } div.component.size_3 div.contentImage { width: 308px; } div.component.size_3 div.largeImages { width: 508px; } div.component.size_3 div.largeImages img { max-width: 500px; } div.component.size_1 div.teamPic, div.component.size_2 div.teamPic { width: 73px; } div.component div.contentImage div.caption { width: 300px; padding: 3px 0 0 0; font-size: 10px; text-align: left; margin: 0 auto; line-height: 12px; color: #444; } div.component.size_3 div.largeImages div.caption { width: 500px; } /* * the body.siteContentEditor selector helps make the appearance * while editing match up with the front-end appearance */ div.siteContent ul li, body.siteContentEditor ul li { list-style: disc inside; margin-left: 8px; } div.siteContent ol li, body.siteContentEditor ol li { margin-left: 20px; } div.siteContent ul, body.siteContentEditor ul, div.siteContent ol, body.siteContentEditor ol { margin-top: 6px; } div.siteContent em, body.siteContentEditor em { font-style: italic; } /*----------------------------- * photo gallery content *--------------------------------*/ div.photoGalleryComponent div.title { font-size: 15px; font-weight: bold; margin: 8px 0 8px 15px; } div.photoGalleryComponent div.label { font-weight: bold; font-size: 11px; margin-left: 15px; } div.photoGalleryComponent div.galleryLink { margin: 10px 0 10px 15px; } div.photoGalleryComponent a.button { width: 75px; } div.photoGalleryComponent img.photo { margin: 6px 12px 6px 0; border: 1px solid #000; } div.photoGalleryComponent img.photo.large { float: right; } div.component.size_1 div.photoGalleryComponent div.photos { float: right; width: 80px; text-align: right; } div.photoGalleryComponent .small .photo img.photo { max-width: 100%; margin: 0; } div.photoGalleryComponent .small div.title { margin: 12px 0 6px 0; } div.photoGalleryComponent .small div.title a { color: #555; } div.photoGalleryComponent .small div.title a:hover { text-decoration: none; } div.photoGalleryComponent .small .viewLink a { font-size: 11px; } /*----------------------------- * league content feed *--------------------------------*/ .leagueContentFeed { display: block; padding: 0; margin: 1px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; font-size: 14px; line-height: 1.42857143; } .leagueContentFeed .nav { list-style-type: none; padding: 0; margin: 0; text-align: center; background-color: #F1F1F1; border-bottom: 1px solid #ddd; } .leagueContentFeed .nav li { display: inline-block; padding: 8px 0; width: 48%; margin-bottom: -1px; } .leagueContentFeed .nav li.active { background-color: #FFF; border-left: 1px solid #ddd; border-right: 1px solid #ddd; } .leagueContentFeed .tab-pane { display: none; } .leagueContentFeed .tab-pane.active { display: block; } .leagueContentFeed .header { text-align: center; padding: 0px 10px; border-bottom: 1px solid #D0D0D0; } .leagueContentFeed .header h3 { font-size: 18px; margin-bottom: 0px; margin-top: 6px; text-align: center; } .leagueContentFeed .header img { height: 24px; margin-top: 10px; } .leagueContentFeed .image-thumbnails { padding: 4px 0; text-align: center; border-bottom: 1px solid #ddd; } .leagueContentFeed .image-thumbnails li { display: inline-block; padding: 2px; border: 1px solid #fff; vertical-align: middle; } .leagueContentFeed .image-thumbnails li.active { background-color: #eee; border: 1px solid #ccc; } .leagueContentFeed .image-thumbnails li:first-child { padding-right: 0; } .leagueContentFeed .image-thumbnails li:last-child { padding-left: 0; } .leagueContentFeed .image-thumbnails li img { height: 28px; display: block; } .leagueContentFeed .image-thumbnails li a:hover { text-decoration: none; } .leagueContentFeed .content-item { display: none; } .leagueContentFeed .content-item.active { display: block; } .leagueContentFeed .featured-image, .leagueContentFeed .content-details { width: auto; max-width: 40%; float: left; } .leagueContentFeed .featured-image { width: 420px; text-align: right; margin: 10px 0 0 10px; } .leagueContentFeed .featured-image .main { max-width: 100%; text-align: left; z-index: 2; } .leagueContentFeed .featured-image .sport-icon { display: inline-block; margin: -20px 20px 0 0; background: #fff; width: 40px; height: 34px; padding: 6px 0 0 0; border-radius: 20px; z-index: 3; text-align: center; } .leagueContentFeed .content-body, .leagueContentFeed .share-buttons { padding: 10px; } .leagueContentFeed .content-body h3 a { font-size: 11px; font-weight: normal; margin-left: 8px; } .leagueContentFeed .content-body .teamLink { margin: 6px 0; } .leagueContentFeed .share-buttons { margin-bottom: 20px; } .leagueContentFeed .share-buttons .twitter-share-button { margin-left: 12px; } .leagueContentFeed .bottomNav { display: none; position: relative; height: 30px; margin: 0 0 12px 0; } .leagueContentFeed .bottomNav .prev, .leagueContentFeed .bottomNav .next { position: absolute; top: 0; } .leagueContentFeed .bottomNav .prev { left: 12px; } .leagueContentFeed .bottomNav .next { right: 12px; } .leagueContentFeed .colorSwatch { display: block; width: 100%; color: #fff; font-weight: bold; overflow: hidden; border: 1px solid #ccc; } .leagueContentFeed .colorSwatch.white { text-shadow: 1px 1px 0 #777, 1px -1px 0 #777, -1px 1px 0 #777, -1px -1px 0 #777; } .leagueContentFeed .colorSwatch.thumb { height: 14px; width: 14px; padding: 6px; font-size: 1.2em; text-align: center; } .leagueContentFeed .colorSwatch.main { font-size: 2.2em; padding: 2em 0; text-align: center; line-height: 1.3; } .size_3 .leagueContentFeed { width: 100%; } .size_1 .leagueContentFeed .featured-image { margin: 0; max-width: 100%; } .size_1 .leagueContentFeed .featured-image .main { width: 100%; } .size_1 .leagueContentFeed .content-details { max-width: 100%; } .size_2 .leagueContentFeed .featured-image, .size_2 .leagueContentFeed .content-details { width: 48%; } /*----------------------------- * misc adjustments *--------------------------------*/ div.size_3 div.scheduleBannerContainer img { max-width: 731px; } div.size_3 div.gameDate h2 { margin-bottom: 0; } div.leagueDetailComponent div.leagueDetail, div.leagueDetailComponent div.currentLeague { margin: 0; } /*-------------------------- * our section of the privacy policy *---------------------------*/ div.ourPolicy { margin-top: 50px; width: 600px; text-align: justify; } div.ourPolicy p { margin-top: 12px; } /*====================== * custom page *=======================*/ div.customPageWithForm #componentRow_1 { float: left; width: 345px; } div.customPageWithForm #componentRow_1 h4 { margin: 20px 0 6px 0; } div.customPageWithForm #componentRow_1 div#component_1_1.size_3, div.customPageWithForm #componentRow_1 div.component div, div.customPageWithForm #componentRow_1 div.component p { width: 325px; margin-right: 20px; } div.customPageWithForm #componentRow_1 .contentImage { width: 325px; } div.customPageWithForm #componentRow_1 .contentImage img { max-width: 100%; } #customPageForm { float: left; width: 350px; margin-top: 16px; } #customPageForm .sectionHeading { padding-bottom: 5px; } #privacyPolicyContainer, #paymentPolicyContainer { margin: 12px 20px 12px 12px; } /*====================== * admin edit links *=======================*/ div.componentRow div.componentEdit { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; } div.componentEdit div.icon { float: right; width: 21px; height: 21px; margin-left: 4px; background: url(../graphics/icon-gear-sprite.png) no-repeat top right; } div.componentEdit div.icon span { display: none; } div.componentEdit ul.componentEditLinks { display: none; float: right; width: 100px; border: 1px solid #ccc; border-bottom: 0; background: #eee; -moz-box-shadow: 2px 2px 6px #aaa; -webkit-box-shadow: 2px 2px 6px #aaa; box-shadow: 2px 2px 6px #aaa; } ul.componentEditLinks li { border-bottom: 1px solid #ccc; padding: 2px 6px; } ul.componentEditLinks a { font-size: 11px; font-weight: normal; } /* hover state */ div.componentRow div.componentEditActive { width: 140px; height: auto; } div.componentEditActive ul.componentEditLinks { display: block; } div.contentEditActive div.icon { background-position: 100% -21px; } div.componentRow a.editEmptySlot { font-weight: bold; font-size: 12px; } /*====================== * custom page imagery *=======================*/ .customPageImage { text-align: center; margin-bottom: 30px; } .customPageImage img { height: auto; } @media screen and (min-width: 801px) { .customPageImage img { max-width: 100%; } } @media screen and (max-width: 800px) { .customPageImage img { max-width: 90%; } }