body {
   display: flex;
   flex-direction: column;
   align-items: center; /* Center items horizontally */
   font-family: sans-serif; /* Use a common sans-serif font */
   line-height: 1.6; /* 全局默认行高 */
   background-color: #535659;
}
pre {
   font-size: 14pt;
}
h1, h2 {
   text-align: center; /* Center headings */
}
h2{
   text-indent: 2em;
   text-align: left;
   color: #535659;
   margin-top: 1.3em;
   font-size: 1.5em;
}
.container {
   background-color: #ffffff;
   max-width: 1100px; /* Maximum width of the content */
   margin: 0 auto; /* Center the container horizontally */
   padding: 0 20px; /* Add padding on the left and right */
}
/* Style for the div containing World and Goal canvases */
.world-goal-container {
   display: flex;
   justify-content: center; /* Center children horizontally in the flex container */
   margin-bottom: 20px; /* Add some space below */
}

.world-container, .goal-container {
   margin: 0 10px; /* Add smaller margin between world and goal */
   text-align: center; /* Center the titles above canvases */
   position: relative; /* Add relative positioning for absolute child elements */
   padding: 0; /* Remove padding as canvas-with-coords will handle positioning */
}

.canvas-with-coords {
   position: relative; /* Set canvas container to relative for absolute positioning of coords */
   /* Adjust padding here to make space for coordinates */
   padding: 5px; /* Small padding around the canvas */
   padding-top: 25px; /* More space on top for potential title/label if needed */
   padding-left: 30px; /* More space on the left for vertical coords */
   padding-bottom: 30px; /* More space on the bottom for horizontal coords */
   display: inline-block; /* Make container size fit content */
}

canvas {
   border: 2px solid black;
   display: block; /* Prevent extra space below canvas */
   width: auto; /* 让JavaScript控制画布宽度 */
   height: auto; /* 让JavaScript控制画布高度 */
   position: relative; /* Canvas itself might need relative for some coordinate positioning */
   z-index: 1; /* Ensure canvas is above coordinate divs */
}

#reference {
   height:100px;
   width:100px;
}

.programButton {
   float: left;
   margin-right: 5px;
}

#referenceImg {
   width:100%;
   height:100%;
}

.inner {
   margin-left:24px;
   margin-right:24px;
}


.deployInput {
   font-size:x-large;
}



.programButton {
	min-width:130px;
	font-family:"Courier New";
	font-weight:bolder;
}




.commLink {
    font-size:30px;
    color:blue;
    text-decoration:none;
}
.commLink:hover {
    color:darkblue;
}

.commLinkDiv {
   margin-top:20px;
   }

A:link {
	color:'blue';
	text-decoration:none;
}



A:visited {
	color:'blue';
	text-decoration:none;
}

A:hover {
	text-decoration: none;
	color: steelblue;
}

* {
	margin: 0;
}

/* 斯坦福Karel网站注释框样式 */
pre.comment {
   margin: 10px;
   padding: 8px;
   font-size: 15px;
   line-height: 1.4;
}
pre.comment1 {
   background-color: #282c34;
   padding: 15px;
   margin: 20px auto; /* 居中显示并设置上下边距 */
   border: none;
   border-radius: 8px;
   font-family: 'Courier New', monospace;
   font-size: 14px;
   line-height: 1.5;
   white-space: pre-wrap;
   max-width: 800px; /* 控制最大宽度 */
   box-shadow: none;
   color: white;
   text-align: left;
}

.stress {
	color:#D14545;
	font-weight:bolder;
}

.interactor {
   float:left;
   margin-right:5px;
}

.rightBar {

	font-size: 75%;
	float:right;
	height:700px;
	background:#FFF;
}

.programLink {
	width:130px;
	overflow:hidden;

}

.author {
	font-size: 75%;
}

.programLink a{

	color:#4E387E;
}

.programLink a:hover {
	text-decoration:underline;
}
/****************** Main IDE ********************/
.ide {
   width:100%;
   background:white;
}

.ideButtonBar {
   width:100%;
   height:40px;
   margin-top:7px;
}

