?@charset "UTF-8";

/******************************************************************************
 * RESET STUFF                                                                *
 ******************************************************************************/

* {
	margin: 0;
	padding: 0;
}
header, footer, aside, nav, article, section {
	display: block;
}

@font-face {
    font-family: "BucciBit Regular";
    src: url("../fonts/bucci_bit_01/bucci_bit.otf");
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #009;
    margin: 0;
}
body, html {
	font-family: "BucciBit Regular", Arial;
    font-size: 16px;
    color: #fff;
	word-spacing: 5px;
}
#wholepage {
    display: block;
    min-width: 320px;
}
#maincontent {
    display: block;
	background-color: #000;
    width: 100%;
}
#main {
    width: 100%;
}

header {
    margin: 0;
}
#title {
    display: block;
    height: 52px;
    background: #009 url(../art/site-header-small.png) no-repeat 8px 8px;
}
@media (min-width: 690px) {
    #title {
        display: block;
        height: 96px;
        background: #009 url(../art/site-header.png) no-repeat 12px 12px;
    }
}
.button {
	width: 104px;
	float: left;
	padding: 0px;
}

/******************************************************************************
 * NAV BAR STUFF                                                              *
 ******************************************************************************/

ul#nav-bar {
	display: block;
	padding: 0;
	margin: 0;
	height: 28px;
	list-style-type: none;
    background-color: #009;
    position: relative;
}
ul#nav-bar li {
    margin: 0 auto;
	display: inline;
    float: left;
    position: relative;
    height: 28px;
    width: 20%;
    background-color: #009;
}
ul#nav-bar a:hover {
    background-color: #00f;
}
ul#nav-bar li a {
    width: 100%;
	height: 28px;
    margin: 0;
	float: left;
}
ul#nav-bar .nav {
    display: block;
    height: 20px;
    margin: 4px auto;
}
ul#nav-bar #n1 {
	width: 56px;
	background: rgba(0, 0, 0, 0) url(../art/navbar.png) no-repeat scroll 0 0;
}
ul#nav-bar a:hover > #n1 {
	background: rgba(0, 0, 0, 0) url(../art/navbar.png) no-repeat scroll 0 -20px;
}
ul#nav-bar #n2 {
	width: 70px;
	background: rgba(0, 0, 0, 0) url(../art/navbar.png) no-repeat scroll -56px 0;
}
ul#nav-bar a:hover > #n2 {
	background: rgba(0, 0, 0, 0) url(../art/navbar.png) no-repeat scroll -56px -20px;
}
ul#nav-bar #n3 {
	width: 66px;
	background: rgba(0, 0, 0, 0) url(../art/navbar.png) no-repeat scroll -126px 0;
}
ul#nav-bar a:hover > #n3 {
	background: rgba(0, 0, 0, 0) url(../art/navbar.png) no-repeat scroll -126px -20px;
}
ul#nav-bar #n4 {
	width: 110px;
	background: rgba(0, 0, 0, 0) url(../art/navbar.png) no-repeat scroll -192px 0;
}
ul#nav-bar a:hover > #n4 {
	background: rgba(0, 0, 0, 0) url(../art/navbar.png) no-repeat scroll -192px -20px;
}
ul#nav-bar #n5 {
	width: 36px;
	background: rgba(0, 0, 0, 0) url(../art/navbar.png) no-repeat scroll -302px 0;
}
ul#nav-bar a:hover > #n5 {
	background: rgba(0, 0, 0, 0) url(../art/navbar.png) no-repeat scroll -302px -20px;
}
/*@media (min-width: 574px) {
    ul#nav-bar #n3 {
        width: 118px;
        background: rgba(0, 0, 0, 0) url(../art/navbar.png) no-repeat scroll -272px 0;
    }
    ul#nav-bar a:hover > #n3 {
        background: rgba(0, 0, 0, 0) url(../art/navbar.png) no-repeat scroll -272px -20px;
    }
}*/
ul#nav-bar li .divider {
    width: 16px;
    height: 40px;
    background: #009 url(../art/divider.png) no-repeat scroll 0 0;
    z-index: 99998;
    display: block;
    position: absolute;
    float: left;
    top: -8px;
    left: -8px;
}

