/***************************************************
A Real Companion and Friend:
The diary of William Lyon Mackenzie King
023/011
***************************************************/
body {
background-color: #556655;
}

/* Modification for the left padding */
div.center {
padding-left: 5px !important;
}


div.center h1
{
font-size: 1.2em;
background: #330000 url(../091/023011-misc01.jpg) no-repeat top left;
padding: 10px 5px 9px 85px;
margin: 5px;
display: block;
}

div.center h1 a#cont{
color: #fff;
}

div.center h1 a#cont span.normal-small-font{
font-weight: normal;
font-size: 0.75em;
}


/************* LEFT MENU **************/


div.left {
background-color: #fff;
/*background-color: #663333;*/
color: #fff;
padding: 0;
border-top: 7px solid #663333;
}

ul.nav {
background-color: #663333;
color: #fff;
}

ul.nav li {
background-color: #663333;
color: #fff;
border: none;
margin: 0;
padding: 0 0 1px 0;
display: block;
}

ul.nav li a.menulink, ul.nav li a.menulink:link, ul.nav li a.menulink:active, ul.nav li a.menulink:visited {
background-color: #663333;
color: #fff;
margin: 0;
padding: 7px 10px 7px 10px;
}

ul.nav li a.menulink:hover {
background-color: #330000;
color: #fff;
margin: 0;
padding: 7px 10px 7px 10px;
}

ul.nav li span.on-state {
background-color: #330000;
color: #fff;
margin: 0;
padding: 7px 10px 7px 10px;
display: block;
}

ul.nav li a.linked_on-state:link, ul.nav li a.linked_on-state:visited {
background-color: #330000;
color: #fff;
margin: 0;
padding: 7px 10px 7px 10px;
display: block;
}

/* Graphic div for creating two thin lines at the end of the left menu */
div.left div.bottom-graphics
{
clear: left;
background: #663333 url(../091/023011-misc02.jpg) no-repeat;
color: #fff;
height: 50px;
}

/* Link class for the Archive link for original web site */

div.left div.archive-link
{
clear: left;
width: 100%;
background-color: #330000;
color: #fff;
text-align: center;
padding: 1em 0;
border-top: 5px solid #fff;
}

div.left div.archive-link a, div.left div.archive-link a:link, div.left div.archive-link a:visited, div.left div.archive-link a:hover, div.left div.archive-link a:active
{
background-color: #330000;
color: #fff;
border: none;
margin: 0;
padding: 0;
font-size: 0.85em;
}


/************* LEFT MENU - SUB-MENU CLASSES ***************/

ul.nav3 {
width: 100%;
background-color: #330000;
color: #fff;
margin: 0;
padding: 0;
border: none;
}

/* Forcing to not have the borders for any child elements */

ul.nav3 li {
width: 100%;
background-color: #330000;
color: #fff;
margin: 0;
padding: 0;
display: inline;
border-top: 1px dashed #663333;
line-height: 1.25em;
}

ul.nav3 li span.on-state {
background-color: #330000;
color: #fff;
padding: 7px 3px 7px 5px;
margin: 0px;
/*width: 126px;*/
display: block;
border-left: 5px solid #996600;
border-bottom: none; /* border inherited from top styles - this is not needed */
}

ul.nav3 li a.linked_on-state:link, ul.nav3 li a.linked_on-state:visited {
background-color: #330000;
color: #fff;
padding: 7px 3px 7px 5px;
margin: 0px;
display: block;
border-left: 5px solid #996600;
border-bottom: none; /* border inherited from top styles - this is not needed */
}

ul.nav3 li a.menulink, ul.nav3 li a.menulink:link, ul.nav3 li a.menulink:active, ul.nav3 li a.menulink:visited {
display: block;
margin:  0;
padding: 7px 3px 7px 10px;
text-decoration: none;
background-color: #330000;
border: none; /* border inherited from top styles - this is not needed */
}

ul.nav3 li a.menulink:hover{
background-color: #330000;
margin: 0;
padding: 7px 4px 7px 5px;
color: #fff;
border-left: 5px solid #996600;
}


/*************RIGHT SIDE IMAGE ***************/
div.right-navigation-image {
width: 100%;
margin: 0;
padding: 0;
background-color: #663333;
color: #fff;
}

div.image-container{
width: 195px;
margin: 0 auto;
padding: 0 0 20px 0;
}

div.image-container p{
font-size: 0.85em;
padding: 0;
margin: 2px 0 10px 10px;
}

div.image-container a, div.image-container a:link, div.image-container a:visited, div.image-container a:hover, div.image-container a:active
{
color: #fff;
}

