/* boxmodelhack.css */
/* (CC) 2001-2006 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.5                   */
/* This style sheet is licensed under a Creative Commons License. */


.ahem { display: none }


body { font-size:10px; font-family:Verdana,sans-serif }
code,pre { font-size:11px; font-family:"Courier New",monospace;background:#cc9; padding:0 0.5em }
pre { padding:0.5em }
blockquote { margin:0.5em }
blockquote p { margin:0 }

.width300 { border-left:300px solid red }
.width400 { border-left:400px solid blue }

p.ruletest { color:red }

div.boxtest { 
 border:20px solid; 
 padding:30px; 
 background: #ffc; 
 width:300px;
}

div.content { 
 border:20px solid; 
 padding:30px;
 background: #ffc;
}

div.content { 
 width:400px; 
 voice-family: "\"}\""; 
 voice-family:inherit;
 width:300px;
} 
  /* CSS1 UAs should see and use 2nd width */

html>body .content { width:300px } 
  /* One more chance for conforming UAs to get it right using a CSS2 selector.
     This is the "be nice to Opera 5" rule, as Opera 5 seems to
     have trouble with the escaped quotes and close brace as well.
     Note the lack of spaces around the '>'.  This is required to avoid other browser bugs. 
     In addition, this rule helps less capable UAs "fix up" their rule parsing,
     which can be derailed by the "\"}\"" value. 
     20010406Note: Thanks to Todd Fahrner for suggesting html>body .content instead of
     what I had previously which was body>.content . The new selector is more general purpose. */

p.ruletest { color: blue }



/* 

   When parsing this rule above:

	div.content { 
	 width:400px; 
	 voice-family: "\"}\"";
	 voice-family:inherit;
	 width:300px;
	} 

   All conforming CSS user agents will see and use the second width declaration.
   
1. User agents which don't support the CSS2 content property will skip 
   over it and its value, but will parse the remainder of the rule.
   
2. User agents which do support the CSS2 content property will properly 
   parse its value, and continue parsing afterwards as well.

   IE5/Windows (and IE5.5/Windows) has trouble with the escaped quotes and 
   close brace '}', hence it prematurely closes the rule, and only uses 
   the first width declaration, and thus treats:

	div.content { 
	 width:400px; 
	 voice-family: "\"}\"";
	 voice-family:inherit;
	 width:300px;
	} 

   as
  
    div.content { 
     width:400px; 
    } 

   and thus the first width is applied.
   
   This technique can be used to send special "fix up" styling to 
   IE5/Windows and IE5.5/Windows, which can then be properly overriden
   with additional declarations in the same rule which are properly seen by
   conforming CSS user agents.

*/