/**
 * HTML5 Boilerplate
 *
 * style.css contains a reset, font normalization and some base styles.
 *
 * Credit is left where credit is due.
 * Much inspiration was taken from these projects:
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
 */


/**
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */

/* _________________________________________________

320 and Up boilerplate extension

Author: Andy Clarke
Version: 0.9b
URL: http://stuffandnonsense.co.uk/projects/320andup/
_____________________________________________________

1.ROOT
2.HEADINGS
3.TYPOGRAPHY
4.LINKS
5.FIGURES & IMAGES
6.TABLES
7.FORMS (See css/mylibs/forms.css)
8.BANNER header[role="banner"]
9.NAVIGATION nav[role="navigation"]
10.CONTENT
11.MAIN div[role="main"]
12.COMPLIMENTARY div[role="complementary"]
13.CONTENTINFO footer[role="contentinfo"]
14.GLOBAL OBJECTS
15.VENDOR-SPECIFIC 
16.TEMPLATE SPECIFICS
17.MODERNIZR

COLOURS 

*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block; }

abbr[title] { 
border-bottom: 1px dotted; 
cursor: help; }

/* 1.ROOT */

html {
overflow-y: scroll;
background: rgb(255,255,255) /* url(../img/tmp/grid.png) repeat-y 50% 0 */; }

body { 
margin: 0 auto;
padding: 0;
width: 90% /* 252px */;
font: 100%/1.4 Cambria, Georgia, Times, "Times New Roman";
color: rgb(40,40,40); 
background-color: transparent; }

/* 2.HEADINGS */

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
font-weight: bold; }

h1 { 
margin-bottom: .75em;
font-size: 3em; /* 48 / 16 = 3 */
line-height: 1.2; }

h2 { 
margin-bottom: .75em;
font-size: 2em; /* 36 / 16 = 2 */
line-height: 1.2; }

h3 { 
margin-bottom: 1em;
font-size: 1.5em; /* 24 / 16 = 1.5 */
line-height: 1.3; }

h4 { 
margin-bottom: 1.25em;
font-size: 1.25em; /* 20 / 16 = 1.25 */
line-height: 1.25; }

h5 { 
margin-bottom: 1.5em;
font-size: 1em; /* 16 / 16 = 1 */ }

h6 { 
font-size: 1em; /* 16 / 16 = 1 */ }

/* 3.TYPOGRAPHY */

p, 
ol, 
ul, 
dl, 
address { 
margin-bottom: 1.5em; 
font-size: .9em; /* 16 / 16 = 1 */ }

address { 
font-size: .8em; /* 16 / 16 = 1 */ }

ul, 
ol { 
margin: 0 0 1.5em -24px; 
padding-left: 52px; }

ul { 
list-style-type: disc; }

ol { 
list-style-type: decimal; }

li ul, 
li ol { 
margin: 0;
font-size: 1em; /* 16 / 16 = 1 */ }

dl, 
dd { 
margin-bottom: 1.5em; }

dt { 
font-weight: normal; }

blockquote  { 
margin: 0 0 1.5em -24px; 
padding-left: 24px; 
border-left: 1px solid rgb(200,200,200);
font-style: italic; }

blockquote:before, 
blockquote:after, 
q:before, 
q:after {
content: '';
content: none; }

b, 
strong	{ 
font-weight: bold; }

i, 
em { 
font-style: italic; }

sup, 
sub { 
position: relative;
font-size: 75%; 
line-height: 0; }

sup { 
top: -.5em; }

sub { 
bottom: -.25em; }

address { 
font-style: normal; }

pre { 
margin-bottom: 1.5em; 
white-space: pre; 
white-space: pre-wrap; 
word-wrap: break-word; }

pre, 
code { 
font: .875em 'andale mono', 'lucida console', monospace; 
line-height: 1.5; }

small {
font-size: 1em; /* 16 / 16 = 1 */ }

/* 4.LINKS */

a, 
a:visited {
outline: none;
color: rgb(23,119,175);
text-decoration: none; }
 
a:hover { 
outline: none;
color: rgb(40,40,40); 
text-decoration: underline; }
 
a:active, 
a:focus { 
outline: none;
color: rgb(0,0,0); }

/* 5.FIGURES & IMAGES */

figure {
margin-bottom: 1.5em; }

