gilest/briefly

@import url("http://fonts.googleapis.com/css?family=Maven+Pro:900")
@import url("http://fonts.googleapis.com/css?family=Montserrat:400,700")
@import url("http://fonts.googleapis.com/css?family=Merriweather")

$orange: #f36c3d

=button($color)
  background: $color
  display: inline-block
  padding: 7px 10px
  text-align: center
  text-decoration: none
  color: #fff
  text-shadow: 1px 1px 0px #000
  border: none
  font-family: 'Montserrat', sans-serif
  cursor: pointer
  font-size: 12pt
  &:hover
    background: lighten($color, 7%)

*
  margin: 0
  padding: 0

html
  width: 100%
  background: #f6f6f6

.wrapper
  width: 70%
  margin: 0 auto

.top
  width: 100%
  height: 212px
  background: white

h1
  font-family: 'Maven Pro', sans-serif
  font-size: 40pt
  color: $orange
  padding-top: 35px
  width: 100%
  text-align: center
  letter-spacing: 6px
  font-weight: 700
  a
    text-decoration: none
    color: $orange

p
  font-size: 10pt

.p1
  text-align: center
  font-family: 'Montserrat', sans-serif
  color: #2d2d2d
  padding-top: 20px

.p2
  text-align: center
  font-family: 'Montserrat', sans-serif
  color: darkGray

.article_wrap
  width: 100%
  height: 414px
  margin-top: 80px
  position: relative

.article
  display: block
  text-decoration: none

=input
  text-align: center
  font-family: 'Montserrat', sans-serif
  font-size: 12pt
  color: #2d2d2d
  text-decoration: none
  font-weight: normal
  width: 70%

.art_tit, .art_tit input
  text-align: center
  font-family: 'Montserrat', sans-serif
  font-size: 21pt
  color: #2d2d2d
  text-decoration: none
  font-weight: normal
  span
    color: $orange
  input
    width: 80%
    display: inline

.article:hover .art_tit
  color: $orange

.art_img
  width: 100%
  height: 350px
  background-size: cover
  margin-top: 30px
  position: relative
  background-color: #BBBBBB

.art_darkness
  position: absolute
  bottom: 0
  left: 0
  right: 0
  width: 100%
  height: 140px
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1)))
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000',GradientType=0 )

.art_summary, .art_summary textarea
  z-index: 2
  text-decoration: none
  color: white
  font-family: 'merriweather'
  width: 94%
  font-size: 16pt
  position: absolute
  bottom: 0
  left: 0
  right: 0
  padding-bottom: 2%
  padding-left: 3%
  padding-right: 3%
  display: block
  textarea
    background: transparent
    border: none
    color: #fff

.art_overlay
  position: absolute
  width: 100%
  height: 100%
  background: rgba(243, 108, 61, 0.4)
  display: none

.article:hover .art_overlay
  display: block

.admin_stats
  width: 200px
  position: absolute
  left: 0
  .item
    +button(#A2A2A2)
    cursor: default
    &:hover
      background: #A2A2A2

.admin_controls
  text-align: right
  width: 350px
  position: absolute
  right: 0

.footer
  width: 100%
  height: 150px
  background: white
  margin-top: 100px

.foottitle
  font-size: 25px
  color: lightGray
  letter-spacing: 3px
  padding-top: 50px

.footer:hover
  .foottitle
    color: $orange
  .copyright
    color: darkGray

.copyright
  text-align: center
  padding-top: 5px
  font-family: 'Montserrat', sans-serif
  color: lightGray

.footer a
  text-decoration: none

#error_explanation
  color: red
  // background: #eee
  // border: 1px solid #999
  padding: 10px
  h2
    color: red

#preload
  display: none

.jcrop-holder
  width: 960px !important

#crop_x, #crop_y, #crop_w, #crop_h
  width: 156px

#crop_form input[type='submit']
  margin-top: 20px
  width: 661px

.admin_banner
  background: rgba(255, 255, 255, 0.4)
  position: fixed
  right: 0
  bottom: 0
  text-align: right
  padding: 0px 9px
  height: 35px
  line-height: 35px
  z-index: 2
  font-family: 'Montserrat', sans-serif
  font-size: 10pt
  input
    width: 65px
  input[type='submit']
    width: 50px

.scrape_link_container
  margin-top: 80px
  margin-bottom: 20px
  text-align: center
  input[type='text']
    +input

.article_form
  margin-top: 0
  margin-bottom: 80px
  position: relative
  .upload_wrap
    position: absolute
    width: 100%
    top: 100px
    text-align: center
    input[type='text']
      +input
      width: 50%
    input[type='file']
      color: #fff
      width: 170px

.button
  +button($orange)
  
.article_button
  +button($orange)
  float: right

.publish_button
  +button($orange)

.notice
  position: absolute
  display: block
  text-align: center
  background: rgb(96, 189, 96)
  width: 100%
  height: 30px
  line-height: 30px
  color: #fff
  text-shadow: 1px 1px 0px black
  font-family: "Montserrat", sans-serif