/******************
 *  GLOBAL RESET  *
 ******************/
 
*
{
  margin:                     0;
  padding:                    0;
}

html, body
{
  width:                      100%;
  height:                     100%;
}


/***************
 *  CENTERING  *
 ***************/
 
body
{
  background:                 #818284 url("../img/body3.gif") repeat 0 0;
  text-align:                 center;
}

div#wrapper
{
  position:                   absolute;
  left:                       50%;
  text-align:                 left;
  width:                      770px;
  margin-left:                -385px;
  padding:                    0 0 115px 0;  
}

div.content
{
  background:                 white;
  margin:                     0;
  padding:                    0;
  width:                      770px;
}

/****************
 *  TYPOGRAPHY  *
 ****************/
 
body 
{
  font-family:                Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
  color:                      #444;
  font-size:                  12px;
  font-weight:                normal;
  font-style:                 normal; 
}

a, a:link, a:visited, a:active
{ 
  color:                      #336699; 
  background-color:           transparent;
  text-decoration:            underline;
}

a:hover
{
  color:                      #336699; 
  background-color:           transparent;
  text-decoration:            none;
}

a.graphic, a.graphic:link, a.graphic:visited, a.graphic:active, a.graphic:hover
{ 
  border:                     none; 
  text-decoration:            none; 
  background-color:           transparent;
}

h1 
{
	color:                       #B50042;
	font-size:                   28px;
	font-weight:                 normal;
	margin:                      0.35em 0 0.35em 0;
	line-height:                 1.1em;
}

h2 
{
	font-size:                   14px;
	font-weight:                 bold;
	color:                       #263B56;
	margin:                      0.1em 0 0.2em 0;
	line-height:                 1.1em;
	text-align:                  justify;
}

h2.underline
{
  border-bottom:               solid 1px #aaa;
  margin-bottom:               1em;
}

h3 
{
	font-size:                   12px;
	font-weight:                 bold;
	color:                       #263B56;
	margin:                      0.2em 0 0.2em 0;
	line-height:                 1.1em;
	font-style:                  italic;
}
	
h4 
{
	font-size:                   1.2em;
	line-height:                 1.6em;
	color:                       #316595;
	display:                     block;
	padding-top:                 5px;
	border:                      none;
}

h5 
{
	font-size:                   1.1em;
	line-height:                 1.5em;
	color:                       #333333;
	display:                     block;
	padding-top:                 5px;
}

h6 
{
	font-size:                   1.0em;
	line-height:                 1.4em;
	color:                       #316595;
	display:                     block;
	padding-top:                 5px;
}

p 
{
  margin-top:                 0.2em;
	margin-bottom:              0.6em;
	text-align:                 left;
	line-height:                1.4em;
}	

ul
{
  padding-left:               15px;
  list-style-image:           url("../img/bullet.gif");
  margin-bottom:              8px;
  
}

.gold, a.gold, a.gold:link, a.gold:visited, a.gold:active, a.gold:hover
{
  font-weight:                bold;
  color:                      #FFC81F;
}

.bigger
{
  font-size:                  125%;
}

.grey
{
  color:                      #888;
}

table
{
  font-family:                Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
  font-size:                  12px;
}

/***************
 *    INPUT    *
 ***************/

input 
{
  font-family:                Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
  color:                      #333;
  font-size:                  12px;
  font-weight:                normal;
  font-style:                 normal;  
}
 
input.input100
{
  width:                      85px; 
  height:                     20px; 
  padding:                    1px 10px 0 10px;
  border:                     solid 0px white;
  background:                 transparent url("../img/input_100.gif") no-repeat 0 0 fixed;
}
input[class=input100]
{
	background:                 transparent url("../img/input_100.gif") no-repeat 0 0;
}

input.input200
{
  width:                      185px; 
  height:                     20px; 
  padding:                    1px 10px 0 10px;
  border:                     solid 0px white;
  background:                 transparent url("../img/input_200.gif") no-repeat 0 0 fixed;
}
input[class=input200]
{
	background:                 transparent url("../img/input_200.gif") no-repeat 0 0;
}

input.input300
{
  width:                      285px; 
  height:                     20px; 
  padding:                    1px 10px 0 10px;
  border:                     solid 0px white;
  background:                 transparent url("../img/input_300.gif") no-repeat 0 0 fixed;
}
input[class=input300]
{
	background:                 transparent url("../img/input_300.gif") no-repeat 0 0;
}

