Biomod/2012/TeamJapan/Sendai/Header: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
No edit summary
No edit summary
Line 1: Line 1:
<div style="padding: 10px; border: 5px solid #333333;">
<html>
<html>


<style rel="stylesheet" type="text/css">
      .clear {clear:both;}
  #verticalmenu {
/*this .CSS is inspired by http://www.javascriptkit.com/ */
font-family: "Comic Sans MS" , "Brush Script MT",serif, sans-serif, monospace, cursive, fantasy;
list-style:none;}


<style type="text/css">
#verticalmenu a:hover {
{
color: #aa1d1d; /* color when the click is over the main menu
margin:0;
text-transform: uppercase;
padding:0;
font-size: 10px; */
}


}


a:visited {
color:#00a5ea;
text-decoration: none
}


body {
.glossymenu, .glossymenu li ul{
margin: 0;
list-style-type: none;
color: #333;
margin: 0;
text-align: center;
padding: 0;
background-color: #FDFDFD;
width: 250px; /*WIDTH OF MAIN MENU ITEMS*/
background-image: url(img/back01.jpg);
border: 1px solid black;
background-position: top;
list-style:none;
background-repeat: repeat-x;
}
}


.glossymenu li{
position: relative;
}


 
.glossymenu li a{
/* 文字サイズ */
background: white url(http://openwetware.org/images/a/a7/Glossyback2.jpg) repeat-x bottom left;
#main{}
font: bold 17px Verdana, Helvetica, sans-serif;
#menuR,#menuL{
color: white;
font-size: 92%;
display: block;
width: auto;
padding: 10px 0;
padding-left: 10px;
text-decoration: none;
}
}


.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 200px; /*WIDTH OF SUB MENU ITEMS*/


left: 0;
top: 0;
display: none;
}


p, /* 文章の行間を指定 */
.glossymenu li ul li{
#contents li,
float: left;
dl,
dd
{
line-height: 160%;
}
}


.glossymenu li ul a{
width: 190px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */
}


 
.glossymenu .arrowdiv{
p{
position: absolute;
margin: 0px 0em 1.5em 3px;
right: 2px;
background: transparent url(http://openwetware.org/images/6/69/Arrow.gif) no-repeat center right;
}
}


 
.glossymenu li a:visited, .glossymenu li a:active{
ul,ol,dl{
color: white;
margin: 0em 1em 1em 2em;
}
}


 
.glossymenu li a:hover{
 
background-image: url(http://openwetware.org/images/5/50/Glossyback.jpg);
/* ========================================  .contentswrap 間隔・余白調整用 */
.contentswrap{
margin: 0px;
}
}


/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */


</style>


/* ========================================  #page ページ外枠 */
<script type="text/javascript">
#page {
width: 950px;
margin: 0px auto;
text-align: left;
}


/***********************************************


* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more


***********************************************/
var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.


/* ========================================  #header 画面上部 */
function createcssmenu(){
#header {
for (var i=0; i<menuids.length; i++){
height: 75px;
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
margin: 0px;
    for (var t=0; t<ultags.length; t++){
border-top: 1px solid #FFFFFF;
    var spanref=document.createElement("span")
color: #FFFFFF;
spanref.className="arrowdiv"
spanref.innerHTML="&nbsp;&nbsp;"
ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  }
}
}
if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)
</script>


<table border="0" align="center" vertical-align: middle;>
<tr>
  <td>
<ul id="verticalmenu" class="glossymenu">
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai">Home</a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Strategy">Strategy</a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Design">Design</a></li>
<li><a href="#">Experiments</a>
    <ul>
    <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Results/Electrophoresis">Electrophoresis</a>
    <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Results/Atomic_Force_Microscope">AFM</a>
    </ul>
</li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Computational_design/Simulation" >Simulation</a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Notes">Notes</a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Team">Team</a></li>
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Resources">Resources</a></li> 
<li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Sitemap">Sitemap</a></li> 


#sitename {
margin: 30px 0px 0px;
font-size: 24px;
font-weight: bold;
color: #666666;
}


</ul>
</td>
  <td>
