@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

/********** BEHAVIOUR ************/

#SplashScreen, #MainMenu, #Game, #Loading {
    display: none;
}

#BodyCentral.MainMenu > #MainMenu, #BodyCentral.SplashScreen > #SplashScreen, #BodyCentral.Game > #Game, #BodyCentral.Sandbox > #Game, #BodyCentral.Loading > #Loading {
    display: block;
}

#BodyCentral:not(.Sandbox) .SandboxOnly {
    display: none;
}

/*We want SVG bounding boxes to ignore pointer events*/
svg {
    pointer-events: none;
}

/*But we want the actual SVG content to handle pointer events*/
svg > * {
    pointer-events: painted;
}

.Zone {
    opacity: 0;
}

.Zone.Hint {
    opacity: 0.3;
}

.Zone.Highlight:hover {
    opacity: 1;
}
.Zone.Highlight.On {
    opacity: 1;
}
.Zone.Visible {
    opacity: 1;
}

.HitArea {
    opacity: 0;
}

/*if there's a hit area, the zone image should ignore mouse*/
.HitArea ~ .ZoneImage, .HitArea ~ .ZoneImage>* {
    pointer-events: none;
}

.ZoneImage, .HitArea {
    width: 800px;
    height: 600px;
}

#Game.NoMentor > #MentorContentWrapper {
    opacity: 0;
    bottom:-100px;
    left:100%;
}

#Game.NoMentor #Mentor {
    right: -310px;
}

#CallButton.Disabled {
    right: -170px;
    bottom: -170px;
}

#CallButton {
    right: -25px;
    bottom: -35px;
}

#Clipboard:not(.show) {
    display: none;
}

#BodyCentral:not(.Game) #ProgressionProgress
{
    display: none;
}

#Game .ProgressBar.Hidden:not(.Animating) {
    left: -200px;
}

body > #Glossary {
    display: none; !important
}

.ModelControls, .ToolControls{
    pointer-events: none;
}

.ModelControls > *, .ToolControls > *{
    pointer-events: auto;
}

#Templates {
    display: none !important;
}

#ZoneNameGame .Incorrect, #ZoneNameGame .Misspelled {
    display: none
}

#ZoneNameGame.Misspelled .Misspelled, {
    display: inline;
}

#ZoneNameGame.Misspelled .Incorrect, #ZoneNameGame.Incorrect .Incorrect  {
    display: block;
}

#ZoneNameGame.Misspelled .AnswerForm , #ZoneNameGame.Misspelled .Question , #ZoneNameGame.Incorrect .Question, #ZoneNameGame.Incorrect .AnswerForm {
    display: none;
}

.notransition {
    -webkit-transition: all 0ms !important;
    -moz-transition: all 0ms !important;
    -o-transition: all 0ms !important;
    -ms-transition: all 0ms !important;
    transition: all 0ms !important;
}

/********** END BEHAVIOUR ************/

* {
    box-sizing: border-box;
	-moz-box-sizing:border-box;

	-moz-user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;

    cursor: default;
}

input[type=text],input[type="password"], input[type="search"] {
    -moz-user-select: text;
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;

    cursor: text;
}

body {
    margin: 0;
    padding: 0;
}

#BodyCentral{
    width: 1024px;
    height: 768px;
    border-width: 5px;
    border-style: solid;
    overflow: hidden;

    font-family: 'Montserrat', sans-serif;

    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
/* joshuae4 - iPad resizing */
#BodyCentral {
    max-width: 100%;
    max-height: 100%;
    min-width: 840px;
    min-height: 684px;
}
@media screen and (max-height: 683px) {
    #BodyCentral {
        margin: 0 auto;
    }
}

.CourseHeading {
	width:100%;
	text-shadow: 3px 3px 5px #333;
    filter: dropshadow(color=#333, offx=3, offy=3);
	color:#fff;
}
#MainMenu .CourseHeading {
	text-align:center;
	font-size:3em;
    /*height:50px;*/
}
#Game .CourseHeading {
    left: 88px;


    position: absolute;

    margin: 3px 0 0 5px;
    padding: 0px 0 0 180px;
    background: url(/image/ui/bc_logo_small.png) no-repeat;
}

/* joshuae4 - completed label for main menu */
#CompletedLabel {
    display: none;
    position: relative;
    margin: 50px auto;
    padding: 0 10px;
    width: 332px;
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    text-align: right;
    background: #0c9f39;
    border: rgba(255,255,255,0.5) solid 5px;
    box-shadow: rgba(0,0,0,0.5) 0 0 15px;
    transform: rotate(1deg);
}
#CompletedLabel img {
        position: absolute;
    top: 0px;
    left: 3px;
    height: 46px;
}