select
{
  font-family:                Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
  color:                      #333;
  font-size:                  12px;
  font-weight:                normal;
  font-style:                 normal; 
}

textarea
{
  width:                      100%;
  font-family:                Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
  color:                      #333;
  font-size:                  12px;
  font-weight:                normal;
  font-style:                 normal; 
  height:                     200px;
}

/*********************
 *    FORM TABLE     *
 *********************/
 
table.form
{
  width:                      100%;
}

table.form td.left
{
  text-align:                 right;
  padding:                    5px 10px 5px 0;
  border-right:               solid 2px #DBE8ED;
}

table.form td.right
{
  text-align:                 left;
  padding:                    5px 0 5px 10px;
}

table.form span.required
{
  color:                      #B50042;
}

table.form div.comment
{
  color:                      #888;
  margin:                     8px 0 20px 0;
}

table.form div.error
{
  font-weight:                bold;
  color:                      red;
}


/***************
 *     BOX     *
 ***************/
 
div.box_normal
{
  border:                     solid 1px #B2D7E1;
  background:                 #F2F7F8;
  padding:                    5px;
  margin:                     0 0 10px 0;
}

div.box_normal div.box_normal_caption
{
  padding:                    3px 0 3px 0;
  margin:                     0 0 8px 0;
  border-bottom:              solid 1px #aaa;
  font-size:                  90%;
}

div.box_normal div.box_normal_footer
{
  padding:                    3px 0 0 0;
  margin:                     8px 0 0 0;
  border-top:                 solid 1px #aaa;
  font-size:                  90%;
}  

div.box_trace
{
  border:                     solid 1px #B2D7E1;
  background:                 #F2F7F8;
  padding:                    5px;
  margin:                     0 0 10px 0;
}

div.box_warning
{
  font-weight:                bold;
  border:                     solid 1px #ECDA6E;
  background:                 #FFFFE9 url("../img/icons/warning.gif") no-repeat 10px 10px;
  padding:                    12px 5px 14px 45px;
  margin:                     0 0 10px 0;
}

div.box_error
{
  border:                     solid 1px #DEA3A3;
  background:                 #FFEDE5 url("../img/icons/error.gif") no-repeat 10px 10px;
  padding:                    12px 5px 14px 45px;
  margin:                     0 0 10px 0;
}

div.box_info
{
  color:                      #294B6E;
  border:                     solid 1px #B2D7E1;
  background:                 #F2F7F8 url("../img/icons/info.gif") no-repeat 10px 10px;
  padding:                    12px 5px 14px 45px;
  margin:                     0 0 10px 0;
}

div.box_success
{
  color:                      #386522;
  border:                     solid 1px #9CD580;
  background:                 #EDFFE4 url("../img/icons/success.gif") no-repeat 10px 10px;
  padding:                    12px 5px 14px 45px;
  margin:                     0 0 10px 0;
}

/***************
 *   PANEL     *
 ***************/
 
div.panel
{
  width:                      294px;
  background:                 white url("../img/panel_294_bg.gif") no-repeat 0 0;
  margin:                     0 0 10px 0;
  height:                     auto;
  overflow:                   hidden;
}

div.panel.collapsed
{
  height:                     35px;
}

div.panel div.panelcaption
{
  width:                      278px; /* -16 padding */
  background:                 transparent no-repeat 5px 5px;
  margin:                     0 8px 0 8px;
  padding:                    5px 0 5px 0;
  color:                      black;
  font-size:                  16px;
  border-bottom:              solid 2px #B50042;
}

div.panel div.panelcontent
{
  position:                   relative;
  width:                      250px;
  padding:                    5px 10px 0 30px;
  border:                     none;
}

/*******************
 *   WIDEPANEL     *
 *******************/
 
div.widepanel
{
  width:                      598px;
  background:                 white url("../img/panel_bg.gif") no-repeat 0 0;
  margin:                     0 0 10px 0;
  overflow:                   hidden;
  min-height:                 115px;
}

div.widepanel div.panelcaption
{
  width:                      582px; /* -16 padding */
  background:                 transparent no-repeat 5px 5px;
  margin:                     0 8px 0 8px;
  padding:                    5px 0 5px 0;
  color:                      black;
  font-size:                  16px;
  border-bottom:              solid 2px #B50042;
}

div.widepanel div.panelcontent
{
  width:                      586px;
  padding:                    5px 4px 0 6px;
}

/***************
 *    HEADER   *
 ***************/
 
