/* Web site: http://www.pjlabs.com Filename: custom.css Description: Custom styles for Thesis Author: gboyanowski Created: Sept. 9, 2010 Updated: 5/5/11 */ /* TABLE OF CONTENTS 00 - Global Elements - Standard elements. 01 - Typography - All type throughout site. 02 - Main Structure - Main structure of site. 03 - Header - Header, logo, navigation, search. 04 - Main Content - Post boxes, images etc. 05 - Sidebar - Custom sidebar widgets. 06 - Footer - Footer navigation, links, address. 07 - Comments - Comments, comment form. 08 - Plugins - Plugins. /* COLORS - default body text # - subtitle h3 text # - form input borders # - default p text # /* FONTS - default body text - subtitle h2 text - form input text - default p text - pre and code /* ----------------------------------------------*/ /* 00 - GLOBAL ELEMENTS /* ----------------------------------------------*/ /* Blockquote. */ .custom blockquote { border-left:2px solid #009900; color:#111; } /* Forms. */ .custom input { border:1px solid #bbb; background:#fff; } .custom textarea { background:#fff; } .custom .wpcf7-list-item { display:block; } .custom .wpcf7-list-item input { width:20px; } .custom .your-email input { font-size:.8em; } /* formats the search input and button */ .widget_search { float: right; width: 200px; } .search_form .text_input { background:#fff; border:1px solid #666; color:#666; padding:2px; font-size:11px; } .search_form #searchsubmit { background:#4271AE; border:1px outset #78A024; font-weight:bold; color:#ffffff; padding:1px; } .submit_button { color: #333; font-size: 11px; margin-top: 5px; } /* Headings. */ .custom h1 { font-family:"Trebuchet MS"; } .custom h2 { font-family:"Trebuchet MS"; } .custom h3 { font-family:"Trebuchet MS"; } .custom h4 { font-family:"Trebuchet MS"; } /* Images. */ .img_border { border:1px solid #666; padding:3px; } /* Mimic tables. */ #table { display:table; } #tr { display:table-row; } #td, #td2, #td3 { display: table-cell; padding-right:10px; } /* Quotes. */ q { font-style:italic; } cite { font-weight:bold; font-style:normal; } /* 01 - TYPOGRAPHY /* ----------------------------------------------*/ /* 02 - MAIN STRUCTURE /* ----------------------------------------------*/ .custom #page { margin-top:1.5em; } /* Top margin for page. */ .custom .post_box { padding-left:1em; padding-right:1em; } /* Padding for content area. */ /* 03 - HEADER /* ----------------------------------------------*/ /* Page top. */ #page_top { background:#33488d; color:#fff; line-height:2.5em; padding-left:10px; } #page_top a { color:#fff; } #page_top a:hover { color:#ccc; } /* Custom header. */ #header { padding:0; } #custom_header { } /* Navigation. */ .menu { background:#33488d; color:#fff; } /* Menu. */ .menu a { background:#33488d; color:#fff; } .menu a:hover { background:#077534; color:#fff; } .current-parent a { border-bottom:1px solid #4271AE; } .menu ul a { background:#fff; color:#111; } /* Submenu. */ .menu .current ul a { background:#fff; color:#111; } /* Submenu current. */ .menu .tab-1 ul a { width:210px; } /* Add width to selected submenu. */ .menu .tab-2 ul a { width:200px; } .menu .tab-3 ul a { width:185px; } .menu .tab-4 ul a { width:165px; } .menu ul ul { margin-top:.75em; } /* Offset sub-submenu. */ /* Page header. */ #page_headline { height:65px; background:#4271ae; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal; padding:20px; padding-bottom:0; } #page_headline span { width:70%; color:#fff; font-size:1.3em; float:left; border-left:1px solid #fff; margin-left:20px; padding-left:20px; } #page_headline h1 { font-size:2.3em; font-weight:normal; color:#fff; float:left; } #page_headline .mkfit-lg { width:60%; } #page_headline .mkfit { width:50%; } #page_headline .mkfit-sm { width:45%; } /* #search-header { margin:0px; padding:0px; position: absolute; right: 40px; top: 90px; } #search-header-input { float: left; border: 1px solid #000000; background: #909090; width: 210px; padding: 4px; } #search-header-submit { float: left; margin: 2px 0 0 5px; } */ /* 04 - MAIN CONTENT /* ----------------------------------------------*/ .home_page h3 { background: #33488d; color:#fff; font-family:"Yanone Kaffeesatz"; font-size:1.75em; font-weight:normal; padding:2px; padding-left:20px; margin-top:20px; } .home_page td { font-size:.9em; } .newlist td { font-size:.9em; } div.scroll { background-color:#fff; width:250px; height:300px; overflow: auto; overflow-x: hidden; } /* 05 - SIDEBAR /* ----------------------------------------------*/ /* li.widget This is each individual widget. If you want your widgets a different colour than the rest of your sidebar, you�d add a background to this class. .custom li.widget h3 Header of each widget. Add a background or if you want to get rid of the small-caps, add font-variant: normal. li.widget ul li Change how list items appear. Adding an underline for example, or changing how category links appear. #content_box and #content Classes are used to perform the number one customization; how to change your sidebar colour. Editing these two classes together will give you a different background colour for your sidebars all the way to the bottom of the page. Use the following, where #content_box is your desired content colour and #content is your main background. .custom #content_box { background-color: #eee; } .custom #content { background-color: #fff; } */ #text-2 { border:1px solid #666; padding:4px; width:265px; } #text-2 h3 { background:#33488d; color:#fff; padding:4px; padding-left:10px; padding-right:10px; } #text-2 .textwidget { font-size:.88em; padding:8px; line-height:1.3em; } #call_today h3, #newsletter_signup h3, #steps_to_accreditation h3, #apply_for_accreditation h3 { font-family:"Yanone Kaffeesatz"; font-variant:normal; font-size:1.75em; padding-bottom:0; margin-bottom:0; color:#F53D00; font-weight:normal; } #call_today h3, #apply_for_accreditation h3 { font-style:italic; font-size:2em; } #call_today .textwidget { font-size:.88em; } #steps_to_accreditation img { padding-right:8px; } #steps_to_accreditation p, #apply_for_accreditation p { font-style:italic; color:#666; } li.widget { margin-bottom:10px; padding-bottom:0; } /* 06 - FOOTER /* ----------------------------------------------*/ #footer_1 li.widget { font-size:1.35em; } .custom #footer { padding-left:0; padding-right:0; font-size:.85em; padding-bottom:0; } .custom #footer_1 { text-align:left; color:#333; background:#33488d; color:#fff; } .custom #footer_1 ul.sidebar_list li.widget { width:21%; margin-left:2%; margin-right:1%; float:left; margin-bottom:10px; } .custom #footer_1 ul.sidebar_list li.widget h3 { color:#999; font-size:1.15em; } .custom #footer_1 ul.sidebar_list li.widget h3 a { color:#33ccff; } .custom #footer_1 ul.sidebar_list li.widget a { color:#fff; border-bottom:0; } .custom #footer_1 ul.sidebar_list li.widget a:hover { color:#111; } .copyright_notice { background:#077534; height:22px; color:#fff; padding-left:20px; padding-top:10px; border-top:1px solid #444; font-size:1.1em; } .copyright_notice a { color:#fff; } .copyright_notice a:hover { color:#111; } /* 07 - COMMENTS /* ----------------------------------------------*/ /* 08 - PLUGINS /* ----------------------------------------------*/ /* 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/ */