/****************
Buttons
****************/

button,
button *,
.BC-Button,
.BC-Button *,
.BC-ButtonContainer > button,
.BC-ButtonContainer > button *,
.ui-menu-item,
.ui-menu-item *,
.ToolButton,
.ToolButton *,
.BC-BlueButton,
.BC-BlueButton *,
.NextViewButton,
.PreviousViewButton,
.ModelButton,
.ModelButton *,
#CallButton,
#CloseButton,
#Clipboard
{
    cursor: pointer;
}

*[disabled] {
    cursor: auto !important;
}

.BC-Button, .BC-ButtonContainer > button {
    display: block;

    font-weight: bold;
    text-decoration: none;
    color: #000000;

    /*linear-gradient*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(#fdfdfd, 0), color-stop(#e4e4e4, 0.5), color-stop(#d3d3d3, 0.5), to(#bcbcbc));
    background: -webkit-linear-gradient(top, #fdfdfd 0%, #e4e4e4 50%, #d3d3d3 50%, #bcbcbc);
    background: -moz-linear-gradient(top, #fdfdfd 0%, #e4e4e4 50%, #d3d3d3 50%, #bcbcbc);
    background: -o-linear-gradient(top, #fdfdfd 0%, #e4e4e4 50%, #d3d3d3 50%, #bcbcbc);
    background: linear-gradient(top, #fdfdfd 0%, #e4e4e4 50%, #d3d3d3 50%, #bcbcbc);
    background: -ms-linear-gradient(top, #fdfdfd 0%, #e4e4e4 50%, #d3d3d3 50%, #bcbcbc);
    background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), color-stop(0.50, #e4e4e4), color-stop(0.50, #d3d3d3), to(#bcbcbc));

    -pie-background: linear-gradient(top, #fdfdfd 0%, #e4e4e4 50%, #d3d3d3 50%, #bcbcbc); /*ie 6-9 via PIE*/
    behavior: url(/css/PIE.htc);

    /*box-shadow*/
    -webkit-box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px 2px rgba(255, 255, 255, 1);
    -moz-box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px 2px rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px 2px rgba(255, 255, 255, 1);
    text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.2), 0px 1px 0px rgba(255, 255, 255, 0.4);

    behavior: url(/css/PIE.htc);
}

.BC-Button:not([disabled]):hover, .BC-ButtonContainer > button:not([disabled]):hover  {
    /*linear-gradient*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(#bdbfbf, 0), color-stop(#a5a5a5, 0.5), color-stop(#9d9f9f, 0.5), to(#8e8f90));
    background: -webkit-linear-gradient(top, #bdbfbf 0%, #a5a5a5 50%, #9d9f9f 50%, #8e8f90);
    background: -moz-linear-gradient(top, #bdbfbf 0%, #a5a5a5 50%, #9d9f9f 50%, #8e8f90);
    background: -o-linear-gradient(top, #bdbfbf 0%, #a5a5a5 50%, #9d9f9f 50%, #8e8f90);
    background: linear-gradient(top, #bdbfbf 0%, #a5a5a5 50%, #9d9f9f 50%, #8e8f90);
    background: -ms-linear-gradient(top, #bdbfbf 0%, #a5a5a5 50%, #9d9f9f 50%, #8e8f90);
    background: -webkit-gradient(linear, left top, left bottom, from(#bdbfbf), color-stop(0.50, #a5a5a5), color-stop(0.50, #9d9f9f), to(#8e8f90));

    -pie-background: linear-gradient(top, #bdbfbf 0%, #a5a5a5 50%, #9d9f9f 50%, #8e8f90); /*ie 6-9 via PIE*/
    behavior: url(/css/PIE.htc);
}


