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



/* general canvas resets 
html, body
{
	background:#fff;
	color:#000;
}

/* surveymap base font-size */
.surveymap
{
	font-size:0.83em;
}

*/

/* responsive scaling min-width */
.surveymap, .surveymap_cover, .surveymap_cover img
{
	min-width:240px;
}







/* surveymap container */
.surveymap
{
	float:none;

	margin:0 0 20px 12px;	
	
	text-align:center;
	/*text-align:left;*/
}

/* surveymap container => type classes */
.surveymap.single
{
}
.surveymap.multiple
{
}
.surveymap.ranked
{
}
.surveymap.annotated
{
}

/* surveymap container => state classes */
.surveymap.maxed
{
}
.surveymap.annotating
{
}
.surveymap.keytracking
{
}







/* cover-image wrapper */
.surveymap .surveymap_cover
{
}



/* cover-image
   nb. DO NOT define any "border" properties for this element */
.surveymap .surveymap_cover > img
{
	background:#fff;
/* 6 JUN 2019 REMOVE DROP SHADOW */
/*	
	-moz-box-shadow:1px 3px 7px 0 rgba(0,0,0,0.44);
	-webkit-box-shadow:1px 3px 7px 0 rgba(0,0,0,0.44);
	box-shadow:1px 3px 7px 0 rgba(0,0,0,0.44);
*/
}







/* selection areas list */
.surveymap ol
{
}



/* selection area
   nb. DO NOT define any other "border" properties for this element */
.surveymap ol li
{
	/* nb. this is the same dark-blue as the translucent background 
	   (specified in ".surveymap ol li em" below) 
	    with the same opacity as its ".checked" state */
	border-color:rgba(0,0,170,0.5);
}
	
/* selection area => state classes */
.surveymap ol li.checked
{
}



/* selection area -> permanent border 
   nb. ONLY set border style and color here, NOT width (which is programatic) */
.surveymap ol li span.frame
{
	/* nb. this is the orange */
	border-color:#f40;
	border-style:solid;
}



/* selection area -> translucent background
   nb. DO NOT define "border" properties for this element */
.surveymap ol li em
{
	/* nb. this is the same dark-blue as the gutter borders
	   (specified in ".surveymap ol li" above) */
	background:#00a;
}

/* selection area -> translucent background => state classes */
.surveymap ol li.checked em
{
	opacity:0.5;
	filter:alpha(opacity=50);
}



/* selection area -> border frame
   nb. DO NOT define any other "border" properties for this element 
   [apart from those defined above for "selection area -> permanent border"] */
.surveymap ol li span.frame
{
}



/* selection area -> info label */
.surveymap ol li .label
{
	padding:4px 9px 2px 9px;
	margin:3px;
	
	-moz-border-radius:1em;
	-webkit-border-radius:1em;
	border-radius:1em;
	
	text-align:center;
	font:normal normal normal 1em/1.3 arial,helvetica,sans-serif;
	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
	
	/* nb. this is the same orange as the area borders */
	background-color:#f40;
	color:#fff;
		
	-moz-box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), inset 0 0 1px 2px rgb(255,255,255), 0 1px 1px 0 rgba(0,0,0,0.4);
	-webkit-box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), inset 0 0 1px 2px rgb(255,255,255), 0 1px 1px 0 rgba(0,0,0,0.4);
	box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), inset 0 0 1px 2px rgb(255,255,255), 0 1px 1px 0 rgba(0,0,0,0.4);
}

/* info label => reduced font-size and padding for smaller screens */
@media only all and (max-width:480px)
{
	.surveymap ol li .label
	{
		padding:2px 6px 2px 6px;

		font-size:0.85em;
		
		-moz-box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), inset 0 0 1px 1px rgb(255,255,255), 0 1px 1px 0 rgba(0,0,0,0.4);
		-webkit-box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), inset 0 0 1px 1px rgb(255,255,255), 0 1px 1px 0 rgba(0,0,0,0.4);
		box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), inset 0 0 1px 1px rgb(255,255,255), 0 1px 1px 0 rgba(0,0,0,0.4);
	}
}

/* info label => dark colors for very-light backgrounds */
.surveymap.darklabels ol li .label
{
	color:#606060;
	text-shadow:0 -1px 1px rgba(0,0,0,0.1), 0 1px 1px rgba(255,255,255,0.8);

	-moz-box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), inset 0 0 1px 1px rgb(255,255,255), inset 0 0 0 2px rgba(0,0,0,0.55), 0 1px 1px 0 rgba(0,0,0,0.4);
	-webkit-box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), inset 0 0 1px 1px rgb(255,255,255), inset 0 0 0 2px rgba(0,0,0,0.55), 0 1px 1px 0 rgba(0,0,0,0.4);
	box-shadow:inset 0 -0.65em 3px rgba(0,0,0,0.05), inset 0 0 1px 1px rgb(255,255,255), inset 0 0 0 2px rgba(0,0,0,0.55), 0 1px 1px 0 rgba(0,0,0,0.4);
}

/* selection area -> info label for annotated questions 
   nb. this has a background icon added via scripting,
   so it has no other visible styles apart from the resets 
   required to stop it showing the normal label styles (defined by core) */
.surveymap.annotated ol li .label
{
	margin:3px;
}







