.three_to_one_box {} .small-italic{font-size:0.8em;font-family:arial; font-style:italic; font-weight:normal} * { box-sizing: border-box; } /* good practice but will demand I go back and get specific with padding & margins */ body { overflow-x:hidden; /* fixes obscure issue where the content is slightly too wide and :. has horz scrollbars */ margin: 0 auto; padding: 0; text-align: left; color:#525462; /* ###!!! overall body text color */ background-image:url('./../../images/site-bkgd.jpg'); font-family:georgia; /* ###!!! overall site font */ } p {font-size: 1em; line-height: 1.5em; font-family:georgia;color: #474747;padding-left: 0px;} /* ###!!! Body text font size */ h1, h2, h3 {font-size : 1.4em; font-weight:bold;color: #6c8230; display:block;} /* ###!!! automatic page headings, display:none to hide */ h5 {font-size : 1.3em;font-weight: 900;line-height:1.2em;margin:10px 0 20px 0px; padding-top: 10px; color: #a4c44b;} /* ###!!! TRBL for headlines within the content in the easiest possible way for users */ #SEARCHBOX {display:none;} /* ###!!! SEARCHBOX - only make visible for sites with LOTS of content */ #BREADCRUMBS {display:none; padding-bottom:10px; font-size:0.7em;} /* ###!!! locator function generally not needed to be seen */ #BANNER-CONTAINER {color: #6e6e6e;padding: 0px; text-align:center;height: 203px;} #BANNER_IMAGE {width: 100%;/* overflow: hidden; */margin-top: -58px;} #CONTENT_CONTAINER { margin:0 auto; background-size: contain; /* background-color: #fff; */ /* ###!!! background for the ENTIRE window, not just content area */ padding-top:0em opacity:0.9; } #CONTENT { line-height: 1.7em; font-size: 1.1em; background-color:#FFF; /* ###!!! use inherited to allow the overall window bkgd color to show thru */ } #CONTENT a:link {text-decoration:underline; color:#5d6f29;} /* ###!!! color / decoration for links IN THE CONTENT */ #CONTENT a:hover { color:#5b6d27; } /* ###!!! hover color for links IN THE CONTENT */ #CONTENT ul {padding-bottom:20px;} #CONTENT ul li, #CONTENT ul li ul {font-size: 1.1em;line-height:1.5em;} #CONTENT img {display: block;margin: 0 auto;padding-top: 18px;padding-bottom: 18px;max-width: 100%; width: 100%;} /* back to default display b/c block style makes centering impossible */ #CONTENT { margin: 0 auto; padding: 37px 80px 50px 80px; background-color: white; /* ###!!! use inherited to allow the overall window bkgd color to show thru */ } #login {font-family:sans-serif; font-size:.8em; display:block;} #login a:link { color: #ccc; } .doc, .docs, .sdoc, .sdocs { cursor: pointer; } /* so when you hover you get a finger pointer cursor */ /* UTILITY CLASSES */ .centered {text-align:center; margin:0 auto;} .row { width: 100%; display:block; padding:0; margin:0;} .hidden {display:none;} .slideshow img, .daves_slideshow img {width:100%;} /* so that slideshow images fill their container */ .title {height:3em; font-weight:bold; font-size:1.1em; line-height:1.3em; padding-bottom:10px;} /* add this class to any image that you intend to make a clickable link */ .btn-img { transition: 0.2s ease; -webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; } .btn-img:hover { /* when you hover it shrinks a bit*/ transform: scale(0.98, 0.98); } /* fonts */ .arial {font-family:arial;} /* colors */ .almost-white-text {color:#ddd;} .light-grey-text {color:#aaa;} .bkgd-dark-blue {background-color:#111639;} .bkgd-med-grey-blue {background-color:#4b517b;} /* heights */ .height-30 {height:30px;} /* padding */ .padding-18 {padding:18px;} /******************************************************************/ /******************** NAVIGATION **********************************/ /******************************************************************/ #NAV {height: 66px;/* margin-top: -4px; */} /* #NAV is the container for everything - banner and menuing system */ /* one reason the styling here is a bit inscrutible is bc if you set a specific height for this box, it breaks the mobile styling */ .nav-menu { /* CLASS for the containing div that holds the entire nav system */ font-weight: bold; font-size: 1.6em; /* ###!!! size of menu items text - browser */ color: #ffffff; /* ###!!! text color for nav menu items */ /* opacity: 0.95; */ background-color: #587802; /* ###!!! overall background color for the entire navigation menu */ /* the following two settings force the popdown menu to stay above any slideshows - you MUST use position:relative OR position:absolute in order to gain access to z-index ie without position explicitly set, z-index does NOTHING */ position: relative; z-index:100; box-shadow: 5px 5px 5px #000; /* ###!!! optional shadow under entire nav menu area */ } /* nav menu bkgd and text color */ .nav-menu ul li:hover, #SUBMENU li:hover { background-color: #799A24; /* ###!!! BOX color on hover */ color: #FFF; /* text color on hover */ /* ###!!! here is where the css animation is and currently commented out */ } /* the box that you click to pop open the mobile menu */ .mobile_nav_menu { color: white; /* ###!!! color of the mobile menu TITLE text, NOT the menu items */ font-weight: bold; } /* to remove submenus from the nav menu (but still have them show up on the in-page submenu) - display:none */ /* keep in mind if the sub-pages are hidden with #CMSIMPLE HIDE# they will still NOT show up in the submenu */ .menulevel3, .menulevel2 { display:none; } #SUBCONTAINER { /* container div that holds the popdown submenu */ display:normal; background-color: inherit; /* seems to do nothing bc overridden by #SUBMENU styles */ position:absolute; max-width:400px; box-shadow: 5px 5px 5px #111; /* ###!!! optional shadow under the popdown menu */ } #SUBMENU { /* div containing the popdown menu items themselves */ height:100%; background-color: #587802; /* ###!!! the box that contains each individual popdown menu item */ color: #FFFFFF; /* ###!!! the text of the popdown menu items */ text-align: left; /* ###!!! alignment of popdown menu items */ list-style: none; display: block; /* ###!!! change to display:none to GET RID OF POPDOWN MENUS */ font-family: arial; font-size: .6em; font-weight: normal; } #SUBMENU li { padding: 25px;} /* last item is left padding - needed if text-align (above) is left but not if center */ /* stylin' the submenu that appears on the content page */ h4 { margin-bottom:0px;} /* uncomment the following line if you do NOT want ANY submenu appearing under the content area */ /* .submenu {display:none;} */ .submenu { list-style: none; line-height:2em; } .submenu a:hover { text-decoration:underline;} .nav-menu a { text-decoration: none; /* gets rid of underlines on links in the nav menu*/ color: inherit; /* so it simply picks up color from bkgd */ } .header-contact-info { font-family:verdana,arial,sans; font-size:12px; } /* add this to the navmenu's class to make it static fixed position instead of scrolling - */ /* the mechanism for compensating for the fixed positioning is handled in misc-functionality.js -> function compensate_for_fixed_menu */ .fixed { position:fixed; width: 100%; z-index:10; } #NAV ul { /* deals with the overall box that CONTAINS the standard nav menu*/ font-family: arial; font-weight: normal; overflow: hidden; text-align: center; /* ###!!! overall flush of the ENTIRE nav menu as a unit */ /* padding-right: 30px; */ /* w/ flush right, you prob want some padding */ /* padding-left: 33vw; */ /* keeps it from bumping into a graphic in the non-mobile menu */ margin: 0; } #NAV ul li { /* deals with individual nav menu items - depends largely on whether the client has LOOOOOOONG menu titles*/ max-width: 240px; /* ###!!! width limit of individual menu items - if they are too long, they wrap to multiple lines */ font-size: 0.6em; /* ###!!! a matter of taste this is the size of the actual text in the nav menu */ display: inline-block; /* kind of like float left but better */ vertical-align : text-top; text-align: center; /* text alignment of individual menu items (as opposed to the entir emenu block as a whole) */ height: 0px; /* ###!!! "thickness" of the menu */ padding: 25px 23px 42px 22px; /* ###!!! Top, Right, Bottom, Left - menu 'thickness' */ } /* special menu styles for the menu at the BOTTOM of the site */ #BOTTOM-MENU > ul { margin-left:-39px; margin-top:-10px; } #BOTTOM-MENU .doc, #BOTTOM-MENU .docs, #BOTTOM-MENU .sdoc, #BOTTOM-MENU .sdocs { cursor: pointer; display : inline; padding-right: 10px; font-family: arial; font-size: 0.9em; font-weight:normal; } #BOTTOM-MENU a {color:grey;} /*************************************************/ /* MEDIA QUERIES */ /*************************************************/ /**********************************************************************************/ /* FULL SIZE BROWSER */ /**********************************************************************************/ @media screen and (min-width: 960px) { #CONTENT { width: 960px; } #NAV_ICON { /* ###!!! icon that appears in nav menu, typically a company logo */ position: absolute; left: 2%; top: 15px; /* width: 25%; */ max-width: 41px; /* box-shadow: 5px 5px 5px #222; */ /* ###!!! with this it has a shadow that allows it to nicely overlap the nav menu*/ } #MOBILE_MENU_TITLE{display:none;} /* otherwise text menu label shows up in full size browser */ .horizontal-homeadvisor-reviews-widget {display:block; padding-bottom: 30px;} .vertical-homeadvisor-reviews-widget {display:none;} .wrap-img {float: left; padding-right :30px; padding-bottom : 30px; } /* palced here b/c if it's mobile the img would be full width */ } /**********************************************************************************/ /* SMALLER SCREEN (TABLETS ETC) */ /**********************************************************************************/ @media screen and (max-width: 960px){ h5 { font-size : 1.2em; font-weight: 900; line-height:1.2em; margin:10px 0 20px 0;} /* ###!!! headlines generally want to be a bit smaller on mobile */ #BOTTOM-MENU .doc, .docs, .sdoc, .sdocs {} #BOTTOM-MENU {font-size:.7em;} #BREADCRUMBS {display:none;} /* MOBILE MENU */ .slogan {display:none} /* on mobile it's a bit much to include */ #BANNER-CONTAINER{text-align: center; padding:10px; padding-right:30px;} #BANNER {font-size: 0.8em; padding: 0px;} #MENU_BUTTON { /* the mobile menu header */ width: 100%; height: 42px; box-sizing: border-box; padding: 12px 15px; cursor: pointer; display: block; } #MOBILE_MENU_TITLE {color: #61c0e4;display:block;padding-top: -3px;font-size:.8em;padding-left: 1px;} /* ###!!! in some cases the company logo is all you need */ #MOBILE_MENU_LINES { /* the mobile menu icon */ border-bottom: 13px double #fff; border-top: 4px solid #fff; content: ""; height: 5px; width:28px; float: right; margin-top: 23px; /* ###!!! If you have NO MENU TITLE (logo only) then 0px, otherwise -20px (ish) */ padding: 2.3px; margin-right: 26px; } p {font-size: 1.3em; line-height:1.5em;} #NAV {height: 100px} #NAV ul { /* causes menu to be hidden until clicking the menu button */ max-height: 0; padding-right:0px; /* compensates for padding-right:15px in browser menu */ padding-left: 0px; /* change to 60px-ish if you're including an icon in the mobile menu */ } #NAV ul li { height:60px; /* 'thicker' menus look stupid on mobile */ box-sizing: border-box; /* without this each box would add the padding we have in the large screen nav */ max-width:100%; width: 100%; /* counteracts the (presumably) fixed width in browser */ padding: 20px 30px 15px 10px; /* ###!!! TOP RIGHT BOTTOM LEFT - Use this to massage mobile menu item positioning */ margin: 0px 0px 0px 0px; text-align: right; /* ###!!! text alignment of mobile menu items */ display: block; font-size:0.85em; } .nav-menu {box-shadow:none;} /* ###!!! generally shadows look cheesy on a mobile nav menu */ /* ###!!! the icon (or logo) that appears in the nav manu is generally made smaller for mobile */ #NAV_ICON { position: absolute; left: 28px; top: 7px; width: 88px; /* ###!!! usually the logo sizing needs tweaking for mobile */ } #CONTENT {padding: 5px 30px; text-align:center;} #CONTENT img, #BANNER img { max-width:100%; } #CONTENT ul {margin-left:-20px; font-size: 1.6em;} #CONTENT ul li, #CONTENT ul li ul {font-size: 0.65em;line-height:1.5em;} /* it simply makes no sense to have pop ups in a mobile menu */ #SUBMENU { display: none; } .threeup { display:inline; width:100%;} /* makes threeups stack in mobile */ .threeup img { width:100%; height:auto;} .login { display:none; } /* you cannot log in thru mobile */ .horizontal-homeadvisor-reviews-widget {display:none;} .vertical-homeadvisor-reviews-widget {display:block; padding-bottom: 30px;} }