@charset "utf-8";
/* CSS Document */
/* HTML5 and CSS3 Used throughout site.  Update your browswer! */


/* RESET */
* {
	margin: 0;
	padding: 0;
	font-family: 'XenophoneRegular', Arial, sans-serif;
}

/* Load in @FontFace - Xenophone - www.fontsquirrel.com - http://www.fontsquirrel.com/license/Xenophone */
@font-face {
 font-family: 'XenophoneRegular';
 src: url('../other/Xenophone/xenophone-webfont.eot');
 src: local('☺'), url('../other/Xenophone/xenophone-webfont.woff') format('woff'), url('../other/Xenophone/xenophone-webfont.ttf') format('truetype'), url('../other/Xenophone/xenophone-webfont.svg#webfont9B1OErgm') format('svg');
}
/*------------------ Tags ------------------*/

body {
	font-size: 20px;
	width: 970px;
	text-align: center;
	margin: 20px auto;
	color: #333;
	background:url(../images/repeating-patterns.jpg) repeat fixed 0 0 #ccc;
	border: 10px solid rgba(45, 45, 45, 0.65);
}
header, nav, footer, article, hgroup, caption, aside {
	display: block;
}
h1, h2, h3, h4 {
	font: 60px/68px 'XenophoneRegular', Arial, sans-serif;
}
h2 {
	font-size: 42px;
	margin-bottom: -15px;
}
h3 {
	color: #fff;
	font-size: 24px;
	text-align: center;
}
nav {
	background-image: -moz-linear-gradient(0% 87% 90deg, #333, #5E5E5E, #333 100%);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#666), color-stop(.6, #333));
	background-color: #333;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
ul, li {
	list-style:none;
}
nav ul {
	text-align: left;
}
nav li {
	display: inline-block;
	text-align: center;
	margin: 0 10px;
	padding: 5px;
}
nav a, footer a {
	color: #fff;
	text-decoration: none;
}
aside {
	float: right;
	width: 300px;
}
hgroup {
	background-color:#333;
	background-image:url(../images/grid.png);
	background-repeat: repeat;
	height: 215px;
	-webkit-border-top-left-radius: 7px;
	-webkit-border-top-right-radius: 7px;
	-webkit-border-bottom-right-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-topleft: 7px;
	-moz-border-radius-topright: 7px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}
form, input, textarea {
	padding: 0;
	margin: 0;
}
input, textarea {
	font-family: "Courier New", Courier, monospace;
	width: 100px;
	background: none;
	color: #ccc;
}
footer {
	font-size: 14px;
	color: #ccc;
	background-color: #000;
	padding: 5px 0;
}
/*------------------ Classes ------------------*/

.looks-like-code {
	font-family:"Courier New", Courier, monospace;
	color: #9C0;
	line-height: 1.2em;
	vertical-align: top;
}
.reversed {
	background-color:#666;
	padding-left: 5px;
}
.missing-char {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}
.clear {
	clear: both;
}
.small {
	color: #ccc;
	font-size: 20px;
	padding:  5px 0 0 2px;
	text-align: left;
}
.right {
	text-align: right;
	display: block;
	width: 100%;
	margin:0;
	padding: 0;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;
	color: #fff;
}
.tweet {
	display: block;
	width: 100%;
	margin:0;
	padding: 0;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #333;
	text-align: left;
}

/*------------------ End of Classes ------------------*/

/*------------------ IDs ------------------*/

#wrapper {
	background-color: #ccc;
	background-image:url(../images/top-bg-grad.jpg);
	background-repeat: repeat-x;
	padding: 15px;
	border: #fff solid 3px;
}
#top {
	position:relative;
	margin-top: -100px;
	top:0px;
	left:0px;
	z-index:2;
}
#bottom {
	position: relative;
	top:0;
	left:0;
	z-index:1;
}
#bar {
	position: relative;
	top left: 0px;
	z-index: 3;
}
#bar > div {
	float: left;
}
#canvas {
	width: 100%;
}
#home-page, #tools-page, #twitter-page {
	width: 620px;
	text-align: left;
	float: left;
	padding-top: 4px;
}
#links {
	text-align: center;
}
#drop {
	border: #ddd dashed thick;
	height: 220px;
	width: 300px;
}
#drop:hover {
	border: #fff dashed thick;
}

#html5 {
	position: absolute;
	top: 394px;
	right: 1054px;
	background: #fff;
}
/*------------------End of IDs ------------------*/

/*------------------ Combo Selectors ------------------*/

nav a:hover, footer a:hover, .current {
	color: #9c0;
	border-bottom: #feff00 thin dotted;
}
p.reversed {
	margin: 3px 0;
	display: inline-block;
	background-repeat: repeat;
}
p.smaller {
	color: #666;
	font-size: 20px;
	padding: 0;
	margin: 10px 0 0 0;
	text-align: left;
}

aside > caption {
	float: left;
	text-align: left;
}
aside > article {
	text-align: left;
	height: 200px;
	margin:  0 0 10px 0;
}
hgroup > article {
	width: 220px;
	margin: 9px 7px 6px 6px;
	float: left;
	text-align: left;
}
#links a {
	border: none;
}
#links > div {
	padding-bottom: 4px;
}

#main-twitter li {
	padding: 15px 5px 5px 5px;
}
#main-twitter li:hover {
	background-color: #999;
	background-image:url(../images/grid.png);
}
#bubble, .smaller {
	padding: 0 20px;
	font-size: 11px;
	color: #fff;
	text-align: center;
}
#bubble, #bubble a{
	font-family: Georgia, "Times New Roman", Times, serif;
}
#bubble a {
	color: #ccc;
	text-decoration: none;
	border-bottom: #ccc thin dotted;
}
#four a {
	font-size 15px;
	background-color: #ccc;
	color: #333;
	text-align: center;
	text-decoration: none;
	display: block;
	margin: 12px 0;
}
#four a:hover {
	background-color: #000;
	color: #ccc;
	text-decoration: none;
}

/* ------------------------- css for jQuery skills --------------------------*/

#skills {
	background-image: url(../images/grid.gif);
	background-repeat: repeat-y;
	margin-bottom: 20px;
}

#skills div {
	color: #ccc;
	background-color:#666;
	width: 550px;
	padding: 5px 0 5px 5px;
	
	font-family:"Courier New", Courier, monospace;
	color: #9C0;
	font-size: .7em;
	line-height: .8em;
	vertical-align: top;
	background-image:url(../images/grid.png);
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;

}
#skills li {
	margin-top: 5px;
}