@import url('reset.css');

body
{
	background: #cbc5a6 url(../img/bg.png);
	color: #000;
	padding-top: 80px;
	font: normal 11px "lucida grande", "Segoe UI", arial, verdana, "lucida sans unicode", tahoma, sans-serif;
}

h1
{
	text-align: center;
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	padding-top: 80px;
	background: url(../img/avatar.png) no-repeat center 24px;
	height: 20px;
}

h2{
	color: #CBC5A6;
	text-align: center;
	font-weight: normal;
	font-style: normal;
	padding-bottom: 20px;
	padding-top: 0;
	height: 10px;
}

h3
{
	text-align: center;
	font-size: 14px;
	font-weight: normal;
	font-style: normal;
	padding-top: 30px;
	padding-bottom: 10px;
	background: url(../img/telephone.png) no-repeat center 10px;
	height: 20px;
}

a
{
	color: #000;
	text-decoration: none;
}

p
{
	padding: 5px 20px 10px;
	line-height: 16px;
}

.paragraph
{
	padding-left: 20px;
	float: left;
	padding-right: 5px;
	padding-top: 10px;
}

a:hover
{
	text-decoration: underline;
}

#container {
	
	margin-right: auto;
	margin-left: auto;
	width: 220px;
}

.arrow{
	position: absolute;
	top: 11px;
	left: -25px;
}

img.arrow:hover{
	opacity: 0.5;
}

.arrow2{
	position: absolute;
	top: 11px;
	right: -25px;
}

img.arrow2:hover{
	opacity: 0.5;
}

ul li{
	height: 42px;
	margin-top: 10px;
	line-height: 42px;
}

ul a{
	display: block;
	padding-left: 50px;
}

ul a:hover{
	display: block;
	text-decoration: none;
	font-weight: bold;
}

ul.links a{
	display: block;
	padding-left: 0;
}

.abouttitle{
	padding-left: 50px;
	background: url(../img/nav.png) -440px 0;
	position: relative;
}


.about{
	background-image: url(../img/nav.png);
}

.about:hover{
	background: url(../img/nav.png) -220px 0;
}



.contacttitle{
	padding-left: 50px;
	background: url(../img/nav.png) -440px -84px;
	position: relative;
}


.worktitle{
	padding-left: 50px;
	background: url(../img/nav.png) -440px -42px;
	position: relative;
}

.email{
	background: url(../img/nav.png) 0px 42px;
}

.email:hover{
	background: url(../img/nav.png) -220px 42px;
}

.email2{
	background: url(../img/nav2.png) 0px 42px;
}

.email2:hover{
	background: url(../img/nav2.png) -220px 42px;
}

.tele{
	background: url(../img/nav.png) 0 -126px;
}

.tele:hover{
	background: url(../img/nav.png) -220px -126px;
}

.mobile{
	background: url(../img/nav.png) 0 -168px;
}

.mobile:hover{
	background: url(../img/nav.png) -220px -168px;
}

.mobile2{
	background: url(../img/nav2.png) 0 -168px;
}

.mobile2:hover{
	background: url(../img/nav2.png) -220px -168px;
}

.vcard{
	background: url(../img/nav.png) 0 -210px;
}

.vcard:hover{
	background: url(../img/nav.png) -220px -210px;
}

.vcard2{
	background: url(../img/nav2.png) 0 -210px;
}

.vcard2:hover{
	background: url(../img/nav2.png) -220px -210px;
}

.web{
	padding-left: 50px;
	background: url(../img/nav.png) -220px -462px;
}

.graphic{
	padding-left: 50px;
	background: url(../img/nav.png) -220px -504px;
	clear: both;
}


.mywork{
	background: url(../img/nav.png) 0 -42px;
}

.mywork:hover{
	background: url(../img/nav.png) -220px -42px;
}

.contact{
	background: url(../img/nav.png) 0 -84px;
}

