html { overflow-y:scroll; }
body, html { margin:0; padding:0; height:100%; width:100%; }
body { background-color:#fff; }
div { float:left; font-family:'Helvetica Neue', 'Helvetica', Arial, sans-serif; }
ul { padding:0px; margin:0px; float:left; }
li { padding:0px; margin:0px; float:left; list-style:none; }
img { border-width:0px; }
a { color:#000; text-decoration:none; }
a:hover { cursor:pointer; }
#console { position:fixed; width:100%; background-color:#222; z-index:2000; font-size:10px; color:#fff; }
#console tr.even { background-color:#333; }
#container { width:1100px; float:none; height:auto !important; height:100%; min-height:100%; margin:0 auto; position:relative; }
#content { width:960px; padding-left:140px; float:none; display:inline-block; position:relative; }
/* Block Elements */ h1, h2, h3, h4, h1 a, #panel a, #panel h4, #home .tile, #home #twitter span, #home_fonts a, #header h2 a, #header #social a, h4, #list_large a, #list a, #qa a, .box span, .tooltip, #sampler a, .labels span, #about p, #features a, #data span, #sets li a, #sets li .thumb, #thumbs a, #footer li a, .viewer_tap
{ display:block; float:left; margin:0; padding:0; }
/* Monospace */ #console, #features, #home_fonts, #data .num, #slides span, .text, #list ul a, #sets li a, #fblike
{ font-family:'Menlo', 'Droid Sans Mono', monospace; font-size:10px; }
/* Lucida */ .labels, #tools, .tooltip, #viewer_nav
{ font-family:'Lucida Grande', Arial, sans-serif; font-size:11px; }
/* Shadow */ #header h2, h3, #data .spec, #data .num, #list span, #menu a
{ text-shadow:0px 0px 1px rgba(0,0,0,0.01); }
.text { line-height:170%; }
.text a { border-bottom:1px solid #eee; }
.text a:hover { color:#1ad; color:#f34; color:#00cd5a; border-bottom-color:#c8f6dc; }
.tooltip span { display:none; font-weight:bold; white-space:nowrap; position:absolute; color:#fff; background-color:#000; background-color:rgba(0,0,0,0.75); padding:3px 7px 5px 7px; border-radius:5px; -moz-border-radius:5px; }
.editlink { font-size:10px; color:#f44; border-bottom:none; }
/* PANEL */
#panel { width:140px; float:left; position:fixed; z-index:1000; }
#panel h1 a { width:140px; height:140px; overflow:hidden; text-indent:-1000px; background-image:url('images/logo.png'); }
#panel ul, #panel li, #panel a { clear:left; width:120px; }
#panel { color:#888; }
#panel a { color:#bbb; }
#panel a.active { color:#000; font-weight:bold; }
#panel a:hover { color:#888; }
#menu { padding-left:20px; line-height:200%; font-size:14px; font-weight:bold; }
#tools { padding-left:20px; line-height:160%; margin-top:40px; font-weight:normal; }
#tools h4 { margin:10px 0 5px 0; }
#tools .email { color:#888; font-weight:bold; margin-top:10px; }
#tools .feed { display:inline-block; width:9px; height:9px; margin-right:2px; text-indent:1000px; overflow:hidden; background:transparent url('images/feed.png') no-repeat left bottom; }
/* QA+ADDTHIS */
#qa { position:absolute; z-index:10; left:170px; top:0; width:930px; }
#qa a, .box span { color:#ddd; height:30px; text-indent:20px; line-height:30px; margin-right:15px; font-size:12px; font-weight:bold; background-repeat:no-repeat; background-position:left top; text-shadow:none; }
#qa a.list { background-image:url('images/qa-list.png'); }
#qa a.share { background-image:url('images/qa-share.png'); }
.box { z-index:100; position:relative; top:0; display:none; }
#list { border-bottom:1px solid #000; background-color:#000; padding-bottom:20px; }
#list span { color:#666; margin-left:30px; background-image:url('images/qa-list.png'); background-position:left -30px; }
#list ul { padding:12px 0; width:100%; }
#list ul ul { padding:0; width:25%; }
#list ul a { width:240px; height:25px; line-height:25px; color:#aaa; text-indent:30px; }
#list ul a:hover, #list ul a.active:hover { color:#fff; background-color:#282828; }
#list ul a.active { background:transparent url('images/qa-active.png') no-repeat 18px 50%; color:#fff; }
#list ul.fonts a { background-color:#fff; height:40px; text-indent:-1000px; overflow:hidden; border-bottom:none; }
#list ul.fonts a:hover { background-color:#f34; background-color:#00cd5a; }
#share { width:900px; padding:8px 30px; height:20px; background-color:#fff; }
/* HOME */
#banner { width:960px; height:320px; background-color:#f8f8f8; margin-top:40px; }
#home { margin:40px 0; overflow:hidden; height:570px; }
#home li { width:190px; height:190px; }
#home .tile { width:190px; height:190px; padding:1px; background-repeat:no-repeat; background-position:50% 50%; position:relative; }
#home #twitter span { background-color:#f8f8f8; color:#888; padding:10px; width:160px; margin:0 5px; margin-top:30px; }
#home #twitter span a { color:#888; }
#home #twitter span a:hover { color:#444; border-bottom-color:#ddd; }
#home .nav { display:inline-block; float:none; }
#home_fonts { margin-top:30px; background-color:#fff; }
#home_fonts a { width:240px; height:25px; line-height:25px; color:#aaa; text-indent:30px; }
#home_fonts a:hover { background-color:#fff; color:#888; }
/* FONTS */
#loader { position:absolute; left:170px; top:60px; }
#list_large { position:relative; margin-top:40px; padding:0 0 40px 10px; }
#list_large a { display:none; background-color:#fff; text-indent:-1000px; overflow:hidden; }
#list_large a:hover { background-color:#f34; background-color:#00cd5a; }
/* FONT */
#header { width:900px; padding:55px 30px; height:30px; font-size:14px; }
#header h2, #header ul, #header li { display:inline-block; float:none; margin:0; padding:0; }
#header h2, #header li { margin-right:40px; }
#header h2 { font-size:24px; }
#header ul { }
#header li a:hover { color:#f34; color:#00cd5a; }
#header li a.active { font-weight:bold; }
#header span { font-weight:normal; }
#header #tdc { position:relative; margin-bottom:-6px; margin-left:10px; }
.vendor { color:#000; }
.village:hover { color:#f04; }
.veer:hover,.typotheque:hover{ color:#f60; }
.myfonts:hover { color:#0df; }
.fontspring:hover { color:#3ae; }
#header #social { float:right; margin:0; padding:0; }
#header #social li { margin:0; }
#header #social a { width:30px; height:30px; text-indent:1000px; overflow:hidden; margin-left:10px; opacity:0.75; }
#header #social a:hover { opacity:1; }
#header #fblike { float:right; margin-top:5px; height:22px; line-height:22px; }
#header #fblike span { display:block; float:left; margin-right:10px; }
#sampler { width:900px; margin-left:30px; position:relative; }
#sampler .slides { width:100%; height:400px; overflow:hidden; }
#sampler .slides li { width:100%; height:100%; }
#sampler .nav { z-index:50; position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
#sampler a { width:100%; height:100%; position:relative; cursor:default; }
#sampler .fade { background-color:#f34; background-color:#00cd5a; width:100%; height:100%; }
.labels { position:absolute; color:#ccc; text-align:center; font-size:9px; }
#labels_x { top:410px; left:0; width:900px; }
#labels_y { top:0; left:-30px; width:30px; height:100%; }
.labels span { transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); height:30px; line-height:30px; width:100px; position:absolute; left:15px; margin-left:-50px; top:100px; margin-top:-15px; }
.labels span.bottom { top:300px; }
h3 { width:100%; font-size:14px; margin-bottom:20px; color:#000; }
#about { width:930px; padding:20px 0 0 30px; margin:80px 0; border-top:1px solid #f6f6f6; }
#about div { width:420px; margin-right:45px; }
#about p { margin-bottom:25px; }
#about img { float:left; position:relative; margin-bottom:20px; }
#about .above { display:inline-block; height:10px; width:13px; background:transparent url('images/arrow.png') no-repeat left top; text-indent:-1000px; overflow:hidden; }
#features { position:relative; background-color:#f8f8f8; padding:20px 0 100px 0; }
#features .slides { width:960px; height:140px; overflow:hidden; background-image:url('images/features.png'); }
#features .slides li { width:100%; height:100%; position:relative; }
#features .slides span { position:absolute; top:14px; left:540px; z-index:1000; color:#aaa; }
#features .nav { width:100%; }
#features .nav li { width:240px; }
#features a { width:100%; height:25px; line-height:25px; border-bottom:1px solid #eee; text-indent:30px; }
#features a.activeSlide { color:#f34; color:#00cd5a; font-weight:bold; }
#data { padding:10px 0 10px 20px; width:940px; background-color:#f8f8f8; }
#data.alt { background-color:transparent; padding-bottom:50px; padding-top:5px; }
#data .column { width:214px; border-left:1px solid #eee; padding:20px 10px 0 10px; }
#data .column:first-child { border:none; }
#data .column div { width:100%; padding-top:30px; border-top:1px solid #eee; margin-top:30px; }
#data .column div:first-child { padding:0; border:none; margin:0; }
#data.alt .column { padding-top:0; }
#data .spec { font-size:18px; font-weight:bold; line-height:110%; }
#data .num { text-align:center; margin-right:30px; }
#data .num strong { font-size:36px; }
#data ul, #data li { width:100%; }
#viewer { position:relative; width:960px; margin-bottom:100px; }
#viewer.alt { margin-top:60px; }
#viewer .image { width:720px; text-align:center; }
#viewer .shadow img { box-shadow: 0 1px 3px #aaa; margin:1px 2px; }
#viewer.center .image { text-align:center; }
#viewer .meta { width:220px; margin:30px 0 0 20px; }
#viewer ul { position:relative; overflow:hidden; width:100%; }
#viewer li { width:100%; }
#viewer h4 { width:100%; margin-bottom:10px; font-size:14px; }
#viewer_nav { z-index:50; position:absolute; height:25px; line-height:25px; left:730px; top:0; }
#viewer_nav a, #viewer_nav span { display:inline-block; height:100%; font-size:11px; font-weight:bold; color:#000; }
#viewer_nav a { width:25px; text-indent:1000px; overflow:hidden; background-image:url('images/viewer_nav.png'); background-repeat:no-repeat; background-position:left 50%; }
#viewer_nav #next { background-position:right 50%; }
.viewer_tap { width:360px; height:100%; position:absolute; left:0; top:0; z-index:1000; }
.viewer_tap:hover { cursor:url('images/tap_next.png'); }
#tap_next { left:360px; }
.viewer_tap span { display:none; float:left; width:60px; height:60px; overflow:hidden; text-indent:-1000px; background:transparent url('images/tap_prev.png') no-repeat 50% 50%; }
#tap_next span { left:360px; background-image:url('images/tap_next.png'); }
/* SETS */
#sets { margin-left:30px; }
#sets.alt { margin-top:60px; }
#sets li { width:225px; height:250px; position:relative; }
#sets li .thumb { margin-bottom:10px; width:100%; height:175px; background-position:50% bottom; background-repeat:no-repeat; }
#sets li a { width:100%; text-align:center; }
#sets li a span { font-weight:normal; color:#aaa; }
#thumbs { width:900px; padding:0 30px; }
#thumbs a { background-repeat:no-repeat; font-size:0; overflow:hidden; margin:0 5px 5px 0; height:100px; width:100px; background-repeat:no-repeat; background-position:50% 50%; }
/* FOOTER */
#footer { float:none; border-top:1px solid #f6f6f6; width:960px; margin-left:140px; padding:30px 0; position:absolute; bottom:0; }
#footer div { font-family:"Lucida Grande", sans-serif; font-size:9px; padding:30px; color:#aaa; }
#footer li a { text-indent:-1000px; height:50px; background-position:left top; overflow:hidden; margin:15px 20px 0 20px; opacity:0.2; }
#footer li a:hover { opacity:0.5; }
/* ALT */
.a1 { background-color:#f8f8f8; }
.a1 #footer { border-top:none; border-top:1px solid #eee; }
.a1 #share { background-color:#f8f8f8; }
.a2 { background-color:#000; }
.a2 #content { color:#fff; }
.a2 #footer div { color:#444; }
.a2 #footer { border-top:none; border-top:1px solid #222; }
.a2 #footer li a { background-position:left bottom; }
.a2 #panel a.active { color:#fff; }
.a2 #panel h1 a { background-image:url('images/logo-a2.png'); }
.a2 #qa a { color:#555; background-position:left -30px; }
.a2 #share { background-color:#000; }
.a3, .a3 #container { background-color:#f0faff; }
.a3 #panel h1 a { background-image:url('images/logo-a3.png'); }
.a3 #panel, .a3 #content *, .a3 #footer div { color:#1ad; }
.a3 #data { background-color:transparent; border-top:1px solid #d7f2ff; }
.a3 #data, .a3 #data .column, .a3 #data .column div, .a3 .text a, .a3 #footer { border-color:#d7f2ff; }
.a3 .text a:hover { border-color:#ade2f5; }
.a3 #share { background-color:#f0faff; }
.a3 #panel a { color:#88d6ef; }
.a3 #panel a.active { color:#1ad; }
.a3 #panel a:hover, .a3 #panel #tools .email { color:#5fc9eb; }
.a3 #tools .feed { background-image:url('images/feed-a3.png'); }
.a3 #qa a { color:#bcecfc; background-position:left -60px; }
#panel.bw { color:#aaa; }
#panel.bw h1 a { background-image:url('images/logo-alt.png'); }
#panel.bw a { color:#bbb; }
#panel.bw a.active { color:#444; }
#panel.bw a:hover { color:#888; }
#panel.bw #tools h4 a { color:#444; }
#panel.bw #tools .feed { background-image:url('images/feed-alt.png'); }