concat.styl

html
  box-sizing: border-box
  text-size-adjust: 100%

body
  width: 100%
  margin: 0

audio:not([controls])
  display: none
  height: 0

pre
  white-space: pre-wrap

q 
  quotes: "\201C" "\201D" "\2018" "\2019"

sub,
sup
  line-height: 0
  position: relative
  vertical-align: baseline

fieldset 
  border: 1px solid #c0c0c0
  margin: 0 2px
  padding: 0.35em 0.625em 0.75em

button,
input,
select,
textarea
  font-family: inherit
  font-size: 100%
  margin: 0
  line-height: normal
  text-transform: none

button,
html input[type="button"],
input[type="reset"],
input[type="submit"]
  -webkit-appearance: button 
  cursor: pointer

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration
  -webkit-appearance: none

button::-moz-focus-inner,
input::-moz-focus-inner 
  border: 0
  padding: 0

textarea
  overflow: auto
  vertical-align: top
  resize: none

table
  border-collapse: collapse
  border-spacing: 0



.size1of8, 
.size1of4, .size2of8,
.size1of3, .size3of8,
.size3of8,
.size1of2, .size2of4, .size4of8,
.size5of8,
.size2of3,
.size3of4, .size6of8,
.size7of8,
.size1of1, .size2of2, .size3of3, .size4of4, .size8of8
  box-sizing: border-box
  padding-left: 18px
  padding-right: 18px
  margin-bottom: 0
  margin-top: 0

// these rows were made for nesting
.row
  box-sizing: border-box
  display: flex
  flex-wrap: wrap
  margin: 0 -18px 0 -18px

// 960px or more
@media all and (min-width: 960px)
  .size1of8
    width: 12.5%
  .size1of4, .size2of8
    width: 25%
  .size1of3
    width: 33.333%
  .size3of8
    width: 37.5%
  .size1of2, .size2of4, .size4of8
    width: 50%
  .size5of8
    width: 62.5%
  .size2of3
    width: 66.67%
  .size3of4, .size6of8
    width: 75%
  .size7of8
    width: 87.5%
  .size1of1, .size2of2, .size3of3, .size4of4, .size8of8
    width:100%

// between 640px and 960px
@media all and (min-width: 641px) and (max-width: 959px)
  .size1of8
    width: 25%
  .size1of2, .size2of4, .size4of8
    width: 50%
  .size1of4, .size2of8,
  .size1of3, .size3of8,
  .size3of8,
  .size5of8,
  .size2of3,
  .size3of4, .size6of8,
  .size7of8,
  .size1of1, .size2of2, .size3of3, .size4of4, .size8of8
    width: 100%

// 640 pixels or less
@media all and (max-width: 640px)
  .size1of8
    width: 50%
  .size1of4, .size2of8,
  .size1of3, .size3of8,
  .size3of8,
  .size5of8,
  .size1of2, .size2of4, .size4of8,
  .size2of3,
  .size3of4, .size6of8,
  .size7of8,
  .size1of1, .size2of2, .size3of3, .size4of4, .size8of8
    width: 100%

.media 
  display: flex
  align-items: flex-start
  background-color: blue

.media-figure 
  margin-right: 1em

.media-body 
  flex: 1

// align
.align-start
  align-items: flex-start

.align-center
  align-items: center

.align-end
  align-items: flex-end

.align-baseline
  align-items: baseline

.align-stretch
  align-items: stretch

// justify
.justify-start
  justify-content: flex-start

.justify-center
  justify-content: center

.justify-end
  justify-content: flex-end

.justify-between
  justify-content: space-between

.justify-around
  justify-content: space-stretch

// direction
.direction-row
  flex-direction: row

.direction-column
  flex-direction: column

.smooth
  transition: all 0.2s cubic-bezier(.7, 0, .175, 1) 0s



// wrapper
//.input
//  display: flex

// input
input:not([type="checkbox"]):not([type="radio"])
  flex: 1
  outline: none
input:not(:first-child):not([type="checkbox"]):not([type="radio"])
  border-left: 0
input:not(:last-child):not([type="checkbox"]):not([type="radio"])
  border-right: 0
input:hover:not([type="checkbox"]):not([type="radio"])
  border-color: hsl(0, 0%, 65%)
input:focus:not([type="checkbox"]):not([type="radio"])
  border: 2px solid hsl(180, 60%, 60%)

input.invalid
  border-color: hsl(360, 100%, 50%)
input.valid
  border-color: hsl(90, 100%, 50%)

// input button, input label
button[role='add-on'], label[role='add-on']
  border: 1px solid hsla(31, 15%, 50%, 0.25)
  padding: 0.5em 0.75em
button[role='add-on']:first-child, label[role='add-on']:first-child
  border-radius: 2px 0 0 2px
button[role='add-on']:last-child, label[role='add-on']:last-child
  border-radius: 0 2px 2px 0

// radio
input[type="radio"]
  border: 1px solid hsla(31, 15%, 50%, 0.25)

// checkbox
input[type="checkbox"]
  border: 1px solid hsla(31, 15%, 50%, 0.25)

// disabled
input.disabled
  user-select: none
  cursor: not-allowed




// vertical nav
nav
  display: flex
  flex-direction: column

nav > div
  height: 60px
  margin-bottom: 6px
  background-color: blue



tr
  display: flex
  flex-direction: row

@media all and (max-width: 699px)
  tr
    flex-direction: column

body
  font-size: 16px
  line-height: 24px

h1, .h1
  font-size: 40px
  line-height: 48px

h2, .h2
  font-size: 40px
  line-height: 48px

h3, .h3
  font-size: 26px 
  line-height: 36px

h4, .h4
  font-size: 18px
  line-height: 30px

.largeCopy
  font-size: 17px
  line-height: 24px

.mediumCopy, p, span
  font-size: 15px
  line-height: 24px

.smallCopy, label
  font-size: 14px
  line-height: 18px