@import url("../../css/yui-reset-min.css");
@import url("../../css/yui-fonts-min.css");

html
{
	background-color: Transparent;
}

body.theme
{
    background-color: #666;
    color: #000;
}

/*****************************************************************************
 * ANCHORS
 *****************************************************************************/
a,
.link
{
	color: #666666;
	text-decoration: underline;
	cursor: pointer;
}

a:visited
{
    color: #333333;
}

a:hover,
.link:hover
{
    color: #000000;
}

/*****************************************************************************
 * HEADERS
 *****************************************************************************/
/*
	font size: 18px
	line height: 20px
	margin bottom: 20px
*/
h1
{
	font-size: 148.9% !important;
	line-height: 1.112 !important;
	margin-bottom: 1.112em !important;
}

/*
	font size: 14px
	line height: 20px
*/
h2
{
	font-size: 116.129% !important;
	line-height: 1.426 !important;
	font-weight: bold !important;
}

h6
{
	background-color: #fc3 !important;
	color: #000;
	font-weight: bold !important;
	padding: 5px 10px !important;
	text-transform: uppercase;
}

h6.normalCase
{
	text-transform: none !important;
}

h6.slim
{
	padding: 0 10px !important;
}


/*****************************************************************************
 * TEMPLATE
 *****************************************************************************/
/* SHADOW ********************************************************************/
#ShadowTopDiv
{
	background: url('images/bg_shadowtop.gif') repeat-y 50% 0;
	text-align: center;
}

#ShadowBottomDiv
{
	height: 18px;
	overflow: hidden;
	background: url('images/bg_shadowbottom.gif') no-repeat 50% 0;
}

/* PAGE **********************************************************************/
/*
	font size: 12px
	line height: 20px
*/
#PageDiv
{
	position: relative;
	width: 1000px;
	margin: 0 auto;

	text-align: left;
	font-size: 93%;
	line-height: 1.655;

	background-color: #fff;
	color: #666;
}

#PageDiv .wowfill
{
	line-height: normal;
}

/* PAGE - HEADER *************************************************************/
#HeaderDiv
{
	position: relative;
    height: 200px;
    background: #000000 url("images/repeatx.gif") repeat-x scroll 0 0;
    z-index: 1000;
}

#HeaderDivWithLogin
{	
    height: 200px !important; 
}

#PrintHeaderDiv
{
	display: none;
}

/* PAGE - HEADER - LOGO ******************************************************/
#HeaderDiv .logo
{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
    height: 200px;
    background: url('images/sprites_blue.gif') no-repeat 0 0;
}

#HeaderDiv .logo span
{
	display: none;
}

/* PAGE - HEADER - BETA ******************************************************/

#HeaderDiv .beta
{
	position: absolute;
	left: 200px;
	top: 100px;
	width: 30px;
	height: 20px;
	background: #000 url("images/sprites_orange_en.gif") no-repeat scroll -200px -60px;
}

#HeaderDiv .beta span
{
	display: none;
}

/* PAGE - HEADER - LOGIN **************************************************/

/* css in Controls/IBI.ATIS.Web.UI.WebControls.AdControl/css/DefaultTheme.css */
/*#HeaderDiv .myTravelInfoLabel
{
	color: #DDBB00;
	font-weight: bold;
}

#HeaderDiv .login
{
	position: absolute;
	top: 115px;
	left: 210px;
    width: 100%;
}

#HeaderDiv .loginInput
{
    background-color: #666;
    margin-left:2px;
    margin-right:2px;
    border: solid 1px #666;
    color: #ccc;
}

#HeaderDiv .loginButtonInHeader
{	
    position: absolute;
    top: -2px;
	width: 22px;
	height: 22px;
	background: Transparent url("images/Go.gif") no-repeat scroll 0 -44px;
}

#HeaderDiv .signUpLabel
{
    font-style:italic;    
    padding-left: 30px;
}

#HeaderDiv .forgotPasswordLabel
{
    display:block;
    left:241px;
    position:absolute;
    top: 23px;
    font-size: 0.9em;
}

#HeaderDiv .login a
{
    color: #ccc !important;
    text-decoration:none !important;
}

#HeaderDiv .login a:hover
{
    color: #DB0 !important;
    
}

#HeaderDiv .invalidLoginLabel
{
    color:Red;
}

#HeaderDiv .loginInputPanel
{
    display: inline;
}*/

/* PAGE - HEADER - COUNTIES **************************************************/
#HeaderDiv .counties
{
	position: absolute;
	top: 112px;
	right: 5px;
}

#HeaderDiv .counties .select
{
	display: block;
	position: absolute;
	width: 120px;
	height: 25px;
	background: transparent url("images/sprites_orange_en.gif") no-repeat scroll -80px 0px;
	right: 180px;
}

#HeaderDiv .counties a.county
{
	position: absolute;
	display: block;
	overflow: hidden;
	width: 25px;
	height: 25px;
	top: 0;
	background: url('images/sprites_orange_en.gif') no-repeat 0 0;
}

/* ALL */
#HeaderDiv .counties a.all,
#HeaderDiv .counties a.allSelected
{
	right: 150px;
	background-position: 0 -25px;
}

#HeaderDiv .counties a.allSelected
{
	background-position: 0 -75px !important;
}

#HeaderDiv .counties a.all:hover
{
	background-position: 0 -50px;
}

/* LA */
#HeaderDiv .counties a.la,
#HeaderDiv .counties a.laSelected
{
	right: 120px;
	background-position: -25px -25px;
}

#HeaderDiv .counties a.laSelected
{
	background-position: -25px -75px !important;
}

