@import "constants";

.red_form { color: #f00; }

body{
  font-family: helvetica;
  background-color: $color-secondary;
}

header {
  border-top: 10px solid $color-secondary;
  background-color: #000;
}

a {
  font-size: 14px;
  color: $color-primary;
}

a:link, a:visited {
  text-decoration: none;
}

a:hover, a:active {
  text-decoration: underline;
  color: $color-primary;
}

.hidden {
  display: none;
}

.clear { clear: both; }

.main {
  background-color: $color-primary;
  width: 100%;
  overflow: hidden;
}

.container{
  width: 960px;
  margin: 0 auto;
}

#menu{
  border-radius: 20px;
  background: #000;
  height: 70px;
}

ul#menu_top{
  margin: {
    top: 25px;
    right: 90px;
  }
  float: right;
}

#menu_top li {
  display: inline;
}

ul#menu_top li a{
  color:$color-primary;
  font-weight: bold;
  display:block;
  float: left;
  margin-right: 25px;
  text-decoration: none;
}

ul#menu_top li a:hover{
  color: $color-secondary;
}

#pic{
  background: image-url('showcase_frame.png') no-repeat;
  height: 403px;
  margin-top: 65px;
  position:relative;
}

#pic .showcase img {
  position: absolute;
  left: 15px;
  top: 33px;
  z-index: 50;
  width: 496px;
  height: 346px;
  overflow: hidden;
}

.showcase {
  float:left;
}

#intro{
  left:90px;
  position:absolute;
  top:-30px;
  float: left;
  z-index: 100;
}

#intro p{
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  line-height: 12px;
}

#intro p strong{
  font-size: 18px;
  font-weight: bold;
  color: #111111;
  display: block;
  margin-bottom: 4px;
  line-height: 18px;
}

#breadcrumb{
  background:image-url('breadcrumb.png') repeat scroll 0 0 transparent;
  height:70px;
  margin-top: 10px;
}

#create{
  bottom:16px;
  float:right;
  position:relative;
  right:83px;
}

#howto{
  background:image-url('howto.png') repeat scroll 0 0 transparent;
  float:right;
  left: 10px;
  top: 10px;
  min-height:197px;
  position:relative;
  width:388px;
}

#twitter{
  background:image-url('twitter.png') repeat scroll 0 0 transparent;
  float:right;
  margin-top: -125px;
  height:152px;
  padding:10px 5px;
  position:relative;
  width:347px;
}

#twitter a, #twitter a:hover {
  font-size: 12px;
  color: #DA3546;
  background-color: white;
}

#twitter_status {
  margin: 25px 5px 0;
  font-size: 12px;
  width: 18em;
  line-height: 1.2;
}

.twitter_status_date {
  @extend #twitter_status;
  text-align: right;
}

.tweet_list .tweet_time {
  position: absolute;
  bottom: 45px;
  left: 10px;
}

#most_recent_events{
  float: left;
  margin-right:40px;
}

#most_recent_events p strong,
#most_recent_comments p strong{
  font-size: 12px;
  color: $color-primary;
  font-weight: bold;
}

.comment_text {
  width: 185px;
}

.event{
  background: #fff;
  border-radius: 10px;
  width: 578px;
  padding: 20px;

  h2 {
    margin: 0 0 .5em;

    a {
      font-size: 22px;
    }
  }
}

.event + .event {
  margin-top: 20px;
}

.head{
  margin-bottom: 40px;
}

#comments{
  background: #000;
  border-radius: 15px;
  float:right;
  height:800px;
  width: 262px;
  padding: 20px;
  margin-bottom: 10px;
}

.event p strong{
  font-weight: bold;
  color: $color-primary;
}

.event p{
  color: #111111;
  font-size: 14px;
}

.more{
  position: relative;
  top: 5px;
  cursor: pointer;
  cursor: hand;
  margin-right: 10px;
}

.event a{
  font-size: 15px;
  color: $color-primary;
}

.event a:link, .event a:visited{
  text-decoration: none;
}

.event a:hover, .event a:active{
  text-decoration: underline;
  color: $color-primary;
  background-color: #ffffff;
}

.fb_iframe_widget {
  line-height: 0;
  font-size: 0;
  overflow: hidden;
}

.buttons a {
  margin-right: 15px;
}

.buttons iframe {
  position: relative;
}

#content{
  margin: 20px 0 20px;
}

