/* STYLE CLEAR
---------------------------------------------------- */
body,div,
dl,dt,dd,ul,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,blockquote,th,td,table,img { 
   margin:0; 
   padding:0; 
   border: 0;
   font-size: small;
	line-height: 18px;
}
ul { list-style-type: none; }

/* BASE STRUCTURE
---------------------------------------------------- */
body {
    padding-top: 8px;
    height: 100%;
    position: relative;
    background: #ECE9E9 url(../img/common/bg.gif) repeat-x 0 0;
    }

#wrapper{
    background: none;
	width: 708px;
	margin: 0 auto;
	}

#header{
	text-align: left;
	height: 127px;
	padding: 10px 22px 0 24px;
	background: url(../img/common/head.gif) no-repeat;
	}
#pagebody{
	background: url(../img/common/main_bg.gif) repeat-y;
	height: auto;
}
#navigator{
	height: 34px;
	padding: 10px 0 0 0;
}
#mainphoto{
	padding: 10px 24px 0 24px;
	height: 200px;
}
#footer{
	height: 27px;
	padding: 5px 24px;
	text-align: right;
	color: #fff;
	background: url(../img/common/foot.gif) no-repeat 0 0;

}

/* headnavi
---------------------------------------------------- */
#headnavi a:link,
#headnavi a:visited,
#headnavi a:hover{ color: #fff; text-decoration: none;}

/* navi
---------------------------------------------------- */
#navi {
	margin: 0 0 0 24px;
	padding: 0;
	width: 664px;
	height: 34px;
}
#navi li, #navi a{
	display: block;
	width: 80px;
	height: 34px;
	text-decoration: none;
}
#navi li{
	float: left;
	margin: 0 3px 0 0;
	text-indent: -9999px;
}
#navi a{background: url(../img/common/menu.gif) no-repeat;}
#home a{background-position: 0 0;}
#class a{background-position: -83px 0;}
#course a{background-position: -166px 0;}
#price a{background-position: -249px 0;}
#voice a{background-position: -332px 0;}
#teacher a{background-position: -415px 0;}
#access a{background-position: -498px 0;}
#niko a{background-position: -581px 0;}

#home a:hover{background-position: 0 -34px;}
#class a:hover{background-position: -83px -34px;}
#course a:hover{background-position: -166px -34px;}
#price a:hover{background-position: -249px -34px;}
#voice a:hover{background-position: -332px -34px;}
#teacher a:hover{background-position: -415px -34px;}
#access a:hover{background-position: -498px -34px;}
#niko a:hover{background-position: -581px -34px;}

