/*******************************************************************************
 SVM2.11 :: SurveyMap 2.11  => Respondent Interface Core Styles
 ------------------------------------------------------------------------------
 Copyright (c) 2012 Demographix Limited. All Rights Reserved.
 ------------------------------------------------------------------------------
*******************************************************************************/



/* general contextual resets */
.surveymap *
{
	margin:0;
	padding:0;
	border:none;
	list-style-type:none;
}
/* nb. this is hack for IE6-7 to stop the unaddressable horizontal spread */
.surveymap button
{
	overflow:visible;
}
/* nb. this is a firefox hack to kill the unseen inner element */
.surveymap button::-moz-focus-inner 
{ 
	padding:0; 
	border:none;
}
/* nb. this is an IE9 hack to negate alpha filters 
   so they don't clash with opacity by rendering both */
@media only all
{
	.surveymap *
	{
		filter:none !important;
	}
}



/* responsive scaling max-width 
   nb. with no surrounding media queries so it applies for all viewports, 
   as it may be necessary even in desktop windows for large magazine spreads 
   nb. the image itself MUST NOT have defined width or height attributes or styles 
   otherwise the image will not maintain aspect ratio when it resizes */
.surveymap, .surveymap_cover, .surveymap_cover img
{
	width:auto !important;
	height:auto !important;
	
	max-width:100% !important;
	max-height:none !important;
}







/* surveymap container */
.surveymap
{
	overflow:visible;
	position:relative;

	clear:both;
	display:block;
}







/* cover-image wrapper */
.surveymap .surveymap_cover
{
	position:relative;

	display:inline-block;
	margin:0 !important;
	padding:0 !important;

	text-decoration:none;

	cursor:default;
}

/* nb. this is an iOS hack to prevent touchstart events
   from triggering focus highlight or the copy/select menu
   [which are useless in this instance so it's no loss of usability] */
.surveymap .surveymap_cover
{
	-webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-touch-callout:none;
}

/* nb. this negates the user-focus outline in all except IE6-??
   for whom we can't do anything so we'll just have to live with it
   but it's no loss of accessibility in browsers where it works 
   because we have a much stronger visual indicator [the keyindicator element]
   that shows when the cover has the focus and that keyboard response is active */
.surveymap .surveymap_cover:focus
{
	outline:0 solid rgba(0,0,0,0);
}

/* nb. this is a display hack for IE6 and IE7 */
*+html .surveymap .surveymap_cover { display:inline; }
* html .surveymap .surveymap_cover { display:inline; }



/* cover-image */
.surveymap .surveymap_cover img
{
	position:relative;
	z-index:2000;

	display:block;
	margin:0 !important;
	padding:0 !important;

	border:none !important;
	
	cursor:inherit;
}







/* datafields container and contents
   nb. these should be aggressively hidden, from graphical browsers 
   and screenreaders, so the user can't interact with them directly;
   but qualify that with a script-defined "surveymap_supported" class 
   so that unsupported, non-CSS and non-JavaScript browsers will see them */
.surveymap .surveymap_toolbar .surveymap_datafields
{
	display:block;
}
html.surveymap_supported .surveymap .surveymap_toolbar .surveymap_datafields, 
html.surveymap_supported .surveymap .surveymap_toolbar .surveymap_datafields *
{
	overflow:hidden;
	
	display:none;
	width:0;
	height:0;
	
	visibility:hidden;
}







/* selection areas list */
.surveymap ol
{
	overflow:hidden;

	position:absolute;
	z-index:3000;
	left:0;
	top:0;
	
	display:block;
	margin:0 !important;
	/* nb. we need this gap for rgba border overlap on the 
	   bottom/right areas so they don't get clipped by overflow */
	padding:0 1px 1px 0 !important;
	width:100%;
	height:100%;
	
	border:none !important;

	cursor:pointer;
}

