/* CSS Document */

.Token, .Token_Locked, .Token_Highlighted, .Token_Locked_Highlighted {
/*position:absolute;*/
/*
height:44px;
width:44px;
border-width:3px;
border-color:#000000;
border-style:solid;
*/
/*color:#0054A6;*/
text-align:center;
vertical-align:middle;
font-size:28px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url(images/Token.png);
height:36px;
width:36px;
border-width:2px;
/*border-color:#818284;*/
border-style:solid;
}
div.Token, div.Token_Locked, div.Token_Highlighted, div.Token_Locked_Highlighted {
position:absolute;
}

#FreePlayButton {
font-size:20px;
font-weight:bold;
height:25px;

}

#InterfaceCap {
/*This only shows up in print mode to make the interface look better.*/
position:absolute;
background-image:url(images/InterfaceCap.gif);
top:265px;
left:0px;
/*The effective height is only supposed to be 15px, but IE shows too much, so the reset of the picture is white*/
height:30px;
width:550px;
z-index:178;
visibility:hidden;
}

.ShowStateArea {
position:absolute;
top:0px;
left:0px;
width:45px;
height:100%;
cursor:pointer;
background-image:url(images/blank.gif);
z-index:50;
}

#DimmedInterface {
position:absolute;
top:0px;
left:0px;
z-index:290;

width:800px;
height:550px;
visibility:hidden;
background-image:url(images/dimmed.gif);
background-repeat:repeat;
}

#GameLoadingScreen {
position:absolute;
height:550px;
width:800px;
vertical-align:middle;
text-align:center;
background-color:#FFFFFF;
font-size:32px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;

visibility:visible;
z-index:800;
}

#PuzzleHolder {
position:absolute;
top:75px;
left:0px;
height:150px;
width:550px;
}

#PuzzleControls {
position:absolute;

height:28px;
/*width was 395, but beacuse of padding?*/
width:345px;
left:0px;
top:162px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}

#GoalControls {
position:absolute;

height:28px;
width:155px;
left:395px;
top:162px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}


.RoundedCorner_UL {
background-image:url(images/EdgeUL.gif);
}

.RoundedCorner_UR {
background-image:url(images/EdgeUR.gif);
}

.RoundedCorner_BL {
background-image:url(images/EdgeBL.gif);
}

.RoundedCorner_BR {
background-image:url(images/EdgeBR.gif);
}


.OrangeRoundedCorner_UL {
background-image:url(images/OrangeEdgeUL.gif);
}

.OrangeRoundedCorner_UR {
background-image:url(images/OrangeEdgeUR.gif);
}

.OrangeRoundedCorner_BL {
background-image:url(images/OrangeEdgeBL.gif);
}

.OrangeRoundedCorner_BR {
background-image:url(images/OrangeEdgeBR.gif);
}

.StrokedEdge {
background-color:#FF7F00;
}
#FlipSideGame>#DimmedInterface {
/*IE doesn't understand this, so it won't show the pngs*/

background-image:url(images/dimmed.png);
}



#PlayControls {
position:absolute;
top:70px;
left:-50px;
width:75px;

font-size:16px;
border-width:2px;
border-style:solid;
background-color:#CCCCCC;
border-color:#666666;

font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}

.MiniToken, .MiniToken_Locked, .MiniToken_Highlighted, .MiniToken_Locked_Highlighted {
/*color:#0054A6;*/
text-align:center;
font-size:16px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url(images/MiniToken.png);
height:19px;
width:19px;
border-width:1px;
/*border-color:#818284;*/
border-style:solid;
}
div.MiniToken, div.MiniToken_Locked, div.MiniToken_Highlighted, div.MiniToken_Locked_Highlighted {
position:absolute;
}

.Token_Locked, .MiniToken_Locked {
border-color:#666666;
color:#666666;
}

.Token_Highlighted, .MiniToken_Highlighted {
border-color:#818284;
color:#FF0000;

}

.Token_Locked_Highlighted, .MiniToken_Locked_Highlighted {
border-color:#666666;
color:#666666;
}

.Token, .MiniToken {

/* base changing props */
border-color:#818284;
color:#0054A6;
}

#goaltokenHighlight {
border-color:#FF0000;
visibility:hidden;
background-image:none;
z-index:103;
border-width:2px;
width:17px;
height:17px;
}

#tokenHighlight {
border-color:#FF0000;
visibility:hidden;
background-image:none;
z-index:102;
border-width:3px;
width:34px;
height:34px;
}

#NewGoalButton.EnabledControl, #NewPuzzleButton.EnabledControl,#StartOverButton.EnabledControl {
text-decoration:underline;
color:#0054A6;

}
#NewGoalButton.DisabledControl, #NewPuzzleButton.DisabledControl,#StartOverButton.DisabledControl {
text-decoration:underline;
color:#999999;
}

#PuzzleInputTitleText {
color:#CCCCCC;
font-weight:bold;
padding-top:5px;
font-size:15px;
padding-left:25px;
}

#PrintBox {
/*
position:absolute;
top:296px;
left:200px;
*/

width:60%;
visibility:hidden;
padding:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;

}

.PrintDone {
font-size:130%;
}

.PrintStepNumber {
font-weight:bold;
}

.PrintSection, .PrintSkipped {
font-size:110%;

}

.PrintHeading {
font-size:140%;
}

