/* ------------------------------ */
/* BACKGROUND STYLES              */
/* ------------------------------ */

*, html {
	margin: 0;
	padding: 0;

}

body {
	margin: 0;
	padding: 0;
	text-align: center;
	font: normal 12px "ＭＳ Ｐゴシック","MS PGothic", Osaka, Sans-Serif;
	line-height: 18px;
	color: #b5b5b5;
	background: url(../images/bg-body.gif);
}

/* ------------------------------ */
/* GENERAL STYLES                 */
/* ------------------------------ */

p { margin: 0 0 20px 0;}

a img { border: 0;}

a { 
	color: #fff;
	text-decoration: none;
}

a:hover { 
	text-decoration: underline;
}

.alignleft { float: left;}
.alignright { float: right;}
.aligncenter { margin: 0 auto; text-align: center;}

img.alignleft { margin: 0 10px 0 0;}
img.alignright { margin: 0 0 0 10px;}

h2, h3 {
	margin: 0 0 10px 0;
	padding: 10px 0;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	border-top: 3px solid #333;
	border-bottom: 1px solid #333;
	letter-spacing: 1px;
}

h3 { font-family: msgothic, "ＭＳ Ｐゴシック","MS PGothic", Osaka, Sans-Serif; }  

h4 {
	margin		: 0 0 10px 0;
	padding		: 0 0 0 6px;
	font-size	: 14px;
	border-left	: 5px solid #5d8b25;
	color: #fff;
}

#wrapper {
	margin: 0 auto;
	text-align: left;
	background: url(../images/bg-wrapper.gif) repeat-x;
}

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

#contents {
	float: left;
	width: 540px;
}

.box {
	display: block;
	overflow: hidden;
	clear: both;
	padding: 0 0 20px 0;
	height: 100%;
}

p.info {
	padding: 10px 10px 10px 36px;
	color: #999;
	border: 1px solid #333;
	background: #10100f url(../images/icon-info.gif) no-repeat 10px 12px;
}

p.alert {
	padding: 10px 10px 10px 36px;
	color: #000;
	border: 1px solid #f0baa2;
	background: #ffd9c8 url(../images/icon-alert.gif) no-repeat 10px 12px;
}

p.joinad {
	padding: 10px 10px 10px 36px;
	color: #b3b79f;
	border: 1px solid #333;
	background: #10100f url(../images/icon-register.gif) no-repeat 10px 12px;
}

/* ------------------------------ */
/* Image Over                     */

.imageOver{
	background: url(../images/zoom.gif) no-repeat 50% 50%;	
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;	
}

/* ------------------------------ */
/* Button                         */

a.button {
    background: transparent url(../images/bg-button-a.gif) no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    height: 24px;
    padding-right: 10px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url(../images/bg-button-span.gif) no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 13px;
}

a.button:hover {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
    text-decoration: none;
}

a.button:hover span {
    background-position: bottom left;
    padding: 5px 0 5px 13px; /* push text down 1px */
}

/* ------------------------------ */
/* HEADER                         */
/* ------------------------------ */

#background {
	background: url(../images/bg-effect.gif) no-repeat 50% 0;
	height: 140px;
}

#meta {
	clear: both;
	margin: 0 auto;
	width: 950px;
	font-size: 10px;
}

#meta span.join {
	padding: 0 0 0 15px;
	background: url(../images/icon-key.gif) no-repeat top left;
}

#meta span.login {
	margin: 0 0 0 15px;
	padding: 0 0 0 15px;
	background: url(../images/icon-lock.gif) no-repeat top left;
}

#meta span.logout {
	margin: 0 0 0 15px;
	padding: 0 0 0 15px;
	background: url(../images/icon-unlock.gif) no-repeat top left;
}

#meta a { color: #999; text-decoration: none;}
#meta a:hover { color: #fff;}

#header {
	clear: both;
	margin: 0 auto;
	width: 950px;
}

h1#logo {
	position: absolute;
	display: block;
	border: none;
	overflow: hidden;
	top: 48px;
}

#image-girl {
	position: absolute;
	border: none;
	display: block;
	top: 1px;
	margin: 0 0 0 215px;
}

/* MENU
--------------------------------- */

#menu ul {
	float: right;
	padding: 40px 0 0 0;
}

#menu ul li {
	float: left;
	list-style: none;
	margin: 0 0 0 30px;
}

#menu ul li a { text-decoration: none; color: #ccc;}
#menu ul li a:hover { color: #fff;}


/* ------------------------------ */
/* SIDEBAR LEFT                   */
/* ------------------------------ */

#sidebar-left {
	float: left;
	width: 175px;
	padding: 0 0 20px 0;
	margin: 0 30px 0 0;
}

#alpha-list, #keyword-list, #bookmark-list {
	list-style: none;
}