figure img,
figure object,
figure embed {
margin-bottom: .75em;
max-width: 100%; }

figcaption {
display: block;
font-weight: normal; }

/* 6.TABLES */

table { 
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 1.4em; 
width: 100%;
font-size: .875em; /* 14 / 16 = .875 */ }

th { 
font-weight: bold; }

th, td, caption { 
padding: .25em 10px .25em 5px; }

tfoot { 
font-style: italic; }

caption { 
background-color: transparent; }

/* 7.FORMS (See css/mylibs/forms.css) */

/* 8.BANNER */
/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLIMENTARY */
/* 13.CONTENTINFO */

/* 14.GLOBAL OBJECTS */

.clearfix { 
zoom: 1; }

.clearfix:before, 
.clearfix:after { 
content: "\0020"; 
display: block; 
height: 0; 
overflow: hidden; }

.clearfix:after { 
clear: both; }

/* 15.VENDOR-SPECIFIC */

body {
-webkit-text-size-adjust: 100%; 
-ms-text-size-adjust: 100%; }

a:link { 
-webkit-tap-highlight-color: rgb(173, 137, 34); }

::-webkit-selection { 
background: rgb(173, 137, 34); 
color: rgb(250,250,250); 
text-shadow: none; }

::-moz-selection { 
background: rgb(173, 137, 34); 
color: rgb(250,250,250); 
text-shadow: none; }

::selection { 
background: rgb(173, 137, 34); 
color: rgb(250,250,250); 
text-shadow: none; }

/* input[type=search] {
-webkit-appearance: none; }

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
display: none; } */

::-webkit-input-placeholder {
padding: 10px;
font-size: .875em; 
line-height: 1.4; }

input:-moz-placeholder { 
padding: 10px;
font-size: .875em; 
line-height: 1.4; }

.ie7 img,
.iem7 img { 
-ms-interpolation-mode: bicubic; }

div,
input,
textarea  { 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }

/* Non-semantic helper classes */

/* Image replacement */
.ir { 
display: block; 
text-indent: -999em; 
overflow: hidden; 
background-repeat: no-repeat; 
text-align: left; 
direction: ltr; }

/* Hide for screenreaders and visual browsers */
.hidden { 
display: none; 
visibility: hidden; }

/* Hide visually */
.visuallyhidden { 
position: absolute;
clip: rect(0 0 0 0); 
overflow: hidden;
margin: -1px;
padding: 0;
height: 1px;      
width: 1px;
border: 0; }

/* Allow an element to be focusable via keyboard  */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { 
position: static;
clip: auto; 
overflow: visible;
height: auto; 
margin: 0;   
width: auto; }

/* Hide but maintain layout */
.invisible { 
visibility: hidden; }

/* 16.TEMPLATE SPECIFICS */

#goog-fixurl ul  {
list-style-type: none; }

#goog-fixurl input  {
margin-bottom: 1.5em; }

/* 17.MODERNIZR */




/**
 * Primary customized styles that (are supposed to) apply to any display size
 *
 * Author: Christian Ziebarth
 */
 
BODY
{
	background-color: #000000;
	color: #FDF5E6;
	font-family: Georgia, "Times New Roman", Times, serif;
}

A, A:link, A:active, A:visited
{
	color: #AD8922;
	color: hsl(44, 67%, 41%);
}

A:hover
{
	color: #81A15E;
}

A:visited:hover
{
	color: #FFFFFF;
}
 
HEADER
{
	background-repeat: no-repeat;
	border-bottom: 1px solid #CCCCCC;
}

#container
{
	background-image: url(../img/greysq.gif);
	border: 1px solid #CCCCCC;
	margin: 1em auto;
	padding-bottom: 1em;
	word-wrap: break-word;
}

#main
{
	margin-right: 1em;
	min-height: 766px;
}

#main P, #main UL
{
	margin-top: 1em;
	margin-bottom: 1em;
}

#main P
{
	text-align: justify;
}

VIDEO
{
	display: none; /* Turning off video (for now) in non-webkit browsers */
}

/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */
h1, h2, h3, h4, h5, h6
{
	font-weight: bold;
	margin: 1em 0px;
	padding-bottom: 4px;
	text-shadow: 1px 1px 1px #000000;
}