.contact:hover{
	background: url(../img/nav.png) -220px -84px;
}

.uidesign{
	background: url(../img/nav.png) 0 -252px;
	padding-left: 50px;
	position: relative;
}

.uidesign:hover{
	background: url(../img/nav.png) -220px -252px;
}

.coder{
	background: url(../img/nav.png) 0 -294px;
	padding-left: 50px;
}

.coder:hover{
	background: url(../img/nav.png) -220px -294px;
}

.gamer{
	background: url(../img/nav.png) 0 -336px;
	padding-left: 50px;
}

.gamer:hover{
	background: url(../img/nav.png) -220px -336px;
}

.socialite{
	background: url(../img/nav.png) 0 -378px;
	padding-left: 50px;
}

.socialite:hover{
	background: url(../img/nav.png) -220px -378px;
}


ul.social{
	background: url(../img/nav.png) no-repeat -220px -420px;
	height: 42px;
	margin-top: 10px;
	width: 220px;
	padding-left: 10px;
}

ul.social a{
	padding: 0;
}

ul.social li{
	display: inline;
	margin: 0;
	padding: 6px 10px 0;
	float: left;
}

.workcontent{
	background: url(../img/box_mid.png) repeat-y;
	float: left;
	padding-top: 10px;
}

ul.portfolio{
	padding-left: 20px;
	float: left;
	margin-bottom: 10px;
	width: 220px;
	*height: 124px;
}

ul.portfolio a{
	padding: 0;
}

ul.portfolio a:hover{
	opacity: 0.5;
}

ul.portfolio li{
	display: inline;
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
	float: left;
	margin-bottom: 10px;
	height: 42px;
}


ul.footer{
	text-align: center;
	
}

ul.footer a{
	margin: 0;
	padding: 0;
}

.heart{
	background: url(../img/icons_footer.png) no-repeat center 10px;
	height: 20px;
	padding-top: 20px;
}

.buy{
	background: url(../img/icons_footer.png) no-repeat center -30px;
	height: 20px;
	padding-top: 20px;
}

ul.social img:hover{
	opacity: 0.5;
	padding-top: 6px;
}

/* @end */

/* @group Available Sticker */

.sticker{
	position: absolute;
	top: -50px;
	left: 150px;
	z-index: 90;
}

img.sticker:hover{
	opacity: 0.9;
}


/* @end */

/* @group Box Styling */

.boxtop
{
	
	background: url(../img/box_top.png) no-repeat left;
	height: 12px;
	position: relative;
	margin-top: 10px;
}

.boxcontent{
	background: url(../img/box_mid.png) repeat-y;
}

.boxbot
{
	background: url(../img/box_bottom.png) no-repeat left bottom;
		height: 12px;
	clear: both;
}

ul.big li {
	margin-top: 0;
}

/* @end */

#lightbox{

	position: absolute;

	top: 40px;

	left: 0;

	width: 100%;

	z-index: 100;

	text-align: center;

	line-height: 0;

	}



#lightbox a img{ border: none; }



#outerImageContainer{

	position: relative;

	background-color: #fff;

	width: 250px;

	height: 250px;

	margin: 0 auto;

	}



#imageContainer{

	padding: 10px;

	}



#loading{

	position: absolute;

	top: 40%;

	left: 0%;

	height: 25%;

	width: 100%;

	text-align: center;

	line-height: 0;

	}

#hoverNav{

	position: absolute;

	top: 0;

	left: 0;

	height: 100%;

	width: 100%;

	z-index: 10;

	}

#imageContainer>#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}



#prevLink, #nextLink{

	width: 49%;

	height: 100%;

	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */

	display: block;

	}

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }





#imageDataContainer{

	font: 10px Verdana, Helvetica, sans-serif;

	background-color: #fff;

	margin: 0 auto;

	line-height: 1.4em;

	}



#imageData{

	padding:0 10px;

	}

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	

