body, ul, li, input, form, p, h1, h2, button, textarea {
	padding: 0;
	margin: 0;
	font-family: verdana,helvetica,arial,sans-serif;/*来自原网页的body中font-family的值，也就是f12观察*/
}
li { list-style: none; }
img { border: none; } /*有些浏览器比如IE，会给img默认添加蓝色边框*/
a { color: black; } /*a标签没有href属性的时候，颜色是黑色；有了href属性后，颜色变为#72ACE3，因而需要改颜色*/
a { text-decoration: none; }
a:hover { text-decoration: underline; }
textarea { border: none; } /*默认自带边框*/

body {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
}

#menuBar {
	width: 100%;
	height: 40px;
	background-color: #e0e0e0;
	border-bottom: 1px solid grey;
	overflow:hidden
}

#logo {
	font-size: 1.2em;
	font-weight: bold;
	float: left;
	line-height: 40px;
	padding-left: 20px;
}

#buttonDiv {
	height: 40px;
	float: right;
	margin-right: 10px; /*对于button里面的字体的大小和粗细，通过这里设置是没有用处的，需要在里面的#runButton进行设置*/
}

#runButton {
	margin-top: 5px;
	padding: 0 10px;	
	font-size: 1.2em;
	line-height: 25px;
}

#toggles {
	width: 197px; /*微调，保证result格子有合适的位置*/
	margin: 5px auto;
	height: 30px; /*上下两个配合使得居中，也可以设置position：relative，然后直接移动定位*/
	border: 1px solid grey;
	border-radius: 3px;
	cursor: pointer;
} /*一般margin在水平方向比较起作用。此处#toggles盒子的宽度为整个width宽度，因为另外两个元素都是float的*/

#toggles li {
	float: left;
	line-height: 30px;
	padding: 0 6px;
	border-right: 1px solid grey;
}

.codeContainer {
	position: relative;
	width: 50%;
	float: left;  /*注意要设置这个浮动*/
}

.codeContainer textarea {
	height: 100%;
	width: 100%;	
	font-family: monotype;
	font-size: 1.2em;
	z-index: 1; /*为了保证html/css/js这几个字显示在textarea上面，而不是被textarea覆盖。*/
}

.outer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0; 
	padding: 10px; 
	border-right: 1px solid grey;
} /*此方法用于应对div设置高度宽度100%后再加padding导致浏览器窗口撑开的问题*/ /*height:100%;width:100%同时设置padding就会导致异常撑开*/
/*注意，直接在textarea上做这个操作没有效果，需要外套一个div才能起作用。因为textarea似乎有一些默认大小。*/

.codeLabel {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2; /*为了保证html/css/js这几个字显示在textarea上面，而不是被textarea覆盖。*/
	padding: 2px;
	border: 1px solid grey;
	border-radius: 3px;
}

#CSSContainer, #JSContainer {
	display: none;
}

iframe {
	height: 100%;
	position: relative;
	left: 20px;
	border: none;
}

.selected {
	background-color: grey;
}