#main H1
{
	border-bottom: 2px dotted #AD8922;
	border-bottom: 2px dotted hsl(44, 67%, 41%);
	color: #AD8922;
	color: hsl(44, 67%, 41%);
	font-size: 197%;
}

#main H2
{
	border-bottom: 2px dotted #AD8922;
	border-bottom: 2px dotted hsl(44, 67%, 41%);
	color: #AD8922;
	color: hsl(44, 67%, 41%);
	font-size: 182%;
}

#main H3, #main H4
{
	border-bottom: 2px dotted #AD8922;
	border-bottom: 2px dotted hsl(44, 67%, 41%);
	color: #AD8922;
	color: hsl(44, 67%, 41%);
	font-size: 167%;
}

#main H4
{
	font-size: 150%;
}
	
#mobileOnly
{
	background-color: #000000;
	background-color: rgba(0, 0, 0, .3);
	border: 1px solid #AD8922;
	border-radius: 5px;
	display: block;
	margin: 1em auto 0em;
	padding: 0px 6px;
}
	
#mobileOnly P
{
	text-align: center;
}

.pipe
{
	position: relative;
	top: -2px;
}

NAV UL, NAV UL LI
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu_head
{
	margin: 0;
	padding: 0;
}

NAV LI
{
	background: #493e3b;
}

NAV LI:nth-child(even)
{
	background: #362f2d;
}

NAV LI A:link, NAV LI A:visited
{
	color: #FFFFFF;
	text-decoration: none;
	padding: 10px;
	display: block;
}

NAV LI A:visited
{
	color: #AD8922;
	color: hsl(44, 67%, 41%);
}

NAV LI A:hover
{
	position: relative;
	left: 5px;
}

NAV LI A:active
{
	font-weight: bold;
}

ADDRESS
{
	padding: 3px;
	width: 178px;
}

.email
{
	font-size: 87%;
}

FOOTER
{
	background-color: #000000;
	background-color: rgba(0, 0, 0, .3);
	border-bottom: 1px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	clear: both;
	margin-top: 1.2em;
	margin-bottom: 1em;
	padding-top: .6em;
	padding-bottom: .6em;
}

FOOTER H2
{
	border: none;
	color: #AD8922;
	color: hsl(44, 67%, 41%);
	letter-spacing: 2px;
	margin: 0px;
	padding: 0px;
	font-size: 182%;
	text-align: center;
	text-shadow: none;
	text-transform: uppercase;
}


/* Begin Form Styles */

FIELDSET
{
	padding: .4em;
}

FIELDSET P
{
	max-width: 90%;
	text-transform: none;
}

#testForm FIELDSET, #thanks
{
	display: none;
}

#thanks
{
	margin: .4em;
}

LABEL, INPUT, TEXTAREA
{
	display: block;
	margin: .5em 0px .2em;
	width: 90%;
	max-width: 90%;
}

#testForm TEXTAREA
{
	color: #444444;
	min-height: 85px;
}

/* End Form Styles */


/**
 * Non-semantic helper classes: please define your styles before this section.
 */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }



/**
 * Media queries for responsive design.
 *
 * These start with smaller displays and go up in size.
 *
 */

 
 
 /* Style adjustments for iPhone portrait mode goes here; seems to work good on Carlos' iPhone in portrait mode; some minor adjustments still needed

This also hopefully properly targets the Blackberry browser

		Inherits styles from: Default Layout. */

@media only screen and (max-width: 479px)
{

	HTML
	{
		background-image: url(../img/greysq.gif);
	}
	
	BODY, #container, HEADER, NAV, NAV UL, .menu_body, #testForm, ADDRESS
	{
		border: none;
		margin: 0px;
		width: 318px;
	}
	
	BODY
	{
		background: none;
		margin: 0px auto;
	}
	
	#container
	{
		background: none;
		margin: 0em;
		padding: 0px;
	}
	
	HEADER
	{
    	background-image: url(../img/rvrepairhuntingtonbeach-mobilebanner.jpg);
		background-position: center;
		-webkit-background-size: 310px;
		background-size: 310px;
		border-bottom: 1px dotted #CCCCCC;
		margin: 0px auto;
		height: 258px;
		width: 310px;
	}
	
	HEADER IMG, NAV IMG, #testForm IMG
	{
		display: none;
	}

	#main
	{
		width: 94%;
	}
	
	#mobileOnly
	{
		width: 290px;
	}
	
	#main P, #main H1, #main H2, #main H3
	{
		margin: 1em 3px;
	}

	#main H1
	{
		margin-top: .2em;
	}
	
	#main SECTION ~ P
	{
		width: 310px;
	}
	
	.menu_body, #testForm FIELDSET
	{
		display: block;
	}
	
	NAV UL, .menu_body, .menu_body UL
	{
		border-top: none;
		clear: both;
		display: block;
		margin-left: 0em;
		width: 328px;
	}
	
	NAV UL *
	{
		max-width: 328px;
	}
	
	NAV UL LI
	{
		margin-left: 0em;
	}
	
	.icons
	{
		display: block;
		margin: 0px auto 1em;
		max-width: 310px;
	}
	
	VIDEO
	{
		width: 310px;
		height: 200px;
	}
	
	FOOTER
	{
		padding-left: 5px;
		padding-right: 5px;
		width: 318px;
	}

}



