View files now independent from foundation styles

diff --git a/css/front.css b/css/front.css
index df8ac06..336f1cd 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -1,3 +1,6 @@
+/*
+ * Disorganised styles start
+ */
 #glm-event-agenda-view {
     margin-top: 0px;
     display: none;
@@ -140,18 +143,6 @@
     }
 }
 /* Event Detail Page */
-#glm-event-detail-takeback-mini > span {
-    width: 120px;
-    top: 15px;
-}
-#glm-event-detail-takeback-mini:hover {
-    text-decoration: none;
-    width: 190px;
-    -webkit-transition: width 0.5s ease;
-    -moz-transition:    width 0.5s ease;
-    -o-transition:      width 0.5s ease;
-    transition:         width 0.5s ease;
-}
 #glm-event-detail-dates {
     margin: 0 0 10px 20px;
     position: relative;
@@ -500,4 +491,73 @@ label.date-toggle-label{
 }
 #glm-front-event-image{
     margin: 20px 0;
-}
\ No newline at end of file
+}
+
+body #glm-event-detail-takeback-mini .glm-member-db-takeback-mini:hover {
+    background-color: #5f0202;
+}
+body #glm-event-detail-takeback-mini .glm-member-db-takeback-mini {
+    background-color: #6f1207;
+    color: white;
+}
+#glm-event-detail-takeback-mini:hover {
+    text-decoration: none;
+    padding: 15px 150px 10px 15px;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition:    all 0.5s ease;
+    -o-transition:      all 0.5s ease;
+    transition:         all 0.5s ease;
+}
+/*
+ * Disorganised styles end
+ */
+
+/*
+ * Search form styles start
+ */
+#glm-events-search-form input:not([type]), 
+#glm-events-search-form input[type="text"], 
+#glm-events-search-form input[type="password"], 
+#glm-events-search-form input[type="date"], 
+#glm-events-search-form input[type="datetime"], 
+#glm-events-search-form input[type="datetime-local"], 
+#glm-events-search-form input[type="month"], 
+#glm-events-search-form input[type="week"], 
+#glm-events-search-form input[type="email"], 
+#glm-events-search-form input[type="number"], 
+#glm-events-search-form input[type="search"], 
+#glm-events-search-form input[type="tel"], 
+#glm-events-search-form input[type="time"], 
+#glm-events-search-form input[type="url"], 
+#glm-events-search-form input[type="color"], 
+#glm-events-search-form textarea {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border-radius: 0;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #cccccc;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+    color: rgba(0,0,0,0.75);
+    display: block;
+    font-family: inherit;
+    font-size: 0.875rem;
+    height: 2.3125rem;
+    margin: 0 0 1rem 0;
+    padding: 0.5rem;
+    width: 100%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transition: border-color 0.15s linear,background 0.15s linear;
+    -moz-transition: border-color 0.15s linear,background 0.15s linear;
+    -ms-transition: border-color 0.15s linear,background 0.15s linear;
+    -o-transition: border-color 0.15s linear,background 0.15s linear;
+    transition: border-color 0.15s linear,background 0.15s linear;
+}
+#glm-events-search-form select#glm-event-category {
+    width: 85%;
+}
+/* 
+ * Search form styles end
+ */

diff --git a/views/front/events/agenda.html b/views/front/events/agenda.html
index f239435..70382df 100644 (file)
--- a/views/front/events/agenda.html
+++ b/views/front/events/agenda.html
@@ -1,13 +1,13 @@
 <div id="glm-event-wrapper">
-    <div class="row collapse">
+    <div class="glma-row glma-collapse">
         {include file='front/events/searchForm.html'}
     </div>
 
-    <div id="glm-event-agenda-view" class="row">
-        <div class="small-12 columns">
+    <div id="glm-event-agenda-view" class="glma-row">
+        <div class="glma-small-12 glma-columns">
             {foreach $eventsByDate as $date => $key}
-                <div class="row glm-event-day-row">
-                    <div class="small-12 medium-2 columns">
+                <div class="glma-row glm-event-day-row">
+                    <div class="glma-small-12 glma-medium-2 glma-columns">
                         <div class="glm-event-cal">
                             <div class="glm-event-cal-month">{$date|date_format:"%b"}</div>
                             <div class="glm-event-cal-day-container">
