/******************************************************* 
Stylesheet by ALA, with only minor modifications by Tero
********************************************************/

/*********************** 
general styling
************************/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; }

body, button, input, select, textarea { font-family: sans-serif; color: #222; }

a { color: #00e; }
a:visited { }
a:hover {  }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

html { font-size: 100%; overflow-y: auto; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

/*********************** 
important for easy em usage
************************/
body { font-size: 62.5%; }

/*********************** 
a clean header font
************************/
@font-face {
    font-family: 'OpenSansRegular';
    src: url('font/OpenSans-Regular-webfont.eot');
    src: url('font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/OpenSans-Regular-webfont.woff') format('woff'),
         url('font/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('font/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'OpenSansBold';
    src: url('font/OpenSans-Bold-webfont.eot');
    src: url('font/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/OpenSans-Bold-webfont.woff') format('woff'),
         url('font/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('font/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*********************** 
our mobile-first styles
************************/
[role="main"] {
    font-family: "OpenSansRegular";
    float:left;
    width:100%;
}
#container {
    width:100%;
    margin:0 auto;
    max-width: 800px;
    position:relative;
}
#inner-wrap {
    -webkit-box-shadow: 0 0 0 0 transparent;
    -moz-box-shadow: 0 0 0 0 transparent;
    box-shadow: 0 0 0 0 transparent;
    float:left;
    padding:2em 1em;
}
    .col-one header {
        float:none;
        width:80%;
        white-space: nowrap;
    }
header h2,
dd.achievement,
#work-experience:after,
.col-two dl:after,
.col-two ul:after,
.col-two blockquote p,
article h2 {
    color:#31a8ca;
}
header h1,
header h2 {
    margin: 0;
    font-weight:normal;
}   
header h1 {
    font-family: "OpenSansBold";
    font-size: 3em;
    margin-bottom:-0.1em;
}
header h2 {
    font-family: "OpenSansRegular";
    font-size: 2em;
}
article hgroup {
    float:left;
    width:100%;
}
    article hgroup * {
        margin:0;
        padding:0;
    }
#work-experience:after,
.col-two dl:after,
.col-two ul:after {
    content:'\00B7';
    display: block;
    font-size: 3.5em;
    margin: 0.25em auto -0.1em 0;
}
.col-two dl:after,
.col-two ul:after {
    margin-left:0;
}
#work-experience {
    float:left;
}

    }
dl {
    clear:left;
    margin: 0 0 1em;
}
dt,
dd,
.col-two h1,
.col-two li,
.col-two p,
blockquote span {
    font-size: 1.2em;
    margin: 0;
}
blockquote {
        font-weight: bold;
        margin: 0 0 2em;
}
blockquote span {
    color:#211B1B;
    display:block;
}
blockquote span:before {
    content: "- ";
}
.col-two blockquote p {
    font-size: 1.45em;
    margin-bottom:1em;
}
blockquote p:before {
    content: '"';
}
blockquote p:after {
    content: '"';
}
dt {
    text-align:left;
    width:100%; 
    float:left;
    text-align:left;
    font-style:italic;
    clear:left;
}
dd {
    margin:0;
}
.col-one,
.col-two {
    float:none;
    width:auto;
    clear:left;
}
.col-two {
    margin-top:2em;
    float:left;
    clear:left;
}
    .col-one article {
        float:left;
        clear:left;
        margin-bottom:1em;
     }
    #contact-info {
        margin-bottom:2.5em;
        float:left;
        width:100%;
    }
    #contact-info dd {
        float:left;
        width: 79.5361%;
    }
    .col-one > div {
        padding: 0;
    }
    .col-two h2 {
        margin:0;
    }
    .col-two dt {
        display: block;
        float: none;
        font-style: normal;
        margin: 0.7em 0 0;
        text-align: left;
        width: auto;
        color:#211b1b;
    }
    .col-two dt:first-child {
        margin-top:1.1em;
    }
    .date-ranges {
        width:100%;
        float:left;
    }
    .col-two dd,
    .col-two > p,
    .job-start,
    .job-end {
        font-style:italic;
        color:#6c575a;
    }
    .job-start,
    .job-end {
        font-size:1.2em;
        clear:left;
        float:none;
        text-align:left;
        width:100%;
    }
    .job-company,
    .job-title,
    .company-name,
    .job-details {
        font-size:1.2em;
        line-height: 1.4em;
    }
    .job-start:after {
        display:none;
        content: "";
    }   
    .job-end:before {
        content: "– ";
    }
    .job-details {
        float:left;
        width:100%;
        margin:0;
        padding:0;
    }
    .col-two ul {
        padding:0;
    }
    .col-two li {
        list-style: none;
        font-style:italic;
        color:#6C575A;
        margin-bottom:0.25em;
    }
#logo {
    position:absolute;
    top:0;
    right:0;
}
/*********************** 
these styles will override
our mobile-first styles for
larger displays
************************/
@media only screen and (min-width: 520px) {
  /* Style adjustments for viewports 520px and over go here */
    .col-one {
        float:left;
        width: 65%;
    }
        .col-one header {
            float:right;
        }
        .col-one > div {
            padding:0 4em 0 0;
        }
    .col-two {
        float:right;
        width:35%;
        margin-top:13.6em;
        clear:none;
    }
    dt {
        text-align:right;
        width: 15.4639%;
    }
    #contact-info dd {
        float:right;
    }
    article hgroup {
        float:right;
        width: 79.5361%;
    }
    #inner-wrap {
        -webkit-box-shadow: 0 0 3px 2px #ccc;
        -moz-box-shadow: 0 0 3px 2px #ccc;
        box-shadow: 0 0 3px 2px #ccc;
    }
    .job-start,
    .job-end {
        text-align:right;
        float:left;
    }
    .job-start:after {
        display:block;
        content: "";
    }
    .job-details {
        float:right;
        width:79.536082474%;
    }   
    .date-ranges {
        width: 15.4639%;
        transition:all .3s ease;
        -o-transition:all .3s ease; 
        -moz-transition:all .3s ease;
        -webkit-transition:all .3s ease;        
    }
    #logo {
        top: 1em;
        right: 1em;
    }
    .col-two dl:after,
    .col-two ul:after {
        margin-left:0;
    }
}