html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-weight: normal; color: #292829; font: inherit; vertical-align: baseline}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block}
body {line-height: 1}
ol, ul {list-style: none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none}
ins {text-decoration: none}
del {text-decoration: line-through}
table {border-collapse: collapse; border-spacing: 0}
 html {height: 100%; overflow: hidden}
body {font-family: Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif; height: 100%; font-size: 0.80em; line-height: 1.60em; background: #f7f8f8}
img {display: block}
h1 a {background: url(/images/fontsmith.png) left top no-repeat; width: 144px; height: 33px; position: absolute; right: 20px; top: 20px}
#first h2 {background: url(/images/10-years-in-type.png) left top no-repeat; width: 135px; height: 16px; position: absolute; left: 20px; top: 20px}
#first h3 {background: url(/images/the-story-of-the-fontsmith-library.png) left top no-repeat; width: 137px; height: 37px; position: absolute; z-index: 2; left: 20px; top: 38px}
a, h1, h2, h3, h4, #flash {background-repeat: no-repeat; display: block; text-indent: -9999em}
 #loading-animation {position: absolute; left: 50%; top: 50%; width: 21px; height: 33px; margin-left: -16px; margin-top: -35px; overflow: hidden; display: none; z-index: 2}
 #all {min-width: 1100px; height: 100%; visibility: hidden}
#first {height: 100%; min-height: 600px; position: relative}
#second {position: relative}
#first .join-our-mailing-list-link {position: absolute; z-index: 2; left: 20px; bottom: 90px}
#first .fontsmith-link {position: absolute; z-index: 2; right: 20px; bottom: 90px}
#second-and-third {position: relative; top: 0; z-index: 1}
 #slideshow-controls {list-style: none}
#slideshow-controls li {position: absolute; z-index: 3; width: 75px; height: 150px; top: 50%; margin-top: -105px}
#previous-slide {left: 20px}
#next-slide {right: 20px}
#slideshow {position: absolute; margin-top: -35px; z-index: 1; height: 67%; top: 50%; width: 100%; max-height: 680px}
#slides {position: relative; z-index: 2; top: -50%; height: 100%}
.slide {width: 100%; height: 100%; position: absolute}
.new {margin-left: 100%}
.old {margin-left: -100%}
#slides.intro .slide img, #flash {cursor: pointer}
.booklet img {-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25)}
#slideshow img {height: 100%; width: auto; margin: auto}
#flash {position: absolute; left: 43%; top: -7%; margin-left: -365px; z-index: 1; width: 365px; height: 365px; background-image: url(/images/flash.png)}
 #slideshow, #slides, .slide, .slide img {min-height: 403px; max-height: 680px}
 #dock {position: relative; z-index: 1; background: url(/images/dock.gif) no-repeat left top; width: 230px; height: 30px; padding-top: 14px; padding-left: 15px; margin-left: -122px; margin-top: -4px; top: -50%; left: 50%}
#dock .social-links a {height: 17px}
#dock .facebook a {background-position: -9px -150px; width: 15px}
#dock .twitter a {background-position: 50% -200px}
#dock .google-plus a {background-position: 50% -250px}
#dock .facebook a:hover {background-position: -9px -175px}
#dock .twitter a:hover {background-position: 50% -225px}
#dock .google-plus a:hover {background-position: 50% -275px}
#read-and-buy-links {list-style: none; float: left; margin-top: 1px}
#read-and-buy-links li {float: left; margin-right: 15px}
#read-text-link a {width: 61px; background-position: left -840px}
#buy-font-link a {width: 55px; background-position: left -920px}
#read-text-link a:hover {background-position: left -880px}
#buy-font-link a:hover {background-position: left -960px}
 .join-our-mailing-list-link a, .fontsmith-link a, .close-link a, #designers-menu a, #submit a, #designers-menu h4, #read-and-buy-links a, #credit a {background-image: url(/images/links.png); height: 15px}
.join-our-mailing-list-link a {width: 160px}
#first .join-our-mailing-list-link a {background-position: left top}
#first .join-our-mailing-list-link a:hover {background-position: left -40px}
#second .join-our-mailing-list-link a {background-position: left -600px}
#second .join-our-mailing-list-link a:hover {background-position: left -640px}
.fontsmith-link a {width: 140px}
#first .fontsmith-link a {background-position: left -80px}
#first .fontsmith-link a:hover {background-position: left -120px}
.close-link a {width: 56px; background-position: left -160px}
.close-link a:hover {background-position: left -200px}
#credit a {width: 160px; background-position: left -1080px}
#credit a:hover {background-position: left -1120px}
#designers-menu h4 {width: 108px; background-position: left -240px}
#designer-1-link {width: 89px; background-position: left -280px}
#designer-1-link:hover {background-position: left -320px}
#designer-2-link {width: 100px; background-position: left -360px}
#designer-2-link:hover {background-position: left -400px}
#designer-3-link {width: 118px; background-position: left -440px}
#designer-3-link:hover {background-position: left -480px}
#designer-4-link {width: 140px; background-position: left -520px}
#designer-4-link:hover {background-position: left -560px}
#submit a {background-position: left -1000px}
#submit a:hover {background-position: left -1040px}
 .social-links {list-style: none}
