@charset "Shift_JIS";
/***********************************************/
/* CSS file For Spinelz                       */
/* 2006/11/09                                  */
/***********************************************/
/*------------------------------------------------------------------
‹¤’Ê 
------------------------------------------------------------------*/
* {
  margin:                     0;
  padding:                    0;
  text-decoration:            none;
  text-transform:             none;
  text-indent:                0;
  font-weight:                normal;
  list-style-type:            none;
  font-size:                  100%;
}

body {
  font:                       .90em "Tahoma", "Verdana","Arial","‚l‚r ‚oƒSƒVƒbƒN", Osaka, sans-serif;
  color:                      #4F4534;
  background:                 url(../images/back_01.gif) repeat-x #fff;
  text-align:                 center;
}

img {
  border:                     none;
}

.cl {
  clear:                      both;
}

.hide {
  text-indent:                -100000px;
  width:                      0;
  height:                     0;
  position:                   absolute;
  overflow:                   hidden;
}

#container {
  margin:                     auto;
  width:                      860px;
  text-align:                 left;
}

a {
  background:                 transparent;
  color:                      #3F8DE8;
}

a:hover {
  text-decoration:            underline;
}

strong {
  background:                 transparent;
  color:                      #4F4534;
  font-weight:                bold;
}

.small_br {
  line-height:                0.3em;
}
/*------------------------------------------------------------------
HEADER 
------------------------------------------------------------------*/
.header {
  width:                      860px;
  height:                     225px;
  position:                   relative;
}

#logo_script a {
  width:                      185px;
  height:                     35px;
  position:                   relative;
  left:                       640px;
  top:                        8px;
}

.header #logo_spinelz {
  position:                   absolute;
  top:                        20px;
  left:                       75px;
  z-index:                    10;
}

#header_box {
  background:                 url(../images/titleback.gif) no-repeat;
  width:                      860px;
  height:                     175px;
  position:                   relative;
  top:                        15px;
}

#header_rightbox {
  width:                      160px;
  height:                     155px;
  float:                      right;
  margin:                     10px 0;
}

#download {
  margin:                     15px 0;
}

#download a {
  background:                 url(../images/download.gif) no-repeat;
  display:                    block;
  text-indent:                -10000px;
  width:                      120px;
  height:                     80px;

}

#download a:hover {
  background-position:  0 -80px;
}

/*------------------------------------------------------------------
CONTENTS
------------------------------------------------------------------*/
#contents {
  background:                 url(../images/contents_back.gif) repeat-y;
  clear:                      both;
}

#main_contents {
  width:                      830px;
  margin:                     auto;
  position:                   relative;
}

#home_en #main_contents h2, #home #main_contents h2 {
  width:                      160px;
  height:                     20px;
  text-indent:                -100000px;
  display:                    block;
  margin:                     10px 0 5px 15px;
}

#home_en #main_contents h3, #home #main_contents h3 {
  padding:                    3px 3px;
  background:                 transparent;
  color:                      #285A94;
}

#home_en #main_contents h3 strong, #home #main_contents h3 strong{
  background:                 transparent;
  color:                      #285A94;
  font-weight:                bold;

}
.abount_contents {
  position:                   relative;
}
#main_contents #leftbox {
  width:                      525px;
  margin-bottom:              20px;
  border:                     1px solid #f0f1f5;
}

#main_contents #rightbox {
  width:                      295px;
  position:                   absolute;
  right:                      0px;
  top:                        0px;
}

#main_contents #allbox {
  margin-bottom:              20px;
}

.leftbox_contents {
  background:                 url(../images/back_blue.gif) #fff no-repeat;
  width:                      490px;
  border:                     3px double #cccccc;
  margin:                     0 13px 0 15px;
  padding:                    10px 5px;
}

.leftbox_contents p {
  margin:                     12px 8px;
  line-height:                1.5em;
}

.rightbox_contents {
  background:                 url(../images/back_green.gif) #fff no-repeat;
  width:                      260px;
  border:                     3px double #cccccc;
  margin:                     0 0 0 12px;
  padding:                    10px 5px;
}

.allbox_contents {
  background:                 url(../images/back_blue_wide.gif) #fff no-repeat;
  width:                      760px;
  border:                     3px double #cccccc;
  margin:                     0 13px 0 15px;
  padding:                    10px 5px;

}
/*----------what's spinelz-----------*/
#whats_spinelz {
  background:                 url(../images/whats_spinelz.gif) no-repeat;
}