.EnabledControl {
text-decoration:none;
font-weight:bold;
color:#fd8401;
cursor:pointer;
}
.DisabledControl {
text-decoration:none;
font-weight:normal;
color:#999999;
cursor:default;
}

.InvisControl {
text-decoration:none;
color:#FFFFFF;
cursor:default;
}

#PuzzleInputWindow{
position:absolute;
top:100px;
left:100px;
width:600px;
/*
height:300px;
*/
height:auto;
visibility:hidden;
z-index:300;
/*padding:10px;*/
background-color:#FFFFFF;
border-color:#000000;
border-width:thin;
border-style:solid;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#PuzzleInputForm {
padding:15px;

}
#MessageArea {
position:absolute;
left:0px;
top:265px;
width:550px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
font-size:12px;

height:285px;
/*

border-color:#666666;
border-width:2px;
border-style:solid;
*/
}


#MainGameHeading { 
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#666666;
font-size:225%;
font-weight:bold;



}

#MessageAreaHeading {
font-size:14px;
font-weight:bold;
text-align:center;
vertical-align:bottom;
}



#GameArea {
position:absolute;
top:75px;
left:0px;
width:550px;
height:190px;
}

#InterfaceBackground {
position:absolute;
height:550px;
width:550px;
top:0px;
left:0px;
z-index:0;
background-image:url(images/InterfaceBackground.gif);
}

#ControlBar {

font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
position:absolute;
left:0px;
top:0px;

height:75px;
width:550px;

/*
padding:10px;
background-color:#FFEB8E;

border-color:#fd8401;
border-width:2px;
border-style:solid;
*/



}

Body {


padding-left:25px;
padding-right:25px;

}

#InputFormWindowBar{
height:25px;
background-color:#666666;

width:100%;
}

#GoalArea {
position:absolute;
left:419px;
top:61px;
height:40px;
width:100px;

}

#PuzzleArea {
position:absolute;
top:42px;
/*left was 125px */
left:57px;
width:280px;
height:80px;
z-index:280;
}

#InstructionArea {
position:absolute;
overflow:auto;
/*Should be 250, but leave room to allow for vertical scroll bar */
width:270px;
left:550px;
top:0px;

height:550px;

}

.InstructionCardImage {
position:absolute;
top:0px;
left:0px;
height:83px;
width:250px;
z-index:49;
cursor:pointer;
}

.InstructionCard {
visibility:hidden;
position:absolute;
height:0px;
width:100%;
}


#TopRowRightButton, #TopRowLeftButton, #BottomRowLeftButton, #BottomRowRightButton, #FlipAreaButton, #SwitchToSolveButton {
position:absolute;
height:40px;
width:40px;
vertical-align:middle;
font-size:26px;
text-align:center;
font-weight:bold;

}

#TopRowLeftButton {
left:17px;
top:42px;
}


#TopRowRightButton {
left:337px;
top:42px;
}
#BottomRowLeftButton {
left:17px;
top:82px;
}
#BottomRowRightButton {
left:337px;
top:82px;
}
#FlipAreaButton {
left:177px;
top:136px;
}
#SwitchToSolveButton {
visibility:hidden;
}


#TopRowLeftButton.EnabledControl, #BottomRowLeftButton.EnabledControl {
background-image:url(images/LeftArrow_Multi.gif);
background-position: 0px 0px;
}

#TopRowLeftButton.DisabledControl, #BottomRowLeftButton.DisabledControl {
background-image:url(images/LeftArrow_Multi.gif);
background-position: 0px -40px;
}


#TopRowRightButton.EnabledControl, #BottomRowRightButton.EnabledControl {
background-image:url(images/RightArrow_Multi.gif);
background-position: 0px 0px;
}
#TopRowRightButton.DisabledControl, #BottomRowRightButton.DisabledControl {

background-image:url(images/RightArrow_Multi.gif);
background-position: 0px -40px;


}

#FlipAreaButton.EnabledControl {
background-image:url(images/RotateArrows_Multi.gif);
background-position:0px 0px;
}
#FlipAreaButton.DisabledControl {

background-image:url(images/RotateArrows_Multi.gif);
background-position:0px -40px;

}

#FlipSideGame {
position:absolute;
left:50%;
margin-left:-400px;

top:0px;
width:800px;
height:265px;
/* This used to be the actual value of 550, but that gives problems for layout in print mode.
this value, which is the value of just the controlbar and game area, should be more proper and work better.
height:550px;
*/
}
#SlideAreaBackground {
position:absolute;
width:280px;
height:80px;
left:0px;
top:0px;
background-color:#0054A6;
}

#MiniFlipArea {
position:absolute;
width:74px;
height:54px;
left:33px;
top:-7px;
z-index:106;
background-image:url(images/MiniFlipArea.gif);
}

#FlipArea {
position:absolute;
width:147px;
height:107px;
left:66px;
top:-14px;
/* the highest z-index the tokens may ever have is 100,and this must be on top of them. */
z-index:105;
/*FlipArea.png also works. */
background-image:url(images/FlipArea.gif);
/*
width:144px;
height:94px;
top:0px;
left:100px;
border-color:#0066CC;
border-width:3px;
border-style:solid;
*/
}

#PuzzleArea>#FlipArea {
/*IE doesn't understand this, so only non-IE browsers will set the png. */
background-image:url(images/FlipArea.png);
}

#GoalArea>#MiniFlipArea {
background-image:url(images/MiniFlipArea.png);
}