/*
=============================================
 _/_/ MAIN (INDEX.HTML) STYLE _/_/
     by StoneRiver

[History]
ver. 2010.08.23 - ovc
ver. 2011.03.04 - Liao, Jin and Xi-xia
                  (Pulldown menu system rebuild)
============================================= */

@charset "UTF-8";



/*
===============================
 TOP IMG
=============================== */
.viewer {
  margin           :     0 auto;
  width            :      960px;
  height           :      680px;
  text-align       :       left;
  overflow         :     hidden;
  position : absolute; top: 0px;
     }

.viewer ul {
  width            :     940px;
  height           :     680px;
  text-align       :      left;
  overflow         :    hidden;
  position         :  relative;
     }

.viewer ul li {
  top              :       0px;
  left             :       0px;
  width            :     940px;
  height           :     680px;
  display          :      none;
  position         :  absolute;
     }


/*
===============================
 WHAT'S NEW
=============================== */
.whatsnew {
  margin           :       0px;
  border :   solid #000000 1px;
  font-size        :      10pt;
  padding          :       4px;
  line-height      :      12pt;
  margin-left      :      40px;
  resize           :      none;
     }


/*
===============================
 ANNOUNCE
=============================== */
.announce {
  margin-bottom    :      20px;
  padding :   8px 0px 0px 16px;
  background-image : url(../img_materials/color_bar_red.png);
  background-repeat:  repeat-y;
  background-position:left top;
     }


/*
===============================
 STUDY GROUP ANNOUNCE
=============================== */
.stydygroup {
  width            :     424px;
  margin-bottom    :      40px;
  padding:      16px 12px 16px;
  position:relative; right:6px;
  background-color :   #f6f0d5;
  background-image : url(../img_materials/note_leaf.png);
         border-radius:;
 -webkit-border-radius:;
    -moz-border-radius:;
/* box-shadow */
        box-shadow : rgba(63, 82, 107, 0.39) 2px 2px 6px 0px;
-webkit-box-shadow : rgba(63, 82, 107, 0.39) 2px 2px 6px 0px;
   -moz-box-shadow : rgba(63, 82, 107, 0.39) 2px 2px 6px 0px;
     }

.stydygroup .groupname {
  font-size        :      16pt;
  font-weight      :       900;
  margin-top       :      14px;
  margin-bottom    :      12px;
     }

.stydygroup .date {
  font-size        :      12pt;
  font-weight      :       900;
  margin-bottom    :       6px;
     }

.stydygroup .hour {
  font-size        :      12pt;
  margin-bottom    :      12px;
     }

.stydygroup .place {
  margin-left      :      40px;
  text-indent      :     -40px;
  margin-bottom    :       6px;
     }

.stydygroup .access {
  margin-left      :      68px;
  text-indent      :     -68px;
     }

.stydygroup .summary {
  margin :        26px 0px 6px;
  font-size        :       8pt;
  font-weight      :       900;
     }

.stydygroup .reporter {
  margin-bottom    :       2px;
     }

.stydygroup .title {
  margin-bottom    :       6px;
  font-size        :      11pt;
  margin-left      :      14px;
  text-indent      :     -14px;
     }

.stydygroup .detail {
  margin :       20px 0px 20px;
  padding          :       8px;
  font-size        :       8pt;
  border :  dashed #000000 1px;
     }

.stydygroup .link {
  margin-top       :      18px;
  font-size        :       8pt;
  text-align       :     right;
     }

.stydygroup ul {
  margin :  20px 0px 20px 16px;
     }

.stydygroup li {
  margin-bottom :          6px;
     }

.stydygroup .detail ul {
  margin :    0px 0px 0px 16px;
     }


/*
===============================
 CENTER COL. POST IT
=============================== */
.anodetail {
  padding :    8px 0px 8px 8px;
  padding-top      :       0px;
  margin-right     :       6px;
  margin-bottom    :      20px;
  border-bottom : dotted #6c6c6c 1px;
  line-height      :      18pt;
     }

.anodetail p {
  margin-bottom    :      10px;
  font-size        :      12pt;
     }

/* Pickup Photo
-------------------------- */

/* ↓↓↓旧データ用。そのうち消す20170601↓↓↓ */
.pickupphotoarea {
  width            :     280px;
  margin-top       :     -64px;
    -moz-transform : rotate(-6deg);
 -webkit-transform : rotate(-6deg);
      -o-transform : rotate(-6deg);
     -ms-transform : rotate(-6deg);
         transform : rotate(-6deg);
   }

.maskingtape {
  width            :     100px;
  height           :      50px;
  color: rgba(255, 255, 240, 0.01);
  background-color : rgba(255, 255, 240, 0.8);  
        box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
-webkit-box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
   -moz-box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
  position : relative; top: 28px;
    -moz-transform : rotate(12deg);
 -webkit-transform : rotate(12deg);
      -o-transform : rotate(12deg);
     -ms-transform : rotate(12deg);
         transform : rotate(12deg);
   }
