/* CSS Document */

body {
	margin: 0 auto;
	background:transparent url(images/bg.png) repeat;
	}

#wrapper {
	float:center;
	margin: 0 auto;
	width: 850px;
	height:100%;
 	}

#header {
	background:transparent url(images/header_bg.png) repeat-x center top;
	margin: 0 auto;
	height: 177px;
	}
	
#logotitle {
	float:left;
	background-image: url(images/title_logo.png);
	background-repeat:no-repeat;
	height: 124px;
	width: 500px;
	margin: 30px 0 0 0;
	}
	
#twitter{
	float:left;
	position:absolute;
	background-image: url(images/twitter.png);
	background-repeat:no-repeat;
	background-position:bottom;
	height: 186px;
	width: 64px;
	margin-left:200px;
	z-index:10;
	}
	
#seperator{	
	clear:both;}
	
	
/* Navigation Menu */
#navbar  {
	overflow:hidden;
	float:left;
	width:500px;
	height:41px;
	margin:23px 0 0 350px;
	}
	
#home {
	display: block;
	background: url(images/nav_1.png) no-repeat;
	height:40px;
	width:115px;
	}

#home:hover {
	background-position:0 -41px;}
	
#portfolio {
	margin: -40px 0 0 115px;
	display: block;
	background: url(images/nav_2.png) no-repeat;
	height:40px;
	width:115px;
	}

#portfolio:hover {
	background-position:0 -41px;}
	
#info {
	margin: -40px 0 0 230px;
	display: block;
	background: url(images/nav_3.png) no-repeat;
	height:40px;
	width:115px;
	}

#info:hover {
	background-position:0 -41px;}
	
#blog {
	margin: -40px 0 0 345px;
	display: block;
	background: url(images/nav_4.png) no-repeat;
	height:40px;
	width:115px;
	}

#blog:hover {
	background-position:0 -41px;}
/* END Navigation Menu */


/* Home Page */	
#postit {
	clear:both;
	float:left;
	background: url(images/postit.png) no-repeat;
	height:300px;
	width:293px;
	}
	
#recent {
	margin: 15px 0 0 10px;
	}	

#contenth{
	float:left;}
	
#left_column {
	clear:both;
	float:left;
	width:375px;}
	
#right_column {
	float:left;
	margin: -3px 0 10px 15px;
	width:425px;}

#tag {
	float:right;
	background: url(images/tag2.png) no-repeat;
	width:100px;
	height:77px;
	margin: -20px 40px 0 0;
	z-index:-10;
	}
	
/* Recent Works Gallery */
#wrapper_gallery {
	float: left;
	height:100%;
	width: 450px;
	margin: 15px 0 10px 55px;
	}
	
#gallery_slider {
	margin: 5px 0 0 7px;
	}
		
#gallery_slider ul {
	margin:0;
	padding:0;
	list-style:none;
	}
			
#gallery_slider li {
	padding:0;
	width: 450px;
	height: 175px;
	overflow: hidden
	}
					
#gallery_slider li a{
	float:left;
	width: 84px;
	height: 84px;
	display: block;
	padding: 3.25px 2px 2px 3.25px;
	background: url(images/bg_image.png) 0 0 no-repeat;
		}

#prevBtn {
	font-family: 'GaramondS';
	float: left;
	margin: 8px 0 0 7px;
	}
					
#nextBtn {
	font-family: 'GaramondS';
	float: right;
	margin: 8px 0 0 0;
	}
/* END Recent Works Gallery */


/*JUITTER PLUGIN CSS - TWEETS*/
/*Juitter container*/
#juitterContainer{
	height:auto;
	width:340px;
	margin-left:20px} 
	
/* UL that will contain the list of tweets */
#juitterContainer .twittList{
	margin:0;
	padding:0;} 

/* Bellow the list of tweets "<li>" */
#juitterContainer .twittLI{
	font-family: 'Today';
	font-size:15.5px;
	list-style:none;
	padding:10px 0 8px 0;
	clear:both;
	height:auto;} 
	
#juitterContainer .twittList SPAN.time{
	font-family: 'Today';
	font-size:15.5px;
	color:#666666;}
	
/*Links inside the tweets list */	
#juitterContainer .twittList A{
	font-family: 'TodayM';
	font-size:15.5px;
	color:#720808;} 

/* Bellow the CSS for the avatar image  */
#juitterContainer .juitterAvatar{
	float:left;
	margin-right:5px;
	margin-left:15px;
	border:0;
	padding:3px 0 16px 0;
	width:15px;
	height:15px;}

 /*read it on twitter link*/
#juitterContainer .jRM{
	float:right;
	clear:both}

/*CSS for the external links*/
#juitterContainer .extLink{} 

/*CSS for the hash links*/
#juitterContainer .hashLink{} 
/*END of Juitter CSS*/


/* Social Media Box */
#social-media-box{
	}

#social-media-box a	{
	width:73px;
	height:28px;
	background-repeat:no-repeat;
	background-position:0 0;
	overflow:hidden;
	text-indent:-5000px;
	float:left;
	margin:2px 0 0 .5px;
	}

