/** box.css has all the styles for different boxes **/
@import url(box.css);

body {
    margin:10px 0px; padding:0px;
    text-align:center;
    color: #000; background: #A8D4FF url(../images/bg/bg_habbo.gif) top left; font: 60% verdana, sans-serif;
}

a:link, a:visited { color: #F75E00; text-decoration: none; font-weight: bold; }
a:hover { text-decoration:underline; }
h1 { margin-top: 0; padding-top: 0; text-transform:uppercase; font-weight: bold; font-size: 150%; color: #069; }
h2 { margin: 0; padding: 0; color: #069; font-size: 100%; text-transform:uppercase; }
h3 { text-transform:uppercase; font-weight: bold; font-size: 150%; color: #069; }
h4 { margin: 0; padding: 0; color: #069; font-size: 100%; }
.left	{ float: left; }
.right	{ float: right;}
.clear { clear: both; }
.hidden { display: none; }
img { border: 0; }

/* ------------------------- body (check sections.css) ---------------- */
#banners-top { position: relative; margin: 0; padding: 0; width: 100%; height: 12px; background: #000 url(../images/bg/header_line.gif) bottom left repeat-x; text-align:left; }
#banners-top-ads { margin: 0; padding: 0; width: 100%; height: 107px; background: transparent url(../images/bg/header_ads.gif) bottom left repeat-x; text-align:center; }
#container { position: relative; width: 941px; margin: 0; padding: 0; background: transparent; }

/* ------------------------- headers (check sections.css) ---------------- */
#header { margin: 0; padding: 0; width: 770px; height: 115px; background: transparent left top no-repeat; float: left; }
#header a, #header a:visited { color: #000; }

/* ------------------------- content elements ---------------- */
#main-content { float: left; width: 536px; padding: 9px 11px 9px 11px; \width: 558px; w\idth: 536px; /** IE 5.x fix (will use 558px width) **/ } /** main content and right side boxes are inside this container **/
#sidebar { float: left; width: 171px; margin: 0; padding: 0; text-align: center; } /** navigation is inside this **/
#sidebar .content { background: transparent url(../images/navigation/bg.gif) top left no-repeat; padding: 24px 0 0 0; margin: 0; z-index: 1; font-size: 110%; }
#content-content { float: left; font-size: 100%;  _font-size: 90%; } /** main content is inside this **/
#content-content-wide { float: left; width: 572px; font-size: 100%; _font-size: 90%; } /** when there is only 1 colum **/
#content-sidebar { float: right; width: 197px; } /** right side boxes are inside this **/
#content-flag { width: 200px; float: left; }

/* ------------------------- footers (check sections.css) ---------------- */
.footer { color: #C60; text-align: center; clear: both; /** width: 519px; **/ }
.footer a:link, .footer a:visited { color: #c60; }
#footer-area { width: 327px; }


/* ------------------------- colors ---------------- */
.orange { color: #FF800D; }
.lightblue { background: #D7EDF6; } /** used in highscore lists etc **/

/* ------------------------- navigation ---------------- */
#key { position: absolute; top: 118px; left: 0px; } /** key element **/

#navigation { margin-left: 15px; _margin-left: 0px; font-size: 110%; }
#navigation .top { background: transparent url(../images/navigation/top.gif) top left no-repeat; width: 139px; height: 8px; }
#navigation .bottom { background: transparent url(../images/navigation/bottom2.gif) top left no-repeat; width: 139px; height: 8px; }
#navigation .bottom-active { background: transparent url(../images/navigation/bottom-active.gif) top left no-repeat; width: 139px; height: 8px; }
.nav { background: #FC6303 url(../images/navigation/tausta.gif) top left repeat; padding: 0 0 0 7px; color: #fff; text-align: left; }
.nav a, .nav a:hover, .nav a:visited, .nav a:active { color: #fff; text-decoration: none; text-transform: uppercase; display: block; width: 100%; background: #FC6303; }
.arrow { background: transparent url(../images/navigation/nav-arrow.gif) top right repeat-x; }
.arrow-active { background: transparent url(../images/navigation/nav-arrow-active2.gif) top right repeat-x; }
.nav-active { background: transparent url(../images/navigation/tausta-active.gif) top left repeat; padding: 0 0 0 7px; color: #fff; text-align: left; }
.nav-active a, .nav-active a:hover, .nav-active a:visited { color: #000; text-decoration: none; text-transform: uppercase; display: block; width: 100%; }
.nav-active-top { background: transparent url(../images/navigation/top-active.gif) top left no-repeat; width: 139px; height: 8px; }
.nav-active-bottom { background: transparent url(../images/navigation/single_bottom-selected.gif) top left no-repeat; width: 139px; height: 7px; }

/** sub navigation **/
.nav-sub, .nav-sub-last { background: transparent url(../images/navigation/tausta.gif) top left repeat; padding: 2px 0 2px 7px; color: #fff; text-align: left; border-bottom: 1px solid #000; font-size: 90%; }
.nav-sub-last-active { background: transparent url(../images/navigation/tausta.gif) top left repeat; padding: 2px 0 2px 7px; color: #fff; text-align: left; font-size: 90%; }

.nav-sub a, .nav-sub a:hover, .nav-sub a:visited, .nav-sub a:active, .nav-sub-last a, .nav-sub-last a:hover, .nav-sub-last a:visited, .nav-sub-last a:active { color: #fff; text-decoration: none; display: block; width: 100%; }
.arrow-sub, .arrow-sub-last { background: transparent url(../images/navigation/nav-arrow-bg.gif) top right repeat-x; border-bottom: 1px solid #000; }
.arrow-sub-last { background: #fff; border-bottom: 0px solid transparent; }
.nav-sub-last { border-bottom: 0px solid transparent; padding-bottom: 0; }
.nav-sub-last-active { background: transparent url(../images/navigation/tausta-active.gif) top left repeat; padding: 2px 0 0px 7px; color: #fff; text-align: left; }
.nav-sub-active { background: transparent url(../images/navigation/tausta-active.gif) top left repeat; padding: 2px 0 2px 7px; color: #fff; text-align: left; border-bottom: 1px solid #000; font-size: 90%; }
.nav-sub-active a, .nav-sub-active a:hover, .nav-sub-active a:visited, .nav-sub-last-active a, .nav-sub-last-active a:hover, .nav-sub-last-active a:visited { color: #000; text-decoration: none; display: block; width: 100%; }
.arrow-sub-active { background: transparent url(../images/navigation/nav-arrow-active.gif) top right repeat-x; border-bottom: 1px solid #000; }
.arrow-sub-last-active { background: transparent url(../images/navigation/nav-arrow-active.gif) top right repeat-x; }

/** this ends the navigations "yellow area" **/
.navigation-bottom { background: #EF7A06 url(../images/navigation/bottom.gif) top left no-repeat; height: 60px; width: 171px; }

/* ------------------------- flag ---------------- */
#flag { width: 209px;  }
#flag .top { width: 209px; height: 114px; background: transparent url(../images/flag/top.gif) top left no-repeat; }
#flag .top span { text-align: center; color: #fff; padding: 99px 0 0 35px; display: block; }
#flag .content { width: 209px; background: transparent url(../images/flag/bg.gif) top left repeat-y; text-align: right; }
#flag .content span { padding: 0 12px 0 0; }
#flag .content span img { margin: 0 0 12px 0; }
#flag .bottom { width: 209px; height: 45px; background: transparent url(../images/flag/bottom.gif) top left no-repeat; }


/* ------------------------- lines ---------------- */
.line-dotted-blue { background: transparent url(../images/lines/horizontal_dotted_blue.gif) top left repeat-x; height: 13px; width: 100%; display: block; margin: 0 7px; }
#content-content .line-dotted-blue { width: 301px; margin: 0; clear: both; } /** middle section **/
.line-dotted-blue-wide { background: transparent url(../images/lines/horizontal_dotted_blue.gif) top left repeat-x; height: 19px; width: 522px; display: block; clear: both; }

/* ------------------------- form ---------------- */
form { margin: 0; padding: 0; }
input { }
.search-small { width: 125px; margin: 0 0 0 13px; }

/* ------------------------- tables ---------------- */
table { font-size: 100%; }
table.highscores { margin: 10px 0 0 0; }
table.highscores td { height: 15px; padding: 0 7px;  }
table.highscores th { color: #069; padding: 0 0 3px 0; }
table.highscores img { float: none; margin: 10px 0 0 0; }
#content-sidebar table.highscores { margin: 10px 0 4px 10px; }

/* ------------------------- buttons/3rd nav ---------------- */
.button { height: 21px; margin: 6px 0; }
.button .middle { background: transparent url(../images/buttons/button_bg.gif) top left repeat-x; }
.button a, .button a:visited, .button a:hover { color: #fff; text-decoration: none; }
.button .active { background: transparent url(../images/buttons/button_bg_active.gif) top left repeat-x; }
.button .active a, .button .active a:visited, .button .active a:hover { color: #000; text-decoration: none; }
.button-left-side { background: transparent url(../images/buttons/button_left.gif) top left no-repeat; width: 9px; height: 21px;  }
.button-left-side-arrow { background: transparent url(../images/buttons/button_left2.gif) top left no-repeat; width: 23px; height: 21px; }
.button-right-side { background: transparent url(../images/buttons/button_right2.gif) top left no-repeat; width: 9px; height: 21px; }
.button-right-side-arrow { background: transparent url(../images/buttons/button_right.gif) top left no-repeat; width: 23px; height: 21px; }
.button-seperator { background: transparent url(../images/buttons/button_seperator.gif) top left no-repeat; width: 17px; height: 21px; }

.button-seperator-active-left { background: transparent url(../images/buttons/button_seperator_left.gif) top left no-repeat; width: 17px; height: 21px; }
.button-seperator-active-right { background: transparent url(../images/buttons/button_seperator_right.gif) top left no-repeat; width: 17px; height: 21px; }

/* ------------------------- bullet list ---------------- */
ul, ul.faq { margin-left: 17px; padding: 0;  }
ul.fag li { list-style-image: url(../images/li_faq.gif); margin-bottom: 5px;  }
ul li { margin-bottom: 5px; }

/* ------------------------- payment sulake ---------------- */
.payment-steps { margin: 10px 10px 10px 0px; padding: 0; } */
.payment-topmargin { margin-top: 18px; }
.payment-buttons-left-margin { margin: 0 0 0 167px; }

.error-box { background: #fff url(../images/icons/payment/error_box_bg.gif) top right no-repeat; width: 100%; height: 26px; text-transform:uppercase; color: #fff; margin: 12px 0 9px 0; }
.error-box p { margin: 0; padding: 7px 0 0 0; }
.error-box span { width: 35px; height: 26px; background: transparent url(../images/icons/payment/error_box_left.gif) top left no-repeat; display: block; float: left; }