#HeaderDiv .counties a.la:hover
{
	background-position: -25px -50px;
}

/* OC */
#HeaderDiv .counties a.oc,
#HeaderDiv .counties a.ocSelected
{
	right: 90px;
	background-position: -50px -25px;
}

#HeaderDiv .counties a.ocSelected
{
	background-position: -50px -75px !important;
}

#HeaderDiv .counties a.oc:hover
{
	background-position: -50px -50px;
}

/* RC */
#HeaderDiv .counties a.rc,
#HeaderDiv .counties a.rcSelected
{
	right: 60px;
	background-position: -75px -25px;
}

#HeaderDiv .counties a.rcSelected
{
	background-position: -75px -75px !important;
}

#HeaderDiv .counties a.rc:hover
{
	background-position: -75px -50px;
}

/* SB */
#HeaderDiv .counties a.sb,
#HeaderDiv .counties a.sbSelected
{
	right: 30px;
	background-position: -100px -25px;
}

#HeaderDiv .counties a.sbSelected
{
	right: 30px;
	background-position: -100px -75px;
}

#HeaderDiv .counties a.sb:hover
{
	background-position: -100px -50px;
}

/* VC */
#HeaderDiv .counties a.vc,
#HeaderDiv .counties a.vcSelected
{
	right: 0;
	background-position: -125px -25px;
}

#HeaderDiv .counties a.vcSelected
{
	background-position: -125px -75px;
}

#HeaderDiv .counties a.vc:hover
{
	background-position: -125px -50px;
}

#HeaderDiv .counties a.county span
{
	display: none;
}

/* PAGE - HEADER - SEARCH ****************************************************/
#HeaderDiv .IBI_ATISLA_Web_UI_WebControls_SearchTextBoxControl
{
	position: absolute;
	right: 5px;
	bottom: 5px;
}

/* PAGE - HEADER - NAVIGATION ************************************************/
#HeaderDiv .IBI_ATISLA_Web_UI_WebControls_HeaderNavControl
{
	position: absolute;
	left: 205px;
	top: 170px;
}

/* PAGE - HEADER SHADOW ******************************************************/
/*
	font size: 11px
	line height: 30px
*/
#HeaderShadowDiv
{
	position: relative;
    height: 30px;
    background: #000000 url("images/repeatx.gif") repeat-x scroll 0 -200px;
	color: #999;
	font-size: 91.4%;
	line-height: 2.727;
	overflow: hidden;
}

#HeaderShadowDiv a
{
	color: #999;
	text-decoration: none;
}

#HeaderShadowDiv a:hover
{
	color: #666;
}

#HeaderShadowLeftDiv
{
	position: absolute;
	top: 0;
	left: 5px;
}

#HeaderShadowLeftDiv a
{
	text-transform: uppercase;
}

#HeaderShadowRightDiv
{
	position: absolute;
	top: 0;
	right: 5px;
	text-align: right;
	line-height: 2.727em;
}

#HeaderShadowDiv .IBI_ATISLA_Web_UI_WebControls_AlertRotatorControl
{
	position: absolute;
	top: 3px;
	left: 210px;
}

/* PAGE - BODY ***************************************************************/
#BodyDiv
{
	/* position: relative; */
    z-index: 0;
}

/* PAGE - API LOGIN VIEW ***************************************************************/
.loginView
{
    position: absolute;
    right: 5px;
    top:250px;
 }
 
 /* PAGE - API DOC ***************************************************************/
 
  #apiHelp h5
 {
    font-weight: bold !important;  
    font-size: 1em;  
    padding: 10px 0 3px 0;
 }
 
 #apiHelp ul, #apiHelp .docSection
 {
     padding-left: 10px;
 }
 
 #apiHelp p
 {     
    padding-top: 5px;
    padding-bottom: 10px;    
 }
 
 .apiTable
 {
     width: 100%;
     border: solid 1px #ccc;    
 }
 
 .apiTable th
 {
    font-weight: bold !important;    
    background-color: #EFEFEF;
 }
 
 .apiTable td, .apiTable th
 {
    padding: 3px !important;    
}

.codeDisplay
{
    color: #000;   
    background-color: #FFE599;
    width: 500px;   
}

/* PAGE - BODY - 3 COLUMNS ***************************************************/
/* All descriptions below are based on 3 column layout, where l, c, and r refer to left, center and right column, 
and 1 refers left margin, 2 to space between left and right margins, and 3 refers to right margin. All numbers are in pixels. */
#BodyDiv #Content3ColumnDiv
{
	position: relative;
    clear: both;
    float: left;
    width: 100%;
	overflow: hidden;	
}

#BodyDiv #Content3ColumnMidDiv
{
    float: left;
    width: 200%;
    margin-left: -180px; /* -r1 + -r2 + -r3 */
    position: relative;
    right: 100%;
}

#BodyDiv #Content3ColumnInnerDiv
{
    float: left;
    width: 100%;
    margin-left: -50%;
    position: relative;
    left: 380px; /* l1 + l2 + l3 + r1 + r2 + r3 */
}

#BodyDiv #ContentColumn1Of3Div
{
    float: left;
    float: right;
    width: 200px; /* l2 */
    position: relative;
    right: 0px; /* l1 */
}

#BodyDiv #ContentColumn2Of3Div
{
    float: left;
    width: 50%;
    position: relative;
    right: 200px; /* l1 + l2 + l3 */
}

#BodyDiv #ContentColumn2Of3InnerDiv
{
    margin: 0px;
    margin-right: 190px; /* c3 + r1 + r2 + r3 */
    margin-left: 210px; /* l1 + l2 + l3 + c1 */
    position: relative;
    left: 200%;
    overflow: hidden;
}

