/* ************************************************* Cognition General Screen Styles Created by the friendly folks at Happy Cog http://www.happycog.com/ Beware of the Deruchiecorn. ************************************************* E\ Jz:[3>. }5t "ycI[ "c3t3c=z1\ E:J.:LEt., \;:CY325z3p==. \:tL`\tz2c!) c:3xJ3=\:t] }zzz[ \33..+.__ \), 'c713.,J5Ckc::1__ `\1,F2z.)3=. C._,:\ "E3z;/*=cz222. ,.;'=*_`\t5.:/:1t!:! EJ5L_;5=E13EtuC3L)J!! [!tc:c:lFc:1__:L 'cIlI5F E5i/)c7zk::::!1::(= ''2 VL_ :z:L EL EZZz3zI2x;c;:\]_,__ :1 E *2zz==.._*cjt5[L [[``E5cz355uKc:."C.__ 5 :1 ___,,,,=75C)J:tc._i) E. *ct1kZ5[_ \1_ :1_AL _..+==cy.. *{ZZ5csz;::;J5cz;I!J._ [L___ "z352c3>.\l_E.E` `=z!5z.__,232zzeg=C=C\)`*c):;;3t3E) ;2 __,c2xzt/3E5zL_ 5J1 -43tzCE]:!ttttsz)c[I. `*C.__ ``,3EE5L ELz5J*\}zsk3tXE7!![t35.., ,,;5sc[7=3i `"=2x __"Ct.__.1ttz13xE5)' _EEEi=*"` `"^^"*=cz;;3z=. ,JEztt3S[=C2t.____Jk______ t3k3 \ _ _ _ ___,==EEEct2zz=____:E3tF*E2EttEZtx[3zz^ _______ `` ____ c.+... }EzJx_!3.,.,. \tzZ\ __.=gzzw.___;2t551iz;zyZL ____ V3L_ _ `*4SS33uw......,_________ '=tt1zz25E55E13zZx32 _ "E1t3. '` _,,;7E5zz;52z555{2]z1______xsE1____ *Ee.._____ `````^5EZtz5_______:3EF"E533F```"``____ \Ek;2x. ,... _ :5F^^\5.cwJ2CXE5t3=^'""*y>..,;t3z3z..__ ``"*P***==Czx.,,_ `"` _____ |3E:3;iE11____________ '+ `*C3y., , ,g5*``*Zk czsztE2EEE1z=JF`` _____,;]jzt3tzt3z3t.,__________ G@st[1._________ [t533DEE11__________________ "T2E5e23tSE5E3553Q1E5F^ ___ :E. ,+=zSEEEzt:::JZ2zx_,=/ex5ziizt1i35zt5==2=.______ 4S2EtSki}L______ :ccjz5;z\EE. ___________________ :z22*[3yEHE5E5P*` ________ $. c...g@EtE[]z3J3F``` [])::;iizz2EEt7[ ,.,_ `\).___ <5Xt2*^``` _______ C._``_,ALE. __________________ :F` -5* xpF' _______ :EE1 EL ,wczE23E53z[._ ________,&wct;zzz5=*` __ `**' `"* _ "Cx____ \1 ______________`*77*` ZF __________________________ _ ` _ ________ |H5.;EL ,y5E3z3t23Ek____,wE5t"`` ____,,.z.w@e. "*E5E2 __ 'cx.______,_____________ Cz==5' ___________________________________________ |EEE3J5 *PFj2Etjzg35kSESEF*"` ________ ``]J222[` *FFjj.______ "*jgEF4EL______________ ____,._____________________________________:E :tE3&.V1_ dSF^`4F**^"I22* _ ____.yzSFP.___ *C3QE5, `"^*7==* __ y53** ______________________,c53. _____________________ __________ ___f3L_"===` E)__ `-#F* ___@5ZFG5F4...+c5ttCF* ____________ ,z557t)_________________;5'\ttJ.___________________ _____________ _ `E5SSL___;53. _ *++[.,.=zzSF` ________ ______ JtI _______________ ;7 Ej1J._____________________ ________ ____wE35SZtE@PV* ___,..._ 5s32Qzp __ __ ____ ______________ E3. ______________/7 __ [Et3tZx.__________________ ______,._,/2EEAE^}c2yE3F "^"3E[_zs ""[ ___ _____ _________________ \3.____ ________ V=___ ]EE11t3Ss2Z2Z22zzySpcccsczzSSSFezEF\2ksy3`}G5./3HF _,E[ "*`;Z!.zzSP` ____ __ ___ _ ___ __________ E5L __________________ {EE331````````` ?ECF\2EFE!2Q9FJ2[IJ3k3#`"3F *"*' ***gz1Z) _ _ __ _ _____________ _____J3Ek,__ ____________ "E3t52._ ___ *' `` \VF \bF ?zF ,._ - :@3F _,_ _____ :._,_____ ______ __ \3A"` ____________ __ IXEz12z+.__ __________ ______,zL _.F^` "F**` _ _ V.J1__ ______ -ww.___ !EL___________________ V3@&&2EE52ysS&EeE5&@ESx_ ,w./*QE9*"E@F,E xP" _ __ \.Xt____ _ _ ,J52._ "EL _ ____ ____ _"42QEE525SXEE356EZZ3k5E22zE3E3kxJFY2x[33LS._ __ ____ `4S@.____ _ ``"*Eb."EL_ __ _ __ __ *QE25sEEjjE2E5335EZZ$ttt3Q@$E5@@@@@@9E5EF _ __ _ J3EkEE2SEZ9ww..gwsEZ1;\5.___ V$@R@$@R@QK@2QE$$E@MSBEEE@Z226@FT25L,i _,,,..2y2Sz[]j5255E2F "E3yE2x_ `"^*H@@U5ESW2P@@@@SE2@@@@gQ@Q56F` @EF __!]]]255S2EEgSEEF^ "4EE232L_ V9QgRE., 45F MWE25^ \F .._..2]222z55E5E525*` `"Q15. . $@E ,E2' y9. _ !*3EE@EQ2^` "X3hgww.........w=szzz@SSSSSS2EE35Z2pw.,,Z3F "** ``"*55EEE^ _ ````````` *Q5E* _JEt2^ ,@3F^` _ /*------------------------------------------- General Selectors -------------------------------------------*/ * { margin: 0; padding: 0; line-height: 1.4; word-wrap: break-word;} body { background-color: #43373f; min-width: 780px; min-width: 320px; color: #333; font: normal 62.5% 'ff-meta-serif-web-pro-1','ff-meta-serif-web-pro-2', Georgia, 'Times New Roman', serif; padding-bottom: 20px; } /* block level */ p, ul, dl, ol { margin: 0 0 1.5em; color: #555; } p, dl { font-size: 1.4em } li { margin: 0 0 0.5em 1em; } dt { margin: 0 0 0.5em 0; } dd { margin: 0 0 0.5em 1em; } blockquote { margin: 0 0 1.2em 2em; padding: 1em 0 .5em; } blockquote p { font-style: italic; margin-left: 2em; font-size: 1.6em ; } table { border-collapse: collapse; margin: 0 0 1.5em; font-size: 1.4em; border: 1px solid #c7c5c5; } table caption { font-family: "FranklinGothicBook"; margin-bottom: 1em; } table caption strong { color: #51414b; } th { background: #51414b; text-align: left; color: #fff; text-transform: uppercase; font-weight: normal; font-size: .8em; border-left: solid 1px #fff; border-bottom: 1px solid #fff; } th:first-child { border-left: none; } th, td { padding: 7px 10px; } td { font-family:"FranklinGothicBook"; line-height: 1; } td b { background: #d5c7d7; } table:not(.highlight) tr { background: #fff; } table:not(.highlight) tr:nth-child(2n) { background: #e0e0e0; } table:not(.highlight) tr:hover { background: #51414b; color: #fff; } /* inline */ a { color: #bc6a31; } a:hover, a:focus { color: #b44326; -webkit-transition: color 150ms ease-in; /* Saf3.2+, Chrome */ -moz-transition: color 150ms ease-in; /* FF3.7+ */ -o-transition: color 150ms ease-in; /* Opera 10.5+ */ transition: color 150ms ease-in; /* futureproofing */ } img { display: block; margin: 0 0 15px; } a img { border: none; } pre { padding: 10px; background: #fff; margin-bottom: 1.5em; white-space: pre-wrap; } code { font: 12px/1 Courier, MonoSpace; color: #51414b; } tr:hover code { color: #fff; } sub, sup { line-height: 0; } .move { position: absolute; left: -9999px; } .hide { display: none; } .notice { background:#bc6a31; color:#fff; font-family: 'FranklinGothicBook'; font-size:1.25em; padding: 1em; text-align:center; } .notice strong { font-weight:normal; font-family: 'FranklinGothicMed'; } .notice a { background-color:#fff; color:#bc6a31; padding:2px 6px; text-transform:uppercase; text-decoration:none; font-family: 'FranklinGothicMed'; } /*------------------------------------------- Global combinations -------------------------------------------*/ h1 a, .pagination .prev a, .pagination .next a, .pagination em, .toggle a, input.share, #search button, input.authorize-connection, input.tweet-my-comment, .help-popup a, a.retweet-this-article, .share-popup ul li a, .aside li.rss a.author-feed, a.respond-now, #main #respond-toggler li.on a.close, a.generate-libs, strong.hc-logo a { display: block; text-indent: -9999px; background-color: transparent; background-position: 0 0; background-repeat: no-repeat; overflow: hidden; } #content .wrap:after, #header .wrap:after, #footer ul:after, #sub-footer .wrap:after, ul#main-nav:after, div.article-meta dl:after, div.article-meta:after, ol.full:after, .topics li:after, .topics:after, #responses p.submit:after, #responses ol:after, #responses ol li:after, #responses ol li div:after, .share-popup ul:after, #articles-nav-list li:after, li.rss:after, #respond-toggler:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; } /*------------------------------------------- Structure -------------------------------------------*/ #header { padding: 0; margin-top: 5px; height: 56px; position: relative; z-index: 100; background: url(/a/screen/bg-header.gif) repeat-x 0 0; } #header .wrap { position: relative; max-width: 820px; margin: 0 auto; padding: 0 2.43902439% ; } #content { background: #d7d7d7 } #content .wrap { min-height: 250px; max-width: 820px; margin: 0 auto; padding: 0 2.43902439% 40px; position: relative; background: #edecec; } #primary { float: right; width: 740px; padding: 0 10px; } .unique #primary { float: none; width: 960px; padding: 0; } #main { max-width: 460px; padding: 0 0 0 180px; position: relative; } #main p { line-height: 1.55; font-size: 1.7em; } #main-alt { float: left; width: 61.124694377%; padding: 0 4% 0 0; margin: 0 4% 0 0 0; } /* 500/818 & 20/500 */ .feature #main-alt { float: none; width: 90.4645477%; padding: 0; } /* 740/818 */ .unique #main-alt { float: none; width: 100%; padding: 0; } #sub { float: left; width: 33.618581907%; padding: 0 0 20px 0; } #secondary { float: left; width: 180px; padding: 0 10px; } .aside { width: 160px; float: right; font-family: 'FranklinGothicBook'; margin-left: 20px; } .intro { margin-left: 180px; } #main-sub-wrap { float: left; width: 100%; } /*------------------------------------------- Header -------------------------------------------*/ h1 { position: absolute; top: 28px; left: 52px; } h1 a { width: 128px; height:91px; background-image: url(/a/screen/logo/cognition-logo.png); } h1 a:hover, h1 a:focus { background-position: 0 -91px; } #search { float: right; margin: 40px 0 72px 40px; } #search input { float: left; display: block; height: 32px; width: 220px; padding: 0 7px; margin: 0; line-height: 1; font-size: 1.15em; -moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.1); -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,.1); box-shadow: inset 0 2px 3px rgba(0,0,0,.1); border-color: #D4D4D4; border-style: solid; border-width: 1px 0 1px 1px; border-radius: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; -moz-border-radius: 4px; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; } #search input:focus { outline: none; -webkit-transition:background-color 0.5s linear; background-color:#dfdede; } #home #search { margin-bottom:52px; } #search button { background-image: url(/a/widgets/button-search.gif); height: 34px; width: 60px; border: none; cursor: pointer; float: left; } #search button:hover, #search button:focus { background-position: 0 -34px; color: #fff;} #search button:active { background-position: 0 -68px; } ul#main-nav { position: absolute; top: 0; left: 218px; border-left: 1px solid #43373f; border-right: 1px solid rgba(255,255,255,.12); } ul#main-nav ul li { float: left; margin: 0; list-style: none; position: relative; overflow: visible; } ul#main-nav li a { text-decoration: none; } ul#main-nav li a.nav-title { position: relative; z-index: 1100; display: block; } #articles-nav, #topics-nav { float: left; margin: 0; position: relative; list-style: none; } #articles-nav { width: 162px; } #topics-nav { width: 151px; } #articles-nav a.nav-title, #topics-nav a.nav-title { position: relative; height: 56px; border-left: 1px solid rgba(255,255,255,.12); border-right: 1px solid #43373f; font-family: 'ClarendonFSLight'; font-size: 1.8em; text-indent: 20px; text-shadow: 0 1px 1px #43373f; letter-spacing: 1px; line-height: 56px; color: #edecec; } #articles-nav a.nav-title:after, #topics-nav a.nav-title:after { content: ''; display: block; position: absolute; top: 14px; right: 20px; width: 28px; height: 28px; background: url(/a/screen/dropdown.png) 0 0 no-repeat; } #articles-nav a.nav-title { width: 160px; } #topics-nav a.nav-title { width: 149px; } #topics-nav:hover a.nav-title, #articles-nav:hover a.nav-title { background-color: #4e4049; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(89, 74, 85)), to(rgb(67, 55, 62))); background-image: -webkit-linear-gradient(top, rgb(89, 74, 85), rgb(67, 55, 62)); background-image: -moz-linear-gradient(top, rgb(89, 74, 85), rgb(67, 55, 62)); background-image: -o-linear-gradient(top, rgb(89, 74, 85), rgb(67, 55, 62)); background-image: -ms-linear-gradient(top, rgb(89, 74, 85), rgb(67, 55, 62)); background-image: linear-gradient(top, rgb(89, 74, 85), rgb(67, 55, 62)); text-shadow: 0 -1px 2px #000; } #topics-nav a.nav-title:focus, #articles-nav a.nav-title:focus { color: #fff; } #topics-nav-list, #articles-nav-list { display: none; } strong.toggle { display: none; position: absolute; top: 0; right:0; margin: 0px 8px 0 0; } .toggle a { width: 62px; height: 47px; background: url(/a/titles/menu-tab.png) 0 0 no-repeat; } .toggle a:hover, .toggle a:focus { background-position: 0 -47px; } /* .toggle a { width: 62px; height: 56px; background-image: url(/a/titles/hc-logo.gif); background-repeat: no-repeat; background-position: right 0; } .toggle a:hover, .toggle a:focus { background-position: right -103px; color: #fff; } */ strong.hc-logo { position: absolute; top: -35px; z-index: 999; left: 72px; } strong.hc-logo a { background-image: url(/a/screen/logo/hc-logo-small.png); height: 70px; width: 70px; } strong.hc-logo a:hover, strong.hc-logo a:focus { background-position: 0 -69px; } /*------------------------------------------- Sites -------------------------------------------*/ #sites .wrap { position: relative; max-width: 860px; margin: 0 auto; padding:0; list-style: none; text-align: right; font-family: 'FranklinGothicMed'; font-size: 1.2em; color: #7c717a; text-transform: uppercase; overflow: hidden; height:4em; } #sites ul { margin: 0; } #sites li { display: inline-block; padding: 7px 0 0; margin: 0 0 0; text-align: left; color: #7c717a; } #sites li a { color: #c2b3c0; text-decoration: none; } #sites li a:hover { color: #fff; } #sites li a, #sites li em { padding: 0 13px; font-style: normal; } #sites li:before { content: " /"; color: #666; } #sites li:first-child:before { content: ""; } /*------------------------------------------- Footer -------------------------------------------*/ #footer a, #sub-footer a { color: #e2d9e0; } #footer a:hover, #sub-footer a:hover, #footer a:focus, #sub-footer a:focus { color: #fff; } #footer { background: #917d8d; } #footer .wrap { max-width: 820px; margin: 0 auto; padding: 37px 2.43902439% 30px; background-color: #917d8d; /*for opera*/} #footer h3 { line-height:1.2em; font-size:2em; margin-bottom:.75em } #footer ul { margin-bottom: 0; } #footer ul li { float: left; list-style: none; } #footer ul li h2 { text-align: center; padding-bottom: 2em; background: url(/a/screen/border-footer-title.gif) no-repeat 50% bottom; } #footer ul li h3 a { text-shadow: none; line-height:1} #footer ul li.case-study { width: 48.7804878%; margin: 0 2.4390244% 0 0; } /* 400/820 = .487804878 */ #footer ul li.case-study img { float: left; margin: 0 5% 3% 0; } #footer ul li.case-study p { font-size: 1.2em; } #footer ul li.events { width: 26.8292683%; margin: 0 2.4390244% 0 0 ; text-align: center; } /* 220/820 = .268292683 */ #footer ul li.events img { margin: 0 auto 5%; } #footer ul li.pubs { width: 19.5121951%; margin: 0; } /* 160/820 = .195121951 */ #footer ul li.pubs img { padding-left: 10px; } #footer a img, #footer a img { opacity: 0.85; filter: alpha(opacity=85); } #footer a:hover img, #footer a:focus img { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 200ms ease-in; /* Saf3.2+, Chrome */ -moz-transition: opacity 200ms ease-in; /* FF3.7+ */ -o-transition: opacity 200ms ease-in; /* Opera 10.5+ */ transition: opacity 200ms ease-in; /* futureproofing */ } #footer img { max-width: 100%; } #footer p { color: #fbeacb; line-height: 1.5; font-size: 1.1em; } #sub-footer { background: #7d6a79; overflow: hidden; } #sub-footer .wrap { max-width: 820px; margin: 0 auto; padding: 4em 2.43902439% 1.5em; box-shadow: 0 0 15px rgba(0,0,0,.4); -moz-box-shadow: 0 0 15px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 24px rgba(0,0,0,.4); background-color: #7d6a79; /*for opera*/ } #sub-footer div.footer-extra { width: 34.146341463%; float: left; } /* 280/820 */ #sub-footer h2 { margin: 0 0 1em; padding:0 0 0.5em; background: url(/a/screen/border-footer-title.gif) repeat-x 0 bottom} #sub-footer div.footer-extra p { color: #fbeacb; font-size: 1.25em; } #sub-footer dl { float: left; width: 19.5121951%; margin: 0 0 0 2.4390244%; font-family: 'FranklinGothicBook'; color: #fbeacb; font-size: 1.1em; } /* 160/820 & 20/160 */ #sub-footer dt { font-family: 'FranklinGothicMed'; margin: 0 0 .3em 0; } #sub-footer dd { margin: 0 0 .3em 0; } p.copyright { padding: 20px 2.5% 0; width: 95%; margin: 0 auto; font-family: 'FranklinGothicBook'; color: #fbeacb; text-align: center; text-transform: uppercase; font-size: 1.2em; letter-spacing: 0.095em; background-image: -moz-linear-gradient(31% 25% 90deg,#43373F, #43373F, #363238 100%); background-image: -webkit-gradient(linear, 0% 0%, 0% 28%, from(#43373F), to(#43373F), color-stop(0,#363238)); } p.copyright a { text-decoration: none; } /*------------------------------------------- Forms -------------------------------------------*/ form { margin-bottom: 1.5em; } label { display: block; margin-bottom: 7px; color: #695865; font-size: 1.2em; line-height: 1.1; } .inline label { display: inline; margin-left: 5px; margin-bottom:0; font-family: 'FranklinGothicBook'; text-transform: none; font-size: 1.05em; } ul.inline { width: 300px; margin: 0 auto 1.5em; background-image: url(/a/screen/dotted-border.gif); text-align: left; } ul.inline li { padding: 0.9em 0; background: url(/a/screen/dotted-border.gif) repeat-x 0 bottom; border-bottom: none; list-style-type: none; } p.inline { max-width: 50%; margin: 0 auto 1.5em; background: url(/a/screen/dotted-border.gif) repeat-x 0 bottom, url(/a/screen/dotted-border.gif) repeat-x 0 0; padding:0.9em 0; } input, textarea { color: #666; font: normal 15px 'ff-meta-serif-web-pro-1','ff-meta-serif-web-pro-2', Georgia, 'Times New Roman', serif; } textarea { width: 95%; border: 8px solid #847380; } input:focus { color: #333; } /*------------------------------------------- Sub -------------------------------------------*/ #sub ol { margin: 12px 0 30px 3px; list-style: none; font-family: 'FranklinGothicBook'; } #sub ol li { clear: both; margin: 0 0 10px 0; font-size: 1.2em} #sub img { float: left; margin: 0 20px 20px 0; } #sub a { text-decoration:none; } #sub a span { text-decoration:underline; } #sub .tag-list a span { text-decoration:none; } #sub a strong { padding: 10px 0 3px 0; display: block; font-size: 1.166666667em; font-weight: normal; } #sub h3 { margin: 0; } #sub .article-author img { float: none; } #cat-cloud { margin: 12px 0 30px 3px; } #cat-cloud a { margin:0 3px 0 0; } #cat-cloud a:hover, #cat-cloud a:focus { text-decoration:underline; } /*------------------------------------------- Main -------------------------------------------*/ #main-alt h3 { margin-bottom: 20px; } #main img { max-width:100%; } .description { margin: 0 0 30px 180px; font-size: 1.5em; line-height: 1.2; font-family: 'FranklinGothicBook'; } .description em, .description strong { font-family: 'FranklinGothicMed'; font-style: normal; font-weight: normal; } .description p { color: #988a96; margin-bottom: 1em; } .description .meta { color: #666; font-size: .9em; } .articles, .topics { list-style: none; } .articles li { margin: 0; padding: 0 0 20px 0; clear: both; } .articles img { float: left; margin-left:-75px } .topics { margin-bottom: 3em; } .topics li { background:url("/a/screen/gw-border.gif") repeat-x left bottom; margin: 0 0 1.5em; } .topics li h4 span { font-size: .65em; text-transform: none; color: #988a96; text-shadow: none; letter-spacing: .02em; } .full { background: url(/a/screen/gw-border.gif) repeat-x 0 0; } .full li { padding: 40px 0 0 0; width: 100%; float: left; position:relative; } .articles .highlight { background: url(/a/screen/gw-border.gif) repeat-x left bottom; padding-bottom: 20px; } .articles .highlight img { width: 43.75%; } .articles .highlight .aside img { width: auto; } .full li img { margin: 0 20px 20px 0; } .highlight .latest { margin-bottom: 10px; } .articles .highlight h3 { font-size: 3.6em; } .articles .highlight h3 a { line-height: 1; } .articles h3 { margin: 0 0 10px 0; } .articles h3 a:focus { outline: none; } .list { background: url(/a/screen/gw-border.gif) repeat-x left bottom; padding-bottom: 20px; } .post { float: left; width: 80%; margin-right: 0; padding-right: 20%; } .full .aside { width: 18%; position: absolute; top: 40px; right: 0; } #main ol, #main ul{ background: url(/a/screen/gw-border.gif) repeat-x 0 0; margin: .5em 0 2.5em 1.5em; } #main ol li { font-size: 1.33em; line-height:1.6; list-style-position: inside; padding: 1.3em 0; margin: 0; background: url(/a/screen/gw-border.gif) repeat-x 0 bottom; } #main ul li { font-size: 1.33em; line-height:1.6; list-style: none; margin: 0; padding: 1em 0 1em 0; border-bottom: 1px solid #c2c0c0; border-top: 1px solid #fff; position: relative;} #main ul li li, #main ul li li * { font-size: 1em; border-bottom: none; padding-bottom: 0;} #main ul ul, #main ul ul * { margin-bottom: 0;} #main ul li:before { content: url(/a/screen/bullet.gif); position: absolute; left: -1.65em; } #main ul li li:before { content: ""; } #main ul li li { list-style: disc; border-top: none; } #main ul ul { background: none; } #main ul li:first-child { border-top: none; } #main .convo li { padding: .75em; background: #f0f0f0 ; border: 1px solid #ddd; border-width:0 0 1px 0; } #main .convo li:before { content: ""; } #main .convo li:nth-child(2n+1) { background: #f9f9f9;} #author-page #sub .aside { float:left; margin:15px 10px 20px 0;} #main-sub-wrap { padding-top:20px; margin-top:10px; background: url(/a/screen/gw-border.gif) repeat-x 0 0; } #search-results #main-sub-wrap { margin-top:0; background:none; } .no-author {font-family:'FranklinGothicBook'; margin:15px 0;} .gist table {margin: 0; width: 100%;} /*------------------------------------------- Pagination -------------------------------------------*/ .pagination { clear: both; position: relative; margin:0 0 40px; padding-top: 20px; list-style: none; font-family: 'FranklinGothicMed'; width: 100%; height: 5.5em; text-align: center; color: #999; font-size: 1.4em; } .pagination a, .pagination b { display: block; padding: 0 .5em; color: #999; text-decoration: none; line-height: 1.75em; } .pagination li { display: inline-block; margin: 0; line-height: 1.75em; padding: 1.875em 0; margin-left: -.25em; } .pagination li a:hover { color: #d86327; text-decoration: underline; } .pagination .on b { background: #999; color: #fff; border-radius: 1em; -moz-border-radius: 1em; } .pagination .on b:hover, .pagination .on b:focus { color: #fff; text-decoration: none; } .pagination .prev, .pagination .next { position: absolute; top: 20px; left: 0; width: 75px; height: 75px; padding:0; } #next-page.fixed, #prev-page.fixed { position:fixed; top:10px; margin-left:0px} #next-page.fixed a, #prev-page.fixed a { position:relative; top:auto; } .n-wrap, .p-wrap { top:auto; bottom:200px; position:absolute; left:0; margin-top: 10px; } .n-wrap { right:-180px; left:auto; } .pagination .next { right: 0; left: auto; } .pagination .prev a, .pagination .next a, .pagination em { width: 75px; height: 75px; padding: 0; background-color: #988a96; background-position: 45% 50%; border-radius:38px; -moz-border-radius:38px; } .pagination .prev a:hover, .pagination .prev a:focus, .pagination .next a:hover, .pagination .next a:focus { background-color: #614f5d; } .pagination .next a, .pagination .next em { background-image: url(/a/screen/arrow-right-big.gif); text-align:left; } .pagination .prev a, .pagination .prev em { background-image: url(/a/screen/arrow-left-big.gif); } .pagination em { background-color: #d7d6d6; } div.prev a, div.next a { display: block; padding-top: 96px; width: 140px; position: absolute; top: 0; font-size: 1.2em; text-decoration: none; background-image: url(/a/screen/sprite-pag-arrows.gif); background-repeat: no-repeat; background-position: 0 -500px; } div.prev a { left: 0; } div.next a { right: 0; text-align: right; background-position: 100% -1500px; } div.prev a:hover, div.prev a:focus { background-position: 0 0; } div.next a:hover, div.next a:focus { background-position: 100% -1000px; } div.prev a strong, div.next a strong { display: block; margin-bottom: 12px; background: url(/a/screen/gw-border.gif) repeat-x 0 0; padding-top: 10px; font-size: 0.85em; letter-spacing: 0.27em; color: #988a96; } div.prev a:hover strong, div.prev a:focus strong, div.next a:hover strong, div.next a:focus strong { color: #614f5d; } /*------------------------------------------- Responses -------------------------------------------*/ #responses { clear: both; margin-top: 40px; padding-top: 60px; background: url(/a/screen/responses-ornament.gif) no-repeat center 0; text-align: center; } #responses form { margin-bottom: 10px; padding-bottom: 10px; } #responses h4 { margin: 0 0 10px; padding-top:20px } #blog-response h4 { background: url(/a/screen/gw-border.gif) repeat-x 0 0; } #responses label { font-family: 'FranklinGothicBook'} #responses p.response-count { margin-bottom: 0em; font-family: 'FranklinGothicBook'; font-size: 1.3em; text-transform: uppercase; background: url(/a/screen/gw-border.gif) repeat-x 0 91%; } #responses p.response-meta { margin-bottom: 2em; padding-bottom: 1em; font-size:1.25em; background: url(/a/screen/gw-border.gif) repeat-x 0 bottom;} #responses p.response-meta span.rt-wrap {display:block; font-size:.9em;} #responses p.response-count strong { display: block; line-height: .85; margin-bottom: 3px; font-family: 'FranklinGothicMed'; color: #847380; font-size: 5em; font-weight:normal; } #responses p.response-count span { padding: 3px 5px; background-color: #edecec; color: #83727f; } #responses p { font-family: 'FranklinGothicBook'; font-size: 1.25em; color: #695865; } #responses p.submit { margin: 2em auto 2.5em; font-size: .95em; } #responses a.more, #responses a.return, #responses .out { font-family: 'FranklinGothicBook'; font-size: 1em; font-weight:normal; text-transform:none; letter-spacing:0; text-decoration:underline;} #responses .out { font-size:.8em; } #responses textarea { border-bottom-width: 2.5em; padding: 3px; height:3em;} #responses textarea:focus { outline: none; } #responses p.char-count { margin-top: -3.8em; color: #fff; } #responses ul.inline { margin: 0 auto 1.5em; background-image: url(/a/screen/dotted-border.gif); text-align: left; } #responses ul.inline li { padding: 0.9em 0; background: url(/a/screen/dotted-border.gif) repeat-x 0 bottom; border-bottom: none; } #responses p.inline { margin: 0 auto 1.5em; background: url(/a/screen/dotted-border.gif) repeat-x 0 bottom, url(/a/screen/dotted-border.gif) repeat-x 0 0; padding:0.9em 0; } #responses input.url-entry { width: 90%; border: 7px solid #847380; padding: 7px; -moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.1); -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,.1); box-shadow: inset 0 2px 3px rgba(0,0,0,.1); } h4.respond-toggle { font-size: 1.25em; background: url(/a/screen/gw-border.gif) repeat-x 0 bottom; padding: 5px 0 13px; margin-bottom: 5px;} h4.respond-toggle em { text-transform: none; margin: 0 5px; } #main #responses ol, #main #responses ul { margin:0 0 1.5em; } #responses ol { text-align: left; list-style: none; background-position: 0 bottom; margin: 0 0 2em 0; padding-bottom: 30px; } #responses ol li { background-image: none; margin: 20px 0 0 0; padding: 0 0 5px 65px; } #responses ol li.blogresponse { background: #f9f9f9; padding: 5px 10px 15px 75px; margin-left: -10px; border-top: 1px solid #c2c0c0; border-bottom: 1px solid #c2c0c0;} #responses ol li p.response-record { margin-bottom:0; } #responses ol li.blogresponse p.response-record { margin-bottom:.75em; } #responses ol li.blogresponse p.comment-time { margin-top:.1em; } #responses ol li p {color: #8d7857; font-size: 1.2em; line-height: 1.2; } #responses ol li img { margin: 5px 0 0 -65px; float: left; } #responses ol li strong { font-family: 'FranklinGothicMed'; font-weight: normal; font-size: 1.15em; } #responses ol li .post-more { text-transform: uppercase; font-size: .75em; margin: 0 0 0 5px; font-family: "FranklinGothicMed"; } #responses p.comment-time { margin: -1.5em 0 0; font-size:.9em; } #responses p.comment-time em { color:#999; letter-spacing:0;} #responses ol li p.comment-time a { text-transform: uppercase; color: #a39d92; } #responses ol li p.comment-time a:hover, #responses ol li p.comment-time a:focus { color: #b44326; } #responses ol li.alt { position: relative; background: url(/a/screen/hc-comment-foot.gif) no-repeat 90% bottom; margin: 20px 0 -2px; padding: 0 0 26px; } #responses ol li.alt img { margin: 0 -65px 0 0; float: right; } #responses ol li.alt div { background: url(/a/screen/comment-bg.gif) repeat 0 0; padding: 15px 75px 1.5em 20px; margin-bottom: -2px; -moz-box-shadow: inset 0 2px 3px rgba(0,0,0,.1); -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,.1); box-shadow: inset 0 2px 3px rgba(0,0,0,.1); } input.share { background-image: url(/a/widgets/button-share-alt.gif); background-position: 0 -35px; width: 82px; height: 35px; border: none; margin: -6px 3px 0 0; cursor: pointer; display: inline-block; } input.input-reset { background: none; border: none; cursor: pointer; color: #bc6a31; font-family: 'FranklinGothicBook'; font-style: normal; font-size: 1.4em; text-decoration:underline;} input.input-reset:hover, input.input-reset:focus { color: #b44326; } input.authorize-connection { background-image: url(/a/widgets/button-authorize-and-tweet.gif); width: 170px; height: 35px; border: none; cursor: pointer; margin: 0 auto; display: inline-block; } input.tweet-my-comment { background-image: url(/a/widgets/button-tweet-alt.gif); background-position: 0 -35px; width: 158px; height: 35px; border: none; cursor: pointer; display: inline-block; margin: 0 auto; } a.retweet-this-article { background-image: url(/a/widgets/button-retweet-this-article.gif); width: 167px; height: 35px; border: none; cursor: pointer; margin: 0 auto; } a.respond-now { background-image: url(/a/widgets/button-respond-now.gif); width: 130px; height: 35px; border: none; cursor: pointer; margin: 0 auto; } input.authorize-connection:hover, input.authorize-connection:focus, a.retweet-this-article:hover, a.retweet-this-article:focus, a.respond-now:hover, a.respond-now:focus { background-position: 0 -35px; } input.share:hover, input.share:focus, input.authorize-connection:active, input.tweet-my-comment:hover, input.tweet-my-comment:focus, a.retweet-this-article:active, a.respond-now:active { background-position: 0 -70px; } input.share:active, input.share:active input.tweet-my-comment:active { background-position: 0 -105px; } input.disabled.tweet-my-comment, input.disabled.share { background-position: 0 0; cursor: auto;} input.disabled.tweet-my-comment:hover, input.disabled.tweet-my-comment:focus, input.disabled.share:hover, input.disabled.share:focus { cursor: auto; background-position: 0 0;} #responses p.confirmation { color: #666; margin-top: 15px; } p.confirmation strong { display: block; font-weight: normal; font-size: 1.45em; font-family: 'FranklinGothicMed'; letter-spacing: .035em; } .help-popup a { display: none } .help-popup .popup-body { display: block; } #responses .popup-body p { font-size: 1.1em; line-height: 1.2; } .share-popup, .share-popup ul a { display: block; } .share-popup ul:before { content: "SHARE: "; color: #666; font-size: 1.15em; float: left; line-height: 1.75em; margin: 0 .5em 0 .25em; } p.alert, #responses p.alert { color: #dc4b4b; font-family: 'FranklinGothicMed'; } em.alert { display: block; color: #dc4b4b; padding: 0 5%; } p.greeting, #responses p.greeting { color: #5ca336; font-size: 1.6em; font-family: 'FranklinGothicMed'; } p.greeting + p.alert { margin-top: -1.8em; } #blog-response label { display: inline-block; vertical-align: top; line-height: 1.9; } #responses #default-state { background: none; margin-bottom: 0; padding-bottom: 0;} .respond-toggle-head { padding: 4px 0 1px; background: url(/a/screen/gw-border.gif) repeat-x 0 bottom; margin-bottom: 8px;} .respond-toggle-head h4 { display: inline-block; } .respond-toggle-head em { margin: 0 10px; font-size: 1.3em; color: #695865; } #responses .respond-toggle-head h4.on { background: url(/a/screen/comment-carrot.gif) center bottom no-repeat; padding-bottom: 14px; color: #847380; } #main #respond-toggler { clear:both; width:100%; border: none; background: url(/a/screen/vertical-divider.gif) repeat-y 50% 0; } #main #respond-toggler li { float: left; background: none; width: 50%; border: none; padding: 0; text-align: center; font-family:'FranklinGothicMed'; font-size: 1.8em; margin-top: 9px; } #main #respond-toggler li:before { content: ""; margin: 0; } #main #respond-toggler li.on { color: #847380; position: relative; background: url(/a/screen/comment-carrot.gif) center bottom no-repeat; padding-bottom: 14px; } #main #respond-toggler li.on span.rt-wrap { display: block; font-size: .75em; margin-top: -.5em; font-family:'FranklinGothicBook'; } #main #respond-toggler li.on a.close { background: url(/a/widgets/x-purple.gif); height: 9px; width: 9px; position: absolute; right: 10px; top: 1px;} /*------------------------------------------- General Styles -------------------------------------------*/ h2.alpha { clear: both; margin: 0 0 20px 180px; } #home h2.alpha a {line-height:1;} /*h2.alpha + p { margin-top: -17px; }*/ #main-alt h3, #sub h3 { padding: 0 0 .833333333em; background: url(/a/screen/gw-border.gif) repeat-x left bottom; } #sub h3 { padding-bottom:.833333333em; } #main-alt h4 { margin-bottom: .5em; } #main-alt h4 + p { margin-top: -.5em; } #main-alt .meta, #articles-nav-list .meta { margin: 0 0 .83em 0; font-size: 1.2em; font-family: 'FranklinGothicBook'; color: #666; } #main-alt .meta a:hover, #main-alt .meta a:focus { color: #b44326; } .article-meta { background: url(/a/screen/gw-border.gif) repeat-x 0 0, url(/a/screen/gw-border.gif) repeat-x 0 bottom; padding: 1.8em 0 1.25em 22.004889976%; font-size: 1.2em; margin-bottom: 4em; font-family: 'FranklinGothicBook'; min-height: 20px; } .article-meta dl { margin: 0 0 .5em 0; font-size: .95em; } .article-meta dd, div.article-meta dt { float: left; } .article-meta dt { color: #666; font-size:1.1em; } .article-meta dd { text-transform: uppercase; margin: 0 0 .2em .5em; font-size: 1.15em; letter-spacing: 0.025em; } .article-meta dd a { padding-right: 3px; } .article-meta dd:after { content: " /"; color: #666; } .article-meta dd:last-child:after { content: ""; } a.share-button { display: none; height: 0;} .share-popup p { color: #666; float: left; font-size: 1.05em; margin: 0; } .share-popup a { padding: 0 10px; font-size: 1.1em; text-transform: uppercase; letter-spacing: 0.025em; } .share-popup ul { padding: 10px 0; margin: 0; clear: left; margin:0 0 0 -2px; } .share-popup ul li { float: left; list-style: none; margin: 0 .5em 0 0; } .share-popup ul li a { padding: 0; margin: 2px; height: 16px; width: 16px; } .share-popup ul li a:hover { border: 2px solid #988A96; margin: 0; -moz-border-radius: 3px; border-radius: 3px; } .share-popup ul li .twitter { background-image: url(/a/widgets/icon-twitter.gif); } .share-popup ul li .fb { background-image: url(/a/widgets/icon-fb.gif); } .share-popup ul li .delicious { background-image: url(/a/widgets/icon-delicious.gif); } .share-popup ul li .digg { background-image: url(/a/widgets/icon-digg.gif); } .share-popup ul li .instapaper { background-image: url(/a/widgets/icon-instapaper.gif); } .record { clear: both; margin: 0 0 8px 180px; } .record p, .record li { font-family: 'FranklinGothicBook'; font-size: 1.4em; color: #666; margin: 0; } .caption { font-style: italic; } .caption a { color: #fff; } p.subhead { margin: 0 0 24px 180px; font-size: 2.8em; color: #988a96; letter-spacing: 0.015em; line-height: 1.05; } .search-desc, .alt-desc {color:#988a96; padding-right:25px} .intro { max-width: 460px; margin-right: 0; } .intro p { font-size: 1.9em; } .fancy p:first-child:first-letter, .home-intro.fancy > p:first-letter { font-size: 4em; line-height: .7; margin: -0.075em .15em 0 0; float: left; color: #634c5c; display: inline-block; } .inset { width: 360px; float: left; margin: 40px 40px 40px -180px; position: relative; z-index: 1; } figure { margin: 0 0 1.5em; display: block; } .inset img, figure img { margin-bottom: 0; } .inset .caption, figcaption p { font-size: .8em; background-color: #82717e; padding: 15px; color: #fff; display: block; } figcaption p { font-size: 12px; margin: 0; line-height: 1; } .inset .caption em, figcaption em { font-style: normal; font-family: 'FranklinGothicBook'; } figcaption code { color: #fff; } .aside p { margin: 0; font-size: 1.2em; line-height: 1.8; } .aside img, .full .aside img, .articles .highlight .aside img { margin: 0 0 15px 0; float: none; } .aside li { margin: 0 0 2px 0; padding-bottom: 8px;background: url(/a/screen/gw-border.gif) repeat-x 0 bottom; list-style: none; font-size: 1.2em; } .aside li.title { padding-bottom:10px; } .aside li.author { margin-bottom: 0; padding-bottom:2px; background-image: none; color: #695865; font-size: 1.2em; } .aside li.rss a.author-feed { background: url(/a/screen/icon-rss.gif) no-repeat 100% 2px; float:right; width:14px; height:16px; } .aside li.rss a.author-feed:hover, .aside li.rss a.author-feed:focus { background-position: 100% -398px; } #author-page .aside li.rss a.author-feed { float: none;} .aside li.username { padding-bottom:2px; background-image: none; } .other-authors li a:focus { outline: none;} p.back { margin-top: 70px; text-align: center; text-transform: uppercase; font-size: 1.25em; font-family: 'FranklinGothicBook'; } .record li { list-style-type:none; margin:0;padding:0; display:inline;} .record li:before { content:"/ "; padding-left: 4px; } #home .record .date-entry:after { content:" /"; padding-right: 1px; } .record li:first-child:before { content:""; padding-left: 0; } .instructions { font-style: italic; margin-bottom: 3.5em; } .lib-answers, .lib-results { clear: both; } .lib-results { display: none; } .lib-answers label { display: inline; } .lib-answers input { width: 50%; } #main .lib-results p { line-height: 2.3; } .lib-results input { background: none; border: none; border-bottom: 1px solid #000; font-family: "Comic Sans MS", Georgia, serif; font-size: 13px; text-align: center; } a.generate-libs { margin-top: 40px; background-image: url(/a/widgets/create-your-lib.gif); background-position: 0 -35px; width: 140px; height: 35px; } a.generate-libs:hover, a.generate-libs:focus { background-position: 0 -70px; } a.generate-libs:active { background-position: 0 -105px; } .footnote { display: block; margin-bottom: 5px; font-size: 1.4em; font-style: italic; } a.inline-footnote { text-decoration: none; } .notes { background: url(/a/screen/gw-border.gif) repeat-x 0 0; padding: 1em 0; } .notes p { margin: 0; font-size: 1.2em; } .notes p a { display: inline; } /*------------------------------------------- Home -------------------------------------------*/ .bit {clear:both; font-size:1.4em; font-family:'FranklinGothicBook'; text-transform:uppercase; max-width:360px; margin: 0 auto; padding: 0 0 48px 0; text-align:center; color:#666; background: url(/a/screen/responses-ornament.gif) no-repeat 50% bottom;} .bit .amp { font-size: 1.285714286em; color:#988a96;} .bit span { display:block; } #home .article-image { width:360px; margin:20px auto; opacity:.95; padding:10px; filter: alpha(opacity=95); -webkit-transition: opacity 75ms ease-in; /* Saf3.2+, Chrome */ -moz-transition: opacity 75ms ease-in; /* FF3.7+ */ -o-transition: opacity 75ms ease-in; /* Opera 10.5+ */ transition: opacity 75ms ease-in; /* futureproofing */ } #home .article-image:hover { opacity:1; filter: alpha(opacity=100); padding:0; border:10px solid #F2F1F2; } #home .record {margin:40px 0 15px; text-align:center;} #home h2.alpha, #home .subhead {margin-left:0; text-align:center;} .home-intro { background: url(/a/screen/gw-border.gif) repeat-x 0 bottom; font-size:1.6em; padding: 10px 0 40px 0;} .home-intro p { font-size:1em; margin-bottom:0; } .home-intro p a.read { font-size: .666666667em; font-family: 'FranklinGothicBook'; } .home-intro h3, .home-intro strong.intro-subhead, strong.intro-subhead { font-size:1.4em; margin:.5em 0 .4em;} p + strong.intro-subhead { margin-top: -.5em; } .home-intro .aside { font-size: .666666667em; width:33.333333%; } .home-intro .aside img { float: left; margin: 0 15px 0 0; } .home-intro .aside a { display: block; } .home-sub-wrap { width: 100%; padding-top: 2%;} .home-sub { width:32.35%; float:left; position: relative; margin-right: 1.47%;} .home-sub-wrap .last { margin-right: 0; } .home-sub h2 {font-size:1.8em; width: 92%; margin: 6.8% 0 1%; } .home-sub img { max-width: 100%; opacity:.95; filter: alpha(opacity=95); -webkit-transition: opacity 75ms ease-in; /* Saf3.2+, Chrome */ -moz-transition: opacity 75ms ease-in; /* FF3.7+ */ -o-transition: opacity 75ms ease-in; /* Opera 10.5+ */ transition: opacity 75ms ease-in; /* futureproofing */ } .home-sub img:hover { opacity:1; filter: alpha(opacity=100); } .home-sub p { font-size:1.2em; font-family:'FranklinGothicBook'; } .home-sub p a { display: block; } #home .articles.full { background:none !important;} #home .articles.full > li { background: url(/a/screen/gw-border.gif) repeat-x 0 bottom; padding-bottom:10px;} /*------------------------------------------- Typography -------------------------------------------*/ h1 { font-size: 5.5em; } h2, .alpha { font-size: 4.5em; color: #634c5c; letter-spacing: -.035em; text-shadow: 0 1px 0 #fff; margin-bottom: 0; } h3, strong.intro-subhead { font-size: 2.0em; color: #4e454c; text-shadow: 0 1px 0 #fff; letter-spacing: -.025em } h4 { font-family: 'FranklinGothicMed'; font-size: 1.8em; color: #4e454c; text-shadow: 0 1px 0 #fff; letter-spacing: -.025em } h5 { font-family:'FranklinGothicMed'; font-size: 1.3em; color: #4e454c; letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 1px 0 #fff; } h6 { font-size: 1.2em; color: #604e5c; letter-spacing: .035em; } .beta { font-size: 3.6em; } .gamma { font-family: 'FranklinGothicMed'; font-size: 1.9em; color: #fff; letter-spacing: -0.01em; text-shadow: none; margin-bottom: .5em; } .delta, .post h3 { font-size: 2.4em; } .epsilon { font-size: 1.5em; color: #fbeacb; letter-spacing: .04em; text-shadow: none; } .zeta { font-size: 1.2em; color: #695865; text-transform: uppercase; letter-spacing: .085em; font-weight: normal; } .eta { font-size: 1em; color: #fbeacb; text-transform: uppercase; letter-spacing: .2em; text-shadow: none; } strong.intro-subhead { display: block; font-weight: normal;} .question, .thankyou { font-family: 'FranklinGothicMed'; line-height: 1.4; font-size: 1.6em; margin-top: 2em; padding-top: 2em; text-shadow: 0 1px 0 #fff; letter-spacing: -.025em; background: url(/a/screen/gw-border.gif) repeat-x left top; } .thankyou { border-top:none; background: url(/a/screen/gw-border.gif) repeat-x left bottom; padding-top:0; padding-bottom: 1em; margin-bottom: 1em; margin-top:1em; } h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0 0 1em 0; line-height: 1.1; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; } h1 a:hover, h1 a:focus, h2 a:hover, h2 a:focus, h3 a:hover, h3 a:focus, h4 a:hover, h4 a:focus, h5 a:hover, h5 a:focus, h6 a:hover, h6 a:focus { text-decoration: none; } /* Let's Put all the Clarendons in one spot */ h2, .alpha, h6, .beta, .delta, .post h3, .epsilon, .zeta, .eta, th, #sub a strong, .topics li h4 span, div.prev a, div.next a, .fancy p:first-child:first-letter, .home-intro.fancy > p:first-letter, .aside li.author, .aside li.username, #articles-nav-list strong, #topics-nav-list ol { font-family:'ClarendonFSLight'; } /* Let's Put all the Jensons in one spot */ p.subhead, .bit .amp { font-style:italic; font-family: "adobe-jenson-pro-1","adobe-jenson-pro-2","Times New Roman",Georgia,serif;} h3, strong.intro-subhead { font-family:'FranklinGothicMed';} @font-face { font-family: 'ClarendonFSMedium'; src: url('/a/f/Clarendon-Medium-webfont.eot'); src: local('☺'), url('/a/f/Clarendon-Medium-webfont.woff') format('woff'), url('/a/f/Clarendon-Medium-webfont.ttf') format('truetype'), url('/a/f/Clarendon-Medium-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'ClarendonFSLight'; src: url('/a/f/Clarendon-Light-webfont.eot'); src: local('☺'), url('/a/f/Clarendon-Light-webfont.woff') format('woff'), url('/a/f/Clarendon-Light-webfont.ttf') format('truetype'), url('/a/f/Clarendon-Light-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FranklinGothicBook'; src: url('/a/f/FranklinGothic-Book-webfont.eot'); src: local('☺'), url('/a/f/FranklinGothic-Book-webfont.woff') format('woff'), url('/a/f/FranklinGothic-Book-webfont.ttf') format('truetype'), url('/a/f/FranklinGothic-Book-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FranklinGothicMed'; src: url('/a/f/FranklinGothic-Med-webfont.eot'); src: local('☺'), url('/a/f/FranklinGothic-Med-webfont.woff') format('woff'), url('/a/f/FranklinGothic-Med-webfont.ttf') format('truetype'), url('/a/f/FranklinGothic-Med-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'JensonItalic'; src: url('/a/f/jensonrecutitalic-webfont.eot'); src: local('☺'), url('/a/f/jensonrecutitalic-webfont.woff') format('woff'), url('/a/f/jensonrecutitalic-webfont.ttf') format('truetype'), url('/a/f/jensonrecutitalic-webfont.svg#webfontHzlE0Bqp') format('svg'); font-weight: normal; font-style: normal; } */ /*------------------------------------------- Media Query Variations -------------------------------------------*/ @media screen and (min-width:900px) { #content .wrap { border: 1px solid #c2c0c0; border-width: 0 1px; box-shadow: 0 0 15px rgba(122,122,122,.4); -moz-box-shadow: 0 0 15px rgba(122,122,122,.4); -webkit-box-shadow: 0 0 24px rgba(122,122,122,.4); } #footer .wrap { box-shadow: 0 0 15px rgba(0,0,0,.4); -moz-box-shadow: 0 0 15px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 24px rgba(0,0,0,.4); } #content { background: url(/a/screen/bg-noise.png); } } @media screen and (max-width: 785px) { .inset { float: left; display: block; margin: 5.0955414% 5.0955414% 5.0955414% 0px; width: 50%; } .inset img { width: 100%; } .aside.article-author { float:none; width: auto; margin: 0 1.2224939% 30px; padding-left: 1.2224939%; padding-bottom: 5px; background: url(/a/screen/gw-border.gif) repeat-x 0 bottom} .aside.article-author img, #content .share-popup span.close, .share-popup p, .share-popup a, #content .share .share-button { display: none; } .aside.article-author li.author, .aside.article-author li.username { font-family: 'FranklinGothicBook'; font-size: 1.3em; } .aside.article-author .author:before { content:"ARTICLE BY: "; color: #666; } .aside.article-author li { display: inline; background: none; } .aside.article-author li.title { font-size: 1.3em} .aside.article-author li.bio, .aside.article-author li.rss, .aside.article-author li.office { display: none; } .aside.article-author li:before { content: " / "; color: #666; } .article-meta { padding: 20px 1.2224939% 0 1.2224939%; margin: 0 1.2224939%; background: url(/a/screen/gw-border.gif) repeat-x 0 0; border-bottom:none } #content .article-meta dl { margin-left: 0; width: 100%; } .article-meta dt, .article-meta dd {display:none; } .article-meta dd.first {display: block; margin: 0; width: 75%; } .article-meta .share-popup[style] { display:block !important; } .article-meta .responses, .article-meta p { display:block; margin-right:5px; clear:both; padding-left:0;} .article-meta dd a { border:none } .article-meta dd.first:before { content: "Topic: "; color: #666; } .articles.full .post { width: 100%; padding-right:0} .articles.full .aside { position: relative; float: none; top: 0; margin: 0 0 5px 0; width: 100%; } .articles .highlight img { width: 160px; } .articles.full .aside img { display: none; } .articles.full .aside p { display: inline} .share-popup { border: none !important; } #main { padding-right: 0; } div.prev a, div.next a, .p-wrap, .n-wrap, .p-wrap #prev-page.fixed, .n-wrap #next-page.fixed { position: relative; } div.prev, .p-wrap { float: left; margin-bottom:20px; } div.next, .n-wrap { float: right; right:0; margin-bottom:20px;} div.prev, .p-wrap, div.next, .n-wrap { bottom: 0; } .back { clear: both; width: 100%; float: left; } #footer ul li.case-study { width: 40%; margin: 0 5% 0 0; } #footer ul li.events { margin: 0 5% 0 0; } #footer .case-study h3 { clear: both; } #sub-footer div.footer-extra { width: 100%; margin-bottom: 15px; } #sub-footer dl { width: 30%; margin: 0; padding-right: 3%; } .intro, #main { padding: 0 2.4449878%; margin-left: 0; max-width: none} #search { margin: 40px 0 112px 2.4449878%; } .p.subhead, .record, .description, h2.alpha, p.subhead { margin-left: 2.4449878%; } #main-sub-wrap { width: 97.5550122%; margin-left:2.3916293% } #content .wrap { padding: 0 10px; } .fancy p:first-child:first-letter, .home-intro.fancy > p:first-letter { font-family: Georgia, 'Times New Roman', serif; } .help-popup a { display: none !important } #sites .wrap { height:auto; } /* Type Size Mo Bigger */ .intro, #main, #main-alt, .articles, #sub, .p-wrap, .n-wrap { font-size:1.2em; } } @media screen and (max-width: 640px) { #footer ul li.case-study { width: 100%; margin-bottom: 15px; } #footer ul li.case-study h3 { clear: none; } #footer ul li.events { width: 60%; margin-bottom: 15px; } #footer ul li.pubs { width: 30%; margin-bottom: 15px; } #header #main-nav { right: 102px; left: auto; border-left: 1px solid #72636E; border-right: 0px solid rgba(255,255,255,.12); } #header #main-nav li { margin-left: 0; width: auto; overflow:hidden; position:relative; border-right: 1px solid #72636e; } #header ul#main-nav li a { border-right: 1px solid #43373f; } #header #main-nav #topics-nav { margin-left: 0; } #header #main-nav #topics-nav a { width: 72px; } #header #main-nav #articles-nav a { width: 86px; background-position: -36px 0; border-left: 1px solid #43373F; } #header #articles-nav a.nav-title, #header #topics-nav a.nav-title { font-size: 1.6em; text-indent: 0; text-align: center; border-left: 0px solid rgba(255,255,255,.12); } #header #articles-nav a.nav-title:after, #header #topics-nav a.nav-title:after { display: none; } #header ul#main-nav li#articles-nav a.nav-title:hover { background-position: -36px -56px; } #header ul#main-nav li#topics-nav a.nav-title:hover { background-position: -41px -56px; } #search { margin: 40px 0 62px 40px; } #search input { width: 180px; } #search button { background-image: url(/a/widgets/button-search-alt.gif); width: 33px; } .home-sub { float:left; clear: both; width: 100%; background: url(/a/screen/gw-border.gif) repeat-x left bottom; padding-bottom: 20px; } .home-sub img { float:left; width:50%; margin: 0 3% 3% 0; } .home-sub h2 { margin-bottom:0; } #home h2 { margin-bottom: 10px;} .home-intro { padding-top: 0px; } .home-intro .aside { margin:10px 0 30px 0; text-align:center; } #main ol, #main ul{ margin-left: 2.5em; } h2.alpha + p { margin-top: -7px; } #sites a.close { display: none; } } @media screen and (max-width: 505px) { html { -ms-text-size-adjust: none; -webkit-text-size-adjust: none; } #content .wrap { padding: 0 5px; } .inset, .home-sub img, .article-image, #home .aside img { display: none; } h2.alpha, .description, .record, #main-alt, .intro, #main, .aside.article-author, .article-meta, p.subhead, #main-sub-wrap { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } h2.alpha { font-size: 3.5em; } p.subhead { font-size: 2.25em; line-height: 1; } /*h1 { left: 5px; }*/ #main-alt h3 { margin: 5px 0 10px; } #sites li:before { content:"";} #sites ul { padding-bottom: .6em; } #sites li { display: block; float: none; padding: .6em 0; text-align: right; } #sites a.close { display: none; } #header #main-nav { right: 48px; left: auto; } #header .toggle { margin-right: 0; } #header .toggle a { width: 50px; height: 56px; background: url(/a/screen/menu-icon.png) center 0 no-repeat; } #header .toggle a:hover, #header .toggle a:focus { background-position: center -56px; background-color: #4e4049; } #footer { display: none; } .p-wrap, .n-wrap { width:45% } div.prev, div.next { width: 100%; } div.prev a, div.next a { width: 100%; background-image:none; padding-top:0; } .pagination { margin-bottom:0; } .pagination li { margin: 0 !important; display: block; float: left; line-height: 1.5; } .pagination li.next, .pagination li.prev { position: relative; width: auto; height: auto; top: auto } .pagination li.next *, .pagination li.prev * { background: none !important; text-indent: 0; height: auto; width: auto; padding: 0 .5em; line-height: 1.5 !important; } .pagination li em { font-family:'FranklinGothicBook'; font-style: normal; } .articles li { padding: 15px 0 0; } .articles .highlight h3, .articles h3 { font-size: 2.4em; margin-bottom: .15em; } .articles.full > li { background: url(/a/screen/gw-border.gif) repeat-x left bottom; padding-bottom: 20px; position: relative; } .articles.full .latest { clear: both } .articles.full img { width: 55px; margin: 0 10px 10px 0 } .articles.full .post { padding-right: 0; } .articles.full .post p { display: none; } .articles.full .post .aside p { display: inline; } #main-alt, #sub, #home .aside { float: none; width: 100%; } #search input { width: 120px; font-size: 1em } #responses form { margin-bottom:30px; } } @media screen and (max-width: 400px) { strong.hc-logo { position: absolute; top: -35px; z-index: 999; left: 25px; } h1 { position: absolute; top: 19px; left: 7px; } } /* image retina display */ @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2) { h1 a { background-image: url(/a/screen/logo/cognition-logo@2x.png); background-size: 96px 136.5px; height: 68px;} /*width: 128px; height:91px;*/ h1 a:hover, h1 a:focus { background-position: 0 -68.5px; } strong.hc-logo { top: -27px; } strong.hc-logo a { background-image: url(/a/screen/logo/hc-logo-small@2x.png); background-size: 52.5px 105px; height: 52.5px } strong.hc-logo a:hover, strong.hc-logo a:focus { background-position: 0 -52px; } #header .toggle a { width: 50px; height: 56px; background: url(/a/screen/menu-icon@2x.png) center 0 no-repeat; background-size: 22px 112px; } #header .toggle a:hover, #header .toggle a:focus { background-position: center -56px; background-color: #4e4049; } #articles-nav a.nav-title:after, #topics-nav a.nav-title:after { background-position: -14px 0; background-size: 41px 27px; } }