body, html {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    padding:0;
    margin:0;
    text-align:center;
    background-color:#ffffff;
    font-size:0.8em;
}

IFRAME {
    padding:0;
    margin:0;
    }
    
td {
    font-family: verdana, arial, Helvetica, sans-serif;
    text-align:left;
    color:#000000;
    padding:0 15px 15px 0;
    vertical-align:text-top;
    font-size:1em;
}

th {
    font-family: verdana, arial, Helvetica, sans-serif;
    font-size:1em;
    text-align:left;
}

p{
    padding:0;
    margin:0;
    font-family: verdana, arial, Helvetica, sans-serif;
    font-size:1.1em;
    text-align:left;
    line-height:1.4em; 
    margin-bottom: 0.5em; 
}

a{
color:#2179db;}

h1{
padding:0;
margin:0 0 15px 0;
color:#2179db;
text-transform:uppercase;
text-align:left;
font-size:1.2em;
font-weight:900;
line-height:1.2em;}

h2{
padding:0;
margin:0 0 15px;
color:#2179db;
text-align:left;
font-size:1.1em;
font-weight:900;}


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

Map Tooltip

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

.tooltip {
        background-color:white;
        border:1px black solid;
        width: 10em;
        color:#2179db;
        font-weight: bold;
      }

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

containers

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

#breadcrumbs{
    text-align: left;
    margin: 0 0 5px;
    clear: both;
    }
    
#holder{
    width:856px;
    margin:10px auto 10px auto;
    /*background-color:#eaeaea;*/
    padding:0px;
    overflow:visible;
}


#header{
    width:856px;
    height:110px;
    margin:0;
    padding:0;
    margin-bottom:10px;
}

#logo{
    width:130px;
    height: 75px;
    float:left;
    margin:30px 0px 0px 0px;
    padding:0;
}

#header-right{
    width:700px;
    float:right;
    text-align:right;
    margin:0;
    padding:0;
}

#text-links{
    height: 14px;
    color:#2179db;
    text-align:right;
}

#text-links a{
    color:#2179db;  
}

#lang-links{
    height: 14px;
    float:left;
    padding:0;
}


/*############################################################################# NAV*/
#circles{
    height:95px;
    margin: 5px 5px 5px 5px;
    padding: 0px;
    border: 0;
    width:  700px;
    float: right;
}

#circle_list{
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
}

#circle_list li{
    width:80px;
    height:92px;
    margin: 0px 8px 0px 0px;
    padding: 0px;
    float:left;
    text-align: center;
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 15px;
}

.circle_list_last{
    margin-right: 0px !important;
}

#circle_list li a{
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    width: 80px;
    height: 85px;
    margin: 0px;
    padding: 0px;
    border: 0px;
}
#circle_list li a:hover{
    text-decoration: none;
    color: #000000;
}

#cl_map{
    background-image: url(/mattisse/images/circle-maps.gif);
    background-repeat: no-repeat;
}
#cl_traffic{
    background-image: url(/mattisse/images/circle-traffic.gif);
    background-repeat: no-repeat;
}
#cl_bus{
    background-image: url(/mattisse/images/circle-bus.gif);
    background-repeat: no-repeat;
}
#cl_train{
    background-image: url(/mattisse/images/circle-train.gif);
    background-repeat: no-repeat;
}
#cl_car{
    background-image: url(/mattisse/images/circle-carpark.gif);
    background-repeat: no-repeat;
}
#cl_air{
    background-image: url(/mattisse/images/circle-air.gif);
    background-repeat: no-repeat;
}
#cl_cycling{
    background-image: url(/mattisse/images/circle-cycle.gif);
    background-repeat: no-repeat;
}
#cl_quality{
    background-image: url(/mattisse/images/circle-airqual.gif);
    background-repeat: no-repeat;
}
/*############################################################################# END NAV*/



#main{
margin:0 0 0 0;
padding:0;
background-color:#FFFFCC;
clear:both;
display:inline;}

#column-left{
width:115px;
padding:0;
margin:0 26px 0 0;
float:left;
text-align:left;
height: auto;

}

#column-left img{
margin:5px 0 5px 0;}


