* { margin: 0; padding: 0; }
html { height: 101%; }
body { background: #f2f2f2 url('images/bg-tile.png'); font-size: 62.5%; padding: 5px 0; }

h1 { font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; color: #454545; font-size: 3.6em; margin-bottom: 6px; }
h2 { font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; color: #484848; font-size: 2.5em; margin-bottom: 10px; text-decoration: underline; }
h3 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: #777; font-weight: normal; font-size: 1.8em; margin-bottom: 10px; }
h4 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: #656565; font-weight: bold; font-size: 1.75em; margin-bottom: 4px; }

p { font-family: "Balthazar", "Droid Serif", serif; color: #565656; font-size: 1.8em; line-height: 1em; margin-bottom: 15px; padding-left: 35px; }
small { font-family: "Balthazar", "Droid Serif", serif; color: #656565; font-size: 1.6em; display: block; margin-bottom: 6px; }
ul { display: block; list-style: none; }
ul li { list-style-type: none; vertical-align: top; background: url('images/bullet.png') 25px -2px no-repeat; }
ul li, div.sectionContent { color: #666; padding-left: 45px; font-size: 1.6em; margin-bottom: 5px; line-height: 1.2em;  font-family: "Balthazar", "Droid Serif", serif;}
ul li li { font-size: 1em; }

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

a { color: #5582d6; text-decoration: none; }
a:hover { text-decoration: underline; }

/** @group core layout **/
#w { margin: 0px auto; padding: 20px 40px; background: #fff; min-width: 260px; max-width: 900px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; position: relative; }
#pdf_download {
    background: url('/images/pdf_dl.png'); width: 64px; height: 64px; display: block; position: absolute; right: 0; top: 0;
    text-indent: -9999px;                 /* sends the text off-screen */
    white-space: nowrap;            /* because only the first line is indented */
}

header { width: 100%; }

sup {
    /* hack to avoid line-height troubles */
    vertical-align: top;
    position: relative;
    top: -0.3em;
    font-size: 80%;
}


/** @group personal settings **/
#nameAndJobTitle {
    margin-bottom: 10px;
    display: flex;
}
#name {
    font-size: 3em;
    flex-shrink: 1;
}
#job {
    font-size: 3em;
    flex-grow: 1;
    text-align: center;
}
#info { display: table; width: 100%; }
.subInfo { display: table-cell; vertical-align: top; }
#subInfoPhoto { width: 120px; }

li.experienceItem { background: none; padding: 0; display: block; width: auto; }
li.experienceContentItem { display: block; width: auto; }
.experienceTitle { font-size: 1.2em; }
.experienceDate { text-decoration: underline; }
.experienceCompany { font-style: italic; }
.experienceJobName { font-weight: bold; }
.experienceContentTitle { text-decoration: underline; }

.educationDate { text-decoration: underline; }
li.educationItem { display: block; width: auto; }
li.educationDetailsItem { display: block; width: auto; font-size: 1em; margin-bottom: 0; }
#language li { display: inline-block; width: 40%; }

/** @group skills **/
#skills { width: 100%; }
#skillsTable { display: table; width: 100%; }
.skillsWrapper { vertical-align: top; display: table-cell; width: 20%; }
.skillsWrapper ul, .skillsWrapper h4 { margin-right: 30px; }
.skillsWrapper:last-child ul, .skillsWrapper:last-child h4 { margin-right: 0; }
.skillsWrapper ul li { padding-left: 15px; list-style-type: none; vertical-align: top; background: url('images/bullet.png') -5px -2px no-repeat; margin-bottom: 5px; font-family: "Balthazar", "Droid Serif", serif; color: #666; font-size: 1.6em; line-height: 1.2em; }

#languageBlock { display: flex; align-items: center; }
#languageList { flex-grow: 1; margin-left: 80px; }


/** @group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

@media (max-width: 800px) {
    #nameAndJobTitle {
        flex-direction: column;
    }
    #languageBlock { display: block; }
    #languageList { margin-left: 0; }
}

@media print {
  body {
    font-size:50%;
    background: none;
  }
  #nameAndJobTitle {
    flex-direction: row;
  }
  #pdf_download {
    display: none;
  }
}