@import "commonStyleMixins.less";
@import "../theme/commonTemplatesStyleConfiguration.less";


*
{
	word-wrap:break-word;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*
 
***********************************************
* UNCOMMENT THIS LINES TO HIDE FOCUS OUTLINES *
* *********************************************

*:focus
{
	outline: none;
}

*::-moz-focus-inner {
  border: 0;
}

*/

html
{
	height: 100%;
	background:#F0F0F0 url("@{commonImagesPath}/page-loader.gif") center no-repeat;
}

body
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: @baseFontSize;
	line-height: 1.5;
}

h1, h2, h3, h4
{
	display: block; 
	margin: 0; 
	padding: 0;
	margin-bottom:18px;
}

p
{
	margin: 0;
}

p + p
{
	margin-top: 18px;
}

ul, ol 
{
	margin: 0 0 18px 30px; 
	padding: 0;
	font-size:100%;
}

ul 
{
	list-style-type: disc; 
}

sup, sub
{
	text-decoration:none;
}

img
{
	max-width: 100%;
	height: auto;
}

a, a:visted
{
	color: @linkColor;
}

.smallCapsFormat
{
	font-variant: small-caps;
}

html.loader
{
	background: #F0F0F0 url(images/page-loader.gif) center no-repeat; height:100%;
}

html.loaded
{
	background: none;
	
	#pageContainer
	{
		.opacity(1);
	}
}

.referenceLink, .glossary
{
	text-decoration: none;
	
	border-bottom: 1px solid @linkColor;
	
	&:hover
	{
		border-bottom-color: #0066EE;
	}
	
	u
	{
		text-decoration: none;
	}
}


#pageWrapper
{
	padding: 10px;
	left: 0;
	right: 0;
}

.feedbackDisplay
{
	display: none;
}

#pageContainer
{
	margin: 0 auto;
	padding: 0 20px;
	background: white;
	position: relative;
	
	.opacity(0);
	
	#directionAudioContainer
	{
		right: 10px;
		width: 90px;
		height: 50px;
		position:fixed;
		z-index:1000;
	}
}

.ie7 
{
	#pageContainer
	{
		overflow-x: hidden !important;
	}
}

#header
{
	color: @headingColor;
	font-size: @headingFontSize;
	font-weight: bold;
	margin: 0 0 20px 0;
}


#instruction 
{
	color:@instructionsColor;	
}

#instruction, #introduction, #description 
{
	margin-bottom: 18px;	
}

#aside, #bottomLinks
{
	margin-top: 18px;
	z-index:999; 
	position:relative;
}

.imageDataGroup
{
	position: relative;
}

.mediaWrapper .caption, .caption
{
	font-weight: bold;
	color: @mediaCaptionColor;
	text-align: left;
	line-height:1.5em;
	margin: 10px 0 3px 0;
}

#contentContainer
{
	padding: 0;
	z-index:0;
	position:relative;
}

.dataTable
{
	margin:0 0 24px 0;
	
	caption
	{
		color: black;
	    font-size: 16px;
	    padding:5px 0;
	    
	    span
	    {
	    	padding:3px 5px;
	        line-height:1.5em;
	        display:inline-block;
	        border: 1px solid black;
	    }
	}
	
	td
	{
		border: 1px solid black;
	    padding: 5px;
	}
	
	th
	{
		border: 1px solid black;
	    padding: 5px;
	    text-align: center;
	}
}

#cboxLoadedContent .dataTable
{
	margin-top: 2px;
}



#operationsContainer button, .operationsContainer button
{
	background: @defaultButtonBackgroundColor;
	color: @defaultButtonLabelColor;
	
	padding: 8px;
	width: 116px;
	height: 36px;
	border: none;
	
	.equalBorderRadius(5px);
	
	text-transform: uppercase;
	font-weight: bold;
	
	-webkit-box-shadow: -2px -2px 3px rgba(0,0,0,.5) inset, 2px 2px 3px rgba(255,255,255,.5) inset;
	-moz-box-shadow: -2px -2px 3px rgba(0,0,0,.5) inset, 2px 2px 3px rgba(255,255,255,.5) inset;
	box-shadow: -2px -2px 3px rgba(0,0,0,.5) inset, 2px 2px 3px rgba(255,255,255,.5) inset;
}

#operationsContainer button:hover, .operationsContainer button:hover
{
	background: @defaultButtonBackgroundColor;
}

#operationsContainer button[disabled], .operationsContainer button[disabled]
{
	background: @defaultButtonDisabledBackgroundColor;
	color: @defaultButtonDisabledColor;
	cursor: default;
	text-shadow: none;
	font-weight: normal;
	text-decoration: none;
}

