@charset "utf-8";
@import "palette";

h2,
h3 a {
	margin: 0px;
	padding: 0px;
	color: $text-accent;
}

.content .column { width:330px }

/* Dress up the comic */
#comic {
	margin-top: 0px;
	height: 1%;  /* Give IE hasLayout to fix a neg margin bug */
	width: auto;
}


#comic .nl {
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: $nl-background;
	margin: -5em auto 0px;
	border-top: solid 5em $text-normal;
	width: 700px;
	text-align: center;
}

#comic .navpanel {
	position: relative;
	margin: auto;
}

#comic div.navpanel {
	position: relative; /* Make IE draw panel above glow border */
	z-index: 1;
	height: 33px;
	padding: 0px;
	width: 650px;
}

#comic form.navpanel {
	margin-top: -28px;
	padding: 0px;
	width: 625px;
}

/* Need to gank the button out of the document flow somehow */
#comic .search-field { position:relative }
#comic .search-field a { position:absolute }

#comic .search-filter {
	padding:0px 25px;
	margin-bottom: 15px;
}

#comic .navpanel .navcontrols {
	position: absolute;
	z-index: 1;
}

#comic div.navpanel .navcontrols { right:25px }
#comic form.navpanel .navcontrols { right:0px }

#comic .navpanel .navcontrols ul {
	width: 124px; height: 33px;
	margin: 0px;
	padding: 0px;
	clear: both;
}

#comic .navpanel .navcontrols ul li {
	display: block;
	float: left;
}

#comic .navpanel .navcontrols ul li a,
#comic .navpanel .navcontrols ul li span {
	display: block;
	padding-top: 33px;
	width: 62px;
	height: 0px;
	overflow: hidden;
}


/* Top Nav */

#comic .navpanel .navcontrols.top li.prev {
	background: url(../parts/nav2-top-prev.png) no-repeat;
}

#comic .navpanel .navcontrols.top li.next {
	background: url(../parts/nav2-top-next.png) no-repeat;
}

#comic .navpanel .navcontrols.top li.prevoff {
	background: url(../parts/nav2-top-prevoff.png) no-repeat;
}

#comic .navpanel .navcontrols.top li.nextoff {
	background: url(../parts/nav2-top-nextoff.png) no-repeat;
}

/* Bottom Nav */

#comic .navpanel .navcontrols.bottom li.prev {
	background: url(../parts/nav2-bottom-prev.png) no-repeat;
}

#comic .navpanel .navcontrols.bottom li.next {
	background: url(../parts/nav2-bottom-next.png) no-repeat;
}

#comic .navpanel .navcontrols.bottom li.prevoff {
	background: url(../parts/nav2-bottom-prevoff.png) no-repeat;
}

#comic .navpanel .navcontrols.bottom li.nextoff {
	background: url(../parts/nav2-bottom-nextoff.png) no-repeat;
}

/* Form Nav only for disable */

#comic .navpanel .navcontrols li.findprevoff {
	background: url(../parts/nav2-prevfindoff.png) no-repeat;
}

#comic .navpanel .navcontrols li.findnextoff {
	background: url(../parts/nav2-nextfindoff.png) no-repeat;
}

#comic .navpanel .navcontrols ul#searchprevnext li {
	height: 33px;
}

#comic div.navpanel #title {
	padding: 1ex;
}

#comic .navpanel .search-filter {
	margin-bottom: 15px;
}

#comic .navpanel #q {
	width: 350px;
}

#comic .navpanel #go,
#comic .navpanel #iego {
	vertical-align: middle;
	padding-bottom: 2px;
}

#comic .transcript {
	list-style-type:none;
	padding: 66px 50px;
	margin: 0px;
}

#comic .transcript .panelhead {
	font-size: larger;
	font-weight: bold;
}

#comic .transcript dl { padding-left:50px }
#comic .transcript dt {
	float: left;
	padding-right: 1em;
	font-weight: bold;
}

#comic .transcript dd {
	margin-left: 5.5em;
	padding-left: 0px;
	padding-bottom: 0.5ex;
}

/* Make the archive link stand out */
#comic #archivelink { background-color: $text-normal; }
#comic #archivelink a { color: $nl-background; }
#comic #archivelink a:hover { color: $link-hover; }

/* Boxes between the comic and the rants */
#megagear { text-align:center }