/* ↑↑↑そのうち消す20170601↑↑↑ */



/* Photo variation */
.pickupphotoarea1 {
  width            :     280px;
  margin-top       :     -64px;
    -moz-transform : rotate(-6deg);
 -webkit-transform : rotate(-6deg);
      -o-transform : rotate(-6deg);
     -ms-transform : rotate(-6deg);
         transform : rotate(-6deg);
   }

.pickupphotoarea2 {
  width            :     280px;
  margin-top       :     -64px;
    -moz-transform : rotate(2deg);
 -webkit-transform : rotate(2deg);
      -o-transform : rotate(2deg);
     -ms-transform : rotate(2deg);
         transform : rotate(2deg);
   }

.pickupphotoarea3 {
  width            :     280px;
  margin-top       :     -64px;
    -moz-transform : rotate(-16deg);
 -webkit-transform : rotate(-16deg);
      -o-transform : rotate(-16deg);
     -ms-transform : rotate(-16deg);
         transform : rotate(-16deg);
   }

.pickupphotoarea4 {
  width            :     280px;
  margin-top       :     -64px;
    -moz-transform : rotate(36deg);
 -webkit-transform : rotate(36deg);
      -o-transform : rotate(36deg);
     -ms-transform : rotate(36deg);
         transform : rotate(36deg);
   }

/* Maskingtape variation */
.maskingtape1 {
  width            :     100px;
  height           :      50px;
  color: rgba(255, 251, 146, 0.01);
  background-color : rgba(255, 251, 146, 0.8);  
        box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
-webkit-box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
   -moz-box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
  position : relative; top: 28px;
    -moz-transform : rotate(12deg);
 -webkit-transform : rotate(12deg);
      -o-transform : rotate(12deg);
     -ms-transform : rotate(12deg);
         transform : rotate(12deg);
   }

.maskingtape2 {
  width            :     140px;
  height           :      50px;
  color: rgba(255, 251, 146, 0.01);
  background-color : rgba(255, 251, 146, 0.8);  
        box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
-webkit-box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
   -moz-box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
  position : relative; top: 28px;
    -moz-transform : rotate(-4deg);
 -webkit-transform : rotate(-4deg);
      -o-transform : rotate(-4deg);
     -ms-transform : rotate(-4deg);
         transform : rotate(-4deg);
   }

.maskingtape3 {
  width            :     100px;
  height           :      50px;
  color: rgba(255, 251, 146, 0.01);
  background-color : rgba(255, 251, 146, 0.8);  
        box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
-webkit-box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
   -moz-box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
  position : relative; top: 28px;
    -moz-transform : rotate(-32deg);
 -webkit-transform : rotate(-32deg);
      -o-transform : rotate(-32deg);
     -ms-transform : rotate(-32deg);
         transform : rotate(-32deg);
   }

.maskingtape4 {
  width            :      70px;
  height           :      50px;
  color: rgba(255, 251, 146, 0.01);
  background-color : rgba(255, 251, 146, 0.8);  
        box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
-webkit-box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
   -moz-box-shadow : rgba(48, 31, 21, 0.87) 2px 2px 7px -5px;
  position : relative; top: 28px;
    -moz-transform : rotate(76deg);
 -webkit-transform : rotate(76deg);
      -o-transform : rotate(76deg);
     -ms-transform : rotate(76deg);
         transform : rotate(76deg);
   }

/* etc */
.chekiprint {
  width            :     240px;
  border :   solid 1px #ffffff; /* ←無いと消える */
  background-color :   #ffffff;
        box-shadow : rgba(0, 0, 0, 0.14) -2px 3px 6px 2px;
-webkit-box-shadow : rgba(0, 0, 0, 0.14) -2px 3px 6px 2px;
   -moz-box-shadow : rgba(0, 0, 0, 0.14) -2px 3px 6px 2px;
   }

.chekiprint img {
  display          :     block;
  margin :       25px auto 2px;
   }

.chekidate {
  width            :     220px;
  font-size        :       7pt;
  text-align       :     right;
   }

.chekicaption {
  width            :     236px;
  margin-top       :      12px;
  font-size        :       8pt;
  line-height      :      10pt;
   }



/*
===============================
 FOOTSPACER & FOOTER STYLE
=============================== */
#footerspacer, #footer {
  height           :      80px;
     }
  /* !!! #footerspacer & #footer !!! */ 
  /* !!! must be the same height !!! */

#footerspacer, #footer {
  border  : 0px #000000  solid;
     }

#footer {
  background-color :   #000000;
  height           :      50px;
  padding          :       2px;
  color            :   #ffffff;
  text-align       :    center;
     }

#rights {
  width            :     400px;
  margin  :  8px auto 0px auto;
  position:relative;left:210px;
  padding :                8px;
  background-color :   #272c28;
  border  : 1px #ebc51c  solid;
     }


