/* Main Style sheet */

body{
	background-color:#EAEAD4;
	background-image: url('../images/bg_gradient.png');
	background-repeat: repeat-x;
	width: 100%;
	overflow-x: hidden;
}

img, fieldset{
	border:none;
}

div#global{
	width:800px;
	height: 700px;
	margin-left:auto;
	margin-right:auto;
}

div#loading{
	position:absolute;
	left:45%;
	top:35%;
	width:133px;
	height:133px;
}

div#image-loading{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	
}

div.top-area{
	position:relative;
	width: 100%;
	height:18%;
}

div.site-nav{
	position: relative;
	float:left;
	height:100%;
}

a.nav{
	font-family:"Times New Roman", Times, serif;
	font-size:18px;
	color:#998675;
	text-decoration:none;
	padding-left: 20px;	
}

img.nav-sep{
	padding-left:19px;	
}

div.logo{
	position:relative;
	float:right;
}

div.middle-area{
	position:relative;
	width:100%;
	height:70%;
}

div#middle-area{
	visibility:hidden;
}

@font-face {   
   font-family: 'Garton';   
   src: url("garto16.otf"), url("garto16.eof"), url( 'garto16.ttf' ) format("truetype"); 
}   
 
div.page-title, span.page-title{
	font-family:'Garton', "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size:72px;
	color:#736357;
	z-index:200;
}

div#birds, div.bird1, div.bird2, div.bird3, div.bird4, div.bird5{
	position:absolute;	
}

div#birds{
	top:0px;
	left:0px;
	width:250px;
	height: 150px;
	z-index:-100;
}

div.bird1{
	top:30px;
	left:150px;
}

div.bird2{
	top:65px;
	left:100px;
}

div.bird3{
	top:75px;
	left:50px;
}

div.bird4{
	top:15px;
	left:100px;
}

div.bird5{
	top:0px;
	left:35px;
}

div#cloud01, div#cloud02, div#cloud03, div#cloud04, div#IEDebug_R{
	position:absolute;
	float:right;
}

div#cloud01{
	top:50px;	
}

div#cloud02{
	top:100px;	
}

div#cloud03{
	top:25px;
}

div#cloud04{
	top:85px;
}

div#IEDebug_R{
	/*
	background-image:url('../images/fade_gradient.png');
	background-repeat:repeat-y;
	width:206px;
	*/
	background-color:#EAEAD4;
	width:150px;
	height:50%;
	right:0px;	
	top:0px;
	visibility:hidden;
}

div#design-area{
	position:relative;
	left:-8px;
}

/*Code for About Me page*/

div.aboutme{
	font-family:"Times New Roman", Times, serif;
	text-align:justify;
	font-size: 14px;
	color: #534741;
	
	position:relative;
	top:100px;
}

div.content-column1 b{
	/*font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;*/
	color:#C2B59B;	
}

div.content-column1 b:hover{
	background-color:#C2B59B;
	color:#594A42;
	cursor:pointer;
}

p.downloadCV{
	position:relative;
	top:40px;
	width:124px;
	margin-left:auto;
	margin-right:auto;
}

a.download-cv{
	background-color:#C7B299;
	padding:7px 7px 7px 7px;
	border:dashed 1px #534741;
	text-decoration:none;
	color:#534741;
	height:30px;
}

a.download-cv:hover{
	color:#666;
}

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

/*Exclusive code for Portfolio page*/
div#content{
	position:absolute;
	/*background-color:#EAEAD4;*/
	height:700px;
	width:800px;
}

div.portfolio{
	position:relative;
	height:100%;		
}

div.illustration-bnr, div.identities-bnr, div.web-bnr, div.videos-bnr{
	background-image:url('../images/titlebar_gradient.png');
	background-repeat:repeat-x;
	width:635px;
	height:41px;
	margin-top:20px;
}

div.illustration-bnr a, div.identities-bnr a, div.web-bnr a, div.videos-bnr a{
	position:relative;
	top:-28%;
	left:15px;
	
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size:24px;
	color:#736357;
	
	text-decoration:none;
}

div.illustration-bnr a:hover, div.identities-bnr a:hover, div.web-bnr a:hover, div.videos-bnr a:hover{
	color: #BAB986;
}

div.top-corners{
	height:15px;
	width:634px;
}

img.topLeft-corner{
	position:absolute;
	left:0px;	
}

img.topRight-corner{
	position:absolute;
	left:77.5%;		
}

div.bottom-corners{
	position:relative;
	height:15px;
	width:634px;
	top:-52%;
}

img.bottomLeft-corner{
	position:absolute;
	left:0px;	
}

img.bottomRight-corner{
	position:absolute;
	left:97.8%;		
}

div.illustrations, div.identities, div.web, div.videos{
	margin-top:10px;
}