.BC-Button[disabled], .BC-ButtonContainer > button[disabled] {
    /*linear-gradient*/
    background: -webkit-gradient(linear, left top, left bottom, color-stop(#ababab, 0), color-stop(#a5a5a5, 0.5), color-stop(#9d9d9d, 0.5), to(#929292));
    background: -webkit-linear-gradient(top, #ababab 0%, #a5a5a5 50%, #9d9d9d 50%, #929292);
    background: -moz-linear-gradient(top, #ababab 0%, #a5a5a5 50%, #9d9d9d 50%, #929292);
    background: -o-linear-gradient(top, #ababab 0%, #a5a5a5 50%, #9d9d9d 50%, #929292);
    background: linear-gradient(top, #ababab 0%, #a5a5a5 50%, #9d9d9d 50%, #929292);
    background: -ms-linear-gradient(top, #ababab 0%, #a5a5a5 50%, #9d9d9d 50%, #929292);
    background: -webkit-gradient(linear, left top, left bottom, from(#ababab), color-stop(0.50, #a5a5a5), color-stop(0.50, #9d9d9d), to(#929292));

    -pie-background: linear-gradient(top, #ababab 0%, #a5a5a5 50%, #9d9d9d 50%, #929292); /*ie 6-9 via PIE*/
    behavior: url(/css/PIE.htc);
}


.ToolButton {
    display: inline-block;
    width: 64px;
    height: 64px;
    background: url('/image/ui/yellow_button_original.svg') center no-repeat;
    border-style: none;
    margin: 0 3px;
    padding: 2px;
}

.ToolButton:hover {
    background-image: url('/image/ui/yellow_button_glow.svg');
}

.ToolButton.On:active {
    background-image: url('/image/ui/yellow_button_original.svg');
}

/* Toggled ON button */
.ToolButton:active, .ToolButton.On {
    background-image: url('/image/ui/yellow_button_hover.svg');
}

/****************
Dialogue box
****************/

.dialogue {
    padding: 10px;
    border: #000000 solid 7px;
    background-color: #FFFFFF;

    text-align: center;
    overflow: hidden;

    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    behavior: url(/css/PIE.htc);
}

#ProgressionMenu, #StageMenu {
	width:100%;
}
/****************
Splash screen and Main Menu panels
****************/

#SplashScreen,#MainMenu,#Game{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


#SplashScreen,
#MainMenu {
    background-color: #666666;
    background-image: url('/image/ui/menu-mentor.png');
    background-position: 674px 417px;
    background-repeat: no-repeat;
}

@media screen and (max-width: 1023px) {
    #SplashScreen,
    #MainMenu {
        background-position-y: 106%;
        background-position-x: 152%;
        background-size: 56%;
    }
}


#SplashScreen h1,
#MainMenu h1 {
    text-align: center;
    font-size: 128px;
    text-shadow: 5px 5px 15px rgba(0, 0, 0, 1.0);
    font-variant: small-caps;
    font-weight: normal;
    color: #FFFFFF;
    margin: 0;
}

#SplashScreen h1 span,
#MainMenu h1 span {
    color: #FCC62E;
}

#SplashScreen .dialogue {
    width: 630px;
    margin: 30px auto;
}

#SplashScreen .WelcomeMessage {
    font-size: 36px;
    font-weight: bold;
}

#MainMenu button {
    margin: 10px auto;
    width: 550px;
    font-size: 36px;
    padding: 5px 20px;

    border: 4px solid #2c2c2c;

    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    behavior: url(/css/PIE.htc);
}
#MainMenu #SelectCourseButton {
	position:absolute;
	left:10px;
	bottom:0;
	width:450px;
}

#MainMenu button:first-of-type {
    margin-top: 40px;
}

/****************
Game (layout)
****************/

#Game {
    background: #6A6B6B;
    background: -webkit-radial-gradient(576px 250px, circle farthest-corner, white 0%, white 19%, #6A6B6B 100%);
    background: -moz-radial-gradient(576px 250px, circle farthest-corner, white 0%, white 19%, #6A6B6B 100%);
    background: -ms-radial-gradient(576px 250px, circle farthest-corner, white 0%, white 19%, #6A6B6B 100%);
    background: -o-radial-gradient(576px 250px, circle farthest-corner, white 0%, white 19%, #6A6B6B 100%);
}

/*All containers/overlays should be anchored to the top left of their parent*/
#CertificateContainer, .ModelControls, .DisableOverlay, .SelectModelToInvestigateMessage, .LoadingOverlay, .Overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* stray column of pixels left uncovered for some reason... This fixes*/
#InvestigativeEnvironment .DisableOverlay {
    right: -1px;
}
/****************
Game > Investigative Environment
****************/

#InvestigativeEnvironment {
    position: absolute;

    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

    width: 830px;
    height: 640px;
    bottom: 80px;
    border: none;

    overflow: hidden;
    background-color: #ffffff;

    -webkit-box-shadow: 0px 0px 7px 2px rgb(102, 102, 102);
    -moz-box-shadow: 0px 0px 7px 2px rgb(102, 102, 102);
    box-shadow: 0px 0px 7px 2px rgb(102, 102, 102);

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    behavior: url(/css/PIE.htc);
}

/* joshuae4 - iPad resizing */
#InvestigativeEnvironment {
    top: 38px;
}

