/* BASE STYLES */

* {
	padding: 0;
	margin: 0;
}

header, footer, aside, nav, article, section {
	display: block;
}

body {
	font: normal 100% Helvetica, Arial, sans-serif;
	background: #ccc url(../images/background.png) 0 0 repeat;
	border-top: solid 20px #333;
}

h2 {
	font: bold 1.875em/1em Helvetica, Arial, sans-serif;
}

h3 {
	color: #222;
	font: bold .875em/2.14285714em Helvetica, Arial, sans-serif;	
}

p, li {
	color: #666;
	font: normal .875em/1.42857143em Helvetica, Arial, sans-serif;
}

p {
	margin: 0 0 1.25em;
}

ul, ol {
	padding: 0 0 0 1.4em;
}

a, .email {
	color: #b63;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a img {
	border: 0;
}



/* PAGE STRUCTURE */

section {
	position: relative;
}

#page {
	margin: 0 auto;
	max-width: 58.75em; /* 940px / 16px = 58.75em */ 
	padding: 1em;
}

#page-header {
	text-align: center;
	height: 60px;
	margin: 60px 0;
}

/*
#page-header h1 {
	color: #656566;
	font: normal italic 5em/1em 'Just Another Hand';
	letter-spacing: 2px;
	text-shadow: 0 1px 1px #fff;
}
*/

#about-me {
	background: #eee url(../images/notepad-bk.png) 50% -1px repeat-y; 

	border-radius: 10px;
	-moz-border-radius: 10px;

	box-shadow: 0 3px 10px 0 #a1a3a4;
	-moz-box-shadow: 0 3px 10px 0 #a1a3a4;
	-webkit-box-shadow: 0 3px 10px 0 #a1a3a4;

	width: 40.425532%; /* 380px / 940px = 40425532  */
	float: left;
}

#about-me header h2 {
	line-height: 1.66667em;
	text-align: center;
	font-weight: normal;
	color: #ddd;
	background: #fff;
	margin-top: 10px;
}

#about-me article {
	padding: 0 1.875em;
	margin: 1.875em 0 /* 30px / 16px = 1.875 */;
}

#about-me li {
	line-height: 2.14285714em; /* 30 / 14 = 2.14285714 */ 
}









#prepost, #social-networking, #buy-me-something {
	width: 54.255319%; /* 510px / 940px = 56382979 */
	padding: 1.4em 1em;
	float: right;
	clear: right;
}

#prepost {
	margin-top: 1em;
}

#prepost h2 {
	font: bold 1em Helvetica, Arial, Sans-serif;
}

#prepost img {
	float: right;
	width: 200px;
	height: 150px;
	margin-left: 2em;
	border: solid 4px #fff;

	box-shadow: 0 3px 10px 0 #a1a3a4;
	-moz-box-shadow: 0 3px 10px 0 #a1a3a4;
	-webkit-box-shadow: 0 3px 10px 0 #a1a3a4;
}

#social-networking {
	border-top: solid 1px #bbb;
	border-bottom: solid 1px #bbb;
	margin: 2em 0;
	background: transparent url(../images/background.png) 0 0 repeat;
}

#social-networking img {
	position: absolute;
	top: 20px;
	left: 190px; 
}

#social-networking ul {
	margin: 0;
	padding: 0;
}

#social-networking li {
	list-style: none;
	display: block;
	float: left;
	margin-right: 1em;
}

#social-networking li a {
	display: block;
	width: 30px;
	height: 34px;
	background-image: url(../images/social-media-icons.png);
	background-repeat: no-repeat;
}

#social-networking a span {
	position: absolute;
	top: -2000px;
}

#twitter a { background-position: 0 2px }
#twitter a:hover { background-position: 0 0 }
#twitter a:active { background-position: 0 2px }
#facebook a { background-position: -30px 2px }
#facebook a:hover { background-position: -30px 0 }
#facebook a:active { background-position: -30px 2px }
#posterous a { background-position: -60px 2px }
#posterous a:hover { background-position: -60px 0 }
#posterous a:active { background-position: -60px 2px }
#linkedin a { background-position: -90px 2px }
#linkedin a:hover { background-position: -90px 0 }
#linkedin a:active { background-position: -90px 2px }
#linkedin a { background-position: -90px 2px }

#buy-me-something {
}

#buy-me-something p {
	color: #444;
	font-size: 1.4em;
	font-weight: normal;
	font-style: italic;
	font-family: 'Schoolbell';
}

#buy-me-something img {
	vertical-align: middle;
}

#page-footer {
	clear: both;
	margin: 0  auto;
	padding: 3.75em 0;
	text-align: center;
	width: 70%;
	font-size: .857142em; 
}





/* TAPE AND SHADOW EFFECTS FOR NOTE */

#about-me h2:before {
	z-index: 100;
	position: absolute;
	top: -60px;
	left: 40px;
	content: '';
	width: 50px;
	height: 120px;
	background: rgba(255, 255, 255, .3);
	border: solid 1px rgba(204, 204, 204, .3);

	transform: rotate(-8deg);
	-webkit-transform: rotate(-8deg);
	-moz-transform: rotate(-8deg);
}

#about-me:after { 
	z-index: -1; 
	position: absolute; 
	right: 1.5em; 
	bottom: 12px; 
	background: transparent; 
	width: 70%; 
	height: 25%; 
	content: ''; 

	transform: skew(15deg) rotate(6deg);
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	-o-transform: skew(15deg) rotate(6deg);

	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 

	border-radius: 10px;
	-moz-border-radius: 10px;
} 

#about-me:before { 
	z-index: -2; 
	position: absolute; 
	left: 1.5em; 
	bottom: 12px; 
	background: transparent; 
	width: 70%; 
	height: 25%; 
	content: ''; 

	transform: skew(-15deg) rotate(-6deg); 
	-webkit-transform: skew(-15deg) rotate(-6deg); 
	-moz-transform: skew(-15deg) rotate(-6deg); 
	-o-transform: skew(-15deg) rotate(-6deg); 

	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 

	border-radius: 10px;
	-moz-border-radius: 10px;
}