/* 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/ */ * { padding: 0; margin: 0; } a { color: #487795; text-decoration: none; } body.custom { background: #999999; background-color:#FFFFFF; color:#666; font: "Trebuchet MS", Arial, Helvetica, sans-serif; } .custom #container { margin-top: 0em; margin-bottom: 0em; padding: 0em; background: #fff; border: 1px solid #EEEEEE; } .custom #page { background: #fff; margin: 2px; padding: 0; } .custom h1, .custom h2, .custom h2 a { font-size: 13px; font-weight: bold; } /*---:[ sidebar styles ]:---*/ .custom #content {background-color:#fff; } .custom #content_box {background:none;} .custom #content_box {background-color:#fff;} .custom #sidebar_1 { border: 0px #fff solid; } .custom .sidebar { background: #fff; } .custom .sidebar ul.sidebar_list { padding-left: 0em; padding-right: 0em; } .custom li.widget { background: #fff; padding: 0em 0.2em 0.2em 0.2em; border-left:0px #487795 solid; margin-bottom: 6px;} /*---:[ sidebar styles ]:---*/ .sidebar a:hover { text-decoration: underline; } ul.sidebar_list { list-style: none; } li.widget { width: 92%;} li.centered { text-align: center; } li.widget p a { text-decoration: underline; } li.widget p a:hover { text-decoration: none; } li.widget ul { list-style: none; padding: 0 .5em 0 .5em;} li.widget ul li .num_comments { color: #111; } /*---:[ widget box styles ]:---*/ li.widget .widget_box { background: #e3f0f2; border-style: solid; border-color: #addde6;} /*---:[ subscriptions widget ]:---*/ .thesis_widget_subscriptions .sub_rss a { padding-left: 20px; background: url('images/icon-rss.gif') 0 50% no-repeat; } .thesis_widget_subscriptions .sub_email a { padding-left: 20px; background: url('images/icon-email.gif') 0 50% no-repeat; } /*---:[ google custom search ]:---*/ li.thesis_widget_google_cse form input[type="text"] { width: 95%; } li.thesis_widget_google_cse form input[type="submit"] { font-weight: bold; color: #111; background: url('images/submit-bg.gif'); border: 3px double #999; border-top-color: #ccc; border-left-color: #ccc; cursor: pointer; } li.thesis_widget_google_cse form input[type="submit"]:hover { color: #2361a1; } /*---:[ calendar widget ]:---*/ #calendar_wrap { width: 98%; padding: 0 1%; } #calendar_wrap a { font-weight: bold; } #calendar_wrap a:hover { background: #ddd; text-decoration: none; } table#wp-calendar { width: 98%; border-collapse: collapse; } table#wp-calendar caption { font-weight: normal; text-transform: uppercase; letter-spacing: 1px; background: #e5e5e5; } table#wp-calendar th { width: 14%; background: #f2f2f2; border-bottom: 1px solid #ddd; text-align: center; } table#wp-calendar td { width: 14%; color: #888; text-align: center; } table#wp-calendar td#next, table#wp-calendar td#prev { width: 45%; text-transform: uppercase; letter-spacing: 1px; } table#wp-calendar td#next { text-align: right; } table#wp-calendar td#prev { text-align: left; } .custom #header { border-bottom: 1px solid #E4ECD4; clear: both; height: 94px; background-color:#FFFFFF; background-image:url(../../../../../images/WebWorx4U_logo_m.jpg); background-repeat:no-repeat; background-position:top right; background-position: 3% 52%; } .custom #header #tagline { font-weight: normal; font-size: 11px; float:right; color: #9B9B9B; width: 500px; margin-top: 84px; text-align:right; font-family:Arial, Helvetica, sans-serif;} /*---:[ form inputs ]:---*/ input, textarea { font-size: 1em; color: #444; background: #fff; border: 1px solid #487795; border-right-color: #ddd; border-bottom-color: #ddd; } input:focus, textarea:focus { background: #EAEAEA; border-color: #777; border-right-color: #ccc; border-bottom-color: #ccc; } .sidebar .text_input { width: 95%; } input.form_submit { font-weight: bold; color: #111; background: url('images/submit-bg.gif'); border: px double #999; border-top-color: #ccc; border-left-color: #ccc; cursor: pointer; width: auto !important; overflow: visible; } #commentform input.form_submit { border-width: 3px; } input.form_submit:hover { color: #090; } /*---:[ headlines and bylines ]:---*/ h1, h2, h3, h6 { font-weight: normal;} h4, h5 { font-weight: bold; } h5, h6 { text-transform: uppercase; letter-spacing: 1px; } .format_text h2.top, .format_text h3.top { margin-top: 0 !important; } .sidebar h3 { font-variant: small-caps; letter-spacing: 0px; color: #000; font-weight: bold; font-size: 13px; width: 218px; line-height: 24px; background:transparent url(../../../../images/bg-sidebar-green.gif) no-repeat; background-position: px 0px; padding: 0 .5em 0em .5em;} h2 a { color: #487795; } h2 a:hover { color: #000; } /*---:[ multimedia box ]:---*/ .custom #multimedia_box { width: 100%; } .custom #image_box { background: #fff; border-bottom: 0px solid #ddd; } .custom #image_box img { display: block; background: #fff; border-style: solid; border-color: #fff; } /*---:[ video box styles ]:---*/ .custom #video_box { background: #fff; } /*---:[ custom box styles ]:---*/ .custom #custom_box { background: #fff; border-bottom: 0px solid #ddd; } /* MENU */ /* Overall main navigation styles */ .custom #nav, .custom #nav ul { float: left; list-style: none; line-height: 1em; color: #939393; background-color: transparent; font-weight: bold; padding: 0; margin: 0; background-color:#487795; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; font-variant: small-caps; } /* -------------------------- */ /* The top main navigation links */ .custom #nav { background:#487795; width: 900px; border-bottom: 4px solid #BEBEBE; border-right: 1px solid #BEBEBE; border-top: 0px solid #BEBEBE; /*ie6 hack */ width: 100%; /* to contain floats <=ie6 */ overflow: auto; /* contain floats for other browsers */ height: 38px; } .custom #nav a { display: block; padding: 5px 18px; color: #fff; background: url(../---wx/line.jpg) no-repeat top right; /* puts a "bar" on right of the main nav links */ text-decoration: none; padding-top: 12px; padding-bottom: 12px; } .custom #nav li { float: left; padding: 0; border-right: 1px solid #999; } .custom #nav li .first { border-left: 1px solid #999; } /* -------------------------- */ /* The dropdown links lists */ .custom #nav li ul { position: absolute; left: -999em; height: auto; width: 220px; font-weight: normal; border: 1px solid #999; background-color: #487795; margin: 0; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:11px; line-height: 2em; } .custom #nav li li { padding: 0; width: 220px; height: 32px; border-bottom: 1px solid #999; padding-top: 1px; } .custom #nav li ul a { padding: 5px 10px; * html width: 100px; } /* This controls the flyout location of the second level dropdowns */ .custom #nav li ul ul { margin: -2em 0 0 220px; } .custom #nav li:hover ul ul, .custom #nav li:hover ul ul ul, .custom #nav li.sfhover ul ul, .custom #nav li.sfhover ul ul ul { left: -999em; } .custom #nav li:hover ul, .custom #nav li li:hover ul, .custom #nav li li li:hover ul, .custom #nav li.sfhover ul, .custom #nav li li.sfhover ul, .custom #nav li li li.sfhover ul { left: auto; } /* -------------------------- */ /* Here is the background of the main nav link while looking at the dropdown */ .custom #nav li a:hover, .custom #nav li.hover .custom #nav a li.hover { background-color: #B3B3B3; color:#000; } /* ie FIX - PREVENT FROM HANGING */ #nav li:hover ul, #nav li.sfhover ul #nav li.hover ul { top: auto; left: auto; background-position: 0 0; } /* -------------------------- */ /* The dropdown links list colors */ .custom #nav li ul.under a { #nav li ul.under a { background-image: none; } /* -------------------------- */ /* The background of the second level links while looking at the dropdown under it... */ .custom #nav li ul.under li:hover a.daddy, .custom #nav li ul.under li.sfhover a.daddy { color: #fff; font-size: 9px; } .custom #nav li ul.under li:hover, .custom #nav li ul.under li.sfhover { color: #fff; font-size: 9px; } /* -------------------------- */ /* -------------------------- */ /* If you need to have a second set of drop menus on the same page (No!!!), they need to have a set of styles as well. If they need to look the same, you could fold these references to #secnav into the styles above. Otherwise - a separate CSS file would be the way to go. I've included them here for this example... */ /* -------------------------- */ /* Begin our secondary navigation styles */