/*ModelContainer and OverlayContainer should be aligned*/
#InvestigativeEnvironment .ModelContainer, #InvestigativeEnvironment .OverlayContainer {
    width: 800px;
    height: 600px;
    position: absolute;
    top: 35px;

    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

#InvestigativeEnvironment .ModelContainer {
background-color: #fff;
}

/*****************
Game > Button Area
*****************/

#GameControls {
    position: absolute;
    right: 5px;
    top: 40px;
    width: 80px;
    padding: 0;
}

.BC-BlueButton {
    padding: 0;
    margin: 0;
    width: 80px;
    height: 85px;
    background-position: center;
    background-repeat: no-repeat;

    /*transition*/
    /*-webkit-transition:margin-left 1s;*/
    /*-moz-transition:margin-left 1s;*/
    /*-o-transition:margin-left 1s;*/
    /*transition:margin-left 1s;*/

    background-size: contain;
}

#GameControls.Disabled > .BC-BlueButton, .BC-BlueButton.Disabled {
    margin-left: 200px;
}

.ReturnToMenuButton {
    background-image: url('/image/ui/menu_button_original.svg');
}

.ReturnToMenuButton:hover {
    background-image: url('/image/ui/menu_button_hover.svg');
}

.ReturnToMenuButton:active {
    background-image: url('/image/ui/menu_button_glow.svg');
}

#GlossaryButton {
    background-image: url('/image/ui/glossary_button_original.svg');
}

#GlossaryButton:hover {
    background-image: url('/image/ui/glossary_button_hover.svg');
}

#GlossaryButton:active, #GlossaryButton.On {
    background-image: url('/image/ui/glossary_button_glow.svg');
}

#ClipboardButton {
    background-image: url('/image/ui/clipboard_button_original.svg');
}

#ClipboardButton.unchecked {
    background-image: url('/image/ui/clipboard_button_greenoriginal.svg');
}

#ClipboardButton.unchecked:hover {
    background-image: url('/image/ui/clipboard_button_greenhover.svg');
}
#ClipboardButton.unchecked:active {
    background-image: url('/image/ui/clipboard_button_greenglow.svg');
}

#ClipboardButton:hover {
    background-image: url('/image/ui/clipboard_button_hover.svg');
}

#ClipboardButton:active {
    background-image: url('/image/ui/clipboard_button_glow.svg');
}

.ModelControls .NextViewButton, .ModelControls .PreviousViewButton {
	position: absolute;
    margin-top: auto;
    margin-bottom: auto;
    top: 0;
    bottom: 0;
    background-position: center;
    background-repeat: no-repeat;
}

.NextViewButton, .PreviousViewButton {
    width: 65px;
    height: 50px;
    margin: 0;
    padding: 0;
}

.PreviousViewButton {
    background-image: url('/image/ui/arrow_left_original.svg');
}

.PreviousViewButton:hover {
    background-image: url('/image/ui/arrow_left_hover.svg');
}

.NextViewButton {
    background-image: url('/image/ui/arrow_right_original.svg');
}

.NextViewButton:hover {
    background-image: url('/image/ui/arrow_right_hover.svg');
}

.ModelControls .NextViewButton {
	right:15px;
}
.ModelControls .PreviousViewButton {
	left:15px;
}

#InvestigationContainer {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    bottom: 0px;
    width: 830px;
    height: 100%;
    left: 0;
    right: 0;
}

.DisableOverlay {
    background-color: black;
    opacity: 0.4;
}

#InvestigativeEnvironment > .DisableOverlay {
    opacity: 0.7;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(/css/PIE.htc);
}

/****************
Game > Tool Box
****************/

#InvestigationControls {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

    height: 70px;
    bottom: 3px;
    width: 75%;

    overflow: hidden;

    -webkit-transition:bottom 0.8s;
    -moz-transition:bottom 0.8s;
    -o-transition:bottom 0.8s;
    transition:bottom 0.8s;
}

#InvestigativeEnvironment.Disabled ~ #InvestigationControls {
    pointer-events: none;
    bottom: -80px;
}

