glittergallery/GlitterGallery

@media screen and (min-width: 0em){
  .wrapper{
    article.hero{
      header{
        background-color: $map_blue;
        margin: 0;
        padding-top: 2.25em;
        h1{
          background-color: $map_blue;
          text-align: center;
          font-size: 2.5em;
          color: white;
        }
        h2{
          padding: 0 1em 1em 1em;
          background-color: $map_blue;
          color: $geometry_gray;
          text-align: center;
          font-size: 1.5em;
        }
      }
      section{
        padding: 0;
        div{
          padding: 0;
          form{
            input[type="email"], input[type="password"]{
              margin: 0 auto;
              width: 80%;
              text-align: center;
              box-shadow: none;
              border-style: none;
              border-bottom: solid 0.125em $map_blue;
            }
            .remember{
              margin: 0 auto;
              width: 80%;
              text-align: left;
              label{
                display: inline;
              }
            }

            input[type="submit"]{
              @include center;
              width: 80%;
            }
          }
        }
      }
      section.options{
        background-color: $geometry_gray;
        div{
          margin: 0 auto;
          width: 80%;
          text-align: right;
          p{
            a{
              color: $map_blue;
            }
            a:hover{
              font-weight: 700;
            }
          }
        }
      }
      section.social{
        div{
          @include span(1);
          margin-top: 0.25em;
          form{
            input[type="submit"]{
              width: 60%;
            }
            input[type="submit"].openid{
              display: none;
            }
            input[type="submit"].facebook{
              display: none;
            }
            input[type="submit"].github{
              background-color: gray;
            }
          }
        }
      }
    }
  }
}

@media screen and (min-width: 40.063em){
  body{
    .wrapper{
      article.hero{
        section.social{
          width: 80%;
          margin: 0 auto;
          div{
            margin: 1em auto;
            @include span(1/3);
            form{
              margin: 0 auto;
              width: 60%;
              input[type="submit"]{
                @include col(1);
                text-align: center;
              }
              input[type="submit"].openid{
                display: initial;
                background-color: orange;
              }
              input[type="submit"].facebook{
                display: initial;
                background-color: #3b5998;
              }

            }
          }
        }
      }
    }
  }
}

@media screen and (min-width: 64.063em){
  body{
    .wrapper{
      aside.widget{
        div.asidewrapper{
          margin-top: 0;
        }
      }
    }
  }
}