div.header
{
  position:                   relative;
  width:                      770px;
  height:                     95px;
  background:                 transparent url("../img/header.gif") no-repeat 0 0;
  margin-top:                 15px;
  color:                      white;
}

div.header div.login
{
  text-align:                 right;
  padding:                    6px 10px 0 0;
  line-height:                28px;
}

div.logout
{
  margin:                     15px 20px 0 0;
  float:                      right;
}

div.footer
{
  width:                      770px;
  height:                     70px; /* -30 padding */
  background:                 transparent url("../img/footer.gif") no-repeat 0 0;
  margin:                     0 0 0 0;
  padding:                    33px 0 0 0;
  color:                      white;  
  text-align:                 center;
  font-size:                  11px;
  line-height:                1.2em;
}

/*********************
 *      LOGIN        *
 *********************/

div#login
{
  background:                 transparent url("../img/login.jpg") no-repeat 0 0;
  position:                   absolute;
  top:                        50%;
  left:                       50%;
  text-align:                 left;
  width:                      340px; /* 380 - 40 */
  margin-left:                -190px;
  height:                     400px;
  margin-top:                 -200px;
  padding:                    20px 20px 20px 20px;
}

/*********************
 *      STEPS        *
 *********************/
 
div.step_completed
{
  margin:                     0 0 10px 0;
  padding:                    0 0 0 23px;
  color:                      #ccc;
  text-decoration:            line-through;
  background:                 url("../img/admin_checked.gif") no-repeat 0 0;
}

div.step_current
{
  margin:                     0 0 10px 0;
  padding:                    0 0 0 23px;
  color:                      #C20041;
  background:                 url("../img/admin_not_checked.gif") no-repeat 0 0;
}

div.step_future
{
  margin:                     0 0 10px 0;
  padding:                    0 0 0 23px;
  color:                      #ccc;
  background:                 url("../img/admin_not_checked.gif") no-repeat 0 0;
}

/*********************
 *     SIDEBAR       *
 *********************/
 
td.sidebar
{
  width:                      150px; /* -10 padding */
  background:                 #FFF9FE; /* #fbfbfb */
  padding:                    15px 1px 15px 1px;
}

td.sidebar ul
{
  list-style:                 none;  
  list-style-type:            none;
  list-style-image:           none;
  padding:                    0;
  margin:                     0;
}

td.sidebar li
{
  margin:                     0;
  padding:                    0 0 0 0px;
  border:                     solid 1px #FFF9FE;  /* sja... */
}

td.sidebar li a, td.sidebar li a:link, td.sidebar li a:visited, td.sidebar li a.active, td.sidebar li a:hover
{
  display:                    block;
  border-bottom:              solid 1px #ecc;
  padding:                    5px 0 5px 34px;
  background-position:        5px 5px;
  background-repeat:          no-repeat;
  text-decoration:            none;
  font-weight:                normal;
  color:                      #555;
  margin:                     0;
}

td.sidebar li a.active, td.sidebar li a.active:link, td.sidebar li a.active:visited, td.sidebar li a.active:active, td.sidebar li a.active:hover
{
  border-bottom:              solid 2px #B50042;
  font-weight:                bold;
  background-color:           #eee;
}

td.sidebar li a:hover
{
  border-bottom:              solid 1px #B50042;
  background-color:           #eee;
}

td.sidebar li.active a:hover
{
  border-bottom:              solid 2px #B50042;
  background-color:           #eee;
}

td.sidebar ul ul
{
  list-style:                 none;
  padding:                    5px 0 8px 0;
  margin:                     0;
  background-color:           #eee;
}

td.sidebar li li
{
  border:                     solid 1px #eee;
}

td.sidebar li li a, td.sidebar li li a:link, td.sidebar li li a:visited, td.sidebar li li a:active, td.sidebar li li a:hover
{
  font-size:                  90%;
  font-weight:                normal;
  color:                      #666;
  padding:                    2px 0 2px 27px;
  text-decoration:            none;
  background:                 transparent;
  border:                     none;
}

td.sidebar li li a:hover
{
  color:                      #333;
  background:                 transparent url("../img/menu_arrow.gif") no-repeat 15px 5px;
}

td.sidebar li li a.active, td.sidebar li li a.active:link, td.sidebar li li a.active:visited, td.sidebar li li a.active:active, td.sidebar li li a.active:hover
{
  border-bottom:              none;
  font-weight:                bold;
  color:                      black;
  background-color:           transparent;  
  background:                 transparent url("../img/menu_arrow.gif") no-repeat 15px 5px;
}