/******************************************************************************
 * DROP DOWN STUFF                                                            *
 ******************************************************************************/

ul#nav-bar ul#drop-down {
    position: absolute;
    left: -4px;
    top: 46px;
    z-index: 99999;
	display: none;
	padding: 0;
	margin: 0;
	width: 24px;
	height: 92px;
	list-style-type: none;
}
ul#nav-bar ul#drop-down li {
	display: block;
}
ul#nav-bar ul#drop-down li#ftc-but a{
    width: 212px;
    height: 44px;
    background: rgba(0, 0, 0, 0) url(../art/dropdown_01.png) no-repeat scroll 0 0;
}
ul#nav-bar ul#drop-down li#ftc-but a:hover {
	background-position: -212px 0px;
}
ul#nav-bar ul#drop-down li#hec-but a {
    width: 212px;
    height: 48px;
    background: rgba(0, 0, 0, 0) url(../art/dropdown_01.png) no-repeat scroll 0 -44px;
}
ul#nav-bar ul#drop-down li#hec-but a:hover {
	background-position: -212px -44px;
}

/******************************************************************************
 * BLOG NAVBAR STUFF                                                          *
 ******************************************************************************/

ul#navbar-blog {
	display: block;
	padding: 0;
	margin: 0;
	height: 28px;
	list-style-type: none;
	background-color: #009;
	position: relative;
}
ul#navbar-blog li {
	margin: 0 auto;
	display: inline;
	float: left;
	position: relative;
	height: 28px;
	background-color: #009;
}
ul#navbar-blog a:hover {
	background-color: #00f;
}
ul#navbar-blog li a {
	width: 148px;
	height: 28px;
	margin: 0;
	float: left;
}
ul#navbar-blog .navblog {
	display: block;
	height: 20px;
	margin: 4px auto;
}
ul#navbar-blog #nb1 {
	width: 132px;
	background: rgba(0, 0, 0, 0) url(../art/navbar-blog.png) no-repeat scroll 0 0;
}
ul#navbar-blog #nb2 {
	width: 140px;
	background: rgba(0, 0, 0, 0) url(../art/navbar-blog.png) no-repeat scroll -132px 0;
}
ul#navbar-blog #nbb2 {
	float: right;
}

/******************************************************************************
 * GAME MENU STUFF                                                            *
 ******************************************************************************/

ul#game-menu {
	display: block;
	padding: 0;
	margin: 0 auto;
	width: 816px;
	height: 200px;
	list-style-type: none;
}
ul#game-menu li {
	display: block;
    float: left;
    position: relative;
}
ul#game-menu li a {
	height: 200px;
	float: left;
}
ul#game-menu li#ftc-big-but a {
    width: 408px;
    height: 200px;
    background: #000 url(../art/game-buttons.png) no-repeat scroll 0 0;
}
ul#game-menu li#ftc-big-but a:hover {
    background-position: 0 -200px;
}
ul#game-menu li#hec-big-but a {
    width: 408px;
    height: 200px;
    background: #000 url(../art/game-buttons.png) no-repeat scroll -408px 0;
}
ul#game-menu li#hec-big-but a:hover {
    background-position: -408px -200px;
}

/******************************************************************************
 * SITE OBJECT STUFF                                                          *
 ******************************************************************************/

.siteobject {
	/*NOTHING*/
}
span.swsobject {
	display: inline-block;
	float: left;
}
@media (min-width: 481px) {
    .siteobject {
        margin: 16px;
    }
    span.swsobject {
        margin: 16px;
    }
}

/******************************************************************************
 * COMIC NAVBAR STUFF                                                         *
 ******************************************************************************/

