@import url(base.css);

/* Layout changes */
body { width: 280px; margin: 0 auto; }
ul { padding-left: 10px; }
#header { padding: 10px 0; }
#header h1, #header h1 a { float: none; }
#container { margin: 0; float: none; }
#content { margin: 0; padding: 0;}
#navigation { float: none; width: 100%; margin: 20px 0; border-top: 1px solid #ccc;}
.style-selector  { text-align: right;}

#content h1 {margin-bottom: 5px; }
#content h2 {margin-top: 10px; }
#content #resume dt, #content #resume dl {margin: 0; padding: 0;}


/* Colours */

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, #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: underline;
    }
    #header 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; 
    }