@import url(base.css);

html {
    background: #fff;
    color: #000; /* mid grey */
    }

/* Headers
 ******************************************************************************/
    #header h1, #header h1 a {
        color: #000;
    }
    #header .contact, #footer .contact {
        color: #444;
        }
    #header .contact a, #footer .contact a {
        color: #444;
        }

#content h1 {
    border-bottom: 1px solid #bbb;
    color: #555;
    }

#content h2 {
    color: #777; 
    border-bottom: 1px solid #ddd;
    }

/* Standard elements
 ******************************************************************************/

/* Links
 * Text with lots of links is hard to read because of the distracting lines and colours.
 * I have made the colour difference extremely subtle, and only display the underlines
 * when the mouse is over the content area: this means the user is in control.
 */

a, a:visited {
    color: #000;
    text-decoration: none;
    }
    h1 a {
        text-decoration: none;
        }


/* Remove elements from printing
 ******************************************************************************/

/* Show the user that the navigation isn't there */
#navigation {
    display: none;
    }
/* The user needs to be able to, however, change the style back */
@media print {
  .style-selector {
    display: none;
  }
}

/* Global custom elements
 ******************************************************************************/

.subtle {
    color: #999; /* Dark grey */
    }
.subtle a {
    color: #999;
    }

/* Specific elements
 ******************************************************************************/

#passphrase-entry {
    background-color: #eee;
    color: #000;
    border: 1px solid #ddd;
}

#resume #personal-details dt {
    color: #999;
    }

/* language title is more important than the personal-details titles */
#resume #languages dt {
    color: #737373; 
    }