dash-website/_site/assets/css/style.css
Perry Woodin 74a6063445 Output i18n content
Output the content on the HTML files.
2016-07-13 13:30:59 -04:00

1000 lines
22 KiB
CSS

font-face {
font-family: 'montserratbold';
src: url("../fonts/montserrat-bold-webfont.eot");
src: url("../fonts/montserrat-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-bold-webfont.woff2") format("woff2"), url("../fonts/montserrat-bold-webfont.woff") format("woff"), url("../fonts/montserrat-bold-webfont.ttf") format("truetype"), url("../fonts/montserrat-bold-webfont.svg#montserratbold") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'montserratlight';
src: url("../fonts/montserrat-light-webfont.eot");
src: url("../fonts/montserrat-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-light-webfont.woff2") format("woff2"), url("../fonts/montserrat-light-webfont.woff") format("woff"), url("../fonts/montserrat-light-webfont.ttf") format("truetype"), url("../fonts/montserrat-light-webfont.svg#montserratlight") format("svg");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'montserratregular';
src: url("../fonts/montserrat-regular-webfont.eot");
src: url("../fonts/montserrat-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-regular-webfont.woff2") format("woff2"), url("../fonts/montserrat-regular-webfont.woff") format("woff"), url("../fonts/montserrat-regular-webfont.ttf") format("truetype"), url("../fonts/montserrat-regular-webfont.svg#montserratregular") format("svg");
font-weight: normal;
font-style: normal; }
p {
font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
font-size: 14px;
line-height: 22px; }
p a {
color: #1c75bc;
text-decoration: none; }
p a:hover {
text-decoration: underline; }
span {
font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; }
h1 {
font-size: 36px;
line-height: 40px;
font-family: 'montserratbold', 'Helvetica Neue', Helvetica, Arial, Sans-Serif; }
h2 {
font-family: 'montserratregular';
font-size: 22px;
color: #1c75bc; }
h3 {
font-family: 'montserratlight';
font-size: 20px;
color: #2f2f2f; }
h3 span {
font-family: inherit; }
.background-title {
background-color: #f0f0f0;
padding: 10px;
margin-top: 30px;
margin-bottom: 0; }
a {
font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
text-decoration: none;
color: #1c75bc; }
body {
margin: 0;
padding: 0;
color: #2f2f2f;
background-color: #ffffff;
font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
font-size: 14px;
line-height: 22px; }
.content {
width: 1280px;
margin: 0 auto; }
.col {
float: left; }
.clear {
clear: both;
display: block; }
.right {
float: right;
display: inline-block; }
.left {
float: left;
display: inline-block; }
.button_container {
display: none; }
img.staff {
max-width: 100px;
float: left;
margin-right: 10px; }
a.blog_link {
text-align: right; }
.img-circle {
margin: 1px;
border: 1px solid #dddddd;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%; }
#top {
border-bottom: 1px solid #ffffff;
text-align: left;
margin-top: 30px;
margin-bottom: 40px; }
#top .logo {
width: 180px;
height: auto;
display: inline-block; }
#top nav {
float: right;
text-align: right; }
#top nav li {
display: inline;
margin-left: 10px; }
#top nav li a {
color: rgba(47, 47, 47, 0.9);
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
font-family: 'montserratregular'; }
#top nav li a:hover {
color: #2f2f2f; }
#top nav .status {
color: #1c75bc !important; }
.btn-white-solid {
border-radius: 5px;
border: 2px solid #ffffff;
background-color: #f7f7f7;
padding: 5px 10px;
margin-bottom: 10px;
color: #3c3c3c !important;
text-decoration: none;
font-size: 16px;
font-family: 'montserratregular';
text-transform: uppercase;
box-sizing: border-box; }
.btn-white-solid:hover {
background-color: #ffffff; }
.btn-green {
background-color: #1dd68a;
padding: 10px 20px 10px 20px;
color: #ffffff !important;
text-decoration: none;
border: none;
font-size: 16px;
font-family: 'montserratregular';
text-transform: uppercase; }
.btn-green:hover {
background-color: #1bc981;
color: #ffffff !important; }
.btn-blue {
border-radius: 5px;
border: 2px solid #1c75bc;
padding: 5px 10px;
color: #1c75bc !important;
text-decoration: none; }
.btn-blue:hover {
background-color: #1c75bc;
color: #ffffff !important; }
.btn-blue-solid {
border-radius: 5px;
background-color: #1f83d2;
padding: 5px 10px;
margin-bottom: 10px;
color: #ffffff !important;
text-decoration: none;
border: none;
font-size: 16px;
font-family: 'montserratregular';
text-transform: uppercase;
box-sizing: border-box; }
.btn-blue-solid:hover {
background-color: #1a6daf;
color: #ffffff !important; }
form input {
font-size: 15px;
padding: 10px 5px 10px 5px;
border: 2px solid #2f2f2f;
box-sizing: border-box;
-webkit-appearance: none; }
form .username {
background-image: url(../images/icon-username.png);
background-repeat: no-repeat;
background-position: 10px center;
background-size: 22px 22px;
padding-left: 40px;
color: #ccc; }
form .password {
background-image: url(../images/icon-password.png);
background-repeat: no-repeat;
background-position: 10px center;
background-size: 22px 22px;
padding-left: 40px;
color: #ccc; }
footer {
padding-top: 20px; }
footer ul {
margin: 0;
padding: 0; }
footer .nav {
float: right;
text-align: right;
display: block; }
footer .nav li {
display: inline;
margin-left: 20px; }
footer .nav li a {
text-decoration: none;
color: #1c75bc;
font-size: 16px;
font-family: 'montserratregular'; }
footer .nav li a:hover {
color: #1864a1; }
footer .nav li .sign-up {
color: #1dd68a !important; }
footer .nav li .sign-up:hover {
color: #19bb79 !important; }
footer .social {
float: right;
text-align: right;
display: block; }
footer .social li {
display: inline;
margin-left: 10px; }
footer .social .social-icon {
width: 30px;
height: auto; }
footer .logo {
float: left;
width: 56px;
height: auto; }
footer .copyright {
margin-top: 13px;
float: left;
font-size: 12px;
color: #999; }
.container {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 40%;
left: 0;
margin: 0 auto; }
.container p {
font-size: 18px; }
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #FF5252;
text-decoration: none;
font-size: 18px;
overflow: hidden;
top: 5px; }
.container a:after {
content: '';
position: absolute;
background: #FF5252;
height: 2px;
width: 0%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
bottom: 0;
-webkit-transition: .35s ease;
transition: .35s ease; }
.container .a:hover:after, .container a:focus:after, .container a:active:after {
width: 100%; }
#hero .button_container {
position: absolute;
top: 40px;
right: 30px;
height: 23px;
width: 32px;
cursor: pointer;
z-index: 100;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease; }
#hero .button_container:hover {
opacity: .7; }
#hero .button_container span {
background: #ffffff;
border: none;
height: 4px;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all .35s ease;
transition: all .35s ease;
cursor: pointer; }
#hero .button_container span:nth-of-type(2) {
top: 8px; }
#hero .button_container span:nth-of-type(3) {
top: 16px; }
#hero .button_container.active .top {
-webkit-transform: translateY(8px) translateX(0) rotate(45deg);
-ms-transform: translateY(8px) translateX(0) rotate(45deg);
transform: translateY(8px) translateX(0) rotate(45deg);
background: #ffffff; }
#hero .button_container.active .middle {
opacity: 0;
background: #ffffff; }
#hero .button_container.active .bottom {
-webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
-ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
transform: translateY(-8px) translateX(0) rotate(-45deg);
background: #ffffff; }
.button_container {
position: absolute;
top: 30px;
right: 30px;
height: 23px;
width: 32px;
cursor: pointer;
z-index: 100;
-webkit-transition: opacity .25s ease;
transition: opacity .25s ease; }
.button_container:hover {
opacity: .7; }
.button_container span {
background: #1c75bc;
border: none;
height: 4px;
width: 100%;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all .35s ease;
transition: all .35s ease;
cursor: pointer; }
.button_container span:nth-of-type(2) {
top: 8px; }
.button_container span:nth-of-type(3) {
top: 16px; }
.button_container.active .top {
-webkit-transform: translateY(8px) translateX(0) rotate(45deg);
-ms-transform: translateY(8px) translateX(0) rotate(45deg);
transform: translateY(8px) translateX(0) rotate(45deg);
background: #1c75bc; }
.button_container.active .middle {
opacity: 0;
background: #1c75bc; }
.button_container.active .bottom {
-webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
-ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
transform: translateY(-8px) translateX(0) rotate(-45deg);
background: #1c75bc; }
.overlay {
position: fixed;
background: #2f2f2f;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .35s, visibility .35s, height .35s;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden; }
.overlay .logo {
width: 180px;
height: auto;
top: 30px;
left: 30px;
position: absolute; }
.overlay nav {
position: relative;
height: 70%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 36px;
font-weight: 200;
text-align: center; }
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
margin-top: 0px;
display: inline-block;
position: relative;
height: 50%; }
.overlay ul li {
display: block;
height: 16%;
height: calc(100% / 6);
min-height: 50px;
position: relative;
opacity: 0; }
.overlay ul a {
display: block;
position: relative;
color: #ffffff;
text-decoration: none;
overflow: hidden;
padding-bottom: 15px;
padding-top: 5px; }
.overlay ul a:hover:after, .overlay ul a:focus:after, .overlay ul a:active:after {
width: 100%; }
.overlay .sign-up-btn {
border: none;
padding: 30px;
color: #1dd68a !important; }
.overlay .sign-up-btn:hover {
background: none !important;
color: #1dd68a !important; }
.overlay.open {
opacity: 1;
visibility: visible;
height: 100%; }
.overlay.open li {
-webkit-animation: fadeInRight .5s ease forwards;
animation: fadeInRight .5s ease forwards;
-webkit-animation-delay: .35s;
animation-delay: .35s; }
.overlay.open li:nth-of-type(2) {
-webkit-animation-delay: .4s;
animation-delay: .4s; }
.overlay.open li:nth-of-type(3) {
-webkit-animation-delay: .45s;
animation-delay: .45s; }
.overlay.open li:nth-of-type(4) {
-webkit-animation-delay: .50s;
animation-delay: .50s; }
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
left: 20%; }
100% {
opacity: 1;
left: 0; } }
@keyframes fadeInRight {
0% {
opacity: 0;
left: 20%; }
100% {
opacity: 1;
left: 0; } }
#background-video {
position: absolute;
top: -150px;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
height: 700px;
overflow: hidden; }
#background-video .background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto; }
@media (min-aspect-ratio: 16 / 9) {
.background-video {
width: 100%;
height: auto; } }
@media (max-aspect-ratio: 16 / 9) {
.background-video {
width: auto;
height: 100%; } }
@media (max-width: 1024px) {
#background-video {
background: url("../img/Home-BG.jpg") center center/cover no-repeat; }
#background-video .background-video {
display: none; } }
#hero {
background-color: rgba(0, 0, 0, 0.15);
text-align: left;
color: #ffffff;
padding: 1px 0 275px 0; }
#hero #top {
border-bottom: 1px solid #ffffff;
text-align: left; }
#hero #top .logo {
width: 180px;
height: auto;
display: inline-block; }
#hero #top nav {
float: right;
text-align: right;
margin-bottom: 5px; }
#hero #top nav li {
display: inline;
margin-left: 20px; }
#hero #top nav li a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-size: 12px;
font-family: 'montserratregular'; }
#hero #top nav li a:hover {
color: white; }
#hero h1 {
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3); }
#hero p {
margin-bottom: 50px; }
#info .col {
width: 33%;
box-sizing: border-box;
margin-top: 50px;
margin-bottom: 70px;
text-align: center;
border-right: 2px solid #f0f0f0; }
#info .col h2 {
font-family: 'montserratlight';
font-size: 26px;
margin-bottom: 10px; }
#info .col h2 span {
font-family: inherit;
font-size: inherit;
margin-bottom: inherit;
color: inherit; }
#info .col span {
color: #999999;
text-transform: uppercase;
font-weight: bold;
font-size: 14px; }
#info .last {
border-right: none !important; }
#key-features {
background-color: #f0f0f0;
padding: 50px 0 30px 0; }
#key-features .col {
width: 50%;
box-sizing: border-box; }
#key-features .feature {
margin-bottom: 50px;
margin-right: 20px; }
#key-features .feature .icon {
float: left;
width: 55px;
height: auto;
margin: 0 40px 50px 0; }
#key-features .screenshot {
text-align: right; }
#key-features .screenshot img {
width: 100%;
max-width: 600px;
height: auto; }
#news {
padding: 50px 0 0 0; }
#news .news-post {
width: 25%;
padding: 30px;
float: left;
box-sizing: border-box; }
#news .news-post div.news-image {
line-height: 310px;
height: 180px; }
#news .news-post div.news-image img {
width: 100%;
max-width: 310px;
max-height: 205px;
height: auto; }
#news .news-post .news-title {
height: 60px;
overflow: hidden; }
#news .news-post h3 {
font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
font-size: 14px;
margin-bottom: 10px; }
#news .news-post .date {
font-style: italic;
font-size: 14px; }
#news .news-post a {
color: #1c75bc;
text-decoration: none; }
#news .news-post a:hover {
text-decoration: underline; }
#title {
background-color: rgba(28, 117, 188, 0.1);
margin-bottom: 40px; }
#title h1 {
padding-top: 60px;
padding-bottom: 20px;
font-family: 'montserratlight';
font-size: 30px; }
.main-col {
float: left;
width: 80%;
padding-right: 30px;
box-sizing: border-box; }
.video {
width: 100%;
background: #000;
text-align: center;
margin: 40px 0 40px 0; }
iframe {
width: 100%;
height: auto;
min-height: 450px;
box-sizing: border-box; }
.feature {
margin: 40px 0 40px 0; }
.feature img {
width: 75px;
height: auto; }
.feature .col {
float: right;
display: inline-block;
width: 88%; }
.divider {
border-top: 1px solid #f0f0f0;
text-align: center; }
.divider img {
width: 40px;
height: auto;
margin-top: -20px; }
.boxed-content {
border: 1px solid #1c75bc;
padding: 20px 40px 0px 30px;
margin-top: 20px; }
.boxed-content li {
margin-bottom: 20px; }
.sidebar {
float: right;
width: 20%;
box-sizing: border-box; }
.downloads {
border: 2px solid #f0f0f0;
box-sizing: border-box;
padding: 10px;
margin-bottom: 20px; }
.downloads h2 {
font-size: 16px;
text-transform: uppercase;
color: #2f2f2f;
margin: 0px;
font-family: 'montserratlight'; }
.callout-blue {
border: 2px solid #1c75bc;
box-sizing: border-box;
padding: 10px;
margin-bottom: 20px;
text-align: center; }
.callout-blue h2 {
font-family: 'montserratlight';
font-size: 64px;
margin-bottom: 20px;
color: #1c75bc; }
.callout-blue span {
color: #1c75bc;
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
margin-bottom: 30px;
display: block; }
.callout-green {
border: 2px solid #1dd68a;
box-sizing: border-box;
padding: 10px;
margin-bottom: 20px;
text-align: center; }
.callout-green h2 {
font-family: 'montserratlight';
font-size: 64px;
margin-bottom: 20px;
color: #1dd68a; }
.callout-green span {
color: #1dd68a;
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
margin-bottom: 30px;
display: block; }
.single-col {
width: 100%;
box-sizing: border-box; }
.hero-image {
width: 100%;
height: auto;
margin-bottom: 20px; }
.col-2 .col {
width: 50%;
box-sizing: border-box;
padding: 0 50px;
border-right: 2px solid #f0f0f0; }
.col-2 .col img.icon {
width: 25px;
height: auto;
float: left;
margin-top: 15px;
padding-right: 10px; }
.col-2 .first {
padding-left: 0; }
.col-2 .last {
border-right: none !important; }
.post img {
max-width: 100%; }
.post img.scale {
max-width: 50%;
clear: both;
display: block; }
.post .feature .preview {
width: 200px;
height: auto;
float: left;
padding: 0 40px 20px 0; }
.post .pagination {
width: 100%;
text-align: right; }
.post .author {
width: 100%;
text-align: center;
padding-top: 20px; }
.post .author .author-icon {
width: 50px;
height: auto; }
.post .author .divider {
margin: 20px 0; }
.post .social-icon {
width: 22px;
padding-left: 10px; }
@media (max-width: 1279px) {
.content {
width: 1000px;
margin: 0 auto; }
h1 {
font-size: 34px; }
h2 {
font-size: 20px; }
#background-video {
top: -40px;
max-height: 600px; }
#key-features {
padding: 0 30px 0 30px; }
#key-features .col {
width: 50%; }
#key-features .feature {
margin-right: 0px; }
#key-features .feature .icon {
width: 40px;
height: auto;
margin: 0 30px 100px 0; }
#key-features .screenshot {
padding: 40px 30px 30px 10px; }
.feature img {
width: 60px;
height: auto; } }
@media (max-width: 1020px) {
.content {
width: 750px;
margin: 0 auto; }
h1 {
font-size: 34px; }
h2 {
font-size: 20px; }
.desktop {
display: none;
width: 0;
height: 0; }
.button_container {
display: inline-block; }
#hero #top {
margin-bottom: 100px;
padding: 0 !important; }
#info .col {
padding: 0px 20px; }
#info .col h2 {
font-size: 20px; }
#info .col span {
font-size: 12px; }
#key-features .col {
width: 100%; }
#key-features .screenshot {
text-align: center !important;
padding: 0; }
#news .news-post {
width: 50%; }
#get-started-cta .col {
width: 50%; }
#top {
padding: 0 30px 0 30px; }
#title {
padding: 0 30px 0 30px; }
.main-col {
float: none;
width: 100%;
padding: 0 30px 0 30px; }
.sidebar {
float: none;
width: 100%;
padding: 0 30px 0 30px; }
.single-col {
padding: 0 30px 0 30px; }
.feature img {
margin-top: 10px;
width: 40px;
height: auto; }
.col-2 .col {
width: 100%;
border-right: none !important;
padding: 0; } }
@media (max-width: 760px) {
.content {
width: 600px;
margin: 0 auto; }
h1 {
font-size: 32px; }
h2 {
font-size: 18px; }
.second-line {
display: block; }
#info .col {
width: 33%;
box-sizing: border-box;
padding: 0 10px; }
#info .col h2 {
font-size: 18px;
margin-bottom: 10px; }
#info .col span {
font-size: 10px; }
footer {
padding-top: 0px;
text-align: center; }
footer .nav {
float: none;
text-align: center; }
footer .nav li {
display: block;
margin-left: 0px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0; }
footer .social {
float: none;
text-align: center;
margin-top: 15px; }
footer .logo {
margin-top: 20px;
float: none;
width: 56px;
height: auto; }
footer .copyright {
margin-top: 13px;
float: none;
font-size: 12px;
color: #999; } }
@media (max-width: 600px) {
.content {
width: 100%;
margin: 0 auto;
padding: 0; }
h1 {
font-size: 30px; }
h2 {
font-size: 18px; }
#hero {
padding-left: 30px;
padding-right: 30px; }
#sign-in-cta form input {
display: block;
width: 100%;
margin-bottom: 10px; }
#info .col {
width: 100%;
box-sizing: border-box;
margin-top: 10px;
margin-bottom: 20px;
border-right: none; }
#info .col h2 {
font-family: 'montserratlight';
font-size: 24px;
margin-bottom: 10px; }
#info .col span {
color: #999999;
text-transform: uppercase;
font-weight: bold;
font-size: 12px; }
#key-features {
padding: 30px; }
#key-features .col {
width: 100%;
box-sizing: border-box; }
#key-features .feature {
margin-bottom: 50px;
margin-right: 20px;
text-align: center; }
#key-features .feature .icon {
float: none;
width: 55px;
height: auto;
margin: 0; }
#key-features .feature p {
text-align: left; }
#news {
padding: 30px 0 30px 0; }
#news .news-post {
width: 100%; }
#news .news-post img {
width: 100%;
max-width: 600px;
height: auto; }
#get-started-cta {
padding: 50px 30px; }
#get-started-cta .col {
width: 100%;
padding: 0px;
margin-top: 20px;
margin-bottom: 20px; }
iframe {
min-height: 300px; }
.feature {
text-align: center; }
.feature img {
width: 75px;
height: auto; }
.feature .col {
float: none;
display: inline-block;
width: 100%; }
.feature .col p {
text-align: left; }
.feature .col ul {
text-align: left; }
.feature .col ol {
text-align: left; } }