@charset "utf-8";

@import url("../../style/base.css");

@import url("structure.css");

/*====================================================
------------------------------------------------------
	 magazine.css
------------------------------------------------------
====================================================*/

/*================= contents menu ============

	1: pageImg
	
	2: common
	   - h2
		- h3
		- text
			- .w90Br
			- .w90
			- .w100Br
			- .w100Br
			- .s85Br
			- .s85
			
			
	3: TheSaltOfTheEarth ID:theE
	
	[4: ToFlappingWorld  ID:flapping --- blog]
	
	[5: ClassCommunication --- blog]
	
	[6: OpenCampus  ID:openC---other css]
	
	7: ClubActivity  ID:ClubA
	
	8: TrialExam ID:trialEx
	
============================================== */

/*====================================================
	1: pageImg
====================================================*/
#clubA #areaB { background: url(../ClubActivity/img/pageImg.jpg);}

#pageImg { width: 175px; height: 295px; background: no-repeat; text-indent: -9876em; margin: 0;}

#flapping #pageImg { background: url(../ToFlappingWorld/img/pageImg.jpg);}
#class #pageImg { background: url(../ClassCommunication/img/pageImg.jpg);}
#openC #pageImg { background: url(../OpenCampus/img/pageImg.jpg);}
#trialEx #pageImg { background: url(../TrialExam/img/pageImg.jpg);}


/*====================================================
	2: common
====================================================*/
h2 { width: 545px; height: 35px; text-indent: -9876em; margin: 0 0 15px 0; background: no-repeat;} 
h3 { width: 545px; height: 30px; text-indent: -9876em; margin: 0 0 10px 0;background: no-repeat;} 


