body {
    margin: 0;
    padding: 0;    
}

#plannerBody {/* design background guide */
    background: #000 url(../../images/bp/mocks/planner_bg.png) no-repeat 0px 0px; 
    height:1000px;
}

#branchesBody {/* design background guide */
    background: #fff url(../../images/bp/mocks/bpbg.png) no-repeat; 
    height: 1200px;
}

/* Gmap */
#mapContainer {
    /*
    position: relative;
    left: 376px;
    top: 267px;
    */
    width: 740px;
    height: 600px;   
    background-color: #00b6de;
    font-family: Verdana;      
}

#mapContainer.Directions {
    height: 828px;
}

#mapContainer.Directions #directionsPanel {
    display: block;
    height: 228px;
}

#mapTabs {
    background: #fff url(../../images/bp/tabsbg.png) repeat scroll 0 0;
    height: 40px;
    width: 740px;
    float: left;
}

#tabSep {
    width:0px;
    height:40px;
    float:left;
    background: #fff url(../../images/bp/tabsbg.png) repeat;
}

#tabSep .cnr {
    width: 10px;
    height:40px;
    float:left;
    display: block;
    /*background: #fff url(../../images/bp/cnr.gif) no-repeat 0 0;*/
}

#tabContainer a {
    display: block;
    width: 263px;
    height:30px;
    float: left;
    text-align: center;    
    background: #fff url(../../images/bp/top_tabs.png) no-repeat -263px 2px;
    text-decoration: none;   
}

#tabContainer a:hover {
    color: #ddd !important;
}

#tabContainer a span {
    display:block;
    margin:9px 0pt 0pt 19px;
    color:#7A8F00;
    text-align : left;
    font-size :11px;
    font-weight : bold;
}

#tabContainer a.Selected  {
    background-position: 0 0;    
}
#tabContainer a.Selected span {
    color: #fff !important;
}


#map {
    width:720px;
    height: 550px;
    float: left; 
    margin-left: 10px;   
}

* html #map {
    width: 700px;    
}

#rightCol {
    background-color: #ddd;
    width:240px;
    height: 620px;
    float: left;    
    overflow: auto;
}

.tooltip {
    background-color:#ffffff;
    font-size: 9px;
    border:1px #006699 solid;
}

/* Weather */
#weatherPanelContainer {
    width : 180px;
    height : 106px;
    top: 446px;
    left: 77px;  
    position: absolute;
    z-index:9999;   
}
* html #weatherPanelContainer {
   left: 100px; 
}

#weatherPanelContainer.Hide {
   top: 570px; 
}

#weatherPanel {
    font-size: 11px;
    height: 111px;   
}

#weatherPanelContainer.Hide div div {
    display: none;
}

#weatherPanelBody {
    overflow : auto;
    background-color: #fff; 
    height: 105px;   
}

#weatherPanel h3 {
    display: block;
    font-size: 13px;
    height: 16px;
    width: 180px;
    margin: 0;
    padding: 3px 0pt 0pt 10px;    
    background: transparent url(../../images/bp/weather_head.gif) no-repeat -1px -1px;
}
#weatherPanel h3 .Close 
{
    font-size: 11px;
    color: #000;
    margin-left:56px;
    text-decoration: none;
}

#measurementList {
    list-style-image: none;
	list-style-type: none;  
	margin:0;
    padding: 0px;    
} 

#measurementList li {
    display: block;
    height: 20px;
    background-color: #efefef;
    border: solid 1px #fff;    
    padding: 4px 0 0 0;
}

#measurementList li span {    
    float: left;    
}

#measurementList li .Name {
    display: block;
    width: 110px;
    margin-left: 6px;
}

#measurementList li .Deg {
    display: block;
    width: 10px;
}

#measurementList li img {
    width: 15px;
    height: 15px;
    float: left;
    margin-left: 5px;
}

#weatherPanelFooter {
    background-color: #bed62f;
    height: 20px;
    padding: 0;
    margin: 0;    
}
/* Weather End */

/* Directions */
#directionPanel 
{
    width: 230px;
    height: 407px;
    float: left;  
    overflow: auto; 
}

/* Branch Info Bubble */
div.BranchInfo {
    clear: both;
    width: 326px;
    height: 280px;   
    background-color: #fff;
    font-size: 11px;
}

