/* Default sizes: make forms 10px smaller so they fit in columns */
input, textarea{
  width:200px;
}

select{
  width:210px;
}
@media (min-width: 500px){
  .form-horizontal .control-label {
    width: 100px;
  }
  .form-horizontal .controls {
    margin-left: 110px;
  }
}

/* Change the minimum width to support columns from 767 to 979 */
@media (max-width: 979px) {
  body {
    padding-right: 20px;
    padding-left: 20px;
  }
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    margin-right: -20px;
    margin-left: -20px;
  }
  .container-fluid {
    padding: 0;
  }
  .dl-horizontal dt {
    float: none;
    width: auto;
    clear: none;
    text-align: left;
  }
  .dl-horizontal dd {
    margin-left: 0;
  }
  .container {
    width: auto;
  }
  .row-fluid {
    width: 100%;
  }
  .row,
  .thumbnails {
    margin-left: 0;
  }
  [class*="span"],
  .row-fluid [class*="span"] {
    display: block;
    float: none;
    width: auto;
    margin-left: 0;
  }
  .input-large,
  .input-xlarge,
  .input-xxlarge,
  input[class*="span"],
  select[class*="span"],
  textarea[class*="span"],
  .uneditable-input {
    display: block;
    width: 100%;
    min-height: 28px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
  }
  .input-prepend input,
  .input-append input,
  .input-prepend input[class*="span"],
  .input-append input[class*="span"] {
    display: inline-block;
    width: auto;
  }
}



/* When the screen is between these sizes, make fields smaller */
@media (min-width: 980px) and (max-width: 1199px) {
  input, textarea{
    width:170px;
  }
  select{
    width:180px;
  }
  
  /* When the fields are within a span3 in this screen, make them smaller! */
  .form-horizontal .columns .control-label {
    width: 75px;
  }
  .form-horizontal .columns .controls {
    margin-left: 82px;
  }
  .span3 input, .span3 textarea{
    width: 125px;
  }
  .span3 select{
    width: 135px;
  }
  .columns .span6 input, .columns .span6 textarea{
    width: 365px; 
  }
  .columns .span6 select{
    width: 375px; 
  }
  .columns .span9 input, .columns .span9 textarea{
    width: 605px; 
  }
  .columns .span9 select{
    width: 615px; 
  }
}




/* When the fields are within span3 on a bigger screen, make them smaller! */
@media (min-width: 1200px) {
  .span3 input, .span3 textarea{
    width: 150px;
  }
  .span3 select{
    width: 160px;
  }
  .columns .span6 input, .columns .span6 textarea{
    width: 450px; /* sum 300px */
  }
  .columns .span6 select{
    width: 460px; /* sum 300px */
  }
  .columns .span9 input, .columns .span9 textarea{
    width: 750px; /* sum 300px */
  }
  .columns .span9 select{
    width: 760px; /* sum 300px */
  }
}