From 849654a0ff7b2ddb621306031745c6c5efe8c6df Mon Sep 17 00:00:00 2001
From: ProDrone <me@prodrone.com>
Date: Tue, 15 Dec 2015 19:31:34 +0100
Subject: [PATCH] Failsafe TAB - moved styling from HTML to CSS

---
 tabs/failsafe.css  | 98 +++++++++++++++++++++++++++-------------------
 tabs/failsafe.html | 24 ++++++------
 2 files changed, 69 insertions(+), 53 deletions(-)

diff --git a/tabs/failsafe.css b/tabs/failsafe.css
index 1ab23e5b..551ddc33 100644
--- a/tabs/failsafe.css
+++ b/tabs/failsafe.css
@@ -33,12 +33,12 @@
 
 .tab-failsafe .number input.disabled {
     width: 43px;
-    padding: 0px 5px;
+    padding: 0 5px;
     background-color: #ececec;
 }
 
 .tab-failsafe .number span {
-    margin-left: 0px;
+    margin-left: 0;
 }
 
 .tab-failsafe .checkbox {
@@ -47,24 +47,24 @@
     margin-bottom: 6px;
     padding-bottom: 5px;
     border-bottom: 1px solid #ddd;
-    margin-top: 0px;
+    margin-top: 0;
 }
 
 .tab-failsafe .subline {
-    float:left;
-    width:100%;
+    float: left;
+    width: 100%;
     font-size: 13px;
-    margin-top:15px;
-    margin-bottom:5px;
+    margin-top: 15px;
+    margin-bottom: 5px;
 }
 
 .tab-failsafe .radioarea {
-    float:left;
-    width:100%;
-    border-radius:5px;
-    background-color:#ededed;
-    margin-bottom:0px;
-    margin-top:5px;
+    float: left;
+    width: 100%;
+    border-radius: 5px;
+    background-color: #ededed;
+    margin-bottom: 0;
+    margin-top: 5px;
     height: 150px;
 }
 
@@ -74,7 +74,7 @@
     margin-top: 38px;
     margin-left: 15px;
     font-size: 12px;
-    font-family: 'open_sansregular', Arial;
+    font-family: 'open_sansregular', sans-serif;
 }
 
 .tab-failsafe .radiobuttons input {
@@ -83,47 +83,47 @@
 }
 
 .tab-failsafe .proceduresettings {
-    padding:10px;
+    padding: 10px;
     margin-top: 75px;
 }
 
 .tab-failsafe .radiobuttons label {
     float: left;
-    width:130px;
+    width: 130px;
     margin-top: -2px;
 }
 
 .tab-failsafe .pro1 {
-    background-image:url(../images/icons/cf_failsafe_procedure1.svg);
+    background-image: url(../images/icons/cf_failsafe_procedure1.svg);
     background-position: top right 10px;
     background-size: 200px;
-    background-repeat:no-repeat;
+    background-repeat: no-repeat;
 }
 
 .tab-failsafe .pro2 {
-    background-image:url(../images/icons/cf_failsafe_procedure2.svg);
+    background-image: url(../images/icons/cf_failsafe_procedure2.svg);
     background-position: top right 10px;
     background-size: 200px;
-    background-repeat:no-repeat;
+    background-repeat: no-repeat;
 }
 
 .tab-failsafe .pro3 {
-    background-image:url(../images/icons/cf_failsafe_procedure3.svg);
+    background-image: url(../images/icons/cf_failsafe_procedure3.svg);
     background-position: top right 10px;
     background-size: 200px;
-    background-repeat:no-repeat;
+    background-repeat: no-repeat;
 }
 
 .tab-failsafe .pro4 {
-    background-image:url(../images/icons/cf_failsafe_procedure4.svg);
+    background-image: url(../images/icons/cf_failsafe_procedure4.svg);
     background-position: top right 10px;
     background-size: 200px;
-    background-repeat:no-repeat;
+    background-repeat: no-repeat;
 }
 
 .tab-failsafe .spacer_box .helpicon {
-    margin-top:3px;
-    margin-right:0px;
+    margin-top: 3px;
+    margin-right: 0;
     
 }
 