<img src="http://openwetware.org/images/0/07/3D_sendai.png" width="650">
</td>
</tr>
</table>
</html>
<html>
<head>
<style type="text/css">
#content {padding-left: 10px;width: 970px;}}
h3 {font-decoration: none;}
h1.firstHeading {display: none; }
</style>
</head>
</html>
<big>


<html>
<style rel="stylesheet" type="text/css">
/*このスタイルシートの著作権はテンプレート工房TAKEにあります*/
/*ページのレイアウト用css*/


/* ========================================  #menu 上部メニュー */
body{
#menu {
  background:#F5F5DC; /*壁色と壁紙設定*/
border-right: 1px solid #CCCCCC;
  background-repeat:repeat;/*繰り返さない場合はno-repeatに変更*/
border-left: 1px solid #CCCCCC;
  font:"メイリオ", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  color: #333333;
  margin:0px;
  padding:0px;
}
}


 
#contents{    
 
      width:900px;
 
  margin:0 auto;  
ul.menu_f02{
  background-color: #FFFFFF ;/*コンテンツ内の背景(サイズをぴったりにすること)*/
height: 30px;
  background-repeat:repeat-y;  /*縦に繰り返し*/
margin: 0px;
  border:solid 1px #666666;/*サイトに枠を付ける設定,色の変更可*/
border-bottom: 5px solid #333333;
      position:relative;
background-color: #0B7A8E;
      font-size:80%;
}
}




 
/*ヘッダー部分の設定*/
 
#header{
ul.menu_f02 li{
  background-image:url(http://openwetware.org/images/c/c4/TeamSendai-logo3.png) ;/*ヘーダー*/
float: left;
  background-repeat:repeat-x;   /*縦に繰り返し*/
border-right: 1px solid #9AA7B6;
  background-position:top right;
display: block;
  height:140px; /*ヘーダーの高さ*/
}
}


 
#header p {
 
font-size: 26px;
 
        color:#333333;
ul.menu_f02 li a{
padding-top: 15px;
height: 20px;
padding-left: 20px;
width: 130px;
padding: 10px 0px 0px;
border-bottom: 5px solid #333333;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
display: block;
text-align: center;
background-color: #0B7A8E;
}
}




/*上部メニューボタンの設定*/
#navbar{
      background-color:#FFFFFF;
      width: 100%;
      height:40px;
      position:margine;
      top:100px;
      left:0px;
      border-top:solid 1px #FFFFFF;
      border-bottom:solid 1px #FFFFFF;
      }




ul.menu_f02 li a.nowthis{
#navbar ul{
border-bottom: 5px solid #FF6699!important;
          margin:0;
  padding:0;
  list-style-type:none;
  font-family:Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height:40px;
  letter-spacing:2px;
}
}


 
#navbar li{
 
      background-color:#000099;  /*上部メニューのボタンの背景*/
 
  float:left;
ul.menu_f02 li a:hover , ul.menu_f01 li a.nowthis{
  width:146px;  /*メニューボタンの幅*/
padding: 10px 0px 0px;
  text-align:center;
border-bottom: 5px solid #D3FBFE;
  padding:0;
color: #FFFFFF;
  border-right:solid 1px #ffffff;
background-color: #1DAFD3;
  }
#navbar ul a:hover{
  background-color:#0033cc; /*メニューボタンにカーソルが来た時に背景*/
  width:146px; /*メニューボタンの幅*/
}
}
     
#navbar a{
      color:#ffffFF;/*メニューボタンの文字の色*/
  display:block;
  }


#navbar a:hover{
  color:#999999; /*メニューの文字がカーソルが来た時、この色に変わる*/
  }








/* ======================================== #contents 画面中央部 #mainとサイドメニューの外枠 */
/*サイドメニューの設定*/
#contents{
#side{
padding: 30px 0px 20px;
background-color:#ddffff;
margin: 0px;
      width:220px;/*サイドの幅(変更するときはコンテンツ背景も変更すること)*/
  position:margin;
  top:600px;/*上からの位置*/
  left:12px;
}
}


#side h3 {
font-size: 90%;
border: double 3px #FFFFFF;
color:#ffffff;
text-align: center;
background-color:#999999;
      width:190px;