#social-media-box a:hover	{
	background-position:0 -28px;
	}

#social-media-krop	{
	margin:2px 0 0 5px;
	background-image:url(images/social-media-krop.png);}

#social-media-twitter	{
	background-image:url(images/social-media-twitter.png);}

#social-media-flickr	{
	background-image:url(images/social-media-flickr.png);}

#social-media-facebook	{
	background-image:url(images/social-media-facebook.png);}

#social-media-linkedin	{
	background-image:url(images/social-media-linkedin.png);}
/* END Social Media Box */
/* END Home Page */	
	
	
/* Portfolio Page */
#contentp {
	float:left;
	width:850px;
	margin-top:40px;}
	
/* Slideshow */
.content {
	/* The display of content is enabled by a javascript generated style on the page.
	   This is so that the slideshow content won't display unless javascript is enabled. */
	display: none;
	float:right;
	width:550px; 
	}

.content a, .navigation a {
	text-decoration: none;
	color: #777;
	}
	
.content  a:focus, .content  a:hover, .content  a:active {
	text-decoration: none;
	}

#caption-header {
	font-family: 'TodayB', Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 22px;
	color: #555555;
	margin:10px 0 5px 35px;
	}	
	
#caption-title {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 15px;
	color: #555555;
	margin:0 0 4px 35px;
	}

#caption-body {
	font-family: 'Today';
	font-size:15px;
	word-spacing:3px;
	color: #333333;
	margin:0 0 0 35px;
	}	

#controls {
	font-family: 'GaramondS';
	font-size:15px	
	}
	
.controls {
	margin: 5px 50px 5px 0;
	height: 23px;
	}

.ss-controls {
	float: left;
	}
	
.ss-controls a {
	padding-right: 5px;
	}

.nav-controls {
	float: right;
	}

.nav-controls a {
	padding-left: 15px;

	}
	
.loader {
	background-image: url('loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 500px;
	height: 350px
	}
	
.slideshow {
	clear: both;
	}
	
.slideshow span.image-wrapper {
	float: left;
	padding-bottom: 6px;
	}
	
.slideshow a.advance-link {
	padding: 2px;
	display: block;
	border: 1px solid #ccc;
	}
	
.slideshow img {
	border: none;
	display: block;
	}
	
.embox {
	clear: both;
	padding: 12px;
	}
	
.navigation {
	/* The navigation style is set by a javascript generated style on the page.
	   This is so that the javascript specific styles won't be applied unless javascript is enabled. */
	}
	
ul.thumbs {
	clear: both;
	margin-left:15px;
	padding: 0;
	}
	
ul.thumbs li {
	float: left;
	padding: 0;
	margin: 5px 10px 5px 0;
	list-style: none;
	}
	
a.thumb {
	padding: 2px;
	display: block;
	border: 1px solid #ccc;
	}
	
ul.thumbs li.selected a.thumb {
	background: #fff;
	border: 1px solid #ccc;
	}
	
a.thumb:focus {
	outline: none;
	}
	
ul.thumbs img {
	border: none;
	display: block;
	}

.pagination {
	clear: both;
	}
	
.navigation .top {
	margin-top: -40px;
	height: 11px;
	}
	
.navigation .bottom {
	margin-top: 40px;
	}

.pagination a, .pagination span.current {
	font-family: 'GaramondS';
	display: block;
	float: left;
	margin-right: 2px;
	padding: 4px 4px 2px 4px;
	}
	
.pagination a:hover {

	}
	
.pagination span.current {
	}

/* Minimal Gallery Styles */
#thumbs-min ul.thumbs li {
	float: none;
	padding: 0;
	margin: 0;
	list-style: none;
	}

#thumbs-min a.thumb {
	padding: 0px;
	display: inline;
	border: none;
	}

#thumbs-min ul.thumbs li.selected a.thumb {
	background: inherit;
	color: #000;
	font-weight: bold;
	}
/* END Slideshow */
/* END Portfolio Page */


/* Info Page */
#infotext{
	float:left;
	margin:30px 0 30px 0;
	}

#description {
	margin: 10px 20px 0 20px;
	word-spacing:2px;
	text-align:justify;
	}

#signature {
	display:block;
	float:left;
	background: url(images/signature.png) no-repeat;
	width:100px;
	height:32px;
	margin: 10px 20px 0 20px;
	}

#email {
	display:block;
	float:left;
	background: url(images/mail.png) no-repeat;
	width:100px;
	height:30px;
	margin: 10px 0 0 150px;
	}
	
#infopic {
	float:left;
	background: url(images/info-image.png) no-repeat;
	width:365px;
	height:345px;
	margin:35px 0 0 20px;
	}
	
#resume {
	float:left;
	background: url(images/resume.png) no-repeat;
	width:35px;
	height:100px;
	margin:-37px 0 30px 260px;}
	
#pbook {
	float:left;
	background: url(images/portfolio.png) no-repeat;
	width:35px;
	height:100px;
	margin:-37px 0 30px 15px;
	}
/* END Info Page */


/* Small Box */
.small-box .middle{
	clear:both;
	float:left;
	width:370px;
	background-image:url(images/small-rect-middle.jpg);
	background-repeat:repeat-y;
	}

