/* 
  CSS grid system based upon Bootstrap and ResponsiveGridSystem (http://www.responsivegridsystem.com/)
  Intended for use in asp.net winforms (not using Bootstraps grids)
*/

.grid-container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.grid-half-container {
    max-width: 100%;
}

@media (min-width: 768px) {
  .grid-container {
    width: 750px;
  }

    .grid-half-container {
        max-width: 50%;
    }
}

@media (min-width: 992px) {
  .grid-container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .grid-container {
    width: 1170px;
  }
}

@media(min-width: 1300px) {
    .grid-container {
        width: 1270px;
    }
}

@media(min-width: 1400px) {
    .grid-container {
        width: 1370px;
    }
}

@media(min-width: 1500px) {
    .grid-container {
        width: 1470px;
    }
}

.grid-container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/*  ROW  ============================================================================= */

.grid-row {
    clear: both;
    padding: 0;
}

/*  GROUPING  ============================================================================= */

.grid-group:before,
.grid-group:after {
    content:"";
    display:table;
}
.grid-group:after {
    clear:both;
}
.grid-group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.grid-col {
    display: block;
    float:left;
  margin: 0 0.5% 0 0.5%;
}

.grid-col:first-child { margin-left: 0; }   /* all browsers except IE6 and lower */
/*.grid-col:only-child { margin-left: 0.5%; } *//* all browsers except IE6 and lower */

/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
    .grid-col { 
        margin: 1% 0 1% 0;
    }
}

/*  GRID OF SIX   ============================================================================= */


.grid-span-6-of-6 {
    width: 99.5%;
}

.grid-span-6-of-6:only-child {
    width: 100%;
}

.grid-span-5-of-6 {
    width: 83.06%;
}

.grid-span-4-of-6 {
    width: 66.13%;
}

.grid-span-3-of-6 {
    width: 49.2%;
}

.grid-span-2-of-6 {
    width: 32.26%;
}

.grid-span-1-of-6 {
    width: 15.33%;
}

.grid-span-all-if-alone:only-child {
    width: 99.5%
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .grid-span-6-of-6 {
        width: 100%; 
    }
    .grid-span-5-of-6 {
        width: 100%; 
    }
    .grid-span-4-of-6 {
        width: 100%; 
    }
    .grid-span-3-of-6 {
        width: 100%; 
    }
    .grid-span-2-of-6 {
        width: 100%; 
    }
    .grid-span-1-of-6 {
        width: 100%; 
    }

    .grid-span-all-if-alone:only-child {
     width: 100%
    }
}

/* HELPERS */

.grid-center-content {
  text-align: center;
}

.grid-center {
  float: none;
  margin: 0 auto;
}

.grid-center-block {
  display: block;
  float: none;
  margin: 0 auto;
}

.grid-vertical-margin {
  margin-top: 5px;
  margin-bottom: 5px;
}

.grid-top-margin {
  margin-top: 10px;
}

.grid-bottom-margin {
  margin-bottom: 10px;
}

.grid-vertical-gutter {
  padding-top: 5px;
  padding-bottom: 5px;
}

.grid-horizontal-gutter {
  padding-left: 5px;
  padding-right: 5px;
}

.grid-top-gutter {
  padding-top: 10px;
}

.grid-bottom-gutter {
  padding-bottom: 10px;
}