#whats_spinelz_text {
  float:                      left;
  width:                      410px;
}

#whats_spinelz_text ul {
  margin:                     0 8px;
}

#whats_spinelz_text li {
  margin:                     0 10px;
  list-style-type:            disc;
}

#spinelz_and_rubricks a {
  background:                 url(../images/spnlz_and_rbrks.gif) no-repeat;
  display:                    block;
  text-indent:                -10000px;
  width:                      72px;
  height:                     92px;
  float:                      right;
}

#spinelz_and_rubricks a:hover {
  background-position:        0 -92px;
}

.firstlist {
  margin:                     0 8px;
}
.firstlist li.firstlist {
  background:                 url(../images/list-type.gif) no-repeat;
  padding-left:               10px;
  margin:                     5px 0;
}
.firstlist li.firstlist ul {
  margin:                     0 5px;
}

.demolist {
  margin:                     5px 5px;
  height:                     250px;
}
.demolist li.demolist {
  background:                 url(../images/list-type.gif) no-repeat;
  padding-left:               5px;
  margin:                     5px 10px;;
  float:                      left;
  border:                     1px solid #ccc;
  width:                      150px;
  text-indent:                0.8em;
}
.demolist li.demolist ul {
  margin:                     5px 5px;
  padding-left:               5px;
}

/*----------features-----------*/
#features {
  background:                 url(../images/features.gif) no-repeat;
}

/*----------Components-----------*/
#components {
  background:                 url(../images/components.gif) no-repeat;
}


/*----------news-----------*/
#news {
  background:                 url(../images/news.gif) no-repeat;
}

.rightbox_contents #date {
  font-weight:                bold;
  background:                 transparent;
  color:                      #777;
  margin:                     2px 3px 5px 3px;
}

.rightbox_contents .news_text {
  margin:                     10px 3px 5px 3px;
}

.rightbox_contents #changelist {
  background:                 transparent;
  color:                      #674534;
  margin:                     3px;
  padding:                    8px;
  font-size:                  .85em;
}

.rightbox_contents #changelist li {
  margin:                     2px 0;
  border-bottom:              1px dotted #3F8DE8;
}

.logblock {
  margin:                     5px;
  padding:                    5px 0;
  border-bottom:              1px dotted #3F8DE8;
}

.loglist {
  margin-left:                15px;
}
.date {
  font-weight:                bold;
  background:                 transparent;
  color:                      #777;
  margin:                     2px 3px 5px 3px;
}
span.pink {
  color:                       #E61E71;
}

#license {
  background:                 url(../images/license.gif) no-repeat;
}

.counter {
  margin-top:                 50px;
  float:                      right;
}
/*----------demos-----------*/
#demos {
 background:                 url(../images/see_our_demos.gif) no-repeat;
}

#win_changelog {
  visibility:                hidden;
}

.demowindow_contents {
  width:                     95%;
}

/*------------------------------------------------------------------
DEMO
------------------------------------------------------------------*/
#back_to_home a {
  text-decoration:            none;
  font-weight:                bold;
  color:                      #4F4534;
}

#back_to_home a:hover {
  text-decoration:            none;
  font-weight:                bold;
  color:                      #4F4534;
}

h2.subtitle {
  background:                url(../images/subtitle.gif) no-repeat;
  background-position:       bottom;
  width:                     400px;
  height:                    23px;
  font-size:                 1.1em;
  font-weight:               bold;
  margin:                    10px 0 15px 15px;
  float:                     left;
}

.right_text {
  width:                     100px;
  margin:                    10px 0 0 auto;
  float:                     right;
}

.demo_contents_box {
  padding:                     10px 25px;
  margin-bottom:               15px;
}

.view_source, .view_source_close {
  margin:                    10px 0;
  border:                    1px solid #999;
}

a.hide_source {
  background:                url(../images/dropdown_open_pink.gif) no-repeat #674534;
  display:                   block;
  color:                     #fff;
  cursor:                    pointer;
  text-indent:               2.0em;
  font-weight:               bold;
  width:                     100%;
}

a:hover.hide_source {
  background:                url(../images/dropdown_open_white.gif) no-repeat #96847A;
  text-decoration:           none;
}

