body { font-family: Ubuntu; color: #f0f0f0; background: #007BC3; letter-spacing: 1px; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }

input, select, button, textarea { font-size: 100%; letter-spacing: 1px; }

p { margin: 2px; padding: 2px; font-size: 100%; }
a { color: #fff; text-decoration: none; }

/* top */
#top {}
 #top h1 { margin: 20% auto 5%; font-size: 350%; text-align: center; }
 #top h1 span { font-size: 60%; }
 #top #links { margin: 6% auto; text-align: center; }
 #top #links a { margin-right: 6px; border-radius: 4px; color: #f0f0f0; background: #333; padding: 4px 8px; text-decorat
ion: none; }
 #top #links a:hover { color: #2a2a2a; background: #f0f0f0; }

/* tools */
#tools { padding: 8px; }
 #tools h1, #tools h2 { margin: 4px 8px; padding: 4px; }
 #tools #header { }
  #tools h1 span { background: #666; border-radius: 4px; padding: 4px 12px; font-size: 80%; }
 #tools #menu { position: absolute; top: 0; left: 300px; }
  #tools #menu a { float: left; margin: 0 8px; display: block; padding: 4px 8px; color: #fff; background: #333; text-dec
oration: none; border-radius: 0 0 4px 4px; border: 2px solid #f0f0f0; border-top: none; }
  #tools #menu a:hover { color: #333; background: #fff; }
 #tools #main { padding: 8px; clear: both; }
  #tools #main h2:before { content: "))) "; }
 #tools .body { padding: 2px 8px; }
 #tools input { padding: 0; font-family: Ubuntu; border: 2px solid #f0f0f0; border-radius: 4px; background: #fff; width:
 100%; }
 #tools button { border: 2px solid #f0f0f0; border-radius: 4px; color: #007BC3; background: #f0f0f0; }
 #tools p#address:before { content: "address :"; padding-left: 0.8em; }
 #tools p#unsigned:before { content: "unsigned :"; }
 #tools p#signed:before { content: "signed :"; padding-left: 1.2em; }
 #tools dl { padding: 0 8px; }
 #tools dt { padding: 4px; font-weight: bold; font-family: Copperplate; text-transform: lowercase; }
 #tools dd { padding: 4px 8px; color: #2a2a2a; background: #f0f0f0; border-radius: 4px; width: 80%; font-size: 90%; }

 #tools #conv { text-align: center; }
 #tools #conv input { font-size: 120%; padding: 16px; width: 350px; text-align: center; border: 8px solid #fff; }
/* #tools input#hex { width: 200px; } 
 #tools input#rgba { width: 320px; } */
 
 #tools table#color { margin: 0 auto; padding: 8px; font-size: 80%; color: #2a2a2a; background: #fff; border-radius: 4px
; }
 #tools table#color td { cursor: pointer; }
 #tools table#color td.color { border-radius: 4px; width: 22px; height: 22px; }
 #tools table#color td.name { width: 160px; }
 #tools table#color td.name span { font-size: 80%; }