/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400);*/
/*
http://richadams.me - Basic Style
Author: Rich Adams (http://wblinks.com)
*/

/* DEFAULTS
***************************************************************************************************/

html, body {
    font-size: 14.5px;
    font-family: /*"Open Sans", */"Arial", sans-serif;
    background: #ddd;
    line-height: 1.1em;
    height: 100%;
    overflow: auto;
}

/* PAGE LAYOUT
***************************************************************************************************/

section#page {
    width: 800px;
    padding-right: 50px;
    border-right: 1px solid #c5c5c5;
    border-left: 1px solid #c5c5c5;
    left: 50%;
    position: absolute;
    margin-left: -425px;
    background: #fff;
    font-size: 0.9em;
    min-height: 100%;
    height: auto !important;
    height/**/: 100%; /* IE6 fix */
    padding-bottom: 50px;
}

/* TYPOGRAPHY
***************************************************************************************************/

h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
    padding-bottom: 5px;
}

h2 {
    text-transform: uppercase;
    font-weight: bold;
}

p {
    padding-bottom: 2px;
}

p.note {
    font-size: 0.9em;
    font-style: italic;
}

strong {
    font-weight: bold;
}

/* LISTS
***************************************************************************************************/

ul {
    margin-left: 40px;
    list-style: disc;
    margin: 10px 0px 10px 40px;
}

ul li {
    padding: 1px 0px 1px 0px;
}

/* LINKS
***************************************************************************************************/

a:hover {
    color: red;
}

/* SECTIONS GENERAL
***************************************************************************************************/

section {
    display: block;
    margin: 0px;
}

section h2 {
    float: left;
    padding-top: 10px;
    font-size: 1em;
    text-align: right;
    display: block;
    width: 120px;
}

section section.details {
    margin-left: 135px;
    padding-left: 15px;
    border-left: 2px solid #ddd;
    padding-top: 10px;
    padding-bottom: 15px;
}

/* HEADER
***************************************************************************************************/

header {
    margin-left: 87px;
    margin-bottom: 20px;
    padding-top: 30px;
    margin-right: -40px;
    display: block;
    line-height: 1.3em;
}

header .contact {
    display: inline;
    padding-left: 2px;
    padding-bottom: 3px;
    font-size: 1em;
}

header #main-photo {
    float: left;
    margin-top: -5px;
    margin-right: 15px;
    width: 50px;
    height: 50px;
    position: relative;
}

header #main-photo #vcard-add {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: rgba(0,0,0,0.5);
    width: 50px;
    height: 50px;
    opacity: 0;
    
    /* Transitions for browsers which support them. */
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}

header #main-photo #vcard-add img {
    position: absolute;
    bottom: 4px;
    right: 2px;
}

header #main-photo:hover #vcard-add {
    opacity: 1;
}

header #vcard-add img {
    margin-bottom: -3px;
}

header .contact span {
    padding-right: 5px;
}

header .contact strong {
    margin-right: 3px;
    color: #bbb;
}

header h1 a.fn {
    color: #000;
    text-decoration: none;
    font-weight: normal;
}

header h1 em {
    font-size: 0.7em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    text-transform: none;
    padding-bottom: 5px;
}

header span.email {
    padding-right: 0px;
}

header #pgp {
    padding-right: 3px;
}

header #pgp em.bracket {
    color: #aaa;
    font-weight: bold;
    font-size: 0.9em;
}

header #pgp a {
    padding-left: 20px;
    padding-top: 1px; /* Firefox & Chrome/Mac cuts off the top pixel (Chrome/Linux is fine though o_0). */
    background: url("/img/lock.png") center left no-repeat;
}

header #us_tel {
    padding-left: 20px;
    background: url("/img/us.png") center left no-repeat;
}

header #uk_tel {
    padding-left: 20px;
    background: url("/img/gb.png") center left no-repeat;
}

/*.wblinks-link {
    padding-left: 20px;
    background: url("/img/icons/wblinks.ico") center left no-repeat;
}*/

/* FOOTER
***************************************************************************************************/

