.pricing-table div, .pricing-table header h1, .pricing-table p, .pricing-table ul { border: none; display: block; list-style: none; margin: 0; outline: none; padding: 0; text-align: center; } .pricing-table .btn { display: block; margin: 0 20px; text-shadow: none; } /** * Pricing Block */ .pricing-table { color: #444; font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: 0 auto; margin-bottom: 20px; } /** * Pricing Column */ .pricing-table article { background: #D0D0D0; float: left; margin: 0 -1px; width: 33.33%; } /** * Pricing Header */ .pricing-table header { background: #2d91c3; background: -moz-linear-gradient(top, #434343, #191919); background: -webkit-gradient(linear, left top, left bottom, from(#434343), to(#191919)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); -khtml-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); border: 1px solid #191919; height: 66px; position: relative; } .pricing-table header h1 { color: #fff; font-size: 22px; line-height: 66px; text-shadow: 0px -1px 0 #0A0A0A; } /** * Round first column top left */ .pricing-table article:first-child, .pricing-table article:first-child header { -webkit-border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; } /** * Round last column top right */ .pricing-table article:last-child, .pricing-table article:last-child header { -webkit-border-top-right-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; } /** * Round first column bottom left */ .pricing-table article:first-child, .pricing-table article:first-child footer { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -khtml-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; border-left: 0 none; } /** * Round last column bottom right */ .pricing-table article:last-child, .pricing-table article:last-child footer { -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; } /** * Most Popular Ribbon */ .pricing-table header .popular { background: #95C7E1; background: -moz-linear-gradient(top, #C2E8FB, #95C7E1); background: -webkit-gradient(linear, left top, left bottom, from(#C2E8FB), to(#95C7E1)); -moz-border-radius: 12px; -webkit-border-radius: 12px; -khtml-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.27); -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.27); -khtml-box-shadow: 0 2px 3px rgba(0,0,0,0.27); box-shadow: 0 2px 3px rgba(0,0,0,0.27); color: #003354; font-size: 11px; line-height: 17px; padding: 0; position: absolute; bottom: -10px; left: -10px; text-shadow: 1px 1px 0 #E0F0F8; text-transform: uppercase; width: 300px; z-index: 2; } .pricing-table .popular h4 { color: #003354; font-size: 11px; line-height: 17px; margin: 0; } .pricing-table section { background: #D0D0D0; border-left: 1px solid #BBB; } .pricing-table article:first-child section { border-left: none; } .pricing-table section ul li { border-top: solid 1px #e2e2e2; border-bottom: solid 1px #B9B9B9; line-height: 24px; padding: 13px 0; text-shadow: 0 1px 0 #fff; } .pricing-table section ul li strong { color: #363636; font-size: 16px; } .pricing-table footer { background: #C4C4C4; background: -moz-linear-gradient(top, #E9E9E9, #C4C4C4); background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#C4C4C4)); border-left: 1px solid #BBB; border-top: solid 1px #f5f5f5; height: 120px; text-shadow: 1px 1px 0 #f5f5f5; } .pricing-table footer p { padding: 15px 0; } .pricing-table footer strong { color: #000; display: block; font-size: 24px; line-height: 1; } .pricing-table article:hover, .pricing-table article.selected { -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 0px rgba(0,157,249,0.81); -webkit-box-shadow: 0 1px 0px rgba(0,157,249,0.81); box-shadow: 0 1px 0px rgba(0,157,249,0.81); margin: 0 -3px; position:relative; top: -5px; z-index:10; width:34%; } .pricing-table article:hover header, .pricing-table article.selected header { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; height: 71px; } .pricing-table article:hover .popular, .pricing-table article.selected .popular { bottom: -9px; left: -6px; } .pricing-table article:hover section, .pricing-table article.selected section { border-right: 1px solid #BBB; } .pricing-table article:hover footer, .pricing-table article.selected footer { -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; border-right: 1px solid #BBB; height: 126px; } @media only screen and (max-width: 767px) { .pricing-table article { width: 100%; margin-bottom: 20px; } .pricing-table article:hover, .pricing-table article.selected { width: 100%; margin: 0 0 20px 0; top: 0; } }