some change

app/assets/javascripts/orbitTimeline.js

@@ -63,12 +63,12 @@ var orbitTimeline = function(dom){
 						t.events.push(bubbleData);
 						if(cur_year != year){
 							year = cur_year;
-							scale.append($("<div class='scale_region year'>"+(year+1)+"</div><div data-content='"+year+"'></div>"));
+							scale.append($("<div class='group year w1 h1 hp vp thmtxt thmc1'>"+(year+1)+"</div><div data-content='"+year+"'></div>"));
 						} 
 						if(cur_mon != mon){
 							mon = cur_mon;
 							var yr = scale.find("div[data-content="+year+"]");
-							yr.append($("<div class='scale_region month' data-content='"+cdt+"'><div class='month_heading'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>"))					
+							yr.append($("<div class='group month' data-content='"+cdt+"'><div class='month_heading'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>"))					
 						}
 					});
 				});
@@ -78,6 +78,7 @@ var orbitTimeline = function(dom){
 					callbackFn.call(this,scale);
 				}
 			})		
+
 	}
 	this.makeBubble = function(bubbleData){
 		var totalul = $("#scale_wrapper").find("div[data-content="+bubbleData.timestamp+"] ul").length;
@@ -95,7 +96,7 @@ var orbitTimeline = function(dom){
 			}
 		}
 		var bt = (bubbleData.title.length > 70? bubbleData.title.substr(0,70) + "..." : bubbleData.title);
-		var bubble = $("<li class='bubble'><span>"+bt+"<span class='date'> - "+bubbleData.fulldate+"</span></span></li>");
+		var bubble = $("<li class='bubble hh3 admbg vp hp'>"+bt+"<span class='date'>"+bubbleData.fulldate+"</span></li>");
 		targetul.prepend(bubble);
 		bubble.show();
 		bubble.click(function(){

app/assets/stylesheets/desktopmain.css

@@ -728,7 +728,7 @@ a:focus { outline: none; }
 }
 
 /* Timeline */
-#orbit .holder .admbg {
+#orbit #holder > .admbg {
 	background-color: #efefef;
 }
 

app/assets/stylesheets/orbitTimeline.css

@@ -1,47 +0,0 @@
-.t_scale{
-	height: 516px;
-}
-#scale_wrapper {
-	overflow: hidden;
-}
-#timline_marker{
-	width:100px;
-	height:140px;
-	opacity:0.4;
-	cursor: move;
-	border-style:solid;
-	border-width:5px;
-	border-radius:5px;
-}
-#t_container{
-	height:366px;
-}
-.scale_region {
-}
-.group {
-	margin-right: 48px;
-}
-.month{
-	
-}
-.year{
-}
-.bubble{
-	cursor: pointer;
-	width:300px;
-	float: left;
-	font-size:15px;
-	display: none;
-}
-.month_heading{
-	color: #333;
-	font-family: 'Open sans', sans-serif;
-	font-size: 21px;
-	background-color: #efefef;
-}
-
-.bubble_list ul{
-	float:left;
-	width: 300px;
-	height: 440px;
-}

app/assets/stylesheets/orbitTimeline.css.erb

@@ -0,0 +1,55 @@
+.t_scale {
+	height: 516px;
+	background: 0 0 url(<%= asset_path "timeline/ruler.png" %>) repeat-x;
+}
+#scale_wrapper {
+	overflow: hidden;
+	padding: 36px 0 0 12px;
+	background: 0 60px url(<%= asset_path "timeline/date_connector.png" %>) repeat-x;
+}
+#timline_marker {
+	width:100px;
+	height:140px;
+	opacity:0.4;
+	cursor: move;
+	border-style:solid;
+	border-width:5px;
+	border-radius:5px;
+}
+#t_container {
+	height:366px;
+}
+.scale_region {
+}
+.group {
+	margin-right: 48px;
+}
+.month {}
+.year {
+	font-size: 30px;
+	margin-right: 24px;
+	border-right: solid 12px #efefef;
+}
+.month_heading {
+	color: #333;
+	font-family: 'Open sans', sans-serif;
+	font-size: 21px;
+	background-color: #efefef;
+	display: inline-block;
+}
+
+.bubble_list ul {
+	float:left;
+	width: 324px;
+	height: 440px;
+	margin-right: 12px;
+}
+.bubble {
+	cursor: pointer;
+	width: 300px;
+	height: 50px;
+	float: left;
+	font-size: 12px;
+	font-family: Arial, sans-serif;
+	margin-bottom: 12px;
+}