div#illustration1, div#illustration2, div#web1, div#web2, div#web3, div#identity1, 
div#identity2, div#identity3, div#identity4, div#video1, div#video2, div#video3{
	position:absolute;
	left:1px;
	width:623px;
	height:0px;
	background-color:#000;
	display:inline;
	visibility:hidden;
	
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size:72px;
	color:#E5E1CA;
	
	padding-left:10px;
	padding-top:5px;
}
	/*Portfolio Pieces*/
	div.page-title span.category-name{
		color:#BAB6A0;	
	}
	
	div.flying-house{
		position:absolute;
		top:0px;
		right:0px;
	}
	
	div.project-info{
		position:relative;
		width:100%
	}
	
	div.screenshots{
		position:relative;
		float:left;
		width:23%;
	}
	
	div.project-title{
		position:relative;
		left:5px;
		width:100%;
		font-family:'Garton', "Palatino Linotype", "Book Antiqua", Palatino, serif;
		font-size:36px;
		color:#BAB6A0;
	}
	
	a.thumbnails{
		position:relative;
		display:inline;
		padding-left:5px;
	}
	
	div.separater{
		position:relative;
		float:left;
		top:20px;
		width:10%;
	}
	
	div.about-project{
		position:relative;
		float:left;
		width:65%;	
	}
	
	td.detail, td.detail-description{
		font-family: "Times New Roman", Times, serif;
		font-size: 15px;	
		color: #534741;
	}
	
	td.detail{
		font-style: italic;
		width:90px;
		vertical-align:text-top;
	}
	
	a.download-demo{
		color:#4DA5AA;	
		text-decoration:none;
	}
	
	a.download-demo:hover{
		text-decoration:underline;
	}
	/*------------------*/
	
	/*Screenshots viewer*/
	div#ss-viewer-area{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		visibility:hidden;
	}
	
	div#screenshots-viewer{
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		
		background-color:#000;
		-moz-opacity:.50; 
		filter:alpha(opacity=50); 
		opacity:.50;
		
		/*visibility:hidden;*/
	}
	
	div#viewer-area{
		position:absolute;
		top:0px;
		width:100%;
		/*visibility:hidden;*/
	}
	
	div.viewer-window{
		margin-left:auto;
		margin-right: auto;
		
		width:800px;
		height:auto;		
	}
	
	div#control-UI{
		position:relative;
		background-image:url(../images/thmbViewer_nightGradient.png);
		background-repeat:repeat-x;
		width:100%;
		height:48px;
		vertical-align:middle;
	}
	
	div.UI-buttons, div.ss-info{
		width:800px;
		margin-left:auto;
		margin-right:auto;
	}
	
	div.feature{
		position:relative;
		float:left;
		margin-left:15px;
		display:inline-block;	
	}
	
	div#control-UI span.controlUI-title{
		position:relative;
		left:10px;
		top:10px;
		
		font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
		font-size:12px;
		color:#075770;
	}
	
	div#control-UI a.a-btn{
		position:relative;
		left:10px;
		top:9px;
		
		display:inline-block;
		background-image:url('../images/thmbViewer_night_btnOut.png');
		background-repeat:no-repeat;
		
		font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
		font-size:12px;
		color:#075770;
		
		width:50px;
		height:23px;
		
		text-align:center;
		vertical-align:middle;
		text-decoration:none;
		
		cursor:pointer;
	}
	
	div#control-UI a#night-btn2{
		background-image:url('../images/thmbViewer_night_btnDown.png');
		background-repeat:no-repeat;	
	}
	
	div#control-UI a.a-btn:hover{
		background-image:url('../images/thmbViewer_btnDisabled.png');
		background-repeat:no-repeat;
	}
	
	div#control-UI a.a-btn:active{
		background-image:url('../images/thmbViewer_night_btnDown.png');
		background-repeat:no-repeat;
	}
	
	div#control-UI a.a-btn span{
		position:relative;
		top:2px;
	}
	
	div.special-btns{
		position:relative;
		float:right;
		right:25px;
		top:12px;
	}
		
	div#screenshots-title{
		position:relative;
		background-color:#BAB6A0;
		width:100%;
		height:auto;

		font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
		font-size:18px;
		
		padding:10px;
		color:#075770;
	}
	
	div.tip-container{
		position:relative;	
		top:-10px;
	}
	
	div#tip-area{
		visibility:hidden;
		position:absolute;
		top:0px;
	}
	
	div#tip-area div#tip-pointer{
		position:absolute;
		top:-17px;
		right:10px;
	}
	
	div#viewer-window{
		position:relative;
		width:800px;
		height:600px;
		overflow:hidden;
	}
	
	div#tip-area div#tip-txt{
		background-color:#075770;
		width: 65px;
		height: 15px;
		
		font-size:10px;
		color:#BAB6A0;
		text-align:center;
	}
	
	div#ss-title{
		position:relative;
		float:left;
		width:92%;
	}
	
	a.ss-reset{
		font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
		font-size:12px;
		text-decoration:none;
		
		position:relative;
		float:none;
		width:3%;
	}
	
	a.ss-reset:hover{
		text-decoration:underline;
		cursor:pointer;
	}
	/*------------------*/
	
	div.catNameColourVideo{
		color: #CC6600;	
	}
	
	div.catNameColourWeb{
		color: #996666;	
	}
	
	div.catNameColourIllustration{
		color: #999966;	
	}
	
	div.catNameColourIdentities{
		color: #669933;	
	}
	
	div.category-bnr{	
		background-repeat:no-repeat;
		background-position:bottom;
		width: 100%;
		height: 190px;	
	}
	
	div.video{
		background-image: url('../images/videos_flow.png');
	}
	
	div.web{
		background-image: url('../images/web_flow.png');
	}
	
	div.illustration{
		background-image: url('../images/illustrations_flow.png');
	}

	div.identities{
		background-image: url('../images/identities_flow.png');
	}
