gcyrillus

/* autofocus to scroll down :)  */
html,body {background: #f06;background: linear-gradient(45deg, #f06, yellow);min-height: 100%;}
body {padding-right:206px;}
div {background:inherit;width:200px;height:200px;margin:0;border:solid;overflow:auto;text-align:center;position:fixed;bottom:0;right:0;}
ul {border-bottom:solid;text-align:left;}
input {width:95%;}

gcyrillus

/* just a blister, not the way ! do not mind this one 
just see how it works fooling around with display. if it works , then you are lucky*/
* {
    margin : 0px;
}
 
html{
    height : 99%;
}
 

gcyrillus

/* test methode de centrage , avec marquage et mire */
header{background: #0099CC; height: 125px; text-align:center;line-height:125px;}
 
#logo{ background:#999999; width: 330px;  text-align:center; margin:10px; height:80px;}
 
#menu{ background: #CC9999;width: 530px; height:60px;}

 #logo:before, #menu:before {content:'';height:100%;width:0;border-left:1px solid;}

#logo, #menu , #logo:before, #menu:before, header p {display:inline-block;vertical-align:middle;line-height:1.2em;}

gcyrillus

/* mega menu, prob forum */
#bande{
	position:relative; /*pour placer le menu au-dessus*/
	z-index: 1;
	clear: both;
	background: url(../interface/menu-background.png) repeat-x top; /*iE*/
	background-size: 100% 100%;
	background-image: -o-linear-gradient(270deg, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*opera 11*/
	background: -webkit-linear-gradient(top, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*Chrome+Safari*/
	background: linear-gradient(180deg, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*future*/

gcyrillus

/* mega menu, prob forum (alignement) */
#bande{
	position:relative; /*pour placer le menu au-dessus*/
	z-index: 1;
	clear: both;
	background: url(../interface/menu-background.png) repeat-x top; /*iE*/
	background-size: 100% 100%;
	background-image: -o-linear-gradient(270deg, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*opera 11*/
	background: -webkit-linear-gradient(top, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*Chrome+Safari*/
	background: linear-gradient(180deg, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*future*/

gcyrillus

/**
 * The first commented line is your dabblet’s title
 */
html {
background: #f06;
background:
linear-gradient(0deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent),
linear-gradient(90deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent), 
linear-gradient(-30deg,#f06 0 , #f06 50%, yellow 50%, yellow 100%);
background-size:1.4em 1.4em,1.4em 1.4em , 100% 100%;

gcyrillus

/* test tableau et largeur colonnes */
html, body, table { width:100%; margin:0;padding:0}
td {border:solid;background:linear-gradient(45deg,#999,#ccc);padding:1em;}
.thirty { width: 30%;}
.seventy { width: 70%; }

gcyrillus

/**modal (gcyrillus)*/
#modal {outline:none;}
#modal > div  {border:solid;
position:absolute;
transform:scale(0);
left:50%;top:50%;
margin-left:-250px;
margin-top:-125px;
background:rgba(0,0,0,0.5);
transition:transform 1s;}

gcyrillus

/* switch image & transition */
ul {border:solid;width:500px;padding:0;overflow:hidden;;margin:1em auto;text-align:center;background:#555;position:relative;}
li:nth-child(1),li:nth-child(2) {float:left;} 
li:nth-child(2) {clear:left;;}
li:nth-child(3), li:nth-child(4) {float:right;clear:right;}
li:nth-child(3) {margin-top:-80px}
li:nth-child(5) {position:absolute;top:40px;left : 175px;}
li, li a , img {display:inline-block;height:80px;vertical-align:top;width:150px;overflow:hidden;margin:0 0 0 0;transition:2s;line-height:80px;}
li:nth-child(odd) {white-space:nowrap;}
li:nth-child(odd) a:link  img + img,

gcyrillus

/* single page, many content each seen individually with acordeon effect */
    ul, li {
        margin:0;
        padding:0;
    }
    ul{
        background:blue;
        margin:0 auto;
        width:960px;
        display:table;