// Place all the styles related to the StaticPages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
@import "bootstrap-sprockets";
@import "bootstrap";

@mixin box_sizing {
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;
}

@mixin background_size($width, $height) {
  -webkit-background-size: $width $height;
     -moz-background-size: $width $height;
       -o-background-size: $width $height;
          background-size: $width $height;
}


// // These next two styles are helpful in revealing the bootstrap formatting during development
// div[class="row"] {
//     border: 1px dotted rgba(0, 0, 0, 0.5);
// }
// div[class^="col-"] {
//     background-color: rgba(255, 0, 0, 0.2);
// }



body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 450;
}

body {
  padding-top: 70px;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
}

.left {
  padding-left: 100px;
  padding-right: 100px;
}


.center h1 {
  margin-bottom: 10px;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1;
}

p {
  font-size: 1.1em;
  line-height: 1.7em;
  // padding-left: 100px;
  // padding-right: 100px;
}

/* Project Display*/
.table thead tr th, .table tbody tr td {
  text-align: center;
}

.tab-title {
  margin-left: 5px;
  margin-right: 5px;
}

/* forms */

input, textarea, select, .discussion-markdown, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
}

form.project_search input {
  width: auto;
}

form.project_search select {
  width: auto;
}

input {
  height: auto !important;
}

#error_explanation {
  color: red;
  ul {
    color: red;
    margin: 0 0 30px 0;
  }
}

.field_with_errors {
  @extend .has-error;
  .form-control {
    color: $state-danger-text;
  }
}

.display-none{
  display:none;
}

label.required:after {
  content:" *";
}

.criteria-desc {
}

.radio {
  width: 15px;
}

.criteria-radio {
  // padding-top: 5px;
  margin-top: -10px; // Compensate to ensure RHS text isn't too low
  padding-left: 20px;
}

.criteria-radio label {
  font-family:Arial;
  font-size:1em;
  font-weight: normal;
  white-space: nowrap;
}

.checkbox {
  margin-top: -10px;
  margin-bottom: 10px;
  span {
    margin-left: 20px;
    font-weight: normal;
  }
}

input[type=checkbox]{
   width: initial;
}

#session_remember_me {
  width: auto;
  margin-left: 0;
}
/* sidebar */

aside {
  section.user_info {
    margin-top: 20px;
  }
  section {
    padding: 10px 0;
    margin-top: 20px;
    &:first-child {
      border: 0;
      padding-top: 0;
    }
    span {
      display: block;
      margin-bottom: 3px;
      line-height: 1;
    }
    h3 {
      font-size: 1.4em;
      text-align: left;
      letter-spacing: -1px;
      margin-bottom: 3px;
      margin-top: 0px;
    }
  }
}

.avatar {
  float: left;
  margin-right: 10px;
}

.avatar_edit {
  margin-top: 15px;
}

/*miscellaneous*/
.debug_dump {
  clear: both;
  float: left;
  width: 100%;
  margin-top: 45px;
  @include box_sizing;
}

/* Users index */

.users {
  list-style: none;
  margin: 0;
  li {
    overflow: auto;
    padding: 10px 0;
    border-bottom: 1px solid $gray-lighter;
  }
}
/* Status chooser table*/
.borderless tbody tr td, .borderless tbody tr td label, .borderless tbody tr th, .borderless thead tr th, .borderless {
    border: none;
    padding: 0px 5px 0px 5px;
}

.required-data {
   background-color: yellow;
}

.justification-markdown {
  background-color: #eeeeee;
  p {
    padding-left: 5px;
  }
  blockquote {
    padding: 5px 5px;
    font-size: 13px;
    margin: 0 0 10px;
  }
}

.discussion-markdown {
  background-color: #eeeeee;
  p {
    padding-left: 5px;
  }
}

td p {
  text-align: left;
  font-size: 14px;
  line-height: 1.42857143;
  padding-left: 5px;
  padding-right: 5px;
}

nav {
  min-width: 15em;
}

.badge-progress {
  width: 0%;
  min-width: 5em;
  padding-left: 5px;
  padding-right: 5px;
}



// home page start

.best-practices-banner {
  font-size: 5em;
}

