/* CSS Stylesheet created by Inayaili de León, for http://yaili.com v5 Year 2009 --------------------------------------- --------------------------------------- --- Table of Contents: --- --- --- --- =General --- --- =Layout --- --- =Links --- --- =Border Radius --- --- =Header --- --- =Type --- --- =Images --- --- =Lists --- --- =Boxes --- --------------------------------------- --------------------------------------- Colour Reference: #333333 Dark Grey Main text #666666 Lighter Grey Lighter text #EEEEEE Light Grey Backgrounds #B94481 Pink "View my work" button #b94481 Dark Pink "View my work" button hover */ @import url(reset.css); /* =General -------------------------------------------------------------- ------------------------------------------------------------------------*/ body { text-align:center; font-family:Candara, "Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#333333; height:100%; background-color:#ffffff; background-image:url(../images/bkg-bottom.gif); background-position:left bottom; background-repeat:repeat-x; /* For those who understand multiple backgrounds ---> */ background-image:url(../images/bkg-bottom.gif), url(../images/bkg-top.gif); background-position:bottom left, top left; background-repeat:repeat-x, repeat-x; } body#portfolio { height:3760px; } .clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; } /* ie.css */ /* =Layout --------------------------------------------------------------- ------------------------------------------------------------------------*/ #page { width:1030px; margin:auto; text-align:left; padding-top:40px; overflow:hidden; position:relative; } .js #home #page { padding-bottom:880px; } .no-js #home #page { padding-bottom:20px; } #portfolio #page { overflow:visible; } header, #intro { position:relative; margin-bottom:40px; clear:both; } #intro { padding:0 250px 0 30px; -webkit-column-count:2; -webkit-column-gap:20px; -moz-column-count:2; -moz-column-gap:20px; column-count:2; column-gap:20px; } #portfolio #intro { -webkit-column-count:1; -moz-column-count:1; } #twitter { padding:10px 20px; text-align:center; margin:auto; background:#eeeeee; margin-bottom:40px; } #graph-bio { position:relative; margin-bottom:40px; } #water { margin-bottom:40px; } div.col { width:333px; float:left; margin:0 15px 30px 0; } div.col:nth-of-type(2) { margin-top:45px; } div.col:nth-of-type(3) { margin-right:0; } .no-js div.col { width:auto; float:none; margin:0; } footer { position:fixed; right:10px; bottom:10px; display:inline; font-size:11px; } /* =Links ---------------------------------------------------------------- ------------------------------------------------------------------------*/ a { -webkit-transition:color 0.5s ease-out; } a:link, a:visited, header ul a:link, header ul a:visited, #peoplesay a:link, #peoplesay a:visited, #fancy_div a:link, #fancy_div a:visited, #intro a:link, #intro a:visited, #getintouch a:link, #getintouch a:visited { color:#666666; text-decoration:underline; } a:hover, a:focus, a:active, header ul a:hover, header ul a:focus, header ul a:active, #peoplesay a:hover, #peoplesay a:focus, #peoplesay a:active, #fancy_div a:hover, #fancy_div a:focus, #fancy_div a:active, #intro a:hover, #intro a:focus, #intro a:active, #getintouch a:hover, #getintouch a:focus, #getintouch a:active { color:#333333; } /* View work link button */ #intro a#portfolio:link, #intro a#portfolio:visited { text-decoration:none; color:#ffffff; font-size:17px; padding:15px 25px; background:#d1669e url(../images/pink-buttom-bkg.gif); position:absolute; right:30px; top:30px; } #intro a#portfolio:hover, #intro a#portfolio:focus { background:#b94481 url(../images/pink-buttom-bkg-over.gif); } #intro a#portfolio:active { background:#a33870 url(../images/pink-buttom-bkg-active.gif); } /* Twitter status update box */ #twitter a:link, #twitter a:visited { color:#666666; text-decoration:none; } #twitter a:hover, #twitter a:focus, #twitter a:active { text-decoration:underline; color:#666666; } /* Water charity link */ #water a { display:block; padding:10px 20px; text-align:center; margin:auto; } #water a:link, #water a:visited { color:#ffffff; text-decoration:none; background:#333333; } #water a:hover, #water a:focus, #water a:active { color:#ffffff; text-decoration:none; background:#000000; } /* Links inside the boxes */ .drag a:link, .drag a:visited { color:#ffffff; } #music p a, #photos p a, #travel a[href="http://dopplr.com/traveller/yaili"], #travel a[href="http://lanyrd.com/people/yaili/"] { background:none no-repeat; padding:2px 0 2px 21px; clear:both; display:block } #music p a { background-image:url(../images/icon-lastfm.gif); } #photos p a { background-image:url(../images/icon-flickr.gif); } #travel a[href="http://dopplr.com/traveller/yaili"] { background-image:url(../images/icon-dopplr.gif); } #travel a[href="http://lanyrd.com/people/yaili/"] { background-image:url(../images/icon-lanyrd.gif); } #music p a:hover, #music p a:active, #photos p a:hover, #photos p a:active { color:#433d0a; } /* View about page link button */ #intro a#about:link, #intro a#about:visited { text-decoration:none; color:#ffffff; font-size:17px; padding:15px 25px; background:#d1669e url(../images/pink-buttom-bkg.gif); position:absolute; right:40px; top:-5px; } #intro a#about:hover, #intro a#about:focus { background:#b94481 url(../images/pink-buttom-bkg-over.gif); } #intro a#about:active { background:#a33870 url(../images/pink-buttom-bkg-active.gif); } /* Visit website link */ .slideshow .link { position:absolute; right:0; top:130px; font-size:11px; text-transform:uppercase; } .project a:link, .project a:visited { color:#ffffff; } .project a:hover, .project a:focus, .project a:active { color:#cccccc; } /* =Border Radius --------------------------------------------------------- ------------------------------------------------------------------------*/ #intro a#portfolio, #twitter, #water a, .drag, #intro a#about, .project { -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius:5px; } #fancy_div input, #fancy_div textarea, #getintouch { -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px; border-radius:3px; } /* =Header --------------------------------------------------------------- ------------------------------------------------------------------------*/ header h1 a { background:url(../images/logo.png) no-repeat; display:block; width:160px; height:89px; text-indent:-100000px; outline:none; } header hgroup h2 { position:absolute; left:175px; top:20px; text-transform:uppercase; border-bottom:1px solid #666666; color:#666666; word-spacing:1px; letter-spacing:1px; font:13px Candara, "Lucida Sans Unicode", "Lucida Grande", sans-serif; } header > h2 { font-size:180px; opacity:.06; position:absolute; top:-100px; right:0; } header ul { font-size:14px; position:absolute; right:0; top:0; z-index:100; } header ul li { float:left; margin-left:30px; } header ul li a { display:block; padding:9px 0; } header ul li#vcard a { padding-left:54px; background:url(../images/vcard-icon.png) no-repeat left 50%; } header ul li#rss a { text-indent:-100000px; background:url(../images/rss-icon.png) no-repeat 50% 50%; width:13px; } header .vcard { display:none; } /* =Type --------------------------------------------------------------- ------------------------------------------------------------------------*/ #intro p { font-size:13px; line-height:1.5; margin-bottom:10px; } #twitter li { font-size:13px; color:#666666; } #twitter a { font-weight:bold; } #twitter a[href="http://twitter.com/yaili"] { margin-left:10px;} #twitter b { font-weight:normal; font-style:italic; } #water h3 { font-size:13px; } /* About page boxes: or The Span Soup */ .drag h3 { color:#ffffff; line-height:.1; margin-bottom:15px; } .drag h3 span.f22 { font-size:22px; } .drag h3 span.f31 { font-size:31px; } .drag h3 span.f32 { font-size:32px; } .drag h3 span.f33 { font-size:32px; } .drag h3 span.f34 { font-size:34px; } .drag h3 span.f43 { font-size:43px; } .drag h3 span.f44 { font-size:44px; } .drag h3 span.f45 { font-size:45px; } .drag h3 span.f46 { font-size:46px; } .drag h3 span.f47 { font-size:47px; } .drag h3 span.f48 { font-size:48px; } .drag h3 span.f52 { font-size:52px; } .drag h3 span.f53 { font-size:53px; } .drag h3 span.f54 { font-size:54px; } .drag h3 span.f58 { font-size:58px; } .drag h3 span.f61 { font-size:61px; } .drag h3 span.f64 { font-size:64px; } .drag h3 span.f65 { font-size:65px; } .drag h3 span.f66 { font-size:66px; } .drag h3 span.upper { text-transform:uppercase; } .drag h3 span.sp200 { letter-spacing:10px; } .no-js .drag h3, .no-js .drag h3 span { font:bold 24px Cambria, "Hoefler Text", "Times New Roman", Times, serif; text-transform:none; letter-spacing:normal; } .drag p { font-size:13px; margin-bottom:10px; } .drag h4 { font:bold 14px Cambria, "Hoefler Text", "Times New Roman", Times, serif; margin:13px 0 8px 0; } #facts li { font-size:14px; display:inline; line-height:1.5; } #facts li:after { content:" \00B7 \ "; } #facts li:last-child:after { content:""; } #quotes blockquote { background:url(../images/blockquote.png) no-repeat; padding-left:15px; } #quotes blockquote > p:first-child { font:23px Cambria, "Hoefler Text", "Times New Roman", Times, serif; margin-bottom:10px; } #articles li { font-size:13px; } #articles li > a:first-child { font-size:16px; display:block; clear:both; } /* Portfolio page */ .project h2 { font:bold 16px Cambria, "Hoefler Text", "Times New Roman", Times, serif; margin-bottom:10px; } .project p { font-size:13px; line-height:1.4; margin-bottom:5px; } #wdn.project p { margin-right:154px; } #peoplesay h2 { color:#666666; font-size:28px; margin-bottom:30px; } /* =Images --------------------------------------------------------------- ------------------------------------------------------------------------*/ #graph-bio figure dt { font:bold 14px Cambria, Georgia, "Times New Roman", Times, serif; margin-bottom:40px; } #graph-bio figure dd { margin-left:-90px; } .slideshow img { margin-bottom:5px; } /* =Lists --------------------------------------------------------------- ------------------------------------------------------------------------*/ /* Social links icons */ #social { position:absolute; right:0; top:0; } #social li { float:left; margin-left:5px; } #social a { display:block; width:16px; height:16px; text-indent:-100000px; background:url(../images/social-sprite.gif) no-repeat; } #social a[href*="twitter"] { background-position:left 0; } #social a[href*="twitter"]:hover { background-position:right 0; } #social a[href*="yai.li"] { background-position:left -160px; } #social a[href*="yai.li"]:hover { background-position:right -160px; } #social a[href*="lastfm"] { background-position:left -16px; } #social a[href*="lastfm"]:hover { background-position:right -16px; } #social a[href*="upcoming"] { background-position:left -32px; } #social a[href*="upcoming"]:hover { background-position:right -32px; } #social a[href*="dopplr"] { background-position:left -48px; } #social a[href*="dopplr"]:hover { background-position:right -48px; } #social a[href*="flickr"] { background-position:left -64px; } #social a[href*="flickr"]:hover { background-position:right -64px; } #social a[href*="friendfeed"] { background-position:left -80px; } #social a[href*="friendfeed"]:hover { background-position:right -80px; } #social a[href*="brightkite"] { background-position:left -96px; } #social a[href*="brightkite"]:hover { background-position:right -96px; } #social a[href*="stumbleupon"] { background-position:left -112px; } #social a[href*="stumbleupon"]:hover { background-position:right -112px; } #social a[href*="delicious"] { background-position:left -128px; } #social a[href*="delicious"]:hover { background-position:right -128px; } #social a[href*="linkedin"] { background-position:left -144px; } #social a[href*="linkedin"]:hover { background-position:right -144px; } /* Work box */ #work ul { margin-top:30px; } #work li { font-size:18px; font-style:italic; text-align:center; margin-bottom:20px; } /* Flickr photos */ #photos ul { margin-bottom:10px; } #photos li { float:left; margin:0 10px 10px 0; background:url(../images/flickr-polaroid.gif) no-repeat; width:83px; height:99px; } #photos li:nth-of-type(3n) { margin-right:0; } #photos li a { display:block; width:75px; height:75px; margin:4px 0 0 4px; } /* Last.fm songs */ #music ul { margin-bottom:10px; } #music li { position:relative; float:left; margin:0 25px 25px 0; width:73px; height:68px; } #music li a { position:absolute; left:0; top:0; width:73px; height:68px; display:block; background:url(../images/jewelcase.png) no-repeat; } #music li.end-row { margin-right:0; } /* for the annoying bastards */ #music li:nth-child(3n) { margin-right:0; } #music li img { margin:3px 0 0 7px; } .no-js #music ul { overflow:hidden; } .no-js #music li:nth-child(3n) { margin-right:25px; } /* Events definition list */ #travel dl { margin-bottom:20px; font-size:13px; } #travel dt { width:95px; float:left; margin-bottom:10px; } #travel dd { margin-bottom:10px; } /* Articles */ #articles li { margin-bottom:10px; line-height:1.2; } /* Slideshows */ .slideshow { position:relative; height:154px; } .slideshow .images { width:304px; height:126px; overflow:hidden; position:relative; } .js .slideshow .images li { position:absolute; z-index:0;} .no-js .slideshow .images { width:auto; } .no-js .slideshow .images li { float:left; margin-right:5px; } .slideshow ul.nav { clear:both; overflow:hidden; margin:5px 0 15px; } .slideshow .nav li { margin-right:5px; float:left; } .slideshow .nav li:last-child { margin-right:0; } .slideshow .nav li a { width:9px; height:9px; background:url(../images/portfolio-circle.png) no-repeat; text-indent:-100000px; display:block; } .slideshow .nav li a:link, .slideshow .nav li a:visited { opacity:.5; } .slideshow .nav li a:hover, .slideshow .nav li a:active { opacity:1; } .slideshow .nav li.active a { opacity:1; } .no-js .slideshow ul.nav { display:none; } /* Services lists */ .project > ul { margin-top:25px; overflow:hidden; } .project > ul li { float:left; font-size:11px; text-transform:uppercase; margin-left:3px; } .project > ul li:after { content:" /"; } .project > ul li:first-child { margin-left:0; } .project > ul li:last-child:after { content:""; } #wdn.project > ul { margin-right:100px; line-height:1.3; } .js #wdn.project > ul li.end-row { margin-left:0; } /* for the annoying bastards */ .js #wdn.project > ul li:nth-child(3) { margin-left:0; } /* Portfolio page, Quotes */ #peoplesay li { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -khtml-box-sizing:border-box; box-sizing:border-box; padding:0 15px 0 20px; width:255px; float:left; color:#666666; background:url(../images/blockquote.png) no-repeat; } #peoplesay li blockquote > p:first-child { font:16px/1.4 Cambria, "Hoefler Text", "Times New Roman", Times, serif; margin-bottom:5px; } #peoplesay .source { font-size:13px; } /* for the f'ing bastards */ #peoplesay li blockquote > p:last-child { font-size:13px; line-height:1.3; } /* =Boxes ---------------------------------------------------------------- ------------------------------------------------------------------------*/ /* Background colours: Not semantic, but it's the easiest way of adding the right background, right? */ .green { background-color:#6e8c1b; background-image:url(../images/bkg-green.gif); } .purple { background-color:#8b61a5; background-image:url(../images/bkg-purple.gif); } .sand { background-color:#c1b33a; background-image:url(../images/bkg-sand.gif); } .bordeaux { background-color:#be2525; background-image:url(../images/bkg-bordeaux.gif); } .brown { background-color:#7c642b; background-image:url(../images/bkg-brown.gif); } .turquoise { background-color:#619ba5; background-image:url(../images/bkg-turquoise.gif); } .cyan { background-color:#3b8aae; background-image:url(../images/bkg-cyan.gif); } .lightgreen { background-color:#9aac1a; background-image:url(../images/bkg-lightgreen.gif); } .orange { background-color:#c97b0d; background-image:url(../images/bkg-orange.gif); } .pink { background-color:#e579ca; background-image:url(../images/bkg-pink.gif); } .yellow { background-color:#c1b33a; background-image:url(../images/bkg-yellow.gif); } .skin { background-image:url(../images/bkg-skin.gif); } .darkgreen { background-color:#50651d; background-image:url(../images/bkg-darkgreen.gif); } .navy { background-color:#2e4167; background-image:url(../images/bkg-navy.gif); } .teal { background-color:#619ba5; background-image:url(../images/bkg-teal.gif); } .violet { background-color:#b9a68b; background-image:url(../images/bkg-violet.gif); } /* Boxes in the About page */ .drag { color:#ffffff; padding:14px 14px 60px 14px; -moz-border-radius-bottomright:0; -moz-border-radius-bottomleft:0; -webkit-border-bottom-right-radius:0; -webkit-border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-left-radius:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;-ms-box-sizing:border-box; -khtml-box-sizing:border-box; box-sizing:border-box; } .js .drag { width:300px; } .no-js #home .drag { margin-bottom:20px; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; padding-bottom:14px; clear:both; overflow:hidden } .js .drag .draggyBit { position:absolute; cursor:move; padding:5px; right:0; left:0; top:0; text-align:center; display:none; font-size:11px; color:rgba(255,255,255,.5) } .js .drag:hover .draggyBit { display:block; } .no-js .drag .draggyBit { display:none; } .js #work, .js #facts, .js #photos, .js #music, .js #travel, .js #articles, .js #quotes { position:absolute; bottom:0; } #work { background-color:#7c642b, #7c642b; background-image:url(../images/work-bkg.gif), url(../images/bkg-brown.gif); background-repeat:no-repeat, repeat; background-position:50% bottom, left top; left:0; z-index:1; padding-bottom:255px; } .no-multiplebgs #work { background:#7c642b url(../images/bkg-brown.gif) repeat 50% bottom; padding-bottom:60px;} #facts { left:430px; z-index:2; } #photos { left:200px; z-index:3; } #music { left:660px; z-index:4; } #travel { left:80px; z-index:5; } #articles { left:400px; z-index:6; } #quotes { left:730px; z-index:7; } .drag.front { z-index:100; } .drag.back { z-index:1; } /* Boxes in the Portfolio page */ .project { padding:15px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -khtml-box-sizing:border-box; box-sizing:border-box; color:#ffffff; margin-bottom:15px; position:relative; } .no-js .project { -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; padding-bottom:14px; clear:both; } #wdn-monster, #hospital-heart {position:absolute; z-index:100;} #wdn-monster { background:url(../images/work/work-wdn-2.png) no-repeat; width:213px; height:260px; bottom:0; right:-49px; } #hospital-heart { background:url(../images/work/work-hospital-2.png) no-repeat; width:133px; height:117px; right:0; top:40px; } .no-js #hospital-heart { right:340px; } #peoplesay { background:none; clear:both; overflow:hidden; padding-bottom:40px; } /* =Contact Popup --------------------------------------------------------- ------------------------------------------------------------------------*/ #fancy_div h2 { color:#666666; font:bold 36px Cambria, "Hoefler Text", "Times New Roman", Times, serif; margin-bottom:20px; } #fancy_div p { font-size:14px; margin-bottom:10px; color:#666666; line-height:1.4; } .no-js #getintouch { display:block !important; background:#ffffff; padding:14px; } .no-js #getintouch h2 { font:bold 24px Cambria, Georgia, "Times New Roman", Times, serif; margin-bottom:10px; } .no-js #getintouch p { font-size:14px; line-height:1.5; }