/* Global
 ******************************************************************************/

* { margin: 0; padding: 0; }
body {
    font: 0.8125em 'Lucida Grande', 'Verdana', 'Geneva', 'Lucida', 'Arial', 'Helvetica', sans-serif; 
    line-height: 1;
    }
ul, ol { padding-left: 30px; }
ul.non-text { list-style: none; }

/* Layout
 ******************************************************************************/

body {
    width: 798px;
    margin: 0 auto;
    }

#header {
    padding: 10px 10px 10px 0;
    }

#container {
    width: 100%;
    float: left;
    margin-right: -200px;
    }
#content {
    margin-right: 200px;
    padding: 10px;
    }
    #content ul {
        padding: 1em 0 0.5em 0px;
        list-style: none;
        list-style-position: inside;
    }
    #content li {
        text-indent: -1em;
        padding-left: 1em;
        margin-left: 0px;
        }
    #content ul li:before {
        content: "\00BB \0020 ";
        }
    * html #content ul {
        list-style: disc;
        }
    #content ul li {
        margin: 0.5em 0;
        }

#navigation {
    width: 190px;
    float: right;
    margin-left: 10px;
    }

#footer {
    clear: both; 
    padding: 5px;
    text-align: center;
    }
#messages {
    background: #ffb;
    border: 1px solid #a99;
    padding: 2px;
    }
    #messages li {
        padding: 2px;
        text-align: center;
        }
.hidden {
    display: none;
    }

.hidden {
    display: none;
    }

.breadcrumbs {
    padding-bottom: 10px;
    }

.clearing {
  height: 0;
  clear: both;
}

.subtle { color: #888; }
.subtle a, .subtle .link { color: #88b; }
#content .project h3 { margin-top: 24px; margin-bottom: 2px; }
#content .project .subtle { font-style: italic; }
#content .project p { font-size: 80%; }
.small input, input.small { width: 30px; }
#content .document-list-item h3, #content .document-detail h3 { margin-top: 24px; margin-bottom: 5px;  }

/* If using a faux-column:
 #content, #container {
    background: #fff url(images/column_background.png) repeat-y right;
    } */

/* Standard margins
 ******************************************************************************/

h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset {
    margin-bottom: 1em;
    }
li {
    margin-left: 0;
    margin-bottom: 0.3em;
    }
dt {
    margin-top: 0.3em;
    margin-bottom: 0.1em;
    margin-left: 0.5em;
    }
dd {
    margin-left: 3em;
    margin-bottom: 0.5em;
    }

li, dd, p {
    /* max-width: 40em; */
    text-align: left;
    line-height: 1.2em;
    }



a, .link {
    /* text-decoration: none; */
    color: #4d5c8c;
    }
a:hover {
    text-decoration: underline;
    }
a:visited {
    color: #4d5c8c;
    }

.style-selector {
    position: absolute;
    right: 10px; top: 10px;
    padding: 10px;
    width: 15em;
    border: 1px solid transparent;
    color: black;
    }
    .style-selector ul {
        display: none;
        margin-top: 8px;
        }

    /* Progressive enhancement
       Only for non-IE users */
    .style-selector:hover a.header {
        color: black;
        }
    .style-selector:hover a.header:hover {
        text-decoration: none;
        }
    #header .style-selector:hover ul {
        display: block;
        }
    #header .style-selector:hover {
        background: #ffa;
        border: 1px solid black;
        } 

/* Imported */

/* Headers
 ******************************************************************************/
#header {
    padding-top: 20px;
    padding-bottom: 30px;
    margin-bottom: 20px;
    }
    #header h1, #header h1 a {
        margin: 0;
        margin-right: 20px;
        display: block;
        float: left;
    }
    #header .contact, #footer .contact {
        margin-top: 0px;
        margin-bottom: 10px;
        font-style: normal;
        }
    #header h1 a:hover {
        text-decoration: none;
        }

#footer {
    margin-top: 40px;
    text-align: left;
}

#content h1 {
    font-size: 140%;
    text-transform: uppercase;
    text-align: left;
    font-family: sans-serif;
    padding-bottom: 5px;
    letter-spacing: 1px;
    margin-top: 0;
    font-weight: normal;
    }
