/* 
Project Name: Blank Template
Client: Your Client
Author: Your Name
Developer @GA in NYC
*/


/******************************************
/* SETUP                   
/*******************************************/

/* Box Model Hack */
* {
     -moz-box-sizing: border-box; /* Firexfox */
     -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
     box-sizing: border-box; /* IE */
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

.alignright {
	float: right; 
	padding: 0 0 10px 10px; /* note the padding around a right floated image */
}

.alignleft {
	float: left; 
	padding: 0 10px 10px 0; /* note the padding around a left floated image */
}

/******************************************
/* BASE STYLES                   
/*******************************************/

body {
     color: #000;
     font-size: 12px;
     line-height: 1.4;
     font-family: Helvetica, Arial, sans-serif;
}


/******************************************
/* LAYOUT                   
/*******************************************/

/* Center the container */
#container {
	margin: auto;
     height:600px;
     width:960px; 
}

header {

}

footer {

}

/******************************************
/* ADDITIONAL STYLES                   
/*******************************************/


.forall {
  border-style:solid;
  border-color:black;
  border-width: 5px;
  position:absolute;   
  margin-left: 150px;
  margin-top: 50px; 
}

/* SPLIT BOX0 ON Y-AXIS */
.box00 {
  height:400px;
  top: 0px;
  left: 0px;
  width:960px;
}
.box01 {
  height:205px; /* ENCLOSING BOX HEIGHT (600) - ALTERNATE BOX HEIGHT (400) + 5 */
  top: 395px; /* ALTERNATE BOX HEIGHT (400) - 5 */
  left:0px;
  width:960px; /* FULL WIDTH */
}

/* SPLIT BOX00 ON X-AXIS */
.box000 {
  background-color: red;
  width: 260px;
  left:0px;
}
.box001 {
  width: 705px; /* ENCLOSING BOX WIDTH (960) - ALTERNATE BOX WIDTH (260) + 5 */
  left:255px; /* ALTERNATE BOX WIDTH (260) - 5 */
}

/* ONCE COLOURED THEY CAN'T BE SPLIT */

/* SPLIT BOX01 ON X-AXIS */

.box010 {
  width: 600px;
  left:0px;
}
.box011 {
  width: 365px; /* ENCLOSING BOX WIDTH (960) - ALTERNATE BOX WIDTH (600) + 5 */
  left:595px; /* ALTERNATE BOX WIDTH (600) - 5 */
}

/* SPLIT BOX001 ON Y-AXIS */
.box0010 {
  height:100px; /* ENCLOSING BOX HEIGHT (400) - RANDOM*/
  background-color: yellow;
}
.box0011 {
  height:305px; /* ENCLOSING BOX HEIGHT (400) - ALTERNATE BOX HEIGHT (100) + 5 */
  top: 95px; /* ENCLOSING BOX TOP MARGIN+ ALTERNATE BOX HEIGHT (100) - 5 */
}

/* SPLIT BOX0011 ON X-AXIS */
.box00110 {
  width: 500px; /* ENCLOSING BOX WIDTH (705) - RANDOM */
}
.box00111 {
  width:210px; /* ENCLOSING BOX WIDTH (705) - ALTERNATE BOX WIDTH (500) + 5 */
  left: 750px; /* ENCLOSING BOX LEFT MARGIN (255) + ALTERNATE BOX WIDTH (500) - 5 */
  background-color: blue;
}

/* can use javascript to set overall height and width... complexity (i.e. how many iterations box001010001 we go)..... how colourful...... 

how to actually write the jscript code:
 - pick a single box and then divide that up 
 - lots of nested loops to do box pairs one by one;
 - apply each additional class
 - random number generators to change the width and heights