/*** grid.css  Version: 2016-09-15 ***/ 
/* IMPORTANT! padding and borders will not expand divs */
div { box-sizing: border-box; }

/* 'link' class for clickable div boxes */
div.link { 
	background:#e5f5ff; 
	border:1px solid #ccc; 
	padding:5px; 
  position: relative;
  overflow: auto;
}
div.link:hover { background-color:#ccebff; }
#content div.link img { 
	width:100%; 
  -webkit-box-shadow: none;
  	 -moz-box-shadow: none;
  				box-shadow: none; 	
}

/* left and right float styles for image inside link boxes */
div.link .lf   {float:left; width:32%; margin-right:2%;}
div.link .rf   {float:right; width:32%; margin-left:2%;}
div.link .lf33 {float:left; width:32%; margin-right:2%;}
div.link .rf33 {float:right; width:32%; margin-left:2%;}
div.link .lf50 {float:left; width:49%; margin-right:2%;}
div.link .rf50 {float:right; width:49%; margin-left:2%;}

/** height shorthands, proportional, number of text rows **/
.h1,.h2,.h3,.h4,.h5,.h6,.h7,.h8,.h9,.h10 {overflow:hidden;}
.h1 {min-height:1.8em;}
.h2 {min-height:3em;}
.h3 {min-height:4.5em;}
.h4 {min-height:5.5em;}	
.h5 {min-height:7em;}
.h6 {min-height:8.2em;}
.h7 {min-height:9.5em;}
.h8 {min-height:11em;}	
.h9 {min-height:12em;}
.h10{min-height:13.5em;}

/* padding classes */
.p0  {padding:0px;} 
.p5  {padding:5px;}
.p10 {padding:10px;}
.p15 {padding:15px;}