line-height: 30px;
margin-top: 10px;
margin-left: 5px;
margin-bottom: 5px;
}


#side h3 a {
      color:#ffffff;
  font-weight:normal;
}


/* ========================================  #main ページの本文 */
#side ul{
#main {
      font-size:100%;
float: left;
  line-height:220%; /*サイドの文字と文字の行間設定*/
width: 500px;
  background-color: #ddffff;
margin: 0px 0px 20px;
  margin:0px;
  padding-left:10px;
}
}


 
#side ul a:hover {
 
      width:180px;
#main h1 {
background-color: #99ffff; /*サイドのカーソルオーバー時の背景色*/
padding: 0px;
color: #999999; /*サイドのカーソルオーバー時の文字色*/
margin: 0px;
color: #0B7A8E;
}
}


 
#side ul{
 
    list-style-type:none;
#main h2 {
padding-left:2px;
clear: both;
padding: 3px 0px 3px 5px;
margin: 2em 0px 1em;
border-left: 10px solid #F4CC0B;
font-size: 120%;
background-color: #F6F6F6;
}
}


 
#side li{
 
padding-left:15px; /*文字の左端からの位置*/
 
 
#main h3 {
margin: 0px 0px 0.5em 3px;
font-size: 100%;
color: #336699;
}
}


 
#side li a{
/* ========================================  menuL 左サイドメニュー */
    color:#333333;/*サイドの文字色*/
#menuL {
    width:180px;
float: left;
    display:block;
width: 200px;
margin: 0px 20px 20px 0px;
background-color: #F6F6F6;
}
}


#menuL p{
#side .ad_list li{
margin-right: 1em;
    background-image:none;
margin-left: 1em;
padding-left:0;
}
}




/* ========================================  menuL 右サイドメニュー */
#menuR {
float: right;
width: 200px;
margin: 0px 0px 20px;
background-color: #F6F6F6;
}




#menuR p{
/*右側メイン部分の設定*/
margin-right: 1em;
#main{
margin-left: 1em;
      width:630px;
      padding-top:15px;
      margin-left:240px;
}
}




/* ========================================  #underNavi 画面下部サブナビゲーション */
#underNavi{
clear: both;
margin: 0px;
border-top: 1px solid #999999;
text-align: center;
}




 
/*下部のフッター部分の設定*/
/* ========================================  #footer 画面下部 */
address{
#footer {
  font-size:80%;
padding: 10px 0px;
  font-style:normal;
border-top: 5px solid #CCCCCC;
  text-align:center;
color: #FFFFFF;
  padding-top:5px;
text-align: center;
background-color: #0B7A8E;
}
}


address{
      background-color:#000066;
      color:#ffffff;
          width:882px;
  padding-bottom:10px;
  border:none;
  }
address a{
      color:#ff9999;
  }






/* ========================================  #templatelink 画面下部:著作リンク */
/*文字の設定*/
#templatelink {
h1{
padding: 3px 0px;
  font-size:60%;
margin: 0px 0px 5px;
  letter-spacing: 2px;
font-size: 14px;
  padding-left:10px;
text-align: right;
  margin: 0px;
}
}


h1 a{
      color:#FFFFFF;
  font-weight:normal;
}




#templatelink a{
h2{
color: #336699;
      font-size:140%;
text-decoration: none;
  border-left: 10px solid #000066;
          border-bottom:solid 1px #000099;/*文字の下に線を入れる設定*/
          width:900px;
  padding-left: 5px;
  color:#333333;  
  margin-top: 15px;
  margin-bottom: 5px;
}
}


h3{
      font-size:120%;
border: solid 1px #111111;
        color:#ffffff;
background-color:#4682B4 ;
line-height: 30px;
  padding-left:10px;
  margin-top: 10px;
  margin-bottom: 1px;
}


p{
      font-size:90%;/*全体の文字サイズ*/
  line-height:150%;/*全体で使う、文字と文字の行間*/
          margin-left:5px;
}


/* ========================================  そのほか個別設定 */
p img{
.title{
      float:left;
padding: 0px 0px 0px 10px;
          margin-top:5px; /*写真の左にスペースを空ける*/
margin: 0px 0px 20px;
          margin-left:5px; /*写真の左にスペースを空ける*/
border-left: 30px solid #F4CC0B;
  margin-right:10px;  /:写真と文字の間隔*/
}
}




