html,body {
	margin:0;
	padding:0;
	height:100%;
	}

body {
/*	background: #000 url(../images/bg1.jpg) no-repeat center top; 
*/	font-family: 'Nilland',Arial, Helvetica, sans-serif;
	font-size: 24px;
	color:#FFF;
	min-height:100%;
	position:relative;
	}

@font-face {
	font-family: Nilland;
	src: url('fonts/Nilland.eot');
	src: local('☺'), url('fonts/Nilland.woff') format('woff'), url('fonts/Nilland.ttf') format('truetype'), url('fonts/Nilland.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: OblikSerifBold;
	src: url('OblikSerif-Bold-webfont.eot');
	src: local('☺'), url('fonts/OblikSerif-Bold-webfont.woff') format('woff'), url('fonts/OblikSerif-Bold-webfont.ttf') format('truetype'), url('fonts/OblikSerif-Bold-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}






/********************* Main Content ***********************/



#container {
		min-height:100%;
		position:relative;
		z-index:1000;
	}


a img{ border:none;}





h1.title{
	color: #FFFFFF;
	padding: 0px 0px 0px 110px;
	text-shadow: #33bbff  0px 1px 8px;
	font-family: 'Nilland',Arial, Helvetica, sans-serif;
	font-size: 45px;
	font-weight: normal;
	margin:5px 0;
}



.followtxt{

	color: #ddd5de;
	text-shadow: #000 0px 1px 1px;
	font:11px Lucida Sans Unicode, Lucida Grande, sans-serif;
	
	
}


.of{
	padding:0px 0px 0px 10px;
	font:14px Lucida Sans Unicode, Lucida Grande, sans-serif;
	text-shadow: #000 0px 1px 1px;
}

#logo{
	position:relative;
	top: 0px;
	z-index: 1;
	left: -65px;
}



.newyear{
	margin: 0px;
	padding: 0px;
	height: 250px;
	width: 155px;
	position: absolute;
	top: 0px;
	right: 0px;
	background: url(../images/newyear.png) no-repeat right top;
	z-index: 5;
}

.logo a img{
	text-decoration: none;
	border-style: none;
	
}

.more{
	font-size: 11px;
	float: right;
	color: #FFFFFF;
	height: 50px;
	width: 100px;
	padding: 0px 10px 0px 20px;
	margin: 0px;
	background: url(../images/sketchCSSswap.gif) no-repeat left bottom;
	z-index: 10;
}

.more a, .more a:hover {
	color: #FFFFFF;
	font: 11px Georgia, Times New Roman, Times, serif;
	text-decoration: none;
}


#content1,#content2,#content3,#content4,#content5,#content6,#content7,#content8,#content9,#content10,#content11,#content12,#content13,#content14,#content15,#content16,#content17,#content18,#content19,#content20,
#content21,#content22,#content23,#content24,#content25,#content26, #content27, #content28, #content29
{
	margin-left:auto; 
	margin-right:auto; 
	width:800px; 
	/*padding-left:110px;*/
	}


#intro1, #intro2, #intro3, #intro4, #intro5, #intro6, #intro7, #intro8, #intro9, #intro10, #intro11, #intro12, #intro13, #intro14, #intro15, #intro16, #intro17, #intro18, #intro19, #intro20, #intro21, #intro22 
{
	margin-right: auto;
	margin-left: auto;
	color: #fff;
	line-height: 22px;
	text-align: justify;
	padding-top: 5px;
	padding-right: 30px;
	padding-bottom: 5px;
	padding-left: 30px;
	font-family:"OblikSerifBold";
	font-size: 18px;
	font-weight:lighter;
	text-shadow:#000 0px 1px 0px;	
}









.surf{
	float: right;
	width: 250px;
	text-align: left;
	margin: 0px;
	padding: 180px 90px 0px 0px;


}



.skills {
	
	margin: 0px;
	padding: 0px;
	
	text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
	color: #999;
}

.skills ul{
	width: 100%;
	margin: 0px;
	padding: 0px;}
	
.skills li{
	
	display:block;
	zoom:1;
	position:relative;
	
	-moz-border-radius: 32px;
	-webkit-border-radius: 32px;
	border-radius: 32px;
	behavior: url(border-radius.htc);
	background-color:#222222;
	list-style-type: none;
	margin-bottom: 2px;
	
}

.skills li a{
	z-index:2;
	display:block;
	position:relative;
	font: normal 12px Trebuchet MS, Arial, Helvetica, sans-serif;
	color:#FFF;
	text-decoration:none;
	text-shadow: #000  0px 1px 1px;
	padding-top: 1px;
	padding-right: 2px;
	padding-bottom: 1px;
	padding-left: 10px;	
	
	
	}



span.technology {
	-moz-border-radius: 32px;
	-webkit-border-radius: 32px;
	border-radius: 32px;
	behavior: url(border-radius.htc);
	background-color:#09F;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b9ff', endColorstr='#0070ff');  for IE 
	background: -webkit-gradient(linear, left top, left bottom, from(#0Cf), to(#06f)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #0Cf,  #06f); /* for firefox 3.6+ */
	/*text-indent: -9999px;*/
	display: block;
	overflow: hidden;
	position: absolute;
	top:0px;
	left: 0px;
	height: 100%;
	text-align: right;
	padding-right: 10px;
	color:#000;
	font: normal 12px Trebuchet MS, Arial, Helvetica, sans-serif;
	text-shadow: #fff  0px 1px 1px;
		
}

span.software {
	-moz-border-radius: 32px;
	-webkit-border-radius: 32px;
	border-radius: 32px;
	behavior: url(border-radius.htc);
	background-color:#666666;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#333333');  for IE 
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#333)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #666,  #333); /* for firefox 3.6+ */
	/*text-indent: -9999px;*/
	display: block;
	overflow: hidden;
	position: absolute;
	top:0px;
	left: 0px;
	height: 100%;
	text-align: right;
	padding-right: 10px;
	color:#AAFF00;
	font: normal 12px Trebuchet MS, Arial, Helvetica, sans-serif;
	text-shadow: #000  0px 1px 1px;
	
}


.myroom{
	margin: 0px;
	text-align: left;
	width: 250px;
	float: left;
	padding: 5px 25px 0px 25px;
}

.myroom a img{
	border-style: none;
	float: right;
	margin-left: 5px;
}


h5{
	margin: 0px;
	padding: 0px;
	font: 18px Georgia, Times New Roman, Times, serif;
	color: #CCCC33;
}

.clear{
	margin: 0px;
	padding: 0px;
	float: none;
	clear: both;
	height: 5px;
}

.nobdr{
	border-style: none;

}



/* recent Project */

.recentWork{
	margin: 0px;
	text-align: left;
	width: 275px;
	float: left;
	padding: 10px 0px 0px 25px;
	border-left: 1px solid #333333;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #CCCCCC;
}


.recentWork h1{
	font: 24px Georgia, Times New Roman, Times, serif;
	color: #FFFFFF;
	padding: 0px;
	margin: 0px 0px 10px 0px;
	
}

.recentWork p{
	clear: both;
	padding-bottom: 5px;
}

.recentWork a img{
	float: left;
	margin-left: 5px;
	border-style: none;
	
}


.leftalign{
	float: left;
	margin:0px 10px 10px 0px;

}




.photo{
	float: left;
	margin:0px 5px 0px 0px;
	padding: 3px;
	width: 75px;
}

/*  Thanks for support and review: */

.thanks{
	margin: 0px;
	font: normal 12px Georgia, Times New Roman, Times, serif;
	color: #CCCCCC;
	background: #000000;
	text-align: center;
	line-height: 22px;
	float: right;
	padding: 0px 20px 10px 10px;

}

a.valid{
	font: normal 11px Georgia, Times New Roman, Times, serif;
	color: #666666;

}

.selectedwk{
	background: url(../images/selectedwork.png) no-repeat;
	position: relative; /*keep this intact*/
	padding: 0px;
	height: 175px;
	width: 176px;
	margin: -405px 0px 0px -40px;
	z-index:5000;
	
}

/*********************** bottom bar *******************************/

#bottombar{
	
	/*background-color: #f4f4f4;
	opacity:0.2;filter:alpha(opacity=20);*/
	position:absolute;
	bottom:0;
	width:100%;
	height:33px;
	padding-bottom: 5px;
	padding-top: 5px;	
}

/*********************** top bar *******************************/

#topbar{
	
	/*background-color: #f4f4f4;
	opacity:0.2;filter:alpha(opacity=20);*/
	position:absolute;
	bottom:0;
	width:100%;
	height:33px;
	padding-bottom: 5px;
	padding-top: 5px;	
}

/*#topbar{
	border-bottom: 1px solid #000;
	outline:#000 solid 1px;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292b2c', endColorstr='#000000'); /* for IE 
	background: -webkit-gradient(linear, left top, left bottom, from(#292b2c), to(#000)); /* for webkit browsers 
	background: -moz-linear-gradient(top,  #292b2c,  #000); /* for firefox 3.6+ 
	background:-o-linear-gradient(top, #292b2c, #000);
	background:linear-gradient(top, #292b2c, #000);
}
*/
	



#topbar  span.facebook a{
	background-image: url(../images/fb.png);
	background-repeat: no-repeat;
	background-position: left -22px;
	display:block;
	width:22px;
	height:22px;
	text-indent:-9999px;
	
	
}

