@charset "UTF-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
}

html{
	height:100%;
}

* html{
	overflow: hidden;
}

body{
	color:#FFF;
	background:#000;
	font-family:Arial, Helvetica,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	height: 100%;
}

html body {
  padding-top: -52px;
  overflow: hidden;
}

ul li{
	list-style:none;
}

img {border:none}

a,
a:link,
a:visited,
a:focus,
a:active,
a:hover{ text-decoration:none; outline:none; }
a:hover{color:#fff}

/* ======================================================================== *//*
* Clear Fix
*//* ======================================================================== */

.clearfix {
    zoom:1;/*for IE 5.5-7*/
	overflow:hidden; /* for Dw */
}
.clearfix:after {/*for modern browser*/
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}

/* ==================================================================================
レイアウト
================================================================================== */

div#wrap{
	height:100%;
	min-width: 800px;
	overflow: hidden;
}

header {
	display:block;
	height:52px;
	background:url(../imgs/header-bg.png) repeat-x #424242;
}

nav{
	display:block;
	height: 52px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}


div#container{
	height:100%;
}

aside {
	display:block;
	width:220px;
	height:100%;
	float:left;
	background:url(../imgs/sidebar-bg.png) repeat-y;
}

div#main{
	margin-left:220px;
	width:100%;
	height:100%;
	position:relative;
}

/* ==================================================================================
ヘッダー
================================================================================== */

nav ul li{ position: absolute; }
nav ul li.home {left : 220px; }
nav ul li.about {right : 225px; }
nav ul li.submit {right : 115px; }
nav ul li.feed {right : 5px; }

nav div#search {
	position:absolute;
	left: 330px;
	top:14px;
}


/* ==================================================================================
サイドバー
================================================================================== */

aside .inside{
	padding: 10px 10px;
	background:url(../imgs/sidebar-top.png) top no-repeat;
}

aside dl{
	margin-bottom: 10px;
	width:200px;
}

aside dl dt{
	background:url(../imgs/sidebar-h2.png) bottom repeat-x;
	padding-bottom: 3px;
	margin: 0 0 3px 0;
	font-size:16px;
	text-shadow: 0px 2px 0px black;
}

aside ul.category li span{
	background:url(../imgs/icon-folder.png) no-repeat 4px 2px;
	display:block;
	width:200px;
	height:20px;
	padding-left: 25px;
	line-height: 20px;
	font-size: 12px;
}
aside ul.category li span small{
	color:#666;
}

aside ul.category li a{
	display:block;
}
aside ul.category li a:hover{
	background:url(../imgs/list-active.png) no-repeat;
}
aside ul.category li.active{
	font-size:11px;
	background:url(../imgs/list-active.png) no-repeat;
}


aside ul.category a,
aside ul.category a:link,
aside ul.category a:visited,
aside ul.category a:focus,
aside ul.category a:active { color:#CCC; }

aside ul.tag li{
	display:inline;
}

/* タグクラウド */
/* タグレベル1～6 */
aside ul.tag li.active a span {
	color:#FFF;
}
c0,c1,c2,c3,c4,c5,c6{ }
.c6 {
	font-size: 85%;
	font-weight: bold;
	color: #cfcfcf;
}

.c5 {
	font-size: 85%;
	font-weight: bold;
	color: #b3b3b3;
}

.c4 {
	font-size: 80%;
	font-weight: bold;
	color: #a3a3a3;
}

.c3 {
	font-size: 77%;
	color: #979797;
}

.c2 {
	font-size: 60%;
	color: #7a7a7a;
}

.c1 {
	font-size: 50%;
	color: #5e5e5e;
}

.c0 {
	display:none;
}



aside ul.tag a:hover{ color:#FFF; }


aside ul.tag li.active span {
	color:#FFF;
	background:#666;
}

div.bnrLeft{
	float:left;
	margin-bottom: 8px;
}

div.bnrRight{
	float:right;
	margin-bottom: 8px;
}


/* ==================================================================================
メイン
================================================================================== */

div#view{
	background:url(../imgs/key-visual.jpg) no-repeat left top;
	height: 100%;
}

div#titleTab{
	position:absolute;
	top: 83px;
	left:23px;
}