ul#navbar-comic {
	display: block;
	padding: 0;
	margin: 0;
	height: 28px;
	list-style-type: none;
	background-color: #009;
	position: relative;
}
ul#navbar-comic li {
	margin: 0 auto;
	display: inline;
	float: left;
	position: relative;
	height: 28px;
	width: 32px;
	background-color: #009;
}
ul#navbar-comic a:hover {
	background-color: #00f;
}
ul#navbar-comic li a {
	width: 100%;
	height: 28px;
	margin: 0;
	float: left;
}
ul#navbar-comic .navcom {
	display: block;
	height: 20px;
	margin: 4px auto;
}
ul#navbar-comic #nc1 {
	width: 24px;
	background: rgba(0, 0, 0, 0) url(../art/navbar-comic.png) no-repeat scroll 0 0;
}
ul#navbar-comic #nc2 {
	width: 20px;
	background: rgba(0, 0, 0, 0) url(../art/navbar-comic.png) no-repeat scroll -24px 0;
}
ul#navbar-comic #nc3 {
	width: 20px;
	background: rgba(0, 0, 0, 0) url(../art/navbar-comic.png) no-repeat scroll -44px 0;
}
ul#navbar-comic #nc4 {
	width: 24px;
	background: rgba(0, 0, 0, 0) url(../art/navbar-comic.png) no-repeat scroll -64px 0;
}
ul#navbar-comic #ncb3 {
	float: right;
}
ul#navbar-comic #ncb4 {
	float: right;
}
ul#navbar-comic #comic-name {
	margin: auto;
	width: auto;
}
ul#navbar-comic .comic-title {
	margin: 6px 5px 4px;
	text-align: center;
}
ul#navbar-comic li .divider {
	width: 16px;
	height: 40px;
	background: #009 url(../art/divider.png) no-repeat scroll 0 0;
	z-index: 99998;
	display: block;
	position: absolute;
	float: left;
	top: -8px;
	left: -8px;
}

/******************************************************************************
 * COMIC STUFF                                                                *
 ******************************************************************************/

figure.comic {
	background: #000 url(../art/post-bg.png) repeat scroll 0 0;
}
figure.comic img {
	margin: 0 auto;
}
 
/******************************************************************************
 * 144 STUFF                                                                  *
 ******************************************************************************/

#art-list {
    display: table;
    position: relative;
    margin: 16px; 
}

.art-onefourfour {
    height: 72px;
}

.onefourfour {
    display: inline-block;
    background-color: #00f;
    width: 144px;
    height: 88px;
    margin: 8px;
}

/******************************************************************************
 * BORDER STUFF                                                               *
 ******************************************************************************/

.border-left {
    background: rgba(0, 0, 0, 0) url(../art/border-vertical.png) repeat-y scroll 0 0;
    padding: 0;
}
.border-right {
    background: rgba(0, 0, 0, 0) url(../art/border-vertical.png) repeat-y scroll 100% 0;
    padding: 0;
}
@media (min-width: 481px) {
	.border-left {
		padding: 0 0 0 8px;
	}
	.border-right {
		padding: 0 8px 0 0;
	}
}
.border-top {
    height: 8px;
    background: rgba(0, 0, 0, 0) url(../art/border-horizontal.png) repeat-x scroll 0 0;
}
.border-bottom {
    height: 8px;
    background: rgba(0, 0, 0, 0) url(../art/border-horizontal.png) repeat-x scroll 0 100%;
}

/******************************************************************************
 * CORNER STUFF                                                             *
 ******************************************************************************/

.corner {
	display: none;
    width: 8px;
    height: 8px;
}

@media (min-width: 481px) {
	.corner {
		display: block;
	}
}
.nw {
    background: rgb(0, 0, 0) url(../art/border-corners.png) no-repeat scroll 0 0;
    float: left;
}
.ne {
    background: rgb(0, 0, 0) url(../art/border-corners.png) no-repeat scroll -8px 0;
    float: right;
}
.sw {
    background: rgb(0, 0, 0) url(../art/border-corners.png) no-repeat scroll 0 -8px;
    float: left;
}
.se {
	background: rgb(0, 0, 0) url(../art/border-corners.png) no-repeat scroll -8px -8px;
    float: right;
}

