CSS   52

bootswatch

Guest on 7th July 2022 02:00:52 AM

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

Raw Paste

Login or Register to edit or fork this paste. It's free.