@charset "utf-8";
/* START GENERAL FORMAT */
body{
	background-color:#96A8C8;
	text-align:center;
	font-size:16px;
	font-variant:small-caps;
	font-family:Lucida,Helvetica,微软雅黑,sans-serif;
	font-weight:500;
	text-decoration: none;
	position: relative;
	width: 100%;
	max-width: 780px;
	margin: auto;
}
a{
	color:#96A8C8;
	text-decoration:none;
	font-weight:800
}
a:hover{
	text-decoration:underline
}
img{
	border:0;
}
.box { /*any of the box layouts & white backgrounds*/
	background:white;
	border-style:solid;
	border-width:1.5px;
	border-color:#071419;
	border-radius: 12px;
	-moz-border-radius: 12px;
}
/* END GENERAL FORMAT */
/* START UPPER LAYOUT */
#topContainer{ 
	width:100%;
	max-width:780px;
	position:relative;
	overflow:hidden;
}
#topLeft{
	width: 21.28%;
	max-width:166px;
	float:left;
	position:relative;
	text-align:middle;
	padding: 17px 2.18%;
}
#menu-icon{
	display:none;
}
#topLeft ul {
    margin: auto;
	padding: 0;
    list-style-type: none;
	display:block;
}
#topLeft a {
    color: #282B30;
    font-size: 21px;
    font-weight: 800;
	border-radius:12px;
}
#topLeft a:hover {
	background:#cccccc;
	text-decoration:none;
	transition:background 0.5s;
}
#bgLeft {
	float: left;
	left:0;
	width: 25.64%;
	max-width: 200px;
	bottom:0;
	top: 0px;
}
#topRight {
	width: 71.79%;
	max-width:560px;
	padding-top:15px;
	padding-bottom:15px;
	padding-left:1.9%;
	float:right;
	position:relative;
	text-align:left;
	line-height: 150%;
}
#masthead {
	display: block;
}
#xkcd_logo {
	width: 100%;
	height: auto;
	max-width: 185px;
}
#slogan {
    padding: 6px 20px;
	display: inline-block;
	font-size: 21px;
	font-weight: 800;
	line-height: 120%;
	vertical-align: top;
	font-family:Lucida,Helvetica;
}
#slogan small{
	font-size: 12px;
	font-weight: 400;
	font-family:微软雅黑;
}
#bgRight {
	right: 0;
	float: right;
	width: 73.33%;
	max-width: 572px;
	bottom:0;
	top: 0px;
}
.bg { /* necessary for positioning box layouts  for bg */
	position:absolute;
	z-index:-1;
}
/* END UPPER LAYOUT */

/*START MIDDLE */
#middleContainer {
	width: 100%;
	max-width: 780px;
	margin: 5px  auto;
	padding: 10px 0;
	position:relative;
}

#ctitle {
    margin: 5px;
    font-size: 21px;
    font-weight: 800;
}

#etitle {
	margin: 5px;
	font-size: 15px;
	font-weight: 600;
	color: #545454;
}

ul.comicNav {
	padding:0;
	list-style-type:none;
}
ul.comicNav li {
	display: inline;
}
ul.comicNav  li a {
	/*background-color: #6E6E6E;*/
	background-color:#6E7B91;
	color: #FFF;
	border: 1.5px solid #333;
	font-size: 16px;
	font-weight: 600;
	padding: 1.5px 12px;
	margin: 0 4px;
	text-decoration: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 0 0 5px 0 gray;
	-moz-box-shadow: 0 0 5px 0 gray;
	-webkit-box-shadow: 0 0 5px 0 gray;	
}
ul.comicNav a:hover, ul.comicNav a:focus {
	background-color: #FFF;
	color: #6E7B91;
	box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	transition: 0.5s;
}

.comicInfo {
	font-size:12px;
	font-style:italic;
	font-weight:800;
}
#bottom {
	margin-top:5px;
	padding:25px 1.923%;
	width:96.15%;
	max-width:750px;
}
#bottom div small{
	font-size:3px;
	color:#EEE;
}
#comicLinks {
    display: block;
    margin: auto;
    width: 300px;
}
#footnote {
    clear: both;
    font-size: 6px;
    font-style: italic;
    font-variant: small-caps;
    font-weight: 800;
    margin: 0;
    padding: 0;
}
#licenseText {
    display: block;
    margin: auto;
    width: 80%;
	max-width: 410px;
}

#transcript {display: none;}

#comic .comic { position:absolute; }
#comic .panel, #comic .cover, #comic .panel img { position:absolute; }
#comic .cover { z-index:10; }
#comic table { margin: auto; }

/*START QA*/
#QA{
	width:100%;
	max-width:570px;
	margin:0 auto;
}
#QA h3{
	text-align:left;
}
#QA p{
	display:block;
	margin:10px;
	text-align:left;
}


@media screen and (max-width:768px){
	.mobi-invisible{
		display:none;
	}
	.box{
		border-width: 0px;
	}
	#bgLeft{
		display:none;
	}
	#bgRight{
		width:100%;
		max-width:none;
	}
	#menu-icon{
		display:block;
		border-radius:5px;
		background:#cccccc;
		cursor:pointer;
		float:left;
		margin:5px;
	}
	#topLeft ul li{
		display:block;
		margin-left:15px;
		margin-top:5px;
		float:left;
	}
	#topLeft,
	#topRight{
		width:100%;
		max-width:none;
		float:left;
		padding-top:10px;
	}
	#logoContainer{
		display:block;
		width:30%;
		float:left;
	}
	#xkcd_logo{
		display:block;
		width:100%;
	}
	#slogan{
		display:block;
		float:left;
		width:65%;
		padding:2%;
	}
	#comic{
		width:90%;
		margin:0 auto;
	}
	#comic img{
		width:100%;
	}
	#comicInfo{
		font-size:12px;
	}
	#bottom{
		font-size: 10px;
	}
	#footnote{
		font-size: 4px;
	}
}
@media screen and (max-width:440px){
	#logoContainer{
		width:25%;
	}
	#slogan{
		font-size:18px;
	}
}
@media screen and (max-width:400px){
	#slogan{
		font-size:16px;
	}
	#comicInfo{
		font-size:10px;
	}
}
@font-face {
  font-family: 'xkcd-Regular';
  src: url('//xkcd.com/fonts/xkcd-Regular.eot?') format('eot'), url('//xkcd.com/fonts/xkcd-Regular.otf') format('opentype');
}