body {
    margin: 10px auto;
    max-width: 700px;
    width: 80%;
}
hgroup, section, ol li {
    letter-spacing: -4px;
    word-spacing: -4px;
}
h1, h3, .when, dt {
    width: 30%;
}
h2, a.portfolio, ul, h4, .where, .what, .ie6 dd, .ie7 dd {
/*    width: 67.143%;*/
    width: 70%;
}
h2, h4, .where, .what {
    padding-left: 20px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
h1, h2, h3, h4 {
    display: inline-block;
}
h3, h4 {
    vertical-align: top;
}
a.portfolio {
    line-height: 18px;
    margin-left: 20px;
}
dl {
    margin-top: -20px;
}
dt {
    clear: left;
    float: left;
    text-align: right;
}
dd {
    float: left;
    margin-left: 0;
    padding-left: 20px;
    width: 70%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
dd + dd {
    clear: left;
}
ul {
    display: inline-block;
    margin-left: -20px;
    padding-left: 20px;
}
ul li {
    margin-left: -20px;
    padding-left: 40px;
    text-indent: -40px;
}
ul li:before {
    padding-right: 20px;
    width: 20px;
}
ol li:before, ol li:after { content: ""; display: table; }
ol li:after { clear: both; }
ol li { zoom: 1; }
.when {
    float: left;
    font-size: 0;
    position: relative;
    text-indent: -999em;
}
time {
    display: block;
    font-size: 13px;
    margin-left: 25%;
    text-indent: 0;
}
time:first-child {
    margin-left: 0;
}
time + time:before {
    content: "to ";
}
.where {
    float: right;
    position: relative;
}
#education h4 {
    margin-left: 0;
    padding-left: 20px;
    position: relative;
}
.where:before, #education h4:before {
    display: block;
    position: absolute;
    left: -23px;
    text-align: right;
    top: 0;
    width: 20px;
}
.what {
    float: right;
    font-size: 100%;
    text-align: left;
    text-indent: 0;
}
.what-dett {
    clear: both;
}
.where + .what-dett {
    padding-top: 0.3em;
}
dd + dd { /*for IE6/7 we need to split from the rules above*/
    margin-left: 30%;
    padding-left: 20px;
}
p.when.clearfix:before, p.when.clearfix:after {
    display: none;
}


/* IE mods */
.ie6 body,
.ie7 body,
.ie8 body {
    width: 700px;
}
.ie9 h1:hover:after,
.ie8 h1:hover:after {
    font-size: 16px;
}
.ie6 h1, .ie6 h2, .ie6 h3, .ie6 .when, .ie6 h4, .ie6 ul,
.ie7 h1, .ie7 h2, .ie7 h3, .ie7 .when, .ie7 h4, .ie7 ul {
    display: inline;
}
.ie6 h1,
.ie7 h1 {
    cursor: auto;
}
.ie6 h4,
.ie7 h4 {
    margin-left: 0;
    margin-right: 0;
}
.ie6 #education h4,
.ie7 #education h4 {
    padding-left: 0;
}
.ie6 #about dd:last-child,
.ie7 #about dd:last-child {
    display: inline;
    margin-left: 30%;
    padding-left: 20px;
}
.ie6 #skills li,
.ie7 #skills li {
    list-style: square;
    margin-left: 22px;
}
.ie6 .when,
.ie7 .when {
    margin-right: 20px;
    text-align: right;
    text-indent: 0;
}
.ie6 a:hover, .ie6 a:active,
.ie7 a:hover, .ie7 a:active {
    border-bottom: 0 none;
    text-decoration: underline;
}
.ie9 a.url {
    display: inline;
}


@media screen {
    html {
        background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(rgba(0,0,0,0)), to(rgba(0,0,0,.8)));
        background-image: -moz-radial-gradient(center 45deg, circle farthest-side, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 150%);
        background-image:      radial-gradient(center 45deg, circle farthest-side, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 150%);
    }
    body {
        -webkit-box-shadow: 6px 20px 20px rgba(0, 0, 0, 0.5), -6px -20px 20px rgba(0, 0, 0, 0.5);
           -moz-box-shadow: 6px 20px 20px rgba(0, 0, 0, 0.5), -6px -20px 20px rgba(0, 0, 0, 0.5);
                box-shadow: 6px 20px 20px rgba(0, 0, 0, 0.5), -6px -20px 20px rgba(0, 0, 0, 0.5);
    }
    .no-cssgradients body {
        -webkit-box-shadow: 6px 3px 20px rgba(0, 0, 0, 0.5);
           -moz-box-shadow: 6px 3px 20px rgba(0, 0, 0, 0.5);
                box-shadow: 6px 3px 20px rgba(0, 0, 0, 0.5);
    }
}