/*
 * Copyright 2006 Perry Nguyen <pfnguyen@hanhuy.com>
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: verdana, arial, helvetica, sans-serif;
}

#header {
    background: #f7f7f7 url("/images/upper_left.png") top left;
    background-repeat: no-repeat;
    height: 75px;
}
#header h1 { display: none; }

#navigation ul {
    margin: 0;
    font-size: smaller;
    list-style: none;
    color: white;
    background: gray;
    float: left;
    width: 100%;
}

#navigation ul li { display: inline; margin: 0; }

#navigation ul li a {
    padding: 0.2em 1em;
    background: gray;
    color: white;
    text-decoration: none;
    float: left;
    border-right: 1px solid white;
}

#navigation .language { float: right }
#navigation .language a { border-left: 1px solid white }

#navigation ul li a:hover {
    background: #cdcdcd;
}

#content {
    clear: both;
    margin: 2em 1em;
}


#footer {
    clear: both;
    text-align: center;
    font-size: xx-small;
    margin: 1em;
}

/*
 * CSS for general use of tags
 */

p {
    margin: 1em;
    padding: .25em;
}

h1 { font-size: 1.5em }
h2 { font-size: 1.4em }
h3 { font-size: 1.3em }
h4 { font-size: 1.2em }
h5 { font-size: 1.1em }
h6 { font-size: 1.0em }

dl { margin: 1em }
dt { margin-left: 1em; }
dd { margin-left: 5em; }

ul { margin: 1em }
li { margin: 0 1em }

img { vertical-align: top }

form {
	max-width: 45em;
	_width: 45em;
    margin: 3em auto;
}
form ul {
    list-style: none;
}
form ul li {
    padding: .25em;
    margin-left: 1em;
    margin-right: 1em;
    clear: left;
}
form ul li label {
    float: left;
    display: block;
    width: 180px;
}
fieldset { padding: .5em; }

select { width: 16ex }