@@ -141,7 +141,7 @@
 }
 
 .tab-failsafe span {
-    margin: 0px
+    margin: 0;
 }
 
 .tab-failsafe .spacer_box {
@@ -159,12 +159,12 @@
 
 .tab-failsafe .number:last-child {
     border-bottom: none;
-    padding-bottom: 0px;
-    margin-bottom: 0px;
+    padding-bottom: 0;
+    margin-bottom: 0;
 }
 
 .tab-failsafe .gui_box_titlebar {
-    margin-bottom: 0px;
+    margin-bottom: 0;
 }
 
 .tab-failsafe .numberspacer {
@@ -175,29 +175,29 @@
 
 .tab-failsafe .gui_box {
     font-style: normal;
-    font-family: 'open_sanssemibold', Arial;
+    font-family: 'open_sanssemibold', sans-serif;
     margin-bottom: 15px;
     float: left;
 }
 
 .tab-failsafe .gui_box span {
     font-style: normal;
-    font-family: 'open_sansregular', Arial;
+    font-family: 'open_sansregular', sans-serif;
     line-height: 19px;
     color: #7d7d7d;
     font-size: 11px;
 }
 
 .tab-failsafe .stage1 .number input {
-    float:right;
-    margin-right:0px;
+    float: right;
+    margin-right: 0;
  }
     
 .tab-failsafe .stage1 select {
-    float:left;
+    float: left;
     width: 95%;
     height: 22px;
-    margin: 0px;
+    margin: 0;
     border: 1px solid silver;
     }
 
@@ -206,15 +206,31 @@
     border-radius: 3px;
     border: 1px solid #686c6a;
     color: #fff !important;
-    font-weight:normal;
-    font-family: 'open_sanssemibold', Arial;
+    font-weight: normal;
+    font-family: 'open_sanssemibold', sans-serif;
     padding-left: 3px;
-    padding-right:3px;
-    margin-right:3px;
+    padding-right: 3px;
+    margin-right: 3px;
 }
 
 .tab-failsafe .channelname {
-    margin-right:3px;
+    margin-right: 3px;
+}
+
+.tab-failsafe .note {
+    margin-bottom: 20px;
+}
+
+.tab-failsafe .cf_tooltiptext {
+    display: none;
+}
+
+.tab-failsafe .rightWrapper .spacer_box {
+    padding-bottom: 7px;
+}
+
+.tab-failsafe .pro1 {
+    height: 90px;
 }
 
 @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
diff --git a/tabs/failsafe.html b/tabs/failsafe.html
index 1a153e75..ee768da0 100644
--- a/tabs/failsafe.html
+++ b/tabs/failsafe.html
@@ -4,13 +4,13 @@
         <div class="cf_doc_version_bt">
             <a id="button-documentation" href="https://github.com/cleanflight/cleanflight/releases" target="_blank"></a>
         </div>
-        <div class="note newpane" style="margin-bottom: 20px;">
+        <div class="note newpane">
             <div class="note_spacer">
                 <p i18n="failsafeFeaturesHelpNew"></p>
                 </p>
             </div>
         </div>
-        <div class="note oldpane" style="margin-bottom: 20px;">
+        <div class="note oldpane">
             <div class="note_spacer">
                 <p i18n="failsafeFeaturesHelpOld"></p>
                 </p>
@@ -40,7 +40,7 @@
                 <div class="gui_box_titlebar">
                     <div class="spacer_box_title" i18n="failsafePulsrangeTitle"></div>
                     <div class="helpicon cf_tip">
-                        <div class="cf_tooltiptext" style="display:none;" i18n="failsafePulsrangeHelp"></div>
+                        <div class="cf_tooltiptext" i18n="failsafePulsrangeHelp"></div>
                     </div>
                 </div>
                 <div class="spacer_box">
@@ -60,7 +60,7 @@
                 <div class="gui_box_titlebar">
                     <div class="spacer_box_title" i18n="failsafeChannelFallbackSettingsTitle"></div>
                     <div class="helpicon cf_tip">
-                        <div class="cf_tooltiptext" style="display:none;" i18n="failsafeChannelFallbackSettingsHelp"></div>
+                        <div class="cf_tooltiptext" i18n="failsafeChannelFallbackSettingsHelp"></div>
                     </div>
                 </div>
                 <div class="spacer_box">
@@ -71,11 +71,11 @@
             </div>
         </div>
         <div class="rightWrapper">
-            <div class="gui_box grey newpane" style="margin-bottom:0px;">
+            <div class="gui_box grey newpane">
                 <div class="gui_box_titlebar">
                     <div class="spacer_box_title" i18n="failsafeStageTwoSettingsTitle"></div>
                 </div>
-                <div class="spacer_box" style="padding-bottom:7px;">
+                <div class="spacer_box">
                     <div class="checkbox">
                         <div class="numberspacer" >
                             <input type="checkbox" name="failsafe_feature_new" class="feature toggle rxFailsafe" id="failsafe_feature_new" />
@@ -83,7 +83,7 @@
                         <label for="failsafe_feature_new"><span i18n="failsafeFeatureItem"></span>
                         </label>
                         <div class="helpicon cf_tip">
-                            <div class="cf_tooltiptext" style="display:none;" i18n="failsafeFeatureHelp"></div>
+                            <div class="cf_tooltiptext" i18n="failsafeFeatureHelp"></div>
                         </div>
                     </div>
                     <div class="checkbox stage2">
@@ -93,7 +93,7 @@
                         <label for="failsafe_kill_switch"><span i18n="failsafeKillSwitchItem"></span>
                         </label>
                         <div class="helpicon cf_tip">
-                            <div class="cf_tooltiptext" style="display:none;" i18n="failsafeKillSwitchHelp"></div>
+                            <div class="cf_tooltiptext" i18n="failsafeKillSwitchHelp"></div>
                         </div>
                     </div>
                     <div class="number stage2">
@@ -101,7 +101,7 @@
                             i18n="failsafeDelayItem"></span>
                         </label>
                         <div class="helpicon cf_tip">
-                            <div class="cf_tooltiptext" style="display:none;"i18n="failsafeDelayHelp"></div>
+                            <div class="cf_tooltiptext" i18n="failsafeDelayHelp"></div>
                         </div>
                     </div>
                     <div class="number stage2">
@@ -109,12 +109,12 @@
                             i18n="failsafeThrottleLowItem"></span>
                         </label>
                         <div class="helpicon cf_tip">
-                            <div class="cf_tooltiptext" style="display:none;" i18n="failsafeThrottleLowHelp"></div>
+                            <div class="cf_tooltiptext" i18n="failsafeThrottleLowHelp"></div>
                         </div>
                     </div>
                     <!-- radio buttons  -->
                     <div class="subline stage2" i18n="failsafeSubTitle1"></div>
-                    <div class="radioarea pro1 stage2" style="height:90px;">
+                    <div class="radioarea pro1 stage2">
                         <div class="radiobuttons"><input class="procedure" id="drop" name="group1" type="radio"/>
                             <label for="drop" i18n="failsafeProcedureItemSelect2"></label>
                         </div>
@@ -134,7 +134,7 @@
                                     i18n="failsafeOffDelayItem"></span>
                                 </label>
                                 <div class="helpicon cf_tip">
-                                    <div class="cf_tooltiptext" style="display:none;" i18n="failsafeOffDelayHelp"></div>
+                                    <div class="cf_tooltiptext" i18n="failsafeOffDelayHelp"></div>
                                 </div>
                             </div>
                         </div>