@import "compass/css3";
@import "styles.scss";

body {
  display: block;
  overflow: scroll !important; 
}

nav {
  position: fixed;    
  z-index: 10;
  height: 50px;
  width: 100%;
  background-color: #3e3a37;
  color: white;
  opacity: 0.95;
}

a.logo-anchor {
  color: white;

  &:hover {
    color: darken(white, 30);
  }
}

ul li {
  display: inline;
}

ul.typography li {
  display: inline-block;
  text-align: center;
  margin: 20px 10px 0 0;
  padding: 30px;
  min-height: 125px;
  min-width: 130px;
  border: 1px solid #EEE;
  background-color: white;  
  border-radius: 5px;
}

ul.left, ul.right {
  padding: 12px;
  margin: 0px 25px;
  font-weight: bold;
}

ul.right {
  li {
    margin: 8px;
  }
}

section.guide-section {
  display: block;
  height: 100%;
  min-height: 666px;
  overflow-y: auto;
  padding: 66px 32px;

  &:nth-child(even) {
    background-color: $top_pane;  
  }
}

.color-card {
  width: 160px;
  height: 230px;
  border-radius: 5px;
  display: inline-block;
  margin-right: 15px;
}

.color-label {
  position: relative;
  top: 173px;
}

.color-label, .typeface-sample {
  background-color: white;
  border: 1px solid #eee;
  text-align: center;
  color: #344a5f;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding: 10px 0;
}

.color-name {
  font-size: small;
}

/* Color Cards definition */

.color-grid {
  #primary-color-card { background-color: $primary_color; }
  #secondary-color-card { background-color: $secondary; }
  #top-pane-card { background-color: $top_pane; }
  #contrast-card { background-color: $contrast; }
  #action-buttons-card { background-color: $action_buttons; }
  #success-card { background-color: $success; }
  #attention-card { background-color: $attention; }
  #warning-card { background-color: $warning; }
  #error-card { background-color: $error; }
  #search-highlight-card { background-color: $search_highlight; }
  #count-background-card { background-color: $total_count_bg; }
}
/* Typeface cards definition*/
ul.typography li h2 {
  &.bold-header { font-weight: bold; }
  &.extra-bold-header { font-weight: 800; }
  &.lighter-header { font-weight: lighter; }
}

ul.headers-and-sizes {
  margin: 20px 100px 0 0;
  display: inline-block;
}