body {
background-color: #333;
color: #000;
}

div.center h1 {
border: none !important;
padding: 20px 0px 37px 0px;
margin: 8px;
background: #333 url(/trains/kids/091/021007-misc-02.jpg);
color: #fff;
font-size: 1.2em;
}

div.center h1 a {
text-align: center;
display: block;
}

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


div.left {
background-color: #fff;
border-top: 20px solid #ffcc00;
}

div.left img {
border-bottom: 20px solid #ffcc00;
}

ul.nav {
list-style-type: none;
background-color: #000;
color: #fff;
}

ul.nav li {
background-color: #000;
color: #fff;
padding-bottom: 0;
border-bottom: none !important;
}

ul.nav li a.menulink, ul.nav li a.menulink:link, ul.nav li a.menulink:active, ul.nav li a.menulink:visited {
text-decoration: none;
color: #fff;
background-color: #000;
padding: 7px 5px 7px 9px;
border-left: 1px solid #333;
margin-left: 5px;
}

ul.nav li a.menulink:hover {
color: #fff;
background-color: #333;
text-decoration: none;
padding: 7px 5px 7px 9px;
border-left: 6px solid #cc6600;
margin-left: 0;
}

ul.nav li span.on-state {
background-color: #333;
color: #ffffff;
width: 130px;
padding: 7px 5px 7px 9px;
border-left: 6px solid #cc6600;
}

ul.nav li a.linked_on-state:link, ul.nav li a.linked_on-state:visited {
background-color: #333;
color: #ffffff;
text-decoration: none;
padding: 7px 5px 7px 9px;
width: 130px;
border-left: 6px solid #cc6600;
margin-left: 0;
}

/* Proactive disclosure */

div#procontainer ul.nav {
background-color: #fff;
width: auto;
}

div#procontainer ul li {
border: 0px;
margin: 0px;
padding: 0px;
}

div#procontainer a.menulink{
border: 1px solid #000;
background-color: #fff;
color: #000;
margin-left: 0;
padding: 5px 10px 5px 10px;
}

div#procontainer a.menulink:hover{
background-color: #000;
color: #fff;
padding: 5px 10px 5px 10px;
}

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

ul.nav3 {
background-color: #000;
color: #fff;
margin: 0;
padding: 0;
border-left: 6px solid #cc6600;
}

ul.nav3 li {
background-color: #000;
color: #fff;
margin: 1px 0 0 0;
padding: 0;
border: none;
line-height: 1.25em;
}

ul.nav3 li span.on-state {
background-color: #333;
color: #fff;
padding: 5px 0 5px 18px; 
width: 125px;
border: 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: #333;
color: #fff;
padding: 5px 0 5px 18px; 
margin: 0px;
border: 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 {
margin:  0;
padding: 5px 0 5px 18px; 
text-decoration: none;
background-color: #000;
color: #fff;
border: none; /* border inherited from top styles - this is not needed */
}

ul.nav3 li a.menulink:hover{
background-color: #333;
color: #fff;
margin: 0;
padding: 5px 0 5px 18px;
border: none; /* border inherited from top styles - this is not needed */

}


.center a {
/*color: #ffffff;*/
background-color: transparent;
}


/*************RIGHT NAVIGATION AND SIDE IMAGE ***************/
div.right-navigation{
background-image: none;
background-color: #fff;
}

div.right-navigation-img {
border: 1px solid #ccc;
margin: 0;
padding: 0;
background-color: #cc6600;
}

div.right-navigation-img img{
margin: 0;
padding: 0;
}

div.right-navigation a, div.right-navigation a:link, div.right-navigation a:visited, div.right-navigation a:hover, div.right-navigation a:active{
background-color: #fff;
color: #660000;
text-decoration: underline;
}

.right div.right-navigation div#title, div.right-navigation div#title3 {
background-color: #000;
color: #fff;
}


.right ul {
margin-top: 1em;
font-size: 1.1em;
}

div.right-navigation-image {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
color: #000;

}

div.image-container{
width: 195px;
margin: 0 auto;
padding: 0 0 5px 0;
background-color: #000;
color: #fff;
display: table;
}

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 p{
font-size: 0.85em;
padding: 0;
margin: 5px 15px 8px 15px;
}

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


div.image-container img.middle-img{
border-top: 3px solid #cc6600;
}

div.image-container p.img-question{
padding: 10px;
margin-bottom: 5px;
border: 1px solid #333;
}

div.image-container div.img-answer-button{
float: right;
margin: 0;
padding: 0;
display: block;

}
div.img-answer-button p {
width: auto;
padding: 6px 13px;
margin-right: 15px;
background-color: #990000;
color: #fff;
border: 2px solid #fff;
}

div.img-answer-button a, div.img-answer-button a:link, div.img-answer-button a:visited, div.img-answer-button a:hover, div.img-answer-button a:active {
background-color: #990000;
color: #fff;
text-decoration: none;
}


/* CLASS FOR HIGHLIGHTED TEXT WITH IMAGE ICONS - YELLOW BOXES */


