Initial import

css/printrun.css

+/* GENERAL STYLES
+-------------------------------------------------- */
+
+body {
+    background: #F8F8F8 url("../images/diagonal-noise.png");
+    font-family: 'Raleway', sans-serif;
+}
+
+.container {
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0;
+}
+
+h2 {
+    border-left: 5px solid #333;
+    padding-left: 10px;
+}
+
+.separator {
+    height: 20px;
+    width: 100%;
+}
+
+/* NAVBAR
+-------------------------------------------------- */
+
+.navbar .container {
+    width: 700px;
+    font-family: 'Allerta', sans-serif;
+    font-weight: 400;
+}
+
+.navbar {
+    background-color: transparent;
+    border: 0;
+    margin-bottom: 10px;
+}
+
+.navbar-brand {
+    float: left;
+    position: absolute;
+    z-index: 1500;
+    display: block;
+    padding: 0;
+}
+
+.navbar .nav {
+    float: right;
+    position: relative;
+    left: 0;
+}
+
+.navbar .nav li {
+    text-transform: uppercase;
+    font-size: 1.2em;
+}
+
+.navbar-toggle {
+    position: absolute;
+    right: 0;
+    z-index: 1600;
+    border: 0;
+    margin-top: 14px;
+}
+
+.navbar-toggle:hover, .navbar-toggle:focus {
+    background: transparent;
+}
+
+.navbar-toggle .icon-bar {
+    background-color: #55A9E0;
+}
+
+.navbar-toggle:hover .icon-bar {
+    background-color: #87cfff;
+}
+
+@media (max-width: 767px) {
+    .navbar .container {
+        text-align: center;
+        width: auto;
+    }
+
+    .navbar-collapse {
+        background-color: #333;
+        color: #fff;
+        width: 100%;
+        position: absolute;
+        top: 60px;
+        float: none;
+        z-index: 1400;
+        text-align: center;
+    }
+
+    .navbar-collapse .nav {
+        float: none;
+        margin: 90px 0 40px 0;
+        padding: 0 20%;
+    }
+
+    .navbar-collapse .nav li a {
+        color: #fff;
+    }
+
+    .navbar-collapse .nav li a:hover {
+        background-color: #87cfff;
+    }
+
+    .navbar-brand {
+        width: 100%;
+    }
+}
+
+@media (min-width: 768px) {
+    .navbar .nav li a {
+        color: #444;
+        margin-left: 45px;
+        padding: 25px 0 15px 0;
+    }
+
+    .navbar .nav li a:hover {
+        color: #111;
+        border-bottom: 5px solid #87cfff;
+        padding-bottom: 10px;
+        background-color: transparent;
+    }
+}
+
+/* HOME
+-------------------------------------------------- */
+
+.container.home {
+    margin-bottom: 30px;
+}
+
+.home .row .col-md-4, .home .row .col-md-8 {
+    width: 300px;
+}
+
+@media (max-width: 959px) {
+    .home .row {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .home .row .col-md-4, .home .row .col-md-8 {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+@media (min-width: 960px) {
+    .home .row {
+        width: 960px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .home .row .col-md-4, .home .row .col-md-8 {
+        margin-left: 10px;
+        margin-right: 10px;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .home .row .col-md-8 {
+        width: 620px;
+    }
+
+}
+
+.homebox {
+    height: 370px;
+    color: #fff;
+    text-align: center;
+    font-family: 'Allerta', sans-serif;
+    margin-top: 20px;
+}
+
+.homebox-large {
+}
+
+.homebox h4 {
+    text-transform: uppercase;
+    font-size: 1.2em;
+    margin: 0;
+    position: absolute;
+    bottom: 28px;
+    width: 100%;
+}
+
+.homebox>div {
+    overflow: hidden;
+    background-color: #333;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    width: 100%;
+    height: 370px;
+    position: absolute;
+    -webkit-transition: all 1s ease;
+    transition: all 1s ease;
+}
+
+.homebox .front {
+    -webkit-transform: perspective(800px) rotateY(0deg);
+    transform: perspective(800px) rotateY(0deg);
+}
+
+
+.homebox .back {
+    text-align: justify;
+    padding: 20px;
+    font-size: 1.3em;
+    -webkit-transform: perspective(800px) rotateY(-179.9deg);
+    transform: perspective(800px) rotateY(-179.9deg);
+}
+
+.homebox:hover .front, .homebox:focus .front {
+    -webkit-transform: perspective(800px) rotateY(179.9deg);
+    transform: perspective(800px) rotateY(179.9deg);
+}
+
+.homebox:hover .back, .homebox:focus .back {
+    -webkit-transform: perspective(800px) rotateY(0deg);
+    transform: perspective(800px) rotateY(0deg);
+}
+
+.homebox-large>div {
+    background-color: #729fcf;
+}
+
+/* CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+.carousel {
+    height: 500px;
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+    z-index: 10;
+    width: 768px;
+    margin-left: -384px;
+    margin-right: auto;
+    left: 50%;
+    right: auto;
+}
+
+.carousel-caption div {
+    padding: 10px;
+    background-color: rgb(30, 30, 30);
+    background-color: rgba(30, 30, 30, 0.8);
+    -webkit-border-radius: 30px;
+    -moz-border-radius: 30px;
+    border-radius: 30px;
+    margin-bottom: -5px;
+}
+
+.carousel-caption div a.caption-link {
+    color: #87cfff;
+}
+
+.carousel-control {
+    top: 200px;
+    height: 100px;
+    width: 50px;
+}
+
+.carousel-control .glyphicon-chevron-left {
+    left: 20px;
+}
+
+.carousel-control .glyphicon-chevron-right {
+    right: 10px;
+}
+
+.carousel-control.left, .carousel-control.right {
+    background: rgb(30, 30, 30);
+    background: rgba(30, 30, 30, 0.3);
+}
+
+.carousel-indicators li.active {
+    background: #87cfff;
+    border-color: #000;
+}
+
+.carousel-indicators li {
+    background: #fff;
+    border-color: #000;
+    border-width: 2px;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel .item {
+    height: 500px;
+}
+.carousel-inner > .item > img {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@media (min-width: 768px) {
+    /* Bump up size of carousel content */
+    .carousel-caption p {
+        margin-bottom: 20px;
+        font-size: 21px;
+        line-height: 1.4;
+    }
+
+    .carousel-indicators {
+        bottom: 0;
+    }
+}
+
+/* MAIN
+-------------------------------------------------- */
+
+.main {
+    font-size: 1.3em;
+    margin-bottom: 20px;
+}
+
+/* FOOTER
+-------------------------------------------------- */
+
+.footer {
+    margin-top: 30px;
+    padding: 15px 0;
+    color: #aaa;
+    background-color: #fafafa;
+    border-top: 1px solid #eee;
+    text-align: center;
+}
+
+.footer p {
+    margin: 0;
+}
+
+/* COLORS
+-------------------------------------------------- */
+
+.purple {
+    color: #9e9ac8;
+}
+
+.blue {
+    color: #6baed6;
+}
+
+.grey {
+    color: #969696;
+}
+
+.green {
+    color: #74c476;
+}
+
+.orange {
+    color: #fd8d3c;
+}
+
+.highlight {
+    background: #636363;
+}
+
+.pink {
+    color: #e377c2;
+}
+
+.white {
+    color: #fff;
+}
+
+.black {
+    color: #333;
+}
+
+.bg-purple {
+    background-color: #9e9ac8;
+}
+
+.bg-blue {
+    background-color: #6baed6;
+}
+
+.bg-lightblue {
+    background-color: #87cfff;
+}
+
+.bg-grey {
+    background-color: #969696;
+}
+
+.bg-green {
+    background-color: #74c476;
+}
+
+.bg-orange {
+    background-color: #fd8d3c;
+}
+
+.bg-pink {
+    background-color: #e377c2;
+}
+
+.border-purple {
+    border-color: #9e9ac8;
+}
+
+.border-lightblue {
+    border-color: #87cfff;
+}
+
+.border-blue {
+    border-color: #6baed6;
+}
+
+.border-grey {
+    border-color: #969696;
+}
+
+.border-green {
+    border-color: #74c476;
+}
+
+.border-orange {
+    border-color: #fd8d3c;
+}
+
+.border-pink {
+    border-color: #e377c2;
+}