/* --- reset --- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,b,i,img,q,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,thead,tbody,tfoot,th,tr,td,hr,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {border:0;font-size:100%;font-style:inherit;font-family:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;}
table { border-collapse:collapse; border-spacing:0; empty-cells: show;}
html,body{background-color:#ffffff;}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:100%;line-height:24px;color:#404040;}

.row {
    background: #ddd;
    border-radius: 5px;
}

h2{}

h3{
	line-height: 1em;
	font-size: 1em;
	vertical-align: bottom;
	padding: 5px 0;
	color: gray;
}

.container {
    margin: 0 auto;
    clear: both;
    max-width: 1008px;
    text-align: center;
}

.row,.col{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	overflow:hidden;
}

.row{
	/*font-size: 10px; 5px gap */
	font-size: 0px;
	letter-spacing: -0.63em;/* kill gap */
	font-family: "Courier New", mono;
	width: 100%;
}

div.row > div {/* applies for inline-block and blocks */
	margin-bottom: 10px;
}

.col{
	font-size: 16px;
	letter-spacing: normal;/* IE */
	width: auto;
	margin: 0 5px 10px 5px;/* ignored for table cells ? */
	/*top margin is 0 by default, post-set to auto to inherit */
}

/* row splits withouth margin for mobile flow */
.rs2{
	max-width: 50%;
}
/* split3 */
.rs3{
	max-width: 33.33334%;
}
/* split4 */
.rs4{
	max-width: 25%;
}

.col b {
    display: block;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #444;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 -1px 1px black;
    border-radius: 5px;
}

div.col:first-child{
	/*margin-left: 0px;*/
}

.one{
	/*75px@1000*//*74px*/
	min-width: 8.333334%;/*158px*/
}

.two{
	min-width: 15.674603174603175%;/* 16.666666666666667% */
}

.three{
	min-width: 24.007936507936508%;/* 242 */
}

.four{
	min-width: 32.341269841269841%;/*326px*/
}

/*must be after the specific width above */
.col {

}

/* flex row, used as fixed atm for lack of flow in Safari 5-6 */
/* can although align vertically for smart phones via .rfv */
.rfx,.cfx{
	/* mixing old and new specs */
	display: -webkit-box;/* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;/* OLD - Firefox 19- (buggy but mostly works) */
	display: box;
	display: -webkit-flex;
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	/*width: 100%;*/
	
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;

	-webkit-box-pack: center;
	-moz-box-pack: center;
	-ms-box-pack: center;

	-webkit-box-align: stretch;/* stretch vertically by default */
	-moz-box-align: stretch;
	box-align: stretch;
	
	-webkit-align-items: stretch;/* vert stretch blink */
  -ms-flex-align: stretch;
	align-items: stretch;
    
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}



.rfx > div{
	min-width: 0%;/*! flexbox override for specific min-widths O/B */
	-webkit-box-flex: 1;/* Safari 3-6*/
   -moz-box-flex: 1;/*/ supported back to Netscape 7.2 */
   /* flex-grow flex-shrink flex-basis */
   -webkit-flex: 1 1 auto;/* set width here to wrap */
   -ms-flex: 1 1 auto;
   box-flex: 1;
   flex: 1 1 auto; 
}

/* immutable table rows */
.rtr{
	display: table;
	/*border-collapse: collapse; for same as row edge i.e. gap/2 */
	width: 100%;/* shink to viewport or 2 tables side by side at 50% */
	margin-bottom: 10px;/* same margin as default for .col */
}

.ctd,.rtr > div{/* cells cannot have border with gap */
	display: table-cell;/* switch to table-row become vert 100% */
	border-left: 5px solid transparent;/* 5-10px gutter */
	border-right: 5px solid transparent;/* or add padding */
	border-bottom: none;/* no bottom border allowed here */
	border-top: none;/* no top border allowed here */
	background-image: none;
}

/* TODO use one block method to flow 3 full containers into 2+1
or 1+3 with media query on lastchild, inline-block AS the row */

/* float base work with 10px gap with block only as static */
.cfl{ /*,.rfl > div*/
	float: left; /*can add padding for extra gap if no border*/
	margin: 0 0.496%;/* 0 0.4996% for safari */ 
}

rib{
}

/* inline base with 10px gap with inline-block */
.cib{/* ,.rib > div cells cannot have border with gap */
	display: inline-block;
	zoom: 1;
	/* overflow: visible; keep baseline to its last line box, no double margin http://stackoverflow.com/a/15883508/1647538 */
	margin: 0 0.496%;/* 5px at 1008px wide */
	/* becomes uneven blocks when shrunk */
	overflow: hidden;
}

/* using css3 columns to easily split in half on break-points,
otherwise use flex, which can't yet use flow in safari 5-6 
note: apply to block-level elements
IE8-9 rc classes will have to be stringreplaced to use rfx instead with flexie polyfill */
.rc2 {/* row 4 column*/
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
	/* gap is 0 by default and defined by left-right margin*/
}

.rc3, rc3x {/* row 3 columns or 3*x rows */
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	/* gap is 0 by default and defined by left-right margin*/
}

.rc4 {/* row 4 column*/
	-webkit-column-count: 4;
	-moz-column-count: 4;
	
	column-count: 4;/* IE10+ */
	/* gap is 0 by default and defined by left-right margin*/
}

.rc6 {/* row 4 column*/
	-webkit-column-count: 6;
	-moz-column-count: 6;
	column-count: 6;
	column-gap: 0;
	/* gap is 0 by default and defined by left-right margin*/
}

.rc12 {/* row 12 column*/
	-webkit-column-count: 12;
	-moz-column-count: 12;
	column-count: 12;
	/* gap is 0 by default and defined by left-right margin*/
}

@media screen and (max-width: 640px) {
  	.rc4,rc3x { /* 4 cols or x (even) rows of 3 col */
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}

@media (max-width: 480px) {/* theorically 320 for iphone */
  	.row { /* give all rc defined columns 100% fill */
		/* -webkit-column-span: all; works in safari */
		-webkit-column-count: 1;/* does not seem to override other methods */
	}
	.rfv{
		/* display: -webkit-box;take -webkit-box model over -webkit-flex; */
		
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-webkit-flex-direction: column;
    	-ms-flex-direction: column;
    	flex-direction: column;
	}
}

.cs2 {/* col span 2*/
	/* gap is 0 by default and defined by left-right margin*/
}

.gap10 {/* vs .gut ? */
	-webkit-column-gap: 5px;
	-moz-column-gap: 5px;
	column-gap: 5px;
}

.cli {
	font-size: 16px;
	width: auto;
	display: block;
	list-style-type: none;
	list-style-image: none;
}
/* become 100% for tablet */
tab1{
	
}

.spl2 {
}
.spl3 {
}
/* for breakpoint
*/