#alpha-list li {
	float: left;
	text-align: center;
	width: 32px;
	padding: 8px 0;
	margin: 0 3px 0 0;
	display: block;
	background: url(../images/bg-alpha.gif) no-repeat center;
}

#keyword-list li,
#idol-list li {
	float: left;
	width: 40%;
	margin: 0 0 10px 0;
	padding: 0 0 0 10px;
	display: block;
	background: url(../images/icon-arrow.gif) no-repeat left center;
}

#sort-list li,
#manual-list li {
	margin: 0 0 10px 0;
	padding: 0 0 0 10px;
	background: url(../images/icon-arrow.gif) no-repeat left center;
}

.rank-list {
	list-style: none;
}

.rank-list li {
	margin: 0 0 10px 0;
	padding: 0 0 0 18px;
	line-height: 18px;
}

.rank-list li.rank1 { background: url(../images/rank-1.gif) no-repeat left top; background-position: 0 2px;}
.rank-list li.rank2 { background: url(../images/rank-2.gif) no-repeat left top; background-position: 0 2px;}
.rank-list li.rank3 { background: url(../images/rank-3.gif) no-repeat left top; background-position: 0 2px;}

.rank-list li.lastitem {
	padding: 5px 0 0 0;
	border-top: 1px solid #333; 
}

.rank-list li.lastitem a {
	float: right;
	color: #d6dc84;
}

#bookmark-list li.yahoo { background: url(../images/bm-yahoo.gif) no-repeat left center; padding: 0 0 0 25px; margin: 0 0 10px 0;}
#bookmark-list li.hatena { background: url(../images/bm-hatena.gif) no-repeat left center; padding: 0 0 0 25px; margin: 0 0 10px 0;}
#bookmark-list li.livedoor { background: url(../images/bm-livedoor.gif) no-repeat left center; padding: 0 0 0 25px; margin: 0 0 10px 0;}
#bookmark-list li.nifty { background: url(../images/bm-nifty.gif) no-repeat left center; padding: 0 0 0 25px; margin: 0 0 10px 0;}

/* ------------------------------ */
/* CONTENTS                       */
/* ------------------------------ */

#today .alignleft {
	width: 320px;
}

#today .alignright {
	width: 190px;
	padding: 10px 0 0 0;
}

#today img {
	padding: 5px;
	background: #222;
	border: 1px solid #333;
	position: relative;
}

#today a:hover img {
	background: #d6dc84;
}

/* TABLE DATA
--------------------------------- */

.data {
	width: 190px;
	margin: 0 0 15px 0;
	line-height: 20px;
	color: #ccc;
	border-top: 1px solid #2a2a2a;
}

.data th,
.data td {
	border-bottom: 1px solid #2a2a2a;
}

.data th {
	color: #767676;
	width: 70px;
	padding: 2px 0;
	vertical-align: top;
	text-align: left;
	font-weight: bold;
}

.data td {
	width: 105px;
	padding: 2px 0;
	vertical-align: top;
}

.data td a { color: #d6dc84;}
.data td a:hover { text-decoration: underline;}

/* SCREENSHOT
--------------------------------- */

.screenshot {
	margin: 0;
	height: 0;
	clear: both;
	overflow: hidden;
	display: block;
	height: 100%;
}

.screenshot li {
	float: left;
	list-style: none;
	padding: 0 6px 6px 0;
}

.screenshot li img {
	border: 1px solid #333;
	position: relative;
}

/* MOVIE PARTS
--------------------------------- */

.movie-parts {
	display: block;
	overflow: hidden;
	clear: both;
	margin: 0 0 20px 0;
	height: 100%;
}

.screenshot {
	margin: 0;
	height: 0;
	clear: both;
	overflow: hidden;
	display: block;
	height: 100%;
}

.screenshot li {
	float: left;
	list-style: none;
	padding: 0 6px 6px 0;
}

.screenshot li img {
	border: 1px solid #333;
	position: relative;
}

/* LIST
--------------------------------- */

#list li,
#reviews li {
	padding: 0 0 10px 0;
	margin: 0 0 10px 0;
	border-bottom: 1px dotted #333;
	display: block;
	overflow: hidden;
	clear: both;
	height: 100%;
}

#list li img,
#reviews li img {
	padding: 5px;
	background: #222;
	border: 1px solid #333;
	position: relative;
}

#list li a:hover img {
	background: #d6dc84;
}

#list li a.button {
	margin-right: 20px;
}

#list .right {
	float: right;
	width: 384px;
}

#reviews .right {
	float: right;
	width: 354px;
}

#list p {
	margin: 5px 0;
	line-height: 24px;
	color: #888;
}

#reviews p {
	margin: 5px 0;
}

#reviews strong {
	color: #d6dc84;
}

.pagenav ul li {
	float: left;
	list-style: none;
	margin: 0 10px 0 0;
	font-weight: bold;
}