/**********************************************
homepage
**********************************************/


#home-left{
width:490px;
float:left;
margin:0 25px 0 0;
padding:0;

}

#home-left-top{}
#home-left-mid{
background-image:url(/mattisse/images/home-left-mid.gif);
background-repeat:repeat-y;
padding: 0 15px 15px 15px;}

#home-left-mid a{
font-size:1.1em;
width:100%;
font-weight:bold;
color:#2179db;
}

#home-left-mid p{
font-size:1.1em;
padding:0 !important;
margin:0 !important;
}

#home-left-bot{}

#home-left p{
padding:0 20px 0 20px;}


#home-left td {
    font-family: verdana, arial, Helvetica, sans-serif;
    text-align:left;
    color:#000000;
    padding:0 15px 15px 0;
    vertical-align:text-top;
    font-size:1em;
}

#home-left th {
    font-family: verdana, arial, Helvetica, sans-serif;
    font-size:1em;
    text-align:left;
}


#home-right{
width:200px;
float:left;
margin:0;
padding:0;

}

#home-right-top{}
#home-right-mid{
background-image:url(/mattisse/images/home-right-mid.gif);
background-repeat:repeat-y;
padding: 0 15px 15px 15px;
text-align:left;}


#home-right-mid a{
font-size:1.1em;
width:100%;
font-weight:bold;
color:#2179db;
}

#home-right-mid p{
font-size:1.1em;
padding:0 0 10px 0!important;
margin:0 !important;
}


#home-right-bot{
margin:0;
padding:0;
}


#home-right p{
padding:0;}


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

sub page content

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

#subcontent{
width:715px;
margin:0;
padding:0;
float:left;
}

#subcontent-top{
padding:0;
margin:0;}

#subcontent-bot{
padding:0;
margin:0;
}

#subcontent-traffic-mid{
background-image:url(/mattisse/images/box-mid-traffic.gif);
background-repeat:repeat-y;
padding: 0 15px 15px 15px;
margin:0;}

#subcontent-train-mid{
background-image:url(/mattisse/images/box-mid-train.gif);
background-repeat:repeat-y;
padding: 0 15px 15px 15px;
margin:0;}

#subcontent-carparks-mid{
background-image:url(/mattisse/images/box-mid-carparks.gif);
background-repeat:repeat-y;
padding: 0 15px 15px 15px;
margin:0;
text-align:left;}

#subcontent-airtravel-mid{
background-image:url(/mattisse/images/box-mid-airtravel.gif);
background-repeat:repeat-y;
padding: 0 15px 15px 15px;
margin:0;}

#subcontent-maps-mid{
background-image:url(/mattisse/images/box-mid-maps.gif);
background-repeat:repeat-y;
padding: 0 15px 15px 15px;
margin:0;}

#subcontent-cycling-mid{
background-image:url(/mattisse/images/box-mid-cycling.gif);
background-repeat:repeat-y;
padding: 0 15px 15px 15px;
margin:0;}

#subcontent-airqual-mid{
background-image:url(/mattisse/images/box-mid-airqual.gif);
background-repeat:repeat-y;
padding: 0 15px 15px 15px;
margin:0;}

#subcontent-home-mid{
background-image:url(/mattisse/images/box-mid-home.gif);
background-repeat:repeat-y;
padding: 0 15px 15px 15px;
margin:0;}

#subcontent-bus-mid{
background-image:url(/mattisse/images/box-mid-bus.gif);
background-repeat:repeat-y;
padding: 0 15px 15px 15px;
margin:0;}



#footer{
width:856px;
clear:both;
height:25px;
background-image:url(/mattisse/images/footer.gif);
background-repeat:no-repeat;
padding:0;
margin: 15px 0px 0px 0px;
text-align:left;}

#footer p{
padding:4px 0 0 10px;
font-size:11px;
color:#FFFFFF;}

#footer a{
color:#ffffff;
text-decoration:none;}

#footer a:hover{
text-decoration:underline;}