footer {
    position: fixed !important;
    position/**/: absolute;
    width: 852px;
    bottom: 0px !important;
    bottom/**/: -1px;
    height: 1.5em;
    margin-left: -425px;
    left: 50%;
    font-size: 0.8em;
    color: #000;
    padding: 5px 0px 5px 0px;
    font-family: "Courier New", monospace;
    background: #ddd;
    border-top: 1px solid #c5c5c5;
}

footer em {
    color: #888;
}

footer a {
    color: #000;
}

footer a.pdf {
    background: url("../../img/pdf.png") center left no-repeat;
    padding-left: 20px;
}

/* INTRO
***************************************************************************************************/

section#intro a.photo-link img#picture-me {
    -webkit-box-shadow: 1px 1px 10px #d1d1d1;
    -moz-box-shadow: 1px 1px 10px #d1d1d1;
    -o-box-shadow: 1px 1px 10px #d1d1d1;
    -msb-box-shadow: 1px 1px 10px #d1d1d1;
    box-shadow: 1px 1px 10px #d1d1d1;
    margin: 10px 0px 0px 0px;
    padding: 0px;
    width: 660px;
    
    /*-webkit-transition: -webkit-box-shadow 0.5s ease-in-out;
    -moz-transition: -moz-box-shadow 0.5s ease-in-out;
	-o-transition: -o-box-shadow 0.5s ease-in-out;
	-ms-transition: -ms-box-shadow 0.5s ease-in-out;
	transition: box-shadow 0.5s ease-in-out;*/
}

section#intro a.photo-link {
    text-decoration: none;
}

section#intro a.photo-link section.picture-details {
    background: #000;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
    -ms-opacity: 0;
    opacity: 0;
    color: #fff;
    padding: 10px;
    margin-top: -2.9em;
    width: 640px;
    text-decoration: none;
    
    -webkit-transition: -webkit-opacity 0.5s ease-in-out;
    -moz-transition: -moz-opacity 0.5s ease-in-out;
	-o-transition: -o-opacity 0.5s ease-in-out;
	-ms-transition: -ms-opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}

section#intro a.photo-link:hover section.picture-details {
    -webkit-opacity: 0.7;
    -moz-opacity: 0.7;
    -o-opacity: 0.7;
    -ms-opacity: 0.7;
    opacity: 0.7;
}

section#intro p {
    line-height: 1.4em;
    font-size: 1.1em;
    font-style: italic;
    font-family: /*"Open Sans", */"Arial", sans-serif;
    font-weight: 200;
    margin-right: -20px;
}

/* ELSEWHERE
***************************************************************************************************/

/* Want to override a text-decoration in a sub-box, but it seems text decorations on boxes are 
rendered along the entire box, even if it contains child boxes. Unless you display those child
boxes as a table (inline-table) then playing with the margins ;) Nasty hack, but it works. */
section#elsewhere a em {
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	-ms-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
    text-decoration: none;
    display: inline-table;
    font-size: 1em;
    color: #bbb;
    background: #fff;
    margin-top: -5px;
    margin-bottom: -2px;
    padding-left: 5px;
}

section#elsewhere a:hover em {
    opacity: 1;
}

/* Firefox has a bug where it shows the text-decoration line though the em has no opactiy. I can
remove it completely using display: none, but then that messes up the transitions in Chrome. So
targetting Gecko specifically here. 
*/
@-moz-document url-prefix() {
    section#elsewhere a em {
        display: none;
    }
    
    section#elsewhere a:hover em {
        display: inline-table;
    }
}

section#elsewhere ul {
    overflow: auto;
    margin-left: 0px;
    margin-top: 0px;
}

section#elsewhere li {
    list-style: none;
    padding: 3px 0px 3px 20px;
    float: left;
    width: 190px;
}

section#elsewhere li.twitter {
    background: url("/img/icons/twitter.ico") center left no-repeat;
}

section#elsewhere li.flickr {
    background: url("/img/icons/flickr.ico") center left no-repeat;
}

section#elsewhere li.lastfm {
    background: url("/img/icons/lastfm.ico") center left no-repeat;
}

section#elsewhere li.stackoverflow {
    background: url("/img/icons/stackoverflow.ico") center left no-repeat;
}

section#elsewhere li.metastackoverflow {
    background: url("/img/icons/metastackoverflow.ico") center left no-repeat;
}

