/***************************************************************************************************************/
/* AkwaFramework
/* 2017 Jean de La Taille
/* akwa.css responsive and grid system
/***************************************************************************************************************/

/***************************************************************************************************************/
/* General layout                                                             */

* {
  box-sizing:  border-box !important;
  margin: 0;
  padding: 0;
}

html, body, layer, div.layer, .page { 
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

/* Layer */
layer, div.layer {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
}

/***************************************************************************************************************/
/* Framed layout with headers / content / footers  */

frame, div.frame     { flex-grow: 1; }
content, div.content { flex-grow: 1; }
header, div.header   { flex-grow: 0; }
footer, div.footer   { flex-grow: 0; margin-top: auto; }

/***************************************************************************************************************/
/* Alignment boxes */

.centerBox, .alignBox { display: flex; }
.centerBox > *        { margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; }
@media (max-width: 15cm) {
  .s-centerBox, .s-alignBox { display: flex; }
  .s-centerBox > *        { margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; }
}
@media (min-width: 15cm) {
  .l-centerBox, .l-alignBox { display: flex; }
  .l-centerBox > *        { margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; }
}

.alignBox > .left, .l-alignBox > .left, .s-alignBox > .left       { margin-right: auto; }
.alignBox > .center, .l-alignBox > .center, .s-alignBox > .center { margin-left: auto; margin-right: auto; }
.alignBox > .right, .l-alignBox > .right, .s-alignBox > .right    { margin-left: auto; }
.alignBox > .top, .l-alignBox > .top, .s-alignBox > .top          { margin-bottom: auto; }
.alignBox > .middle, .l-alignBox > .middle, .s-alignBox > .middle { margin-top: auto; margin-bottom: auto; }
.alignBox > .bottom, .l-alignBox > .bottom, .s-alignBox > .bottom { margin-top: auto; }

/* Scrollable box (fill the contener) */
.scrollBox { position: absolute; width: 100%; height: 100%; overflow: scroll; }

/***************************************************************************************************************/
/* Font Responsive layout                                             */

html { font-size: 0.5cm; font-family: sans-serif; }
@media (max-width: 29cm) {
  html { font-size: 0.45cm; }
}
@media (max-width: 15cm) {
  html { font-size: 0.4cm; }
}

/* Horizontal A4 page */
.page { max-width: 29cm; width: 100%; height: inherit; min-height: 100%; margin: 0 auto; }
/* Vertical A4 page */
.narrowPage { max-width: 21cm; width: 100%; height: inherit; min-height: 100%; margin: 0 auto; }

/* Titles */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { display: inline-block; font-weight: normal; }
h1, .h1 { font-size: 0.9cm; }
h2, .h2 { font-size: 0.8cm; }
h3, .h3 { font-size: 0.7cm; }
h4, .h4 { font-size: 0.6cm; }
h5, .h5 { font-size: 0.5cm; }
small, .small { font-size: 0.4cm; }
@media (max-width: 29cm) {
  h1, .h1 { font-size: 0.85cm; }
  h2, .h2 { font-size: 0.75cm; }
  h3, .h3 { font-size: 0.65cm; }
  h4, .h4 { font-size: 0.55cm; }
  h5, .h5 { font-size: 0.45cm; }
  small, .small { font-size: 0.35cm; }
}
@media (max-width: 15cm) {
  h1, .h1 { font-size: 0.8cm; }
  h2, .h2 { font-size: 0.7cm; }
  h3, .h3 { font-size: 0.6cm; }
  h4, .h4 { font-size: 0.5cm; }
  h5, .h5 { font-size: 0.4cm; }      
  small, .small { font-size: 0.3cm; }
}

/***************************************************************************************************************/
/* Disposition and alignement */

.margin { margin: 2mm 2mm 2mm 2mm; }
.h-margin { margin-left: 2mm; margin-right: 2mm; }
.v-margin { margin-top: 2mm; margin-bottom: 2mm; }

.padding { padding: 2mm 2mm 2mm 2mm; }
.h-padding { padding-left: 2mm; padding-right: 2mm; }
.v-padding { padding-top: 2mm; padding-bottom: 2mm; }
.leftPadding { padding-left: 2mm }
.rightPadding { padding-right: 2mm }
.topPadding { padding-top: 2mm }
.bottomPadding { padding-bottom: 2mm }

@media (max-width: 15cm) {
  .s-margin { margin: 2mm 2mm 2mm 2mm; }
  .s-padding { padding: 2mm 2mm 2mm 2mm; }
  .s-h-padding { padding-left: 2mm; padding-right: 2mm; }
  .s-v-padding { padding-top: 2mm; padding-bottom: 2mm; }
  .s-leftPadding { padding-left: 2mm }
  .s-rightPadding { padding-right: 2mm }
  .s-topPadding { padding-top: 2mm }
  .s-bottomPadding { padding-bottom: 2mm }
}
@media (min-width: 15cm) {
  .l-margin { margin: 2mm 2mm 2mm 2mm; }
  .l-padding { padding: 2mm 2mm 2mm 2mm; }
  .l-h-padding { padding-left: 2mm; padding-right: 2mm; }
  .l-v-padding { padding-top: 2mm; padding-bottom: 2mm; }
  .l-leftPadding { padding-left: 2mm }
  .l-rightPadding { padding-right: 2mm }	
  .l-topPadding { padding-top: 2mm }
  .l-bottomPadding { padding-bottom: 2mm }
}

/* Visibility */
.visible  { display: initial; }
.hidden   { display: none; }
@media (max-width: 15cm) {
  .s-visible  { display: initial; }
  .s-hidden   { display: none; }
}
@media (min-width: 15cm) {
  .l-visible  { display: initial; }
  .l-hidden   { display: none; }
}

/* filling */
.fill { height: 100%; width: 100%; }
.wide { width: 100%; }
.huge { height: 100%; }
img.wide { height: auto; }
img.huge { width: auto; }
@media (max-width: 15cm) {
  .s-wide    { width: 100%; }
  .s-huge    { height: 100%; }
  img.s-wide { height: auto; }
  img.s-huge { width: auto; }
}
@media (min-width: 15cm) {
  .l-wide    { width: 100%; }
  .l-huge    { height: 100%; }
  img.l-wide { height: auto; }
  img.l-huge { width: auto; }
}

/* Text utils */
.textLeft   { text-align: left; }
.textRight  { text-align: right; }
.textCenter { text-align: center;}
.textTop    { vertical-align: top; }
.textBottom { vertical-align: bottom; }
@media (max-width: 15cm) {
  .s-textLeft   { text-align: left; }
  .s-textRight  { text-align: right; }
  .s-textCenter { text-align: center;}
}
@media (min-width: 15cm) {
  .l-textLeft   { text-align: left; }
  .l-textRight  { text-align: right; }
  .l-textCenter { text-align: center;}
}

.ellipsis {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; 
}
.bold { font-weight: bold; }
.italic { font-style: italic; }
.smallCaps { font-variant: small-caps; }


/***************************************************************************************************************/
/* Links */
a {       color: black; text-decoration: none; }
a:hover { color: black; text-decoration: none; }

/***************************************************************************************************************/
/* Buttons and inputs */

button, input, select { font-weight: normal; font-size: 0.5cm; }
button, input, select { display: inline-block; border: 1px solid black; padding: 1mm 4mm; margin: 2mm 0 0 0; }
@media (max-width: 29cm) {
  button, input, select { font-size: 0.5cm; }
}
@media (max-width: 15cm) {
  button, input, select { font-size: 0.5cm; }
}

/***************************************************************************************************************/
/* The Grid */

/* Rows */
@media (max-width: 15cm) {
  row, .row       { display: block; }
  row > [class*="col"], .row > [class*="col"]  { width: 100%; }
  s-row, .s-row       { display: flex; flex-direction: right; }
  s-row > [class*="col"], .s-row > [class*="col"] {  }
}
@media (min-width: 15cm) {
  row, .row       { display: flex; flex-direction: right; }
  [class*="col"]  { }
  s-row, .s-row       { display: flex; flex-direction: right; }
  s-row > [class*="col"], .s-row > [class*="col"] {  }
}

/* Columns */
.col { min-width: 100%; }
/* 2 cols */
.col-1-2 { min-width: 50%; }
/* 3 cols */
.col-1-3 { min-width: 33.33332%; }
.col-2-3 { min-width: 66.66665%; }
/* 4 cols */
.col-1-4 { min-width: 25%; }
.col-2-4 { min-width: 50%; }
.col-3-4 { min-width: 75%; }
/* 5 cols */
.col-1-5 { min-width: 20%; }
.col-2-5 { min-width: 40%; }
.col-3-5 { min-width: 60%; }
.col-4-5 { min-width: 80%; }
/* 6 cols */
.col-1-6 { min-width: 16.666665%; }
.col-2-6 { min-width: 33.333332%; }
.col-3-6 { min-width: 50%; }
.col-4-6 { min-width: 66.666665%; }
.col-5-6 { min-width: 83.333332%; }
/* 8 cols */
.col-1-8 { min-width: 12.5%; }
.col-2-8 { min-width: 25%; }
.col-3-8 { min-width: 37.5%; }
.col-4-8 { min-width: 50%; }
.col-5-8 { min-width: 62.5%; } 
.col-6-8 { min-width: 75%; }
.col-7-8 { min-width: 87.5%; }
/* 12 cols */
.col-1-12 { min-width: 8.33332%; }
.col-2-12 { min-width: 16.66665%; }
.col-3-12 { min-width: 25%; }
.col-4-12 { min-width: 33.33332%; }
.col-5-12 { min-width: 41.66665%; }
.col-6-12 { min-width: 50%; }
.col-7-12 { min-width: 58.33332%; }
.col-8-12 { min-width: 66.66665%; }
.col-9-12 { min-width: 75%; }
.col-10-12 { min-width: 83.33332%; }
.col-11-12 { min-width: 91.66665%; }
.col-12-12 { min-width: 100%; }
    
/* Lines heights */
.line-auto  { height: auto; }
@media (min-width: 15cm) {  
  .l-line-auto  { height: auto; }
  .line-0-5, .l-line-0-5{ height: calc(0.5 * 8mm); }
  .line-1, .l-line-1    { height: calc(1 * 8mm); }
  .line-1-5, .l-line-1-5{ height: calc(1.5 * 8mm); }
  .line-2, .l-line-2    { height: calc(2 * 8mm); }
  .line-3, .l-line-3    { height: calc(3 * 8mm); } 
  .line-4, .l-line-4    { height: calc(4 * 8mm); }
  .line-5, .l-line-5    { height: calc(5 * 8mm); }
  .line-6, .l-line-6    { height: calc(6 * 8mm); }
  .line-7, .l-line-7    { height: calc(7 * 8mm); }
  .line-8, .l-line-8    { height: calc(8 * 8mm); }
  .line-9, .l-line-9    { height: calc(9 * 8mm); }
  .line-10, .l-line-10  { height: calc(10 * 8mm); }
  .line-15, .l-line-15  { height: calc(15 * 8mm); }
  .line-20, .l-line-20  { height: calc(20 * 8mm); }
  .line-25, .l-line-25  { height: calc(25 * 8mm); }
  .line-30, .l-line-30  { height: calc(30 * 8mm); }
  .line-35, .l-line-35  { height: calc(35 * 8mm); }
  .line-40, .l-line-40  { height: calc(40 * 8mm); }
  
  .line-1.middle, .l-line-1.middle      { line-height: calc(1 * 8mm); }
  .line-1-5.middle, .l-line-1-5.middle  { line-height: calc(1.5 * 8mm); }
  .line-2.middle, .l-line-2.middle      { line-height: calc(2 * 8mm); }
}
@media (max-width: 15cm) {
  .s-line-auto  { height: auto; }
  .line-0-5, .s-line-0-5{ height: calc(0.5 * 5mm); }
  .line-1, .s-line-1    { height: calc(1 *   5mm); }
  .line-1-5, .s-line-1-5{ height: calc(1.5 * 5mm); }
  .line-2, .s-line-2    { height: 10mm; } 
  .line-3, .s-line-3    { height: 15mm; } 
  .line-4, .s-line-4    { height: 20mm; }
  .line-5, .s-line-5    { height: 25mm; }
  .line-6, .s-line-6    { height: 30mm; }
  .line-7, .s-line-7    { height: 35mm; }
  .line-8, .s-line-8    { height: 40mm; }  
  .line-9, .s-line-9    { height: 45mm; }
  .line-10, .s-line-10  { height: 50mm; }
  .line-15, .s-line-15  { height: 75mm; }
  .line-20, .s-line-20  { height: 100mm; }
  .line-25, .s-line-25  { height: 125mm; }
  .line-30, .s-line-30  { height: 150mm; }
  .line-35, .s-line-35  { height: 175mm; }
  .line-40, .s-line-40  { height: 200px; }
  
  .line-1.middle, .s-line-1.middle      { line-height: calc(1 * 5mm); }
  .line-1-5.middle, .s-line-1-5.middle  { line-height: calc(1.5 * 5mm); }
  .line-2.middle, .s-line-2.middle      { line-height: calc(2 * 5mm); }
}