git.roojs.org Git - bootswatch/blob - css/bootswatch.css

   1 body {
   2         padding-top: 80px;
   3         padding-bottom: 20px;
   4 }
   5
   6 .navbar a > i {
   7         opacity: 0.5;
   8 }
   9
  10 .navbar a:hover > i {
  11         opacity: 1;
  12 }
  13
  14 section {
  15         margin-top: 100px;
  16 }
  17
  18 .subhead {
  19         padding-bottom: 0;
  20         margin-bottom: 9px;
  21 }
  22
  23 .subhead h1 {
  24         font-size: 54px;
  25 }
  26
  27 .subhead > div:first-child {
  28         min-height: 200px;
  29 }
  30
  31 .subnav {
  32         margin-bottom: 60px;
  33         width: 100%;
  34         height: 36px;
  35         background-color: #eeeeee; /* Old browsers */
  36         background-repeat: repeat-x; /* Repeat the gradient */
  37         background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
  38         background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
  39         background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
  40         background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
  41         background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
  42         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
  43         background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
  44         border: 1px solid #e5e5e5;
  45         -webkit-border-radius: 4px;
  46         -moz-border-radius: 4px;
  47         border-radius: 4px;
  48 }
  49
  50 .subnav .nav {
  51         margin-bottom: 0;
  52 }
  53
  54 .subnav .nav > li > a {
  55         margin: 0;
  56         padding-top:    11px;
  57         padding-bottom: 11px;
  58         border-left: 1px solid #f5f5f5;
  59         border-right: 1px solid #e5e5e5;
  60         -webkit-border-radius: 0;
  61         -moz-border-radius: 0;
  62         border-radius: 0;
  63 }
  64
  65 .subnav .nav > .active > a,
  66 .subnav .nav > .active > a:hover {
  67         padding-left: 13px;
  68         color: #777;
  69         background-color: #e9e9e9;
  70         border-right-color: #ddd;
  71         border-left: 0;
  72         -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
  73         -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
  74         box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
  75 }
  76
  77 .subnav .nav > .active > a .caret,
  78 .subnav .nav > .active > a:hover .caret {
  79         border-top-color: #777;
  80 }
  81
  82 .subnav .nav > li:first-child > a,
  83 .subnav .nav > li:first-child > a:hover {
  84         border-left: 0;
  85         padding-left: 12px;
  86         -webkit-border-radius: 4px 0 0 4px;
  87         -moz-border-radius: 4px 0 0 4px;
  88         border-radius: 4px 0 0 4px;
  89 }
  90
  91 .subnav .nav > li:last-child > a {
  92         border-right: 0;
  93 }
  94
  95 .subnav .dropdown-menu {
  96         -webkit-border-radius: 0 0 4px 4px;
  97         -moz-border-radius: 0 0 4px 4px;
  98         border-radius: 0 0 4px 4px;
  99 }
 100
 101 .tooltip-inner {
 102         max-width: 500px;
 103 }
 104
 105 .hero-unit {
 106         margin-bottom: 10px;
 107         border: 1px solid #ddd;
 108         text-align: center;
 109 }
 110
 111 .hero-unit h1,
 112 .hero-unit p {
 113         margin-bottom: 15px;
 114 }
 115
 116 #social {
 117         display: inline-block;
 118         margin-top: 45px;
 119         text-align: center;
 120 }
 121
 122 #gh-star {
 123         margin-right: 10px;
 124 }
 125
 126 .twitter-follow-button {
 127         width: 60px !important;
 128 }
 129
 130 .twitter-share-button  {
 131         margin-right: 15px;
 132 }
 133
 134 .rss-button {
 135         width: 40px;
 136         height: 14px;
 137         font-size: 11px;
 138         line-height: 14px;
 139         font-weight: bold;
 140         margin: 0 0 10px;
 141         padding: 2px 5px 2px 4px;
 142 }
 143
 144 .icon-rss {
 145         background: url(../img/rss-icons.png) no-repeat 0 0;
 146         opacity: .65;
 147         width: 16px;
 148 }
 149
 150 .index h3 {
 151         text-align: center;
 152         font-size: 20px;
 153 }
 154
 155 #ticker {
 156         margin-bottom: 40px;
 157 }
 158
 159 .about {
 160         margin-top: 20px;
 161 }
 162
 163 .about > div {
 164         margin-bottom: 20px;
 165 }
 166
 167 .about h3 {
 168         margin: 0 0 0 35px;
 169         text-align: left;
 170 }
 171
 172 .about img {
 173         float: left;
 174         margin-top: 5px;
 175         opacity: 0.7;
 176 }
 177
 178 #gallery {
 179         padding-right: 20px;
 180 }
 181
 182 .thumbnail {
 183         margin-bottom: 20px;
 184         background-color: rgba(0, 0, 0, 0.05);
 185 }
 186
 187 .thumbnail img {
 188         width: 100%;
 189         -webkit-border-radius: 7px;
 190         -moz-border-radius: 7px;
 191         border-radius: 7px;
 192 }
 193
 194 .thumbnail .caption {
 195         color: inherit !important;
 196 }
 197
 198 .thumbnail h3 {
 199         text-align: left;
 200         margin-bottom: 0;
 201 }
 202
 203 .thumbnail .btn-toolbar {
 204         margin-top: 15px;
 205         text-align: right;
 206 }
 207
 208 .links {
 209         margin-bottom: 20px;
 210 }
 211
 212 .links > a {
 213         margin-right: 10px;
 214 }
 215
 216 div.one .bsa_it_ad {
 217         padding: 25px 25px 15px 25px;
 218 }
 219
 220 div.one .bsa_it_p {
 221         display: none;
 222 }
 223
 224 .bsa {
 225         float: right;
 226         max-width: 400px;
 227         padding: 0;
 228 }
 229
 230 body .one .bsa_it_ad {
 231         margin-bottom: -10px;
 232         background: none;
 233         border: none;
 234         font-family: inherit;
 235         color: inherit;
 236 }
 237
 238 body .one .bsa_it_ad .bsa_it_t,
 239 body .one .bsa_it_ad .bsa_it_d {
 240         color: inherit;
 241         font-size: inherit;
 242 }
 243
 244 body .one .bsa_it_p {
 245         display: none;
 246 }
 247
 248 .links {
 249         margin-bottom: 20px;
 250 }
 251
 252 .links > a {
 253         margin-right: 10px;
 254 }
 255
 256 @media (max-width: 480px) {
 257
 258         .hero-unit {
 259                 padding: 20px 20px 0;
 260                 margin: 0 0 20px;
 261         }
 262
 263         .hero-unit h1 {
 264                 font-size: 36px;
 265         }
 266
 267         .hero-unit iframe {
 268                 margin-right: 0 !important;
 269         }
 270
 271         #social {
 272                 margin-top: 0px;
 273                 margin-bottom: 20px;
 274         }
 275
 276         #social > span {
 277                 display: block;
 278         }
 279
 280         .about {
 281                 margin-top: 0;
 282         }
 283
 284         .about h3 {
 285                 margin-top: 20px;
 286         }
 287
 288         .about p {
 289                 margin-bottom: 0;
 290         }
 291
 292         .modal {
 293                 position: fixed !important;
 294                 top: 25% !important;
 295         }
 296 }
 297
 298 /* Landscape phone to portrait tablet */
 299 @media (min-width: 481px) and (max-width: 767px) {
 300
 301         .hero-unit {
 302                 margin-top: 0;
 303                 padding: 30px;
 304         }
 305
 306         .about {
 307                 margin-top: 0;
 308         }
 309 }
 310
 311 @media (max-width: 767px) {
 312
 313         body {
 314                 padding-top: 0;
 315         }
 316
 317         .subnav {
 318                 position: static;
 319                 top: auto;
 320                 z-index: auto;
 321                 width: auto;
 322                 height: auto;
 323                 background: #fff; /* whole background property since we use a background-image for gradient */
 324                 -webkit-box-shadow: none;
 325                 -moz-box-shadow: none;
 326                 box-shadow: none;
 327         }
 328
 329         .subnav .nav > li {
 330                 float: none;
 331         }
 332
 333         .subnav .nav > li > a {
 334                 border: 0;
 335         }
 336
 337         .subnav .nav > li + li > a {
 338                 border-top: 1px solid #e5e5e5;
 339         }
 340
 341         .subnav .nav > li:first-child > a,
 342         .subnav .nav > li:first-child > a:hover {
 343                 -webkit-border-radius: 4px 4px 0 0;
 344                 -moz-border-radius: 4px 4px 0 0;
 345                 border-radius: 4px 4px 0 0;
 346         }
 347
 348         .bsa {
 349                 float: none;
 350         }
 351 }
 352
 353 /* Portrait tablet to landscape and desktop */
 354 @media (min-width: 768px) and (max-width: 979px) {
 355
 356         .hero-unit {
 357                 margin-top: 0;
 358         }
 359
 360         .thumbnail p {
 361                 font-size: 12px;
 362         }
 363
 364         .thumbnail .btn {
 365                 padding: 8px 12px;
 366                 font-size: 12px;
 367         }
 368 }
 369
 370 /* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
 371 @media (min-width: 980px) {
 372         .subnav-fixed {
 373                 position: fixed;
 374                 top: 40px;
 375                 left: 0;
 376                 right: 0;
 377                 z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
 378                 border-color: #d5d5d5;
 379                 border-width: 0 0 1px; /* drop the border on the fixed edges */
 380                 -webkit-border-radius: 0;
 381                 -moz-border-radius: 0;
 382                 border-radius: 0;
 383                 -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 384                 -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 385                 box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
 386                 filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
 387         }
 388         .subnav-fixed .nav {
 389                 width: 938px;
 390                 margin: 0 auto;
 391                 padding: 0 1px;
 392         }
 393         .subnav .nav > li:first-child > a,
 394         .subnav .nav > li:first-child > a:hover {
 395                 -webkit-border-radius: 0;
 396                 -moz-border-radius: 0;
 397                 border-radius: 0;
 398         }
 399 }
 400
 401 @media (min-width: 768px) and (max-width: 979px) {
 402
 403         /* Remove any padding from the body */
 404         body {
 405                 padding-top: 0;
 406         }
 407 }
 408
 409 @media (min-width: 1210px) {
 410
 411         .subnav-fixed .nav {
 412                 width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
 413         }
 414 }