From 8295ee075a0f54524185cc10577304a92b9f6702 Mon Sep 17 00:00:00 2001
From: Renat Rafikov <renatrafikov@gmail.com>
Date: Thu, 5 Apr 2012 12:43:30 +0500
Subject: [PATCH] Stylus skin. Illusion minor changes

---
 illusion/skin.css | 177 ++++++++++++++++++++++++++---
 stylus/skin.css   | 280 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 443 insertions(+), 14 deletions(-)
 create mode 100644 stylus/skin.css

diff --git a/illusion/skin.css b/illusion/skin.css
index 986d105..216a2a5 100644
--- a/illusion/skin.css
+++ b/illusion/skin.css
@@ -1,10 +1,113 @@
-/* Skin "Illusion" by Renat Rafikov */
+/* "Simpliste" template. Renat Rafikov. http://cssr.ru/simpliste/ */
 
 /* Webfonts */
 @import url(http://fonts.googleapis.com/css?family=Play:700&subset=latin,cyrillic);
 /* End webfonts */
 
+/* CSS reset. Based on HTML5 boilerplate reset http://html5boilerplate.com/  */
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display:block; }
+audio[controls], canvas, video { display:inline-block; *display:inline; *zoom:1; }
+html { font-size:100%; overflow-y:scroll; -webkit-overflow-scrolling:touch; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
+body { margin:0; font-size:13px; line-height:1.231; }
+body, button, input, select, textarea { font-family:sans-serif; color:#222; }
+a { color:#00e; }
+a:visited { color:#551a8b; }
+a:focus { outline:thin dotted; }
+a:hover, a:active { outline:0; }
+abbr[title] { border-bottom:1px dotted; }
+b, strong { font-weight:bold; }
+blockquote { margin:1em 40px; }
+dfn { font-style:italic; }
+hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
+ins { background:#ff9; color:#000; text-decoration:none; }
+mark { background:#ff0; color:#000; font-style:italic; font-weight:bold; }
+pre, code, kbd, samp { font-family:monospace, monospace; _font-family:'courier new', monospace; font-size:1em; }
+pre { white-space:pre; white-space:pre-wrap; word-wrap:break-word; }
+q { quotes:none; }
+q:before, q:after { content:""; content:none; }
+small { font-size:85%; }
+sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; }
+sup { top:-0.5em; }
+sub { bottom:-0.25em; }
+ul, ol { margin:1em 0; padding:0 0 0 2em; }
+dd { margin:0 0 0 40px; }
+nav ul, nav ol { list-style:none; margin:0; padding:0; }
+img { border:0; -ms-interpolation-mode:bicubic; }
+svg:not(:root) { overflow:hidden;}
+figure { margin:0; }
+form { margin:0; }
+fieldset { border:0; margin:0; padding:0; }
+legend { border:0; *margin-left:-7px; padding:0; }
+label { cursor:pointer; }
+button, input, select, textarea { font-size:100%; margin:0; vertical-align:baseline; *vertical-align:middle; }
+button, input { line-height:normal; *overflow:visible; }
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor:pointer; -webkit-appearance:button; }
+input[type="checkbox"], input[type="radio"] { box-sizing:border-box; }
+input[type="search"] { -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; }
+button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0; }
+textarea { overflow:auto; vertical-align:top; }
+input:valid, textarea:valid {  }
+input:invalid, textarea:invalid { background-color:#f0dddd; }
+table { border-collapse:collapse; border-spacing:0; }
+.hidden { display:none; visibility:hidden; }
+.clearfix:before, .clearfix:after { content:""; display:table; }
+.clearfix:after { clear:both; }
+.clearfix { zoom:1; }
+/* End CSS reset */
 
+
+/* Columns 
+-------
+.col_33 | .col_33 | .col_33
+.clearfix
+-------
+.col_66 | .col_33
+.clearfix
+-------
+.col_50 | .col_50
+.clearfix
+-------
+.col_100
+-------
+*/
+.col_33 {
+  width:31%;
+  margin:0 2% 0 0;
+  float:left;
+}
+
+.col_50 {
+  width:48%;
+  margin:0 2% 0 0;
+  float:left;
+}
+
+.col_66 {
+  width:64%;
+  margin:0 2% 0 0;
+  float:left;
+}
+
+.col_100 {
+  width:98%;
+  margin:0 2% 0 0;
+}
+/* End columns */
+
+
+/* Helper classes */
+.center {text-align:center;}
+.left {text-align:left;}
+.right {text-align:right;}
+
+.img_floatleft {float:left; margin:0 10px 5px 0;}
+.img_floatright {float:right; margin:0 0 5px 10px;}
+
+.img {max-width:100%;}
+/* End helper classes */
+
+
+/* [Skin "Illusion"] */
 body{
   background-color: #16a8cd;
   background-image: -webkit-linear-gradient(60deg, #1283ab 12%, transparent 12.5%, transparent 87%, #1283ab 87.5%, #1283ab), -webkit-linear-gradient(-60deg, #1283ab 12%, transparent 12.5%, transparent 87%, #1283ab 87.5%, #1283ab), -webkit-linear-gradient(60deg, #1283ab 12%, transparent 12.5%, transparent 87%, #1283ab 87.5%, #1283ab), -webkit-linear-gradient(-60deg, #1283ab 12%, transparent 12.5%, transparent 87%, #1283ab 87.5%, #1283ab), -webkit-linear-gradient(30deg, #198ab4 25%, transparent 25.5%, transparent 75%, #198ab4 75%, #198ab4), -webkit-linear-gradient(30deg, #198ab4 25%, transparent 25.5%, transparent 75%, #198ab4 75%, #198ab4);
@@ -15,16 +118,6 @@ body{
   background-position: 0 0pt, 0 0pt, 40px 70px, 40px 70px, 0 0pt, 40px 70px;
   background-size: 80px 140px;
   background-attachment:fixed;
-  font-family:arial, sans-serif;
-  color:#333;
-}
-
-a { color:#1283ab; }
-a:hover { color:#f00; }
-a:visited { color:#1283ab; }
-
-ul li, ol li {
-  padding:0 0 0.4em 0;
 }
 
 .container {
@@ -55,6 +148,7 @@ ul li, ol li {
   float:right;
   text-align:right;
   position:fixed;
+  z-index:1000;
   top:0;
   right:0;
   background:#fff;
@@ -145,6 +239,19 @@ ul li, ol li {
   display:none;
 }
 
+/* Skin appearance */
+body {
+  font-family:arial, sans-serif;
+  color:#333;
+}
+
+a { color:#1283ab; }
+a:hover { color:#f00; }
+a:visited { color:#1283ab; }
+
+ul li, ol li {
+  padding:0 0 0.4em 0;
+}
 
 .hero h1 {
   font-size:30px;
@@ -213,7 +320,7 @@ a.button:active,
   padding:5px 7px;
 }
 .table tr {
-  border-bottom:1px dashed #ddd;
+  border-bottom:1px solid #ddd;
 }
 .table tr:last-child {
   border:0;
@@ -240,9 +347,10 @@ a.button:active,
   background:#d4db95;
   padding:12px 14px;
 }
+/* [End skin] */
 
 
-@media only screen and (max-width:480px) { /* Smartphone custom styles */
+@media only screen and (max-width:480px) { /* Smartphone */
   .header {
     margin:5em 0 1em 0;
     height:auto;
@@ -285,7 +393,48 @@ a.button:active,
     padding-bottom:0;
     height:10em;
   }
+  
+ 
+  .form textarea {
+    width:100%;
+  }  
+  .form label {
+    padding:10px 0 8px 0;
+  }
 }
 
-@media only screen and (max-width:768px) { /* Tablet custom styles */
+
+@media only screen and (max-width:768px) { /* Tablet */
+  .col_33,
+  .col_66,
+  .col_50  {
+    width:98%;
+    float:none;
+  } 
+  
+  .form label {
+    padding:10px 0 8px 0;
+  }
+  
+  .copyright {
+    font-size:2em;
+  }
+}
+
+
+@media print { /* Printer */
+  * { background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important; }
+  a, a:visited { color:#444 !important; text-decoration:underline; }
+  a[href]:after { content:" (" attr(href) ")"; }
+  abbr[title]:after { content:" (" attr(title) ")"; }
+  pre, blockquote { border:1px solid #999; page-break-inside:avoid; }
+  thead { display:table-header-group; }
+  tr, img { page-break-inside:avoid; }
+  img { max-width:100% !important; }
+  @page { margin:0.5cm; }
+  p, h2, h3 { orphans:3; widows:3; }
+  h2, h3{ page-break-after:avoid; }
+  
+  .header, .footer, .form {display:none;}
+  .col_33, .col_66, .col_50  { width:98%; float:none; } 
 }
\ No newline at end of file
diff --git a/stylus/skin.css b/stylus/skin.css
new file mode 100644
index 0000000..1b59073
--- /dev/null
+++ b/stylus/skin.css
@@ -0,0 +1,280 @@
+/* Skin "Stylus" by Renat Rafikov */
+html {
+  background:#999;
+}
+
+body {
+  font-family:arial, sans-serif;
+  color:#333;
+  
+  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 250px, rgba(255,255,255,0) 600px);
+  background: -webkit-gradient(linear, left top, left 600px, color-stop(0%,rgba(255,255,255,0)), color-stop(250px,rgba(255,255,255,0.7)), color-stop(600px,rgba(255,255,255,0)));
+  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 250px,rgba(255,255,255,0) 600px);
+  background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 250px,rgba(255,255,255,0) 600px);
+  background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 250px,rgba(255,255,255,0) 600px);
+  background: linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.7) 250px,rgba(255,255,255,0) 600px);
+}
+
+a { color:#336699; }
+a:hover { color:#ea0000; }
+a:visited { color:#551a8b; }
+
+ul li, ol li {
+  padding:0 0 0.4em 0;
+}
+
+
+.container {
+  max-width:1300px;
+  margin:0 auto;
+}
+
+.header {
+  margin:0 0 1em 0;
+  padding:1em 0 0 0;
+}
+
+.logo {
+  padding:0 0 0.4em 0;
+  font-size:24px;
+  color:#333;
+  font-weight:bold;
+}
+
+.menu_main {
+  margin:0.3em 0 0 0;
+  background-color:#dcdcdc;
+  height:35px;
+  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(255,255,255,0)));
+  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  background-image: -o-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  background-image: linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  -webkit-box-shadow:0 9px 5px -7px #777;
+  -moz-box-shadow:0 9px 5px -7px #777;
+  box-shadow:0 9px 5px -7px #777;
+}
+.menu_main a,
+.menu_main a:visited {
+  color:#333;
+  text-decoration:none;
+  display:inline-block;
+  height:35px;
+  line-height:35px;
+  padding:0 44px 0 24px;
+  font-weight:bold;
+  border-right:1px solid #fff;
+}
+.menu_main a:hover,
+.menu_main a:hover:visited {
+  background:#666;
+  color:#fff;
+  text-decoration:underline;
+}
+.menu_main li {
+  display:inline-block;
+  float:left;
+  padding:0;
+}
+
+.menu_main li.active a,
+.menu_main li.active a:hover {
+  color:#000;
+  text-decoration:none;
+  cursor:default;
+  background:#d1d1d1;
+  background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,0)));
+  background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
+  background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
+  background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
+  background: linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
+}
+
+
+.info {
+}
+
+.hero {
+  color:#111;
+  padding:0 0 10px 2%;
+}
+.hero h1 {
+  font-size:26px;
+  color:#111;
+}
+
+.article {
+  background:#f5f5f5;
+  padding:0 2% 2em 2%;
+  -webkit-box-shadow:#777 0 9px 5px -7px;
+  -moz-box-shadow:#777 0 9px 5px -7px;
+  box-shadow:#777 0 9px 5px -7px;
+}
+
+.footer {
+  padding:4em 2% 1em 2%;
+  color:#333;
+}
+
+.copyright {
+  width:49%;
+  float:left;
+}
+
+.menu_bottom {
+  width:50%;
+  float:right;
+  text-align:right;
+  margin:0;
+  padding:0;
+}
+.menu_bottom a,
+.menu_bottom a:visited {
+  color:#333;
+}
+.menu_bottom a:hover,
+.menu_bottom a:hover:visited {
+  color:#000;
+}
+.menu_bottom li {
+  display:inline-block;
+  margin:0 0 0 7px;
+}
+.menu_bottom li.active,
+.menu_bottom li.active a {
+  color:#333;
+  text-decoration:none;
+  cursor:default;
+}
+
+h1, h2 {
+  font-weight:normal;
+  color:#000;
+}
+h1 {
+  font-size:22px;
+}
+h3, h4, h5, h6 {
+  font-weight:bold;
+  color:#000;
+}
+
+.form label {
+  display:inline-block;
+  padding:0 0 4px 0;
+}
+
+a.button,
+.button {
+  text-align:center; 
+  text-decoration:none;
+  -webkit-border-radius:2px;
+  -moz-border-radius:2px;
+  border-radius:2px;
+  -webkit-box-shadow:rgba(0,0,0,0.9) 0 4px 3px -4px;
+  -moz-box-shadow:rgba(0,0,0,0.9) 0 4px 3px -4px;
+  box-shadow:rgba(0,0,0,0.9) 0 4px 3px -4px;
+  background:#aec720;
+  color:#fff;
+  padding:7px 10px;
+  font-family:verdana, sans-serif;
+  display:inline-block;
+  border:0;
+}
+a.button:hover,
+.button:hover {
+  color:#fff;
+  background:#c1db2e;
+}
+a.button:active,
+.button:active {
+  background:#aec720;
+  text-shadow:1px 1px 1px #8ca20f;
+  -webkit-box-shadow:#8ca20f 0px -3px 3px inset;
+  -moz-box-shadow:#8ca20f 0px -3px 3px inset;
+  box-shadow:#8ca20f 0px -3px 3px inset;
+}
+
+.table {
+  width:100%;
+}
+.table th {
+  padding:5px 7px;
+  font-weight:normal;
+  text-align:left;
+  font-size:1.2em;
+}
+.table td {
+  padding:5px 7px;
+}
+.table tr {
+  border-bottom:1px solid #888;
+}
+.table tr:last-child {
+  border:0;
+}
+
+.warning {
+  color:#fff;
+  padding:8px 14px;
+  background-color:#af243b;
+  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(255,255,255,0)));
+  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  background-image: -o-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  background-image: linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  -webkit-box-shadow:0 9px 5px -7px #999;
+  -moz-box-shadow:0 9px 5px -7px #999;
+  box-shadow:0 9px 5px -7px #999;
+}
+.success {
+  color:#fff;
+  background:#31b754;
+  padding:8px 14px;
+  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(255,255,255,0)));
+  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  background-image: -o-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  background-image: linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  -webkit-box-shadow:0 9px 5px -7px #999;
+  -moz-box-shadow:0 9px 5px -7px #999;
+  box-shadow:0 9px 5px -7px #999;
+}
+.message {
+  color:#444;
+  background:#f1b369;
+  padding:8px 14px;
+  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(255,255,255,0)));
+  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  background-image: -o-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  background-image: linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
+  -webkit-box-shadow:0 9px 5px -7px #999;
+  -moz-box-shadow:0 9px 5px -7px #999;
+  box-shadow:0 9px 5px -7px #999;
+}
+
+
+@media only screen and (max-width:480px) { /* Smartphone custom styles */
+  .menu_main a {
+    padding:7px 15px;
+  }
+  .menu_main li {
+    float:none;
+  }
+}
+
+@media only screen and (max-width:768px) { /* Tablet custom styles */
+  .menu_main {
+    height:auto;
+    overflow:hidden;
+  }
+  .menu_main a {
+    border:0;
+  }
+}
\ No newline at end of file