/**********************
 *     MESSAGEBOX     *
 **********************/
 
table.messagebox
{
  width:                      100%;
  padding:                    10px 10px 40px 10px;
  margin-bottom:              10px;
  background:                 transparent url("../img/panel_bg.gif") no-repeat 0 0;
}

table.messagebox th
{
  padding:                    5px 10px 5px 10px;
  text-align:                 left; 
  border-bottom:              solid 1px #B50042;
}

table.messagebox th a, table.messagebox th a:link, table.messagebox th a:visited, table.messagebox th a:active, table.messagebox th a:hover
{
  text-decoration:            none;
  color:                      inherit;
}

table.messagebox td
{
  padding:                    2px 10px 2px 10px;
  border-bottom:              solid 1px #B7CBD6;
}

table.messagebox tr.new td
{
  background-color:           #EDF4F8;
}

table.messagebox tr td a, table.messagebox tr td a:link, table.messagebox tr td a:visited, table.messagebox tr td a:active, table.messagebox tr td a:hover
{
  text-decoration:            none;
}

table.messagebox tr.new td a
{
  font-weight:                bold;
}


/****************************
 *      MESSAGE BOX         *
 ****************************/

div.message 
{
}

div.message img
{
  vertical-align:            text-bottom;
}


/****************************
 *          MUGSHOT         *
 ****************************/
 
div.polaroid
{
  width:                      93px;
  height:                     103px;
  background:                 #888 url("../img/polaroid.jpg") no-repeat 0 0;
  position:                   relative;
}

div.polaroid div.polaroid_symbols
{
  position:                   absolute;
  z-index:                    1;
  width:                      80px;
  height:                     13px;
  left:                       10px;
  top:                        3px;
}

div.polaroid div.mugshot
{
  width:                      80px;
  height:                     60px;
  position:                   absolute;
  left:                       6px;
  top:                        11px;
}

div.polaroid div.caption
{
  width:                      85px;
  height:                     24px;
  position:                   absolute;
  left:                       4px;
  top:                        77px;
  text-align:                 center;
  overflow:                   hidden;
  font-size:                  10px;
  font-weight:                bold;
  line-height:                1.1em;
}

/**************************
 *        RATING          *
 **************************/
 
div.rating
{
  width:                      172px;
  height:                     21px;
  padding:                    4px 0 0 7px;
  background:                 transparent url("../img/rating_bg.gif") no-repeat 0 0;
  font-size:                  1px;
}

div.ratingstar
{
  width:                      16px;
  height:                     15px;
  background:                 transparent url("../img/rating_star.png") no-repeat 0 0;
  float:                      left;
  cursor:                     pointer;
  padding:                    0;
  margin:                     0 0 0 0;
  font-size:                  1px;
}

/**************************
 *        POPUP           *
 **************************/
 
div.popup
{
  position:                   absolute;
  top:                        0;
  left:                       0;
  z-index:                    99; /* above everything else */
  height:                     41px;
  width:                      151px;
  background:                 transparent;
  padding:                    0;
  filter:                     alpha(opacity=90);
  opacity:                    0.90;
}

div.popup_top
{
  width:                      151px; /* -10 padding */  
  background:                 transparent url("../img/popup_top.gif") no-repeat 0 0;
}

div.popup_text
{
  font-family:                Arial;
  text-align:                 left;
  font-size:                  9px;
  padding:                    4px 5px 1px 22px;
}

div.popup_bottom
{
  width:                      151px;
  height:                     6px;
  background:                 transparent url("../img/popup_bottom.gif") no-repeat 0 0;
}
 
/******************************
 *         MAGNIFY            *
 ******************************/

div.magnify
{
  position:                   absolute;
  left:                       0;
  top:                        0;
  z-index:                    90;
  width:                      274px;
  height:                     274px;
  background:                 transparent no-repeat 7px 7px;
  padding:                    0;
}

div.magnify_frame
{
  width:                      274px;
  height:                     274px;
  background:                 transparent url("../img/photo_frame.gif") 0 0;
  padding:                    0;
}

/******************************
 *          BUBBLE            *
 ******************************/
 
div.bubble
{
  position:                   absolute;
  left:                       0px;
  top:                        0px;
  z-index:                    80;
  width:                      300px;
  background:                 transparent url("../img/panel_alert.gif") no-repeat 0 0;
}

