@charset "utf-8";

/* --- background, text --- */
body {
background-color: rgba(22,94,131,2.0); 
color: #000000;
background: url(img/bg2.jpg); 
background-size: cover; 
}

article {
max-width: 800px;
padding: 20px;
margin: 0 auto;
}

#container {
width: 1040px;
margin: 0 auto;
background-color: #ffffff;
border: 1px solid #c0c6c9;
border-radius: 15px;
margin-top: 10px;
margin-bottom: 10px;
box-shadow: inset 0 0 5px 5px #c0c6c9;
}

/* --- ヘッダ --- */
#header {
width: 1000px;
margin: 0 auto;
background-color: #ffe080;
background: url(img/head.jpg); 
background-size: cover;
color: white;
}

#header h1 {
font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "Yu Gothic" , "YuGothic" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , Meiryo ,"MS PGothic" , sans-serif;
font-size: 30px;
background: rgba(0,0,0,0.5);
background: -moz-linear-gradient(left, rgba(22,94,131,2.0), rgba(0,0,0,0));
background: -webkit-linear-gradient(left,rgba(22,94,131,2.0),rgba(0,0,0,0));
padding: 100px 20px 20px 40px;
}

#header img {
background: white;
}

/* --- ナビゲーション --- */
#nav {
float: left;
width: 200px;
}

#nav ul li {
color: #404040;
border-right: solid 2px #dadada;
border-bottom: solid 2px #dadada;
background: rgba(22,94,131,1.0); 
margin-bottom: 3px;
list-style-type: none!important;
display: block;
font-size: 13px;
}

#nav a:link {
color: white;
text-decoration: none;
display: block;
width: 150px;
padding: 10px 10px 10px 10px;
}
#nav a:visited {
color: #ffea00;
text-decoration: none;
display: block;
}
#nav li:hover {
background: #918754;
color: #ebd842;
text-decoration: none;
bottom: 10px;
display: block;
-moz-transition-property: all;
-moz-transition-duration: 0.1s;
-moz-transition-timing-function: linear;
-webkit-transition: all 0.1s linear 0;
}

/* --- メインカラム --- */
#content {
float: left;
width: 780px;
}

#content a:link {
color: #0000ff; 
text-decoration: none;
}

#content a:visited {
color: #800080;
}

#content a:hover { 
color: #ff0000; 
}

#content a:active { 
color: #ff0000; 
}

#content h1 {
font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "Yu Gothic" , "YuGothic" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , Meiryo ,"MS PGothic" , sans-serif;
font-size:  25px;
padding: 0px 0px 0px 50px;
color: rgb(22,94,131); 
}

#content h2 {
font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "Yu Gothic" , "YuGothic" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , Meiryo ,"MS PGothic" , sans-serif;
font-size:  22px;
padding: 0px 0px 0px 50px;
color: rgb(22,94,131); 
}

#content h3 {
font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "Yu Gothic" , "YuGothic" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , Meiryo ,"MS PGothic" , sans-serif;
font-size:  19px;
padding: 0px 0px 0px 50px;
color: rgb(22,94,131); 
}

#content h4 {
font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "Yu Gothic" , "YuGothic" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , Meiryo ,"MS PGothic" , sans-serif;
font-size:  17px;
padding: 0px 0px 0px 50px;
color: rgb(22,94,131); 
}

#content p, ul {
font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "Yu Gothic" , "YuGothic" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , Meiryo ,"MS PGothic" , sans-serif;
font-size:  15px; /* Main font-size */
color: #2d2d2d; /* Main font-color */
padding: 0px 0px 0px 50px;
}

#content ul {
padding: 0px 0px 0px 70px;
}

#content table { 
font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "Yu Gothic" , "YuGothic" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , Meiryo ,"MS PGothic" , sans-serif;
font-size:  15px; /* Main font-size */
color: #2d2d2d; /* Main font-color */
padding: 0px 0px 20px 50px;
}

#content form {
padding: 10px 0px 50px 50px;
}


/* --- フッタ --- */
#footer {
width: 1000px;
margin: 0 auto;
clear: left;
background-color: #ffe080;
background: url(img/head.jpg); 
background-size: cover;
font-family: 'Kite One', sans-serif;
color: white;
}

#footer p {
background: rgba(0,0,0,0.5); 
background: -moz-linear-gradient(left, rgba(22,94,131,1.0), rgba(0,0,0,0));
background: -webkit-linear-gradient(left,rgba(22,94,131,1.0),rgba(0,0,0,0));
padding: 20px;}

#footer img {
background: white;
}

/* --- スライドショー --- */

#slideshow {
position: relative; 
width:  750px;
height: 220px;
}

#slideshow div {
position: absolute; 
top: 20px;
left:40px;
z-index: 8;
opacity: 0.0;
margin: 0;
background-color: white;
height: 200px;
}

#slideshow div.active {
z-index: 10;
opacity: 1.0;
}

#slideshow div.last-active {
z-index: 9;
}

#slideshow div img {
width:  750px;
height: 220px;
display: inline-block;
border: 0;
}

/* --- プログラムのテーブル --- */

table.sprogram { 
width: 100%; border: 1px ; 
border-collapse: separate; 
margin-top: 10px; 
margin-bottom: 0px;
}

.sprogram td { 
padding: 7px;
vertical-align: middle;
text-align: center;
border-bottom: #999 1px solid; 
}

.sprogram .coffee {
background-color: rgba(141,100,73,0.5)
}

.sprogram .talk { 
background: #bbc8e6;
}

.sprogram .post { 
background: #e8d3d1;
}

.sprogram .brk { 
border-bottom: 1px solid; 
}

.sprogram .brkk { 
border-bottom: 0px solid; 
}

.sprogram .free {
background-color: #d8e698;
}

.sprogram .time { 
border-bottom: 0px solid;
width: 1%; 
padding: 0px; 
}

.sprogram .fl { 
border-bottom: 0px solid; 
text-align: left;
}

.sprogram .sympo { 
background: #dbd0e6;
}

.sprogram .lecture  { 
background: #dbd0e6;
}

.sprogram .date     { 
border: 1px solid #000000; 
width: 10%; padding: 7px;
background: #c0c6c9;
background: -moz-linear-gradient(bottom, rgba(192,198,201,0.7), rgba(192,198,201,0.1));
background: -webkit-linear-gradient(bottom,rgba(192,198,201,0.7),rgba(192,198,201,0.1));
		    }
table.poster {
width: 95%; 
margin-left:20px; 
margin-bottom:40px;
}

.poster td { 
text-align: left; 
vertical-align: top; 
padding:10px;
}

.poster .title { 
font-style: normal; 
margin-bottom: 10px;
}

