/* WEB LAYOUT */

/* GLOBAL VALUES */

html,body {
    margin: 0px;
    padding: 0px;
    background-color: #000000;
    color: #ffffff;
    font-family: Tahoma, Helvetica, Arial, Verdana, Sans-serif;
    font-size: 12px;
}

table, td, th { font-family: Tahoma, Helvetica, Arial, Verdana, Sans-serif; font-size: 12px; }
h1,h2,h3 { padding-top: 5px; padding-bottom: 6px; margin: 0px; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 14px; }

table th { text-align: left; }

img { border: 0px; }
form { padding: 0px; margin: 0px; }

/* for images */

.margin_min_4 { margin-bottom: -4px; }
.margin_min_6 { margin-bottom: -6px; }

.clear { clear: both; }
.hidden { display: none; }
.underlined { text-decoration: underline; }
.fieldWithErrors { display: inline; }
.no_border { border: 0px; }
.float_left { float: left; }
.float_right { float: right; }
.align_left { text-align: left; }
.align_right { text-align: right; }
.align_center { text-align: center; }
.valign_top { vertical-align: top; }
.valign_bottom { vertical-align: bottom; }
.valign_middle { vertical-align: middle; }
.w330 { width: 330px; }
.w50perc { width: 50%; }
.w100perc { width: 100%; }
.h24  { height: 24px; }
.h72 { height: 72px; }
.h76 { height: 76px; }
.p5 { padding: 5px; }
.p5r { padding-right: 5px; }
.p5l { padding-left: 5px; }
.text_red { color: red; }
.text_green { color: #00ee00; }

a:link, a:active, a:visited { text-decoration: none; color: #ebcf9c; }
a:hover { text-decoration: none; color: white; }

/* NOTIFICATIONS */

.flash { display: block; margin: auto; margin-top: 5px; margin-bottom: 5px; width: 380px; height: 27px; padding-left: 30px; padding-right: 10px; line-height: 26px; font-size: 11px; color: #311e0c;  font-weight: bold; background-color: #000; }
.flash_error { background: transparent url(../images/web/flash/error.png); }
.flash_notice { background: transparent url(../images/web/flash/notice.png); }
.flash_warning { background: transparent url(../images/web/flash/warning.png); }

/* HEADER */

.header { width: auto; height: 37px; background: transparent url(../images/web/header.png) repeat-x; }
.header .header_main { width: 930px; height: 31px; margin: auto; padding-top: 6px; padding-right: 30px; text-align: right; font-weight: bold; font-size: 11px; color: #bbb; }
.header .header_main .langs img { margin-bottom: -4px; }

/* LANGUAGE SELECTION */

.header a.langs:link,
.header a.langs:active,
.header a.langs:visited,
.header a.langs:hover { margin: 4px; }

.header a:link,
.header a:active,
.header a:visited { color: #f7d475; }

.header a:hover { text-decoration: underline; }

/* MAIN LOGO */

.main .center .logo {
    width: 248px;
    height: 95px;
    /* background: url(../images/web/rubygates_logo_header.gif) no-repeat; background-position: top left; */
    position: relative; left: -190px; top: -38px; z-index: 100;
}

/* MENU BOX */

.main .left a.to_game {
  display: block;
  width: 147px;
  height: 41px;
  margin-bottom: 4px;
  text-align: center;
  background: transparent url(../images/web/play.gif) no-repeat;
  font-family: "Palatino Linotype", "Times New Roman", Serif;
  font-weight: bold;
  font-size: 22px;
  line-height: 36px;
  color: #ffffff;
}

.main .left a.to_game:hover {
  background: transparent url(../images/web/play_hi.gif) no-repeat;
  color: #ffffff;
}

.main .left .menubox {
    /*float: left;*/
    padding-left: 12px;
    padding-right: 20px;
    font-size: 11px; text-align: left; font-weight: bold;
}

.main .left .menubox a:link,
.main .left .menubox a:active,
.main .left .menubox a:visited  {
    display: block;
    width: 118px;
    padding-left: 4px;
    padding-bottom: 2px;
    padding-top: 2px;
    background: url(../images/web/menu_left_line.gif) repeat-x; background-position: bottom left;
    text-decoration: none;
    color: #ebcf9c;
}
.main .left .menubox a:hover {
    display: block;
    width: 118px;
    padding-left: 4px;
    padding-top: 2px;
    background: url(../images/web/menu_left_line.gif) repeat-x; background-position: bottom left;
    text-decoration: none;
    color: #ffffff;
}

.main .left .menubox a.no_underline { background: none; }

.main .left .menubox .random_hint {
    width: 118px; padding: 2px; font-weight: normal;
    background: transparent url(../images/web/menu_left_line.gif) repeat-x scroll left bottom;
}

/* PERGAMEN */

.main .center #pergamen { min-height: 300px; }

/* PERGAMEN LINKS */

.main .center .pergamen a:link,
.main .center .pergamen a:active,
.main .center .pergamen a:visited  { color: #71460e; }
.main .center .pergamen a:hover { color: #2a1903; }

.main .center .filter_form input.button {
    margin-top: -4px;
}

/* MENU BOX COLLAPSIBLE HEADER */

.main .left .menubox_head a:link,
.main .left .menubox_head a:active,
.main .left .menubox_head a:visited  {
    display: block;
    width: 147px;
    height: 26px;
    padding-top: 4px;
    background-image: url(../images/web/menu_header_minus.gif);
    background-position: top center;
    background-repeat: no-repeat;
    text-align: center;
    color: #ffffff;
    font-family: "Palatino Linotype", "Times New Roman", serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #ebcf9c;
}

.main .left .menubox_head a:hover {
    display: block;
    width: 147px;
    height: 26px;
    padding-top: 4px;
    background-image: url(../images/web/menu_header_minus.gif);
    background-position: top center;
    background-repeat: no-repeat;
    text-align: center;
    color: #ffffff;
    font-family: "Palatino Linotype", "Times New Roman", serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
}

.main .left .menubox_head_collapsed a:link,
.main .left .menubox_head_collapsed a:active,
.main .left .menubox_head_collapsed a:visited  {
    display: block;
    /*float: left;*/
    width: 147px;
    height: 26px;
    padding-top: 4px;
    background-image: url(../images/web/menu_header_plus.gif);
    background-position: top center;
    background-repeat: no-repeat;
    text-align: center;
    color: #ffffff;
    font-family: "Palatino Linotype", "Times New Roman", serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #ebcf9c;
}

.main .left .menubox_head_collapsed a:hover {
    display: block;
    /*float: left;*/
    width: 147px;
    height: 26px;
    padding-top: 4px;
    background-image: url(../images/web/menu_header_plus.gif);
    background-position: top center;
    background-repeat: no-repeat;
    text-align: center;
    color: #ffffff;
    font-family: "Palatino Linotype", "Times New Roman", serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
}

/* disabled collapsing - unlogged user, etc. */
.main .left .menubox_head div  {
    display: block;
    width: 147px;
    height: 26px;
    padding-top: 4px;
    background-image: url(../images/web/menu_button.gif);
    background-position: top center;
    background-repeat: no-repeat;
    text-align: center;
    color: #ffffff;
    font-family: "Palatino Linotype", "Times New Roman", serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #ebcf9c;
}

.center span.chapter_line {
    display: block;
    height: 2px;
    background-color: red;
    background: url(../images/web/menu_left_line.gif) repeat-x; background-position: bottom left;
}

.center p {
    padding: 0px;
    margin-top: 10px;
    margin-bottom: 6px;
}

.main textarea.textbox {
    background-color: #020a15;
    border: 1px solid #505050;
    color: #ffffff;
    font-size: 12px;
}

.main input.textbox {
    width: 130px;
    height: 16px;
    background-color: #020a15;
    border: 1px solid #505050;
    color: #ffffff;
    font-size: 12px;
}

.main input.text_disabled {
    background-color: #444;
    color: #666;
}

.main input.chat {
    width: 300px;
}

.main .center textarea.textbox {
    background-color: #8C5724;
    border: 1px solid #523f15;
    color: #ebcf9c;
    font-size: 12px;
}

.main .center input.textbox {
    width: 130px;
    height: 16px;
    background-color: #8C5724;
    border: 1px solid #523f15;
    color: #ebcf9c;
    font-size: 12px;
}

/* sedy ramecek */

.main .center .content_box { width: 430px; margin: auto; margin-bottom: 10px; margin-top: 0px; background: url(../images/web/center_content_r.png) repeat-y; background-position: top center; }
.main .center .content_box .cb_headerbg { background: url(../images/web/center_content_top.png) no-repeat; background-position: top center; }
.main .center .content_box .cb_footerbg { background: url(../images/web/center_content_bottom.png) no-repeat; background-position: bottom center; }
.main .center .content_box .cb_content {
  width: 410px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  color: #5C3916;
}

.main .center .content_box .cb_content a.button {
    display: block;
    float: left;
    width: 108px;
    height: 24px;
    margin: 2px;
    background-image: url(../images/web/input_button.gif);
    background-color: transparent;
    background-position: top center;
    background-repeat: no-repeat;
    color: #ffffff;
    font-family: "Palatino Linotype", "Times New Roman", Serif;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    color: #ebcf9c;
    border: 0px;
    text-align: center;
}

.main .center .content_box .cb_content a:hover.button { color: #fff; }

.main .center .content_box textarea.textbox {
    background-color: #8C5724;
    border: 1px solid #523f15;
    color: #ebcf9c;
    font-size: 12px;
}

.main .center .content_box input.textbox {
    background-color: #8C5724;
    border: 1px solid #523f15;
    color: #ebcf9c;
}

.main input.textbox_small {
    width: 130px;
    height: 14px;
    background-color: #020a15;
    border: 1px solid #7a808c;
    color: #ffffff;
    font-size: 11px;
}

.main input.button {
    display: inline;
    width: 108px;
    height: 24px;
    background-image: url(../images/web/input_button.gif);
    background-color: transparent;
    background-position: top center;
    background-repeat: no-repeat;
    color: #ffffff;
    font-family: "Palatino Linotype", "Times New Roman", Serif;
    font-weight: bold;
    font-size: 14px;
    color: #ebcf9c;
    border: 0px;
    cursor: pointer;
    _cursor: hand;
}

.alignleft { text-align: left; }
.aligncenter { text-align: center; }
.aligncenter table { margin: auto; }

/* RATIO BAR */

.ratio {
    overflow: hidden;
    width: 173px; background-color: blue; height: 10px;
    background: url(../images/ratio.gif) no-repeat;
    background-position: 0px -10px;
    margin-top: 2px;
    font-size: 2px;
}

.ratio div {
    height: 10px;
    background: url(../images/ratio.gif) no-repeat;
    background-position: 0px 0px;
}
.ratio div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio.gif) no-repeat;
    background-position: -98px -20px;
    margin-right: -6px;
}

.ratio_big {
    overflow: hidden;
    width: 460px; height: 10px;
    background: transparent url(../images/ratio_large.gif) no-repeat;
    background-position: -190px -10px;
    margin-top: 2px;
    font-size: 2px;
}

.ratio_big div {
    height: 10px;
    background: transparent url(../images/ratio_large.gif) no-repeat;
    background-position: 0px 0px;
}

.ratio_big div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_large.gif) no-repeat;
    background-position: -98px -20px;
    margin-right: -6px;
}

.ratio_156 {
    overflow: hidden;
    width: 156px; background-color: blue; height: 10px;
    background: url(../images/ratio_156.gif) no-repeat;
    background-position: 0px -10px;
    margin-top: 2px;
    font-size: 2px;
}

.ratio_156 div {
    height: 10px;
    background: url(../images/ratio_156.gif) no-repeat;
    background-position: 0px 0px;
}
.ratio_156 div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_156.gif) no-repeat;
    background-position: -98px -20px;
    margin-right: -6px;
}

.ratio_205 {
    overflow: hidden;
    width: 205px; background-color: blue; height: 10px;
    background: url(../images/ratio_205.gif) no-repeat;
    background-position: 0px -10px;
    margin-top: 2px;
    font-size: 2px;
}

.ratio_205 div {
    height: 10px;
    background: url(../images/ratio_205.gif) no-repeat;
    background-position: 0px 0px;
}
.ratio_205 div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_205.gif) no-repeat;
    background-position: -98px -20px;
    margin-right: -6px;
}

