html { box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } body { background: color(bg, 1); /* Fallback for when there is no custom background color defined. */ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } hr { border: 0; @include divider(); margin-top: 24px; margin-bottom: 24px; } ul, ol { margin-top: 0; margin-bottom: 24px; padding-left: 24px; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; } dl { margin-top: 0; margin-bottom: 24px; } dt { @include font-weight(semibold); } dd { margin-left: 24px; margin-bottom: 24px; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ vertical-align: middle; } figure { margin: 24px 0; /* Extra wide images within figure tags don't overflow the content area. */ } figcaption { @include font-size(7, mobile, true, true); padding: 8px 0; } img, svg { display: block; } // tables table { border-collapse: collapse; margin-bottom: 24px; width: 100%; } tr { border-bottom: 1px solid color(bg, 3); } th { text-align: left; } th, td { padding: 10px 16px; &:first-child { padding-left: 0; } &:last-child { padding-right: 0; } }