/*
Stylesheet for normal browsing
*/

body {
    font-family: "Trebuchet MS", Arial, Helvetica,Verdana,"sans serif";
    font-size:110%;
    color: #f0f0f0;
    background-color: #000000;
    background-image: url("../images/bg3.jpg");
    background-repeat: repeat-y;
    margin: 25px;
}

p {
    text-align:justify;
}

img {
    border:0;
}

a:link{color: #00aaaa;}
a:visited {color: #ff00ff;}
a:hover {color: #00ffff;}

.layoutTable td {
    font-family: "Trebuchet MS", Arial, Helvetica,Verdana,"sans serif";
}

.quote {
    font-family: "Courier New", Courier, monospace;
    text-align: left;
}


#menuBar {
    width:142px;
    position:absolute;
    top:0;
    left:0;
    margin-top:25px;
    margin-left:28px;
    margin-right:0;

}

#main {
    margin-left:150px;
    margin-right:25px;
    margin-top:25px;
    margin-bottom:25px;
    position:absolute;
    top:0;
    max-width: 1250px;
}

#main img {
    margin-left:10px;
    margin-right:10px;
    margin-bottom:5px;
    margin-top:5px;
}

#small-print {
    font-size:80%;
}


#masthead-logo {
    /* TODO: do this properly. */
/*    text-align: right; */
}



#masthead-subtitle h1, #masthead-subtitle h2,#masthead-subtitle h3 {
    text-align: center;
}

#motd {
    color:#ffff00;
    font-size:90%;
}

#footer {
    text-align:center;
    font-size:80%;
}

.red {
    color:red;
}

.green {
    color:#00ff00;
}


.yellow {
    color:#ffff00;
}

.link-more {
    font-size: 130%;
}

.image-subtitle {
    text-align: center;
    font-size: 80%;
}


.image img {
    vertical-align: middle;
    display: block;
    margin-left: auto !IMPORTANT;
    margin-right: auto !IMPORTANT;
    
}

.image p {
    text-align:center;
    font-size:80%;
    margin-top:0;
}

.image-left {
    float: left;
}

.image-right {
    float: right;
}

.image-title {
    /* TODO: do this properly */
    text-align:left;
    vertical-align:middle;
    margin-top: 25px;
    margin-bottom:25px;
}

/* Image specific styling.  Maybe needs its own CSS file in future. */

/*  Generic definitions that apply to most pages */

.image-small-4x3 { width: 300px; height: 225px; }

.image-4x3 { width: 400px; height: 300px; }

.img-back-arrow { width: 78px; height: 18px; }

/* Image specific tags - for sizing images that aren't in the general mould */

/* front */

.front-logo { width:315px; height:119px; }
#front-subtitle1 { width: 555px; height: 30px; }
#front-subtitle2 { width: 367px; height: 36px; }
#front-keyhole { width: 87px; height: 159px; }
#front-changes { width: 91px; height: 44px; }
#front-thumbnail-tub-map { height: 67px; width: 100px; }
#front-image-woodlane {    width: 300px;    height: 205px; }
#front-image-heading-tower-subway {    width: 222px; height: 50px; }
#front-image-tower-subway {    width: 189px;    height: 277px; }
#front-image-tower-subway-aerial {    width: 555px;    height: 230px; }

/* The new Euston pages (and possible subsequent publications) have bigger 
standard and unique defintions to the rest of the site so they're defined
separately here */

.img-new-4x3 { width: 600px; height: 450px; }
.img-new-16x9 { width: 600px; height: 338px; }
.img-new-1x1 { width: 600px; height:600px; }

/* Specific definitions for individual specially cropped Euston images */

#img-eus-masthead { width: 555px; height: 125px; }
#img-eus-cceh-surface { width: 600px; height: 371px; }
#img-eus-way-back { width: 600px; height: 371px; }
#img-eus-hidden-london { width: 250px; height: 242px; }


/*********/


.renamedStationsTable{
    border-spacing:7px;
}

.emphasize {
    color:#ff8080; 
}

.hammersmith-and-city-line {
    color: #ffa0a0;
}

.circle-line {
    color: #ffff00;
}


/* Style for the left menu bar */


.menu {
    background-repeat:no-repeat;
    width:140px;
    opacity: 1;
}

.menu span {
    position: absolute;
    width:140px;
    background:url("../images/menu.png");
    opacity: 0; 
    -webkit-transition: ease-out 0.25s;
    transition: ease-out 0.25s;
    -moz-transition: ease-out 0.25s;
    -o-transition: ease-out 0.25s;
}

#mintro, #mintro span {
    height:21px;
}


#m04, #m05, #m06, #m07, #m08, #m09,
#m10, #m11, #m12, #m21, #m22,
#m23, #m24,
#m04 span, #m05 span, #m06 span, #m07 span, #m08 span, #m09 span,
#m10 span, #m11 span, #m12 span, #m21 span, #m22 span,
#m23 span, #m24 span {
    height:17px;
}

#m13, #m14, #m16, #m17, #m25,
#m13 span, #m14 span, #m16 span, #m17 span, #m25 span
{
    height:27px;
}
    
#m03, #m15, #m18,
#m03 span, #m15 span, #m18 span {
    height:28px;
}

