index: fix modal for mobile
[bootswatch] / css / bootswatch.css
1 body {
2         padding-bottom: 20px;
3 }
4
5 .nav i {
6         opacity: 0.5;
7 }
8
9 .nav a:hover i {
10         opacity: 1;
11 }
12
13 .tooltip-inner {
14         max-width: 500px;
15 }
16
17 .alert a {
18         font-weight: bold;
19         text-decoration: underline;
20 }
21
22 .alert p {
23         margin: 0;
24 }
25
26 .hero-unit {
27         margin-top: 60px;
28         margin-bottom: 60px;
29 }
30
31 .hero-unit h1, .hero-unit p {
32   text-align: center;
33   margin-bottom: 15px;
34 }
35
36 #social {
37   margin-top: 45px;
38 }
39
40 .twitter-follow-button {
41   width: 150px !important;
42 }
43
44 .rss-button {
45         width: 40px;
46         height: 14px;
47         font-size: 11px;
48         line-height: 14px;
49         font-weight: bold;
50         margin: 0;
51         padding: 2px 5px 2px 4px;
52 }
53
54 .icon-rss {
55     background: url(../img/rss-icons.png) no-repeat 0 0;
56         opacity: .65;
57         width: 16px;
58 }
59
60 .icon-envelope {
61         opacity: .65;
62 }
63
64 .about {
65   margin-top: 20px;
66 }
67
68 .about h3 {
69   margin: 0 0 5px 35px;
70 }
71
72 .about img {
73   float: left;
74   opacity: 0.6;
75 }
76
77 #gallery {
78   margin: 45px 0 30px 0;
79   padding-right: 20px;
80   text-align: center;
81 }
82
83 .thumbnail {
84         margin-bottom: 20px;
85         background-color: #eee;
86 }
87
88 .thumbnail img {
89         width: 100%;
90         -webkit-border-radius: 7px;
91        -moz-border-radius: 7px;
92             border-radius: 7px;
93 }
94
95 .thumbnail .label {
96         vertical-align: top;
97 }
98
99 .thumbnail .btn-toolbar {
100   text-align: right;
101 }
102
103 .modal .label {
104  vertical-align: text-top;
105 }
106
107 .links {
108         margin-bottom: 20px;
109 }
110
111 .links > a {
112         margin-right: 10px;
113
114
115 /* Landscape phones and down */
116 @media (max-width: 480px) {
117
118         .hero-unit {
119                 padding: 40px 20px 10px;
120                 margin: 0 0 20px;
121         }
122
123         .hero-unit h1 {
124           font-size: 36px;
125         }
126
127         .hero-unit p {
128                 font-size: 13px;
129                 line-height: 18px;
130         }
131
132         #social {
133                 margin-top: 0px;
134                 margin-bottom: 40px;
135         }
136
137         .about {
138           margin-top: 0;
139         }
140
141         .about h3 {
142           margin-top: 20px;
143         }
144
145         .modal {
146                 position: fixed !important;
147                 top: 25% !important;
148         }
149 }
150
151 /* Landscape phone to portrait tablet */
152 @media (min-width: 481px) and (max-width: 767px) {
153
154         .hero-unit {
155                 margin-top: 0;
156                 padding-bottom: 60px;
157         }
158
159         .about {
160                 margin-top: 0;
161         }
162 }
163
164 /* Portrait tablet to landscape and desktop */
165 @media (min-width: 768px) and (max-width: 980px) {
166
167         .hero-unit {
168                 margin-top: 0;
169         }
170
171         .thumbnail .btn {
172                 font-size: 11px;
173         }
174 }
175
176 /* Large desktop */
177 @media (min-width: 1200px) {
178
179
180 }