#newsbox a { color: $text-accent; }
#newsbox ul {
	margin-left: 3ex;
	padding-left: 0px;
}
#newsbox h3 {
	text-align: center;
}
#support { font-size: 80%; }

#status dl {
	margin: 1em;
}

#status dt {
	float: left;
}

#status dd {
	margin-left: 7em;
	color: $text-accent;
}

#status dd div#percentbox {
	padding: 1px;
	width: 90%;
	border: 1px solid $percent-border;
	margin: 0px;
}

#newsbox div.thewrap,
#support div.thewrap {
	border-bottom:none;
	margin:0;
	padding:0;
	background: url(../parts/twitter-seperator.png) 6px 0 $infobox;
}

/* Fix a bug caused by OpenAds injecting a <div> into the status area which
 * partially obscures the 'support' heading
 */
#support div.thewrap div {
	background-color: transparent;
}

.content div.column.leftcol,
.content div.column.rightcol { border: none; }

.content div#status,
.content div#fred_twitter { border: none; background: none; }

#support { border-bottom: 5px solid $nl-background; }

#status ul, #fred_twitter ul { margin-top:0px }

#status li, #fred_twitter li {
    padding-top: 4px;
    padding-right: 1em;
}

#newsbox {
	overflow: visible;
	height: 60px;
}

/*
#newsbox .leftcol {
	left: 5px;
}

#newsbox .rightcol {
	right: 5px;
}
*/

#newsbox div {
	border:none;
	overflow:visible;
}

#blogbits {
	padding:	0px;
	width:		370px;
}

#blogbits ul
{
	margin: 0px;
	padding: 0px;
	text-align: center;
	list-style-type: none;
}

#blogbits ul#blogbitslist { margin-left:250px }
#blogbits ul#feed-list {
	margin: auto;
}

#blogbits #feed-list ul {
	display: none;
	position: absolute;
	z-index: 1;
	border: solid 5px black;
	width: 400px;
	background: $background;
	text-align: left;
}

#blogbits ul#feed-list  li {
	display: inline-block;
	margin: 0px;
	padding: 7.5px 4px;
	color: $text-normal;
}

#blogbits a.rightcol img,
#blogbits a.leftcol img {
	width:	180px;
}

#blogbits a.rightcol img {
	padding-left:	5px;
}

#blogbits a.leftcol img {
	padding-right: 5px;
}

#facebook img {
	width:	300px;
	height:	60px;
}

#facebook {
	border:		none;
	padding:	0px;
}

#support { position:relative }

#support .thewrap .column .glowwrap,
#support .thewrap .column .glowwrap a {
	display: block;
	width: 100%;
}

#support .thewrap .column .glowwrap img,
#support .thewrap .column .glowwrap embed {
	display: block;
	margin: auto;
}

#support .glowwrap div {
	border: none;
}

#newsbox .adinfo, #support .adinfo {
	position: absolute;
	top: 2px;
	right: 10px;
	height: 16px;

	margin: 0px;
	border: 0px;
	padding: 0px;

	background-color: transparent;
}

#newsbox .adinfo a, #support .adinfo a {
	color: $text-accent;
	font-size: 11px;
}

#newsbox .adinfo p, #support .adinfo p {
	margin: 0px 10px 0px 0px;
}

/* Rant Columns */
#console {
	overflow: hidden;
}

#console h3 {
	padding: 0.75ex;
	background-color: $foreground;

	font-family: $banner-font;
	font-size: xx-large;
	text-align: center;
}

#console .date,
#console .rantbody {
	margin: 5px;
	padding: 5px;
	width: 330px;
}

#feed-list h4 {
	margin: auto;
	color: $text-accent;
	text-align: center;
	font-size: medium;
	width: 400px;
}

#console h4 {
	margin: auto;
	padding: 0.75ex 0px;
	width: 330px;

	background-color: $foreground;
	color: $text-accent;

	text-align: center;
	font-size: medium;
}

#console h4 a {color: $text-accent;}

#console .rantbody {
	margin-top: 0px;
	padding-top: 0px;
}

/* force <pre> to not break our boxes */
#console .rantbody pre {
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	word-wrap: break-word;
}

#console .leftcol {
	width: 350px;
	color: $text-normal;
}

