/** * == NEW KC STYLESHEET == * Purpose: New main component styling, and can be paired with /kc/scripts/kc.js * Description: Contains new all-encompasing elements as well as utility classes **/ /**************************************************************************** SECTION 1: FOR INDIVIDUAL STYLE ADDITIONS ****************************************************************************/ /****************** MARGIN & PADDING ******************/ /*margins*/ #mc .mar3b { margin-bottom: 3px; } #mc .mar5b { margin-bottom: 5px; } #mc .mar7b { margin-bottom: 7px; } #mc .mar10b { margin-bottom: 10px; } #mc .mar15b { margin-bottom: 15px; } #mc .mar20b { margin-bottom: 20px; } #mc .mar3t { margin-top: 3px; } #mc .mar5t { margin-top: 5px; } #mc .mar7t { margin-top: 7px; } #mc .mar10t { margin-top: 10px; } #mc .mar15t { margin-top: 15px; } #mc .mar20t { margin-top: 20px; } #mc .mar0 { margin: 0px; } #mc .mar10 { margin: 10px; } #mc .mar10tb { margin-top: 10px; margin-bottom: 10px; } #mc .mar10lr { margin-left: 10px; margin-right: 10px; } #mc .mar15 { margin: 15px; } #mc .mar15tb { margin-top: 15px; margin-bottom: 15px; } #mc .mar15lr { margin-left: 15px; margin-right: 15px; } #mc .mar20 { margin: 20px; } #mc .mar20tb { margin-top: 20px; margin-bottom: 20px; } #mc .mar20lr { margin-left: 20px; margin-right: 20px; } /*paddings*/ #mc .pad3b { padding-bottom: 3px; } #mc .pad5b { padding-bottom: 5px; } #mc .pad7b { padding-bottom: 7px; } #mc .pad10b { padding-bottom: 10px; } #mc .pad15b { padding-bottom: 15px; } #mc .pad3t { padding-top: 3px; } #mc .pad5t { padding-top: 5px; } #mc .pad7t { padding-top: 7px; } #mc .pad10t { padding-top: 10px; } #mc .pad15t { padding-top: 15px; } #mc .pad0 { padding: 0px; } #mc .pad10 { padding: 10px; } #mc .pad10tb { padding-top: 10px; padding-bottom: 10px; } #mc .pad10lr { padding-left: 10px; padding-right: 10px; } #mc .pad15 { padding: 15px; } #mc .pad15tb { padding-top: 15px; padding-bottom: 15px; } #mc .pad15lr { padding-left: 15px; padding-right: 15px; } /****************** BORDERS ******************/ #mc .border1blue, #mc .border1primary { border: 1px solid #004687; } #mc .border2blue, #mc .border2primary { border: 2px solid #004687; } #mc .border3blue, #mc .border3primary { border: 3px solid #004687; } #mc .border5blue, #mc .border5primary { border: 5px solid #004687; } #mc .border1black { border: 1px solid #000; } #mc .border2black { border: 2px solid #000; } #mc .border3black { border: 3px solid #000; } #mc .border5black { border: 5px solid #000; } #mc .border1white { border: 1px solid #fff; } #mc .border2white { border: 2px solid #fff; } #mc .border3white { border: 3px solid #fff; } #mc .border5white { border: 5px solid #fff; } #mc .border1dark { border: 1px solid #002b5c; } #mc .border2dark { border: 2px solid #002b5c; } #mc .border3dark { border: 3px solid #002b5c; } #mc .border5dark { border: 5px solid #002b5c; } #mc .border1light { border: 1px solid #7ab2dd; } #mc .border2light { border: 2px solid #7ab2dd; } #mc .border3light { border: 3px solid #7ab2dd; } #mc .border5light { border: 5px solid #7ab2dd; } #mc .border1gold { border: 1px solid #C09A5B; } #mc .border2gold { border: 2px solid #C09A5B; } #mc .border3gold { border: 3px solid #C09A5B; } #mc .border5gold { border: 5px solid #C09A5B; } #mc .borderinset { border-style: inset; } #mc .borderoutset { border-style: outset; } #mc .borderdouble { border-style: double; } #mc .borderbottomhide { border-bottom-style: none; } #mc .bordertophide { border-top-style: none; } #mc .borderlefthide { border-left-style: none; } #mc .borderrighthide { border-right-style: none; } /*border rounding*/ #mc .round5 { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #mc .round10 { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #mc .round15 { border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } #mc .round5bottom { -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } #mc .round10bottom { -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } #mc .round15bottom { -webkit-border-bottom-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } /* ADD CSS BORDER GRADIENTS! */ /************************************* ALTERNATE COLORS & BACKGROUND COLORS **************************************/ #mc .whiteBg { background-color: #fff; } #mc .dark { color: #002b5c; } #mc .darkBg { background-color: #002b5c; } #mc .light { color: #7ab2dd; } #mc .lightBg { background-color: #7ab2dd; } #mc .gold { color: #c09a5b; } #mc .goldBg { background-color: #c09a5b; } #mc .black { color: #000 !important; } #mc .white { color: #fff !important; } /***************** BACKGROUND STYLES *****************/ /******** Add these! - needs adjusting for exhaustive info *********/ /* transparent */ #mc .transparentBg { background-color: transparent; } /* 100% (no) transparency & gradient background */ /* grey to white */ /* white to grey */ /* grey to white */ /* white to grey */ /* primary blue to white */ /* white to primary blue */ /* dark blue to white */ /* white to dark blue */ /* light blue to white */ /* white to light blue */ /* gold to white */ /* white to gold */ /* dark blue to light blue */ /* light blue to dark blue */ /*** 90% TRANSPARENCY BG ***/ /* grey to white */ /* white to grey */ /* grey to white */ /* white to grey */ /* primary blue to white */ /* white to primary blue */ /* dark blue to white */ /* white to dark blue */ /* light blue to white */ /* white to light blue */ /* gold to white */ /* white to gold */ /* dark blue to light blue */ /* light blue to dark blue */ /*** 75% TRANSPARENCY BG ***/ /* grey to white */ /* white to grey */ /* grey to white */ /* white to grey */ /* primary blue to white */ /* white to primary blue */ /* dark blue to white */ /* white to dark blue */ /* light blue to white */ /* white to light blue */ /* gold to white */ /* white to gold */ /* dark blue to light blue */ /* light blue to dark blue */ /*** 50% TRANSPARENCY BG ***/ /* grey to white */ /* white to grey */ /* grey to white */ /* white to grey */ /* primary blue to white */ /* white to primary blue */ /* dark blue to white */ /* white to dark blue */ /* light blue to white */ /* white to light blue */ /* gold to white */ /* white to gold */ /* dark blue to light blue */ /* light blue to dark blue */ /***************** FONTS & TEXT *****************/ /* adelle */ #mc .adelle { font-family: 'adelle',arial,sans-sreif; } /* bold */ #mc .bold { font-weight: bold; } /* small-caps */ #mc .smallcaps { font-variant: small-caps; } /* uppercase */ #mc .uppercase { text-transform: uppercase; } /* lowercase */ #mc .lowercase { text-transform: lowercase; } /* underline */ #mc .underline,.underline:hover { text-decoration: underline; } #mc .nounderline, .nounderline:hover { text-decoration: none; } /* italic */ #mc .italic { font-style: italic; } /* text-indent */ #mc .indenthide { text-indent: -999px; } #mc .indent0{ text-indent: 0px; } #mc .indent5{ text-indent: 5px; } #mc .indent10{ text-indent: 10px; } /****************** LAYOUT & DISPLAY ******************/ /*display*/ #mc .inline { display: inline; } #mc .block { display: block } /* visibility */ #mc .invisible { visibility: hidden; } /*position*/ #mc .relative{ position: relative; } /*overflow*/ #mc .overflowhide { overflow: hidden; } #mc .overflowxhide { overflow-x: hidden; } #mc .overflowyhide { overflow-y: hidden; } #mc .overflow250 { height: 250px; overflow: scroll; overflow-x: auto; } #mc .overflow300 { height: 300px; overflow: scroll; overflow-x: auto; } #mc .overflow350 { height: 350px; overflow: scroll; overflow-x: auto; } #mc .overflow400 { height: 400px; overflow: scroll; overflow-x: auto; } #mc .overflow500 { height: 500px; overflow: scroll; overflow-x: auto; } /****************** SHADOWS ******************/ /*text shadows*/ #mc .textshadowprimary { text-shadow: 1px 1px 1px #004687; -moz-text-shadow: 1px 1px 1px #004687; -webkit-text-shadow: 1px 1px 1px #004687; } #mc .textshadowblack { text-shadow: 1px 1px 1px #000; -moz-text-shadow: 1px 1px 1px #000; -webkit-text-shadow: 1px 1px 1px #000;} #mc .textshadowdark { text-shadow: 1px 1px 1px #002b5c; -moz-text-shadow: 1px 1px 1px #002b5c; -webkit-text-shadow: 1px 1px 1px #002b5c; } #mc .textshadowlight { text-shadow: 1px 1px 1px #7ab2dd; -moz-text-shadow: 1px 1px 1px #7ab2dd; -webkit-text-shadow: 1px 1px 1px #7ab2dd; } #mc .textshadowgold { text-shadow: 1px 1px 1px #c09a5b; -moz-text-shadow: 1px 1px 1px #c09a5b; -webkit-text-shadow: 1px 1px 1px #c09a5b; } #mc .textshadowwhite { text-shadow: 1px 1px 1px #fff; -moz-text-shadow: 1px 1px 1px #fff; -webkit-text-shadow: 1px 1px 1px #fff; } /* box shadows */ #mc .boxshadowprimary { box-shadow: 5px 5px 5px #004687; -moz-box-shadow: 5px 5px 5px #004687; -webkit-box-shadow: 5px 5px 5px #004687; } #mc .boxshadowwhite { box-shadow: 5px 5px 5px #fff; -moz-box-shadow: 5px 5px 5px #fff; -webkit-box-shadow: 5px 5px 5px #fff; } #mc .boxshadowblack { box-shadow: 5px 5px 5px #000; -moz-box-shadow: 5px 5px 5px #000; -webkit-box-shadow: 5px 5px 5px #000;} #mc .boxshadowdark { box-shadow: 5px 5px 5px #002b5c; -moz-box-shadow: 5px 5px 5px #002b5c; -webkit-box-shadow: 5px 5px 5px #002b5c; } #mc .boxshadowlight { box-shadow: 5px 5px 5px #7ab2dd; -moz-box-shadow: 5px 5px 5px #7ab2dd; -webkit-box-shadow: 5px 5px 5px #7ab2dd; } #mc .boxshadowgold { box-shadow: 5px 5px 5px #c09a5b; -moz-box-shadow: 5px 5px 5px #c09a5b; -webkit-box-shadow: 5px 5px 5px #c09a5b; } #mc .boxshadowprimarysmall { box-shadow: 2px 2px 3px #004687; -moz-box-shadow: 2px 2px 3px #004687; -webkit-box-shadow: 2px 2px 3px #004687; } #mc .boxshadowwhitesmall { box-shadow: 2px 2px 3px #fff; -moz-box-shadow: 2px 2px 3px #fff; -webkit-box-shadow: 2px 2px 3px #fff; } #mc .boxshadowblacksmall { box-shadow: 2px 2px 3px #000; -moz-box-shadow: 2px 2px 3px #000; -webkit-box-shadow: 2px 2px 3px #000;} #mc .boxshadowdarksmall { box-shadow: 2px 2px 3px #002b5c; -moz-box-shadow: 2px 2px 3px #002b5c; -webkit-box-shadow: 2px 2px 3px #002b5c; } #mc .boxshadowlightsmall { box-shadow: 2px 2px 3px #7ab2dd; -moz-box-shadow: 2px 2px 3px #7ab2dd; -webkit-box-shadow: 2px 2px 3px #7ab2dd; } #mc .boxshadowgoldsmall { box-shadow: 2px 2px 3px #c09a5b; -moz-box-shadow: 2px 2px 3px #c09a5b; -webkit-box-shadow: 2px 2px 3px #c09a5b; } /****************** UTILITIES ******************/ #mc .transitionbg { transition: background .5s ease; -webkit-transition: background .5s ease; -moz-transition: background .5s ease; } #mc .transitioncolor { transition: color .5s ease; -webkit-transition: color .5s ease; -moz-transition: color .5s ease; } #mc .transitionborder { transition: border .5s ease; -webkit-transition: border .5s ease; -moz-transition: border .5s ease; } #mc .transitionboxshadow { transition: box-shadow .5s ease; -webkit-transition: box-shadow .5s ease; -moz-transition: box-shadow .5s ease; } #mc .transitionopacity { transition: opacity .5s ease; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; } #mc .transitionsize { transition: height .5s ease, width .5s ease; -webkit-transition: height .5s ease, width .5s ease; -moz-transition: height .5s ease, width .5s ease; } /************ Add these!! *************/ /* image sprites */ /* sprite play button */ /*usage:
img + div.play{ background: transparent url('http://mlb.mlb.com/images/media/sprite_media.png') no-repeat; height: 37px; width: 37px; margin: auto; } */ /*********** ADD MORE! ************ Icons - video? - audio? - gameday link? */ /* before & after links */ #mc a.link:after { content: " »"; } #mc a.back:before { content: "« "; } /* cursor */ #mc .pointer { cursor: pointer; } /* Hover Colors */ #mc .hoverprimary:hover, a.hoverprimary:hover { color: #004687; } #mc .hoverwhite:hover, a.hoverwhite:hover { color: #fff; } #mc .hoverblack:hover, a.hoverblack:hover { color: #000; } #mc .hoverdark:hover, a.hoverdark:hover { color: #002b5c; } #mc .hoverlight:hover, a.hoverlight:hover { color: #7ab2dd; } #mc .hovergold:hover, a.hovergold:hover { color: #c09a5b; } /* Hover Box Shadows */ #mc .hovershadowprimary:hover { box-shadow: 5px 5px 5px #004687; -moz-box-shadow: 5px 5px 5px #004687; -webkit-box-shadow: 5px 5px 5px #004687; } #mc .hovershadowblack:hover { box-shadow: 5px 5px 5px #000; -moz-box-shadow: 5px 5px 5px #000; -webkit-box-shadow: 5px 5px 5px #000;} #mc .hovershadowwhite:hover { box-shadow: 5px 5px 5px #fff; -moz-box-shadow: 5px 5px 5px #fff; -webkit-box-shadow: 5px 5px 5px #fff;} #mc .hovershadowdark:hover { box-shadow: 5px 5px 5px #002b5c; -moz-box-shadow: 5px 5px 5px #002b5c; -webkit-box-shadow: 5px 5px 5px #002b5c; } #mc .hovershadowlight:hover { box-shadow: 5px 5px 5px #7ab2dd; -moz-box-shadow: 5px 5px 5px #7ab2dd; -webkit-box-shadow: 5px 5px 5px #7ab2dd; } #mc .hovershadowgold:hover { box-shadow: 5px 5px 5px #c09a5b; -moz-box-shadow: 5px 5px 5px #c09a5b; -webkit-box-shadow: 5px 5px 5px #c09a5b; } #mc .hoverboxshadowprimarysmall:hover { box-shadow: 2px 2px 3px #004687; -moz-box-shadow: 2px 2px 3px #004687; -webkit-box-shadow: 2px 2px 3px #004687; } #mc .hoverboxshadowwhitesmall:hover { box-shadow: 2px 2px 3px #fff; -moz-box-shadow: 2px 2px 3px #fff; -webkit-box-shadow: 2px 2px 3px #fff; } #mc .hoverboxshadowblacksmall:hover { box-shadow: 2px 2px 3px #000; -moz-box-shadow: 2px 2px 3px #000; -webkit-box-shadow: 2px 2px 3px #000;} #mc .hoverboxshadowdarksmall:hover { box-shadow: 2px 2px 3px #002b5c; -moz-box-shadow: 2px 2px 3px #002b5c; -webkit-box-shadow: 2px 2px 3px #002b5c; } #mc .hoverboxshadowlightsmall:hover { box-shadow: 2px 2px 3px #7ab2dd; -moz-box-shadow: 2px 2px 3px #7ab2dd; -webkit-box-shadow: 2px 2px 3px #7ab2dd; } #mc .hoverboxshadowgoldsmall:hover { box-shadow: 2px 2px 3px #c09a5b; -moz-box-shadow: 2px 2px 3px #c09a5b; -webkit-box-shadow: 2px 2px 3px #c09a5b; } /* hover text shadows */ #mc .hovertextshadowprimary:hover, #mc a.hovertextshadowprimary:hover { text-shadow: 1px 1px 1px #004687; -moz-text-shadow: 1px 1px 1px #004687; -webkit-text-shadow: 1px 1px 1px #004687; } #mc .hovertextshadowblack:hover, #mc a.hovertextshadowblack:hover { text-shadow: 1px 1px 1px #000; -moz-text-shadow: 1px 1px 1px #000; -webkit-text-shadow: 1px 1px 1px #000;} #mc .hovertextshadowdark:hover, #mc a.hovertextshadowdark:hover { text-shadow: 1px 1px 1px #002b5c; -moz-text-shadow: 1px 1px 1px #002b5c; -webkit-text-shadow: 1px 1px 1px #002b5c; } #mc .hovertextshadowlight:hover, #mc a.hovertextshadowlight:hover { text-shadow: 1px 1px 1px #7ab2dd; -moz-text-shadow: 1px 1px 1px #7ab2dd; -webkit-text-shadow: 1px 1px 1px #7ab2dd; } #mc .hovertextshadowgold:hover, #mc a.hovertextshadowgold:hover { text-shadow: 1px 1px 1px #c09a5b; -moz-text-shadow: 1px 1px 1px #c09a5b; -webkit-text-shadow: 1px 1px 1px #c09a5b; } #mc .hovertextshadowwhite:hover, #mc a.hovertextshadowwhite:hover { text-shadow: 1px 1px 1px #fff; -moz-text-shadow: 1px 1px 1px #fff; -webkit-text-shadow: 1px 1px 1px #fff; } /* hover backgrounds */ #mc .whiteBghover:hover { background-color: #fff; } #mc .darkBghover:hover { background-color: #002b5c; } #mc .lightBghover:hover { background-color: #7ab2dd; } #mc .goldBghover:hover { background-color: #c09a5b; } #mc .primaryBghover:hover { background-color: #004687; } #mc .tertiaryBghover:hover { background-color: #ccc; } /* hover for buttons */ /* object transparency */ #mc .trans95 { opacity: .95; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; filter: alpha(opacity=95); } #mc .trans90 { opacity: .90; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter: alpha(opacity=90); } #mc .trans80 { opacity: .80; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); } #mc .trans70 { opacity: .70; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); } #mc .trans50 { opacity: .50; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); } #mc .trans10 { opacity: .10; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); } /**************** WIDTH & HEIGHT ****************/ /* height */ #mc .height500 { height: 500px; } #mc .height350 { height: 350px; } #mc .height300 { height: 300px; } #mc .height250 { height: 250px; } #mc .height200 { height: 200px; } #mc .height150 { height: 150px; } #mc .height100 { height: 100px; } #mc .height50 { height: 50px; } /* width */ #mc .width649 { width: 649px; } #mc .width500 { width: 500px; } #mc .width350 { width: 350px; } #mc .width300 { width: 300px; } #mc .width250 { width: 250px; } #mc .width200 { width: 200px; } #mc .width150 { width: 150px; } #mc .width100 { width: 100px; } #mc .width50 { width: 50px; } /**************************************************************************** SECTION 2: ALL-ENCOMPASING DESIGNS ****************************************************************************/ /********************* HEADERS *********************/ /* Image/item spans the top of the page as a header */ #mc div#header, #mc img#header { width: 649px; margin-bottom: 10px; } /* Standard page header */ #mc h3 { background: #fff url(/kc/images/headers/kc_subhead_649.jpg) no-repeat left top; height: 43px !important; margin-bottom: 2px; text-align: right; padding: 10px 10px 0 0 !important; color: #ffffff; text-transform: uppercase; font-family: 'adelle',helvetica,arial,sans-serif; font-size: 20pt !important; text-shadow: 2px 2px 2px #000; -moz-text-shadow: 2px 2px 2px #000; -webkit-text-shadow: 2px 2px 2px #000; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 4px #777; -moz-box-shadow: 2px 2px 4px #777; -webkit-box-shadow: 2px 2px 4px #777; } #mc h3.big { background: #fff url(/kc/images/headers/kc_subhead_700.jpg) no-repeat left top; height: 53px !important; } #mc h3.long { background: #fff url(/kc/images/headers/kc_subhead_1000.jpg) no-repeat left top; height: 63px !important; line-height: 45px !important; } #mc h3.blank { background-image: none; } /* First level page headers: BG Blue, STRIPE Gold */ #mc h4.header { border-top: 3px solid #c09a5b; background-color: #004687; color: #FFFFFF; font-family: 'adelle',helvetica,arial,sans-serif; font-size: 17px; margin: 6px 0px 4px; padding: 2px; text-indent: 0px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #mc h4 { border: 0px none #c09a5b; background-color: transparent; color: #004687; font-family: 'adelle',helvetica,arial,sans-serif; font-size: 17px; margin: 6px 0px 4px; padding: 2px; text-indent: 0px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; } #mc h5 { margin-top: 5px; margin-bottom: 3px; color: #004687; padding: 1px; font-size: 14px; } /* second level page header: BG blue, STRIPE Gold */ #mc h5.header { border-top: 2px solid #c09a5b; background-color: #004687; color: #fff; font-size: 13px; text-indent: 5px; padding: 2px; text-transform: uppercase; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } /* "Fakeout" paragraph header */ #mc p.header { font-weight: bold; font-size: 14px; } /*************** CONTAINERS ***************/ /* standard container (high-level use) */ #mc div.container { padding: 5px; margin-top: 5px; } #mc div.box{ border: 1px solid #004687; padding: 5px; margin: 10px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 4px #aaa; -moz-box-shadow: 2px 2px 4px #aaa; -webkit-box-shadow: 2px 2px 4px #aaa; } /*TABLES*/ #mc table { margin: 0 auto 10px auto;} #mc table caption {display:none;} #mc th, #mc td {padding: 2px 2px;} #mc tr.odd {background-color:#ddd;} #mc tr.even {background-color:#eee;} /* pricing grid */ #mc table.pricing {width:100%; margin: 0 auto 10px auto; background-color: #fff; border-spacing: 0 1px; font-weight: bold; } #mc table.pricing caption {display:none;} #mc table.pricing th, #mc table.pricing td {padding: 3px;} #mc table.pricing th { background-color: #004687; font-weight: bold; color: #fff; text-transform: uppercase; text-indent: .5em; } #mc table.pricing td { font-size: 11px; } #mc table.pricing tr { transition: background .5s ease; -webkit-transition: background .5s ease; -moz-transition: background .5s ease; } #mc table.pricing tr.odd {background-color:#ddd;} #mc table.pricing tr.even {background-color:#eee;} #mc table.pricing tr:hover, #mc table.pricing tr:hover td { background-color: #004687; color: #fff; } #mc table.pricing tr:hover td a { color: #fff; } /* pricing grid - seating colors */ #mc table.pricing tr td div { font-weight: bold; margin: 0px 2px; height: 10px; width: 10px;float: left; border: 1px solid #fff; box-shadow: 1px 1px 1px #aaa; -moz-box-shadow: 1px 1px 1px #aaa; -webkit-box-shadow: 1px 1px 1px #aaa; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } /* seating color box */ #mc table.pricing .bats { background-color: #67533b; color: #fff; } #mc table.pricing .diamondbox { background-color: #818285; color: #fff; } #mc table.pricing .diamondseats { background-color: #d1d2d4; color: #fff; } #mc table.pricing .dugoutbox { background-color: #0f034e; color: #fff; } #mc table.pricing .dugoutplaza { background-color: #005aab; color: #fff; } #mc table.pricing .fieldbox { background-color: #aae0fa; color: #fff; } #mc table.pricing .fieldplaza { background-color: #30a4dc; color: #fff; } #mc table.pricing .loge { background-color: #592149; color: #fff; } #mc table.pricing .outfieldbox { background-color: #437c46; color: #fff; } #mc table.pricing .fountain { background-color: #88b861; color: #fff; } #mc table.pricing .hyveebox { background-color: #eb6e1f; color: #fff; } #mc table.pricing .hyveeinfield { background-color: #f8981d; color: #fff; } #mc table.pricing .hyveeoutfield { background-color: #ffd204; color: #fff; } /* ticket grid */ #mc .data_grid .hdrTopBg { background-color: #004687; } #mc .data_grid .tlink { width: 20px; } /* assuming small t-link button, but larger t-link button pushes this wider */ #mc .data_grid .game_date { width: 70px; } #mc .data_grid .game_time { width: 45px; } #mc .data_grid .opponent { width: 60px; text-align: center; } #mc .data_grid .venue { width: 80px; text-align: center; } #mc .data_grid { border: 0px solid #333; border-spacing: 0px 1px; } #mc .data_grid th { text-transform: uppercase; color: #FFF; font-weight: bold; } #mc .data_grid td { font-size:11px; } #mc .data_grid tbody tr { background: none repeat scroll 0 0 #eee; transition: background .5s ease; -webkit-transition: background .5s ease; -moz-transition: background .5s ease; } #mc .data_grid tr.odd { background: none repeat scroll 0 0 #ddd; } #mc .data_grid img { border-style: none; border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px; } #mc table.data_grid tr:hover, #mc table.data_grid tr:hover td { background-color: #004687; color: #fff; } #mc table.data_grid tr:hover td a { color: #fff; } /* ticket grid - grid layout for single game inline layout */ /* use a
around the ticket grid */ #mc div.inline .data_grid { border-style: none; font-weight: bold; } #mc div.inline .data_grid th { display: none; } #mc div.inline .data_grid tr td { float: left; clear: both; text-align: center; width: 100%; } #mc div.inline .data_grid tr { text-align: center; margin: auto; } /* table-header freeze */ /* #mc div.freeze .data_grid .hdrTopBg { position: absolute; } */ /* MLB fluid layout styling .row_b .feature { margin: auto; background-color: #ccc; border: 2px outset #000; padding: 2px 5px; } .column p { background-color: #ddd; border: 2px outset #ddd; height: 180px; line-height: 150%;} */ /* lists & definitions */ /* ul/li */ #mc ul.list { padding: 3px; } #mc ul.list li { text-indent: 5px; margin: 5px; } /* dl/dd/dt */ #mc dl { margin: 3px 1px; padding: 3px; } #mc dt { font-weight: bold; margin-top: 2px; } #mc dd { font-weight: normal; } /* BAM SOCIAL BUTTONS */ /*