#operationsContainer button:focus, .operationsContainer button:focus 
{
	outline: 1px dotted @defaultButtonBackgroundColor;
}

#operationsContainer button.styledWithFallback, .operationsContainer button.styledWithFallback
{
	background: url("@{commonImagesPath}/mainButtonNormal.png") 0 0 no-repeat;
	
	padding: 8px;
	color: @defaultButtonLabelColor;
		
	text-transform: uppercase;
	font-weight: bold;
}

#operationsContainer button.styledWithFallback:hover, .operationsContainer button.styledWithFallback:hover
{
	background: url("@{commonImagesPath}/mainButtonHover.png") 0 0 no-repeat;
}

#operationsContainer button.styledWithFallback[disabled], .operationsContainer button.styledWithFallback[disabled]
{
	background: url("@{commonImagesPath}/mainButtonDisabled.png") 0 0 no-repeat;
	
	cursor: default;
	text-shadow: none;
	font-weight: normal;
	text-decoration: none;
}

.indImg
{
	margin-left: 0;
}
	
/*.message-data
{
	max-width:500px; 
	max-height:400px; 
	min-width:200px;
}*/

.feedbackTip
{
	display: none;
	
	width: 350px;
	
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
	
	background: #EEEEEE;
	
	border: solid 2px white;
	
	font-size: 11px;
	
	z-index: 9999;

	margin-left: 5px;
	
	.equalBorderRadius(5px);
	
	.outerBoxShadow(0px, 0px, 5px, 1px, rgba(0, 0, 0, 0.5));
	
	& > p
	{
		margin-bottom: 0;
		margin-top: 0;
    	padding: 10px;
	}
	
	p + p, ul + p, p + ul
	{
    	padding-top: 10px;
	}
	
}

@media all and (max-width: 800px) 
{
	.feedbackTip
	{
		width: 275px;
	}	
}

/* **************** */
/* COLOR BOX STYLES */
/* **************** */


#colorbox, #cboxOverlay, #cboxWrapper
{
	overflow: visible !important;
}

#cboxClose a
{
	display: block;
	width: 100%;
	height: 100%;
}

.touch #cboxLoadedContent 
{
	padding: 0;
}

.touch #cboxLoadedContent > *:not(:last-child)
{
	left: 0;
	right: 0;
}


/* ********************** */
/* IMAGE COMPONENT STYLES */
/* ********************** */

#imgHolder 
{
    position: absolute;
    left: -9999px;
	top: -9999px;
}

.zoomIcon
{
	position:absolute; 
	right:0px; 
	bottom:0px; 
	width:46px; 
	height:46px; 
	background:url("@{commonImagesPath}/zoom_icon.png") center no-repeat;
}

.imageParent
{
	position:relative; 
	display:block;
}


/* *********************************** */
/* EXAMPLE, HINT AND TRANSCRIPT STYLES */
/* *********************************** */

#bottomLinks
{
	position:relative;
	z-index:1000; 
}

#hintContainer, #exampleContainer, #trascriptContainer
{
	float:left; 
	margin:0 15px 0 0; 
	z-index:500;
	
	a
	{
		padding-left:34px; 
		line-height:30px; 
		display:block; 
		cursor:default; 
		text-decoration:none;
	}
}

#hintContainer 
{ 
	position: relative;
	
	a.tip
	{
		background:url("@{commonImagesPath}/hint_icon.png") 0 0 no-repeat; cursor: default;
	} 
}

#exampleContainer 
{
	a
	{
		background:url("@{commonImagesPath}/example_icon.png") 0 0 no-repeat;
	}
}

#trascriptContainer a
{
	padding-left:38px;
	background:url("@{commonImagesPath}/transcript-icon.png") 0 4px no-repeat; 
}

#example-info, #exampleContentWrapper
{
	/*min-width: 600px;*/
	
	.caption
	{
		padding:0;
	}
	
	.mediaWrapper
	{
		margin:0 15px 15px 0;
		float:left;
		max-width:360px;
		text-align:  left;
		
		p.caption
		{
			font-weight: bold;
		}
	}
	
	#mediaWrapper.mediaOnlyExample, &.mediaOnlyExample .mediaWrapper
	{
		width:99%;
		float:none;
		margin:0 auto;
	}
}

#attemptsWrapper 
{
	float:right;
}

#attemptsWrapper span 
{
	background-image: url("../../styles/images/star-yellow.png");
	background-repeat: no-repeat;
	margin-right: 4px;
	padding: 3px 7px 1px;
	color: transparent;
}