.small-box .top	{
	clear:both;
	float:left;
	width:370px;
	height:10px;
	background-image:url(images/small-rect-top.png);
	background-repeat:no-repeat;
	overflow:hidden;
	line-height:1px;
	}

.small-box .bottom	{
	clear:both;
	float:left;
	width:370px;
	height:12px;
	margin-bottom:15px;
	background-image:url(images/small-rect-bottom.png);
	background-repeat:no-repeat;
	overflow:hidden;
	line-height:1px;
	}
/* END Small Box */


/* Large Box */
.large-box .middle{
	clear:both;
	float:left;
	width:410px;
	background-image:url(images/large-rect-middle.png);
	background-repeat:repeat-y;
	}

.large-box .top	{
	clear:both;
	float:left;
	width:410px;
	height:11px;
	background-image:url(images/large-rect-top.png);
	background-repeat:no-repeat;
	overflow:hidden;
	line-height:1px;
	}

.large-box .bottom	{
	clear:both;
	float:left;
	width:410px;
	height:14px;
	background-image:url(images/large-rect-bottom.png);
	background-repeat:no-repeat;
	overflow:hidden;
	line-height:1px;
	}
/* END Large Box */


/* SS Nav Box */
.nav-box .middle1{
	clear:both;
	float:left;
	width:200px;
	background-image:url(images/small2-rect-middle.jpg);
	background-repeat:repeat-y;
	}

.nav-box .top1	{
	clear:both;
	float:left;
	width:200px;
	height:6px;
	margin-top:-15px;
	background-image:url(images/small2-rect-top.png);
	background-repeat:no-repeat;
	overflow:hidden;
	line-height:1px;
	}

.nav-box .bottom1	{
	clear:both;
	float:left;
	width:200px;
	height:6px;
	margin-top:-30px;
	margin-bottom:15px;
	background-image:url(images/small2-rect-bottom.png);
	background-repeat:no-repeat;
	overflow:hidden;
	line-height:1px;
	}
/* END SS Nav Box */

/* SS Box */
.ss-box {
	margin-left:-10px}

.ss-box .middle{
	clear:both;
	float:left;
	width:500px;
	background-image:url(images/large2-rect-middle.png);
	background-repeat:repeat-y;
	}

.ss-box .top	{
	clear:both;
	float:left;
	width:500px;
	height:13px;
	background-image:url(images/large2-rect-top.png);
	background-repeat:no-repeat;
	overflow:hidden;
	line-height:1px;
	}

.ss-box .bottom	{
	clear:both;
	float:left;
	width:500px;
	height:13px;
	margin-bottom:30px;
	background-image:url(images/large2-rect-bottom.png);
	background-repeat:no-repeat;
	overflow:hidden;
	line-height:1px;
	}
/* END SS Box */


/* Typography & Links */
@font-face {
	font-family: 'Garamond';
	src: url('fonts/AGaramondPro-Regular.otf');}

@font-face {
	font-family: 'GaramondS';
	src: url('fonts/AGaramondPro-Semibold.otf');}

@font-face {
	font-family: 'GaramondI';
	src: url('fonts/AGaramondPro-Italic.otf');}

@font-face {
	font-family: 'GaramondP';
	src: url('fonts/GaramondPremrPro.otf');}

@font-face {
	font-family: 'GaramondPM';
	src: url('fonts/GaramondPremrPro-Med.otf');}

@font-face {
	font-family: 'Today';
	src: url('fonts/TodaySHOP-Regular.otf');}

@font-face {
	font-family: 'TodayB';
	src: url('fonts/TodaySHOP-Bold.otf');}

@font-face {
	font-family: 'TodayM';
	src: url('fonts/TodaySHOP-Medium.otf');}

.style1 {
	font-family: 'TodayB', Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 19px;
	padding-bottom:10px;
	color: #452e1b;}
	
.style2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	line-height:normal;
	color: #000000;}	
	
.style3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 12px;
	line-height:normal;
	color: #000000;}
	

h1 {	
	font-family: 'GaramondS', Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 25px;
	color: #666666;
	}
	
h2 {	
	font-family: 'TodayM', Arial, Helvetica, sans-serif;
	margin-bottom:10px;
	font-weight: bold;
	font-size: 20px;
	line-height:normal;
	color: #720808;}
	
h2 a{	
	font-family: 'TodayM', Arial, Helvetica, sans-serif;
	margin-bottom:10px;
	font-weight: bold;
	font-size: 20px;
	line-height:normal;
	color: #720808;}
	
p {
	font-family: 'Today';
	font-size:16px;
	line-height:20px;
	color: #000000;}
	
p1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 15px;
	line-height:normal;
	color: #777777;}
	
a {
	color: #666666;
	text-decoration: none;}

a:hover {
	text-decoration: underline;}
	
a:link, a:visited{
	text-decoration: none;
	}

	
ul { 
	list-style:none;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	line-height:normal;
	color: #000000;}
	
li {
	list-style:none;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12px;
	line-height:normal;
	color: #000000;}
/* END Typography & Links */