.borda_vinho{
  border: 5px solid #b24450;
}

.comment p{
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
}

.comment p small{
  font-size: 9px;
  font-weight: bold;
  color: $color-primary;
}

.comment div{
  float: left;
}

.comment_pic{
  margin-right: 10px;
}

.comment{
  margin-top: 15px;
  overflow: hidden;
}

.all{
  float: right;
  font-weight: bold;
  font-size: 12px;
  margin-top: 20px;
}

.all:hover, .all:active {
  text-decoration: underline;
}

.prop_link{
  margin-top: 40px;
  font-size: 12px;
  color: $color-primary;
  text-align: center;
}
.prop_link span{
  color: #111111;
}

#footer{
  background: $color-primary;
  height: 273px;
  clear: both;
}

.fancy_login {
  border-bottom: 2px dotted $color-primary;
  padding-bottom: 2px;
}

#login_services {
  margin: 10px 0;
}
#login_services li {
  margin: 10px 0;
}

#footer_cols{
  padding-top:28px;
  font-size: 11px;
  color: #ffffff;
}

.footer_a{
  float: left;
  width: 320px;
}

.footer_a a {
  color: white;
  font-size: 11px;
  text-decoration: underline;
}

#copyright{
  text-align: center;
  font-size: 10px;
  color: #ffffff;
  background-color: #111;
}

#copyright strong{
  font-weight: bold;
}

#proposal{
  background: #191817;
  color: white;
  border-radius: 10px;
  margin-top:20px;
  padding:20px;
  width: 300px;
  box-sizing: border-box;
}

#profile{
  background: #000;
  border-radius: 20px/30px;
  margin-bottom:20px;
  margin-top:20px;
  padding:10px;
  position:relative;
  width:281px;
  text-align: left;
  margin-left: 0px;
  padding-left: -1px;
}

img#user_picture{
  height:70px;
  margin-left: 30px;
  margin-top: 20px;
  margin-bottom: 0px;
}

#proposal_list{
  left:20px;
  margin-top:17px;
  padding:19px;
  position:relative;
  float: left;
  width: 620px;
}

.event_notice_area {
  border-radius: 5px;
  border: 1px solid lighten($color-primary, 20%);
  margin: 10px 10px 20px;
  padding: 10px;
  background-color: white;
}

.logo{
  margin-bottom: 20px;
  border: 5px solid #b24450;
  position: relative;
  top: 18px;
  left: 34px;
}

.linha{
  margin-top: 30px;
  margin-left: 25px;
}

#proposal p{
  font-size: 12px;
  color: #ffffff;
}

#proposal p strong{
  font-weight: bold;
  color: $color-primary;
  font-size: 14px;
}

.prop{
  background: #fff;
  border-radius: 10px;
  margin-bottom:10px;
  padding: 20px 20px 120px 20px;
  position: relative;
}

.prop p strong, .sub_vote, .sub_add_prop{
  font-weight: bold;
  color: $color-primary;
  font-size: 12px;
}

.prop p{
  color: #111111;
  font-size: 14px;
}

.prop_sub{
  bottom: 20px;
}

.prop_sub img{
  border: 5px solid #b24450;
}

.prop_sub small{
  color: $color-primary;
  display: block;
  font-size: 12px;
  font-weight: bold;
  margin-right:200px;
  width: 230px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.prop_sub a:link, .prop_sub a:visited{
  font-size: 12px;
  color: $color-primary;
  text-decoration: none;
}

.prop_sub a:hover, .prop_sub a:active{
  text-decoration: underline;
  color: $color-primary;
  background-color: #ffffff;
}

a.prop_link:link, a.prop_link:visited{
  color: $color-primary;
  text-decoration: none;
  font-size: 14px;
}

a.prop_link:hover, a.prop_link:active{
  text-decoration: underline;
  background-color: #ffffff;
}

.thumb{
  border: 0;
}

.thumb_p{
  display: inline-block;
  position: relative;
  right: 5px;
}

.organizer{
  border: 3px solid #B24450;
}

#left_bar{
  float:left;
  margin-bottom:20px;
  margin-top:45px;
}

#events{
  clear: both;
}

.event_listed {
  border-radius: 20px;
  background: #FFF;
  width: 960px;
  height: 133px;
  margin-bottom: 20px;
}

.event_listed p {
  font-size: 12px;
}

