Ricardo-Diaz

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

Ricardo-Diaz

.visuallyhidden {
    position: absolute;
    width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;    
}

Ricardo-Diaz

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
 
.clearfix:after {
    clear: both;
}
 

Ricardo-Diaz

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

Ricardo-Diaz

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

Ricardo-Diaz

.content {
    font: 1em/1.4 Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
 
.title {
    font: 1.7em/1.2 Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
}
 
.code {
    font: 0.8em/1.6 Monaco, Mono-Space, monospace;

Ricardo-Diaz

Reset all colors and change link color
This resets all text and background colors so you’re back at square one with black text. Then it changes the color and style of links to distinguish from regular text and make them apparent that they’re links – change the color and styling to whatever you want.

* {
     color: black !important;
     background-color: white !important;
     background-image: none !important;
}
 
a:link {

Ricardo-Diaz

Comprehensive List of Browser-Specific CSS Hacks
With these you’ll be able to better target IE, Firefox, Chrome, Safari and Opera from within the CSS.

/***** Selector Hacks ******/
  
/* IE6 and below */
* html #uno  { color: red }
  
/* IE7 */
*:first-child+html #dos { color: red } 

Ricardo-Diaz

Changing the size of your content area
Make your content area wider or narrower.

#content {
    width: 100%;
    margin: 0;
    float: none;
}

Ricardo-Diaz

Rotating an image or text – transform
Rotate any image, text, or technically any element using this. Change the rotate value to how many degrees you want it to rotate, adding a “-” (like in the snippet) for counterclockwise rotating.


/* for firefox, safari, chrome, and any other gecko/webkit browser */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
 
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);