#BodyDiv #ContentColumn3Of3Div
{
    float: left;
    float: right;
    width: 180px; /* r2 */
    margin-right: 0px; /* l1 + l3 + r3 */
    position: relative;
    left: 50%;
}

/* PAGE - BODY - 2 COLUMNS ***************************************************/
/* All descriptions below are based on 2 column layout, where l and r refer to left and right column, 
and 1 refers left margin, 2 to space between left and right margins, and 3 refers to right margin. All numbers are in pixels. */
#BodyDiv #Content2ColumnDiv
{
	position: relative;
    clear: both;
    float: left;
    width: 100%;
	overflow: hidden;
}

#BodyDiv #Content2ColumnInnerDiv
{
    float: left;
    width: 200%;
	position: relative;
	left: 200px; /* l1 + l2 + l3 */
}

#BodyDiv #ContentColumn1Of2Div
{
    float: left;
    width: 200px; /* l2 */
    position: relative;
    right: 200px; /* l1 + l2 */
}

#BodyDiv #ContentColumn2Of2Div
{
    float: right;
    width: 50%;
    position:relative;
    right: 200px; /* l1 + l2 + l3 */
}

#BodyDiv #ContentColumn2Of2InnerDiv
{
    margin: 0px;
    margin-right: 10px; /* r3 */
    margin-left: 210px; /* l1 + l2 + l3 + r1 */
    position: relative;
    right: 100%;
    overflow: hidden;
}

/* PAGE - FOOTER *************************************************************/
/*
	font size: 11px
	line height: 20px
*/
#FooterDiv
{
	padding: 20px 10px;
    clear: both;
    text-align: center;
    color: #999999;
	font-size: 91.4%;
	line-height: 1.81;
}

#FooterDiv p
{
	margin: 0;
}

#FooterDiv a
{
	color: #999999;
}

#FooterDiv a:hover
{
	color: #666666;
}

/*****************************************************************************
 * ADS
 *****************************************************************************/
div.ad
{
	border: 1px solid #999999;
	background-color: #e5e5e5;
}

div.ad span
{
	margin-top: 10px;
	margin-left: 10px;
	font-size: 10px;
	color: #999999;
}


/*****************************************************************************
 * ERROR PANEL
 *****************************************************************************/
.error
{
	position: relative;
	background: #c00 url("images/error.gif") no-repeat scroll 0 0;
	color: #fff;
	padding: 10px 10px 10px 40px !important;
}

.error a,
.error .link
{
	color: #fff;
}

/*****************************************************************************
 * FADES
 *****************************************************************************/
.fade40
{
	position: relative;
	height: 40px;
	background: transparent url("images/repeatx.gif") repeat-x scroll 0 -230px;
}

/*****************************************************************************
 * CONTENT
 *****************************************************************************/
.contentSection
{
	border-top: solid 1px #cccccc;
	padding: 20px 10px 0 10px !important;
	margin-bottom: 20px !important;
}

.firstContentSection
{
	border-top: 0;
}

.contentSection p
{
	margin-bottom: 1.655em !important;
}

.contentSection em
{
	font-style: italic !important;
}

.contentSection strong
{
	font-weight: bold !important;
}

.contentSection ul.normal,
.contentSection ol.normal,
.contentSection dl.normal
{
	margin: 1em 1em 1em 2em !important;
}

.contentSection ol.normal li
{
	list-style: decimal outside;	
}

.contentSection ul.normal li
{
	list-style: disc outside;
}

/*****************************************************************************
 * GRID VIEW
 *****************************************************************************/
table.gridView
{
	width: 100%;
	margin-bottom: 10px !important;
}

table.gridView th
{
	background: #ffcc33 none repeat-x scroll 0 0;
	color: #000;
	text-align: left;
}

table.gridView th.asc, table.gridView th.desc
{
	background-color: #ffe599;
}

table.gridView th a
{
	color: #000;
	text-decoration: none;
	display: block;
}

table.gridView th a:hover
{
	color: #666;
}

table.gridView th span
{
	display: block;
	padding: 0 25px 0 5px;
	background: no-repeat 100% 50%;
}

table.gridView th.asc span
{
	background-image: url("images/grid_asc.gif");
}

table.gridView th.desc span
{
	background-image: url("images/grid_desc.gif");
}

table.gridView td
{
	vertical-align: top;
	padding: 2px 0;
}

table.gridView tr.evenItem td
{
	background-color: #e5e5e5;
}

table.gridView td span
{
	display: block;
	padding: 0 5px;
}

table.gridView td div.message
{
	background: #000000;
	text-align: center;
	color: #ffcc33;
	font-weight: bold;
	margin: 0 2px;
}

table.gridView td img.cctv
{
	width: 280px;
	height: 210px;
}

table.gridView td a.cctv
{
	display: block;
}

/* LIST - TABLE - PAGINATION */
table.gridView tr.pager td
{
	padding: 10px 0;
	text-align: right;
}

table.gridView tr.pager span
{
	padding: 0;
	display: inline;
}

table.gridView tr.pager a
{
	color: #000000;
}

table.gridView tr.pager a:hover
{
	color: #666666;
}

table.gridView tr.pager a.disabled
{
	color: #666666;
	text-decoration: none;
}


/*****************************************************************************
 * LIST GRID VIEW
 *****************************************************************************/

table.listGridView
{
	width: 100%;
	margin-bottom: 10px !important;
}

table.listGridView th
{
	background: #ffcc33 none repeat-x scroll 0 0;
	color: #000;
	text-align: left;
}

