/*
 * This leaves the scrollbar on-screen at all times.  It's sort of peculiar,
 * but it keeps all of our centered stuff from shifting when we switch to a
 * page with longer content.
 *
 * This is a CSS3 feature, but it's not a big deal if the browser doesn't
 * happen to support it.
 */
html {
	overflow-y: scroll;
}

/*
 * Give external links an icon, unless they're to fadden.com.
 *
 * http://stackoverflow.com/questions/18168286/how-can-i-style-external-links-like-wikipedia
 */
a[href ^= "http:"]:after, a[href ^= "https:"]:after, a[href ^= "telnet:"]:after {
	content: url(images/external_link.png);
	margin: 0 0 0 3px;
}
a[href *= "//www.fadden.com/"]:after {
	content: none;
	margin: 0;
}

/*
 * Overall look and feel.
 */
body {
	font-family: Arial, Helvetica, sans-serif;
	padding: 0px;
	margin: 0px;
}
#container {
	background-color: #FFFFFF;
}
#main-content {
	margin: 20px 10px 10px 200px;
	position: relative;
}
/*
 * Have the masthead image resize as the browser width changes.  Important
 * for mobile devices.  Trick comes from http://stackoverflow.com/questions/4572621/ --
 * basically define a container that resizes, and set the image's width to match the
 * size of the container.
 */
#masthead {
	width: 65%;
	margin: 15px auto 15px auto;
	/*width: 640px;
	height: 75px;*/
	background-color: #FFFFFF;
}
#masthead-image {
	width: 100%;
	height: auto;
}

/*
 * Bits and pieces.
 */
.opener {
	font-size: larger;
	font-weight: bold;
}
.floatimg {
	float: left;
	margin-right: 5px;
}

/*
 * Top navigation bar.  Looks like a solid color bar with words in white.
 */
#top-nav {
	border-style: none;
	border-width: thin;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #5F5F5F;
}
#top-nav ul {
	text-align: center;
	margin: 0px;
	padding: 0px;
}
#top-nav ul li {
	display: inline;
}
#top-nav ul li a {
	color: #FFFFFF;
	background-color: #5f5f5f;
	padding: .2em 1em .2em 1em;
	text-decoration: none;
}
#top-nav ul li a:hover {
	border-style: none;
	color: #FFFFFF;
	background-color: #000000;
}

/*
 * This changes the appearance of menu item links in the top nav menu
 * when the corresponding page is current.
 *
 * We use classes here so that every sub-page can specify this class
 * for its body, as well as a unique ID that is used for the vertical
 * menu.
 */
#body-home #top-nav .hdr-home a,
.body-tech #top-nav .hdr-tech a,
.body-gaming #top-nav .hdr-gaming a,
.body-retro #top-nav .hdr-retro a,
.body-personal #top-nav .hdr-personal a {
	color: #8BC349;
}

/*
 * Side navigation bar.
 *
 * The width+padding+margin should be a bit less than the #main-content
 * left margin.  Otherwise the main content will render in the padding
 * area, and flow around the bottom of the menu.
 */
#side-nav {
	margin: 0px;
	padding: 5px;
	font-size: 90%;
	width: 180px;
	float: left;
}
#side-nav ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
#side-nav ul li {
	padding-bottom: 1px;
}
#side-nav ul ul li {
	padding-top: 1px;
	padding-bottom: 0px;
	padding-left: 10px;
}

#side-nav ul li a {
	color: #FFFFFF;
	display: block;
	background-color: #5f5f5f;
	padding: 5px 0px 5px 8px;
	text-decoration: none;
}
#side-nav ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
}