/* nb. this is an IE6 hack to negate the overflow and other properties that were
   added to support responsive scaling, but which screw up the selection layout in IE6, 
   and which we can happily lose because IE6 doesn't support responsive scaling anyway */
* html .surveymap ol
{
	overflow:visible;
	
	width:auto;
	height:auto;
}



/* selection area 
   nb. we define the stacking order only to ensure that
   the keyboard response cursor is always above the selections;
   the stacking order of individual areas areas is as created, 
   but is not important since they never overlap each other */
.surveymap ol li
{
	overflow:hidden;
	position:absolute;
	z-index:1000;

	display:block;
	width:0;
	height:0;
	
	border-style:solid;
	border-color:transparent;
	border-color:rgba(187,187,187,0.5);
	border-width:0 1px 1px 0 !important;
	
	/* nb. this is an ugly hack for IE7-IE9, without which the areas 
	   don't respond to selection events, as though they weren't even there, 
	   a bug I refer to as "events ‘fall through’ some transparent elements"
	   - the same can be acheived with any solid color, 
	     but not "transparent", which is what we need it to be
	   - in IE9 we can fix it with rgba(0,0,0,0), but not in IE7-8
	   - however we can fix it for all with a transparent background-image
	     or with url(".") but both involve an additional network request
	   + but this solution fixes the problem without making a request
	     and works in IE6+ even though only IE8-9 support data URIs! */
	background:url("data:image/gif;base64,");

	opacity:0;
	filter:alpha(opacity=0);

	cursor:pointer;
}
/* nb. this is a hack for IE6 to hide the item border
   because it doesn't support the RGBA color values we use 
   nb. use !important so it's stronger than override colors */
* html .surveymap ol li
{
	border-width:0 !important;
}
	
/* selection area => state classes */
.surveymap ol li.checked
{
	opacity:1;
	filter:none;

	/* nb. selected areas always have the pointer cursor
	   to indicate that you can unselect them again */
	cursor:pointer;
}



/* selection area -> translucent background */
.surveymap ol li em
{
	position:relative;
	z-index:1000;
	
	display:block;
	width:100%;
	height:100%;
	
	border:none !important;

	background:#bbb;
	
	opacity:0.75;
	filter:alpha(opacity=75);
}



/* selection area -> border frame */
.surveymap ol li span.frame
{
	position:absolute;
	z-index:2000;
	
	display:block;
	width:100%;
	height:100%;
	
	border:0 solid;

	background:transparent;

	cursor:pointer;
}



/* selection area -> info label */
.surveymap ol li .label
{
	position:absolute;
	z-index:3000;			/* nb. this goes above the border frame so you can see its tooltip */
	
	display:none;			/* nb. the label is always hidden unless the [ranked or annotated] area is checked */
	min-width:1.2em;

	cursor:pointer;
}

/* selection area -> info label for annotated questions */
.surveymap.annotated ol li .label
{
	min-width:0;
	width:30px;
	height:31px;
	padding:0;

	-moz-border-radius:0;
	-webkit-border-radius:0;
	border-radius:0;
	
	text-indent:-100px;		 /* nb. hides the basic fallback text that's there for non-CSS */

	background:none no-repeat 0 0;
	background-color:transparent !important;	/* nb. use !important so it's stronger than override colors */
	text-shadow:none;
		
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
}

/* info label => dark colors for very-light backgrounds **/
.surveymap.darklabels ol > li > .label
{
}

/* selection area -> info label => state classes */
.surveymap ol li.checked .label
{
	display:inline-block;
}







/* annotation field container
   nb. the size of this outer wrapper is determined 
   entirely by expansion from the inner textarea */
.surveymap div.annotation
{
	position:absolute;
	z-index:3000;
	overflow:visible;

	display:inline-block;

	cursor:default;
}

/* annotation field container => visibility states */
.surveymap div.annotation.hidden
{
	visibility:hidden;
}
.surveymap div.annotation.visible
{
	visibility:visible;
}