/******************************************************************************
 * BLOGPOST STUFF                                                             *
 ******************************************************************************/

section.blogpost {
	font-family: "BucciBit Regular", Arial;
	color: #00f;
	background-color: #00f;
	word-spacing: 5px;
}
footer.blogtitle {
	background: #000 url(../art/post-bg.png) repeat;
    /*min-height: 48px;*/
	padding: 8px;
	margin: 0px;
}
@media (min-width: 481px) {
	footer.blogtitle {
		min-height: 48px;
	}
}
h1 {
	color: #fff;
	font-size: 24px;
	font-weight: normal;
	padding: 0;
	margin: 0;
}
h2 {
	display: none;
	font-size: 16px;
	font-weight: normal;
	padding: 0;
	margin: 8px 8px 0 8px;
}
h3.postcount {
	background: #00f;
	color: #000;
	display: none;
	font-size: 24px;
	font-weight: normal;
	text-align: right;
	float: left;
	width: 52px;
	height: 48px;
	padding: 2px 0;
	margin: 0 8px 0 0;
}
.opinion-buttons {
	display: none;
	float:left;
	margin: 0 8px 0 0;
	width: 18px;
}
h4.opinion {
	background: #00f;
	color: #fff;
	display: none;
	font-size: 24px;
	font-weight: normal;
	text-align: right;
	float: left;
	height: 44px;
	padding: 2px 0 2px 2px;
	border: 2px solid #fff;
	margin: 0;
}
input[type="button"].vote {
	float: left;
	margin: 0;
	text-align: left;
	width: 18px;
}
@media (min-width: 481px) {
	h2 {
		display: block;
	}
	h3.postcount {
		display: block;
	}
	h4.opinion {
		display: block;
	}
	.opinion-buttons {
		display: block;
	}
}
article {
    border: 4px solid #fff;
    display: none;
}
@media (min-width: 420px) {
    article {
	    border: 4px solid #fff;
        display: block;
    }
}
article.about {
    display: block;
}
p {
    margin: 0;
    padding: 0;
}
.writing {
	clear: both;
	font-size: 16px;
	color: #fff;
	text-indent: 16px;
	text-align: justify;
	padding: 0px;
    margin: 12px;
}
address {
    clear: both;
	font-size: 16px;
	color: #fff;
	text-indent: 16px;
	text-align: justify;
	padding: 0;
    margin: 12px;
}
figure {
	margin: 0;
}
figure img, figure iframe {
	display: block;
    max-width: 100%;
	margin: 8px auto;
}
figcaption {
	color: #fff;
	font-size: 16px;
	text-align: center;
	margin: 8px;
}

/******************************************************************************
 * FLASH GAME STUFF                                                           *
 ******************************************************************************/

#ftcii-page-title {
	height: 44px;
	background: #009 url(../art/ftcii-header.png) no-repeat scroll 4px 4px;
}
#ftc-page-title {
    height: 44px;
    background: #009 url(../art/ftc-header.png) no-repeat scroll 4px 4px;
}
#hec-page-title {
    height: 44px;
    background: #009 url(../art/hectris-header.png) no-repeat scroll 4px 4px;
}
.plus {
    margin: 10px 10px 0 10px;
    float: right;
}
.game-bg {
    background: #000 url(../art/post-bg.png) repeat;
}
#ftc {
    width: 800px;
    margin: 0 auto;
}
#hec {
    width: 600px;
    margin: 0 auto;
}

/******************************************************************************
 * LOGIN STUFF                                                                *
 ******************************************************************************/

input {
    font-family: "BucciBit Regular";
    font-size: 16px;
    color: #fff;
    background-color: #00f;
    margin: 0;
    display: inline;
    padding: 2px;
    border: 2px solid #fff;
    margin: 2px;
}
input:hover {
    background-color: #33f;
}
input[type="button"]:active {
    background-color: #006;
}
input[type="button"].collapse {
    float: right;s
}
input.erase {
    float: right;
    margin: 0;
}

