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

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