@charset "utf-8";
/* CSS Document */
/*
Author: Milos Milikic
URI: http://milos.milikic.info
*/

html, body{
	margin: 0;
	padding: 0;
}

body{
	background: #5e747d url(../images/bg-body.jpg);
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #ffffff;
	text-shadow: 0 1px 1px #000000;
}

a{
	font-weight: normal;
	color:#e09391;
	text-decoration: none;
}

a:hover{
	font-weight: normal;
	color:#801c0f;
	text-decoration: none;
	text-shadow: 0 1px 1px #aaaaaa;
}

a:focus{
	-moz-outline: none;
}

img{
	border: none;
}

p{
	margin: 0;
}

h1{
	display: none;
}

h2{
	font-size: 36px;
	font-weight: normal;
	font-style: italic;
}

h3{
	font-size: 24px;
	font-weight: normal;
	font-style: italic;
	margin-top: 0;
	margin-bottom: 20px;
}

#container{
	width: 960px;
	position: absolute;
	left: 50%;
	margin-left: -480px;
	background: url(../images/bg-container.jpg) center top no-repeat;
}

.link-btn{
	margin-top: 20px;
}

.tooltip{
	width: 203px;
	position: relative;
}
 
#tt-bio em{
	background: url(../images/tt-bio.gif) no-repeat;
	width: 203px;
	height: 49px;
	position: absolute;
	top: -50px;
	left: -0px;
	text-align: center;
	z-index: 2;
	display: none;
	text-indent: -8000%;
}

#tt-projects em{
	background: url(../images/tt-projects.gif) no-repeat;
	width: 203px;
	height: 49px;
	position: absolute;
	top: -50px;
	left: -0px;
	text-align: center;
	z-index: 2;
	display: none;
	text-indent: -8000%;
}

#tt-research em{
	background: url(../images/tt-research.gif) no-repeat;
	width: 203px;
	height: 49px;
	position: absolute;
	top: -50px;
	left: -0px;
	text-align: center;
	z-index: 2;
	display: none;
	text-indent: -8000%;
}

/*---------------------------------------------------------------*/
/*---HEADER---*/
/*---------------------------------------------------------------*/

#header{
	width: 960px;
	height: 210px;
	float: left;
	margin-bottom: 20px;
}

#logo{
	width: 256px;
	height: 180px;
	position: absolute;
	left: 355px;
	top: 0;
}

/*---------------------------------------------------------------*/
/*---MENU---*/
/*---------------------------------------------------------------*/

#navigation{
	width: 880px;
	height: 43px;
	float: left;
	display: inline;
	margin-top: 100px;
	margin-left: 40px;
}

#menu{
	list-style: none;
	padding: 0;
	margin: 0;
	width: 880px;
	height: 43px;
}

#menu li{
	display: inline;
}

#menu a{
	float: left;
	display: inline;
	text-indent: -5000%;
	outline: none;
}

#menu a:hover{
  	background-position: left bottom;
}

#menu .home{
	width: 150px;
	height: 43px;
	background: url(../images/btn-home.jpg) no-repeat;
}

#menu .bio{
	width: 150px;
	height: 43px;
	background: url(../images/btn-bio.jpg) no-repeat;
}

#menu .projects{
	width: 150px;
	height: 43px;
	background: url(../images/btn-projects.jpg) no-repeat;
	margin-left: 280px;
}

#menu .research{
	width: 150px;
	height: 43px;
	background: url(../images/btn-research.jpg) no-repeat;
}

#navigation a:hover {
	background-position: left center;
}

#navigation a#selected, #navigation a#selected:hover{
	background-position: left bottom;
}

/*---------------------------------------------------------------*/
/*---INTRO---*/
/*---------------------------------------------------------------*/

#intro{
	float: left;
	width: 960px;
	height: 290px;
}

#about{
	float: left;
	display: inline;
	width: 600px;
}

#about p{
	font-size: 18px;
}

#aboutSep{
	float: left;
	width: 600px;
	height: 1px;
	background: url(../images/dash-hor.gif) repeat-x;
	margin-top: 30px;
}

#pics{
	float: right;
	display: inline;
	width: 360px;
	height: 290px;
	background: url(../images/bg-pics.jpg) no-repeat top right;
}

#pics img{
	float: left;
	margin-left: 56px;
	margin-top: 38px;
}

.clip{
	position: absolute;
	left: 835px;
	top: 215px;
}

/*---------------------------------------------------------------*/
/*---GOOD OLD AI---*/
/*---------------------------------------------------------------*/

#goai{
	float: left;
	display: inline;
	width: 600px;
	margin-top: 20px;
}

.floatLeft{
	float: left;
	margin-right: 10px;
}