#branchInfo h2 {
    position: relative;
    top: 10px;
    display: block;
    background-color: #017eb0;
    font-size: 13px;
    color: #fff;
    height: 22px;
    padding: 3px 0px 3px 10px !important; 
    line-height: 25px;
}

#branchInfo table {
     padding: 0;
     margin: 10px 0 10px 0px;
     border-spacing: 0; 
     border-collapse: collapse;    
}

#branchInfo td {
    border: solid 1px #84d9ec;  
    font-size: 10px;
    vertical-align: top; 
    margin: 0;
    padding: 0; 
}

#branchInfo td.Lbl {
    color: #017eb0;
    font-weight: bold;
    width: 100px;   
    border-left: 0px;
} 

#branchInfo td.Cnt {    
    width: 222px;   
    border-right: 0px;
}


#branchInfo td div {
    padding: 3px 0 3px 10px;
}

#dirForm {
    margin: 2px 0 0 7px;    
}

#itineraryMap #dirForm {
    display: none;
}

#dirForm a {
    font-weight: bold;    
    background-color: #bed62f;
    padding: 4px 0 0 4px;
    margin: 5px 0 0 5px;
    height: 17px;
    width: 22px;
    display: block;
    float: left;    
    cursor: hand;
    text-decoration: none;
    color: #000;
}
#dirForm a:hover {
    color: #eee;
}

#branchInfo input {       
    width: 240px;
    margin: 5px;
    font-size: 10px;
    padding:2px;
    display: block;
    float: left;
}

#branchInfo tr.Last td {
    border: none;
    margin-bottom: 5px;
}

#directionsPanel {
    display: none;    
    float: left;
    width: 710px;
    height: 218px;
    background-color: #00B6DE;
    margin-left: 10px;
    font-size: 11px;
}

#directionsPanel img {
    display: block;
    float: left;
}

#directionsPanel .Address {
    display: block;
    overflow: hidden;
    float: left;
    margin:8px;
    width:485px;
    margin:8px;
    color: #fff;
}
* html #directionsPanel .Address {
    width:470px;
}

#directionsPanel .DirLinks {
    display: block;
    float: left;
    margin-top: 8px;
    color: #bed62f;
}

#directionsPanel .DirLinks a {
    text-decoration: none;
    color: #bed62f;
}
#directionsPanel .DirLinks a:hover {
    text-decoration: underline;
}

#directionsPanelHead {
    height:35px; 
    background-color: #0080b2;
    width: 719px;
}
* html #directionsPanelHead {
     width: 700px;
}

#directionsPanelBody {
    overflow: auto;
    background-color: #fff;
    height: 145px;
    width: 709px;
}
* html #directionsPanelBody {
     width: 690px;
}

#directionsPanelBody a {
    color: #bed62f;
    font-weight: bold;
}

#directionsPanelFooter {
    height: 35px;
    width: 719px;
    background-color: #0080b2;
}
* html #directionsPanelFooter {
     width: 700px;
}

#MapFooter .cnr {
    width: 10px;
    height:10px;
    float:left;
    display: block;
    clear: both;
    background: url(../../images/bp/cnr.gif) no-repeat -28px -30px;
}

* html #MapFooter .cnr {
    background-image: none;
}

#MapFooter .right {
    background-position: -15px -30px;
    clear: none;
    float: right;
}

/* Auto Complete */
div.autocompleter-loading {
	float: left;
	clear:  right;
	/*background: #fff url(../../images/bp/loading.gif) no-repeat center;*/
	width: 20px;
	height: 16px;
}

ul.autocompleter-choices
{
	position: absolute;
	margin:	0;
	padding: 0;
	list-style: none;
	border:	1px solid #eee;
	background-color: white;
	border-right-color:	#ddd;
	border-bottom-color: #ddd;
	text-align: left;
	z-index: 50;
}

ul.autocompleter-choices li {
	position: relative;
	padding: 0.1em 1.5em 0.1em 1em;
	cursor:	pointer;
	font-weight: normal;
	font-size: 11px;
	font-family: Verdana;
}

ul.autocompleter-choices li.autocompleter-selected {
	background-color: #444;
	color: #fff;
}

ul.autocompleter-choices span.autocompleter-queried {
	font-weight: bold;
}