.ideEditorDiv {
   width:45%;
   height:100%;
   position:absolute;
   border-width:1px;
   border-style:solid;
   background:white;
}

.ideCanvasDiv {
   width:45%;
   height:100%;
   position:absolute;
}

.ideCenter {
  position: absolute;
   /*border-top-width:1px;
   border-top-style:solid;
   */
}

.ideCanvas {
    width:100%;
    height:100%;
    background-color:white;
 }

 .ideTextDescriptionBox {
    width:100%;
    height:100%;
    overflow-y: auto;
  }

.ideEditor {
   width:100%;
   height:100%;

}

/***************** Learn ************************/

.innerImage {
   position:absolute;
}

.learn {
   background:white;
}

.lessons {
   background-image:url('../images/bg-body.jpg');
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.titleText {
   color:white;
}

.progressBox{
   position:absolute;
}

.absoluteDiv {
   position:absolute;
   display:none;
}

.nonFadeInDiv {
   position:absolute;
}

.resizableLink {
   position:absolute;
   float:right;
	line-height: 40px;
margin: 0;
margin-right:5px;
   color:#ccc;
}

.resizableLink:hover{
   color:#999;
}

.rounded {
   position:absolute;
   display:none;
   -moz-border-radius: 7px;
   border-radius: 7px;
   background:white;
   -moz-box-shadow: 3px 3px 3px dimgray;
  -webkit-box-shadow: 3px 3px 3px dimgray;
  box-shadow: 3px 3px 3px dimgray;
}

.roundedNoShadow {
   position:absolute;
   display:none;
   -moz-border-radius: 7px;
   border-radius: 7px;
   background:white;
}

.imageButton {
   position:absolute;
   display:none;
   -moz-border-radius: 7px;
   border-radius: 7px;
   -moz-box-shadow: 3px 3px 3px dimgray;
  -webkit-box-shadow: 3px 3px 3px dimgray;
  box-shadow: 3px 3px 3px dimgray;
}

.ideMessage {
   background-color:black;
   z-index:99999;
   -moz-border-radius-bottomleft: 7px;
   border-bottom-left-radius: 7px;
   -moz-border-radius-bottomright: 7px;
   border-bottom-right-radius: 7px;
}

.imageButton:hover {

   margin:-3px;
   border-style:solid;
   border-width:3px;
   position:absolute;
}

.coverDivNoHighlight{
   position:absolute;
   -moz-border-radius: 7px;
   border-radius: 7px;
}

.coverDiv{
   position:absolute;
   -moz-border-radius: 7px;
   border-radius: 7px;
}

.coverDiv:hover {

   margin:-3px;
   border-style:solid;
   border-width:3px;

}

.disabledRoundedButton {
   position:absolute;
   display:none;
   -moz-border-radius: 7px;
   border-radius: 7px;

   -moz-box-shadow: 3px 3px 3px dimgray;
  -webkit-box-shadow: 3px 3px 3px dimgray;
  box-shadow: 3px 3px 3px dimgray;
   background:#bbb;
}

.unitBox {
   position:absolute;
   display:none;
   -moz-border-radius: 7px;
   border-radius: 7px;
   background:#f6f6f6 ;
}

.progressBox {
-moz-border-radius: 7px;
   border-radius: 7px;
}

.unitBox:hover{
   background:blue;
   color:white;
}

.roundedButton {
   position:absolute;
   display:none;
   -moz-border-radius: 7px;
   border-radius: 7px;
   background:#ddd ;
   -moz-box-shadow: 3px 3px 3px dimgray;
  -webkit-box-shadow: 3px 3px 3px dimgray;
  box-shadow: 3px 3px 3px dimgray;
}

.roundedButton:hover {
   position:absolute;
   -moz-border-radius: 7px;
   border-radius: 7px;
   background:lightsteelblue;
   -moz-box-shadow: 3px 3px 3px dimgray;
  -webkit-box-shadow: 3px 3px 3px dimgray;
  box-shadow: 3px 3px 3px dimgray;
}

.roundedButton:active {
   position:absolute;
   -moz-border-radius: 7px;
   border-radius: 7px;
   background:lightgreen;
   -moz-box-shadow: 3px 3px 3px dimgray;
  -webkit-box-shadow: 3px 3px 3px dimgray;
  box-shadow: 3px 3px 3px dimgray;
}

.centeredText {
    width: auto;
    text-align:center;
}


.code {
   background:white;
   border-width:1px;
   border-style:solid;
   background:white;
}

.topTooltip {
   background:transparent url(../images/black_arrow_up.png);
	display:none;
	font-size:24px;
	text-align:center;
	height:70px;
	line-height:70px;
	width:160px;
	padding:25px;
	color:#fff;
	z-index:9999999999999999999;
}

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	background:transparent url(../images/black_arrow.png);
	display:none;
	font-size:24px;
	text-align:center;
	height:70px;
	line-height:70px;
	width:160px;
	padding:25px;
	color:#fff;
	z-index:9999999999999999999;
}