.ToolControls {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

.ToolButtonGroup {
    display: inline;
}

.ModelButtons {
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.ViewButtons > .ModelButtons {
    overflow-x: hidden;
}

/*.ModelButton:nth-of-type(even) {*/
    /*background-color: #eee;*/
/*}*/

/*.ViewButtons:nth-of-type(even), .ViewButtons:nth-of-type(even) * {*/
    /*background-color: #eee;*/
/*}*/

.ModelButton, .ViewButtons, .ViewButton {
    display: inline-block;
    border:1px solid #000;

    background-color:#fff;
	text-align:center;
	margin:5px;
}

.ViewButton *, .ModelButton * {
    cursor: pointer;
}

.ViewButton {
    border: none;
}

.ModelButton img, .ViewButton img {
	width:300px;
	height:225px;
}
.ModelButton:hover, .ViewButton:hover, .ViewButtons:hover {
	background-color:#ddd;
	border-color:#ffcc33;
}

#NextView, #PreviousView {
    position: relative;
    top: 0;
    left: 0;
}

/*****************
Game > Model
*****************/

/*anchor model and related images to top left*/
/*.ModelImage,*/
.Overlay > *,
.Zone > * {
    position: absolute;
}


/*****************
Game > Mentor Overlay
*****************/

#Mentor {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 280px;
    height: 225px;
    background-color: transparent;

    /*Mentor hidden after trial feedback suggests that he is distracting */
   /*
    background-image: url('../image/mentor_happy.png');
    background-position: top left;
    background-repeat: no-repeat;

    transition: right 0.8s;
    -moz-transition: right 0.8s;
    -webkit-transition: right 0.8s;
    -o-transition: right 0.8s; */
}

#Mentor.Angry {
    /*background-image:url('../image/angrymentor.jpg');*/
}

#CallButton {
    position: absolute;
    background-position: bottom left;

    background-image: url('/image/ui/next_button_original.svg');
    width: 185px;
    height: 150px;
    -webkit-transition:right 0.8s, bottom 0.8s;
    -moz-transition:right 0.8s, bottom 0.8s;
    -o-transition:right 0.8s, bottom 0.8s;
    transition:right 0.8s, bottom 0.8s;
}

#CallButton:hover {
    background-image: url('/image/ui/next_button_hover.svg');
}

#MentorContentWrapper {
    position: absolute;
    height: auto;
    max-height: 705px;
    min-height: 150px;
    bottom: 76px;

    width: 890px;

    padding: 12px 25px;

    left: 0;
    right: 0;
    margin: auto;

    overflow: hidden;

    transition: all 0.8s;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
}

/* joshuae4 - iPad resizing */
#MentorContentWrapper {
    max-width: 100%;
}
@media screen and (max-width: 1023px) {
    #MentorContentWrapper {
        max-width: 80%;
    }
}

.ProgressionSelector, .StageSelector {
	height:250px;
}

.MentorContent {
    font-size: 28px;
}
.MentorContent ul {
	font-size: 18px;
}
.MentorContent .BC-ButtonContainer > button, .MentorContent .BC-Button{
	display:inline;
    margin: 10px;
    width: auto;
    font-size: 18px;
    padding: 8px 25px;

    border: 1px solid #2c2c2c;

    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    behavior: url(/css/PIE.htc);
}

/*****************
Game > Clipboard
*****************/

#Clipboard {
    position: absolute;
    top: 125px;
    left: 275px;
    width: 425px;
    height: 524px;
    background: url('/image/ui/clipboard.png') no-repeat;
    padding: 90px 70px;
    text-align: center;
    font-size: 24px;
    overflow: hidden;
}
#Clipboard > #CloseButton {
	position: absolute;
	top: 34px;
	right: 30px;
	width: 22px;
	height: 22px;
	background:url(/image/ui/close.png) top left no-repeat;
}

#Clipboard > #CloseButton:hover {
	background:url(/image/ui/close.png) bottom left no-repeat;
}

/*****************
Game > Stages Progression (horizontal)
*****************/

#BodyCentral.Game #ProgressionProgress {
    position: absolute;
    top: 39px;
    left: 90px;
}

.StageStar {
    background-image: url('/image/ui/gold-star.svg');
    width: 50px;
    height: 50px;
    display: inline-block;
    opacity: 0.3;

    -webkit-transition: -webkit-transform 1s, opacity 1s;
    -moz-transition:transform 1s, opacity 1s;
    -o-transition:transform 1s, opacity 1s;
    -ms-transition:transform 1s, opacity 1s;
    transition:transform 1s, opacity 1s;
}