/******************************************************************************
 * USERBAR STUFF                                                              *
 ******************************************************************************/

#user-bar {
	background-color: #009;
	display: none;
}
@media (min-width: 480px) {
    #user-bar {
        display: block;
		height: 44px;
    }
}
form#login {
    margin: 0;
}
#login-bar {
	padding: 3px;
}
canvas#user-avatar {
    float: left;
    border: 2px solid #fff;
}
div#user-name {
    float: left;
    margin: 16px 4px 2px;
}
a.user-link {
	color: #fff;
	text-decoration: none;
}
input[type="button"].user-signout {
    float: right;
	margin: 5px;
}
div.border-bottom#user-bar-bottom {
    clear: both;
}

/******************************************************************************
 * USER PAGE STUFF                                                            *
 ******************************************************************************/

canvas#user-avatar-big {
	
}
canvas#palette {
	background: #000;
	display: block;
	padding: 4px 0 0;
}
table#user-info {
	background-color: #00f;
	border: 2px solid white;
	width: 100%;
}
#user-info th {
	font-weight: normal;
	text-align: right;
}

/******************************************************************************
 * INPUT STUFF                                                                *
 ******************************************************************************/

textarea {
    font-family: "BucciBit Regular";
    font-size: 16px;
	
    height: auto;
    padding: 4px 8px;
    border: 2px solid #fff;
	
    background-color: #00f;
    color: #fff;
	
	word-spacing: 5px;
}

/******************************************************************************
 * BLOG STUFF                                                                 *
 ******************************************************************************/

table.input th {
    font-weight: normal;
    text-align: right;
    vertical-align: middle;
}
#blog-writer {
    width: 100%;
    padding: 0;
    margin: 0;
    background-image: url(../art/post-bg.png);
}
#blog-writer p {
    display: inline;
}
#blog-writer textarea#post-title {
	/*---------------------NOTHING---------------*/
}
#blog-writer textarea.para {
    display: inline;
}

/******************************************************************************
 * BLUEBOARD                                                                  *
 ******************************************************************************/

#marker {
    width: 100%;
    padding: 0;
    margin: 0;
    background-image: url(../art/post-bg.png);
}
#marker textarea {
    width: 100%;
}
.comment {
    width: 100%;
    background-color: #00f; 
}
.post {
    min-height: 24px;
}
p.boardpost {
    display: inline-block;
	font-family: "BucciBit Regular", Arial;
	color: #fff;
	background-color: #00f;
	word-spacing: 5px;
    padding: 4px;
	margin: 0;
}
button.erase {
    float: right;
    display: inline-block;
    width: 50px;
    height: 24px;
    background: rgba(0, 0, 255, 0) url(../art-mobile/erase-button.png) no-repeat scroll 0 0;
    border: none;
    padding: 0;
    margin: 0;
}

/******************************************************************************
 * SIGNATURE                                                                  *
 ******************************************************************************/

footer#signature {
    clear: both;
}
footer#signature #sig-image {
    display: block;
    height: 32px;
    background: #009 url(../art-mobile/signature-00.png) no-repeat 2px 2px;
}
footer#signature #about {
	display: none;
	background-color: #009;
}
footer#signature #about p.writing {
	margin: 0px;
	padding: 12px;
}

/******************************************************************************
 * ETC.                                                                       *
 ******************************************************************************/

.sigstuff {
	width: 100%;
	display: block;
    background-color: #009;
}
#big-ad {
    display: none;
    height: 114px;
}
.sigstuff #big.ad-banner {
	width: 728px;
	height: 90px;
	padding: 4px 0;
	margin: auto;
}
#small-ad {
    display: block;
    height: 50px;
}
.sigstuff #small.ad-banner {
	width: 320px;
	height: 50px;
	margin: auto;
}

@media (min-width: 744px) {
    #big-ad {
        display: block;
    }
    #small-ad {
        display: none;
    }
}