From c954df90ad47f62d7139e4c297138edf353bd5e7 Mon Sep 17 00:00:00 2001
From: Brett Langdon <brett@blangdon.com>
Date: Sun, 3 Mar 2013 14:56:34 -0500
Subject: [PATCH] make warning alerts optional

---
 index.html                       |  2 +-
 index.jade                       | 10 ++++++++++
 scripts/main.js                  | 32 +++++++++++++++++++++++++++-----
 scripts/main.min.js              |  2 +-
 styles/foundation.select.min.css |  1 +
 5 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 styles/foundation.select.min.css
diff --git a/index.html b/index.html
index 83cea5b..035bd4a 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html><head><title>Brew Timer</title><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Offside"><link rel="stylesheet" href="styles/foundation.min.css"><link rel="stylesheet" href="styles/general_foundicons.min.css"><!--[if lt IE 8]><link><![endif]--><link rel="stylesheet" href="styles/main.min.css"><script src="scripts/jquery.min.js"></script><script src="scripts/foundation.min.js"></script><script src="scripts/modernizr.foundation.js"></script><script src="scripts/main.min.js"></script></head><body><audio id="clinking" preload="auto"><source src="sounds/clinking.mp3" type="audio/mpeg"><source src="sounds/clinking.wav" type="audio/wav"></audio><audio id="answering-machine" preload="auto"><source src="sounds/answering_machine.mp3" type="audio/mpeg"><source src="sounds/answering_machine.wav" type="audio/wav"></audio><audio id="beep" preload="auto"><source src="sounds/beep.mp3" type="audio/mpeg"><source src="sounds/beep.wav" type="audio/wav"></audio><div id="wrapper" class="block-grid"><div id="header" class="row"><div class="ten columns centered"><h1>Brew Timer</h1></div></div><div id="toolbar" class="row"><div class="three columns offset-by-eight"><a href="#" data-reveal-id="settings" id="open-settings" class="button"><span class="foundicon-settings"></span> Settings</a></div></div><div id="timers" class="row"><div id="remaining" class="six columns"><div class="block-grid"><h3 class="four columns offset-by-eight">00:00:00</h3></div></div><div id="elapsed" class="six columns"><h3 class="four column">-00:00:00</h3></div></div><div id="set-timer" class="row"><div class="three columns offset-by-five"><input id="total" placeholder="Total Time (mins)" type="text"></div><div class="two columns end"><button id="set" class="button">Start Timer</button></div></div><div id="stop-timer" class="row"><div class="two columns offset-by-eight end"><button id="stop" class="button">Stop Timer</button></div></div><div id="add-step" class="row"><div class="four columns offset-by-two"><input id="name" placeholder="Step Name" type="text"></div><div class="two columns"><input id="time" placeholder="Alert At (mins left)" type="text"></div><div class="two columns end"><button id="add" class="button">Add Step</button></div></div><div id="steps" class="row"><div id="list" class="block grid"><div class="header row"><div class="six columns"><h5 class="name">Step Name</h5></div><div class="two columns end"><h5 class="at">Alert At</h5></div></div></div></div><div id="footer" class="row"><div class="six columns">Brought to you by: <a href="//www.brett.is" target="_blank">Brett Langdon</a></div><div class="six columns">Sound Effects (<a href="//creativecommons.org/licenses/by/3.0/" target="_blank">Attribution 3.0</a>): <br><a href="//soundbible.com/1806-Censored-Beep.html" target="_blank">Censored Beep</a>, <a href="//soundbible.com/1967-Clinking-Teaspoon.html" target="_blank">Clinking Teaspoon</a>, <a href="//soundbible.com/5-Answering-Machine-Beep.html" target="_blank">Answering Machine Beep</a></div></div><div id="settings" class="reveal-modal"><div class="block-grid"><div class="row"><div class="six columns"><label for="warning-time" class="right">Warning Time (mins)</label></div><div class="five columns end"><input id="warning-time" type="text"></div></div><div class="row"><div class="six columns"><label for="finished-audio" class="right">Finished Audio</label></div><div class="five columns end"><select id="finished-audio"><option value="#clinking">Clinking</option><option value="#beep">Beep</option><option value="#answering-machine">Answering machine</option></select></div></div><div class="row"><div class="six columns"><label for="warning-audio" class="right">Warning Audio</label></div><div class="five columns end"><select id="warning-audio"><option value="#clinking">Clinking</option><option value="#beep">Beep</option><option value="#answering-machine">Answering machine</option></select></div></div><div class="row"><div class="six columns"><label for="step-audio" class="right">Step Audio</label></div><div class="five columns end"><select id="step-audio"><option value="#clinking">Clinking</option><option value="#beep">Beep</option><option value="#answering-machine">Answering machine</option></select></div></div><div class="row"><div id="save" class="two columns offset-by-ten button end">Save</div></div></div><a class="close-reveal-modal">&#215;</a></div></div><script type="text/javascript">var _gaq = _gaq || [];
+<!DOCTYPE html><html><head><title>Brew Timer</title><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Offside"><link rel="stylesheet" href="styles/foundation.min.css"><link rel="stylesheet" href="styles/foundation.select.min.css"><link rel="stylesheet" href="styles/general_foundicons.min.css"><!--[if lt IE 8]><link><![endif]--><link rel="stylesheet" href="styles/main.min.css"><script src="scripts/jquery.min.js"></script><script src="scripts/foundation.min.js"></script><script src="scripts/modernizr.foundation.js"></script><script src="scripts/main.min.js"></script></head><body><audio id="clinking" preload="auto"><source src="sounds/clinking.mp3" type="audio/mpeg"><source src="sounds/clinking.wav" type="audio/wav"></audio><audio id="answering-machine" preload="auto"><source src="sounds/answering_machine.mp3" type="audio/mpeg"><source src="sounds/answering_machine.wav" type="audio/wav"></audio><audio id="beep" preload="auto"><source src="sounds/beep.mp3" type="audio/mpeg"><source src="sounds/beep.wav" type="audio/wav"></audio><div id="wrapper" class="block-grid"><div id="header" class="row"><div class="ten columns centered"><h1>Brew Timer</h1></div></div><div id="toolbar" class="row"><div class="three columns offset-by-eight"><a href="#" data-reveal-id="settings" id="open-settings" class="button"><span class="foundicon-settings"></span> Settings</a></div></div><div id="timers" class="row"><div id="remaining" class="six columns"><div class="block-grid"><h3 class="four columns offset-by-eight">00:00:00</h3></div></div><div id="elapsed" class="six columns"><h3 class="four column">-00:00:00</h3></div></div><div id="set-timer" class="row"><div class="three columns offset-by-five"><input id="total" placeholder="Total Time (mins)" type="text"></div><div class="two columns end"><button id="set" class="button">Start Timer</button></div></div><div id="stop-timer" class="row"><div class="two columns offset-by-eight end"><button id="stop" class="button">Stop Timer</button></div></div><div id="add-step" class="row"><div class="four columns offset-by-two"><input id="name" placeholder="Step Name" type="text"></div><div class="two columns"><input id="time" placeholder="Alert At (mins left)" type="text"></div><div class="two columns end"><button id="add" class="button">Add Step</button></div></div><div id="steps" class="row"><div id="list" class="block grid"><div class="header row"><div class="six columns"><h5 class="name">Step Name</h5></div><div class="two columns end"><h5 class="at">Alert At</h5></div></div></div></div><div id="footer" class="row"><div class="six columns">Brought to you by: <a href="//www.brett.is" target="_blank">Brett Langdon</a></div><div class="six columns">Sound Effects (<a href="//creativecommons.org/licenses/by/3.0/" target="_blank">Attribution 3.0</a>): <br><a href="//soundbible.com/1806-Censored-Beep.html" target="_blank">Censored Beep</a>, <a href="//soundbible.com/1967-Clinking-Teaspoon.html" target="_blank">Clinking Teaspoon</a>, <a href="//soundbible.com/5-Answering-Machine-Beep.html" target="_blank">Answering Machine Beep</a></div></div><div id="settings" class="reveal-modal"><div class="block-grid"><div class="row"><div class="six columns"><label for="warning-time" class="right">Warning Time (mins)</label></div><div class="five columns end"><input id="warning-time" type="text"></div></div><div class="row"><div class="six columns"><label for="warning-enabled" class="right">Enable Warning</label></div><div class="five columns end"><div class="switch radius"><input id="off" type="radio" name="enable"><label for="off">Off</label><input id="on" type="radio" checked="true" name="enable"><label for="on">On</label></div></div></div><div class="row"><div class="six columns"><label for="finished-audio" class="right">Finished Audio</label></div><div class="five columns end"><select id="finished-audio"><option value="#clinking">Clinking</option><option value="#beep">Beep</option><option value="#answering-machine">Answering machine</option></select></div></div><div class="row"><div class="six columns"><label for="warning-audio" class="right">Warning Audio</label></div><div class="five columns end"><select id="warning-audio"><option value="#clinking">Clinking</option><option value="#beep">Beep</option><option value="#answering-machine">Answering machine</option></select></div></div><div class="row"><div class="six columns"><label for="step-audio" class="right">Step Audio</label></div><div class="five columns end"><select id="step-audio"><option value="#clinking">Clinking</option><option value="#beep">Beep</option><option value="#answering-machine">Answering machine</option></select></div></div><div class="row"><div id="save" class="two columns offset-by-ten button end">Save</div></div></div><a class="close-reveal-modal">&#215;</a></div></div><script type="text/javascript">var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-34513423-2']);
 _gaq.push(['_trackPageview']);
 (function() {
diff --git a/index.jade b/index.jade
index ac13c16..d7558e1 100644
--- a/index.jade
+++ b/index.jade
@@ -4,6 +4,7 @@ html
     title Brew Timer
     link(rel="stylesheet", href="http://fonts.googleapis.com/css?family=Offside")
     link(rel="stylesheet", href="styles/foundation.min.css")
+    link(rel="stylesheet", href="styles/foundation.select.min.css")
     link(rel="stylesheet", href="styles/general_foundicons.min.css")
     //if lt IE 8
       link(rel='styleheet", href="styles/general_foundicons_ie7.min.css")
@@ -81,6 +82,15 @@ html
               label.right(for="warning-time") Warning Time (mins)
             .five.columns.end
               input#warning-time(type="text")
+          .row
+            .six.columns
+              label.right(for="warning-enabled") Enable Warning
+            .five.columns.end
+              .switch.radius
+                input#off(type="radio", name="enable")
+                label(for="off") Off
+                input#on(type="radio", checked="true", name="enable")
+                label(for="on") On
           .row
             .six.columns
               label.right(for="finished-audio") Finished Audio
diff --git a/scripts/main.js b/scripts/main.js
index 19e0d77..20049db 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -1,4 +1,5 @@
 var warning_time = 60;
+var warning_enabled = true;
 var finished_audio = '#answering-machine';
 var warning_audio = '#beep';
 var completed_audio = '#clinking';
@@ -52,7 +53,7 @@ var update_timers = function(){
     if(remaining_time > 0){
 	update_timeout = setTimeout(update_timers, 1000);
     } else{
-	$(finished_audio).trigger('play');
+	play(finished_audio);
 	$('#set-timer').show();
 	$('#stop-timer').hide();
     }
@@ -166,10 +167,16 @@ var check_steps = function(time){
 	} else if(at == time){
 	    $(this).removeClass('warning');
 	    $(this).addClass('current');
-	    $(completed_audio).trigger('play');
-	} else if(warning_time && (at + warning_time) == time){
-	    $(this).addClass('warning');
-	    $(warning_audio).trigger('play');
+	    play(completed_audio)
+	} else if(warning_enabled && warning_time){
+	    if(time <= (at + warning_time) && time >= at){
+		if(!$(this).hasClass('warning')){
+		    $(this).addClass('warning');
+		    play(warning_audio);
+		}
+	    } else{
+		$(this).removeClass('warning');
+	    }
 	} else{
 	    $(this).removeClass('current');
 	    $(this).removeClass('completed');
@@ -185,6 +192,7 @@ var round = function(num, num_places){
 
 var save_settings = function(){
     warning_time = parseFloat($('#warning-time').val()) * 60;
+    warning_enabled = $('.switch #on').prop('checked');
     finished_audio = $('#finished-audio').val();
     completed_audio = $('#step-audio').val();
     warning_audio = $('#warning-audio').val();
@@ -196,6 +204,14 @@ var save_settings = function(){
 var open_settings = function(){
     $('#warning-time').val(round(warning_time / 60, 2));
 
+    if(warning_enabled){
+	$('.switch #on').prop('checked', true);
+	$('.switch #off').removeAttr('checked');
+    } else{
+	$('.switch #off').prop('checked', true);
+	$('.switch #on').removeAttr('checked');
+    }
+
     $('#settings #finished-audio').children('option').each(function(){
 	if($(this).val() == finished_audio){
 	    $(this).prop('selected', true);
@@ -220,3 +236,9 @@ var open_settings = function(){
 	}
     });
 };
+
+
+var play = function(id){
+    $(id).trigger('load');
+    $(id).trigger('play');
+}
diff --git a/scripts/main.min.js b/scripts/main.min.js
index 24e1b11..59b6379 100644
--- a/scripts/main.min.js
+++ b/scripts/main.min.js
@@ -1 +1 @@
-var warning_time=60;var finished_audio="#answering-machine";var warning_audio="#beep";var completed_audio="#clinking";var started=false;var update_timeout=null;var start_time=null;var stop_time=null;var remaining_time=null;var elapsed_time=null;var steps=[];$(document).ready(function(){$("#set").click(start_timer);$("#stop").click(stop_timer);$("#add").click(add_step);$("#open-settings").click(open_settings);$("#settings #save").click(save_settings)});var start_timer=function(){remaining_time=parseFloat($("#total").val());elapsed_time=0;if(!remaining_time){alert("invalid number: "+$("#total").val());return false}remaining_time*=60;start_time=(new Date).getTime();stop_time=start_time+remaining_time*1e3;update_timers();$("#set-timer").hide();$("#stop-timer").show()};var stop_timer=function(){$("#total").val(round(remaining_time/60,2));if(update_timeout){clearTimeout(update_timeout)}$("#set-timer").show();$("#stop-timer").hide()};var update_timers=function(){remaining_time-=1;elapsed_time-=1;if(remaining_time>0){update_timeout=setTimeout(update_timers,1e3)}else{$(finished_audio).trigger("play");$("#set-timer").show();$("#stop-timer").hide()}$("#remaining h3").html(format_time(remaining_time));$("#elapsed h3").html("-"+format_time(elapsed_time));var now=(new Date).getTime();var true_total=Math.floor((stop_time-start_time)/1e3);var true_elapsed=Math.floor((start_time-now)/1e3);var true_remaining=Math.floor((stop_time-now)/1e3);if(true_elapsed!=elapsed_time||true_remaining!=remaining_time||elapsed_time+remaining_time!=true_total){remaining_time=Math.floor((stop_time-now)/1e3);elapsed_time=true_elapsed}check_steps(true_remaining)};var format_time=function(time){time=Math.abs(time);var hours=Math.floor(time/3600);time-=hours*3600;var minutes=Math.floor(time/60);time-=minutes*60;var seconds=round(time,0);return less_than_ten(hours)+":"+less_than_ten(minutes)+":"+less_than_ten(seconds)};var less_than_ten=function(time){return time<10?"0"+time:time};var add_step=function(){var step={at:round(parseFloat($("#add-step #time").val()),2),name:$("#add-step #name").val()};if(!step.at){alert("invalid number: "+$("#add-step #time").val());return false}if(!step.name||step.name==""){alert("invalid name: "+step.name);return false}step.at*=60;steps.push(step);write_steps();$("#add-step #time").val("");$("#add-step #name").val("")};var write_steps=function(){steps.sort(function(a,b){return a.at<b.at});$("#steps .step").remove();for(var i in steps){var step=steps[i];var html=$('<div class="step row"/>');html.append('<div class="six columns"><h5 class="name">'+step.name+"</h5></div>");html.append('<div class="two columns"><h5 class="at">'+format_time(step.at)+"</h5></div>");html.append('<div class="two columns end"><button class="remove button">Remove Step</button></div>');$("#steps #list").append(html)}$("#steps #list .remove").click(remove_step)};var remove_step=function(){var step=$(this).parent().parent();var columns=step.children(".columns");var name=columns.children(".name").html();var at=parseFloat(columns.children(".at").html())*60;var remove=null;for(var i in steps){var step=steps[i];if(step.at==at&&step.name==name){remove=i;break}}if(remove>=0){steps.splice(i,1)}write_steps()};var check_steps=function(time){$("#steps #list .step").each(function(){var columns=$(this).children(".columns");var at=columns.children(".at").html();var matches=at.match("([0-9]+):([0-9]+):([0-9]+)");at=parseInt(matches[1])*3600;at+=parseInt(matches[2]*60);at+=parseInt(matches[3]);if(at>time){$(this).addClass("completed");$(this).removeClass("current")}else if(at==time){$(this).removeClass("warning");$(this).addClass("current");$(completed_audio).trigger("play")}else if(warning_time&&at+warning_time==time){$(this).addClass("warning");$(warning_audio).trigger("play")}else{$(this).removeClass("current");$(this).removeClass("completed")}})};var round=function(num,num_places){num_places=Math.pow(10,num_places);return Math.round(num*num_places)/num_places};var save_settings=function(){warning_time=parseFloat($("#warning-time").val())*60;finished_audio=$("#finished-audio").val();completed_audio=$("#step-audio").val();warning_audio=$("#warning-audio").val();$("#settings a.close-reveal-modal").click()};var open_settings=function(){$("#warning-time").val(round(warning_time/60,2));$("#settings #finished-audio").children("option").each(function(){if($(this).val()==finished_audio){$(this).prop("selected",true)}else{$(this).removeAttr("selected")}});$("#settings #warning-audio").children("option").each(function(){if($(this).val()==warning_audio){$(this).prop("selected",true)}else{$(this).removeAttr("selected")}});$("#settings #step-audio").children("option").each(function(){if($(this).val()==completed_audio){$(this).prop("selected",true)}else{$(this).removeAttr("selected")}})};
\ No newline at end of file
+var warning_time=60;var warning_enabled=true;var finished_audio="#answering-machine";var warning_audio="#beep";var completed_audio="#clinking";var started=false;var update_timeout=null;var start_time=null;var stop_time=null;var remaining_time=null;var elapsed_time=null;var steps=[];$(document).ready(function(){$("#set").click(start_timer);$("#stop").click(stop_timer);$("#add").click(add_step);$("#open-settings").click(open_settings);$("#settings #save").click(save_settings)});var start_timer=function(){remaining_time=parseFloat($("#total").val());elapsed_time=0;if(!remaining_time){alert("invalid number: "+$("#total").val());return false}remaining_time*=60;start_time=(new Date).getTime();stop_time=start_time+remaining_time*1e3;update_timers();$("#set-timer").hide();$("#stop-timer").show()};var stop_timer=function(){$("#total").val(round(remaining_time/60,2));if(update_timeout){clearTimeout(update_timeout)}$("#set-timer").show();$("#stop-timer").hide()};var update_timers=function(){remaining_time-=1;elapsed_time-=1;if(remaining_time>0){update_timeout=setTimeout(update_timers,1e3)}else{play(finished_audio);$("#set-timer").show();$("#stop-timer").hide()}$("#remaining h3").html(format_time(remaining_time));$("#elapsed h3").html("-"+format_time(elapsed_time));var now=(new Date).getTime();var true_total=Math.floor((stop_time-start_time)/1e3);var true_elapsed=Math.floor((start_time-now)/1e3);var true_remaining=Math.floor((stop_time-now)/1e3);if(true_elapsed!=elapsed_time||true_remaining!=remaining_time||elapsed_time+remaining_time!=true_total){remaining_time=Math.floor((stop_time-now)/1e3);elapsed_time=true_elapsed}check_steps(true_remaining)};var format_time=function(time){time=Math.abs(time);var hours=Math.floor(time/3600);time-=hours*3600;var minutes=Math.floor(time/60);time-=minutes*60;var seconds=round(time,0);return less_than_ten(hours)+":"+less_than_ten(minutes)+":"+less_than_ten(seconds)};var less_than_ten=function(time){return time<10?"0"+time:time};var add_step=function(){var step={at:round(parseFloat($("#add-step #time").val()),2),name:$("#add-step #name").val()};if(!step.at){alert("invalid number: "+$("#add-step #time").val());return false}if(!step.name||step.name==""){alert("invalid name: "+step.name);return false}step.at*=60;steps.push(step);write_steps();$("#add-step #time").val("");$("#add-step #name").val("")};var write_steps=function(){steps.sort(function(a,b){return a.at<b.at});$("#steps .step").remove();for(var i in steps){var step=steps[i];var html=$('<div class="step row"/>');html.append('<div class="six columns"><h5 class="name">'+step.name+"</h5></div>");html.append('<div class="two columns"><h5 class="at">'+format_time(step.at)+"</h5></div>");html.append('<div class="two columns end"><button class="remove button">Remove Step</button></div>');$("#steps #list").append(html)}$("#steps #list .remove").click(remove_step)};var remove_step=function(){var step=$(this).parent().parent();var columns=step.children(".columns");var name=columns.children(".name").html();var at=parseFloat(columns.children(".at").html())*60;var remove=null;for(var i in steps){var step=steps[i];if(step.at==at&&step.name==name){remove=i;break}}if(remove>=0){steps.splice(i,1)}write_steps()};var check_steps=function(time){$("#steps #list .step").each(function(){var columns=$(this).children(".columns");var at=columns.children(".at").html();var matches=at.match("([0-9]+):([0-9]+):([0-9]+)");at=parseInt(matches[1])*3600;at+=parseInt(matches[2]*60);at+=parseInt(matches[3]);if(at>time){$(this).addClass("completed");$(this).removeClass("current")}else if(at==time){$(this).removeClass("warning");$(this).addClass("current");play(completed_audio)}else if(warning_enabled&&warning_time){if(time<=at+warning_time&&time>=at){if(!$(this).hasClass("warning")){$(this).addClass("warning");play(warning_audio)}}else{$(this).removeClass("warning")}}else{$(this).removeClass("current");$(this).removeClass("completed")}})};var round=function(num,num_places){num_places=Math.pow(10,num_places);return Math.round(num*num_places)/num_places};var save_settings=function(){warning_time=parseFloat($("#warning-time").val())*60;warning_enabled=$(".switch #on").prop("checked");finished_audio=$("#finished-audio").val();completed_audio=$("#step-audio").val();warning_audio=$("#warning-audio").val();$("#settings a.close-reveal-modal").click()};var open_settings=function(){$("#warning-time").val(round(warning_time/60,2));if(warning_enabled){$(".switch #on").prop("checked",true);$(".switch #off").removeAttr("checked")}else{$(".switch #off").prop("checked",true);$(".switch #on").removeAttr("checked")}$("#settings #finished-audio").children("option").each(function(){if($(this).val()==finished_audio){$(this).prop("selected",true)}else{$(this).removeAttr("selected")}});$("#settings #warning-audio").children("option").each(function(){if($(this).val()==warning_audio){$(this).prop("selected",true)}else{$(this).removeAttr("selected")}});$("#settings #step-audio").children("option").each(function(){if($(this).val()==completed_audio){$(this).prop("selected",true)}else{$(this).removeAttr("selected")}})};var play=function(id){$(id).trigger("load");$(id).trigger("play")};
\ No newline at end of file
diff --git a/styles/foundation.select.min.css b/styles/foundation.select.min.css
new file mode 100644
index 0000000..24a9d33
--- /dev/null
+++ b/styles/foundation.select.min.css
@@ -0,0 +1 @@
+*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html,body{font-size:16px}body{background:#fff;color:#222;padding:0;margin:0;font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;font-weight:normal;font-style:normal;line-height:1;position:relative;-webkit-font-smoothing:antialiased}img,object,embed{max-width:100%;height:auto}object,embed{height:100%}img{-ms-interpolation-mode:bicubic}#map_canvas img,#map_canvas embed,#map_canvas object,.map_canvas img,.map_canvas embed,.map_canvas object{max-width:none !important}.left{float:left}.right{float:right}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.hide{display:none}img{display:block}textarea{height:auto;min-height:50px}select{width:100%}@media only screen{.switch{position:relative;width:100%;padding:0;display:block;overflow:hidden;border-style:solid;border-width:1px;margin-bottom:1.25em;-webkit-animation:webkitSiblingBugfix infinite 1s;height:36px;background:#fff;border-color:#ccc}.switch label{position:relative;left:0;z-index:2;float:left;width:50%;height:100%;margin:0;text-align:right;font-weight:bold;text-align:left;-webkit-transition:all 0.1s ease-out;-moz-transition:all 0.1s ease-out;transition:all 0.1s ease-out}.switch input{position:absolute;z-index:3;opacity:0;width:100%;height:100%}.switch input:hover,.switch input:focus{cursor:pointer}.switch>span{position:absolute;top:-1px;left:-1px;z-index:1;display:block;padding:0;border-width:1px;border-style:solid;-webkit-transition:all 0.1s ease-out;-moz-transition:all 0.1s ease-out;transition:all 0.1s ease-out}.switch input:last-of-type+label{text-align:right}.switch input:not(:checked)+label{opacity:0}.switch input:checked{display:none}.switch input{left:0}.switch input:first-of-type+label{left:-50%}.switch input:first-of-type:checked+label{left:0%}.switch input:last-of-type+label{right:-50%;left:auto}.switch input:last-of-type:checked+label{right:0%;left:auto}.switch label{padding:0 0.375em;line-height:2.3em;font-size:0.875em}.switch input:first-of-type:checked ~ span{left:100%;margin-left:-2.1875em}.switch>span{width:2.25em;height:2.25em}.switch>span{border-color:#b3b3b3;background:#fff;background:-moz-linear-gradient(top, #fff 0%, #f2f2f2 100%);background:-webkit-linear-gradient(top, #fff 0%, #f2f2f2 100%);background:linear-gradient(to bottom, #fff 0%, #f2f2f2 100%);-webkit-box-shadow:2px 0 10px 0 rgba(0,0,0,0.07),1000px 0 0 1000px #e1f5d1,-2px 0 10px 0 rgba(0,0,0,0.07),-1000px 0 0 1000px #f5f5f5;box-shadow:2px 0 10px 0 rgba(0,0,0,0.07),1000px 0 0 980px #e1f5d1,-2px 0 10px 0 rgba(0,0,0,0.07),-1000px 0 0 1000px #f5f5f5}.switch:hover>span,.switch:focus>span{background:#fff;background:-moz-linear-gradient(top, #fff 0%, #e6e6e6 100%);background:-webkit-linear-gradient(top, #fff 0%, #e6e6e6 100%);background:linear-gradient(to bottom, #fff 0%, #e6e6e6 100%)}.switch:active{background:transparent}.switch.large{height:44px}.switch.large label{padding:0 0.375em;line-height:2.3em;font-size:1.0625em}.switch.large input:first-of-type:checked ~ span{left:100%;margin-left:-2.6875em}.switch.large>span{width:2.75em;height:2.75em}.switch.small{height:28px}.switch.small label{padding:0 0.375em;line-height:2.1em;font-size:0.75em}.switch.small input:first-of-type:checked ~ span{left:100%;margin-left:-1.6875em}.switch.small>span{width:1.75em;height:1.75em}.switch.tiny{height:22px}.switch.tiny label{padding:0 0.375em;line-height:1.9em;font-size:0.6875em}.switch.tiny input:first-of-type:checked ~ span{left:100%;margin-left:-1.3125em}.switch.tiny>span{width:1.375em;height:1.375em}.switch.radius{-webkit-border-radius:4px;border-radius:4px}.switch.radius>span{-webkit-border-radius:3px;border-radius:3px}.switch.round{-webkit-border-radius:1000px;border-radius:1000px}.switch.round>span{-webkit-border-radius:999px;border-radius:999px}.switch.round label{padding:0 0.5625em}@-webkit-keyframes webkitSiblingBugfix{from{position:relative}to{position:relative}}}
