body {
	background:#fdfcdc;
	color:#696363;
	font-size: 17px;
	width:100%;
}
p {
	direction:rtl;
	font-size:17px;
	text-align:justify;
}

a {
	border:0 none;
	color:#0C9CCF;
	margin:0;
	padding:0;
	text-decoration:none;
}
#wrap a, footer a{-webkit-transition: all .2s ease-in-out;}
h2 {
	background:#676767;
	color:white;
	direction:rtl;
	float:right;
	display: inline; /* IE6 Problem */
	height:10px;
	line-height:12px;
	margin-right: -45px;
	padding:25px;
	text-align:center;
	width:370px;
}
span {overflow:hidden;}
.color{ background: #fdfcf6;}
#sakura span{ letter-spacing: -1px;}
a:hover {color:#00bdf6;cursor:pointer;}
a:active{color:#1F8BC4;}
#main a:visited{color:#94B9C1; text-decoration:underline;}
.clear {clear:both;}
.bold{font-weight: bold;}
.brokenlink {text-decoration:line-through;}
.last{ border: none;}
.hide{ display: hidden;}

/*#######################################
				Background DIV 
#######################################*/

#greenwrap {
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	background: rgba(227, 244, 171, 0.9);
	height:100%;
	margin:10px auto;
	overflow:hidden;
	padding:10px;
	position:relative;
	width:946px;
}
#redwrap {
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	background: rgba(247, 102, 102, 0.9);
	height:100%;
	margin:10px auto;
	overflow:hidden;
	position:relative;
	width:979px;
}
#orangewrap {
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	background: rgba(247, 192, 38, 0.9);
	height:100%;
	margin:10px auto;
	overflow:hidden;
	position:relative;
	width:990px;
}
#bluewrap {
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	background: rgba(85, 190, 249, 0.9);
	height:100%;
	margin:10px auto;
	overflow:hidden;
	position:relative;
	width:1000px;
}

/*##############################
			alert 
###############################*/

#alert {
	background-color:#FFFFFF;
	color:#000000;
	font:20px/40px arial,sans-serif;
	height:0;
	margin-bottom:5px;
	opacity:0.9;
	overflow:hidden;
	position:relative;
	text-align:center;
	width:100%;
}
#alert p::before{ content: url(../image/warning.png);vertical-align: middle;}
#alert p{ text-align:center; font-size: 19px;}
#alert p span {
	color:#ABACA6;
	font-size:small;
}
#alert #hide {
	color:#FF0000;
	font-size:20px;
	left:5px;
	position:absolute;
	top:0;
	width:18px;
}
#alert #hide a {border:medium none; color:red;}

/*###############################
		Header ( navigation/Logo/Social icons)
################################*/

header{ display: block; height: 145px; position: relative;}
#logo{ position: relative;overflow: hidden; width: 240px; top: 16px; left: 10px;}

#japanese-tag {
	color:#553b3b;
	font-size: 12px;
	left:111px;
	letter-spacing:1px;
	position:absolute;
	top:54px;
}
.redtag {color:#F46161;}
ul, li {
	overflow:hidden;
}
nav {
	float:right;
	display: inline; /* IE6 Problem */
	margin-bottom:15px;
	position:relative;
	right:17px;
	top:27px;
	padding: 10px;
}
nav ul, nav li {
	border-left:1px solid #F4C0A6;
	float:right;
	display: inline; /* IE6 Problem */
	position:relative;

}
nav li a {
	background: #F76666;
	color:white;
	font-family:Al-fares;
	font-size:25px;
	font-weight:bold;
	text-decoration:none;
	padding: 10px;
}
nav li a:hover {
	background: #F76666;
	color:#F0F000;
}
.current a {
	background: #F76666 ;
	color:#F0F000 ;
}
nav li a span {
	background: #F76666;
	color:#F0F000;
	display:block;
	font-weight:bold;
	padding:10px;
	position:relative;
}
nav li a span:first-child {
	background: #F76666;
	color:white;
}
#social {
	position: absolute;
	right:10px;
	top:130px;
	
}
#social li {
	float:right;
	display: inline; /* IE6 Problem */
	padding: 0 5px;
	position:relative;
	height: 16px;
	width: 16px;
}
#social li a{ text-decoration:none; display: block;}
#social li  span{ display:block;text-indent: -9999px;}
#social #twitter-icon a { background:url("../image/social.png") no-repeat -32px -16px ;}
#social #twitter-icon a:hover {background:url("../image/social.png") no-repeat -32px 0 ;}
#social #utube-icon a { background:url("../image/social.png") no-repeat -16px -16px ;}
#social #utube-icon a:hover {background:url("../image/social.png") no-repeat -16px 0 ;}
#social #facebook-icon a { background:url("../image/social.png") no-repeat 0 -16px ;}
#social #facebook-icon a:hover {background:url("../image/social.png") no-repeat ;}