.StageStar.Complete {
    opacity: 1;

    -webkit-transform:rotate(360deg) scale(1.1,1.1);
    -moz-transform:rotate(360deg) scale(1.1,1.1);
    -ms-transform:rotate(360deg) scale(1.1,1.1);
    -o-transform:rotate(360deg) scale(1.1,1.1);
    transform:rotate(360deg) scale(1.1,1.1);
}


#QuestionGameResponse .SilverStar {
    top: 64px;
    left: 85px;
}

.PlayerAnswer.Incorrect ~ .SilverStar, .PlayerAnswer.Misspelled ~ .SilverStar {
    visibility: hidden;
}

#QuestionGameResponse .PlayerAnswer {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.SilverStar {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    overflow: visible !important;
}

.SilverStar > img {
    width: 100%;
    height: 100%;
    margin-left: -50%;
    margin-top: -50%;

    -webkit-animation:rotate 2s linear infinite,scaleIn 1s;
    -moz-animation:rotate 2s linear infinite,scaleIn 1s;
    -ms-animation:rotate 2s linear infinite,scaleIn 1s;
    -o-animation:rotate 2s linear infinite,scaleIn 1s;
    animation:rotate 2s linear infinite,scaleIn 1s;
}

/* rotation animation */
@-webkit-keyframes rotate {
    from { -webkit-transform:rotate(0deg); }
    to { -webkit-transform:rotate(360deg); }
}

@keyframes rotate {
    from { -moz-transform:rotate(0deg); }
    to { -moz-transform:rotate(360deg); }
}

@-webkit-keyframes scaleIn {
    from { height:0%; width: 0%}
    to { height:100%; width: 100%}
}

@-webkit-keyframes scaleIn {
    from { height:0%; width: 0%}
    to { height:100%; width: 100%}
}

.Feedback {
	font-weight:bold;
	font-size:2em;
	top:100px;
	position:fixed;
	opacity:0;
	display:block;
	z-index:9999;
	/*cursor:default;*/
    pointer-events: none;
}
.Feedback.Correct {
	color:#090;
}
.Feedback.Incorrect {
	color:#900;
}

#ZoneNameGame .Feedback {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: auto;
    bottom: 100px;
    display: inline-block;
}


/*****************
Game > Progress Bar (vertical)
*****************/

#Game .ProgressBar {
    position: absolute;
    left: -10px;
    bottom: -19px;

    width: 155px;
    height: 720px;

    background-color: transparent;
    background-image: url('/image/ui/progress_bar_tube.png');
    border: none;

    transition: all 0.7s;
    -moz-transition: all 0.7s;
    -webkit-transition: all 0.7s;
    -o-transition: all 0.7s;}

#Tube {
    position: absolute;
    bottom: 131px;
    left: 46px;

    width: 50px;
    height: 550px;

}

#ProgressFill {
    position: absolute;
    bottom: 0px;

    width: 100%;
    height: 1%;

    /*linear-gradient*/
    background: #b9b9b9;
    background:-ms-linear-gradient(        right,        #555555 0%,        #ffffff 40%,        #999999);
    background:-webkit-gradient(linear,right top,left top,color-stop(#555555,0),color-stop(#ffffff,0.4),to(#999999));
    background:-webkit-linear-gradient(        right,        #555555 0%,        #ffffff 40%,        #999999);
    background:-moz-linear-gradient(        right,        #555555 0%,        #ffffff 40%,        #999999);
    background:-o-linear-gradient(        right,        #555555 0%,        #ffffff 40%,        #999999);
    background:linear-gradient(        right,        #555555 0%,        #ffffff 40%,        #999999);
    background:-webkit-gradient(        linear, right top, left top,        from(#555555),        color-stop(0.40, #ffffff),        to(#999999));

    -pie-background: linear-gradient(        right,        #555555 0%,        #ffffff 40%,        #999999); /*ie 6-9 via PIE*/
    behavior: url(/css/PIE.htc);

    -webkit-border-top-left-radius:4px;
    -moz-border-radius-topleft:4px;
    border-top-left-radius:4px;
    -webkit-border-top-right-radius:4px;
    -moz-border-radius-topright:4px;
    border-top-right-radius:4px;

    border:#666666 solid 1px;
    border-top:none;

    /*transition*/
    -webkit-transition:height 1s;
    -moz-transition:height 1s;
    -o-transition:height 1s;
    transition:height 1s;

}

#Gauge {
    position: absolute;
    left: 0px;
    bottom: 0px;

    width: 155px;
    height: 720px;

    background-color: transparent;
    background-image: url('/image/ui/progress_bar_gauge.png');
    border: none;
}

/*****************
Game > Explanation
*****************/

.Explanation {
    display: block;
}

/*****************
Game > Answer
*****************/

.Answer {
    font-weight: bold;
}

.Answer.Correct {
    color: green;
}

.Answer.Incorrect {
    color: red;
}

.Answer.Misspelled {
    color: blue;
}

/*****************
Game > Glossary
*****************/

#Glossary {
    background-color: #333;
    max-height: 500px;
}

#Glossary > #GlossaryDefinition {
    float: right;
    width: 420px;
	color: #fff;
}
#GlossaryDefinition h2 {
	margin-top:0;
}
#GlossaryTerms li.highlight {
	border:2px solid #ffcc33;

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    behavior: url(/css/PIE.htc);


    background-color: #eee;
}
#Glossary > #GlossarySearch {
    float: left;
    width: 200px;
	margin-right: 10px;
}
#Glossary #GlossaryTerms {
	max-height:450px;
	overflow-y:auto;
	overflow-x:hidden;
}
#Glossary #GlossaryFilter {
	width:100%;

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    behavior: url(/css/PIE.htc);

	border:1px solid #000;
}
#Glossary #GlossaryFilter:focus, #Glossary #GlossaryFilter:active {
	border:1px solid #ffcc33;

}
/*****************
Game > Hangman
*****************/

