diff --git a/images/arrow-down.png b/images/arrow-down.png new file mode 100644 index 0000000..585b0bd Binary files /dev/null and b/images/arrow-down.png differ diff --git a/images/octocat-small.png b/images/octocat-small.png new file mode 100644 index 0000000..66c2539 Binary files /dev/null and b/images/octocat-small.png differ diff --git a/index.html b/index.html index 5368dec..d7b01e8 100644 --- a/index.html +++ b/index.html @@ -1,39 +1,89 @@ - + - + - - - - - Fractal-mosaics by s-ben + + + + + + - +
+
+

Fractal-mosaics

+

Photomosaics 3.0

-
-
-

Fractal-mosaics

-

Photomosaics 3.0

+ -
- Download as .zip - Download as .tar.gz - View on GitHub -
-
-
+

This project is maintained by s-ben

-
-
-

The Fractal Mosaic algorithm is a rotation, scale, and translation invariant photomosaic algorithm. While traditional photomosaics create a larger image out of smaller square images on a rectangular grid, Fractal Mosaics creates a larger image out of rectangular images that can be placed at arbitrary locations, can be scaled to any size, and can be rotated by any angle.

+ +
+
+

Abstract

+ +

The Fractal Mosaic algorithm is a rotation, scale, and translation invariant photomosaic algorithm. While traditional photomosaics create a larger image out of smaller square images on a rectangular grid, Fractal Mosaics creates a larger image out of rectangular images that can be placed at arbitrary locations, can be scaled to any size, and can be rotated by any angle.

This is accomplished with a combination of image search (i.e. image retrieval) algorithms and an image registration algorithm developed with NASA funding by George Wolberg Siavash Zokai at the City College of New York (pdf).

