@import url(base.css);

/* PALETTE:
   Dark blue
      color: #4D5C8C;
   Light blue 
      color: #778ED9;
   Dark blue-grey
      color: #85878C;
   Light blue-grey
      color: #CED0D9;
   Dark grey
      color: #737373;
   Mid grey
      color: #444;

*/
html {
    background: #eee;
    color: #444; /* mid grey */
    }

/* Headers
 ******************************************************************************/
    #header h1, #header h1 a {
        color: #4D5C8C; /* dark blue */
    }
    #header .contact, #footer .contact {
        color: #444; /* mid grey */
        }
    #header .contact a:hover {
        color: #778ED9; /* Light blue */
        }
    #header .contact a, #footer .contact a {
        color: #4D5C8C; /* Dark blue */
        }

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

#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: #4D5C8C; /* Dark blue */
    text-decoration: none;
    }
    #content:hover a {
        text-decoration: underline;
        }
    * html a {
        text-decoration: underline;
        }
    a:hover {
        text-decoration: underline;
        color: #4d5c8c; /* Light blue */
        }
    h1 a {
        text-decoration: none;
        }


/* Navigation
 ******************************************************************************/

#navigation {
    color: #737373; /* Dark grey */
    }

/* 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; 
    }

#content img {
    border: 1px solid black;
    }