/*#####################################
##############    Twitter   ##################
######################################*/

#posts {
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	background:url("../image/cbackground.png") repeat #FDFDFA;
	border:1px solid #FCF9E7;
	left:11px;
	line-height:17px;
	opacity:0.9;
	position:absolute;
	top:156px;
	width:290px;
	z-index:9;
}
#posts #follow {
	float:right;
	display: inline; /* IE6 Problem */
	font-family:Al-fares;
	margin-right:7px;
}
#posts ul {
	margin:0;
	padding:0 7px 7px;
}
#posts li {
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	background: #e5e7a4;
	border: 1px solid #d5d5d5;
	font-size:15px;
	margin:5px;
	padding:5px 8px;
	text-align:center;
}
#bird {
	left:22px;
	position:absolute;
	top:126px;
	z-index:99;
}
time {
	color:#8EA1AB;
	float:right;
	display: inline; /* IE6 Problem */
	font-size:70%;
	font-style:italic;
}

/*######################################
				Content main page
#######################################*/
#wrap {
	-moz-border-radius:15px;
	-webkit-border-radius:15px ;
	background: #FEFEFD;
	border:1px solid #D1D1D1;
	margin:0 auto;
	overflow:hidden;
	width:948px;
}
#content {
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	background-image:-moz-linear-gradient(100% 100% 90deg, #FCFCF6, #FEFEFD);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFD), to(#FCFCF6));
	height:100%;
	min-height:900px;
	overflow:hidden;
	padding-bottom:5px;
	position:relative;
}

#welcom-mesg {
	clear:both;
	float:right;
	display: inline; /* IE6 Problem */
	margin:45px -2px;
	overflow:hidden;
}
#welcom-mesg span {
	clear:both;
	float:right;
	display: inline; /* IE6 Problem */
}
#welcom-mesg #2{margin: -13px 0 -6px;}
.border {
	background: #EBE9B4;
	clear:both;
	height:auto ;
	margin:10px auto 50px;
	max-height:1px;
	min-height:1px;
	width:400px;
}
_html .border {height:1px;}
#showcase {
	margin:0 auto 40px;
	min-height:500px;
	overflow:hidden;
	position:relative;
	width:860px;
}
.bubble {
	height:105px;
	margin-top:5px;
	position:absolute;
	right:190px;
	text-align:center;
	top:65px;
	width:505px;
	z-index:99;
}
#pointerImg{ display: none;}
.bubble .pointer {
	background: #665E5E;
	height:30px;
}
.bubble .pointer div {
	background: #FDFDF9;
	height:100%;
}
.bubble .pointer .one {
	-moz-border-radius-topright:12px;
	-webkit-border-top-right-radius:12px;
	float:left;
	display: inline; /* IE6 Problem */
	width:61%;
}
.bubble .pointer .two {
	-moz-border-radius-topleft:44px;
	-webkit-border-top-left-radius:44px;
	float:right;
	display: inline; /* IE6 Problem */
	width:39%;
}
.bubble .arabic {
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	background: #FAFEDF;
	border:1px solid #000000;
	direction:rtl;
	font-size:40px;
	line-height:20px;
	min-height:40px;
	padding:15px;
	text-align:justify;
}
#jisho_intro, #book_intro{ display: none;}
#jisho {
	left:0;
	padding:5px;
	position:absolute;
	top:165px;
	z-index:999;
}
#jisho .shadow {
	left:0;
	position:absolute;
	top:146px;
}
#book {
	padding:1px;
	position:absolute;
	right:0;
	top:165px;
	z-index:999;
}
#book a {
	background:url("../image/book.jpg") no-repeat ;
	display:block;
	height:100%;
	text-indent:-9999px;
	width:100%;
}
#jisho a {
	background:url("../image/sakura.jpg") no-repeat ;
	display:block;
	height:100%;
	text-indent:-9999px;
	width:100%;
}
#book a, #jisho a {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #EFEFEF;
	height:175px;
	padding:0.8px;
	width:258px;
}
#book a:hover, #jisho a:hover {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #EACC0A;
}
#book a:active, #jisho a:active {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #FFE63F;
}
#gokurousan1 {
	bottom:0;
	overflow:hidden;
	position:absolute;
	right:350px;
	z-index:9999;
	background: url(../image/gokuro.png) no-repeat  -393px 0;
	width: 171px; height: 331px;
}

