|
25
|
1 /*!
|
|
|
2 * Bootstrap Docs (http://getbootstrap.com)
|
|
|
3 * Copyright 2011-2014 Twitter, Inc.
|
|
|
4 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
|
|
|
5 * details, see http://creativecommons.org/licenses/by/3.0/.
|
|
|
6 */
|
|
|
7
|
|
|
8 .h1, .h2, .h3, h1, h2, h3 {
|
|
|
9 margin-top: 20px;
|
|
|
10 margin-bottom: 10px;
|
|
|
11 }
|
|
|
12
|
|
|
13 .h1, h1 {
|
|
|
14 font-size: 36px;
|
|
|
15 }
|
|
|
16
|
|
|
17 .btn-group-lg > .btn, .btn-lg {
|
|
|
18 font-size: 18px;
|
|
|
19 }
|
|
|
20
|
|
|
21 section {
|
|
|
22 padding-top: 30px;
|
|
|
23 }
|
|
|
24
|
|
|
25 .bd-pageheader {
|
|
|
26 margin-top: 51px;
|
|
|
27 }
|
|
|
28
|
|
|
29 .page-header {
|
|
|
30 padding-bottom: 9px;
|
|
|
31 margin: 40px 0 20px;
|
|
|
32 border-bottom: 1px solid #eee;
|
|
|
33 }
|
|
|
34
|
|
|
35 .navbar-default .navbar-nav > li > a {
|
|
|
36 color: #777;
|
|
|
37 }
|
|
|
38
|
|
|
39 .navbar {
|
|
|
40 padding: 0;
|
|
|
41 }
|
|
|
42
|
|
|
43 .navbar-nav .nav-item {
|
|
|
44 margin-left: 0 !important;
|
|
|
45 }
|
|
|
46
|
|
|
47 .nav > li > a {
|
|
|
48 position: relative;
|
|
|
49 display: block;
|
|
|
50 padding: 10px 15px;
|
|
|
51 }
|
|
|
52
|
|
|
53 .nav .navbar-brand {
|
|
|
54 float: left;
|
|
|
55 height: 50px;
|
|
|
56 padding: 15px 15px;
|
|
|
57 font-size: 18px;
|
|
|
58 line-height: 20px;
|
|
|
59 margin-right: 0 !important;
|
|
|
60 }
|
|
|
61
|
|
|
62 .navbar-brand {
|
|
|
63 color: #777;
|
|
|
64 float: left;
|
|
|
65 height: 50px;
|
|
|
66 padding: 15px 15px;
|
|
|
67 font-size: 18px;
|
|
|
68 line-height: 20px;
|
|
|
69 }
|
|
|
70
|
|
|
71 .navbar-toggler {
|
|
|
72 margin-top: 8px;
|
|
|
73 margin-right: 15px;
|
|
|
74 }
|
|
|
75
|
|
|
76 .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
|
|
|
77 color: #333;
|
|
|
78 background-color: transparent;
|
|
|
79 }
|
|
|
80
|
|
|
81 .bd-pageheader, .bs-docs-masthead {
|
|
|
82 position: relative;
|
|
|
83 padding: 30px 0;
|
|
|
84 color: #cdbfe3;
|
|
|
85 text-align: center;
|
|
|
86 text-shadow: 0 1px 0 rgba(0, 0, 0, .1);
|
|
|
87 background-color: #6f5499;
|
|
|
88 background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499));
|
|
|
89 background-image: -webkit-linear-gradient(top, #563d7c 0, #6f5499 100%);
|
|
|
90 background-image: -o-linear-gradient(top, #563d7c 0, #6f5499 100%);
|
|
|
91 background-image: linear-gradient(to bottom, #563d7c 0, #6f5499 100%);
|
|
|
92 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0);
|
|
|
93 background-repeat: repeat-x;
|
|
|
94 }
|
|
|
95
|
|
|
96 .bd-pageheader {
|
|
|
97 margin-bottom: 40px;
|
|
|
98 font-size: 20px;
|
|
|
99 }
|
|
|
100
|
|
|
101 .bd-pageheader h1 {
|
|
|
102 margin-top: 0;
|
|
|
103 color: #fff;
|
|
|
104 }
|
|
|
105
|
|
|
106 .bd-pageheader p {
|
|
|
107 margin-bottom: 0;
|
|
|
108 font-weight: 300;
|
|
|
109 line-height: 1.4;
|
|
|
110 }
|
|
|
111
|
|
|
112 .bd-pageheader .btn {
|
|
|
113 margin: 10px 0;
|
|
|
114 }
|
|
|
115
|
|
|
116 .scrollable-menu .nav-link {
|
|
|
117 color: #337ab7;
|
|
|
118 font-size: 14px;
|
|
|
119 }
|
|
|
120
|
|
|
121 .scrollable-menu .nav-link:hover {
|
|
|
122 color: #23527c;
|
|
|
123 background-color: #eee;
|
|
|
124 }
|
|
|
125
|
|
|
126 @media (min-width: 992px) {
|
|
|
127 .bd-pageheader h1, .bd-pageheader p {
|
|
|
128 margin-right: 380px;
|
|
|
129 }
|
|
|
130 }
|
|
|
131
|
|
|
132 @media (min-width: 768px) {
|
|
|
133 .bd-pageheader {
|
|
|
134 padding-top: 60px;
|
|
|
135 padding-bottom: 60px;
|
|
|
136 font-size: 24px;
|
|
|
137 text-align: left;
|
|
|
138 }
|
|
|
139
|
|
|
140 .bd-pageheader h1 {
|
|
|
141 font-size: 60px;
|
|
|
142 line-height: 1;
|
|
|
143 }
|
|
|
144
|
|
|
145 .navbar-nav > li > a.nav-link {
|
|
|
146 padding-top: 15px;
|
|
|
147 padding-bottom: 15px;
|
|
|
148 font-size: 14px;
|
|
|
149 }
|
|
|
150
|
|
|
151 .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
|
|
|
152 margin-left: -15px;
|
|
|
153 }
|
|
|
154 }
|
|
|
155
|
|
|
156 @media (max-width: 767px) {
|
|
|
157 .hidden-xs {
|
|
|
158 display: none !important;
|
|
|
159 }
|
|
|
160
|
|
|
161 .navbar .container {
|
|
|
162 width: 100%;
|
|
|
163 max-width: 100%;
|
|
|
164 }
|
|
|
165 .navbar .container,
|
|
|
166 .navbar .container .navbar-header {
|
|
|
167 padding: 0;
|
|
|
168 margin: 0;
|
|
|
169 }
|
|
|
170 }
|
|
|
171
|
|
|
172 @media (max-width: 400px) {
|
|
|
173 code, kbd {
|
|
|
174 font-size: 60%;
|
|
|
175 }
|
|
|
176 }
|
|
|
177
|
|
|
178 /**
|
|
|
179 * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
|
|
|
180 *
|
|
|
181 * To overcome this, create media queries that target the width, height, and orientation of iOS devices.
|
|
|
182 * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
|
|
|
183 * the height of element '.scrollable-menu' —which is a full width and height cover image.
|
|
|
184 *
|
|
|
185 * iOS Resolution Quick Reference: http://www.iosres.com/
|
|
|
186 */
|
|
|
187
|
|
|
188 .scrollable-menu {
|
|
|
189 height: 90vh !important;
|
|
|
190 width: 100vw;
|
|
|
191 overflow-x: hidden;
|
|
|
192 padding: 0 0 20px;
|
|
|
193 }
|
|
|
194
|
|
|
195 /**
|
|
|
196 * iPad with portrait orientation.
|
|
|
197 */
|
|
|
198 @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
|
|
|
199 .scrollable-menu {
|
|
|
200 height: 1024px !important;
|
|
|
201 }
|
|
|
202 }
|
|
|
203
|
|
|
204 /**
|
|
|
205 * iPad with landscape orientation.
|
|
|
206 */
|
|
|
207 @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: landscape) {
|
|
|
208 .scrollable-menu {
|
|
|
209 height: 768px !important;
|
|
|
210 }
|
|
|
211 }
|
|
|
212
|
|
|
213 /**
|
|
|
214 * iPhone 5
|
|
|
215 * You can also target devices with aspect ratio.
|
|
|
216 */
|
|
|
217 @media screen and (device-aspect-ratio: 40/71) {
|
|
|
218 .scrollable-menu {
|
|
|
219 height: 500px !important;
|
|
|
220 }
|
|
|
221 }
|
|
|
222
|
|
|
223 .navbar-default .navbar-toggle .icon-bar {
|
|
|
224 background-color: #888;
|
|
|
225 }
|
|
|
226
|
|
|
227 .navbar-toggle:focus {
|
|
|
228 outline: 0
|
|
|
229 }
|
|
|
230
|
|
|
231 .navbar-toggle .icon-bar {
|
|
|
232 display: block;
|
|
|
233 width: 22px;
|
|
|
234 height: 2px;
|
|
|
235 border-radius: 1px
|
|
|
236 }
|
|
|
237
|
|
|
238 .navbar-toggle .icon-bar + .icon-bar {
|
|
|
239 margin-top: 4px
|
|
|
240 }
|
|
|
241
|
|
|
242 pre {
|
|
|
243 white-space: pre-wrap; /* CSS 3 */
|
|
|
244 white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
|
|
|
245 white-space: -pre-wrap; /* Opera 4-6 */
|
|
|
246 white-space: -o-pre-wrap; /* Opera 7 */
|
|
|
247 word-wrap: break-word; /* Internet Explorer 5.5+ */
|
|
|
248 }
|
