html { min-width: 980px; }

body { font-weight: normal; font-size: 12px; font-family: Arial, Verdana, sans-serif; margin: 0;
    background: url("../images/spiralknights_bg.jpg") #0F0F11 no-repeat 50% 0; }

div.clear { clear: both; height: 0 !important; margin: 0 !important; padding: 0 !important;
    float: none !important; }

img { border: 0; }

#logoLink { position: absolute; top: 25px; left: 5px; width: 259px; height: 96px; outline: none;
    text-decoration: none; display: block; background: url("../images/transparent_filler.png"); }

#wrapper { margin: 0 auto; width: 980px; position: relative; }

#account-area, #language-area { height: 40px; position: absolute; top: 0; right: 0; font-size: 8pt;
    color: #43CDCA; background: url("../images/top_box_rt.png") no-repeat right 0; }
#language-area { background: url("../images/top_box_lang_only.png") no-repeat; width: 99px;
    height: 44px; text-align: center; padding-top: 13px; }
#account-area a, #language-area a { text-decoration: none; color: #43CDCA; }
#account-area a:hover, #language-area a:hover { text-decoration: underline; color: #43CDCA; }
#account-area .leftcap { float: right; }
#username { background: url("../images/top_box_md.png") repeat-x; margin-right: 20px;
    padding-left: 5px; padding-right: 5px; }
#username { color: #535353; }
#username .name { color: #708AA7; cursor: default; }
#username a, #username .name { margin: 0 5px; }
#my-account, #support-language, #username { height: 27px; float: right; padding-top: 13px; }
#my-account { text-align: center; width: 101px; }
#my-account a, #username a { color: white; cursor: pointer; }
#my-account a:hover, #username a:hover { color: white; cursor: pointer; }
#support-language { width: 168px; text-align: center; }
#support-language span { padding: 0 2px; }
#support-language .spacer { padding: 0 10px; }
#language { cursor: pointer;
    background: url("../images/language_arrow.png") no-repeat right center; }
#language { padding-right: 17px !important; padding-top: 10px; padding-bottom: 10px;
    display: inline; }
#language .panel { display: none; z-index: 100; position: absolute; width: 95px; right: 2px;
    background-image: url("../images/transparent_filler.png"); padding-top: 33px; top: 0; }
#language .panel .content { background: url("../images/dropdown_language_mid.png") repeat-y;
    padding-top: 1px; }
#language .panel .content a { color: #AFCDCB; text-align: center; }
#language .panel .content a:hover { color: white; text-decoration: none !important; }
#language .panel .footer { background: url("../images/dropdown_language_bot.png") no-repeat;
    width: 118px; height: 12px; position: relative; top: -5px; }
#language .panel a { display: block; margin: 5px; }
#language:hover .panel, #language .panel:hover { display: block; }

#noscript { position: absolute; right: 0; top: 40px; width: 356px; height: 42px;
    background: url("../images/error.jpg") no-repeat; }
#noscript .noscript-content { color: #D8A446; padding: 12px 12px 12px 45px; font-size: 10pt; }

#header { padding-top: 83px; }
#header .logos { height: 50px; }
#header .logo { float: right; margin: 10px; }
#content-header img { float: right; margin: 1px 2px 0 0; }
#menu { width: 627px; height: 77px; position: relative; list-style: none; margin: 0; padding: 0;
    left: 2px; top: 5px; float: left; }
#menu li { display: inline; }
#menu li a { width: 102px; height: 77px; float: left; margin-left: 2px; text-decoration: none; }
#menu li a:focus { outline: none; }
#menu li.menu-home a { background-position: 0 0; }
#menu li.menu-home a:hover { background-position: 0 -77px; }
#menu li.menu-home a.active { background-position: 0 -154px !important; }
#menu li.menu-play a { background-position: -103px 0; }
#menu li.menu-play a:hover { background-position: -103px -77px; }
#menu li.menu-play a.active { background-position: -103px -154px !important; }
#menu li.menu-about a { background-position: -206px 0; }
#menu li.menu-about a:hover { background-position: -206px -77px; }
#menu li.menu-about a.active { background-position: -206px -154px !important; }
#menu li.menu-media a { background-position: -309px 0; }
#menu li.menu-media a:hover { background-position: -309px -77px; }
#menu li.menu-media a.active { background-position: -309px -154px !important; }
#menu li.menu-forums a { background-position: -412px 0; }
#menu li.menu-forums a:hover { background-position: -412px -77px; }
#menu li.menu-forums a.active { background-position: -412px -154px !important; }
#menu li.menu-wiki a { background-position: -515px 0; }
#menu li.menu-wiki a:hover { background-position: -515px -77px; }
#menu li.menu-wiki a.active { background-position: -515px -154px !important; }
#override-header { float: left; width: 581px; height: 31px; padding: 23px; text-align: center;
    font-weight: bold; font-style: italic; font-size: 20pt; color: white; position: relative;
    background: url("../images/menu_left.jpg") no-repeat 3px 1px; }
