three years agoDinky pocketbooks with WebKit transforms

I'm a big fan of stuff written on paper. My computer is covered in useful post-it notes, and I do a lot of planning on paper at the start of every client-side build.

On my desk at work is a piece of paper written in felt tip that I pass around to my co-workers on occasion. It's a reference document for how we check projects out of subversion, upload to live and some basic terminal commands for people who are unfamiliar in that environment.

This was a great opportunity to break out my favourite paper folding technique, where an A4 page becomes an 8 page booklet. I first learnt about this from a Christmas card I received a few years ago from some very inventive friends.

Brian Suda happened to be in the office that day and pointed me to a cool Flash interface for creating these, pocketmod.com. He also suggested that it would be possible to build these using just HTML and CSS with CSS3 transforms, currently supported by Safari and WebKit.

Inspired, I did exactly that.

Here's the demo.html (no transforms, so I can easily preview the pages) - the transforms are applied by the print stylesheet, so hit "print preview" to see them. Alternatively, visit demo.html?print to preview the print stylesheet directly in your browser.

Just in case you aren't running Webkit or Safari, here's what the print output looks like:

Screenshot of a dinky pocket book

Each "page" has a set width and height (241x370 px) and is absolutely positioned, but the real magic happens with the CSS3 transforms in the print stylesheet:

/* rotated left */
#page1, #page8, #page7, #page6 {
  -webkit-transform: translate(64.5px, -64.5px) rotate(-90deg);
}
/* rotated right */
#page2, #page3, #page4, #page5 {
  -webkit-transform: translate(-64.5px, -64.5px) rotate(90deg);
}

It's not enough just to rotate 90 or -90 degrees. This works fine if you are rotating something that is square because the rotation happens around the centre point. I wanted to rotate the rectangles around the corner to ensure they fitted snugly inside their parent container. The solution was to shift the position using a translate() transform. I could have done this with position: relative, but I opted for a transform since I was already using -webkit-transform for the rotation. 64.5px is worked out as (height - width) / 2.

You can fill each page with whatever you like, but make sure it fits or it will be clipped by the overflow: hidden applied to the page. The only required markup is as follows:

<div id="book">
  <div id="page1" class="page"></div>
  <div id="page2" class="page"></div>
  <div id="page3" class="page"></div>
  <div id="page4" class="page"></div>
  <div id="page5" class="page"></div>
  <div id="page6" class="page"></div>
  <div id="page7" class="page"></div>
  <div id="page8" class="page"></div>
</div>

I surround textual content with a <div class="inner"> to apply sensible padding without affecting the width of the page.

There are currently two special page types. An empty page with lines (suitable for hand-written notes) is achieved by applying a class of lines:

<div id="page5" class="page lines"></div>

The second special page uses the Google Static Maps API. The API takes a bunch of name value pairs, which I decided to represent using a definition list. On load, pages with the class gmap are scanned for definition lists, which are then hidden and replaced by an image constructed from the definition terms.

<div id="page4" class="page gmap">
  <dl>
    <dt>center</dt>
    <dd>50.8197155,-0.1365716</dd>
    
    <dt>key</dt>
    <dd>insert your Google Maps API key here (get one here)</dd>
    
    <dt>zoom</dt>
    <dd>13</dd>	
  </dl>
</div>

I use Simon's www.getlatlon.com to find the correct values.

Aside from these special pages, I've included styles for the HTML usual suspects - lists, tables, headings, pre etc. To make a todo list, simply apply a class of todo to a <ul> or an <ol>. To make a blank todo list, just use blank list items.

Once you've constructed and printed your dinky booklet masterpiece, you'll need to fold it. Here's a nifty video from pocketmod.com showing how:

I've published the code on GitHub, so please feel free try it out yourself or fork it and have a play. Let me know what you think.

Posted at 11:22 pm on the 21st of May 2009. 2860 Comments

