body { background: #222; color: #fff; margin: 0; padding: 0; font-family: Tahoma, Helvetica, sans-serif; }

.mir { letter-spacing : -1000em; }
/* Just for Opera, but hide from MacIE */
/*\*/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;}
/* End of hack */ 

sup,
sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; }
sup { bottom: 0.7ex; }
sub { top: .5ex; }

.floatleft { float: left; margin: 0 1em 1em 0; }
.floatright { float: left; margin: 0 0 1em 1em; }
.clr { clear: both; }

h1, h2, h3 { margin: 0; padding: 0; }
hr { color: #ccc; background-color: #ccc; width: 100%; height: 1px; border: none; margin: 1.5em auto; }
a { text-decoration: none; color: #06f; }
a:visited { color: #6059b4; }
a:hover { text-decoration: underline; color: #f60; }
a:active { text-decoration: underline; color: #fc0; }
input,
textarea { border: 3px solid #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-family: Tahoma, Helvetica, sans-serif; font-size: 100%; }
input[type=submit] { background: #666; color: #ccc; border: 2px solid #ccc; padding: 2px; cursor: pointer; }
input[type=submit]:hover { background: #999; color: #fff; border: 2px solid #fff; }

#wrapper { width: 902px; margin: 0 auto; }
#splash_wrapper { width: 640px; height: 472px; position: absolute; top: 50%; left: 50%; margin-top: -236px; margin-left: -310px; }
#browse_wrapper { width: 640px; height: 472px; margin: 0 0 0 108px; }
#splash_cover { width: 372px; height: 472px; padding-top: 14px; background: url(../img/bg-splash-shadow.png) no-repeat 0 14px; float: left; }
#splash_cover a { outline: none; }
#splash_cover img { width: 340px; height: 440px; margin: 16px; border: none; outline: none; }
#browse_wrapper #splash_cover { margin-top: -14px; }
#main_area { width: 886px; margin: 0 auto; background: #fff url(../img/bg-pagebottom.png) no-repeat left bottom; border-top: 1px solid #fff; }
h2+#main_area,
#static_area+#main_area { border-top: none; }
#static_area { width: 900px; height: 495px; margin: 0 auto; border: 1px solid #fff; background-repeat: no-repeat; color: #fff; position: relative; }
#static_area.error { background-image: url(../img/bg-error.jpg); background-color: #979c9d; }
#static_area.contact { background-image: url(../img/bg-contact.jpg); background-color: #0d0f0b; }
#static_area.about_us { background-image: url(../img/bg-about-us.jpg); background-color: #47515a; }
#static_area.subscribe { background-image: url(../img/bg-subscribe.jpg); background-color: #7c7968; }
#static_area.browse { background-image: url(../img/bg-browse.jpg); background-color: #333; }
#content { width: 836px; margin: 0 auto; padding: 10px 24px 20px 24px; background: transparent url(../img/bg-pagetop.png) repeat-x left top; color: #333; font-size: 90%; overflow: hidden; }
#article { width: 565px; font-size: 90%; }
#article .clr { clear: left; }
#article h3 { margin: 2ex 0 1.5ex 0; }
#article h3 { font-size: 125%; }
#article h4 { font-size: 115%; }
#article h5 { font-size: 105%; }
#footer { width: 886px; margin: 30px auto 20px auto; font-size: 80%; }
#copyright { float: right; color: #999; }

#issue_nav { width: 902px; margin: 0 auto -2em auto; text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 75%; color: #666; height: 2em; position: relative; top: -5ex; }
#issue_nav ul { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; margin: 0; padding: 0; }
#issue_nav li { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; width: 8em; text-align: left; position: relative; margin: 0 1.25ex 0 0; padding: 0 0 0 2ex; border-left: 1px solid #666; }
#issue_nav li#issue_browse { padding-left: 1.25ex; text-align: center; }
#issue_nav li:first-child { border-left: none; padding-left: 0; }
#issue_nav li#issue_next { margin-right: 0; }
#issue_nav a { color: #999; text-decoration: none; font-weight: bold; margin: 0; padding: 0; }
#issue_nav a:hover { color: #fff; }
#issue_prev a:before { content: "◀  "; }
#issue_next a:after { content: "  ▶"; }
#issue_comingsoon { display: block; position: absolute; font-size: 80%; text-transform: uppercase; top: 2.4ex; left: 1.4em; }

#issue_id { height: 89px; margin: 13px 0 0 388px; font-family: Arial; font-size: 70pt; }
#issue_text { height: 43px; background-repeat: no-repeat; margin: 0 0 0 405px; line-height: 30pt; font-family: "Cordia New", Tahoma; font-weight: normal; font-size: 22pt; }
#splash_highlights { font-size: 80%; background: url(../img/splash-line.png) no-repeat left top; padding: 5px 0 0 6px; margin: 24px 0 0 400px; }
#splash_highlights p { margin-top: 4px; color: #eee; }
#splash_highlights h3 { background-image: url(../img/splash-topic.png); background-repeat: no-repeat; width: 103px; height: 15px; margin-top: 20px; }
#splash_emotion  { background-position: 0 -15px; }
#splash_mode     { background-position: 0 -30px; }
#splash_surround { background-position: 0 -45px; }
#splash_more { text-align: right; padding-top: 1em; font-weight: bold; font-size: 90%; }
#splash_more a {text-decoration: none; }
#splash_more a:link,
#splash_more a:visited { color: #09f; }
#site_logo { background: url(../img/volume-logo.gif); width: 219px; height: 38px; margin: 25px 0 10px 0; padding: 0; position: relative; z-index:5; }
#site_logo a { display: block; width: 100%; height: 100%; }
#main_image { width: 900px; height: 495px; border: 1px solid #fff; margin: 0; padding: 0; vertical-align: middle; }
#highlights_text { background: url(../img/text-highlights.gif) no-repeat; width: 103px; height: 35px; }
#highlights_text span { display: block; width: 0; height: 0; overflow: hidden; }
#content_highlights img { border: 1px solid #fff; display: block; position: absolute; }
#content_highlights a:hover img { border: 1px solid #f60; z-index: 99; }
#content_links img { border: none; display: block; position: absolute; }
#content_links a:hover img { border: none; z-index: 99; }
#header { background: #303030 url(../img/bg-header.gif) repeat-x; height: 35px; line-height: 35px; border: 1px solid #fff; border-bottom: none; margin: 0; padding: 0 24px; font-size: 80%; }
#header_bar { background: #303030 url(../img/bg-header.gif) repeat-x; height: 35px; line-height: 35px; border-left: 1px solid #fff; border-right: 1px solid #fff; margin: 0; padding: 0 24px; font-size: 80%; font-weight: bold; font-family: Tahoma, Helvetica, sans-serif; }
#footer ul { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; margin: 0; padding: 0; }
#header_bar div { margin: 0; padding: 0 1ex 0 0; height: 35px; line-height: 35px; vertical-align: middle; }
#header_bar h2 { margin: 0; padding: 0 1ex 0 0; height: 35px; line-height: 35px; vertical-align: middle; letter-spacing: 1px; font-weight: bold; text-transform: uppercase; font-family: Arial; font-size: 9.5pt; }
#footer li { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; margin: 0; padding: 0 1.5ex 0 2ex; background: url(../img/whitedot.png) no-repeat left center; }
#footer li:first-child { background: none; padding-left: 0; }
#footer a { text-decoration: none; }
#footer a { color: #ccc; }
#footer a:hover { color: #fff; }

#issuebox { clear: left; width: 500px; height: 177px; background: url(../img/bg-issuebox.png) no-repeat; position: relative; margin: 2em auto 0 auto; }
#issuebox .cover_mini { position: absolute; left: 351px; top: 7px; }
#issuebox div { padding: 73px 170px 0 25px; text-align: right; }
#issuebox .issue_title { font-size: 120%; }
#issuebox p { margin: 0 0 0.6ex 0; }

.gallery_wrapper { border: 1px solid #ddd; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; background: transparent url(../img/bg-pagetop.png) repeat-x left top; margin: 1em auto 2em auto; }
#gallery_display_wrapper { clear: left; text-align: center; width: 520px; margin: 0.5em auto 1em auto; border-top: 1px solid #ddd; padding-top: 1em; position: relative; }
#gallery_display { text-align: center; width: 500px; position: absolute; left: 10px; bottom: 0; }
.galleria_wrapper { margin-bottom: 1em;}
.gallery .selected { margin: 1px; border: 2px solid #ddd; padding: 2px; }

.nav { font-size: 80%; }
.nav.article ul { display: block; margin: 0; padding: 0; width: 565px; }
.nav.article li { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; margin: 0; padding: 5px; vertical-align: top; }
.nav.article li.prev { text-align: left;   width: 205px; }
.nav.article li.up   { text-align: center; width: 125px; }
.nav.article li.next { text-align: right;  width: 205px; }
.nav.article li.prev span { background: url(../img/scrollable/arrow/left_dark.png) no-repeat; display: block; float: left; margin-right: 6px; width: 18px; height: 18px; text-indent : -100em; }
.nav.article li.next span { background: url(../img/scrollable/arrow/right_dark.png) no-repeat; display: block; float: right; margin-left: 6px; width: 18px; height: 18px; text-indent : 100em; }
.nav.article li.prev a:hover span, .nav.article li.next a:hover span { background-position: 0 -18px; }

.warning { background: #900; color: #fff; border: 1px solid #f00; padding: 3px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
.notice { background: #ffc; color: #333; border: 1px solid #fc0; padding: 3px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

/* credit */
.credits { clear: left; margin-top: 1.25em; padding-top: 0.75em; border-top: 1px solid #ddd; margin-bottom: 2em;}
.credits dt { font-weight: bold; }
.credits dt,
.credits dd { display: inline; margin: 0; }

/* Contact */
#contact_address { position: absolute; top: 176px; left: 0; width: 270px; text-align: right; font-size: 80%; color: #fff; line-height: 1.75em; }
#contact_address address { font-style: normal; margin: 0 0 2em 0; }
#contact_form { position: absolute; top: 89px; left: 310px; font-size: 80%; color: #fff; }
#contact_sent { position: absolute; top: 166px; left: 310px; font-size: 80%; color: #fff; }
#contact_sent h3 { font-size: 200%; font-weight: normal; }
.contact label { color: #fff; display: block; margin: 2ex 0 1ex 0; font-size: 90%; }
.contact input { width: 15em; }
.contact input[type=submit] { margin-top: 1em; width: 4em; }
.contact textarea { width: 22em; height: 11em; }
.form_error { background: #900; color: #fff; border: 1px solid #c00; padding: 2px 0.5em; margin-left: 1em; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

/* Error */
#error_content { position: absolute; top: 230px; left: 75px; }
#goog-fixurl { margin-top: 1em; font-size: 75%; }
#goog-wm-sb { margin-left: 1em; }

/* About us */
#about_history { position: absolute; top: 60px; left: 29px; font-size: 84%; line-height: 1.5em; width: 450px; }
#about_history p { margin: 1.75em 0; }
#about_fact { position: absolute; top: 385px; left: 29px; font-size: 84%; line-height: 1.5em; width: 450px; }
#about_fact dt,
#about_fact dd { display: inline; margin: 0; }

/* Subscribe */
#subscribe_download { position: absolute; top: 135px; left: 34px; }
#subscribe_download img { border: none; }
#subscribe_detail { position: absolute; top: 245px; left: 34px; font-size: 84%; line-height: 1.5em; }
#subscribe_detail .big { font-size: 125%; }
#subscribe_detail p { padding-bottom: 1.5ex; }

/* Highlights */
.highlights { font-size: 90%;}
.highlights h3 { background-image: url(../img/text-sections.png); background-repeat: no-repeat; width: 171px; height: 20px; margin: 1.5em 0 0.5em 0; }
.highlights#hl_trend-beauty h3 { }
.highlights#hl_mode h3 { background-position: 0 -20px; }
.highlights#hl_emotion h3 { background-position: 0 -40px; }
.highlights#hl_surround h3 { background-position: 0 -60px; }
.highlights ul { margin-top: 0; }
.highlights li { margin-top: 0.3em; }

/* ADVERTISING */
#ad_side { width: 242px; text-align:center; }
#ad_banner { clear:both; width: 852px; height: 102px; text-align:center; margin: 20px 0 0 0; }
#ad_side span,
#ad_banner span { border: 1px solid #ddd; display: inline-block; }
#ad_side>div,
#ad_banner>div { margin-bottom: 1em; }
#ad_side *,
#ad_banner * { border: 0; vertical-align: top; }
#content #ad_banner { margin: 20px 0 0 -7px; }
#content #ad_side { float: right; margin-top: 1em; }

/* SCROLLABLE */
div.scrollable_wrapper { border-top: 1px solid #ddd; padding: 1em 0 0 0; }
div.scrollable { position: relative; overflow: hidden; width: 505px; height: 250px; float:left; } 
div.scrollable div.items { width: 20000em; position:absolute; } 
div.scrollable div.items div { float: left; }
div.scrollable div.items div img { border: none; margin-right: 2px; }
div.scrollable_instruction { clear: left; text-align: center; padding-top: 1ex; color: #999; font-size: 95%; }

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:22px;
	height:105px;
	background:url(../img/scrollable/arrow/left-big.png) no-repeat;
	float:left;
	margin:72px 14px 0 -6px;
	cursor:pointer;
	font-size:1px;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -70px;		
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(../img/scrollable/arrow/right-big.png);
	margin:72px -6px 0 14px;
}

/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
	text-align: center;
	margin: 0 auto;
	width:200px;
	height:20px;
}

/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	margin:3px;
	background:url(../img/scrollable/arrow/navigator.png) 0 0 no-repeat;
	display: inline-block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
} 	

h2 { position: relative; }
#pageflip { position: absolute; bottom: 0; right: 0; width: 80px; height: 80px; }
#pageflip .wrapper { position: absolute; bottom: 0; right: 0; width: 75%; height: 75%; background: #be1f24; overflow: hidden; }
#pageflip .content { position: absolute; bottom: 0; right: 0; width: 200px; height: 200px; }
#pageflip .curl { display: block; position: absolute; bottom: 1px; right: 1px; width: 100%; height: 100%; -ms-interpolation-mode: bicubic; }
#pageflip .next_issue { display: block; position: absolute; bottom: 3px; right: 133px; width: 73px; height: 38px; background: url(../img/text-next-issue.png) no-repeat; }
#pageflip .next_cover { display: block; position: absolute; bottom: 3px; right: 3px; width: 120px; height: 155px; padding: 4px; background: url(../img/cover-mini-shadow.png) no-repeat; }

#content.browse { }
#content.browse img.cover_mini { border: none; vertical-align: top; margin-bottom: 8px; }
#content.browse .cover { text-align: center; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; width: 140px; padding: 4px 4px 4px 3px; margin: 20px -10px 5px 0px; background: url(../img/cover-mini-shadow.png) no-repeat 9px top; vertical-align: top; font-size: 9pt; }
#content.browse .cover .title { font-size: 8pt; margin-bottom: 2px; }

/* pagination */
.page { text-align: center; margin-top: 10px; }

/*top-button*/
.button-container {position: relative;}
#top-button {
top: 25px;
right: -40px;
position: absolute;
text-indent: 0;
}
#top-button li {margin-right: -5px; list-style: none;}
#top-button li a img {border: none;}