#imageData #caption{ font-weight: bold;	}

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			

#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	

		

#overlay {

	position: absolute;

	top: 0;

	left: 0;

	z-index: 90;

	width: 100%;

	height: 500px;

	background-color: #000;

	filter:alpha(opacity=60);

	-moz-opacity: 0.6;

	opacity: 0.6;

	}



.photoGalleryElement {clear: both;}


.photoGalleryElement .thumbnail .thumbContents {

	padding: 0 !important;
	background-color: transparent !important;
	border: none !important;
	margin: 0 !important;

	}



.photoGalleryElement .thumbShadow {	

	display: inline;

	float: left;	

	padding: 0;

	border: 0;

	margin: 8px;

	text-align: center;

	}



.photoGalleryElement .thumbShadow .thumbContents  {

	background: url(../images/thumbShadow.png) no-repeat right bottom;

	}



.photoGalleryTxtBox 

{

    width: 100px;

    font-family: Verdana;

    font-size: 10px;

}



* html .photoGalleryElement .thumbShadow .thumbContents  {

	background-image: url(../images/thumbShadow.gif);

	}



.photoGalleryElement .thumbShadow img {

	background: #FFF;

	padding: 6px;

	border: 1px solid #CCC;

	margin: -6px 6px 6px -6px;

	}



.photoGalleryElement .thumbTile, .photoGalleryElement .thumbHover {

	display: inline;

	float: left;	

	padding: 0;

	border: 0;

	margin: 0 8px 8px 0;

	}



.photoGalleryElement .thumbHover a img {

	filter:alpha(opacity=40);

	-moz-opacity: 0.4;

	opacity: 0.4;

	}



.photoGalleryElement .thumbHover a:hover img {

	filter:alpha(opacity=100);

	-moz-opacity: 1;

	opacity: 1;

	}



.photoGalleryElement .thumbTight {

	display: inline;

	float: left;	

	padding: 0;

	border: 0;

	margin: 0;

	}	



.photoGalleryElement .thumbTile img, .photoGalleryElement .thumbTight img, .photoGalleryElement .thumbHover img {

	border: 0;

	margin-bottom: -4px;

	}



*:first-child+html .photoGalleryElement *:first-child+html .thumbTile img, *:first-child+html .photoGalleryElement .thumbHover img {

	margin-bottom: 0;

	}



	

.photoGalleryElement .thumbnail p {

	margin: 0;

	}

	



.clearfix:after, .photoGalleryElement:after {

	content: "."; 

	display: block; 

	height: 0; 

	clear: both; 

	visibility: hidden;

	}



* html>body .clearfix, * html>body .photoGalleryElement {

	display: inline-block; 

	width: 100%;

	}



* html .clearfix, * html .photoGalleryElement {

	/* Hides from IE-mac \*/

	height: 1%;

	/* End hide from IE-mac */

	}	

/*-----------------------------------

Addition by MSG for new photo sorting

------------------------------------*/

.thumbFileName {

    text-align: center;

    cursor: default;

    line-height: 19px;

    width: 106px;

    overflow: hidden;

    display: block;

    margin: auto;

    white-space: nowrap;

}

.thumbImageContainer {

    width: 100px;

    height: 100px;

    display: block;

    text-align: center;

    margin: auto;

}

.photoGalleryElement .thumbnail .thumbContents img {
	width: 50px !important;
	height: 50px !important;
	display: inline !important;
	float: left !important;
	margin-bottom: 10px !important;
	margin-left: 5px !important;
	margin-right: 5px !important;
	text-align: center !important;
	float:left !important;
	min-height:none !important;
	border:2px solid #CCCCCC;
}

.photoGalleryElement .thumbnail {
	display:inline;
	float:left;
	margin-bottom:0 !important;
	margin-right:10px !important;
	min-height:0 !important;
	padding:0;
	text-align:center !important;
	width:50px !important;
	margin-top:0;
}