"..." signifies removed unrelevant code.
If Mozilla updates their forms.css then the line number references to forms.css in this document may become inaccurate.

=====
Bug 1:  <input disabled="disabled" name="gender" value="0" type="radio"> (deformed disabled radio button).
=====
    Problem 1: Disabled radio buttons have an ugly border. 
    =========
        Source: Lines 374 - 388 (forms.css):
        ------
            input[type=radio][disabled],
            input[type=radio][disabled]:active,
            input[type=radio][disabled]:hover,
            input[type=radio][disabled]:hover:active,
            ... {
            ...
            border: 1px inset ThreeDShadow ! important;
            ...
            }
        
        Solution:
        --------
            Override this !important declaration with one of our own.  Since our code is appended, it is parsed after the original code in the forms.css which is why we can override its !important declarations.
            
            input[type="radio"][disabled],
            input[type="radio"][disabled]:hover,
            input[type="radio"][disabled]:active,
            input[type="radio"][disabled]:hover:active {
            border: none !important;
            background-color: transparent !important;
            }


=====
Bug 2:  http://www.vietfinsv.net/ (deformed radio buttons).
=====    
    Problem 1: Selected radio buttons are deformed due to border.  
    =========
        Source: Lines 395 to 399 (forms.css):
        ------ 
                 ...
                 input[type="radio"]:hover:active {
                 ...
                 border-style: inset !important;
               }
        Solution: 
        --------
        input[type="radio"]:focus,
        input[type="radio"]:active,
        input[type="radio"]:hover:active {
         border:none !important; 
        }
    Problem 2: Selected radio button background-color overides site's background color.  
    =========
        Source: Lines 395 to 399 (forms.css):
        ------
            ...
            input[type=radio]:hover:active {
            background-color: ThreeDFace ! important;
            ...
            }
      
      Solution: Override the input[type=radio]:hover:active selector's background-color.
      --------  
        input[type="radio"]:hover:active {
          background-color: transparent !important;
        }

        
=====
Bug 3: http://forums.invisionpower.com/index.php?act=Search.  The checkbox to the right of the text "Match Exact Name" is only visible when active and even then the check in looks deformed.
=====
    Source:
    ------
        Isolated HTML code for the checkbox in question (Line 180):
            
            <input type="checkbox" name="exactname" id="matchexact" value="1" class="checkbox" /><label             for="matchexact">Match Exact Name</label>
            
        As you can see it belongs to the class "checkbox".  In imported CSS file http://forums.invisionpower.com/style_images/css_13.css, lines 638 - 644 give the checkbox class elements a transparent background:
        
            ...
            .checkbox,
            ... { 
	            ...
	            background: transparent;
                }
                
        As you can see, the checkbox is given a transparent background.  I have reproduced this situation and the transparent background appears to make the checkbox invisible when inactive and deform the check when the checkbox is active just like on the IPB forums.  From the W3C CSS 2 specs:
            
            "The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet."
            
        As you can see, the background property would overwrite the background-image and background-color properties.  Lines 104 - 110 of forms-extra.css (version 2.3):
            
            input[type="checkbox"] {
              ...
              background-image: url("form-widgets/checkbox.png");
              background-color: -moz-Field;
            }
            
    Solution:
    --------
    
        Add the !important declaration to the background-image property of selector input[type="checkbox"].  This will make the checkbox visible, however, the check is still distorted so I added the !important declaration to the input[type="checkbox"]:checked selector as well.  This seems to have remedied the problem.