#m02, #m27,
#m02 span, #m27 span {
    height:25px;
}

#m19, #m20, #m28,
#m19 span, #m20 span, #m28 span {
    height:33px;
}


#m01 { background:url("../images/menu.png") 0 0; height:60px; }
#mintro { background:url("../images/menu.png") 0 -59px; height:21px; }
#m02 { background:url("../images/menu.png") 0 -102px; }
#m03 { background:url("../images/menu.png") 0 -1021px; }
#m04 { background:url("../images/menu.png") 0 -152px; }
#m05 { background:url("../images/menu.png") 0 -186px; }
#m06 { background:url("../images/menu.png") 0 -220px; }
#m07 { background:url("../images/menu.png") 0 -254px; }
#m08 { background:url("../images/menu.png") 0 -288px; }
#m08 { background:url("../images/menu.png") 0 -288px; }
#m09 { background:url("../images/menu.png") 0 -322px; }
#m10 { background:url("../images/menu.png") 0 -356px; }
#m11 { background:url("../images/menu.png") 0 -390px; }
#m12 { background:url("../images/menu.png") 0 -424px; }
#m13 { background:url("../images/menu.png") 0 -458px; }
#m14 { background:url("../images/menu.png") 0 -512px; }
#m15 { background:url("../images/menu.png") 0 -1052px;}
#m16 { background:url("../images/menu.png") 0 -566px; }
#m17 { background:url("../images/menu.png") 0 -1112px; }
#m18 { background:url("../images/menu.png") 0 -1082px; }
#m19 { background:url("../images/menu.png") 0 -620px; }
#m20 { background:url("../images/menu.png") 0 -686px; }
#m21 { background:url("../images/menu.png") 0 -752px; }
#m22 { background:url("../images/menu.png") 0 -786px; }
#m23 { background:url("../images/menu.png") 0 -820px; }
#m24 { background:url("../images/menu.png") 0 -854px; }
#m25 { background:url("../images/menu.png") 0 -888px; }
#m26 { background:url("../images/menu.png") 0 -942px; height:40px; }
#m27 { background:url("../images/menu.png") 0 -1139px; }
#m28 { background:url("../images/menu.png") 0  -1189px; }


.menu-active:hover span {opacity:1;
    -webkit-transition: 0s; 
    transition:0s;
    -moz-transition: 0s;
    -o-transition: 0s; 
}

#mintro span {background:url("../images/menu.png") 0 -80px; }
#m02 span { background:url("../images/menu.png") 0 -127px; }
#m04 span { background:url("../images/menu.png") 0 -169px; }
#m05 span { background:url("../images/menu.png") 0 -203px; }
#m06 span { background:url("../images/menu.png") 0 -237px; }
#m07 span { background:url("../images/menu.png") 0 -271px; }
#m08 span { background:url("../images/menu.png") 0 -305px; }
#m09 span { background:url("../images/menu.png") 0 -339px; }
#m10 span { background:url("../images/menu.png") 0 -373px; }
#m11 span { background:url("../images/menu.png") 0 -407px; }
#m12 span { background:url("../images/menu.png") 0 -441px; }
#m13 span { background:url("../images/menu.png") 0 -485px; }
#m14 span { background:url("../images/menu.png") 0 -539px; }
#m16 span { background:url("../images/menu.png") 0 -593px; }
#m19 span { background:url("../images/menu.png") 0 -653px; }
#m20 span { background:url("../images/menu.png") 0 -719px; }
#m21 span { background:url("../images/menu.png") 0 -769px; }
#m22 span { background:url("../images/menu.png") 0 -803px; }
#m23 span { background:url("../images/menu.png") 0 -837px; }
#m24 span { background:url("../images/menu.png") 0 -871px; }
#m25 span { background:url("../images/menu.png") 0 -915px; }
#m26 span { background:url("../images/menu.png") 0 -982px; height:40px;  }
#m27 span { background:url("../images/menu.png") 0 -1164px; }
#m28 span { background:url("../images/menu.png") 0  -1222px; }



/* 8th Sept 2016... let's experiment with some tool tips to make things easier to follow
on the new Euston page with all those pesky repetitive railway company acronyms ;) */

.tooltip {
    position: relative;
    display: inline-block;
    font-style: italic;
    border-bottom: 1px dotted #ffffc0;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 175px;
    background-color: #ffffc0;
    color: #000;
    padding: 5px 0;
    border-radius: 6px;
 
    top: -5px;
    right: 105%; 
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    text-align: center;
}

/* Printing functionality to reduce print clutter */

.print-only, .print-only-heading {
   display: none !important;
}

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }

    .print-only, .print-only *
    {
       display: inline !important;
    }

    .print-only-heading
    {
       display: block !important;
    }

    body {
        background-color: #ffffff;
        color: #000000;
    }

    a {
	color: #000000 !important;
        font-weight: bold;
        text-decoration: none;
    }

    #main {
        margin-left: 0;
    }

    .yellow {
        color: #8888ff;
    }

    .tooltip {
        border-bottom: none;
    }
}

.print-title {
    text-align: center;
    font-size: 29px;
}

.print-pointer {
    cursor: pointer;
}

/**********/

.jigDump {
   display: none;
}