#topbar  span.facebook a:hover{
	background-position: left top;
	
}

#topbar  span.in a{
	background-image: url(../images/in.png);
	background-repeat: no-repeat;
	background-position: left -22px;
	display:block;
	width:22px;
	height:22px;
	text-indent:-9999px;
}

#topbar  span.in a:hover{
	background-position: left top;
	

}


.xmashat{
	position: relative; /*keep this intact*/
	padding: 0px;
	height: 175px;
	width: 176px;
	margin: -175px 0px 0px 530px;
	/*z-index:5000;*/
	background-image: url(../images/santacornerhat.png);
	background-repeat: no-repeat;
}


/********************* my iPhone4 *****************************/

.iphone
 {
	width:320px;
	height:461px;
	background-image: url(../images/iphone_background.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	padding-top: 129px;
	padding-right: 53px;
	padding-bottom: 130px;
	padding-left: 55px;
	clear: both;
	margin-right: auto;
	margin-left: auto;
    }

/********************* my iPhone4 *****************************/

.ipad
 {
	width:360px;
	height:480px;
	background-image: url(../images/ipad.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	padding-top: 60px;
	padding-right: 82px;
	padding-bottom: 135px;
	padding-left: 90px;
	clear: both;
	margin-right: auto;
	margin-left: auto;
    }

/********************* my MBP *****************************/

#macbookpro1, #macbookpro2, #macbookpro3, #macbookpro4, #macbookpro5, #macbookpro6, #macbookpro7, #macbookpro8, #macbookpro9, #macbookpro10,  #macbookpro11, #macbookpro12, #macbookpro13, #macbookpro14, #macbookpro15, #macbookpro16, #macbookpro17, #macbookpro18, #macbookpro19, #macbookpro20, #macbookpro21, #macbookpro22, #macbookpro23
{
	height: 448px;
	width: 715px;
	background-image: url(../images/macbookpro.png);
	padding-top: 52px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 137px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	
}