/* zero the hero */

@font-face {
	font-family: 'Museo Roman';
	src: url('../fonts/museo_roman.eot');
	src: url('../fonts/museo_roman.ttf') format('truetype');
	src: url('../fonts/museo_roman.woff') format('woff');
}

body { font-family: 'Museo Roman'; }

h1 {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url('../images/logoAI.png') right top no-repeat;
	margin-left: 10px;
	height: 39px;
}

h2,
h3,
h4,
p,
#whatever {
	font-weight: normal;
	margin-left: 10px;
}

/* Enter a course number: */

#whatever input {
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	background: #fdfdfd;
	border-color: aliceblue;
	border-radius: .5em;
	width: 100%;
}

/* tab buttons */

/*#buttons { text-align: center; }*/

.btn {
	font-family: 'Museo Roman';
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
}

.btn-primary {
	color: #fff;
	background: linear-gradient( 45deg, #337ab7, #204d74);
	border-color: #2e6da4;
}

.btn-tabs {
	color: #fff;
	background: #337ab7;
	border-color: #2e6da4;
	border-radius: .3em;
}

.btn-primary:hover {
    color: #fff;
    background: #286090;
    border-color: #204d74;
}

.btn-tabs:hover {
    color: #fff;
    background: #286090;
    border-color: #204d74;
}

/* lessons */

#lessons { display: none; }

input[type=radio] { display: none; }

input[type=radio] ~ * { display: none; }

input[type=radio]:checked ~ * { display: block; }

.lesson { padding: 0; }

.lesson:first-of-type {
	border-top-left-radius: .4em;
	border-top-right-radius: .4em;
}

.lesson:last-of-type {
	border-bottom-left-radius: .4em;
	border-bottom-right-radius: .4em;
}

.lesson:first-of-type > label {
	border-top-left-radius: .4em;
	border-top-right-radius: .4em;
}

.lesson:last-of-type > label {
	border-bottom-left-radius: .4em;
	border-bottom-right-radius: .4em;
}

.lesson > label {
	padding: .5em;
	display: block;
}

.lesson textarea {
	height: 50px;
	margin-bottom: .5em;
}

/* syllabus table */

table { width: 100%; }

table, fieldset.lesson {
	border: thin solid whitesmoke;
	border-spacing: 0;
	border-collapse: collapse;
}

tr {
	border-bottom: thin solid whitesmoke;
	margin-bottom: 1em;
}

tr:nth-of-type(1),
tr:nth-of-type(2),
tr:nth-of-type(3) { display: none; }

td {
	display: block;
	margin: 0;
	padding: .5em 0;
}

td:last-of-type { background-color: #fbfbfb; }

td h4 { margin-bottom: 0; }

td h4 label::after { content: ':'; }

td > ul, td > dl {
	padding-top: 0;
	padding-left: 0;
}

td > ul > li, td > dl dt { margin: .5em 0; }

td > dl dt:first-of-type { margin: 1.7em 0 .5em; }

dd + dt { padding-top: 1em; }

dt, dd { display: list-item; }

dt { list-style-type: none; }

dd { margin-left: 2em; }

#criteria { list-style: none; }

#criteria li {
	padding-bottom: .5em;
	border-bottom: thin solid #ebebeb;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

#criteria li:last-of-type { border-bottom: thin solid silver; }

#criteria li span { margin-bottom: 0; }

#addcriteria { text-align: right; }

/* form */

#page > header + h4 { margin-top: -39px; }

#page > header + h4 { display: none; }

form {
	padding: 0;
	max-width: 1000px;
}

fieldset { background: #fefefe; }

textarea {
	margin: 0;
	width: 99%; max-width: 99%;
}

input, textarea { display: block; }

textarea { height: 100px; }

input[type=submit] {
	float: right;
	position: relative;
	right: 1em;
}

select option { max-width: 100%; }

p, label, td > ul, td > dl {
	font-size: .8em;
}

/* class-level selectors */

.assessments li:last-of-type {
	list-style-type: none;
	padding-top: .5em;
	border-top: thin solid gainsboro;
}

input[type=text],
input[type=tel],
input[type=email] { width: calc(99% - 2em); max-width: calc(99% - 2em); }

input[type=text],
input[type=tel],
input[type=email],
input[type=number],
textarea {
	padding: .5em 1em;
	border: thin solid aliceblue;
	border-radius: .3em;
	width: calc(99% - 2em); max-width: calc(99% - 2em); height: 2em;
}

input[type=submit],
input[type=reset] { margin: 1em 0 2em 107px; }

input[type=text].nowidth,
input[type=number],
td > select {
	margin-bottom: 0;
	width: auto;
	display: initial;
} 

input.narrow {
	width: 3em;
	display: initial;
}

textarea { resize: none; }

a[href="templater_newtest.php"] {
	text-align: right;
	padding-right: 164px;
	display: block;
}

.assessments { padding: 0 2em; }

.truncate {
  width: 250px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0;
  margin-right: 0;
}

.slos dd + dt {
	border-top: thin solid #ebebeb;
	margin-top: .5em;
}

/* SLOs */

button[type=button] { margin: .4em; }

fieldset fieldset p { margin-left: .2em; }

.plan label, .outcomes label {
	margin-top: 1em;
	margin-left: .2em;
}

.plan textarea, .outcomes textarea { width: 99%; resize: none; }

.plan textarea:target { border: 1px solid; }

.error {
	color: rgb(241,28,17);
	display: block;
}
label.error {
	position: relative;
	top: -.5em;
}

.calendar td { padding: .5em; }

td.unit { text-align: center; padding-left: 0; }

td:not(.unit) { font-size: .85em; }

textarea.ui-textarea { border: none; height: auto; }

/*#lessons fieldset { margin-bottom: 27px; }*/

#lessons fieldset fieldset { border: 0; }

#templater_i > div fieldset {
	margin-bottom: .5em;
}

.lis { margin-left: 27px; }

#page {
	max-width: 1200px;
}

.lesson label { cursor: pointer; }

.lesson input[type=checkbox] { display: none; }

.lesson input[type=checkbox] ~ * { display: none; }

.lesson input[type=checkbox]:checked ~ * { display: block; }

.lesson input[type=radio] { display: none; }

.lesson input[type=radio] ~ * { display: none; }

.lesson input[type=radio]:checked ~ * { display: block; }

.lesson_test input[type=radio] { display: none; }

.lesson_test input[type=radio] ~ * { display: none; }

.lesson_test input[type=radio]:checked ~ * { display: block; }

@media screen and (min-width: 40em) {

	/* tag selectors */

	body { background: url('../images/ducky.png') 1900px 100px fixed no-repeat; }

	h1 {
		background: url('../images/AiCAOC_short.png') left top no-repeat;
		margin-bottom: 30px;
		width: 300px;
		height: 55px;
	}

	#page > header + h4 { display: block; }

	#page > header + h4 { margin-top: initial; }

	table { width: initial; }

	td {
		padding-left: 10px;
		padding-right: 10px;
		display: table-cell;
	}

	td:first-of-type {
		display: table-cell;
		width: 33%;
	}

	td h4 label::after { content: ''; }
	
	.unit { padding-right: 0; width: 100px; }

	td > h4, td > h3, td > p, td > ul, td > dl {
		margin-left: 0;
	}
	
	td > dl { padding-left: 0; }

	textarea {
		height: 100px;
	}

	#templater_i > div {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	
	#templater_i > div fieldset {
		flex: 1;
		margin: 0 .5em 0;
	}
	
	#lessons form > fieldset {
		padding-top: 1em;
		padding-bottom: 0;
		margin-left: .5em;
	}
	/*
	#submit-syllabus {
		float: left;
	}
	*/
	#submit-this,
	#submit-that {
		display: flex;
		justify-content: center;
	}
	
}

@media screen and (min-width: 50em) {

	h1 {
		background: url('../images/AiCAOC_sm.png') left top no-repeat;
		margin-left: 50px;
		height: 75px;
	}

	h2, h3, h4, p {
		margin-left: 107px;
	}

	h4 { margin-top: 1rem; }

	form#whatever {
		margin: 0 107px;
	}
	
	#labels {
		margin: 0 107px;	
		display: flex;
		justify-content: space-between;
	}

	table, fieldset.lesson { margin: 0 107px; }

	tr:nth-of-type(1),
	tr:nth-of-type(2),
	tr:nth-of-type(3) { display: table-row; }
	
	td {
		border: 0;
		vertical-align: baseline;
	}
	
	td.middle { vertical-align: middle; }
	
	td.vtop {
		vertical-align: top;
	}
	
	td:first-of-type { text-align: right; }
	
	.remove { margin-top: .5em; }
	
	.outcomes {
		border: 0;
	}
	
}