/* @override http://duointeractive.com/stagezone/SOSBrigade/style.css */

* {margin:0px; padding:0px;}
body {font-size:x-small; font-family:helvetica, arial, sans-serif;}

#wrap, #header, #footer, #content, #nav ul {margin:0px auto; width:822px;}
#header {background:url(images/haruhi-logo.gif) no-repeat; height:80px; margin:15px auto 5px auto;}
#header a {display:block; width:410px; height:50px;}

#nav {background-color:#ebebeb;}
#nav ul {height:26px;}
#nav ul li {float:left; list-style:none;}
#nav ul li a {display:block; width:187px; height:26px; background:url(images/nav-tab.gif) no-repeat; margin-left:-24px;}

#nav ul li a span {display:block; height:26px; width:187px; cursor:pointer;}
#nav ul li a.home span {background:url(images/a-home.gif) center no-repeat;}
#nav ul li a.manga span {background:url(images/a-manga.gif) center no-repeat;}
#nav ul li a.prose span {background:url(images/a-prose.gif) center no-repeat;}
#nav ul li a.fun-stuff span {background:url(images/a-funstuff.gif) center no-repeat;}
#nav ul li a.join-sos span {background:url(images/a-joinsos.gif) center no-repeat;}
 
* html #nav ul li a {margin:0px;}
* html #nav ul {width:935px;}

#content {float:left; padding:35px 0px 20px 0px;}

#nav ul li a.home:hover, #nav ul li a.manga:hover, #nav ul li a.prose:hover, #nav ul li a.fun-stuff:hover {background-position:0px -26px;}
#nav ul li a#current {background-position:0px -52px;}
#nav ul li .join-sos {background-position:0px -78px;}