.label{
/*リンク文字の設定*/
padding: 7px 5px 5px 10px;
a{
margin: 0px 0px 10px;
    color:#000099;
border-left: 10px solid #F4CC0B;
      text-decoration:none;
font-weight: bold;
}
color: #FFFFFF;
a:hover {
background-color: #0B7A8E;
color: #FF0000;/*リンクの文字の上にマウスが来た時この色に変わる*/
text-decoration: none;
}
}


#purple{
      font-size:120%;
border: solid 1px #111111;
        color:#ffffff;
background-color:#9370DB;
line-height: 40px;
  padding-left:10px;
  margin-top: 10px;
  margin-bottom: 1px;
}


 
h5{
.subh {
      font-size:120%;
padding: 5px 0px 0px 3px;
border: solid 1px #111111;
margin: 0px;
        color:#ffffff;
border-top: 1px dashed #999999;
background-color:#FFA500;
font-weight: bold;
line-height: 30px;
color: #4A8854;
  padding-left:10px;
  margin-top: 10px;
  margin-bottom: 1px;
}
}


 
h6{
.photo {
      font-size:120%;
margin: 0px 0px 20px;
border: solid 1px #111111;
        color:#ffffff;
background-color:#006400;
line-height: 30px;
  padding-left:10px;
  margin-top: 10px;
  margin-bottom: 1px;
}
}


 
#red{
.toInfo {
      font-size:120%;
margin: 0px 0px 1em;
border: solid 1px #111111;
text-align: right;
        color:#ffffff;
list-style-type: none;
background-color:#DC143C;
line-height: 40px;
  padding-left:10px;
  margin-top: 10px;
  margin-bottom: 1px;
}
}


 
#blue{
.boxL {
      font-size:120%;
float: left;
border: solid 1px #111111;
height: 160px;
        color:#ffffff;
width: 245px;
background-color:#191970;
margin: 0px 0px 15px;
line-height: 40px;
font-size: 92%;
  padding-left:10px;
background-color: #EBF0F3;
  margin-top: 10px;
}
  margin-bottom: 1px;
.boxR {
float: right;
height: 160px;
width: 245px;
margin: 0px 0px 15px;
font-size: 92%;
background-color: #EBF0F3;
}
}


.boxL p, .boxR p{
margin: 10px !important;
}
</style>
</style>
</html>
</html>

Revision as of 03:03, 7 August 2012

<html>

<style rel="stylesheet" type="text/css">

      .clear {clear:both;}
 #verticalmenu {

/*this .CSS is inspired by http://www.javascriptkit.com/ */ font-family: "Comic Sans MS" , "Brush Script MT",serif, sans-serif, monospace, cursive, fantasy; list-style:none;}

  1. verticalmenu a:hover {

color: #aa1d1d; /* color when the click is over the main menu text-transform: uppercase; font-size: 10px; */


}

