1 files changed, 269 insertions, 0 deletions
diff --git a/static/css/HPstyles.css b/static/css/HPstyles.css
new file mode 100755
index 0000000..8c7f88e
--- /dev/null
+++ b/static/css/HPstyles.css
@@ -0,0 +1,269 @@
+/* Global Styles */
+
+html,
+body {
+    height: 100%;
+    width: 100%;
+    letter-spacing: 0.5px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Cabin', "Helvetica Neue", "Helvetica", sans-serif;
+}
+
+body {
+
+    font-family: 'Arbutus Slab', "Helvetica Neue", "Helvetica", sans-serif !important;
+    line-height: 1.6;
+}
+
+.vert-text {
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+}
+
+
+/* Full Page Image Header Area */
+
+.header {
+    display: table;
+    height: 70%;
+    width: 100%;
+    min-height: 70%;
+    position: relative;
+    background: url(../img/desk.jpg) no-repeat center center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    z-index: 99999;
+    background-color: black;
+}
+
+.logo {
+    max-width: 35em;
+    width: 100%;
+    padding: 2em;
+}
+
+.buttonbox {
+    margin: 2em 0 4em;
+}
+
+@media only screen
+and (min-device-width : 320px)
+and (max-device-width : 1024px)
+and (orientation : portrait)
+{
+    .header {
+        display: table;
+        height: 70%;
+        width: 100%;
+        position: relative;
+        background: url(../img/desk-mini.jpg) no-repeat;
+        background-size: 100% 100%;
+        z-index: 99999;
+        background-color: black;
+    }
+}
+
+@media only screen
+and (min-device-width : 320px)
+and (max-device-width : 1024px)
+and (orientation : landscape) {
+    .header {
+        display: table;
+        height: 70%;
+        width: 100%;
+        position: relative;
+        background: url(../img/desk-long.jpg) no-repeat;
+        background-size: 100% 100%;
+        z-index: 99999;
+        background-color: black;
+    }
+}
+
+.header .btn {
+    margin: 10px;
+}
+
+#main {
+    z-index: 99999;
+    position: relative;
+    background: rgb(255, 255, 255);
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+.header .btn {
+    font-weight: 100;
+}
+
+/* Intro */
+
+.counterpoint {
+    padding: 50px 0;
+    background-color: rgb(255, 252, 244);
+}
+
+.point {
+    background: rgb(96,210,211);
+    padding: 50px 0;
+    color: #ffffff;
+}
+
+
+.point h2, .counterpoint h2 {
+    font-size: 32pt;
+    line-height: 1.7;
+}
+
+i.callout-icon, i.point-icon, i.lead-icon {
+    border-radius: 50%;
+    display: inline-block;
+    font-size: 56px;
+    width: 140px;
+    height: 140px;
+    line-height: 136px;
+    vertical-align: middle;
+    text-align: center;
+    -webkit-transition: box-shadow 0.2s;
+    -moz-transition: box-shadow 0.2s;
+    transition: box-shadow 0.2s;
+}
+
+i.lead-icon {
+    border: 3px solid #222;
+}
+
+i.point-icon, i.callout-icon {
+    border: 3px solid #ffffff;
+}
+
+i.lead-icon:hover {
+    color: #fff;
+    border: 3px solid black;
+    background: black;
+}
+
+i.point-icon:hover {
+    color: rgb(22, 203, 230);
+    border: 3px solid #fff;
+    background: #fff;
+}
+
+a:hover {
+    color: rgb(52, 73, 94);
+}
+
+
+
+.icon-2x {
+    font-size: 200%;
+}
+
+/* Callout */
+
+.callout {
+    color: #ffffff;
+    display: table;
+    height: 420px;
+    width: 100%;
+    background-color: rgb(118,156,172);
+    padding: 50px 0;
+    color: #ffffff;
+}
+
+i.callout-icon:hover {
+    color: rgb(249, 176, 190);
+    border: 3px solid #fff;
+    background: #fff;
+}
+
+
+/* Call to Action */
+
+.call-to-action {
+    color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.19);
+    padding: 50px 0;
+
+}
+
+#action {
+    background: url(../img/gray.png);
+    padding: 30px 0px 40px;
+    width: 100%;
+}
+#action pre {
+    background-color: #545454;
+    color: #f9f2f4;
+}
+#action pre:hover {
+    background-color: #f9f2f4;
+    color: #545454;
+}
+#action code {
+    font-family: Lato, monospace;
+    font-size: 14pt;
+}
+
+#footer {
+    font-size: 14px;
+    padding: 50px 0px 25px 0px;
+    background: rgb(255, 255, 255);
+}
+
+.call-to-action .btn {
+    margin: 10px;
+}
+
+/* Footer */
+
+footer {
+    padding: 100px 0;
+}
+
+footer a {
+    color: black;
+}
+
+footer a:hover {
+    text-decoration: none;
+}
+
+.point a, .counterpoint a {
+    color: rgb(7,162,166);
+}
+
+/* Bootstrap Addons */
+
+.btn-dark {
+    color:white;
+    background-color: rgba(30,30,30, 0.8);
+    border-color: black;
+}
+
+.btn-dark:hover,
+.btn-dark:focus,
+.btn-dark:active {
+    color: black;
+    background-color: aliceblue;
+    border-color: black;
+}
+
+.btn-info:hover, .btn-primary:hover, .btn-success:hover {
+    background: aliceblue;
+}
+
+.owl-carousel blockquote {
+    border-left: 0px;
+}
+
+.owl-carousel a {
+    color: #243382;
+}
+
+.owl-carousel blockquote p {
+    font-size: 20pt;
+}