/* colors:

    #f6f39f - lt yellow from logo
    #c5e8ef - lt blue from logo
    #d7e5b0 - lt yellow-green from logo
    #4C3C1B - header font brown
*/

html, body {
    height:100%;
}
body
{
    margin: 0;
    overflow:hidden;
}


/* map layout */
#map_header {
    height:143px;
    position:relative;
    border-bottom:1px solid #000;
}

#map_container
{
    overflow: hidden;
    height:100%;
    background-color:#fff;
    
}
#map_left
{
    width: 370px;
    overflow: auto;
    float: left;
    border: 1px solid #ccc;
    border-left: 0;
    border-bottom:0;
    border:0;
    background-color:#ffffff;
    height:100%;
}
#map_gutter
{
    margin: 10px;
    position: relative;
}

#map_right {
    float: left;
    height:100%;
    
    position:relative;
}

#map_viewport
{
    overflow: hidden;
    /*overflow:scroll;*/
    height:100%;
    position: absolute !important;
    border: 1px solid #aaa;
    /*cursor: url(/chartingchange/layout/images/grab.cur), pointer;*/
    min-width:200px;
    max-width:1650px;
    min-height:200px;
    max-height:1500px;
    border-right:1px solid #999;
}

#map_drag_area
{
    background-color: #000;
    background: transparent url(/chartingchange/layout/images/drag_area.png) repeat;
}
#map_draggable
{
    position: absolute;
}
#map_wrapper
{
    width: 2767px; 
    height: 3835px;
    margin: 0;
    padding: 0;
    position: relative;
    overflow:visible !important;
}
/*.map_tiles
{
    width:1650px;
    height:1500px;
    float:left;
    background: url(/chartingchange/layout/images/tile_placeholder.png) repeat;
    border:0;
    margin:0;
    padding:0;
}*/
.map_tiles 
{
    border:0 !important;
    margin:0 !important;
    padding:0 !important;
}
.map_tiles img
{
    float: left;
    width:330px;
    height:300px;
    /*width:20%;
    height:20%;*/
    background: url(/chartingchange/layout/images/tile_placeholder.png) repeat;
}
.map_tiles img.thin 
{
    width:127px;
}
.map_tiles img.short 
{
    height:235px;
}

/*
.thin_sector {
    width:1117px;
}
.thin_sector .thin {
    width:127px;
}
.short_sector {
    height:1135px;
}
.short_sector .short {
    height:235px;
}
*/

/* tile width adjustments */
/*.five_columns 
{
    width:1650px;
}
.five_columns img 
{
    width:20%;
}
.four_columns 
{
    width: 1320px;
}
.four_columns img 
{
    width:25%;
}
.three_columns 
{
    width: 990px;
}
.three_columns img
{   
    width:33.333%;
}
.one_column 
{
    width:330px;
}
.one_column img 
{
    width:100%;
}
.thin_column 
{
    width: 126px;
}

.five_rows 
{
    height:1500px;
}
.five_rows img 
{
    height:20%;
}
.four_rows
{
    height:1200px;
}
.four_rows img 
{
    height:25%;
}
.three_rows 
{
    height:900px;
}
.three_rows img 
{
    height:33.333%;
}
.two_rows 
{
    height:600px;
}
.two_rows img 
{
    height:50%;
}
.one_row 
{
    height:300px;
}
.one_row img 
{
    height:100%;
}
.short_row 
{
    height:234px;
}
*/





/* pins */
.pointer
{
    display: block;
    position: absolute;
    height: 29px;
    width: 25px;
    z-index: 500;
    line-height: 22px;
    overflow: hidden;
    padding-left: 3px;
    background: transparent url(/chartingchange/layout/images/pointer_orange.gif) no-repeat scroll 1px 0;
    font-family: tahoma, Sans-Serif;
    font-size: 10px;
    letter-spacing: -0.1em;
    font-weight: bold;
    color: #ffffff; 
    cursor: pointer;
    text-align:center;
    padding-left:0;
    width:26px;
}
.pointer_hover,.pointer:hover 
{
    z-index: 1000 !important;
    height: 35px;
    width: 29px;
    padding-left: 5px;
    margin: -2px 0 0 -2px;
    line-height: 28px;
    background: transparent url(/chartingchange/layout/images/pointer_active.gif) no-repeat scroll 1px 0 !important;
    color: #00156E;
    
    text-align:center;
    padding-left:0;
    width:30px;
}