div#titleTab h2{
	font-size:14px;
	line-height:30px;
	font-weight:normal;
	text-shadow: 0px 1px 0px black;
}

div#interface{
	position:absolute;
	top: 82px;
	right:10px;
	width:415px;
	height:25px;
}
label {
	margin:0 5px 0 3px;
}

p#toolTip{
	margin: 0;
	padding: 8px;
	position: absolute;
	border: 1px solid #122025;
	background: #000;
	display: none;
	z-index: 200;
	font-size: 10px;
}

div#content{
	height: 400px;
	width: 760px;
	position: absolute;
	top: 126px;
	left : 10px;
	overflow:hidden;
}

div#content div.row{
	width:760px;
	margin-bottom: 8px;
}

div#content div.cell{
	position:absolute;
	border:1px #122025 solid;
	background:#000;
	display:none;
}

/* thumb mask */
div.cell div.thumb{
	overflow: hidden;
	margin:6px;
}

/* thumb translate vertical middle */
div.cell div.thumb img{
	position: relative;
}

div.cell a,
div.cell a:link,
div.cell a:visited,
div.cell a:focus,
div.cell a:active { color:#CCC; }

div.cell div.meta{
	position:absolute;
}

span.title{
	font-size:12px;
	font-weight:bold;
	color:#999;
}

span.user{
	padding-top:3px;
}
span.user span.inline{
	margin-left:2px;
	font-size:12px;
}
span.user img{
	position:relative;
	top:3px;
}

span.tag{font-size:10px; color:#777;}
span.category{font-size:10px; color:#777;}
span.date{font-size:10px; color:#777;}

span.user a,
span.user a:link,
span.user a:visited,
span.user a:focus,
span.user a:active { color:#777; }

div.meta a,
div.meta a:link,
div.meta a:visited,
div.meta a:focus,
div.meta a:active { color:#777; }
div.meta a:hover { color:#fff; }


#windowBox{
	width:90px;
	height:25px;
	line-height:25px;
	padding-left: 5px;
	position:absolute;
	left: 325px;
}
#windowBox img{ position:absolute; top:0; left:0; cursor:pointer; }

div#rollOverBox{
	width:90px;
	height:25px;
	line-height:25px;
	padding-left: 5px;
	position:absolute;
	left: 232px;
}
#rollOverBox img{ position:absolute; top:0; left:0; cursor:pointer; }

#rollOver, #windowCheckBox{
	position:relative;
	top: 0px;
}

div#sortBox{
	background:url(../imgs/interface-sort.png) no-repeat;
	width:170px;
	height:25px;
	position:absolute;
	top: 82px;
	left:172px;
}

div#sortBox img#newImg{
	position:absolute;
	left:58px;
	top:6px;
}
div#sortBox img#rateImg{
	position:absolute;
	left:93px;
	top:6px;
}

div#sortBox img#picksImg{
	position:absolute;
	left:128px;
	top:6px;
}

div#layoutBox{
	background:url(../imgs/interface-layout.png) no-repeat;
	width:52px;
	height:25px;
	position:absolute;
	left:175px;
}
div#layoutBox img#gridImg{
	position:absolute;
	left:6px;
	top:4px;
	cursor:pointer;
}
div#layoutBox img#listImg{
	position:absolute;
	left:27px;
	top:4px;
	cursor:pointer;
}

/* ==================================================================================
ページング
================================================================================== */

div#pagingTop{
	position: absolute;
	top:82px;
	left:348px;
}
div#pagingBottom{
	position: absolute;
	bottom:5px;
	left:10px;
	z-index:100;
}
div.paging ul li{
	float:left;
	margin-right:2px;
}
div.paging ul li a{
	display: block;
	padding: 0 5px;
	font-size: 10px;
	height:23px;
	line-height:23px;
	border:1px solid #000;
	background-image:url(../imgs/paging-bg.png);
}
div.paging ul li span.disable{
	display: block;
	padding: 0 5px;
	color:#666;
	height:23px;
	line-height:23px;
	font-size: 10px;
	border:1px solid #000;
	background-image:url(../imgs/paging-bg.png);
}
div.paging ul li a:hover{
	background-image:none;
	background:#000;
	border:1px solid #fff;
}