/********************************************************
navigation

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

#mainnavigation ul {
  padding: 0;
  margin: 0;
  list-style: none;
  float: left;
  }

#mainnavigation li{
background-image:url(/mattisse/images/nav-blue.gif);
background-repeat:no-repeat;
width:115px;
margin:0 0 5px 0;
height:22px;
overflow:hidden;
text-align:right;
padding: 0;
line-height:2em;
}  

#mainnavigation a{
padding:7px;
margin:0;
font-size:11px;
color:#ffffff;
font-weight:bold;
text-decoration:none;
}

#mainnavigation a:hover{
color:#000000;}

#mainnavigation p{
padding: 0;
}

.skiplink{
display:none;}

/***************** *****************************
sub nav classes
 *********************************************/


.subnavitem{
font-weight:normal !important;
font-size:1em !important;}

.traffic{
background-image:url(/mattisse/images/nav-traffic.gif) !important;}

.maps{
background-image:url(/mattisse/images/nav-maps.gif) !important;}

.bus{
background-image:url(/mattisse/images/nav-bus.gif) !important;}

.train{
background-image:url(/mattisse/images/nav-train.gif) !important;}

.carparks{
background-image:url(/mattisse/images/nav-carparks.gif) !important;}

.airtravel{
background-image:url(/mattisse/images/nav-airtravel.gif) !important;}

.cycling{
background-image:url(/mattisse/images/nav-cycling.gif) !important;}

.airqual{
background-image:url(/mattisse/images/nav-airqual.gif) !important;}
  
  
/*****************************************************

clearfix
******************************************************/  


.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    padding:0;
    margin:0;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

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

sub page stuff

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

#sub-traffic{
width:715px;
height:22px;
background-image:url(/mattisse/images/sub-traffic.gif);
background-repeat:no-repeat;
margin: 0 0 15px 0;
padding:0 0 0 0;
}

#sub-traffic p{
padding: 0 15px 0 0;
text-align:right;
color:#FFFFFF;
font-weight:bold;
line-height:1.8em;}

#sub-train{
width:715px;
height:22px;
background-image:url(/mattisse/images/sub-train.gif);
background-repeat:no-repeat;
margin: 0 0 15px 0;
padding:0 0 0 0;
}

#sub-train p{
padding: 0 15px 0 0;
text-align:right;
color:#FFFFFF;
font-weight:bold;
line-height:1.8em;}

#sub-carparks{
width:715px;
height:22px;
background-image:url(/mattisse/images/sub-carparks.gif);
background-repeat:no-repeat;
margin: 0 0 15px 0;
padding:0 0 0 0;
}

#sub-carparks p{
padding: 0 15px 0 0;
text-align:right;
color:#FFFFFF;
font-weight:bold;
line-height:1.8em;}

#sub-airtravel{
width:715px;
height:22px;
background-image:url(/mattisse/images/sub-airtravel.gif);
background-repeat:no-repeat;
margin: 0 0 15px 0;
padding:0 0 0 0;
}

#sub-airtravel p{
padding: 0 15px 0 0;
text-align:right;
color:#FFFFFF;
font-weight:bold;
line-height:1.8em;}

#sub-maps{
width:715px;
height:22px;
background-image:url(/mattisse/images/sub-maps.gif);
background-repeat:no-repeat;
margin: 0 0 15px 0;
padding:0 0 0 0;
}

#sub-maps p{
padding: 0 15px 0 0;
text-align:right;
color:#FFFFFF;
font-weight:bold;
line-height:1.8em;}

#sub-cycling{
width:715px;
height:22px;
background-image:url(/mattisse/images/sub-cycling.gif);
background-repeat:no-repeat;
margin: 0 0 15px 0;
padding:0 0 0 0;
}

#sub-cycling p{
padding: 0 15px 0 0;
text-align:right;
color:#FFFFFF;
font-weight:bold;
line-height:1.8em;}

#sub-airqual{
width:715px;
height:22px;
background-image:url(/mattisse/images/sub-airqual.gif);
background-repeat:no-repeat;
margin: 0 0 15px 0;
padding:0 0 0 0;
}

#sub-airqual p{
padding: 0 15px 0 0;
text-align:right;
color:#FFFFFF;
font-weight:bold;
line-height:1.8em;}