div.image-container img{
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 2px solid #fff;
border-left: 1px solid #ccc;
margin: 0;
padding: 0;
}


/* For Credits Section - 023011-900-series */

div.credit-table-wrapper{
width: 96%;
margin: 0.5em 0 1em 1.25em;
padding: 0;
display: table;
}

div.credit-table-row{
clear: left;
width: 96%;
margin: 0;
padding: 0.65em 0.5em;
display: table;
border-bottom: 1px solid #ccc;
}

div.credit-table-col-left{
width: 40%;
float: left;
}

div.credit-table-col-right{
width: 55%;
float: left;
margin-left: 1em;
}

/* GALLERY CLASSES FOR THE CONTENT PAGES */ 

div.gallery-wrapper
{
width: 85%;
margin: 1em auto;
padding: 0;
display: table;
}

div.gallery-wrapper-comic-thumb
{
width: 98%;
margin: 1em auto;
padding: 0;
background-color: #fff;
border: 1px solid #663333;
display: table;
}

div.gallery-wrapper-comic-thumb img
{
vertical-align: bottom;
}

div.left-frame-wrapper
{
float: left;
width: auto;
display: inline;
}

div.right-frame-wrapper
{
float: right;
width: auto;
display: inline;
}

/*different frame size to accomodate different width images */
div.frame-comic-thumb {width: 110px;}
div.frame-size-I {width: 150px;}
div.frame-size-II {width: 175px;}
div.frame-size-III {width: 200px;}
div.frame-size-IV {width: 225px;}
div.frame-size-V {width: 235px;}

div.frame-comic-thumb, div.frame-size-I, div.frame-size-II, div.frame-size-III, div.frame-size-IV, div.frame-size-V {
background-color: #663333;
color: #fff;
margin: 10px;
padding: 0 0 10px 0;
}

div.left-frame-wrapper a, div.right-frame-wrapper a, div.left-frame-wrapper a:link, div.right-frame-wrapper a:link, div.left-frame-wrapper a:visited, div.right-frame-wrapper a:visited, div.left-frame-wrapper a:hover, div.right-frame-wrapper a:hover, div.left-frame-wrapper a:active, div.right-frame-wrapper a:active
{
background-color: #663333;
color: #fff;
}

div.left-frame-wrapper p , div.right-frame-wrapper p
{
font-size: 0.85em;
padding-left: 10px;
padding-right: 10px;
text-align: left;
}

div.img-frame
{
width: 100%;
margin: 0;
padding: 5px 0 3px 0;
border-bottom: 2px solid #fff;
text-align: center;
}


/* Only for right floated images that has no source and caption */
.img-right-nosource
{
float: right;
margin: 10px;
padding: 0;
}

.img-right-nosource img
{
border: 5px solid #663333;
}

/* Height adjustment for divs when displayed in the same row but has diferent size text information */
.set-height-300 {height: 300px;}
.set-height-350 {height: 350px;}
.set-height-I {height: 400px;}
.set-height-II {height: 425px;}
.set-height-III {height: 450px;}
.set-height-IV {height: 475px;}
.set-height-V {height: 500px;}
.set-height-VI {height: 525px;}
.set-height-VII {height: 550px;}
.set-height-VIII {height: 575px;}


/* Miscelleneous Classes */

hr {
color: #ccc;
background-color: #ccc;
height: 1px;
border: none;
}

/* Make vertical space between the floating object and the following block element - 
example - between bottom nav and a top floating elements*/
div.clear-floats{
width: 100%;
display: table;
margin: 1em 0;
padding: 0;
}

/* Form Classes */

div.form-field-rows{
width: 96%;
margin: 0.5em 0 0.5em 1.2em;
padding: 0;
display: table;
}

div.cols2-40-pct{
width: 40%;
float: left;
}

div.cols2-60-pct{
width: 55%;
float: left;
margin-left: 1em;
}

/* Chronology - 023011-1040-x.html */

/*div.chronology-timeline{
width: 100%;
margin: 0.5em 0;
padding: 1em 0 0 0;
display: table;
border-top: 1px dashed #ccc;
}

div.chronology-rows{
width: 96%;
margin: 0 0 0.5em 1.2em;
padding: 0;
display: table;
}*/

div.chronology-timeline{
width: 96%;
margin: 0.5em 0 0.5em 1.2em;
padding: 1em 0 0 0;
display: table;
border-top: 1px dashed #ccc;
}

div.chronology-rows{
width: 100%;
margin: 0 0 0.5em 0;
padding: 0;
display: table;
}


div.cols2-20-pct{
width: 20%;
float: left;
}

div.cols2-75-pct{
width: 75%;
float: left;
margin-left: 0.5em;
}