/* PRICING
--------------------------------- */

table.ls { width: 100%; margin: 0 0 10px 0; }

table.ls thead tr th, table.ls tbody tr th {
	margin: 0;
	padding: 5px;
	color: #dde5b4;
	background-color: #788533;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}

table.ls tbody tr td, table.ls tbody tr th {
	margin: 0;
	padding: 5px;
	font-size: 12px;
	text-align: center;
}

table.ls tbody tr th { color: #ccc; font-weight: bold; }
table.ls tbody tr.price th { background-color: #000; }
table.ls tbody tr.price td { background-color: #333; }

/* SERVICE
--------------------------------- */

#service ul {
	list-style: none;
	margin: 0 0 20px 0;
}

#service ul li {
	line-height: 24px;
	padding: 0 0 0 20px;
	background: url(../images/icon-check.gif) no-repeat left center;
}

/* LOGIN
--------------------------------- */

#login-form {
	width: 290px;
	height: 220px;
	padding: 20px 30px 10px 30px;
	background: url(../images/bg-login.gif) no-repeat;
	text-align: left;
}

#login-form p {
	margin: 0 0 10px 0;
}

#login-form label,
#login-form input {
	width: 100%;
}

#login-form label {
	color: #88888a;
}

#login-form input {
	margin: 5px 0 0 0;
	padding: 2px;
	font-size: 18px;
	background: #f4f4f4;
	border: 1px solid #b2b2b2;
}

#login-form #submit {
	width: 130px;
	height: 30px;
	font-size: 12px;
	border: 1px solid #303030;
	background: #202020;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
}

#basic-accordian {
	width: 540px;
	left: 50%;
	top: 50%;
}

/* FAQ
--------------------------------- */

.accordion_headings{
	padding: 0 0 0 18px;
	margin: 0 0 5px 30px;
	background: url(../images/icon-plus.gif) no-repeat 0 3px;
	cursor: pointer;
	font-weight: bold;
}

.accordion_headings:hover{
	color: #fff;
}

.accordion_child{
	height: 100%;
	padding: 10px 5px 0 48px;
}

.header_highlight{
	color: #fff;
	background: url(../images/icon-minus.gif) no-repeat 0 3px;
}

/* CONTACT
--------------------------------- */

.contact label {
	color: #fff;
}

.contact input,
.contact textarea {
	padding: 4px;
	width: 250px;
	border: 1px solid #555;
}

.contact select {
	width: 260px;
}

.contact #message {
	width: 400px;
}

.contact #submit {
	width: 150px;
	border: none;
}

/* TOOLTIP
--------------------------------- */

.tool-tip {
	color: #fff;
	width: 285px;
	z-index: 13000;
	text-align: left;
}
 
.tool-title {
	font-weight: bold;
	font-size: 11px;
	margin: 0;
	color: #9fd4ff;
	padding: 8px 10px 0;
	background: url(../images/bubble.png) top left;
}
 
.tool-text {
	font-size: 11px;
	padding: 4px 10px 8px;
	background: url(../images/bubble.png) bottom right;
}
.tool-loading {
	background: url(../images/ajax_load.gif) center center no-repeat;
	width: 30px;
	height: 30px;
	margin: 0 auto;
}

/* ------------------------------ */
/* SIDEBAR RIGHT                  */
/* ------------------------------ */

#sidebar-right {
	float: right;
	width: 175px;
	padding: 0 0 20px 0;
}

#news-list li {
	margin: 0 0 10px 0;
	padding: 0 0 0 10px;
	line-height: 18px;
	background: url(../images/icon-arrow.gif) no-repeat left top;
	background-position: 0 4px;
}

/* POLL
--------------------------------- */

.graph {
	width: 175px;
	position: relative;
	right: 30px;
}

.bar-title {
	position: relative;
	float: left;
	width: 104px;
	line-height: 20px;
	margin-right: 17px;
	font-weight: bold;
	text-align: right;
}

.bar-container {
	position: relative;
	float: left;
	width: 110px;
	height: 10px;
	margin: 0px 0px 15px;
}

.bar-container div {
  	background-color:#cc4400;
  	height: 20px;
}

.bar-container strong {
	position: absolute;
	right: -32px;
  	top: 0px;
  	overflow: hidden;
}

#poll-results p {
  	text-align: center;
}

/* ------------------------------ */
/* FOOTER                         */
/* ------------------------------ */

#footer {
	margin: 0 auto;
	padding: 10px 0 20px 0;
	border-top: 3px solid #333;
	font-size: 10px;
	width: 950px;
	clear: both;
}

#footer p {
	float: left;
	font-family: Arial, Helvetica, sans-serif;
}

#footer-menu {
	float: right;
	list-style: none;
}

#footer-menu li {
	float: left;
	margin: 0 0 0 15px;
}

#footer-menu li a {
	color: #d6dc84;
}