/* annotation field -> text input */
.surveymap div.annotation textarea
{
	overflow-y:auto;
	
	display:inline-block;

	cursor:text;
}


/* annotation field -> accept and trash buttons 
   nb. this button also has the generic .xicon rules */
.surveymap div.annotation button
{
	position:absolute;
}







/* keyboard response cursor 
   nb. although this rule defines the basic background 
   the background-image itself is applied by scripting */
.surveymap ol span.keycursor
{
	position:absolute;
	z-index:2000;
	
	display:block;
	width:70px;
	height:70px;
	
	/* nb. to make tracking simpler, we offset the image 
	   so that its visible center is actually its top/left position */
	margin:-32px 0 0 -35px;
	
	border:none !important;

	background:transparent none no-repeat;
}

/* cursor "hidden" and "visible" states 
   nb. don't use display to hide this, because we need to 
   be able to read its offset position while still hidden */
.surveymap ol span.keycursor.hidden
{
	visibility:hidden;
}
.surveymap ol span.keycursor.visible
{
	visibility:visible;
}



/* keyboard response indicator */
.surveymap div.keyindicator
{
	position:absolute;
	z-index:1000;
	
	display:block;
	margin:0 !important;
	width:100%;
	height:100%;

	border:0px dashed;
}

/* indicator "hidden" and "visible" states */
.surveymap div.keyindicator.hidden
{
	display:none;
}
.surveymap div.keyindicator.visible
{
	display:block;
}

/* nb. this is a layout hack for IE6 which doesn't correctly implement 
   the percentage height, and would otherwise be too short */
* html .surveymap div.keyindicator
{
	height:expression(this.nextSibling.offsetHeight + "px");
}







/* "x" icon button [eg. close or remove] 
   nb. these rules define the surrounding styles
   but the icon itself is applied by scripting, 
   as a background-image, or filter for IE6 */