/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
   
   Wide Mobile Layout; like landscape mode on iPhone and iPod touch; screen *seems to be* 491 pixels across

Inherits styles from: Default Layout, Mobile Layout. */

@media only screen and (min-width: 480px)
{

	HTML
	{
		background-image: url(../img/greysq.gif);
	}
	
	BODY, #container, HEADER, NAV, .menu_body, #testForm, ADDRESS
	{
		border: none;
		margin: 0px;
		width: 486px;
	}
	
	#container
	{
		margin: 0em;
		padding: 0px;
	}
	
	HEADER
	{
    	background-image: url(../img/rvrepairhuntingtonbeach-mobilebanner.jpg);
		background-position: center;
		border-bottom: 1px dotted #CCCCCC;
		margin: 0px auto;
		height: 350px;
		width: 486px;
	}
	
	HEADER IMG, NAV IMG, #testForm IMG
	{
		display: none;
	}

	#main
	{
		width: 94%;
	}
	
	#mobileOnly
	{
		width: 380px;
	}
	
	#main P, #main H1, #main H2, #main H3
	{
		margin: 1em 6px;
	}
	
	.menu_body, #testForm FIELDSET
	{
		display: block;
	}
	
	NAV UL, .menu_body, .menu_body UL
	{
		border-top: none;
		clear: both;
		display: block;
		margin-left: 0em;
		width: 491px;
	}
	
	NAV UL *
	{
		max-width: 491px;
	}
	
	NAV UL LI
	{
		margin-left: 0em;
	}
	
	.icons
	{
		display: block;
		margin: 0px auto 1em;
		width: 425;
		max-width: 425px;
	}
	
	VIDEO
	{
		width: 425px;
		height: 268px;
	}
	
	FOOTER
	{
		padding-left: 5px;
		padding-right: 5px;
		width: 476px;
	}

}/*/mediaquery*/



/*		Tablet Layout: 768px.

		Inherits styles from: Default Layout. 

These and other media queries like it used here come from http://lessframework.com/; these might need a lot of work; as of May 16, 2011, this media query seems to be properly targeting iPad portrait */

@media only screen and (min-width: 768px)
{
	
	BODY, #container, HEADER
	{
		float: none;
		margin: 0px;
		width: 766px;
	}
	
	HEADER
	{
    	background-image: url(../img/rvrepairhuntingtonbeach-banner.png);
		-webkit-background-size: 764px;
		background-size: 764px;
		overflow: hidden;
		width: 764px;
		height: 184px;
	}
	
	#mobileOnly
	{
		display: none;
	}

	NAV, #testForm, ADDRESS
	{
		background-color: #000000;
		border-bottom: 1px solid #CCCCCC;
		border-right: 1px solid #CCCCCC;
		float: left;
		width: 184px;
	}

	ADDRESS
	{
		width: 178px;
	}
	
	.menu_body, #testForm FIELDSET
	{
		display: none;
	}
	
	NAV UL
	{
		clear: none;
		display: block;
		width: 184px;
	}
	
	HEADER IMG, NAV IMG, #testForm IMG
	{
		display: block;
	}

	.menu_body
	{
		display: none;
		width: 184px;
	}
	
	#main
	{
		float: right;
		width: 546px;
	}

	H1
	{
	   -webkit-text-stroke: 0px #DDDDDD; /* Turning off text-stroke because so far it doesn't seem to work very well in iPad and larger (but works great in iPhone and iPod touch; */
	}

	#container .icons
	{
		float: right;
		margin-left: 1em;
		margin-bottom: 1em;
		max-width: 275px;
	}

	H1 ~ UL
	{
		background-color: #000000;
		background-color: rgba(0, 0, 0, .3);
		border: 1px solid #626881;
	    -moz-border-radius: 5px;
	    -o-border-radius: 5px;
	    -webkit-border-radius: 5px;
	    border-radius: 5px;
	    -moz-box-shadow: 3px 3px 4px #626881;
	    -webkit-box-shadow: 3px 3px 4px #626881;
	    box-shadow: 3px 3px 4px #626881;
	     -moz-column-count: 3;
	     -o-column-count: 3;
	     -webkit-column-count: 3;
	     column-count: 3;
	    margin: 0px auto;
		max-width: 92%;
	    padding: .8em .2em .8em 2em;
	}
	
	Hx1 ~ P ~ UL
	{
		width: 50%;
		word-wrap: break-word;
	}
	
	VIDEO
	{
		width: 275px;
		height: 200px;
	}
	
	FOOTER
	{
		padding-left: 7px;
		padding-right: 7px;
		width: 752px;
	}
	
}/*/mediaquery*/