.social-links li {float: left; padding-left: 1px; margin-left: 1px; background: url(/images/sharing.png) no-repeat left -300px}
.social-links a {background-image: url(/images/sharing.png); width: 25px}
#global-social-links {position: absolute; z-index: 2; left: 20px; top: 96px}
.social-links .facebook {margin-left: 0; padding-left: 0; background: none}
#global-social-links a {height: 14px}
#global-social-links .facebook a {background-position: -9px top; width: 15px}
#global-social-links .twitter a {background-position: 50% -50px}
#global-social-links .google-plus a {background-position: 50% -100px}
#global-social-links .facebook a:hover {background-position: -9px -25px}
#global-social-links .twitter a:hover {background-position: 50% -75px}
#global-social-links .google-plus a:hover {background-position: 50% -125px}
 #slideshow-controls a {background-image: url(/images/arrows.png); width: 75px; height: 150px}
#previous-slide a {background-position: left top}
#previous-slide a:hover {background-position: left -150px}
#next-slide a {background-position: left -300px}
#next-slide a:hover {background-position: left -450px}
 #read-the-stories-bar {position: absolute; z-index: 2; width: 100%; left: 0; bottom: 0; height: 90px; background: url(/images/stories-grid-top.png) repeat-x left 20px}
#read-the-stories-link {position: relative; background-image: url(/images/read-the-stories.png); width: 160px; height: 80px; margin: auto}
#read-the-stories-link:hover {background-position: left -80px}
 #stories-panel {background: url(/images/stories-grid-bottom.png) repeat-x left top; height: 572px}
#stories {width: 1001px; margin: auto; list-style: none}
#stories li {float: left; width: 161px; height: 241px; overflow: hidden; margin-left: 20px; margin-right: 19px; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.20); -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.20); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.20)}
#stories li.top {margin-bottom: 30px}
#stories-panel .close-link {position: inherit; margin: auto; margin-top: 28px; width: 961px}
#stories-panel .close-link a {float: right}
 #designers-menu {background: url(/images/info-grid.gif) repeat left top; padding-top: 30px; height: 40px}
#designers-menu .wrapper {position: relative; width: 961px; margin: auto}
#designers-menu ol {float: left}
#designers-menu h4, #designers-menu li {float: left; margin-right: 18px}
#designers-menu .join-our-mailing-list-link {float: right}
 #third {background: url(/images/info-grid.gif) repeat left top; height: 298px; padding-top: 9px; position: relative}
#third .wrapped {width: 961px; height: 240px; overflow: hidden; margin: auto}
#third h2 {height: 20px; margin-bottom: 20px; background-image: url(/images/titles.png)}
#third p, #third label {color: #cccccc}
#footer {position: absolute; width: 961px; left: 50%; margin-left: -480px; height: 15px; bottom: 25px}
#footer .fontsmith-link {float: left}
#footer .close-link {float: right}
#footer .fontsmith-link a {background-position: left -680px}
#footer .fontsmith-link a:hover {background-position: left -720px}
#footer .close-link a {background-position: left -760px}
#footer .close-link a:hover {background-position: left -800px}
#credit {float: left; margin-left: 20px}
 #designer-1, #designer-2, #designer-3, #designer-4 {display: none}
h2#jason-smith {background-position: left top}
h2#phil-garnham {background-position: left -40px}
h2#fernando-mello {background-position: left -80px}
h2#emanuela-conidi {background-position: left -120px}
.text-column {float: left}
.text-column p {margin-bottom: 1em}
.designer .text-column {width: 365px; margin-right: 40px}
.designer img {margin-top: 3px}
 #application-form {display: none}
#application-form h2 {background-position: left -160px}
#application-form .text-column {width: 180px; margin-right: 20px}
#applied {display: none}
#third #error-message {float: right; margin-top: -36px; color: #33cccc}
form {float: left}
form ol {float: left; width: 360px; margin-left: 40px}
form ol.first {margin-left: 0}
form li {margin-bottom: 12px}
label {display: block; float: left}
input, select {float: right}
select {width: 240px}
input {border: none; border-bottom: 3px solid #ffffff; height: 16px; padding: 0; width: 236px}
abbr {color: #33cccc}
#opt-in input {width: auto; margin-left: 120px; float: left; border: none}
#opt-in label {width: 220px; float: right}
input.error {border-color: #33cccc}
#submit {margin-left: 120px}
 #text-background {display: none; position: fixed; left: 0; top: 0; z-index: 5; width: 100%; height: 100%; min-width: 748px; background-color: rgba(30,30,30,0.90)}
#text-positioner {position: absolute; top: -43%; width: 100%; height: 100%}
#text-positioner .close-link {position: absolute; left: -23px; top: -23px}
#text-positioner .close-link a {background: url(/images/close.png) no-repeat left top; width: 50px; height: 50px}
#text-positioner .close-link a:hover {background-position: 0 -50px}
#text-panel {position: absolute; left: 50%; top: 50%; width: 496px; height: 86%; padding-left: 40px; padding-right: 20px; margin-left: -278px; background-color: #f7f8f8}
#text {position: relative; padding-right: 40px; top: 4%; height: 92%; overflow-y: auto; color: #333333}
#text {font-family: "FS Sinclair Web Regular", Helvetica, Arial, Verdana, sans-serif; font-size: 1.4em; line-height: 1.3em}
#text * {text-indent: 0}
#text h3 {width: 170px}
#text h3 {margin-bottom: 1em}
#text p, #text h4 {margin-top: 1em}
#text h2, #text h4, #text strong {font-family: "FS Sinclair Web Medium", Helvetica, Arial, Verdana, sans-serif}
.text-content {display: none}
 form li:after, form:after, #application-form:after, #designer:after, #designers-menu .wrapper:after, #designers-menu ol:after, #stories:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}