dl dd p {font-size:150%; color:#898989;}
dl dt {font-size:200%; font-weight:600;}
dl dd p strong.black {color:#000;}

#footer-border {clear:both; width:100%; height:10px; background-color:#ebebeb;}
#footer {clear:both; overflow: hidden;padding-top:10px; margin-bottom: 30px;;}
#footer span {float:right; text-align:right; line-height:160%;}
#footer span a {color:#000;}
#footer a#yenpress {float:left; margin:0px 0px 0px 20px; width:57px; height:42px; background:url(images/yenpress.gif);}
.dot {font-size:6px;}

/*-----------------------------------------------
HOME
-------------------------------------------------*/

#home #welcome {width:840px; height:350px; background:url(images/home-main.jpg) no-repeat;}
#home #content {width:900px;}
#home #manga-links {float:left; position:relative; width:448px; height:206px; background:url(images/home-mangalinks.jpg) no-repeat; margin-top:20px;}
#home #manga-links a.manga-link {display:block; position:absolute; top:2px; left:56px; width:360px; height:130px;}


#home #preview {float:left; width:420px; height:206px; background:url(images/home-preview.gif) no-repeat; margin-top:20px; position: relative;}
#home #preview a.prose-link {
	display:block;
	position:absolute;
	top:4px;
	left:100px;
	width:280px;
	height:125px;
}

#home dl dt, #home dl dd {margin:0px 0px 0px 420px;}
#home dl dt {padding:60px 0px 20px 0px;}
#home dl dd {width:345px;}
#home dl dd p {padding-top:10px;}

/*-----------------------------------------------
MANGA
-------------------------------------------------*/

#manga dl {margin:0px auto; width:821px;}

#manga #volumes {position:relative;margin-top:0px;background:url(images/manga-volumes.jpg) no-repeat; height:340px; margin:20px 0px 30px 0px;}
#manga #volumes a {position:absolute; display:block; top:37px; left:35px; width:100px; height:100px;}

#manga dl dd {width:500px; margin:0px 0px 0px 90px;}
#manga dl dd p {padding-top:10px;}

#manga-preview #content {padding:10px;height:790px;}
#manga-preview #content dl {width:619px; height:600px; background:url(images/manga-placeholder.jpg); margin:0px auto;}

/*-----------------------------------------------
PROSE
-------------------------------------------------*/

#prose dl {margin:0px auto; width:821px;}
#prose dl#vol-prose {background:url(images/prose-preview.gif) 60px 0px no-repeat;}
#prose dl#vol-prose2 {background:url(images/prose2-preview.gif) 60px 0px no-repeat; margin:40px 0px; height:260px;}
#prose dl#vol-prose3 {background:url(images/prose3-preview.gif) 60px 0px no-repeat; margin:40px 0px; height:375px;}
#prose dl#vol-prose a {float:left; margin:45px 0px 0px 70px; width:90px; height:90px;}
#prose dl#vol-prose2 a {float:left; margin:45px 0px 0px 70px; width:90px; height:90px;}
#prose dl#vol-prose3 a {float:left; margin:45px 0px 0px 70px; width:90px; height:90px;}
#prose dl dd {width:345px; margin:0px 0px 0px 322px;}
#prose dl dd p {padding-top:0px;}
#prose dl dd p img {margin:0px 0px 10px 0px;}

/*-----------------------------------------------
FUN STUFF
-------------------------------------------------*/

#fun-stuff dl {float:left; width:798px;}
#fun-stuff dl dd {float:left; width:380px;}
* html #fun-stuff dl dd {width:320px;}
#fun-stuff dl dd.downloads img {border:2px solid #fff; padding:1px; background-color:#aaa;}
#fun-stuff dl dd.downloads {float:right; width:399px; background:url(images/funstuff-downloads-back.gif) 0px 0px repeat-y; border-bottom:1px solid #959595;}
#fun-stuff dl dd.downloads h3 {height:100px; background:url(images/funstuff-downloads.gif) -1px 0px no-repeat;}

#fun-stuff dl dd.downloads #contain {float:left; margin:-90px 0px 0px 0px; padding-bottom:10px;}
#fun-stuff dl dd.downloads #icon-info {float:left; padding:10px;}
#fun-stuff dl dd.downloads span {display:block;}


#fun-stuff dl dd.downloads .icons {float:left; width:220px; margin:0px 0px 10px 120px;}
* html #fun-stuff dl dd.downloads .icons  {margin-left:60px;}
#fun-stuff dl dd.downloads .icons img {display:block; width:36px; height:36px; float:left; margin:3px;}

#fun-stuff dl dd.downloads .wallpapers {float:left; width:310px; margin:5px 0px 10px 40px;}
*html #fun-stuff dl dd.downloads .wallpapers {margin-left:20px;}
#fun-stuff dl dd.downloads .wallpapers img {display:block; float:left; width:84px; height:62px; margin:3px;}

#fun-stuff dl dd.downloads .pdfs {float:right; width:160px; margin:5px 10px 10px 0px;}
* html #fun-stuff dl dd.downloads .pdfs {margin-right:10px;}
#fun-stuff dl dd.downloads .pdfs img {display:block; float:left; width:40px; height:50px; background-color:#000; margin:3px;}

#fun-stuff #links-videos {float:left; margin-top:30px; padding-top:30px; width:798px; background:url(images/funstuff-linksvideo.gif) top no-repeat;} 
#fun-stuff #links-videos dd {width:600px;}
#fun-stuff #links-videos ul {float:left; margin-left:24px; list-style:none; width:200px;}
* html #fun-stuff #links-videos ul {margin-left:20px;}
#fun-stuff #links-videos ul li {margin-top:10px;}
#fun-stuff #links-videos ul li a {display:block;font-size:120%; background:url(images/link-arrow.gif) 0px 2px no-repeat; padding-left:13px; font-weight:bold; color:#000; text-decoration:none;}
#fun-stuff #links-videos ul li a:hover {color:#ED1C24;}
#fun-stuff #links-videos #videos {width:540px; height:560px; float:right; margin-right:5px;}
*html #fun-stuff #links-videos #videos {margin-right:4px; overflow:hidden;}
#fun-stuff #links-videos #videos .video {float:left; width:257px; height:240px; margin:5px 5px;} 
#fun-stuff #links-videos #videos .video h2 {margin-bottom:10px;}
* html #fun-stuff #links-videos #videos .video h2 {font-size:150%;}


/*-----------------------------------------------
JOIN S.O.S.
-------------------------------------------------*/

#join-sos dl {float:left; width:325px; height:580px; margin-right:20px; background:url(images/joinsos-frog.jpg) bottom center no-repeat;}
#join-sos form {float:left; color:#fff; font-size:120%; font-weight:600; margin-left:0px; padding:10px; width:445px; background-color:#656565; border:3px solid #000;}
#join-sos form label, #join-sos form input {width:430px; display:block;}
#join-sos form label {padding:5px 0px 2px 0px;}
#join-sos #check-age {float:left; margin:10px 0px 10px 0px;}
#join-sos #check-age a {color:#ccc;}
#join-sos form #check-age input {width:20px; height:20px; float:left;}
#join-sos form input.submit {width:120px; padding:0px 0px 2px 0px; font-size:100%; float:left; text-align:center; border:1px solid #ccc; background-color:#eee; cursor:pointer;}