@media only screen and (min-width: 992px)
{
  /* Style adjustments for landscape mode and browsers with widths equal to or greater than iPad landscape mode goes here; as of May 17, 2011, this media query seems to be properly targeting iPad landscape */
	
	BODY
	{
		width: 100%;
	}
	
	#container, HEADER
	{
		margin: 0px auto;
		width: 1026px;
	}
	
	#container
	{
		border: 1px solid #CCCCCC;
	}
	
	HEADER
	{
		-webkit-background-size: 100%;
		background-size: 100%;
		height: 250px;
		width: 1024px;
	}
	
	#main
	{
		width: 797px;
	}
	
	FOOTER
	{
		padding-left: 7px;
		padding-right: 7px;
		width: 1010px;
	}

}/*/mediaquery*/






/**
 * Print styles.
 *
 * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
 */

@media print {

* { 
background: transparent !important; 
color: black !important; 
text-shadow: none !important; 
filter: none !important;
-ms-filter: none !important; } 

a, a:visited { 
color: #444 !important; 
text-decoration: underline; }

a[href]:after { 
content: " (" attr(href) ")"; }

abbr[title]:after { 
content: " (" attr(title) ")"; }

a[href^="javascript:"]:after, 
a[href^="#"]:after { 
content: ""; }
  
pre, blockquote { 
border: 1px solid #999; 
page-break-inside: avoid; }

thead { 
display: table-header-group; }

tr, img { 
page-break-inside: avoid; }

@page { 
margin: .5cm; }

p, h2, h3 { 
orphans: 3; 
widows: 3; }

h2, h3 { 
page-break-after: avoid; }

	/* Begin custom print styles: */
	  
	HEADER, #container
	{
		border: none;
	}
	
	NAV, #testForm
	{
		display: none;
	}
	
	#main
	{
		width: 100%;
	}

}/*/mediaquery*/


/* The following is supposed to target only Webkit browsers (and it seems to work): */

@media screen and (-webkit-min-device-pixel-ratio:0)

{

	VIDEO
	{
		display: block; /* Turning video back on webkit browsers */
		margin-bottom: 1em;
	}

}/*/mediaquery*/


/* Styles for desktop and large screen ----------- */

/*styles for 800px and up!*/
@media only screen and (min-width: 800px) {
  /* Styles */
}/*/mediaquery*/


/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  /* Styles */
}/*/mediaquery*/


/* 
Sources: 
http://meyerweb.com/eric/tools/css/reset
http://people.opera.com/patrickl/experiments/keyboard/test
http://gist.github.com/413930
http://pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap
http://sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars
http://tjkdesign.com/ez-css/css/base.css
http://viget.com/inspire/styling-the-button-element-in-internet-explorer
http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing
http://html5doctor.com/html-5-reset-stylesheet/
http://praegnanz.de/weblog/htmlcssjs-kickstart/
http://camendesign.com/design/
http://yui.yahooapis.com/2.8.1/build/base/base.css
http://webaim.org/techniques/css/invisiblecontent/
http://drupal.org/node/897638
*/