/* TRI-COLOR RATIO BAR - 205px */

.ratio_205_tri {
    overflow: hidden;
    width: 205px; background-color: blue; height: 10px;
    background: url(../images/ratio_205_tri.png) no-repeat;
    background-position: 0px -10px;
    margin-top: 2px;
    font-size: 2px;
}

.ratio_205_tri div {
    height: 10px;
    background: url(../images/ratio_205_tri.png) no-repeat;
    background-position: 0px 0px;
}
/*.ratio_205_tri div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_205_tri.gif) no-repeat;
    background-position: -98px -20px;
    margin-right: -6px;
}
*/
.ratio_205_tri.red {
    overflow: hidden;
    width: 205px; background-color: red; height: 10px;
    background: url(../images/ratio_205_tri.png) no-repeat;
    background-position: 0px -40px;
    margin-top: 2px;
    font-size: 2px;
}

.ratio_205_tri.red div {
    height: 10px;
    background: url(../images/ratio_205_tri.png) no-repeat;
    background-position: 0px -30px;
}
/*.ratio_205_tri.red div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_205_tri.png) no-repeat;
    background-position: -98px -50px;
    margin-right: -6px;
}
*/
.ratio_205_tri.orange {
    overflow: hidden;
    width: 205px; background-color: #ffff00; height: 10px;
    background: url(../images/ratio_205_tri.png) no-repeat;
    background-position: 0px -70px;
    margin-top: 2px;
    font-size: 2px;
}