table.listGridView th.asc, table.listGridView th.desc
{
	background-color: #ffe599;
}

table.listGridView th a
{
	color: #000;
	text-decoration: none;
	display: block;
}

table.listGridView th a:hover
{
	color: #666;
}

table.listGridView th a
{
	display: block;
	padding: 0 25px 0 5px;
	background: no-repeat 100% 50%;
}

table.listGridView th.asc a
{
	background-image: url("images/grid_asc.gif");
}

table.listGridView th.desc a
{
	background-image: url("images/grid_desc.gif");
}

table.listGridView td
{
	vertical-align: top;
	padding: 2px 0;
}

table.listGridView tr.evenItem td
{
	background-color: #e5e5e5;
}

table.listGridView td span
{
	display: block;
	padding: 0 5px;
}

table.listGridView td div.message
{
	background: #000000;
	text-align: center;
	color: #ffcc33;
	font-weight: bold;
	margin: 0 2px;
}

table.listGridView td img.cctv
{
	width: 280px;
	height: 210px;
}

table.listGridView td a.cctv
{
	display: block;
}

/* LIST - TABLE - PAGINATION */
table.listGridView tr.pager td
{
	padding: 10px 0;
	text-align: right;
}

table.listGridView tr.pager span
{
	padding: 0;
	display: inline;
}

table.listGridView tr.pager a
{
	color: #000000;
}

table.listGridView tr.pager a:hover
{
	color: #666666;
}

table.listGridView tr.pager a.disabled
{
	color: #666666;
	text-decoration: none;
}

.listPagerCell
{
	text-align: right;
	width: 100%;
}

.listPagerCell span, .listPagerCell a
{
	padding: 2px !important;
}


/*****************************************************************************
 * ARROW LINK
 *****************************************************************************/
a.arrow
{
	position: relative;
	padding-right: 18px;
	background: transparent url("images/arrowanchor_off.gif") no-repeat scroll 100% 50%;
}

a.arrow:hover
{
	position: relative;
	padding-right: 18px;
	background-image: url("images/arrowanchor_over.gif");
}

/*****************************************************************************
 * SWATCHES
 *****************************************************************************/
.swatch
{
	position: relative;
	display: block;
	width: 30px;
	height: 12px;
	overflow: hidden;
}

.swatch img
{
	position: absolute;
	left: 0;
	top: 0;
}

.swatch_000000 img
{
	left: 0;
	top: 0;
}

.swatch_0000ff img
{
	left: -30px;
	top: 0;
}

.swatch_249d74 img
{
	left: -60px;
	top: 0;
}

.swatch_33cc00 img
{
	left: -90px;
	top: 0;
}

.swatch_e5a21f img
{
	left: 0;
	top: -12px;
}

.swatch_5dafe9 img
{
	left: -30px;
	top: -12px;
}

.swatch_d176a2 img
{
	left: -60px;
	top: -12px;
}

.swatch_ff0000 img
{
	left: -90px;
	top: -12px;
}

.swatch_d86419 img
{
	left: -0px;
	top: -24px;
}

.swatch_f6e349 img
{
	left: -30px;
	top: -24px;
}

.swatch_999999 img
{
	left: -60px;
	top: -24px;
}

/*****************************************************************************
 * TOOLTIPS
 *****************************************************************************/
body.tooltip
{
	background-color: #ccc;
	color: #666;
}

/* TOOLTIP - MAP *************************************************************/
.mapTooltip
{
	position: absolute;
	display: block;
	top: -10px;
	left: -10px;
	font-size: 91.4%;
	line-height: 1.81;
	z-index: 2000;
}

.mapTooltip .innerTooltip
{
	position: absolute;
	display: block;
	left: -32px;
	top: 8px;
	width: 200px;
}

.mapTooltip .topLeftTooltip,
.mapTooltip .bottomLeftTooltip
{
	left: auto !important;
	right: -31px;
}

.mapTooltip .topLeftTooltip,
.mapTooltip .topRightTooltip
{
	top: auto !important;
	bottom: 9px;
}

/** TOP, BOTTOM **/
.mapTooltip .top,
.mapTooltip .bottom
{
	display: block;
	overflow: hidden;
	background: transparent none no-repeat scroll 0 0;
	height: 20px;
}

.mapTooltip .bottomLeftTooltip .top,
.mapTooltip .bottomRightTooltip .top,
.mapTooltip .topLeftTooltip .bottom,
.mapTooltip .topRightTooltip .bottom
{
	height: 60px;
}

.mapTooltip .top
{
	background-image: url("../../images/map/tooltip/bottomright_t.png");
}

.mapTooltip .bottomLeftTooltip .top
{
	background-image: url("../../images/map/tooltip/bottomleft_t.png");
}

.mapTooltip .topLeftTooltip .top,
.mapTooltip .topRightTooltip .top
{
	background-image: url("../../images/map/tooltip/top_t.png");
}

.mapTooltip .bottom
{
	background-image: url("../../images/map/tooltip/bottom_b.png");
}

.mapTooltip .topRightTooltip .bottom
{
	background-image: url("../../images/map/tooltip/topright_b.png");
}

.mapTooltip .topLeftTooltip .bottom
{
	background-image: url("../../images/map/tooltip/topleft_b.png");
}

/*** Camera Specific **/
.mapTooltip .cameratop
{
	background-image: url("../../images/map/tooltip/camera/bottomright_t.png");
}

.mapTooltip .bottomLeftTooltip .cameratop
{
	background-image: url("../../images/map/tooltip/camera/bottomleft_t.png");
}

