@charset "utf-8";
@import url("base.css");

/* CSS Document */

/* --------------------------------

	* e-flashcard.com Style Sheet {

		* last update 08.7/10
		* author : Ryo Yamashita;

	}


/* ==========================================================================================================

	 Anchor
 
============================================================================================================*/

a:link {
	color: #68b028;
}
a:visited {
	color: #68b028;
}
a:hover, a:active {
	color: #e42;
}

/* ==========================================================================================================

	 HTML, BODY, WRAPPER
 
============================================================================================================*/

body {
	line-height: 150%;
	background-color:#FFFFFF;
	font-family: verdana;
	font-size: 13px;
	color:#555;
}
#wrapper {
	background-image:url(../images/bg.gif);
	background-repeat: repeat-x;
	width: 852px;
	margin: 10px auto 0;
	line-height: 150%;
	background-repeat: repeat-y;
	position:relative;
}
/* start clearfix */
#wrapper:after { content: " ";display: block;visibility: hidden;clear: both;height: 0.1px;font-size: 0px;line-height: 0;}
/* ie6 hack */
* html #wrapper {height: 1%;}
/* ie7 hack */
*:first-child+html #wrapper{min-height: 1%;}
/* end clearfix */


/* ==========================================================================================================

	 Header
 
============================================================================================================*/

#header {
	background-image:url(../images/top.gif);
	background-repeat: no-repeat;

}
h1 {
	padding: 12px 0 0 10px;
	margin: 0 0 0 10px;
}
#header h1 a{
	text-decoration:none;
}

/* ==========================================================================================================

	 Footer
 
============================================================================================================*/

#footer {
	background-image:url(../images/bottom.gif);
	background-repeat: no-repeat;
	width: 852px;
	margin: 0 auto;
	clear:both;
	padding: 23px 0 15px;
	text-align:center;
}
#footer ul li{
	display:inline;
}
#footer a{
	color:#444;
	text-decoration:none;
}
address {
	font-style:normal;
}


/* ==========================================================================================================

	 Side
 
============================================================================================================*/

#side {
	width:222px;
	float: left;
	padding: 7px 17px 10px 17px;
}

.sideBox {
	padding: 5px 5px 15px 5px;
}
.sideBox ul li {
	background-image:url(../images/liSide.gif);
	background-repeat: no-repeat;
	padding: 6px 0 5px 23px;
	font-size:13px;
}

.sideBox ul li a{
	text-decoration:none;
}
.sideBox ul li a:link {
	color: #333;
}
.sideBox ul li a:visited {
	color: #333;
}
.sideBox ul li a:hover, a:active {
	color: #999;
}
.searchForm{
	padding: 0 10px;
}
.searchInput{
	width: 160px;
}

/* ==========================================================================================================

	 GoogleAdv
 
============================================================================================================*/

.googleSearch {
	padding: 0 0 15px 10px;
}
.googleAdv {
	text-align:center;
	margin: 0 20px;
	padding: 10px 5px;
}

/* ==========================================================================================================

	 Contents
 
============================================================================================================*/

#contents {
/*
	background-image:url(../images/partition.gif);
	background-repeat: repeat-y;
*/
	width:567px;
	float: right;
	padding: 7px 22px 10px 7px;
}

/* ==========================================================================================================

	 パンくず
 
============================================================================================================*/
#pan {
	padding: 5px 5px 5px 20px;
}
#pan li{
	display:inline;
}
#pan li a:link{
	color:#444;
}
#pan li a:visited {
	color:#666;
}
#pan li a:hover, #pan li a:active {
	color: #e42;
}


/* ==========================================================================================================

	 単語カード
 
============================================================================================================*/
div.firstQuestion {
	text-align:left;
	display:block;
	margin:5px 10px 5px 15px ;
	line-height: 120%;
}
div.question {
	padding: 0;
	margin:5px 10px 5px 15px ;
	text-align:left;
	display:none;
	line-height: 120%;
}
div.answer {
	color: red;
	padding: 0;
	margin:5px 10px 5px 15px ;
	text-align:left;
	display:none;
	line-height: 120%;
}
#endOfCard {
	color: red;
	padding: 0;
	margin:5px 10px 5px 15px ;
	text-align:left;
	display:none;
	line-height: 120%;
}
.option{
	padding:10px;
	text-align:center;
}
.cardRenew{
	padding:5px;
}
.setumei{
	border:1px solid #ccc;
	background-color:#eee;
	width: 550px;
	margin:5px auto 0 auto;
	padding: 10px;
}
.returnCard{
	text-align:right;
	width: 550px;
	margin:5px auto 0 auto;
	padding: 10px;
}
.cardPass{
	padding:10px;
	text-align:center;
}
#prevBtn{
	position:absolute; 
	top:270px;
	left:10px;
	visibility:hidden;
}
#nextBtn{
	position:absolute; 
	top:270px;
	left:805px;
	visibility:hidden;
}
img.qrcode {
	float:right;
	border: 1px solid #bbb;
}
img.topQrcode {
	float:left;
	border: 1px solid #bbb;
	margin-right: 10px;
}
/* ==========================================================================================================

	 単語カードの枠
 
============================================================================================================*/
img.cardMinWidth{
	width:340px;
	height:1px;
}

