html {}

body {background: #000; border: 0; margin: 0; padding: 0; font-family: Arial,San-Serif; font-size: smaller;
}

#main_wrap {position: relative; margin: 0 auto; top:10px; width:900px;}

.dot {margin: 0px auto; border-bottom: #454545 2px dashed; z-index: 2;}

.btn_subtext {margin-top: 5px; margin-left: 5px; color: #454545; font-size: 9px;}

h1 {color: #00ccff; font-size: 22px;}
h2 {color: white; font-size: 14px; font-style: italic; font-weight: normal;}
p {color: white; font-size: 12px; line-height: 20px;}
p span {color: white;}

header p span {color: yellow;}

header {
	position: relative;
	top: 10px;
	outline: none;
	width: 100px; height: 39px;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display:block;
}

/* Social */
ul#social_wrap {float: right; list-style: none; margin: -35px auto 0 auto; width:250px; height: 34px;}

ul#social_wrap li {display: inline;}

ul#social_wrap li a {display: inline; float: left; height: 34px; text-indent: -9999px; background: url(../images/main_sprite.png) no-repeat; margin-left: 10px;}

ul#social_wrap li a.twitter {width: 34px; background-position: -382px -1px;}
ul#social_wrap li a.twitter:hover {background-position: -382px -37px;}

ul#social_wrap li a.dribbble {width: 34px; background-position: -526px -1px;}
ul#social_wrap li a.dribbble:hover {background-position: -526px -37px;}

ul#social_wrap li a.mail {width: 34px; background-position: -430px -1px;}
ul#social_wrap li a.mail:hover {background-position: -430px -37px;}

ul#social_wrap li a.linkedin {width: 34px; background-position: -478px -1px;}
ul#social_wrap li a.linkedin:hover {background-position: -478px -37px;}

ul#social_wrap li a.tumblr {width: 54px; background-position: -982px -1px;}
ul#social_wrap li a.tumblr:hover {background-position: -982px -38px;}


/* Social Big */
ul#social_wrap_big {position: relative; top: 10px; left: 30px; list-style: none; margin: 0 auto; width:700px; height: 65px;}

ul#social_wrap_big li {display: inline;}

ul#social_wrap_big li a {display: inline; float: left; height: 65px; text-indent: -9999px; background: url(../images/main_sprite.png) no-repeat; margin-left: 10px;}

ul#social_wrap_big li a.twitter {width: 65px; background-position: -570px -1px;}
ul#social_wrap_big li a.twitter:hover {background-position: -570px -70px;}

ul#social_wrap_big li a.dribbble {width: 65px; background-position: -787px -1px;}
ul#social_wrap_big li a.dribbble:hover {background-position: -787px -70px;}

ul#social_wrap_big li a.mail {width: 65px; background-position: -642px -1px;}
ul#social_wrap_big li a.mail:hover {background-position: -642px -70px;}

ul#social_wrap_big li a.linkedin {width: 65px; background-position: -715px -1px;}
ul#social_wrap_big li a.linkedin:hover {background-position: -715px -70px;}

ul#social_wrap_big li a.tumblr {width: 100px; background-position: -861px -1px;}
ul#social_wrap_big li a.tumblr:hover {background-position: -861px -69px;}

/* Main Graphic */
#inkdot {
	position: relative;
	margin: 0 auto;
	width: 397px; height: 450px;
}


/* Compose */

/*
.compose_btn {margin: 20px auto 0 auto; width: 188px; height: 40px;}

.compose_btn a {
	display: block;
	outline: none;
	width: 188px; height: 40px;
	background: url(../images/main_sprite.png) 0px 0px no-repeat;
}
*/

.compose_btn {
	text-align: center;
	font-family: 'Josefin Sans Std Light', arial, serif;
	font-size: 24px;
	line-height: 42px;
	display: block;
	margin: 20px auto 0 auto;
	width: 188px; height: 40px;
	background-color: #f46b00;
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;	
}

.compose_btn a {
	display: block;
	outline: none;
	color: white;
	text-decoration: none;
	width: 188px; height: 40px;
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;	
}

.compose_btn a:hover {
	background-color: #fdce00;
	transition: .75s ease-out;
	-webkit-transition: .75s ease-out;
    -moz-transition: .75s ease-out;}

.compose_btn a:hover {background-position: -190px 0px;  height:40px;}

/* More */

.more_btn {margin: 70px auto 0 auto; width: 188px; height: 40px;}

.more_btn a {
	display: block;
	outline: none;
	width: 188px; height: 40px;
	background: url(../images/main_sprite.png) 0px -44px no-repeat;
}

.more_btn a:hover {background-position: -189px -44px;  height:40px;}


/* Work*/

.title_work  {position: relative; top: 30px; left: 33px; border: solid #000 4px; width: 96px; height: 26px; background:url(../images/main_sprite.png) -382px -91px no-repeat; z-index: 6;}

.sites {position: relative; top: 50px; list-style: none; margin: 0 auto; width:786px; height: 1550px;}

.site_1 {
	border-radius: 10px 20px 10px 20px;
	-webkit-border-radius: 10px 20px 10px 20px;
	-moz-border-radius: 10px 20px 10px 20px;
	float: left;
	width: 373px; height: 165px;
	background: url(../images/site_thumbs_sprite.jpg) -1px -1px no-repeat;
}
	
.site_1 a {display: block; outline: none; width: 373px; height: 165px;}
.site_1 a:hover {
	box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-webkit-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-moz-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
}

.sites h1 a {display: block; outline: none; color: #00ccff; text-decoration: none; height: 22px;}
.sites h1 a:hover {text-decoration: underline; height: 22px;}


.site_2 {
	border-radius: 20px 10px 20px 10px;
	-webkit-border-radius: 20px 10px 20px 10px;
	-moz-border-radius: 20px 10px 20px 10px;
	float: left; margin-left: 35px;
	width: 373px; height: 165px;
	background: url(../images/site_thumbs_sprite.jpg) -381px -345px no-repeat;
}
	
.site_2 a {display: block; outline: none; width: 373px; height: 165px;}
.site_2 a:hover {
	box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-webkit-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-moz-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
}

.site_3 {
	margin-top: 220px;
	-webkit-border-radius: 10px 20px 10px 20px;
	-moz-border-radius: 10px 20px 10px 20px;
	float: left;
	width: 373px; height: 165px;
	background: url(../images/site_thumbs_sprite.jpg) -1px -173px no-repeat;
}
	
.site_3 a {display: block; outline: none; width: 373px; height: 165px;}
.site_3 a:hover {
	box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-webkit-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-moz-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
}

.site_4 {
	margin-top: 220px;
	-webkit-border-radius: 20px 10px 20px 10px;
	-moz-border-radius: 20px 10px 20px 10px;
	float: left; margin-left: 35px;
	width: 373px; height: 165px;
	background: url(../images/site_thumbs_sprite.jpg) -381px -1px no-repeat;
}
	
.site_4 a {display: block; outline: none; width: 373px; height: 165px;}
.site_4 a:hover {
		box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-webkit-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-moz-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
}

.site_5 {
	margin-top: 220px;
	-webkit-border-radius: 10px 20px 10px 20px;
	-moz-border-radius: 10px 20px 10px 20px;
	float: left;
	width: 373px; height: 165px;
	background: url(../images/site_thumbs_sprite.jpg) -1px -517px no-repeat;
}
	
.site_5 a {display: block; outline: none; width: 373px; height: 165px;}
.site_5 a:hover {
	box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-webkit-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-moz-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
}

.site_6 {
	margin-top: 220px;
	-webkit-border-radius: 20px 10px 20px 10px;
	-moz-border-radius: 20px 10px 20px 10px;
	float: left; margin-left: 35px;
	width: 373px; height: 165px;
	background: url(../images/site_thumbs_sprite.jpg) -381px -173px no-repeat;
}
	
.site_6 a {display: block; outline: none; width: 373px; height: 165px;}
.site_6 a:hover {
	box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-webkit-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-moz-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
}

.site_7 {
	margin-top: 220px;
	-webkit-border-radius: 10px 20px 10px 20px;
	-moz-border-radius: 10px 20px 10px 20px;
	float: left;
	width: 373px; height: 165px;
	background: url(../images/site_thumbs_sprite.jpg) -381px -517px no-repeat;
}
	
.site_7 a {display: block; outline: none; width: 373px; height: 165px;}
.site_7 a:hover {
	box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-webkit-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-moz-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
}

.site_8 {
	margin-top: 220px;
	-webkit-border-radius: 20px 10px 20px 10px;
	-moz-border-radius: 20px 10px 20px 10px;
	float: left; margin-left: 35px;
	width: 373px; height: 165px;
	background: url(../images/site_thumbs_sprite.jpg) -1px -344px no-repeat;
}
	
.site_8 a {display: block; outline: none; width: 373px; height: 165px;}
.site_8 a:hover {
	box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-webkit-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
	-moz-box-shadow:rgba(0,0,0,0.9) 0px 0px 100px inset;
}

/* About Me*/

.title_about  {position: relative; top: 30px; left: 33px; border: solid #000 4px; width: 78px; height: 26px; background:url(../images/main_sprite.png) -488px -91px no-repeat; z-index: 6;}

.about_me {margin: 50px auto; width: 900px; height: 300px;}

.pic {
	float: left;	
	margin: 0 50px 0 50px;
	background:url(../images/pics_sprite.jpg) 0px 0px no-repeat;
	width: 286px; height: 220px; 
}

div.pic a img {
	position: relative;
	top: 180px; left: 50px;
	opacity: .5;
	-webkit-transform:rotate(-7deg); /* Safari and Chrome */
	-moz-transform:rotate(-7deg); /* Firefox */
	-o-transform:rotate(-7deg); /* Opera */
	transform:rotate(-7deg);
	-webkit-transition: .75s;
	-moz-transition: .75s;
	-o-transition: .75s;
	transition: .75s;
}

div.pic a:hover img{
	opacity: 1;
	-webkit-transform:rotate(0deg); /* Safari and Chrome */
	-moz-transform:rotate(0deg); /* Firefox */
	-o-transform:rotate(0deg); /* Opera */
	transform:rotate(0deg);
}


/* More */

.download_btn {margin: 90px auto 0 auto; width: 188px; height: 40px;}

.download_btn a {
	display: block;
	outline: none;
	width: 188px; height: 40px;
	background: url(../images/main_sprite.png) 0px -86px no-repeat;
}

.download_btn a:hover {background-position: -189px -86px;  height:40px;}



.me {margin: 0 auto; bottom: 0; background:url(../images/pics_sprite.jpg) 0px -224px no-repeat; width: 800px; height: 300px;}