Styled the page and added screenshots
[m6w6/gitweb-theme] / css / style.css
diff --git a/css/style.css b/css/style.css
new file mode 100644 (file)
index 0000000..2e75fd9
--- /dev/null
@@ -0,0 +1,429 @@
+body {
+  background-color: #F5F5F5;
+  color: #545454;
+  font-family: Helvetica, Arial, FreeSans, san-serif;
+  margin-top: 1.0em;
+}
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 2, 2011 */
+@font-face {
+  font-family: 'GraublauWebBold';
+  src: url('fonts/graublauwebbold-webfont.eot');
+  src: url('fonts/graublauwebbold-webfont.eot?iefix') format('eot'),
+       url('fonts/graublauwebbold-webfont.woff') format('woff'),
+       url('fonts/graublauwebbold-webfont.ttf') format('truetype'),
+       url('fonts/graublauwebbold-webfont.svg#webfontWSMTDf0G') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+#container {
+  margin: 0 auto;
+  width: 700px;
+}
+h1 {
+  color: #535353;
+  font-size: 3.8em;
+  margin-bottom: 3px;
+  font-family: 'GraublauWebBold', Helvetica, Arial, FreeSans, san-serif;
+}
+h1 .small {
+  clear: both;
+  font-size: 0.4em;
+}
+h1 a {
+  text-decoration: none
+}
+h2 {
+  clear: both;
+  color: #545454;
+  font-size: 1.5em;
+  font-family: 'GraublauWebBold', Helvetica, Arial, FreeSans, san-serif;
+}
+a {
+  color: #4083c4;
+}
+ul {
+  padding-left: 0;
+}
+li {
+  margin-bottom: 0.25em;
+}
+#screenshots img {
+  border: 1px solid #D8D8D8;
+  float: left;
+  margin: 0 10px 10px 0;
+}
+#screenshots {
+  float: left;
+  margin-bottom: 20px;
+}
+.description {
+  color: #A8A8A8;
+  font-size: 1.2em;
+  font-style: italic;
+  margin-bottom: 30px;
+  margin-top: 30px;
+}
+.download {
+  float: right;
+}
+pre {
+  background: #000;
+  color: #fff;
+  padding: 15px;
+}
+hr {
+  border-bottom: 1px solid #aaa;
+  border: 0;
+  width: 80%;
+}
+.footer {
+  font-style: italic;
+  padding-top: 30px;
+  text-align:center;
+}
+
+/* PLUGINS
+-------------------------------------------------------------------------- */
+
+  .image-overlay { list-style: none; text-align: left; }
+  .image-overlay li { display: inline; }
+  .image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; }
+  .image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; }
+  .image-overlay a {
+    margin: 0 15px 15px 0;
+    border: 1px solid #000;
+    float: left;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
+    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.25);
+    -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.25);
+    -khtml-box-shadow: 0 2px 5px rgba(0,0,0,0.25);
+    -o-box-shadow: 0 2px 5px rgba(0,0,0,0.25);
+}
+.image-overlay img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 0;
+}
+.image-overlay .caption {
+  float: left;
+  position: absolute;
+  background-color: #5e710c;
+  height: 30px;
+  line-height: 30px;
+  width: 100%;
+  cursor: pointer;
+  opacity: .8;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 5-7 */
+  -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* For IE 8 */
+}
+.image-overlay .caption p {
+  margin: 0;
+  padding: 0 8px;
+  color: #fff;
+}
+
+/* Fancybox */
+#fancybox-loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  height: 40px;
+  width: 40px;
+  margin-top: -20px;
+  margin-left: -20px;
+  cursor: pointer;
+  overflow: hidden;
+  z-index: 1104;
+  display: none;
+}
+* html #fancybox-loading {  /* IE6 */
+  position: absolute;
+  margin-top: 0;
+}
+#fancybox-loading div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 480px;
+  background-image: url('img/fancybox/fancybox.png');
+}
+#fancybox-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: #000;
+  z-index: 1100;
+  display: none;
+}
+* html #fancybox-overlay {  /* IE6 */
+  position: absolute;
+  width: 100%;
+}
+#fancybox-tmp {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  overflow: auto;
+  display: none;
+}
+#fancybox-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 20px;
+  z-index: 1101;
+  display: none;
+}
+#fancybox-outer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #FFF;
+}
+#fancybox-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  overflow: hidden;
+}
+#fancybox-hide-sel-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+}
+#fancybox-close {
+  position: absolute;
+  top: -15px;
+  right: -15px;
+  width: 30px;
+  height: 30px;
+  background-image: url('img/fancybox/fancybox.png');
+  background-position: -40px 0px;
+  cursor: pointer;
+  z-index: 1103;
+  display: none;
+}
+#fancybox_error {
+  color: #444;
+  font: normal 12px/20px Arial;
+  padding: 7px;
+  margin: 0;
+}
+#fancybox-content {
+  height: auto;
+  width: auto;
+  padding: 0;
+  margin: 0;
+}
+#fancybox-img {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  line-height: 0;
+  vertical-align: top;
+  -ms-interpolation-mode: bicubic;
+}
+#fancybox-frame {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+#fancybox-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  font-family: Arial;
+  font-size: 12px;
+  z-index: 1102;
+}
+.fancybox-title-inside {
+  padding: 10px 0;
+  text-align: center;
+  color: #333;
+}
+.fancybox-title-outside {
+  padding-top: 5px;
+  color: #FFF;
+  text-align: center;
+  font-weight: bold;
+}
+.fancybox-title-over {
+  color: #FFF;
+  text-align: left;
+}
+#fancybox-title-over {
+  padding: 10px;
+  background-image: url('img/fancybox/fancy_title_over.png');
+  display: block;
+}
+#fancybox-title-wrap {
+  display: inline-block;
+}
+#fancybox-title-wrap span {
+  height: 32px;
+  float: left;
+}
+#fancybox-title-left {
+  padding-left: 15px;
+  background-image: url('img/fancybox/fancybox.png');
+  background-position: -40px -90px;
+  background-repeat: no-repeat;
+}
+#fancybox-title-main {
+  font-weight: bold;
+  line-height: 29px;
+  background-image: url('img/fancybox/fancybox-x.png');
+  background-position: 0px -40px;
+  color: #FFF;
+}
+#fancybox-title-right {
+  padding-left: 15px;
+  background-image: url('img/fancybox/fancybox.png');
+  background-position: -55px -90px;
+  background-repeat: no-repeat;
+}
+#fancybox-left, #fancybox-right {
+  position: absolute;
+  bottom: 0px;
+  height: 100%;
+  width: 35%;
+  cursor: pointer;
+  outline: none;
+  background-image: url('img/fancybox/blank.gif');
+  z-index: 1102;
+  display: none;
+}
+#fancybox-left {
+  left: 0px;
+}
+#fancybox-right {
+  right: 0px;
+}
+#fancybox-left-ico, #fancybox-right-ico {
+  position: absolute;
+  top: 50%;
+  left: -9999px;
+  width: 30px;
+  height: 30px;
+  margin-top: -15px;
+  cursor: pointer;
+  z-index: 1102;
+  display: block;
+}
+#fancybox-left-ico {
+  background-image: url('img/fancybox/fancybox.png');
+  background-position: -40px -30px;
+}
+#fancybox-right-ico {
+  background-image: url('img/fancybox/fancybox.png');
+  background-position: -40px -60px;
+}
+#fancybox-left:hover, #fancybox-right:hover {
+  visibility: visible;    /* IE6 */
+}
+#fancybox-left:hover span {
+  left: 20px;
+}
+#fancybox-right:hover span {
+  left: auto;
+  right: 20px;
+}
+.fancy-bg {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  width: 20px;
+  height: 20px;
+  z-index: 1001;
+}
+#fancy-bg-n {
+  top: -20px;
+  left: 0;
+  width: 100%;
+  background-image: url('img/fancybox/fancybox-x.png');
+}
+#fancy-bg-ne {
+  top: -20px;
+  right: -20px;
+  background-image: url('img/fancybox/fancybox.png');
+  background-position: -40px -162px;
+}
+#fancy-bg-e {
+  top: 0;
+  right: -20px;
+  height: 100%;
+  background-image: url('img/fancybox/fancybox-y.png');
+  background-position: -20px 0px;
+}
+#fancy-bg-se {
+  bottom: -20px;
+  right: -20px;
+  background-image: url('img/fancybox/fancybox.png');
+  background-position: -40px -182px;
+}
+#fancy-bg-s {
+  bottom: -20px;
+  left: 0;
+  width: 100%;
+  background-image: url('img/fancybox/fancybox-x.png');
+  background-position: 0px -20px;
+}
+#fancy-bg-sw {
+  bottom: -20px;
+  left: -20px;
+  background-image: url('img/fancybox/fancybox.png');
+  background-position: -40px -142px;
+}
+#fancy-bg-w {
+  top: 0;
+  left: -20px;
+  height: 100%;
+  background-image: url('img/fancybox/fancybox-y.png');
+}
+#fancy-bg-nw {
+  top: -20px;
+  left: -20px;
+  background-image: url('img/fancybox/fancybox.png');
+  background-position: -40px -122px;
+}
+
+/* IE */
+
+#fancybox-loading.fancybox-ie div   { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_loading.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-close        { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_close.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-title-over   { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
+.fancybox-ie #fancybox-title-left   { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_title_left.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-title-main   { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_title_main.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-title-right  { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_title_right.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-left-ico     { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_nav_left.png', sizingMethod='scale'); }
+.fancybox-ie #fancybox-right-ico    { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_nav_right.png', sizingMethod='scale'); }
+.fancybox-ie .fancy-bg { background: transparent !important; }
+.fancybox-ie #fancy-bg-n    { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
+.fancybox-ie #fancy-bg-ne   { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
+.fancybox-ie #fancy-bg-e    { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
+.fancybox-ie #fancy-bg-se   { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
+.fancybox-ie #fancy-bg-s    { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
+.fancybox-ie #fancy-bg-sw   { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
+.fancybox-ie #fancy-bg-w    { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
+.fancybox-ie #fancy-bg-nw   { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/img/fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }