Simple-Savings-Calculator/style.css at master · mhbates/Simple-Savings-Calculator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
body    {background-color: #282829;
        color: lightgray;
        overflow-x: hidden;}

.center {text-align: center;
        margin-top: 1%;
        width: 100%;}

h1      {font-size: 1.5em;
        margin: 0;}

a       {text-decoration: none;
        font-size: 0.75em;}
a:link  {color: lightblue;}
a:visited       {color: lightblue;}
a:hover {color: lightgray;
        text-decoration: underline;}

input   {text-align: center;
        font-size: 1.5em;
        width: 25%;
        background-color: #F8F8FF;}

input[type="radio"]     {width: 1%;}

input[type="submit"], [type="reset"]    {width: 10%;
                                        margin: 10px;}

table   {text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.5em;
        margin-bottom: 2.5%;
        margin-top: 2.5%;
        width: 25%;}

td, th  {border-style: solid;
        border-width: 1px;
        padding: 8px;}

#otherResultsDiv {
        margin-left: auto;
        margin-right: auto;
        width: 25%;
}

#totalInterestId {
        font-size: 2em;
}

@media only screen
and (max-device-width: 1400px) {
        input {
                font-size: 1em;
        }
        input[type="submit"], [type="reset"]    {margin: 10px;}
        table   {font-size: 1em;}
        #totalInterestId {
                font-size: 1.5em;
        }
}

@media only screen
and (max-device-width: 1000px) {
        input {
                width: 35%;
        }
        input[type="submit"], [type="reset"]    {margin: 10px;
                                                width: 20%;}
        table   {width: 35%;}
        #totalInterestId {
                font-size: 1em;
        }
}

@media only screen
and (max-device-width: 700px) {
        input {
                width: 50%;
        }
        input[type="submit"], [type="reset"]    {margin: 10px;}
        table   {width: 50%;}
        #totalInterestId {
                font-size: 0.75em;
        }
}

@media only screen
and (max-device-width: 500px) {
        input {
                width: 75%;
        }
        input[type="submit"], [type="reset"]    {margin: 10px;
                                                width: 40%;}
        table   {width: 75%;}
}