#override-header img { position: absolute; left: 20px; top: 12px; }

#footer { background: url("../images/spiralknights_core.jpg") no-repeat 0 13px; height: 139px; }
#footer .colorhr { height: 0; margin: 0; padding: 0; border-bottom: 1px solid #331D03; }
#bottom-nav { height: 22px; margin-bottom: 3px; }
#bottom-nav img { padding-left: 5px; float: left; }
#bottom-nav div { float: left; padding-top: 4px; }
#bottom-nav a { text-decoration: none; font-size: 10pt; color: #E1AF3A; }
#bottom-nav a:hover, #bottom-nav a div:hover { text-decoration: underline; color: #E1AF3A; }
#bottom-nav ul { list-style: none; padding: 0; margin: 0; }
#bottom-nav li { text-align: left; float: left; padding-right: 29px; }
#bottom-nav li.bottom-media div { padding-left: 3px; }
#terms { float: right !important; font-size: 10pt; font-weight: bold; color: #E1AF3A;
    padding-right: 22px; }
#terms a { text-decoration: none; color: #E1AF3A; padding: 3px; }
#terms a:hover { text-decoration: underline; color: #E1AF3A; }
#small-links { color: #8E4B01; font-size: 9pt; margin-top: 4px; height: 115px; }
#small-links .logo { float: right; margin: 5px 15px 0 0; }
#small-links a { color: #8E4B01; text-decoration: none; display: block; height: 17px; }
#small-links a:hover { text-decoration: underline; color: #8E4B01 }
#small-links div { float: left; } 
#small-links .col-1 { padding-left: 28px; width: 252px; }
#small-links .col-2 { width: 200px; }
#footer .copyright { text-align: center; font-size: 8pt; color: #B7B9B9; width: 100%; 
    margin: 5px 0; }

#content { background: repeat-y; width: 100%; min-height: 897px; }
#content .header { font-weight: bold; font-size: 16pt; height: 32px; padding: 7px 20px 0 20px;
    margin: 15px 3px 0 3px; }
#content .right-column { width: 353px; float: right; }
#content .right-column .section { width: 353px; position: relative; }
#content .right-column .green-header { background: url("../images/header_sm_green.png") no-repeat;
    color: #FBEBB3; }
#content .right-column .gold-header { background: url("../images/header_sm_gold.png") no-repeat;
    color: #F5F5F5; }
#content .left-column { width: 627px; float: left; }
#content .left-column .gold-header { background: url("../images/header_big_gold.png") no-repeat;
    color: #F5F5F5; }
#content .left-column .purple-header { background: url("../images/header_big_purple.png") no-repeat;
    color: #F5F5D9; }
#content .left-column .blue-header { background: url("../images/header_big_blue.png") no-repeat;
    color: #A4F7ED; }
#breadcrumbs { padding-top: 16px; margin-left: 6px; }
#breadcrumbs .crumbstext { padding-top: 3px; width: 616px; height: 19px;
    background: url("../images/ribbon_breadcrumbs.jpg") no-repeat; }
#breadcrumbs .lead { color: #E69B1E; padding-left: 20px; padding-right: 4px; }
#breadcrumbs a { color: #E69B1E; text-decoration: none; }
#breadcrumbs .lead a:hover { color: #E69B1E; text-decoration: underline; }
#breadcrumbs .path { color: white; }
#breadcrumbs .path a { color: white; text-decoration: none; }
#breadcrumbs .path a:hover { color: white; text-decoration: underline; }

#newsletter { font-size: 10pt; color: #5999A6; }
#newsletter .title { font-weight: bold; font-size: 16pt; height: 32px; padding: 7px 20px 0 20px;
    margin: 15px 3px 0 3px; color: white; text-align: center; }
#newsletter .padding-wrap { padding: 20px; }
#newsletter img { float: left; margin: 0 15px 26px 0; }
#newsletter form { color: #FFC134; }
#newsletter fieldset { border: none; text-align: center; padding: 0 5px 20px 5px; }
#newsletter fieldset div, #newsletter fieldset input { margin-right: 5px; }
#newsletter fieldset #mce-EMAIL { width: 120px; }
#newsletter fieldset .label { display: inline; }