-
+
-
-
-
-
-
-
-
-
-
round...
-
-
Increase/Decrease blinds
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
round...
+
+
Increase/Decrease blinds
+
+
+
+
+
+
+
+
+
Spacebar toggles start/stop.
+
diff --git a/js/timer5.js b/js/timer5.js
index 9409770..967f987 100644
--- a/js/timer5.js
+++ b/js/timer5.js
@@ -1,383 +1,285 @@
// JavaScript Document
/* psw.startStopTimer());
+};
/* get user entered values which set the small blind and round time */
-psw.setGameParams = function()
- {
- psw.roundCount = 0;
- var digits = /^\d*$/;
- var _strAmount = psw.startAmount.value.replace(/ /g, '');
- var _rndTime = psw.roundTime.value.replace(/ /g, '');
-
- if(_strAmount.match(digits) && _strAmount != '')
- {
- psw.step = isNaN(_strAmount)? 0: _strAmount;
- psw.stepHolder = parseInt(psw.step);
- psw.smallB = parseInt(psw.step);
-
- psw.startAmount.style.backgroundColor = '#090';
-
- psw.sBlind.innerHTML = (psw.smallB < 10)? '0'+ psw.smallB: psw.smallB;
- psw.bBlind.innerHTML = ((psw.smallB * 2) < 10)? '0'+ (psw.smallB * 2): psw.smallB * 2;
- psw.startAmount.value = psw.step;
- }
- else
- {
- psw.startAmount.style.backgroundColor = '#D00';
- psw.startAmount.value = _strAmount;
- }
-
-
- if(_rndTime.match(digits))
- {
- psw.minutes = parseInt(_rndTime % 60);
- psw.totalSec = psw.minutes * 60;
-
- psw.divNthSec.innerHTML = (psw.nthSec < 10)? '0' + psw.nthSec: psw.nthSec;
- psw.divSec.innerHTML = (psw.seconds < 10)? '0' + psw.seconds: psw.seconds;
- psw.divMin.innerHTML = (psw.minutes < 10)? '0' + psw.minutes: psw.minutes;
- psw.divRndCount.innerHTML = 'round...' + ++psw.roundCount;
-
- psw.roundTime.style.backgroundColor = '#090';
- psw.roundTime.value = _rndTime;
- }
- else
- {
- psw.roundTime.style.backgroundColor = '#D00';
- psw.roundTime.value = _rndTime;
- }
- };
-
-
-
-
-
-
-
-/* psw.startStopTimer()
-* evaluates the status of the game, and either clears the timer for a new round, or sets the game params for a new game.
-* 1 - if 'roundCount' is 0, the game has not been setup. call 'setGameParams' to set everything up, including 'timer'.
-* 2 - if 'timer' is other than null, it must be running. null it out in preparation for a new round.
-* 3 - if 'timer' is null, its a newly created instance of 'timer', and is ready for a new round; start the 'timer'.
-*
-* psw.startTimer()
-* a new timer instance is started, and the game has progressed into a new round.
-* 1 - if the 'timer' exists, it is running. adjust the displayed clock values, such as minutes, seconds,
-* and nth seconds, with every clock tick.
-* 2 - the remaining 'if' blocks, creates and displays the minutes and seconds,
-* using modulus 60 against 100 millisecond clock ticks,
-* and subtracts those values from the user entered values for round time.
-* Once the round time has been decremented to 0, a new round is created with 'newRound()'.
-*
-* psw.resetTimer()
-* 1 - user called function to null out game params. this unlocks the input fields, allowing the user to re-enter blind
-* and round time amounts, and start a new game with different params. */
-psw.startStopTimer = function()
- {
-
- if(psw.roundCount == 0)
- { psw.setGameParams(); }
- else
- {//if 'timer' exists, it is running. clearing it effectively pauses the clock.
- if(psw.timer != null)
- {
- clearInterval(psw.timer);
- psw.timer = null;
- psw.startBtn.style.backgroundColor = '#090';
- }
- else if(psw.timer == null)
- {
- psw.startBtn.style.backgroundColor = '#D00';
- psw.roundTime.disabled = true;
- psw.startAmount.disabled = true;
-
- psw.timer = setInterval(psw.startTimer, 100);
- }
- }
- };
-psw.startTimer = function()
- {
-
- if(psw.timer != null)
- {
- psw.minutes = (psw.tick % 10 == 0 && psw.totalSec % 60 == 0)? --psw.minutes: psw.minutes;
-
- if(psw.minutes <= 0)
- { psw.minutes = 0; }
-
- if(psw.totalSec > 0)
- {
- psw.seconds = (psw.nthSec % 10 == 0)? --psw.secondsTmp: psw.secondsTmp;
- psw.secondsTmp = (psw.secondsTmp <= 0 && psw.nthSec == 1)? 60: psw.secondsTmp;
- }
-
- psw.nthSec = (9 -(psw.tick % 10));//one seconds ticker; 0 = 1 second
- psw.totalSec = (psw.nthSec % 10 == 0)? --psw.totalSec: psw.totalSec;//decrement total seconds
-
- psw.tick++;
-
- if(psw.minutes == 0 && psw.seconds == 0 && psw.nthSec == 1)
- {
- clearInterval(psw.timer);
- psw.timer = null;
- psw.newRound();
- }
- }
-
-
- psw.divSec.innerHTML = (psw.seconds < 10)? '0'+ psw.seconds: psw.seconds;
- psw.divNthSec.innerHTML = (psw.nthSec < 10)? '0' + psw.nthSec: psw.nthSec;
- psw.divMin.innerHTML = (psw.minutes < 10)? '0'+ psw.minutes: psw.minutes;
- };
-psw.resetTimer = function()
- {
- clearInterval(psw.timer);
-
- psw.roundTime.disabled = false;
- psw.startAmount.disabled = false;
- psw.divMin.innerHTML = '00';
- psw.divSec.innerHTML = '00';
- psw.divNthSec.innerHTML = '00';
- psw.sBlind.innerHTML = '00';
- psw.bBlind.innerHTML = '00';
- psw.seconds = 0;
- psw.secondsTmp = 60;
- psw.totalSec = 0;
- psw.minutes = 0;
- psw.nthSec = 0;
- psw.tick = 0;
- psw.roundCount = 0;
- psw.step = 0;
- psw.divRndCount.innerHTML = 'round...' + psw.roundCount;
- psw.startBtn.style.backgroundColor = '#090';
-
- /* 'timer' called last to allow clearInterval() thread to complete */
- psw.timer = null;
-
- };
-
-
-
-
-
-
-
-
+psw.setGameParams = function() {
+ psw.roundCount = 0;
+ var digits = /^\d*$/;
+ var _strAmount = psw.startAmount.value.replace(/ /g, '');
+ var _rndTime = psw.roundTime.value.replace(/ /g, '');
+
+ if (_strAmount.match(digits) && _strAmount != '') {
+ psw.step = isNaN(_strAmount) ? 0 : _strAmount;
+ psw.stepHolder = parseInt(psw.step);
+ psw.smallB = parseInt(psw.step);
+
+ psw.startAmount.style.backgroundColor = '#090';
+
+ psw.sBlind.innerHTML = (psw.smallB < 10) ? '0' + psw.smallB : psw.smallB;
+ psw.bBlind.innerHTML = ((psw.smallB * 2) < 10) ? '0' + (psw.smallB * 2) : psw.smallB * 2;
+ psw.startAmount.value = psw.step;
+ }
+ else {
+ psw.startAmount.style.backgroundColor = '#D00';
+ psw.startAmount.value = _strAmount;
+ }
+
+ if (_rndTime.match(digits)) {
+ psw.minutes = parseInt(_rndTime % 60);
+ psw.totalSec = psw.minutes * 60;
+
+ psw.divNthSec.innerHTML = (psw.nthSec < 10) ? '0' + psw.nthSec : psw.nthSec;
+ psw.divSec.innerHTML = (psw.seconds < 10) ? '0' + psw.seconds : psw.seconds;
+ psw.divMin.innerHTML = (psw.minutes < 10) ? '0' + psw.minutes : psw.minutes;
+ psw.divRndCount.innerHTML = 'round...' + ++psw.roundCount;
+
+ psw.roundTime.style.backgroundColor = '#090';
+ psw.roundTime.value = _rndTime;
+ }
+ else {
+ psw.roundTime.style.backgroundColor = '#D00';
+ psw.roundTime.value = _rndTime;
+ }
+};
+
+/* psw.startStopTimer()
+ * evaluates the status of the game, and either clears the timer for a new round, or sets the game params for a new game.
+ * 1 - if 'roundCount' is 0, the game has not been setup. call 'setGameParams' to set everything up, including 'timer'.
+ * 2 - if 'timer' is other than null, it must be running. null it out in preparation for a new round.
+ * 3 - if 'timer' is null, its a newly created instance of 'timer', and is ready for a new round; start the 'timer'.
+ *
+ * psw.startTimer()
+ * a new timer instance is started, and the game has progressed into a new round.
+ * 1 - if the 'timer' exists, it is running. adjust the displayed clock values, such as minutes, seconds,
+ * and nth seconds, with every clock tick.
+ * 2 - the remaining 'if' blocks, creates and displays the minutes and seconds,
+ * using modulus 60 against 100 millisecond clock ticks,
+ * and subtracts those values from the user entered values for round time.
+ * Once the round time has been decremented to 0, a new round is created with 'newRound()'.
+ *
+ * psw.resetTimer()
+ * 1 - user called function to null out game params. this unlocks the input fields, allowing the user to re-enter blind
+ * and round time amounts, and start a new game with different params. */
+psw.startStopTimer = function() {
+
+ if (psw.roundCount == 0) { psw.setGameParams(); }
+ else {//if 'timer' exists, it is running. clearing it effectively pauses the clock.
+ if (psw.timer != null) {
+ clearInterval(psw.timer);
+ psw.timer = null;
+ psw.startBtn.style.backgroundColor = '#090';
+ }
+ else if (psw.timer == null) {
+ psw.startBtn.style.backgroundColor = '#D00';
+ psw.roundTime.disabled = true;
+ psw.startAmount.disabled = true;
+
+ psw.timer = setInterval(psw.startTimer, 100);
+ }
+ }
+};
+psw.startTimer = function() {
+
+ if (psw.timer != null) {
+ psw.minutes = (psw.tick % 10 == 0 && psw.totalSec % 60 == 0) ? --psw.minutes : psw.minutes;
+
+ if (psw.minutes <= 0) { psw.minutes = 0; }
+
+ if (psw.totalSec > 0) {
+ psw.seconds = (psw.nthSec % 10 == 0) ? --psw.secondsTmp : psw.secondsTmp;
+ psw.secondsTmp = (psw.secondsTmp <= 0 && psw.nthSec == 1) ? 60 : psw.secondsTmp;
+ }
+
+ psw.nthSec = (9 - (psw.tick % 10));//one seconds ticker; 0 = 1 second
+ psw.totalSec = (psw.nthSec % 10 == 0) ? --psw.totalSec : psw.totalSec;//decrement total seconds
+
+ psw.tick++;
+
+ if (psw.minutes == 0 && psw.seconds == 0 && psw.nthSec == 1) {
+ clearInterval(psw.timer);
+ psw.timer = null;
+ psw.newRound();
+ }
+ }
+
+ psw.divSec.innerHTML = (psw.seconds < 10) ? '0' + psw.seconds : psw.seconds;
+ psw.divNthSec.innerHTML = (psw.nthSec < 10) ? '0' + psw.nthSec : psw.nthSec;
+ psw.divMin.innerHTML = (psw.minutes < 10) ? '0' + psw.minutes : psw.minutes;
+};
+psw.resetTimer = function() {
+ clearInterval(psw.timer);
+
+ psw.roundTime.disabled = false;
+ psw.startAmount.disabled = false;
+ psw.divMin.innerHTML = '00';
+ psw.divSec.innerHTML = '00';
+ psw.divNthSec.innerHTML = '00';
+ psw.sBlind.innerHTML = '00';
+ psw.bBlind.innerHTML = '00';
+ psw.seconds = 0;
+ psw.secondsTmp = 60;
+ psw.totalSec = 0;
+ psw.minutes = 0;
+ psw.nthSec = 0;
+ psw.tick = 0;
+ psw.roundCount = 0;
+ psw.step = 0;
+ psw.divRndCount.innerHTML = 'round...' + psw.roundCount;
+ psw.startBtn.style.backgroundColor = '#090';
+
+ /* 'timer' called last to allow clearInterval() thread to complete */
+ psw.timer = null;
+
+};
/* increment round counter, add up the blinds, play the new round alarm, and reset timer, for a new round */
-psw.newRound = function()
- {
- psw.tick = 0;
- psw.nthSec = 0;
- psw.seconds = 0;
- psw.secondsTmp = 60;
- psw.totalSec = 0;
- psw.minutes = 0;
- psw.step = parseInt(psw.step);
-
- psw.roundCount++;
-
- if(psw.roundCount <= 5)
- { psw.smallB += psw.step; }
- if(psw.roundCount >= 6 && psw.roundCount <= 8)
- { psw.smallB = psw.smallB + (psw.step * 5); }
- if(psw.roundCount >= 9 && psw.roundCount <= 10)
- { psw.smallB = psw.smallB +(psw.step * 10); }
- if(psw.roundCount >=11)
- { psw.smallB = psw.smallB + (psw.step * 20); }
- if(psw.roundCount > 100)
- { psw.resetTimer(); }
-
- this.sBlind.innerHTML = psw.smallB;
- this.bBlind.innerHTML = psw.smallB * 2;
-
- //nthSec = parseInt(roundTime.value / 60);
- psw.minutes = parseInt(psw.roundTime.value % 60);
- psw.totalSec = psw.minutes * 60;
-
- psw.divNthSec.innerHTML = (psw.nthSec < 10)? '0' + psw.nthSec: psw.nthSec;
- psw.divSec.innerHTML = (psw.seconds < 10)? '0' + psw.seconds: psw.seconds;
- psw.divMin.innerHTML = (psw.minutes < 10)? '0' + psw.minutes: psw.minutes;
- psw.divRndCount.innerHTML = 'round...' + psw.roundCount;
-
- psw.playSound();
-
- };
+psw.newRound = function() {
+ psw.tick = 0;
+ psw.nthSec = 0;
+ psw.seconds = 0;
+ psw.secondsTmp = 60;
+ psw.totalSec = 0;
+ psw.minutes = 0;
+ psw.step = parseInt(psw.step);
+ psw.roundCount++;
+ if (psw.roundCount <= 5) { psw.smallB += psw.step; }
+ if (psw.roundCount >= 6 && psw.roundCount <= 8) { psw.smallB = psw.smallB + (psw.step * 5); }
+ if (psw.roundCount >= 9 && psw.roundCount <= 10) { psw.smallB = psw.smallB + (psw.step * 10); }
+ if (psw.roundCount >= 11) { psw.smallB = psw.smallB + (psw.step * 20); }
+ if (psw.roundCount > 100) { psw.resetTimer(); }
+ this.sBlind.innerHTML = psw.smallB;
+ this.bBlind.innerHTML = psw.smallB * 2;
+ //nthSec = parseInt(roundTime.value / 60);
+ psw.minutes = parseInt(psw.roundTime.value % 60);
+ psw.totalSec = psw.minutes * 60;
+ psw.divNthSec.innerHTML = (psw.nthSec < 10) ? '0' + psw.nthSec : psw.nthSec;
+ psw.divSec.innerHTML = (psw.seconds < 10) ? '0' + psw.seconds : psw.seconds;
+ psw.divMin.innerHTML = (psw.minutes < 10) ? '0' + psw.minutes : psw.minutes;
+ psw.divRndCount.innerHTML = 'round...' + psw.roundCount;
+ psw.playSound();
+};
/* allows user to manually increase/decrease the displayed blind amounts, during game play */
-psw.upBlinds = function()
- {
- var _sb = null;
- var _bb = null;
-
- /* get current blind amounts */
- _sb = parseInt(psw.sBlind.innerHTML);
- _bb = parseInt(psw.bBlind.innerHTML);
-
- /*null out values, else they're added like strings */
- psw.sBlind.innerHTML = null;
- psw.bBlind.innerHTML = null;
-
- /*update display of blinds */
- if(_bb.toString().length <= 4 && _bb < 10000)
- {
- psw.sBlind.innerHTML = ((_sb + psw.stepHolder) < 10)? '0'+ (_sb + psw.stepHolder): (_sb + psw.stepHolder);
- psw.bBlind.innerHTML = (((_sb + psw.stepHolder)*2) < 10)? '0'+ ((_sb + psw.stepHolder)*2): ((_sb + psw.stepHolder)*2);
- }
- else
- {
- psw.sBlind.innerHTML = _sb;
- psw.bBlind.innerHTML = (_sb *2);
- }
- psw.smallB = Math.abs(psw.sBlind.innerHTML);
-
- };
-psw.downBlinds = function()
- {
-
- /* get current blind amounts */
- var _sb = Math.abs(psw.sBlind.innerHTML);
- var _bb = Math.abs(psw.bBlind.innerHTML);
-
- /* null out values, else they're added like strings */
- if(_bb.toString().length <= 5 && _bb > 0)
- {
- psw.sBlind.innerHTML = null;
- psw.bBlind.innerHTML = null;
-
- /* update display of blinds */
- psw.sBlind.innerHTML = ((_sb - psw.stepHolder) < 10)? '0'+ (_sb - psw.stepHolder): (_sb - psw.stepHolder);
- psw.bBlind.innerHTML = (((_sb - psw.stepHolder)*2) < 10)? '0'+ ((_sb - psw.stepHolder)*2): ((_sb - psw.stepHolder)*2);
-
- smallB = Math.abs(psw.sBlind.innerHTML);
- }
- else if(_bb <= 0)
- {
- psw.sBlind.innerHTML = null;
- psw.bBlind.innerHTML = null;
-
- /* update display of blinds */
- psw.sBlind.innerHTML = (psw.stepHolder < 10)? '0'+ psw.stepHolder: psw.stepHolder;
- psw.bBlind.innerHTML = (psw.stepHolder *2 < 10)? '0'+ psw.stepHolder * 2: psw.stepHolder * 2;
-
- psw.smallB = Math.abs(psw.sBlind.innerHTML);
- }
- };
-
-
-
-
-
-
+psw.upBlinds = function() {
+ var _sb = null;
+ var _bb = null;
+
+ /* get current blind amounts */
+ _sb = parseInt(psw.sBlind.innerHTML);
+ _bb = parseInt(psw.bBlind.innerHTML);
+
+ /*null out values, else they're added like strings */
+ psw.sBlind.innerHTML = null;
+ psw.bBlind.innerHTML = null;
+
+ /*update display of blinds */
+ if (_bb.toString().length <= 4 && _bb < 10000) {
+ psw.sBlind.innerHTML = ((_sb + psw.stepHolder) < 10) ? '0' + (_sb + psw.stepHolder) : (_sb + psw.stepHolder);
+ psw.bBlind.innerHTML =
+ (((_sb + psw.stepHolder) * 2) < 10) ? '0' + ((_sb + psw.stepHolder) * 2) : ((_sb + psw.stepHolder) * 2);
+ }
+ else {
+ psw.sBlind.innerHTML = _sb;
+ psw.bBlind.innerHTML = (_sb * 2);
+ }
+ psw.smallB = Math.abs(psw.sBlind.innerHTML);
+
+};
+psw.downBlinds = function() {
+
+ /* get current blind amounts */
+ var _sb = Math.abs(psw.sBlind.innerHTML);
+ var _bb = Math.abs(psw.bBlind.innerHTML);
+
+ /* null out values, else they're added like strings */
+ if (_bb.toString().length <= 5 && _bb > 0) {
+ psw.sBlind.innerHTML = null;
+ psw.bBlind.innerHTML = null;
+
+ /* update display of blinds */
+ psw.sBlind.innerHTML = ((_sb - psw.stepHolder) < 10) ? '0' + (_sb - psw.stepHolder) : (_sb - psw.stepHolder);
+ psw.bBlind.innerHTML =
+ (((_sb - psw.stepHolder) * 2) < 10) ? '0' + ((_sb - psw.stepHolder) * 2) : ((_sb - psw.stepHolder) * 2);
+
+ smallB = Math.abs(psw.sBlind.innerHTML);
+ }
+ else if (_bb <= 0) {
+ psw.sBlind.innerHTML = null;
+ psw.bBlind.innerHTML = null;
+
+ /* update display of blinds */
+ psw.sBlind.innerHTML = (psw.stepHolder < 10) ? '0' + psw.stepHolder : psw.stepHolder;
+ psw.bBlind.innerHTML = (psw.stepHolder * 2 < 10) ? '0' + psw.stepHolder * 2 : psw.stepHolder * 2;
+
+ psw.smallB = Math.abs(psw.sBlind.innerHTML);
+ }
+};
/* new round alarm; plays trumpet sound */
-psw.playSound = function()
- {
- psw.makeSndObj();
-
- var sndTimerID = setTimeout(stopSound, 5000);
-
- function stopSound()
- {
- var cancelSnd = document.getElementById('alarmSound');
- cancelSnd.parentNode.removeChild(cancelSnd);
-
- clearTimeout(sndTimerID);
-
- sndTimerID = 0;
- psw.trumpetSnd.innerHTML = '';
- psw.trumpetSnd.style.display = 'none';
- psw.startStopTimer();
- }
- };
-/* creates the flash based sound obj.
-* and add/remove from DOM to start/stop it.
-* inline scripting was the simplest way for IE/others to work. */
-psw.makeSndObj = function()
- {
- psw.trumpetSnd.style.display = 'block';
- psw.trumpetSnd.innerHTML = '
';
-
- };
-
-
-
+psw.playSound = function() {
+ document.getElementById('alarm').play();
+};
/* users can hit the spacebar to pause the timer, at any time during the game */
-psw.spaceBarPause = function()
- {
- window.onkeyup = function(e)
- {
- if(e.keyCode == 32)
- { psw.startStopTimer(); }
- }
- }();
+psw.spaceBarPause = function() {
+ window.onkeyup = function(e) {
+ if (e.keyCode === 32) { psw.startStopTimer(); }
+ };
+}();
/*]]>*/
diff --git a/mainStyle.css b/mainStyle.css
deleted file mode 100644
index 73c4caf..0000000
--- a/mainStyle.css
+++ /dev/null
@@ -1,188 +0,0 @@
-@charset "utf-8";
-/* CSS Document */
-*{ padding:0; margin:0; border:0; }
-body
-{
-
- font-family:Arial, Helvetica, sans-serif;
- font-size:10px;
- background:#000;
- background-image:url('images/bg02b.png');
- background-repeat:no-repeat;
- background-size:100%;
- background-attachment:fixed;
-
-}
-.sBlind
-{
- position:relative;
- float:left;
- font-size:15em;
- margin:0.2em;
- margin-left:1em;
- padding-left:0.1em;
- padding-right:0.1em;
- background-image:url('images/blindBg01.png');
- background-repeat:repeat-x;
- box-shadow: 1px 5px 5px #666;
-
-
-}
-.bBlind
-{
- position:relative;
- float:right;
- font-size:15em;
- margin:0.2em;
- margin-right:1em;
- margin-bottom:0.5em;
- padding-left:0.1em;
- padding-right:0.1em;
- background-image:url('images/blindBg01.png');
- background-repeat:repeat-x;
- box-shadow: 1px 5px 5px #666;
-}
-
-#timer
-{
-
- clear:both;
- position:relative;
- width:260px;
- margin:auto;
- font-size:6em;
- text-align:left;
-}
-#timer ul
-{
- list-style:none;
- display:inline;
- position:relative;
-}
-#timer li
-{
- float:left;
- text-align:center;
- color:#FFF;
- padding:0 1px 0 1px;
-}
-.colon
-{
- width:0.5em;
- text-align:center;
-}
-#nthSec
-{
- font-size:0.6em;
- margin-top:0.6em;
-}
-#timerBtns
-{
- position:relative;
- width:35em;
- margin:auto;
-
-}
-#timerBtns button
-{
- font-size:3em;
- margin:0em 0.5em 0em 0.5em;
- border-radius:0.3em;
- cursor:pointer;
-}
-
-
-#startStop
-{
- background:#090;
- width:6em;
- border:#333 solid 1px;
- background-image:url('images/btnBg01.png');
- box-shadow: 3px 3px 5px #000;
-}
-#reset
-{
- background:#FC0;
- width:3.5em;
- border:#333 solid 1px;
- background-image:url('images/btnBg01.png');
- box-shadow: 3px 3px 5px #000;
-}
-#roundCount
-{
- position:relative;
- margin:auto;
- margin-top:0.5em;
- width:4em;
- font-size:2em;
- color:#999;
- text-shadow: 2px 2px 2px #000;
-
-}
-.changeBlindsBtns
-{
-
- position:relative;
- width:12em;
- margin:auto;
- color:#CCC;
- font-size:2em;
- margin-top:1em;
- margin-bottom:-0.5em;
- padding:0.2em 0.5em 0.5em 0.5em;
- text-align:center;
- text-shadow: 2px 2px 2px #000;
- background-image:url('images/txtBg01.png');
- background-repeat:repeat;
- border-radius:1em;
-}
-#upBlinds
-{
- cursor:pointer;
- font-size:2em;
- width:1.5em;
- border-radius:0.3em;
- border:#666 outset 2px;
- box-shadow: 3px 3px 5px #000;
- margin:-0.5em 0.5em 0em 0.5em;
-}
-#downBlinds
-{
- cursor:pointer;
- font-size:2em;
- width:1.5em;
- border-radius:0.3em;
- border:#666 outset 2px;
- box-shadow: 3px 3px 5px #000;
- margin:0.1em 0.5em 0em 0.5em;
-
-}
-.form
-{
- position:relative;
- width:50%;
- margin:auto;
- margin-top:2em;
- font-size:2em;
- color:#CCC;
- text-shadow: 2px 2px 2px #000;
- top:2em;
- padding:0.5em;
- background-image:url('images/txtBg01.png');
- background-repeat:repeat;
- border-radius:1em;
-
-}
-.form label
-{
- display:block;
-}
-.form input
-{
- float:right;
- height:1.5em;
- padding-left:0.5em;
- border-radius:0.5em;
-}
-#footer { clear:both; }
-/* #alarmSound { display:block; position:relative; width:1px; margin:auto; } */
\ No newline at end of file
diff --git a/mainStyle_ie.css b/mainStyle_ie.css
deleted file mode 100644
index 7c62fa7..0000000
--- a/mainStyle_ie.css
+++ /dev/null
@@ -1,186 +0,0 @@
-@charset "utf-8";
-/* CSS Document */
-*{ padding:0; margin:0; border:0; }
-body
-{
-
- font-family:Arial, Helvetica, sans-serif;
- font-size:10px;
- background:#000;
- background-image:url('images/bg02b.png');
- background-repeat:no-repeat;
- background-size:100%;
-}
-.sBlind
-{
- position:relative;
- float:left;
- font-size:15em;
- margin:0.2em;
- margin-left:1em;
- padding-left:0.1em;
- padding-right:0.1em;
- background-image:url('images/blindBg01.png');
- background-repeat:repeat-x;
- box-shadow: 1px 5px 5px #666;
-
-
-}
-.bBlind
-{
- position:relative;
- float:right;
- font-size:15em;
- margin:0.2em;
- margin-right:1em;
- margin-bottom:0.5em;
- padding-left:0.1em;
- padding-right:0.1em;
- background-image:url('images/blindBg01.png');
- background-repeat:repeat-x;
- box-shadow: 1px 5px 5px #666;
-}
-
-#timer
-{
-
- clear:both;
- position:relative;
- width:260px;
- margin:auto;
- font-size:6em;
- text-align:left;
-}
-#timer ul
-{
- list-style:none;
- display:inline;
- position:relative;
-}
-#timer li
-{
- float:left;
- text-align:center;
- color:#FFF;
- padding:0 1px 0 1px;
-}
-.colon
-{
- width:0.5em;
- text-align:center;
-}
-#nthSec
-{
- font-size:0.6em;
- margin-top:0.6em;
-}
-#timerBtns
-{
- position:relative;
- width:35em;
- margin:auto;
-
-}
-#timerBtns button
-{
- font-size:3em;
- margin:0em 0.5em 0em 0.5em;
- border-radius:0.3em;
- cursor:pointer;
-}
-
-
-#startStop
-{
- background:#090;
- width:6em;
- border:#333 solid 1px;
- background-image:url('images/btnBg01.png');
- box-shadow: 3px 3px 5px #000;
-}
-#reset
-{
- background:#FC0;
- width:3.5em;
- border:#333 solid 1px;
- background-image:url('images/btnBg01.png');
- box-shadow: 3px 3px 5px #000;
-}
-#roundCount
-{
- position:relative;
- margin:auto;
- margin-top:0.5em;
- width:4em;
- font-size:2em;
- color:#999;
- text-shadow: 2px 2px 2px #000;
-
-}
-.changeBlindsBtns
-{
-
- position:relative;
- width:12em;
- margin:auto;
- color:#CCC;
- font-size:2em;
- margin-top:1em;
- margin-bottom:-0.5em;
- padding:0.2em 0.5em 0.5em 0.5em;
- text-align:center;
- text-shadow: 2px 2px 2px #000;
- background-image:url('images/txtBg01.png');
- background-repeat:repeat;
- border-radius:1em;
-}
-#upBlinds
-{
- cursor:pointer;
- font-size:2em;
- width:1.5em;
- border-radius:0.3em;
- border:#666 outset 2px;
- box-shadow: 3px 3px 5px #000;
- margin:-0.5em 0.5em 0em 0.5em;
-}
-#downBlinds
-{
- cursor:pointer;
- font-size:2em;
- width:1.5em;
- border-radius:0.3em;
- border:#666 outset 2px;
- box-shadow: 3px 3px 5px #000;
- margin:0.1em 0.5em 0em 0.5em;
-
-}
-.form
-{
- position:relative;
- width:50%;
- margin:auto;
- margin-top:2em;
- font-size:2em;
- color:#CCC;
- text-shadow: 2px 2px 2px #000;
- top:2em;
- padding:0.5em;
- background-image:url('images/txtBg01.png');
- background-repeat:repeat;
- border-radius:1em;
-
-}
-.form label
-{
- display:block;
-}
-.form input
-{
- float:right;
- height:1.5em;
- padding-left:0.5em;
- border-radius:0.5em;
-}
-#footer { clear:both; }
-/* #alarmSound { display:block; position:relative; width:1px; margin:auto; } */
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d777e84
--- /dev/null
+++ b/style.css
@@ -0,0 +1,227 @@
+@charset "utf-8";
+/* CSS Document */
+* {
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
+body {
+ min-width: 500px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 10px;
+ background: #000;
+ background-image: url('images/bg02b.png');
+ background-repeat: no-repeat;
+ background-size: 100%;
+}
+
+.sBlind {
+ position: relative;
+ float: left;
+ font-size: 15em;
+ margin: 0.2em;
+ margin-left: 1em;
+ padding-left: 0.1em;
+ padding-right: 0.1em;
+ background-image: url('images/blindBg01.png');
+ background-repeat: repeat-x;
+ box-shadow: 1px 5px 5px #666;
+
+}
+
+.bBlind {
+ position: relative;
+ float: right;
+ font-size: 15em;
+ margin: 0.2em;
+ margin-right: 1em;
+ margin-bottom: 0.5em;
+ padding-left: 0.1em;
+ padding-right: 0.1em;
+ background-image: url('images/blindBg01.png');
+ background-repeat: repeat-x;
+ box-shadow: 1px 5px 5px #666;
+}
+
+#timer {
+
+ clear: both;
+ position: relative;
+ width: 260px;
+ margin: auto;
+ font-size: 6em;
+ text-align: left;
+}
+
+#timer ul {
+ list-style: none;
+ display: inline;
+ position: relative;
+}
+
+#timer li {
+ float: left;
+ text-align: center;
+ color: #FFF;
+ padding: 0 1px 0 1px;
+ text-shadow: 2px 2px 2px #000;
+
+}
+
+.colon {
+ width: 0.5em;
+ text-align: center;
+}
+
+#nthSec {
+ font-size: 0.6em;
+ margin-top: 0.6em;
+}
+
+#timerBtns {
+ position: relative;
+ width: 35em;
+ margin: auto;
+
+}
+
+#timerBtns button {
+ font-size: 3em;
+ margin: 0em 0.5em 0em 0.5em;
+ border-radius: 0.3em;
+ cursor: pointer;
+}
+
+#startStop {
+ background: #090;
+ width: 6em;
+ border: #333 solid 1px;
+ background-image: url('images/btnBg01.png');
+ box-shadow: 3px 3px 5px #000;
+}
+
+#reset {
+ background: #FC0;
+ width: 3.5em;
+ border: #333 solid 1px;
+ background-image: url('images/btnBg01.png');
+ box-shadow: 3px 3px 5px #000;
+}
+
+#roundCount {
+ position: relative;
+ margin: auto;
+ margin-top: 0.5em;
+ width: 4em;
+ font-size: 2em;
+ color: #999;
+ text-shadow: 2px 2px 2px #000;
+
+}
+
+.changeBlindsBtns {
+
+ position: relative;
+ width: 12em;
+ margin: auto;
+ color: #CCC;
+ font-size: 2em;
+ margin-top: 1em;
+ margin-bottom: -0.5em;
+ padding: 0.2em 0.5em 0.5em 0.5em;
+ text-align: center;
+ text-shadow: 2px 2px 2px #000;
+ background-image: url('images/txtBg01.png');
+ background-repeat: repeat;
+ border-radius: 1em;
+}
+
+#upBlinds {
+ cursor: pointer;
+ font-size: 2em;
+ width: 1.5em;
+ border-radius: 0.3em;
+ border: #666 outset 2px;
+ box-shadow: 3px 3px 5px #000;
+ margin: -0.5em 0.5em 0em 0.5em;
+}
+
+#downBlinds {
+ cursor: pointer;
+ font-size: 2em;
+ width: 1.5em;
+ border-radius: 0.3em;
+ border: #666 outset 2px;
+ box-shadow: 3px 3px 5px #000;
+ margin: 0.1em 0.5em 0em 0.5em;
+
+}
+
+.form {
+ position: relative;
+ width: 50%;
+ margin: auto;
+ margin-top: 2em;
+ font-size: 2em;
+ color: #CCC;
+ text-shadow: 2px 2px 2px #000;
+ top: 2em;
+ padding: 0.5em;
+ background-image: url('images/txtBg01.png');
+ background-repeat: repeat;
+ border-radius: 1em;
+
+}
+
+.form label {
+ display: block;
+ position: relative;
+}
+
+.instructions {
+ width: 70%;
+ display: inline-block;
+}
+
+.form input {
+ /*float: right;*/
+ height: 1.5em;
+ padding-right: 0.5em;
+ border-radius: 0.5em;
+ position: absolute;
+ right: 0;
+ text-align: right;
+}
+
+#spacebar {
+ color: darkgrey;
+ margin: 10% auto 5% 5%;
+ text-shadow: 2px 2px 2px #000;
+}
+
+#footer {
+ clear: both;
+}
+
+/* #alarmSound { display:block; position:relative; width:1px; margin:auto; } */
+@media only screen and (max-width: 770px) {
+ #blindsWrapper {
+ width: 50%;
+ margin: 0 auto;
+ overflow: hidden;
+ }
+
+ .blindsShim {
+ margin-bottom: 10px;
+ overflow: hidden;
+ }
+
+ .sBlind, .bBlind {
+ clear: both;
+ margin: 0 0 0 0;
+ float: none;
+ display: inherit;
+ text-align: center;
+ }
+}
diff --git a/test.html b/test.html
index 55c46ce..3b6e41c 100644
--- a/test.html
+++ b/test.html
@@ -6,7 +6,7 @@
-