@charset "utf-8";
/* ↑この宣言は最初になきゃダメ。いじらないで。 */
/*/////////////////////////////////////////////////////////////
東北大Masspy
Copyright (C) Masspy All Rights Reserved.
------------------------------------------------------------
[stylesheet.css] ホームページの基本デザイン
	- Init 各要素のスタイル初期化
	- clearfix float対策
	- layout レイアウト指定
	    body > #wrap > #container > #top > #header, #nav
	    body > #wrap > #container > #contents > (各コンテンツ)
	    body > #wrap > #bottom > #footerbar, #footer
	- contents(各コンテンツの個別設定)                    		
//////////////////////////////////////////////////////////////*/
/*
#wrap, div, #header, footer, section, p, ul, h1, h2, h3, h4, h5, img{border:solid 1px #000 !important;}*/
/* ↑レイアウトの確認に便利。チェックするときはコメントを外して。 */
/* -------------------- Init -------------------- */
* {
  margin: 0;
  padding: 0;
}
html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, a{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
html, body
{
    width:100%;
    height:100%;
    font-family: "メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
    font-size: small;
    line-height:1;
}
* html body {font-family: "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;} /* for IF6 */
a {
    text-decoration:none;
	border-bottom: #ccc dashed 1px;
    color:#333;
}
a:hover
{
    color:black;
    background: inherit;
}
h1, h2, h3, h4, h5, h6{
	font-weight:bold;
}
h2 a{	border:none;}
h4 a{	border:none;}
p, span, ul li{line-height:1.5;}
img{border:none;}
ul li{list-style:none;}
.new{color:red;}
/* -------------------- clearfix -------------------- */
/* ↓ここはいじらないで。clearfixは、float指定した要素の、親要素に設定することでレイアウトの崩れを防ぐ。 */
.clearfix:after{
    content: url("./img/pixel.gif");
    display: block;
    clear: both;
    height: 0;
}
/*Hides from IE-mac\*/
.clearfix{/height:1%;} /*for IE6,7*/
.clearfix{display:block;}
/*End hide from IE-mac*/
.clear, #contents{clear:both;}
/* -------------------- layout -------------------- */
/*wrap*/
#wrap
{
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 100%;
        text-align:center;
        font-size: 115%; /* small[body] + 115%[wrap] */
}
body > #wrap {height: auto;}
/*container*/
div#container{
    padding-bottom: 180px;  /* the same size of footer height */
    background: transparent url("./img/bg.png") repeat-y top center;
}
/*contents*/
#contents{
    width: 900px;
    margin: -20px auto 0;
    padding-bottom: 20px;
}
/*top*/
#top{
    width: 100%;
    min-height:170px;
    height: auto !important;
    height: 170px;
    background: transparent url("./img/bglogo.png") no-repeat top center;
}
/*bottom*/
#bottom
{
    width: 100%;
    background-color:#333;
    position: absolute;
    bottom: 0;
    left:0;
    height: 180px;
    overflow:hidden;
}
#bottom a{
	border:none;
}
/* -------------------- top > header -------------------- */
/*top > header*/
#header{
    width:900px;
    height: 100px;
    margin: 0 auto;
    position:relative;
}
#header a{
    border:none;
    position:absolute;
    top:0;
    right:0;
    padding: 5px 5px 0;
    height:30px;
    background: transparent url("./img/bgtip.png") repeat-x 0 0;
}
/* -------------------- top > nav -------------------- */
#nav{
    width:100%;
    background-color:black;
    text-align:left;
    font-weight:bold;
}
#nav div.center{
    width:700px;
    margin:0 auto;
    color:White;
}
#nav div.center div{
    padding:10px 15px;
    float:left;
}
#nav a{border:none;}
#nav span{
    display:block;
    font-size:140%;
    color:White;
}
#nav ul{
    display:none;
    margin:5px 0 0 -10px; /* don't begin to see from <div> */
    position:absolute;
    z-index:100;
}
#nav ul li{
    padding:5px 10px;
    border:solid 5px black;
    border-top:none;
    background-color:White;
}
* html #nav div{behavior: url("./csshover.htc");} /* for IE6 */
#nav div.center div:hover ul{display:block;}
/* -------------------- contents -------------------- */
#contents div.inner{
    background-color:white;
    border: solid 5px black;
    padding: 10px;
    text-align:left;
}
#contents h3{
    background: transparent url("./img/wakuwaku.png") no-repeat 0 0;
    height: 100px;
    position:relative;
}
#contents h3 img{
    position:absolute;
    left:20px;
    bottom:5px;
}
/* --------------------  bottom > footerbar -------------------- */
#footerbar{background-color:black;}
#footerbar div{
    width: 900px;
    text-align:left;
    margin: 0 auto; 
}
#footerbar ul{float:left;}
#footerbar ul li{float:left;}
#footerbar ul li a{
    display:block;
    padding: 5px 15px;
    font-weight:bold;
    color:White;
}
#footerbar ul li a:hover{
    background-color:White;
    color:black;
}
#footerbar p{
    float:right;
    color:White;
}
/* -------------------- bottom > footer -------------------- */
#footer div{
    width:800px;
    margin:0 auto;
    padding:15px 0;
}
#footer h6{
    width:100px;
    color:Gray;
    font-size:140%;
    float:left;
}
#footer ul{
    width:680px;
    float:right;
}
#footer a{
    font-size:80%;
    color:Black;
}
#footer a:hover{color:gray;}
#footer ul li{
    float:left;
    padding:0 5px;
}
/*/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/
/* -------------------- info -------------------- */
#info{
    margin-bottom: 10px; /*contents position*/
    text-align:left;
}
/* -------------------- info > topics, album -------------------- */
/* topics */
#topics{
    float:left;
    width: 480px;
}
#topics h3{
    background: transparent url("./img/bgtopics.png") no-repeat 0 0;
    width: 450px;
}
#album h3{background: transparent url("./img/bgtitle.png") no-repeat 0 0;}
#topics h4, #album h4{
    background-color:Black;
    color:White;
    font-size:120%;
    padding: 10px; /* for background */
}
#topics ul{
    margin-left: 10px;
    border-left: dashed 1px black;
    padding: 10px 0;
}
#topics ul li{
    padding: 0 10px 0 20px; /* because of negative margin-left (span.date) */
    word-break: normal;
    word-wrap: break-word;
    font-size:90%;
}
#topics span.date{
    display:block;
    margin-left: -10px;
    padding:0 5px; /* for background */
    background-color:#f0f0f0;
}
#topics ul li h5{
    display:inline;
    font-weight:normal;
}
/* album */
#album{float:right;}
* html #album{width:1%} /* for IE6 */
#album div.inner{
    text-align:center;
    width:360px; /* about~= centering + 2*170[img](width+pad) */
}
#album h4{ text-align:left;}
#album #photo{padding-top:10px;}
#album #photo img{ /* img -> inline */
    width: 160px;
    height:120px;
    padding: 5px;
}
/* -------------------- links -------------------- */
#links h6{
    background-color:black;
    color:White;
    font-size:120%;
    padding: 10px; /* for background */
}
#links ul{
    float:left;
    padding:15px;
    font-size:80%;
}
#links ul li{list-style:circle;}
/* -------------------- vision, student, enterprise, outline -------------------- */
#vision p, #student p, #enterprise p{padding:15px 0;}
#vision h4{
    float:left;
    margin:5px;
}
#vision h4, #student h4, #enterprise h4, #outline h4{
    padding:10px;
    font-size: 120%;
    line-height:1.5;
    border-left:solid 10px black;
    border-bottom:solid 2px black;
}
#student h5, #enterprise h5{
    padding:15px 0;
    font-size: 120%;
    line-height:1.5;
}
#student div.inner{background:white url("./img/bgstudent.png") no-repeat scroll 620px 240px;}
#enterprise div.inner{background:white url("./img/bgenterprise.png") no-repeat scroll 630px 150px;}
#outline table{
    width:90%;
    margin:20px auto; /* centering */
    border-collapse:collapse;
}
#outline table td{
    border:solid 1px black;
    padding:10px;
}
#outline table a{
    border:none;
    font-weight:bold;
}
/* -------------------- activities -------------------- */
#activities h4{
    background-color:Black;
    color:White;
    font-size:140%;
    padding: 10px 20px; /* for background */
}
#activities h4 a{
color:#666;
margin-left:20px;
}
#activities h4 a:hover{color:White;}
#activities div.inner div{
    float:left;
    width:415px; /* RealWidth = 410(width) + 10*2(padding) */
    padding:20px 10px 0;
}
#activities h5{
    padding:10px;
    border-left:solid 10px black;
    border-bottom:solid 2px black;
    font-size:120%;
}
#activities ul{
    margin:5px 0 10px 10px;
    padding:0 10px;
}
#activities ul li{
    list-style-type:circle;
    word-break: normal;
    word-wrap: break-word;
}
/* -------------------- member -------------------- */
/* index */
#member h4.index{
    background-color:Black;
    color:White;
    font-size:140%;
    padding: 10px 20px; /* for background */
    margin-bottom:20px;
}
#thumbnails{
    position:relative; /* member.js */
    width:850px;
    margin: 0 auto;
}
#thumbnails a{
    position:absolute;
    display:none;
}
#thumbnails img{
    padding: 5px;
    width: 160px;
    height: 160px;
}
/* individual */
#prof{
    text-align:left;
    padding-bottom:20px;
}
#prof div.inner{
    float:left;
    width:360px;
}
#prof div.inner div{
    background-color:Black;
    color:White;
    padding:5px 10px;
}
#prof div.inner div h4{font-size:250%;}
#prof div.inner h5{
    padding-top: 10px;
    border-bottom:solid 3px black;
}
#prof ul{margin-top:5px;}
#prof ul li{
    word-break: normal;
    word-wrap: break-word;
}
#prof ul li{padding:2px 0 2px 20px;}
#prof ul li a:hover{background: transparent;} /* save err (bug ??)*/
#prof ul#account li{background: transparent url("./img/account.png") no-repeat center left;}
#prof ul#project li.join{background: transparent url("./img/join.png") no-repeat center left;}
#prof ul#project li.leader{background: transparent url("./img/leader.png") no-repeat center left;}
#prof img{
    float:right;
    display:block;
    border:solid 5px black;
}
#box h5{
    background-color:Black;
    color:White;
    font-size:140%;
    padding: 10px 20px; /* for background */
}
#box h6{
    font-size:120%;
    padding: 10px 10px 0;
}
#box p{padding: 5px 20px 10px;}
/* -------------------- site map -------------------- */
#sitemap h4{
    background-color:Black;
    color:White;
    font-size:140%;
    padding: 10px 20px; /* for background */
}
#sitemap p{padding:15px;}
#sitemap div.hp{
    float:left;
    width:420px;
}
#sitemap div.ex{
    float:right;
    width:420px;
}
#sitemap h5{
    padding:10px;
    font-size: 120%;
    border-left:solid 5px black;
    border-bottom:solid 5px black;
}
#sitemap ul{padding:0 0 20px 15px;}
#sitemap ul li, #sitemap ul li.indent span{
    margin-top:5px;
    padding: 10px 0 0 10px;
    border-left:solid 1px black;
    border-bottom:solid 1px black;
}
#sitemap ul li.indent{
    padding: 0 0 0 40px;
    border-left:dashed 1px black;
    border-bottom:none;
}
#sitemap ul li.indent span{display:block;}
/* -------------------- site map -------------------- */
div.err span, div.thanks span{font-weight:bold;}

/* -------------------- outline --------------------- */
#outline_symbol{
	background:url(img/symbol.png);
	background-position:right;
	background-repeat:no-repeat;
}