.success { color: #55F }
.error { color: #F33 }

a.img img { border: none }

/*
 * CSS for individual pages
 */

/*
 * CSS for the console
 */

.console .journals ul {
    list-style: none;
    font-size: small
}
.console .journals li {
    text-align: center;
    display: block;
    float: left;
    border: 1px solid black;
    margin: 1px;
    width: 50px;
}
.console .journals dd:after {
    display: block;
    visibility: hidden;
    content: ".";
    clear: both;
}
.console .journals li a {
    display: block;
    width: 100%;
    text-decoration: none;
}
.console .journals li a:hover { background: #DDD }

/*
 * CSS for journal entries
 */
 
ul.journalentrylist { list-style: none }
.journalentrylist .journalentrylist { margin-top: 0 }

.journalwrite .entrypreview, .journalentry, .journalentries {
    max-width: 50em;
    _width: 50em;
    margin: 0 auto;
}
.journalentry .journaldate, .journalentries .journaldate {
    font-size: .9em;
    border-bottom: 1px dotted #777;
    font-family: garamond, serif;
}
.entrypreview .entrytitle, .journalentry .entrytitle {
    font-size: 1.4em;
    color: #333;
    border-bottom: 3px double #777;
}
.journalentries .entrytitle {
    font-size: 1.1em;
    margin: .5em auto;
    color: #333;
}
.journalentries .entrytitle a {
    color: #333;
    text-decoration: none;
}
.journalentries .entrytitle a:hover { border-bottom: 3px double #777 }
.entrydeleted { font-weight: bold; text-decoration: underline }
.entrydraft { font-weight: bold }
.entryprivate { font-weight: bold }
.journalentryinfo {
    list-style: none;
    font-size: smaller;
}
.journalentryinfo li { display: inline; margin: 0 }
.journalentry .journalentryinfo li { display: block; }
.journalentryinfo .pageinfo { text-align: right; }
.imageactions ul, ul.entryactions {
    list-style: none;
    font-size: smaller;
    display: inline;
    margin: 0 1em;
}
.imageactions li, .entryactions li { display: inline; margin: 0 }
.imageactions li a, .entryactions li a { text-decoration: none }
.imageactions li a:hover, .entryactions li a:hover { text-decoration: underline }
.journalentrytext {
    margin-top: 1em;
    margin-bottom: 3em;
}

.journalentrytext h1 {
    font-size: 1.2em;
    font-weight: normal;
    text-decoration: underline;
    margin: 1em;
}
.journalentrytext h2 {
    font-size: 1.1em;
    font-weight: normal;
    text-decoration: underline;
    margin: 1em;
}
.journalentrytext h3 {
    font-size: 1.0em;
    font-weight: normal;
    text-decoration: underline;
    margin: 1em;
}
.journalentrytext h4 {
    font-size: .90em;
    font-weight: normal;
    text-decoration: underline;
    margin: 1em;
}
.journalentrytext h5 {
    font-size: .80em;
    font-weight: normal;
    text-decoration: underline;
    margin: 1em;
}
.journalentrytext h6 {
    font-size: .70em;
    font-weight: normal;
    text-decoration: underline;
    margin: 1em;
}

.journalentrytext ol, .journalentrytext ul { margin-left: 1em }
.journalentrytext ol li, .journalentrytext ul li { margin-left: 1em }
.journalentrytext pre {
    margin: .5em 2em;
    border: 1px solid #333;
    background: #f7f7f7;
    padding: .5em;
}
.journalentrytext hr { margin: .5em 2em; }
.journalentrytext .previouspage {
    float: left;
}
.journalentrytext .entryhasmore, .journalentrytext .entrycomments {
    margin: 1em;
    text-align: right;
}
.journalentrytext .entryhasmore a, .journalentrytext .previouspage a,
.journalentrytext .entrycomments a {
    text-decoration: none;
    color: #333;
}
.journalentrytext .entrycomments a img { border: 0; vertical-align: bottom }
.journalentrytext .entrycomments a:hover,
.journalentrytext .entryhasmore a:hover,
.journalentrytext .previouspage a:hover { text-decoration: underline; }
.journalentrytext blockquote { margin: 1em 3em }
.journalentrytext blockquote blockquote { margin: 0 1em }
.journalentrytext img { margin: .5em; border: 1px solid black }
.journalentrytext img.fl { float: left }
.journalentrytext img.fr { float: right }
.journalentrytext .cb { display: block; clear: both }
.journalentrytext .cl { display: block; clear: left }
.journalentrytext .cr { display: block; clear: right }

#entryCommentText, #entryCommentName, #entryCommentEmail, #entryCommentUrl {
    width: 100%
}
#entryCommentSubmit, #entryCommentPreviewSubmit { width: 75px }

.entrycomments .true { background: #DFD }
.entrycomments .false { background: #DDF }
div.entrycomment {
    margin-bottom: 2em;
    font-size: smaller;
    border: 1px solid #777;
}
div.entrycomment input { float: right; margin: .25em }
 
.commentunapproved { background: #FDD }
.commentdate { font-size: smaller }
.commenter {
    font-weight: bold;
    font-size: larger;
    font-family: serif;
    margin-left: .5em;
}
.commenttext {
    border-top: 1px dotted gray;
}
.commenttext pre {
    margin: 1em;
    padding: 1em;
    border: 1px dashed #999;
    background: #eee;
}
.commentpreview { background: #FDF }
.unapproved, .commentpreview .preview {
    margin: 0;
    padding: 0;
    font-size: smaller;
    font-style: italic;
    color: #F00;
}

.unapprovedlist input { float: right }
.unapprovedlist ul {
    padding: 1em 0;
    border: 1px solid gray;
    font-size: smaller;
}
.unapprovedlist ul div {
    background: #fdfdfd;
    border: 1px dotted #777;
}
.unapprovedlist .true { background: #DFD }
.unapprovedlist .false { background: #DDF }

#journalNameInput { width: 100% }
#journalDescriptionInput { width: 100%; height: 16em }
#journalUriInput { width: 100% }
.journalbuttons { text-align: center }
.journalbuttons input { width: 75px }
.journaloptions ul li {
    display: block;
    float: left;
    clear: none;
}
.journaloptions ul:after {
    display: block;
    content: ".";
    visibility: hidden;
    clear: both;
}

form.deleteconfirm div { text-align: center }
form.deleteconfirm input { width: 75px }
.imagefields #imageNameInput, .journalwrite #entryTitleInput { width: 100% }
.imagefields #imageNameInput, .journalwrite #entryUriInput { width: 100% }
.imagefields textarea, .journalwrite textarea {
    height: 16em;
    width: 100%;
}
.imagebuttons, .entrybuttons { text-align: center }
.imagebuttons input, .entrybuttons input { width: 75px }
.selectbuttons input { width: 100px }
.imageoptions ul li, .entryoptions ul li {
    display: block;
    float: left;
    clear: none;
}
.imageoptions ul:after, .entryoptions ul:after {
    display: block;
    content: ".";
    visibility: hidden;
    clear: both;
}
.validationerror { color: #F00 }

/* Revision comparison */

.journalrevisions {
    margin: 1em;
    width: 100%
}
.journalrevisions td { padding: 0 .5em }

.journalcompare { margin: 1em auto }
.journalcompare .journalentryinfo li { display: block }
.journalcompare .journalentry {
    border: 1px solid gray;
    padding: .5em;
}
.journaltextcompare {
    font-size: .7em;
    font-family: lucidatypewriter, courier new, fixed, monospace;
    margin: 1em;
}

.journaltextcompare td {
    border: 1px dotted #777;
    padding: .25em;
}
.removed {
    background: #faa;
}
.added {
    background: #afa;
}

/*
 * CSS for thumbnail images in the album
 */
.thumbnail {
    text-align: center;
    width: 160px;
    height: 180px;
    float: left;
    margin: 1em;
}
.thumbnail img { border: 1px solid black; }
.thumbnail p {
    text-align: center;
    font-size: smaller;
    width: 130px;
    border: 1px dashed #ddd;
    margin: .5em 0 0;
    bottom: 0px;
    left: 14px; /* 1/2 of .thumbnail width - 1/2 of (.thumbnail p width + 2) */
    _left: 0;
    position: relative;
    padding: 0;
}

.thumbnail p a {
    text-decoration: none;
    display: block;
    width: 100%;
}
.thumbnail p a:hover {
    background: #eee;
}
.thumbnail p img {
    border: none;
    vertical-align: middle;
}

.imageinfo {
    list-style: none;
    font-size: smaller;
}
.imageinfo li { margin: 0 }
.imageview { text-align: center }
.imageview ul {
    font-size: small;
    list-style: none;
    margin: 2em auto;
}
.imageview .imagenav { width: 475px; }
.imageview .imagesize { width: 400px; }
.imageview ul:after {
    clear: both;
    content: ".";
    display: block;
    visibility: hidden;
}
.imageview li {
    border: 1px solid black;
    display: block;
    margin: .5em 1px;
    padding: .1em 0;
    float: left;
}
.imageview .imagenav li { width: 75px; }
.imageview .imagesize li { width: 95px; }
.imageview .imagenav li.index { width: 150px }
.imageview li a {
    text-decoration: none;
    display: block;
    width: 100%;
}
.imageview li a:hover { background: #DDD; }
.imageview img, .imageview a img { border: 3px solid black; }

form.imagetag input { width: 60% }
form.imagetag .submit { width: 75px }
form.imagetag label { margin-right: 3em }

.album .thumbnails { clear: both }
.albumpages { float: right }
.albumpages ul { margin: 0; list-style: none; display: inline }
.albumpages li { display: inline; margin: 0 }
.albumpages .selectedpage {
    font-weight: bold;
    font-size: larger;
}
.albumpages ul li a { text-decoration: none }
.albumpages ul li a:hover { text-decoration: underline }

/*
 * CSS for Resume
 */
.resume { margin: 1in; }
.resume .pdf { float: right; }
.resume .pdf a { text-decoration: none }
.resume .pdf a:hover { text-decoration: underline }
.resume ul {
    list-style: none;
    margin-left: 3em;
}
.resume ul.job > li:first-child {
    text-decoration: underline;
}
.resume ul.job {
    border: 1px outset #d7d7d7;
    background: #f0f0ff;
    padding: .25em;
    margin-left: 0;
    margin-top: .5em;
}
.resume ul.job li {
    margin-left: 0;
}
.resume h1 {
    font-size: 1.75em;
    color: #337;
    padding: .25em;
    border-bottom: 1px solid #535;
}
.resume h2 {
    margin-top: 1em;
    font-size: 1.4em;
    color: #335;
    padding: .25em;
    border-bottom: 1px dotted #335;
}
.resume h3 {
    margin-left: 1em;
    font-size: 1.25em;
    color: #535;
    padding: .25em;
}
.resume p {
    border: 1px dashed #d7d7d7;
    background: #fffdfd;
    padding: .5em;
}