ul.backN { display: block; width: 175px; height: 295px; list-style-type: none; margin: 10px 0 0 0; padding: 0; line-height: 120%;}
ul.backN li a { width: 150px; display: block; border-bottom: 1px dotted #363582;  background: transparent; vertical-align: top; margin: 0 auto; padding: .2em 0;}
ul.backN li a:hover { background: #eaeaea;}
ul.backN li.title { width: 150px; background: #247442; color: #fff; text-align: center; margin: 0 auto; line-height: 170%;}



/*
  -text
====================================================*/
/*
	- w = width
	- s = font size
	- Br = Brown Color Text #301600
	- CR = Color Red
*/	

p { padding: 0 0 .8em 0;}
.w90 { width: 90%;}
.s85 { font-size: .765em;}
.s85R { font-size: .765em; text-align: right;}
.w100R { width: 100%; text-align: right;}
.w100s85R { width: 100%; text-align: right; font-size: .765em;  }
.CR { color: red;}
.r {text-align: right;}


/*====================================================
	3: TheSaltOfTheEarth ID:theE
====================================================*/
#theE ul.backN li a:link { color: #6D2C32; text-decoration: none;}
#theE ul.backN li a:visited { color: #727172; text-decoration: none;}
#theE ul.backN li a:hover { color: #247442; text-decoration: none;}
#theE ul.backN li a:active { color: #247442; text-decoration: none;}

#theE ul.pastN { background: none; margin-left: 2em;}
#theE ul.pastN li  { background: url(../c_img/pmTriangleBr.gif) no-repeat 0 .2em; padding-left: 1.2em; padding-bottom: .8em;}
#theE ul.pastN li a:link { color: #6D2C32; text-decoration: none;}
#theE ul.pastN li a:visited { color: #727172; text-decoration: none;}
#theE ul.pastN li a:hover { color: #247442; text-decoration: none;}
#theE ul.pastN li a:active { color: #247442; text-decoration: none;}

#theE h2.pageImg { width: 545px; height: 210px; background: url(../TheSaltOfTheEarth08/img/pageImg.jpg) no-repeat; text-indent: -9876em; margin-bottom: 0;} 
#theE h3 { width: 545px; text-indent: 0; margin: 10px 0 0 0; font-size: 180%; font-weight: bold; line-height: 140%; border-left: 10px solid #6D2C32;}
#theE h3 span { font-size: 50%; padding: 0 0 0 1em; font-weight: normal;}
#theE .restMark { width: 100%; background: url(../TheSaltOfTheEarth08/img/asteriskGl.gif) 50% 50% no-repeat; text-indent: -9876em;}

#theE .name { width: 100%; text-align: right; padding: 0 0 1em 0;}

/*====================================================
	4: ToFlappingWorld  ID:flapping
====================================================*/



/*====================================================
	5: ClassCommunication
====================================================*/



/*====================================================
	7: ClubActivity  ID:ClubA	
====================================================*/

#clubA .h2_01 { background: url(../ClubActivity/img/j07_h2_01.gif) right center no-repeat;}
#clubA .h3_01 { width: 545px; height: 55px; background: url(../ClubActivity/img/j07_h3_01.gif) 0 0 no-repeat;}



#clubA .blueBoxTop { width: 545px; background: url(../ClubActivity/img/j07_blueBoxTop.gif) 0 0 no-repeat; padding: 15px 0 0 0; margin: 0;}
#clubA .blueBoxBottom { width: 545px; background: url(../ClubActivity/img/j07_blueBoxBottom.gif) 0 100% no-repeat; padding: 0 0 10px 0; margin: 20px 0 0 0;}
#clubA .blueBoxTop dl { display: block; width: 515px; color: #fff; margin: 0 auto 15px auto;}
#clubA .blueBoxTop dl dt { width: 90px; float: left; border: 1px solid #fff;font-size: 150%; font-weight: bold; text-align: center; padding: .7em 0 .8em 0; letter-spacing: -.1em;}
#clubA .blueBoxTop dl dd { display: block; width: 400px; float: right; border: #ccc}	  
#clubA .blueBoxTop dl dd ul li { display: inline; padding-right: .8em;}
#clubA .blueBoxTop dl dd ul li a {color: #fff; }
#clubA .blueBoxTop dl dt dd ul { }

#clubA .note { text-align: right; margin: 15px 0 60px 0;}

#clubA .comment { width: 545px; height: 850px; background: url(../ClubActivity/img/j07_comment.jpg) 0 0 no-repeat; position: relative;}
#clubA .comment dt { width: 300px; height: 20px; text-indent: -9876em; margin: 0 0 5px 0;}
#clubA .comment .soccer dt { background: url(../ClubActivity/img/j07_dt01.gif) 0 0 no-repeat;}
#clubA .comment .brass dt { background: url(../ClubActivity/img/j07_dt02.gif) 0 0 no-repeat;}
#clubA .comment .soccer { width: 300px; height: 400px; position: absolute; top: 30px; left: 220px;}
#clubA .comment .brass { width: 360px; height: 400px; position: absolute; top: 550px; left: 0;}









/*====================================================
	8: TrialExam ID:trialEx
====================================================*/

#trialEx h2.add { width: 539px; height: 30px; border: 3px solid #c3dfcd; background: #c3dfcd; line-height: 30px; text-indent: 0; text-align: center; margin: 20px 0;}
#trialEx h2 { height: 200px; background: url(/jr-high/TrialExam/img/h2.jpg) 0 0 no-repeat;}
#trialEx h3 { width: 525px; height: 50px; margin: 0 0 10px auto;}
#trialEx h3.h3_00 { background: url(/jr-high/TrialExam/img/oMj06_h3_00.gif) 0 0 no-repeat;}
#trialEx h3.h3_01 { background: url(/jr-high/TrialExam/img/oMj06_h3_01.gif) 0 0 no-repeat;}

#trialEx .bgGreen { width: 520px; background-color: #ebf6f5; border: 1px solid #91d3d3; margin: 0 0 15px auto}
#trialEx .bgGreen dl { width: 518px; margin: 0 auto; padding: 8px 0; zoom: 1;}
#trialEx .bgGreen dl.white { background-color: #fff;}
#trialEx .bgGreen dl:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}

#trialEx .bgGreen dl dt, #trialEx .bgGreen dl.white dt { width: 25%; float: left; text-align: right;}
#trialEx .bgGreen dl dd, #trialEx .bgGreen dl.white dd { width: 70%; float: left; text-align: left; padding-left: 10px;}

#trialEx .bgGreen dl dd ul.inline , #trialEx .bgGreen dl.white dd ul.inline {display: block; width: 120px; float: left; padding: 0 5px; border-left: 1px solid #ccc;}
#trialEx .bgGreen dl dd ul.inline span , #trialEx .bgGreen dl.white dd ul.inline  span { display: block; float: left; width: 45px;}

#trialEx p.w525 { width: 525px; margin: 0 0 0 auto;}

#trialEx div.bt1112 { width: 525px; margin: 10px 0 15px auto;}
#trialEx div.bt1112 a { display: block; width: 525px; height: 120px; background: url(/jr-high/TrialExam/img/btTrialEx1112.gif) 0 0; text-indent: -9876em; overflow: hidden;}
#trialEx div.bt1112 a:hover { background: url(/jr-high/TrialExam/img/btTrialEx1112.gif) 0 -120px;}

#trialEx div.bt1210 { width: 525px; margin: 10px 0 15px auto;}
#trialEx div.bt1210 a { display: block; width: 525px; height: 120px; background: url(/jr-high/TrialExam/img/btTrialEx1210.gif) 0 0; text-indent: -9876em; overflow: hidden;}
#trialEx div.bt1210 a:hover { background: url(/jr-high/TrialExam/img/btTrialEx1210.gif) 0 -120px;}