.MentorContent #HangmanKeyboard .HangmanKey {
    margin:5px;
    width: 55px;
    padding: 5px 0;
    float:left;
}

.HangmanKeyboardRow {
    clear:both;
}

#HangmanKeyboardRow2 {
    margin-left: 15px;
}

#HangmanKeyboardRow3 {
    margin-left: 30px;
}

#HangmanKeyboard {
    border: #000000 solid 2px;
    width: 675px;
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    padding: 10px;

    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    behavior: url(/css/PIE.htc);

}

#HangmanImage {
    width: 200px;
    height: 75px;
    background-image:url(/image/ui/heart-good.gif);
	box-shadow: 0 0 10px 3px #888;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;

    behavior: url(/css/PIE.htc);
}

#HangmanImage.Tachycardic {
	background-image:url(/image/ui/heart-tach.gif);
}

#HangmanImage.Arrythmic {
    background-image:url(/image/ui/heart-arr.gif);
}

#HangmanAnswer {
    margin: 20px;
    font-weight: bold;
}

/* joshuae4 - iPad resizing */
#HangmanKeyboard {
    display: inline-block;
    width: auto;
    max-width: 100%;
}
@media screen and (max-width: 939px) {
    .MentorContent #HangmanKeyboard .HangmanKey {
        width: 47px;
    }
    #HangmanImage {
        zoom: 75%;
    }
}

/*****************
Game > Organ ID and Zone Name games
*****************/

.SmallModel {
    position: relative;
    display: block;
    height: 300px;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.SmallModel svg.ZoneImage, .SmallModel svg.HitArea {
    width: 400px;
    height: 300px;
}

.MediumModelContainer svg.ZoneImage, .MediumModelContainer svg.HitArea {
    width: 640px;
    height: 480px;
}

.MediumModel svg.ZoneImage, .MediumModel svg.HitArea {
    width: 640px;
    height: 480px;
}

.MediumModel {
    position: relative;
    display: block;
    height: 480px;
    width: 640px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

/*****************
Game > Sandbox Navigation
*****************/
#MentorNavigation {
    position: absolute;
    top: 2px;
    right: 2px;
}
#MentorNavigation > * {
	width:30px;
	height:30px;
	display: inline-block;
}

#MentorNavigation .ReturnToMenuButton {
    background-image: url('/image/ui/blue_button_original.svg');
}

#MentorNavigation .ReturnToMenuButton:hover {
    background-image: url('/image/ui/blue_button_hover.svg');
}

#MentorNavigation .ReturnToMenuButton:active {
    background-image: url('/image/ui/blue_button_glow.svg');
}

#MentorNavigation .ReturnToSandBoxMenuButton {
    height: 29px;
}

.ReturnToSandBoxMenuButton{
    cursor: pointer;
    background: url('/image/ui/sandbox_menu_button_original.svg')
    center no-repeat;
    background-size: contain;
}