ul.autocompleter-choices li.autocompleter-selected span.autocompleter-queried {
	color: #9FCFFF;
}
/* Auto Complete Ends */

#itineraryPlanner {
    font-family: Verdana;
}

#itineraryPlanner ul {
    padding: 0;
    margin: 0;
}

/* planner tabs style */
#plannerTabs {
    position: absolute;
    left: 760px;
    top:260px;
    width: 430px;
    font-size: 11px;    
}
#plannerTabs span {
    display: block;
    width: 178px;
    height:32px;
    float: left;
    text-align: center;    
    background: #fff url(../../images/bp/planner_tabs.png) no-repeat -1px 0;
    
}
#plannerTabs span.Selected {
    background-position: -180px 0;
}
#plannerTabs span a {
    position:relative;
    top:12px;    
    text-decoration: none;
    color: #7a8f00;
    font-weight: bold;
}
#plannerTabs span.Selected a {
    color: #fff;    
}

#plannerTabs span #clearLink {
    text-decoration: underline;
    margin-left:28px;
    font-size: 10px;
    font-weight: normal;
}

#itineraryMapContainer {
    position: absolute;
    top: 304px;
    left: 372px;
    width: 524px;
    height: 548px;
    overflow: hidden;   
}

#itineraryMap {
    width: 524px;
    height: 548px;
}

#itineraryPlanner #branchInfo tr.Last {
    display: none;
}

#routesSelector {
    width: 200px;
    height: 360px;
    background-color: #fff;
    position: absolute;
    left: 159px;
    top: 303px;
}

/* routes selector */
#itineraryPlanner div h2 {
    display: block;
    height: 30px;
    padding: 0;
    margin:0;        
}

#itineraryPlanner div h2 big {
    color: #666;
    font-size: 15px;
    background-color: #bed62f;
    display: block;
    float: left;
    height: 30px;
    width: 22px;
    padding-left: 8px;
    line-height: 26px;
    border: solid 1px #fff;
}
#itineraryPlanner div h2 small {
    color: #fff;    
    font-size: 12px;
    font-weight: bold;
    background-color: #828282;
    display: block;
    float: left;
    height: 30px;
    width: 161px;
    border: solid 1px #fff;
    line-height: 26px;
    padding-left: 5px;
}

#routesSelector.Disabled div.Instructions b {
    color: #828282;
}

#routesSelector.Disabled h2 small {
    background-color: #C2C2C2;
}

#itineraryPlanner div .Instructions {
   font-size: 10px;
   padding: 7px;
   background-color: #eeeded;   
}

#routesSelector #routesCollection {
    width: 200px;
    height: 258px;
    background-color: #fff;
    overflow: auto;    
}

#routesSelector li {
    list-style: none;
    display: block;
    float: left;
    border-bottom: solid 1px #84d9ec;
    padding: 3px 0 3px 0;
    height: 30px;
}

#routesSelector li p {
    margin: 0px;
}

#routesSelector ul {
    padding: 0;
    margin: 0;
     font-size: 10px;
}

#routesSelector input {
    float: left;
    clear: left;
}

#routesSelector label {
    display: block;
    float: left;
    width: 160px;
    padding-top: 3px;
}

#routesSelector label.Disabled {
    color: #999;
}

#layersCollection {
    background-color:#FFFFFF;
    height:155px;
    overflow:hidden;
    width:200px;
}

#layersCollection li {
    height: 20px;
}

#layersCollection label {
    padding: 3px 0 0 0;
    display: block;
}

#itineraryMapContainer #weatherPanelContainer {
    top: 404px !important;
}

#itineraryMapContainer #weatherPanelContainer.Hide {
    top: 529px !important;
}

#workBook {
    background: #EEEDED url(../../images/bp/empty_favs_bg.png) no-repeat 1px 104px;    
    height:519px;
    left:907px;
    position:absolute;
    top:303px;
    width:200px;
}

#workBook div.Instructions {
    display: none;
}

#workBook.Empty .Instructions {
    display: block;
}

#RouteListsContainer {
    height: 330px;
    width: 199px;    
    overflow-y: scroll;
    float: left;
}

#markerListcontainer {
    height: 125px;
    width: 200px;
    overflow-y: scroll;
    float: left;
}

#workBook.Empty #RouteListsContainer {
    height: 375px;
}

