Template2:Biomod/2014/Hokudai

From OpenWetWare
Jump to navigationJump to search

@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}

}