.character-codes { color:#444444; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size:14px; }

/* from bootstrap */
.character-codes .table { background:#eeeeee; width: 100%; margin-bottom: 20px; }
.character-codes .table th, .table td { padding: 8px; line-height: 20px; text-align: left; vertical-align: top; border-top: 1px solid #dddddd; } 
.character-codes .table th { font-weight: bold; } 
.character-codes .table thead th { vertical-align: bottom; } 
.character-codes .table-bordered { border: 1px solid #dddddd; border-collapse: separate; border-left: 0; border-radius: 4px; }
.character-codes .table-bordered th, .table-bordered td { border-left: 1px solid #dddddd; }
.character-codes .table-striped tbody > tr:nth-child(odd) > td, .character-codes .table-striped tbody > tr:nth-child(odd) > th { background-color: #f9f9f9; }

/* from character-codes */
.character-codes dl { display:inline-block; vertical-align:top; margin-right:15px; width: 140px; background: #fbfaf9; box-shadow: 0px 0px 8px #aaaaaa; border-radius: 5px; }
.character-codes dl:hover { box-shadow: 0px 0px 14px #444444; }
.character-codes dt { min-height:100px; font-size: 85px; line-height: 100px ; text-align: center; background: #fbfaf9;   padding: 10px 0; font-weight:700; font-style:normal; }
.character-codes dd { border-top: 1px solid #999; margin:0; padding: 4px 6px;  font-family: 'Cutive Mono', sans-serif; font-size:18px; background: #F0EDE9; }
.character-codes dd:last-child { font-family:  'Source Sans Pro', Helvetica, Arial ,sans-serif; background:#fbfaf9; font-size:18px; border-radius: 0px 0px 5px 5px; }
.character-codes dt { border-radius: 5px 5px 0px 0px ; }
.character-codes .table td.table_entity { font-size: 35px; text-align: center; line-height:50px; }
.character-codes .ascii-table td { vertical-align: middle; }

@media (max-width: 480px) {
.character-codes dl { width:100%; }
.character-codes dt { font-size: 100px; line-height: 130px ;}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-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) {

/* Retina-specific stuff here */
.character-codes dt { font-size: 200px; line-height: 300px ; }
}