.mapTooltip .topLeftTooltip .cameratop,
.mapTooltip .topRightTooltip .cameratop
{
	background-image: url("../../images/map/tooltip/camera/top_t.png");
}

.mapTooltip .camerabottom
{
	background-image: url("../../images/map/tooltip/camera/bottom_b.png");
}

.mapTooltip .topRightTooltip .camerabottom
{
	background-image: url("../../images/map/tooltip/camera/topright_b.png");
}

.mapTooltip .topLeftTooltip .camerabottom
{
	background-image: url("../../images/map/tooltip/camera/topleft_b.png");
}

.mapTooltip .mid .cameradisplay,
.mapTooltip .mid .cameraloading
{
	background: transparent url("../../images/map/tooltip/camera/m.gif") repeat-y scroll 0 0 !important; 
}

/** MID **/
.mapTooltip .mid
{
	position: relative;
}

.mapTooltip .mid .display,
.mapTooltip .mid .loading
{
	display: block;
	background: transparent url("../../images/map/tooltip/m.gif") repeat-y scroll 0 0;
}

.mapTooltip .mid .display
{
	/* padding: 0 1px; */
}

.mapTooltip .mid .loading
{
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	width: 200px;
}

.mapTooltip .mid .loading span
{
	display: block;
	padding: 0 5px;
}

.mapTooltip .mid iframe
{
	margin-left: 1px;
	width: 198px;
}

.mapTooltip .close
{
	display: block;
	text-align: right;
	text-transform: uppercase;
	padding: 0 5px;
}

.loadingTooltip .mid .loading,
.loadingTooltip .mid iframe
{
	height: 1.81em;
}

.loadingTooltip .mid .loading
{
	display: block;
}

.mouseoverTooltip .close
{
	display: none !important;
}

/*** Camera Tooltip ******/

.mapTooltip .innerTooltipcamera
{
	width: 320px !important;
}

.mapTooltip .mid iframe.cameraTooltipFrame
{
    width: 318px !important;
}
/*****************************************************************************
 * HOME PAGE
 *****************************************************************************/
/* HOME PAGE - TRAFFIC MAP ***************************************************/
#HomeMap
{
	position: relative;
	height: 200px;
	background: url('images/sprites_blue.gif') no-repeat -200px 0;
}

#HomeMap a
{
	position: absolute;
	display: block;
	overflow: hidden;
	text-decoration: none;
}

#HomeMap span.image
{
	position: absolute;
	display: block;
	background: transparent none no-repeat scroll 0 0;
}

#HomeMap a span.text
{
	display: none;
}

body.enLang #HomeMap span.image
{
	width: 260px;
	height: 120px;
	background-image: url("images/homemap_en.png");
}

/* HEADER */
body.enLang #HomeMap a.header
{
	left: 0;
	top: 0;
	width: 145px;
	height: 60px;
}

body.enLang #HomeMap a.header span.image
{
	left: 0;
	top: 0;
}

body.enLang #HomeMap a.header:hover span.image
{
	left: 0;
	top: -60px;
}

/* LA */
body.enLang #HomeMap a.la
{
	left: 79px;
	top: 88px;
	width: 67px;
	height: 20px;
}

body.enLang #HomeMap a.la span.image
{
	left: -145px;
	top: 0;
}

body.enLang #HomeMap a.la:hover span.image
{
	left: -145px;
	top: -20px;
}

/* OC */
body.enLang #HomeMap a.oc
{
	left: 122px;
	top: 125px;
	width: 37px;
	height: 20px;
}

body.enLang #HomeMap a.oc span.image
{
	left: -145px;
	top: -40px;
}

body.enLang #HomeMap a.oc:hover span.image
{
	left: -145px;
	top: -60px;
}

/* RC */
body.enLang #HomeMap a.rc
{
	left: 148px;
	top: 102px;
	width: 48px;
	height: 20px;
}

body.enLang #HomeMap a.rc span.image
{
	left: -145px;
	top: -80px;
}

body.enLang #HomeMap a.rc:hover span.image
{
	left: -145px;
	top: -100px;
}

/* SB */
body.enLang #HomeMap a.sb
{
	left: 121px;
	top: 68px;
	width: 78px;
	height: 20px;
}

body.enLang #HomeMap a.sb span.image
{
	left: -182px;
	top: -40px;
}

body.enLang #HomeMap a.sb:hover span.image
{
	left: -182px;
	top: -60px;
}

/* VC */
body.enLang #HomeMap a.vc
{
	left: 1px;
	top: 65px;
	width: 78px;
	height: 20px;
}

body.enLang #HomeMap a.vc span.image
{
	left: -212px;
	top: 0;
}

body.enLang #HomeMap a.vc:hover span.image
{
	left: -212px;
	top: -20px;
}

#HomeMapLinks
{
	height: 60px;
	margin-bottom: 10px;
}

#HomeMapLinks a
{
	display: block;
	width: 200px;
	height: 30px;
	overflow: hidden;
	background: transparent none no-repeat scroll 0 0;
}

#HomeMapLinks a span
{
	display: none;
}

body.enLang #HomeMapLinks a
{
	background-image: url("images/sprites_orange_en.gif");
}

#HomeMapLinks a.cameras
{
	background-position: -200px 0;
}

#HomeMapLinks a.cameras:hover
{
	background-position: -200px -30px;
}

#HomeMapLinks a.drivingTimes
{
	background-position: -400px 0;
}

#HomeMapLinks a.drivingTimes:hover
{
	background-position: -400px -30px;
}

/* HOME PAGE - FLASH *********************************************************/
#FlashDiv
{
	height: 230px;
	overflow: hidden;
}