.event_listed h1 a {
  color: #DA3546;
}
.event_listed h1 a:hover {
  background-color: white;
}

.event_listed h1 {
  padding-top: 15px;
  padding-bottom: 5px;
  font-size: 19px;
}

.event_status {
  color: #414141;
  float: right;
  padding: 15px 15px 0 0;
}

.event_desc {
  max-width: 30%;
  float: left;
}

.event_status span {
  font-size: 3.5em;
  font-weight: bold;
  letter-spacing: -2px;
  width: 10px;
  margin-right: -5px;
  margin-left: 10px;
}

#events_list {
  margin-top: 20px;
  position:relative;
  float: left;
}

#events_list .create_button {
  margin-bottom: 15px;
}

.logo_small {
  width: 90px;
  height: 87px;

  border: 5px solid #B24450;
  float: left;
  margin: 20px;
}

.content-box {
  background: #fff;
  border-radius: 10px;
  padding: 20px;

  &.top {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  &.bottom {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.content-box-divider {
  border-top: 1px solid #eff7fc;
  padding: 20px 0;
}

.comments_list{
  background: #fff;
  border-radius: 10px;
  padding: 20px;
}

.comments_list p{
  font-size: 14px;
  color: #111111;
}

.comments_list img{
  border: 5px solid #b24450;
  float: left;
  margin-right: 10px;
}

.comments_list p small{
  font-size: 12px;
  color: $color-primary;
  font-weight: bold;
}

.comments_list p spam{
  font-size: 12px;
  color: $color-primary;
}

#comment_new form .field textarea{
  border:2px solid #111111;
  height:50px;
  padding:3px;
  width:427px;
}

#new_item h1 {
  font-size: 32px;
  letter-spacing: -2px;
  font-weight: bold;
  margin-bottom: 20px;
}
#new_item h2 {
  font-size: 14px;
}

#new_item h3 {
  color: $color-primary;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
}

#new_item .title {
  display: block;
  margin-bottom: 5px;
}

#login_container {
  width: 800px;
  margin: auto;
}
#login_container .old_school {
  border-right:2px dotted #BABABA;
  float:left;
  margin-bottom:20px;
  margin-right:50px;
  margin-top:20px;
  padding-right:50px;
}


#new_item {
  margin-top:37px;
  position:relative;
  float: left;
  width: 100%;
}

#new_item input[type=text]:focus,
#new_item input[type=password]:focus,
#new_item textarea:focus {
  outline: none;
  border-color: #bababa;
}

#new_item .remember {
  font-size: 12px;
}

#new_item .actions,
#new_item .field {
  clear: both;
}

#new_item input[type=text],
#new_item input[type=password],
#new_item select, #new_item textarea {
  background:image-url('textinputbg.gif') repeat-x scroll 0 0 #FFFFFF;
  border:1px solid #D3D3D3;
  color:#000000;
  font-size:12px;
  margin-bottom:10px;
  padding:7px;
  width:400px;
  float: left;
}

#new_item input[type=text].error,
#new_item input[type=password].error,
#new_item select.error, #new_item textarea.error {
  background:image-url('textinputbg-error.gif') repeat-x scroll 0 0 #FFDFDF;
  padding:7px;
}

#new_item label.error {
  float: left;
  margin: 10px;
  color: #f00;
}
#new_item #login_container label.error {
  float: none;
  display: block;
}

#new_item input[type=image] {
  margin: 50px 0 0 0;
}

#new_item textarea {
  height:200px;
  padding:5px;
  width:400px;
}

.devise_links {
  margin: 10px 0;
}

.devise_links a {
  font-size: 12px;
}

#footer_a p{
  line-height:1.3;
}

.field label{
  font-weight: bold;
  font-size: 12px;
}

.vermelho{
  color: $color-primary;
}

.datepicker{
  appendText: '(yyyy-mm-dd)';
}

.event_stat p.name{
  font-size: 14px;
  color: #111111;
  font-weight: bold;
}

.yet{
  font-size: 14px;
  color: #111111;

}

.event_stat p.name spam{
  font-size: 14px;
  color: $color-primary;
  font-weight: bold;
}

.proposals_stat{
  position: relative;
  left: 20px;
}

.proposals_stat p.list{
  font-size: 14px;
  color: #111111;
  font-weight: bold;
  margin-bottom: 5px;
}

.prop_stat  p{
  font-size: 12px;
  color: #111111;
}

