}
#display, #alarm-text {
- font-size: 10em;
font-family: Verdana, Arial, Lucida, Helvetica, sans-serif;
text-shadow: 0.03em 0.03em #cccccc;
border: 0.02em #cccccc solid;
margin: 0.2em;
}
+@media only screen and (min-width: 200px) {
+ #display, #alarm-text {
+ font-size: 1.5em;
+ }
+}
+
+@media only screen and (min-width: 300px) {
+ #display, #alarm-text {
+ font-size: 3em;
+ }
+}
+
+@media only screen and (min-width: 400px) {
+ #display, #alarm-text {
+ font-size: 4em;
+ }
+}
+
+@media only screen and (min-width: 500px) {
+ #display, #alarm-text {
+ font-size: 5em;
+ }
+}
+
+@media only screen and (min-width: 600px) {
+ #display, #alarm-text {
+ font-size: 6em;
+ }
+}
+
+@media only screen and (min-width: 700px) {
+ #display, #alarm-text {
+ font-size: 7em;
+ }
+}
+
+@media only screen and (min-width: 800px) {
+ #display, #alarm-text {
+ font-size: 8em;
+ }
+}
+
+@media only screen and (min-width: 1000px) {
+ #display, #alarm-text {
+ font-size: 10em;
+ }
+}
+
+@media only screen and (min-width: 1400px) {
+ #display, #alarm-text {
+ font-size: 10em;
+ }
+}
+
#alarm-text {
text-decoration: blink;
}
button {
- -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
- -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
- box-shadow: inset 0px 1px 0px 0px #ffffff;
+ -moz-box-shadow: inset 0em 0.1em 0em 0em #ffffff;
+ -webkit-box-shadow: inset 0em 0.1em 0em 0em #ffffff;
+ box-shadow: inset 0em 0.1em 0em 0em #ffffff;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color: #ededed;
- -moz-border-radius: 6px;
- -webkit-border-radius: 6px;
- border-radius: 6px;
- border: 1px solid #dcdcdc;
+ -moz-border-radius: 0.4em;
+ -webkit-border-radius: 0.4em;
+ border-radius: 0.4em;
+ border: 0.1em solid #dcdcdc;
display: inline-block;
color: #777777;
font-family: arial;
- font-size: 15px;
font-weight: bold;
- padding: 6px 24px;
+ padding: 0.4em 1.5em;
text-decoration: none;
- text-shadow: 1px 1px 0px #ffffff;
+ text-shadow: 0.1em 0.1em 0em #ffffff;
}
button:hover {
button:active {
position:relative;
- top:1px;
+ top:0.1em;
}
button.action {
- -moz-box-shadow: inset 0px 1px 0px 0px #97c4fe;
- -webkit-box-shadow: inset 0px 1px 0px 0px #97c4fe;
- box-shadow: inset 0px 1px 0px 0px #97c4fe;
+ -moz-box-shadow: inset 0em 0.1em 0em 0em #97c4fe;
+ -webkit-box-shadow: inset 0em 0.1em 0em 0em #97c4fe;
+ box-shadow: inset 0em 0.1em 0em 0em #97c4fe;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
background: -moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
background-color: #3d94f6;
- border: 1px solid #337fed;
- text-shadow: 1px 1px 0px #1570cd;
+ border: 0.1em solid #337fed;
+ text-shadow: 0.1em 0.1em 0em #1570cd;
color: #ffffff;
}