Alt text -->Figure 1: Fractal Mosaic created with graffiti image set (best viewed large<-

+Figure 1: Fractal Mosaic created with graffiti image set (best viewed large

+ +

Figure 2 shows three traditional photomosaics created using the same image set and target image.

+ +

Alt text +Figure 2: Traditional Photomosaics using large tiles (left), medium sized tiles (middle), and small tiles (right)

+ +

As can be seen, using large tiles (left), finer details are lost. Using small tiles (right), we capture target image details, but can’t see individual image detail. Using medium size tiles (middle), we get a compromise between the two. Fractal Mosaics aims to create mosaics that capture both target image details and individual image details, in an aesthetically interesting way.

+ +

By allowing for arbitrary placement, rotation, and scaling of the “library images” (images making up the mosaic), there are an many more possible matches to evaluate. This allows for larger, often more aesthetically interesting matches than possible with traditional photomosaics. However, searching such a large solution space on a personal computer presents a challenging problem. This “paper” presents my solution to this problem (two years worth of unpaid work...). It explains the algorithm in depth for those wishing to hack the Matlab code. It should also aid those using the code to create mosaics, as understanding how the algorithm works will help tweak parameters that shape mosaic output.

+ +

Introduction / Problem Statement

+ +

In a traditional photomosaic, the number of possible matches is large but still easily manageable on a modern PC. The number of possible matches is simply the number of “tiles” (square areas in the target image) times the number of library images. For each tile, a similarity metric is calculated (root mean squared (rms) error, typically) for every library image. The library image with the smallest rms error is placed in the mosaic.

+ +

In a Fractal Mosaic, the number of possible possible matches is effectively infinite. For example, let’s say we use 5,000 library images, a 3072 x 1024 pixel target image, and do the following fairly rough quantization of the possible translations, rotations, and scalings:

+ +

This gives us (180 rotations) x (629,145 translations) x (50 scalings) x (5,000 library images) = 28,311,525,000,000 possible matches to search. Or ~28 trillion matches. Obviously, a brute force search is not feasible (I tried).

+ +

Fractal Mosaics tackles this complexity with three main strategies. One strategy is inherent in the “Log-polar” image registration algorithm at the core of Fractal Mosaics. This algorithm uses a coarse-to-fine multi-resolution framework, whereby estimates computed in lower resolution images are used as initial guesses in higher resolution images. An in-depth explanation of how log polar registration is implemented in Fractal Mosaics is given in the “log-polar registration” section.

+ +

The second main strategy is to use an image search algorithm to filter out library images that are statistically unlikely to produce a match. Details on this in the ‘Image Search (Retrieval) Filtering’ section.

+ +

The third main strategy for reducing the number of matches evaluated is to look for large matches first, then not look for smaller matches “under” those matches (i.e., don’t look for matches in areas where we’ve already placed an image). This saves considerable computation. However, it will cause the algorithm to miss aesthetically better matches under the placed matches. For this reason, Fractal Mosaics can be configured to also look for alternate matches under placed images. All matches can optionally be output to PNG files that can be loaded into Photoshop for later compositing.

+ +

The following sections will walk you through the main pieces of the Fractal Mosaic algorithm.

+ +

Image Registration

+ +

Image registration is generally defined as the lining up of images misaligned due to rotation, scale, and position (translation). The field of image registration is mature, constituting of several decades of research. The key insight of Fractal Mosaics is that image registration algorithms can be applied to efficiently search the photomosaic solution space. Instead of evaluating every possible rotation, scaling, and translation for every library image (computationally impossible), we can use image registration to efficiently estimate these parameters. Once these parameters are estimated, they are used to rotate, scale, and translate the library image in question to best match the target image. A similarity metric (rms error in this case) is applied. If the rotated, scaled, and translated library image scores high enough on the similarity metric, it is placed in the mosaic.

+ +

Registration Algorithm Choice

+ +

After an initial survey of the image registration literature, a frequency domain image registration algorithm was evaluated; specifically, Fourier-Mellin-based image registration, as implemented in this Matlab code. This would have been much more computationally efficient than the spatial domain algorithm eventually chosen, as rotation, scale, and translation are efficiently recovered in one step. However, this technique proved not robust enough for the photomosaic application. This is likely because it relies more heavily on the assumption made by all image registration algorithms: that the two images being matched are of the same object/scene. In photomosaics however, we are matching parts of the target image to random library images. The assumption that the library images are rotated, scaled, and translated versions of the target image is weak.

+ +

An image registration algorithm that operates in the spatial domain was tried; specifically, the “Log-polar registration” algorithm found in the paper “Robust Image Registration Using Log-Polar Transform” (pdf. This algorithm proved very robust. And most importantly, it met the main aesthetic criteria: for any two images presented to the algorithm, no matter how dissimilar, it aligned them the way a human would. To test this claim out for yourself, below is a video showing the algorithm at work matching library images to a target image.

+ +

Welcome to GitHub Pages.

@@ -62,8 +112,11 @@ $ git checkout gh-pages

Having trouble with Pages? Check out the documentation at http://help.github.com/pages or contact support@github.com and we’ll help you sort it out.

+
- - + + \ No newline at end of file diff --git a/javascripts/scale.fix.js b/javascripts/scale.fix.js new file mode 100644 index 0000000..08716c0 --- /dev/null +++ b/javascripts/scale.fix.js @@ -0,0 +1,20 @@ +fixScale = function(doc) { + + var addEvent = 'addEventListener', + type = 'gesturestart', + qsa = 'querySelectorAll', + scales = [1, 1], + meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : []; + + function fix() { + meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1]; + doc.removeEventListener(type, fix, true); + } + + if ((meta = meta[meta.length - 1]) && addEvent in doc) { + fix(); + scales = [.25, 1.6]; + doc[addEvent](type, fix, true); + } + +}; \ No newline at end of file diff --git a/params.json b/params.json index d488b12..b17e14d 100644 --- a/params.json +++ b/params.json @@ -1 +1 @@ -{"name":"Fractal-mosaics","tagline":"Photomosaics 3.0","body":"The Fractal Mosaic algorithm is a rotation, scale, and translation invariant photomosaic algorithm. While traditional photomosaics create a larger image out of smaller square images on a rectangular grid, Fractal Mosaics creates a larger image out of rectangular images that can be placed at arbitrary locations, can be scaled to any size, and can be rotated by any angle. \r\n\r\nThis is accomplished with a combination of image search (i.e. image retrieval) algorithms and an image registration algorithm developed with NASA funding by George Wolberg Siavash Zokai at the City College of New York ([pdf](http://www.researchgate.net/publication/2830220_Robust_Image_Registration_Using_Log-Polar_Transform/file/d912f51116dedc8a30.pdf)).\r\n\r\n![Alt text](https://raw.github.com/s-ben/Fractal-Mosaics/gh-pages/images/eye_mosaic_flickr_800pix.jpg?login=s-ben&token=d045d2a20e53d9009700d6829157669f)\r\n->Figure 1: Fractal Mosaic created with graffiti image set (best viewed [large](https://raw.github.com/s-ben/Fractal-Mosaics/gh-pages/images/eye_mosaic_flickr_large.jpg?login=s-ben&token=87b09134a5f66d314547e419299a65b7)<-\r\n\r\n### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:\r\n\r\n\r\n\r\n```\r\n$ cd your_repo_root/repo_name\r\n$ git fetch origin\r\n$ git checkout gh-pages\r\n```\r\n\r\nIf you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.\r\n\r\n### Designer Templates\r\nWe've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.\r\n\r\n### Rather Drive Stick?\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `` element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out the documentation at http://help.github.com/pages or contact support@github.com and we’ll help you sort it out.","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file +{"name":"Fractal-mosaics","tagline":"Photomosaics 3.0","body":"#Abstract\r\n\r\nThe Fractal Mosaic algorithm is a rotation, scale, and translation invariant photomosaic algorithm. While traditional photomosaics create a larger image out of smaller square images on a rectangular grid, Fractal Mosaics creates a larger image out of rectangular images that can be placed at arbitrary locations, can be scaled to any size, and can be rotated by any angle. \r\n\r\nThis is accomplished with a combination of image search (i.e. image retrieval) algorithms and an image registration algorithm developed with NASA funding by George Wolberg Siavash Zokai at the City College of New York ([pdf](http://www.researchgate.net/publication/2830220_Robust_Image_Registration_Using_Log-Polar_Transform/file/d912f51116dedc8a30.pdf)).\r\n\r\n![Alt text](https://raw.github.com/s-ben/Fractal-Mosaics/gh-pages/images/eye_mosaic_flickr_800pix.jpg?login=s-ben&token=d045d2a20e53d9009700d6829157669f)\r\nFigure 1: Fractal Mosaic created with graffiti image set (best viewed [large](https://raw.github.com/s-ben/Fractal-Mosaics/gh-pages/images/eye_mosaic_flickr_large.jpg?login=s-ben&token=87b09134a5f66d314547e419299a65b7)\r\n\r\nFigure 2 shows three traditional photomosaics created using the same image set and target image. \r\n\r\n![Alt text](https://raw.github.com/s-ben/Fractal-Mosaics/gh-pages/images/Polar_transform.png?login=s-ben&token=4266c061c5056430753c356c941b1938)\r\nFigure 2: Traditional Photomosaics using large tiles (left), medium sized tiles (middle), and small tiles (right)\r\n\r\nAs can be seen, using large tiles (left), finer details are lost. Using small tiles (right), we capture target image details, but can’t see individual image detail. Using medium size tiles (middle), we get a compromise between the two. Fractal Mosaics aims to create mosaics that capture both target image details and individual image details, in an aesthetically interesting way.\r\n\r\nBy allowing for arbitrary placement, rotation, and scaling of the “library images” (images making up the mosaic), there are an many more possible matches to evaluate. This allows for larger, often more aesthetically interesting matches than possible with traditional photomosaics. However, searching such a large solution space on a personal computer presents a challenging problem. This “paper” presents my solution to this problem (two years worth of unpaid work...). It explains the algorithm in depth for those wishing to hack the Matlab code. It should also aid those using the code to create mosaics, as understanding how the algorithm works will help tweak parameters that shape mosaic output.\r\n\r\n# Introduction / Problem Statement\r\n\r\nIn a traditional photomosaic, the number of possible matches is large but still easily manageable on a modern PC. The number of possible matches is simply the number of “tiles” (square areas in the target image) times the number of library images. For each tile, a similarity metric is calculated (root mean squared (rms) error, typically) for every library image. The library image with the smallest rms error is placed in the mosaic.\r\n\r\nIn a Fractal Mosaic, the number of possible possible matches is effectively infinite. For example, let’s say we use 5,000 library images, a 3072 x 1024 pixel target image, and do the following fairly rough quantization of the possible translations, rotations, and scalings: \r\n\r\n* 2 degree rotations (180 possible rotations)\r\n* Every fifth pixel is a possible placement location (629,145 possible translations)\r\n* 50 possible scaling values\r\n\r\nThis gives us (180 rotations) x (629,145 translations) x (50 scalings) x (5,000 library images) = 28,311,525,000,000 possible matches to search. Or ~28 trillion matches. Obviously, a brute force search is not feasible (I tried).\r\n\r\nFractal Mosaics tackles this complexity with three main strategies. One strategy is inherent in the “Log-polar” image registration algorithm at the core of Fractal Mosaics. This algorithm uses a coarse-to-fine multi-resolution framework, whereby estimates computed in lower resolution images are used as initial guesses in higher resolution images. An in-depth explanation of how log polar registration is implemented in Fractal Mosaics is given in the “log-polar registration” section. \r\n\r\nThe second main strategy is to use an image search algorithm to filter out library images that are statistically unlikely to produce a match. Details on this in the ‘Image Search (Retrieval) Filtering’ section. \r\n\r\nThe third main strategy for reducing the number of matches evaluated is to look for large matches first, then not look for smaller matches “under” those matches (i.e., don’t look for matches in areas where we’ve already placed an image). This saves considerable computation. However, it will cause the algorithm to miss aesthetically better matches under the placed matches. For this reason, Fractal Mosaics can be configured to also look for alternate matches under placed images. All matches can optionally be output to PNG files that can be loaded into Photoshop for later compositing. \r\n\r\nThe following sections will walk you through the main pieces of the Fractal Mosaic algorithm. \r\n\r\n* Image Registration\r\n* Image Search (Retrieval)\r\n* Mosaic Rendering\r\n* Conclusions / Future Directions\r\n\r\n\r\n# Image Registration\r\n\r\nImage registration is generally defined as the lining up of images misaligned due to rotation, scale, and position (translation). The field of image registration is mature, constituting of several decades of research. The key insight of Fractal Mosaics is that image registration algorithms can be applied to efficiently search the photomosaic solution space. Instead of evaluating every possible rotation, scaling, and translation for every library image (computationally impossible), we can use image registration to efficiently estimate these parameters. Once these parameters are estimated, they are used to rotate, scale, and translate the library image in question to best match the target image. A similarity metric (rms error in this case) is applied. If the rotated, scaled, and translated library image scores high enough on the similarity metric, it is placed in the mosaic. \r\n\r\n## Registration Algorithm Choice\r\n\r\nAfter an initial survey of the image registration literature, a frequency domain image registration algorithm was evaluated; specifically, Fourier-Mellin-based image registration, as implemented in this [Matlab code](http://www.mathworks.com/matlabcentral/fileexchange/3000-fourier-mellin-based-image-registration-with-gui). This would have been much more computationally efficient than the spatial domain algorithm eventually chosen, as rotation, scale, and translation are efficiently recovered in one step. However, this technique proved not robust enough for the photomosaic application. This is likely because it relies more heavily on the assumption made by all image registration algorithms: that the two images being matched are of the same object/scene. In photomosaics however, we are matching parts of the target image to random library images. The assumption that the library images are rotated, scaled, and translated versions of the target image is weak. \r\n\r\nAn image registration algorithm that operates in the spatial domain was tried; specifically, the “Log-polar registration” algorithm found in the paper “Robust Image Registration Using Log-Polar Transform” ([pdf](http://www.researchgate.net/publication/2830220_Robust_Image_Registration_Using_Log-Polar_Transform/file/d912f51116dedc8a30.pdf). This algorithm proved very robust. And most importantly, it met the main aesthetic criteria: for any two images presented to the algorithm, no matter how dissimilar, it aligned them the way a human would. To test this claim out for yourself, below is a video showing the algorithm at work matching library images to a target image. \r\n\r\n\r\n\r\n\r\n### Welcome to GitHub Pages.\r\nThis automatic page generator is the easiest way to create beautiful pages for all of your projects. Author your page content here using GitHub Flavored Markdown, select a template crafted by a designer, and publish. After your page is generated, you can check out the new branch:\r\n\r\n\r\n\r\n```\r\n$ cd your_repo_root/repo_name\r\n$ git fetch origin\r\n$ git checkout gh-pages\r\n```\r\n\r\nIf you're using the GitHub for Mac, simply sync your repository and you'll see the new branch.\r\n\r\n### Designer Templates\r\nWe've crafted some handsome templates for you to use. Go ahead and continue to layouts to browse through them. You can easily go back to edit your page before publishing. After publishing your page, you can revisit the page generator and switch to another theme. Your Page content will be preserved if it remained markdown format.\r\n\r\n### Rather Drive Stick?\r\nIf you prefer to not use the automatic generator, push a branch named `gh-pages` to your repository to create a page manually. In addition to supporting regular HTML content, GitHub Pages support Jekyll, a simple, blog aware static site generator written by our own Tom Preston-Werner. Jekyll makes it easy to create site-wide headers and footers without having to copy them across every page. It also offers intelligent blog support and other advanced templating features.\r\n\r\n### Authors and Contributors\r\nYou can @mention a GitHub username to generate a link to their profile. The resulting `` element will link to the contributor's GitHub Profile. For example: In 2007, Chris Wanstrath (@defunkt), PJ Hyett (@pjhyett), and Tom Preston-Werner (@mojombo) founded GitHub.\r\n\r\n### Support or Contact\r\nHaving trouble with Pages? Check out the documentation at http://help.github.com/pages or contact support@github.com and we’ll help you sort it out.","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file diff --git a/stylesheets/pygment_trac.css b/stylesheets/pygment_trac.css index d1df6a2..c6a6452 100644 --- a/stylesheets/pygment_trac.css +++ b/stylesheets/pygment_trac.css @@ -1,3 +1,4 @@ +.highlight { background: #ffffff; } .highlight .c { color: #999988; font-style: italic } /* Comment */ .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ .highlight .k { font-weight: bold } /* Keyword */ @@ -34,7 +35,7 @@ .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ .highlight .nn { color: #555555 } /* Name.Namespace */ -.highlight .nt { color: #CBDFFF } /* Name.Tag */ +.highlight .nt { color: #000080 } /* Name.Tag */ .highlight .nv { color: #008080 } /* Name.Variable */ .highlight .ow { font-weight: bold } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ diff --git a/stylesheets/styles.css b/stylesheets/styles.css index e7b4ffc..f14d9e4 100644 --- a/stylesheets/styles.css +++ b/stylesheets/styles.css @@ -1,851 +1,413 @@ -@font-face { - font-family: 'OpenSansLight'; - src: url("../fonts/OpenSans-Light-webfont.eot"); - src: url("../fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Light-webfont.woff") format("woff"), url("../fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Light-webfont.svg#OpenSansLight") format("svg"); - font-weight: normal; - font-style: normal; -} +@import url(https://fonts.googleapis.com/css?family=Arvo:400,700,400italic); -@font-face { - font-family: 'OpenSansLightItalic'; - src: url("../fonts/OpenSans-LightItalic-webfont.eot"); - src: url("../fonts/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-LightItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-LightItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic") format("svg"); - font-weight: normal; - font-style: normal; -} +/* MeyerWeb Reset */ -@font-face { - font-family: 'OpenSansRegular'; - src: url("../fonts/OpenSans-Regular-webfont.eot"); - src: url("../fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular-webfont.woff") format("woff"), url("../fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular") format("svg"); - font-weight: normal; - font-style: normal; - -webkit-font-smoothing: antialiased; -} - -@font-face { - font-family: 'OpenSansItalic'; - src: url("../fonts/OpenSans-Italic-webfont.eot"); - src: url("../fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Italic-webfont.woff") format("woff"), url("../fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic") format("svg"); - font-weight: normal; - font-style: normal; - -webkit-font-smoothing: antialiased; -} - -@font-face { - font-family: 'OpenSansSemibold'; - src: url("../fonts/OpenSans-Semibold-webfont.eot"); - src: url("../fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Semibold-webfont.woff") format("woff"), url("../fonts/OpenSans-Semibold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold") format("svg"); - font-weight: normal; - font-style: normal; - -webkit-font-smoothing: antialiased; -} - -@font-face { - font-family: 'OpenSansSemiboldItalic'; - src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot"); - src: url("../fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-SemiboldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-SemiboldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-SemiboldItalic-webfont.svg#OpenSansSemiboldItalic") format("svg"); - font-weight: normal; - font-style: normal; - -webkit-font-smoothing: antialiased; -} - -@font-face { - font-family: 'OpenSansBold'; - src: url("../fonts/OpenSans-Bold-webfont.eot"); - src: url("../fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Bold-webfont.woff") format("woff"), url("../fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("../fonts/OpenSans-Bold-webfont.svg#OpenSansBold") format("svg"); - font-weight: normal; - font-style: normal; - -webkit-font-smoothing: antialiased; -} - -@font-face { - font-family: 'OpenSansBoldItalic'; - src: url("../fonts/OpenSans-BoldItalic-webfont.eot"); - src: url("../fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-BoldItalic-webfont.woff") format("woff"), url("../fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic") format("svg"); - font-weight: normal; - font-style: normal; - -webkit-font-smoothing: antialiased; -} - -/* normalize.css 2012-02-07T12:37 UTC - http://github.com/necolas/normalize.css */ -/* ============================================================================= - HTML5 display definitions - ========================================================================== */ -/* - * Corrects block display not defined in IE6/7/8/9 & FF3 - */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section, -summary { - display: block; -} - -/* - * Corrects inline-block display not defined in IE6/7/8/9 & FF3 - */ -audio, -canvas, -video { - display: inline-block; - *display: inline; - *zoom: 1; -} - -/* - * Prevents modern browsers from displaying 'audio' without controls - */ -audio:not([controls]) { - display: none; -} - -/* - * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 - * Known issue: no IE6 support - */ -[hidden] { - display: none; -} - -/* ============================================================================= - Base - ========================================================================== */ -/* - * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units - * http://clagnut.com/blog/348/#c790 - * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom - * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ - */ -html { - font-size: 100%; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -ms-text-size-adjust: 100%; - /* 2 */ -} - -/* - * Addresses font-family inconsistency between 'textarea' and other form elements. - */ -html, -button, -input, -select, -textarea { - font-family: sans-serif; -} - -/* - * Addresses margins handled incorrectly in IE6/7 - */ -body { +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { margin: 0; -} - -/* ============================================================================= - Links - ========================================================================== */ -/* - * Addresses outline displayed oddly in Chrome - */ -a:focus { - outline: thin dotted; -} - -/* - * Improves readability when focused and also mouse hovered in all browsers - * people.opera.com/patrickl/experiments/keyboard/test - */ -a:hover, -a:active { - outline: 0; -} - -/* ============================================================================= - Typography - ========================================================================== */ -/* - * Addresses font sizes and margins set differently in IE6/7 - * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5 - */ -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -h2 { - font-size: 1.5em; - margin: 0.83em 0; -} - -h3 { - font-size: 1.17em; - margin: 1em 0; -} - -h4 { - font-size: 1em; - margin: 1.33em 0; -} - -h5 { - font-size: 0.83em; - margin: 1.67em 0; -} - -h6 { - font-size: 0.75em; - margin: 2.33em 0; -} - -/* - * Addresses styling not present in IE7/8/9, S5, Chrome - */ -abbr[title] { - border-bottom: 1px dotted; -} - -/* - * Addresses style set to 'bolder' in FF3+, S4/5, Chrome -*/ -b, -strong { - font-weight: bold; -} - -blockquote { - margin: 1em 40px; -} - -/* - * Addresses styling not present in S5, Chrome - */ -dfn { - font-style: italic; -} - -/* - * Addresses styling not present in IE6/7/8/9 - */ -mark { - background: #ff0; - color: #000; -} - -/* - * Addresses margins set differently in IE6/7 - */ -p, -pre { - margin: 1em 0; -} - -/* - * Corrects font family set oddly in IE6, S4/5, Chrome - * en.wikipedia.org/wiki/User:Davidgothberg/Test59 - */ -pre, -code, -kbd, -samp { - font-family: monospace, serif; - _font-family: 'courier new', monospace; - font-size: 1em; -} - -/* - * 1. Addresses CSS quotes not supported in IE6/7 - * 2. Addresses quote property not supported in S4 - */ -/* 1 */ -q { - quotes: none; -} - -/* 2 */ -q:before, -q:after { - content: ''; - content: none; -} - -small { - font-size: 75%; -} - -/* - * Prevents sub and sup affecting line-height in all browsers - * gist.github.com/413930 - */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; + padding: 0; + border: 0; + font: inherit; vertical-align: baseline; } -sup { - top: -0.5em; -} -sub { - bottom: -0.25em; -} - -/* ============================================================================= - Lists - ========================================================================== */ -/* - * Addresses margins set differently in IE6/7 - */ -dl, -menu, -ol, -ul { - margin: 1em 0; -} - -dd { - margin: 0 0 0 40px; -} - -/* - * Addresses paddings set differently in IE6/7 - */ -menu, -ol, -ul { - padding: 0 0 0 40px; -} - -/* - * Corrects list images handled incorrectly in IE7 - */ -nav ul, -nav ol { - list-style: none; - list-style-image: none; -} - -/* ============================================================================= - Embedded content - ========================================================================== */ -/* - * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3 - * 2. Improves image quality when scaled in IE7 - * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ - */ -img { - border: 0; - /* 1 */ - -ms-interpolation-mode: bicubic; - /* 2 */ -} - -/* - * Corrects overflow displayed oddly in IE9 - */ -svg:not(:root) { - overflow: hidden; -} - -/* ============================================================================= - Figures - ========================================================================== */ -/* - * Addresses margin not present in IE6/7/8/9, S5, O11 - */ -figure { - margin: 0; -} - -/* ============================================================================= - Forms - ========================================================================== */ -/* - * Corrects margin displayed oddly in IE6/7 - */ -form { - margin: 0; -} - -/* - * Define consistent border, margin, and padding - */ -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/* - * 1. Corrects color not being inherited in IE6/7/8/9 - * 2. Corrects text not wrapping in FF3 - * 3. Corrects alignment displayed oddly in IE6/7 - */ -legend { - border: 0; - /* 1 */ - padding: 0; - white-space: normal; - /* 2 */ - *margin-left: -7px; - /* 3 */ -} - -/* - * 1. Corrects font size not being inherited in all browsers - * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome - * 3. Improves appearance and consistency in all browsers - */ -button, -input, -select, -textarea { - font-size: 100%; - /* 1 */ - margin: 0; - /* 2 */ - vertical-align: baseline; - /* 3 */ - *vertical-align: middle; - /* 3 */ -} - -/* - * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet - */ -button, -input { - line-height: normal; - /* 1 */ -} - -/* - * 1. Improves usability and consistency of cursor style between image-type 'input' and others - * 2. Corrects inability to style clickable 'input' types in iOS - * 3. Removes inner spacing in IE7 without affecting normal text inputs - * Known issue: inner spacing remains in IE6 - */ -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - cursor: pointer; - /* 1 */ - -webkit-appearance: button; - /* 2 */ - *overflow: visible; - /* 3 */ -} - -/* - * Re-set default cursor for disabled elements - */ -button[disabled], -input[disabled] { - cursor: default; -} - -/* - * 1. Addresses box sizing set to content-box in IE8/9 - * 2. Removes excess padding in IE8/9 - * 3. Removes excess padding in IE7 - Known issue: excess padding remains in IE6 - */ -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ - *height: 13px; - /* 3 */ - *width: 13px; - /* 3 */ -} - -/* - * 1. Addresses appearance set to searchfield in S5, Chrome - * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof) - */ -input[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - /* 2 */ - box-sizing: content-box; -} - -/* - * Removes inner padding and search cancel button in S5, Chrome on OS X - */ -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; -} - -/* - * Removes inner padding and border in FF3+ - * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ - */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/* - * 1. Removes default vertical scrollbar in IE6/7/8/9 - * 2. Improves readability and alignment in all browsers - */ -textarea { - overflow: auto; - /* 1 */ - vertical-align: top; - /* 2 */ -} - -/* ============================================================================= - Tables - ========================================================================== */ -/* - * Remove most spacing between table cells - */ -table { - border-collapse: collapse; - border-spacing: 0; -} +/* Base text styles */ body { - padding: 0px 0 20px 0px; - margin: 0px; - font: 14px/1.5 "OpenSansRegular", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #f0e7d5; - font-weight: normal; - background: #252525; - background-attachment: fixed !important; - background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2a2a29), color-stop(100%, #1c1c1c)); - background: -webkit-linear-gradient(#2a2a29, #1c1c1c); - background: -moz-linear-gradient(#2a2a29, #1c1c1c); - background: -o-linear-gradient(#2a2a29, #1c1c1c); - background: -ms-linear-gradient(#2a2a29, #1c1c1c); - background: linear-gradient(#2a2a29, #1c1c1c); + padding:10px 50px 0 0; + font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + color: #232323; + background-color: #FBFAF7; + margin: 0; + line-height: 1.8em; + -webkit-font-smoothing: antialiased; + } h1, h2, h3, h4, h5, h6 { - color: #e8e8e8; - margin: 0 0 10px; - font-family: 'OpenSansRegular', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; + color:#232323; + margin:36px 0 10px; } -p, ul, ol, table, pre, dl { - margin: 0 0 20px; +p, ul, ol, table, dl { + margin:0 0 22px; } h1, h2, h3 { - line-height: 1.1; + font-family: Arvo, Monaco, serif; + line-height:1.3; + font-weight: normal; +} + +h1,h2, h3 { + display: block; + border-bottom: 1px solid #ccc; + padding-bottom: 5px; } h1 { - font-size: 28px; + font-size: 30px; } h2 { - font-size: 24px; -} - -h4, h5, h6 { - color: #e8e8e8; + font-size: 24px; } h3 { - font-size: 18px; - line-height: 24px; - font-family: 'OpenSansRegular', "Helvetica Neue", Helvetica, Arial, sans-serif !important; - font-weight: normal; - color: #b6b6b6; + font-size: 18px; +} + +h4, h5, h6 { + font-family: Arvo, Monaco, serif; + font-weight: 700; } a { - color: #ffcc00; - font-weight: 400; - text-decoration: none; + color:#C30000; + font-weight:200; + text-decoration:none; } + a:hover { - color: #ffeb9b; + text-decoration: underline; } a small { - font-size: 11px; - color: #666; - margin-top: -0.6em; - display: block; + font-size: 12px; } -ul { - list-style-image: url("../images/bullet.png"); +em { + font-style: italic; } strong { - font-family: 'OpenSansBold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; - font-weight: normal; + font-weight:700; } -.wrapper { - max-width: 650px; - margin: 0 auto; - position: relative; - padding: 0 20px; +ul li { + list-style: inside; + padding-left: 25px; } -section img { - max-width: 100%; +ol li { + list-style: decimal inside; + padding-left: 20px; } blockquote { - border-left: 3px solid #ffcc00; margin: 0; padding: 0 0 0 20px; font-style: italic; } -code { - font-family: "Lucida Sans", Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal; - color: #efefef; - font-size: 13px; - margin: 0 4px; - padding: 4px 6px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -o-border-radius: 2px; - -ms-border-radius: 2px; - -khtml-border-radius: 2px; - border-radius: 2px; +dl, dt, dd, dl p { + font-color: #444; } -pre { - padding: 8px 15px; - background: #191919; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -o-border-radius: 2px; - -ms-border-radius: 2px; - -khtml-border-radius: 2px; - border-radius: 2px; - border: 1px solid #121212; - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); - -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); - overflow: auto; - overflow-y: hidden; -} -pre code { - color: #efefef; - text-shadow: 0px 1px 0px #000; - margin: 0; - padding: 0; +dl dt { + font-weight: bold; } -table { - width: 100%; - border-collapse: collapse; +dl dd { + padding-left: 20px; + font-style: italic; } -th { - text-align: left; - padding: 5px 10px; - border-bottom: 1px solid #434343; - color: #b6b6b6; - font-family: 'OpenSansSemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; - font-weight: normal; -} - -td { - text-align: left; - padding: 5px 10px; - border-bottom: 1px solid #434343; +dl p { + padding-left: 20px; + font-style: italic; } hr { - border: 0; - outline: none; - height: 3px; - background: transparent url("../images/hr.gif") center center repeat-x; - margin: 0 0 20px; + border:0; + background:#ccc; + height:1px; + margin:0 0 24px; } -dt { - color: #F0E7D5; - font-family: 'OpenSansSemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; - font-weight: normal; -} +/* Images */ -#header { - z-index: 100; - left: 0; - top: 0px; - height: 60px; - width: 100%; - position: fixed; - background: url(../images/nav-bg.gif) #353535; - border-bottom: 4px solid #434343; - -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); - -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); - -o-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); - box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25); -} -#header nav { - max-width: 650px; +img { + position: relative; margin: 0 auto; - padding: 0 10px; - background: blue; - margin: 6px auto; + max-width: 650px; + padding: 5px; + margin: 10px 0 32px 0; + border: 1px solid #ccc; } -#header nav li { - font-family: 'OpenSansLight', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; - list-style: none; - display: inline; - color: white; - line-height: 50px; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2); - font-size: 14px; + + +/* Code blocks */ + +code, pre { + font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; + color:#000; + font-size:14px; } -#header nav li a { - color: white; - border: 1px solid #5d910b; - background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #93bd20), color-stop(100%, #659e10)); - background: -webkit-linear-gradient(#93bd20, #659e10); - background: -moz-linear-gradient(#93bd20, #659e10); - background: -o-linear-gradient(#93bd20, #659e10); - background: -ms-linear-gradient(#93bd20, #659e10); - background: linear-gradient(#93bd20, #659e10); - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - -o-border-radius: 2px; - -ms-border-radius: 2px; - -khtml-border-radius: 2px; - border-radius: 2px; - -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 3px 7px rgba(0, 0, 0, 0.7); - -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 3px 7px rgba(0, 0, 0, 0.7); - -o-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 3px 7px rgba(0, 0, 0, 0.7); - box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3), 0px 3px 7px rgba(0, 0, 0, 0.7); - background-color: #93bd20; - padding: 10px 12px; - margin-top: 6px; - line-height: 14px; - font-size: 14px; - display: inline-block; - text-align: center; + +pre { + padding: 4px 12px; + background: #FDFEFB; + border-radius:4px; + border:1px solid #D7D8C8; + overflow: auto; + overflow-y: hidden; + margin-bottom: 32px; } -#header nav li a:hover { - background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #749619), color-stop(100%, #527f0e)); - background: -webkit-linear-gradient(#749619, #527f0e); - background: -moz-linear-gradient(#749619, #527f0e); - background: -o-linear-gradient(#749619, #527f0e); - background: -ms-linear-gradient(#749619, #527f0e); - background: linear-gradient(#749619, #527f0e); - background-color: #659e10; - border: 1px solid #527f0e; - -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(0, 0, 0, 0); - -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(0, 0, 0, 0); - -o-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(0, 0, 0, 0); - box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 1px 0px rgba(0, 0, 0, 0); + + +/* Tables */ + +table { + width:100%; } -#header nav li.fork { - float: left; - margin-left: 0px; + +table { + border: 1px solid #ccc; + margin-bottom: 32px; + text-align: left; + } + +th { + font-family: 'Arvo', Helvetica, Arial, sans-serif; + font-size: 18px; + font-weight: normal; + padding: 10px; + background: #232323; + color: #FDFEFB; + } + +td { + padding: 10px; + background: #ccc; + } + + +/* Wrapper */ +.wrapper { + width:960px; } -#header nav li.downloads { - float: right; - margin-left: 6px; + + +/* Header */ + +header { + background-color: #171717; + color: #FDFDFB; + width:170px; + float:left; + position:fixed; + border: 1px solid #000; + -webkit-border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-topright: 4px; + -moz-border-radius-bottomright: 4px; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + padding: 34px 25px 22px 50px; + margin: 30px 25px 0 0; + -webkit-font-smoothing: antialiased; } -#header nav li.title { - float: right; - margin-right: 10px; - font-size: 11px; + +p.header { + font-size: 16px; } +h1.header { + font-family: Arvo, sans-serif; + font-size: 30px; + font-weight: 300; + line-height: 1.3em; + border-bottom: none; + margin-top: 0; +} + + +h1.header, a.header, a.name, header a{ + color: #fff; +} + +a.header { + text-decoration: underline; +} + +a.name { + white-space: nowrap; +} + +header ul { + list-style:none; + padding:0; +} + +header li { + list-style-type: none; + width:132px; + height:15px; + margin-bottom: 12px; + line-height: 1em; + padding: 6px 6px 6px 7px; + + background: #AF0011; + background: -moz-linear-gradient(top, #AF0011 0%, #820011 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd)); + background: -webkit-linear-gradient(top, #AF0011 0%,#820011 100%); + background: -o-linear-gradient(top, #AF0011 0%,#820011 100%); + background: -ms-linear-gradient(top, #AF0011 0%,#820011 100%); + background: linear-gradient(top, #AF0011 0%,#820011 100%); + + border-radius:4px; + border:1px solid #0D0D0D; + + -webkit-box-shadow: inset 0px 1px 1px 0 rgba(233,2,38, 1); + box-shadow: inset 0px 1px 1px 0 rgba(233,2,38, 1); + +} + +header li:hover { + background: #C3001D; + background: -moz-linear-gradient(top, #C3001D 0%, #950119 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd)); + background: -webkit-linear-gradient(top, #C3001D 0%,#950119 100%); + background: -o-linear-gradient(top, #C3001D 0%,#950119 100%); + background: -ms-linear-gradient(top, #C3001D 0%,#950119 100%); + background: linear-gradient(top, #C3001D 0%,#950119 100%); +} + +a.buttons { + -webkit-font-smoothing: antialiased; + background: url(../images/arrow-down.png) no-repeat; + font-weight: normal; + text-shadow: rgba(0, 0, 0, 0.4) 0 -1px 0; + padding: 2px 2px 2px 22px; + height: 30px; +} + +a.github { + background: url(../images/octocat-small.png) no-repeat 1px; +} + +a.buttons:hover { + color: #fff; + text-decoration: none; +} + + +/* Section - for main page content */ + section { - max-width: 650px; - padding: 30px 0px 50px 0px; - margin: 20px 0; - margin-top: 70px; -} -section #title { - border: 0; - outline: none; - margin: 0 0 50px 0; - padding: 0 0 5px 0; -} -section #title h1 { - font-family: 'OpenSansLight', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; - font-size: 40px; - text-align: center; - line-height: 36px; -} -section #title p { - color: #d7cfbe; - font-family: 'OpenSansLight', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; - font-size: 18px; - text-align: center; -} -section #title .credits { - font-size: 11px; - font-family: 'OpenSansRegular', "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; - color: #696969; - margin-top: -10px; -} -section #title .credits.left { - float: left; -} -section #title .credits.right { - float: right; + width:650px; + float:right; + padding-bottom:50px; } -@media print, screen and (max-width: 720px) { - #title .credits { - display: block; - width: 100%; - line-height: 30px; - text-align: center; - } - #title .credits .left { - float: none; - display: block; - } - #title .credits .right { - float: none; - display: block; - } + +/* Footer */ + +footer { + width:170px; + float:left; + position:fixed; + bottom:10px; + padding-left: 50px; } -@media print, screen and (max-width: 480px) { - #header { - margin-top: -20px; + +@media print, screen and (max-width: 960px) { + + div.wrapper { + width:auto; + margin:0; + } + + header, section, footer { + float:none; + position:static; + width:auto; + } + + footer { + border-top: 1px solid #ccc; + margin:0 84px 0 50px; + padding:0; + } + + header { + padding-right:320px; } section { - margin-top: 40px; + padding:20px 84px 20px 50px; + margin:0 0 20px; } - nav { - display: none; + header a small { + display:inline; + } + + header ul { + position:absolute; + right:130px; + top:84px; } } + +@media print, screen and (max-width: 720px) { + body { + word-wrap:break-word; + } + + header { + padding:10px 20px 0; + margin-right: 0; + } + + section { + padding:10px 0 10px 20px; + margin:0 0 30px; + } + + footer { + margin: 0 0 0 30px; + } + + header ul, header p.view { + position:static; + } +} + +@media print, screen and (max-width: 480px) { + + header ul li.download { + display:none; + } + + footer { + margin: 0 0 0 20px; + } + + footer a{ + display:block; + } + +} + +@media print { + body { + padding:0.4in; + font-size:12pt; + color:#444; + } +} \ No newline at end of file