+
+
-
+
+
+
+
+ This program is a student template of a project for Image processing course. During 15 laboratories the students have to program a mini-GIMP application.
+
+The code is written in C++ which uses Qt library; tested 5.1.1 version, should compile and run on Windows (MinGW or MSVC), Linux and MacOS. The code may be completed in Qt Creator or Visual Studio. The program works with all Netpbm files as well as JPEG, PNG, etc.
+
+The program has the following image processing procedures to be completed:
+
+
+- negative (already done as an example),
+- grayscale conversion,
+- correction (brightness, contrast and gamma),
+- histogram (construction, stretching and equalizing),
+- convolution (with custom filter),
+- blurring (uniform and Gaussian),
+- binarization (manual, gradient, iterative bimodal, Otsu and Niblack),
+- noise reduction (median and bilateral),
+- morphology (structural elements, dilation, erosion, opening and closing),
+- edge detection (Roberts, Prewitt, Sobel, Laplacian with zero-crossing and Canny),
+- procedural textures (height map, normal mapping, horizon mapping and Perlin noise),
+- lines and rectangles detection (Hough),
+- corners detection (Harris),
+- segmentation (watershed).
+
+
+The completed version of the project is stored on the different private repository. It is stored for lecturer's as a helpfull tool to assess students' solutions. If you need it, please send me an e-mail.
+
+
+Screenshots
+
+The following screenshots regards to completed version of the program:
+
+
+
+
+
+
+
+
+Documentation
+
+The project consists of 3 folders:
+
+
+-
+images - contains images saved in
pnm format,
+-
+res - here are icons for the program,
+-
+src - main sources.
+
+
+In sources you can find two modules:
+
+
+-
+core - files concering loading and saving images and transofmations,
+-
+gui - everything related to a graphic user interface.
+
+
+Writing solutions means completing the .cpp files in a directory src/core/transformations/ and a file src/core/histogram.cpp.
+
+A hint that something needs to be implement is:
+
+qDebug() << Q_FUNC_INFO << "Not implemented yet!";
+Debugging
+
+If you like debugging by printing values of variables you just need to use qDebug() in the following way:
+
+qDebug() << "width =" << image->width();
+PNM class
+
+Main class to handle an image is PNM which inherits QImage. Main methods are:
+
+
+-
+pixel(...) - getting a value of a given pixel of an image,
+-
+setPixel(...) - saving in the image given value of a pixel,
+-
+format() - getting a format of the image.
+
+
+We are interested only in three formats of images:
+
+
+-
+QImage::Format_Mono - black and white,
+-
+QImage::Format_Indexed8 - grayscale,
+-
+QImage::Format_RGB32 - 3-channels color.
+
+
+To get a value of a pixel from a desired channel some functions from QColor will be helpful:
+
+
+-
+qRed(...),
+-
+qGreen(...),
+-
+qBlue(...),
+-
+qGray(...).
+
+
+An example is in src/core/transformations/negative_image.cpp
+
+
+Automatic loading of an image
+
+If you setup a working directory on a folder images then when you run the program you should see on the screen lenna_512x512.pnm.
+
+More information you will find at the top of src/gui/mainwindow.h.
+
+During compilation you might find useful automatic launching of a transformation.
+
+
+Signals
+
+Some of next transformations may perform a bit longer so it will be OK to display some auxiliary messages. You may achieve it by so-called signals:
+
+
+-
+message(QString),
+-
+progress(int).
+
+
+Example:
+
+emit message("Edge detection...");or
+
+emit progress(100*x/double(image->width()));
+Mixing transformations
+
+Some of transformations need using others. In transformations you must use transform() method, i.e.:
+
+PNM* grayImage = ConversionGrayscale(image).transform();
Most of the transformations use parameters (constants, sigmas, regions etc.). It's done by methods:
+
+
+-
+setParameter(...),
+-
+getParameter(...).
+
+
+An exemplar use is in a file src/core/tools.cpp or src/core/transformations/edge_canny.cpp
+
+In order to display messages or progress of used transformation you must put in its construction an instance of ImageViewer, i.e.:
+
+emit message("Blurring...");
+
+BlurGaussian blurTrans(grayImage, getSupervisor());
+blurTrans.setParameter("size", 3);
+blurTrans.setParameter("sigma", 1.6);
+
+PNM* blurredImage = blurTrans.transform();Please remember to delete redundant variables before you return a result, i.e.:
+
+delete grayImage;
+
+return newImage;
+Possible performance increase
+
+
+- resign from
src/core/matrix.h and work directly on arrays,
+- avoid
QImage::pixel(...) and QImage::setPixel(...) and work directly on arrays given by QImage::bits()
+
+
+
+
+Programming in Visual Studio 2012 with Image Watch extenstion
+
+There is Visual Studio Add-in for Qt5 so you don't have to use Qt Creator and what's more, debugging is far easier and faster.
+
+Microsoft released Image Watch extension which allows to display an image during debugging.
+
+
+- import the project (
QT5 > Open Qt Project File (.pro)...),
+- open
pnm.h file and uncomment lines 11-13,
+- add to your project a path to a directory with private Qt headers (in Solution Explorer
Properties > Configuration Properties > C/C++ > General > Additional Include Directories):
+
+
+- this can be for example
C:\software\qt\5.1.1\msvc2012\include\QtGui\5.1.1.
+
+
+- to your directory
Documents\Visual Studio 2012\Visualizers copy src\core\pnm.natvis,
+- install Image Watch extension (
Tools > Extensions and Updates... and in Online search Image Watch).
+
+
+Effects you can check on the negative operation. During debugging you have to display Image Watch window (View > Other Windows > Image Watch) and when the debugger reaches breakpoints you can watch any PNM-type variable (with the exception of binary images! but you can handle this by conversion to a grayscale). When you click on a variable you must also tick 4-Channel Ignore Alpha.
+
+
+
+
+Credits
+
+Co-author of the project is Krzysztof Szarzyński.
+
+
+
+
+
+
+
diff --git a/javascripts/main.js b/javascripts/main.js
new file mode 100644
index 0000000..d8135d3
--- /dev/null
+++ b/javascripts/main.js
@@ -0,0 +1 @@
+console.log('This would be the main JS file.');
diff --git a/params.json b/params.json
index 9ac9e9e..a50aacc 100644
--- a/params.json
+++ b/params.json
@@ -1 +1 @@
-{"name":"Image-processing-project-student","tagline":"Mini GIMP","body":"temp\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
\ No newline at end of file
+{"name":"Mini-GIMP template project for Image processing course","tagline":"","body":"This program is a student template of a project for **Image processing** course. During 15 laboratories the students have to program a mini-GIMP application.\r\n\r\nThe code is written in C++ which uses [Qt](https://www.qt.io) library; tested 5.1.1 version, should compile and run on Windows (MinGW or MSVC), Linux and MacOS. The code may be completed in Qt Creator or Visual Studio. The program works with all [Netpbm](http://en.wikipedia.org/wiki/Portable_anymap) files as well as JPEG, PNG, etc.\r\n\r\nThe program has the following image processing procedures to be completed:\r\n\r\n1. negative (already done as an example),\r\n2. grayscale conversion,\r\n3. correction (brightness, contrast and gamma),\r\n4. histogram (construction, stretching and equalizing),\r\n5. convolution (with custom filter),\r\n6. blurring (uniform and Gaussian),\r\n7. binarization (manual, gradient, iterative bimodal, Otsu and Niblack),\r\n8. noise reduction (median and bilateral),\r\n9. morphology (structural elements, dilation, erosion, opening and closing),\r\n10. edge detection (Roberts, Prewitt, Sobel, Laplacian with zero-crossing and Canny),\r\n11. procedural textures (height map, normal mapping, horizon mapping and Perlin noise),\r\n12. lines and rectangles detection (Hough),\r\n13. corners detection (Harris),\r\n14. segmentation (watershed).\r\n\r\n**The completed version of the project is stored on the different private repository**. It is stored for lecturer's as a helpfull tool to assess students' solutions. If you need it, please send me an e-mail.\r\n\r\n# Screenshots\r\n\r\nThe following screenshots regards to completed version of the program:\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n# Documentation\r\n\r\nThe project consists of 3 folders:\r\n* **images** - contains images saved in `pnm` format,\r\n* **res** - here are icons for the program,\r\n* **src** - main sources.\r\n \r\nIn sources you can find two modules:\r\n* **core** - files concering loading and saving images and transofmations,\r\n* **gui** - everything related to a graphic user interface.\r\n \r\nWriting solutions means completing the `.cpp` files in a directory `src/core/transformations/` and a file `src/core/histogram.cpp`. \r\n\r\nA hint that something needs to be implement is:\r\n\r\n```cpp\r\nqDebug() << Q_FUNC_INFO << \"Not implemented yet!\";\r\n```\r\n\r\n## Debugging\r\n\r\nIf you like debugging by printing values of variables you just need to use `qDebug()` in the following way:\r\n\r\n```cpp\r\nqDebug() << \"width =\" << image->width();\r\n```\r\n\r\n## PNM class\r\n\r\nMain class to handle an image is **PNM** which inherits [QImage](http://qt-project.org/doc/qt-5.1/qtgui/qimage.html). Main methods are:\r\n * **pixel(...)** - getting a value of a given pixel of an image,\r\n * **setPixel(...)** - saving in the image given value of a pixel,\r\n * **format()** - getting a format of the image.\r\n \r\nWe are interested only in three formats of images:\r\n * **QImage::Format_Mono** - black and white,\r\n * **QImage::Format_Indexed8** - grayscale,\r\n * **QImage::Format_RGB32** - 3-channels color.\r\n \r\nTo get a value of a pixel from a desired channel some functions from [QColor](http://qt-project.org/doc/qt-5.1/qtgui/qcolor.html) will be helpful:\r\n * **qRed(...)**,\r\n * **qGreen(...)**,\r\n * **qBlue(...)**,\r\n * **qGray(...)**.\r\n \r\nAn example is in `src/core/transformations/negative_image.cpp`\r\n\r\n## Automatic loading of an image\r\n\r\nIf you setup a working directory on a folder `images` then when you run the program you should see on the screen `lenna_512x512.pnm`.\r\n\r\nMore information you will find at the top of `src/gui/mainwindow.h`.\r\n\r\nDuring compilation you might find useful automatic launching of a transformation.\r\n \r\n## Signals\r\n\r\nSome of next transformations may perform a bit longer so it will be OK to display some auxiliary messages. You may achieve it by so-called signals:\r\n * **message(QString)**,\r\n * **progress(int)**.\r\n \r\nExample:\r\n```cpp\r\nemit message(\"Edge detection...\");\r\n```\r\n\r\nor\r\n\r\n```cpp\r\nemit progress(100*x/double(image->width()));\r\n```\r\n\r\n## Mixing transformations\r\n\r\nSome of transformations need using others. In transformations you must use `transform()` method, i.e.:\r\n\r\n```cpp\r\nPNM* grayImage = ConversionGrayscale(image).transform();\r\n```\r\n\r\nMost of the transformations use parameters (constants, sigmas, regions etc.). It's done by methods:\r\n * **setParameter(...)**,\r\n * **getParameter(...)**.\r\n \r\nAn exemplar use is in a file `src/core/tools.cpp` or `src/core/transformations/edge_canny.cpp`\r\n\r\nIn order to display messages or progress of used transformation you must put in its construction an instance of `ImageViewer`, i.e.:\r\n\r\n```cpp\r\nemit message(\"Blurring...\");\r\n\r\nBlurGaussian blurTrans(grayImage, getSupervisor());\r\nblurTrans.setParameter(\"size\", 3);\r\nblurTrans.setParameter(\"sigma\", 1.6);\r\n\r\nPNM* blurredImage = blurTrans.transform();\r\n```\r\n\r\nPlease remember to delete redundant variables before you return a result, i.e.:\r\n\r\n```cpp\r\ndelete grayImage;\r\n\r\nreturn newImage;\r\n```\r\n\r\n## Possible performance increase\r\n\r\n * resign from `src/core/matrix.h` and work directly on arrays,\r\n * avoid `QImage::pixel(...)` and `QImage::setPixel(...)` and work directly on arrays given by `QImage::bits()`\r\n\r\n\r\n# Programming in Visual Studio 2012 with Image Watch extenstion\r\n\r\nThere is [Visual Studio Add-in](https://download.qt.io/official_releases/vsaddin/) for Qt5 so you don't have to use Qt Creator and what's more, debugging is far easier and faster.\r\n\r\nMicrosoft released [Image Watch](https://visualstudiogallery.msdn.microsoft.com/e682d542-7ef3-402c-b857-bbfba714f78d) extension which allows to display an image during debugging.\r\n\r\n1. import the project (`QT5 > Open Qt Project File (.pro)...`),\r\n1. open `pnm.h` file and uncomment lines 11-13,\r\n1. add to your project a path to a directory with private Qt headers (in _Solution Explorer_ `Properties > Configuration Properties > C/C++ > General > Additional Include Directories`):\r\n * this can be for example `C:\\software\\qt\\5.1.1\\msvc2012\\include\\QtGui\\5.1.1`. \r\n1. to your directory `Documents\\Visual Studio 2012\\Visualizers` copy `src\\core\\pnm.natvis`,\r\n1. install **Image Watch** extension (`Tools > Extensions and Updates...` and in _Online_ search _Image Watch_).\r\n\r\nEffects you can check on the negative operation. During debugging you have to display _Image Watch_ window (`View > Other Windows > Image Watch`) and when the debugger reaches breakpoints you can watch any PNM-type variable (with the exception of binary images! but you can handle this by conversion to a grayscale). When you click on a variable you must also tick _4-Channel Ignore Alpha_.\r\n\r\n\r\n\r\n# Credits\r\nCo-author of the project is [Krzysztof Szarzyński](http://quati.pl). ","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/github-light.css b/stylesheets/github-light.css
new file mode 100644
index 0000000..872a6f4
--- /dev/null
+++ b/stylesheets/github-light.css
@@ -0,0 +1,116 @@
+/*
+ Copyright 2014 GitHub Inc.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+*/
+
+.pl-c /* comment */ {
+ color: #969896;
+}
+
+.pl-c1 /* constant, markup.raw, meta.diff.header, meta.module-reference, meta.property-name, support, support.constant, support.variable, variable.other.constant */,
+.pl-s .pl-v /* string variable */ {
+ color: #0086b3;
+}
+
+.pl-e /* entity */,
+.pl-en /* entity.name */ {
+ color: #795da3;
+}
+
+.pl-s .pl-s1 /* string source */,
+.pl-smi /* storage.modifier.import, storage.modifier.package, storage.type.java, variable.other, variable.parameter.function */ {
+ color: #333;
+}
+
+.pl-ent /* entity.name.tag */ {
+ color: #63a35c;
+}
+
+.pl-k /* keyword, storage, storage.type */ {
+ color: #a71d5d;
+}
+
+.pl-pds /* punctuation.definition.string, string.regexp.character-class */,
+.pl-s /* string */,
+.pl-s .pl-pse .pl-s1 /* string punctuation.section.embedded source */,
+.pl-sr /* string.regexp */,
+.pl-sr .pl-cce /* string.regexp constant.character.escape */,
+.pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */,
+.pl-sr .pl-sre /* string.regexp source.ruby.embedded */ {
+ color: #183691;
+}
+
+.pl-v /* variable */ {
+ color: #ed6a43;
+}
+
+.pl-id /* invalid.deprecated */ {
+ color: #b52a1d;
+}
+
+.pl-ii /* invalid.illegal */ {
+ background-color: #b52a1d;
+ color: #f8f8f8;
+}
+
+.pl-sr .pl-cce /* string.regexp constant.character.escape */ {
+ color: #63a35c;
+ font-weight: bold;
+}
+
+.pl-ml /* markup.list */ {
+ color: #693a17;
+}
+
+.pl-mh /* markup.heading */,
+.pl-mh .pl-en /* markup.heading entity.name */,
+.pl-ms /* meta.separator */ {
+ color: #1d3e81;
+ font-weight: bold;
+}
+
+.pl-mq /* markup.quote */ {
+ color: #008080;
+}
+
+.pl-mi /* markup.italic */ {
+ color: #333;
+ font-style: italic;
+}
+
+.pl-mb /* markup.bold */ {
+ color: #333;
+ font-weight: bold;
+}
+
+.pl-md /* markup.deleted, meta.diff.header.from-file */ {
+ background-color: #ffecec;
+ color: #bd2c00;
+}
+
+.pl-mi1 /* markup.inserted, meta.diff.header.to-file */ {
+ background-color: #eaffea;
+ color: #55a532;
+}
+
+.pl-mdr /* meta.diff.range */ {
+ color: #795da3;
+ font-weight: bold;
+}
+
+.pl-mo /* meta.output */ {
+ color: #1d3e81;
+}
+
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
new file mode 100644
index 0000000..3da3485
--- /dev/null
+++ b/stylesheets/stylesheet.css
@@ -0,0 +1,425 @@
+/*******************************************************************************
+Slate Theme for GitHub Pages
+by Jason Costello, @jsncostello
+*******************************************************************************/
+
+@import url(github-light.css);
+
+/*******************************************************************************
+MeyerWeb Reset
+*******************************************************************************/
+
+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;
+ padding: 0;
+ border: 0;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+
+ol, ul {
+ list-style: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+/*******************************************************************************
+Theme Styles
+*******************************************************************************/
+
+body {
+ box-sizing: border-box;
+ color:#373737;
+ background: #212121;
+ font-size: 16px;
+ font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ margin: 10px 0;
+ font-weight: 700;
+ color:#222222;
+ font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif;
+ letter-spacing: -1px;
+}
+
+h1 {
+ font-size: 36px;
+ font-weight: 700;
+}
+
+h2 {
+ padding-bottom: 10px;
+ font-size: 32px;
+ background: url('../images/bg_hr.png') repeat-x bottom;
+}
+
+h3 {
+ font-size: 24px;
+}
+
+h4 {
+ font-size: 21px;
+}
+
+h5 {
+ font-size: 18px;
+}
+
+h6 {
+ font-size: 16px;
+}
+
+p {
+ margin: 10px 0 15px 0;
+}
+
+footer p {
+ color: #f2f2f2;
+}
+
+a {
+ text-decoration: none;
+ color: #007edf;
+ text-shadow: none;
+
+ transition: color 0.5s ease;
+ transition: text-shadow 0.5s ease;
+ -webkit-transition: color 0.5s ease;
+ -webkit-transition: text-shadow 0.5s ease;
+ -moz-transition: color 0.5s ease;
+ -moz-transition: text-shadow 0.5s ease;
+ -o-transition: color 0.5s ease;
+ -o-transition: text-shadow 0.5s ease;
+ -ms-transition: color 0.5s ease;
+ -ms-transition: text-shadow 0.5s ease;
+}
+
+a:hover, a:focus {text-decoration: underline;}
+
+footer a {
+ color: #F2F2F2;
+ text-decoration: underline;
+}
+
+em {
+ font-style: italic;
+}
+
+strong {
+ font-weight: bold;
+}
+
+img {
+ position: relative;
+ margin: 0 auto;
+ max-width: 739px;
+ padding: 5px;
+ margin: 10px 0 10px 0;
+ border: 1px solid #ebebeb;
+
+ box-shadow: 0 0 5px #ebebeb;
+ -webkit-box-shadow: 0 0 5px #ebebeb;
+ -moz-box-shadow: 0 0 5px #ebebeb;
+ -o-box-shadow: 0 0 5px #ebebeb;
+ -ms-box-shadow: 0 0 5px #ebebeb;
+}
+
+p img {
+ display: inline;
+ margin: 0;
+ padding: 0;
+ vertical-align: middle;
+ text-align: center;
+ border: none;
+}
+
+pre, code {
+ width: 100%;
+ color: #222;
+ background-color: #fff;
+
+ font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
+ font-size: 14px;
+
+ border-radius: 2px;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+}
+
+pre {
+ width: 100%;
+ padding: 10px;
+ box-shadow: 0 0 10px rgba(0,0,0,.1);
+ overflow: auto;
+}
+
+code {
+ padding: 3px;
+ margin: 0 3px;
+ box-shadow: 0 0 10px rgba(0,0,0,.1);
+}
+
+pre code {
+ display: block;
+ box-shadow: none;
+}
+
+blockquote {
+ color: #666;
+ margin-bottom: 20px;
+ padding: 0 0 0 20px;
+ border-left: 3px solid #bbb;
+}
+
+
+ul, ol, dl {
+ margin-bottom: 15px
+}
+
+ul {
+ list-style-position: inside;
+ list-style: disc;
+ padding-left: 20px;
+}
+
+ol {
+ list-style-position: inside;
+ list-style: decimal;
+ padding-left: 20px;
+}
+
+dl dt {
+ font-weight: bold;
+}
+
+dl dd {
+ padding-left: 20px;
+ font-style: italic;
+}
+
+dl p {
+ padding-left: 20px;
+ font-style: italic;
+}
+
+hr {
+ height: 1px;
+ margin-bottom: 5px;
+ border: none;
+ background: url('../images/bg_hr.png') repeat-x center;
+}
+
+table {
+ border: 1px solid #373737;
+ margin-bottom: 20px;
+ text-align: left;
+ }
+
+th {
+ font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ padding: 10px;
+ background: #373737;
+ color: #fff;
+ }
+
+td {
+ padding: 10px;
+ border: 1px solid #373737;
+ }
+
+form {
+ background: #f2f2f2;
+ padding: 20px;
+}
+
+/*******************************************************************************
+Full-Width Styles
+*******************************************************************************/
+
+.outer {
+ width: 100%;
+}
+
+.inner {
+ position: relative;
+ max-width: 640px;
+ padding: 20px 10px;
+ margin: 0 auto;
+}
+
+#forkme_banner {
+ display: block;
+ position: absolute;
+ top:0;
+ right: 10px;
+ z-index: 10;
+ padding: 10px 50px 10px 10px;
+ color: #fff;
+ background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%;
+ font-weight: 700;
+ box-shadow: 0 0 10px rgba(0,0,0,.5);
+ border-bottom-left-radius: 2px;
+ border-bottom-right-radius: 2px;
+}
+
+#header_wrap {
+ background: #212121;
+ background: -moz-linear-gradient(top, #373737, #212121);
+ background: -webkit-linear-gradient(top, #373737, #212121);
+ background: -ms-linear-gradient(top, #373737, #212121);
+ background: -o-linear-gradient(top, #373737, #212121);
+ background: linear-gradient(top, #373737, #212121);
+}
+
+#header_wrap .inner {
+ padding: 50px 10px 30px 10px;
+}
+
+#project_title {
+ margin: 0;
+ color: #fff;
+ font-size: 42px;
+ font-weight: 700;
+ text-shadow: #111 0px 0px 10px;
+}
+
+#project_tagline {
+ color: #fff;
+ font-size: 24px;
+ font-weight: 300;
+ background: none;
+ text-shadow: #111 0px 0px 10px;
+}
+
+#downloads {
+ position: absolute;
+ width: 210px;
+ z-index: 10;
+ bottom: -40px;
+ right: 0;
+ height: 70px;
+ background: url('../images/icon_download.png') no-repeat 0% 90%;
+}
+
+.zip_download_link {
+ display: block;
+ float: right;
+ width: 90px;
+ height:70px;
+ text-indent: -5000px;
+ overflow: hidden;
+ background: url(../images/sprite_download.png) no-repeat bottom left;
+}
+
+.tar_download_link {
+ display: block;
+ float: right;
+ width: 90px;
+ height:70px;
+ text-indent: -5000px;
+ overflow: hidden;
+ background: url(../images/sprite_download.png) no-repeat bottom right;
+ margin-left: 10px;
+}
+
+.zip_download_link:hover {
+ background: url(../images/sprite_download.png) no-repeat top left;
+}
+
+.tar_download_link:hover {
+ background: url(../images/sprite_download.png) no-repeat top right;
+}
+
+#main_content_wrap {
+ background: #f2f2f2;
+ border-top: 1px solid #111;
+ border-bottom: 1px solid #111;
+}
+
+#main_content {
+ padding-top: 40px;
+}
+
+#footer_wrap {
+ background: #212121;
+}
+
+
+
+/*******************************************************************************
+Small Device Styles
+*******************************************************************************/
+
+@media screen and (max-width: 480px) {
+ body {
+ font-size:14px;
+ }
+
+ #downloads {
+ display: none;
+ }
+
+ .inner {
+ min-width: 320px;
+ max-width: 480px;
+ }
+
+ #project_title {
+ font-size: 32px;
+ }
+
+ h1 {
+ font-size: 28px;
+ }
+
+ h2 {
+ font-size: 24px;
+ }
+
+ h3 {
+ font-size: 21px;
+ }
+
+ h4 {
+ font-size: 18px;
+ }
+
+ h5 {
+ font-size: 14px;
+ }
+
+ h6 {
+ font-size: 12px;
+ }
+
+ code, pre {
+ min-width: 320px;
+ max-width: 480px;
+ font-size: 11px;
+ }
+
+}