@charset "UTF-8";
/* CSS Document */

body {
	height:100%;
	width:100%;
	margin:0;padding:0;
	overflow:hidden;
}

#wrapper {
	width:100%;
	height:100%;
	position:absolute;
	top:100px;
	left:0px;
	overflow:scroll;
}

	#mask {
	width:500%;
	height:100%;
	}

	.item {
	width:20%;
	height:100%;
	float:left;
	}
	
	
	.content {
	width:100%;
	height:80px;
	top:0%;
	position:relative;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	}
	
	.selected {
		background:#fff;
		font-weight:700;
	}

	.clear {
		clear:both;
	}
	
	div.middle
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width: 1000px;
	height: 10000px;
}

div.blank
{
	width: 1000px;
	float: left;
}

div.contact
{
	width: 625px;
}

div.rightside
{
	width: 250px;
	height: 200px;
	float: left;
}
	
	div.rightside2
{
	width: 750px;
	float: right;
	height: 180px;
	padding-top: 20px;
}
	
	.leftside 
{
	width:100%;
	height:100%;
	top:0%;
	position:relative;
	float: right;
	}
	
	.leftside_aboutme 
{
	width:75%;
	height:100%;
	top:0%;
	position: relative;
	float: left;
	left: 12%;
	}

	.leftside_portfolio 
{
	width:78%;
	height:100%;
	top:0%;
	position:relative;
	float: right;
	}
	
	.leftside1
{
	width:100%;
	height:100%;
	top:0%;
	position:relative;
	float: right;
}

	.middlesection
{
	width:100%;
	top:0%;
	position:relative;
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #666666;
	background-color: #E1E1E1;
	padding-bottom: 30px;
}
	.middlesection_boxes
{
	width:50%;
	top:0%;
	position:relative;
	margin-right: auto;
	margin-left: auto;
	left: 30px;
}

.middlesection_socialmedia
{
	width:350px;
	top:0%;
	position:relative;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
}

.qitem {
	width:126px;
	height:126px;	
	border:4px solid #222;	
	margin:5px 5px 5px 0;
	background: url('bg.gif') no-repeat;
	
	
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
	cursor:hand; cursor:pointer;
}

	.qitem img {
		border:0;
	
		/* allow javascript moves the img position*/
		position:absolute;
		z-index:200;
	}

	.qitem .caption {
		position:absolute;
		z-index:0;	
		color:#ccc;
		display:block;
	}

		.qitem .caption h4 {
			font-size:12px;
			padding:10px 5px 0 8px;
			margin:0;
			color:#369ead;
		}

		.qitem .caption p {
			font-size:10px;	
			padding:3px 5px 0 8px;
			margin:0;
		}



/* Setting for corners */

.topLeft, .topRight, .bottomLeft, .bottomRight {
	position:absolute;
	background-repeat: no-repeat; 
	float:left;
}

.topLeft {
	background-position: top left; 	
} 

.topRight {
	background-position: top right; 
} 

.bottomLeft {
	background-position: bottom left; 
} 

.bottomRight {
	background-position: bottom right; 
}
.clear {
	clear:both;	
}

#navigation{
	width:100%;
	height:80px;
	padding-top: 0px;
	border-top-width: thick;
	border-top-style: solid;
	border-top-color: #000000;
}
#navigation ul
{margin:0px; padding:0px;}

#navigation ul li
{display:inline; height:30px; list-style:none; margin-left:15px;}

.menusectionsplit {
	width:50%;
	height:100%;
	float: left;
	}

.menusectionsplit_right {
	width:50%;
	height:100%;
	float: left;
	margin-top: 25px;
	}