/* annotation field container */
.surveymap div.annotation
{
	/*** ANNO-NEW ***/
	margin:0 5px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	
	border:2px solid #a29a62;
	border-bottom:1px solid #827a52;
	
	background-color:#ecd274 !important;

	-moz-box-shadow:1px 2px 8px -1px rgba(0,0,0,0.5);
	-webkit-box-shadow:1px 2px 8px -1px rgba(0,0,0,0.5);
	box-shadow:1px 2px 8px -1px rgba(0,0,0,0.5);
	/*** / ANNO-NEW ***/
	
	/*** ANNO-OLD ***//*
	padding:9px 10px;

	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	
	text-align:left;
	font:normal normal normal 1em/1.3 arial,helvetica,sans-serif;
	text-shadow:0 -1px 0 rgba(0,0,0,0.5);
	
	background-color:#f40;
	color:#fff;
		
	-moz-box-shadow:inset 0 -0.15em 1em rgba(0,0,0,0.15), inset 0 0 1px 2px rgb(255,255,255), 0 1px 3px 1px rgba(0,0,0,0.5);
	-webkit-box-shadow:inset 0 -0.15em 1em rgba(0,0,0,0.15), inset 0 0 1px 2px rgb(255,255,255), 0 1px 3px 1px rgba(0,0,0,0.5);
	box-shadow:inset 0 -0.15em 1em rgba(0,0,0,0.15), inset 0 0 1px 2px rgb(255,255,255), 0 1px 3px 1px rgba(0,0,0,0.5);
	*//*** ANNO-OLD ***/
}

/* 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
{
	/*** ANNO-NEW ***/
	display:run-in;
	
	height:6.5em;			
	width:18em;
	
	/* nb. this constrains user-resizing in firefox */
	min-width:90px;
	min-height:40px;
	
	padding:9px;
	margin:28px 0 0 0;

	-moz-border-radius:0 0 4px 4px;
	-webkit-border-radius:0 0 4px 4px;
	border-radius:0 0 4px 4px;

	border:none;
	border-top:1px solid #c9bd6d;
	
	font:normal normal normal 1em/1.3 helvetica,sans-serif;
	
	color:#444440;
	background-color:#faec88;
	/*** / ANNO-NEW ***/
	
	/*** ANNO-OLD ***//*
	height:6.5em;			
	width:15em;
	
	padding:7px;
	margin:0 26px 0 0;
	
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;

	border:none;
	
	font:normal normal normal 1em/1.3 helvetica,sans-serif;
	
	color:#404040;
	background:#fff;
	
	-moz-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15), inset 0 1px 1px rgba(0,0,0,0.35);	
	-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15), inset 0 1px 1px rgba(0,0,0,0.35);	
	box-shadow:inset 0 0 0 1px rgba(0,0,0,0.15), inset 0 1px 1px rgba(0,0,0,0.35);	
	*//*** ANNO-OLD ***/
}

/* annotation field => reduced width and height for smaller screens */
@media only all and (max-width:480px)
{
	.surveymap div.annotation textarea
	{
		height:5.2em;			
		width:12.5em;
	}
}

/* annotation field -> text input => placeholder */
.surveymap div.annotation textarea[class~="placeholder"]   
{
	/*** ANNO-NEW ***/
	color:#997;
	/*** / ANNO-NEW ***/
	
	/*** ANNO-OLD ***//*
	color:#999;
	*//*** ANNO-OLD ***/
}
/* nb. this only applies in webkit and moz, to the text retained onfocus 
   and needs to be two separate selectors or firefox won't apply it */
.surveymap div.annotation textarea::-webkit-input-placeholder
{
	/*** ANNO-NEW ***/
	color:#cc9;
	/*** / ANNO-NEW ***/
	
	/*** ANNO-OLD ***//*
	color:#ccc;
	*//*** ANNO-OLD ***/
}
/*** NEW ***/
.surveymap div.annotation textarea:-moz-placeholder   
{
	/*** ANNO-NEW ***/
	color:#cc9;
	/*** / ANNO-NEW ***/
	
	/*** ANNO-OLD ***//*
	color:#ccc;
	*//*** ANNO-OLD ***/
}
/*** / NEW ***/



/* annotation field -> accept and trash buttons 
   nb. this button also has the generic .xicon rules */
/*** ANNO-OLD ***//*
.surveymap div.annotation button
{
	right:9px;
}
.surveymap div.annotation button.accept
{
	top:9px;
}
.surveymap div.annotation button.close
{
	top:33px;
}
.surveymap div.annotation button.trash
{
	bottom:10px;
}
*//*** ANNO-OLD ***/

/*** ANNO-NEW ***/
.surveymap div.annotation button
{
	top:4px;
}
.surveymap div.annotation button.accept
{
	left:5px;
}
.surveymap div.annotation button.close
{
	left:29px;
}
.surveymap div.annotation button.trash
{
	right:5px;
}
.surveymap div.annotation button.xicon
{
}
.surveymap div.annotation button.xicon:hover,
.surveymap div.annotation button.xicon:focus
{
}
.surveymap div.annotation button.xicon:active
{
}
/*** / ANNO-NEW ***/

/* nb. these are layout tweaks for IE6 
   which is using static versions of the icons  
   fixed at their default background-position */

/*** ANNO-OLD ***//*
* html .surveymap div.annotation button			{ right:3px; }
* html .surveymap div.annotation button.accept	{ top:10px; }
* html .surveymap div.annotation button.close	{ top:34px; }
* html .surveymap div.annotation button.trash	{ bottom:4px; }
*//*** ANNO-OLD ***/

/*** ANNO-NEW ***/
* html .surveymap div.annotation button			{ top:7px; }
* html .surveymap div.annotation button.accept	{ left:8px; }
* html .surveymap div.annotation button.close	{ left:32px; }
* html .surveymap div.annotation button.trash	{ right:1px; }
/*** / ANNO-NEW ***/







/* keyboard response indicator 
   nb. ONLY set border style and color here, NOT width (which is programatic) */
.surveymap div.keyindicator
{
	border-color:#000;
	border-style:dashed;
	
	background-color:#fff;

	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}