index: combine css styles
[bootswatch] / css / bootswatch.css
index 751dfbc..4817b16 100644 (file)
 body {
+       padding-top: 80px;
        padding-bottom: 20px;
 }
 
-.nav i {
+.navbar a > i {
        opacity: 0.5;
 }
 
-.nav a:hover i {
+.navbar a:hover > i {
        opacity: 1;
 }
 
-.tooltip-inner {
-       max-width: 500px;
+section {
+       margin-top: 100px;
 }
 
-.alert a {
-       font-weight: bold;
-       text-decoration: underline;
+.subhead {
+       padding-bottom: 0;
+       margin-bottom: 9px;
+}
+
+.subhead h1 {
+       font-size: 54px;
+}
+
+.subnav {
+       margin-bottom: 60px;
+       width: 100%;
+       height: 36px;
+       background-color: #eeeeee; /* Old browsers */
+       background-repeat: repeat-x; /* Repeat the gradient */
+       background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
+       background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
+       background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
+       background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
+       background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
+       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
+       background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
+       border: 1px solid #e5e5e5;
+       -webkit-border-radius: 4px;
+       -moz-border-radius: 4px;
+       border-radius: 4px;
+}
+
+.subnav .nav {
+       margin-bottom: 0;
 }
 
-.alert p {
+.subnav .nav > li > a {
        margin: 0;
+       padding-top:    11px;
+       padding-bottom: 11px;
+       border-left: 1px solid #f5f5f5;
+       border-right: 1px solid #e5e5e5;
+       -webkit-border-radius: 0;
+       -moz-border-radius: 0;
+       border-radius: 0;
+}
+
+.subnav .nav > .active > a,
+.subnav .nav > .active > a:hover {
+       padding-left: 13px;
+       color: #777;
+       background-color: #e9e9e9;
+       border-right-color: #ddd;
+       border-left: 0;
+       -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+       -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+       box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
+}
+
+.subnav .nav > .active > a .caret,
+.subnav .nav > .active > a:hover .caret {
+       border-top-color: #777;
+}
+
+.subnav .nav > li:first-child > a,
+.subnav .nav > li:first-child > a:hover {
+       border-left: 0;
+       padding-left: 12px;
+       -webkit-border-radius: 4px 0 0 4px;
+       -moz-border-radius: 4px 0 0 4px;
+       border-radius: 4px 0 0 4px;
+}
+
+.subnav .nav > li:last-child > a {
+       border-right: 0;
+}
+
+.subnav .dropdown-menu {
+       -webkit-border-radius: 0 0 4px 4px;
+       -moz-border-radius: 0 0 4px 4px;
+       border-radius: 0 0 4px 4px;
+}
+
+.tooltip-inner {
+       max-width: 500px;
 }
 
 .hero-unit {
-       margin-top: 60px;
        margin-bottom: 10px;
 }
 
-.hero-unit h1, .hero-unit p {
-  text-align: center;
-  margin-bottom: 15px;
+.hero-unit h1,
+.hero-unit p {
+       text-align: center;
+       margin-bottom: 15px;
 }
 
 #social {
-  margin-top: 45px;
+       margin-top: 45px;
 }
 
 .twitter-follow-button {
-  width: 150px !important;
+       width: 150px !important;
 }
 
 .rss-button {
@@ -52,8 +127,8 @@ body {
 }
 
 .icon-rss {
-    background: url(../img/rss-icons.png) no-repeat 0 0;
-       opacity: .65;
+       background: url(../img/rss-icons.png) no-repeat 0 0;
+       opacity: .65;
        width: 16px;
 }
 
@@ -62,27 +137,27 @@ body {
 }
 
 .about {
-  margin-top: 20px;
+       margin-top: 20px;
 }
 
-.about .span4 {
+.about > div {
        margin-bottom: 20px;
 }
 
 .about h3 {
-  margin: 0 0 5px 35px;
+       margin: 0 0 5px 35px;
 }
 
 .about img {
-  float: left;
-  margin-top: 5px;
-  opacity: 0.7;
+       float: left;
+       margin-top: 5px;
+       opacity: 0.7;
 }
 
 #gallery {
-  margin: 45px 0 30px 0;
-  padding-right: 20px;
-  text-align: center;
+       margin: 45px 0 30px 0;
+       padding-right: 20px;
+       text-align: center;
 }
 
 .thumbnail {
@@ -92,9 +167,9 @@ body {
 
 .thumbnail img {
        width: 100%;
-       -webkit-border-radius: 7px;
-       -moz-border-radius: 7px;
-            border-radius: 7px;
+       -webkit-border-radius: 7px;
+       -moz-border-radius: 7px;
+       border-radius: 7px;
 }
 
 .thumbnail .caption {
@@ -118,7 +193,54 @@ body {
        margin-right: 10px;
 } 
 
-/* Landscape phones and down */
+div.one .bsa_it_ad {
+       padding: 25px 25px 15px 25px;
+}
+
+div.one .bsa_it_p {
+       display: none;
+}
+
+.bsa {
+       float: right;
+       max-width: 400px;
+       padding: 0;
+}
+
+body .one .bsa_it_ad {
+       margin-bottom: -10px;
+       background: none;
+       border: none;
+       font-family: inherit;
+       color: inherit;
+}
+
+body .one .bsa_it_ad .bsa_it_t,
+body .one .bsa_it_ad .bsa_it_d {
+       color: inherit;
+       font-size: inherit;
+}
+
+body .one .bsa_it_p {
+       display: none;
+}
+
+#bsap_aplink {
+       float: right;
+       position: relative;
+       right: 10px;
+       height: 0;
+       font-size: 11px;
+}
+
+.links {
+       margin-bottom: 20px;
+}
+
+.links > a {
+       margin-right: 10px;
+}
+
 @media (max-width: 480px) {
 
        .hero-unit {
@@ -127,7 +249,7 @@ body {
        }
 
        .hero-unit h1 {
-         font-size: 36px;
+               font-size: 36px;
        }
 
        .hero-unit p {
@@ -141,11 +263,11 @@ body {
        }
 
        .about {
-         margin-top: 0;
+               margin-top: 0;
        }
 
        .about h3 {
-         margin-top: 20px;
+               margin-top: 20px;
        }
 
        .about p {
@@ -158,20 +280,6 @@ body {
        }
 }
 
-div.one .bsa_it_ad {
-       padding: 25px 25px 15px 25px;
-}
-
-div.one .bsa_it_p {
-       display: none;
-}
-
-#bsap_aplink {
-       float: right;
-       margin-bottom: 20px;
-       font-size: 12px;
-}
-
 /* Landscape phone to portrait tablet */
 @media (min-width: 481px) and (max-width: 767px) {
 
@@ -185,8 +293,50 @@ div.one .bsa_it_p {
        }
 }
 
+@media (max-width: 767px) {
+
+       body {
+               padding-top: 0;
+       }
+
+       .subnav {
+               position: static;
+               top: auto;
+               z-index: auto;
+               width: auto;
+               height: auto;
+               background: #fff; /* whole background property since we use a background-image for gradient */
+               -webkit-box-shadow: none;
+               -moz-box-shadow: none;
+               box-shadow: none;
+       }
+
+       .subnav .nav > li {
+               float: none;
+       }
+
+       .subnav .nav > li > a {
+               border: 0;
+       }
+
+       .subnav .nav > li + li > a {
+               border-top: 1px solid #e5e5e5;
+       }
+
+       .subnav .nav > li:first-child > a,
+       .subnav .nav > li:first-child > a:hover {
+               -webkit-border-radius: 4px 4px 0 0;
+               -moz-border-radius: 4px 4px 0 0;
+               border-radius: 4px 4px 0 0;
+       }
+
+       .bsa {
+               float: none;
+       }
+}
+
 /* Portrait tablet to landscape and desktop */
-@media (min-width: 768px) and (max-width: 980px) {
+@media (min-width: 768px) and (max-width: 979px) {
 
        .hero-unit {
                margin-top: 0;
@@ -197,8 +347,48 @@ div.one .bsa_it_p {
        }
 }
 
-/* Large desktop */
-@media (min-width: 1200px) {
+/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
+@media (min-width: 980px) {
+       .subnav-fixed {
+               position: fixed;
+               top: 40px;
+               left: 0;
+               right: 0;
+               z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
+               border-color: #d5d5d5;
+               border-width: 0 0 1px; /* drop the border on the fixed edges */
+               -webkit-border-radius: 0;
+               -moz-border-radius: 0;
+               border-radius: 0;
+               -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+               -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+               box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+               filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
+       }
+       .subnav-fixed .nav {
+               width: 938px;
+               margin: 0 auto;
+               padding: 0 1px;
+       }
+       .subnav .nav > li:first-child > a,
+       .subnav .nav > li:first-child > a:hover {
+               -webkit-border-radius: 0;
+               -moz-border-radius: 0;
+               border-radius: 0;
+       }
+}
 
+@media (min-width: 768px) and (max-width: 979px) {
 
+       /* Remove any padding from the body */
+       body {
+               padding-top: 0;
+       }
 }
+
+@media (min-width: 1210px) {
+
+       .subnav-fixed .nav {
+               width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
+       }
+}
\ No newline at end of file