POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/examples/carousel/carousel.css

   1 /* GLOBAL STYLES
   2 -------------------------------------------------- */
   3 /* Padding below the footer and lighter body text */
   4
   5 body {
   6   padding-bottom: 40px;
   7   color: #5a5a5a;
   8 }
   9
  10
  11 /* CUSTOMIZE THE NAVBAR
  12 -------------------------------------------------- */
  13
  14 /* Special class on .container surrounding .navbar, used for positioning it into place. */
  15 .navbar-wrapper {
  16   position: absolute;
  17   top: 0;
  18   right: 0;
  19   left: 0;
  20   z-index: 20;
  21 }
  22
  23 /* Flip around the padding for proper display in narrow viewports */
  24 .navbar-wrapper > .container {
  25   padding-right: 0;
  26   padding-left: 0;
  27 }
  28 .navbar-wrapper .navbar {
  29   padding-right: 15px;
  30   padding-left: 15px;
  31 }
  32 .navbar-wrapper .navbar .container {
  33   width: auto;
  34 }
  35
  36
  37 /* CUSTOMIZE THE CAROUSEL
  38 -------------------------------------------------- */
  39
  40 /* Carousel base class */
  41 .carousel {
  42   height: 500px;
  43   margin-bottom: 60px;
  44 }
  45 /* Since positioning the image, we need to help out the caption */
  46 .carousel-caption {
  47   z-index: 10;
  48 }
  49
  50 /* Declare heights because of positioning of img element */
  51 .carousel .item {
  52   height: 500px;
  53   background-color: #777;
  54 }
  55 .carousel-inner > .item > img {
  56   position: absolute;
  57   top: 0;
  58   left: 0;
  59   min-width: 100%;
  60   height: 500px;
  61 }
  62
  63
  64 /* MARKETING CONTENT
  65 -------------------------------------------------- */
  66
  67 /* Center align the text within the three columns below the carousel */
  68 .marketing .col-lg-4 {
  69   margin-bottom: 20px;
  70   text-align: center;
  71 }
  72 .marketing h2 {
  73   font-weight: normal;
  74 }
  75 .marketing .col-lg-4 p {
  76   margin-right: 10px;
  77   margin-left: 10px;
  78 }
  79
  80
  81 /* Featurettes
  82 ------------------------- */
  83
  84 .featurette-divider {
  85   margin: 80px 0; /* Space out the Bootstrap <hr> more */
  86 }
  87
  88 /* Thin out the marketing headings */
  89 .featurette-heading {
  90   font-weight: 300;
  91   line-height: 1;
  92   letter-spacing: -1px;
  93 }
  94
  95
  96 /* RESPONSIVE CSS
  97 -------------------------------------------------- */
  98
  99 @media (min-width: 768px) {
 100   /* Navbar positioning foo */
 101   .navbar-wrapper {
 102     margin-top: 20px;
 103   }
 104   .navbar-wrapper .container {
 105     padding-right: 15px;
 106     padding-left: 15px;
 107   }
 108   .navbar-wrapper .navbar {
 109     padding-right: 0;
 110     padding-left: 0;
 111   }
 112
 113   /* The navbar becomes detached from the top, so we round the corners */
 114   .navbar-wrapper .navbar {
 115     border-radius: 4px;
 116   }
 117
 118   /* Bump up size of carousel content */
 119   .carousel-caption p {
 120     margin-bottom: 20px;
 121     font-size: 21px;
 122     line-height: 1.4;
 123   }
 124
 125   .featurette-heading {
 126     font-size: 50px;
 127   }
 128 }
 129
 130 @media (min-width: 992px) {
 131   .featurette-heading {
 132     margin-top: 120px;
 133   }
 134 }