/* HOME PAGE - SECTION LINKS *************************************************/
.sections
{
	position: relative;
	height: 230px;
}

.sections a
{
	display: block;
	position: absolute;
	width: 200px;
	height: 115px;
	overflow: hidden;
	background: transparent none no-repeat scroll 0 0;
}

.sections a span
{
	display: none;
}

body.enLang .sections a
{
	background-image: url("images/sprites_orange_en.gif");
}

/* ALERTS */
.sections a.alertsA
{
	left: 0;
	top: 0;	
	background-position: 0 -100px;
}

.sections a.alertsA:hover
{
	background-position: 0 -215px;
}

/* FIND A TRANSIT PROVIDER */
.sections a.providerA
{
	left: 200px;
	top: 0;	
	background-position: -200px -100px;
}

.sections a.providerA:hover
{
	background-position: -200px -215px;
}

/* LIVE TRAFFIC */
.sections a.trafficA
{
	left: 400px;
	top: 0;	
	background-position: -400px -100px;
}

.sections a.trafficA:hover
{
	background-position: -400px -215px;
}

/* RAIL */
.sections a.nextTripA
{
	left: 0;
	top: 115px;	
	background-position: 0 -330px;
}

.sections a.nextTripA:hover
{
	background-position: 0 -445px;
}

/* FIND A CARPOOL / VANPOOL */
.sections a.carpoolA
{
	left: 200px;
	top: 115px;	
	background-position: -200px -330px;
}

.sections a.carpoolA:hover
{
	background-position: -200px -445px;
}

/* BIKE INFO */
.sections a.bikeA
{
	left: 400px;
	top: 115px;	
	background-position: -400px -330px;
}

.sections a.bikeA:hover
{
	background-position: -400px -445px;
}

/*****************************************************************************
 * MAP PAGE.gmnoprint {
    display: none;
}
.gmnoscreen {
    display: none;
}
 *****************************************************************************/

.mapControl
{
	height: 490px;
	background: #e5e5e5;
}

/* MAP PAGE - COUNTY CONTROL */
.mapControl .countyControl
{
	position: relative;
	width: 160px;
	height: 110px;
	overflow: hidden;
}

.mapControl .countyControl .bg
{
	position: absolute;
	left: 0;
	top: 0;
	width: 160px;
	height: 110px;
	background-color: #fff;
}

.mapControl .countyControl .bgInner
{
	position: absolute;
	left: 10px;
	top: 10px;
	width: 150px;
	height: 100px;
	background: transparent url("images/sprites_blue.gif") no-repeat scroll -400px 0;
}

.mapControl .countyControl .county
{
	position: absolute;
	cursor: pointer;
}

.mapControl .countyControl .county span
{
	display: block;
	width: 16px;
	height: 16px;
	margin: 4px;
	overflow: hidden;
	background: transparent url("images/sprites_orange_en.gif") no-repeat scroll 0 0;
}

.mapControl .countyControl .la
{
	left: 25px;
	top: 48px;
}

.mapControl .countyControl .la span
{
	background-position: -150px -36px;
}

.mapControl .countyControl .la:hover span
{
	background-position: -150px -52px;
}

.mapControl .countyControl .oc
{
	left: 30px;
	top: 78px;
}

.mapControl .countyControl .oc span
{
	background-position: -166px -36px;
}

.mapControl .countyControl .oc:hover span
{
	background-position: -166px -52px;
}

.mapControl .countyControl .rc
{
	left: 78px;
	top: 68px;
}

.mapControl .countyControl .rc span
{
	background-position: -150px -68px;
}

.mapControl .countyControl .rc:hover span
{
	background-position: -150px -84px;
}

.mapControl .countyControl .sb
{
	left: 78px;
	top: 30px;
}

.mapControl .countyControl .sb span
{
	background-position: -166px -68px;
}

.mapControl .countyControl .sb:hover span
{
	background-position: -166px -84px;
}

.mapControl .countyControl .vc
{
	left: 0px;
	top: 48px;
}

.mapControl .countyControl .vc span
{
	background-position: -182px -68px;
}

.mapControl .countyControl .vc:hover span
{
	background-position: -182px -84px;
}

div.countyControl div.trigger div
{
	position: absolute;
	right: 0;
	bottom: 0;
	width: 15px;
	height: 15px;
	overflow: hidden;
	background: transparent url("images/sprites_orange_en.gif") no-repeat scroll -183px -36px;
	cursor: pointer;
}
mapControl
div.countyControl div.trigger div.expanded
mapControl
{
	background-position: -183px -51px;
}

.mapNav
{
	height: 520px;
	position: relative;
	background-color: #ffe599 !important;
}

.mapLegend
{
	height: 40px;
	width: 95px;
	position: absolute;
	right: 10px;
	top: 40px;
	background: red url("images/mapLegend_expand.gif") no-repeat bottom;
	border-right: solid 1px #999;
}

.mapLegendEmbed
{
	height: 40px;
	width: 95px;
	position: absolute;
	right: 10px;
	top: 70px;
	background: #ffe599 url("images/mapLegend_expand.gif") no-repeat bottom;
	border-right: solid 1px #999;
}

.mapLegendEmbedSmall
{
	height: 30px;
	width: 95px;
	position: absolute;
	right: 10px;
	top:5px;
	background: #ffe599 url("images/mapLegend_expand.gif") no-repeat bottom;
	border-right: solid 1px #999;
}

.legendItems{display: none;} 

.mapLegend:hover, .mapLegendEmbed:hover, .mapLegendEmbedSmall:hover
{    
    background: #FFE599 url("images/repeatx_legend.gif") repeat-x scroll; 
    width: 180px;  
    border-bottom: solid 1px #999;
    cursor: pointer;
}