#sub-home{
width:715px;
height:22px;
background-image:url(/mattisse/images/sub-home.gif);
background-repeat:no-repeat;
margin: 0 0 15px 0;
padding:0 0 0 0;
}

#sub-home p{
padding: 0 15px 0 0;
text-align:right;
color:#FFFFFF;
font-weight:bold;
line-height:1.8em;}

#sub-bus{
width:715px;
height:22px;
background-image:url(/mattisse/images/sub-bus.gif);
background-repeat:no-repeat;
margin: 0 0 15px 0;
padding:0 0 0 0;
}

#sub-bus p{
padding: 0 15px 0 0;
text-align:right;
color:#FFFFFF;
font-weight:bold;
line-height:1.8em;}
/********************************************************
*
*  Incident Table formatting
*
********************************************************/

.rowgreen{
background-color: #D7E3CC;
}

.rowgrey{
background-color: #EBEBEB;
}

.roworange{
background-color: #FFECDF;
}

.rowyellow{
background-color: #FFFFCC;
}

.rowred{
background-color: #FFDFDF;
}

.traffic-rowheader th{
background-color: #e71a1a;
color: #ffffff;
font-weight: bold;
border: 1px solid black;
margin: 0;
padding: 4px;
}


#subcontent-traffic-mid table, tr, td, th
{
font-family: verdana, sans-serif;
font-size: 0.95em;
line-height: 140%; 
margin: 0;
padding: 0;
border-collapse: collapse;
vertical-align: middle;
}

#subcontent-traffic-mid td
{   
border-color: #333;
border-width: 1px;
border-style: solid;
margin: 0;
padding: 4px;
}

/********************************************************
*
*  Train formatting
*
********************************************************/

#subcontent-train-mid ul li
{
    text-decoration: none;
    list-style: none;
    text-align: left;
}

#subcontent-train-mid th{
background-color: #67cc34;
color: #ffffff;
font-weight: bold;
margin: 0;
padding: 4px;
border-color: #333;
border-width: 1px;
border-style: solid;
}


#subcontent-train-mid table, tr, td, th
{
font-family: verdana, sans-serif;
font-size: 0.95em;
line-height: 140%; 
margin: 0;
padding: 0;
border-collapse: collapse;
font-size: 1em;

}

#subcontent-train-mid td
{   
border-color: #333;
border-width: 1px;
border-style: solid;
margin: 0;
padding: 4px;
font-size: 1em;

}

#subcontent-train-mid tr.delay
{   
background-color: #ffecdf; 
}


/********************************************************
*
*  Car Park formatting
*
********************************************************/

#subcontent-carpark-mid table, tr, td, th
{
font-family: verdana, sans-serif;
font-size: 0.95em;
line-height: 140%; 
margin: 0;
padding: 0;
border-collapse: collapse;
}

#subcontent-carpark-mid td
{   
border-color: #333;
border-width: 1px;
border-style: solid;
margin: 0;
padding: 4px;
}

.parkingsub span
{
    text-align:left;
    font-color: #333333;
}


/********************************************************
*
*  Air Travel formatting
*
********************************************************/

#subcontent-airtravel-mid table, tr, td, th
{
font-family: verdana, sans-serif;
font-size: 0.95em;
line-height: 140%; 
margin: 0;
padding: 0;
border-collapse: collapse;
}

#subcontent-airtravel-mid td
{   
border-color: #333;
border-width: 1px;
border-style: solid;
margin: 0;
padding: 4px;
}

/********************************************************
*
*  Cycling formatting
*
********************************************************/

#subcontent-cycling-mid ul, li
{
    text-decoration: none;
    list-style: none;
    text-align: left;
}

#subcontent-maps-mid table, tr, td, th
{

align:left;
font-family: verdana, sans-serif;
font-size: 1em;
line-height: 140%; 
margin: 0;
padding: 5;
border-collapse: collapse;
}


#subcontent-carparks-mid ul
{
    text-decoration: none;
    list-style: none;
    text-align: left;
    
}

#subcontent-carparks-mid li
{
    text-decoration: none;
    list-style: none;
    text-align: left;
    display:inline;
    padding:3px;
    margin:0px;
}

