@font-face {
	font-family: 'gothic';
	src: url('fonts/gothic.eot');
	src: local('gothic'), url('fonts/gothic.woff') format('woff'),
        url('fonts/gothic.ttf') format('truetype');
}
@font-face {
   font-family: 'ElegantIcons';
   src:url('fonts/ElegantIcons.eot');
   src:url('fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
      url('fonts/ElegantIcons.woff') format('woff'),
      url('fonts/ElegantIcons.ttf') format('truetype'),
      url('fonts/ElegantIcons.svg#ElegantIcons') format('svg');
   font-weight: normal;
   font-style: normal;
}

/* Use the following CSS code to use data attributes for inserting icons */
[data-icon]:before {
   font-family: 'ElegantIcons';
   content: attr(data-icon);
   speak: none;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* Use the following CSS code to have a class per icon */
/*
.arrow_carrot-left, .arrow_carrot-right, .arrow_triangle-left, .arrow_triangle-right, .arrow_carrot-left_alt2, .arrow_carrot-right_alt2 {
	font-family: 'ElegantIcons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.arrow_carrot-left:before {
	content: "\34";
}
.arrow_carrot-right:before {
	content: "\35";
}
.arrow_triangle-left:before {
	content: "\44";
}
.arrow_triangle-right:before {
	content: "\45";
}
.arrow_carrot-left_alt2:before {
	content: "\3c";
}
.arrow_carrot-right_alt2:before {
	content: "\3d";
}
*/

   .glyph {
      float: left;
      text-align: center;
      padding: .25em;
      margin: 0;
      text-shadow: none;
   }
   .glyph_big {
      font-size: 128px;
      color: #59c5dc;
      float: left;
      margin-right: 20px;
   }

   .glyph div { padding-bottom: 10px;}

   .glyph input {
      font-family: consolas, monospace;
      font-size: 12px;
      width: 100%;
      text-align: center;
      border: 0;
      box-shadow: 0 0 0 1px #ccc;
      padding: .2em;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
   }
   .centered {
      margin-left: auto;
      margin-right: auto;
   }
   .glyph .fs1 {
      font-size: 3em;
      font-weight: normal;
		color: #a0a0a0; /* light gray */
   }