.best-practices-main-text {
  font-size: 1.1em;
  padding-left:0px;
  padding-right:0px;
}

.home-badge {
  margin-top: 1em;
  background: image-url('home_badge.png') no-repeat top left;
  width: 250px;
  height: 250px;
  background-size: contain;
}

.earner-logo {
  margin-right: 8px;
}

.btn-main-getbadge {
  border-radius: 50px;
  padding: .5em;
  font-size: 1.5em;
  background-color: #80B957;
}

.btn-main-margin {
  margin: 1em 0;
}

.btn-submit {
  width: 40%
}

@media only screen and (max-width: 480px) {
  .btn-stack {
    display: block;
    float: none;
    width: 100%;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .home-badge {
    background: image-url('home_badge@2x.png') no-repeat top left;
    @include background_size(250px,250px);
  }
}

@media (max-width: 768px) {
  .best-practices-banner {
      font-size: 3em;
  }
  .home-badge {
     @include background_size(200px,200px);
  }
}
// home page end

// edit/status page
.main-badge-ques {
  margin-top: 10px;
  margin-bottom: 20px;
  width: 140px;
  height: 140px;
  background: image-url('openssf_bestpracticesbadge.svg') no-repeat top left;
}

.btn-simple {
  border: thin solid #ccc;
  background-color: white;
  border-radius: 0;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: bold;
  color: #999;
}

.no-padding {
    padding: 0;
}

.main-subtext {
//the padding-right was commented out because it didn't look good on the form page in mobile sizes
  //  padding-right: 150px;
    padding-top: 15px;
    font-size: 1.1em;
    color: black;
    line-height: 19px;
}

//We used to have a need for this and we might again
.progress {

}

#progress-mobile
{
  position: relative;
  width:100px;

//Added this to harmonize with nav-list-element-anchor styles in header css page
 float: left;
 display:inline-block;
 font-size: 0.9em;
 margin-left: 15px;
 margin-right: 20px;
 margin-bottom: 0px;
 margin-top: -2px;

}


@media only screen and (min-width: 767px) {
  #progress-mobile
  {
    position: relative;
    width:110px;

//Added this to harmonize with nav-list-element-anchor styles in header css page
    float: left;
    display:inline-block;
    font-size: 0.9em;
    margin-left: 10px;
    margin-right: 20px;
    margin-top: 5px;

  }
}


.progress-subtext {
    color: #999;
    font-size: 1.2em;
    text-transform: capitalize;
}

.nav.subnav > li > a {
  padding: 0 24px;
  border-radius: 0;
  border: 1px solid #ddd;
  border-right: none;
  border-bottom-color: transparent;
  cursor: default;
  margin-right: 0;
  color: #979797;
}

.nav.subnav > li.active > a {
  color: #4d91df;
}

.nav.subnav > li:last-child {
  border-right: 1px solid #ddd;
}

.nav.subnav > li > a > h3 {
  font-size: 1em;
  font-weight: normal;
  margin: 14px 0;
}

.well-color {
  -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  background-color: transparent;
  border: none;
}

input[type="text"].form-control, .inputbox-look, textarea.form-control  {
  margin: 10px 0;
  border-radius: 0;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .main-badge-ques {
    background: image-url('openssf_bestpracticesbadge.svg') no-repeat top left;
    @include background_size(140px,140px);
  }
}

/* For width 768px and smaller: */
@media only screen and (max-width: 767px) {
  .main-badge-ques {
    position:relative;
    top:20px;
    margin-top: 0px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;
    background: image-url('openssf_bestpracticesbadge.svg') no-repeat top left;
    background-size: 80px 80px;
  }
}

@media (max-width: 768px) {
  .nav.subnav > li > a {
      padding: 0 14px;
  }
}

@media (max-width: 480px) {
    .nav-tabs > li {
        float:none;
    }
}


/* bootstrap utilities */
 .m-t-0 {
   margin-top: 0 !important;
 }


.btn-xs {
margin-top: 2px;
margin-right: 1px;
}

.clickable {
  cursor: pointer;
}

a.clickable {
color: inherit;
}

a.clickable:hover {
text-decoration:none;
}