#console .rightcol {
	width: 350px;
	color: $text-accent;
}

#console .rantimage {
	background: url(../parts/mt-glow-mainrant-vert.png) repeat-y;
	width: 350px;
	height: 285px;
}

#console .ri-top {
	background: url(../parts/mt-glow-mainrant-top.png) top no-repeat;
	width: 350px;
	height: 245px;
}

#console .ri-bottom {
	background: url(../parts/mt-glow-mainrant-bottom.png) bottom no-repeat;
	width: 350px;
}

#console .ri-matte {
	padding: 20px 0px 20px 0px;
	margin: 0px 25px;
	width: 300px;
	height: 245px;
}

#console .rantimage p,
#console .rantimage p img {
	float: none;
	width: 300px;
	height: 245px;
	text-align: left;
	padding: 0px;
	margin: 0px;
}

#console .rantnav {
	margin: 2em 0px;
	text-align: center;
}

#console .nameplate {
	background-color: $foreground;
	width: 350px
}

#console .nameplate span {
	display: block;
	height: 48px;
	background-repeat: no-repeat;
	background-position: top center;
}

#console .nameplate h3 {
	display: none;
}

#console .oldrant {
	margin-top: 1.5em;
	border-top: medium solid $text-normal;
	padding-top: 1em;
	width: 345px;
}

#console .oldrant .rantimage {
	float:left;
	background: url(../parts/mt-glow-oldrant-vert.png) repeat-y;
	width: 176px;
	height: 141px;
}

#console .oldrant .ri-top {
	background: url(../parts/mt-glow-oldrant-top.png) top no-repeat;
	width: 178px;
	height: 123px;
}

#console .oldrant .ri-bottom {
	background: url(../parts/mt-glow-oldrant-bottom.png) bottom no-repeat;
	width: 178px;
}

#console .oldrant .ri-matte {
	padding: 9px 0px 9px 0px;
	margin: 0px 13px;
	width: 150px;
	height: 123px;
}

#console .oldrant .rantimage p,
#console .oldrant .rantimage p img {
	float: none;
	width: 150px;
	height: 123px;
	text-align: left;
	padding: 0px;
	margin: 0px;
}

#console .oldrant .nameplate {
	margin-top: 43px;
	background-color: $foreground;
	width: 150px;
	float: right;
}

#console .oldrant h4 {
	float: right;
	margin:5px 0pt 5px 5px;
}

/* Shaded borders around images */
#strip,
#strip span {
	display: block;        /* Everyone treat <span> like <div> */
	display: inline-block; /* Shrinkwrap blocks for IE */
}

/* hasLayout */
* html #strip, * html #strip span { height: 1%; }

#strip {
	display: table;        /* Shrinkwrap blocks for everyone else */
	position: relative;
	margin: -33px auto 0px;
	min-width: 650px;
}

div#strip {
	width:700px;
	background-color: $comic-background;
}

#strip-tl {
	background: url(../parts/mt-corner-UL.png) no-repeat left top;
}

#strip-tr {
	background: url(../parts/mt-corner-UR.png) no-repeat right top;
}

#strip-t {
	background: url(../parts/mt-slice-vert-top.png) repeat-x top;
}

#strip-bl {
	background: url(../parts/mt-corner-LL.png) no-repeat left bottom;
}

#strip-br {
	background: url(../parts/mt-corner-LR.png) no-repeat right bottom;
}

#strip-b {
	background: url(../parts/mt-slice-vert-bottom.png) repeat-x bottom;
}

#strip-l {
	background: url(../parts/mt-shadow-vert-left.png) repeat-y left;
}

#strip-r {
	background: url(../parts/mt-shadow-vert-right.png) repeat-y right;
}

#strip img {
	margin: 33px 25px;
}

#strip iframe {
	border: none;
	margin: 33px 25px;
	width: 1024px;
	height: 576px;
}

#strip-transcript {
	padding: 10px 10px 10px 10px;
}

/* Center the comic */
#comic { text-align:center }
#comic * { text-align:left }

/* Overload header texts */
#metabox h2 span { background: url(../parts/mt-blk_bar-metabox.png) no-repeat }
#support h2 span { background: url(../parts/mt-blk_bar-support.png) no-repeat }
#console h2 span { background: url(../parts/mt-blk_bar-console.png) no-repeat }