/* pin dialog */
#dialog
{
    position: absolute;
    z-index: 1000;
    padding: 1px;
    width: 300px;
    overflow: hidden;
    color: #eee;
    background: #000 url(/chartingchange/layout/images/dialog_back.png) repeat-x;
    font-family: tahoma, Sans-Serif;
    font-size: 13px;
    cursor:default;
}
#dialog .inner
{
    border: 1px solid #eee;
    padding: 10px 20px 0 20px;
    overflow: hidden;
    clear: both;
    
    position:relative;
}
#dialog .inner div
{
    float: left;
}
#dialog .exit 
{
    position:absolute;
    right:3px;
    top:3px;
}
#dialog .exit a 
{
    cursor:pointer;
}
#dialog .exit img 
{
    border:0;
}
#dialog .name
{
    width: 100%;
    margin: 0 0 5px 0;
    font-weight: bold;
    font-size: 1.2em;
}
#dialog .address
{
    width: 66%;
    color: #eee;
    color: #ddd;
    font-family: Arial, Helvetica, Sans-Serif;
}
#dialog .date
{
    width: 33%;
    color: #c5e8ef;
    font-family: Arial, Helvetica, Sans-Serif;
}
#dialog .descr
{
    width: 100%;
    margin: 15px 0;
    line-height: 1.2em;
}
#dialog .image
{
    width: 100%;
    margin: 15px 0;
    text-align: center;
}
#dialog .image img
{
    width: 254px;
    padding: 1px;
    border: solid;
    border-color: #dddddd #aaaaaa #aaaaaa #dddddd;
    border-width: 1px;
    background-color: #ffffff;
}
#dialog .links
{
    width: 258px;
    margin: 10px 0 0 -19px;
    padding: 10px 20px;
    border-top: 1px solid #666;
    color: #666;
    line-height: 1.3em;
    background: #333 url(/chartingchange/layout/images/dialog_back.png) repeat-x;
    overflow: auto;
}
#dialog .links a
{
    font-weight: normal;
    padding: 0 8px 0 11px;
    background: url(/chartingchange/layout/images/bullet_gray.png) no-repeat -5px 0;
    color: #d7e5b0;
    float: left;
}
#dialog .links a:hover
{
    color: #aaa;
}
#dialog a.streetview
{
    background: url(/chartingchange/layout/images/pegman.png) no-repeat -3px 1px;
    margin-left: -2px;
    padding: 0 0 5px 13px;
    line-height: 22px;
    width: 100%;
}
#dialog .clear {
    clear:both;
}

/* map left gutter */
.gutter {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 0.8em;
}
.gutter_header
{
    background-color: #eee;
    margin: -16px -10px 10px -10px;
    border-bottom: 1px solid #4C3C1B;
    padding: 6px 6px 6px 8px;
}
.gutter_header h2
{
    font-family: georgia, serif;
}
.gutter_header p {
    margin: 15px 15px 0 15px;
}
#blurb
{
    height: 48px;
    overflow: hidden;
    line-height:16px;
}
#blurb_toggle
{
    padding-left: 15px;
    font-size: 0.8em;
}
.gutter h2, .gutter h4
{
    display: inline;
}
.gutter ul
{
    list-style: none none outside;
    margin: 0;
    padding: 0;
}
.gutter li
{
    margin: 0 0 6px;
    padding: 3px 0 3px 40px;
    position: relative;
}
.gutter li li
{
    display: inline;
    padding-left: 16px;
}
.gutter li.first
{
    padding-left: 0;
}
.gutter .pointer
{
    left: 0;
    top: 7px;
}
.gutter_item
{
    position: relative;
}
#gutter_search {
    font-family:Verdana, Sans-Serif;
}
#gutter_searchbox {
    width:70%;
}