a:visited { color:#00a5ea; text-decoration: none }

.glossymenu, .glossymenu li ul{ list-style-type: none; margin: 0; padding: 0; width: 250px; /*WIDTH OF MAIN MENU ITEMS*/ border: 1px solid black; list-style:none; }

.glossymenu li{ position: relative; }

.glossymenu li a{ background: white url(http://openwetware.org/images/a/a7/Glossyback2.jpg) repeat-x bottom left; font: bold 17px Verdana, Helvetica, sans-serif; color: white; display: block; width: auto; padding: 10px 0; padding-left: 10px; text-decoration: none; }

.glossymenu li ul{ /*SUB MENU STYLE*/ position: absolute; width: 200px; /*WIDTH OF SUB MENU ITEMS*/

left: 0; top: 0; display: none; }

.glossymenu li ul li{ float: left; }

.glossymenu li ul a{ width: 190px; /*WIDTH OF SUB MENU ITEMS - 10px padding-left for A elements */ }

.glossymenu .arrowdiv{ position: absolute; right: 2px; background: transparent url(http://openwetware.org/images/6/69/Arrow.gif) no-repeat center right; }

.glossymenu li a:visited, .glossymenu li a:active{ color: white; }

.glossymenu li a:hover{ background-image: url(http://openwetware.org/images/5/50/Glossyback.jpg); }

/* Holly Hack for IE \*/

  • html .glossymenu li { float: left; height: 1%; }
  • html .glossymenu li a { height: 1%; }

/* End */

</style>

<script type="text/javascript">

/***********************************************

  • CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
  • Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
  • This notice must stay intact for usage
  • Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
                                                                                              • /

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){ for (var i=0; i<menuids.length; i++){

 var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
   for (var t=0; t<ultags.length; t++){
   var spanref=document.createElement("span")

spanref.className="arrowdiv" spanref.innerHTML="&nbsp;&nbsp;" ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)

   ultags[t].parentNode.onmouseover=function(){
   this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
   this.getElementsByTagName("ul")[0].style.display="block"
   }
   ultags[t].parentNode.onmouseout=function(){
   this.getElementsByTagName("ul")[0].style.display="none"
   }
   }
 }

} if (window.addEventListener) window.addEventListener("load", createcssmenu, false) else if (window.attachEvent) window.attachEvent("onload", createcssmenu) </script>

<table border="0" align="center" vertical-align: middle;> <tr>

 <td>

<ul id="verticalmenu" class="glossymenu"> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai">Home</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Strategy">Strategy</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Design">Design</a></li> <li><a href="#">Experiments</a>

   <ul>
   <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Results/Electrophoresis">Electrophoresis</a> 
   <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Results/Atomic_Force_Microscope">AFM</a> 
   </ul>

</li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Computational_design/Simulation" >Simulation</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Notes">Notes</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Team">Team</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Resources">Resources</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2011/TeamJapan/Sendai/Sitemap">Sitemap</a></li>


</ul> </td>

 <td>

<img src="http://openwetware.org/images/0/07/3D_sendai.png" width="650"> </td> </tr> </table> </html> <html> <head> <style type="text/css">

  1. content {padding-left: 10px;width: 970px;}}

h3 {font-decoration: none;} h1.firstHeading {display: none; } </style> </head> </html>

<html> <style rel="stylesheet" type="text/css"> /*このスタイルシートの著作権はテンプレート工房TAKEにあります*/ /*ページのレイアウト用css*/

body{ background:#F5F5DC; /*壁色と壁紙設定*/ background-repeat:repeat;/*繰り返さない場合はno-repeatに変更*/ font:"メイリオ", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #333333; margin:0px; padding:0px; }

  1. contents{
     width:900px;

margin:0 auto; background-color: #FFFFFF ;/*コンテンツ内の背景(サイズをぴったりにすること)*/ background-repeat:repeat-y; /*縦に繰り返し*/ border:solid 1px #666666;/*サイトに枠を付ける設定,色の変更可*/

     position:relative;
     font-size:80%;

}


/*ヘッダー部分の設定*/

  1. header{

background-image:url(http://openwetware.org/images/c/c4/TeamSendai-logo3.png) ;/*ヘーダー*/ background-repeat:repeat-x; /*縦に繰り返し*/ background-position:top right; height:140px; /*ヘーダーの高さ*/ }

  1. header p {

font-size: 26px;

       color:#333333;

padding-top: 15px; padding-left: 20px; }


/*上部メニューボタンの設定*/

  1. navbar{
     background-color:#FFFFFF; 
     width: 100%;
     height:40px;
     position:margine;
     top:100px;
     left:0px;
     border-top:solid 1px #FFFFFF;
     border-bottom:solid 1px #FFFFFF; 
     }


  1. navbar ul{
         margin:0;

padding:0; list-style-type:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px; line-height:40px; letter-spacing:2px; }

  1. navbar li{
     background-color:#000099;  /*上部メニューのボタンの背景*/

float:left; width:146px; /*メニューボタンの幅*/ text-align:center; padding:0; border-right:solid 1px #ffffff; }

  1. navbar ul a:hover{
  	background-color:#0033cc;	/*メニューボタンにカーソルが来た時に背景*/

width:146px; /*メニューボタンの幅*/ }

  1. navbar a{
     color:#ffffFF;/*メニューボタンの文字の色*/

display:block; }

  1. navbar a:hover{
  color:#999999; /*メニューの文字がカーソルが来た時、この色に変わる*/
  }



/*サイドメニューの設定*/

  1. side{

background-color:#ddffff;

     width:220px;/*サイドの幅(変更するときはコンテンツ背景も変更すること)*/

position:margin; top:600px;/*上からの位置*/ left:12px; }

  1. side h3 {

font-size: 90%; border: double 3px #FFFFFF; color:#ffffff; text-align: center; background-color:#999999;

     width:190px;

line-height: 30px; margin-top: 10px; margin-left: 5px; margin-bottom: 5px; }

  1. side h3 a {
     color:#ffffff;

font-weight:normal; }

  1. side ul{
     font-size:100%;

line-height:220%; /*サイドの文字と文字の行間設定*/ background-color: #ddffff; margin:0px; padding-left:10px; }

  1. side ul a:hover {
     width:180px;

background-color: #99ffff; /*サイドのカーソルオーバー時の背景色*/ color: #999999; /*サイドのカーソルオーバー時の文字色*/ }

  1. side ul{
    list-style-type:none;

padding-left:2px; }

  1. side li{

padding-left:15px; /*文字の左端からの位置*/ }

  1. side li a{
    color:#333333;/*サイドの文字色*/
    width:180px;
    display:block;

}

  1. side .ad_list li{
    background-image:none;

padding-left:0; }



/*右側メイン部分の設定*/

  1. main{
     width:630px;
     padding-top:15px;
     margin-left:240px;

}



/*下部のフッター部分の設定*/ address{ font-size:80%; font-style:normal; text-align:center; padding-top:5px; }

address{

     background-color:#000066;
     color:#ffffff;
         width:882px;

padding-bottom:10px; border:none; } address a{

     color:#ff9999;

}


/*文字の設定*/ h1{ font-size:60%; letter-spacing: 2px; padding-left:10px; margin: 0px; }

h1 a{

     color:#FFFFFF;

font-weight:normal; }


h2{

     font-size:140%;

border-left: 10px solid #000066;

         border-bottom:solid 1px #000099;/*文字の下に線を入れる設定*/
         width:900px;

padding-left: 5px; color:#333333; margin-top: 15px; margin-bottom: 5px; }

h3{

     font-size:120%;

border: solid 1px #111111;

       color:#ffffff;

background-color:#4682B4 ; line-height: 30px; padding-left:10px; margin-top: 10px; margin-bottom: 1px; }

p{

     font-size:90%;/*全体の文字サイズ*/

line-height:150%;/*全体で使う、文字と文字の行間*/

         margin-left:5px;

}

p img{

     float:left;
         margin-top:5px;  /*写真の左にスペースを空ける*/
         margin-left:5px;  /*写真の左にスペースを空ける*/

margin-right:10px; /:写真と文字の間隔*/ }


/*リンク文字の設定*/ a{

    color:#000099;
     text-decoration:none;

} a:hover { color: #FF0000;/*リンクの文字の上にマウスが来た時この色に変わる*/ text-decoration: none; }

  1. purple{
     font-size:120%;

border: solid 1px #111111;

       color:#ffffff;

background-color:#9370DB; line-height: 40px; padding-left:10px; margin-top: 10px; margin-bottom: 1px; }

h5{

     font-size:120%;

border: solid 1px #111111;

       color:#ffffff;

background-color:#FFA500; line-height: 30px; padding-left:10px; margin-top: 10px; margin-bottom: 1px; }

h6{

     font-size:120%;

border: solid 1px #111111;

       color:#ffffff;

background-color:#006400; line-height: 30px; padding-left:10px; margin-top: 10px; margin-bottom: 1px; }

  1. red{
     font-size:120%;

border: solid 1px #111111;

       color:#ffffff;

background-color:#DC143C; line-height: 40px; padding-left:10px; margin-top: 10px; margin-bottom: 1px; }

  1. blue{
     font-size:120%;

border: solid 1px #111111;

       color:#ffffff;

background-color:#191970; line-height: 40px; padding-left:10px; margin-top: 10px; margin-bottom: 1px; }

</style> </html>