@charset "UTF-8";
/* CSS Document */

/*BASIC FORMATING*/
body{  background: url('../images/layout/bg.png') #000; 
margin:0;padding:0;font: 15px 'Roboto', sans-serif;color: #222;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

 }
html * { -webkit-appearance: none; }
/*TEXT STYLES*/
h1{font-size:100%;}
h2{background: #CCC; -moz-border-radius: 5px; border-radius: 5px; padding:5px 10px;color:#222; margin-bottom:10px;clear:both;}
h2.landing { background:none; font-size: 130%; color:#00b25d; margin-bottom:10px;}
.clear{ clear:both; }
a { text-decoration:none; color: #000; border-bottom: 1px solid #999; font-weight:bold; }
a:hover { color: #666; cursor: pointer;}
details { padding-bottom: 15px;}
div.center.admin { font-size: 70% !important; }

/*OTHER*/
.button-link { display:block; background: #222; color:#FFF; -moz-border-radius: 5px; border-radius: 5px; padding: 7px 15px; margin: 0px 0px 5px 0px; border:none; font-weight:normal; }
.button-link.focus { background: #00b25d; }
.warning { background:#fffa84; border: 2px solid #ffc428; padding:5px; text-align:center; margin:5px; font-weight:bold; color:#c58f00;} 
.error { background:#ffaeae; border: 2px solid #e56565; padding:5px; text-align:center; margin:5px; font-weight:bold; color:#c50000;} 
.success { background:#b4df5b; border: 2px solid #A3C952; padding:5px; text-align:center; margin:5px; font-weight:bold; color:#638235;} 

/*LAYOUT*/

section,header,footer,nav,details {display:block;}
header {  height:135px; color: #AAA; padding: 10px; border-bottom: 1px solid #FFF;box-shadow: inset 0px 0px 50px #000,inset 0px -5px 5px rgba(225,225,225,.2);}
#logo { text-indent: -2000px; background: url('../images/layout/logo.png') no-repeat center; height:114px; width: 10%; 
	display: block; float:left; border-bottom:none; }
header .logout, header .logout input { display:inline; margin:0; padding:0; }
header .logout input { background: none; border:none; color: #FFF; font-size: 100%; border-bottom: 1px solid #AAA;}
header .logout input:hover { color: #AAA; cursor: pointer;}
#ad { width:16%; float:right; text-align: center; }
header .search, nav { background: #333333; background-color: rgba(75,75,75,.85); box-shadow: 5px 5px 5px #000; 
-moz-border-radius: 5px; border-radius: 5px; float:right; 
padding: 5px 1%; margin: 0 2%; margin-bottom: 10px; }
header .search { margin-top: 35px; width: 55%; padding: 4px 1% 0;}
header .search input { border: none; float:left; background: #222; color:#FFF; -moz-border-radius: 5px;
border-radius: 5px; height: 20px; font-size:90%; padding:2px;}
header .search input[type="text"] { padding-left: 5px; margin-right:5px; width: 60%;}
header .search a { height: 25px; line-height: 25px; font-size:90%; width: 25%; float: right;}

nav {  width:68%; text-align:center; }
nav>a, nav input[type="submit"], .search a { text-align: center; background: #222; color:#FFF; -moz-border-radius: 5px; border-radius: 5px; border:none; font-weight:normal;  display: block; float: left;}
nav>a, nav input[type="submit"], .search a { height: 30px; line-height: 30px; width: 18%; margin: 0 .5%;}
nav.guest a { width: 48%; }

nav input[type="submit"] {  background: #c82d21; }
nav .username a, nav .username a.curr { color: #FFF; border: none;}
nav .username {display: block; float: left; line-height: 30px; width: 24%;}
nav a.curr { background: #00b25d; }

nav > a:hover, a.button-link:hover, .search a:hover {
background: #111;
color: #FFF;
}

#content {  padding: 30px; margin: auto; background: url(../images/layout/bg2.png) #FFF; -moz-box-shadow: inset 0px 5px 20px rgba(0,0,0,.4);
-webkit-box-shadow: inset 0px 5px 20px rgba(0,0,0,.4);
box-shadow: inset 0px 5px 20px rgba(0,0,0,.3);}

footer {  padding-top:15px; text-align:center; color: #999; height:85px;border-top: 1px solid #FFF;

box-shadow: inset 0px 10px 10px rgba(0,0,0,1);}
footer a { color: #FFF; border: none; margin: 0 15px; font-weight:normal; }
footer a:hover { color: #CCC; }


/*FORMS*/
label,input { clear:right; display:block; margin-bottom:5px;}
input, textarea { border:none; background: #DDD; border: 1px solid #AAA; padding:5px; -moz-border-radius: 5px; border-radius: 5px; width: 200px; margin-bottom:5px; }
input.full, textarea.full { width: 100%; }
label{padding-top:15px;}
label:first-child{padding-top:0px;}
input[type="checkbox"], label.checkbox { clear:none; display: inline-block; width:auto;}
input[type="submit"] { width:auto; margin-top:10px; background: #333; border: 1px solid #FFF; color: #fff; font-weight:bold; font-size: 110%; padding: 5px 15px; }
.card-container label,.card-container input { clear:none; float:left; padding:5px; }
.card-container label { margin-left:10px; }
form .inline-label, #name, #name2, #csv { display:inline !important; clear:none !important; }
.create-form input[type=text], .import-form input[type=text] { max-width:25%; }
.submit { 
	width: 100% !important; 
	margin: 10px auto;
	background: #54c716; 
	border:2px solid #159c0a; 
	padding:5px; 
	font-size:150%; 
	text-align:center;
	color:#FFF;
	} 
.signup-form, .account-form, .contact-form {
	max-width:350px;
	margin: auto;
	border: 1px solid #AAA; padding: 15px; -moz-border-radius: 5px; border-radius: 5px;
}


.half {width: 47%;float:left; margin-right:1%; padding: 1%; }
 .half .deck .progress, .half .deck .info {
		margin: 0;
		padding: 0;
		width: 30%;
	}
	
/*DECKS*/
.card { padding: 5px; margin-bottom: 5px;}
.card .question { font-weight:bold; width: 15%; display:inline-block; text-align:center;}
.card .answer { border-left: 1px solid #FFF; padding-left:15px;}
.deck .name {display:block;float:left;width:45%;border:none;}
.deck.noicons .name {width:60%;}
.deck.noprogress .name {width:65%;}
.card-container { clear:both; width:100%;}
.center { margin: auto; text-align:center; display:block;}
.deck {  clear:both; margin:auto;  padding:7px; min-height: 27px;}
.deck:after { content: " "; display: block; clear: both; }
.progress { width: 12%; float:right; border: 1px solid #BBB; height:20px; margin-right: 15px; position: relative; text-align:center; font-size: 90%; color: #777; }
.progress span { height:20px; width: 100%; position:absolute; top: 0px; display: block;}
.deck.noicons .progress { margin-right: 0; } 
.percent {  height:20px; position:absolute; top: 0px; filter: alpha(opacity=70);opacity: 0.7;}
.low { background: #c82d21; }
.medium { background: #ffd949; }
.high { background: #00b25d; }
.add-card { display:block;clear:both;cursor:pointer; }
.deck.odd { background:#DDD; }
.study{ display:block;float:left;padding: 0 5px; cursor:pointer;}
.info { color:#777; font-size:70%; float:right; display:block; width:14%; text-align:right;}
.author { color:#777; font-size:70%; }

/*PAGINATION*/
.pagination {
	text-align:center;
	color: #666;
	font-size:90%;
clear:both;
}

.pagination a {
	border: 1px solid #333;
	padding: 0px 6px 0px 5px;
	font-weight:bold;
	text-decoration:none;
	margin:3px;
}

.pagination a.cur {
	background: #333;
	color: #fff;
}

/*ICONS*/
a.study { border: none; }
.card-up, .card-down, .delete-card, .add-card span, .study span, .edit, .delete, .export, .favorite, .unfavorite, header .search .button, .stats {
display:block;
height:24px;
width:24px;
float:left;
text-indent: -200px;
overflow:hidden;
margin:2px;
cursor:pointer;
border-bottom: none;
text-transform: capitalize;
}
header .search .button {
background: url('../../images/layout/icons.png') 72px 0px;
margin-top:-0px;
float:left;
}
header .search .button:hover {
background-position: 72px 24px;
}

.study span {
background: url('../../images/layout/icons.png') 216px 0px;
margin-top:-0px;
}
.study:hover span {
background-position: 216px 24px;
}

.edit {
background: url('../../images/layout/icons.png') 48px 0px;
}
.edit:hover {
background-position: 48px 24px;
}

.delete {
background: url('../../images/layout/icons.png') 240px 0px;
}
.delete:hover {
background-position: 240px 24px;
}

.export {
background: url('../../images/layout/icons.png') 24px 0px;
}
.export:hover {
background-position: 24px 24px;
}

.card-up {
background: url('../../images/layout/icons.png') 120px 0px;
}
.card-up:hover {
background-position: 120px 24px;
}

.card-down {
background: url('../../images/layout/icons.png') 144px top;
}
.card-down:hover {
background-position: 144px 24px;
}

.delete-card {
background: url('../../images/layout/icons.png') 264px 0;
}
.delete-card:hover {
background-position: 264px 24px;
}

.add-card span {
background: url('../../images/layout/icons.png') 288px 0;
margin-top:-2px;
}
.add-card:hover span {
background-position: 288px 24px;
}

.favorite {
background: url('../../images/layout/icons.png') 168px 0;
}
.favorite:hover {
background: url('../../images/layout/icons.png') 168px 24px;
}

.unfavorite {
background: url('../../images/layout/icons.png') 312px 0;
}
.unfavorite:hover {
background: url('../../images/layout/icons.png') 312px 24px;
}

.stats {
background: url('../../images/layout/icons.png') 336px 0;
}
.stats:hover {
background: url('../../images/layout/icons.png') 336px 24px;
}

/*STUDY*/
div.question { 
	text-align:center;
	padding:0px;
	font-size:1200%; }
div.question.long { 
	font-size:800%; }
div.question.ex-long { 
	font-size:500%; }
div.answer { 
	text-align:center;
	padding:10px;
	display:none;
	font-size:200%;
	border: 2px #FFF solid;
	background:#EEE;
	outline: #CCC 1px solid;
	font-weight:bold;
	cursor: pointer;
	}
.answer-box .show {
	text-align:center;
	padding:10px;
	color: #777;
	background: #EEE;
	border: 2px #777 dashed;
	font-size:200%;	
}
.answer-box { 
	margin-bottom: 15px;
	cursor: pointer;
}
.correct{ 
	display:block; 
	float:left; 
	margin: 0 2%; 
	width: 46%; 
	background:#1fb550; 
	border:2px solid #045920; 
	padding:1%; 
	font-size:250%; 
	text-align:center;
	color:#FFF;
	cursor: pointer;
	} 
.wrong{ 
	display:block; 
	float:left; 
	margin: 0 2%; 
	width: 46%; background:#b51f1f; border:2px solid #840b0b; padding:1%; font-size:250%; 
	text-align:center;color:#FFF;
	cursor: pointer;}
.correct:hover {
	background: #1aa447;	
}
.wrong:hover {
	background: #9d1919;	
}
.correct:active,.correct.focus,.wrong:active,.wrong.focus {
	border: #FFF 2px solid;
}

.multiple-choice {
	padding: 15px;
	border-radius: 10px;
	width: 49%;
	margin: .4%;
	float: left;
	border: 2px solid #FFF;
	font-size:200%;
	font-weight: bold;
	box-shadow: 1px 1px 5px rgba(0,0,0,.5);
	height: 75px;
	background: #d8d8d8; /* Old browsers */
	background: -moz-linear-gradient(top,  #d8d8d8 0%, #eeeeee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d8d8), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #d8d8d8 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #d8d8d8 0%,#eeeeee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #d8d8d8 0%,#eeeeee 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #d8d8d8 0%,#eeeeee 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8d8d8', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}

.multiple-choice.long {
	font-size:150%;
}
.multiple-choice:hover {
	background: #eeeeee; /* Old browsers */
	background: -moz-linear-gradient(top,  #eeeeee 0%, #d8d8d8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#d8d8d8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#d8d8d8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #eeeeee 0%,#d8d8d8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #eeeeee 0%,#d8d8d8 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #eeeeee 0%,#d8d8d8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#d8d8d8',GradientType=0 ); /* IE6-9 */
	cursor: pointer;
}

.multiple-choice:active,.multiple-choice.focus {
	background: #aaa; /* Old browsers */
	background: -moz-linear-gradient(top,  #aaa 1%, #ccc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#aaa), color-stop(100%,#ccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #aaa 1%,#ccc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #aaa 1%,#ccc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #aaa 1%,#ccc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #aaa 1%,#ccc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#ccc',GradientType=0 ); /* IE6-9 */
}

/*ROTATOR*/
#slideshow, #slideshow #slidesContainer{
	margin:0 auto;
	position:relative;
	z-index:10;
	height:300px;
}
#slideshow {
	width:100%;
	background:transparent url(../../images/layout/rotatorbg_0.jpg);
	color:#FFF;
	overflow:hidden;
}
#slideshow #slidesContainer {
	width:100%;
	overflow:auto; /* allow scrollbar */
}
#slideshow #slidesContainer .slide {
	margin:0 auto;
	z-index:10;
	height:300px;
	width: 95%; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
	background:transparent url(../../images/layout/slide_bg.png) no-repeat 30px 0;
}
#slideshow #slidesContainer .slide * {
	padding: 5px;
	margin: 20px 35px;
}
#slideshow #slidesContainer .slide.two {
	background:transparent url(../../images/layout/slide_bg2.png) no-repeat 30px 0;
}

#slideshow #slidesContainer .slide.three {
	background:transparent url(../../images/layout/slide_bg3.png) no-repeat 30px 0;
}

#slideshow  .control {
	display:block;
	width:39px;
	height:263px;
	text-indent:-10000px;
	position:absolute;
	cursor: pointer;
}
#leftControl {
	top:0;
	left:0;
	background:transparent url(../../images/layout/rotator_left.png) no-repeat 0 0;
	z-index: 100;
}
#rightControl {
	top:0;
	right: 0;
	background:transparent url(../../images/layout/rotator_right.png) no-repeat 0 0;
	z-index: 100;
}
.slide-controlls {
	text-align:center;
	padding-right: 400px;
	margin-top: -26px;
	z-index:100;
	position:relative;
	width: 25%;
}
.slide-controlls a {
	background: #333;
	color:#AAA;
	padding:5px;
	border:none;
}
#slideshow H2 {
	background: #000;
	color:#FFF;
	clear: none;
}

/*PROFILE*/
.addthis_floating_style {
top: 160px;
left: 50%;
margin-left: 470px;
background: #efefef;
position: absolute;
}
.addthis_floating_style a {
border: 0;
}

h1.name {
	font-size: 200%;
	margin: 0px;
}

.avatar {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

/* Responsive */
@media all and (min-width: 970px) { 
body {
	font-size: 17px;	
}
header, #content {
	padding-right: 10%;	
	padding-left: 10%;	
}

}
@media all and (max-width: 1000px) { 
	#logo {
		background-size: 100%;	
	}
	
	.deck.noprogress .name {
		width: 50%;	
	}
}

@media all and (max-width: 850px) {
	.deck .progress, .deck .info {
		margin: 0;
		padding: 0;
		width: 20%;
	}
	.deck .name, .deck.noprogress .name {
		width: 40% !important;	
	}
	}
@media all and (max-width: 700px) { 
header {
height: auto;	
}
header:after{
content: " ";
clear: both;
display: block;
}
#logo {
height: 75px;
}

	nav, header .search {
		width: 86%;	
		margin: 3px 0;
	}
	#ad {
	clear: both;
	width: 100%;
	}
	
	input[type=text] { width: 100%; max-width: 100% !important; clear: both; float: none; margin-bottom: 10px;}
	
	.card-container input[type=text] {
		width: 100%; max-width:65% !important; clear: none; float: left; height: 30px;}
		.card-container label {
			float: left; display: block; height: 30px; width: 20%; text-align: right; clear: none;
		}
	.card-container {
	position: relative;	
	}
	.card-container .card-up, .card-container .card-down {
		position: absolute;
		top: 0;
		left: 0;
	}
	 .card-container .card-down {
		top: 20px;
	}
	
	
	
	.half {
		float: none;
		clear: both;
		width: 100%;
		margin: 0;
		padding: 5px 0;
	}
	#slideshow iframe {
		display: none !important;	
	}
}
@media all and (max-width: 600px) {
	.deck .name, .deck.noprogress .name {
		width: 100% !important;	
		font-size: 120%;
		margin-bottom: 10px;
		text-indent: 15px;
		clear: both;
	}
	 .deck .info {
		width: 30%;
	}
	
	/*study*/
div.question.hidden-answer {
padding: 20px 0px !important;	
}
div.question { 
line-height: 120%;
	font-size:650%;
	}
div.question.long { 
	font-size:500%; }
div.question.ex-long { 
padding: 5px;
	font-size:300%; }
	.multiple-choice {
		font-size: 120%;
		width: 100%;
		clear: both;
		float: none;
		padding: 14px;
		height: auto;
	}
	.multiple-choice.long {
	font-size:110%;
		padding: 10px;
}
}
@media all and (max-width: 550px) {
	#content { padding: 30px 10px; }
nav .username {
	width: 100%;	
	}	
	nav a {
		width: 26%;
	}
}
@media all and (max-width: 450px) {
html nav, html header .search {
		width: 98%;	
	}
	html #logo {
height: 40px;
width: 100%;
background-size: auto 100%;
background-position: left;
text-indent: 60px;
color: #FFF;
margin: -10px auto 0;
}

	 html .deck .progress, html .deck .info {
		width: 45%;
		margin: 5px 2%;
		padding: 0;
		text-align: center;
		float: right;
		
	}
	.deck.noprogress .info {
		width: 96%;	
		text-align: right;
	}
}

@media all and (max-width: 400px) {
	nav {
		font-size: 85%;	
	}
	header .search input[type=text] {
		width: 50%;	
	}
	header .search a {
		width: 35%;	
	}
	#ad {
		position: fixed;
		bottom: 0;
		left: 0;
	}
	div.answer, .answer-box .show{
		font-size: 120% !important;
	}
	div.question { 
	font-size:500%; }
div.question.long { 
	font-size:300%; }
div.question.ex-long { 
	font-size:200%; }
}