.ReturnToSandBoxMenuButton:hover {
    background-image: url('/image/ui/sandbox_menu_button_hover.svg');
}

.ReturnToSandBoxMenuButton:active {
    background-image: url('/image/ui/sandbox_menu_button_glow.svg');
}

/*#SandboxNavigation > #Close {*/
	/*background:url(/image/ui/close.png) top left no-repeat;*/
/*}*/
/*#SandboxNavigation > #Close:hover {*/
	/*background:url(/image/ui/close.png) bottom left no-repeat;*/
/*}*/

#SandboxMenu .BC-Button, #SandboxMenu.BC-ButtonContainer > button {
    display:block;
    margin: 10px auto;
    width: 50%;
}

/*******************
Certificate
*******************/
#Certificate {
    width: 1024px;
    height: 768px;
    position:absolute;
    /*opacity:0;*/

    /*transition-delay*/
    -webkit-transition-delay:0.6s;
    -moz-transition-delay:0.6s;
    -o-transition-delay:0.6s;
    transition-delay:0.6s;

    /*transition*/
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;

    /*transform*/
    -webkit-transform:rotate(1deg) scale(0.01,0.01);
    -moz-transform:rotate(1deg) scale(0.01,0.01);
    -ms-transform:rotate(1deg) scale(0.01,0.01);
    -o-transform:rotate(1deg) scale(0.01,0.01);
    transform:rotate(1deg) scale(0.01,0.01);

	background: no-repeat;
    background-position: center;
}

/* joshuae4 - iPad resizing */
#Certificate {
    max-width: 100%;
}

#Certificate .description {
	text-align: center;
	width: 100%;
	position: relative;
	margin-top: 250px;
	display: block;
}
#CertificateContainer.Present #Certificate {
    -webkit-transform:rotate(720deg) scale(1,1);
    -moz-transform:rotate(720deg) scale(1,1);
    -ms-transform:rotate(720deg) scale(1,1);
    -o-transform:rotate(720deg) scale(1,1);
    transform:rotate(720deg) scale(1,1);
}

#CertificateContainer.Present, #CertificateContainer.Present * {
    cursor: pointer;
}

#CertificateText {
    position: absolute;
    font-size: 1.5em;
    text-align: center;
}

/* joshuae4 - iPad resizing */
#CertificateText {
    bottom: 300px !important;
    left: auto !important;
    width: 100% !important;
}

/*******************
Loading overlays
*******************/
.LoadingOverlay {
    background: #ffffff url(/image/ui/loading-throbber-64.gif) no-repeat;
    background-position: center;
}

#InvestigativeEnvironment .LoadingOverlay {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(/css/PIE.htc);
}

/*****************
other
*****************/

.GlossaryPopup .Name {
    font-weight: bold;
}

.ui-widget {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
}

.AnswerTextInput {
    font-size: 28px;
    font-weight: bold;
    width: 520px;
}

.AnswerTextInput, .AnswerTextInput ~ * {
    /*display:table-cell; */
    vertical-align:middle;
}

.ZoneNameGameText {
    display: block;
    margin: 8px;

}

.Minigame .ContinueButton {
    margin-left: auto !important;
    margin-right: auto !important;
}

#ZoneIdGame .Zone, #ZoneIdGame .Zone * {
    cursor: pointer;
}

.Zone.Popup, .Zone.Popup * {
    cursor: pointer;
}

.CheckboxListContainer {
    text-align: left;
    display: inline-block;
}

.CheckboxListContainer > label {
    display: inline;
}

.CheckboxListContainer input{
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.MentorContent .CheckboxListContainer ~ .SubmitButton {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#JavascriptWelcome {
    height: 330px;
}

#NoJavascriptWelcome, #NoJavascriptWelcome *, #NotSupportedWelcome, #NotSupportedWelcome * {
    font-size: 18px;
}

#NoJavascriptWelcome > ul, #NotSupportedWelcome > ul {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}


#Loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #676767 url(/image/ui/loading-head.svg) no-repeat;
    background-position: 242px 251px;
}

#LoadingProgress {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 65%;
    position: absolute;
}

#Loading > h1 {
    left: 423px;
    font-size: 67px;
    font-weight: normal;
    color: white;
    top: 36%;
    position: absolute;
    text-shadow: 8px 8px 15px black;
}

#MainMenu .CopyrightMessage {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 5px;
    color: whitesmoke;
}

#GlossaryIdText {
    max-height: 80px;
    overflow-y: scroll;
}