body {
  font-size: 12px;
  font-family: Verdana, '游ゴシック', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

footer {
  @extend .text-muted;
  margin: 25px;
  text-align: center;

  & > ul > li + li:before {
    content: '·';
    padding-right: 10px;
  }
}

#wrapper {
  display: table;
  width: 100%;
  height: 100%;

  body.animated & {
    @include transition(margin-left 600ms ease, opacity 600ms);
    opacity: 0;
    margin-left: -20px;
  }
}

.container {
  margin-right: auto;
  padding: 0;
  overflow: hidden;

  &.right {
    display: table-cell;
    vertical-align: top;

    margin-left: 216px;
    position: relative;
  }
}

.logo {
  padding: 0 20px;
  height: 64px;
  line-height: 64px;
  background-color: $comable-theme-bg;

  a {
    font-size: x-large;
    text-decoration: none;

    &:link,
    &:visited,
    &:hover,
    &:active {
      color: #fff;
    }
  }
}

.comable-page-heading {
  margin: 0 -15px 25px;
  padding: 25px 30px;
  border-bottom: 5px solid #eee;

  & > .page-header {
    margin-bottom: 0;
  }

  & > ul {
    margin: 0;
    padding: 0;
    list-style: none;

    & > li {
      margin-left: 5px;
    }
  }
}

.comable-search {
  margin: 0 30px 25px;
}

.comable-main-fixed-top {
  padding-left: $awesome_admin_layout-navigation-width;
  width: 100%;
  background-color: #fff;
  position: fixed;
  left: 0;
  z-index: 200;

  & > .comable-page-heading {
    margin: 0;
  }

  & + .comable-page-body {
    // 89px = comable-page-heding-height
    padding-top: 89px + 20px;
  }
}


#comable-advanced-search {
  margin-top: 10px;

  fieldset > fieldset {
    margin-bottom: 10px;
  }

  button.comable-remove-button {
    @include appearance(none);
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    height: $input-height-base;
    outline: none;
  }

  .comable-remove-button {
    @include text-shadow(0 1px 0 #fff);
    @include opacity(0.2);
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    color: #000;
  }
}

// for File Inputs
// refs: http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
.btn-file {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn-file input[type=file] {
  @include opacity(0);
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}

// for Tag-it
ul.tagit {
  @include border-radius($input-border-radius);

  &.tagit-readonly {
    background-color: #eee;
  }
}