div.cardWrapper{
	padding: 0 35px 0 75px;
}

table.card{
	margin: 10px auto 0 auto;
	padding:0;
	border-collapse: collapse;
}
td.card1 {
	background-image:url(../images/card/01.png);
	background-repeat:no-repeat;
	height:23px;
	width:97px;
	margin:0;
	padding:0;
}
td.card2 {
	background-image:url(../images/card/02.png);
	background-repeat:repeat-x;
	height:23px;
	margin:0;
	padding:0;
}
td.card3 {
	background-image:url(../images/card/03.png);
	height:23px;
	width:65px;
	margin:0;
	padding:0;
	background-repeat:no-repeat;
}
td.card4 {
	background-image:url(../images/card/04.png);
	background-repeat:repeat-y;
	width:97px;
	margin:0;
	padding:0;
}
td.card5 {
	background-image:url(../images/card/05.png);
	background-repeat:repeat-y;
	margin:0;
	padding:5px 35px 25px 5px;
	font-size:24px;
}
td.card6 {
	background-image:url(../images/card/06.png);
	height:23px;
	width:65px;
	margin:0;
	padding:0;
	background-repeat:repeat-y;
}
td.card7 {
	background-image:url(../images/card/07.png);
	height:29px;
	width:97px;
	margin:0;
	padding:0;
	background-repeat:no-repeat;
}
td.card8 {
	background-image:url(../images/card/08.png);
	height:29px;
	margin:0;
	padding:0;
	background-repeat:repeat-x;
}
td.card9 {
	background-image:url(../images/card/09.png);
	height:29px;
	width:65px;
	margin:0;
	padding:0;
	background-repeat:no-repeat;
}

/* ==========================================================================================================

	 更新・削除
 
============================================================================================================*/

#renewTable {
	width:750px;
	margin: 10px auto 0 auto;
	border-collapse:collapse;
	border:1px solid #ccc;
}
#renewTable tr td{
	padding: 5px 10px;
	border:1px solid #ccc;
}
#renewTable tr th{
	padding: 5px 10px;
}


/* ==========================================================================================================

	 カテゴリ・サブカテゴリ・単語カード選択画面
 
============================================================================================================*/

.noColumn{
	width: 750px;
	margin: 0 auto;
	padding: 10px;
}

.cardList li {
	float:left;
	background-image:url(../images/li.gif);
	background-repeat: no-repeat;
	padding: 7px 0 7px 23px;
	font-size:13px;
	border: 1px solid #aaa;
	width: 210px;
	margin: 0 10px 10px 0;
}

.cardList li a{
	text-decoration:none;
}
.cardList li a:link {
	color: #333;
}
.cardList li a:visited {
	color: #333;
}
.cardList li a:hover, a:active {
	color: #777;
}
.noColumn .section p{
	padding-top:0;
}

/* ==========================================================================================================

	 H
 
============================================================================================================*/

h2 {
	padding: 8px 10px 8px 20px;
	margin: 5px 0;
	border-right: 1px solid #ccc;
	color: #766;
	font-size: 16px;
	background-image:url(../images/h2.gif);/* H:34px */
	background-repeat:no-repeat;
}
h3 {
	padding: 5px 10px 5px 5px;
	margin: 5px 0;
	border-bottom: 1px solid #ccc;
	color: #766;
	font-size: 14px;
}
h4 {
	padding-left: 5px;
}
#cardTitle {
	padding: 0;
	margin: 0;
	text-align:center;
	color: #766;
	font-size: 16px;
	background-image:none;
}

/* ==========================================================================================================

	 DL, UL
 
============================================================================================================*/

dl {
	padding: 5px;
}
dt {
	font-weight:bold;
	font-size:13px;
}
dd {
	padding: 5px 10px 10px;
}