div.icon-hightlights {width: 97%; margin: 1em auto; background-color: #fff; }

div.icon-hightlights-2Col div.icon-hightlights  {width: 60%; margin: 1em auto; background-color: #fff; }

div.icon-hightlights-title-I, div.icon-hightlights-title-II, div.icon-hightlights-title-III, div.icon-hightlights-title-IV {
width: 387px; 
height: 70px;
margin: 0;
padding: 0; 
}

/* TITLE - I Was There */
div.icon-hightlights-title-I{
background: #fff url(/trains/kids/091/021007-misc-04.jpg) no-repeat center center;
}

/* Title - Field Trip */
div.icon-hightlights-title-II{
background: #fff url(/trains/kids/091/021007-misc-05.jpg) no-repeat center center;
}

/* Title - Read More */
div.icon-hightlights-title-III{
background: #fff url(/trains/kids/091/021007-misc-06.jpg) no-repeat center center;
}

/* Title - Yeah Canada! */
div.icon-hightlights-title-IV{
background: #fff url(/trains/kids/091/021007-misc-07.jpg) no-repeat center center;
}

p.icon-title{
padding-top: 15px;
padding-left: 10px;
padding-bottom: 0;
color: #990000;
}


div.icon-hightlights-text {
width: 387px; 
background-color: #ffcc33; 
color: #000; 
margin: 0;
padding: 5px 0 20px 0; 
}

div.icon-hightlights-text a, div.icon-hightlights-text a:link, div.icon-hightlights-text a:visited, div.icon-hightlights-text a:hover, div.icon-hightlights-text a:active {
color: #000;
background-color: transparent;
}

/* GALLERY CLASSES FOR THE CONTENT PAGES */ 

div.gallery-wrapper
{
width: 95.5%;
margin: 1.5em auto;
padding: 0;
display: table;
border: 1px dashed #ccc;
}


div.img-left
{
float: left;
width: 170px;
margin: 1em;
padding: 10px 0 5px 0;
text-align: center;
display: inline;
border: 1px dashed #ccc;
}

div.gallery-wrapper-multi-img
{
width: 340px;
margin: 1.5em auto;
padding: 20px 0;
display: table;
border: 1px dashed #ccc;
text-align: center;
}


div.left-frame-wrapper
{
float: left;
width: 50%;
margin: 0;
padding: 20px 0;
text-align: center;
}

div.right-frame-wrapper
{
float: left;
width: 49%;
margin: 0;
padding: 20px 0;
text-align: center;
}

/* Set middle border for the gallery - depending on the larger caption content */ 
.set-border-right {border-right: 1px dashed #ccc;}
.set-border-left {border-left: 1px dashed #ccc;}

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, div.img-left a, div.img-left a:link, div.img-left a:visited, div.img-left a:hover, div.img-left a:active {
background-color: #fff;
color: #000;
}

div.left-frame-wrapper p , div.right-frame-wrapper p, div.gallery-wrapper-multi-img p
{
font-size: 0.85em;
padding: 5px 18px 5px 20px;
text-align: left;
}

div.img-left p
{
font-size: 0.85em;
padding: 5px 8px 5px 10px;
text-align: left;
}


div.left-frame-wrapper img , div.right-frame-wrapper img, div.gallery-wrapper-multi-img img, div.img-left img
{
border: 1px solid #999;
margin: 0;
}

/* Class for the Listen to Sound clip and Watch Vidoes*/

div.icon-listen-watch
{
width: 96.5%;
margin: 1.5em auto;
padding: 0;
display: table;
border: 1px solid #ccc;
}

div.icon-listen-watch img
{
float: right;
vertical-align: middle;
margin-left: 1em;
margin-right: 1em;
}

/* Set the top margin for the image to align in the middle of the div*/
.set-maring-top10 {margin-top: 1em;}
.set-maring-top15 {margin-top: 1.5em;}
.set-maring-top20 {margin-top: 2em;}
.set-maring-top25 {margin-top: 2.5em;}
.set-maring-top30 {margin-top: 3em;}

div.icon-listen-watch p
{
font-size: 0.85em;
padding-left: 10px;
}

div.icon-listen-watch p.icon-listen-watch-title {
color: #990000; 
font-size: 1em;
}


/* Food list table */

div.food-list {
width: 85%;
margin: 1.2em 0 1em 1.2em;
padding: 0;
}

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

div.list-col {
float: left;
width: 49%;
}

/* Miscellenous classes */

.biblo {font-size: 0.85em;}



/* Horizontal rule */
hr.custom-rule {
color: #ccc;
background-color: #ccc;
height: 1px;
border: none;
}



/* For Print */
@media print {

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

div.gallery-wrapper, div.left-frame-wrapper, div.right-frame-wrapper, div.single-frame-wrapper, div.multi-img-frame-wrapper-I, div.multi-img-frame-wrapper-II, div.multi-img-frame-wrapper-III{
page-break-inside: avoid;
clear: left;
}

div.frame-size-v1, div.frame-size-v2, div.frame-size-v3, div.multi-img-cap-source-frame, div.multi-img-frame-wrapper-I, div.multi-img-frame-wrapper-II, div.multi-img-frame-wrapper-III, div.link-button {
width: auto;
background-color: #fff;
color: #000;
text-align: left;
}

div.audio-video-module {
width: auto;
border: none;
}