@charset "UTF-8";
@import "/css/reset.css";

/* CSS Document */

/*
	----------------------------
	HTML SELECTORS
	____________________________
*/

body { background: url(/media/layout/bg.gif) repeat-x #fff; font:14px/21px Helvetica, Arial, sans-serif; color: #333; margin: 0; padding: 0; }
a { color: #33f; text-decoration: none; }
a:hover { color: #00f; }
h1, h2 { font-size: 26px; line-height: 28px; font-weight: normal; letter-spacing: -1px; }
h3 { font-size: 18px; font-weight: normal; margin: 0; }
h4 { font-size: 14px; font-weight: normal; margin: 0; }
h5 { font-size: 12px; font-weight: normal; margin: 0; }
ul { margin-left: 20px; }
ol { margin-left: 36px; }

h1 { width: 120px; color: #441; }

/*
	----------------------------
	LAYOUT
	____________________________
*/

#wrapper { width: 960px; margin: 0 auto; padding: 6px; }

#main { width: 390px; float: left; padding: 6px; }
	#main p { color: #661; line-height: 1.4em; }
	#preview { width: 30px; height: 32px; background-color: #ccc; margin: 0 4px 0 0; float: left; }
	#code { padding: 4px 0 0; }
	#palette { width: 300px; float: left; }
		.swatch { width: 20px; height: 22px; float: left; }
		
#examples { width: 524px; float: right; }
	#examples h3 { margin-top: 0; }
	#anything { padding: 6px; }
	
	.next { text-align: right; display: block; width: 100px; float: right; }

/*
	----------------------------
	PAGE/SECTION SPECIFIC
	____________________________
*/



/*
	----------------------------
	UTILITY CLASSES
	____________________________
*/
.active { background-color: #ffc; }

div.clear { overflow: hidden; height: 1px; clear: both; }
div.clear-right { overflow: hidden; height: 1px; clear: right; }
img.alignRight { float: right; margin: 0 0 15px 15px; }
img.alignLeft { float: left; margin: 0 15px 15px 0; }
.error { color: #833; }