/* link a
---------------------------------------------------- */
.linkbox a:link,
.linkbox a:visited{color: #333;	text-decoration: none;}
.linkbox a:hover{color: #30A6F2;}

/* footnavi
---------------------------------------------------- */
.footnavi{
	margin: 10px 24px 0 24px;
	padding: 5px 0;
	width: 660px;
	height: 21px;
	text-align: center;
	color: #333333;
	border-top: 1px dotted #666666;
}
.footnavi a:link,
.footnavi a:visited{ color: #333; text-decoration: none;}
.footnavi a:hover{ color: #30A6F2; text-decoration: none;}


/* head
---------------------------------------------------- */
h1{
	float: left;
	width: 400px;
	height: 20px;
	color: #fff;
}

#headnavi{
	float: right;
	color: #fff;
}

#logo{
	clear: both;
	height: 91px;
	padding: 16px 0 0 0; 
	font-weight: normal;
	text-align: left;
}

/* main
---------------------------------------------------- */
.main{
	margin: 7px 24px 0 24px;
}
.three{
	float: left;
	width: 272px;
	height: 285px;
}
.three dt{
	height: 24px;
}
.three dd{
	padding: 10px;
	height: 228px;
	background: #fff;
	border: 1px solid #30A6F2;
	border-top: 1px solid #fff;
}
.three dd p{
	background:url(../img/main/mark.gif) no-repeat;
	margin: 0 0 10px 0;
	padding: 0 0 0 25px;
}

.main dl.new{
	padding-bottom: 10px;
	width: 660px;
}
.main dl.new2{
	margin-bottom: 10px;
	width: 660px;
}
.new dt, .new2 dt{
	height: 23px;
}
.new dd{
	border: 1px solid #30A6F2;
	border-top: 1px solid #fff;
}
.new2 dd{
	border: 1px solid #30A6F2;
	border-top: 1px solid #fff;
	padding: 10px;
}
.new2 dd li{
	padding: 0 0 5px 23px;
	font-size: 11.5px;
	background: url(../img/main/mark.gif) no-repeat 0 -1px;
}
.bana{
	clear : both;
	margin: 0 0 0 24px;
	height: auto;
}
.bana img{
	margin: 0 15px 0 0;
}

/* class .course .map ,voice .niko
---------------------------------------------------- */
.class{
	margin: 10px 0 0 24px;
}
.class h2,.class h3{
	padding: 0 0 0 30px;
	width: 651px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	font-size: 15px;
	background: url(../img/common/fram.gif) no-repeat;

}
.class p{
	width:639px;
	margin: 5px 0 20px 10px;
	color: #333333;
}

.table01 {
	margin: 10px 0 20px 1px;
}
.table01 th{
	margin: 5px 0 10px 0;
	padding: 5px 5px 5px 15px;
	text-align: left;
	color: #FFFFFF;
	background: #30A6F3;
	border-bottom: 3px solid #fff;
}
.table01 td{
	margin: 5px 0 10px 0;
	padding: 5px 5px 5px 15px;
	text-align: left;
	background: #E1F4FE;
	vertical-align: text-top;
	border-bottom: 1px solid #fff;
}
.table01 .color{
	background: #D4EFFD;
}
.map{
	width: 640px;
	height: auto;
	margin: 10px 0 0 24px;
	padding: 10px;
	background: #BBBABA;
}
.voicephoto{
	margin: 0 0 0 1px;
	width: 670px;
	height: auto;
}
.voicephoto li{
	float: left;
	margin: 10px 9px 0 0;
	list-style:none;
}
.niko{
	margin: 10px 0 0 0;
	padding: 5px;
	width: 648px;
	height: auto;
	border: 1px dotted #999999;
}
.niko dt{
	height: auto;
	padding: 5px 5px 5px 10px;
	font-weight: bold;
	color: #FFFFFF;
	background: #5BC7FF;
}
.niko dd{
	margin: 0;
	padding: 0;
	height: auto;
}
.niko .nikophoto{
	float: left;
	width: auto;
	margin: 5px 5px 5px 0;
	background:#000066
}
.niko .text{
	margin: 0;
	padding: 5px;
	width: auto;
	height: auto;
	line-height: 18px;
	color: #333;
}
.linkbox{
	float: left;
	margin: 10px 6px 0 1px;
	padding: 5px;
	width: 313px;
	height: auto;
	border: 1px dashed #666666;
}
.linkbox dt{
	margin: 0 0 5px 0;
	padding: 5px;
	width: 303px;
	height: auto;
	line-height: 18px;
	color: #333;
	background:#F0ECE3;
}
.linkbox dd{
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	line-height: 18px;
	color: #333;
}
.linkbox img{
	margin: 0;
	padding: 0;
	width: 150px;
	border: 5px solid #E7E2D6;
}
.linkbox a:hover img{
	margin: 0;
	padding: 0;
	border: 5px solid #30A6F2;
}
.linkbox dd .text{
	float: right;
	margin: 0;
	padding: 0;
	width: 148px;
	height: auto;
	line-height: 18px;
	color: #333;
}
#footer a:link, #footer a:visited, #footer a:hover,{
	color: #FFFFFF;
	text-decoration: none;	
}
.clear{
	clear: both;
}


/* firefox
---------------------------------------------------- */
#headnavi:after, #navigator:after, #pagebody:after, .main:after, .bana:after, .voicephoto:after, .linkbox img:after, .niko:after{
	content : "";
	display : block;
	height : 0;
	clear : both;
}