/* This file will hold styles for the mobile version of your website (mobile first). */ /* This also can include ANY global CSS that applies site-wide. Unless overwritten by a more specific style rule, CSS declarations in global.css will apply site-wide. */ @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500'); body, h1#page-title.title, h2{font-family: 'Montserrat', sans-serif;} .front article, .front .zone-content-wrapper div.item-list, .front div.feed-icon, .front #zone-content .node, .front .zone-content-wrapper nav.node-links { display: none; } h1{ font-size: 26px; } .front .grid-12{ float: none; display: block; text-align: center; margin-left: auto; margin-right: auto; } .front .region-content{ margin-top: -100px; margin-bottom: 20px } .not-front h2 { font-size: 14px; color: #2F4F6B; } .region-content{ margin-bottom: 20px; } #page { transition: margin-left .5s; } .zone-preface-wrapper,.zone-postscript-wrapper{ background-color: #D15050; } .zone-postscript-wrapper{ padding: 50px } .section-header{ background-color: #2F4F6B; } .section-footer{ background-color: #2F4F6B; } .region-agency-home-3col{ background-color: #fff; } .zone-footer-wrapper{ background-color: #2F4F6B; color: #fff; } .zone-content-wrapper, .region-agency-home-lower-first-inner{ margin-top: 50px; } .region-agency-home-rotator{ max-height: 250px; overflow: hidden; } .region-agency-home-main-content, .region-agency-home-main-content a, .zone-footer-wrapper a{ color: #fff; text-decoration: none; } #region-agency-home-main-content, .grid-24.region-agency-home-main-content{ font-size: 18px; margin-top: 40px; text-align: center; margin-left: auto; margin-right: auto; width: 60%; border: 5px solid #fff; display: block; clear: both; background-color: #D15050; color: #fff; padding: 50px; box-shadow: 0px 0px 15px #888888; position: relative; top: -150px; } .grid-24.region-agency-home-main-content{ float: none; } .region-agency-home-main-content .views-field-field-image-link-url{ display: none; } .region-agency-home-main-content .views-field-field-image-link-url .field-content{ padding: 10px; } .region-agency-home-main-content .views-field-field-image-link-url .field-content img { background-color: #fff; padding: 5px; } .region-agency-home-main-content .view-display-id-homepage_d .view-content table{ width: 100% } .region-agency-home-main-content .view-display-id-homepage_d .views-field-title, .region-agency-home-main-content .view-display-id-homepage_d .views-field-title-field { display: none; } .region-agency-home-main-content .view-display-id-homepage_d .views-field-body .field-content{ display: inline-block; vertical-align: middle; line-height: normal; } .envelope-logo{ width:275px; margin-left: auto; margin-right: auto; margin-top: -100px; top:-100px; } /* Events Section */ .view-display-id-upcoming_events{ color: #2F506C; font-size: 16px; text-transform: uppercase; } .block-views-features-blocks-upcoming-events h2.block-title{ display: none; } .view-display-id-upcoming_events .view-empty a, .view-display-id-upcoming_events .view-footer a, .view-display-id-homepage_d .views-field-field-external-link-url a{ color: #fff; font-size: 16px; line-height: 50px; padding: 10px; background-color: #2F506C; text-decoration: none; font-weight: 300; text-transform: uppercase; margin: 20px; } .view-display-id-upcoming_events .view-footer a{ clear: both; } .view-display-id-upcoming_events .view-footer a img, .view-display-id-homepage_d .views-field-field-external-link-url a img{ display: none; } .view-display-id-upcoming_events .views-field-field-date-time-rep { float: left; min-width: 175px; /* border-right:1px solid #2F506C; */ clear: right; min-height: 50px; } .view-display-id-upcoming_events .views-field-title{ min-height: 50px; /* border-left:1px solid #2F506C; */ } .view-display-id-upcoming_events .views-row{ border-bottom:1px solid #2F506C; } .view-display-id-upcoming_events { text-align: center; width: 75%; margin-left: auto; margin-right: auto; } .view-display-id-upcoming_events .view-empty::before{ content: url('/sites/all/themes/dc_agency_statehood/images/calendarIconSmall.png'); display: block; margin: 20px; /* height: 115px; */ } /* Events Section */ .front #zone-postscript, .front #zone-postscript a, .front #zone-postscript a:visited, .front #zone-postscript a:active, .front #zone-postscript a:link { color: #fff; } .bx-controls-direction{ display: none; } .view-display-id-responsive_homepage_banner_full img{ width: 100%; height: 100%; } .zone-footer-wrapper { padding: 20px 0 0 0; } .footer-connected{ float: right; border-left: 1px solid #fff; text-align: center; width: 75px; } .footer-connected .title{ margin-bottom: 10px; display: none; } .footer-connected img{ max-height: 25px; } .footer-links{ line-height: 50px; width: 200px; margin-left: 10px; } .footer-links .link-list { border-left: 1px solid rgb(255, 255, 255); padding-left: 10px; list-style: none; } .footer-logo{ display: none; } .header{ min-height: 55px; color: #fff; } .header-agency-logo{ /* width: 33%; */ float: left; position: absolute; z-index: 100; } .header-agency-logo img{ height: 100px; } .header-icons{ width: 100%; float: left; text-align: right; } .header-icons img{ height: 20px; } .header-search, .header-menu{ float: right; margin: 0 15px; } .header-search{ display: none; } .header-menu{ margin-top: 20px; } .header-title, .site-name-slogan{ display: none; } input.sidenav-search{ border:1px solid #2F4F6E; /* width: 90%; */ padding:20px; font-size: 14px; padding-right: 25px } #block-domain-conf-domain-main-links { padding-top: 50px; /* display: visible; */ position: fixed; right: 0; height: 100%; z-index: 1000; background-color: #E5E5E5; width: 0; text-align: center; overflow-x: hidden; transition: 0.5s; top: 0px; } #block-domain-conf-domain-main-links button{ background:0; } #block-domain-conf-domain-main-links li a, #block-domain-conf-domain-main-links li a:active, #block-domain-conf-domain-main-links li a:link, #block-domain-conf-domain-main-links li a:visited{ color: #2F4F6E; text-decoration: none; } #block-domain-conf-domain-main-links ul li { list-style: none; padding: 20px 5px; border-bottom: 1px solid #2F4F6E; text-align: left; } #block-domain-conf-domain-main-links ul li.last { border-bottom: 0; } #block-domain-conf-domain-main-links ul li.expanded:after { display: inline-block; content:' '; /* margin-right: 15px; */ transform: rotate(-45deg); -webkit-transform: rotate(-45deg); border: solid #2F4F6E; border-width: 0 2px 2px 0; display: inline-block; padding: 5px; float: right; } #block-domain-conf-domain-main-links ul li.expanded .menu-sub{ display: none; } #block-domain-conf-domain-main-links ul.menu-sub{ margin-right: auto; margin-left: auto; width:230px; padding-bottom: 10px; } .closebtn{ position: absolute; top: 0px; right: 0px; font-size: 50px; background-color: #D15050; /* font-weight: bold; */ text-align: center; width: 50px; line-height: 50px; } a.closebtn{ text-decoration: none; color: #fff; font-family: Optima; } .sidenav-search{ /* width: 75%; */ min-height: 35px; margin: 10px 0; text-align: center; } .sitenav-search input{ -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd; -moz-box-shadow: inset 5px 5px 5px 0px #dddddd; box-shadow: inset 2px 2px 2px 0px #dddddd; } .dcSearchButtonIcon{ width: 30px; height: 18px; background: url('/sites/all/themes/dc_agency_statehood/images/Maglass2x_blue.png') no-repeat scroll 0px 0px / 17px 17px transparent; z-index: 20; padding-top: 4px; } .dcSearchButtonContainer{ height: 40px; background-color:transparent; border: 0; padding-top: 5px; margin: 0px 0px -10px -30px; } #block-domain-conf-domain-main-links .footer-connected{ text-align: center; color:#fff; float: none; margin-top:20px; width: auto; border-left: 0 } #block-domain-conf-domain-main-links .footer-connected .title{ display: block; } #block-domain-conf-domain-main-links .footer-connected .icon, .footer-connected .icon{ margin-top: 5px; padding: 10px; display: block; } #block-domain-conf-domain-main-links .footer-connected .icon{ display: inline-block; } .block-menu-block-1{ display: none; } .owl-carousel{ z-index: 0; } .zone-postscript .owl-nav{ display: none; } .slide img, .slide #text{ float: left; } .slide #text{ background-color: rgba(0, 0, 0, .7); color: rgb(255, 255, 255); font-size: 12px; font-weight: bold; margin-top: -80px; float: left; text-align: center; padding: 10px 30px; } .block-views-features-blocks-homepage-a, .block-views-features-blocks-homepage-b, .block-views-features-blocks-homepage-c{ min-height: 200px; padding: 20px; color:#fff; text-align: center; } .block-views-features-blocks-homepage-a ul, .block-views-features-blocks-homepage-b ul, .block-views-features-blocks-homepage-c ul{ padding-left:0; } .block-views-features-blocks-homepage-a ul li, .block-views-features-blocks-homepage-b ul li, .block-views-features-blocks-homepage-c ul li { list-style-position:inside } .block-views-features-blocks-homepage-a h2.views-field-title, .block-views-features-blocks-homepage-b h2.views-field-title, .block-views-features-blocks-homepage-c h2.views-field-title, .block-views-features-blocks-homepage-a h2.views-field-title-field, .block-views-features-blocks-homepage-b h2.views-field-title-field, .block-views-features-blocks-homepage-c h2.views-field-title-field{ color:#fff; font-family: 'Montserrat', sans-serif; font-weight: normal; font-size: 20px; } .block-views-features-blocks-homepage-a h2.views-field-title{ color:#fff; } img.feature-icon{ width: 60px!important; margin-left: auto; margin-right: auto; } .view-id-agency_home_responsive .views-field-body .slide .item-list ul{ list-style-type: none; } #region-agency-home-lower-first .owl-carousel, #region-agency-home-lower-second .owl-carousel { width: 75%!important; } .view-display-id-homepage_b{ text-align: center; } .view-display-id-homepage_b table.views-view-grid{ width:100%; } .image-list{ margin-left: auto; margin-right: auto; width: 100%; } .custom-title { color: #006295; font-family: 'Montserrat'; border-bottom: 1px solid #006295; font-size: 20px; } .feature-image{ display: block; width: 100%; border-bottom:1px solid #006295; padding: 20px 0; } .owl-theme .owl-dots .owl-dot.active span{ background: #fff; } .owl-theme .owl-dots .owl-dot span{ background: 0; border: 1px solid #fff; } .region-agency-home-rotator-inner .owl-carousel .owl-item img{ height: 100%; } .view-newsroom .views-field-field-date, .view-resources .views-field-field-date, .view-events-landing .views-field-field-date-time-rep { float: left; min-width: 150px; /* min-height: 45px; */ clear:right; background-color:#D15050; color:#fff; font-weight: bold; margin-right:20px; padding:10px; } .view-newsroom .views-field-field-date, .view-resources .views-field-field-date{ min-width: 100px; } .view-newsroom .views-field-title, .view-resources .views-field-title-1, .view-events-landing .views-field-title { min-height: 50px; } .view-newsroom .views-row, .view-resources .views-row,.view-events-landing .views-row,.view-services .views-row, .view-id-biographies .views-row { margin-bottom: 20px; border-bottom: 1px solid #CCC; padding-bottom: 5px; clear: both; } .view-services .views-row, .view-id-biographies .views-row { min-height: 100px; } .view-newsroom .views-row, .view-resources .views-row, .view-events-landing .views-row{ min-height: 60px; } .view-resources .views-field-body, .view-resources .views-field-field-attachment{ display:none; } .view-services .views-field-field-image{ display: none; } .view-id-services img, .view-id-biographies img { /*border: 1px solid #ccc; */ /*padding: 5px; margin: 5px;*/ } #edit-sort-by, #edit-sort-order{ height: 50px; min-width: 75px; margin-top: 5px; } #edit-field-release-type-tid{ height: 50px; min-width: 175px; margin-top: 5px; } #edit-field-date-value-max-datepicker-popup-1,#edit-field-date-value-min-datepicker-popup-1,#edit-keys,#edit-before-value-datepicker-popup-0,#edit-after-value-datepicker-popup-0{ height: 30px; min-width: 175px; } .filterButton{ position: absolute; top: -24px; right: 12px; text-align: center; display: block; border: 1px solid #CCC; border-radius: 5px; background-color: #fff; width: 70px; line-height: 50px; } .front .filterButton{ display:none!important; } .form-item-field-date-value-min-date input, .form-item-field-date-value-max-date input, .form-item-after-value-date input, .form-item-before-value-date input, .form-item-field-date-time-rep-value-value-date input, .form-item-field-date-time-rep-value2-value-date input{ background-image: url(/sites/all/themes/dc_agency_omega/images/CalendarThumb.png); background-repeat: no-repeat; background-position: 95% 50%; } #mobile-filter #views-exposed-form-newsroom-page-8, #mobile-filter #block-views-exp-newsroom-v2-page-8, #mobile-filter #views-exposed-form-resources-page, #mobile-filter #views-exposed-form-resources-page-1, #mobile-filter #views-exposed-form-events-landing-page, #mobile-filter #views-exposed-form-services-page { /* background-color:rgb(248, 248, 248); */ /*background-color: rgba(245, 245, 220, 1);*//*Tan Color*/ background-color: #EBECEE;/*Gray Color*/ padding: 18px; width:240px; } #mobile-filter.views-exposed-widget{ float: none; } #mobile-filter .views-submit-button{ clear: left; } #mobile-filter{ display: visible; position: absolute; top: 20px; right: 5px; border: 1px solid #ccc; -moz-box-shadow: 2px 2px 5px 1px #fff; z-index: 20; } .form-item-sort-by, .foxrm-item-sort-order { width:75px; } .views-widget-sort-by, .views-widget-sort-order{ float: left; } .views-exposed-form .views-exposed-widget { float: left } #mobile-filter .views-widget-sort-by{ margin-right: 22px; } select.form-select, #edit-keys, #edit-field-date-value-min-datepicker-popup-0, #edit-field-date-value-max-datepicker-popup-0, #edit-field-date-value-min-datepicker-popup-1, #edit-field-date-value-max-datepicker-popup-1,#edit-before-value-datepicker-popup-0,#edit-after-value-datepicker-popup-0,#edit-field-date-time-rep-value-value-datepicker-popup-0, #edit-field-date-time-rep-value2-value-datepicker-popup-0,#edit-tid { border: 1px solid #ccc; padding: 4px; height: 40px; min-width: 200px; } select, #edit-keys, #edit-field-date-value-min-datepicker-popup-0, #edit-field-date-value-max-datepicker-popup-0, #edit-field-date-value-min-datepicker-popup-1, #edit-field-date-value-max-datepicker-popup-1,#edit-before-value-datepicker-popup-0,#edit-after-value-datepicker-popup-0,#edit-field-date-time-rep-value-value-datepicker-popup-0, #edit-field-date-time-rep-value2-value-datepicker-popup-0,#edit-tid { border-radius: 3px; } #edit-tid, #edit-field-topic-tid{ max-width: 200px; } /*.form-control, input[type="text"], input[type="submit"], input[type="email"]{ display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); }*/ /*#edit-field-date-value-max-datepicker-popup-1, #edit-field-date-value-min-datepicker-popup-1, #edit-keys{ padding: 4px; }*/ .region-sidebar-first .views-field.views-field-field-image { padding: 15px; width: 206px; float: left; margin-right: 20px; } .view-agency-information-details { padding: 6px 6px 6px 12px; /* width: 100%; *//* float: left; */ margin: 0 20px; /* font-family: roboto-regular; */} /* Docs at http://http://simpleweatherjs.com Look inspired by http://www.degreees.com/ Used for demo purposes. Weather icon font from http://fonts.artill.de/collection/artill-weather-icons DO NOT hotlink the assets/font included in this demo. If you wish to use the same font icon then download it to your local assets at the link above. If you use the links below odds are at some point they will be removed and your version will break. */ /*body { padding: 45px 0; font: 13px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; background: #1192d3; }*/ #weather { width: 425px; margin: 0px auto; text-align: center; text-transform: uppercase; background: #2F4F6B; } #weather h2 { margin: 0 0 8px; color: #fff; font-size: 150px; font-weight: 300; text-align: center; text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15); } #weather ul { margin: 0; padding: 0; } #weather li { background: #fff; background: rgba(255,255,255,0.90); padding: 20px; display: inline-block; border-radius: 5px; } #weather .currently { margin: 0 20px; } /* Docs at http://http://simpleweatherjs.com Look inspired by http://www.degreees.com/ Used for demo purposes. Weather icon font from http://fonts.artill.de/collection/artill-weather-icons DO NOT hotlink the assets/font included in this demo. If you wish to use the same font icon then download it to your local assets at the link above. If you use the links below odds are at some point they will be removed and your version will break. */ @font-face { font-family: 'weather'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot'); src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg'); font-weight: normal; font-style: normal; } #weather { width: 200px; margin: 0px auto; text-align: center; text-transform: uppercase; } i { color: #fff; font-family: weather; font-size: 150px; font-weight: normal; font-style: normal; line-height: 1.0; text-transform: none; } .icon-0:before { content: ":"; } .icon-1:before { content: "p"; } .icon-2:before { content: "S"; } .icon-3:before { content: "Q"; } .icon-4:before { content: "S"; } .icon-5:before { content: "W"; } .icon-6:before { content: "W"; } .icon-7:before { content: "W"; } .icon-8:before { content: "W"; } .icon-9:before { content: "I"; } .icon-10:before { content: "W"; } .icon-11:before { content: "I"; } .icon-12:before { content: "I"; } .icon-13:before { content: "I"; } .icon-14:before { content: "I"; } .icon-15:before { content: "W"; } .icon-16:before { content: "I"; } .icon-17:before { content: "W"; } .icon-18:before { content: "U"; } .icon-19:before { content: "Z"; } .icon-20:before { content: "Z"; } .icon-21:before { content: "Z"; } .icon-22:before { content: "Z"; } .icon-23:before { content: "Z"; } .icon-24:before { content: "E"; } .icon-25:before { content: "E"; } .icon-26:before { content: "3"; } .icon-27:before { content: "a"; } .icon-28:before { content: "A"; } .icon-29:before { content: "a"; } .icon-30:before { content: "A"; } .icon-31:before { content: "6"; } .icon-32:before { content: "1"; } .icon-33:before { content: "6"; } .icon-34:before { content: "1"; } .icon-35:before { content: "W"; } .icon-36:before { content: "1"; } .icon-37:before { content: "S"; } .icon-38:before { content: "S"; } .icon-39:before { content: "S"; } .icon-40:before { content: "M"; } .icon-41:before { content: "W"; } .icon-42:before { content: "I"; } .icon-43:before { content: "W"; } .icon-44:before { content: "a"; } .icon-45:before { content: "S"; } .icon-46:before { content: "U"; } .icon-47:before { content: "S"; } #weather h2 { margin: 0 0 8px; color: #fff; font-size: 20px; font-weight: 300; text-align: center; text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15); } #weather ul { margin: 0; padding: 0; } #weather li { background: #fff; background: rgba(255,255,255,0.90); padding: 20px; display: inline-block; border-radius: 5px; } #weather .currently { margin: 0 20px; } .weather-day{ clear: both; } .weather-icon{ float: left; } .weather-temp{ float: right; } .weather-info{ width: 100px; margin-left: auto; margin-right: auto; margin-top: 20px; } div.current-weather-icon img{ /* width: 100px; */ /*background-image: url('https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/28d.png');*/ height: 150px }