@charset "shift_jis";

/**
 * Top page
 */

#container {
	padding: 10px 0 0;
}

#header form {
	margin-bottom: 0;
}

#footer {
	background: transparent;
}

#contact dl {
	background: url(/img/yukari/city_of_design_logo.gif) no-repeat 98% 49%;
}

/******************************************************************** structure
*/

/* ----- topArea ----- */

#topArea { background: #fff url(/img/yukari/toparea_bg.gif) repeat-x;}

#topArea h2 {
	margin: 0;
	padding: 6px 0 6px;
}

#topArea p {
	text-align: center;
	padding: 2px 0 3px;
}

#mainImage {
	padding: 8px 1.3% 0;
	background: url(/img/yukari/caption_bg.gif) repeat-x 0 100%;
}

#mainImage p {
	margin-top: 2.4em;
}

* html #mainImage p {
	margin-top: 3em;
}

*:first-child+html #mainImage p {
	margin-top: 3em;
}

#mainImage p#detailBtn {
	padding: 0;
	margin-top: 0;
	height: 2.8em;
}

#mainImage p#detailBtn a {
	background: url(/img/yukari/detail_mark.gif) no-repeat 9px 50% #fff8db;
	display: block;
	float: right;
	padding: 3px 5px 3px 22px;
	color: #523a0e;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: normal;
	margin-top: 4px;
}

#mainImage h2 {
	float: left;
	background: url(/img/yukari/t0_mark.gif) no-repeat 9px 50% #fff8db;
	color: #523a0e;
	font-size: 110%;
	letter-spacing: normal;
	margin: 0 0 3px;
	padding: 3px 5px 3px 26px;
}

/* ----- midArea ----- */

#midArea {
	padding: 15px 1.3% 0;
}

#midArea h2 {
	height: 23px;
	margin: 0;
	padding: 0;
	background: url(/img/yukari/t0_bg.gif) repeat-x;
	line-height: 0;
	font-size: 0;
}

#midArea ul.newsList {
	margin: 0;
	padding: 5px 0 0 0;
	list-style: none;
}

#midArea ul.newsList li {
	padding: 3px 0 2px 20px;
	border-bottom: 1px solid #E6E6E6;
	background: url(/img/yukari/arw_news.gif) no-repeat 8px 8px;
}

/* ----- nextExhibition ----- */

#nextExhibition {
	padding: 25px 1.3% 0;
}

#nextExhibition h2 {
	border-right: 1px solid #c1b8a7;
	background: url(/img/yukari/t2_bg.gif) repeat-x;
	border-bottom: 1px solid #c1b8a7;
}

#nextExhibition div.nextExhibitionContents {
	padding: 10px 15px;
	border-bottom: 1px solid #c1b8a7;
	border-left: 1px solid #c1b8a7;
	border-right: 1px solid #c1b8a7;
	background: #fff;
}

#nextExhibition div.nextExhibitionContents h3 {
	padding: 5px 0 0;
}

#nextExhibition div.nextExhibitionContents h3 span {
	padding-left: 18px;
	background: url(/img/yukari/arw_brown.gif) no-repeat;
}

#nextExhibition div.nextExhibitionContents p.nextExhibitionImage {
	padding-right: 10px;
	background: #fff;
	float: left;
}

/* ----- linkArea ----- */

#bottomArea {
	margin: 10px 1.3% 0;
	padding-right: 420px;
}

/* ----- linkArea ----- */

#linkArea {
	width: 400px;
	padding: 0;
	float: right;
	position: relative;
	display: inline;
	margin-right: -420px;
}

* html #linkArea {
	margin-left: 20px;
}

*:first-child+html #linkArea {
	margin-left: 20px;
}

#linkArea h2 {
	margin: 0;
	padding: 0 0 0 25px;
	background: url(/img/yukari/t3_mark.gif) no-repeat;
	color: #fff;
	font-size: 85%;
	line-height: 2;
	letter-spacing: normal;
}

#linkArea div {
	padding: 0 0 5px;
	border: 1px solid #c2baa9;
	border-top: none;
	background: #fff;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

* html #linkArea div,
*:first-child+html #linkArea div {
	padding-bottom: 15px;
}

#linkArea div p {
	margin: 0 10px;
	padding-bottom: 0;
}

#linkArea ul {
	margin: 10px 0; 
	padding: 0 15px;
	list-style: none;
}

#linkArea ul li {
	margin-right: 10px;
	margin-bottom: 10px;
	float: left;
}

/* ----- leftBox ----- */

#leftBox {
	position: relative;
	float: left;
	padding: 0;
	display: inline;
}

/**
 * Float containers fix
 * a.k.a. clearfix
 */

/******************** except IE
*/
#bottomArea:after,
.nextExhibitionContents:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

/******************** for IE
Level 2.1*/
#bottomArea,
.nextExhibitionContents { display: inline-block;}

/* Holly Hack Targets IE Win only \*/
* html #bottomArea,
* html .nextExhibitionContents { height: 1%;}

#bottomArea,
.nextExhibitionContents { display: block;}
/* End Holly Hack */


@media print {
/*
#info { width: 280px;}
* html #info { width:40%;}
#info ul li { width: 45%;}
* html #info ul li { width: 50%;}
#event { margin-right: 180px; margin-left: 285px;}
#event ul { display: none;}
* html #event { width: 37%; margin: 0;}
#useful { width: 175px;}
* html #useful { width: 20%;}
* html #useful li img { width: 100%;}

#useful img { height: 49px;}
* html #ad li { width: 90px; padding-left: 2px;}
* html #ad li img { width: 90px;}
*/
}