Share:

*/ #mc #social_sharing { margin-bottom: 10px; } #mc #social_sharing ul li { display: inline; } #mc #social_sharing ul li a {padding: 3px 10px 3px 25px;} #mc .f2f a { background: url('/images/fan_forum/gift_guide/20x15_email_icon.gif') center left no-repeat; padding: 4px; padding-left: 25px; text-decoration: none;} #mc .facebook a { background: url('/shared/images/social_icons.gif') no-repeat 0 3px; padding: 4px; padding-left: 25px; text-decoration: none;} #mc .twitter a { background: url('/shared/images/social_icons.gif') no-repeat 0 -58px; padding: 4px; padding-left: 25px; text-decoration: none; } #mc .twitter, .facebook, .f2f { background-color: #ccc; padding: 5px; -moz-border-radius: 10px; border-radius: 10px; border: 1px solid #ddd; -moz-box-shadow: 2px 2px 2px #aaa; box-shadow: 2px 2px 2px #aaa; margin-right: 10px; margin-top: 10px; } #mc .twitter:hover, .facebook:hover, .f2f:hover { border-color: #ccc; -moz-box-shadow: 2px 2px 2px #ddd; box-shadow: 2px 2px 2px #ddd; color: #004687; } /* social icons 16px width */ #mc .f2flogo { background: url("/images/fan_forum/gift_guide/20x15_email_icon.gif") no-repeat scroll 0 0 transparent; } #mc .facebooklogo { background: url("/shared/images/social_icons.gif") no-repeat scroll 0 0 transparent; } #mc .twitterlogo { background: url("/shared/images/social_icons.gif") no-repeat scroll 0 -60px transparent; } /*************** ELEMENTS ***************/ /*** IMAGES ***/ /* image container with caption */ #mc div.imagecontainer { margin: 5px; padding: 0px; } #mc div.imagecontainer img { margin: 0px; padding: 5px; padding-bottom: 0px; } #mc div.imagecontainer .caption { margin: 0px; padding: 3px; padding-top: 2px; } /* porprotionalize */ #mc img.scale50 { height: 50%; width: 50%; } #mc img.scale75 { height: 75%; width: 75% } /*** LINKS ***/ #mc a { font-weight: bold; text-decoration: none; } #mc a:hover { text-decoration: underline; } /*** BUTTONS ***/ #mc a.bam-button { color: #fff; } #mc a.bam-button-secondary { color: #525252; } /* LEGACY */ /* global components */ #mc .cta {margin: -5px 0 10px 0;font-weight:bold;display:block;} #mc dd {line-height: 18px;} #mc dd.grey { background-color:#ddd; color: #000000;} #mc .details {font-size:11px;} #mc dl {padding:0 0 2px 0;} #mc dt {line-height: 18px;font-weight:bold;font-size:13px} #mc .event_box {margin:5px;padding:0px;background-color:#fff;border:2px solid #004687;} #mc .event_box_headline {text-align:left;color:#fff;background-color:#004687;padding:3px;margin:0px;font-weight:bold;text-transform:uppercase;font-size:14px;} #mc .event_box .subhead {color:#000000;} #mc .event_box_item {padding:3px;} #mc .ltblue_box {margin:3px;padding:7px;border:2px solid #6caee0;} /* #mc h3 {padding:0 0 13px 0;} #mc h3.header {font-size:18px;font-weight:bold;padding:0 0 0 0;} #mc h4 {font-size:15px;font-weight:bold;padding:4px 0;} #mc h4.blue {font-size:14px;font-weight:bold;background-color:#004687;color:#fff;text-transform:uppercase;padding-left:3px;height:14px;margin-bottom:4px;} #mc h5 {font: bold 13px Arial, Helvetica,sans-serif; background-color: #004687; color: #fff; padding-left: 3px; margin-top: 12px; margin-bottom: 2px;} #mc h6 {font-size:12px;font-weight:bold;} */ #mc .hidden {display:none;} #mc .image_border {border:1px solid #000;} #mc .no_border {border:0px;} #mc ol {list-style: decimal outside;}* #mc p {padding: 1px 0 5px 0;} #mc .price {font-size:14px;font-weight:bold;color:#cc0000; padding:3px;display:block;} #mc span.button.content a {color: #000;} #mc span.button.purchase a {color: #000;} #mc div.sweepstakes {display:block;margin-left:auto;margin-right:auto;} #mc .fine_print {background-color:#eee;border:1px solid #000;margin:0 0 10px 0;font-size:11px;padding:3px;} #mc .right_photo_image {border:1px solid #004687;} #mc .right_photo_caption {color:#fff;font-size:10px;padding:3px;border: 1px solid #004687;margin:1px 0 10px 0;text-align:left;} #mc .baseball_list li { padding-left: 20px; background-image: url(/kc/images/ballpark/y2009/ball_bullet_15x15.gif); background-repeat: no-repeat; list-style-position: outside; padding-bottom: 5px; } #mc .right_content {border-left:1px solid #999999;padding-left:3px;} #mc .greybox {padding:2px;border:1px solid #C9CFd6;margin-bottom:6px;background:url(/style/subindex/images/module_bg_gray.gif) bottom left repeat-x; }