/* File: custom.css Description: Custom styles for Thesis BASIC USAGE: If you have enabled the custom stylesheet in the Thesis options panel, the tag will be appended with the "custom" class, like so: . You can use the "custom" class to override *any* CSS declarations contained in the style.css file. For example, if you wish to change the default link color to green, you would add the following declarations to this file: .custom a, .custom a:visited { color: #090; } <--- This makes links green .custom a:hover { color: #00f; } <--- This makes links blue when you mouse over them WHY THIS WORKS: By using the "custom" class, you are creating more specific CSS declarations for HTML elements. CSS styling is applied through rules of specificity, and because declarations prepended with .custom are more specific, they get applied when the page is rendered! More information about styling your Thesis installation using this file can be found in the User's Guide: http://diythemes.com/thesis/rtfm/customizing-thesis-with-customcss/ */ /* CSS for things around headline ---------------------------- */ /* Allows display of text to right of headline in line with it. */ .custom .headline_area h1 { display: inline-block; } /* home page only! */ .home .headline_area { margin-bottom: 0; } /* Logo to left of headline on some pages. */ .morehouse-logo { float: left; margin-right: 10px; } /* Text to right of headline on some pages. */ .onsale-text { font-size: 25px; margin-left: 10px; font-style: italic; } /* ------------------------- */ /* CSS for Adwords Landing Page ---------------------------- */ #adwords-landing-page h1 { text-align: center; color: #062B8F; font-size: 2em; margin-top: 10px; margin-bottom: 40px; font-weight: bold; line-height: 1.3em; } #adwords-landing-page h1 span { color: red; font-style: italic; } #adwords-landing-page h2 { color: #0D38AC; font-size: 1.5em; } #adwords-landing-page h2 span { font-style: italic; font-weight: bold; color: #062B8F; } #adwords-landing-page { font-size: 1.2em; } #adwords-landing-page .yucky { color: red; } #adwords-landing-page .checkmarked-paragraph { text-align: center; margin: 0 auto; margin-bottom: 30px; color: black; font-size: 1.3em; font-weight: bold; width: 600px; } #adwords-landing-page .checkmarked-paragraph span { font-weight: bold; color: blue; } #adwords-landing-page .checkmarked-paragraph img { width: 30px; } #adwords-landing-page h3 { color: #00234D; font-weight: bold; border-bottom: 1px solid #E8E8E8; } #adwords-landing-page p.hanging-indent { padding-left: 22px; text-indent: -22px; margin-left: 120px; } #adwords-landing-page ul { width: 720px; } #adwords-landing-page #bottom-disclaimers-and-notes { font-size: .8em; clear: both; margin-top: 30px; display: inline-block; font-style: italic; } #adwords-landing-page #bottom-disclaimers-and-notes hr { width: 400px; margin: 0 auto; margin-bottom: 20px; height: 1px; } #adwords-landing-page #get-xpel-link { text-align: center; font-weight: bold; } #adwords-landing-page #get-xpel-link span { color: black; } #adwords-landing-page #testimony-1 { -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; float: left; width: 340px; border: 1px solid grey; padding: 1em; } #adwords-landing-page #testimony-2 { -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; float: right; width: 310px; border: 1px solid grey; padding: 1em; } #adwords-landing-page #product_page .product_image_area { padding-bottom: 10px; } #adwords-landing-page #details-2, #adwords-landing-page #details-3 { zbackground-color: #F7E9CC; color: #010192; display: none; } #adwords-landing-page .hide-link { background-color: white; } /* ------------------------- */ /* CSS for gluten free image block ---------------------------- */ /* Override default CSS for paragraphs inside text widgets. */ .custom li.widget p { margin-bottom: 0; } #gluten-free-image-block { margin: 0 auto; margin-bottom: 0; font-size: 1.2em; text-align: center; } #gluten-free-image { margin-top: 10px; margin-bottom: 5px; zwidth: 75px; zheight: 77px; } #gluten-free-image-caption { font-size: .7em; } /* ------------------------- */ /* CSS for shipping info pages that show inside the Cart. ---------------------------- */ #cart-shipping-information { padding: 15px; } /* Turn off 'comments are closed' text. */ .custom .comments_closed p { display: none; } .tnt_google_plus_one_button { float: right; } /* Override FoxyCart CSS for their colorbox within which their cart is displayed. */ #cboxOverlay { opacity: 0.5!important; } /* Mini-cart display under product images on product pages. */ #cart_display { margin-top: 15px; } #cart_note { margin-top: 13px; font-size: 11px; } /* CSS for XpeL Sidebar Salesbox --------------------------- */ #xpel_sidebar_salesbox { text-align: center; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; margin-bottom: 30px; margin-top: 30px; border: 1px solid grey; padding: 1em; background: #F1F1F1; width: auto; margin-left: 0; overflow: auto; /* prevents bleed through of background color under image area */ } #xpel_sidebar_salesbox .content { text-align: center; font-size: 16px; margin-bottom: 15px; } #xpel_sidebar_salesbox .red { color: red; } #xpel_sidebar_salesbox .fast_delivery { font-style: italic; font-weight: bold; font-size: 15px; } #xpel_sidebar_salesbox .content p { margin-bottom: 15px; } #xpel_sidebar_salesbox .old_price { text-decoration: line-through; } #xpel_sidebar_salesbox .special_price { font-style: italic; color: red; font-weight: bold; } #xpel_sidebar_salesbox .price_line { } #xpel_sidebar_salesbox .image { zfloat: left; } #xpel_sidebar_salesbox .title { color: blue; font-size: 16px; font-weight: bold; margin-bottom: 15px; } #xpel_sidebar_salesbox .special { color: red; font-size: 18px; font-weight: bold; margin-bottom: 15px; } .center { text-align: center; } .garlic-valley-farms-regular-garlic-juice .chef { margin-bottom: 20px; } /* CSS below is a mish mash of CSS that was pre-existing and brought into this file from style.css where it should not have been. ---------------------------- */ span.heading { font-family : trebuchet ms, arial, sans-serif; letter-spacing : -1px; font-size : 15px; font-weight : bold; font-style : italic; position : relative; top : -25px; margin-bottom : 0px; } .buyit { position : relative; top : -70px; display : inline-block; width : 185px; background-color : #fa0; padding : 3px; text-align : center; margin-top : 0px; margin-bottom : 5px; font-weight : bold; font-size : 13px; font-style : italic; text-decoration : none; border-top : 1px solid #fd0; border-left : 1px solid #fd0; border-right : 1px solid #f90; border-bottom : 1px solid #f90; -webkit-border-radius : 6px; -moz-border-radius : 6px; -khtml-border-radius : 6px; border-radius : 6px; } .buyit:hover { background-color : #fb0; } .buyit:active { background-color : #fc0; } span.footnote { position : relative; top : -110px; margin-left : 5px; font-style : italic; font-size : 10px; } /* ------------------------- */ /* CSS created by Carlos follows below this line. ---------------------------- */ /* To make ul graphics appear in line with the left margin of surrounding text. */ ul.inside { list-style-position: inside; } /* To make ul graphics appear to the outside and left of the left margin of surrounding text. */ ul.outside { list-style-position: outside; } /* Shipping Information Widget CSS ---------------------------- */ .shipping-location { font-size: 1.3em; } /* CSS for sidebar shipping information country images. The width and height is set inline in the HTML. */ .shipping-info-image { vertical-align: middle!important; margin-right: 10px; margin-top: 5px; } /* CSS for shipping pages (includes United States, Canadian, and International shipping information pages. ---------------------------- */ #shipping-info-page table { float: right; margin-left: 20px; border:1px solid #D6D6D6; border-collapse:collapse; } #shipping-info-page th { border:1px solid grey; padding: .3em; text-align: center; background-color: #dedede; } #shipping-info-page td { border:1px solid #D6D6D6; padding: .3em; text-align: right; } /* ------------------------- */ /* CSS targetting the hometiles on the home page. ---------------------------- */ /* Override default format_text ul CSS for hometile purposes. */ .hometile ul { margin: 0; } .hometile { font-family : trebuchet ms, arial, sans-serif; width : 326px; height : 319px; float : left; padding : 15px; border : 1px solid #ccc; font-size : .8em; -webkit-border-radius : 10px; -moz-border-radius : 10px; -khtml-border-radius : 10px; border-radius : 10px; } /* Change border color of hometiles on hover. */ .hometile:hover { border : 1px solid #fa0; } /* Image section of each hometile. */ .hometile .left { float: left; zoutline: 1px solid blue; } /* Actual image of each hometile. */ .hometile .left img { display: block; } /* Text content section of each hometile. Float right needed to prevent text from going under image. Width set in more specific CSS later in this file. */ .hometile .right { float: right; zoutline: 1px solid black; } /* Product heading inside each hometile. */ .hometile .heading { font-family : trebuchet ms, arial, sans-serif; font-size : 1.4em; font-weight : bold; font-style : italic; margin-bottom : 15px; text-align: center; } button { margin: 0 auto; background-position: top; border: none; font-weight: bold; cursor: pointer; } button.disabled { cursor: auto; } #product_page button, #xpel_sidebar_salesbox button { width: 100px; height: 38px; font-size: .9em; background: url(/wp-content/images/button-sprite-small.png); } #product_page button:hover, #xpel_sidebar_salesbox button:hover { background-position: center; } #product_page button:active, #xpel_sidebar_salesbox button:active { background-position: bottom; } .hometile button { width: 120px; height: 46px; font-size: 13px; background: url('/wp-content/images/button-sprite-large.png'); } .hometile button:hover { background-position: center; } .hometile button:active { background-position: bottom; } .hometile .button-text { font-family: arial, sans-serif; font-size: 1em; font-weight: bold; padding-top: 2px; color: black; text-align: center; } /* This CSS removes annoying border when button is clicked in some browsers. See http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links/3844452#3844452 for more info. */ :focus {outline:none;} ::-moz-focus-inner {border:0;} a .foxycart { text-decoration: none; } /* The flat-rate shipping note at the bottom inside each hometile. */ .hometile .footnote { font-style : italic; font-size : 1em; margin-top: 15px; } /* CSS for ul lists inside a hometile. */ .hometile ul { margin: 0; list-style : square; list-style-position : outside; color : #000; font-weight : normal; font-style : normal; font-size : 13px; } .hometile ul li { margin-left: 10px; margin-bottom: 5px; line-height: 18px; } /* Removes underlining from product title in hometiles while retaining clickability. */ .hometile a { color : #000; text-decoration : none; } /* CSS targetting the Morehouse Mustards hometile. */ #hometile_morehouse_mustards { margin-right: 10px; } #hometile_morehouse_mustards .text { font-size: 13px; text-align: center; } #hometile_morehouse_mustards .text p { margin-bottom: 10px; padding-left: 30px; padding-right: 30px; } #hometile_morehouse_mustards .image { text-align: center; } z#hometile_morehouse_mustards .bullets { height: 45px; } z#hometile_morehouse_mustards .bullet-left { float: left; width: 43%; padding-left: 20px; padding-right: 5px; } z#hometile_morehouse_mustards .bullet-right { float: right; width: 40%; padding-left: 20px; padding-right: 5px; } /* #hometile_morehouse_mustards img { width: 180px; height: 99px; } */ #hometile_atomic_horseradish .morehouse-logo, #hometile_morehouse_mustards .morehouse-logo { float: none; display: inline-block; } #hometile_atomic_horseradish .morehouse-logo { margin-right: 0; } #hometile_atomic_horseradish .morehouse-logo img, #hometile_morehouse_mustards .morehouse-logo img { vertical-align: middle; width: 47px; height: 25px; } #hometile_garlic_juice_spray .footnote, #hometile_morehouse_mustards .footnote, #hometile_xpel_all_natural_antacid .footnote, #hometile_atomic_horseradish .footnote { float: left; clear: left; margin-left: 20px; } #hometile_garlic_juice_spray .footnote { margin-left: 0; margin-top: 5px; } #hometile_garlic_juice_spray .button, #hometile_morehouse_mustards .button, #hometile_xpel_all_natural_antacid .button, #hometile_atomic_horseradish .button { float: left; margin-left: 20px; margin-top: 5px; } .red { color: red; } .bold { font-weight: bold; } #hometile_morehouse_mustards .sub-heading { color : #000; font-weight : bold; font-style : normal; font-size : 15px; margin-bottom: 10px; margin-top: 5px; text-align: center; } #hometile_morehouse_mustards .footnote { margin-top: 5px; } #hometile_morehouse_mustards .button { margin-top: 0; } #hometile_xpel_all_natural_antacid .bottom { clear: both; } #hometile_xpel_all_natural_antacid .left { margin-bottom: 13px; } #hometile_xpel_all_natural_antacid .bottom ul { list-style-position: outside; margin-left: -20px; } #hometile_xpel_all_natural_antacid .right ul { list-style-position: outside; } #hometile_xpel_all_natural_antacid .right ul li { margin-bottom: 5px; } #hometile_xpel_all_natural_antacid .bottom ul li { margin-left: 40px; margin-bottom: 5px; } /* CSS targetting the other mustards box at the top of the Mustard product pages. ---------------------------- */ .other-mustards-box { height: 86px; float: left; width: 400px; zoutline: 1px solid blue; margin-bottom: 10px; margin-left: 13px; } .other-mustards-thumbnails-left { float: left; zoutline: 1px solid black; } .other-mustards-thumbnails-right { float: right; zoutline: 1px solid red; } .other-mustards-box p { float: left; width: 67%; text-align: center; padding-right: 15px; padding-left: 15px; zoutline: 1px solid pink; } /* CSS targetting the redirection to XpeL box at the top of the Atomic Horseradish page. ---------------------------- */ .xpel-box { height: 86px; float: right; width: 225px; zoutline: 1px solid blue; margin-left: 10px; margin-bottom: 5px; padding-left: 17px; padding-top: 10px; padding-bottom: 5px; border: 1px solid lightgrey; } .xpel-box img { float: left; zoutline: 1px solid blue; } .xpel-box p { float: left; width: 145px; text-align: center; padding-right: 15px; padding-left: 10px; zoutline: 1px solid pink; } /* CSS targetting the Morehouse Atomic Horseradish hometile. ---------------------------- */ #hometile_atomic_horseradish { margin-right: 10px; margin-bottom: 10px; } #hometile_atomic_horseradish img { width: 94px; height: 210px; margin-right: 10px; margin-left: 10px; } #hometile_atomic_horseradish .right { width: 200px; zoutline: 1px solid black; } /* CSS targetting just the Garlic Valley Farms Regular Garlic Juice Spray hometile. ---------------------------- */ #hometile_garlic_juice_spray { margin-bottom: 10px; } #hometile_garlic_juice_spray img { zwidth: 100px; zheight: 253px; margin-left: 3px; } #hometile_garlic_juice_spray .valley_farms_logo { margin-left: 0; float: left; } #hometile_garlic_juice_spray .right { width: 235px; zoutline: 1px solid black; } #hometile_garlic_juice_spray .left { margin-left: 5px; margin-top: 10px; } /* CSS targetting the XpeL Antacid hometile. ---------------------------- */ #hometile_xpel_all_natural_antacid img { margin-right: 10px; } #hometile_xpel_all_natural_antacid .left { width: 96px; } #hometile_xpel_all_natural_antacid .right { width: 215px; } */ /* CSS targetting all product pages. ---------------------------- */ /* Not enough margin between the bottom horizontal ruler and the drop-down list so we add a 5px margin to bottom of ruler - leaving the margin-top of the drop-down list as is. */ #product_page hr { margin-bottom: 5px; } /* The product page is also affected by various other CSS including post_box which by default sets a margin of 0 2.3em 0 1.1em. That is why the product page area is 750 px wide whereas the #content area is 760px wide. */ #product_page { zoutline: 1px solid blue; zbackground: pink; width: 735px; padding-right: 15px; /* mostly for IE rendering to equal other browsers */ } #product_page ul { list-style-position: inside; /* corrects a problem in IE 9 and 10 with lists next to float lefts */ margin-left: 0; /* forces lists below image floats to left margin */ } #product_page ul li { text-indent: -14px; padding-left: 14px; margin-bottom: 14px; } #product_page .product_image_area { float:left; text-align: center; margin-right: 37px; zoutline: 1px solid blue; } #product_page .foxycart select { font-family: monospace; /* white-space: pre; DOESN'T WORK TO PRESERVE SPACES IN SELECT! */ height: 25px; margin-top: 15px; font-size: 14px; zoutline: 1px solid brown; cursor: pointer; margin-bottom: 10px; } #product_page .foxycart select.disabled { cursor: auto; } /* Prevents display of initial text inside actual drop down list while showing that text in the drop down list box. */ option.initial_text { display: none; } /* CSS targetting the XpeL product page. ---------------------------- */ /* The height should remain proportional to any change in width. #product_xpel_all_natural_antacid img { width: 262px; height: 371px; } */ /* CSS targetting the XpeL Adwords landing page. ---------------------------- */ /* The height should remain proportional to any change in width. #product_acid_reflux_relief_with_xpel img { width: 230px; height: 325px; } */ /* CSS targetting the Morehouse Rhinegeld German Mustard product page. ---------------------------- */ /* The height should remain proportional to any change in width. */ #product_german_mustard img { width: 262px; height: 400px; } /* CSS targetting some product images with the same dimensions. */ /* The height should remain proportional to any change in width. */ #product_regular_garlic_juice img, #product_roasted_garlic_juice img { width: 140px; height: 571px; } /* CSS to overcome theme defaults and other CSS settings ---------------------------- */ /* Body deals with the entire browser screen area. */ body { font-size: 62.5%; } /* CSS to better align Deborah Brock's image on home page. */ .custom .format_text img.alignleft { margin: 20px 15px 0 0; } .custom h1 { font-size: 25px; font-weight: normal; margin-top: 0; margin-bottom: 0; } .custom h2 { font-size: 25px; zmargin: 1.2em 0em 1.2em 0em; font-weight: normal; } .custom h3 { font-size: 1.3em; margin: 1.2em 0em 1.2em 0em; font-weight: normal; } .custom h4 { font-size: 1.2em; margin: 1.2em 0em 1.2em 0em; font-weight: bold; } .custom h5 { font-size: 1.0em; margin: 1.2em 0em 1.2em 0em; font-weight: bold; } .custom h6 { font-size: 0.8em; margin: 1.2em 0em 1.2em 0em; font-weight: bold; } .custom #page { padding: 0; } .custom #sidebars { width: 240px; zoutline: 1px solid pink; } .custom .sidebar ul.sidebar_list { padding-left: 1.7em; } .custom #container { zoutline: 1px solid black; width: 1000px; margin: 0 auto; padding-left: 20px; padding-right: 20px; } .custom #content { width: 760px; zpadding-right: 10px; /* mostly for IE rendering to equal other browsers */ } .custom #content_box { background: none; /* gets rid of all-in-one CSS annotation which is difficult to debug */ /* now split it out into seperate CSS statements */ background: url('../lib/images/dot-ddd.gif'); background-position: 760px; /* starting position of background image */ background-repeat: repeat-y; } /* ===================================================================== * Added by Carlos to make the menu cross browser compatible in appearance * and width. Had to override Thesis em sizing throughout the menu. * * A couple of other caveats. The width of the submenu's is hardcoded at * 139px's. If submenu items get too large this will have to be changed here. * Again this width was set in pixel's vs em's to achieve cross browser * compatibility more easily in the width of the menu. Modern browsers all * zoom all page elements so there is no longer any need to use relative * em sizing as much as there once was when such was not the case. * * The width of the menu is also hard coded at 1000px. If the width of the * site changes this will have to be changed here as well. */ .custom .menu { font-family: Georgia, "Times New Roman", Times, serif; /* top, right, bottom, and left */ border-width: 0 0 0 0; /* overrides em's used in Thesis */ border-style: solid; border-top-width: 0; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; background: #EFEFEF; width: 1000px; } z.custom .menu ul, z.custom .menu ul li { zvisibility: visible; /* for debugging purposes */ width: 180px; /* overrides Thesis default of 15em */ } /* submenu width */ .custom .menu ul.submenu-1 a { width: 165px; } /* We have to change all em font sizing to px's in order to achieve some * semblence of cross browser navigation width. */ .custom .menu a { font-size: 10px; padding: 10px; margin: 0; border-width: 1px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; } .custom .menu li ul { border-width: 0 0 0 0; /* override Thesis use of em's */ } .custom .submenu li { border-width: 0; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #D6D6D6; } .custom .menu .tab-6 a { border-right-width: 0; } .custom .format_text { font-size: 14px; } /* IE ONLY CSS targetting Internet Explorer and it's various versions where necessary. The IE related classes are added by the add_ie_class() function inside the custom_functions.php file to the body HTML tag. ---------------------------- */ /* The sites 62.5% font rendering default is too large for IE so we decrease it site wide. */ body .ie { font-size: 53%; } /* IE default font rendering is too large so we decrease it when necessary. */ .ie h3 { font-size: 1.1em; } .ie .format_text { font-size: 1.35em; /* 1.4em is too big for IE */ } /* LI's in IE end up with hanging indents that do not go in far enough compared to other browsers (at least with respect to your hanging indents) so we increase the padding and indents. */ .ie #product_page ul li { text-indent: -22px; padding-left: 22px; } /* IE does not show enough margin above the drop down list below the horizontal rule so we increase it slightly. */ .ie .foxycart select { margin-top: 20px; } /* Firefox ONLY CSS targetting Firefox. See http://stackoverflow.com/questions/952861/targeting-only-firefox-with-css for more info. THESE statements must come BELOW the normal CSS statements to override them in Firefox. ---------------------------- */ @-moz-document url-prefix() { body { font-size: 76%; margin: 0 auto; } .custom h2 { font-size: 1.95em; } .custom h3 { font-size: 1.2em; } #shipping-information-widget .shipping-location { font-size: 1.2em; letter-spacing: .06em; } .custom .menu a { zpadding: 8px; zletter-spacing: 1.4px; } .hometile { font-size: 1em; width: 322px; /* FIX THIS - FIREFOX NOT PRESENTING 326px correctly */ height: 320px; } #hometile_morehouse_mustards .text { font-size: .9em; } .hometile .button-text { font-size: .8em; } .hometile .heading { font-size: 1.1em; } .hometile .footnote { font-size: .9em; ztransform: scale(.9); /* overrides Firefox min font size in options */ } .hometile ul { font-size : .9em; } .custom .menu { zoutline: 1px solid blue; } #product_page button { font-size: .83em; } }