gcyrillus

/* scrolling table ?, Yep! */
#blocTableaux {
font-size:16px;
width:92em;
height:320px;			/* set height here */
margin:3em  auto;position:relative;padding:0;border:1em solid transparent;box-shadow:0 0 5px;border-radius:0.25em;text-align:center}
#blocG, #blocD{display:inline-block;width:45.45em;height:100%;margin:0 0.1em;overflow-y:scroll;box-shadow:0 0 0 1px;background:#ddd}
#tabG, #tabD {text-align:center;
font-size :10px; 		/* !!! */
width:100%;table-layout:fixed;}

gcyrillus

/* radio and :checked*/
div  div {display:none;padding:1em;margin:1em;border:solid;overflow:hidden;min-height:4em;}
:checked[id="aI"] ~ div #l0,
:checked[id="bI"] ~ div #l1,
:checked[id="cI"] ~ div #l2,
:checked[id="dI"] ~ div #l3,
:checked[id="eI"] ~ div #l4
 {display:block;}
:checked[id="aI"] ~ ul label[for="aI"],
:checked[id="bI"] ~ ul label[for="bI"],

gcyrillus

/* background and colonnes */
body {
	background:#333;
}
h1 {
	margin:3em auto 0;
	color:white;
	text-align:center;
}
table {

gcyrillus

table {
width:80%;
margin:auto;
border-spacing:0;
background:url(http://lorempixel.com/200/300/sports/2) no-repeat #cde;
background-size:30% 100%;
border-radius:1em;
overflow:hidden;
box-shadow:0 0 5px;
}

gcyrillus

div
{
width:100px;
height:100px;
background:red;
  margin:2em;
  float:left;
  z-index:0;
}
 

gcyrillus

/* base horizontale */
html {
	background-color:#45a;
	height:100%;
	padding: 2%;
	box-sizing:border-box;
}
body {
  height:100%;
	column-width:1020px;

gcyrillus

/* another fluid min-full height & bottom footer */
html {
	height:100%;
	width:100%;
	}
body {
	height:100%;
	width:100%;
	display:table;
	table-layout:fixed;

gcyrillus

/* hexagone backgound */
.outer {
height:300px;
width:300px;
background:linear-gradient(45deg, white 13.5%, transparent 13.5%, transparent 85%,  white 85%),
linear-gradient(-45deg, white 13.5%, red 13.5%,red 85%, white 85%) /* here replace red by background-color you whish*/;
text-align:center;
display:inline-table;
transition:1s;
}

gcyrillus

/* radiant avec box-shadow et background*/
div {margin:1em;text-align:center;line-height:100px;}
.button {
    width: 100px; height: 100px;
    padding: 8px;
    border-radius: 100px;
    box-shadow: 0 0.8px 8px rgba(0,0,0,.3);
   background-image: radial-gradient(center,  #8CE2FB 0, #52D2F8  50px, white 52px , white );/* safari ? */
   background-image: radial-gradient(circle at center,  #8CE2FB 0, #52D2F8  52px, white 52px , white ); /* newest */

gcyrillus

/* stupid flex (X,Y) with float & text-align */
header {
	background:turquoise;
	overflow:hidden;
	border:1px solid;
	margin:1em 0;
}
header:before {
	content:'';
	height:4em;