#selectedRouteList, #selectedMarkerList {
    margin: 0;
    padding: 0;
    font-size: 10px;     
}

#selectedRouteList li, #selectedMarkerList li {
    list-style-image: none;
	list-style-type: none;  
	margin:0;
    padding: 0px;    
}

#selectedRouteList li .Close {
    cursor: pointer;
    display: block;
    float: left;
    height: 10px;
    width: 10px;
    margin: 3px;
    text-indent: 1000em;
    overflow: hidden;
    background: transparent url(../../images/bp/collapse.gif) no-repeat 0 0;
}

div.Collapse .Head .Close {
    background-position: 0 -11px !important;
}

div.Collapse .Head span {
    font-weight: normal !important;
}

#selectedRouteList li .Head {
    border-bottom: solid 1px #fff;
    background-color: #EEEDED;
    float:left;
}

#selectedRouteList li .Head span {    
    float: left;
    display: block;
    height: 40px;
    width: 150px;
    margin: 3px 0 0 3px;
    font-weight: bold;
}

#selectedRouteList li .Remove {    
    cursor: pointer;
    float: left;
    display: block;
    height: 40px;
    width: 10px;
    text-indent: -1000em;
    overflow: hidden;
    margin-top: 3px;
    background: transparent url(../../images/bp/collapse.gif) no-repeat 0 -51px;
}

#selectedMarkerList li .Close {
    cursor: pointer;
    display: block;
    float: left;
    height: 10px;
    width: 10px;
    margin: 3px;
    text-indent: 1000em;
    overflow: hidden;
    background: transparent url(../../images/bp/collapse.gif) no-repeat 0 0;
}

#selectedMarkerList li .Head span {
    background-color: #eeeded;
    font-weight: bold;
    height: 20px;
    float: left;
    display: block;
    margin: 3px 0 0 3px;
    width: 150px;
} 

#selectedMarkerList li .Icon {
    cursor: pointer;
    float: left;
    display: block;
    height: 20px;
    width: 10px;
    text-indent: -1000em;
    overflow: hidden;
    margin-top: 3px;
    background: transparent url(../../images/bp/IconsSmall.png) no-repeat scroll 0 0;
}

#selectedMarkerList li #marker_cat_1_3 .Icon{
   background-position: 0 -23px
}
#selectedMarkerList li #marker_cat_1_4 .Icon{
   background-position: 0 -85px
}
#selectedMarkerList li #marker_cat_1_5 .Icon{
   background-position: 0 -43px
}
#selectedMarkerList li #marker_cat_1_6 .Icon{
   background-position: 0 -66px
}

#selectedRouteList div.Collapse .Segment,#selectedMarkerList div.Collapse .Segment {
    display: none;
}

#selectedRouteList .Segment {
    background-color: #fff;
    float:left;
    width:180px;
    border-bottom: solid 1px #84d9ec;
}

#selectedMarkerList .Segment small {    
    width: 156px;
    background-color: #fff;
    color: #000;
    display: block;
    float: left;
    clear:both;
    padding: 2px 0 2px 25px;    
    
}

#selectedRouteList .Segment small {
    width: 150px;
    background-color: #fff;
    color: #000;
    display: block;
    float: left;
    clear:both;
    padding: 2px 0 0 25px;    
}


#workBook .Markers ul {
    padding: 0;
    margin: 0;
}

#selectedMarkerList div.MarkerCat {
    border-top: 1px solid #FFFFFF;
    float: left;
}

#selectedRouteList .Markers li .Fav {    
    background: #fff url(../../images/bp/ItinMarkers.png) no-repeat 25px 0; 
    padding-left:36px;
    width:140px;    
}

#layersCollection label {
    background: #fff url(../../images/bp/ItinMarkers.png) no-repeat 25px 0;
    width: 160px;
    height: 12px;
}

#layersCollection span.Mag {
    display: none;
    background: #fff url(../../images/bp/icons/zoom.png) no-repeat 0 0;
    height: 20px;
    width: 20px;
    margin-left:4px;
}

#layersCollection span {
    float: left;
    clear: none;
}


#layersCollection span.Zoom {
    display: block;
}

/* move into generated context/Add additional layers here.. */
#selectedRouteList .Markers ul li .Mrk_1_5 {
    background-position: 25px -26px;
}