.mapLegend:hover
{
    height: 380px;   
}

.mapLegendEmbed:hover
{
    height: 365px; 
    margin-left: -85px;  
    *height: 375px; 
}

.mapLegendEmbedSmall:hover
{   
    height: 280px; 
    margin-left: -85px;   
}

.mapLegend:hover .legendItems, .mapLegendEmbed:hover .legendItems, .mapLegendEmbedSmall:hover .legendItems{display: block;} 

.mapHelpShade
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	display: none;
	z-index: 1999;
	filter: alpha(opacity=40);
	-moz-opacity: 0.4;
	-khtml-opacity: 0.4;
	opacity: 0.4;
}

.mapHelpBox
{
	position: absolute;
	width: 35em;
	height: 9.3em;
	top: 100px;
	left: 100px;
	background-color: #bbb;
	display: none;
	z-index: 2000;
	background: #cccdcd url("images/MapHelpBg.png") repeat-x scroll;
	border: 2px solid #000000;
	padding: 10px !important;
}

.mapHelpBox ul
{
	margin-left: 1em !important;
}

.mapHelpBox li
{
	list-style-type: disc !important;
	font-size: 110%;
	margin-bottom: 0.25em !important;
}

.mapHelpBox .closeButton
{
	float: right;
	height: 17px;
	width: 17px;
	cursor: pointer;
	background-color: #ff0000;
	background-image: url("images/CloseButton.png");
}

.mapHelpBox .closeButton:hover
{
	background-color: #ffaaaa;
	background-image: url("images/CloseButtonSel.png");
}

/*****************************************************************************
 * LIST PAGE
 *****************************************************************************/
.gridFilters
{
	margin-bottom: 10px !important;
}

.gridFilters select
{
	position: relative;
	margin-left: 10px;
	top: 10px;
}

.gridFilters label
{
	position: relative;
	top: 10px;
	margin-left: 10px;
}

/*****************************************************************************
 * PARTNERS PAGE
 *****************************************************************************/
div.partners div.partner
{
	border-top: solid 1px #ccc;
	height: 200px;
}

div.partners div.first
{
	border-width: 0;
}

div.partners div.logo
{
	float: left;
	padding-top: 20px;
}

div.partners div.info
{
	margin-left: 180px;
	padding-top: 20px;
}

/*****************************************************************************
 * DOWNLOAD EMBED PAGE
 *****************************************************************************/
.embedBgColour
{
	width: 16px;
	height: 16px;
	float: right;
	border: solid 1px #fff;
	cursor: pointer;
}

.embedBgColour:hover
{
	border-color: #000;
}

label.embedLabel
{
	padding: 0.2em;
}

label.embedLabel:hover
{
	background-color: #99ffff;
	padding: 0.2em;
	cursor: pointer;
}

.embedContact .required
{
	color: #ff0000;
}

.embedContact .row
{
	position: relative;
	margin-bottom: 2px;
}

.embedContact .row .label
{
	position: absolute;
	top: 0;
	left: 0;
	width: 170px;
	text-align: right;
}

.embedContact .row .input
{
	padding-left: 180px;
}

.embedContact .legend
{
	text-align: right;
}

.embedContact .name input
{
	width: 160px;
}

.embedContact .email input,
.embedContact .confirmemail input,
.embedContact .address1 input,
.embedContact .address2 input
{
	width: 220px;
}

.embedContact .postal input
{
	width: 100px;
}

.embedContact .nature,
.embedContact .topic,
.embedContact .message
{
	margin-left: 50px;
	width: 400px;
}

.embedContact .nature .label,
.embedContact .topic .label,
.embedContact .message .label
{
	/* float: none; */
	position: relative;
	width: auto;
	text-align: left;
}

.embedContact .nature .input,
.embedContact .topic .input,
.embedContact .message .input
{
	padding-left: 0;
}

.embedContact .nature select,
.embedContact .topic select,
.embedContact .message textarea
{
	width: 100%;
}

.embedContact .message textarea
{
	height: 160px;
}

.embedContact .submitted input.date
{
	width: 80px;
	margin-right: 10px;
}

.embedContact .submitted select,
.embedContact .submitted span.separator
{
	margin-right: 4px;
}

.embedContact .audio .playback
{
	display: none;
}

.embedContact .closed label
{
	margin-left: 4px;
}

.embedContact .buttons
{
	text-align: right;
}

.embedContact .buttons input
{
	margin-left: 20px;
}

.embedContact .buttons input.submit
{
	font-weight: bold;
}

/*****************************************************************************
 * HELP PAGE
 *****************************************************************************/
div.allHelp
{
	text-align: right;
}

/*****************************************************************************
 * SITEMAP PAGE
 *****************************************************************************/
ul.sitemap
{
	margin-left: 10px !important;
}

ul.sitemap ul
{
	margin-left: 2em;
}

/*****************************************************************************
 * PRINTER-FRIENDLY
 *****************************************************************************/

body.print
{
	background-color: #fff;
}

body.print #ShadowTopDiv
{
	background-image: none;
}

body.print #ShadowBottomDiv
{
	display: none;
}

body.print #PageDiv
{
	position: relative;
	width: auto;
	margin: 0;

	text-align: left;
	font-size: 93%;
	line-height: 1.655;

	background-color: Transparent;
	color: #000;
}

body.print #HeaderDiv
{
	display: none;
}

body.print #PrintHeaderDiv
{
	display: block;
	height: 210px;
	border-bottom: solid 1px #000;
}