#composicao {
  font: 9pt Arial, Helvetica, sans-serif;
  width: 100%;
  border-collapse: collapse;
}

#composicao caption {
  font-weight: bold;
}

#composicao tfoot tr {
  border: solid 1px #333333;
}

#composicao tfoot td {
  color: #ffffff;
  padding: 5px;
  background: #999999;
}

#composicao tr.alt td {
  background: #CCCCCC;
}

#composicao tbody td,
#composicao th {
  padding: 5px;
  border: solid 1px #333333;
}

#composicao th {
  color: #DCDCDC;
  background: #666666;
}

.event-social {
  margin-left: 35px;
}

#tweeting{
  color: #ffffff;
  padding: 10px;
  font-size: 12px;
  background-color: #111111;
  cursor:pointer;
  right: 40px;
  bottom: 0px;
  height:40px;
  position:fixed;
  width:118px;
  border-color:black;
  clear: both;
}

#tweeting #tw{
  display: inline;
  position: relative;
  top: 7px;
}

#edit_proposal {
  margin-left: 5px;
}

#proposal_notice {
  margin-bottom: 20px;
}

#proposal_notice strong {
  text-decoration: underline;
}

a.comment_detail:link, a.comment_detail:visited {
  color:#FFFFFF;
  font-size:12px;
  font-weight:bold;
}

a.logo_c4p img{
  margin-left:27px;
  margin-top:24px;
  float: left;
}

.actions_com input{
  display:inline-block;
  left:428px;
  position:relative;
  top:6px;
}

.voting_container{
  left:489px;
  position:absolute;
  bottom: 15px;
}

.com_prop{
  display:inline-block;
  left:269px;
  position:absolute;
  bottom: 20px;
  z-index: 10;
}

.twit{
  float: left;
  margin-right: 4px;
  display: inline-block;
}

.percentage  {
  float: right;
  width: 200px;
  border: 1px dotted #bababa;
  background-color: #dedede;
  font-size: 26px;
  font-weight: bold;
  color: white;
  text-align: right;
  margin: 0 0 40px 20px;
}
.percentage .gray {
  background-color: #BABABA;
  height: 100%;
}

.percentage .red {
  background-color: #F00;
}

.percentage .green {
  background-color: #0F0;
}
.percentage span {
  display:block;
  padding: 10px;
}

.count_hint {
  font-size: 12px;
  margin-bottom: 10px;
}

.spinner {
  position: absolute;
  -moz-opacity: 0.8;
  opacity: 0.8;
  height:176px;
  width:581px;
  background-color: white;
  z-index: 50;
  border: 2px solid white;
  display: none;
}
.spinner img {
  position: absolute;
  left: 50%;
  top: 50%;
}

.rr{
  bottom:11px;
  left:41px;
  position:relative;
}

.branco{
  color: #ffffff;
}

#profile p {
  color: #ffffff;
  font-size: 14px;
  position: relative;
  left: 30px;
  width: 85%;
}

#profile ul {
  color: #ffffff;
  font-size: 14px;
  position: relative;
  left: 30px;
  width: 85%;
  display: flex;
  li {
    padding-right: 10px;
  }
}

#providers{
  margin-top: 20px;
}

.notice {
  background-color:#f2f2f2;
  color:#212121;
  font-size:14px;
  padding: 20px 20px 10px 20px;
  text-align:center;
  z-index:99999;
  width:100%;
  font-size: 18px;
  font-weight: bold;
}

#crop_original {
  float: left;
  margin-right: 20px;
}

#crop_original img {
  max-width: 700px;
}

#crop_preview_container {
  width: 180px;
  height: 175px;
  overflow: hidden;
}

#crop_preview {
  width: 180px;
  height: 175px;
  position: relative;
}

#crop_previews {
  float: left;
}

form {
  .special {
    display: none;
  }

  .field {
    .special-warning {
      margin: 0 5px;
      clear: left;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
}

.adsbygoogle {
  margin: 10px;
}

.using-markdown {
  img {
    max-width: 100%;
  }

  h1, h2, h3, h4, h5, p {
    margin: 1em 0;
  }

  em {
    font-style: italic;
  }

  strong {
    font-weight: bold;
  }

  ol, ul {
    font-size: 12px;
    list-style-type: decimal;
    padding: 0 0 0 2em;
  }

  ul {
    list-style-type: disc;
  }
}