/* map navigation */
#map_compass {
    width:0;
    height:0;
    background-color:Transparent;
    color:#ffffff;
    font-family:Verdana, Sans-Serif;
    font-size:11px;
    z-index:9000;
    
}
.translucent {
    background-color:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /*first!*/
    filter: alpha(opacity=60);  /*second! */
    opacity:0.6;
}

.xaxis {
    position:absolute;
    top:0;
    left:0;
    width:120px;
    height:30px;
    line-height:30px;
    padding-left:85px;
    white-space:nowrap;
    cursor:auto;
    z-index:2000;
}
ul.map_nav {
    margin:0;
    padding:0;
    
}
.map_nav li {
    list-style-type:none;
    display: -moz-inline-box; /* FF 2 */
    display:inline-block;
    *display: inline; /* IE 7 */
    padding:0 4px;
    cursor:pointer;
    border:1px solid transparent;
    height:18px;
    line-height:18px;
}
.map_nav li:hover {
    border:1px solid #ccc;
    color:#fff;
}
.map_nav li.first {
    
}
.map_nav li.dropdown {
    padding-right:18px;
    background: url(/chartingchange/layout/images/bullet_arrow_down.png) no-repeat 100% 50%;
    
}
#map_help, #map_choices, #zoom_msg {
    position:absolute;
    padding:6px;
    background-color: #fff;
    font-size:13px;
    color:#222;
    border:1px solid #4c3c1b;
    display:none;
}
#map_help {
    top:29px;
    left:90px;
    white-space:normal;
    line-height:normal;
    width:400px;
    padding:15px;
}
#map_help h4, #maphelp p, #maphelp ul {
    margin:0 0 5px 0;
    padding:0;
    
}


#map_choices {
    top:29px;
    left:129px;
}
#zoom_msg {
    top:35px;
    left:65px;
    line-height:30px;
    height:30px;
    white-space:nowrap;
    background: #fff url(/chartingchange/layout/images/info.png) no-repeat 5px 50%;
    padding-left:48px;
}

#map_choices ul {
    margin:10px;
    padding:0;
}

#map_choices li {
    list-style-type:none;
    display:block;
    margin: 6px 0;
    height:36px;
    padding:0;
}
#map_choices a {
    display:block;
    padding:8px 10px 8px 30px;
    padding:2px 10px 2px 30px;
    background: #eee url(/chartingchange/layout/images/map.png) no-repeat 6px 50%;
    border:1px solid #ddd;   
    text-decoration:none;
    color:#222;
}

#map_choices a:hover{
    color:#fff;
    background-color:#4C3C1B;
    border:1px solid #4C3C1B;
}

#map_choices li.first {
    margin-top:0;
}
#map_choices li.last {
    margin-bottom:0;
}

.yaxis {
    position:absolute;
    top:30px;
    left:0;
    width:30px;
    height:150px;
    padding-top:72px;
    text-align:center;
    cursor:auto;
    z-index:2000;
}
.yaxis span.zoomIn, .yaxis span.zoomOut 
{
    font-size:13px;
    font-family:courier new, monospace;
    z-index:2500;
    width:12px;
    height:12px;
    line-height:12px;
    text-align:center;
    cursor:pointer;
    position:absolute;
    left:9px;
}
.yaxis span.zoomIn:hover, .yaxis span.zoomOut:hover
{
    border:1px solid #fff;
    -moz-border-radius:2px;
    left:8px;
}
.yaxis span.zoomIn {
    top:47px;
}
.yaxis span.zoomOut {
    top:203px;
}

#zoom {
    left:9px;
}

.compass {
    width:65px;
    height:65px;
    background:transparent url(/chartingchange/layout/images/compass.png) no-repeat;
    position:absolute;
    top:11px;
    left:11px;
    cursor:pointer;
    z-index:2000;
}
.compass div {
    width:20px;
    height:20px;
    float:left;
    vertical-align:middle;
    line-height:20px;
    text-align:center;
    font-size:10px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
#top_center {
    background-image: url(/chartingchange/layout/images/chevron_up.gif);
}
#mid_left {
   background-image: url(/chartingchange/layout/images/chevron_left.gif);
}
#mid_right {
    background-image: url(/chartingchange/layout/images/chevron_right.gif);
}
#btm_center {
    background-image: url(/chartingchange/layout/images/chevron_down.gif);

}