div.chronology-rows h4 {
padding: 0;
margin: 0 0 0.5em 0;
}

div.chronology-rows ul {
padding: 0 0 0 8px;
margin: 0 0 0 8px;
line-height: 1.1em;
}

div.chronology-rows ul li{
margin-bottom: 0.5em;
}

/* Educational Resources */

div.edu-res-block{
width: 100%;
margin: 1em 0;
padding: 0;
display: table;
}

div.edu-res-block p{
margin: 0;
padding: 0;
}

div.edu-res-rows{
width: 96%;
margin: 0 0 1em 1.5em;
padding: 0;
display: table;
}

div.edu-res-rows img{
border: 5px solid #663333;
}

div.edu-res-cols-left{
width: 15%;
float: left;
}

div.edu-res-cols-right{
width: 80%;
float: left;
}

.set-margin-top-10 {margin-top: 10px;}
.set-margin-top-15 {margin-top: 15px;}
.set-margin-top-20 {margin-top: 20px;}
.set-margin-top-25 {margin-top: 25px;}
.set-margin-top-30 {margin-top: 30px;}


/* For right floating thumbnails */

div.thumb-right {
float: right;
width: 110px;
margin: 1em;
}

div.thumb-right img {
border: 5px solid #663333;
}

div.thumb-gallery
{
width: 95%;
margin: 1em auto;
padding: 10px 0;
background-color: #fff;
border: 1px solid #663333;
}

div.thumb-gallery img
{
margin-right: 10px;
margin-left: 10px;
border: 5px solid #663333;
vertical-align: middle;
}


/*List modification */

ul li, ol li {
margin-bottom: 0.5em;
line-height: 1.1em;
}

/* SEPERATOR WITH BORDER */
.section-seperator {
width: 96%;
margin: 1em 0 0.5em 1.2em;
padding: 0.75em 0 0 0;
display: table;
border-top: 1px dashed #ccc;
}

.section-seperator p{
padding-left: 0;
}

/* Sub menu style */
div.sub-menu
{
width: 95%;
margin: 1em auto;
padding: 0;
background-color: #fff;
border: 1px solid #663333;
}

div.sub-menu ul
{
margin-top: 5px;
margin-bottom: 0;
}


/* For Quiz Section */

div.quiz-student {
width: auto;
margin: 0.75em 0 0 1em;
padding: 0;
}

div.quiz-teacher {
width: auto;
margin: 0.75em 0 1em 1em;
padding: 0;
}

div.quiz-student input, div.quiz-teacher input
{
margin-right: 15px;
vertical-align: middle;
background-color: #fff;
}

div.print-seperator {width: auto; margin: 1.5em 0 2em 0; padding: 0; display: table;}


/* list left aligned with no left margins */
ul.no-indent {margin-left: 3px; padding-left: 1px;}
/* Classes for the Audio-Video module */

div.audio-video-module {
width: 85%;
margin: 1em auto;
border: 1px solid #663333;
padding: 0 5px;
font-size: 0.85em;
}
/* table class */

table
{
padding-left: 0 !important;
margin: 1em 0.2em 1em 1.2em;
border-collapse: collapse;
}


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

table th, table td
{
padding: 0.75em 0.3em 0.75em 0.3em;
margin: 0;
border: 1px solid #000000;
}

table th
{
white-space: nowrap;
}

/* div expander at the bottom consist of table whose width is set to 100% 
therefore setting the margin left to value > 0 causes it to overflow in IE and the
middle div moves down therefore we have to set this margin 0 again */

div.expander table { margin: 0 !important; }




/* For Print */
@media print {

div.left-frame-wrapper, div.right-frame-wrapper{
float: none;
}

div.gallery-wrapper, div.gallery-wrapper-comic-thumb, div.left-frame-wrapper, div.right-frame-wrapper{
page-break-inside: avoid;
clear: left;
}

div.frame-comic-thumb, div.frame-size-I, div.frame-size-II, div.frame-size-III, div.frame-size-IV, div.frame-size-V{
width: auto;
background-color: #fff;
color: #000;
}

div.left-frame-wrapper a, div.right-frame-wrapper a, div.left-frame-wrapper a:link, div.right-frame-wrapper a:link, div.left-frame-wrapper a:visited, div.right-frame-wrapper a:visited, div.left-frame-wrapper a:hover, div.right-frame-wrapper a:hover, div.left-frame-wrapper a:active, div.right-frame-wrapper a:active
{
background-color: #fff;
color: #000;
}


div.img-frame {border-bottom: none; text-align: left;}

blockquote { page-break-inside: avoid; }


div.print-seperator {page-break-after: always;}
}