#subcontent-carparks-mid th{
background-color: #0fc5b6;
color: #ffffff;
font-weight: bold;
margin: 0;
padding: 4px;
border-color: #333;
border-width: 1px;
border-style: solid;
}

#subcontent-carparks-mid table, tr, td, th
{

align:left;
font-family: verdana, sans-serif;
font-size: 1em;
line-height: 140%; 
margin: 0;
padding: 5;
border-collapse: collapse;
}

#subcontent-carparks-mid td
{   
border-color: #333;
border-width: 1px;
border-style: solid;
margin: 0;
padding: 4px;
}

#subcontent-bus-mid th{
background-color: #ff9900;
color: #ffffff;
font-weight: bold;
margin: 0;
padding: 4px;
border-color: #333;
border-width: 1px;
border-style: solid;
}

#subcontent-bus-mid td{
margin: 0;
padding: 4px;
border-color: #333;
border-width: 1px;
border-style: solid;
}

#subcontent-bus-mid table, tr, td, th
{

align:left;
font-family: verdana, sans-serif;
font-size: 1em;
line-height: 140%; 
margin: 0;
padding: 0.5em;
border-collapse: collapse;
}

#busfilterpopup{
    background: white;
    display:none;
    position:relative;          
    width: 98%;         
    border-left: 1px solid black;
    border-top: 1px solid black;    
    border-right: 3px solid black;
    border-bottom: 3px solid black; 
    padding: 5px;
    margin: -125px 0 0 0;
}

.busDepartures{
    font-size: 1em;
}

.busDepartures th{
font-weight: bold;
margin: 0;
padding: 4px;
border-bottom: 1px #333 solid;
}

.busDepartures td{
margin: 0;
padding: 4px;
}

.busDepartures table, tr, td, th
{
align:left;
font-family: verdana, sans-serif;
line-height: 105%; 
margin: 0;
padding: 0.5em;
border-collapse: collapse;
}

/********************************************************
*
*  Secure area
*
********************************************************/
.secureEditArea
{
    border: 1px dashed black;   
    background-color: #fffebc;
}

.secureEditUrl
{
    text-align: right;
    margin: 5px;
}

.toggle
{
    border: 1px solid black;            
}

/*******************************************************
*
* BBC mailbox-specific styles
*
*******************************************************/
#bbc-logo
{
    width:130px;
    height: 75px;
    float:left;
    margin:10px 0px 35px 0px;
    padding:0;
}

#bbc-footer
{
    width:856px;
    clear:both;
    height:25px;
    background-repeat:no-repeat;
    padding:0;
    margin: 15px 0px 20px 0px;
    text-align:right;
    
}

#bbc-footer p
{
    padding:4px 0 0 10px;
    font-size:11px;
    color:#FFFFFF;
}

#bbcIndexMap
{
    float:right; 
    width:45%; 
    padding-left:0px;   
}

#bbcIndexTrainList
{
    float:left; 
    display:inline; 
    padding-top:10px; 
    padding-right:0px; 
    width:50%;
}

#bbcIndexTrainList IFRAME
{   
    height:400px;   
}

#bbcIndexTrainTable {
    margin: 0px;
    padding: 0px;
    border-collapse: collapse;
}

#bbcIndexTrainTable th{
background-color: #67cc34;
color: #ffffff;
font-weight: bold;
margin: 0px;
padding: 4px;
border-color: #333;
border-width: 1px;
border-style: solid;
}


#bbcIndexTrainTable table, tr, td, th
{
font-family: verdana, sans-serif;
line-height: 140%; 
margin: 0px;
padding: 0px;
border-collapse: collapse;
font-size: 1em;

}

#bbcIndexTrainTable td
{   
border-color: #333;
border-width: 1px;
border-style: solid;
margin: 0px;
padding: 4px;
font-size: 1em;
}

#bbcIndexTrainTable tr.delay
{   
background-color: #ffecdf; 
}

/****************************************************
*
* Refresh button for map
*
****************************************************/
.refreshButton{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
background-color: #FFFFFF;
border: 1px solid black;
padding: 0px;
margin-left: 5px;
}

.alignright
{
    text-align: right;
}