/*--------------------------------*/


/*Exclusive code for Contact page*/
div.contact{
	position:relative;
	top:80px;
}

div#design-area h2{
	font-family:'Garton', "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color:#998675;	
	
	position:relative;
	left:12px;
}

div.online-contact, div.other-methods{
	position:relative;	
	height:320px;
}

div.online-contact{
	float:left;
	width:65%;
}

div.other-methods{
	float:right;
	width:32%;
}

div#name-input1, div#name-input2, div#name-input3{
	width:478px;
	height:38px;
}

div#name-input2, div#name-input3{
	margin-top:40px;	
}

div#name-input3{
	height:140px !important;
}

input.name-input, textarea.msg-input{
	border:#C7C5B2 1px solid;
	
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size:14px;
	color:#998675;
	padding:20px;
}

input.name-input{
	width:452px;
	
	background-image:url(../images/gradient_input.gif);
	background-repeat:repeat-x; 	
}

textarea.msg-input{
	width:452px;
	height:105px;
	
	background-image:url(../images/gradient_textarea.gif);
	background-repeat:repeat-x; 
	background-color:#EAEAD4;
}

div.tc-input, div.tc-input3{
	position:relative;
	width:494px;
	height:12px;
	top:12px;
	
	background-image:url(../images/gradient_input.gif);
	background-repeat:repeat-x; 	
	border-top:1px solid;
	border-top-color:#C7C5B2;
}

div.bc-input1, div.bc-input2, div.bc-input3{
	position:relative;
	height:12px;
	width:494px;
	background-color:#EAEAD4;
	border-bottom:1px solid;
	border-bottom-color:#C7C5B2;
}

div.bc-input3{
	top:-12px;
}

div.bc-input1, div.bc-input2{
	bottom:12px;
}

img.tl-input, img.tr-input, img.bl-input, img.br-input{
	position:absolute;
}

img.tl-input{
	top:-1px;
	left:0;
}

img.tr-input{
	top:-1px;
	right:0;
}

img.bl-input{
	bottom:-1px;
	left:0;	
}

img.br-input{
	bottom:-1px;
	right:0;	
}

div.socialConnect_icons{
	background-image:url(../images/social_connect.png);
	background-repeat:no-repeat;
	width:254px;
	height:146px;
}

a#facebook_ico, a#linkedin_ico, a#twitter_ico{
	position:relative;
	float:left;
	top:65px;
	margin-left:30px;	
	
	cursor: pointer;
}

div.sendMail-btn{
	background-image:url(../images/send_out.png);
	background-repeat:no-repeat;
	width:260px;
	height:123px;
	
	position:relative;
	bottom:-45px;
	
	cursor:pointer;
}

div.sendMail-btn a{
	font-family:'Garton', "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size:22px;
	color:#534741;
	
	position:relative;
	left:80px;
	top:73px;
	
	cursor:pointer;
	text-decoration:none;
}

div.sendMail-btn:hover{
	background-image:url(../images/send_over.png);
	background-repeat:no-repeat;
	width:260px;
	height:123px;
}

div.sendMail-btn:active{
	background-image:url(../images/send_down.png);
	background-repeat:no-repeat;
	width:260px;
	height:123px;	
}
/*--------------------------------*/

div.bottom-area{
	position:relative;
	width:100%;
	height:12%;
}

div.footer-content{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#BAB6A0;
}

/*---- TEST AREA -----*/
div#pieces{
	width:100%;
	height:100%;
	
	position:absolute;
	top:0px;
	left:0px;
}
/*--------------------*/