/* Minimal stylesheet, mainly to show navigation concepts */

/* Some basic styling for the main blocks of content */

body {
	background-color:#666666;
	}

#container {
	width: 960px;
	margin: 10px auto;			/* First value is top and bottom margin; second is left and right.  'Auto' centers */
	padding:10px 0;
	color: #666666;
	background-color:white;
	}
	
#left {
	float:left;						/* Float allows other 'block' elements to go alongside */
	width:230px;
	padding: 0 10px;
	}

#right {
	float:right;
	width:230px;
	padding:150px 10px 0 10px;   /* All padding values stated: top right bottom left */
	}

#content {
	margin: 10px 250px;
	text-align:center;
	}


/* Now the navigation.  Remember, it's just a list of links */

#navigation {
	margin-top:9px;
	list-style:none;    /* Turn of the default list bullets */
	}

#navigation li {
	padding:0;					/* Remove the default padding */
	margin: 3px 0;			/* Set small vertical margins; zero left and right margin */
	}
	
#navigation li a {
	color:#666666;					/* Set the color of links in the list; overrides default blue */
	text-decoration:none;		/* Turn off default link underlining */
	}

#navigation li a:hover {		/*The :hover pseudo-class is triggered by mouseover */
	color:blue;
	text-decoration:underline;
	}


/* Now the cool bit... */
/* I'm applying a rule for 'selected state' of navigation.  This applies to: */
/* the annie gray nav link only when displayed on the annie gray page, */
/* the snug nav item only when displayed on the snug page, and so on.  */
/* To complete the site, you'd add all the pages and nav items here */

#page_annie_gray #navigation li.nav_annie_gray a,
#page_snug #navigation li.nav_snug a,
#page_personal_cards #navigation li.nav_personal_cards a
 {
	color:#01AFEE;
	text-decoration:none;
	cursor:default;
	}