/* http://tympanus.net/codrops/2012/10/25/kick-start-your-project-a-collection-of-handy-css-snippets/?utm_source=feedburner&utm_medium=email&utm_campaign=Feed%3A+tympanus+%28Codrops%29 */

.border, .border td {
	border: 1px solid #ff0000;
}

.img_left { 
	float: left;
	margin-right: 20px;
	margin-bottom: 5px;
}

.img_right { 
	float: right;
	margin-left: 20px;
	margin-bottom: 5px;
}

.left  { float: left; }
.right  { float: right; }

.hide { display: none; }

.hidden {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.show { display: block; }

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.break { /* force un texte sans espace trop long (comme une URL) à revenir à la ligne en fin de container */
    -ms-word-break: break-all;
    word-break: break-all;
 
    word-break: break-word;
 
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.ellipsis { /* tronque le texte à la limite du containre et ajoute ... */
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis; /* Required for IE8 */
    -o-text-overflow: ellipsis; /* Required for Opera */
    text-overflow: ellipsis;
}


table tr:nth-child(even) {
    /*background: rgba(0,0,0,0.1);*/
	/*background:#fff;*/
}

/* when an element only contains floated elements, it collapses on itself. To prevent this behavior, you have to "clearfix" it. We used to do it with an extra element *//*
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*/
/* permet à un container de contenir des élements en float   */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
/* IE6/7 support */
.clearfix {
    *zoom: 1;
}



/*DEBUG*/

/* Empty Elements */
.debug div:empty, .debug span:empty,.debug li:empty,.debug p:empty,.debug td:empty,.debug th:empty {
    padding: 20px;
    border: 5px dotted yellow !important;
}
 
/* Empty Attributes */
.debug *[alt=""], .debug *[title=""], .debug *[class=""], .debug *[id=""], .debug a[href=""] {
    border: 5px solid yellow !important;
}
 
/* Deprecated Elements */
.debug applet, .debug basefont, .debug center, .debug dir, .debug font, .debug isindex, .debug menu, .debug s, .debug strike, .debug u {
    border: 5px dotted red !important;
}
 
/* Deprecated Attributes */
.debug *[background], .debug *[bgcolor], .debug *[clear], .debug *[color], .debug *[compact], .debug *[noshade], .debug *[nowrap], .debug *[size], .debug *[start],.debug *[bottommargin], .debug *[leftmargin], .debug *[rightmargin], .debug *[topmargin], .debug *[marginheight], .debug *[marginwidth], .debug *[alink], .debug *[link], .debug *[text], .debug *[vlink],.debug *[align], .debug *[valign],.debug *[hspace], .debug *[vspace],.debug *[height], .debug *[width],.debug ul[type], .debug ol[type], .debug li[type] {
    border: 5px solid red !important;
}
 
/* Proposed Deprecated Elements */
.debug input[type="button"], .debug big, .debug tt {
    border: 5px dotted #33FF00 !important;
}
 
/* Proposed Deprecated Attributes */
.debug *[border], .debug table[cellpadding], .debug table[cellspacing] {
    border: 5px solid #33FF00 !important;
}


/*DIVERS*/
@media print {
    * {
        background: none !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
 
        /* Images, vectors and such */
        filter: Gray();                          /* IE4-8: depreciated */
        filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */
        -webkit-filter: grayscale(100%);         /* Chrome + Safari 6 */
        -moz-filter: grayscale(100%);            /* Future proof */
        -ms-filter: grayscale(100%);             /* Future proof */
        -o-filter: grayscale(100%);              /* Future proof */
        filter: grayscale(100%);                 /* Future proof or polyfilled */
    }
 
    a {
        text-decoration: underline;
    }
 
    a[href]:after {
        content: " (" attr(href) ")";
    }
 
    a[href="#"],
    a[href="javascript:"] {
        content: "";
    }
}


@media {
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (   min--moz-device-pixel-ratio: 2), /* Looks like a bug, so may want to add: */
	only screen and (   -moz-min-device-pixel-ratio: 2),
	only screen and (     -o-min-device-pixel-ratio: 2/1),
	only screen and (        min-device-pixel-ratio: 2),
	only screen and (                min-resolution: 192dpi),
	only screen and (                min-resolution: 2dppx) {
		/* Your retina specific stuff here */
	}

}