I'm trying to add PT Sans into a newsletter, but for some reason it isn't loading I've copied almost all of the code, but it isn't working. I would be so grateful for anyone who can help.
Here is the CSS code:
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
}
and the HTML code:
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
EDIT:
Here's the rest of the CSS:
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
}
#logo{width:810px}
#saveDateText{
position:relative;
top:30px;
left:80px;
font-size:50px;
color:rgb(228,242,214)
}
#october{
position:relative;
top:0px;
left:90px;
font-size:35px;
color:rgb(228,242,214)
}
#raftLogo{
position:relative;
top:-125px;
left:550px;
}
#saveTheDate {
background-color:rgb(123, 190, 48);
height:170px;
width:810px;
}
#honoring {
position:relative;
background-color:rgb(9, 65, 30);
width:810px;
top:-30px;
font-size:20px;
height:400px;
}
#honoringTextDiv {
position:relative;
width:740px;
left:70px;
top:50px
}
#infoText {
color:white;
font-size:25px;
}
#honoringText {
color:rgb(242, 183, 51);
}
#benifit{
color:white;
font-size:25px
}
#morgridge {
position:relative;
top:20px
}
#sponsorships {
position:relative;
left:20px;
top:-30px;
height:300px;
width:400px;
border-right-style:solid;
border-right-color:rgb(160, 202, 129);
border-right-width:1px;
}
#inventiveSponsorsDiv {
position:relative;
left:425px;
top:-155px
}
#dmns {
position:relative;
top:-40px;
}
#1stbank {
position:relative;
top:80px;
}
#inspirationalSponsors, #inventiveSponsors{
position:relative;
top:0px;
color:rgb(123,190,48);
font-size:18px;
}
#inventiveSponsors {
top:-20px;
}
#names, #names2 {
line-height:25px;
font-size:14px
}
#names2 {
position:relative;
top:-94px;
left:160px;
text-align:left;
}
Try to use URL without "http":
<link href="//fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
Few tips:
1. Use the HTML code in the beginning of your <head>, before anything else. Example:
<head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
/* Rest of the code after this */
</head>
2. If that doesn't work, put this in your CSS file instead:
#import url(http://fonts.googleapis.com/css?family=PT+Sans);
Ask yourself this:
1. Are you developing online or offline (if online check number 2)
2. Make sure your browser does not have a shield icon because this
means the browser is blocking the font and you need to click
the allow button.
3. Check for spelling errors or anything suspicious.
4. Finally #import is the safest way I think.
I had the same problem and if using the CSS tag of:
"font: 3em bold;" ---this overrides the google api call and loads your next default font.
SOLUTION: Use font-style and font-size
Check whether your css file is loaded after vendor stylesheets. For example, bootstrap.css should be before your css file.
I had this issue today. And the metter if you made your test in with a httpsurl you need to change the link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"
by href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet".
Otherwise, there is a conflict issue.
I hope that will hope someone.
Related
I am trying to create a tooltip for my site that gets data from MySQL. everything is working fine but it displays html tags. data is stored in MySQL using tinymce so it does not strip the tags when entered nor I want it to, However I would like it to strip it in the tooltip.
This is my code and screenshot
Thanks in advance.
.tooltip span {
z-index:10;
display:none;
padding:8px 8px;
margin-top:23px;
width:260px;
max-width:260px;
max-height:260px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
color:#ffffff;
overflow:hidden;
}
.tooltip:hover span{
display:inline;
position:absolute;
color:#ffffff;
background:#2588b3;
text-decoration:none;
}
.tooltip:focus span{
display:inline;
position:absolute;
color:#ffffff;
background:#2588b3;
text-decoration:none;
}
Screenshot with text only
Screenshot with image and links
How can I strip the images and links just from the tooltip? I've tried text-decoration but that did nothing.
Thanks once again.
Resolved by writing my own modifier:
save it as smarty/plugins/modifier.strip_tags_exclude.php (or in your custom plugins folder)
function smarty_modifier_strip_tags_exclude()
{
$params=func_get_args();
if (!isset($params[1])) {
$params[1] = true;
}
if ($params[1] === true) {
return preg_replace('!<[^>]*?>!', ' ', $params[0]);
} else {
if (is_string($params[1]))
{
$allowable_tags = strtr($params[1],'[]','<>');
}
return strip_tags($params[0],$allowable_tags);
}
}
and then you can use it this way:
{$variable|strip_tags_exclude:''}
or alternatively (some editors may get confused and think that you're opening tags):
{$variable|strip_tags_exclude:'[a][p][ul][li]'}
I am using external stylesheet for styling my default.aspx page , i am using master page in my project.I am referring to the stylesheet in the master page.
My problem is , i have many dropdowns and textboxes on my form , i am using both classes and id's for each control.When i use class for a particular control in stylesheet changes are reflected ,, however when i use id for styling , changes are not reflected.Controls remain as they were.This must be something really obvious that i may be missing.I am using '.' and '#' for class and id respectively.Any help is much appreciated.
Here is my default.css file
.textbox ,.dropdown,.checkdate1,.checkdate2,.NumZero,.NumLenZero,.NumDecTwo {
margin-bottom:10px;
}
.textbox,.checkdate1,.checkdate2,.NumZero,.NumLenZero,.NumDecTwo {
border:1px solid gray;
}
#disabled {
width:1000px;
margin-left:auto;
margin-right:auto;
color:White;
background-color:red;
text-align:center;
border:1px solid gray;
}
#drpCustType,#drpGender,#drpCountry,#drpMaritalStatus,#drpCorrespAdd,#drpEducation,#drpOccupation {
width:130px;
}
#drpResCity,#drpOffCity,#drpNativeCity {
width:160px;
}
#drpInitial,#drpReligion {
width:100px;
}
#drpBranchName,#drpResState,#drpOffState,#drpNativeState {
width:200px;
}
#drpIdentification {
width:220px;
}
#drpAddressProof {
width:253px;
}
#txtResAdd,#txtOffAdd,#txtNativeAdd {
width:350px;
border:1px solid red;
}
#txtCustNo {
margin-left:2px;
}
#txtBirthDate {
margin-left:8px;
}
#drpIdentification {
margin-left:6px;
}
#drpAddressProof{margin-left:-3px;}
#txtIDExpiryDate{margin-left:14px;}
#txtAddExpiryDate{margin-left:14px;}
#drpResCity,#drpOffCity,#drpNativeCity{margin-left:16px;}
#txtIDIssuedAt{margin-left:8px;}
#txtIDIssueDate{margin-left:1px;}
#drpResState,#drpOffState,#drpNativeState{margin-left:0px;}
#cmdSubmit{margin-left:50%;margin-top:10px;width:80px;height:30px;}
.date,.num{display:none;color:red;font-weight:bold;margin-left:3px;}
/*Custom validator Styling*/
#opendate,#reqdopendate,#birthdate,#restelno,#resmobno,#offtelno,#offmobno,#nativetelno,#nativemobno,#telno,#mobno,#monthincome,#idexpirydate,#addexpirydate,#idissuedate,#addissuedate{color:Red;font-weight:bold;margin-left:3px;}
#birthdate1,#resmobno1,#offmobno1,#nativemobno1,#mobno1,#idissuedate1,#addissuedate1{color:Red;font-weight:bold;margin-left:-7px;}
#easyTooltip {
padding:5px 10px;
border:1px solid #195fa4;
background:#195fa4 url(bg.gif) repeat-x;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
color:#fff;
}
#Validation {
height:auto;
width:auto;
margin-left:20px;
}
Could be a local cache issue? trying clearing you browser cache and reloading page
failing that your id's are wrong. Or you are trying to use it to style something that isn't applicable (margin-top/bottom on an inline element for example)
Is it possible to give a whole set of styles supreme importance?
Ie, early on you might have the following default css:
<link rel="stylesheet" href="/style.css" type="text/css" media="screen" />
and inside it has
body {
background: #000;
}
h1 {
color: #fff;
}
But then(!) you decide to make things exciting and have some more css inside the tag that is the same but different:
<style type="text/css">
body {
background: #fff;
}
h1 {
color: #000;
}
</style>
For whatever reason, the styles inside style.css that are linked in take importance over the ones I'm putting in statically.
What I'd like to know is, is there a way of umbrella'ing a whole bunch of styles so they take the highest importance? The best I know is
<style type="text/css">
body {
background: #fff !important;
}
h1 {
color: #000 !important;
}
</style>
Which starts to get a bit tedious if there are many styles.
add a single class to body, ie body class="stylecatcher" or whatever
then you can style (and override default styles) easily
<style type="text/css">
body.stylecatcher {
background: #fff;
}
.stylecatcher h1 {
color: #000;
}
</style>
I didn't find it to be a good practise to use the !important selector.
What you need is called specificity. From the w3 here and here and adobe link
Typically in CSS if you add a selector that is the same further down in the document, the one closest to the end (the highest line number) will be taken into effect.
<style type="text/css">
body {
background: #000;
}
h1 {
color: #fff;
}
body {
background: #fff;
}
h1 {
color: #000;
}
</style>
The background would be white and the font color black.
I'm new to less css and trying it out. I've done the following
I've added this div
<div class="myclass">This is a test of LESS CSS</div>
and in the mystyles.less, added this
.somepattern(#color: red, #size: 16px) {
font-size:#size;
font-weight:bold;
border:2px solid #color;
}
.myclass {
.somepattern();
}
When I change the syntax to this, it works, which means the problem is in the syntax of caling .somepattern. I tried .somepattern() and .somepattern and somepattern but nothing works. The only thing that works is the plain old way of having the code in the class itself
.myclass {
font-size:16px;
font-weight:bold;
border:2px solid red;
}
You don't have to use .somepattern(); just somepattern;
So:
.somepattern(#color: red, #size: 16px) {
font-size:#size;
font-weight:bold;
border:2px solid #color;
}
.myclass {
.somepattern;
}
You have to use "stylesheet/less" instead of plain "stylesheet" as the rel paramater. It should look like this:
<link href="mystyles.less" media="screen" rel="stylesheet/less" type="text/css" />
I am working with an existing piece of CSS code that looks like this (excerpted from a much larger body of code):
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
/* zoom:1 */ /* IE Sheet */
}
/* a panel container */
.apl_widget_fourLevel .apl_widget_level {
float:left;
position:relative;
overflow:hidden;
text-align:center;
width:102px;
height:150px;
margin:0 1px 0 0;
}
/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_client1 .apl_widget_level {
height:auto;
}
/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level {
height:auto;
width:90px;
}
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected {
width:102px;
}
/* the gray label in the panel
enforce for mini display */
.apl_widget_fourLevel .apl_widget_level .apl_widget_label,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
position:absolute;
top:20px;
left:0;
width:100%;
margin:0;
color:#555;
font-weight:normal;
text-transform:uppercase;
font-size:100%;
line-height:1.0em;
z-index:1;
}
/* offset for mini labels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_label {
margin-top:20px;
font-size:85%;
}
/* label cascade reset for IE6, sigh */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
margin-top:0;
font-size:100%;
}
/* the value displayed in the panel */
.apl_widget_fourLevel .apl_widget_level .apl_widget_value,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
position:absolute;
top:45px;
left:0;
width:100%;
margin:0;
color:#fff;
font-weight:bold;
font-size:28px;
line-height:1.0em;
z-index:1;
}
/* offset for mini value */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_value {
margin-top:15px;
font-size:24px;
}
.apl_widget_fourLevel.apl_widget_client1 .apl_widget_level .apl_widget_value {
margin-top:3px;
font-size:20px;
font-weight:normal;
opacity:0;
-moz-opacity:0;
-webkit-opacity:0;
filter: alpha(opacity=0);
}
/* value cascade reset for IE6, sigh */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
margin-top:0;
font-size:28px;
}
/* range values smaller */
.apl_widget_fourLevel.apl_widget_fourLevelRange .apl_widget_level .apl_widget_value {
margin-top:7px;
font-size:15px;
}
.apl_widget_fourLevel .apl_widget_value a {
color:#fff;
}
/* supplemental value beneath the panel */
.apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore {
position:absolute;
bottom:0px;
left:0;
width:100%;
color:#0072ad;
font-weight:bold;
font-size:28px;
z-index:1;
}
.apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore a {
color:#0072ad;
}
/* low values will be lighter color */
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore,
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore a {
color:#30a2dd;
}
/* the image container element */
.apl_widget_fourLevel .apl_widget_level .apl_widget_panel {
overflow:hidden;
width:100%;
height:135px;
position:relative;
}
/* the panel image itself */
.apl_widget_fourLevel .apl_widget_level .apl_widget_panel img {
position:absolute;
top:0;
left:-5px;
margin-top:-150px;
}
/* Individual Level image offsets */
.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img {
left:-5px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level2 .apl_widget_panel img {
left:-105px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level3 .apl_widget_panel img {
left:-205px;
}
.apl_widget_fourLevel .apl_widget_level.apl_widget_level4 .apl_widget_panel img {
left:-305px;
}
/* mini panel offsets */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_panel img {
margin-top:-300px;
margin-left:-6px;
}
/* reset image offset via margin for highlighted/selected style */
.apl_widget_fourLevel .apl_widget_level.apl_widget_levelSelected .apl_widget_panel img {
margin:0;
}
My major problem with this is the complexity: every rule has 3-5 selectors on it, making it really hard to figure out which rule applies. There are 25 rules here for styling four buttons with text. It can't be that hard!
Some background: this CSS styles a widget that shows four bitmapped images, one of which is selected, from a single bitmap using CSS sprites. Unselected images come from one row of the large bitmap and the image in the selected state comes from another row. The selected image is put into a box that is wider and taller than the boxes of unselected images.
So is there a program that will simplify this to something cognitively manageable? Is there a tool that can identify which values are unnecessary because they are replaced by more specific selectors? Are there best practices for dealing with CSS so that you don't get unnecessarily selective paths?
Update: 2010-08-31 12:25
So I looked into less as a way of conceptualizing the CSS code. And because my code isn't in less, I looked up css2less. Here is an excerpt of what css2less produces on the code in question:
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
.apl_widget_level.apl_widget_level1 {
.apl_widget_panel {
img {
left:-5px;
}
}
}
.apl_widget_level.apl_widget_level2 {
.apl_widget_panel {
img {
left:-105px;
}
}
}
.apl_widget_level.apl_widget_level3 {
.apl_widget_panel {
img {
left:-205px;
}
}
}
.apl_widget_level.apl_widget_level4 {
.apl_widget_panel {
img {
left:-305px;
}
}
}
....
}
So here's the thing: apl_widget_levelX are actually unique. I think a good tool could generate this:
img#apl_widget_level1 { left:-5px; }
img#apl_widget_level2 { left:-105px; }
img#apl_widget_level3 { left:-205px; }
img#apl_widget_level4 { left:-305px; }
.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
....
}
Similar comments for the selected/unselected elements.
I like where the answers are going but I am looking for tools to make my life easier. The full CSS code in this file is 2500 lines and the entire suite is 11000 lines.
Update: 2010-09-01 09:50
This is what I turned it into by hand:
ul.apl_widget_content {
width: 492px;
height: 140px;
position: relative;
}
ul.apl_widget_content li {
background: url(/home/hbrown/tmp/widget_fourlevel_1.png) no-repeat;
list-style: none;
display: inline;
position: absolute;
text-align:center;
text-transform:uppercase;
}
#apl_widget_level1 {
left:5px; top: 0px;
background-position: -13px -300px;
width: 86px; height: 133px;
}
#apl_widget_level2 {
left:105px; top: 0px;
background-position: -113px -300px;
width: 86px; height: 133px;
}
#apl_widget_level3 {
left:205px; top: 0px;
background-position: -213px -300px;
width: 86px; height: 133px;
}
#apl_widget_level4 {
left:305px; top: 0px;
background-position: -313px -300px;
width: 86px; height: 133px;
}
#apl_widget_level1s {
left:5px; top: 0px;
background-position: -5px 0px;
width:102px; height: 133px;
}
#apl_widget_level2s {
left:105px; top: 0px;
background-position: -105px 0px;
width:102px; height: 133px;
}
#apl_widget_level3s {
left:205px; top: 0px;
background-position: -205px 0px;
width:102px; height: 133px;
}
#apl_widget_level4s {
left:305px; top: 0px;
background-position: -305px 0px;
width:102px; height: 133px;
}
div.apl_widget_label {
padding-top: 35px;
font-size: 85%;
font-weight:normal;
top: 20px;
line-height:1em;
}
.selected .apl_widget_label {
padding-top: 15px;
}
div.apl_widget_value {
font-size:24px;
margin-top:10px;
}
.selected div.apl_widget_value {
margin-top:15px;
}
.apl_widget_value a {
text-decoration:none;
color:#FFF;
}
Previously 175 lines. Now 75 lines. Most of the code (40 lines) does the CSS spriting.
Update 2010-09-01 11:30
HTML now looks like:
<ul class="apl_widget_content">
<li id="apl_widget_level1">
<div class="apl_widget_label">Level </div>
<div class="apl_widget_value">1</div>
</li>
<li id="apl_widget_level2">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">2</div>
</li>
<li id="apl_widget_level3s" class="selected">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">3</div>
</li>
<li id="apl_widget_level4">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">4</div>
</li>
</ul>
HTML previously looked like:
<div class="apl_widget_strand_fourLevel apl_widget_fourLevelMini">
<div class="apl_widget_content">
<div class="apl_widget_level apl_widget_level1 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">1</div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level2 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">2</div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level3 apl_widget_levelSelected">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">3</div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
<div class="apl_widget_level apl_widget_level4 ">
<div class="apl_widget_label">Level</div>
<div class="apl_widget_value">4</div>
<div class="apl_widget_panel">
<img alt="" src="widget_fourlevel_1.png">
</div>
</div>
</div>
</div>
The following are just comments; It's hard to give definitive answers to questions like this, esp. when the HTML structure is not available.
The first thing that really got me was the long class names. When you've got so much repetition within the name of the classes, I think you're doing something wrong. Names like
.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img
Really should be shortened to (something like):
.apl_widget .fourlevel .panel img
Especially when your selectors are basically 90% repetitive, like
.apl_widget_level.apl_widget_level1
There's just no point for this! In CSS, the cascade guarantees inheritance, so adding a prefix too all your class names is just necessary. Surely if you've gotten to the point of indexing your class names, its time to swap them out for ids, like
#level1
It may seems small, but it really does make CSS more maintainable if you've got selectors that are compact and less repetitious - at least you won't be spending so much time scanning through selectors.
If the HTML structure of the widget is the same throughout the code, then you can actually swap out some of the classes for elements. It will of course reduce style reusability, but given that widgets are often do not share the same structure and design as the rest of the page, it should be possible for simpler widget styles to skimp on classes. Selectors like (say)
.profile img
would certainly be better than to just give that img a class - its both immediately obvious what you're doing, and easy to maintain at the same time.
Something else you might want to do is to only code for special cases, like this very simplified case
a {
color: white;
background: #666;
text-decoration: none;
}
a.special {
color: #B8E9FF;
}
a.brilliant {
color: #FFAFAF;
}
Also, remove the repeated classes that stays the same within each case. Again, use the Cascade to its full potential.
3-5 selectors max is not unusual. 3-5 for every one of them is, though. The CSS selectors should logically go from simple to complex, as more cases are added. Thus, try finding the base of the widget, define a default, and code your way up.
The code snippet itself is not too bad except for the inclusion of too many and overly long class names. Rewriting from the bottom up though can often lead to optimizations, esp. if the requirements of the project has changed since the last developer (We don't need to support IE6 anymore, hurray!) But again, without seeing the structure it's hard to make definitive solutions.
Based on the posted HTML I'd suggest following changes:
The inner classes apl_widget_label and apl_widget_value are unnecessary and can simply replaced with unique elements (that is unique within the li). This may make the selectors slightly longer, but much better structured and more readable. Also the div around the link is unnecessary as the link can be styled directly.
<ul class="apl_widget_content">
<li id="apl_widget_level1">
<div>Level </div>1
</li>
...
with
.apl_widget_content li div {
padding-top: 35px;
font-size: 85%;
font-weight:normal;
top: 20px;
line-height:1em;
}
.apl_widget_content li.selected div {
padding-top: 15px;
}
.apl_widget_content li a {
font-size:24px;
margin-top:10px;
text-decoration:none;
color:#FFF;
display: block;
}
.apl_widget_content li.selected a {
margin-top:15px;
}
You also can move the top, width and height properties in the level rules to the ul.apl_widget_content li(.selected) rules:
ul.apl_widget_content li {
...
top: 0px;
width: 86px;
height: 133px;
}
ul.apl_widget_content li.selected {
width:102px;
}
#apl_widget_level1 {
background-position: -13px -300px;
}
It would be great if you could get rid of the "selected level" IDs (the ones ending with s), but I can't think of a reasonable way which still supports IE6.
I just see that you have set the li to display: inline while keeping block elements insde them. You'll need to be careful with that, because despite being technical correct CSS its exact rendering is not really defined. You may consider display: inline-block or float: left instead.
If it's just for four buttons, I'd pull the page up in a modern browser and use a development toolkit (Firebug in Firefox, Dragonfly in Opera, the WebKit developer tools in Safari/Chrome) to inspect the buttons in question and see what the effective styles are on each.
You might want to go over this article I read not too long back, it has a really good overview of the pro's and con's of organizing your css. I'd also take a look at the bottom of the article it has some links to some more information.
From the looks of things your widget styles did seem to go a little overboard with the classitis, but at least its documented, I can't count the number of times I've seen undocumented css classes.
i think that you need to change the name of your clases, i see that you are using ".apl_widget_label" for almost everything and styling the element depending on the selectors.
for example:
/* the gray label in the panel
enforce for mini display */
.apl_widget_fourLevel .apl_widget_level .apl_widget_label,
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
why not create another class called "mini-display" and then your element would be like:
<div class=".apl_widget_label mini-display">..</div>
and your css would be:
.mini-display{..}
if you don't like it... i've seen some people that creates the classes like this
<div class="left margin-auto big red ...">..</div>
where each class changes something specific on the element (i.e left => float:left;). And they have like a library of classes that they always use.