/* ********************* */
/* SHADOW ELEMENT STYLES */
/* ********************* */
.hasArtificialOuterShadow {
position: relative;
overflow: visible;
border: none !important;
}
.hasArtificialOuterShadow .outerShadowElement {
position: absolute;
/* ******* */
/* CORNERS */
/* ******* */
/* ***** */
/* SIDES */
/* ***** */
}
.hasArtificialOuterShadow .outerShadowElement.corner {
width: 15px;
height: 15px;
}
.hasArtificialOuterShadow .outerShadowElement.topLeftCorner {
top: -10px;
left: -10px;
background: url("images/outerShadowCorners.png") 6px 6px no-repeat;
}
.hasArtificialOuterShadow .outerShadowElement.topRightCorner {
top: -10px;
right: -10px;
background: url("images/outerShadowCorners.png") -31px 6px no-repeat;
}
.hasArtificialOuterShadow .outerShadowElement.bottomRightCorner {
bottom: -10px;
right: -10px;
background: url("images/outerShadowCorners.png") -31px -31px no-repeat;
}
.hasArtificialOuterShadow .outerShadowElement.bottomLeftCorner {
bottom: -10px;
left: -10px;
background: url("images/outerShadowCorners.png") 6px -31px no-repeat;
}
.hasArtificialOuterShadow .outerShadowElement.topSide {
left: 5px;
right: 5px;
top: -10px;
height: 10px;
background: url("images/horizontalShadows.png") 0px -10px repeat-x;
}
.hasArtificialOuterShadow .outerShadowElement.rightSide {
top: 5px;
bottom: 5px;
right: -10px;
width: 10px;
background: url("images/verticalShadows.png") 0px 0px repeat-y;
}
.hasArtificialOuterShadow .outerShadowElement.bottomSide {
left: 5px;
right: 5px;
bottom: -10px;
height: 10px;
background: url("images/horizontalShadows.png") 0px 0px repeat-x;
}
.hasArtificialOuterShadow .outerShadowElement.leftSide {
top: 5px;
bottom: 5px;
left: -10px;
width: 10px;
background: url("images/verticalShadows.png") -11px 0px repeat-y;
}
/* ******************* */
/* GLOW ELEMENT STYLES */
/* ******************* */
.hasArtificialOuterGlow {
position: relative;
overflow: visible;
border: none !important;
}
.hasArtificialOuterGlow .outerGlowElement {
position: absolute;
/* ******* */
/* CORNERS */
/* ******* */
/* ***** */
/* SIDES */
/* ***** */
}
.hasArtificialOuterGlow .outerGlowElement.corner {
width: 15px;
height: 15px;
}
.hasArtificialOuterGlow .outerGlowElement.topLeftCorner {
top: -10px;
left: -10px;
background: url("images/glowCorners.png") 6px 6px no-repeat;
}
.hasArtificialOuterGlow .outerGlowElement.topRightCorner {
top: -10px;
right: -10px;
background: url("images/glowCorners.png") -31px 6px no-repeat;
}
.hasArtificialOuterGlow .outerGlowElement.bottomRightCorner {
bottom: -7px;
right: -8px;
background: url("images/glowCorners.png") -29px -29px no-repeat;
}
.hasArtificialOuterGlow .outerGlowElement.bottomLeftCorner {
left: -5px;
bottom: -4px;
background: url("images/glowCorners.png") 1px -26px no-repeat;
}
.hasArtificialOuterGlow .outerGlowElement.topSide {
left: 5px;
right: 5px;
top: -10px;
height: 10px;
background: url("images/horizontalShadows.png") 0 -40px repeat-x;
}
.hasArtificialOuterGlow .outerGlowElement.rightSide {
top: 5px;
bottom: 8px;
right: -10px;
width: 10px;
background: url("images/verticalShadows.png") -28px 0px repeat-y;
}
.hasArtificialOuterGlow .outerGlowElement.bottomSide {
left: 9px;
right: 7px;
bottom: -10px;
height: 10px;
background: url("images/horizontalShadows.png") 0px -29px repeat-x;
}
.hasArtificialOuterGlow .outerGlowElement.leftSide {
top: 5px;
bottom: 8px;
left: -10px;
width: 10px;
background: url("images/verticalShadows.png") -40px 0px repeat-y;
}
/* *************************** */
/* INNER SHADOW ELEMENT STYLES */
/* *************************** */
.hasArtificialInnerShadow {
position: relative;
overflow: visible;
border: none !important;
}
.hasArtificialInnerShadow .innerShadowElement {
position: absolute;
/* ******* */
/* CORNERS */
/* ******* */
/* ***** */
/* SIDES */
/* ***** */
}
.hasArtificialInnerShadow .innerShadowElement.corner {
width: 15px;
height: 15px;
}
.hasArtificialInnerShadow .innerShadowElement.topLeftCorner {
top: -6px;
left: -6px;
background: url("images/innerShadowCorners.png") -12px -12px no-repeat;
}
.hasArtificialInnerShadow .innerShadowElement.topRightCorner {
top: -8px;
right: -6px;
background: url("images/innerShadowCorners.png") 0px -10px no-repeat;
}
.hasArtificialInnerShadow .innerShadowElement.bottomRightCorner {
bottom: -6px;
right: -8px;
background: url("images/innerShadowCorners.png") -2px 0px no-repeat;
}
.hasArtificialInnerShadow .innerShadowElement.bottomLeftCorner {
left: -5px;
bottom: -4px;
background: url("images/innerShadowCorners.png") -13px 2px no-repeat;
}
.hasArtificialInnerShadow .innerShadowElement.topSide {
left: 8px;
right: 5px;
top: 0;
height: 10px;
background: url("images/horizontalShadows.png") 0 -59px repeat-x;
}
.hasArtificialInnerShadow .innerShadowElement.rightSide {
top: 7px;
bottom: 9px;
right: 0;
width: 10px;
background: url("images/verticalShadows.png") -70px 0px repeat-y;
}
.hasArtificialInnerShadow .innerShadowElement.bottomSide {
left: 9px;
right: 7px;
bottom: 0;
height: 10px;
background: url("images/horizontalShadows.png") 0px -70px repeat-x;
}
.hasArtificialInnerShadow .innerShadowElement.leftSide {
top: 9px;
bottom: 8px;
left: 0;
width: 10px;
background: url("images/verticalShadows.png") -59px 0px repeat-y;
}
.noGlow {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
/** ********************* **/
/** Base Theme Properties **/
/** ********************* **/
/** *********************** **/
/** Page Heading Properties **/
/** *********************** **/
/** ************************ **/
/** Media Caption Properties **/
/** ************************ **/
/** ***************** **/
/** Button Properties **/
/** ***************** **/
/** *********************** **/
/** Other Common Properties **/
/** *********************** **/
* {
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%;
}
html.player {
background: #f0f0f0 url("images/page-loader.gif") center no-repeat;
/* for Palyer HTML */
}
html.activity {
background: #f0f0f0 url("images/page-loader.gif") center no-repeat;
/* for templates html */
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
p {
display: block;
margin: 0;
padding: 0;
margin-bottom: 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: #0000ff;
}
.smallCapsFormat {
font-variant: small-caps;
}
/*
html.loader {
background: #F0F0F0 url(images/page-loader.gif) center no-repeat;
height: 100%;
}*/
html.loaded {
background: none;
}
html.loaded #pageContainer {
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
/* IE8 */
/*-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);*/
}
ul p,
ol p,
td p,
th p,
caption p {
margin: 0;
}
.referenceLink, .glossary {
text-decoration: underline;
}
.referenceLink u, .glossary u {
text-decoration: none;
}
#pageWrapper {
padding: 10px;
left: 0;
right: 0;
padding-bottom:0px;
}
#templateContainer {
overflow: auto;
}
#pageContainer {
margin: 0 auto;
padding: 0 20px;
background: white;
-moz-opacity: 0;
-khtml-opacity: 0;
-webkit-opacity: 0;
opacity: 0;
/* IE8 */
/*-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);*/
position: relative;
}
#pageContainer #directionAudioContainer {
right: 10px;
width: 90px;
height: 50px;
position: fixed;
z-index: 1000;
}
.ie7 #pageContainer {
overflow-x: hidden !important;
}
#header {
font-weight: bold;
color: #61adbf;
font-size: 24px;
margin: 0 0 20px 0;
}
#header p {
margin: 0;
}
#description, .description {
margin-bottom: 0;
}
#description p, .description p {
margin-bottom: 18px;
}
#introduction, .introduction {
margin-bottom: 0;
}
#introduction p, .introduction p {
margin-bottom: 18px;
}
#instruction {
margin-bottom: 0;
color: #61adbf;
font-size: 16px;
}
#instruction p {
margin-bottom: 18px;
}
.imageDataGroup {
position: relative;
z-index: 99;

text-align: center;
}
.touch .animationContainer {
max-width: 360px;
max-height: 260px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}/*
.mediaWrapper
{
	max-width:375px;
}*/
.mediaWrapper p {
margin: 0;

}
.mediaWrapper .caption, .caption {
font-weight: bold;
color: #61adbf;
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;
}
.dataTable caption {
color: black;
font-size: 16px;
padding: 5px 0;
}
.dataTable caption span {
padding: 3px 5px;
line-height: 1.5em;
display: inline-block;
border: 1px solid black;
}
.dataTable td {
border: 1px solid black;
padding: 5px;
min-width:80px;
}
.dataTable th {
border: 1px solid black;
padding: 5px;
text-align: center;
}
#cboxLoadedContent .dataTable {
margin-top: 2px;
}
#operationsContainer button, .operationsContainer button {
background: #61adbf;
color: #ffffff;
padding: 8px;
/*width: 144px;*/
width: 140px;
height: 36px;
border: none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
-webkit-box-shadow: -2px -2px 3px rgba(0, 0, 0, 0.5) inset, 2px 2px 3px rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: -2px -2px 3px rgba(0, 0, 0, 0.5) inset, 2px 2px 3px rgba(255, 255, 255, 0.5) inset;
box-shadow: -2px -2px 3px rgba(0, 0, 0, 0.5) inset, 2px 2px 3px rgba(255, 255, 255, 0.5) inset;
}
#operationsContainer button:hover, .operationsContainer button:hover {
background: #61adbf;
}
#operationsContainer button[disabled], .operationsContainer button[disabled] {
background: #7eb7c3;
color: #ffffff;
cursor: default;
text-shadow: none;
font-weight: normal;
text-decoration: none;

}
#operationsContainer button:focus, .operationsContainer button:focus {
outline: 1px dotted #61adbf;
}
#operationsContainer button.styledWithFallback, .operationsContainer button.styledWithFallback {
background: url("images/mainButtonNormal.png") 0 0 no-repeat;
padding: 8px;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
width: 116px;
}
#operationsContainer button.styledWithFallback:hover, .operationsContainer button.styledWithFallback:hover {
background: url("images/mainButtonHover.png") 0 0 no-repeat;
}
#operationsContainer button.styledWithFallback[disabled], .operationsContainer button.styledWithFallback[disabled] {
background: url("images/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;
}
#aside {
z-index: 970;
position: relative;
}
/* **************** */
/* COLOR BOX STYLES */
/* **************** */
#colorbox, #cboxOverlay, #cboxWrapper {
overflow: visible !important;
}
#cboxClose a {
text-indent: -9999px;
display: block;
width: 100%;
height: 100%;
}
#cboxLoadedContent > *:last-child {
margin-bottom: 0;
}
#cboxLoadedContent > *:last-child > *:last-child {
margin-bottom: 0;
}
.touch #cboxLoadedContent {
padding: 0;
}
/* ********************** */
/* IMAGE COMPONENT STYLES */
/* ********************** */
#imgHolder {
position: absolute;
left: -9999px;
top: -9999px;
}
.zoomIcon {
position: absolute;
right: 0px;
bottom: 0px;
width: 46px;
height: 46px;
background: url("images/zoom_icon.png") center no-repeat;
}
.smallZoomIcon{
position: absolute;
right: 0px !important;
bottom: -9px  !important;
}
.imageParent {
position: relative;
display: block;

}
/* *********************************** */
/* EXAMPLE, HINT AND TRANSCRIPT STYLES */
/* *********************************** */
#bottomLinks {
position: relative;
z-index: 990;
}
#hintContainer, #exampleContainer, #trascriptContainer {
float: left;
margin: 0 15px 0 0;
z-index: 500;
}
#hintContainer a, #exampleContainer a, #trascriptContainer a {
padding-left: 34px;
line-height: 30px;
display: block;
cursor: default;
text-decoration: none;
}
#hintContainer {
position: relative;
}
#hintContainer a.tip {
background: url("images/hint_icon.png") 0 0 no-repeat;
cursor: default;
}
#exampleContainer a {
background: url("images/example_icon.png") 0 0 no-repeat;
}
#trascriptContainer a {
padding-left: 38px;
background: url("images/transcript-icon.png") 0 4px no-repeat;
}
#example-info, #exampleContentWrapper {
/*min-width: 600px;*/
}
#example-info .caption, #exampleContentWrapper .caption {
padding: 0;
}
#example-info .mediaWrapper, #exampleContentWrapper .mediaWrapper {
margin: 0 15px 15px 0;
float: left;
max-width: 360px;
text-align: left;
}
#example-info .mediaWrapper p.caption, #exampleContentWrapper .mediaWrapper p.caption {
font-weight: bold;
}
#example-info #mediaWrapper.mediaOnlyExample,
#exampleContentWrapper #mediaWrapper.mediaOnlyExample,
#example-info.mediaOnlyExample .mediaWrapper,
#exampleContentWrapper.mediaOnlyExample .mediaWrapper {
width: 99%;
float: none;
margin: 0 auto;
}
#attemptsWrapper {
float: right;
}
#attemptsWrapper span {
background-image: url("images/star-yellow.png");
background-repeat: no-repeat;
margin-right: 4px;
padding: 3px 7px 1px;
color: transparent;
}
#attemptsWrapper span.disabled {
background-image: url("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;
}
.tooltip * {
word-wrap: break-word;
}
.tooltip .label {
width: 35px;
}
.tooltip a {
color: #0000ff;
font-size: 11px;
font-weight: bold;
}
.tooltip img {
width: 100%;
}
/* *************** */
/* GLOSSARY STYLES */
/* *************** */
.glossaryDescriptionWrapper {
display: none;
/*.boxSizing(border-box);*/
border: 1px solid #61adbf;
background-color: white;
color: #61adbf;
padding: 10px;
max-width: 400px;
-webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
z-index: 99999;
}
.glossaryDescriptionWrapper .tipContentWrapper {
margin: 0;
padding: 0;
}
.glossaryDescriptionWrapper .closeGlossary {
position: absolute;
width: 16px;
height: 16px;
top: 1px;
right: 1px;
left: auto;
bottom: auto;
background: url("images/closeGlossary.png") no-repeat;
text-indent: -9999px;
z-index: 99;
}
.glossaryDescriptionWrapper.left {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 10px 10px 0 10px;
border-radius: 10px 10px 0 10px;
padding: 5px 15px 5px 10px;
}
.glossaryDescriptionWrapper.left .closeGlossary {
top: 1px;
right: 1px;
left: auto;
bottom: auto;
}
.glossaryDescriptionWrapper.bottom.left {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 10px 0 10px 10px;
border-radius: 10px 0 10px 10px;
padding: 5px 10px 5px 20px;
}
.glossaryDescriptionWrapper.bottom.left .closeGlossary {
top: 1px;
left: 1px;
right: auto;
bottom: auto;
}
.glossaryDescriptionWrapper.right {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0;
-webkit-border-radius: 10px 10px 10px 0;
border-radius: 10px 10px 10px 0;
padding: 5px 15px 5px 10px;
}
.glossaryDescriptionWrapper.right .closeGlossary {
top: 1px;
right: 1px;
left: auto;
bottom: auto;
}
.glossaryDescriptionWrapper.bottom.right {
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
padding: 5px 15px 5px 10px;
}
.glossaryDescriptionWrapper.bottom.right .closeGlossary {
top: 1px;
right: 1px;
left: auto;
bottom: auto;
}
.glossaryDescriptionWrapper .leftTopCorner,
.glossaryDescriptionWrapper .rightTopCorner,
.glossaryDescriptionWrapper .leftBotCorner,
.glossaryDescriptionWrapper .rightBotCorner {
width: 13px;
height: 13px;
position: absolute;
background: url("images/glossaryCorners/curves.png") no-repeat;
z-index: 0;
}
.glossaryDescriptionWrapper .leftTopCorner {
background-position: 0 0;
left: -3px;
top: -3px;
}
.glossaryDescriptionWrapper .rightTopCorner {
background-position: -23px 0;
right: -3px;
top: -3px;
}
.glossaryDescriptionWrapper .leftBotCorner {
background-position: 0 -23px;
left: -3px;
bottom: -3px;
}
.glossaryDescriptionWrapper .rightBotCorner {
background-position: -23px -63px;
right: -3px;
bottom: -3px;
}
.glossaryDescriptionWrapper .topShadow, .glossaryDescriptionWrapper .botShadow {
height: 3px;
background: url("images/glossaryCorners/shadow_topBottom.png") repeat-x;
position: absolute;
left: 5px;
right: 5px;
z-index: 0;
}
.glossaryDescriptionWrapper .topShadow {
top: -3px;
background-position: 0 -13px;
}
.glossaryDescriptionWrapper .botShadow {
bottom: -3px;
background-position: 0 0;
}
.glossaryDescriptionWrapper .leftShadow, .glossaryDescriptionWrapper .rightShadow {
width: 3px;
position: absolute;
top: 5px;
bottom: 5px;
background: url("images/glossaryCorners/shadow_leftRight.png") repeat-y;
z-index: 0;
}
.glossaryDescriptionWrapper .leftShadow {
left: -3px;
background-position: -13px 0;
}
.glossaryDescriptionWrapper .rightShadow {
right: -3px;
background-position: 0 0x;
}
.glossaryDescriptionWrapper.bottom.left .rightTopCorner {
background-position: -23px -46px;
}
.glossaryDescriptionWrapper.bottom.left .rightBotCorner {
background-position: -23px -23px;
}
.glossaryDescriptionWrapper.right.top .leftBotCorner {
background-position: 0 -63px;
}
.glossaryDescriptionWrapper.right.top .rightBotCorner {
background-position: -23px -23px;
}
.glossaryDescriptionWrapper.right.bottom .leftBotCorner {
background-position: 0 -23px;
}
.glossaryDescriptionWrapper.right.bottom .leftTopCorner {
background-position: 0 -46px;
}
.glossaryDescriptionWrapper.right.bottom .rightTopCorner {
background-position: -23px 0;
}
.glossaryDescriptionWrapper.right.bottom .rightBotCorner {
background-position: -23px -23px;
}
.glossary {
color: #61adbf;
}
.glossary.highlightedGlossaryTerm {
background: #FFFF99;
}
@media all and (max-width: 800px) {
.glossaryDescriptionWrapper {
max-width: 300px;
}
}
/* ************** */
/* 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;
} 
.zoomIconWrapper{
/*max-width:none;*/
}

.withOutStrechingImage{
	text-align:center !important;
}
.alignCation{
	width: 100% !important;
	text-align: center;
}

#attemptagain{
/*width: 150px !important;*/
width: 200px !important;
/*height:63px !important;*/
}