diff --git a/meteor/client/globe.html b/meteor/client/globe.html
index abcce60e..38ff108b 100644
--- a/meteor/client/globe.html
+++ b/meteor/client/globe.html
@@ -6,100 +6,8 @@ Copyright (c) 2014 Mozilla Corporation
 -->
 
 <template name="globe">
-    <style type="text/css">
-        body {
-            background: #000000 url(/images/globe-loading.gif) center center no-repeat;
-            color: #ffffff;
-        }
-
-        #info {
-            font-size: 11px;
-            position: absolute;
-            bottom: 5px;
-            background-color: rgba(0, 0, 0, 0.8);
-            border-radius: 3px;
-            right: 10px;
-            padding: 10px;
-        }
-
-        a {
-            color: #aaa;
-            text-decoration: none;
-        }
-
-        a:hover {
-            text-decoration: underline;
-        }
-
-        #campaigns {
-            width: 270px;
-            position: absolute;
-            left: 10px;
-            top: 63px;
-            background-color: rgba(0, 0, 0, 0.2);
-            border-top: 1px solid rgba(255, 255, 255, 0.4);
-            padding: 10px;
-        }
-
-        #time {
-            width: 400px;
-            position: absolute;
-            left: 10px;
-            top: 103px;
-            background-color: rgba(0, 0, 0, 0.2);
-            border-top: 1px solid rgba(255, 255, 255, 0.4);
-            padding: 10px;
-        }
-
-        #facts {
-            width: 300px;
-            position: absolute;
-            left: 10px;
-            bottom: 0px;
-            background-color: rgba(0, 0, 0, 0.2);
-            border-top: 1px solid rgba(255, 255, 255, 0.4);
-            border-right: 1px solid rgba(255, 255, 255, 0.4);
-            padding: 10px;
-            font-size: 12px;
-            color: rgba(255, 255, 255, 0.9);
-            display: none;
-        }
-
-        .campaign {
-            font-size: 12px;
-            line-height: 26px;
-            height: 30px;
-            text-align: center;
-            float: left;
-            width: 60px;
-            color: rgba(255, 255, 255, 0.4);
-            cursor: pointer;
-            transition: all 0.1s ease-out;
-        }
-
-        .time {
-            font-size: 12px;
-            line-height: 26px;
-            height: 30px;
-            text-align: center;
-            float: left;
-            width: 90px;
-            color: rgba(255, 255, 255, 0.4);
-            cursor: pointer;
-            transition: all 0.1s ease-out;
-        }
-
-        .campaign:hover,
-        .campaign.active,
-        .time:hover,
-        .time.active {
-            font-size: 14px;
-            color: #fff;
-        }
-    </style>
-
-    <div id="container"></div>
-    <div id="info">
+    <div id="container" class="globe-container"></div>
+    <div id="info" class="globe-info">
         Controls:
         <ul>
             <li>use arrow key or mouse to move</li>
@@ -108,7 +16,7 @@ Copyright (c) 2014 Mozilla Corporation
         </ul>
     </div>
 
-    <div id="facts">
+    <div id="facts" class="globe-facts">
         <span id="attacker_addr"></span>
         <ul>
             <li>score: <span id="attacker_score"></span></li>
@@ -117,12 +25,12 @@ Copyright (c) 2014 Mozilla Corporation
         </ul>
     </div>
 
-    <div id="campaigns">
+    <div id="campaigns" class="globe-campaigns">
         <span id="allcampaigns" class="campaign">all</span>
         <span id="unknown" class="campaign">unknown</span>
     </div>
 
-    <div id="time">
+    <div id="time" class="globe-time">
         <span id="last15mins" class="time">last 15 mins</span>
         <span id="last1h" class="time">last 1h</span>
         <span id="last12h" class="time">last 12h</span>
diff --git a/meteor/imports/themes/classic/mozdef.css b/meteor/imports/themes/classic/mozdef.css
index 1dadfd1a..d38bb874 100644
--- a/meteor/imports/themes/classic/mozdef.css
+++ b/meteor/imports/themes/classic/mozdef.css
@@ -451,6 +451,98 @@ sidenav
     cursor: pointer;
 }
 
+/* globe styling */
+.globe-container  {
+    background: #000000;
+    color: #ffffff;
+}
+
+.globe-info {
+    font-size: 11px;
+    position: absolute;
+    bottom: 5px;
+    background-color: rgba(0, 0, 0, 0.8);
+    border-radius: 3px;
+    right: 10px;
+    padding: 10px;
+    color: var(--txt-secondary-color);
+}
+
+.globe-container a {
+    color: #aaa;
+    text-decoration: none;
+}
+
+.globe-container a:hover {
+    text-decoration: underline;
+}
+
+.globe-campaigns {
+    width: 270px;
+    position: absolute;
+    left: 10px;
+    top: 63px;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-top: 1px solid rgba(255, 255, 255, 0.4);
+    padding: 10px;
+}
+
+.globe-time {
+    width: 400px;
+    position: absolute;
+    left: 10px;
+    top: 103px;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-top: 1px solid rgba(255, 255, 255, 0.4);
+    padding: 10px;
+}
+
+.globe-facts {
+    width: 300px;
+    position: absolute;
+    left: 10px;
+    bottom: 0px;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-top: 1px solid rgba(255, 255, 255, 0.4);
+    border-right: 1px solid rgba(255, 255, 255, 0.4);
+    padding: 10px;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.9);
+    display: none;
+}
+
+.globe-campaigns .campaign{
+    font-size: 12px;
+    line-height: 26px;
+    height: 30px;
+    text-align: center;
+    float: left;
+    width: 60px;
+    color: rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    transition: all 0.1s ease-out;
+}
+
+.globe-time .time{
+    font-size: 12px;
+    line-height: 26px;
+    height: 30px;
+    text-align: center;
+    float: left;
+    width: 90px;
+    color: rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    transition: all 0.1s ease-out;
+}
+
+.globe-campaigns .campaign:hover,
+.globe-campaigns .campaign.active,
+.globe-time .time:hover,
+.globe-time .time.active {
+    font-size: 14px;
+    color: #fff;
+}
+
 /*menu styling*/
 #nav-main {
     text-align: left;