/* 预格式化文本样式 */
pre {
   font-size: 14pt;
}
/* 一级和二级标题居中样式 */
h1, h2 {
   text-align: center; /* 标题居中 */
}
/* 二级标题样式 */
h2{
   text-indent: 2em; /* 首行缩进2em */
   text-align: left; /* 左对齐 */
   color: #535659;
   margin-top: 0.3em;
   font-size: 1.5em;
}
/* 页面主要内容容器样式 */
.container {
   background-color: #ffffff;
   max-width: 800px; /* 内容最大宽度 */
   margin: 0 auto; /* 水平居中 */
   padding: 0 20px; /* 左右内边距 */
}
/* 世界和目标画布容器的 flex 布局样式 */
.world-goal-container {
   display: flex; /* 使用 Flexbox 布局 */
   justify-content: center; /* 子元素水平居中 */
   margin-bottom: 20px; /* 底部外边距 */
}

/* 世界容器样式 (已移除 .goal-container) */
.world-container {
   margin: 0 10px; /* 世界和目标之间的小外边距 */
   text-align: center; /* 画布上方标题居中 */
   position: relative; /* 为绝对定位的子元素设置相对定位 */
   padding: 0; /* 移除内边距，坐标轴容器会处理定位 */
}

/* 带有坐标的画布容器样式 */
.canvas-with-coords {
   position: relative; /* 设置画布容器为相对定位，用于坐标的绝对定位 */
   /* 调整内边距以留出坐标空间 */
   padding: 5px; /* 画布周围的小内边距 */
   padding-top: 25px; /* 顶部更多空间，用于潜在的标题/标签 */
   padding-left: 30px; /* 左侧更多空间，用于垂直坐标 */
   padding-bottom: 30px; /* 底部更多空间，用于水平坐标 */
   display: inline-block; /* 使容器大小适应内容 */
}

/* 画布元素样式 */
canvas {
   border: 2px solid black; /* 黑色边框 */
   display: block; /* 防止画布下方出现额外空间 */
   width: auto; /* 让JavaScript控制画布宽度 */
   height: auto; /* 让JavaScript控制画布高度 */
   position: relative; /* 画布本身可能需要相对定位以用于某些坐标定位 */
   z-index: 1; /* 确保画布在坐标 div 上方 */
}

/* 通用样式：重置所有元素的内外边距 */
* {
	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;
}

/* 交互器样式 */
.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 容器样式 */
.ide {
   width:100%;
   background:white;
}

/* IDE 按钮栏样式 */
.ideButtonBar {
   width:100%;
   height:40px;
   margin-top:7px;
}

/* IDE 编辑器区域样式 */
.ideEditorDiv {
   width:45%;
   height:100%;
   position:absolute;
   border-width:1px;
   border-style:solid;
   background:white;
}

/* IDE 画布区域样式 */
.ideCanvasDiv {
   width:45%;
   height:100%;
   position:absolute;
}

/* IDE 中心区域样式 */
.ideCenter {
  position: absolute;
   /*border-top-width:1px;
   border-top-style:solid;
   */
}

/* IDE 画布样式 */
.ideCanvas {
    width:100%;
    height:100%;
    background-color:white;
 }

 /* IDE 文本描述框样式 */
 .ideTextDescriptionBox {
    width:100%;
    height:100%;
    overflow-y: auto;
  }

/* IDE 编辑器样式 */
.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;
}

/* 绝对定位隐藏的 div */
.absoluteDiv {
   position:absolute;
   display:none;
}

/* 绝对定位非渐入式 div */
.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;
}

/* IDE 消息框样式 */
.ideMessage {
   background-color:black;
   z-index:99999;
   -moz-border-radius-bottomleft: 7px;
   border-bottom-left-radius: 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) */
.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;
}