/* YP Framework for v6 - v5*/ /* Updated 11-6-2015 */ /* ------------------------------------------ */ /* TABLE OF CONTENTS 1.HEADINGS 2.TYPOGRAPHY 3.LINKS 4.WRAPPERS and CONTAINERS 5.HEADER AREAS 6.CONTENT AREAS AND CALLOUTS 7.FOOTER AREA, UTILITY NAV, AND COPYRIGHT 8.MAIN NAVIGATION/MENU FOR DESKTOP 9.MAIN NAVIGATION/MENU FOR MOBILE DIVICES 10. MOBILE QUICK NAV BUTTONS 11.WIDGET BUTTONS AND BACK TO TOP 12. CUSTOM CLASSES 13. MEDIA QUERIES */ /* ------------------------------------------ */ @import url("../assets/wp-skeleton-990.css"); body { margin: 0; font-family: Arial, Verdana, Helvetic, sans-serif; /* Set default font styles here */ font-size: 14px; color: #000; line-height: 150%; } body { /* Set background image POSITION and REPEAT here! */ } .skinBg { } #header-4, #header-7, #header-9, #header-11, #header-12, #header-15 { width: 100%; display: inline-block; position:relative; z-index: 100; } /* ------------------------------------------ */ /* 1.HEADINGS */ /* ------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-weight: bold; margin-bottom: 5px; line-height: 120%; } h1 { font-size: 240%; } h2 { font-size: 220%; } h3 { font-size: 200%; } h4 { font-size: 180%; } h5 { font-size: 160%; } h6 { font-size: 140%; } /* Jobs Module Heading */ /* Add the same font family and color as your content headings */ #jobs-module li .jobs-title a, .jobs-apply a, .jobs-title { } /* if you have white or light color headings please add a darker color below for the accordion and tabs widget */ .ui-widget h1, .ui-helper-reset h1, .diy-f-spot h1 {} .ui-widget h2, .ui-helper-reset h2, .diy-f-spot h2 {} .ui-widget h3, .ui-helper-reset h3, .diy-f-spot h3 {} .ui-widget h4, .ui-helper-reset h4, .diy-f-spot h4 {} .ui-widget h5, .ui-helper-reset h5, .diy-f-spot h5 {} .ui-widget h6, .ui-helper-reset h6, .diy-f-spot h6 {} .page-heading { background-image: url("../assets/shadow-hr.png"); background-position: center bottom; background-repeat: repeat-x; box-sizing: border-box; display: block; line-height: 150%; margin-bottom: 15px; margin-left: 15px; margin-right: 15px; } /* Callouts Headings */ /* Add the font color of your callout headings here if they are different from the content headings */ .callout1 h1, .callout1 h2, .callout1 h3, .callout1 h4, .callout1 h5, .callout1 h6, .callout2 h1, .callout2 h2, .callout2 h3, .callout2 h4, .callout2 h5, .callout2 h6, .callout1b h1, .callout1b h2, .callout1b h3, .callout1b h4, .callout1b h5, .callout1b h6, .callout2b h1, .callout2b h2, .callout2b h3, .callout2b h4, .callout2b h5, .callout2b h6, .callout5a h1, .callout5a h2, .callout5a h3, .callout5a h4, .callout5a h5, .callout5a h6, .callout5b h1, .callout5b h2, .callout5b h3, .callout5b h4, .callout5b h5, .callout5b h6 { } /* Address Payments Headings */ /* Add the font color of your Address Payments headings here if they are different from the content headings */ .address-payments h1, .address-payments h2, .address-payments h3, .address-payments h4, .address-payments h5, .address-payments h6 { } /* ------------------------------------------ */ /* 2.TYPOGRAPHY */ /* ------------------------------------------ */ p, ol, ul, dl, address { /* bottom margin only */ margin-bottom: 15px; } #content { /* place font size, family, color and line height here */ margin-top: 15px; margin-bottom: 15px; } .ui-widget, .ui-helper-reset { /* this is for the tabs and accordion widgets. use everything from content except font color */ font-size: 100%; } .diy-f-spot { /* for dark background sites, adjust font color to a darker color for the spotlight widgets */ } /* style the blockquote to match the site design */ blockquote { margin: 0 0 15px 25px; padding-left: 24px; border-left: 3px solid #282828; font-size: 130%; line-height: 150%; font-style: italic; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } hr { border: none; border-top: 1px #ccc solid; clear: both; height: 0; } /* Events and Jobs Module HR */ .Events_item, #jobs-module ul li.jobs-single-item { border-bottom: 1px #ccc solid; /* Change color to match hr */ } .reviewItem { border-bottom: 1px #ccc solid; /* Change color to match hr */ } /* ------------------------------------------ */ /* 3.LINKS */ /* ------------------------------------------ */ a, a:visited { outline: none; color: rgb(0, 0, 255); text-decoration: underline; } a:hover { outline: none; color: rgb(40, 40, 40); text-decoration: none; } a:active, a:focus { outline: none; color: #000000; } /* if you have white or light color links plese add a darker color below for the accordion and tabs widget */ .ui-widget a, .ui-widget a:visited, .ui-helper-reset a, .ui-helper-reset a:visited, .diy-f-spot a, .diy-f-spot a:visited { color: #fb0000; } .ui-widget a:hover, .ui-helper-reset a:hover, .diy-f-spot a:hover, .diy-f-spot a:hover { color: #000000; } .ui-state-default a:hover { color: #555555; } /* Callout links */ /* Add the font color of your callout links here if they are different from the content links */ .callout1 a, .callout1 a:visited, .callout2 a, .callout2 a:visited, .callout1b a, .callout1b a:visited, .callout2b a, .callout2b a:visited, .callout5a a, .callout5b a:visited { } .callout1 a:hover, .callout2 a:hover, .callout1b a:hover, .callout2b a:hover, .callout5a a:hover, .callout5b a:hover { } /* Address Payments links */ /* Add the font color of your Address Payments links here if they are different from the content links */ .address-payments a { } .address-payments a:hover { } /* ------------------------------------------ */ /* 4.WRAPPERS and CONTAINERS*/ /* ------------------------------------------ */ #wrapper-header, #wrapper-menu, #wrapper-content, #wrapper-footer, #wrapper-footer-nav, #wrapper-copyright { width: 100%; position: relative; } #wrapper-header { display: block; line-height: 0; } #wrapper-menu { } #wrapper-content { } #wrapper-footer { } #wrapper-footer-nav { } #wrapper-copyright { display: inline-block; } /* ------------------------------------------ */ /* 5.HEADER AREAS */ /* ------------------------------------------ */ /* ---------------HEADER AREA 1--------------- */ #header {} #logo-slogan { padding: 15px 0px; text-align: left; font-size: 40px; /* change font size here for logo and slogan */ line-height: 1.1; } .logo {} /* add margin or padding here */ a.logo, a.logo div { text-decoration: none; text-transform: uppercase; font-size: 100%; } /* Slogan */ .slogan { font-size: 40%; line-height: 130%; } .slogan, .slogan div { } /* CTA and Phone Number */ #phone-cta { padding: 15px 0px; text-align: center; font-size: 30px; line-height: 110%; } /* hide mobile elements by default */ #m-phone-cta { display: none; padding: 15px 0px; text-align: center; background-color: #61b4be; font-size: 25px; line-height: 110%; color: #D40000; } .tagline2 { /* add font sizes here */ } .tagline2, .tagline2 div { display: inline; max-width: 95%; margin:0 auto; } .phone-number { display: inline-block; /* add font sizes here */ } .phone-number, .phone-number a { text-decoration: none; white-space: nowrap; } /* Header Image */ #header-image-container { position: relative; line-height: 0px; } /* WP wraps #siteMainDynHeaderImage1 with #header-image-wrapper-1 by defult but removes it once the image is replaced */ div#header-image-wrapper-1 {} img#siteMainDynHeaderImage1 { width: 100%; height: auto; } /* --- Header 04 ---*/ #header-4 #wrapper-menu { width: 100%; display: block; position: relative; background: #982d23; /* Old browsers */ z-index: 300; } #header-4 #wrapper-header { width: 100%; display: inline-block; position: relative; } #header-4 a.logo, #header-11 a.logo div { color: #000; } #header-4 #logo-slogan { position: absolute; top:0px; left: 0px; z-index: 100; display:block; width: 100%; color: #000; } #header-4 .slogan { font-size: 50%; font-style: italic; } #header-4 #phone-cta { bottom: 5px; display: inline-block; font-size: 25px; font-weight: bold; right: 0; max-width: 80%; padding: 10px; position: absolute; text-align: right; z-index: 100; color: #000; } #header-4 #menu { bottom: 0; box-sizing: border-box; left: 0; min-height: 250px; padding: 0; position: absolute; width: 250px; z-index: 300; } #header-4 ul#nav { float:left; } #header-4 ul#nav li { position: relative; width: 250px; margin: 2px 0; } #header-4 ul#nav li a { -webkit-border-radius: 0px; border-radius: 0px; line-height: 140%; display: block; text-align: left; text-transform: uppercase; padding: 5px 25px; font-weight: bold; color: #000; font-size: 13px; background-color: #cccccc; } #header-4 ul#nav li.current a, #header-4 ul#nav li a:hover { background-color: #333333; color: #fff; } #header-4 ul#nav li ul li { margin: 0; } #header-4 ul#nav li ul li a { -webkit-border-radius: 0; border-radius: 0; color: #000; } #header-4 ul#nav li ul li a, #header-4 ul#nav li.current ul li a { /* second level dropdown buttons */ } #header-4 ul#nav li ul li a:hover, #header-4 ul#nav li.current ul li a:hover, #header-4 ul#nav li ul li.current a { /* second level dropdown button hover state */ background: none; background-color: #333333; } #header-4 ul#nav li ul { /* second-level lists */ position: absolute; left: auto; /* using left instead of display to hide menus because display: none isnt read by screen readers */ margin: 0; padding: 0; border: none; right:-250px; top:0px; display:none; } #header-4 ul#nav li ul li a, #header-4 ul#nav li.current ul li a { /* second level dropdown buttons */ } #header-4 ul#nav li ul li ul { position: absolute; right: -250px; top: 0; } #header-4 ul#nav li ul li ul li a, #header-4 ul#nav li.current ul li ul li a, #header-4 ul#nav li ul li:last-child ul li a, #header-4 ul#nav li.current ul li:last-child ul li a { /* third level dropdown buttons */ background: #545454; /* Old browsers */ color: #fff; } #header-4 ul#nav li ul li ul li a:hover, #header-4 ul#nav li.current ul li ul li a:hover, #header-4 ul#nav li ul li ul li.current a, #header-4 ul#nav li ul li:last-child ul li.current a { /* third level dropdown button hover state */ background: none; background-color: #333333; color: #fff; } /* first and lasts in drop down */ #header-4 ul#nav li ul li ul li.first a, #header-4 ul#nav li.current ul li ul li a { } #header-4 ul#nav li ul li ul li:last-child a, #header-4 ul#nav li.current ul li ul li:last-child a { border-bottom: none; } /* End Third Level Nav Items */ #header-4 ul#nav li:hover ul li ul, #header-4 ul#nav li:hover ul li ul li ul, #header-4 ul#nav li.sfhover ul li ul, #header-4 ul#nav li.sfhover ul li ul li ul { left: auto; display:none; } #header-4 ul#nav li:hover ul, #header-4 ul#nav li ul li:hover ul, #header-4 ul#nav li ul li ul li:hover ul, #header-4 ul#nav li.sfhover ul, #header-4 ul#nav li ul li.sfhover ul, #header-4 ul#nav li ul li ul li.sfhover ul { /* lists nested under hovered list items */ left: auto; display:block; } /* - End Header 04 - */ /* ------------------------------------------ */ /* 6.CONTENT AREAS AND CALLOUTS */ /* ------------------------------------------ */ #content { padding: 30px 0px; min-height: 100px; } /* Callout Classes */ .callout1, .callout2, .callout1b, .callout2b, .callout5a, .callout5b { /* style your callout boxes here, add background color, border, etc. */ background: #eeeeee; } .callout1 .image_wrapper, .callout2 .image_wrapper, .callout1b .image_wrapper, .callout2b .image_wrapper, .callout5a .image_wrapper, .callout5b .image_wrapper { /* style your callout images here, for example, adding a border */ } /* Phase 1 Callout Classes */ .callout1 .widget-wrapper, .callout2 .widget-wrapper { width:45%; float:left; margin-left: 10px; margin-right: 10px; } /* Phase 2 Callout Classes */ .callout1b .widget-wrapper { } .callout2b .widget-wrapper { } /* background to the address, business hours, and payment */ .address-payments { background: #ccc; } /* background to the sidebar form */ .address-payments.sidebar { background: #ccc; } /* background to the phase 1 and 3 callout container */ .welcome-callouts, .callouts { } /* ------------------------------------------ */ /* 7.FOOTER AREA, UTILITY NAV, AND COPYRIGHT */ /* ------------------------------------------ */ #footer-area { padding: 10px 0; margin-bottom: 15px; line-height: 150%; } #footer-area, #footer-area a { } #footer-area a:hover { } span.footerText { display: none; } #footerContent { margin: 0 10px; } #footerContent div { margin: 10px 0; } #mySocialList { margin: 20px 10px 0; } /* Mirror Menu Module for Utility Nav */ ul#mirror-menu-module { margin: 20px 0; padding: 0; text-align: left; } ul#mirror-menu-module li { display: inline-block; /* remove and add float if you want the text left justified */ font-size: 90%; line-height: 120%; padding: 5px 10px; } ul#mirror-menu-module a { text-decoration: none; } ul#mirror-menu-module a:hover { text-decoration: underline; } /* YP Copyright */ div#copyright { font-size: 11px; line-height: 14px; } div#copyright a { } div#copyright a:hover { } /* ------------------------------------------ */ /* 8.MAIN NAVIGATION/MENU FOR DESKTOP */ /* ------------------------------------------ */ /* hide mobile elements in "desktop" view */ #m-menu { display:none; } #navTab {display:none;} /* Main Navigation */ #menu { font-size: 14px; position: relative; } ul#nav { margin: 0; padding: 0; display: inline-block; } /* Start First Level Nav Items */ ul#nav li { float: left; margin: 0; padding: 0; list-style: none; list-style-image: none; } ul#nav li a { font-size: 14px; text-decoration: none; line-height: 150%; display: block; text-align: left; text-transform: uppercase; padding: 0px 25px; } ul#nav li.current a, ul#nav li a:hover { background: #5e5f5f; color: #fff; } ul#nav li.last { } ul#nav li.first { padding-left: 0; } /* End First Level Nav Items */ /* Start Second Level Nav Items */ ul#nav li ul { /* second-level lists */ position: absolute; left: -999em; /* using left instead of display to hide menus because display: none isnt read by screen readers */ margin: 0; padding: 0; border: none; } ul#nav li ul li { float:left; clear:left; margin: 0; padding: 0; position: relative; } ul#nav li ul li a, ul#nav li.current ul li a { /* second level dropdown buttons */ width: 200px; background: #666; color: #000; padding: 0px 25px; line-height: 130%; text-transform: none; background: #545454; /* Old browsers */ } ul#nav li ul li a:hover, ul#nav li.current ul li a:hover, ul#nav li ul li.current a { /* second level dropdown button hover state */ background: none; background-color: #333333; color: #fff; } /* first and lasts in drop down */ ul#nav li ul li:first-child a, ul#nav li.current ul li:first-child a {} ul#nav li ul li:last-child a, ul#nav li.current ul li:last-child a { border-bottom: none; } /* End Second Level Nav Items */ /* Start Third Level Nav Items */ ul#nav li ul li ul { position: absolute; right: -250px; top: 0; } ul#nav li ul li ul li a, ul#nav li.current ul li ul li a, ul#nav li ul li:last-child ul li a, ul#nav li.current ul li:last-child ul li a { /* third level dropdown buttons */ background: #545454; /* Old browsers */ color: #fff; } ul#nav li ul li ul li a:hover, ul#nav li.current ul li ul li a:hover, ul#nav li ul li ul li.current a, ul#nav li ul li:last-child ul li.current a { /* third level dropdown button hover state */ background: none; background-color: #333333; color: #fff; } /* first and lasts in drop down */ ul#nav li ul li ul li.first a, ul#nav li.current ul li ul li a { } ul#nav li ul li ul li:last-child a, ul#nav li.current ul li ul li:last-child a { border-bottom: none; } /* End Third Level Nav Items */ ul#nav li:hover ul li ul, ul#nav li:hover ul li ul li ul, ul#nav li.sfhover ul li ul, ul#nav li.sfhover ul li ul li ul { left: -999em; } ul#nav li:hover ul, ul#nav li ul li:hover ul, ul#nav li ul li ul li:hover ul, ul#nav li.sfhover ul, ul#nav li ul li.sfhover ul, ul#nav li ul li ul li.sfhover ul { /* lists nested under hovered list items */ left: auto; } /* ------------------------------------------ */ /* 9.MAIN NAVIGATION/MENU FOR MOBILE DIVICES */ /* ------------------------------------------ */ @media only screen and (max-width: 767px) { /* hide desktop elements in "mobile" view */ #menu { display:none; } #wrapper-menu { display:none; } a#navTab { /* mobile menu open button */ display: block; width: 100%; height: 30px; cursor: pointer; margin: 6px auto; z-index: 800; background-image: url("../assets/icon-menu.png"); background-repeat: no-repeat; background-position: top center; z-index: 900; } a#navTab:hover { } a#navTab.active { background-position: bottom center; } #m-wrapper-menu { display: inline-block; width: 100%; text-align: center; background: #413f3d; /* Old browsers */ background: -moz-linear-gradient(top, #413f3d 0%, #252322 98%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#413f3d), color-stop(98%,#252322)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #413f3d 0%,#252322 98%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #413f3d 0%,#252322 98%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #413f3d 0%,#252322 98%); /* IE10+ */ background: linear-gradient(to bottom, #413f3d 0%,#252322 98%); /* W3C */ -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6); } #m-menu { height: auto; overflow: visible; padding: 0; position: relative; width: 100%; z-index: 800; display: block; margin: 0 auto; line-height:0; } #m-menu-content { display: none; /* hides the menu by default */ } #m-menu ul#nav { margin: 0; padding: 0; width: auto; background: #666; box-shadow: 0px 2px 4px rgba(000,000,000,0.5); -webkit-box-shadow: 0px 2px 4px rgba(000,000,000,0.5); width:100%; } /* Start First Level Nav Items */ #m-menu ul#nav li { float: none; padding: 0; list-style: none; list-style-image: none; } #m-menu ul#nav li.last { border-left: 0px; border-right: 0px; } #m-menu ul#nav li.first { border-left: 0px; border-right: 0px; } #m-menu ul#nav li a { text-decoration: none; color: #e035cc; font-size: 14px; line-height: 1.3; display: block; text-align: left; padding: 12px 15px; text-transform: uppercase; border-bottom: 1px solid #b7b7b7; border-left: 0px; border-right: 0px; background-color: rgb(67, 154, 164); } #m-menu ul#nav li.current a, #m-menu ul#nav li a:hover { background-color: #5e5f5f; } /* End First Level Nav Items */ /* Start Second First Level Nav Items */ #m-menu ul#nav li ul { /* second-level lists */ position: relative; display: block; width: 100%; margin: 0px; padding: 0px; left: 0px; } #m-menu ul#nav li ul li a, #m-menu ul#nav li.current ul li a { /* second level dropdown buttons */ width: auto; /* background: #ccc; color: #000; */ padding: 10px 15px 10px 30px; text-transform: none; } #m-menu ul#nav li ul li a:hover, #m-menu ul#nav li.current ul li a:hover, #m-menu ul#nav li ul li a:active, #m-menu ul#nav li.current ul li a:active, #m-menu ul#nav li ul li.current a { /* second level dropdown button hover and active states */ } /* End Second First Level Nav Items */ /* Hide Third Level Nav Items */ #m-menu ul#nav li ul li ul { /* third-and-above-level lists */ display:none; } #m-menu ul#nav li:hover ul li ul, #m-menu ul#nav li:hover ul li ul li ul, #m-menu ul#nav li.sfhover ul li ul, #m-menu #nav li.sfhover ul li ul li ul { display:none; left: 0px; } #m-menu ul#nav li:hover ul, /*#m-menu ul#nav li ul li:hover ul, #m-menu ul#nav li ul li ul li:hover ul,*/ #m-menu ul#nav li.sfhover ul, #m-menu ul#nav li ul li.sfhover ul /*, #m-menu ul#nav li ul li ul li.sfhover ul */{ /* lists nested under hovered list items */ display:block; } /* End Mobile Nav Media Query */ } /* ------------------------------------------ */ /* 10. MOBILE QUICK NAV BUTTONS */ /* ------------------------------------------ */ #m-panel { background:#999; } /* mobile bottom nav bar background */ a.m-click-phone, a.m-click-mail, a.m-click-map { background: #413f3d; /* Old browsers */ background: -moz-linear-gradient(top, #413f3d 0%, #252322 98%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#413f3d), color-stop(98%,#252322)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #413f3d 0%,#252322 98%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #413f3d 0%,#252322 98%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #413f3d 0%,#252322 98%); /* IE10+ */ background: linear-gradient(to bottom, #413f3d 0%,#252322 98%); /* W3C */ -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.6); } a.m-click-phone span, a.m-click-mail span, a.m-click-map span { background-image: url("../assets/mobile-panel-icons.png"); } /* ------------------------------------------ */ /* 11.WIDGET BUTTONS AND BACK TO TOP */ /* ------------------------------------------ */ /* Widget Buttons, FAQ and Jobs Modules */ .widget-button, #FAQ_category_list > li > a, #FAQ_category_list > li > a:visited, .jobs-apply a, .buttons, a.buttons { filter:none; cursor:pointer; width:auto; height:auto; text-align:center; text-decoration:none; z-index:1001; font-size:150%; line-height: 120%; color:#fff; padding: 8px 15px; border:0px; /* note if removing rounded corners set the number to 0 */ -webkit-appearance: none; /* this is needed to remove default styling from mobile apple devices */ -webkit-border-radius: 0px; border-radius: 0px; background-color: #000; } .widget-button:hover, #FAQ_category_list > li > a:hover, #FAQ_category_list > li > a:focus, #FAQ_category_list > li > a:active, .jobs-apply a:hover, .jobs-apply a:active, .jobs-apply a:focus, .buttons:hover, a.buttons:hover { filter:none; cursor:pointer; background:#808080; } .buttons { font-size:150%; line-height: 120%; padding: 8px 20px; width: 100%; } #job-apply .buttons { padding: 8px 20px; width: auto; } /* Back to Top */ #back-top a { width: 42px; display: block; text-align: center; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #bbb; /* background color transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover { color: #000; } /* Arrow Icon (span tag) */ #back-top span { width: 42px; height: 46px; display: block; margin-bottom: 7px; background: #333 url("../assets/back-to-top.png") no-repeat center center; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; } #back-top a:hover span { background: #999 url("../assets/back-to-top.png") no-repeat center center; } /* ------------------------------------------ */ /* 12. CUSTOM CLASSES */ /* ------------------------------------------ */ /* Site map */ /* Style the following to match your template's color scheme */ #site_map ul a::before { background: #000; /* background color of the square shape to the left */ color: #fff; /* color of the arrow inside of it */ } #site_map ul a:hover::after { border-left-color: #000; /* change color to match the square shape to the left */ } #site_map ul { font-size: 100%; text-shadow: none; } #site_map ul a { background: #666; /* background color of the site map links */ color: #fefefe; /* text color of the site map links */ padding: 0.5em 0.5em 0.5em 0.8em; } #site_map ul a:hover { background: #999; /* hover state background color of the site map links */ color: #fefefe; /* hover state text color of the site map links */ } /* ------------------------------------------ */ /* 13. MEDIA QUERIES */ /* ------------------------------------------ */ /* Mobile Divices Smaller Than Standard 960 */ @media only screen and (max-width: 959px) { .callout1 .widget-wrapper, .callout2 .widget-wrapper { margin-left: 8px; margin-right: 8px; } #logo-slogan { font-size: 35px; } #phone-cta { font-size: 25px; } /* HEADER AREA 7 */ #header-7 #phone-cta { font-size: 27px; } /* HEADER AREA 3 */ /* header 04 */ #header-4 #menu { max-height: 190px; min-height: 190px; width: 200px; } #header-4 ul#nav li { width: 200px; } #header-4 ul#nav li a { font-size: 12px; } #header-4 ul#nav li ul li a, #header-4 ul#nav li.current ul li a { width: auto; } #header-4 ul#nav li ul { right: -200px; } #header-4 ul#nav li ul li ul { right: -200px; } } /* Smartphones Landscape and Other Mobile Divices Smaller Than 768px */ @media only screen and (max-width: 767px) { /* reduced H1 - H6 for mobile */ h1 { font-size: 240%; } h2 { font-size: 220%; } h3 { font-size: 200%; } h4 { font-size: 180%; } h5 { font-size: 160%; } h6 { font-size: 140%; } #header-4 #logo-slogan, #header-7 #logo-slogan { position: relative; top: auto; } /* mobile Phone and CTA */ #header-4 #phone-cta, #header-7 #phone-cta, #header-9 #phone-cta , #header-11 #phone-cta , #header-12 #phone-cta, #header-15 #phone-cta { display:none; } #m-phone-cta { display:block; } /* HEADER AREA 1 */ #logo-slogan { text-align: center; padding: 10px 0; font-size: 35px; } .tagline2, .tagline2 div { display: block; } /* HEADER 9 */ #header-9 { display: block; margin-bottom: 0; z-index: 0; } #header-9 #logo-slogan { position: relative; top: 0; } /* HEADER AREA 11 */ #header-11 #logo-slogan { position: relative; top:0; } /* HEADER AREA 3 */ /* Phase 2 Callout Classes */ .callout1b, .callout2b { } .callout1b .widget-wrapper, .callout2b .widget-wrapper { } /* Center Utility Nav on Mobile */ ul#mirror-menu-module { text-align: center; } } /* Smartphones Portrait */ @media only screen and (max-width: 479px) { #siteMainDynLogo /* this is for the mobile logo image */ { max-width:280px; height:auto; } /* Phase 1 Callout Classes */ .callout1, .callout2 { padding: 5px; } .callout1 .widget-wrapper, .callout2 .widget-wrapper { float: none; margin: 6px; width: 96%; } }