img { border: 0; max-width: 100%; }

/** @group personal settings **/
#info { float: left; margin-bottom: 12px; }
#photo { float: right; }
#photo img { 
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
background-color: #fff;
border: 1px solid #ccc;
padding: 5px; 
}

/** @group skills **/
#skills-left { display: block; float: left; margin-right: 30px; }
#skills-middle { display: block; float: left; margin-right: 20px; }
#skills-right { display: block; float: left;}




ul#menu li {
  display:inline;
}

ul[title]::before {
    content: attr(title);
    /* then add some nice styling as needed, eg: */
    display: block;
    font-weight: 600;
    padding: 4px;
}