/* 
	Document:				screen.css
	Creation date: 			24 September 2007
	Created by:				Gemma Leigh
	This version:			*** Commented for development ***
	Deployment version:		Spinvox/css/style.css
	Notes:					Imports reset and style-main (the main site stylesheet) CSS files. 
							Contains commonly used helper styles.
								
	=================================================================
	Style guide, naming conventions, best practices.
	=================================================================
	
	Use a common naming system:
		#parent .parent-child {
			margin:0px auto;
		}
	
	Filtering for non-compliant browsers:
		.class-name {
			margin: 10px 0 !important;  This will be applied by all browsers
			margin: 5px 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 [selector]				IE < v7 only
		html>body [selector]			Standards compliant browsers only
		_margin							Underscore hack
	
	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;
	
	// IMAGE REPLACEMENT //

	Image replacement should be achieved as follows:
		
		// Gilder/Levin method for images with solid backgrounds
		// Works in JAWS. Issues: extra empty span, transparent images don't hide text.
		
		// For a non-link element	
		#my-id {
			width: Xpx; 
			height: Xpx;
			}
		#my-id em{
			background: url(X.gif);
		}
		<p id="my-id" class="replace"><em></em>Some text</p>
		
		// Phark method for images with transparent backgrounds
		// Works in JAWS. Issues: nothing shows up under "images off, css on" scenarios, doesn't work in IE5.
		
		// For a non-link element:
		#my-id {
			width: Xpx; 
			height: Xpx;
			background: url(X.gif);
			}
		<p id="my-id" class="phark-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="phark-replace"><a href="http://www.pokelondon.com" title="Go to Poke">Poke</a></p>
		
		
	Rollovers should be achieved as follows:
		// Same as Phark 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="roll-replace"><a href="http://www.pokelondon.com" title="Go to Poke" class="rollover">Poke</a></p>

	*/

	@import "reset.css";
	@import "style-main.css";
		
	
/* =Helper styles
--------------------------------------------------------------------- */

/* Floats and clear */
.left  {
	float:left;
}
.right {
	float:right;
}
.clear {
    clear:both;
}

/* Clearfix - clear the container div in the absence of a child clearing div */
.clearfix:after {
 	content: ".";
	height: 0 !important;
	visibility: hidden;
 	display: block;	
 	clear: both;
}

/* ie7 */
.clearfix {
	overflow:hidden;
}

/* ie6 */	
* html .clearfix {
	height: 1%;
	overflow: visible;
}

/* Hidden text or use to position tracking tags offscreen */
.hidden	{
	position:absolute; 
	left:0; 
	top:-10000px; 
	width:0; 
	height:0; 
	overflow:hidden;
}

/* Image replacement using the Gilder/Levin method for images with solid backgrounds 
	// Text remains in place on screen, so can be seen with CSS on but images off */
.replace {
	position: relative; 
	overflow: hidden;
}
.replace em,
.replace a{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
}

/*  Image replacement using the Phark method for images with transparent backgrounds 
	// Text indented off screen, cannot be seen with CSS on but images off  - still read by screen readers */
.roll-replace { 
	overflow: hidden; /* prevents dotted lines extending offscreen in FF */
	background-repeat: no-repeat;
	text-indent: -9000px;
}
	
.roll-replace a { 
	display: block; 
	width: 100%; 
	height: 100%;
}

/* Rollovers */
.rollover:hover, 
.rollover:active, 
.rollover:focus {
	background-position: bottom!important;
}

/* =Skip navigation
--------------------------------------------------------------------- */
#skipnav {
	position: absolute;
	top: -9000px;
	left: 0;
}
	
#skipnav li {
	width: 300px;
}

#skipnav a {
	position: absolute;
	top: 0;
	padding: 10px;
}

#skipnav a:active, 
#skipnav a:focus {
			top: 9000px;
}