bui-css/lib/css/bui.css

A contemporary, approachable css library for prototyping and beyond

@import url("https://fonts.googleapis.com/css?family=Muli:400,600,800");
@import url("https://fonts.googleapis.com/css?family=Merriweather:400i,700i");
.blockquote,.script,blockquote{
  font-family:Merriweather,Garamond,georgia,serif;
  font-style:italic; }

body,html{
  color:#555;
  font-family:Muli,Roboto,Droid Sans,helvetica,arial,sans-serif;
  font-size:15px;
  font-weight:400;
  text-rendering:optimizeLegibility; }

.title,h1,h2,h3,h4,h5,strong{
  font-weight:800; }

._xxxl,h1{
  font-size:3.13333em; }

._xxl,h2{
  font-size:2.33333em; }

._xl,h3{
  font-size:1.8em; }

._lg,h4{
  font-size:1.53333em; }

._md,.blockquote,blockquote,h5{
  font-size:1.26667em; }

._sm,h6,p{
  font-size:1em; }

._xs,small{
  font-size:.86667em; }

.container{
  margin:auto;
  padding:18px 0;
  max-width:880px;
  overflow:auto;
  position:relative;
  z-index:1; }

[class*=-ex-]{
  background-position:center;
  background-size:cover; }
  [class*=-ex-]:before{
    content:'';
    display:block; }

._21-ex-9:before{
  padding-top:42.85714%; }

._9-ex-21:before{
  padding-top:233.33333%; }

._16-ex-9:before{
  padding-top:56.25%; }

._9-ex-16:before{
  padding-top:177.77778%; }

._15-ex-10:before{
  padding-top:66.66667%; }

._10-ex-15:before{
  padding-top:150%; }

._7-ex-5:before{
  padding-top:71.42857%; }

._5-ex-7:before{
  padding-top:140%; }

._5-ex-3:before{
  padding-top:60%; }

._3-ex-5:before{
  padding-top:166.66667%; }

._4-ex-3:before{
  padding-top:75%; }

._3-ex-4:before{
  padding-top:133.33333%; }

._3-ex-2:before{
  padding-top:66.66667%; }

._2-ex-3:before{
  padding-top:150%; }

._2-ex-1:before{
  padding-top:50%; }

._1-ex-2:before{
  padding-top:200%; }
._tight{
  margin:0 auto;
  padding:0;
  overflow:auto; }