@@ -16,12 +16,12 @@
                             </div>
                         </div>
                     </div>
-                    <div class="small-12 medium-10 columns">
+                    <div class="glma-small-12 glma-medium-10 glma-columns">
                         {foreach $key as $events}
                             {foreach $events as $event}
                                 {$showTime = true}
-                            <div class="row glm-event-day-event">
-                                <div class="small-12 columns">
+                            <div class="glma-row glm-event-day-event">
+                                <div class="glma-small-12 glma-columns">
                                     <h2 class="agenda-event-name">{$event.name}</h2>
                                     {$eventDateTime = $event.starting_date|date_format:"%I:%M %P"}
                                         {foreach $event.recurrences as $rec}
@@ -297,7 +297,7 @@
 
         if(view === "calendar"){
             eventsCalMonthAJAX(month_obj);
-            main_content.removeClass("small-8").addClass("small-12");
+            main_content.removeClass("glma-small-8").addClass("glma-small-12");
             calendar.show();
             view_select.val('calendar');
 

diff --git a/views/front/events/agenda_new.html b/views/front/events/agenda_new.html
index 8dd7b78..97d751c 100644 (file)
--- a/views/front/events/agenda_new.html
+++ b/views/front/events/agenda_new.html
@@ -34,15 +34,15 @@
 </style>
 
 <div id="glm-event-wrapper">
-    <div class="row">
+    <div class="glma-row">
         {include file='front/events/searchForm.html'}
     </div>
 
-    <div id="glm-event-agenda-view" class="row" style="max-width: {if $settings.agenda_view_max_width}{$settings.agenda_view_max_width}{else}1000px{/if}; margin: 0 auto;">
-        <div class="small-12 columns">
+    <div id="glm-event-agenda-view" class="glma-row" style="max-width: {if $settings.agenda_view_max_width}{$settings.agenda_view_max_width}{else}1000px{/if}; margin: 0 auto;">
+        <div class="glma-small-12 glma-columns">
             {foreach $eventsByDate as $date => $key}
-                <div class="row glm-event-day-row-new open">
-                    <div class="small-12 medium-12 columns">
+                <div class="glma-row glm-event-day-row-new open">
+                    <div class="glma-small-12 glma-medium-12 glma-columns">
                         <div class="glm-event-cal-new">
                             <div class="glm-event-cal-day-container-new">
                                 <span>{$date|date_format:"%A %B %e"}</span>
@@ -50,14 +50,14 @@
 
                         </div>
                     </div>
-                    <div class="small-12 medium-12 columns">
+                    <div class="glma-small-12 glma-medium-12 glma-columns">
                         {foreach $key as $events}
                             {foreach $events as $event}
 
                                 {$showTime = true}
 
-                                <div class="row glm-event-day-event" data-url="{$siteBaseUrl}{$pageSlug}/{if !$customPage}{$event.name_slug}/{else}?eventId={$event.id}{/if}">
-                                    <div class="small-12 large-8 columns">
+                                <div class="glma-row glm-event-day-event" data-url="{$siteBaseUrl}{$pageSlug}/{if !$customPage}{$event.name_slug}/{else}?eventId={$event.id}{/if}">
+                                    <div class="glma-small-12 glma-large-8 glma-columns">
 
                                         <a class="glm-link" href="{$siteBaseUrl}{$pageSlug}/{if !$customPage}{$event.name_slug}/{else}?eventId={$event.id}{/if}">
                                             <h2 class="agenda-event-name">{$event.name}</h2>
@@ -133,7 +133,7 @@
 
                                         </div>
                                     </div>
-                                    <div class="small-12 large-4 columns glm-events-agenda-image">
+                                    <div class="glma-small-12 glma-large-4 glma-columns glm-events-agenda-image">
                                         {if $event.image}<img class="" style="float:none;" src="{$imgUrl}{$event.image}">{/if}
                                     </div>
                                 </div>
@@ -339,7 +339,7 @@ jQuery(document).ready(function($) {
 
     if(view === "calendar"){
         eventsCalMonthAJAX(month_obj);
-        main_content.removeClass("small-8").addClass("small-12");
+        main_content.removeClass("glma-small-8").addClass("glma-small-12");
         calendar.show();
         view_select.val('calendar');
 

diff --git a/views/front/events/confirmation.html b/views/front/events/confirmation.html
index 8abda08..e8d6a8d 100644 (file)
--- a/views/front/events/confirmation.html
+++ b/views/front/events/confirmation.html
@@ -1,7 +1,7 @@
 
 <html>
-    <div class="success-content row">
-        <div class='glm-grid-small-12 columns' id="success">
+    <div class="success-content glma-row">
+        <div class='glma-small-12 glma-columns' id="success">
             <p> Processing Form.... </p>
         </div>
     </div>

diff --git a/views/front/events/detail.html b/views/front/events/detail.html
index cec58b2..f0461ca 100755 (executable)
--- a/views/front/events/detail.html
+++ b/views/front/events/detail.html
@@ -1,28 +1,28 @@
-<div id="glm-event-wrapper" class="event-detail text-left"><!-- #glm-event-wrapper -->
-    <a id="glm-event-detail-takeback-mini" class="glm-member-db-takeback-mini button glm-member-button" href="javascript:history.go(-1)"><span>Back To Search</span></a>
-    <div class="row collapse">
-        <div class="small-12 large-8 large-small-centered column detail-search-form">
-            <div class="row">
+<div id="glm-event-wrapper" class="event-detail glma-text-left"><!-- #glm-event-wrapper -->
+    <a id="glm-event-detail-takeback-mini" class="glm-member-db-takeback-mini glma-button glm-member-button" href="javascript:history.go(-1)"><span>Back To Search</span></a>
+    <div class="glma-row glma-collapse">
+        <div class="glma-small-12 glma-large-8 glma-large-glma-small-centered glma-column detail-search-form">
+            <div class="glma-row">
                 {include file='front/events/searchForm.html'}
             </div>
         </div>
     </div>
     {if $event}
-    <div class="row"><!-- .row #1 -->
-        <div class="small-12 large-9 large-centered column"><!-- .small-12 .large-9 .large-centered .columns -->
-            <div class="row"><!-- .row #2 -->
-                <div class="small-12 column eventTitle">
+    <div class="glma-row"><!-- .glma-row #1 -->
+        <div class="glma-small-12 glma-large-9 glma-large-centered glma-column"><!-- .glma-small-12 .glma-large-9 .glma-large-centered .glma-columns -->
+            <div class="glma-row"><!-- .glma-row #2 -->
+                <div class="glma-small-12 glma-column eventTitle">
                     <h1>{$event.name}</h1>
                 </div>
                 {if $event.image}
-                <div class="small-12 column event-detail-image">
+                <div class="glma-small-12 glma-column event-detail-image">
                     <img style="margin: 15px;" src="{$mainImgUrl}{$event.image}">
                 </div>
                 {/if}
-                <div class="small-12 column"><!-- .small-12 .column -->
-                    <div class="row"><!-- .row #3 -->
+                <div class="glma-small-12 glma-column"><!-- .glma-small-12 .glma-column -->
+                    <div class="glma-row"><!-- .glma-row #3 -->
                         {if $event.locations}
-                            <div class="event-google-map small-12 medium-5 medium-uncentered columns">
+                            <div class="event-google-map glma-small-12 glma-medium-5 glma-medium-uncentered glma-columns">
                                 {if $event.locations.lat && $event.locations.address}
                                     <div id="eventDetailMap">
                                         <div id="eventDetail-map" title="Click to enlarge">map...</div>
@@ -39,7 +39,7 @@
                             {/if}
                         </div>
                     {elseif $event.member && ($event.use_member_location.value || $event.other_ref_dest) }
-                        <div class="small-12 medium-5 columns">
+                        <div class="glma-small-12 glma-medium-5 glma-columns">
                             {if $event.member.lat}
                                 <div id="eventDetailMap">
                                     <div id="eventDetail-map" title="Click to enlarge" >map...</div>
@@ -56,7 +56,7 @@
                             {/if}
                         </div>
                     {/if}
-                    <div class="small-12 medium-{if $event.locations || $event.use_member_location.value || $event.other_ref_dest}7{else}12{/if} column">
+                    <div class="glma-small-12 glma-medium-{if $event.locations || $event.use_member_location.value || $event.other_ref_dest}7{else}12{/if} glma-column">
                         <div id="glm-event-detail-dates">
                             {$lastDate = ''}
                             {foreach $event.recurrences as $rec}
@@ -176,14 +176,14 @@
                             {/if}
                             </div>
                         </div>
-                    </div><!-- /.row #3 -->
-                </div><!-- /.small-12 .column -->
-                <div class="small-12 column">
+                    </div><!-- /.glma-row #3 -->
+                </div><!-- /.glma-small-12 .glma-column -->
+                <div class="glma-small-12 glma-column">
                     {$event.descr}
                 </div>
-            </div><!-- /.row #2 -->
-        </div><!-- /.small-12 .large-9 .large-centered -->
-    </div><!-- /.row .collapse #1 -->
+            </div><!-- /.glma-row #2 -->
+        </div><!-- /.glma-small-12 .glma-large-9 .glma-large-centered -->
+    </div><!-- /.glma-row .glma-collapse #1 -->
     {else}
     <div>Sorry, No results.</div>
     {/if}

diff --git a/views/front/events/eventsFeed.html b/views/front/events/eventsFeed.html
index 3d67713..4d3aad7 100644 (file)
--- a/views/front/events/eventsFeed.html
+++ b/views/front/events/eventsFeed.html
@@ -1,14 +1,14 @@
-<div class="small-12 medium-9 large-10 columns">
+<div class="glma-small-12 glma-medium-9 glma-large-10 glma-columns">
     <h1>Upcoming Events</h1>
 </div>
-<div class="small-12 hide-for-small medium-3 large-2 columns">
+<div class="glma-small-12 glma-hide-for-small glma-medium-3 glma-large-2 glma-columns">
     <a href="{$mainEventUrl}"><button>View All Events</button></a>
 </div>
 {if $events}
-    <div class="small-12 columns">
-        <div id="feed" class="row collapse">
+    <div class="glma-small-12 glma-columns">
+        <div id="feed" class="glma-row glma-collapse">
             {foreach $events as $event}
-            <div class="small-12 text-left medium-6 large-4 columns">
+            <div class="glma-small-12 glma-text-left glma-medium-6 glma-large-4 glma-columns">
                 <a href="{$siteBaseUrl}{$pageSlug}/{if !$customPage}{$event.name_slug}/{else}?eventId={$event.id}{/if}"><img src="{$mainImgUrl}{$event.image}"></a>
                 <a href="{$siteBaseUrl}{$pageSlug}/{if !$customPage}{$event.name_slug}/{else}?eventId={$event.id}{/if}"><h6>{$event.name}</h6></a>
                 <hr>

diff --git a/views/front/events/eventsHomeCurrent.html b/views/front/events/eventsHomeCurrent.html
index c4050a7..3f545ed 100644 (file)
--- a/views/front/events/eventsHomeCurrent.html
+++ b/views/front/events/eventsHomeCurrent.html
@@ -3,12 +3,12 @@
         <div class="event">
             <h5>{$event.name}</h5>
             {if $event.image}
-                <div class="small-12 text-center medium-4 medium-text-left large-3 columns event-post">
+                <div class="glma-small-12 glma-text-center glma-medium-4 glma-medium-text-left glma-large-3 glma-columns event-post">
                     <img src="{$mainImgUrl}{$event.image}">
                 </div>
-                <div class="small-12 medium-8 large-9 columns event-post">
+                <div class="glma-small-12 glma-medium-8 glma-large-9 glma-columns event-post">
             {else}
-                <div class="small-12 columns event-post">
+                <div class="glma-small-12 glma-columns event-post">
             {/if}
                 <p class="post-date">{$event.dates}</p>
                 <p>{$event.intro}</p>

diff --git a/views/front/events/listForMemberDetail.html b/views/front/events/listForMemberDetail.html
index d0cff62..78fc199 100644 (file)
--- a/views/front/events/listForMemberDetail.html
+++ b/views/front/events/listForMemberDetail.html
@@ -4,8 +4,8 @@
 
     <div id="glm-event-wrapper"> 
     {foreach $eventsByDate as $date => $key}
-                <div class="row glm-event-day-row">
-                    <div class="small-4 medium-3 large-2 columns">
+                <div class="glma-row glm-event-day-row">
+                    <div class="glma-small-4 glma-medium-3 glma-large-2 glma-columns">
                         <div class="glm-event-cal">
                             <div class="glm-event-cal-month">{$date|date_format:"%b"}</div>
                             <div class="glm-event-cal-day-container">
@@ -14,11 +14,11 @@
                             </div>
                         </div>
                     </div>
-                    <div class="small-8 medium-9 large-10 columns">
+                    <div class="glma-small-8 glma-medium-9 glma-large-10 glma-columns">
                         {foreach $key as $events}
                             {foreach $events as $event}
-                            <div class="row glm-event-day-event">
-                                <div class="small-12 column">
+                            <div class="glma-row glm-event-day-event">
+                                <div class="glma-small-12 glma-column">
                                     <h2>{$event.name}</h2>
                                     {if !$event.all_day}
                                         {if $event.starting_date|date_format:"%l:%M %P" == $event.ending_date|date_format:"%l:%M %P"}
@@ -27,7 +27,7 @@
                                             {$event.starting_date|date_format:"%l:%M %P"} - {$event.ending_date|date_format:"%l:%M %P"}
                                         {/if}
                                     {/if}
-                                    <div class="event-content glm-hide clearfix">
+                                    <div class="event-content glm-hide glma-clearfix">
                                         {if $event.image}<img style="float:right;" src="{$imgUrl}{$event.image}">{/if}
                                         {$event.intro}
                                         <div>

diff --git a/views/front/events/searchForm.html b/views/front/events/searchForm.html
index e7a35b0..7390e7f 100644 (file)
--- a/views/front/events/searchForm.html
+++ b/views/front/events/searchForm.html
@@ -2,22 +2,22 @@
     var ajaxUrl = '{$ajaxUrl}';
 </script>
 {if !$eventId}
-    <div id="glm-events-search-form" class="small-12 columns">
+    <div id="glm-events-search-form" class="glma-small-12 glma-columns">
         <h1>Find An Event</h1>
         <form action="{$currentUrl}">
             <input type="hidden" name="search" value="1">
-            <div class="row">
-                <div class="small-12 medium-5 columns">
-                    <input class="glm-search-icon right" type="image" alt="Search" src="{$assetsUrl}search-icon-24x24.png">
+            <div class="glma-row">
+                <div class="glma-small-12 glma-medium-5 glma-columns">
+                    <input class="glm-search-icon glma-right" type="image" alt="Search" src="{$assetsUrl}search-icon-24x24.png">
                     <input id="glm-event-name" name="event_name" placeholder="Event Name" value="{$eventName}">
                 </div>
 
-                <div class="small-12 small-text-center medium-7 medium-text-right columns">
+                <div class="glma-small-12 glma-small-text-center glma-medium-7 glma-medium-text-right glma-columns">
                     <a id="glm-event-add-event" href="{$siteBaseUrl}add-event/" class="tiny button success">Add an Event</a>
                 </div>
             </div>
-            <div class="row">
-                <div class="small-12 columns">
+            <div class="glma-row">
+                <div class="glma-small-12 glma-columns">
                     <hr />
                 </div>
             </div>
@@ -25,68 +25,68 @@
         <form id="glm-member-event-search" action="{$currentUrl}" method="get">
             <input type="hidden" name="search" value="1">
             <input type="hidden" name="override_default" value="yes">
-            <div class="row">
-                <div class="small-6 medium-3 column">
-                    <div class="row collapse prefix-radius">
-                        <div class="small-3 columns">
-                            <span class="prefix">From</span>
+            <div class="glma-row">
+                <div class="glma-small-6 glma-medium-3 glma-column">
+                    <div class="glma-row glma-collapse glma-prefix-radius">
+                        <div class="glma-small-3 glma-columns">
+                            <span class="glma-prefix">From</span>
                         </div>
-                        <div class="small-9 columns">
+                        <div class="glma-small-9 glma-columns">
                             <input id="glm-event-from" name="glm_event_from" value="{$fromDate}">
                         </div>
                     </div>
                 </div>
-                <div class="small-6 medium-3 column">
-                    <div class="row collapse prefix-radius">
-                        <div class="small-3 columns">
-                            <span class="prefix">To</span>
+                <div class="glma-small-6 glma-medium-3 glma-column">
+                    <div class="glma-row glma-collapse glma-prefix-radius">
+                        <div class="glma-small-3 glma-columns">
+                            <span class="glma-prefix">To</span>
                         </div>
-                        <div class="small-9 columns">
+                        <div class="glma-small-9 glma-columns">
                             <input id="glm-event-to" name="glm_event_to" value="{$toDate}">
                         </div>
                     </div>
                 </div>
-                <div class="small-8 medium-4 column">
-                    <input class="glm-search-icon right" type="image" alt="Search" src="{$assetsUrl}search-icon-24x24.png">
-                    <select id="glm-event-category" name="category">
+                <div class="glma-small-8 glma-medium-4 glma-column">
+                    <input class="glm-search-icon glma-right" type="image" alt="Search" src="{$assetsUrl}search-icon-24x24.png">
+                    <select id="glm-event-category" name="category" class="glma-select">
                         <option value="0">-- All Categories --</option>
                         {foreach $categories as $cat}
                             <option value="{$cat.id}"{if $cat.default == 1} selected{/if}>{$cat.name}</option>
                         {/foreach}
                     </select>
                 </div>
-                <div class="small-4 medium-2 column">
+                <div class="glma-small-4 glma-medium-2 glma-column">
                     {if !$eventId}
-                    <input data-cats="{$pdfCatList}" class="right" type="image" title="Print PDF" id="glm-event-pdf-submit" src="{$assetsUrl}print-icon-24x24.png">
+                    <input data-cats="{$pdfCatList}" class="glma-right" type="image" title="Print PDF" id="glm-event-pdf-submit" src="{$assetsUrl}print-icon-24x24.png">
                     {else}
                     {/if}
                     <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=rssFeed{if $eventId}&eventId={$eventId}{/if}">
-                    <img class="right" title="RSS Feed" id="glm-event-rss-feed" src="{$assetsUrl}rss-icon-24x24.png" />
+                    <img class="glma-right" title="RSS Feed" id="glm-event-rss-feed" src="{$assetsUrl}rss-icon-24x24.png" />
                     </a>
                     <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=icalFeed&ical=1{if $eventId}&eventId={$eventId}{/if}">
-                    <img class="right" title="iCal Feed" id="glm-event-ical-feed" src="{$assetsUrl}calendar-icon-24x24.png" />
+                    <img class="glma-right" title="iCal Feed" id="glm-event-ical-feed" src="{$assetsUrl}calendar-icon-24x24.png" />
                     </a>
                 </div>
             </div>
         </form>
     </div>
 {else}
-    <!-- <div class="small-8 medium-10 columns"></div> -->
-    <div class="small-8 medium-10 columns">
+    <!-- <div class="glma-small-8 glma-medium-10 glma-columns"></div> -->
+    <div class="glma-small-8 glma-medium-10 glma-columns">
         {if !$eventId}
-        <input data-cats="{$pdfCatList}" class="right" type="image" title="Print PDF" id="glm-event-pdf-submit" src="{$assetsUrl}print-icon-24x24.png">
+        <input data-cats="{$pdfCatList}" class="glma-right" type="image" title="Print PDF" id="glm-event-pdf-submit" src="{$assetsUrl}print-icon-24x24.png">
         {else}
         {/if}
         <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=rssFeed{if $eventId}&eventId={$eventId}{/if}">
-        <img class="right" title="RSS Feed" id="glm-event-rss-feed" src="{$assetsUrl}rss-icon-24x24.png" />
+        <img class="glma-right" title="RSS Feed" id="glm-event-rss-feed" src="{$assetsUrl}rss-icon-24x24.png" />
         </a>
         <a href="{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=icalFeed&ical=1{if $eventId}&eventId={$eventId}{/if}">
-        <img class="right" title="iCal Feed" id="glm-event-ical-feed" src="{$assetsUrl}calendar-icon-24x24.png" />
+        <img class="glma-right" title="iCal Feed" id="glm-event-ical-feed" src="{$assetsUrl}calendar-icon-24x24.png" />
         </a>
     </div>
 {/if}
-<div class="small-12 columns view-select">
-    <select id="glm-event-view-select">
+<div class="glma-small-12 glma-columns view-select">
+    <select id="glm-event-view-select" class="glma-select">
         <option id="agenda-view-option" value="agenda"> Agenda View </option>
         <option id="calendar-view-option" value="calendar"> Calendar View </option>
     </select>