#gokurousan2 {
	bottom:0;
	background: url(../image/gokuro.png) no-repeat 0px 0;
	display: none;
	height: 330px;
	overflow:hidden;
	position:absolute;
	right:360px;
	z-index:999;
	width: 171px; 
}
#gokurousan3 {
	bottom:0;
	background: url(../image/gokuro.png) no-repeat -178px 0;
	display: none;
	height: 330px;
	overflow:hidden;
	position:absolute;
	right:320px;
	z-index:99;
	width: 215px; 
}
#download_book, #download_jisho{position: relative; overflow: hidden; padding:3px 22px; margin: 70px 0 25px; direction:rtl;}
#download_book{padding: 100px 23px; margin: 0px 0 0px;}
.before_download{  padding: 10px; width: 550px; float: right; margin: 40px 0 140px;}
.before_download::before{ content: url(../image/warning.png);vertical-align: middle;}
.image_download{ float: right;}
.chuui {overflow: hidden; margin-bottom: 55px; line-height: 15px;}
#download_book .chuui{ margin-top: 20px; }
.chuui p{ font-size: 12px;}
.chuui h3::before{ content: url(../image/warning.png);vertical-align: middle;}
.download-controls{
		-moz-border-radius:15px;
		-webkit-border-radius:15px;
		background:url("../image/AppActionGradient.png") repeat-x scroll 0 0 #e6e6e6;
		padding:5px 0 4px;
		position:absolute;
		left:20px;
		top:165px;
		text-align: center;
}
#download_book .download-controls{ top: 130px;}
.download-controls, .download-controls *{display:inline;}
.download-controls li{ padding: 8px; border-left: 1px solid #848484;}
.download-controls li span{ font-size: 8px; font-weight:bold; margin: 0 auto }
.download-controls .pdf{border: none;}
.download-controls a{
		background:url("../image/AppActionDownload.png") no-repeat scroll 2px 65% transparent;
		padding:0 0 0 25px;
		color:#444444;
		font-weight:bold;
		text-shadow:0 1px 0 #FFFFFF;
		font-size: 20px;		
}
.pdf a {background: none;}
.pdf a {background: url("../image/pdf.jpeg")no-repeat 0px 25%;;}
.download-controls a:hover{color: #00bdf6;}
.download-controls a:active{color: #1F8BC4;}
.chuui ol{ font-size: 15px; margin: 20px 0;}
.chuui ol li{ padding: 5px 0px; }
/*######################################
		Content *other*
#######################################*/
#main {overflow:hidden;padding:3px 5px;}

#main p {
	direction:rtl;
	font-size:17px;
	line-height:28px;
	min-height:40px;
	padding:30px 0 3px 15px;
	text-align:justify;
}
.jtext { color: #696363; }
.jtext:hover{ color: #f47b47;}
blockquote, .blockq {
	background: #fdfcf6;
	border-right:2px solid #28C435;
	direction:rtl;
	float: right;
	display: inline; /* IE6 Problem */
	padding:15px;
	text-align:justify;
	text-indent:3px;
	width:540px;
}
#content{ padding: 22px;}
#main h3 {
	padding:10px;
	text-align:center;
}
#main h2{ margin-right: -55px;}

#story {
	margin-top:130px;
	position: relative;
	
	overflow: hidden;
}
#story h3 {
	color: #f47b47;
	float:right;
	display: inline; /* IE6 Problem */
	text-align:justify;
}
#story p {
	line-height:28px;
	font-size: 18px;
	padding:15px 0;
}


#book-rights img{ width: 415px; height: 207px; }

/*#######################################
		Footer
########################################*/
footer{ display: block; position: relative; padding: 58px;}
#rights {font-size: 9px; left: 73px; position: absolute; bottom: -5px;}
#details{
	height: 104px;
	overflow:hidden;
	width: 75px;
	position: absolute;
	left: 0px;
	bottom: -8px;
}
#details a  {
	background: url("../image/smmall-gokuro.png") no-repeat 0px 0;
	text-indent: -9999px;
	display:block;
	height: 100%;
}
footer ul {
	float:right;
	display: inline; /* IE6 Problem */
	margin-bottom:15px;
	position:relative;
	right:17px;
}
footer ul  li {
	float:right;
	display: inline; /* IE6 Problem */
	position:relative;
	padding: 0 5px;
	border-left: 1px solid #ccc;
}
footer ul  li a {
	color: black;
	font-size:15px;
	text-decoration:none;
	font-weight: bold;
}