._white,body{
  background-color:#fff;
  color:#555; }
  ._white [href],body [href]{
    color:#26a; }
    ._white [href]:visited,body [href]:visited{
      color:#746; }

._dark{
  background-color:#222;
  color:#fff; }
  ._dark [href]{
    color:#fff; }
    ._dark [href]:visited{
      color:#fff; }

._deep,.recess{
  background-color:#555;
  color:#eee; }
  ._deep [href],.recess [href]{
    color:#def; }
    ._deep [href]:visited,.recess [href]:visited{
      color:#edf; }

._loud{
  background-color:#ccc;
  color:#222; }
  ._loud [href]{
    color:#235; }
    ._loud [href]:visited{
      color:#423; }

._soft{
  background-color:#eee;
  color:#222; }
  ._soft [href]{
    color:#26a; }
    ._soft [href]:visited{
      color:#746; }

._main._dark{
  background-color:#235;
  color:#fff; }

._main._deep,._main.recess{
  background-color:#26a;
  color:#def; }

._main._loud{
  background-color:#9cf;
  color:#235; }

._main._soft{
  background-color:#def;
  color:#235; }

._main._white{
  background-color:#fff;
  color:#235; }

._cool._dark{
  background-color:#233;
  color:#fff; }

._cool._deep,._cool.recess{
  background-color:#187;
  color:#d4f4e4; }

._cool._loud{
  background-color:#6db;
  color:#233; }

._cool._soft{
  background-color:#d4f4e4;
  color:#233; }

._cool._white{
  background-color:#fff;
  color:#233; }

._warm._dark{
  background-color:#430;
  color:#fff; }

._warm._deep,._warm.recess{
  background-color:#864;
  color:#fec; }

._warm._loud{
  background-color:#fc5;
  color:#430; }

._warm._soft{
  background-color:#fec;
  color:#430; }

._warm._white{
  background-color:#fff;
  color:#430; }

._hot._dark{
  background-color:#510;
  color:#fff; }

._hot._deep,._hot.recess{
  background-color:#932;
  color:#fdc; }

._hot._loud{
  background-color:#f75;
  color:#510; }

._hot._soft{
  background-color:#fdc;
  color:#510; }

._hot._white{
  background-color:#fff;
  color:#510; }

._extra._dark{
  background-color:#423;
  color:#fff; }

._extra._deep,._extra.recess{
  background-color:#746;
  color:#edf; }

._extra._loud{
  background-color:#dad;
  color:#423; }

._extra._soft{
  background-color:#edf;
  color:#423; }

._extra._white{
  background-color:#fff;
  color:#423; }
._right{
  text-align:right; }

.action,.anchor,.btn,[href],[onclick],a,button{
  cursor:pointer;
  font-weight:600;
  text-decoration:none; }
  .action:focus,.action:hover,.anchor:focus,.anchor:hover,.btn:focus,.btn:hover,[href]:focus,[href]:hover,[onclick]:focus,[onclick]:hover,a:focus,a:hover,button:focus,button:hover{
    text-decoration:underline; }

.list{
  list-style:none; }

.bullet-point-list,.list.bullet-point-list{
  list-style:unset;
  list-style-position:inside; }

.nav{
  position:relative;
  z-index:1; }

.nav-list{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-line-pack:end;
      align-content:flex-end;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
      -ms-flex-direction:row;
          flex-direction:row;
  -ms-flex-wrap:wrap;
      flex-wrap:wrap;
  list-style:none;
  width:auto;
  padding:0; }

.nav-item{
  cursor:pointer;
  -ms-flex-negative:0;
      flex-shrink:0;
  min-width:0;
  padding:10px 18px; }

.nav-fill{
  -webkit-box-flex:1;
      -ms-flex-positive:1;
          flex-grow:1; }

.recess{
  margin:-36px 0;
  padding:18px 0;
  position:relative;
  z-index:0; }
  .recess:first-child{
    margin-top:0; }
  .recess:last-child{
    margin-bottom:0; }
.blockquote,.bullet-point-list,.list,.list.bullet-point-list,.list td,.list th,.table td,.table th,.tile,blockquote,h1,h2,h3,h4,h5,h6,p,pre{
  padding:10px 18px;
  max-width:880px;
  margin:auto;
  overflow:auto;
  position:relative;
  z-index:1; }

.list,.table{
  border-collapse:collapse;
  list-style:none;
  width:100%; }
  .list .list-item,.list .row,.list li,.list tr,.table .list-item,.table .row,.table li,.table tr{
    border:none;
    border-bottom:1px solid transparent;
    position:relative; }
    ._striped .list .list-item:nth-child(2n),._striped .list .row:nth-child(2n),._striped .list li:nth-child(2n),._striped .list tr:nth-child(2n),._striped .table .list-item:nth-child(2n),._striped .table .row:nth-child(2n),._striped .table li:nth-child(2n),._striped .table tr:nth-child(2n){
      background-color:rgba(18, 18, 18, .03); }
.blockquote,blockquote{
  margin:0 18px;
  position:relative; }
  .blockquote:before,blockquote:before{
    position:absolute;
    content:'';
    display:block;
    bottom:0;
    right:0;
    height:14.14px;
    width:14.14px; }
  .blockquote,.blockquote:before,blockquote,blockquote:before{
    background:linear-gradient(-45deg, transparent 10px, rgba(34, 34, 34, .06) 10px); }
    ._dark .blockquote,._dark .blockquote:before,._dark blockquote,._dark blockquote:before,._deep .blockquote,._deep .blockquote:before,._deep blockquote,._deep blockquote:before,._loud .blockquote,._loud .blockquote:before,._loud blockquote,._loud blockquote:before,.recess .blockquote,.recess .blockquote:before,.recess blockquote,.recess blockquote:before{
      background:linear-gradient(-45deg, transparent 10px, rgba(255, 255, 255, .31) 10px); }
.btn,button{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  border:none;
  font-size:1em;
  padding:8px 18px;
  margin:1px;
  text-align:center; }
  .btn:hover,button:hover{
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="1.0787000000000002 -0.07150000000000001 -0.007200000000000012 0 0 -0.021300000000000013 1.0394999999999999 -0.007200000000000012 0 0 -0.021300000000000013 -0.07150000000000001 1.0928000000000002 0 0 0 0 0 1 0" /></filter></svg>#filter');
    -webkit-filter:saturate(1.1);
            filter:saturate(1.1); }

input,textarea{
  color:#222;
  border-radius:0;
  box-shadow:inset 0 -1px #ccc;
  box-sizing:border-box;
  font-size:15px;
  font-weight:500; }
  input[type=color],input[type=date],input[type=file],input[type=month],input[type=number],input[type=password],input[type=range],input[type=text],input[type=time],textarea[type=color],textarea[type=date],textarea[type=file],textarea[type=month],textarea[type=number],textarea[type=password],textarea[type=range],textarea[type=text],textarea[type=time]{
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
    border:none;
    display:block;
    height:2.4em;
    padding:8px 10px;
    max-width:100%; }

textarea{
  overflow:hidden; }

body,html{
  box-sizing:border-box;
  margin:0;
  overflow-x:hidden;
  width:100%; }

*,:after,:before{
  box-sizing:inherit; }

/*# sourceMappingURL=bui.css.map */