/* LAYOUT USED IN ALL PAGES IN APP */

/* COLOR TEST */
body{
  background-color:#fff;
}
#page-header {
  background-color: lightslategray;
  background-color: hotpink;
}
  #page-body {
    background-color:skyblue;
  }
    #app-nav {
      background-color:lightblue;
    }
    #content-container {
      background-color:darkmagenta;
      background-color:#fff;
    }
      #content-context-block {
        background-color:deeppink;
      }
      #content-header {
        background-color:violet;
      }
      #content-body {
        background-color:greenyellow;
      }
  #page-footer {
    background-color: #444; 
  }


/* START COLOR PAGE */
#page-header {
  background-color: #258;
  background-color: darkmagenta;
  background-color: forestgreen;
  background-color: #369;
  background-color: #58b;
  background-color: #47a;
  color: #fff;
  background-color: crimson;
}

#page-footer {
  background-color: #258;
  background-color: darkmagenta;
  background-color: forestgreen;
  background-color: #369;
  background-color: #58b;
  background-color: #47a;
  color: #fff;
  background-color: crimson;
}

/* END COLOR PAGE */





/* PAGE-HEADER */
#page-header {
  position : absolute;
  top : 0px; right : 0; bottom : auto; left : 0;
  height : 40px; width : 100%;
  white-space: nowrap;
  text-align:left;
  padding-top:0px;
  min-width:260px;
}

/* PAGE-CONTENT */


/* APP-NAV */
#app-nav {
  position: absolute;
  top: 41px; right:auto; bottom: 22px; left: 0;
  height: auto; 
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

	/*-webkit-box-shadow: 8px 0 18px -10px #bbb;
	   -moz-box-shadow: 8px 0 18px -10px #bbb;
	        box-shadow: 8px 0 18px -10px #bbb;*/

  z-index:50;
}


/* PAGE-CONTENT > CONTENT-CONTAINER */
  /*#content-container h2 {
    margin-bottom: .5em;
  }*/



/* PAGE-CONTENT > CONTENT-CONTAINER > CONTENT-CONTEXT-CONTAINER */
/* For info on current active cart, just under the header */
#content-context-container {
  position : absolute;
  right : 0; bottom : auto;
  /* top and height is set in app.layout-area */
  /* left is set in app.layout-nav-wxx */
  width : auto;
  background-color:#dbdbdb;
  white-space:nowrap;
  overflow: hidden;
}



/* PAGE-CONTENT > CONTENT-CONTAINER > CONTENT-HEADER */
/* Below the context container (or header if no context container) and above body */
#content-header {
  position : absolute;
  right : 0; bottom : auto;
  width : auto;
  /* top : 41px; height:38px; top and height is set in app.layout-area */
  /* left is set in app.layout-nav-wxx */
  background-color: #f6f6f6;
  color : #000;
  border-bottom : 1px solid #ddd;
  overflow: hidden;
}



/* PAGE-CONTENT > CONTENT-CONTAINER > CONTENT-BODY */
#content-body {
  position : absolute;
  right : 0; bottom : 22px;
  /* top : 56px; top is set in app.layout-area */
  /* left is set in app.nav-wxx */
  padding : 6px 25px 150px 25px;
  background-color:#fff;
  color : #000;
  overflow : auto;
  -webkit-overflow-scrolling: touch;
}
#content-body-with-header {
  position : absolute;
  right : 0; bottom : 22px;
  /* top : 88px; top is set in app.layout-area */
  /* left is set in app.nav-wxx */
  padding : 6px 25px 150px 25px;
  background-color:#fff;
  color : #000;
  overflow : auto;
  -webkit-overflow-scrolling: touch;
}


/* PAGE-FOOTER */
#page-footer {
  position: absolute;
  top: auto; right: 0; bottom: 0; left:0;
  height: 22px; width: 100%;
	overflow:hidden;
}