/* -------------------------------------------------------------------- Copyright (c) Demosphere International Inc. No permission is granted for any purpose without prior written consent from Demosphere International Inc. -----------------------------------------------------------------------*/ /* ------------ FONTS ------------------------ */ @import 'https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:700'; /* ------------ BOOTSTRAP FIXES -------------- */ body .dii-action-icon, body .dii-action-icon-text, body .dii-action-text, body .dii-function-icon, body .dii-function-icon-text, body .dii-function-icon-text-big, body .dii-function-text, body .dii-function-text-big { height: initial; box-sizing: initial; } body .dii-action-icon-text div { top: 0; } #dii-navbar-load { line-height: 1.1; } #dii-navbar-load .btn { font-size: 12px; } #navbar-user-email { position: relative; top: -4px; left: 8px; padding: 0; } #navbar-product { width: 972px; height: 29px; padding: 0; } #navbar-product-name { top: 1px; left: 3px; } #navbar-product-content { margin: 0; } #dii-navbar .btn.btn-notifications { top: -6px; right: 3px; padding: 4px 10px; } a.navbar-tab span.dii-lib-icon { height: auto; padding: 2px 2px 2px 28px; line-height: 12px; } #dii-navbar-load *, body .dii-main-title, body .dii-main-title-icon, body .dii-container *, body .ui-dialog, body .ui-dialog *, body .dii-ss-rb-container, body .dii-ss-rb-container *, #dii-orphans-container * { box-sizing: initial; } body .dii-dialog-title-icon { width: 48px; height: 48px; padding: 0; } body .container { width: 100%; } body a:hover, body a:focus { text-decoration: none; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-bottom: 0; margin-top: 0; font-family: inherit; font-weight: inherit; font-size: inherit; } label { font-weight: initial; } input[type='checkbox'], input[type='radio'] { margin: initial; } .caret { border: 0 none; } /* ------------ GENERAL STYLING -------------- */ body { background: #e0e0e0; } html body * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *::-moz-selection { background-color: #282828; color: #fff; } /* must remain single line for cross-browser support */ *::selection { background-color: #282828; color: #fff; } /* must remain single line for cross-browser support */ *:focus { outline: none; } /* ------------ STRUCTURE -------------------- */ /* Shared */ #design-header-content, #design-container-main-nav, #design-content-wrapper, #design-container-bottom, #design-footer-wrapper { width: 1170px; margin: 0 auto; } #design-header, #design-footer { z-index: 3; } /* Header */ #design-header { position: relative; background-color: #121212; background-image: url('../images/header-bg1.png'); background-repeat: repeat-x; } #design-header.design-nav-fixed { margin-bottom: 44px; } #design-header-wrapper { background: url('../images/header-bg2.png') center top no-repeat; } #design-header-content { position: relative; height: 179px; } #design-header-logo { position: absolute; z-index: 2; top: 2px; left: 18px; } #design-header.design-nav-fixed #design-header-logo { top: -15px; } #design-header-title { position: absolute; z-index: 1; top: 20px; left: 171px; } #design-header-tryout { position: absolute; z-index: 1; top: 6px; right: 2px; } #design-header-bfr { position: absolute; z-index: 1; top: 134px; right: 11px; width: 235px; height: 40px; background-image: url('../images/header-bfr.png'); background-repeat: no-repeat; background-size: 100% auto; } /* Top Nav (within Header) */ #design-header-logo, #design-nav-logo, #design-container-main-nav { transition: all 0.35s ease; -webkit-transition: all 0.35s ease; } #design-main-nav { z-index: 2; position: relative; text-align: center; background-color: #4c0a0a; -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35); -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35); box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.35); } #design-nav-logo { position: absolute; top: 0; left: 20px; } #design-main-nav.design-nav-fixed { z-index: 99; position: fixed; top: 0; width: 100%; } #design-main-nav.design-nav-fixed.admin { top: 69px; } #design-main-nav.design-nav-fixed #design-container-main-nav { width: 100%; } #design-main-nav a { color: #fff; } #design-main-nav .dii-content-nav-menu::before { content: ''; position: absolute; top: 0; left: -78px; height: 44px; width: 78px; background-image: url('../images/nav-before.png'); } #design-main-nav .dii-content-nav-menu, #design-main-nav #ww-btn-main-nav { background-image: url('../images/nav-bg.png'); } #design-main-nav .dii-content-nav-menu::after { content: ''; position: absolute; top: 0; right: -79px; height: 44px; width: 79px; background-image: url('../images/nav-after.png'); } #design-main-nav .dii-content-nav-menu > ul { display: inline-block; margin: 0 auto; text-align: left !important; } #design-main-nav .dii-content-nav-menu > ul > li:before { content: ''; position: absolute; width: 100%; height: 0; bottom: 0; left: 0; background-color: #c6191a; border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.35); } #design-main-nav .dii-content-nav-menu > ul > li:hover:before { height: 90%; } #design-main-nav .dii-content-nav-menu > ul > li { margin: 0 5px; } #design-main-nav .dii-content-nav-menu > ul > li > .dii-sub-menu-link { padding: 0 10px; line-height: 44px; font-family: 'acumin-pro-extra-condensed',sans-serif; font-size: 25px; font-weight: 700; } #design-main-nav .dii-content-nav-menu .dii-sub-menu-icon::before { top: 8px !important; } #design-main-nav ul ul { opacity: 0; transition: opacity 0.4s; background-color: #1d1d1d; -webkit-box-shadow: 0 2px 5px -1px rgba(0,0,0,0.75); -moz-box-shadow: 0 2px 5px -1px rgba(0,0,0,0.75); box-shadow: 0 2px 5px -1px rgba(0,0,0,0.75); } #design-main-nav ul:hover > li > ul { opacity: 1; } #design-main-nav .dii-content-nav-menu ul ul > li:before { content: ''; position: absolute; width: 0; height: 100%; top: 0; left: 0; background-color: #c6191a; } #design-main-nav .dii-content-nav-menu ul ul > li:hover:before { width: 100%; } #design-main-nav .dii-content-nav-menu li:before, #design-main-nav .dii-content-nav-menu li { transition: all 0.3s; } #design-main-nav #ww-btn-main-nav { height: 44px; box-sizing: border-box; border: 0; padding: 10px; line-height: 12px; font-size: 14px; color: #fff; } #design-main-nav #ww-btn-main-nav .caret { right: 25px; } /* Main */ /*#design-content { -webkit-box-shadow: inset 0px 250px 200px -50px rgba(0,0,0,0.45); -moz-box-shadow: inset 0px 250px 200px -50px rgba(0,0,0,0.45); box-shadow: inset 0px 250px 200px -50px rgba(0,0,0,0.45); }*/ #design-content-wrapper, #design-container-bottom { position: relative; z-index: 1; background: #fff; -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.4); -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.4); box-shadow: 0 0 10px 0 rgba(0,0,0,0.4); } #design-content-wrapper { padding: 20px 0; } #design-content-wrapper.design-home { padding: 10px 0 20px; } #design-content-wrapper .design-white { min-height: 20px; background-color: #fff; padding: 10px; -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.4); -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.4); box-shadow: 0 0 10px 0 rgba(0,0,0,0.4); } #design-content-wrapper.design-home .design-white { margin-bottom: 20px; padding: 0; } #design-row-max-600 > div > div { max-height: 600px; overflow: auto; } #design-row-max-560 > div > div { max-height: 560px; overflow: auto; } #design-social-nav ul { margin: 0; padding: 0; border: 0; background: url('../images/section-header.png') no-repeat right bottom #121212; } #design-social-nav li { list-style: none; display: inline-block; color: #e32526; } #design-social-nav #design-social-title { float: left; padding: 0 35px 0px 15px; line-height: 41px; font-size: 18px; font-weight: 700; } #design-social-nav .fa { padding: 0 10px; line-height: 41px; font-size: 30px; cursor: pointer; } #design-social-nav .fa.active { background: rgba(227,37,37,1); background: -moz-linear-gradient(top, rgba(227,37,37,1) 0%, rgba(198,25,26,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(227,37,37,1)), color-stop(100%, rgba(198,25,26,1))); background: -webkit-linear-gradient(top, rgba(227,37,37,1) 0%, rgba(198,25,26,1) 100%); background: -o-linear-gradient(top, rgba(227,37,37,1) 0%, rgba(198,25,26,1) 100%); background: -ms-linear-gradient(top, rgba(227,37,37,1) 0%, rgba(198,25,26,1) 100%); background: linear-gradient(to bottom, rgba(227,37,37,1) 0%, rgba(198,25,26,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e32525', endColorstr='#c6191a', GradientType=0 ); color: #fff; cursor: auto; } #design-social-nav > div { background-color: #c6191a; padding: 5px; } #design-social-nav .dii-container { border: 1px solid #9a0404; background-color: #fff; } #design-container-6 { background-color: #121212; color: #fff; } #design-container-bottom { margin-top: 20px; margin-bottom: 20px; background-image: none; padding: 20px; } #design-container-bottom .dii-content-list { text-align: center; } /* Footer */ #design-footer { position: relative; min-height: 85px; background: url('../images/nav-bg.png') center center / 100% 100%; color: #fff; -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.75); -moz-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.75); box-shadow: 0 3px 10px 0 rgba(0,0,0,0.75); } #design-footer .col-sm-6 { padding: 20px 10px; } #design-footer .copyright, #design-footer .copyright a { line-height: 20px; font-family: 'Open Sans', sans-serif; font-size: 14px; color: #fff; } #design-footer-dii { text-align: right; } /* ------------ CONTENT ITEMS ---------------- */ /* General */ #design-content-wrapper .dii-content { margin: 0; padding: 0; background-color: transparent; } /*.dii-content * { font-family: 'Open Sans', sans-serif; font-size: 12px; }*/ .dii-content a { color: #e32525; } .dii-content a:hover { color: #c6191a; } .dii-content .fa { font-family: 'FontAwesome'; font-size: inherit; } /* Shared */ #design-content-wrapper .dii-content-title a:hover, #design-content-wrapper .dii-content-linkview:hover > a, #design-content-wrapper .dii-calendar-upcoming-events h3 a, #design-content-wrapper .dii-content-nav-menu.theme-none li:hover > a, #design-content-wrapper .dii-content-rotator .dii-rotator-nav i:hover:not(.fa-circle) { color: #c6191a; } #design-content-wrapper .dii-content-nav-menu ul li .dii-sub-menu-link::before, #design-content-wrapper .dii-content-calendar .dii-content-title:after, #design-content-wrapper .dii-content-header:after, #design-content-wrapper .dii-content-rotator .group-nav:hover, #design-content-wrapper .dii-content-rotator article h2 a:hover, #design-content-wrapper .dii-content-rotator article div a:hover { background-color: #c6191a; color: #fff; } #design-content-wrapper .dii-content-linkview > a, #design-content-wrapper .dii-content-nav-menu.theme-none .dii-sub-menu-link, #design-content-wrapper .dii-calendar-upcoming-events h3 a { display: block; transition: all 0.25s ease; -webkit-transition: all 0.25s ease; border-style: solid; border-width: 0 0 1px; border-color: rgba(0,0,0,0.1); padding: 10px 26px 10px 12px; line-height: 16px; font-size: 12px; font-weight: normal; } #design-content-wrapper .dii-content-linkview > a:hover, #design-content-wrapper .dii-content-nav-menu.theme-none > ul > li:hover > .dii-sub-menu-link, #design-content-wrapper .dii-calendar-upcoming-events h3 a:hover { background-color: rgba(0,0,0,0.05); padding: 10px 22px 10px 16px; } #design-container-1 .dii-content-linkview > a, #design-container-1 .dii-content-nav-menu.theme-none .dii-sub-menu-link, #design-container-1 .dii-calendar-upcoming-events li { border: 0; background: rgba(227,37,37,1); background: -moz-linear-gradient(top, rgba(227,37,37,1) 0%, rgba(189,20,20,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(227,37,37,1)), color-stop(100%, rgba(189,20,20,1))); background: -webkit-linear-gradient(top, rgba(227,37,37,1) 0%, rgba(189,20,20,1) 100%); background: -o-linear-gradient(top, rgba(227,37,37,1) 0%, rgba(189,20,20,1) 100%); background: -ms-linear-gradient(top, rgba(227,37,37,1) 0%, rgba(189,20,20,1) 100%); background: linear-gradient(to bottom, rgba(227,37,37,1) 0%, rgba(189,20,20,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e32525', endColorstr='#bd1414', GradientType=0 ); } #design-container-1 .dii-calendar-upcoming-events h4 { font-weight: 700; } #design-container-1 .dii-content-linkview > a, #design-container-1 .dii-content-nav-menu.theme-none .dii-sub-menu-link, #design-container-1 .dii-calendar-upcoming-events h3 a { border-color: #9a0404; font-weight: 700; color: #fff; } #design-container-1 .dii-content-linkview > a:hover, #design-container-1 .dii-content-nav-menu.theme-none > ul > li:hover > .dii-sub-menu-link, #design-container-1 .dii-calendar-upcoming-events h3 a:hover { background-color: transparent; } #design-container-6 .dii-content-linkview > span { display: block; border-color: #303030; background: rgba(44,44,44,1); background: -moz-linear-gradient(top, rgba(44,44,44,1) 0%, rgba(16,16,16,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(44,44,44,1)), color-stop(100%, rgba(16,16,16,1))); background: -webkit-linear-gradient(top, rgba(44,44,44,1) 0%, rgba(16,16,16,1) 100%); background: -o-linear-gradient(top, rgba(44,44,44,1) 0%, rgba(16,16,16,1) 100%); background: -ms-linear-gradient(top, rgba(44,44,44,1) 0%, rgba(16,16,16,1) 100%); background: linear-gradient(to bottom, rgba(44,44,44,1) 0%, rgba(16,16,16,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#101010', GradientType=0 ); padding: 11px 15px; line-height: 12px; font-size: 12px; font-weight: 700; color: #fff; } /* Header */ #design-content-wrapper .dii-content-header h2 { background: url('../images/section-header.png') no-repeat right bottom #121212; padding: 0 15px; line-height: 41px; font-size: 18px; font-weight: 700; color: #e32526; } #design-container-bottom .dii-content-header { text-align: left; margin-bottom: 15px; } #design-container-bottom .dii-content-header h2::before { top: initial; bottom: 0; height: 3px; } #design-container-bottom .dii-content-header h2 { display: inline-block; margin-left: 15px; -webkit-box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.25); box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.25); background-color: transparent; padding: 0 5px 5px; font-size: 22px; color: #605c56; } #design-container-bottom .dii-content-header h2::after { top: initial; right: initial; bottom: 0; left: 0; width: 100%; height: 3px; } /* Rotator */ #design-content-wrapper .dii-content-rotator article .article-more::before { content: 'Continue'; margin-right: 6px; } #design-content-wrapper .dii-content-rotator article .article-more::after { content: '\f0a9'; font-family: 'FontAwesome'; } /* Menu */ #design-content-wrapper .dii-content-nav-menu.theme-none li { padding: 0; } #design-content-wrapper .dii-content-nav-menu.theme-none ul ul { border-top: 1px solid #d6d6d6; background-color: #eee; } #design-content-wrapper .dii-content-nav-menu.theme-none ul ul li { background-color: rgba(0,0,0,0.03); } #design-content-wrapper .dii-content-nav-menu.theme-none.vertical li:hover > ul { top: -1px; } /* Calendar */ #design-content-wrapper .dii-calendar-upcoming-events li { margin: 0; padding: 0; } #design-content-wrapper .dii-calendar-upcoming-events li h4 { padding: 8px 8px 4px; color: #350505; } #design-content-wrapper .dii-calendar-upcoming-events h3 { padding: 0; } /* Image */ .dii-content-image .dii-content-title-photo { border: 0; } #design-container-bottom .dii-content-image { display: inline-block; margin: 0 30px 15px 0; } #design-container-bottom .dii-content-image .dii-content-title-photo { width: 180px; max-height: 180px; border: 0 none; padding: 0; } #design-container-bottom .dii-content-image img { width: auto; height: auto; } /* ------------ MEDIA QUERIES ---------------- */ @media only screen and (max-width: 1200px) { #design-header-content, #design-container-main-nav, #design-content-wrapper, #design-container-bottom, #design-footer-wrapper { width: 100%; } #design-main-nav .dii-content-nav-menu::before, #design-main-nav .dii-content-nav-menu::after { display: none; } #design-footer .copyright, #design-footer .copyright a { font-size: 12px; } } @media only screen and (max-width: 1060px) { #design-header-logo { height: 185px; top: 15px; } #design-header-title { top: 35px; left: 115px; height: 140px; } #design-header-tryout { top: 20px; right: 20px; height: 85px; } #design-header-bfr { width: 275px; right: 25px; top: 145px; } } @media only screen and (max-width: 900px) { #design-header.design-nav-fixed { margin-bottom: 0; } #design-header-content { overflow: hidden; } #design-header-logo { height: 165px; } #design-header-title { left: 95px; height: 130px; } #design-header-bfr { width: 150px; height: 50px; right: 25px; top: 115px; background-image: url('../images/header-bfr2.png'); } #design-main-nav.design-nav-fixed { position: relative; } #design-container-main-nav { overflow: initial; } #design-header nav.design-nav-fixed { position: relative; } #design-main-nav { height: auto; } #design-main-nav .dii-content-nav-menu > ul { width: 100%; background-color: #1d1d1d; } #design-main-nav .dii-content-nav-menu ul ul li { background-color: rgba(0, 0, 0, 0.3); } #design-main-nav .dii-content-nav-menu .show, #design-main-nav .dii-content-nav-menu:not(.dii-is-mobile) ul li:hover > ul { top: 44px; } #design-main-nav .dii-content-nav-menu ul ul li > ul.show, #design-main-nav .dii-content-nav-menu:not(.dii-is-mobile) ul ul li:hover > ul { top: 32px; } #design-main-nav .dii-content-nav-menu ul li { display: block; } #design-footer .copyright-hide { display: none; } } @media only screen and (max-width: 768px) { #design-header-wrapper { background-position: 110% top; } #design-header-content { height: 155px; } #design-header-logo { height: 135px; } #design-header-title { left: 95px; height: 110px; } #design-header-tryout { height: 65px; } #design-header-bfr { top: 95px; right: 25px; background-image: url('../images/header-bfr2.png'); } #design-row-max-600 > div > div, #design-row-max-560 > div > div { max-height: initial; overflow: initial; } #design-footer .col-sm-6 { padding: 10px; } #design-footer .copyright, #design-footer-dii { text-align: center; } } @media only screen and (max-width: 650px) { #design-header-content { height: 115px; } #design-header-logo { top: 0; height: 115px; } #design-header-title { top: 10px; left: 75px; height: 95px; } #design-header-tryout { top: 5px; right: 10px; } #design-header-bfr { top: 75px; right: 20px; width: 110px; } } @media only screen and (max-width: 550px) { #design-header-logo { top: 5px; left: 8px; height: 95px; } #design-header-title { top: 15px; left: 55px; height: 75px; } #design-header-tryout { height: 55px; } #design-header-bfr { width: 100px; } } @media only screen and (max-width: 450px) { #design-header-content { height: 175px; } #design-header-logo { left: 6%; } #design-header-title { left: 20%; } #design-header-tryout { height: 75px; top: initial; right: initial; bottom: 0; left: 5%; } #design-header-bfr { top: initial; right: 5%; bottom: 6px; width: 135px; } }