@charset "UTF-8";
/**
 * Pro CSS for High Traffic Websites' book site
 * 
 * @author		Inayaili de León
 * @copyright	2011 Antony Kennedy and Inayaili de León
 */
 
/**
 * Table of contents
 *
 * Defaults
 * Structure
 * Type
 * Navigation
 * Links
 * Sections
 * Reusable
 * Hacks
 * Small screen
 */

/**
 * Defaults
 *
 * @section defaults
 * @see		http://meyerweb.com/eric/tools/css/reset/
 * @see		http://developer.yahoo.com/yui/3/cssreset/
 */

html, body, div, span,
h1, h2, p, a, img, b,
ol, ul, li,
footer, header, nav {
	margin:0;
	padding:0;
	border:0;
	font:inherit;
	vertical-align:baseline; }
footer, nav, section {
	display:block; }
body {
	background:#f3f3f3;
	color:#111;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:62.5%;
	line-height:1;
	border-top:6px solid #FEC425; }

/**
 * Structure
 *
 * @section structure
 */

body {
	padding:0 23px 59px 0; }
/*#side,#main{background:red}*/
#side {
	position:fixed;
	top:59px;
	left:775px;
	width:190px; }
#main {
	width:458px;
	margin-left:275px; }
footer {
	clear:both;
	padding-top:23px;
	color:#666; }

/**
 * Type
 *
 * @section type
 */
 
h1 {
	font-size:2.3em;
	margin-bottom:23px; }
h2 {
	font-size:1.7em;
	font-style:italic;
	margin-bottom:17px; }
p {
	font-size:1.4em;
	line-height:1.5; }
p+p {
	text-indent:1em; }
#side p {
	padding-top:11px;
	margin-top:3px;
	border-top:4px solid #fff;
	color:#666; }
#example p+p {
	text-indent:0; }
#example p:nth-of-type(2) {
	margin-top:17px; }
#example b {
	font-style:italic;
	font-size:.9em; }
#example p:last-of-type {
	line-height:1.2;
	padding-top:13px; }
li {
	font-size:1.4em;
	line-height:1.3;
	margin-bottom:9px; }
li:last-child {
	margin-bottom:0;
	border:none; }
#details li {
	list-style:none; }
li b {
	font-variant:small-caps;
	font-size:.9em;
	letter-spacing:1px;
	margin-right:3px; }

/**
 * Navigation
 *
 * @section nav
 */

nav {
	font-family:"Lucida Grande", "Lucida Sans", Arial, "Trebuchet MS", sans-serif;
	font-size:.8em;
	text-transform:uppercase;
	letter-spacing:2px; }
nav li {
	list-style:none;
	border-bottom:1px solid #fff;
	margin:0; }

/**
 * Links
 *
 * @section links
 */

/* Accessibility link. */
#skip {
    display:block;
    position:absolute;
    padding:21px 22px;
    text-decoration:none;
    left:-9999px; }
#skip:hover, #skip:active, #skip:focus {
    background:#0f8096;
	border:none;
    color:#fff;
	font-size:1.5em;
	position:absolute;
	top:14px;
	left:14px; }

/* Generic links. */
a:link, a:visited {
	color:inherit;
	font-weight:bold;
	text-decoration:none; }
a:hover, a:active, a:focus {
	border-bottom:1px solid; }

/* Navigation links. */
nav a:link, nav a:visited {
	border:none;
	color:#666;
	padding:11px 0;
	display:block; }
nav a:hover, nav a:active, nav a:focus {
	color:#111; }
nav a:hover:after, nav a:active:after, nav a:focus:after {
	content:" ›"; }

/* Image link. */
a.img {
	border:none; }

/* Trying to be clever. */
#main > section:target h1:after {
	content:" ☜"; }

/**
 * Sections
 *
 * @section sections
 */

#main > section {
	overflow:hidden;
	padding:23px 0;
	border-bottom:4px solid #fff; }

/* Details. */
#main #details {
	padding-top:59px; }
#details img {
	position:fixed;
	top:59px;
	left:0; }
	
/* Authors. */
#authors section:first-of-type {
	margin-bottom:23px; }

/* Example. */
#example img { 
	float:right;
	margin-left:10px; }

/**
 * Reusable
 *
 * @section reusable
 */

.accessibility {
	position:absolute;
	text-indent:-9999px; }

.buy {
	padding:37px 0 23px;
	margin-bottom:23px;
	text-indent:0;
	font-family:"Lucida Grande", "Lucida Sans", Arial, "Trebuchet MS", sans-serif; }
.buy a {
	color:#111;
	background:#fec425;
	border:none;
	padding:7px 18px;
	position: relative;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	-moz-box-shadow:0 1px 0 0 rgba(0,0,0,.2);
	box-shadow:0 1px 0 0 rgba(0,0,0,.2); }
.buy a:hover, .buy a:active, .buy a:focus {
	background:#111;
	color:#fec425; }
.buy a:active {
	top:1px; }

/**
 * Hacks
 *
 * @section dirty
 */

* html #side,
* html #details img {
	position:absolute; }

/**
 * Small screens
 *
 * @section small
 */

@media screen and (min-width: 733px) and (max-width: 920px) {
	#side {
		position:relative;
		left:275px;
		width:458px;
		margin-bottom:30px; }
	nav li {
		border:none;
		display:inline; }
	nav li:after {
		content:" ・ "; }
	nav li:last-child:after {
		content:""; }
	nav a:link, nav a:visited {
		display:inline-block;
		padding:5px 2px 8px 0; }
	nav a:hover:after, nav a:active:after, nav a:focus:after {
		content:""; }
}
@media screen and (max-width: 732px) {
	body {
		padding:0; }
	#side {
		position:relative;
		left:auto;
		top:auto;
		width:auto;
		padding:0 20px; }
	#main {
		margin-left:0;
		width:auto;
		padding:0 20px; }
	#main #details {
		padding-top:30px; }
	#details img, #example img {
		display:none; }
}