#goaiSep{
	float: left;
	width: 1px;
	height: 220px;
	background: url(../images/dash-ver.gif) repeat-y;
	margin-left: 20px;
	margin-top: 25px;
}

/*---------------------------------------------------------------*/
/*---MY RESEARCH---*/
/*---------------------------------------------------------------*/

#public{
	float: right;
	display: inline;
	width: 320px;
	margin-top: 20px;
}

/*---------------------------------------------------------------*/
/*---BIO PAGE---*/
/*---------------------------------------------------------------*/

.row{
	width: 960px;
	float: left;	
}

.row h3{
	float: left;
	display: inline;
	margin: 0;
	padding: 0;
}

.bioTitle{
	width: 250px;
}

#titleEducation{
	height: 70px;
	line-height: 70px;
}

#titleWorkingExpirience{
	height: 30px;
	line-height: 30px;
}

#titleAdditionalEducation{
	height: 14px;
	line-height: 14px;
}

#titleAwards{
	height: 90px;
	line-height: 90px;
}

.sep960{
	clear: both
	width: 960px;
	height: 1px;
	margin-top: 20px;
	margin-bottom: 20px;
	background: url(../images/dash-hor.gif) repeat-x;
}

/*---------------------------------------------------------------*/
/*---PROJECTS PAGE---*/
/*---------------------------------------------------------------*/

.projectsTitle{
	width: 190px;
}

#titleSmileyOntology{
	height: 70px;
	line-height: 70px;
}

#titleOnlinePresence{
	height: 70px;
	line-height: 70px;
}

/*---------------------------------------------------------------*/
/*---RESEARCH PAGE---*/
/*---------------------------------------------------------------*/

.researchTitle{
	width: 100px;
}

#title2009{
	height: 30px;
	line-height: 30px;
}

#title2010{
	height: 14px;
	line-height: 14px;
}

/*---------------------------------------------------------------*/
/*---FOOTER---*/
/*---------------------------------------------------------------*/

#footer{
	float: left;
	width: 960px;
	clear: both;
	margin-top: 30px;
	margin-bottom: 10px;
}

#footerTop{
	float: left;
	width: 960px;
	height: 10px;
	background: url(../images/bg-footer-top.jpg) repeat-x;
	margin: 0;
	padding: 0;
}

#footerLeftTop{
	float: left;
	width: 950px;
	height: 10px;
	background: url(../images/bg-footer-top-left.jpg) top left no-repeat;
}

#footerRightTop{
	float: left;
	width: 10px;
	height: 10px;
	background: url(../images/bg-footer-top-right.jpg) no-repeat;
}

#footerLeft{
	float: left;
	width: 10px;
	height: 180px;
	background: url(../images/bg-footer-left.jpg) repeat-y;
}

#footerCenter{
	float: left;
	width: 940px;
	height: 180px;
	background: url(../images/bg-footer.jpg);
	margin: 0;
	padding: 0;
}

#footerRight{
	float: left;
	width: 10px;
	height: 180px;
	background: url(../images/bg-footer-right.jpg) repeat-y;
}

#footerBottom{
	float: left;
	width: 960px;
	height: 10px;
	background: url(../images/bg-footer-bottom.jpg) repeat-x;
	margin: 0;
	padding: 0;
}

#footerLeftBottom{
	float: left;
	width: 950px;
	height: 10px;
	background: url(../images/bg-footer-bottom-left.jpg) top left no-repeat;
}

#footerRightBottom{
	float: left;
	width: 10px;
	height: 10px;
	background: url(../images/bg-footer-bottom-right.jpg) no-repeat;
}

.friends{
	float: left;
	display: inline;
	width: 300px;
	margin-left: 10px;
	margin-top: 10px;
}

.columns{  
	-moz-column-count: 2;  
	-webkit-column-count: 2;  
}

.meta{
	float: left;
	display: inline;
	width: 239px;
	margin-left: 10px;
	margin-top: 10px;
}

.contact{
	float: left;
	display: inline;
	width: 299px;
	margin-left: 10px;
	margin-top: 10px;
}

.footerSep{
	float: left;
	width: 1px;
	height: 150px;
	background: url(../images/dash-ver.gif) repeat-y;
	margin-left: 15px;
	margin-right: 20px;
	margin-top: 20px;
}

#twitter{
	margin-top: 20px;
	margin-right: 15px;
}

#mendeley{
	margin-top: 20px;
}

#creditsLeft{
	float: left;
	width: 200px;
	margin-top: 10px;
	margin-left: 20px;
	font-size: 11px;
}

#creditsRight{
	float: right;
	width: 200px;
	margin-top: 10px;
	margin-right: 20px;
	font-size: 11px;
	text-align: right;
}