section#elsewhere li.serverfault {
    background: url("/img/icons/serverfault.ico") center left no-repeat;
}

section#elsewhere li.superuser {
    background: url("/img/icons/superuser.ico") center left no-repeat;
}

section#elsewhere li.delicious {
    background: url("/img/icons/delicious.ico") center left no-repeat;
}

section#elsewhere li.linkedin {
    background: url("/img/icons/linkedin.ico") center left no-repeat;
}

section#elsewhere li.google {
    background: url("/img/icons/google.ico") center left no-repeat;
}

section#elsewhere li.google-plus {
    background: url("/img/icons/google-plus.png") center left no-repeat;
}

section#elsewhere li.launchpad {
    background: url("/img/icons/launchpad.ico") center left no-repeat;
}

section#elsewhere li.stumbleupon {
    background: url("/img/icons/stumbleupon.ico") center left no-repeat;
}

section#elsewhere li.facebook {
    background: url("/img/icons/facebook.ico") center left no-repeat;
}

section#elsewhere li.github {
    background: url("/img/icons/github.ico") center left no-repeat;
}

/* READING
***************************************************************************************************/

section#reading ul li a img {
    margin: 8px;
    margin-right: 18px;
    -webkit-box-shadow: 0px 0px 8px #bbb;
    -moz-box-shadow: 0px 0px 8px #bbb;
    -o-box-shadow: 0px 0px 8px #bbb;
    -ms-box-shadow: 0px 0px 8px #bbb;
    box-shadow: 0px 0px 8px #bbb;
    
    -webkit-transition: -webkit-box-shadow 0.2s ease-in-out;
    -moz-transition: -moz-box-shadow 0.2s ease-in-out;
	-o-transition: -o-box-shadow 0.2s ease-in-out;
	-ms-transition: -ms-box-shadow 0.2s ease-in-out;
	transition: box-shadow 0.2s ease-in-out;
}

section#reading ul li a:hover img {
    box-shadow: 0px 0px 8px #555;
    -webkit-box-shadow: 0px 0px 8px #555;
    -moz-box-shadow: 0px 0px 8px #555;
    -o-box-shadow: 0px 0px 8px #555;
    -ms-box-shadow: 0px 0px 8px #555;
}

section#reading ul {
    list-style: none;
    margin-left: 15px;
    margin-right: -20px;
    overflow: auto;
}

section#reading ul li {
    float: left;
    margin-bottom: 5px;i
}

/* TRAVEL
***************************************************************************************************/

section#travel #travel-map {
    margin-top: 10px;
    width: 660px;
    -webkit-box-shadow: 0px 0px 10px #ddd;
    -moz-box-shadow: 0px 0px 10px #ddd;
    -o-box-shadow: 0px 0px 10px #ddd;
    -msb-box-shadow: 0px 0px 10px #ddd;
    box-shadow: 0px 0px 10px #ddd;
}

section#travel .gmaps_blue {
    padding-left: 20px;
    padding-top: 1px; /* Firefox & Chrome/Mac cuts off the top pixel (Chrome/Linux is fine though o_0). */
    background: url("/img/gmaps_blue.png") center left no-repeat;
}

section#travel .gmaps_green {
    padding-left: 20px;
    padding-top: 1px; /* Firefox & Chrome/Mac cuts off the top pixel (Chrome/Linux is fine though o_0). */
    background: url("/img/gmaps_green.png") center left no-repeat;
}

section#travel .gmaps_red {
    padding-left: 20px;
    padding-top: 1px; /* Firefox & Chrome/Mac cuts off the top pixel (Chrome/Linux is fine though o_0). */
    background: url("/img/gmaps_red.png") center left no-repeat;
}

section#travel #larger-map {
    padding-left: 20px;
    background: url("/img/map.png") 0px 1px no-repeat;
    display: block;
    margin: 5px 0px -7px 0px;
    padding-bottom: 3px;
}

section#travel #larger-map:hover {
    background: url("/img/map_magnify.png") 0px 1px no-repeat;
}

/* SKILLS
***************************************************************************************************/

section#skills-expert,
section#skills-experienced {
    font-size: 1em;
}