a.show_source {
  background:                url(../images/dropdown_close_pink.gif) no-repeat #674534;
  display:                   block;
  color:                     #fff;
  cursor:                    pointer;
  text-indent:               2.0em;
  font-weight:               bold;
  width:                     100%;
}

a:hover.show_source {
  background:                url(../images/dropdown_close_white.gif) no-repeat #96847A;
  text-decoration:           none;
}

.source_box {
  padding:                   10px;
  font-size:                 .85em;
  display:                   none;
}

.display_source_box {
  padding:                   10px;
  font-size:                 .85em;
  display:                   block;
}

.source {
  margin:                    2px 10px;
  padding:                   2px;
  border:                    1px dotted #aaa; 
  background:                #efefef;
  overflow:                  scroll;
  width:                     92%;
}



.demo_content {
  height:                     300px;
  background:                 #fff;
}

.demo_txt {
  font-size:                  1.2em;
  line-height:                3.0em;
  padding:                    10px;
}

.select_label{
  cursor:                     pointer;
  margin:                     2px 5px;
  
}

input.button {
  background:                url(../images/button.gif) no-repeat;
  width:                     82px;
  height:                    22px;
  cursor:                    pointer;
  border:                    none;
  font-size:                 10.5px;
}

.sidebarbox_contents {
  width:                     200px;
  height:                    200px;
  background:                #ffffff;
}

#menubar {
  margin-bottom:             30px;
}

.accordion_contents_box {
  height:                    200px;
  background:                #ffffff;
}

.item_list {
  border-left:               5px solid #674534;
  padding-left:              5px;
}

.datepicker_button {
  background:                url(../images/spinelz/select_date.gif) no-repeat;
  width:                     20px;
  height:                    20px;
  cursor:                    pointer;
}

#timepicker_trigger {
  background:                url(../images/spinelz/select_time.gif) no-repeat left center;
  padding:                   0 0 0 20px;
  cursor:                    pointer;
}

.setting_table {
  border:                    1px solid #999999;
  background:                #ffffff;
  padding:                   5px;
  margin-bottom:             5px;
}

.setting_table .setting_table_head {
  margin-right:              10px;
  vertical-align:            top;
}

#sortabletable {
  border:                    1px solid #999999 !important;
}

#selectable_table {
  border:                    1px solid #999999;
  border-collapse:           collapse;
}
#selectable_table th {
  font-weight:               bold;
  background:                url(../images/spinelz/table_back.gif) repeat-x;
  padding:                   0 3px;
}
#selectable_table td {
  padding:                   0 3px;
}
#grid_info {
  border:                    1px solid #999999;
  margin:                    3px;
  width:                     500px;
  overflow:                  scroll;
  word-break:                
}

/*------------------------------------------------------------------
FOOTER 
------------------------------------------------------------------*/
#footer {
  background:                 url(../images/footer.gif) no-repeat;
  width:                      860px;
  height:                     70px;
  position:                   relative;
  margin-bottom:              10px;
}

#footer #mail {
  background:                 url(../images/mail.gif) no-repeat;
  float:                      right;
  text-indent:                -100000px;
  width:                      215px;
  height:                     20px;
  margin:                     5px 10px 0 0;
}
address {
  text-align:                 center;
  font-style:                 normal;
  line-height:                1.5em;
  overflow:                   hidden;
  font-size:                  .85em;
  margin:                     0 0 20px 0;
}
address img {
  vertical-align:             bottom;
  padding:                    10px 0 0 0;
}

/*------------------------------------------------------------------
SPINELZ TABBOX 
------------------------------------------------------------------*/
.spinelzweb_tabBox_tabContainer{
  height:                     42px;
  background:                 url(../images/tab_bar.gif) repeat-x;
  background-position:        bottom;
  padding-left:               5px;
}

.spinelzweb_tabBox_tabLeftInactive {
  background:                 url('../images/tabBox_tabLeftInactive.gif') no-repeat;;
  width:                      8px;
  margin-left:                4px;
/*   z-index: 1; */
}

.spinelzweb_tabBox_tabLeftActive {
  background:                 url('../images/tabBox_tabLeftActive.gif') no-repeat;
  width:                      8px;
  margin-left:                4px;
/*   z-index: 10;   */
}

.spinelzweb_tabBox_tabMiddleInactive {
  background:                 url('../images/tabBox_tabMiddleInactive.gif') repeat-x;
  line-height:                1.8em;
  left:                       -4px;
/*   z-index: 1; */
}