body.print #PrintHeaderDiv .logo
{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
    height: 200px;
    background: url('images/sprites_blue.gif') no-repeat 0 0;
}

body.print #PrintHeaderDiv .logo span
{
	display: none;
}

body.print #HeaderShadowDiv
{
	display: none;
}

body.print #BodyDiv #Content3ColumnDiv
{
	float: none;
	overflow: auto;
}

body.print #BodyDiv #Content3ColumnMidDiv
{
	float: none;
	margin: 0;
	right: auto;
	width: auto;
}

body.print #BodyDiv #Content3ColumnInnerDiv
{
	float: none;
	left: auto;
	margin: 0;
	width: auto;
}

body.print #BodyDiv #ContentColumn1Of3Div
{
	display: none;
}

body.print #BodyDiv #ContentColumn2Of3Div
{
	float: none;
	right: auto;
	width: auto;
}

body.print #BodyDiv #ContentColumn2Of3InnerDiv
{
	left: auto;
	margin: 0;
	overflow: auto;
}

body.print #BodyDiv #ContentColumn3Of3Div
{
	display: none;
}

body.print #BodyDiv #Content2ColumnDiv
{
	float: none;
	overflow: auto;
	width: auto;
}

body.print #BodyDiv #Content2ColumnInnerDiv
{
	float: none;
	left: auto;
	width: auto;
}

body.print #BodyDiv #ContentColumn1Of2Div
{
	display: none;
}

body.print #BodyDiv #ContentColumn2Of2Div
{
	float: none;
	right: auto;
	width: auto;
}

body.print #BodyDiv #ContentColumn2Of2InnerDiv
{
	margin: 0;
	overflow: auto;
	right: auto;
}

body.print #FooterDiv #FooterNavTop
{
	display: none;
}

body.print #FooterDiv #FooterNavBottom
{
	display: none;
}

/*****************************************************************************
 * PRINTER-FRIENDLY - MAP
 *****************************************************************************/

body.mapPrint
{
	background-color: #fff;
}

body.mapPrint #ShadowTopDiv
{
	background-image: none;
}

body.mapPrint #ShadowBottomDiv
{
	display: none;
}

body.mapPrint #PageDiv
{
	position: relative;
	width: auto;
	margin: 0;

	text-align: left;
	font-size: 93%;
	line-height: 1.655;

	background-color: Transparent;
	color: #000;
}

body.mapPrint #HeaderDiv
{
	display: none;
}

body.mapPrint #PrintHeaderDiv
{
	display: block;
	height: 210px;
}

body.mapPrint #PrintHeaderDiv .logo
{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
    height: 200px;
    background: url('images/sprites_blue.gif') no-repeat 0 0;
}

body.mapPrint #PrintHeaderDiv .logo span
{
	display: none;
}

body.mapPrint #HeaderShadowDiv
{
	display: none;
}

body.mapPrint #BodyDiv #Content3ColumnDiv
{
	position: relative;
    clear: both;
    float: left;
    width: 100%;
	overflow: hidden;
}

body.mapPrint #BodyDiv #Content3ColumnMidDiv
{
    float: none;
    width: auto;
    height: auto;
    margin-left: 0;
    position: relative;
    right: auto;
}

body.mapPrint #BodyDiv #Content3ColumnInnerDiv
{
	float: left;
    width: 200%;
	right: 100%;
	left: auto;
	position: relative;
	margin-left: -190px; /* -r1 - r2 - r3 */
}

body.mapPrint #BodyDiv #ContentColumn1Of3Div
{
	display: none;
}

body.mapPrint #BodyDiv #ContentColumn2Of3Div
{
	float: left;
	position: relative;
	left: 50%;
	width: 50%;
}

body.mapPrint #BodyDiv #ContentColumn2Of3InnerDiv
{
	overflow: hidden;
	left: auto;
	margin: 0;
	margin-right: 10px; /* c1 */
	margin-left: 200px; /* c3 + r1 + r2 + r3 */
}

body.mapPrint #BodyDiv #ContentColumn3Of3Div
{
	float: right;
	left: 180px; /* r1 + r2 */
	width: 180px; /* r2 */
}

body.mapPrint #FooterDiv #FooterNavTop
{
	display: none;
}

body.mapPrint #FooterDiv #FooterNavBottom
{
	display: none;
}

/*****************************************************************************
 * UPLOAD FILE
 *****************************************************************************/
.upLoadContainer
{
    padding:10px !important;
    background-color:#E5E5E5;
}

.upLoadBtn
{
   
    position: relative;
    left: 73px;    
    padding:5px 0 20px 0 !important;
}


/*****************************************************************************
 * MAPS FOR MOBILE APPS
 *****************************************************************************/
.mobileMapTable td
{
    width: 210px;
    vertical-align:top;       
}

.mobileTrafficMapImg
{
    background: url(images/mobileTrafficMap.jpg) no-repeat;
    width: 200px;
    height: 164px;
    float: right;
}

.mobileParkAndRideMapImg
{
    background: url(images/mobileParkAndRideMap.jpg) no-repeat;
    width: 200px;
    height: 164px;
    float: right;
}

/*****************************************************************************
 * MY511 - CREATE ROUTE
 *****************************************************************************/
.RouteContainer table
{
    width: 100%;
   position: relative;
   margin-top: 10px;
}

table.RouteContainer td
{
     vertical-align: top;
}


.InnerRouteContainer
{
    width: 20%;
    background-color: #E5E5E5;  
    
}

.InnerRouteContainer td
{     
    padding: 5px !important;
}

.MapContainer
{
    width: 80%;
}