/* border classes (thin solid silver border lines) */
.bd  {border:1px solid #ccc;}
.bdt {border-top:1px solid #ccc;}
.bdr {border-right:1px solid #ccc;}
.bdb {border-bottom:1px solid #ccc;}
.bdl {border-left:1px solid #ccc;}

.lf {float:left;}
.rf {float:right;}
.lf25, .rf25, .lf33, .rf33, .lf50, .rf50, .lf66, .rf66, .lf75, .rf75, .lf100, .rf100 { 
		margin:1% 0; padding:3px 0px; }
.lfx25, .rfx25, .lfx33, .rfx33, .lfx50, .rfx50, .lfx66, .rfx66, .lfx75, .rfx75, .lfx100 { 
		margin:0; padding:3px 5px;}
		

/*** for mobile portrait ***/
@media screen and (max-width:39.9em) {
	/* single column for link boxes */
	div.link {margin:1% 0; width:100%; clear:both;}
	
	/* .aside float width classes */
	.lf25.aside, .lf33.aside,  { float:left; margin:.5%; padding:5px; width:49%;}
	.rf25.aside, .rf33.aside { float:right; margin:.5%; padding:5px; width:49%;}
	
}
/* for mobile landscape, tablet */
@media screen and (min-width:40em) and (max-width:54.9em) {
	
	/* .aside float width classes */
	.lf25.aside, .lf33.aside,  { float:left; margin:.5%; padding:5px; width:32%;}
	.rf25.aside, .rf33.aside { float:right; margin:.5%; padding:5px; width:32%;}
	
}

/*** wider than mobile portrait (mobile landscape, tablets, laptops, desktops ***/
/** special shorthand positioning classes, to make grid layout of content easier **/
@media screen and (min-width:40em) {
	/** float in link box **/
	div.link .lf   {float:left; width:49%; margin-right:2%;}
	div.link .rf   {float:right; width:49%; margin-left:2%;}
	
  /** float classes **/
	.lf00 {float:left; padding-right:.5%;}	
	.lf00 img {width:auto; padding-top:0; margin-top:0;}
	
	/** positioning shorthands **/
	.clear {clear:both;}
	.lfloat {float:left; margin-right:1%;}
	.rfloat {float:right; margin-left:1%;}
	.rput, .rp { margin-left:auto;}
	.lput, .lp {margin-right:auto;}
	.cput, .cp {margin-left:auto; margin-right:auto;}
	.ctr, .center {margin-left:auto; margin-right:auto; text-align:center;}
	.lf {float:left;}
	.rf {float:right;}
	.rput, .rp, .lput, .lp, .cput, .cp, .ctr {display:block; }

	/** floating width classes, padding, margin (boxes) **/
	.lf25, .lf33, .lf50, .lf66, .lf75, .lf100 {float:left; margin:.5%; padding:5px;}
	.rf25, .rf33, .rf50, .rf66, .rf75, .rf100 {float:right; margin:.5%; padding:5px;}		
	.lf25, .rf25 {width:24%;} .lf33, .rf33 {width:32.33%;} .lf50, .rf50 {width:49%;}
	.lf75, .rf75 {width:74%;} .lf66, .rf66 {width:65.66%;} .lf100, .rf100 {width:99%;}
	
	/** floating width classes, padding, no margin (tiles) **/
	.lfx25, .lfx33, .lfx50, .lfx66, .lfx75, .lfx100	{float:left; padding:5px;}
	.rfx25, .rfx33, .rfx50, .rfx66, .rfx75, .rfx100 {float:right; padding:5px;}
	.lfx25, .rfx25 {width:25%;} .lfx33, .rfx33 {width:33.33%;} .lfx50, .rfx50 {width:50%;}
	.lfx75, .rfx75 {width:75%;} .lfx66, .rfx66 {width:66.66%;} .lfx100, .rfx100 {width:100%;}	

	/** width classes, no margin, no padding! **/
	.w02 {width:2%;}  .w05 {width:5%;}	.w10 {width:10%;} .w15 {width:15%;}	
	.w20 {width:20%;}	.w25 {width:25%;} .w30 {width:30%;} .w33 {width:33.33%;} 
	.w40 {width:40%;} .w50 {width:50%;} .w60 {width:60%;}	.w66 {width:66.66%;}
	.w70 {width:70%;}	.w75 {width:75%;} .w80 {width:80%;}	.w85 {width:85%;}
	.w90 {width:90%;} .w95 {width:95%;} .w100{width:100%; clear:both;} 
		
	/** image width classes (for inline styles), no exact grid!! **/	
	.iw05 img {max-width: 4.3%;} .iw10 img {max-width:9.35%;} .iw15 img {max-width:14.4%;}	.iw20 img {max-width:19.4%;} .iw25 img {max-width:24.4%;}	
	.iw30 img {max-width:29.4%;} .iw33 img {max-width:32.8%;} .iw40 img {max-width:39.4%;} .iw50 img {max-width:49.5%;}
	.iw60 img {max-width:59.5%;} .iw66 img {width:66%;} .iw70 img {max-width:69.5%;}	.iw75 img {max-width:74.5%;}
	.iw80 img {max-width:79.5%;} .iw90 img {max-width:89.5%;} .iw95 img {max-width:94.5%;}	.iw100 img {max-width:99.5%;}		

	/* for stacking images horizontally inline */
	.nospaces img {margin-right:-.3em;}
	.nospaces a:last-of-type > img, .nospaces > img:last-of-type {margin-right:0;}

	/** margin classes **/
	.rm1 {margin-right:1%;}	.rm2 {margin-right:2%;}	.rm3 {margin-right:3%;}	.rm4 {margin-right:4%;}	.rm5 {margin-right:5%;}	
	.lm1 {margin-left:1%;}  .lm2 {margin-left:2%;} 	.lm3 {margin-left:3%; } .lm4 {margin-left:4%; } .lm5 {margin-left:5%;}	
	.m1 {margin-left:1%; margin-right:1%;} .m2 {margin-left:2%; margin-right:2%;} .m3 {margin-left:3%; margin-right:3%;} 
	.m4 {margin-left:4%; margin-right:4%;} .m5 {margin-left:5%; margin-right: 5%;}
	.rm1, .rm2, .rm3, .rm4, .rm5, .lm1, .lm2, .lm3, .lm4, .lm5, .m1, .m2, .m3, .m4, .m5 {display:block;}
	.prep25 {margin-left:25%;} 
	.app25 {margin-right:25%;}
	
	/* padding classes */
	.p0 {padding:0px;} 
	.p5 {padding:5px;}
	.p10 {padding:10px;}
	.p15 {padding:15px;} 
	
	/* border classes (thin solid silver border lines) */
	.bd  {border:1px solid #ccc;}
	.bdt {border-top:1px solid #ccc;}
	.bdr {border-right:1px solid #ccc;}
	.bdb {border-bottom:1px solid #ccc;}
	.bdl {border-left:1px solid #ccc;}	
}