#layersCollection label.Mrk_1_2 {
   background-position: 150px -53px;
}

#layersCollection label.Mrk_1_3 {
   background-position: 152px 3px;
}

#layersCollection label.Mrk_1_4 {
   background-position: 152px -11px;
}

#layersCollection label.Mrk_1_5 {
   background-position: 152px -26px;  
}

#layersCollection label.Mrk_1_6 {
   background-position: 152px -39px;  
}

/* Bubble */
.MarkerBubble {
    width: 240px;
    height: 300px;
}

.MarkerBubble h3 {
    background-color: #017eb0;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    display: block;    
    padding: 6px 1px 6px 3px;
}    

.MarkerBubble .Thumb {
    float:right;
    margin:0 10px 4px 0pt;
    padding:5px;    
}

.MarkerBubble .BubbleBody {
    height:160px;
    margin-top:5px;
    width:240px;
    font-size: 10px;
}

.MarkerBubble .BubbleContent {
    overflow: auto;
    height: 228px;
}

.MarkerBubble a, #emailAndPrint .Button {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 11px;
    margin: 10px 5px 1px 39px;
    display: block;
    width: 150px;
    line-height: 22px;
    background-color: #bed62f;
    text-align: center;
}

#emailAndPrint {
    background-color: #84d9ec;
    padding-top: 5px;
    width: 200px;
    height: 30px;
    float: left;
}

#emailAndPrint .Button {
    margin: 10px 5px 1px 26px;
    width: 96px !important;
    float: left;
    margin: 3px 2px 0 0;
    font-size: 10px;
    border: 1px solid #759f76;
}

#linkToItinerary {
    font-family: Verdana;
    font-size: 11px;
}

#linkToItinerary span {
    margin: 10px 0 10px 5px;
    display: block;
}

#linkToItinerary .LinkURL {
    width: 300px;
    margin-left: 5px;
}

.MarkerBubble #routeSelectorDiv select {
     width: 200px;
     margin: 10px 0 0 15px;
}

.MarkerBubble #routeSelectorDiv.Hidden select {
    display: none;
}
.MarkerBubble #routeSelectorDiv.Hidden span {
    display: block;
    font-size: 11px;
    color: #f00;
    margin: 5px;
}
.MarkerBubble #routeSelectorDiv span {
    display: none;
}

.MarkerBubble a:hover {
    background-color: #788d01;
    color: #fff;    
}

/* dump table */
div.DumpStation table {
     padding: 0;
     margin: 10px 0 10px 0px;
     border-spacing: 0; 
     border-collapse: collapse;    
}

div.DumpStation td {
    border: solid 1px #84d9ec;  
    font-size: 10px;
    vertical-align: top; 
    margin: 0;
    padding: 0; 
}

div.DumpStation td.Lbl {
    color: #017eb0;
    font-weight: bold;
    width: 100px;   
    border-left: 0px;
    padding: 4px;
} 

div.DumpStation td.Cnt {    
    width: 222px;
    padding: 4px;   
    border-right: 0px;
}
/* dump table */



/* moodalbox CSS */
div#mb_overlay {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #000;
    cursor: pointer;
}

div#mb_center, div#mb_bottom {
    position: absolute;
    left: 50%;
    overflow: hidden;
    background-color: #DDD;
}

div#mb_center {
    background-color: #FFF;
}

div#mb_contents {
    width: 400px;
    height: 400px;
    border: 10px solid #DDD;
    overflow: auto;
    background-color: #FFF;
    visibility: hidden;
}

.mb_loading {
    background: #DDD url(../../images/bp/loading.gif) no-repeat center center;
}

#mb_error {
    font-size: 1.2em;
    color: #CD0000;
    font-weight: bold;
    text-align: center;
    padding: 0.5em;
    font-family: Verdana, Helvetica, sans-serif;
}

#mb_error em {
    font-size: 0.8em;
}

div#mb_bottom {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 10px;
    color: #666;
    line-height: 1.4em;
    text-align: left;
    border: 10px solid #DDD;
    border-top-style: none;
}

a#mb_close_link {
    display: block;
    float: right;
    width: 66px;
    height: 22px;
    background: transparent url(../../images/bp/closelabel.gif) no-repeat center;
    margin: 5px 0;
}

div#mb_caption {
    margin-right: 71px;
}
/* moodalbox CSS ends */