body {
font-size: 10px; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: #eee;
color: #333;
margin:0;
}

a{
text-decoration: none;
}

#links{
width:660px;
margin:0 auto 8px auto;
overflow:hidden;
}
#links a.but{
display:block;
float:left;
padding:2px;
margin:0 2px;
background-color:#f8f8f8;
border:1px solid #CCCCCC;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
}
#sites, #projetcs, #books{
display:none;
border:1px solid #CCCCCC;
background-color:#f8f8f8;
}
#page{
width:660px;
margin:8px auto;
background: #fff;
border: 1px solid #aaa;
}
.infoBox{
background: #f8f8f8;
margin:10px;
padding:0 4px;
height:189px;
border:1px solid #ccc;
}
.infoBox h1, .infoBox h2{
padding:0px;
margin:0px;
}
#personalPhoto{
background:url(cv/Hazem_Khaled.jpg) no-repeat 70% 30%;
height:190px;
width:150px;
float:right;
margin:10px;
}
#personalPhoto a{
background:url(cv/more_photos.png) no-repeat;
display:block;
height:16px;
left:164px;
position:relative;
top:214px;
width:16px;
}
#personalPhoto span{
background:url(cv/Hazem_Khaled.jpg) no-repeat center 52%;
display:none;
height:230px;
left:-30px;
position:relative;
width:180px;
}
#personalPhoto:hover span{
display:block;
}

.detailsBox{
background: #f8f8f8;
margin:10px;
padding:0;
border:1px solid #333;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomright:5px;
}
.detailsBox h3{
margin:0;
padding:0;
background-color:#333;
color:#eee;
display:inline;
padding:0 10px 0 3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomright:3px;
}
.detailsBox .detailsContent{
padding:5px;
}
.detailsBox .detailsContent strong{
border:solid #ddd;
border-width:0 1px 1px 0;
-moz-border-radius-bottomright:5px;
}
.works{
overflow:hidden;
padding:5px;
}
.works div{
border:1px solid #CCCCCC;
float:left;
height:55px;
margin:1px 0;
padding:4px;
width:68%;
}
.works div:hover{
background-color:#ccc;
border-color:#333;
}
.works .project{
border-right-width:0;
width:28%;
}
.works .project a{
font-weight:bold;
}