h1#name {
    font-size: 200%;
    font-family: 'Lucida Grande', 'Verdana', 'Geneva', 'Lucida', 'Arial', 'Helvetica', sans-serif; 
    text-align: center;
    display: none;
    }

#content h2 {
    font-size: 115%;
    margin: 2em 0 1em 0;
    padding: 8px;
    padding-left: 0;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 1px;
    }
#content h3 {
    font-size: 100%;
    font-weight: normal;
    letter-spacing: 1px;
    }
#content {
    font-size: 110%;
    line-height: 110%;
    padding: 0 2em 0 0;
    }

dt {
    font-weight: normal;
    }
th {
    text-align: right;
    padding: 5px 4px;
    vertical-align: top;
    }


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

#navigation {
    font-size: 120%;
    margin: 3.4em 0 0 0; padding: 0;
    line-height: 110%;
    }
    div#navigation ul {
    margin: 0; padding: 0;
    margin-left: 10px;
    list-style: none;
    }
    div#navigation li {
        clear: both;
        margin: 0; padding: 0;
        padding-top: 4px;
        width: 12em;
        text-align: right;
        }
    div#navigation li span {
        display: block;
        float: left;
        margin: 0; padding: 0;
        width: 5em;
        }
    div#navigation li a {
        display: block;
        float: left;
        margin: 0 3px;
        padding: 0 3px;
        width: 6em;
        text-align: left;
        text-decoration: none;
        }
    div#navigation a:hover {
        text-decoration: underline;
        }

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

#content h1.message {
    color: black;
    border: none;
    text-align: center;
    }

.error {
    text-align: center;
    background-color: #b55; /* Red */
    color: black;
    border: 1px solid #fbb;
    padding: 0.5em;
    text-align: center;
    margin: 1.5em 0;
    }

.referee {
    margin-top: 1em;
    padding-bottom: 2em;
    float: left;
    width: 14em;
    }

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

#passphrase-entry {
    width: 20em;
    padding: 0.5em;
    margin: 30px auto;
    text-align: center;
    line-height: 2em;
    font-weight: bold;
    }

/* Personal details section in the resume needs custom care */
#resume #personal-details dl {
    float: left;
    margin-bottom: 2em;
    margin-right: 3em;
    margin-top: -15px;
    }
#resume #personal-details dd, #resume #languages dd  {
    margin-left: 0;
    }
#resume #personal-details dt {
    letter-spacing: 1px;
    margin-left: 0;
    margin-top: 15px;
}

/* language title is more important than the personal-details titles */
#resume #languages dt {
    letter-spacing: 1px;
    margin-left: 0;
    margin-top: 15px;
}

#portfolio-index {
    }

    #portfolio-index ul {
        list-style: none;
        }
    #portfolio-index li li {
        display: block;
        margin-left: 20px;
        }
    #portfolio-index a.image {
        float: right;
        text-align: center;
        margin: 0 0 10px 10px;
        text-decoration: none;
        }
    #portfolio-index h2 {
        clear: both;
        }
#portfolio-category {
    }
    #portfolio-category img {
        float: left;
        margin: 0 20px 20px 0;
        }
    #portfolio-category h2 {
        clear: both;
        margin-top: 40px;
        }
    #portfolio-category li {
        margin-left: 20px;
        }
#content #education ul, #content #education p {
  padding-top: 0; margin-top: 0;
}

#resume #education dt {
    margin-left: 20px;
    }
#resume #education ul {
    margin-left: 20px;
    }
#resume ul {
    padding-top: 0;
    }
#resume dd, #resume dt {
    margin-left: 0;
    }
#introduction {
    display: none;
    }

#content img {
    float: right;
    margin: 10px;
    }
dl.image {
    float: right;
    position: relative;
    width: 0;
    }
    dl.image dd { display: none;}
.clear {
    clear: both;
    }
#passphrase-entry input {
    /* color: #aaa; /* Low contrast to hinder onlookers */
    }
#passphrase-entry input:focus {
    /* color: #aa4; /* Low contrast to hinder onlookers */
    background: #ff8;
    }

/* Non link elements that should look like links */
.link {
    cursor: pointer;
}