section#skills h3 {
    font-style: italic;
    float: left;
    width: 60px;
    text-align: right;
    padding: 0px 20px 10px 0px;
}

section#skills h4 {
    font-weight: bold;
    float: left;
    width: 100px;
    text-align: right;
    padding-right: 10px;
}

section#skills-languages {
    overflow: hidden;
}

section#skills-languages ul {
    margin-left: 0px;
    margin-top: 0px;
    width: 177px;
}

section#skills-languages section#skills-expert ul {
    width: 360px;
}

section#skills-languages h4 {
    display: block;
    float: none;
    text-align: left;
    padding-bottom: 3px;
}

section#skills-languages section {
    float: left;
    margin-right: 15px;
}

section#skills-languages ul li {
    display: inline;
    padding-right: 3px;
}

section#skills-languages #skills-some-experience {
    margin-right: 0px;
}

/* I'm not normally a fan of using CSS for content. But in this case, it is a display issue. */
section#skills-languages ul li:after {
    content: ",";
}

section#skills-languages ul li:last-child:after {
    content: ".";
}

section#skills-tools {
    margin-top: 10px;
}

section#skills-tools ul {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 100px;
}

/* EXPERIENCE
***************************************************************************************************/

section#experience section.not-relevant {
    color: #aaa;
    display: none; /* Actually, don't bother showing these at all. */
}

section#experience h3.job-title {
    font-weight: bold;
    padding-bottom: 2px;
    font-size: 1em;
}

section#experience h4.company {
    padding-bottom: 2px;
    display: inline;
}

section#experience p.duration {
    float: right;
    margin-top: -1.35em;
    padding-left: 5px;
    padding-bottom: 1px;
    color: #999;
}

section#experience p.location {
    float: right;
    font-style: italic;
    color: #999;
}

section#experience hr {
    display: none;
}

section.job {
    padding-bottom: 10px;
}

section.job ul li {
    padding-bottom: 2px;
}

section#experience section.details:last-child {
    padding-bottom: 0px;
}


/* Icons */
section#experience #gravitymobile {
    padding-left: 20px;
    padding-right: 2px;
    background: url("/img/icons/gravity.png") center left no-repeat;
}

section#experience #gracenote {
    padding-left: 18px;
    padding-right: 2px;
    background: url("/img/icons/gracenote.png") center left no-repeat;
}

section#experience #sony {
    margin-left: 2px;
    padding-left: 20px;
    background: url("/img/icons/sony.png") center left no-repeat;
}

section#experience #amadeus {
    padding-left: 20px;
    background: url("/img/icons/amadeus.gif") center left no-repeat;
}

section#experience #livejournal {
    padding-left: 20px;
    padding-top: 1px; /* Firefox & Chrome/Mac cuts off the top pixel (Chrome/Linux is fine though o_0). */
    background: url("/img/icons/livejournal.png") center left no-repeat;
}

section#experience #nutracheck {
    padding-left: 20px;
    background: url("/img/icons/nutracheck.ico") center left no-repeat;
}

section#experience #ysc {
    padding-left: 20px;
    padding-top: 1px; /* Firefox & Chrome/Mac cuts off the top pixel (Chrome/Linux is fine though o_0). */
    background: url("/img/icons/ysc.ico") center left no-repeat;
}

section#experience #wblinks {
    padding-left: 20px;
    background: url("/img/icons/wblinks.ico") center left no-repeat;
}

section#experience #adamsrussell {
    padding-left: 20px;
    padding-top: 1px; /* Firefox & Chrome/Mac cuts off the top pixel (Chrome/Linux is fine though o_0). */
    background: url("/img/icons/adamsrussell.ico") center left no-repeat;
}

/* EDUCATION
***************************************************************************************************/

section#education  p {
    padding-bottom: 10px;
}

section#education p#degree {
    padding-bottom: 2px;
}

section#education section#projects {
    margin-left: 20px;
    font-size: 1em;
}

section#education section#projects p {
    padding-top: 3px;
}

section#education section#projects h4 {
    font-weight: bold;
    display: inline;
}

section#education section#projects p.subdetail {
    font-style: italic;
    display: block;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

section.project {
    margin-top: 5px;
}

