/** * DSI SHORTCUTS */ /* MARGIN */ .mt-0{margin-top:0!important} .mt-1{margin-top:1px!important} .mt-2{margin-top:2px!important} .mt-3{margin-top:3px!important} .mt-4{margin-top:4px!important} .mt-5{margin-top:5px!important} .m-t-5{margin-top:5px!important} .mt-10{margin-top:10px!important} .mt-15{margin-top:15px!important} .mt-20{margin-top:20px!important} .mt-25{margin-top:25px!important} .mt-30{margin-top:30px!important} .mt-40{margin-top:40px!important} .mt-50{margin-top:50px!important} .mt-60{margin-top:60px!important} .mt-80{margin-top:80px!important} .mb-0{margin-bottom:0!important} .mb-5{margin-bottom:5px!important} .mb-10{margin-bottom:10px!important} .mb-15{margin-bottom:15px!important} .mb-20{margin-bottom:20px!important} .mb-25{margin-bottom:25px!important} .mb-30{margin-bottom:30px!important} .mb-40{margin-bottom:40px!important} .mb-50{margin-bottom:50px!important} .mb-60{margin-bottom:60px!important} .mb-80{margin-bottom:80px!important} .ml-0{margin-left:0!important} .ml-5{margin-left:5px!important} .ml-10{margin-left:10px!important} .ml-15{margin-left:15px!important} .ml-20{margin-left:20px!important} .ml-25{margin-left:25px!important} .ml-30{margin-left:30px!important} .ml-40{margin-left:40px!important} .ml-50{margin-left:50px!important} .ml-60{margin-left:60px!important} .ml-80{margin-left:80px!important} .mr-0{margin-right:0!important} .mr-5{margin-right:5px!important} .mr-10{margin-right:10px!important} .mr-15{margin-right:15px!important} .mr-20{margin-right:20px!important} .mr-25{margin-right:25px!important} .mr-30{margin-right:30px!important} .mr-40{margin-right:40px!important} .mr-50{margin-right:50px!important} .mr-60{margin-right:60px!important} .mr-80{margin-right:80px!important} /* PADDING */ .pt-0{padding-top:0!important} .pt-5{padding-top:5px!important} .pt-10{padding-top:10px!important} .pt-15{padding-top:15px!important} .p-t-15{padding-top:15px!important} .pt-20{padding-top:20px!important} .pt-25{padding-top:25px!important} .pt-30{padding-top:30px!important} .pt-40{padding-top:40px!important} .pt-50{padding-top:50px!important} .pt-60{padding-top:60px!important} .pt-80{padding-top:80px!important} .pb-0{padding-bottom:0!important} .pb-5{padding-bottom:5px!important} .pb-10{padding-bottom:10px!important} .pb-15{padding-bottom:15px!important} .pb-20{padding-bottom:20px!important} .pb-25{padding-bottom:25px!important} .pb-30{padding-bottom:30px!important} .pb-40{padding-bottom:40px!important} .pb-50{padding-bottom:50px!important} .pb-60{padding-bottom:60px!important} .pb-80{padding-bottom:80px!important} .pl-0{padding-left:0!important} .pl-5{padding-left:5px!important} .pl-10{padding-left:10px!important} .pl-15{padding-left:15px!important} .pl-20{padding-left:20px!important} .pl-25{padding-left:25px!important} .pl-30{padding-left:30px!important} .pl-40{padding-left:40px!important} .pl-50{padding-left:50px!important} .pl-60{padding-left:60px!important} .pl-80{padding-left:80px!important} .pr-0{padding-right:0!important} .pr-5{padding-right:5px!important} .pr-10{padding-right:10px!important} .pr-15{padding-right:15px!important} .pr-20{padding-right:20px!important} .pr-25{padding-right:25px!important} .pr-30{padding-right:30px!important} .pr-40{padding-right:40px!important} .pr-50{padding-right:50px!important} .pr-60{padding-right:60px!important} .pr-80{padding-right:80px!important} /* FONTS */ .f-1{ font-size: 1px !important; } .f-2{ font-size: 2px !important; } .f-3{ font-size: 3px !important; } .f-4{ font-size: 4px !important; } .f-5{ font-size: 5px !important; } .f-6{ font-size: 6px !important; } .f-7{ font-size: 7px !important; } .f-8{ font-size: 8px !important; } .f-9{ font-size: 9px !important; } .f-10{ font-size: 10px !important; } .f-11{ font-size: 11px !important; } .f-12{ font-size: 12px !important; } .f-13{ font-size: 13px !important; } .f-14{ font-size: 14px !important; } .f-15{ font-size: 15px !important; } .f-16{ font-size: 16px !important; } .f-17{ font-size: 17px !important; } .f-18{ font-size: 18px !important; } .f-19{ font-size: 19px !important; } .f-20{ font-size: 20px !important; } .f-21{ font-size: 21px !important; } .f-22{ font-size: 22px !important; } .f-23{ font-size: 23px !important; } .f-24{ font-size: 24px !important; } .f-25{ font-size: 25px !important; } .f-26{ font-size: 26px !important; } .f-27{ font-size: 27px !important; } .f-28{ font-size: 28px !important; } .f-29{ font-size: 29px !important; } .f-30{ font-size: 30px !important; } .f-31{ font-size: 31px !important; } .f-32{ font-size: 32px !important; } .f-33{ font-size: 33px !important; } .f-34{ font-size: 34px !important; } .f-35{ font-size: 35px !important; } .f-36{ font-size: 36px !important; } .f-37{ font-size: 37px !important; } .f-38{ font-size: 38px !important; } .f-39{ font-size: 39px !important; } .f-40{ font-size: 40px !important; } .f-41{ font-size: 41px !important; } .f-42{ font-size: 42px !important; } .f-43{ font-size: 43px !important; } .f-44{ font-size: 44px !important; } .f-45{ font-size: 45px !important; } .f-46{ font-size: 46px !important; } .f-47{ font-size: 47px !important; } .f-48{ font-size: 48px !important; } .f-49{ font-size: 49px !important; } .f-50{ font-size: 50px !important; } .f-51{ font-size: 51px !important; } .f-52{ font-size: 52px !important; } .f-53{ font-size: 53px !important; } .f-54{ font-size: 54px !important; } .f-55{ font-size: 55px !important; } .f-56{ font-size: 56px !important; } .f-57{ font-size: 57px !important; } .f-58{ font-size: 58px !important; } .f-59{ font-size: 59px !important; } .f-60{ font-size: 60px !important; } .f-61{ font-size: 61px !important; } .f-62{ font-size: 62px !important; } .f-63{ font-size: 63px !important; } .f-64{ font-size: 64px !important; } .f-65{ font-size: 65px !important; } .f-66{ font-size: 66px !important; } .f-67{ font-size: 67px !important; } .f-68{ font-size: 68px !important; } .f-69{ font-size: 69px !important; } .f-70{ font-size: 70px !important; } .f-71{ font-size: 71px !important; } .f-72{ font-size: 72px !important; } .f-73{ font-size: 73px !important; } .f-74{ font-size: 74px !important; } .f-75{ font-size: 75px !important; } .f-76{ font-size: 76px !important; } .f-77{ font-size: 77px !important; } .f-78{ font-size: 78px !important; } .f-79{ font-size: 79px !important; } .f-80{ font-size: 80px !important; } .f-81{ font-size: 81px !important; } .f-82{ font-size: 82px !important; } .f-83{ font-size: 83px !important; } .f-84{ font-size: 84px !important; } .f-85{ font-size: 85px !important; } .f-86{ font-size: 86px !important; } .f-87{ font-size: 87px !important; } .f-88{ font-size: 88px !important; } .f-89{ font-size: 89px !important; } .f-90{ font-size: 90px !important; } .f-91{ font-size: 91px !important; } .f-92{ font-size: 92px !important; } .f-93{ font-size: 93px !important; } .f-94{ font-size: 94px !important; } .f-95{ font-size: 95px !important; } .f-96{ font-size: 96px !important; } .f-97{ font-size: 97px !important; } .f-98{ font-size: 98px !important; } .f-99{ font-size: 99px !important; } .f-100{ font-size:100%!important; } /* WEIRD!!!! */ .w-1{width: 1px !important} .w-2{width: 2px !important} .w-3{width: 3px !important} .w-4{width: 4px !important} .w-5{width: 5px !important} .w-6{width: 6px !important} .w-7{width: 7px !important} .w-8{width: 8px !important} .w-9{width: 9px !important} .w-10{width: 10px !important} .w-11{width: 11px !important} .w-12{width: 12px !important} .w-13{width: 13px !important} .w-14{width: 14px !important} .w-15{width: 15px !important} .w-16{width: 16px !important} .w-17{width: 17px !important} .w-18{width: 18px !important} .w-19{width: 19px !important} .w-20{width: 20px !important} .w-21{width: 21px !important} .w-22{width: 22px !important} .w-23{width: 23px !important} .w-24{width: 24px !important} .w-25{width: 25px !important} .w-26{width: 26px !important} .w-27{width: 27px !important} .w-28{width: 28px !important} .w-29{width: 29px !important} .w-30{width: 30px !important} .w-31{width: 31px !important} .w-32{width: 32px !important} .w-33{width: 33px !important} .w-34{width: 34px !important} .w-35{width: 35px !important} .w-36{width: 36px !important} .w-37{width: 37px !important} .w-38{width: 38px !important} .w-39{width: 39px !important} .w-40{width: 40px !important} .w-41{width: 41px !important} .w-42{width: 42px !important} .w-43{width: 43px !important} .w-44{width: 44px !important} .w-45{width: 45px !important} .w-46{width: 46px !important} .w-47{width: 47px !important} .w-48{width: 48px !important} .w-49{width: 49px !important} .w-50{width: 50px !important} .w-51{width: 51px !important} .w-52{width: 52px !important} .w-53{width: 53px !important} .w-54{width: 54px !important} .w-55{width: 55px !important} .w-56{width: 56px !important} .w-57{width: 57px !important} .w-58{width: 58px !important} .w-59{width: 59px !important} .w-60{width: 60px !important} .w-61{width: 61px !important} .w-62{width: 62px !important} .w-63{width: 63px !important} .w-64{width: 64px !important} .w-65{width: 65px !important} .w-66{width: 66px !important} .w-67{width: 67px !important} .w-68{width: 68px !important} .w-69{width: 69px !important} .w-70{width: 70px !important} .w-71{width: 71px !important} .w-72{width: 72px !important} .w-73{width: 73px !important} .w-74{width: 74px !important} .w-75{width: 75px !important} .w-76{width: 76px !important} .w-77{width: 77px !important} .w-78{width: 78px !important} .w-79{width: 79px !important} .w-80{width: 80px !important} .w-81{width: 81px !important} .w-82{width: 82px !important} .w-83{width: 83px !important} .w-84{width: 84px !important} .w-85{width: 85px !important} .w-86{width: 86px !important} .w-87{width: 87px !important} .w-88{width: 88px !important} .w-89{width: 89px !important} .w-90{width: 90px !important} .w-91{width: 91px !important} .w-92{width: 92px !important} .w-93{width: 93px !important} .w-94{width: 94px !important} .w-95{width: 95px !important} .w-96{width: 96px !important} .w-97{width: 97px !important} .w-98{width: 98px !important} .w-99{width: 99px !important} .w-100{width: 100px !important} .w-110{width: 110px !important} .w-120{width: 120px !important} .w-130{width: 130px !important} .w-140{width: 140px !important} .w-150{width: 150px !important} .w-160{width: 160px !important} .w-170{width: 170px !important} .w-180{width: 180px !important} .w-190{width: 190px !important} .w-200{width: 200px !important} .w-300{width: 300px !important} .w-400{width: 400px !important} .w-500{width: 500px !important} .w-600{width: 600px !important} .w-700{width: 700px !important} .w-800{width: 800px !important} .w-900{width: 900px !important} .w-1000{width: 1000px !important} .h-1{height: 1px !important} .h-2{height: 2px !important} .h-3{height: 3px !important} .h-4{height: 4px !important} .h-5{height: 5px !important} .h-6{height: 6px !important} .h-7{height: 7px !important} .h-8{height: 8px !important} .h-9{height: 9px !important} .h-10{height: 10px !important} .h-11{height: 11px !important} .h-12{height: 12px !important} .h-13{height: 13px !important} .h-14{height: 14px !important} .h-15{height: 15px !important} .h-16{height: 16px !important} .h-17{height: 17px !important} .h-18{height: 18px !important} .h-19{height: 19px !important} .h-20{height: 20px !important} .h-21{height: 21px !important} .h-22{height: 22px !important} .h-23{height: 23px !important} .h-24{height: 24px !important} .h-25{height: 25px !important} .h-26{height: 26px !important} .h-27{height: 27px !important} .h-28{height: 28px !important} .h-29{height: 29px !important} .h-30{height: 30px !important} .h-31{height: 31px !important} .h-32{height: 32px !important} .h-33{height: 33px !important} .h-34{height: 34px !important} .h-35{height: 35px !important} .h-36{height: 36px !important} .h-37{height: 37px !important} .h-38{height: 38px !important} .h-39{height: 39px !important} .h-40{height: 40px !important} .h-41{height: 41px !important} .h-42{height: 42px !important} .h-43{height: 43px !important} .h-44{height: 44px !important} .h-45{height: 45px !important} .h-46{height: 46px !important} .h-47{height: 47px !important} .h-48{height: 48px !important} .h-49{height: 49px !important} .h-50{height: 50px !important} .h-51{height: 51px !important} .h-52{height: 52px !important} .h-53{height: 53px !important} .h-54{height: 54px !important} .h-55{height: 55px !important} .h-56{height: 56px !important} .h-57{height: 57px !important} .h-58{height: 58px !important} .h-59{height: 59px !important} .h-60{height: 60px !important} .h-61{height: 61px !important} .h-62{height: 62px !important} .h-63{height: 63px !important} .h-64{height: 64px !important} .h-65{height: 65px !important} .h-66{height: 66px !important} .h-67{height: 67px !important} .h-68{height: 68px !important} .h-69{height: 69px !important} .h-70{height: 70px !important} .h-71{height: 71px !important} .h-72{height: 72px !important} .h-73{height: 73px !important} .h-74{height: 74px !important} .h-75{height: 75px !important} .h-76{height: 76px !important} .h-77{height: 77px !important} .h-78{height: 78px !important} .h-79{height: 79px !important} .h-80{height: 80px !important} .h-81{height: 81px !important} .h-82{height: 82px !important} .h-83{height: 83px !important} .h-84{height: 84px !important} .h-85{height: 85px !important} .h-86{height: 86px !important} .h-87{height: 87px !important} .h-88{height: 88px !important} .h-89{height: 89px !important} .h-90{height: 90px !important} .h-91{height: 91px !important} .h-92{height: 92px !important} .h-93{height: 93px !important} .h-94{height: 94px !important} .h-95{height: 95px !important} .h-96{height: 96px !important} .h-97{height: 97px !important} .h-98{height: 98px !important} .h-99{height: 99px !important} .h-100{height: 100px !important} .h-110{height: 110px !important} .h-120{height: 120px !important} .h-130{height: 130px !important} .h-140{height: 140px !important} .h-150{height: 150px !important} .h-160{height: 160px !important} .h-170{height: 170px !important} .h-180{height: 180px !important} .h-190{height: 190px !important} .h-200{height: 200px !important} .h-300{height: 300px !important} .h-400{height: 400px !important} .h-500{height: 500px !important} .h-600{height: 600px !important} .h-700{height: 700px !important} .h-800{height: 800px !important} .h-900{height: 900px !important} .h-1000{height: 1000px !important} /** * Copy from 4.11.2 * http://tachyons.io */ .ba { border-style: solid; border-width: 1px; } .bt { border-top-style: solid; border-top-width: 1px; } .br { border-right-style: solid; border-right-width: 1px; } .bb { border-bottom-style: solid; border-bottom-width: 1px; } .bl { border-left-style: solid; border-left-width: 1px; } .bn { border-style: none; border-width: 0; } /* BORDER COLORS Docs: http://tachyons.io/docs/themes/borders/ Border colors can be used to extend the base border classes ba,bt,bb,br,bl found in the _borders.css file. The base border class by default will set the color of the border to that of the current text color. These classes are for the cases where you desire for the text and border colors to be different. Base: b = border Modifiers: --color-name = each color variable name is also a border color name */ .b--black { border-color: #000; } .b--near-black { border-color: #111; } .b--dark-gray { border-color: #333; } .b--mid-gray { border-color: #555; } .b--gray { border-color: #777; } .b--silver { border-color: #999; } .b--light-silver { border-color: #aaa; } .b--moon-gray { border-color: #ccc; } .b--light-gray { border-color: #eee; } .b--near-white { border-color: #f4f4f4; } .b--white { border-color: #fff; } .b--white-90 { border-color: rgba( 255, 255, 255, .9 ); } .b--white-80 { border-color: rgba( 255, 255, 255, .8 ); } .b--white-70 { border-color: rgba( 255, 255, 255, .7 ); } .b--white-60 { border-color: rgba( 255, 255, 255, .6 ); } .b--white-50 { border-color: rgba( 255, 255, 255, .5 ); } .b--white-40 { border-color: rgba( 255, 255, 255, .4 ); } .b--white-30 { border-color: rgba( 255, 255, 255, .3 ); } .b--white-20 { border-color: rgba( 255, 255, 255, .2 ); } .b--white-10 { border-color: rgba( 255, 255, 255, .1 ); } .b--white-05 { border-color: rgba( 255, 255, 255, .05 ); } .b--white-025 { border-color: rgba( 255, 255, 255, .025 ); } .b--white-0125 { border-color: rgba( 255, 255, 255, .0125 ); } .b--black-90 { border-color: rgba( 0, 0, 0, .9 ); } .b--black-80 { border-color: rgba( 0, 0, 0, .8 ); } .b--black-70 { border-color: rgba( 0, 0, 0, .7 ); } .b--black-60 { border-color: rgba( 0, 0, 0, .6 ); } .b--black-50 { border-color: rgba( 0, 0, 0, .5 ); } .b--black-40 { border-color: rgba( 0, 0, 0, .4 ); } .b--black-30 { border-color: rgba( 0, 0, 0, .3 ); } .b--black-20 { border-color: rgba( 0, 0, 0, .2 ); } .b--black-10 { border-color: rgba( 0, 0, 0, .1 ); } .b--black-05 { border-color: rgba( 0, 0, 0, .05 ); } .b--black-025 { border-color: rgba( 0, 0, 0, .025 ); } .b--black-0125 { border-color: rgba( 0, 0, 0, .0125 ); } .b--dark-red { border-color: #e7040f; } .b--red { border-color: #ff4136; } .b--light-red { border-color: #ff725c; } .b--orange { border-color: #ff6300; } .b--gold { border-color: #ffb700; } .b--yellow { border-color: #ffd700; } .b--light-yellow { border-color: #fbf1a9; } .b--purple { border-color: #5e2ca5; } .b--light-purple { border-color: #a463f2; } .b--dark-pink { border-color: #d5008f; } .b--hot-pink { border-color: #ff41b4; } .b--pink { border-color: #ff80cc; } .b--light-pink { border-color: #ffa3d7; } .b--dark-green { border-color: #137752; } .b--green { border-color: #19a974; } .b--light-green { border-color: #9eebcf; } .b--navy { border-color: #001b44; } .b--dark-blue { border-color: #00449e; } .b--blue { border-color: #357edd; } .b--light-blue { border-color: #96ccff; } .b--lightest-blue { border-color: #cdecff; } .b--washed-blue { border-color: #f6fffe; } .b--washed-green { border-color: #e8fdf5; } .b--washed-yellow { border-color: #fffceb; } .b--washed-red { border-color: #ffdfdf; } .b--transparent { border-color: transparent; } .b--inherit { border-color: inherit; } /* BORDER RADIUS Docs: http://tachyons.io/docs/themes/border-radius/ Base: br = border-radius Modifiers: 0 = 0/none 1 = 1st step in scale 2 = 2nd step in scale 3 = 3rd step in scale 4 = 4th step in scale Literal values: -100 = 100% -pill = 9999px Media Query Extensions: -ns = not-small -m = medium -l = large */ .br0 { border-radius: 0; } .br1 { border-radius: .125rem; } .br2 { border-radius: .25rem; } .br3 { border-radius: .5rem; } .br4 { border-radius: 1rem; } .br-100 { border-radius: 100%; } .br-pill { border-radius: 9999px; } .br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* BORDER STYLES Docs: http://tachyons.io/docs/themes/borders/ Depends on base border module in _borders.css Base: b = border-style Modifiers: --none = none --dotted = dotted --dashed = dashed --solid = solid Media Query Extensions: -ns = not-small -m = medium -l = large */ .b--dotted { border-style: dotted; } .b--dashed { border-style: dashed; } .b--solid { border-style: solid; } .b--none { border-style: none; } /* BORDER WIDTHS Docs: http://tachyons.io/docs/themes/borders/ Base: bw = border-width Modifiers: 0 = 0 width border 1 = 1st step in border-width scale 2 = 2nd step in border-width scale 3 = 3rd step in border-width scale 4 = 4th step in border-width scale 5 = 5th step in border-width scale Media Query Extensions: -ns = not-small -m = medium -l = large */ .bw0 { border-width: 0; } .bw1 { border-width: .125rem; } .bw2 { border-width: .25rem; } .bw3 { border-width: .5rem; } .bw4 { border-width: 1rem; } .bw5 { border-width: 2rem; } /* Resets */ .bt-0 { border-top-width: 0; } .br-0 { border-right-width: 0; } .bb-0 { border-bottom-width: 0; } .bl-0 { border-left-width: 0; } /* BOX-SHADOW Docs: http://tachyons.io/docs/themes/box-shadow/ Media Query Extensions: -ns = not-small -m = medium -l = large */ .shadow-1 { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); } .shadow-2 { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); } .shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); } .shadow-4 { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); } .shadow-5 { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); } /* CODE */ .hidden {overflow: hidden} .pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; } /* COORDINATES Docs: http://tachyons.io/docs/layout/position/ Use in combination with the position module. Base: top bottom right left Modifiers: -0 = literal value 0 -1 = literal value 1 -2 = literal value 2 --1 = literal value -1 --2 = literal value -2 Media Query Extensions: -ns = not-small -m = medium -l = large */ .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .top-1 { top: 1rem; } .right-1 { right: 1rem; } .bottom-1 { bottom: 1rem; } .left-1 { left: 1rem; } .top-2 { top: 2rem; } .right-2 { right: 2rem; } .bottom-2 { bottom: 2rem; } .left-2 { left: 2rem; } .top--1 { top: -1rem; } .right--1 { right: -1rem; } .bottom--1 { bottom: -1rem; } .left--1 { left: -1rem; } .top--2 { top: -2rem; } .right--2 { right: -2rem; } .bottom--2 { bottom: -2rem; } .left--2 { left: -2rem; } .absolute--fill { top: 0; right: 0; bottom: 0; left: 0; } /* CLEARFIX http://tachyons.io/docs/layout/clearfix/ */ /* Nicolas Gallaghers Clearfix solution Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } .cl { clear: left; } .cr { clear: right; } .cb { clear: both; } .cn { clear: none; } /* DISPLAY Docs: http://tachyons.io/docs/layout/display Base: d = display Modifiers: n = none b = block ib = inline-block it = inline-table t = table tc = table-cell t-row = table-row t-columm = table-column t-column-group = table-column-group Media Query Extensions: -ns = not-small -m = medium -l = large */ .dn { display: none; } .di { display: inline; } .db { display: block; } .dib { display: inline-block; } .dit { display: inline-table; } .dt { display: table; } .dtc { display: table-cell; } .dt-row { display: table-row; } .dt-row-group { display: table-row-group; } .dt-column { display: table-column; } .dt-column-group { display: table-column-group; } /* This will set table to full width and then all cells will be equal width */ .dt--fixed { table-layout: fixed; width: 100%; } /* FLEXBOX Media Query Extensions: -ns = not-small -m = medium -l = large */ .flex { display: flex; } .inline-flex { display: inline-flex; } /* 1. Fix for Chrome 44 bug. * https://code.google.com/p/chromium/issues/detail?id=506893 */ .flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } .flex-none { flex: none; } .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .flex-column-reverse { flex-direction: column-reverse; } .flex-row-reverse { flex-direction: row-reverse; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; } .self-start { align-self: flex-start; } .self-end { align-self: flex-end; } .self-center { align-self: center; } .self-baseline { align-self: baseline; } .self-stretch { align-self: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .content-start { align-content: flex-start; } .content-end { align-content: flex-end; } .content-center { align-content: center; } .content-between { align-content: space-between; } .content-around { align-content: space-around; } .content-stretch { align-content: stretch; } .order-0 { order: 0; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-6 { order: 6; } .order-7 { order: 7; } .order-8 { order: 8; } .order-last { order: 99999; } .flex-grow-0 { flex-grow: 0; } .flex-grow-1 { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } .flex-shrink-1 { flex-shrink: 1; } /* FLOATS http://tachyons.io/docs/layout/floats/ 1. Floated elements are automatically rendered as block level elements. Setting floats to display inline will fix the double margin bug in ie6. You know... just in case. 2. Don't forget to clearfix your floats with .cf Base: f = float Modifiers: l = left r = right n = none Media Query Extensions: -ns = not-small -m = medium -l = large */ .fl { float: left; _display: inline; } .fr { float: right; _display: inline; } .fn { float: none; } /* FONT FAMILY GROUPS Docs: http://tachyons.io/docs/typography/font-family/ */ .sans-serif { font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; } .serif { font-family: georgia, times, serif; } .system-sans-serif { font-family: sans-serif; } .system-serif { font-family: serif; } code, .code { font-family: Consolas, monaco, monospace; } .courier { font-family: 'Courier Next', courier, monospace; } .helvetica { font-family: 'helvetica neue', helvetica, sans-serif; } .avenir { font-family: 'avenir next', avenir, sans-serif; } .athelas { font-family: athelas, georgia, serif; } .georgia { font-family: georgia, serif; } .times { font-family: times, serif; } .bodoni { font-family: "Bodoni MT", serif; } .calisto { font-family: "Calisto MT", serif; } .garamond { font-family: garamond, serif; } .baskerville { font-family: baskerville, serif; } .verdana { font-family: verdana, serif; } .sanspro { font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif; } /* FONT STYLE Docs: http://tachyons.io/docs/typography/font-style/ Media Query Extensions: -ns = not-small -m = medium -l = large */ .i { font-style: italic; } .fs-normal { font-style: normal; } /* FONT WEIGHT Docs: http://tachyons.io/docs/typography/font-weight/ Base fw = font-weight Modifiers: 1 = literal value 100 2 = literal value 200 3 = literal value 300 4 = literal value 400 5 = literal value 500 6 = literal value 600 7 = literal value 700 8 = literal value 800 9 = literal value 900 Media Query Extensions: -ns = not-small -m = medium -l = large */ .normal { font-weight: normal; } .b { font-weight: bold; } .fw1 { font-weight: 100; } .fw2 { font-weight: 200; } .fw3 { font-weight: 300; } .fw4 { font-weight: 400; } .fw5 { font-weight: 500; } .fw6 { font-weight: 600; } .fw7 { font-weight: 700; } .fw8 { font-weight: 800; } .fw9 { font-weight: 900; } /* Text colors */ .black-90 { color: rgba( 0, 0, 0, .9 ); } .black-80 { color: rgba( 0, 0, 0, .8 ); } .black-70 { color: rgba( 0, 0, 0, .7 ); } .black-60 { color: rgba( 0, 0, 0, .6 ); } .black-50 { color: rgba( 0, 0, 0, .5 ); } .black-40 { color: rgba( 0, 0, 0, .4 ); } .black-30 { color: rgba( 0, 0, 0, .3 ); } .black-20 { color: rgba( 0, 0, 0, .2 ); } .black-10 { color: rgba( 0, 0, 0, .1 ); } .black-05 { color: rgba( 0, 0, 0, .05 ); } .white-90 { color: rgba( 255, 255, 255, .9 ); } .white-80 { color: rgba( 255, 255, 255, .8 ); } .white-70 { color: rgba( 255, 255, 255, .7 ); } .white-60 { color: rgba( 255, 255, 255, .6 ); } .white-50 { color: rgba( 255, 255, 255, .5 ); } .white-40 { color: rgba( 255, 255, 255, .4 ); } .white-30 { color: rgba( 255, 255, 255, .3 ); } .white-20 { color: rgba( 255, 255, 255, .2 ); } .white-10 { color: rgba( 255, 255, 255, .1 ); } .black { color: #000; } .near-black { color: #111; } .dark-gray { color: #333; } .mid-gray { color: #555; } .gray { color: #777; } .silver { color: #999; } .light-silver { color: #aaa; } .moon-gray { color: #ccc; } .light-gray { color: #eee; } .near-white { color: #f4f4f4; } .white { color: #fff; } .dark-red { color: #e7040f; } .darkest-red { color: #A70000; } .red { color: #ff4136; } .light-red { color: #ff725c; } .orange { color: #ff6300; } .dark-orange { color: #da631a; } .gold { color: #ffb700; } .yellow { color: #ffd700; } .light-yellow { color: #fbf1a9; } .purple { color: #5e2ca5; } .light-purple { color: #a463f2; } .dark-pink { color: #d5008f; } .hot-pink { color: #ff41b4; } .pink { color: #ff80cc; } .light-pink { color: #ffa3d7; } .dark-green { color: #137752; } .green { color: #19a974; } .light-green { color: #9eebcf; } .navy { color: #001b44; } .dark-blue { color: #00449e; } .blue { color: #357edd; } .light-blue { color: #96ccff; } .lightest-blue { color: #cdecff; } .washed-blue { color: #f6fffe; } .washed-green { color: #e8fdf5; } .washed-yellow { color: #fffceb; } .washed-red { color: #ffdfdf; } .color-inherit { color: inherit; } /* Background colors */ .bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); } .bg-black-80 { background-color: rgba( 0, 0, 0, .8 ); } .bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); } .bg-black-60 { background-color: rgba( 0, 0, 0, .6 ); } .bg-black-50 { background-color: rgba( 0, 0, 0, .5 ); } .bg-black-40 { background-color: rgba( 0, 0, 0, .4 ); } .bg-black-30 { background-color: rgba( 0, 0, 0, .3 ); } .bg-black-20 { background-color: rgba( 0, 0, 0, .2 ); } .bg-black-10 { background-color: rgba( 0, 0, 0, .1 ); } .bg-black-05 { background-color: rgba( 0, 0, 0, .05 ); } .bg-white-90 { background-color: rgba( 255, 255, 255, .9 ); } .bg-white-80 { background-color: rgba( 255, 255, 255, .8 ); } .bg-white-70 { background-color: rgba( 255, 255, 255, .7 ); } .bg-white-60 { background-color: rgba( 255, 255, 255, .6 ); } .bg-white-50 { background-color: rgba( 255, 255, 255, .5 ); } .bg-white-40 { background-color: rgba( 255, 255, 255, .4 ); } .bg-white-30 { background-color: rgba( 255, 255, 255, .3 ); } .bg-white-20 { background-color: rgba( 255, 255, 255, .2 ); } .bg-white-10 { background-color: rgba( 255, 255, 255, .1 ); } .bg-black { background-color: #000 !important; } .bg-near-black { background-color: #111 !important; } .bg-dark-gray { background-color: #333 !important; } .bg-mid-gray { background-color: #555 !important; } .bg-gray { background-color: #777 !important; } .bg-silver { background-color: #999 !important; } .bg-light-silver { background-color: #aaa !important; } .bg-moon-gray { background-color: #ccc !important; } .bg-light-gray { background-color: #eee !important; } .bg-near-white { background-color: #f4f4f4 !important; } .bg-white { background-color: #fff !important; } .bg-transparent { background-color: transparent !important; } .bg-dark-red { background-color: #e7040f !important; } .bg-red { background-color: #ff4136 !important; } .bg-light-red { background-color: #ff725c !important; } .bg-orange { background-color: #ff6300 !important; } .bg-gold { background-color: #ffb700 !important; } .bg-yellow { background-color: #ffd700 !important; } .bg-light-yellow { background-color: #fbf1a9 !important; } .bg-purple { background-color: #5e2ca5 !important; } .bg-light-purple { background-color: #a463f2 !important; } .bg-dark-pink { background-color: #d5008f !important; } .bg-hot-pink { background-color: #ff41b4 !important; } .bg-pink { background-color: #ff80cc !important; } .bg-light-pink { background-color: #ffa3d7 !important; } .bg-dark-green { background-color: #137752 !important; } .bg-green { background-color: #19a974 !important; } .bg-light-green { background-color: #9eebcf !important; } .bg-navy { background-color: #001b44 !important; } .bg-dark-blue { background-color: #00449e !important; } .bg-blue { background-color: #357edd !important; } .bg-light-blue { background-color: #96ccff !important; } .bg-lightest-blue { background-color: #cdecff !important; } .bg-washed-blue { background-color: #f6fffe !important; } .bg-washed-green { background-color: #e8fdf5 !important; } .bg-washed-yellow { background-color: #fffceb !important; } .bg-washed-red { background-color: #ffdfdf !important; } .bg-inherit { background-color: inherit !important; } /* SKINS:PSEUDO Customize the color of an element when it is focused or hovered over. */ .hover-black:hover { color: #000; } .hover-black:focus { color: #000; } .hover-near-black:hover { color: #111; } .hover-near-black:focus { color: #111; } .hover-dark-gray:hover { color: #333; } .hover-dark-gray:focus { color: #333; } .hover-mid-gray:hover { color: #555; } .hover-mid-gray:focus { color: #555; } .hover-gray:hover { color: #777; } .hover-gray:focus { color: #777; } .hover-silver:hover { color: #999; } .hover-silver:focus { color: #999; } .hover-light-silver:hover { color: #aaa; } .hover-light-silver:focus { color: #aaa; } .hover-moon-gray:hover { color: #ccc; } .hover-moon-gray:focus { color: #ccc; } .hover-light-gray:hover { color: #eee; } .hover-light-gray:focus { color: #eee; } .hover-near-white:hover { color: #f4f4f4; } .hover-near-white:focus { color: #f4f4f4; } .hover-white:hover { color: #fff; } .hover-white:focus { color: #fff; } .hover-black-90:hover { color: rgba( 0, 0, 0, .9 ); } .hover-black-90:focus { color: rgba( 0, 0, 0, .9 ); } .hover-black-80:hover { color: rgba( 0, 0, 0, .8 ); } .hover-black-80:focus { color: rgba( 0, 0, 0, .8 ); } .hover-black-70:hover { color: rgba( 0, 0, 0, .7 ); } .hover-black-70:focus { color: rgba( 0, 0, 0, .7 ); } .hover-black-60:hover { color: rgba( 0, 0, 0, .6 ); } .hover-black-60:focus { color: rgba( 0, 0, 0, .6 ); } .hover-black-50:hover { color: rgba( 0, 0, 0, .5 ); } .hover-black-50:focus { color: rgba( 0, 0, 0, .5 ); } .hover-black-40:hover { color: rgba( 0, 0, 0, .4 ); } .hover-black-40:focus { color: rgba( 0, 0, 0, .4 ); } .hover-black-30:hover { color: rgba( 0, 0, 0, .3 ); } .hover-black-30:focus { color: rgba( 0, 0, 0, .3 ); } .hover-black-20:hover { color: rgba( 0, 0, 0, .2 ); } .hover-black-20:focus { color: rgba( 0, 0, 0, .2 ); } .hover-black-10:hover { color: rgba( 0, 0, 0, .1 ); } .hover-black-10:focus { color: rgba( 0, 0, 0, .1 ); } .hover-white-90:hover { color: rgba( 255, 255, 255, .9 ); } .hover-white-90:focus { color: rgba( 255, 255, 255, .9 ); } .hover-white-80:hover { color: rgba( 255, 255, 255, .8 ); } .hover-white-80:focus { color: rgba( 255, 255, 255, .8 ); } .hover-white-70:hover { color: rgba( 255, 255, 255, .7 ); } .hover-white-70:focus { color: rgba( 255, 255, 255, .7 ); } .hover-white-60:hover { color: rgba( 255, 255, 255, .6 ); } .hover-white-60:focus { color: rgba( 255, 255, 255, .6 ); } .hover-white-50:hover { color: rgba( 255, 255, 255, .5 ); } .hover-white-50:focus { color: rgba( 255, 255, 255, .5 ); } .hover-white-40:hover { color: rgba( 255, 255, 255, .4 ); } .hover-white-40:focus { color: rgba( 255, 255, 255, .4 ); } .hover-white-30:hover { color: rgba( 255, 255, 255, .3 ); } .hover-white-30:focus { color: rgba( 255, 255, 255, .3 ); } .hover-white-20:hover { color: rgba( 255, 255, 255, .2 ); } .hover-white-20:focus { color: rgba( 255, 255, 255, .2 ); } .hover-white-10:hover { color: rgba( 255, 255, 255, .1 ); } .hover-white-10:focus { color: rgba( 255, 255, 255, .1 ); } .hover-inherit:hover, .hover-inherit:focus { color: inherit; } .hover-bg-black:hover { background-color: #000; } .hover-bg-black:focus { background-color: #000; } .hover-bg-near-black:hover { background-color: #111; } .hover-bg-near-black:focus { background-color: #111; } .hover-bg-dark-gray:hover { background-color: #333; } .hover-bg-dark-gray:focus { background-color: #333; } .hover-bg-mid-gray:hover { background-color: #555; } .hover-bg-mid-gray:focus { background-color: #555; } .hover-bg-gray:hover { background-color: #777; } .hover-bg-gray:focus { background-color: #777; } .hover-bg-silver:hover { background-color: #999; } .hover-bg-silver:focus { background-color: #999; } .hover-bg-light-silver:hover { background-color: #aaa; } .hover-bg-light-silver:focus { background-color: #aaa; } .hover-bg-moon-gray:hover { background-color: #ccc; } .hover-bg-moon-gray:focus { background-color: #ccc; } .hover-bg-light-gray:hover { background-color: #eee; } .hover-bg-light-gray:focus { background-color: #eee; } .hover-bg-near-white:hover { background-color: #f4f4f4; } .hover-bg-near-white:focus { background-color: #f4f4f4; } .hover-bg-white:hover { background-color: #fff !important; } .hover-bg-white:focus { background-color: #fff; } .hover-bg-transparent:hover { background-color: transparent; } .hover-bg-transparent:focus { background-color: transparent; } .hover-bg-black-90:hover { background-color: rgba( 0, 0, 0, .9 ); } .hover-bg-black-90:focus { background-color: rgba( 0, 0, 0, .9 ); } .hover-bg-black-80:hover { background-color: rgba( 0, 0, 0, .8 ); } .hover-bg-black-80:focus { background-color: rgba( 0, 0, 0, .8 ); } .hover-bg-black-70:hover { background-color: rgba( 0, 0, 0, .7 ); } .hover-bg-black-70:focus { background-color: rgba( 0, 0, 0, .7 ); } .hover-bg-black-60:hover { background-color: rgba( 0, 0, 0, .6 ); } .hover-bg-black-60:focus { background-color: rgba( 0, 0, 0, .6 ); } .hover-bg-black-50:hover { background-color: rgba( 0, 0, 0, .5 ); } .hover-bg-black-50:focus { background-color: rgba( 0, 0, 0, .5 ); } .hover-bg-black-40:hover { background-color: rgba( 0, 0, 0, .4 ); } .hover-bg-black-40:focus { background-color: rgba( 0, 0, 0, .4 ); } .hover-bg-black-30:hover { background-color: rgba( 0, 0, 0, .3 ); } .hover-bg-black-30:focus { background-color: rgba( 0, 0, 0, .3 ); } .hover-bg-black-20:hover { background-color: rgba( 0, 0, 0, .2 ); } .hover-bg-black-20:focus { background-color: rgba( 0, 0, 0, .2 ); } .hover-bg-black-10:hover { background-color: rgba( 0, 0, 0, .1 ); } .hover-bg-black-10:focus { background-color: rgba( 0, 0, 0, .1 ); } .hover-bg-white-90:hover { background-color: rgba( 255, 255, 255, .9 ); } .hover-bg-white-90:focus { background-color: rgba( 255, 255, 255, .9 ); } .hover-bg-white-80:hover { background-color: rgba( 255, 255, 255, .8 ); } .hover-bg-white-80:focus { background-color: rgba( 255, 255, 255, .8 ); } .hover-bg-white-70:hover { background-color: rgba( 255, 255, 255, .7 ); } .hover-bg-white-70:focus { background-color: rgba( 255, 255, 255, .7 ); } .hover-bg-white-60:hover { background-color: rgba( 255, 255, 255, .6 ); } .hover-bg-white-60:focus { background-color: rgba( 255, 255, 255, .6 ); } .hover-bg-white-50:hover { background-color: rgba( 255, 255, 255, .5 ); } .hover-bg-white-50:focus { background-color: rgba( 255, 255, 255, .5 ); } .hover-bg-white-40:hover { background-color: rgba( 255, 255, 255, .4 ); } .hover-bg-white-40:focus { background-color: rgba( 255, 255, 255, .4 ); } .hover-bg-white-30:hover { background-color: rgba( 255, 255, 255, .3 ); } .hover-bg-white-30:focus { background-color: rgba( 255, 255, 255, .3 ); } .hover-bg-white-20:hover { background-color: rgba( 255, 255, 255, .2 ); } .hover-bg-white-20:focus { background-color: rgba( 255, 255, 255, .2 ); } .hover-bg-white-10:hover { background-color: rgba( 255, 255, 255, .1 ); } .hover-bg-white-10:focus { background-color: rgba( 255, 255, 255, .1 ); } .hover-dark-red:hover { color: #e7040f; } .hover-dark-red:focus { color: #e7040f; } .hover-red:hover { color: #ff4136; } .hover-red:focus { color: #ff4136; } .hover-light-red:hover { color: #ff725c; } .hover-light-red:focus { color: #ff725c; } .hover-orange:hover { color: #ff6300; } .hover-orange:focus { color: #ff6300; } .hover-gold:hover { color: #ffb700; } .hover-gold:focus { color: #ffb700; } .hover-yellow:hover { color: #ffd700; } .hover-yellow:focus { color: #ffd700; } .hover-light-yellow:hover { color: #fbf1a9; } .hover-light-yellow:focus { color: #fbf1a9; } .hover-purple:hover { color: #5e2ca5; } .hover-purple:focus { color: #5e2ca5; } .hover-light-purple:hover { color: #a463f2; } .hover-light-purple:focus { color: #a463f2; } .hover-dark-pink:hover { color: #d5008f; } .hover-dark-pink:focus { color: #d5008f; } .hover-hot-pink:hover { color: #ff41b4; } .hover-hot-pink:focus { color: #ff41b4; } .hover-pink:hover { color: #ff80cc; } .hover-pink:focus { color: #ff80cc; } .hover-light-pink:hover { color: #ffa3d7; } .hover-light-pink:focus { color: #ffa3d7; } .hover-dark-green:hover { color: #137752; } .hover-dark-green:focus { color: #137752; } .hover-green:hover { color: #19a974; } .hover-green:focus { color: #19a974; } .hover-light-green:hover { color: #9eebcf; } .hover-light-green:focus { color: #9eebcf; } .hover-navy:hover { color: #001b44; } .hover-navy:focus { color: #001b44; } .hover-dark-blue:hover { color: #00449e; } .hover-dark-blue:focus { color: #00449e; } .hover-blue:hover { color: #357edd; } .hover-blue:focus { color: #357edd; } .hover-light-blue:hover { color: #96ccff; } .hover-light-blue:focus { color: #96ccff; } .hover-lightest-blue:hover { color: #cdecff; } .hover-lightest-blue:focus { color: #cdecff; } .hover-washed-blue:hover { color: #f6fffe; } .hover-washed-blue:focus { color: #f6fffe; } .hover-washed-green:hover { color: #e8fdf5; } .hover-washed-green:focus { color: #e8fdf5; } .hover-washed-yellow:hover { color: #fffceb; } .hover-washed-yellow:focus { color: #fffceb; } .hover-washed-red:hover { color: #ffdfdf; } .hover-washed-red:focus { color: #ffdfdf; } .hover-bg-dark-red:hover { background-color: #e7040f; } .hover-bg-dark-red:focus { background-color: #e7040f; } .hover-bg-red:hover { background-color: #ff4136; } .hover-bg-red:focus { background-color: #ff4136; } .hover-bg-light-red:hover { background-color: #ff725c; } .hover-bg-light-red:focus { background-color: #ff725c; } .hover-bg-orange:hover { background-color: #ff6300; } .hover-bg-orange:focus { background-color: #ff6300; } .hover-bg-gold:hover { background-color: #ffb700; } .hover-bg-gold:focus { background-color: #ffb700; } .hover-bg-yellow:hover { background-color: #ffd700; } .hover-bg-yellow:focus { background-color: #ffd700; } .hover-bg-light-yellow:hover { background-color: #fbf1a9; } .hover-bg-light-yellow:focus { background-color: #fbf1a9; } .hover-bg-purple:hover { background-color: #5e2ca5; } .hover-bg-purple:focus { background-color: #5e2ca5; } .hover-bg-light-purple:hover { background-color: #a463f2; } .hover-bg-light-purple:focus { background-color: #a463f2; } .hover-bg-dark-pink:hover { background-color: #d5008f; } .hover-bg-dark-pink:focus { background-color: #d5008f; } .hover-bg-hot-pink:hover { background-color: #ff41b4; } .hover-bg-hot-pink:focus { background-color: #ff41b4; } .hover-bg-pink:hover { background-color: #ff80cc; } .hover-bg-pink:focus { background-color: #ff80cc; } .hover-bg-light-pink:hover { background-color: #ffa3d7; } .hover-bg-light-pink:focus { background-color: #ffa3d7; } .hover-bg-dark-green:hover { background-color: #137752; } .hover-bg-dark-green:focus { background-color: #137752; } .hover-bg-green:hover { background-color: #19a974; } .hover-bg-green:focus { background-color: #19a974; } .hover-bg-light-green:hover { background-color: #9eebcf; } .hover-bg-light-green:focus { background-color: #9eebcf; } .hover-bg-navy:hover { background-color: #001b44; } .hover-bg-navy:focus { background-color: #001b44; } .hover-bg-dark-blue:hover { background-color: #00449e; } .hover-bg-dark-blue:focus { background-color: #00449e; } .hover-bg-blue:hover { background-color: #357edd; } .hover-bg-blue:focus { background-color: #357edd; } .hover-bg-light-blue:hover { background-color: #96ccff; } .hover-bg-light-blue:focus { background-color: #96ccff; } .hover-bg-lightest-blue:hover { background-color: #cdecff; } .hover-bg-lightest-blue:focus { background-color: #cdecff; } .hover-bg-washed-blue:hover { background-color: #f6fffe; } .hover-bg-washed-blue:focus { background-color: #f6fffe; } .hover-bg-washed-green:hover { background-color: #e8fdf5; } .hover-bg-washed-green:focus { background-color: #e8fdf5; } .hover-bg-washed-yellow:hover { background-color: #fffceb; } .hover-bg-washed-yellow:focus { background-color: #fffceb; } .hover-bg-washed-red:hover { background-color: #ffdfdf; } .hover-bg-washed-red:focus { background-color: #ffdfdf; } .hover-bg-inherit:hover, .hover-bg-inherit:focus { background-color: inherit; }