/* 

	Document:					layout.css
	This version:				*** Commented for development - do not deploy - create deployment version with w3compiler ***
	Deployment version:		    E:\WCS Deployment Files\Topman\style\css\site_layout.css
	Documentation:				svn/Documentation/Zoom User Guides/layout.css.doc
	Notes:						Generic file for all brands

	Standard CSS practices in use across all brands
	=================================================================
	
	Each CSS file should follow the same structure, documented at the top of each file
	
	All sites are designed to work primarily with IE7 and Firefox 2
	
	Styles should be in lower case, separated with underdscores where possible and be indented as follows:	
		.class_name {
			[properties]
			}
	
	Filtering for non-compliant browsers:
		.class_name {
			margin: 20px 0 !important;  This will be applied by all browsers
			margin: 10px 0; 						IE < v7 will then override the above with this value
			}

	Do not use the following filters unless absolutely necessary and always comment reasons for use:
		html:not([dummy]) [selector]	Firefox and Safari (ie *not* IE7)
		* html [selector]							IE < v7 only
		Example:
		body { 
			background: red; 						General style for all browsers
			}
		html:not([dummy]) body { 
			background: green;					Firefox and Safari will accept this
			} 
		* html body {
			background: blue;						IE 6 will accept this
			}
		Summary: IE7 will be red, IE6 blue, all other browsers green		
	
	Please do not use any other filters, such as the one below
		html > body [selector]				Standards compliant browsers only
		_margin												Underscore hack
	
	Text should be in proper English (ie uppercase and lowercase should be applied in CSS)
	
	Acronyms should be underlined and make use of the help cursor
	
	All links should have hover, active, focus, and visited states and should be visible via text-decoration and/or color
	
	All submit and button inputs should make use of the hand cursor
	
	All new_window links should have an icon to demonstrate the change in focus
	
	Avoid absolute positioning and negative values where possible
	
	Use shorthand where possible:
		background: url() top left no-repeat #FF0;
		border: 1px #F0F solid;
		font: 12px/1.4 "Trebuchet MS", Verdana, Arial, sans-serif;
		margin: 20px 0 0 5px;
	
	Avoid use of display:none and visibility:hidden as screen readers cannot see the content
	
	The "accessify" menu should have the same styles across all brands:
		#accessifynav {
			position: absolute;
			top: -9000px;
			left: 0;
			}
		#accessifynav li {
			width: 300px;
			}
		#accessifynav a {
			position: absolute;
			top: 0;
			text-transform: none;
			background: #FFF;
			color: #000;
			padding: 10px;
			}
		#accessifynav a:active, #accessifynav a:focus {
			top: 9000px;
			}
	
	The "prodlistwrapper" should use the same clearfix method to fix the guillotine bug across all brands:
		.prodlistwrapper:after {
			content: ".";
		  display: block;
		  height: 0 !important;
			height: 1%;
		  clear: both;	NB: you will need to float the parent divs to ensure this works correctly 
		  visibility: hidden;
			}
	
	Image replacement should be achieved as follows:
		// For a non-link element:
		#my_id {
			width: Xpx; 
			height: Xpx;
			background: url(X.gif);
			}
		<p id="my_id" class="replace">Some text</p>
		// For a link element with no rollover (note the background is applied to the <a> element):
		#my_id a {
			width: Xpx; 
			height: Xpx;
			background: url(X.gif);
			}
		<p id="my_id" class="replace"><a href="http://www.google.com" title="Go to Google">Google</a></p>
		
		
	Rollovers should be achieved as follows:
		// Same as image replacement method but note the additional class="rollover" on the <a> element
		// This will create a "sliding doors effect", the off state aligned top left, the on state aligned bottom left
		#my_id a {
			width: Xpx; 
			height: Xpx;
			background: url(X.gif);
			}
		<p id="my_id" class="replace"><a href="http://www.google.com" title="Go to Google" class="rollover">Google</a></p>
		
	Image maps should be created as follows:
		xxxxxxx
	*/


	@import "site_layout.css";