.spinelzweb_tabBox_tabMiddleActive {
  background:                 url('../images/tabBox_tabMiddleActive.gif') repeat-x;
  line-height:                1.8em;
  left:                       -4px;
/*   z-index: 10; */
}

.spinelzweb_tabBox_tabRightInactive {
  background:                 url('../images/tabBox_tabRightInactive.gif') no-repeat;
  width:                      10px;
  padding:                    0;
  left:                       -4px;
/*   z-index: 1; */
}

.spinelzweb_tabBox_tabRightActive {
  background:                 url('../images/tabBox_tabRightActive.gif') no-repeat;
  width:                      10px;
  padding:                    0;
  left:                       -4px;
/*   z-index: 10; */
}

/*------------------------------------------------------------------
SPINELZ WINDOW
------------------------------------------------------------------*/
.spinelzweb_window_headerLeft{
  height:                     45px;
  top:                        0;
  width:                      30px;
  position:                   absolute;
  left:                       0;
  background:                 url('../images/window_top_left.gif') no-repeat;
}

.spinelzweb_window_headerMiddle{
  height:                     45px;
  top:                        0;
  margin:                     0 30px;
  background:                 url('../images/window_top_middle.gif') repeat-x;
  cursor:                     move;
  line-height:                3.0em;
}
.spinelzweb_window_headerMiddle div {
  font-weight:                bold;
  line-height:                3.0em;
}

.spinelzweb_window_headerRight{
  height:                     45px;
  top:                        0;
  width:                      30px;
  position:                   absolute;
  right:                      0;
  background:                 url('../images/window_top_right.gif') no-repeat;
}
.spinelzweb_window_buttonHolder {
  width:                      60px;
  height:                     16px;
  position:                   absolute;
  top:                        0;
  right:                      32px;
  margin-top:                 10px;
}

.spinelzweb_window_closeButton{
  float:                      right;
  overflow:                   hidden;
  font-size:                  5px;
  width:                      16px;
  height:                     16px;
  background:                 url('../images/window_close.gif') no-repeat;
  cursor:pointer;
}

.spinelzweb_window_maxButton{
  float:                      right;
  overflow:                   hidden;
  cursor:                     pointer;
  width:                      16px;
  height:                     16px;
  background:                 url('../images/window_max.gif') no-repeat;
}

.spinelzweb_window_minButton{
  float:                      right;
  overflow:                   hidden;
  cursor:                     pointer;
  width:                      16px;
  height:                     16px;
  background:                 url('../images/window_min.gif') no-repeat;
}

.spinelzweb_window_body{
  width:                      100%;
  background:                 transparent;
  color:                      #000000;
  position:                   relative;
}

.spinelzweb_window_bodyLeft{
  top:                        0;
  width:                      30px;
  position:                   absolute;
  left:                       0;
  background:                 url('../images/window_middle_left.gif') repeat-y;
}

.spinelzweb_window_bodyMiddle{
  top:                        0;
  position:                   relative;
  margin:                     0 30px;
  background:                 #f2f5fa;
  color:                      #000000;
  overflow:                   auto;
  text-align:                 left;

}

.spinelzweb_window_bodyRight{
  top:                        0;
  width:                      30px;
  position:                   absolute;
  right:                      0;
  background:                 url('../images/window_middle_right.gif') repeat-y;
}

.spinelzweb_window_bottom{
  width:                      100%;
  height:                     35px;
  position:                   relative;
}

.spinelzweb_window_bottomLeft{
  width:                      30px;
  height:                     35px;
  position:                   absolute;
  left:                       0;
  background:                 url('../images/window_bottom_left.gif') no-repeat;
}

.spinelzweb_window_bottomMiddle{
  height:                     35px;
  margin:                     0 30px;
  background:                 url('../images/window_bottom_middle.gif') repeat-x;
}

.spinelzweb_window_bottomRight{
  width:                      30px;
  height:                     35px;
  position:                   absolute;
  right:                      0;
  background:                 url('../images/window_bottom_right.gif') no-repeat;
}

/*------------------------------------------------------------------
SPINELZ ACCORDION
------------------------------------------------------------------*/
.spinelzweb_window_headerLeft{
  height:                     45px;
  top:                        0;
  width:                      30px;
  position:                   absolute;
  left:                       0;
  background:                 url('../images/window_top_left.gif') no-repeat;
}