#attemptsWrapper span.disabled
{
	background-image: url("../../styles/images/star-grey.png");
	background-repeat: no-repeat;
}


/* *************** */
/* TOOLTIPS STYLES */
/* *************** */

.tooltip 
{
	display:none;	
	background:#FFFFFF;
	border:5px solid #999;
	padding:10px;
	width:310px;
	font-size:11px;
	color: #000;
	word-wrap: break-word;
	margin-left:-60px;
	z-index: 500;
	position:absolute;
	
	* 
	{
		word-wrap: break-word;
	}
	
	.label 
	{
		width:35px;
	}
	
	a 
	{
		color: @linkColor;
		font-size:11px;
		font-weight:bold;
	}
	
	img 
	{
		width: 100%;
	}
}


/* *************** */
/* GLOSSARY STYLES */
/* *************** */


.glossaryDescriptionWrapper
{
	@closeGlossaryButtonWidth: 16px;
	@closeGlossaryButtonHeight: 16px;
	/*@glossaryDescriptionWidth: 400px;*/
	
	display: none;
	
	.boxSizing(border-box);
	
	border: 1px solid @baseThemeColor;
	background-color: white;
	
	color: @baseThemeColor;
	
	/*max-width: @glossaryDescriptionWidth;
	width: @glossaryDescriptionWidth;*/
	
	.hasGlow(@shadowColor);
	
	.equalBorderRadius(10px);
	
	z-index: 99999;
	
	padding: 0;
	
	.tipContentWrapper
	{
		margin: 0;
		padding:5px 18px 5px 10px;
	}
	
	.closeGlossary
	{
		position: absolute;
		
		width: @closeGlossaryButtonWidth;
		height: @closeGlossaryButtonHeight;
		
		top: 1px;
		right: 1px;
		left: auto;
		bottom: auto;
		
		background: url("@{commonImagesPath}/closeGlossary.png") no-repeat;
		text-indent: -9999px;
		z-index:99;
	}
	
	&.left
	{
		.unequalBorderRadius(10px, 10px, 0, 10px);

		padding: 0;
	
		.tipContentWrapper
		{
		  padding:5px 18px 5px 10px;
		}
	
		.closeGlossary
		{
			top: 1px;
			right: 1px;
			left: auto;
			bottom: auto;
		}
	}
	
	&.bottom.left
	{
		.unequalBorderRadius(10px, 0, 10px, 10px);

		padding: 0;
		
		.tipContentWrapper
		{
			padding:5px 10px 5px 20px;
		}
		
		.closeGlossary
		{
			top: 1px;
			left: 1px;
			right: auto;
			bottom: auto;
		}
	}
	
	&.right
	{
		.unequalBorderRadius(10px, 10px, 10px, 0);
		
		padding: 0;
		
		.tipContentWrapper
		{
			padding:5px 18px 5px 10px;
		}
		
		.closeGlossary
		{
			top: 1px;
			right: 1px;
			left: auto;
			bottom: auto;
		}
	}
	
	&.bottom.right
	{
		.unequalBorderRadius(0, 10px, 10px, 10px);

		padding: 0;
		
		.tipContentWrapper
		{
			padding:5px 18px 5px 10px;
		}
		
		.closeGlossary
		{
			top: 1px;
			right: 1px;
			left: auto;
			bottom: auto;
		}
	}
	
	
	.leftTopCorner, .rightTopCorner, .leftBotCorner, .rightBotCorner
	{
		display: none;
	}
	
	.topShadow, .botShadow
	{
		display: none;
	}
	
	.leftShadow, .rightShadow
	{
		display: none;
	}
}

.glossary
{
	color: @glossarylinkColor;
	border-bottom-color: @glossarylinkColor;
	
	&.highlightedGlossaryTerm
	{
		background: #FFFF99;
	}
}

/* ************** */
/* HELPER CLASSES */
/* ************** */

.clearFloat, .clearBlock
{
	clear: both;
	display: block;
	height: 0px;
}

.ie8 .clearFloat, .ie8 .clearBlock
{
	height: 1px;
}

.hidden
{
	display:none;
}

.screenReaderDescription
{
	position: fixed;
	left: -9999px;
	top: -9999px;
}

.scrollerPadding
{
	padding-top: 1px;
	padding-bottom: 1px;
}

.touch .scrollerPadding
{
	padding: 0;
}

/* This is used in Feedbacks across templates */
.answerIndicatorImage
{	
	position: relative;
	top: -4px;
}


/*    Closed caption transcript hides every data of the player tabs.  */
.ie7 #transcriptPanel{
	z-index: -1;
}