changed the layout a bit

diff --git a/static/css/base-site.css b/static/css/base-site.css
index 4a34975fca0b1044409c5c0692183cccdcdeee3e..def0ce1eab15de9edff2029e0d77f08cb708d2ae 100644 (file)
--- a/static/css/base-site.css
+++ b/static/css/base-site.css
@@ -38,7 +38,6 @@ div.header-container {
 }
 
 div.page {
-    min-height: 2000px;
     padding-bottom: 20px;
     font-size: 1em;
     transition: all 0.5s;
@@ -79,10 +78,10 @@ div.page-container.stretched {
 div.settings {
     background-color: #313131;
     position: absolute;
-    top: -50px;
+    top: 0px;
     left: 0px;
-    bottom: 0px;
     width: 0px;
+    min-height: 100%;
     transition: all 0.2s;
     overflow: hidden;
 }
@@ -102,7 +101,12 @@ div.settings.open div.settings-container {
 }
 
 div.settings-top-bar {
+    display: inline-block;
+    width: 40%;
     height: 50px;
+}
+
+div.settings-top-bar.open {
     background-color: #414141;
 }
 
@@ -115,7 +119,7 @@ div.settings-section-title {
 
 table.settings {
     width: 100%;
-    padding: 0.5em 0.5em 2em 0.5em;
+    padding: 0.5em 0.5em 1em 0.5em;
 }
 
 td.settings-item-label {
@@ -141,42 +145,34 @@ div.settings-item-separator {
 }
 
 select.video-device {
+    display: none;
     padding: 4px 1.5em 4px 4px;
     vertical-align: middle;
     font-size: 20px;
     width: auto;
 }
 
+div.settings-top-bar.open select.video-device {
+    display: inline;
+}
+
 div.check-box.section {
     margin: 0px;
     float: left;
 }
 
-div.check-box.top-bar {
-    margin: 10px;
-    float: right;
-    width: 90px;
-    height: 30px;
-}
-
-div.check-box.top-bar div.check-box-button {
-    line-height: 30px;
-}
-
-div.check-box.top-bar div.check-box-button span.check-box-text {
-    font-size: 20px;
-}
-
-div.check-box.section div.check-box-button,
-div.check-box.top-bar div.check-box-button {
+div.check-box.section div.check-box-button {
     background-color: #515151;
 }
 
-div.check-box.on.section div.check-box-button,
-div.check-box.on.top-bar div.check-box-button {
+div.check-box.on.section div.check-box-button {
     background-color: #3498db;
 }
 
+tr.advanced-setting {
+    display: none;
+}
+
 
     /* media queries */
 
@@ -192,13 +188,13 @@ div.check-box.on.top-bar div.check-box-button {
     /* mobile devices */
     
     body {
-        font-size: 25px;
+        font-size: 17px;
     }
     
     div.page,
     div.header-container {
         width: 100%;
-        min-width: 480px;
+        min-width: 320px;
     }
     
     div.header {
@@ -209,10 +205,14 @@ div.check-box.on.top-bar div.check-box-button {
         margin-left: 0px;
     }
     
+    div.settings-top-bar,
+    div.settings-top-bar.open {
+        width: auto;
+        background-color: transparent;
+    }
+    
     div.settings.open {
-        width: 80%;
-        box-shadow: 0px 0px 30px rgba(0,0,0,0.8);
-        background-color: rgba(48, 48, 48, 0.9);
+        width: 100%;
     }
 }
 
@@ -235,6 +235,7 @@ img.settings-button {
 
 div.logo {
     float: right;
+    display: inline-block;
     white-space: nowrap;
     opacity: 0.86;
 }

diff --git a/static/css/ui.css b/static/css/ui.css
index ebf0d48ec8d0514e068275766e21f52af3f0c51e..628fa5d93c3384ee51c677f2221fe6723a6e062d 100644 (file)
--- a/static/css/ui.css
+++ b/static/css/ui.css
@@ -105,7 +105,6 @@ input[type=text].number {
 
 select.styled {
     -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     width: 90%;
     border: 1px solid #2A6C96;
@@ -126,6 +125,7 @@ select.styled {
 
 select.styled:FOCUS {
     background-color: #414141;
+    appearance: auto;
 }
 
 select.styled:HOVER,
@@ -134,6 +134,11 @@ select.styled:FOCUS {
     color: white;
 }
 
+.ff select.styled {
+    background-image: none;
+    padding-right: 1px;
+}
+
 
     /* slider */
 

diff --git a/static/js/base.js b/static/js/base.js
index 6795993e045138da3b443cf907251d7b3d783104..6c3f0067e08df228594a34d113f22fbdf57dab3d 100644 (file)
--- a/static/js/base.js
+++ b/static/js/base.js
@@ -34,18 +34,18 @@ function initUI() {
 }
 
 function handleDocumentReady() {
-//    $('body').click(function () {
-//        if ($('div.settings').hasClass('open')) {
-//            $('div.settings').removeClass('open');
-//            $('div.page-container').removeClass('stretched');
-//        }
-//        else {
-//        }
-//    });
-//    
-    $('div.settings').addClass('open');
-    $('div.page-container').addClass('stretched');
-    $('div.page').css('min-height', $('div.settings').height() + 100);
+    $('img.settings-button').click(function () {
+        if ($('div.settings').hasClass('open')) {
+            $('div.settings').removeClass('open');
+            $('div.page-container').removeClass('stretched');
+            $('div.settings-top-bar').removeClass('open');
+        }
+        else {
+            $('div.settings').addClass('open');
+            $('div.page-container').addClass('stretched');
+            $('div.settings-top-bar').addClass('open');
+        }
+    });
     
     initUI();
 }

diff --git a/static/js/css-browser-selector.js b/static/js/css-browser-selector.js
new file mode 100644 (file)
index 0000000..79759df
--- /dev/null
+++ b/static/js/css-browser-selector.js
@@ -0,0 +1,14 @@
+/*
+CSS Browser Selector js v0.5.3 (July 2, 2013)
+
+-- original --
+Rafael Lima (http://rafael.adm.br)
+http://rafael.adm.br/css_browser_selector
+License: http://creativecommons.org/licenses/by/2.5/
+Contributors: http://rafael.adm.br/css_browser_selector#contributors
+-- /original --
+
+Fork project: http://code.google.com/p/css-browser-selector/
+Song Hyo-Jin (shj at xenosi.de)
+*/
+function css_browser_selector(n){var b=n.toLowerCase(),f=function(c){return b.indexOf(c)>-1},h="gecko",k="webkit",p="safari",j="chrome",d="opera",e="mobile",l=0,a=window.devicePixelRatio?(window.devicePixelRatio+"").replace(".","_"):"1";var i=[(!(/opera|webtv/.test(b))&&/msie\s(\d+)/.test(b)&&(l=RegExp.$1*1))?("ie ie"+l+((l==6||l==7)?" ie67 ie678 ie6789":(l==8)?" ie678 ie6789":(l==9)?" ie6789 ie9m":(l>9)?" ie9m":"")):(/firefox\/(\d+)\.(\d+)/.test(b)&&(re=RegExp))?h+" ff ff"+re.$1+" ff"+re.$1+"_"+re.$2:f("gecko/")?h:f(d)?d+(/version\/(\d+)/.test(b)?" "+d+RegExp.$1:(/opera(\s|\/)(\d+)/.test(b)?" "+d+RegExp.$2:"")):f("konqueror")?"konqueror":f("blackberry")?e+" blackberry":(f(j)||f("crios"))?k+" "+j:f("iron")?k+" iron":!f("cpu os")&&f("applewebkit/")?k+" "+p:f("mozilla/")?h:"",f("android")?e+" android":"",f("tablet")?"tablet":"",f("j2me")?e+" j2me":f("ipad; u; cpu os")?e+" chrome android tablet":f("ipad;u;cpu os")?e+" chromedef android tablet":f("iphone")?e+" ios iphone":f("ipod")?e+" ios ipod":f("ipad")?e+" ios ipad tablet":f("mac")?"mac":f("darwin")?"mac":f("webtv")?"webtv":f("win")?"win"+(f("windows nt 6.0")?" vista":""):f("freebsd")?"freebsd":(f("x11")||f("linux"))?"linux":"",(a!="1")?" retina ratio"+a:"","js portrait"].join(" ");if(window.jQuery&&!window.jQuery.browser){window.jQuery.browser=l?{msie:1,version:l}:{}}return i}(function(j,b){var c=css_browser_selector(navigator.userAgent);var g=j.documentElement;g.className+=" "+c;var a=c.replace(/^\s*|\s*$/g,"").split(/ +/);b.CSSBS=1;for(var f=0;f<a.length;f++){b["CSSBS_"+a[f]]=1}var e=function(d){return j.documentElement[d]||j.body[d]};if(b.jQuery){(function(q){var h="portrait",k="landscape";var i="smartnarrow",u="smartwide",x="tabletnarrow",r="tabletwide",w=i+" "+u+" "+x+" "+r+" pc";var v=q(g);var s=0,o=0;function d(){try{var l=e("clientWidth"),p=e("clientHeight");if(l>p){v.removeClass(h).addClass(k)}else{v.removeClass(k).addClass(h)}if(l==o){return}o=l;clearTimeout(s)}catch(m){}s=setTimeout(n,100)}function n(){try{v.removeClass(w);v.addClass((o<=360)?i:(o<=640)?u:(o<=768)?x:(o<=1024)?r:"pc")}catch(l){}}q(b).on("resize orientationchange",d).trigger("resize")})(b.jQuery)}})(document,window);

diff --git a/templates/base-site.html b/templates/base-site.html
index f90e452a042e23e44f51cd2bd7d5b665099ba8b4..46d1ae4149e57e7ed007f8dfeeee27813938ac47 100644 (file)
--- a/templates/base-site.html
+++ b/templates/base-site.html
@@ -8,13 +8,20 @@
 
 {% block script %}
     {{super()}}
+    <script type="text/javascript" src="{{STATIC_URL}}js/css-browser-selector.js"></script>
     <script type="text/javascript" src="{{STATIC_URL}}js/ui.js"></script>
 {% endblock %}
 
 {% block body %}
     <div class="header">
         <div class="header-container">
-            <img class="settings-button" src="{{STATIC_URL}}img/settings.png">
+            <div class="settings-top-bar">
+                <img class="settings-button" src="{{STATIC_URL}}img/settings.png">
+                <select class="video-device styled" id="videoDeviceSelect">
+                    <option>USB Camera 2.0</option>
+                    <option>A4Tech Camera</option>
+                </select>
+            </div>
             <div class="logo">
                 <a href="/">
                     <span class="logo">motionEye</span>
@@ -25,36 +32,28 @@
     </div>
     <div class="page">
         <div class="settings">
-            <div class="settings-top-bar">
-                <img class="settings-button" src="{{STATIC_URL}}img/settings.png">
-                <select class="video-device styled" id="videoDeviceSelect">
-                    <option>USB Camera 2.0</option>
-                    <option>A4Tech Camera</option>
-                </select>
-                <input type="checkbox" class="styled top-bar" id="generalSwitch">
-            </div>
             <div class="settings-container">
-                <div class="settings-section-title">General Settings</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section" id="motionEyeSwitch">General Settings</div>
                 <table class="settings">
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Show Advanced Settings</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled general" id="showAdvancedSwitch"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">motionEye Username</span></td>
                         <td class="settings-item-value"><input type="text" class="styled general" id="motionEyeUsernameEntry"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">motionEye Password</span></td>
                         <td class="settings-item-value"><input type="password" class="styled general" id="motionEyePasswordEntry"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td colspan="100"><div class="settings-item-separator"></div></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Storage Device</span></td>
                         <td class="settings-item-value">
                             <select class="styled general" id="storageDeviceSelect">
@@ -62,32 +61,32 @@
                                 <option>Network Share</option>
                             </select>
                         </td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Network Server</span></td>
                         <td class="settings-item-value"><input type="text" class="styled general" id="networkServerEntry"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Share Username</span></td>
                         <td class="settings-item-value"><input type="text" class="styled general" id="networkUsernameEntry"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Share Password</span></td>
                         <td class="settings-item-value"><input type="text" class="styled general" id="networkPasswordEntry"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Share Name</span></td>
                         <td class="settings-item-value"><input type="text" class="styled general" id="networkShareNameEntry"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Root Directory</span></td>
                         <td class="settings-item-value"><input type="text" class="styled general" id="rootDirectoryEntry"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                 </table>
                 
@@ -96,45 +95,45 @@
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Camera Name</span></td>
                         <td class="settings-item-value"><input type="text" class="styled device" id="deviceNameEntry" placeholder="camera name..."></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td colspan="100"><div class="settings-item-separator"></div></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Light Switch Detection</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled device" id="lightSwitchDetectSwitch"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Automatic Brightness</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled device" id="autoBrightnessSwitch"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Brightness</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled device" id="brightnessSlider"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Contrast</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled device" id="contrastSlider"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Saturation</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled device" id="saturationSlider"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Hue</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled device" id="hueSlider"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td colspan="100"><div class="settings-item-separator"></div></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Video Resolution</span></td>
                         <td class="settings-item-value">
                             <select class="video-resolution styled device" id="resolutionSelect">
@@ -142,9 +141,9 @@
                                 <option>1024 x 768</option>
                             </select>
                         </td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Video Rotation</span></td>
                         <td class="settings-item-value">
                             <select class="video-resolution styled device" id="rotationSelect">
@@ -153,13 +152,13 @@
                                 <option>180&deg;</option>
                                 <option>270&deg;</option>
                             </select>
-                            <td class="settings-item-value"><span class="help-mark">?</span></td>
+                            <td><span class="help-mark">?</span></td>
                         </td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Frame Rate</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled device" id="framerateSlider"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                 </table>
 
@@ -174,12 +173,12 @@
                                 <option>Custom Text</option>
                             </select>
                         </td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"></td>
                         <td class="settings-item-value"><input type="text" class="styled text-overlay" id="leftTextEntry" placeholder="custom text..."></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Right Text</span></td>
@@ -190,47 +189,47 @@
                                 <option>Custom Text</option>
                             </select>
                         </td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"></td>
                         <td class="settings-item-value"><input type="text" class="styled text-overlay" id="rightTextEntry" placeholder="custom text..."></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                 </table>
 
                 <div class="settings-section-title"><input type="checkbox" class="styled section">Video Streaming</div>
                 <table class="settings">
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Streaming Frame Rate</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled streaming" id="streamingFramerateSlider"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Streaming Quality</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled streaming" id="streamingQualitySlider"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Motion Optimization</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled streaming" id="motionOptimizationSwitch"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                 </table>
                 
                 <div class="settings-section-title"><input type="checkbox" class="styled section">Still Images</div>
                 <table class="settings">
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Image File Name</span></td>
                         <td class="settings-item-value"><input type="text" class="styled still-images" id="imageFileNameEntry" placeholder="file name pattern..."></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Image Quality</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled still-images" id="imageQualitySlider"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Capture Mode</span></td>
                         <td class="settings-item-value">
                             <select class="styled still-images" id="captureModeSelect">
@@ -239,26 +238,26 @@
                                 <option>All Frames</option>
                             </select>
                         </td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Snapshot Interval</span></td>
                         <td class="settings-item-value"><input type="text" class="styled number still-images" id="snapshotIntervalEntry"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                 </table>
                 
                 <div class="settings-section-title"><input type="checkbox" class="styled section">Motion Movies</div>
                 <table class="settings">
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Movie File Name</span></td>
                         <td class="settings-item-value"><input type="text" class="styled motion-movies" id="movieFileNameEntry" placeholder="file name pattern..."></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Movie Quality</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled motion-movies" id="movieQualitySlider"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Preserve Movies</span></td>
@@ -271,49 +270,49 @@
                                 <option>Forever</option>
                             </select>
                         </td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                 </table>
                 
                 <div class="settings-section-title">Motion Detection</div>
                 <table class="settings">
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Show Frame Changes</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled motion-detection" id="showFrameChangesSwitch"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Frame Change Threshold</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled motion-detection" id="frameChangeThresholdSlider"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Automatic Noise Detection</span></td>
                         <td class="settings-item-value"><input type="checkbox" class="styled motion-detection" id="autoNoiseDetectSwitch"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Noise Level</span></td>
                         <td class="settings-item-value"><input type="text" class="range styled motion-detection" id="noiseLevelSlider"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td colspan="100"><div class="settings-item-separator"></div></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Motion Gap</span></td>
                         <td class="settings-item-value"><input type="text" class="number styled motion-detection" id="gapEntry"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Frames Captured Before</span></td>
                         <td class="settings-item-value"><input type="text" class="number styled motion-detection" id="preCaptureEntry"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
-                    <tr>
+                    <tr class="advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Frames Captured After</span></td>
                         <td class="settings-item-value"><input type="text" class="number styled motion-detection" id="postCaptureEntry"></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                 </table>
                 
@@ -322,12 +321,12 @@
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Email Address</span></td>
                         <td class="settings-item-value"><input type="text" class="styled notifications" id="emailAddressEntry" placeholder="email address..."></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                     <tr>
                         <td class="settings-item-label"><span class="settings-item-label">Phone Number</span></td>
                         <td class="settings-item-value"><input type="text" class="styled notifications" id="phoneNumberEntry" placeholder="phone number..."></td>
-                        <td class="settings-item-value"><span class="help-mark">?</span></td>
+                        <td><span class="help-mark">?</span></td>
                     </tr>
                 </table>
             </div>