@import './event.css';

* html #header {
  margin-bottom: 20px;
}
*:first-child+html #header {
  margin-bottom: 20px;
}

#container {
  width: 770px;
  margin: 0 auto;
}

/*
 * イベント情報について
 */
#about {
  font-size:    small;
  line-height:  1.6em;
  padding-left: 1em;
  padding-right: 1em;/*new*/
}
#about h2 {
  margin-left: -.5em;
  line-height: 1em;
  position:    relative;
}
#about.with-recommended {
  width:       460px;
  float:       right;
  margin-left: 10px;
}
#barcode {
  text-align:    center;
  font-weight:   normal;
  font-size:     x-small;
  float:         right;
  margin-left:   20px;
  /*margin-top:    -3em;*/
  margin-top:    -1em;/*new*/
  margin-bottom: 0;
  line-height:   1em;
}
#barcode img {
  margin-top: .5em;
  padding:    0;
  border:     solid 1px #909090;
}

/*
 * おすすめ
 */
#recommended {
  width:     290px;
  font-size: x-small;
}
#recommended ul {
  margin-left:     0;
  padding-left:    0.5em;
  list-style-type: none;
}
#recommended .title {
  font-weight: bold;
  font-size:   120%;
  display:     block;
}

/*
 * 県名のタブ
 */
#arealist {
  display:       block;
  font-size:     large;
  margin:        0;
  margin-left:   6px;
  margin-right:  auto;
  padding:       0;
  width:         14.6em;
  height:        2em;
  position:      relative;
  z-index:       5;
  clear: both;
}
#arealist li {
  display:     block;
  width:       3.2em;
  float:       left;
  padding:     0;
  margin:      .5em .1em 0 .1em;
  line-height: 1.5em;
  background:  #a2a2a2;
  border:      1px solid #a2a2a2;
  text-align:  center;
  position:    relative;
  z-index:     10;
  color: #ffffff;
}
#arealist li.selected {
  border: 1px solid #333388;
  height:        2em;
  line-height:   2em;
  margin-top:    0em;
  font-weight:   bold;
  background:    #333388;
}
#arealist a {
  display: block;
  color: #ffffff;
}
#arealist li:hover {
  /*
  height:      2em;
  line-height: 2em;
  margin-top:  0em;
  */
}
#arealist a:hover {
  color:       #ff6600;
  font-weight: bold;
}
hr#arealist-bottom {
  clear:      both;
  margin:     0;
  padding:    0;
  border:     0;
  border-top: 1px solid #909090;
  visibility: visible;
  height:     1px;
  width:      100%;
  position:   relative;
  top:        -1px;
  z-index:    1;
}
/* IE 7 */
*:first-child+html hr#arealist-bottom {
  top: -6px;
}
/* IE 6 */
* html body hr#arealist-bottom {
  top: -8px;
}

/*
 * カテゴリと一部イベントの一覧
 */
#category-list {
  padding:    0 4px;
}
/*
 * 各カテゴリのボックス
 */
.category {
  border:       1px solid #909090;
  width:        244px;
  float:        left;
  margin:       10px 4px;
  font-size:    small;
}
.category h2 {
  line-height: 0;
  margin:      0;
  text-align:  center;
}
.category .catch {
  margin:       0;
  line-height:  1.5;/*new*/
  /*line-height:  1em;*/
  /*padding-top:  1em;*/
  padding-left: .5em;
  font-weight:  bold;
  background:   url( img/empty-event-back.png ) no-repeat;
}
.category ul {
  margin:           0.2em;/*new*/
  margin-left:      0;
  padding-left:     25px;
  list-style-image: url( img/list-icon.png );
}
.category li {
  line-height: 1.4em;
  border:      1px solid white;
}
.event-name {
  display: block;
}
.event-schedule {
  display:    block;
  text-align: right;
  font-size:  90%;
}
.goto-eventindex {
  text-align:  right;
  line-height: 1em;
  margin:      0 .3em .2em 0;
}
.empty-event {
  height:         10em;
  text-align:     center;
  vertical-align: middle;
  display:        table-cell;
  width:          244px;
}

/*****************************************************************/
/*****************************************************************/
/*****************************************************************/

#eventlist h3,
#movielist h3 {
  margin: 1em 0 0 0;
  padding: 0;
}
/*
#eventlist h3,
#movielist h3 {
  border-width: 0 0 0 0.5em;
  border-style: solid;
  padding-left: 0.5em;
}
#eventlist h3 {
  border-color: #333388;
}
#movielist h3 {
  border-color: #338833;
}
  */

.item {
  clear: both;
  font-size: 80%;
  margin: 1em 0 2em 0;
  overflow: show;
  line-height: 160%;
  padding: 0 1em 1em 1em;
  border: 1px solid #cccccc;
  position: relative;
  z-index: 0;
}
#eventlist .item .title {
  background-color: #333388;
  position: relative;
}
#movielist .item .title {
  background-color: #338833;
  position: relative;
}
#eventlist .fireworks .title {
  background-color: #cc3333;
  position: relative;
}
.item .title {
  padding: 0.2em 0.5em;
  margin: 0;
  font-weight: bold;
  color: #ffffff;
  font-size: 120%;
  position: relative;
  top: -1em;
  z-index: 1;
}

.item .days ,
.item .credit {
  margin: 0.2em 0 0.5em 0;
  font-weight: bold;
  color: #333388;
  padding-left: 25px;
  background-repeat: no-repeat;
  background-position: top left;
  vertical-align: bottom;
}
#eventlist .item .days {
  background-image: url(img/icon_days.gif);
}
#movielist .item .credit {
  background-image: url(img/icon_credit.gif);
}
#eventlist .fireworks .days {
  background-image: url(img/icon_days_fire.gif);
}
.item .photo {
  margin: 0 1em 0 0;
  float: left;
}
.item .photo .caption {
  margin: 0.2em 5px 0 5px;
  font-size: 80%;
}
.item .content {
}
.item .note ,
.item .catch {
  font-weight: bold;
  margin: 0.5em 0;
}
.item .promoter {
  color: #7bb51f;
  text-align: right;
  font-size: 80%;
}
.item .contact {
  color: #7bb51f;
  text-align: right;
  font-size: 80%;
}
.item .theaters {
  margin: 0;
  float: left;
  overflow: hidden;
}
.morelink {
  font-size: 90%;
  text-align: right;
  margin: -1em 0 1.5em 0;
}
.morelink img {
  position: relative;
  top: 10px;
}

#bannerMarea {
  width: 200px;
  float: right;
  margin: 10px 0 0 25px;
  padding: 0 0 0 25px;
  list-style-type: none;
}

#bannerMarea .banneritem {
  margin: 0 0 5px 0;
}