div.paging ul li a.active{
	background-image:none;
	background:#000;
	border:1px solid #fff;
}

div.paging a,
div.paging a:link,
div.paging a:visited,
div.paging a:focus,
div.paging a:active { color:#CCC; }


/* ==================================================================================
フッター
================================================================================== */

footer {
	display: block;
	
	height:25px;
	line-height:25px;
	/*width:100%;*/
	position:absolute;
	bottom:0;
	right:0;
	/*background:url(../imgs/footer.jpg) repeat-x;*/
	text-align:right;
	font-size:9px;
	color:#999;
}

footer ul {
	display:inline;
}

footer ul li{
	display:inline;
}


footer a,
footer a:link,
footer a:visited,
footer a:focus,
footer a:active { color:#CCC; }


/* ==================================================================================
ボタン系
================================================================================== */


a#btnHome, a#btnAbout, a#btnSubmit, a#btnFeed {
	display:block;
	width:100px;
	height:25px;
}

a#btnHome{
	margin-top:13px;
	background:url(../imgs/btn-home-on.png) no-repeat;
}

a#btnAbout{
	margin: 13px 13px 0 0;
	background:url(../imgs/btn-about-on.png) no-repeat;
}

a#btnSubmit{
	margin: 13px 13px 0 0;
	background:url(../imgs/btn-submit-on.png) no-repeat;
}

a#btnFeed{
	margin: 13px 13px 0 0;
	background:url(../imgs/btn-feed-on.png) no-repeat;
}


a.bnr{
	display:block; width:96px; height:96px;
}

/* ==================================================================================
スクロールバー
================================================================================== */
.Scroller-Container {
  position: absolute;
  top: 0px; left: 0px;
}
#Scrollbar-Container {
  position: absolute;
  top: 125px; right: 17px;
}
.Scrollbar-Up {
  position: absolute;
  width: 17px; height: 17px;
  background:url(../imgs/btn_up.png) no-repeat;
}
.Scrollbar-Track {
  width: 17px; height: 187px;
  position: absolute;
  top: 17px;
  background:url(../imgs/scroll_bg.png) repeat-y;
}
.Scrollbar-Handle {
  position: absolute;
  width: 17px; height: 200px;
  background:url(../imgs/btn_triger.png) no-repeat;
}
.Scrollbar-Down {
  position: absolute;
  top: 200px;
  width: 17px; height: 17px;
  background:url(../imgs/btn_down.png) no-repeat;
}



/* ==================================================================================
吹き出し
================================================================================== */
#screenshot {
	margin: 0;
	padding: 8px;
	position: absolute;
	border: 1px solid #122025;
	background: #000;
	display: none;
	z-index: 200;
}

#userProfile {
	margin: 0;
	padding: 8px;
	position: absolute;
	border: 1px solid #122025;
	background: #000;
	display: none;
	z-index: 200;
	font-size:12px;
	color:#CCC;
}

/* ==================================================================================
検索
================================================================================== */
#searchResultContainer {
	position: absolute;
	z-index:4;
	width:400px;
	height:420px;
	left: 330px;
	top:50px;
	overflow:hidden;
	display:none;
	background:#222;
}

#searchResultContainer .searchItem {
	padding:3px;
	height: 60px;
	overflow:hidden;
	background:#222;
	cursor:pointer;
}

#searchResultContainer .searchItem:hover {
	background:#333;
}

#searchResultContainer .thumb{
	float:left;
	width: 60px;
}

#searchResultContainer .meta{
	float: right;
	width: 324px;
}

#searchResultContainer .searchTitle {
	font-size:12px;
	font-weight:bold;
	color:#999;
}


#searchResultContainer .searchUser {
	font-size:10px; color:#777;
}