.ratio_205_tri.orange div {
    height: 10px;
    background: url(../images/ratio_205_tri.png) no-repeat;
    background-position: 0px -60px;
}

/*.ratio_205_tri.orange div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_205_tri.png) no-repeat;
    background-position: -98px -80px;
    margin-right: -6px;
}
*/

/* TRI-COLOR RATIO BAR - 100px */

.ratio_100_tri {
    overflow: hidden;
    width: 100px; background-color: blue; height: 10px;
    background: url(../images/ratio_100_tri.png) no-repeat;
    background-position: 0px -10px;
    margin-top: 2px;
    font-size: 2px;
}

.ratio_100_tri div {
    height: 10px;
    background: url(../images/ratio_100_tri.png) no-repeat;
    background-position: 0px 0px;
}
/*.ratio_100_tri div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_100_tri.png) no-repeat;
    background-position: -98px -20px;
    margin-right: -6px;
}
*/
.ratio_100_tri.red {
    overflow: hidden;
    width: 100px; background-color: red; height: 10px;
    background: url(../images/ratio_100_tri.png) no-repeat;
    background-position: 0px -40px;
    margin-top: 2px;
    font-size: 2px;
}

.ratio_100_tri.red div {
    height: 10px;
    background: url(../images/ratio_100_tri.png) no-repeat;
    background-position: 0px -30px;
}
/*.ratio_100_tri.red div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_100_tri.png) no-repeat;
    background-position: -98px -50px;
    margin-right: -6px;
}
*/
.ratio_100_tri.orange {
    overflow: hidden;
    width: 100px; background-color: #ffff00; height: 10px;
    background: url(../images/ratio_100_tri.png) no-repeat;
    background-position: 0px -70px;
    margin-top: 2px;
    font-size: 2px;
}

