body {
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;

}
#pageHeader {
  Xborder: 1px solid pink;
  max-width: 100%;
  Xbackground-color: orange;
  font-size: 12pt;
}

#pageHeader img {
  max-width:100%;
  width: 100%;
}

#pageHeader .pageHeaderLink {
  XXbackground-color: green;
  text-align: center;
  color: blue;
}

.pageHeaderLink {
  XXbackground-color: green;
  text-align: center;
  color: blue;
}


#pageHeader .pageHeaderTitle {
  color: #E18982;
  font-size: 16pt;
}


table.pageBox {

 Xborder: 1px solid black;
}
#displayPage {
  Xdisplay: -webkit-flex;
  Xdisplay: flex;
}
.displayBox {
  position: relative;
  Xborder: 1px solid black;
  border: 0px;
  XXXwidth: 200px;
  max-width: 400px;
  height: 300px;
  vertical-align: top;
  font-size: 12pt;
}
.displayBoxTitle {
  color: #E18982;
  font-size: 16pt;
}
.displayBoxText {
  Xbackground-color: green;
}
.displayBoxLink {
  Xbackground-color: orange;
  color: blue;
  text-align: center;
}

.displayBoxImgContainer {
  vertical-align: top;
}

.displayBoxImgContainer img {
  Xwidth: 100px;
  display: block;
  margin: auto;
  width:100%;
  max-width:100px;
  padding: 0px;
}


#displayBox01 {
  Xbackground-color: pink;
}
#displayBox02 {
  XXbackground-color: yellow;  
}
#displayBox03 {
  XXbackground-color: orange;
}

#displayBox04 {
  XXbackground-color: red;
}
#displayBox05 {
  Xbackground-color: pink;
}
#displayBox06 {
  XXbackground-color: yellow;
}
#displayBox07 {
  XXbackground-color: orange;
}

#displayBox08 {
  XXbackground-color: red;
}

/*
http://www.responsivegridsystem.com/calculator/
 */

/*  SECTIONS  */
.section , .section2 {
clear: both;
padding: 0px;
margin: 0px;
}

/*  COLUMN SETUP  */
.col, .col2 {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}

/*
.col:first-child,  .col2:first-child { margin-left: 0; }
*/


/*  GROUPING  */
.group:before,
	.group:after , .group2:after, .group2.before {
content:"";
display:table;
	}
.group:after , .group2:after {
clear:both;
}
.group , .group2 {
zoom:1; /* For IE 6/7 */
}

/*  GRID OF THREE  */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}

.displayBox {
Xwidth: 32.2%;
}

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

@media only screen and (max-width: 480px) {
	.col { margin: 1% 0 1% 0%;}
	.displayBox, .displayBox2,    .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

/* 
https://jsfiddle.net/6Lp6oq31/
http://stackoverflow.com/questions/34703868/how-to-make-divs-inside-div-responsive

 */


html, body {
margin: 0
}


.container {
padding: 10px;
		 white-space: nowrap;
}


.container .row {
  margin-bottom: 10px;
}

.container .row span {
  margin-left: 10px;
  vertical-align: top;
}
@media (max-width: 660px){

  .container .row span {
    display: block;
    margin-left: 0;
    margin-top: 10px;
  }


}



@media (max-width: 440px){


  .container .row span {
    display: block;
    margin-left: 0;
    margin-top: 10px;
  }

}


XXXtable { 
  width: 100%; 
  border-collapse: collapse; 
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		XXpadding-left: 50%; 
	}
	
	XXXtd:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	

}