@font-face {
font-family:'MyMono';
src:url('font/telegrama_render.ttf') format('truetype');
font-weight:normal;
font-style:normal;
}

body {
position:relative;
width:100%;
text-align:left;
margin:auto;
font-family:MyMono,monospace;
font-size:13px;
color:#222;
background-color:#333;
background-image:url(../img/bg.jpg);
font-variant-ligatures: none;
}

a {
color:#800;
text-decoration:none;
outline:none;
}

a:hover {
text-shadow:0pt 1px 0pt rgba(0, 0, 0, 0.45), 0pt 0pt 7px rgba(255, 255, 255, 0.75);
}

#bodiv{
margin:0 auto;
min-width:476px;
min-width:350px;
max-width:878px;
/* border: solid 2px #ddd; */
padding:2px;
height:100%;
}

#header {
display:inline-block;
width:100%;
/* text-shadow:0px -1px 0px rgba(0,0,0,.5); */
text-shadow:0px 1px 0px rgba(0, 0, 0, 0.25), 0pt 0pt 3px rgba(255,255,255,.5);
border-bottom:solid 3px #800;
}

#header span {
position:relative;
display:block;
font-size:28px;
font-weight:bold;
padding:10px 0 10px 40px;
margin:22px 0;
background-color:#e0e0e0;
background-color:rgba(240,240,240,.5);
filter:alpha(opacity=50); /* for IE8 and earlier */
}
#header span a {
color:#222;
}
#header span img {
position:absolute;
top:0;
right:40px;
height:100%;
}
#header .blinker {
/*text-decoration:blink;*/
animation: blinkme 1.5s cubic-bezier(.77,0,.18,1) infinite;
}

#container {
max-width:860px;
line-height:1.9;
padding:18px 10px;
margin:0 auto;
background-color:#fff;
}

#content {
/* display:inline-block; */
/* vertical-align:top; */
display:table-cell;
padding:0 10px 0 18px;
}

#content a {
/* text-decoration:underline; */
}
#content p {
margin-top:0;
text-align:center;
}
#content p,
#content span {
font-weight:800;
}

/* ~~~~ menu in ~~~~ */
#menu {
/* display:inline-block; */
vertical-align:top;
display:table-cell;
margin:0;
border-right:dashed 3px #444;
padding:0 18px 0 0;
}
#menu ul li a.current {
/* font-weight:800; */
/* background-color:#e0e0e0; */
/* background-color:rgba(255,255,255,.7); */
/* filter:alpha(opacity=70); */ /* for IE8 and earlier */
border-bottom:solid 2px #800;
}
#menu ul {
width:100%;
position:relative; /* per rendere assoluto il "dropdown" */
margin:0;
padding:0;
list-style:none;
list-style-type:none;
}
#menu ul li {
display:block;
width:100%;
background-color:#eee;
background-color:rgba(230,230,230,.7);
filter:alpha(opacity=70); /* for IE8 and earlier */
text-align:right;
}
#menu ul li.par {
background-color:#fff;
background-color:rgba(255,255,255,.7);
filter:alpha(opacity=50); /* for IE8 and earlier */
}
#menu ul li.last {
text-align:center;
}
#menu ul li a {
padding:5px;
color:#222;
display:block;
text-decoration:none;
border-bottom:solid 2px #ccc;
}
#menu ul li a:hover {
background-color:#d0d0d0;
background-color:rgba(255,255,255,.2);
filter:alpha(opacity=20); /* for IE8 and earlier */
}
#menu ul li a:hover {
color:#800;
}
/* ~~~~ menu out ~~~~ */

.well {
padding:8px;
margin:8px;
/* border:1px solid #eee; */
border-radius:3px;
background-color:#f5f5f5;
}

.photo {
}
.photo > div {
max-width:120px;
max-height:120px;
height:auto;
margin:20px auto 40px;
padding:3px;
border-radius:50%;
/* border:2px dashed #ccc; */
}
.photo > div > div {
border-radius:50%;
background-image:url('../img/cv.jpg');
padding-bottom:100%;
background-size:cover;
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
}
/*
.photo > div > div:hover {
background-image:url('../img/cv-1.jpg');
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
} */

/* ~~~~ wd in ~~~~ */
#wd {
position:relative;
}
#wd li a div {
display:none;
padding:4px;
text-align:center;
overflow:hidden;
border-left:2px #aaa dashed;
border-right:2px #aaa dashed;
}
#wd li a:hover div {
display:block;
}
#wd li a div img {
max-width:100px;
height:auto;
margin:12px 0 0 0;
}
/* ~~~~ wd out ~~~~ */

.table {
display:table;
width:100%;
}
.row.head {
background-color:#e6e6e6;
font-weight:bold;
}
.row {
display:table-row;
}
.cell {
display:table-cell;
padding:4px 7px;
}
.row:nth-child(even) {
background:#fff;
}

.center {
text-align:center;
}

#footer {
/* float:left; */
display:inline-block;
width:100%;
font-size:12px;
}

#footer span {
display:block;
margin:22px 0;
padding:10px 0 10px 40px;
background-color:#e0e0e0;
background-color:rgba(240,240,240,.5);
filter:alpha(opacity=50); /* for IE8 and earlier */
}

/* ~~~~  shadows in ~~~~ */
#header, /* 2bot shadow */
#header span,
#menu ul li ul {
box-shadow: 0 3px 4px -4px #333;
-moz-box-shadow: 0 3px 4px -4px #333;
-webkit-box-shadow: 0 3px 4px -4px #333;
-khtml-box-shadow: 0 3px 4px -4px #333;
}
#footer, /* 2top shadow */
#footer span {
box-shadow: 0 -3px 4px -4px #333;
-moz-box-shadow: 0 -3px 4px -4px #333;
-webkit-box-shadow: 0 -3px 4px -4px #333;
-khtml-box-shadow: 0 -3px 4px -4px #333;
}
/* ~~~~  shadows out ~~~~ */

@media (max-width:480px) {
    #header .blinker {
    display:none;
    }
    #header span {
    padding-left: 24px;
    }
    #header span img {
    right: 24px;
    }
    #menu,
    #content {
    display:block;
    }
    #menu {
    padding:0;
    border-right:none;
    margin-bottom:28px;
    }
    #menu ul li {
    display: inline-block;
    width:33%;
    text-align:center;
    }
    #menu ul li a {
    border-bottom-style: dashed;
    }
    #footer {
    text-align:center;
    }
    #footer span {
    padding-left:0;
    }
}

@media (min-width:600px) {
    #wd .box {
    display:block;
    padding:4px;
    border-left:2px #aaa dashed;
    border-right:2px #aaa dashed;
    width:116px;
    }
    #wd .box,
    #wd li a div {
    position:absolute;
    left:264px;
    top:0;
    height:100%;
    }
    #wd li a div {
    margin:0;
    border-left:none;
    border-right:none;
    /* to fill non-border gap */
    margin-left:2px;
    }
    #wd li a div img {
    margin:0 8px;
    }
    #wd li a:hover div{
    border-left:2px #444 dashed;
    border-right:2px #444 dashed;
    margin-left:0;
    z-index:1;
    }
}

@keyframes blinkme {
    0% {
    opacity: 1;
    }
    50% {
    opacity: 0;
    }
}