/*
 * Date: August 28, 2012
 *
 * sfPanel.css
 * CSS stylesheet controlling the storefinder interface panel
 * Copyright (C) 2012 by Daniel Vidoni, Sydney Australia, All rights reserved.
 * Web: www.storefinder.com.au
 *
 * You may not distribute this code in any manner, modified or otherwise, without the express, written
 * consent from Daniel Vidoni.
 * 
 * You may make modifications and / or install this file on your servers for the purpose of
 * providing your website with store finder functionality.
 *
 * In all cases copyright and header must remain intact.
 *
 */
 
 
/* clickable links */
a:link, a:visited, a:hover {
	text-decoration:none;
	color:#F70;
}
a:hover {
	text-decoration:underline;
	color:#0000ff;
}

/*
.wrapword {
	white-space: -moz-pre-wrap !important;  // Mozilla, since 1999
	white-space: -pre-wrap; 								// Opera 4-6 
	white-space: -o-pre-wrap; 							// Opera 7
	white-space: pre-wrap;    							// css-3
	word-wrap: break-word;     							// Internet Explorer 5.5+
}
*/

/* main body container */
body {
	font: 10pt Verdana, Arial, Helvetica, sans-serif;
	background: #eeeeee;
	margin: 0px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0px;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000;
}

/* main interface panel container */
.sfInterface #container {
	width: 100%;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #fff;
	margin: 0 auto;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 

/* container for the top of the panel */
.sfInterface #header {
	padding: 0px 10px 10px 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	height: 90px;
	margin: 0px 0px 10px 0px;
	background-image: url(/images/shadow_up.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FF7000;
} 

/* heading properties in the header section */
.sfInterface #header h1 {
	margin: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0px 0px 0px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	font-size: 14pt;
	color: #FF7000;
	font-weight: normal;
	text-transform: capitalize;
}

/* properties for the text prompting user for input */
.sfInterface #header #prompt {
	margin: 0px; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	font-size: 10pt;
	[if !IE] text-shadow:-1px -1px 1px #FFF, -1px 1px 1px #FFF, 1px -1px 1px #FFF, 1px 1px 1px #FFF;
}

/* properties for panel where nearest locations are displayed */
.sfInterface #results {
	float: left; /* since this element is floated, a width must be given */
	width: 270px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #fff;
	margin: 0px 10px 0px 10px;
	padding: 0px;
}

/* container appearing above the results which outlines what to do and displays other context information */
.sfInterface #results #summary {
	padding:0px 0px 0px 25px;
	margin-bottom:5px;
	color:#777;
	font-weight:normal;
	border-top:solid #CCC 1px;
	border-bottom:solid #CCC 1px;
	height: 27px;
	line-height:27px;
	display: block;
	background-image: url(/images/house.jpg);
	background-repeat: no-repeat;
	background-position: 5px 5px;
	background-color: #FAF7F5;
}

/* container for discreet lines contained within each result */
.sfInterface #sf_results,
.sfInterface #sf_results td,
.sfInterface #sf_results #results_line {
	font-size:8.5pt;
	color: #333;
	line-height:20px;
/*	font-family: Verdana, Geneva, sans-serif; */
}

/* controls the colour of individual results */
.result, .resultSelected {
	background-color:#FFF;
	display:block;
}

/* controls the colour of the individual location result the user has clicked */
.resultSelected {
	background-color:#fdd;
}

/* individual location result including distance marker */
.resultContainer {
	padding:5px 5px 5px 5px;
	margin:0px;
	border-bottom:solid #CCC 1px;
	display:block;
}

/* content area of result next to distance marker. Contains information about the location */
.resultMainPanel {
	padding:0px;
	margin-left:30px;
	width:210px;
	overflow:hidden;
	text-align:left;
}

/* the result location name */
.resultLocationName {
	font-size:115%;
	width:210px;
	font-weight:bold;
	white-space:normal;
}

/* result detail subpanel (opens when you click 'details' button on result panel) */
.resultDetails {
	padding:0px 0px 5px 0px;
	margin:0px;
	width:210px;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	display:none;
}

/* control cluster which opens offering additional context options for the result (such as path finding and e-mail) */
.resultControlCluster {
	padding:0px;
	margin:0px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:8.5pt;
	line-height:20px;
	background-color:#eee;
	border-bottom:solid #CCC 1px;
	display:none;
}

/* path finding sub control */
.resultControlClusterRoute {
	border-top:solid #ddd 1px;
	display:none;
}

/* path finding container */
.sfInterface #sf_results,
.sfInterface #directionsItinerary {
	overflow-x: hidden;
	overflow-y: auto;
	height: 466px;
	white-space:nowrap;
	margin: 0px;
	padding: 0px;
	background-image: url(/images/SF_TEMPLATE_7_11.gif);
	background-repeat: repeat-x;
	background-position: left top;
	background-color: #dbe4f1;
}

/* distance marker container properties */
.sfInterface #sf_results #resultDistanceMarker {
	font-family:Arial, Helvetica, sans-serif; font-size:8pt;
	font-weight:bold;
	text-align:center;
	float:left;
	width:18px;
	height:50px;
	background-position:0px 2px;
	background-repeat:no-repeat;
	background-image:url(/images/map-marker-orange-2.gif);
	color:#FFF;
}

/* distance marker text properties */
.sfInterface #sf_results #resultDistanceMarker #resultDistanceMarkerDistance {
	font-size:7pt;
	color:#777;
	line-height:100%;
	margin-top:15px;
}

/*
.sf_results_heading {
	margin: 0px;
	padding: 0px;
	font-size: 12pt;
	color: #ff7000;
	font-family: Verdana, Geneva, sans-serif;
}
*/

/* Ying Yang type progress indicator. displayed while a search is being conducted */
.sfInterface #sf_loading {
	float:left;
	width:40px;
	height:40px;
	line-height:40px;
/*	background-image:url(https://anchor.net.au/secure/storefinder.com.au/widgets/loading_blue_sml.gif); */
	background-image:url(/widgets/loading_orange.gif);
	background-repeat:no-repeat;
	background-position:center center;
	display:none;
}

/* button clicked on to initiate a search */
.sfInterface #sf_gobutton {
	float:left;
	width:40px;
	height:40px;
	line-height:40px;
	background-image:url(/images/orange_arrow.png);
	background-position:center center;
	background-repeat:no-repeat;
	display:inline;
}

/* map container */
.sfInterface #sfMap,
.sfInterface #sfMap #msMap {
	height: 500px;
	padding: 0px;
	margin: 0px;
} 

/* additional properties specifically for Microsoft maps */
.sfInterface #sfMap #msMap {
	position: relative;
	top:0px;
	left:290px;
}

/* container for the bottom of the panel */
.sfInterface #footer {
	height: 25px;
	margin-top: 10px;
	background-image: url(/images/shadow_down.gif);
	background-repeat: repeat-x;
	padding-top: 10px;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #FF7000;
	text-align: center;
	font-size: 7.5pt;
} 

/* properties of footer paragraph */
.sfInterface #footer p {
	font-size: 7.5pt;
	text-align: center;
	margin: 0px;
	padding: 0px;
}


/* miscellaneous small classes. can probably delete */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
	height:0px;
	font-size: 1px;
	line-height: 0px;
}


/*
 * end of CSS
 *
 */