body {
    background-color: white; 
    color: black; 
    /*
    background-image: url("http://www.jpcoles.com/pics/ch/Bern_July_2006/Bern_July_2006-Images/11.jpg");
    background-repeat: no-repeat;
    */
    max-height: 100%;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10pt;
}

span,div,table,tr,td,th{
    text-align: left;
    vertical-align: top;
}

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}


a { color: blue; text-decoration: none; }
a:hover { color: #400099; text-decoration: none; }

#jpc {
    /* background: transparent; */
    color: black;
    background-color: white;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10pt;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    padding: .8em;
    /* -moz-border-radius: 12px; */
}


#header {
    padding: 0 0 0 0;
    margin: 0 0 0em 0;
    border-bottom: thin solid;
}

#title {
    margin: .2em;
}

#mytitle {
    /* border: thin solid; */
}

#mytitle .parent {
    color: #DDDDDD;
    font-size: 22pt;
    font-weight: bold;
}

#mytitle .child {
    color: #888888;
    font-size: 22pt;
    font-weight: bold;
}

.title_parent{
    color: #DDDDDD;
    font-size: 22pt;
    font-weight: bold;
}

.title_child{
    color: #888888;
    font-size: 22pt;
    font-weight: bold;
}

#toc ul {
    padding: 0;
    margin-top: .35em;
    list-style-type: none;
    text-align: left;
}

#toc ul li{
    padding-left: .3em;
    padding-right: .3em;
    display: inline;
    text-decoration: none;
}

    /*
#toc a:link#current a:visited#current a:hover {
    border-bottom: .3em solid;
}
*/

#toc a {
    border: 2px dotted;
    border-top: none;
    padding: .15em;
}

#toc a:hover {
    border: 2px solid;
    border-top: none;
}

#foot {
    border-top: thin solid;
    clear: both;
    font-size: 8pt;
}

#foot table {
    text-align: center;
    width: 100%;
    clear: both;
}

#foot table #lastupdate { text-align: left;  } 
#foot table #valid      { text-align: center;}
#foot table #host       { text-align: right; }


.gallery { 
    margin-left: auto;
    margin-right: auto;
    text-align: center; 
}

.gallery img { 
    border-top:    .4em solid #EEAA00; 
    border-left:   .4em solid #EEAA00; 
    border-right:  .4em solid #AA8800; 
    border-bottom: .4em solid #AA8800; 
    width: 7.5em;
    height: 5.25em;
}

.gallery .pic { 
    float: left; 
    margin: auto; 
    padding: .4em; 
    clear: right; 
    text-align: center;
    border: none;
    width: 10em;
}

.gallery .new { 
    border-top:    .4em solid #FF0000; 
    border-left:   .4em solid #FF0000; 
    border-right:  .4em solid #FF0000; 
    border-bottom: .4em solid #FF0000; 
}

.gallery .updated { 
    border-top:    .4em solid #00EEAA; 
    border-left:   .4em solid #00EEAA; 
    border-right:  .4em solid #00AA88; 
    border-bottom: .4em solid #00AA88; 
}

.gallery .updated_text { 
    border: none;
    color: #00AA88;
}

.gallery .new_text { 
    border: none;
    color: red;
}

.gallery div { 
    margin-left: auto;
    margin-right: auto;
    text-align: center; 
}

#twocols {
    width: 100%;
}

#leftcol  { float: none;  width: 64%; clear: left; }
#rightcol { float: none; width: 32%; }
#midcol   { margin-left: 66%; margin-right: 0%; max-width: 36em; }

/*
#leftcol2 {  width: 64%; clear: both;}
#rightcol2 { width: 33%; clear: both;}
*/
#leftcol2 { float:left; width: 60%; }
#rightcol2 {float:right; width: 39%; }

#content {
    padding: 1em 0 1em 0em;
    clear: both;
}


.box{
    border: thin solid #DDDDDD;
    margin: 0 0 1em 0;
    padding: 0 0 0 0;
}

.boxtitle{
    border: thin solid #888888;
    color: #888888;
    background: #DDDDDD;
    font-weight: bold;
    text-align: center;
    padding: 2px;
    margin: 0 0 0 0;
}

.boxcontent{
    color: #000000;
    text-align: left;
    padding: 4px;
    margin: 4px 4px 4px 4px;
}

.boxcontent_justify{
    color: #000000;
    text-align: left;
    padding: 4px;
    margin: 0 0 0 0;
    text-align: justify;
}

.justified_par {
    text-align: justify;
}



div.more { 
    text-align: right;
    font-weight: bold;
    clear: both;
}

.box2 {
    border: thin solid #888888;
    margin: 0 0 1em 0;
    padding: 0 0 0 0;
}

.box2 table caption {
    color: #888888;
    background: #DDDDDD;
    border-bottom: thin solid #888888;
    font-weight: bold;
    text-align: center;
    padding: 2px;
    margin: 0 0 0 0;
    width: 100%;
}

#gc {
    float: right;
}

#gc_image {
    border: none;
}

#penguin {
    float: right;
}