/*! * Start Bootstrap - Landing Page Bootstrap Theme (http://startbootstrap.com) * Code licensed under the Apache License v2.0. * For details, see http://www.apache.org/licenses/LICENSE-2.0. */ body, html { width: 100%; height: 100%; } body, h1, h2, h3, h4, h5, h6 { font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400; } h2 { color: #284d68; font-size: 34; font-weight: 300; margin-bottom: 25px; } h5 { color: #da3d27; margin-bottom: 0; } .lead { font-size: 18px; font-weight: 400; } /*Header Navigation*/ .brand-wrapper { margin: 10px 0; padding-right: 20px; float: left; border-right: 1px solid #eee; min-width: 135px; } @media (max-width: 767px) { .brand-wrapper { border-right: none; } } a.navbar-brand { background: url('../images/openstack-logo-full.png') left no-repeat; height: 35px; width: 135px; } @media (min-width: 768px) and (max-width: 1025px) { .brand-wrapper { width: 75px; min-width: 75px; margin-top: 0; } a.navbar-brand { background: url('../images/openstack-logo-vert.png') left no-repeat; margin-left: 0px !important; height: 54px; width: 59px; } } @media (max-width: 767px) { a.navbar-brand { margin-left: 15px; } } .navbar-default { border: none; border-radius: 0px; background: #fff; margin-bottom: 0; padding: 20px 0; } .navbar-default .container { background-color: white; } @media (min-width: 768px) and (max-width: 1200px) { .navbar-default .container { width: 100%; } } ul.navbar-main { display: none; float: right; } @media (min-width: 768px) and (max-width: 1097px) { ul.navbar-main { display: block; } } @media (max-width:767px) { ul.navbar-main { display: block; margin-right: 30px; width: 90%; } } .navbar-default ul.navbar-main>li>a { color: #8a959e; font-size: 12px; font-weight: 400; text-transform: uppercase; } @media (min-width: 768px) and (max-width: 1025px) { ul.navbar-main { margin-top: 1px; } .navbar-default ul.navbar-main>li>a { font-size: 11px; padding: 15px 8px; } } .navbar-default ul.navbar-main>li>a.sign-in-btn { background: #2e729a; padding: 7px 25px; border-radius: 2px; color: #fff; margin-top: 7px; } .navbar-default ul.navbar-main>li>a.sign-in-btn:hover { background: #286A9D; color: #fff; } @media (max-width: 1025px) { .navbar-default ul.navbar-main>li>a.sign-in-btn { padding: 5px 10px; margin-top: 9px; } } @media (max-width: 767px) { .navbar-default ul.navbar-main>li>a.sign-in-btn { margin: 0; padding: 10px 15px; background: transparent; border: none; color: #2e729a; font-size: 12px; font-weight: 700; text-transform: uppercase; } .navbar-default ul.navbar-main>li>a.sign-in-btn:hover { background: #fff; color: #286A9D; } } .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { background: #fff; } .navbar-nav>li>.dropdown-menu { margin-top: 10px; padding: 10px 0; min-width: 230px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .navbar-nav>li>.dropdown-menu:after, .navbar-nav>li>.dropdown-menu:before { bottom: 100%; left: 25%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .navbar-nav>li>.dropdown-menu:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 15px; margin-left: -15px; } .navbar-nav>li>.dropdown-menu:before { border-color: rgba(170, 170, 170, 0); border-bottom-color: #aaaaaa; border-width: 16px; margin-left: -16px; } @media (max-width: 767px) { .navbar-nav>li>.dropdown-menu:after, .navbar-nav>li>.dropdown-menu:before { display: none; } .navbar-nav>li>.dropdown-menu:after { display: none; } .navbar-nav>li>.dropdown-menu:before { display: none; } } i.fa-caret-right { margin-left: 8px; } .navbar-nav>li>.dropdown-menu li a{ text-transform: uppercase; padding: 13px 20px; font-size: 12px; color: #8a959e; } .navbar-nav>li>.dropdown-menu li a:hover { color: #333; } .navbar-nav>li>.dropdown-menu li a:focus { outline: none; } @media (max-width: 767px) { .navbar-default ul.navbar-main>li>a i.fa-caret-down { display: none; } } .navbar-default .navbar-toggle { border: none; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: transparent; } .navbar-default .navbar-toggle .icon-bar { background-color: #5A5A5A; height: 3px; border-radius: 3px; } .search-container { position: relative; display: none; float: left; width: 84%; } @media (min-width: 768px) and (max-width: 1200px) { .search-container { width: 80%; } } @media (max-width:767px) { .search-container { display: none; } } .search-icon { display: none; padding: 17px 20px 16px; float: left; text-transform: uppercase; color: #8a959e; font-size: 12px; font-weight: 400; } .search-icon:hover { cursor: pointer; color: #8a959e; } .search-icon i { margin-right: 5px; color: #8a959e; } @media (max-width: 767px) { .search-icon { display: none !important; } } .header-search-form { position: absolute; z-index: 1000; left: 20px; width: 100%; -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: linear; /* Standard syntax */ transition-property: width; transition-duration: 1s; transition-timing-function: linear; } @media (max-width:767px) { .header-search-form { display: none; } } .mobile-search-form { display: none; position: relative; width: 100%; } @media (max-width: 767px) { .mobile-search-form { display: block; } } .header-search { border: 2px solid #dae5ee; border-radius: 4px; height: 35px; margin: 7px 0 0 0; background: #fff; width: 100%; -webkit-transition: width 4s; -moz-transition: width 4s; -ms-transition: width 4s; -o-transition: width 4s; transition: width 4s; } .header-search::-webkit-input-placeholder { color: #8a959e; font-size: 12px; text-transform: lowercase; font-weight: 400; } .header-search:-moz-placeholder { /* Firefox 18- */ color: #8a959e; font-size: 12px; text-transform: lowercase; font-weight: 400; } .header-search::-moz-placeholder { /* Firefox 19+ */ color: #8a959e; font-size: 12px; text-transform: lowercase; font-weight: 400; } .header-search:-ms-input-placeholder { color: #8a959e; font-size: 12px; text-transform: lowercase; font-weight: 400; } .header-search:focus { border-radius: 4px; outline: none; border: 2px solid #3D84B6; } .close-search { position: absolute; top: 17px; right: 0px; color: #dae5ee; z-index: 1001; font-size: 16px } .close-search:hover { color: #3D84B6; cursor: pointer; } @media (max-width:767px) { .close-search { display: none !important; } } .show { display: block; } @media (max-width:767px) { .show { display: none; } } /*End Header Navigation*/ /*Hero*/ .intro-header { padding-top: 0px; padding-bottom: 0; text-align: center; color: #f8f8f8; background: url(/images/hero-bkgd1.jpg) no-repeat center center; background-size: cover; position: relative; } .intro-message { position: relative; padding-top: 110px; padding-bottom: 110px; } @media(max-width:1199px) { .intro-message { padding-bottom: 50px; } } .intro-message > h1 { margin: 0; font-size: 3em; font-weight: 300; text-align: center; font-family: "Open Sans", Helvetica, Arial, sans-serif; width: 100%; } @media(max-width:767px) { .intro-message > h1 { font-size: 3em; } } .intro-divider { width: 400px; border-top: 1px solid #f8f8f8; border-bottom: 1px solid rgba(0,0,0,0.2); } .intro-message > h3 { text-shadow: none; text-align: left; font-weight: 300; font-size: 24px; margin-top: 10px; } .hero-credit { position: absolute; bottom: 30px; right: 30px; color: #fff; opacity: 0.5; } .hero-credit:hover { opacity: 1; } /*Hero Promo, add .featured to .intro-header*/ .intro-header.featured { text-align: center; background: url(/images/summit-promo-bkgd1.jpg) no-repeat center center; min-height: 420px; background-size: cover; position: relative; } .intro-header.featured .intro-message { padding-bottom: 50px; } .promo-btn-wrapper { } a.promo-btn { color: #fff; font-size: 24px; font-weight: 300; background: transparent; border: 2px solid #fff; border-radius: 4px; padding: 20px 35px; margin: 0 auto; text-align: center; min-width: 370px; display: inline-block; } a.promo-btn:hover { text-decoration: none; background: rgba(255, 255, 255, 0.2); } a.promo-btn i.fa-chevron-right { background: transparent; border: 2px solid #fff; border-radius: 100px; padding: 0; font-size: 14px; margin-left: 10px; width: 30px; height: 30px; line-height: 2.1; } p.promo-dates { display: inline-block; margin-top: 10px; font-weight: 400; } /*End Hero*/ /*Overview Section*/ .overview-section { padding: 80px 0; } @media (max-width: 767px) { .overview-section { padding-top: 40px; } } .overview-section h2 { color: #284d68; font-size: 34px; font-weight: 300; margin-bottom: 25px; } .overview-section p { color: #888; font-size: 16px; font-weight: 300px; line-height: 1.4; } .overview-section a { color: #4c97c3; text-decoration: underline; } .btn-wrapper { float: left; width: 100%; text-align: center; } @media (max-width: 980px) { .overview-left { margin-bottom: 50px; } } a.overview-btn { float: left; background: #4c97c3; color: #fff; text-transform: uppercase; border-radius: 4px; padding: 15px 25px; text-decoration: none; margin-top: 5px; margin-bottom: 5px; } a.overview-btn:hover { background: #2e729a; } a.overview-btn.left-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 1px solid #3f81a7; margin-right: 0; } a.overview-btn.right-btn { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid #73b8e1; margin-left: 0; } .release-text { display: block; text-align: left; color: #636568; font-size: 13px; } .overview-section .img-responsive { max-width: 550px; } .overview-right { text-align: center; } .control-cloud-graphic { max-width: 600px; margin: 0 auto 15px; } a.demo-link { font-size: 13px; font-weight: 400; text-decoration: none; color: #34789A; background: #F0F9FE; padding: 10px 25px; border-radius: 4px; } a.demo-link:hover { color: #34789A; background: #CDD9E2; } a.demo-link i { margin-left: 5px; font-size: 14px; } /*When Featured, Add Class .featured to .overview-section*/ .overview-section.featured .overview-right { background: #E8EEF5; border-radius: 4px; text-align: center; padding: 20px; margin-top: 50px; } @media (max-width: 1200px) { .overview-section.featured .overview-right { margin-top: 50px; } } .overview-section.featured .overview-right h3 { color: #3D84B6; text-align: center; } .overview-section.featured .overview-right p { color: #333; font-size: 13px; } .overview-section.featured .overview-right img.promo-graphic { max-width: 350px; margin: 20px auto; } /*End Overview Section*/ /*Customers Section*/ .customers-row { padding: 80px 0; text-align: center; background: #edf2f7; } .customers-row h2 { text-transform: capitalize; margin-bottom: 0; } .customer-logos-wrapper { margin: 15px 0; } .customer-logos { position: relative; padding: 20px 0; } @media (max-width: 767px) { .customer-logos { position: relative; padding: 20px 0; width: 80%; margin: 0 auto; } } .logo-hover { background: #dee2e8; border-radius: 3px; } .logo-hover:after { content: ' '; height: 0; position: absolute; width: 0; border: 10px solid transparent; border-top-color: #dee2e8; top: 100%; left: 50%; margin-left: -10px; } .customers-description { margin: 40px 0; color: #284d68; text-align: center; } .customers-description p { padding: 20px 50px; border-top: 1px solid #dee2e8; border-bottom: 1px solid #dee2e8; display: inline; } @media (max-width: 767px) { .customers-description p { display: block; } } .customers-action { margin-top: 40px; text-align: center; } a.customer-btn { background: #2e729a; color: #fff; text-transform: uppercase; border-radius: 4px; padding: 15px 25px; text-decoration: none; border-style: none; } a.customer-btn:hover { background: #173D5B; color: #fff; } /*When Featured, Add Class .featured to .customers-row*/ .customers-row.featured .customer-logos-wrapper { width: 50%; max-width: 1000px; margin: 40px 25% 0; border-top: 1px solid #DDE3E8; padding-top: 20px; } .customers-row.featured .customer-logos-wrapper hr { color: #333; } .customers-row.featured .customer-logos img { width: 90%; max-width: 100px; } .customers-row.featured .customer-logos:hover { background: none; } .customers-row.featured .customer-logos:hover:after { display: none; } .customers-row.featured .customers-action { margin-top: 0; } .customers-row.featured button.customer-btn { background: none; border-radius: 0; padding: 0; text-decoration: underline; color: #2e729a; text-transform: capitalize; } .featured-description { width: 85%; margin: 40px auto; } @media (max-width: 767px) { iframe { width: 90%; } } /*End Customers Section*/ /*Community Section*/ .community-section { padding: 75px 0; background: url('../images/community-bkgd.jpg') no-repeat center center; background-size: cover; min-height: 350px; } .community-section.featured { background: url('../images/community-bkgd2.jpg') no-repeat center center; background-size: cover; } .community-graphic { max-width: 650px; margin: 0 auto; } @media (max-width: 1200px) { .community-graphic { margin-bottom: 20px; } } .community-section h2 { color: #fff; } .community-section p { color: #fff; } @media (max-width: 1200px) { .community-section h2 { text-align: center; } .community-section p { text-align: center; } } a.community-btn { font-size: 16px; font-weight: 400; background: transparent; border: 1px solid #fff; border-radius: 3px; margin-top: 10px; padding: 8px 30px 8px 40px; color: white; float: left; } a.community-btn i { margin-left: 10px; } a.community-btn:hover { text-decoration: none; background: rgba(255, 255, 255, 0.2); } /*When Featured, add .featured to .community-section*/ .community-section.featured h3 { color: #fff; } @media (max-width: 1200px) { .community-section.featured h3 { text-align: center; } } .designate-logo { max-width: 302px; margin: 50px 0 20px; } @media (max-width: 1200px) { .designate-logo { margin: 50px auto 20px; } } .default-community { background-color: rgba(5, 54, 86, 0.7); border-radius: 4px; padding: 30px; text-align: center; } @media (max-width: 1200px) { .default-community { margin-top: 50px; } } .default-community h2 { margin-top: 0; } .community-graphic.small { max-width: 450px; margin: 20px auto; } a.featured-link { display: block; background: #b9301d; padding: 10px 20px; border-radius: 2px; width: 80%; text-decoration: none; margin: 10px auto 0; color: #fff; font-weight: 600; } a.featured-link:hover { text-decoration: none; background: #831917; } /*End Community Section*/ /*News and Events Section*/ .news-section { padding: 70px 0; } .news-section h2 a { font-size: 14px; color: #559bc4; font-weight: 400; margin-left: 30px; } .news-section h2 a:hover { color: #28709a; text-decoration: none; } .event-ad, .news-ad { width: 100%; max-width: 560px; margin-bottom: 20px; } .news-wrapper { /*float: left;*/ } .news-section .news-wrapper ul { margin: 30px 0; padding-start: 0; -webkit-padding-start: 0; } .news-section .news-wrapper ul li { list-style: none; } .single-event, .eventBlock .event { float: left; width: 100%; padding: 15px 10px; border-bottom: 1px solid #ebeff4; } .single-event:hover, .eventBlock .event:hover { background: #f9f9f9; } .single-event.last, .eventBlock .event.last { border-bottom: none; } .left-event { float: left; width: 20%; } @media (min-width: 768px) and (max-width: 981px) { .left-event { width: 25%; } } @media (max-width: 767px) { .left-event { width: 15%; } } .event-details { float: left; margin-left: 3%; width: 62%; } @media (min-width: 768px) and (max-width: 981px) { .event-details { width: 72%; } } .right-event { float: right; width: 13%; } @media (min-width: 768px) and (max-width: 981px) { .right-event { display: none; } } .date, .news-type, .planet-type { background: #fff; border: 2px solid #b9301d; border-radius: 4px; padding: 5px 15px; color: #b9301d; font-size: 10px; width: 100%; text-align: center; float: left; margin-top: 5px; } .event-name, .news-title { display: block; font-size: 14px; font-weight: 600; color: #333; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .location, .news-date { display: block; float: left; font-style: italic; color: #333; font-weight: 300; } .right-arrow { float: right; background: #d9dfe5; border-radius: 100px; width: 30px; height: 30px; padding: 6px 10px; color: #fff; margin-right: 10px; margin-top: 5px; display: none; } .single-event:hover .right-arrow { display: block; } .news-type { border: 2px solid #2a4d67; color: #2a4d67; } .planet-type { border: 2px solid #74c99f; color: #74c99f; } .see-more-bottom { width: 100%; float: left; text-align: center; margin-top: 40px; } .see-more-bottom a { color: #2e729a; text-decoration: none; padding: 5px 15px; border-radius: 4px; background: ; font-size: 12px; font-weight: 400; border: 2px solid #2e729a; } .see-more-bottom a i { margin-left: 10px; font-size: 11px; } /*End News and Events Section*/ /*Photo Row*/ .photo-row-wrapper { width: 100%; color: #eee; max-height: 240px; margin: 80px 0 10px; overflow: hidden; } @media (max-width: 765px) { .photo-row-wrapper { display: none; } } .photo-container { width: 4000px; max-height: 240px; margin-left: -30px; } .photo-container img { margin: 0 10px 0 0; max-width: 22%; max-height: 240px; } /*End Photo Row*/ /*Footer*/ footer { background: #333333; padding: 70px 0; } .footer-links h3 { color: #fff; font-size: 14px; font-weight: 400; } .footer-links ul { margin-left: 0; padding-start: 0; -webkit-padding-start: 0; } .footer-links ul li a { color: #aaa; font-size: 12px; font-weight: 400; list-style: none; margin-left: 0; } .social-icons { width: 40px; min-height: 40px; display: inline-block; margin-right: 10px; } .footer-twitter { background: url('../images/footer-twitter.png') no-repeat; } .footer-twitter:hover { background: url('../images/footer-twitter-hover.png') no-repeat; } .footer-facebook { background: url('../images/footer-facebook.png') no-repeat; } .footer-facebook:hover { background: url('../images/footer-facebook-hover.png') no-repeat; } .footer-linkedin { background: url('../images/footer-linkedin.png') no-repeat; } .footer-linkedin:hover { background: url('../images/footer-linkedin-hover.png') no-repeat; } .footer-youtube { background: url('../images/footer-youtube.png') no-repeat; } .footer-youtube:hover { background: url('../images/footer-youtube-hover.png') no-repeat; } .newsletter-form { margin: 10px 0 30px; width: 100%; } .newsletter-form label { color: #aaa; font-size: 12px; font-weight: 300; display: block; } .newsletter-input { display: inline-block; background: transparent; border: 2px solid #888; border-radius: 4px; color: #888; font-size: 12px; font-weight: 400; padding: 10px 15px; width: 70%; } @media (max-width: 767px) { .newsletter-input { width: 70%; } } .newsletter-input::-webkit-input-placeholder { color: #888; font-size: 12px; font-weight: 400; text-transform: uppercase; } .newsletter-input:-moz-placeholder { /* Firefox 18- */ color: #888; font-size: 12px; font-weight: 400; text-transform: uppercase; } .newsletter-input::-moz-placeholder { /* Firefox 19+ */ color: #888; font-size: 12px; font-weight: 400; text-transform: uppercase; } .newsletter-input:-ms-input-placeholder { color: #888; font-size: 12px; font-weight: 400; text-transform: uppercase; } .newsletter-input:focus { outline: none; border: 2px solid #666; } .newsletter-btn { margin-left: 1%; display: inline-block; background: transparent; border: 2px solid #4c97c3; border-radius: 4px; color: #4c97c3; font-size: 12px; font-weight: 400; padding: 10px 15px; text-transform: uppercase; width: 27%; } @media (max-width: 767px) { .newsletter-btn { width: 18%; margin-left: 2%; padding: 10px; } } .newsletter-btn:hover { border: 2px solid #888; color: #999; } .fine-print { margin-top: 20px; color: #aaa; font-size: 12px; } .fine-print a { color: #aaa; text-decoration: underline; } .fine-print a:hover { color: #fff; } .footer-bottom { background: #222; padding: 15px 0; text-align: center; width: 100%; } .feedback-input { display: inline-block; background: #222; border: 2px solid #444; border-radius: 4px; color: #777; font-size: 12px; font-weight: 400; padding: 10px 20px; width: 310px; } @media (max-width: 767px) { .feedback-input { width: 70%; } } .feedback-input::-webkit-input-placeholder { color: #555; font-size: 12px; font-weight: 400; } .feedback-input:-moz-placeholder { /* Firefox 18- */ color: #555; font-size: 12px; font-weight: 400; } .feedback-input::-moz-placeholder { /* Firefox 19+ */ color: #555; font-size: 12px; font-weight: 400; } .feedback-input:-ms-input-placeholder { color: #555; font-size: 12px; font-weight: 400; } .feedback-input:focus { outline: none; border: 2px solid #666; } .feedback-btn { margin-left: 11px; display: inline-block; background: #222; border: 2px solid #666; border-radius: 4px; color: #777; font-size: 12px; font-weight: 400; padding: 10px 30px; } @media (max-width: 767px) { .feedback-btn { width: 18%; margin-left: 2%; padding: 10px; } } .feedback-btn:hover { border: 2px solid #888; color: #999; } /*End Footer*/ /*General Inner Page Styles*/ .navbar-default.inner { border-bottom: 1px solid #ddd; } /*End General Inner Page Styles*/ /*Events Page*/ .eventsBanner { height: 150px; padding: 20px } .eventsPhotoCaption { background: rgba(0,0,0,0.3); border-radius: 4px; padding: 10px; color: white; } .news-section.full { padding: 20px 0; } .eventTitleArea { text-align: center; margin: 40px 0; } .eventTitleArea h1 { color: #333; font-weight: 300; } .postEvent { float: left; width: 100%; height: 130px; padding: 30px 5%; background: #F4F5F8; margin: 20px 0 10px; text-align: center; } .postEvent p { margin-bottom: 20px; } .postEvent a { background: #2e729a; padding: 10px 25px; border-radius: 4px; color: #fff; } .eventBlock { float: left; width: 100%; } .eventBlock.summit .date { border-color: #255E88; color: #255E88 ; } .eventBlock.past h2 { margin-top: 50px; } .eventBlock.past .date { border-color: #555; color: #555; } .eventButton a { } /*End Events Page*/ /*Community Page*/ .communityBoxes { margin: 30px 0 10px; font-size: 13px; } .communityBoxes h2 { font-size: 20px; font-weight: 400; margin-bottom: 15px; } .communityBoxes h2 a { color: #CD281E; } .developersRow { border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 20px 30px; margin-bottom: 30px; } .devLabel { float: left; margin-right: 30px; font-weight: 700; } ul#developerActivity { float: left; padding-left: 0; margin: 0; } ul#developerActivity li { list-style: none; display: inline-block; } ul#developerActivity li a { font-weight: 700; color: #222; } ul#developerActivity li span { background: #E8EEF5; padding: 5px 10px; border-radius: 4px; margin-right: 5px; color: #255E88; font-size: 11px; font-weight: 400; } /*End Community Page*/