/*Here we list the global properties for the Connect application. */

/* Specify the default font properties */
html, body
{
/* Arial is the default. If unavailable then O/S will use the next defined font. */
    font-family:arial,helvetica,sans-serif !important;
    font-size:13px;
    font-weight:normal;
    color:#000000; /* black text */
}

/****** Banner Style ******/
/* This section configures the banner images to be used at the top of the Connect webpage. */
#banner
{
    background-color: #ffffff;
    width: 100%; 
    height: 68px;
    border-top:0px solid #00549e;
    position:relative;
}

#companyLogo,
#productLogo
{
    height: 62px;
    background-repeat: no-repeat;
} 

#companyLogo
{
    background-image: url(https://connect.colchester.gov.uk/images/colchester.png);
    width:209px;
    float:left;
} 

#productLogo
{
    background-image: url(https://connect.colchester.gov.uk/images/cmaps.png);
    width:248px; 
    float: right;
} 

/*****  Busy icon used on Map *****/
#busyIcon
{
    margin-top:25px;
    background-image: url(../images/busyIcon.gif);
    background-repeat:no-repeat;
    width:32px !important;
    height:32px !important;
} 

/*****  House icon used on Map *****/
.mapMarker
{
    background-image: url(../images/home.png);
    background-repeat: no-repeat;
}

/***** House icon displayed with Address Results *****/
.resultMarker
{
    background-image: url(../images/homeSmall.gif);
    background-repeat: no-repeat;
    background-position:7px;
}
/***** Link Icon displayed with Info Callout *****/
.infoLink
{
    background-image: url(../images/infoLink.png);
    background-repeat: no-repeat;
    background-position:left;
}
/***** Mailto Icon displayed with Info Callout *****/
.infoMail
{
    background-image: url(../images/infoMail.png);
    background-repeat: no-repeat;
    background-position:left;
}

/****** Button  Style ******/

/* The shadow for the map's button */
div.dijitToggleButton
{
    height:27px;
    padding-right:2px;
    padding-top:0;
    width:auto;
    background:transparent url(../widgets/stratus/img/buttonShadow.png) repeat 2px 1px;}

/* The active state of a standard button */
.dijitButtonNode
{
    font-size:8px;
    color:#fff;
    background-image:url(../widgets/stratus/img/buttonActive.png);
    background-repeat:repeat;
    border:1px solid #fff!important;}

.dijitToggleButtonChecked .dijitButtonNode
{
    font-size:8px;
    font-weight:bold;
    color:#fff!important;
    background-image:url(../widgets/stratus/img/buttonActive.png)!important;
    background-repeat:repeat;}

/* hover state for an active button */
.dijitToggleButtonCheckedHover .dijitButtonNode,.dijitButtonNode:hover
{
    color:#fff!important;
    background-image:url(../widgets/stratus/img/buttonHover.png)!important;}

.dijitToggleButton .dijitButtonNode
{
    color:#fff;
    background-image:url(../widgets/stratus/img/buttonDisabled.png);}

.dijitToggleButtonHover .dijitButtonNode
{
    background-image:url(../widgets/stratus/img/buttonHover.png)!important;}



/****** Font Styles ******/
/* Common font styling which can be applied throughout the Connect application. */

/******Heavy Font Style *****/
/* Currently taking default font properties and adding bold weight. Used in infoTableHeading. */
.heavyFont 
{
    font-weight:bold;
}

/******Light Font Style *****/
/* Used in infoKey.*/
.lightFont
{
    color:#666666; /* grey text */
    font-size:0.7em;
    font-family:verdana;
    padding:2px 0 0 0;
}

/****** Link Style ******/
/* Style for any search results row. */

/* Style for any active link or link under hover. */
.normalCell a
{
    color:#3366CC; /* this is overriding the default hyperlink blue colouring. */
    font-size:11px;
    font-family:Verdana;
}

.normalCell a:hover,
.normalCell a:active 
{
    text-decoration : underline;
}

/****** List Style ******/

/* Lists within Connect are displayed with two alternating colours between adjacent rows. */
.normalListColor,
.highlightListColor 
{
    /*height:24px;  Removed as it causes overlaping if the layer name is longer than one line and  overlaps elements under child elements sections */
}

.normalListColor
{
    background-color: #F0F0F0; /* light grey */
}
.highlightListColor 
{
    background-color: #ffffff; /* white */
}

/****** Map Name Style******/
/* Used for the Map Name Headers in the Map Legend and the Business Data Info Callout. */

#legendContainer 
{
    margin:4px 0 0 0;
    border-top:3px solid #9999ff;
    border-bottom:none;
}

#legendContainer #legend .leftTitle
{
    padding:3px 0 3px 3px;
    height:auto;
}

#legendContainer .panelHeader .panelHeaderLabel
{
    padding:4px 0 4px 7px;
    font-weight:bold;
    height:auto;
}

#legendContainer #legend  .master
{
   background-color:#ccccff!important;
   color:#000000!important;
   height:24px;
   margin:0 0 1px 0;
}

#legendContainer #legend .master:hover
{
   background-color:#9999ff!important;
   color:#000000!important;
}

/* Styling for positioning Map Legend icon */
#legendContainer #legend img
{
   margin:2px 0 0 7px;
}

/***** Menu Style *****/
/* Style for right click context menus (such as the Zoom Context Menu) 
These should probably be named something different than the dijit name. */
/* Individual Menu Items */
.dijitMenuItem
{
    color:#000000; /* black text */
    background-color:#ffffff; /* white */
}

/* Menu item mouse hover*/
.dijitMenuItemHover
{
    font-weight:bold;
    color: #ffffff; /* white text */
    background-color:#6699ff !important; /* bright blue */
}




/***** Zoom Slider *****/

/*  Image for Zoom Slider background */
.zoomSliderControl
{
    background-image: url(../images/zoomslider/zoomBackground.png);  
}

/*  Image for Zoom Slider Handle, active and hover states */
.dijitSliderImageHandle
{
    background-image: url(../images/zoomslider/zoomSelector.png);
}
.dijitSliderImageHandle:hover
{
    background-image: url(../images/zoomslider/zoomSelectorHover.png);
}
/*  Image for Zoom In (+), active and hover states */
.dijitSliderIncrementIconV
{
    background-image: url(../images/zoomslider/zoomPlus.png);
}
.dijitSliderIncrementIconV:hover
{
    background-image: url(../images/zoomslider/zoomPlusHover.png);
}
/*  Image for Zoom Out (-), active and hover states */
.dijitSliderDecrementIconV
{
    background-image: url(../images/zoomslider/zoomMinus.png);
}
.dijitSliderDecrementIconV:hover
{
    background-image: url(../images/zoomslider/zoomMinusHover.png);
}

/***** Zoom Slider Annotation *****/
.dijitRuleLabel
{
   background-color: #E2E3E4;
    opacity: 0.7;
}


/******Accordion Style******/

/* Style used for active accordion headers (collapsable title bars) */
div.panelHeader,
div.locatorContainerPanelHeader,
div.cachedAddressContainerPanelHeader,
div.findNearestContainerPanelHeader
{
    background-color:#ccccff;
}

/*  Style used for accordion headers when mouse hover */
div.panelHeader:Hover,
div.locatorContainerPanelHeader:Hover,
div.cachedAddressContainerPanelHeader:Hover,
div.findNearestContainerPanelHeader:Hover
{
    background-color:#9999ff;
}

/* Icon style of the accordion collapse and expand */
.treeExpandMinus
{
    background-image:url('../images/treeExpand_minus.gif')!important;
}
.treeExpandPlus
{
    background-image:url('../images/treeExpand_plus.gif')!important;
}

/* Icon style of the accordion collapse and expand in hover state */
.treeExpandMinusHover
{
    background-image:url('../images/treeExpand_minusHover.gif')!important;
}
.treeExpandPlusHover
{
    background-image:url('../images/treeExpand_plusHover.gif')!important;
}

/***** Copyright Control *****/
.copyrightControl
{
    background-color:#ffffff; /* white */
    opacity: 0.7; /* This applies to the whole copyright control - text and background. */
}
/******* CSS Style For Map Expander Graphic *****/
#slider div.sliderIconCollapse
{
    background-image: url("../images/arrowLeft.png");
}
div.sliderIconCollapseHover
{
    background-image: url("../images/arrowLeftHover.png");
}

div.sliderIconExpandHover
{
    background-image: url("../images/arrowRightHover.png");
}

#slider div.sliderIconExpand
{
    background-image: url("../images/arrowRight.png");
}
/* Used to style the arrow on the slider. This is used when it is expanded */
#slider button.sliderDefault:hover
{
background-color:#B3DBEE;
}

/* Used to style the arrow on the slider. This is used when it is collapsed*/
#slider button.sliderCollapse:hover
{
    background-image: url("../images/sliderHover.gif");
}

/* Set the z-index of slider button*/
#slider
{
   z-index:1001;
}
/* Style for cancale button on dialog*/
#cancelButton
{
   margin-top:10px;
}
#dijit_Dialog_0_title
{
   margin-left:-10px;
}

/* Pan control styling */
/* This class is responsible for the panControl motif image*/
.panCenter
{
    background-image: url("../images/compass.png"); 
}

/*  This class is for the North button in pan control when there is a mouse hover */
.panControl .north:hover
{
    background-image: url("../images/panNorthHover.png");
}
/*  This class is for the South button in pan control when there is a mouse hover */
.panControl .south:hover
{
    background-image: url("../images/panSouthHover.png");
}
/*  This class is for the East button in pan control when there is a mouse hover */
.panControl .east:hover
{
    background-image: url("../images/panEastHover.png");
}
/*  This class is for the West button in pan control when there is a mouse hover */
.panControl .west:hover
{
    background-image: url("../images/panWestHover.png");
}
/*  This class is for the symbol image in result control */
.resultRowImage
{
    margin-top:2px;
    margin-left:2px;
}

/* This class is for the description style in result control */
.resultDescriptionLabel
{
    margin-left:4px;
}