/*

* Components. This is mostly a cosmetic layer — this is where I included more specific styling instructions for objects. Without the components layer, the site would still have its structure, but would look like a gray-box wireframe.
* See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.tbp9yocm3 for details.
*/

.small, .reading_time {

font-size: .75rem;

}

.bold {

font-weight: bold;

}

.normal_font_size {

font-size: $fontSize;

}

.hidden {

display: none;

}

.float_right {

float: right;

}

.container::before, .container::after {

content:"";
display:table;

} .container::after {

clear:both;

} .container {

zoom:1; /* For IE 6/7 (trigger hasLayout) */

}

.form_row {

width: 100%;

label {
  font-weight: bold;
  font-size: .9rem;
}

label, input, textarea {
  width: 100%;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

button {
  width: 120px;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

}

.right_align_contents, .form_row_right_align {

text-align: right;

}

.center_contents {

text-align: center;

}

.post_list {

margin-bottom: 2.5rem;

}

article_footer {

margin-top: 1rem;
border-top: 1px solid $material800;

h2 {
  font-size: $fontSize;
}

}

page_footer {

margin-top: 1.5rem;
border-top: 2px solid $material500;
text-align: center;

}