Template2:Biomod/2014/Hokudai
@import url(http://fonts.googleapis.com/css?family=Orbitron:400,900); @charset "UTF-8";
body {background-color: #333333;
margin: 0; font-family: 'Arial', sans-serif}
/* サイト名 */
.site h1 a {color: crimson;
text-decoration: none}
.site h1 {margin: 0;
font-size: 30px;
font-family: 'Orbitron', sans-serif; font-weight: 900}
.site img {margin-right: 5px;
border: none; vertical-align: -5px;}
/* ナビゲーション */
.menu ul {margin: 0;
padding: 0;
list-style: none}
.menu li a {color: #ffffff;
text-weight: bold; display: block; padding: 10px 15px;
font-size: 15px; text-decoration: none; font-family: 'Orbitron', sans-serif; font-weight: 900;
}
.menu li a:hover {background-color: crimson}
.menu ul:after {content"";
display: block;
clear: both}
.menu li {float: left;
width: auto}
/* ヘッダー画像 */
.topimg {max-width: 100%;
width: 70%;
margin-left: auto; margin-right: auto; vertical-align: bottom}
/* 概要 */
.gaiyou a {display: block;
background-color: goldenrod;
margin-bottom: 20px; color: #333333; border: solid 1px #333333; text-align: center; text-decoration: none}
.gaiyou a:hover {
background-color: #333333;
color: goldenrod; border: solid 1px goldenrod}
.gaiyou h1 {clear: both;
margin-top: 0; margin-bottom: 0;
font-family: 'Orbitron', sans-serif; font-weight:900; font-size: 36px}
.gaiyou p {
margin-top: 0; margin-bottom: 0}
/* プロジェクト */
.project a {display: block;
background-color: #9acd32;
margin-bottom: 20px; color: #333333; border: solid 1px #333333; text-align: center; text-decoration: none}
.project a:hover {
background-color: #333333;
color: #9acd32; border: solid 1px #9acd32}
.project h1 {clear: both;
margin-top: 0; margin-bottom: 0;
font-family: 'Orbitron', sans-serif; font-weight:900; font-size: 36px}
.project p {
margin-top: 0; margin-bottom: 0}
/* アブストラクト */ .box7 h1 {
color: crimson;
font-size: 30px;
}
.box7 p {color: #ffffff; font-size: 20px; }
.box7 {padding: 20px}
/* お知らせ */ .news { clear: both;
margin-top: 20px; padding: 20px; border: solid 2px yellow;
box-shadow: 0 0 6px orange; background-color: #0070C0}
.news h1 {margin-top: 0;
margin-bottom: 5px;
font-size: 18px; color: orange}
.news ul {margin: 0;
padding: 0;
List-style: none}
.news li a {display: block;
padding: 8px;
border-bottom: dotted 2px #dddddd; color: #ffffff; font-size: 14px; text-decoration: none}
.news li a:hover {background-color: crimson}
.news time {/*rgin-right: 10px;*/
color: #ffff00;
font-weight: bold}
.news a:after {content:"";
display: block;
clear: both}
.news time {float: left;
width: 60px}
.news .text {float: none;
width: auto;
margin-left: 80px}
/* 記事 */
article h1 {color: crimson;
font-size: 60px; padding-top: 30px;
padding-bottom: 10px}
article h2 {font-size: 35px}
article p {font-size: 20px}
article {color: #ffffff;
width: 900px;
margin-left: auto; margin-right: auto; clear: both}
article h2, p {padding-top: 10px;
padding-bottom: 10px}
/* コピーライト */ .copyright p {margin: 0;
color: #ffffff;
background-color: #333333; font-size: 14px}
/* 画像を中央に配置するレイアウト */
figure.photo-center {text-align: center}
/* 図名 */
figcaption {font-size: 15px}
/* BOX3の幅をあわせる */
/* BOX5をバー の形にする */ .box5 {padding-top: 15px;
padding-bottom: 10px;
padding-left: 10px
}
/* ボックスの左右 */ .boxA, .box4, .box5 {padding-left: 15px;
padding-right: 15px;
}
.box3 {display: block;
margin-left: auto;
margin-right: auto}
/* ボックスの上下 */ .boxA {padding-top: 20px;
padding-bottom:10px}
.box4 {padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 30px}
/* BOXAとBOX4の背景 */
.boxA {background-color: #333333}
.box4 {background-color: #333333}
.box7 {background-color: #333333}
/*######## 599px以下 ########*/
@media (min-width: 599px){
/* ナビゲーション */
.menu li a {padding: 10px 7px;
font-size: 11px}
}
/*######## 768px以上 ########*/
@media (min-width: 768px){
/* BOX1とBOX2を横に並べる設定 */
.boxA:after {content: "";
display: block;
clear: both}
.box1 {float: left;
width: auto}
.box2 {float: right;
width: auto}
/* BOX6-1,BOX6-2,BOX6-3を横に並べる設定 */
.box6:after {content="";
display: block;
clear: both}
.box6-1 {float: left;
width: 33.3333%}
.box6-2 {float: left;
width: 33.3333%}
.box6-3 {float: left;
width: 33.3333%}
}
.box7:after {content="";
display: block;
clear: both}
/*######## 1190px以上 ########*/
@media (min-width: 1190px){
/* 全体の横幅を固定 */
.box3, .boxA-inner, .box5-inner {width: 1140px; margin-left: auto;
margin-right: auto}
/* BOXAの下に罫線を挿入 */ .boxA {margin-bottom: 0;
border-bottom: solid 2px yellow}
}