.ratio_100_tri.orange div {
    height: 10px;
    background: url(../images/ratio_100_tri.png) no-repeat;
    background-position: 0px -60px;
}

/*.ratio_100_tri.orange div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_100_tri.png) no-repeat;
    background-position: -98px -80px;
    margin-right: -6px;
}
*/


/* TRI-COLOR RATIO BAR WITH GRAY INACTIVE - 205px */

.ratio_205_tri_gray {
    overflow: hidden;
    width: 205px; background-color: blue; height: 10px;
    background: url(../images/ratio_205_tri_gray.png) no-repeat;
    background-position: 0px -10px;
    margin-top: 2px;
    font-size: 2px;
}

.ratio_205_tri_gray div {
    height: 10px;
    background: url(../images/ratio_205_tri_gray.png) no-repeat;
    background-position: 0px 0px;
}
/*.ratio_205_tri_gray div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_205_tri_gray.gif) no-repeat;
    background-position: -98px -20px;
    margin-right: -6px;
}
*/
.ratio_205_tri_gray.red {
    overflow: hidden;
    width: 205px; background-color: red; height: 10px;
    background: url(../images/ratio_205_tri_gray.png) no-repeat;
    background-position: 0px -40px;
    margin-top: 2px;
    font-size: 2px;
}