a.tab {
	height:100%;
			float:left;
			height:40px;
			overflow:hidden;
  	border-right-color: #535352;
border-right-style: solid;
border-right-width: 1px;
	width:100px;
	text-align:center;
float: left;
font-size: 16px;
height: 100%;
line-height: 40px;
padding: 0px 10px;
	color: #000;
	margin: 0;
}

a.tab, a.tab:visited {
	text-decoration:none;
	margin: 0;
}

a.tab:hover {
  	color: #999;
	margin: 0;
}

a.selectedtab {
	height:100%;
			float:left;
			height:40px;
			overflow:hidden;
  	border-right-color: #535352;
border-right-style: solid;
border-right-width: 1px;
	width:100px;
	text-align:center;
float: left;
font-size: 16px;
height: 100%;
line-height: 40px;
padding: 0px 10px;
	border-bottom: 2px solid #fff;
	color: #000;
	margin: 0;
	background:white;
}

a.selectedtab, a.selectedtab:visited {
	text-decoration:none;
	margin: 0;
}

a.selectedtab:hover {
  	color: #999;
	margin: 0;
}

.smallLink {
	float:right;
	line-height: 40px;
margin: 0;
margin-right:5px;
   color:black;
}

.smallLink:hover{
   color:#999;
}

/****************** Tests ************************/
.red {
   background-color:red;
}

.blue {
   background-color:blue;
}

.green {
   background-color:green;
}

.orange {
   background-color:orange;
}

.vertical-coords {
    position: absolute;
    top: 15%;
    left: -1px;
    height: 80%;
    width: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    font-size: 12px;
    pointer-events: none;
}
.vertical-coords span {
    display: block;
    height: 25%; /* 4格时，8格时为12.5% */
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.1;
    text-align: right;
    /* 让数字靠上对齐 */
}
.horizontal-coords {
    position: absolute;
    left: 15%;
    right: 0;
    bottom: 18px;
    height: 5%;
    display: flex
;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 12px;
    pointer-events: none;
}
.horizontal-coords span {
    display: block;
    width: 25%; /* 4格时，8格时为12.5% */
    height: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.1;
    text-align: center;
}

.dropdown-map-switcher {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
    width: 100%;
    position: relative;
}
.dropdown-btn {
    margin: 0 auto;
    display: block;
}
.dropdown-content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.13);
    border-radius: 0 0 8px 8px;
    z-index: 10;
    font-size: 18px;
    font-weight: 500;
    display: none;
    padding: 6px 0;
    border: 1px solid #e0e0e0;
    margin-top: 2px;
}
.dropdown-content.show {
    display: block;
}
.dropdown-content div {
    padding: 10px 24px;
    cursor: pointer;
    color: #222;
    transition: background 0.2s, color 0.2s;
    border-bottom: 1px solid #f0f0f0;
}
.dropdown-content div:last-child {
    border-bottom: none;
}
.dropdown-content div:hover,
.dropdown-content div.active {
    background: #3286c2;
    color: #fff;
}

.solution-button {
    background: #4CAF50;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px 0;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.solution-button:hover {
    background: #45a049;
}

.solution-button:active {
    background: #3d8b40;
}