.tsc_ribbon_wrap { background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 5px 5px 5px 5px; height: 130px; margin-bottom: 3px; position: relative; text-align: center; width: 650px; } .tsc_ribbon_wrap > div { margin-bottom: 40px; } .tsc_ribbon_wrap > div:last-of-type { margin-bottom: 0; } .tsc_ribbon_wrap:before, .tsc_ribbon_wrap:after { content: ""; display: table; } .tsc_ribbon_wrap:after { clear: both; } .tsc_ribbon_wrap { } .tsc_ribbon_wrap .ribbon-wrap { color: #FFFFFF; position: absolute; text-align: center; z-index: 0; } .tsc_ribbon_wrap .ribbon-wrap > span { display: block; height: 100%; position: relative; } .tsc_ribbon_wrap .ribbon-wrap > span:before, .tsc_ribbon_wrap .ribbon-wrap > span:after { content: ""; position: absolute; z-index: -1; } .tsc_ribbon_wrap .ribbon-wrap:before, .tsc_ribbon_wrap .ribbon-wrap:after { content: ""; position: absolute; z-index: -2; } .tsc_ribbon_wrap.edge { position: relative; } .tsc_ribbon_wrap .left-edge.point { border-radius: 5px 0 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); height: 40px; left: -5px; line-height: 40px; top: 20px; width: 120px; } .tsc_ribbon_wrap.ie8 .left-edge.point { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); left: 0; } .tsc_ribbon_wrap .left-edge.point > span { border-radius: 5px 0 0 0; } .tsc_ribbon_wrap.ie .left-edge.point > span { } .tsc_ribbon_wrap .left-edge.point:before { border-color: transparent; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 5px; bottom: -5px; left: 0; transform: rotate(-45deg); } .tsc_ribbon_wrap .left-edge.point:after { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); height: 28px; margin-top: -14px; right: -14px; top: 50%; transform: rotate(45deg); transform-origin: center center 0; width: 28px; } .tsc_ribbon_wrap.ie8 .left-edge.point:before, .tsc_ribbon_wrap.ie8 .left-edge.point:after { border-radius: 0 0 0 0; display: none; } .tsc_ribbon_wrap .right-edge.point { border-radius: 0 5px 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); height: 40px; line-height: 40px; right: -5px; top: 20px; width: 120px; } .tsc_ribbon_wrap.ie8 .right-edge.point { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); right: 0; } .tsc_ribbon_wrap .right-edge.point > span { border-radius: 0 5px 0 0; } .tsc_ribbon_wrap.ie .right-edge.point > span { } .tsc_ribbon_wrap .right-edge.point:before { border-color: transparent; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 4px; bottom: -5px; right: 0; transform: rotate(45deg); } .tsc_ribbon_wrap .right-edge.point:after { box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); height: 28px; left: -14px; margin-top: -14px; top: 50%; transform: rotate(45deg); transform-origin: center center 0; width: 28px; } .tsc_ribbon_wrap.ie8 .right-edge.point:before, .tsc_ribbon_wrap.ie8 .right-edge.point:after { border-radius: 0 0 0 0; display: none; } .tsc_ribbon_wrap .left-edge.fork { border-radius: 5px 0 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); height: 40px; left: -5px; line-height: 40px; top: 20px; width: 120px; } .tsc_ribbon_wrap.ie8 .left-edge.fork { border-radius: 0 0 0 0; box-shadow: none !important; left: 0; } .tsc_ribbon_wrap .left-edge.fork > span { border-radius: 5px 0 0 0; } .tsc_ribbon_wrap .left-edge.fork > span:before { border-color: transparent; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 5px; bottom: -5px; left: 0; transform: rotate(-45deg); } .tsc_ribbon_wrap.ie8 .left-edge.fork > span:before { display: none; } .tsc_ribbon_wrap .left-edge.fork > span:after { border-style: solid; border-width: 20px; right: -20px; top: 0; } .tsc_ribbon_wrap .left-edge.fork:before { background: none repeat scroll 0 0 #666666; bottom: 5px; box-shadow: 25px 8px 4px rgba(0, 0, 0, 0.5); height: 20px; right: 22px; transform: rotate(-22deg) skew(18deg, 28deg); width: 80px; } .tsc_ribbon_wrap .left-edge.fork:after { background: none repeat scroll 0 0 #666666; box-shadow: 20px -5px 4px rgba(0, 0, 0, 0.5); height: 20px; right: 22px; top: 5px; transform: rotate(32deg) skew(-18deg, -28deg); width: 80px; } .tsc_ribbon_wrap.ie8 .left-edge.fork:before, .tsc_ribbon_wrap.ie8 .left-edge.fork:after { display: none; } .tsc_ribbon_wrap .right-edge.fork { border-radius: 0 5px 0 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); height: 40px; line-height: 40px; right: -5px; top: 20px; width: 120px; } .tsc_ribbon_wrap.ie8 .right-edge.fork { border-radius: 0 0 0 0; box-shadow: none !important; right: 0; } .tsc_ribbon_wrap .right-edge.fork > span { border-radius: 0 5px 0 0; } .tsc_ribbon_wrap .right-edge.fork > span:before { border-color: transparent; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 5px; bottom: -5px; right: 0; transform: rotate(45deg); } .tsc_ribbon_wrap.ie8 .right-edge.fork > span:before { display: none; } .tsc_ribbon_wrap .right-edge.fork > span:after { border-style: solid; border-width: 20px; left: -20px; top: 0; } .tsc_ribbon_wrap .right-edge.fork:before { background: none repeat scroll 0 0 #666666; bottom: 5px; box-shadow: -25px 8px 4px rgba(0, 0, 0, 0.5); height: 20px; left: 22px; transform: rotate(22deg) skew(-18deg, -28deg); width: 80px; } .tsc_ribbon_wrap .right-edge.fork:after { background: none repeat scroll 0 0 #666666; box-shadow: -20px -5px 4px rgba(0, 0, 0, 0.5); height: 20px; left: 22px; top: 5px; transform: rotate(-32deg) skew(18deg, 28deg); width: 80px; } .tsc_ribbon_wrap.ie8 .right-edge.fork:before, .tsc_ribbon_wrap.ie8 .right-edge.fork:after { display: none; } .tsc_ribbon_wrap.ie8 .lblue, .tsc_ribbon_wrap .lblue > span, .tsc_ribbon_wrap .lblue.left-corner > span:before, .tsc_ribbon_wrap .lblue.left-corner > span:after, .tsc_ribbon_wrap .lblue.right-corner > span, .tsc_ribbon_wrap .lblue.right-corner > span:before, .tsc_ribbon_wrap .lblue.right-corner > span:after { background-color: #42A5D4; background-image: -moz-linear-gradient(center top , #42A5D4, #24769D); } .tsc_ribbon_wrap .lblue.left-corner:before { border-bottom-color: #174C66; border-left-color: #174C66; } .tsc_ribbon_wrap .lblue.left-corner:after { border-right-color: #174C66; border-top-color: #174C66; } .tsc_ribbon_wrap .lblue.right-corner:before { border-left-color: #174C66; border-top-color: #174C66; } .tsc_ribbon_wrap .lblue.right-corner:after { border-bottom-color: #174C66; border-right-color: #174C66; } .tsc_ribbon_wrap .lblue.left-edge.point:after, .tsc_ribbon_wrap .lblue.right-edge.point:after { background-color: #42A5D4; background-image: linear-gradient(-45deg, #42A5D4, #24769D); } .tsc_ribbon_wrap .lblue.left-edge:before { border-left-color: #174C66; border-top-color: #174C66; } .tsc_ribbon_wrap .lblue.right-edge:before { border-right-color: #174C66; border-top-color: #174C66; } .tsc_ribbon_wrap .lblue.left-edge.fork > span { background-color: #42A5D4; background-image: -moz-linear-gradient(left center , #42A5D4 0px, #42A5D4 5px, #24769D 15%, #24769D 65%, #42A5D4 100%); } .tsc_ribbon_wrap.ie8 .lblue.left-edge.fork > span { } .tsc_ribbon_wrap .lblue.left-edge.fork > span:after { border-color: #42A5D4 transparent #42A5D4 #42A5D4; } .tsc_ribbon_wrap .lblue.left-edge.fork > span:before { border-left-color: #174C66; border-top-color: #174C66; } .tsc_ribbon_wrap .lblue.right-edge.fork > span { background-color: #42A5D4; background-image: -moz-linear-gradient(right center , #42A5D4 0px, #42A5D4 5px, #24769D 15%, #24769D 65%, #42A5D4 100%); } .tsc_ribbon_wrap.ie8 .lblue.right-edge.fork > span { } .tsc_ribbon_wrap .lblue.right-edge.fork > span:after { border-color: #42A5D4 #42A5D4 #42A5D4 transparent; } .tsc_ribbon_wrap .lblue.right-edge.fork > span:before { border-right-color: #174C66; border-top-color: #174C66; } .tsc_ribbon_wrap.ie8 .lred, .tsc_ribbon_wrap .lred > span, .tsc_ribbon_wrap .lred.left-corner > span:before, .tsc_ribbon_wrap .lred.left-corner > span:after, .tsc_ribbon_wrap .lred.right-corner > span, .tsc_ribbon_wrap .lred.right-corner > span:before, .tsc_ribbon_wrap .lred.right-corner > span:after { background-color: #F80000; background-image: -moz-linear-gradient(center top , #F80000, #A30000); } .tsc_ribbon_wrap .lred.left-corner:before { border-bottom-color: #5F0000; border-left-color: #5F0000; } .tsc_ribbon_wrap .lred.left-corner:after { border-right-color: #5F0000; border-top-color: #5F0000; } .tsc_ribbon_wrap .lred.right-corner:before { border-left-color: #5F0000; border-top-color: #5F0000; } .tsc_ribbon_wrap .lred.right-corner:after { border-bottom-color: #5F0000; border-right-color: #5F0000; } .tsc_ribbon_wrap .lred.left-edge.point:after, .tsc_ribbon_wrap .lred.right-edge.point:after { background-color: #F80000; background-image: linear-gradient(-45deg, #F80000, #A30000); } .tsc_ribbon_wrap .lred.left-edge:before { border-left-color: #5F0000; border-top-color: #5F0000; } .tsc_ribbon_wrap .lred.right-edge:before { border-right-color: #5F0000; border-top-color: #5F0000; } .tsc_ribbon_wrap .lred.left-edge.fork > span { background-color: #F80000; background-image: -moz-linear-gradient(left center , #F80000 0px, #F80000 5px, #A30000 15%, #A30000 65%, #F80000 100%); } .tsc_ribbon_wrap.ie8 .lred.left-edge.fork > span { } .tsc_ribbon_wrap .lred.left-edge.fork > span:after { border-color: #F80000 transparent #F80000 #F80000; } .tsc_ribbon_wrap .lred.left-edge.fork > span:before { border-left-color: #5F0000; border-top-color: #5F0000; } .tsc_ribbon_wrap .lred.right-edge.fork > span { background-color: #F80000; background-image: -moz-linear-gradient(right center , #F80000 0px, #F80000 5px, #A30000 15%, #A30000 65%, #F80000 100%); } .tsc_ribbon_wrap.ie8 .lred.right-edge.fork > span { } .tsc_ribbon_wrap .lred.right-edge.fork > span:after { border-color: #F80000 #F80000 #F80000 transparent; } .tsc_ribbon_wrap .lred.right-edge.fork > span:before { border-right-color: #5F0000; border-top-color: #5F0000; } .tsc_ribbon_hang { margin-bottom: 60px; } .tsc_ribbon_hang:last-child { margin-bottom: 0; } .tsc_ribbon_hang > div { display: inline-block; margin: 0 40px 40px 0; } .tsc_ribbon_hang > div:last-of-type { margin-right: 0; } .tsc_ribbon_hang .ribbon-bookmark { border-radius: 3px 3px 0 0; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); color: #FFFFFF; margin: 20px auto; position: relative; text-align: center; z-index: 0; } .tsc_ribbon_hang.ie8 .ribbon-bookmark { box-shadow: none; } .tsc_ribbon_hang .ribbon-bookmark > span { border-radius: 3px 3px 0 0; display: block; position: relative; } .tsc_ribbon_hang .ribbon-bookmark.small > span { height: 82px; line-height: 82px; width: 50px; } .tsc_ribbon_hang .ribbon-bookmark.medium > span { height: 124px; line-height: 124px; width: 80px; } .tsc_ribbon_hang .ribbon-bookmark.large > span { height: 166px; line-height: 166px; width: 120px; } .tsc_ribbon_hang .ribbon-bookmark > span:before, .tsc_ribbon_hang.ie8 .ribbon-bookmark .fork { border-style: solid; content: ""; left: 0; position: absolute; top: 100%; z-index: -1; } .tsc_ribbon_hang.ie8 .ribbon-bookmark > span:before { display: none; } .tsc_ribbon_hang .small > span:before, .tsc_ribbon_hang.ie8 .small .fork { border-width: 25px; margin-top: -25px; } .tsc_ribbon_hang .medium > span:before, .tsc_ribbon_hang.ie8 .medium .fork { border-width: 40px; margin-top: -40px; } .tsc_ribbon_hang .large > span:before, .tsc_ribbon_hang.ie8 .large .fork { border-width: 60px; margin-top: -60px; } .tsc_ribbon_hang .ribbon-bookmark:before { background: none repeat scroll 0 0 #666666; box-shadow: 0 6px 2px rgba(0, 0, 0, 0.5), -1px -1px 2px rgba(0, 0, 0, 0.5); content: ""; left: 1px; position: absolute; transform: skew(-20deg, -38deg) rotate(-20deg); transform-origin: 0 0 0; z-index: -2; } .tsc_ribbon_hang .ribbon-bookmark:after { background: none repeat scroll 0 0 #666666; box-shadow: 0 7px 2px rgba(0, 0, 0, 0.5), 1px -1px 2px rgba(0, 0, 0, 0.5); content: ""; position: absolute; right: 1px; transform: skew(20deg, 38deg) rotate(20deg); transform-origin: right 0 0; z-index: -2; } .tsc_ribbon_hang.ie8 .ribbon-bookmark:before, .tsc_ribbon_hang.ie8 .ribbon-bookmark:after { display: none; } .tsc_ribbon_hang .ribbon-bookmark.small:before, .tsc_ribbon_hang .ribbon-bookmark.small:after { bottom: -35px; height: 35px; width: 25px; } .tsc_ribbon_hang .ribbon-bookmark.medium:before, .tsc_ribbon_hang .ribbon-bookmark.medium:after { bottom: -55px; height: 55px; width: 40px; } .tsc_ribbon_hang .ribbon-bookmark.large:before, .tsc_ribbon_hang .ribbon-bookmark.large:after { bottom: -85px; height: 85px; width: 60px; } .tsc_ribbon_hang .ribbon-bookmark.small:before { box-shadow: 0 3px 2px rgba(0, 0, 0, 0.5), -1px -1px 2px rgba(0, 0, 0, 0.5); } .tsc_ribbon_hang .ribbon-bookmark.small:after { box-shadow: 0 5px 2px rgba(0, 0, 0, 0.5), 1px -1px 2px rgba(0, 0, 0, 0.5); } .tsc_ribbon_hang .ie8 .ribbon-bookmark.small { box-shadow: none; } .tsc_ribbon_hang .lblue { background: none repeat scroll 0 0 #42A5D4; } .tsc_ribbon_hang .lblue > span { background-color: #42A5D4; background-image: -moz-linear-gradient(center top , #42A5D4, #24769D); } .tsc_ribbon_hang .lblue > span:before, .tsc_ribbon_hang.ie8 .lblue .fork { border-color: #24769D #24769D transparent; } .tsc_ribbon_hang .lred { background: none repeat scroll 0 0 #F80000; } .tsc_ribbon_hang .lred > span { background-color: #F80000; background-image: -moz-linear-gradient(center top , #F80000, #A30000); } .tsc_ribbon_hang .lred > span:before, .tsc_ribbon_hang.ie8 .lred .fork { border-color: #A30000 #A30000 transparent; } .tsc_ribbon_hang .lgreen { background: none repeat scroll 0 0 #80B73D; } .tsc_ribbon_hang .lgreen > span { background-color: #80B73D; background-image: -moz-linear-gradient(center top , #80B73D, #547728); } .tsc_ribbon_hang .lgreen > span:before, .tsc_ribbon_hang.ie8 .lgreen .fork { border-color: #547728 #547728 transparent; } .tsc_ribbon_hang .lyellow { background: none repeat scroll 0 0 #FFC037; } .tsc_ribbon_hang .lyellow > span { background-color: #FFC037; background-image: -moz-linear-gradient(center top , #FFC037, #E19A00); } .tsc_ribbon_hang .lyellow > span:before, .tsc_ribbon_hang.ie8 .lyellow .fork { border-color: #E19A00 #E19A00 transparent; } .tsc_ribbon_banner { margin: 30px 0; position: relative; z-index: 0; } .tsc_ribbon_banner > div { margin-bottom: 40px; } .tsc_ribbon_banner > div:last-of-type { margin-bottom: 0; } .tsc_ribbon_banner .ribbon-banner { color: #FFFFFF; height: 40px; line-height: 40px; margin: 0 auto; position: relative; text-align: center; width: 320px; } .tsc_ribbon_banner .ribbon-banner > span { display: block; height: 100%; position: relative; } .tsc_ribbon_banner .ribbon-banner > span:before, .tsc_ribbon_banner .ribbon-banner > span:after { border-color: transparent; border-style: solid; border-width: 14px; content: ""; position: absolute; z-index: -1; } .tsc_ribbon_banner.ie8 .ribbon-banner > span:before, .ie8 .ribbon-banner > span:after { display: none; } .tsc_ribbon_banner .ribbon-banner > span:before { left: -14px; } .tsc_ribbon_banner .ribbon-banner > span:after { right: -14px; } .tsc_ribbon_banner .ribbon-banner:before { border-style: solid; border-width: 20px 25px 20px 20px; content: ""; left: -31px; position: absolute; z-index: -2; } .tsc_ribbon_banner .ribbon-banner:after { border-style: solid; border-width: 20px 20px 20px 25px; content: ""; position: absolute; right: -31px; z-index: -2; } .tsc_ribbon_banner .fold-down > span { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .tsc_ribbon_banner .fold-down > span:before, .tsc_ribbon_banner .fold-down > span:after { bottom: -14px; } .tsc_ribbon_banner .fold-down:before { top: 14px; } .tsc_ribbon_banner .fold-down:after { top: 14px; } .tsc_ribbon_banner .fold-straight > span { box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), -1px 0 1px rgba(0, 0, 0, 0.1), 1px 0 1px rgba(0, 0, 0, 0.1); } .tsc_ribbon_banner .fold-straight > span:before, .tsc_ribbon_banner .fold-straight > span:after { display: none; } .tsc_ribbon_banner .fold-straight:before { border-width: 18px 23px 18px 18px; top: 2px; } .tsc_ribbon_banner .fold-straight:after { border-width: 18px 18px 18px 23px; top: 2px; } .tsc_ribbon_banner .curve.fold-up { border-radius: 0 0 50% 50%; } .tsc_ribbon_banner .curve > span { box-shadow: none; } .tsc_ribbon_banner .curve.fold-up > span:after { border: 0 none; border-radius: 0 0 50% 50%; height: 100%; left: 0; top: -40px; width: 100%; } .tsc_ribbon_banner .curve.fold-up > span:before { background-image: -moz-linear-gradient(left center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%), -moz-linear-gradient(right center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 100%); background-position: left top, right top; background-repeat: no-repeat, no-repeat; background-size: 10px 40px, 10px 40px; border: 0 none; border-radius: 50% 50% 50% 50%; height: 100%; left: 0; top: -40px; width: 100%; } .tsc_ribbon_banner.ie .curve.fold-up > span:before { display: none; } .tsc_ribbon_banner.ie .curve.fold-up > span .before { border-left: 10px solid rgba(0, 0, 0, 0.35); border-radius: 10px 10px 10px 10px; border-right: 10px solid rgba(0, 0, 0, 0.35); height: 100%; left: 0; position: absolute; right: 0; top: -27px; z-index: -1; } .tsc_ribbon_banner .curve.fold-up:before { left: -34px; top: -27px; } .tsc_ribbon_banner.ie8 .curve.fold-up:before { left: -31px; top: -14px; } .tsc_ribbon_banner .curve.fold-up:after { right: -34px; top: -27px; } .tsc_ribbon_banner.ie8 .curve.fold-up:after { right: -31px; top: -14px; } .tsc_ribbon_banner .lblue, .tsc_ribbon_banner.ie8 .lblue > span { background-color: #42A5D4; background-image: -moz-linear-gradient(center top , #42A5D4, #24769D); } .tsc_ribbon_banner .lblue > span:before { border-right-color: #174C66; } .tsc_ribbon_banner .lblue > span:after { border-left-color: #174C66; } .tsc_ribbon_banner .lblue:before { border-color: #24769D #24769D #24769D transparent; } .tsc_ribbon_banner .lblue:after { border-color: #24769D transparent #24769D #24769D; } .tsc_ribbon_banner .lblue.curve.fold-up > span:after { box-shadow: 0 19px 0 #42A5D4; } .tsc_ribbon_banner .lred, .tsc_ribbon_banner.ie8 .lred > span { background-color: #F80000; background-image: -moz-linear-gradient(center top , #F80000, #A30000); } .tsc_ribbon_banner .lred > span:before { border-right-color: #5F0000; } .tsc_ribbon_banner .lred > span:after { border-left-color: #5F0000; } .tsc_ribbon_banner .lred:before { border-color: #A30000 #A30000 #A30000 transparent; } .tsc_ribbon_banner .lred:after { border-color: #A30000 transparent #A30000 #A30000; } .tsc_ribbon_banner .lred.curve.fold-up > span:after { box-shadow: 0 19px 0 #F80000; } .tsc_ribbon_banner .lgreen, .tsc_ribbon_banner.ie8 .lgreen > span { background-color: #80B73D; background-image: -moz-linear-gradient(center top , #80B73D, #547728); } .tsc_ribbon_banner .lgreen > span:before { border-right-color: #304417; } .tsc_ribbon_banner .lgreen > span:after { border-left-color: #304417; } .tsc_ribbon_banner .lgreen:before { border-color: #547728 #547728 #547728 transparent; } .tsc_ribbon_banner .lgreen:after { border-color: #547728 transparent #547728 #547728; } .tsc_ribbon_banner .lgreen.curve.fold-up > span:after { box-shadow: 0 19px 0 #80B73D; } .tsc_ribbon_banner .lyellow, .tsc_ribbon_banner.ie8 .lyellow > span { background-color: #FFC037; background-image: -moz-linear-gradient(center top , #FFC037, #E19A00); } .tsc_ribbon_banner .lyellow > span:before { border-right-color: #9D6C00; } .tsc_ribbon_banner .lyellow > span:after { border-left-color: #9D6C00; } .tsc_ribbon_banner .lyellow:before { border-color: #E19A00 #E19A00 #E19A00 transparent; } .tsc_ribbon_banner .lyellow:after { border-color: #E19A00 transparent #E19A00 #E19A00; } .tsc_ribbon_banner .lyellow.curve.fold-up > span:after { box-shadow: 0 19px 0 #FFC037; }