div.chatbox
{
  position:                   absolute;
  left:                       15px;
  top:                        15px;
  width:                      300px;
  border:                     solid 1px #333;
  padding:                    0;
  background:                 #fff;
  /* filter:                     alpha(opacity=90);
  opacity:                    0.9; */
  text-align:                 left;
  z-index:                    400;
}

div.chatbox div.chatbox_caption
{
  padding:                    5px;
  font-size:                  13px;
  font-weight:                bold;
  height:                     20px;
  cursor:                     pointer;
  background:                 #F2F7F8;
  border-bottom:              solid 1px #333;
}

div.chatbox div.chatbox_messages
{
  background:                 white;
  padding:                    5px;
}

div.chatbox div.chatbox_smileys
{
  border-top:                 solid 1px #333;
  padding:                    3px;
  background:                 #F2F7F8;
}

div.chatbox div.chatbox_input
{
  border-top:                 solid 1px #333;
  padding:                    5px;
  background:                 #F2F7F8;
}

/********************************
 *           TETRIS             *
 ********************************/

div.tetris
{
  margin:                     0 10px 0 10px;
}

div.tetris_paused
{
  width:                      110px;
  height:                     35px;
  border:                     solid 1px #B2D7E1;
  background:                 #F2F7F8;
  position:                   absolute;
  left:                       25px;
  top:                        100px;
  text-align:                 center;
  font-weight:                bold;
  font-size:                  10px;
  z-index:                    1;
  padding:                    5px;
}

div.tetris_points
{
  width:                      25px;
  height:                     15px;
  border:                     solid 1px #B2D7E1;
  background:                 #F2F7F8;
  position:                   absolute;
  left:                       0px;
  top:                        0px;
  text-align:                 center;
  font-weight:                bold;
  font-size:                  8px;
  z-index:                    2;
}

table.tetris
{
  border:                     solid 2px #B2D7E1;
}

td.tetris
{
  width:                      15px;
  height:                     15px;
  background:                 black no-repeat 0 0;
  font-size:                  0px;
}

/********************************
 *           FORUM              *
 ********************************/
 
div.forum_signature
{
  border-top:                 solid 1px #aaa;
  margin-top:                 15px;
  padding-top:                5px;
  color:                      #999;
  font-size:                  10px;
}

/********************************
 *            SIFR              *
 ********************************/
 
.sIFR-hasFlash h1 {
	visibility: hidden;
}

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/********************************
 *           GARDEN             *
 ********************************/
 
div.garden
{
  position:                             relative;
  width:                                600px;
  height:                               400px;
  background:                           url("../img/garden.png") no-repeat 0 0;
  border:                               solid 1px black;
}

div.garden_person
{
  position:                             absolute;
  z-index:                              1;
  left:                                 0;
  top:                                  0;
}

div.garden_person_name
{
  position:                             absolute;
  z-index:                              1;
  left:                                 0;
  top:                                  0;
  text-align:                           center;
  color:                                black;
  width:                                60px;
  border:                               solid 1px black;
  font-size:                            9px;
  line-height:                          1.0em;
  background:                           #fff;
  overflow:                             hidden;
}

div.garden_balloon
{
  position:                             absolute;
  z-index:                              2;
  left:                                 0;
  top:                                  0;
  width:                                180px;
  padding-bottom:                       0;
  background:                           transparent url("../img/garden_balloon_bottom.gif") no-repeat left bottom;
  /* filter:                               alpha(opacity=85);
  opacity:                              0.85; */
}

div.garden_balloon_top
{
  position:                             relative;
  width:                                172px;
  padding:                              4px;
  margin-bottom:                        6px;
  font-size:                            10px;
  background:                           transparent url("../img/garden_balloon_top.gif") no-repeat left top;
  /* filter:                               alpha(opacity=85);
  opacity:                              0.85; */
}

div.garden_balloon_arrow
{
  position:                             relative;
  margin-left:                          0px;
  width:                                13px;
  height:                               7px;
  background:                           transparent url("../img/garden_balloon_arrow.gif") no-repeat left top;
}

div.shout
{
  width:                                270px;
  /* -moz-border-radius:                   5px; */
  margin:                               1px 0 1px 0;
  padding:                              2px;
  background-color:                     #FBE7EF;
}

div.altshout
{
  width:                                270px;
  /* -moz-border-radius:                   5px; */
  margin:                               1px 0 1px 0;
  padding:                              2px;
  background-color:                     #DDEDF1;
}