add fancy-box stuff

app/assets/javascripts/application.js

@@ -1,5 +1,4 @@
 //= require jquery
 //= require jquery_ujs
-//= require custom
-//= require humane
-//= require fancybox
+//= require fancybox
+//= require custom

app/assets/javascripts/custom.js

@@ -83,4 +83,13 @@ $(document).ready(function() {
   HOR.initializeMap();
   setTimeout(HOR.displayUsers, 500);
   $(window).load(HOR.animateNavi).scroll(HOR.animateNavi);
-});
+
+  jQuery.each($("a.fancy"), function() {
+    $(this).attr("href", '#' + $(this).attr("name"));
+  });
+  $("a.fancy").fancybox({
+    hideOnContentClick: true
+  });
+
+  $("#fancy_growl a").trigger('click');
+});

app/assets/stylesheets/application.css

@@ -1,5 +1,5 @@
 /*
  *= require_self
- *= require fancybox
  *= require screen
+ *= require fancybox
  */

app/assets/stylesheets/screen.css.scss

@@ -263,6 +263,28 @@ nav {
   }
 }
 
+
+#fancybox-content {
+  h2, h3 {
+    margin-bottom:1em;
+  }
+  h2 {
+    font:bold 1.4em hero,arial,verdana,sans-serif;
+  }
+
+  h3 {
+    font:bold 1.2em hero,arial,verdana,sans-serif;
+  }
+
+  p {
+    margin-bottom:1em;
+  }
+
+  .meta {
+    font-size:smaller;
+  }
+}
+
 .main {
   padding:2em;
   padding-bottom:6em;
@@ -365,46 +387,6 @@ nav {
     margin-top: -5px;
   }
 
-  .tooltip {
-    position:relative;
-
-    .big {
-      right:37em;
-    }
-
-    .topbutton {
-      margin:0;
-      padding:0;
-    }
-
-    p {
-      margin-bottom:0.5em;
-    }
-
-    div {
-      display:none;
-      position:absolute;
-      top:-210px;
-      right:-160px;
-      background:url(/assets/black_arrow_big.png);
-      height:163px;
-      width:310px;
-      padding:30px 30px 10px 30px;
-      h3, li, p, dt, dd {
-        color:white;
-      }
-      li {
-        margin-bottom:0.2em;
-      }
-      a, a:hover, a:active, a:visited {
-        color:#999;
-      }
-      dt {
-        font-weight:normal;
-      }
-    }
-  }
-
   .pagination {
     padding-bottom:2em;
     a, em, span {
@@ -547,87 +529,6 @@ footer {
   }
 }
 
-
-
-/**
- * Humane styles
- */
-
- /* recommended base settings */
- html, body { height: 100%; }
- .humane {
-   filter                : progid:DXImageTransform.Microsoft.alpha(opacity=100);
-   -ms-filter            : "progid:DXImageTransform.Microsoft.alpha(opacity=100)";
-   position              : fixed;
-   _position             : absolute; /* ie6 */
-   -moz-transition       : all .5s;  /* .5s transition */
-   -webkit-transition    : all .5s;
-   -o-transition         : all .5s;
-   -ms-transition        : all .5s;
-   transition            : all .5s;
-   visibility            : hidden;
-   z-index               : 100000;
- }
- .humane.humane-show { visibility : visible; }
- /* ie hover state, recommended */
- .humane:hover {
-   filter                : progid:DXImageTransform.Microsoft.alpha(opacity=20);
-   -ms-filter            : "progid:DXImageTransform.Microsoft.alpha(opacity=20)";
- }
- /* standards hover state, recommended */
- div.humane.humane-show:hover { opacity: 0.2; }
-
- /* custom settings */
- .humane {
-   font-family           : Verdana, sans-serif;
-   font-size             : 25px;
-   letter-spacing        : -1px;
-   top                   : 25%;
-   left                  : 25%;
-   opacity               : 0;
-   width                 : 50%;
-   color                 : #fff;
-   padding               : 10px;
-   text-align            : center;
-   background-color      : #000;
-   background-color      : rgba(0,0,0,0.8);
-   background-image      : -moz-linear-gradient(top, rgba(0,0,0,.8), rgba(50,50,50,.8));
-   background-image      : -ms-linear-gradient(top, rgba(0,0,0,.8), rgba(50,50,50,.8));
-   background-image      : -o-linear-gradient(top, rgba(0,0,0,.8), rgba(50,50,50,.8));
-   background-image      : -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.8)), to(rgba(50,50,50,.8)));
-   background-image      : -webkit-linear-gradient(top, rgba(0,0,0,.8), rgba(50,50,50,.8));
-   background-image      : linear-gradient(top, rgba(0,0,0,.8), rgba(50,50,50,.8));;
-   -moz-border-radius    : 15px;
-   -webkit-border-radius : 15px;
-   -o-border-radius      : 15px;
-   border-radius         : 15px;
-   text-shadow           : 0 -1px 1px #ddd;
-   -moz-box-shadow       : 0 4px 4px -4px #000;
-   -webkit-box-shadow    : 0 4px 4px -4px #000;
-   box-shadow            : 0 4px 4px -4px #000;
- }
-
- /* custom animation for css transition supported browsers */
- .humane.humane-show { opacity: 1; }
-
- /* other customizations */
- .humane p {
-   margin                : 1em;
-   display               : inline;
- }
- .humane ul {
-   list-style            : none;
-   margin                : 0;
-   padding               : 0;
- }
- .humane .error {
-   color                 : red;
-   text-shadow           : 0 -1px 1px #f33;
- }
-
-
-
-
 /**
  * Non-semantic helper classes: please define your styles before this section.
  */