2860 comments

  1. This is awesome work. I've definitely going to use it in a project (I'll crowbar it in!).

    Alex 21st May 2009 23:39permalink.

  2. That's really cool! :)

    Although translate(64.5px, -64.5px) rotate(-90deg); makes me instinctively reach for a matrix transform…and what do you know, matrix(a,b,c,d,e,f) does exactly that.

    James Aylett 22nd May 2009 02:17permalink.

  3. This is pretty awesome, I just need to tinker with the sizes to make it fit my bizarre US-letter paper. :/

    dbt 22nd May 2009 07:54permalink.

  4. That's pretty cool :)

    Richard Terry 22nd May 2009 08:10permalink.

  5. Looks OK in Firefox 3.5pre nightly, too: s/-webkit-transform/-moz-transform/g

    Jan! 22nd May 2009 08:48permalink.

  6. Handcraft + geekery? Absolutely wonderful.

    CSS at its finest

    Mislav 22nd May 2009 09:14permalink.

  7. Lovely. It should also work in Firefox 3.5 if you include "-moz-transform"

    Jeremy Ruston 22nd May 2009 09:15permalink.

  8. Awesome. Thanks a lot for the tip. I will try to enable this programatically for the wiki pages.

    Thejesh GN 22nd May 2009 09:49permalink.

  9. Hmmm - PocketMod is pretty cool, although it appears to only use "Letter" size, and not full A4. Presumably your version is doing full A4?

    mrben 22nd May 2009 10:16permalink.

  10. Ooh, was that my Xmas Da Vinci Code thing that inspired you? Anyway, nice work: love the whole PocketMod universe.

    Hatmandu 22nd May 2009 10:32permalink.

  11. Nice one! Here's my script for making a PDF pocketmod for a daily digest.

    http://github.com/jwheare/digest/tree/master

    I found the hardest part was getting stuff that's interesting and useful on a daily basis, and I don't have a printer, so I kinda lost interest :)

    James Wheare 22nd May 2009 12:25permalink.

  12. I'm also big fan on planning on paper. Wow, I just simple love your project! Great work!

    Vladimir Carrer 22nd May 2009 12:34permalink.

  13. Very cute.

    Olly Willans 22nd May 2009 14:05permalink.

  14. Since you're using Safari/Webkit, you could save yourself the IDs and selectors and take advantage of nth-child.

    #book > div:nth-child(even) { /* rotate the other way */ }
    #book > div:nth-child(1) { /* adjust position */ }
    ...and so on.

    Very cool idea, all 'round. :)

    Jonathan Snook 22nd May 2009 14:48permalink.

  15. Very nice! I might have to look in to this more closely!

    Richard, Peacock Carter 22nd May 2009 16:20permalink.

  16. Thanks for the feedback everyone!

    Jan and Jeremy - awesome that Firefox now does this! I have updated the css to use -moz-transform as well

    Andrew -you and Helen were indeed the inventive friends I was talking about :)

    James - your pdf generating thing looks like a really cool project!

    Jonathan - oooh yes I could indeed use nth child, that would really clean up the markup. I couldnt use odd and even to rotate though as its 1, 8, 7 and 6 that go one way and 2, 3, 4, and 5 that go the other.

    Natalie 23rd May 2009 17:27permalink.

  17. That is so cool Nat!

    Nicole Sullivan 26th May 2009 19:20permalink.

  18. That's realy cool!
    cheers for sharing.

    web design leeds 27th May 2009 14:51permalink.

  19. I came here from tiddlypocketbook.com, which uses TiddlyWiki as a editor, and having both used the PocketMod folding technique to send a Christmas card one year off-and-on relied on a GTD version of TiddlyWiki for keeping track of things, I'm really happy to have discovered your breakthrough.

    Thanks! The whole thing is very impressive (especially the mash-up stuff you put up at GitHub). I'll see how to use your technique to apply it directly to my own TiddlyWiki file (using the MonkeyGTD layout at tiddlyspot.com).

    Roger Sperberg

    Roger Sperberg 1st July 2009 18:56permalink.

  20. You can use the -webkit-transform-origin property (and its -moz- equivalent; and see its documentation) instead of the translate() transform. That property controls the point of origin of the transform.

    -webkit-transform-origin: 50% 120.5px; should do the trick for all pages (120.5 is width / 2).

    Jorrit 6th September 2009 00:12permalink.

  21. It is good that we are able to take the <a href="http://lowest-rate-loans.com">loans</a> and this opens completely new possibilities.

    WintersCHANDRA19 16th March 2010 18:11permalink.

  22. this is so sweet, thanks for sharing.

    Pol Moneys 5th May 2010 11:36permalink.

  23. this is so sweet, thanks for sharing.

    Aşk Büyüsü Nasıl Yapılır 29th May 2010 11:53permalink.

  24. Wearing cheap full lace wigs is becoming more and more popular among women. Suddenly it seems there are more and more celebrity stars wearing lace wig. lace wigs for black women are plentiful, allowing you to choose a color and style that fits your needs perfectly.

    full lace wigs 25th June 2010 04:29permalink.

  25. Wearing cheap full lace wigs is becoming more and more popular among women. Suddenly it seems there are more and more celebrity stars wearing lace wig. lace wigs for black women are plentiful, allowing you to choose a color and style that fits your needs perfectly.

    full lace wigs 25th June 2010 04:29permalink.

  26. allowing you to choose a color and style that fits your needs perfectly

    payday loan online 14th July 2010 19:56permalink.

  27. allowing you to choose a color and style that fits your needs perfectly.

    fast payday loans 15th July 2010 12:39permalink.

  28. It's nice to read this post! Good guidance! I must make it out myself. classifieds |ads|deep soaking tubs

    Susancai 16th July 2010 09:54permalink.

  29. Great work. With a comparatively simple tricks, now I have great results following your tips. used stationary bikes | home does

    stationary bikes 19th July 2010 07:24permalink.

  30. beach wedding dresses
    cheap wedding dresses
    vintage wedding dress
    white wedding dress
    the wedding dress
    wedding dress gowns
    white wedding dresses
    beach wedding dress
    bridal wedding dress
    short wedding dresses
    www.loveweddingdresses.com

    socks 20th July 2010 13:40permalink.

  31. allowing you to choose a color and style that fits your needs perfectly. prom gowns

    prom dress 21st July 2010 07:01permalink.

  32. very good information thank you for this .

    replica calvin klein watches 24th July 2010 04:27permalink.

  33. Looked that has been too good, this material I look for a long time, thanks your share, I will pay a return visit frequently
    <a href="http://www.chineseporcelainb2c.com">chinese porcelain</a>

    chinese porcelain 26th July 2010 09:53permalink.

  34. You are good, this great article, is recording the very good content, affects to me is very big chinese porcelain

    chinese porcelain 26th July 2010 09:56permalink.

  35. You are good, this great article, is recording the very good content, affects to me is very big chinese porcelain

    chinese porcelain 26th July 2010 09:56permalink.

  36. Looked that has been too good, this material I look for a long time, thanks your share, I will pay a return visit frequently Butterfly valves|steel valve|safety valve

    valve 26th July 2010 10:14permalink.

  37. You are good, this great article, is recording the very good content, affects to me is very big pressure relief valve|dustbin

    sswfnhtu 26th July 2010 10:15permalink.

  38. I had got a dream to start my own commerce, however I did not have enough amount of cash to do this. Thank God my close dude told to take the personal loans. Thus I received the sba loan and made real my old dream.

    credit loans 27th July 2010 10:07permalink.

  39. You can use the -webkit-transform-origin property (and its -moz- equivalent; and see its documentation) instead of the translate() transform. That property controls the point of origin of the transform. -webkit-transform-origin: 50% 120.5px; should do the trick for all pages (120.5 is width / 2).

    * Computer and Gadget News

    andrew shawn 27th July 2010 15:22permalink.

  40. Browsing on Google for something else closely connected, regardless before i ramble on too much i would just like to state how much I cherished your post, I've added your web blog and also obtained your Feed, Again thank you very much for the article carry on the good work.

    ny auto glass 27th July 2010 19:11permalink.

  41. The pocketbook will be the theme for this round, lol. . That sounds like a great idea. Thanks. tennis apparel

    Golfbrand 30th July 2010 10:39permalink.

  42. It is perhaps not enough to represent all, but it must be great enough to help with basic-intermediate questions. Shoulder Bags

    ChannelBlu 30th July 2010 14:53permalink.

  43. well webkits are ok

    virility ex 30th July 2010 20:04permalink.

  44. I'am glad I stumled upon this! This is a great idea for my group. I sending this right now to all of them.....thanks for the info!

    How to stop porn 30th July 2010 21:46permalink.

  45. Great idea! I will try this on my next report.

    Lifetime Hoops 30th July 2010 21:53permalink.

  46. I like the video! I will try this out myself....thanks!

    Southwest coupons 30th July 2010 22:00permalink.

  47. No wonder they're so much into it. There must be something good to say then? Starscapes.com

    Starscapes.com 2nd August 2010 09:33permalink.

  48. Thanks for giving the such a informative blog . I really like our explanations described here.

    idaho home security systems 2nd August 2010 19:31permalink.

  49. <h1><a href="http://www.chanel-uk.net/chanel-ladies-white-ceramic-watch-h1181-p-17.html"><strong>Chanel Ladies White Ceramic Watch</strong></a>, Chanel Ladies White Ceramic Watch</h1><br><br />
    <h1><a href="http://www.chanel-uk.net/chanel-ladies-white-ceramic-watch-h1336-p-18.html"><strong>Chanel Ladies White Ceramic Watch</strong></a>, Chanel Ladies White Ceramic Watch</h1><br><br />
    <h1><a href="http://www.chanel-uk.net/chanel-ladies-white-ceramic-watch-h1337-p-19.html"><strong>Chanel Ladies White Ceramic Watch</strong></a>, Chanel Ladies White Ceramic Watch</h1><br><br />

    Chanel Ladies White Ceramic Watch 3rd August 2010 01:43permalink.

  50. very good information thank you for this .

    wwe 3rd August 2010 08:27permalink.

  51. We have no occasions to louis vuitton outlet and nike dunks

    kirk 3rd August 2010 14:41permalink.

  52. That was as neat as the T shirt folding trick. awesome

    J. Shelly 8th August 2010 15:30permalink.

  53. That was one of the neatest tricks around thanks for sharing.

    James Shelter 8th August 2010 15:31permalink.

  54. Thank God my close dude told to take the personal loans. Thus I received the sba loan and made real my old dream.

    save fuel 9th August 2010 16:54permalink.

  55. I find it difficult to subscribe RSS feeds, bookmark this site anyway I have is a very useful and complete information.

    elliptical for sale 10th August 2010 10:24permalink.

  56. Since you're using Safari/Webkit, you could save yourself the IDs and selectors and take advantage of nth-child.

    #book > div:nth-child(even) { /* rotate the other way */ }
    #book > div:nth-child(1) { /* adjust position */ }
    ...and so on.

    Very cool idea, all 'round. :)

    stun gun 11th August 2010 01:16permalink.

  57. great advice and discussing,I will get this amazing for me .thank you!... Las Vegas drug screening test

    James 11th August 2010 09:11permalink.

  58. <a href="http://www.shoeinstore.com/">vibram fivefingers</a> hot sale, you will find <a href="http://www.shoeinstore.com/">vibram five fingers</a> at our website. welcome to place an order of <a href="http://www.shoeinstore.com/">fivefingers</a> shoes.

    vibram fivefingers 13th August 2010 10:17permalink.

  59. nice well writing on a paper is mcuh better then a computer as it is much quiker to find and read.

    Digest It Colon Cleanse Review 13th August 2010 16:11permalink.

  60. This was a great post. I could never write something as good

    Binaural Beats 13th August 2010 22:51permalink.

  61. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me. Acuvue Advance Astigmatism

    Acuvue Advance Astigmatism 15th August 2010 07:16permalink.

  62. You really make it seem so easy with your presentation but I find this topic to be really something which I think I would never understand. It seems too complicated and very broad for me. I am looking forward for your next post, I will try to get the hang of it! MD Answering Service

    hogard 15th August 2010 18:14permalink.

  63. Awesome site.......! plastic surgery newport beach

    Hopkins 15th August 2010 18:14permalink.

  64. It is my great pleasure to visit your website and to enjoy your great post here. I like it very much. I know that you put much attention for these articles, as all of them make sense and are very useful hotels in san miguel

    Barren 15th August 2010 18:15permalink.

  65. Super-Duper site! I am loving it!! Will come back again - taking you feeds also, Appreciation. retirement communities utah

    Stephen 15th August 2010 18:16permalink.

  66. great blog post! I am so thrilled reading this article. thank you!

    Replica rolex 16th August 2010 07:23permalink.

  67. This is awesome thank you.

    stun gun 17th August 2010 02:48permalink.

  68. I don't too much about, but I ever seeing her concert and that's really amazing.
    http://www.esleepmasters.com/Swimming_Pools_s/2352.htm

    henz 17th August 2010 16:32permalink.

  69. I really enjoyed your blog post. I bookmarked your page so I that can keep track of your future post.

    best home insurance 17th August 2010 19:56permalink.

  70. huang101 Welcome to fashion goods online store, http://www.chanelsonline.com Chanel bags

    Coach outlet 18th August 2010 21:10permalink.

  71. huang101 http://www.chanelsonline.com Chanel bags http://www.uselv.com LV handbags http://www.herveleger.eu herve leger

    huu 18th August 2010 21:12permalink.

  72. Camilo Villegas is Vibram Five Finger also playing well. He is five-under through eight holes and notched at minus-9 with Vibram Five Finger Watson.Rory McIlroy is making standing still look like a challenge . He is even par through three holes, but added another great escape at Vibram FiveFingersthe third .

    Vibram FiveFingers 19th August 2010 21:47permalink.

  73. I absolutely loved this idea and used it for my business San Antonio windshield repair. It is a great way to interact with the customers

    Mobile Glass 20th August 2010 14:34permalink.

  74. There are some very great sources here and thank you for being so kind to post them here. So we can read them and give our bet365 opinion on subject.

    david r 21st August 2010 09:54permalink.

  75. nice well writing on a paper is mcuh better then a computer as it is much quiker to find and read. louis vuitton speedy 35

    louis vuitton speedy 35 22nd August 2010 09:23permalink.

  76. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me. louis vuitton wallet louis vuitton galliera pm lv pochette

    louis vuitton 22nd August 2010 15:25permalink.

  77. d for me. I am looking forward for your next post, I will try to get the hang of it! Florin Wallet Louis Vuitton speedy 25

    lv wallets 22nd August 2010 17:51permalink.

  78. Great post! My Group will love this.Thanks for the info.

    Idol Lash Review 22nd August 2010 17:56permalink.

  79. Thanks for such a great and interesting article here. Webkit transforms is a great way to keep your notes organized in your computer, laptop or notebook. I love writing almost everything on the pieces of paper like you do. However nowadays you almost don't need a paper if you have a notebook with Webkit available. I think that in the nearest future we will use less paper in the world. And it is good because we will save some trees! Thanks for the great article one more time and keep publishing them in the nearest future too. Regards, Brandon Thinton from web development

    BrandongT77 23rd August 2010 12:00permalink.

  80. Toe shoes, more and more popular the last two years, five finger shoes makes you closer to the earth and your surroundings that you will not find in conventional shoes, vibram five fingers shoes can stimulate the soles of the feet muscles; promote blood circulation, but also five finger shoes to improve the range of activities, five finger shoes multisport shoes may be a good choice to bring one when you are on travel, because they are luggage friendly and does not occupies too much space on your bag, five fingers vibram to our earth in a traditional way shoes are not available together, so that they become more flexible, dashing.

    five finger shoes 26th August 2010 07:10permalink.

  81. You know that prada handbags are more and more popular in those years. It’s a highly popular that with the improvement of Prada into a new style, prada shoulder bags will definitely attract your eye，prada hobos to its unique design also deeply loved by everyone. Different Prada handbags styles to bring you a different style atmosphere, prada totes in the Italian upper classes have a high reputation and prestige, prada top handles values embodied in everyday life has always been regarded as extraordinary enjoyment, prada handbags is definitely your best choice.

    prada handbags 26th August 2010 07:14permalink.

  82. It’s a highly popular that with the improvement of louis vuitton handbags into a new style. It is high-quality materials and craftsmanship cans not the other package products and, louis vuitton bags can easily make a vote on the pursuit of people go crazy. Recently, Adidas are the best seller for businessmen, adidas shoes flavor restoring ancient ways, and do so strong technological innovations. Many NBA players like adidas sneaker, its style and quality are the best.

    louis vuitton handbags 26th August 2010 07:14permalink.

  83. Toe shoes, more and more popular the last two years, five finger shoes makes you closer to the earth and your surroundings that you will not find in conventional shoes, vibram five fingers shoes can stimulate the soles of the feet muscles; promote blood circulation, but also five finger shoes to improve the range of activities, five finger shoes multisport shoes may be a good choice to bring one when you are on travel, because they are luggage friendly and does not occupies too much space on your bag, five fingers vibram to our earth in a traditional way shoes are not available together, so that they become more flexible, dashing.

    five finger shoes 26th August 2010 07:20permalink.

  84. You know that prada handbags are more and more popular in those years. It’s a highly popular that with the improvemen http://www.amandashoeswholesale.com/ wholesale shoes

    dollar items 26th August 2010 09:48permalink.

  85. Just found this blog. excellent article. how long have you been writing? this is good writing. are you a journalist aswell? anyway, thanks again. subscribing to the rss :) Web design company

    Dona 26th August 2010 18:13permalink.

  86. Hey This is some great thing never thought of it like that pidgin download

    Steve 26th August 2010 18:13permalink.

  87. This is a great well informed site. Thanks for putting this site together. edmonton home security systems

    Brad 26th August 2010 18:15permalink.

  88. Was doing research for an article I hav e to write for a class this site helped quite a lot thanks! forklift certification classes

    Peter 26th August 2010 18:15permalink.

  89. Good post,This was exactly what I needed to read today! I am sure this has relevance to many of us out there.

    one dollar hats 27th August 2010 09:48permalink.

  90. You are very good. The article was nice to read and full of meaning full of knowledge Hack Point Blank | Nightclub City hack | Yamaha Byson

    PB wallhack 27th August 2010 22:26permalink.

  91. I love this very much. Your sharing has been so important for me since last year I found you. Thank you so much. new homes

    JeremyNath 28th August 2010 07:51permalink.

  92. This was exactly what I needed to read today! I am sure this has relevance to many of us out there. lv neverfull pm lv neverfull mm lv neverfull gm

    lv 29th August 2010 18:19permalink.

  93. This was one of the best blogs i viewed all day...thank you everyone for your great comments.

    rabbit hutch 29th August 2010 23:04permalink.

  94. Good post,This was exactly what I needed to read today! I am sure this has relevance to many of us out there. louis vuitton speedy 35 speedy 35 lv speedy 35

    louis vuitton 30th August 2010 07:26permalink.

  95. Saw your Blog bookmarked on Reddit.I really enjoy your blog and marketing tactic. Investigate out my Farmville Guidebook in the event you get a moment. portuguese course

    Tony 30th August 2010 10:28permalink.

  96. Excellent read, I just passed this onto a colleague who was doing a little research on that. Seattle website design

    john 30th August 2010 10:28permalink.

  97. It's so refreshing to find articles like the ones you post on your site. Very informative reading. I will keep you bookmarked Roof Replacement Sarasota FL

    Steve 30th August 2010 10:29permalink.

  98. Its my great pleasure to visit your blog and to enjoy your awesome posts here. I like that a lot. I know that you put much attention for these articles, as all of them make sense and are very useful florida advertising

    Morgan 30th August 2010 10:30permalink.

  99. It really is a concident that a lot of people like this because i for one am a massive fan of this type of stuff and you just made my day, thankyou very much.

    watch Resident Evil afterlife online 1st September 2010 08:30permalink.

  100. Thank for the info! My daughter will love making these!

    Southwest coupons 2nd September 2010 00:18permalink.

  101. Really trustworthy blog. Please keep updating with great posts like this one. I have booked marked your site and am about to email it to a few friends of mine that I know would enjoy reading..

    vibram five fingers 2nd September 2010 00:45permalink.

  102. This is a great post and makes me think of where I can fit in. I do <a href="http://www.amandapromotional.com/">promotional gifts</a> a little bit of everything mentioned here and I guess I have to find my competitive advantage.

    china wholesalers 3rd September 2010 10:11permalink.

  103. Really trustworthy blog. Please keep updating with great posts like this one. I have booked marked your site and am about to email it to a few friends of mine that I know would enjoy reading.. download iron man 2 | resident evil afterlife download | download lottery ticket

    Londo 3rd September 2010 12:45permalink.

  104. You are very good. The article was nice to read and full of meaning full of knowledge cerita terkini News Storm Charity

    pb wallhack 3rd September 2010 13:23permalink.

  105. You are very good. The article was nice to read and full of meaning full of knowledge

    <a href="http://www.youruggboots.com/">UGGS</a> 4th September 2010 04:32permalink.

  106. You are very good. The article was nice to read and full of meaning full of knowledge

    Air Jordans 4th September 2010 04:33permalink.

  107. It really is a concident that a lot of people like this because i for one am a massive fan of this type of stuff and you just made my day

    Discount nike 5th September 2010 11:25permalink.