glittergallery/GlitterGallery

*{
  font-family: $font;
  margin: 0;
  padding: 0;
}

$nprogress-color: red;
@import 'nprogress';

// smaller phones

@media screen and (min-width: 0em){
  body{
    background-color: $geometry_gray;
    .wrapper{
      nav {
        z-index: 3;
      }
      article{
        @include center;
        @include span(1);
        color:$map_blue;

        header{
          margin-top: 2.25em;
          border-bottom: solid 0.15em red;
          h1{
            font-weight: 300;
            padding: 0.25em;
            text-align: left;
            color: $map_blue;
            background-color: $dark_geometry_gray;
            img{
              width: 1.2em;
              height: auto;
              float: left;
              margin: auto 0.15em;
            }
            span{
              font-weight: 700;
            }
          }
          h1.generated{
            a{
              color: $map_blue;
              text-decoration: none;
            }
            a:hover{
              text-decoration: underline;
            }
            .star{
                display: inline-flex;
                width: 23% !important;
            }
          }
          h2{
            text-align: left;
            padding: 0.3em;
            font-size: 0.85em;
            font-weight: 300;
            display: inline-block;
            background-color: white;
            overflow: hidden;
            a{
              text-decoration: underline;
              color: $map_blue;
            }
          }
          #file_info{
            margin-top: 0.3em;
            margin-bottom: -0.35em;
            float: right;
            display: none;
          }
        }
        table {
          width: 100%;
        }
        section{
          background-color: white;
          padding: 0.25em;
          div{
            @include cf();
            background-color: $geometry_gray;
            padding: 0.25em;
            div.option{
              @include col(2/3);
              min-height: 30vh;
              form{
                padding-top: 0;
              }
              header{
                margin-top: 0;
                border-bottom: solid 0.15em $dark_geometry_gray;
                h2{
                  font-weight: 700;
                  a{
                    text-decoration: none;
                  }
                  a:hover{
                    text-decoration: underline;
                  }
                }
                h2.issue{
                  font-weight: 300;
                }
              }
              div{
                margin-bottom: 0.25em;
              }
            }
          }
        }
      }
      aside{
        display: none;
      }
    }
  }
}


// potrait tablets

@media screen and (min-width: 60.063em){

  body{
    .wrapper{
      article {
        @include span(3/4);
        header{
          h1.generated{
            font-size: 1.5em;
          }
        }
      }

      aside{
        @include span(1/4);
      }
    }
  }
}

// desktops and bigger tablets

@media screen and (min-width: 64.063em){

  body{
    .wrapper{
      article{
        @include span(1/2);
        header{
          margin-top: 2.25em;
        }
      }
    }
  }

  #mobile-header{
    display: none;
  }
}

@media screen and (min-width: 40.063em){
  #file_info{
    display: initial !important;
  }
}

span.badge{
  @include border-radius(0.1em);
  padding: 0.2em;
  font-size: 0.8em;
  font-weight: 700;
}
.author{
  background-color: $light_green;
  color: green;
}
.pr{
  @extend .author;
}
.type{
  box-shadow:inset 0 0 0.1em 0 $map_blue;
  color: gray;
}
.error_message{
  color:red;
  font-weight: bold;
  padding: 0.2em;
}