@charset 'UTF-8';

/*

    Common

*/

/*  headings  */
#contents h2 {
	margin: 3em 0 1em;
	padding-left: 0.5em;
	border-left: 3px #005f91 solid;
	font-size: 2.4rem;
}
#contents h2:first-child {
	margin-top: 0em;
}
#contents h3 {
	margin: 2em 0 1em;
	font-size: 2.1rem;
}

/*  message  */
#contents p.success,
#contents p.failure {
	margin: 0 0 2em;
	padding: 1em;
	border-radius: 5px;
}
#contents p.success {
	background-color: #e9ffd6;
	border: 1px #669933 solid;
	color: #669933;
}
#contents p.failure {
	border: 1px #FF6666 solid;
	background-color: #ffdddd;
	color: #FF6666;
}

/*  text  */
#contents p.notes {
	font-size: smaller;
	color: #666666;
}

/*  table  */
#contents table {
	width: 100%;
}
#contents table td,
#contents table th {
	padding: 0.5em 0.5em 0.5em 0;
	background-color: transparent;
	border: none;
	border-top: 1px #cccccc solid;
	border-bottom: 1px #cccccc solid;
	vertical-align: top;
}

/*  hr  */
#contents hr {
	margin: 3em 0 1.5em;
	border-color: #cccccc;
}

/*  form  */
#contents form.small dd {
	margin: 0.25em 0 1em;
}
#contents form.small dd input[type=text],
#contents form.small dd input[type=password],
#contents form.small dd textarea,
#contents form.small dd select {
	width: 100%;
	height: 2.5em;
	padding: 0 0.5em;
	font-size: 1.7rem;
	line-height: 2.5em;
}
#contents form.small dd textarea {
	height: auto;
}
#contents form.small input[type=submit] {
	display: inline-block;
	padding: 0.5em 2em;
	border: none;
	background-color: #005f91;
	color: #ffffff;
	font-size: 1.8rem;
	cursor: pointer;
}
#contents form.small .other a {
	color: #666666;
}

/*  confirm  */
#contents form.confirm dd {
	margin: 0.25em 0 1em;
	padding: 0.5em;
	background-color: #eeeeee;
}

/*  form large  */
#contents form.large dl dd {
	margin: 0.25em 0 1em;
	padding-bottom: 0.75em;
	border-bottom: 1px #cccccc solid;
}
#contents form.large dl dd p {
	margin: 0.5em 0;
}
#contents form.large dd input[type=text],
#contents form.large dd input[type=password],
#contents form.large dd textarea,
#contents form.large dd select {
	width: 100%;
	height: 2.5em;
	padding: 0 0.5em;
	font-size: 1.7rem;
	line-height: 2.5em;
}
#contents form.large dd textarea {
	height: auto;
	padding: 0.5em;
	line-height: 1.5;
}
#contents form.large.confirm dd {
	background-color: transparent;
}
@media screen and (min-width: 800px) {
	#contents form.large dl {
		border-top: 1px #cccccc solid;
	}
	#contents form.large dl dt {
		float: left;
		width: 30%;
		padding: 0.75em 0 0;
	}
	#contents form.large dl dd {
		min-height: 1.5em;
		margin: 0;
		padding: 0.75em 0;
		padding-left: 32%;
		border-bottom: 1px #cccccc solid;
	}
}

/*  button  */
#contents .button {
	display: inline-block;
	padding: 0.5em 2em;
	border: 1px #005f91 solid;
	background-color: #005f91;
	color: #ffffff;
	font-size: 1.8rem;
	cursor: pointer;
}
#contents .button.medium {
	padding: 0.25em 1em;
	font-size: 1.5rem;
}
#contents .button.small {
	padding: 0.25em 1em;
	font-size: 1.3rem;
}
#contents .button.type2 {
	background-color: #ffffff;
	color: #005f91;
}

/*  back  */
#contents .back {
	display: inline-block;
	padding: 0 1em;
	border: 1px #cccccc solid;
	background-color: #eeeeee;
	color: #666666;
	border-radius: 3px;
}