.ratio_205_tri_gray.red div {
    height: 10px;
    background: url(../images/ratio_205_tri_gray.png) no-repeat;
    background-position: 0px -30px;
}
/*.ratio_205_tri_gray.red div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_205_tri_gray.png) no-repeat;
    background-position: -98px -50px;
    margin-right: -6px;
}
*/
.ratio_205_tri_gray.orange {
    overflow: hidden;
    width: 205px; background-color: #ffff00; height: 10px;
    background: url(../images/ratio_205_tri_gray.png) no-repeat;
    background-position: 0px -70px;
    margin-top: 2px;
    font-size: 2px;
}

.ratio_205_tri_gray.orange div {
    height: 10px;
    background: url(../images/ratio_205_tri_gray.png) no-repeat;
    background-position: 0px -60px;
}

/*.ratio_205_tri_gray.orange div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_205_tri_gray.png) no-repeat;
    background-position: -98px -80px;
    margin-right: -6px;
}
*/

/* PICTURE FRAME */

.picture_frame_170_130 {
    padding: 5px;
    width: 160px;
    height: 120px;
    background: url(../images/frame_170_130.gif) no-repeat;
    margin: auto;
}

/* TRI-COLOR RATIO BAR - 205px */


.ratio_stats {
    overflow: hidden;
    width: 300px;
    height: 10px;
    background: transparent url(../images/ratio_stats.gif) no-repeat;
    background-position: 0px 0px;
    margin-top: 2px;
    margin-left: 8px;
    font-size: 2px;
}

.ratio_stats div {
    height: 10px;
    background: transparent url(../images/ratio_stats.gif) no-repeat;
    background-position: 0px -10px;
}

.ratio_stats div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_stats.gif) no-repeat;
    background-position: -145px -20px;
    margin-right: -6px;
}

.ratio_stats.yellow {
    background-position: 0px -10px;
}

.ratio_stats.yellow div {
    height: 10px;
    background: transparent url(../images/ratio_stats.gif) no-repeat;
    background-position: 0px -30px;
}

.ratio_stats.yellow div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_stats.gif) no-repeat;
    background-position: -145px -40px;
    margin-right: -6px;
}

.ratio_stats.orange {
    background-position: 0px -30px;
}

.ratio_stats.orange div {
    height: 10px;
    background: transparent url(../images/ratio_stats.gif) no-repeat;
    background-position: 0px -50px;
}

.ratio_stats.orange div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_stats.gif) no-repeat;
    background-position: -145px -60px;
    margin-right: -6px;
}

.ratio_stats.red {
    background-position: 0px -50px;
}

.ratio_stats.red div {
    height: 10px;
    background: transparent url(../images/ratio_stats.gif) no-repeat;
    background-position: 0px -70px;
}

.ratio_stats.red div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_stats.gif) no-repeat;
    background-position: -145px -80px;
    margin-right: -6px;
}

.ratio_stats.violet {
    background-position: 0px -70px;
}

.ratio_stats.violet div {
    height: 10px;
    background: transparent url(../images/ratio_stats.gif) no-repeat;
    background-position: 0px -90px;
}


.ratio_stats.violet div div {
    float: right;
    width: 12px;
    height: 10px;
    background: url(../images/ratio_stats.gif) no-repeat;
    background-position: -145px -100px;
    margin-right: -6px;
}