section.project a.pdf {
    background: url("../../img/pdf.png") center left no-repeat;
    padding-left: 20px;
    font-style: normal;
}

section#course_interests {
    margin-left: 20px;
}

section#course_interests h4 {
    font-weight: bold;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

/* INTERESTS
***************************************************************************************************/

section#interests p {
    padding-bottom: 10px;
}

section#interests p:last-child {
    padding-bottom: 0px;
}

/* REFERENCES
***************************************************************************************************/

section.reference {
    margin-bottom: 20px;
}

section.reference:last-child {
    margin-bottom: 0px;
}

section.reference h3 {
    font-weight: bold;
    display: inline;
}

section.reference p.email {
    text-decoration: underline;
    display: inline;
    padding-left: 5px;
}

section.reference p.role {
    font-style: italic;
}

/* DOWNLOADS
***************************************************************************************************/

section#downloads {
    position: fixed !important;
    position/**/: absolute;
    bottom: 0px;
    z-index: 99;
    left: 50%;
    margin-left: 278px;
    width: 160px;
    font-family: "Courier New", monospace;
}

section#downloads ul {
    list-style: none;
    margin: 0px;
    font-size: 0.75em;
    font-family: monospace;
}

section#downloads ul li {
    padding: 7px 0px 6px 3px;
}

section#downloads a {
    color: #000;
}

section#downloads a:hover {
    color: #f00;
}

section#downloads a.pdf {
    background: url("../../img/pdf.png") center left no-repeat;
    padding: 3px 0px 3px 20px;
}

/* OTHER LINKS
***************************************************************************************************/

section#other {
    position: fixed !important;
    position/**/: absolute;
    bottom: 0px;
    z-index: 99;
    left: 50%;
    margin-left: 5px;
    width: 460px;
    font-family: "Courier New", monospace;
}

section#other ul {
    list-style: none;
    margin: 0px;
    font-size: 0.75em;
    font-family: monospace;
}

section#other ul li {
    padding: 7px 10px 6px 3px;
    float: left;
}

section#other a {
    color: #000;
}

section#other a:hover {
    color: #f00;
}

section#other a#other-socareers {
    background: url("/img/icons/socareers.png") center left no-repeat;
    padding: 3px 0px 3px 20px;
}

section#other a#other-linkedin {
    background: url("/img/icons/linkedin.ico") center left no-repeat;
    padding: 3px 0px 3px 20px;
}

/* VERSIONS
***************************************************************************************************/

section#versions {
    padding: 5px 10px 10px 10px;
    font-style: italic;
    font-size: 0.9em;
    color: #666;
    line-height: 1.2em;
    text-shadow: 1px 1px 1px #fff;
}

section#versions h4 {
    font-weight: bold;
    padding-bottom: 5px;
    font-size: 1.2em;
}

/* PGP
***************************************************************************************************/

section.pgp ul {
    margin-left: 30px;
}

section.pgp ul li {
    font-family: "Courier New", monospace;
    font-weight: bold;
    margin-bottom: 5px;
}

section#pgpserver ul {
    margin-left: 30px;
}

section.pgp .revoked {
    color: #f00;
    font-weight: bold;
}

section.pgp p.command {
    font-family: monospace;
    margin-top: 10px;
    border: 1px solid #ECEACB;
    padding: 3px;
    background: #FFFEE8;
}

/* LOCATION
***************************************************************************************************/

section#location section.details {
    padding-bottom: 0px;
}

/* ERROR
***************************************************************************************************/

section#page.error {
    width: 450px;
    padding: 50px;
    border: 1px solid #c5c5c5;
    margin: 0 auto;
    left: 50%;
    position: absolute;
    margin-left: -255px;
    background: #fff;
    font-size: 0.9em;
    height: 100px;
    min-height: 100px;
    margin-top: 200px;
    box-shadow: 0px 0px 55px 55px #cfcfcf;
}

section#page.error h2 {
    font-weight: normal;
    font-size: 2em;
    line-height: 1em;
    color: #aaa;
    margin-top: 0em;
}

section#page.error p {
    padding: 10px 0px 10px 0px;
    font-size: 1.3em;
}

footer.error {
    display: none;
}