.surveymap button.xicon
{
	overflow:hidden;
	
	display:inline-block;
	width:20px;
	height:20px;
	
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	border:none;
	
	text-indent:-100px;		/* nb. hides the little "x" that's there for non CSS */

	background:transparent none no-repeat 3px 3px;
	color:#808080;
	
	/*** ANNO-NEW ***/
	-moz-box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), inset 0 1px 1px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), inset 0 1px 1px 0 rgba(0,0,0,0.2);
	box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), inset 0 1px 1px 0 rgba(0,0,0,0.2);
	/*** / ANNO-NEW ***/
	
	/*** ANNO-OLD ***//*
	-moz-box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), 
					inset 0 1px 1px 0 rgba(0,0,0,0.2), 
					inset 0 0 0 2px rgba(255,255,255,0.65), 
					inset 0 -20px 0 0 rgba(255,255,255,0.25);
	-webkit-box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), 
						inset 0 1px 1px 0 rgba(0,0,0,0.2), 
						inset 0 0 0 2px rgba(255,255,255,0.65), 
						inset 0 -20px 0 0 rgba(255,255,255,0.25);
	box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), 
				inset 0 1px 1px 0 rgba(0,0,0,0.2), 
				inset 0 0 0 2px rgba(255,255,255,0.65), 
				inset 0 -20px 0 0 rgba(255,255,255,0.25);	
	*//*** ANNO-OLD ***/

	cursor:pointer;
}
.surveymap button.xicon:hover,
.surveymap button.xicon:focus
{
	/* nb. the hover state is a separate sprite for IE8's benefit, 
	   even though the only difference is an opacity change, 
	   because applying filter:opacity to a 24-bit PNG looks really nasty */
	background-position:-17px 3px;
	color:#707070;

	/*** ANNO-NEW ***/
	-moz-box-shadow:inset 0 -0.7em 4px rgba(0,0,0,0.05), inset 0 1px 1px 0 rgba(0,0,0,0.2), inset 0 0 0 2px rgba(0,0,0,0.2);
	-webkit-box-shadow:inset 0 -0.7em 4px rgba(0,0,0,0.05), inset 0 1px 1px 0 rgba(0,0,0,0.2), inset 0 0 0 2px rgba(0,0,0,0.2);
	box-shadow:inset 0 -0.7em 4px rgba(0,0,0,0.05), inset 0 1px 1px 0 rgba(0,0,0,0.2), inset 0 0 0 2px rgba(0,0,0,0.2);
	/*** / ANNO-NEW ***/
	
	/*** ANNO-OLD ***//*
	-moz-box-shadow:inset 0 -0.7em 4px rgba(0,0,0,0.05), 
					inset 0 1px 1px 0 rgba(0,0,0,0.2), 
					inset 0 0 0 2px rgba(255,255,255,1), 
					inset 0 -20px 0 0 rgba(255,255,255,0.5);
	-webkit-box-shadow:inset 0 -0.7em 4px rgba(0,0,0,0.05), 
						inset 0 1px 1px 0 rgba(0,0,0,0.2), 
						inset 0 0 0 2px rgba(255,255,255,1), 
						inset 0 -20px 0 0 rgba(255,255,255,0.5);
	box-shadow:inset 0 -0.7em 4px rgba(0,0,0,0.05), 
				inset 0 1px 1px 0 rgba(0,0,0,0.2), 
				inset 0 0 0 2px rgba(255,255,255,1), 
				inset 0 -20px 0 0 rgba(255,255,255,0.5);
	*//*** ANNO-OLD ***/
}
.surveymap button.xicon:active
{
	background-position:3px -17px;

	/*** ANNO-NEW ***/
	-moz-box-shadow:inset 0 0.55em 5px rgba(0,0,0,0.2), inset 0 1px 1px 0 rgba(0,0,0,0.2), inset 0 0 0 2px rgba(0,0,0,0.2);
	-webkit-box-shadow:inset 0 0.55em 5px rgba(0,0,0,0.2), inset 0 1px 1px 0 rgba(0,0,0,0.2), inset 0 0 0 2px rgba(0,0,0,0.2);
	box-shadow:inset 0 0.55em 5px rgba(0,0,0,0.2), inset 0 1px 1px 0 rgba(0,0,0,0.2), inset 0 0 0 2px rgba(0,0,0,0.2);
	/*** / ANNO-NEW ***/
	
	/*** ANNO-OLD ***//*
	-moz-box-shadow:inset 0 0.55em 5px rgba(0,0,0,0.25), 
					inset 0 1px 1px 0 rgba(0,0,0,0.2), 
					inset 0 0 0 2px rgba(255,255,255,1), 
					inset 0 -20px 0 0 rgba(255,255,255,0.25);
	-webkit-box-shadow:inset 0 0.55em 5px rgba(0,0,0,0.25), 
						inset 0 1px 1px 0 rgba(0,0,0,0.2), 
						inset 0 0 0 2px rgba(255,255,255,1), 
						inset 0 -20px 0 0 rgba(255,255,255,0.25);
	box-shadow:inset 0 0.55em 5px rgba(0,0,0,0.25), 
				inset 0 1px 1px 0 rgba(0,0,0,0.2), 
				inset 0 0 0 2px rgba(255,255,255,1), 
				inset 0 -20px 0 0 rgba(255,255,255,0.25);
	*//*** ANNO-OLD ***/
}
/* nb. this is a hack for IE8 to fix to the stupid displacement bug
   < http://haslayout.net/css/Button-Background-Shift-On-active-Bug >
   which then has to be negated so it doesn't apply to IE9! */
.surveymap button.xicon:active
{
	-ms-background-position-x: 4px;
	-ms-background-position-y: -16px;
}   
@media only all
{
	.surveymap button.xicon:active
	{
		background-position:3px -17px;
	}   
}