/*  tab  */
nav.tab {
	margin-bottom: 1em;
	overflow-x: auto;
}
nav.tab ul {
	display: flex;
	width: 100%;
	margin-bottom: 0;
	border-bottom: 1px #cccccc solid;
	list-style: none;
	
}
nav.tab ul li {
	margin: 0 0 -1px 10px;
	border: 1px #cccccc solid;
}
nav.tab ul li a {
	display: block;
	padding: 0.5em 1em;
	background-color: #eeeeee;
	white-space: nowrap;
	color: inherit;
	cursor: pointer;
}
nav.tab ul li.current {
	border-bottom-color: #ffffff;
}
nav.tab ul li.current a {
	background-color: #ffffff;
}





/*

    Outer

*/

/*  layout  */
@media screen and (min-width: 800px) {
	#contents div.outer {
		overflow: hidden;
	}
	#contents div.outer div h2 {
		margin-top: 0em;
	}
	#contents div.outer div.main {
		float: left;
		width: 64%;
		padding-right: 3%;
		border-right: 1px #cccccc solid;
	}
	#contents div.outer div.description {
		float: right;
		width: 30%;
	}
}





/*

    Top

*/

/*  examinations  */
#contents ul.items {
	
}
#contents ul.items li {
	margin: 0 0 1em;
	padding: 1em;
	border: 5px #005f91 solid;
	list-style: none;
	overflow: hidden;
	vertical-align: top;
}
#contents ul.items li div.icon {
	float: right;
	width: 20%;
	font-size: 4rem;
	color: #cccccc;
	text-align: right;
}
#contents ul.items li div.action {
	float: left;
	width: 80%;
}
#contents ul.items li div.action .button {
	margin-top: 0.5em;
}
@media screen and (min-width: 800px) {
	#contents ul.items {
		margin: 0 -1%;
		letter-spacing: -20px;
	}
	#contents ul.items li {
		display: inline-block;
		width: 48%;
		margin: 0 1% 2%;
		letter-spacing: 0;
		box-sizing: border-box;
	}
	#contents ul.items li div.icon {
		font-size: 6rem;
	}
}

/*  applications  */
#contents ul.applications li {
	margin: 0 0 1em;
	padding: 1em;
	border: 5px #cccccc solid;
	list-style: none;
}
#contents ul.applications li.unpaid {
	border-color: #ffcc00;
}
#contents ul.applications li span.i {
	display: block;
	padding: 0.25em 0;
	border-bottom: 1px #cccccc solid;
}





/*

    Application

*/

/*  progress  */
#contents nav.progress ol {
	overflow: hidden;
}
#contents nav.progress ol li {
	float: left;
	width: 25%;
	margin: 0;
	padding: 0.5em 0;
	list-style: none;
	background-color: #ebf0f8;
	border-left: 1px #ffffff solid;
	color: #005f91;
	font-size: 0.8rem;
	text-align: center;
	box-sizing: border-box;
}
#contents nav.progress ol li.current {
	background-color: #005f91;
	color: #ffffff;
}
@media screen and (min-width: 350px) { #contents nav.progress ol li { font-size: 1.0rem;}}
@media screen and (min-width: 400px) { #contents nav.progress ol li { font-size: 1.2rem;}}
@media screen and (min-width: 600px) { #contents nav.progress ol li { font-size: 1.4rem;}}
@media screen and (min-width: 800px) { #contents nav.progress ol li { font-size: 1.6rem;}}





/*

    Profile

*/

/*  students  */
#contents ul.students {
	border-top: 1px #cccccc solid;
}
#contents ul.students li {
	margin: 0;
	padding: 1em 0.5em;
	border-bottom: 1px #cccccc solid;
	list-style: none;
	overflow: hidden;
}
#contents ul.students li span.name {
	float: left;
}
#contents ul.students li span.name a {
	margin-right: 5px;
	font-size: 3.2rem;
	vertical-align: middle;
	color: #999999;
}
#contents ul.students li span.edit {
	display: block;
	padding: 0.25em 0;
	text-align: right;
}