@import url(base.css);

/* PALETTE:
   Dark green
      color: #4D8C5C;
   Light green 
      color: #77D98E;
   Dark green-grey
      color: #858C87;
   Light green-grey
      color: #CED9D0;
   Dark grey
      color: #737373;
   Mid grey
      color: #444;

*/
html {
    color: #CED9D0; /* mid grey */
    background: #282828;
    padding: 0 10px; 
    }

/* Headers
 ******************************************************************************/
    #header {
        background: url(withering-flower.png) transparent top left no-repeat;
        padding-left: 230px;
        padding-top: 104px;
        min-height: 80px;
    }
    #header h1, #header h1 a {
        color: #f1ecc3; 
        text-shadow: #000 1px 1px 4px;
        font-family: 'Frutiger Linotype', 'Helvetica Neue', 'Bitstream Vera Sans', 'DeJaVu Sans', 'Verdana',  sans-serif;
        font-weight: normal;
        letter-spacing: 1px;
    }
    #header .contact, #footer .contact {
        color: #888; /* mid grey */
        }
    #header .contact:hover {
        color: #CED9D0; /* mid grey */
        }
    /* #header:hover .contact, #footer:hover .contact {
        color: #888;
        }
    #header:hover .contact a {
        color: #77a;
        } */
    #header .contact a:hover {
        color: #77D98E; /* Light green */
        }
    #header .contact a, #footer .contact a {
        color: #4D8C5C; /* Dark green */
        }

#content h1 {
    border-bottom: 1px solid #333;
    color: #999;
    }

#content h2 {
    color: #999; 
    border-bottom: 1px solid #222;
    }
#content .document-list-item h3, #content .document-detail h3 {color: #666; font-style: italic; font-family: georgia, serif;}

/* 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: #4D8C5C; /* Dark green */
  text-decoration: none;
  }
    #content a, #content a:visited {
    color: #88d599;
    text-decoration: none;
    }
    #content:hover a {
        text-decoration: underline;
        color: #4D8C5C; /* Dark green */
        }
    #content:hover a:visited {
        color: #858C87; /* Grayer version of green */
        }
    * html a {
        text-decoration: underline;
        }
    #content a:hover, #content a:visited:hover {
        text-decoration: underline;
        color: #77D98E; /* Light green */
        }
    h1 a {
        text-decoration: none;
        }


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

#navigation {
    color: #737373; /* Dark grey */
    }
    div#navigation li a {
        color: #4D8C5C;
        }

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

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

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

#passphrase-entry {
    background: #222;
    color: #fff;
    border: 1px solid #333;
}

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

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

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