@charset "UTF-8";

* {
	margin:0;
	padding:0;
	border:0;
	font-size:0;
}
body {
	-webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%;
	font-family:'Open Sans', sans-serif;
}
.Lora {
	font-family: 'Lora', serif;
}
img {
	max-width:100%;
}

/* ALL NAV */
.nav {
	height:80px;
	width:100%;
	overflow:hidden;
	border-bottom:1px solid #ccc;
}
.navInner {
	width:100%;
	max-width:1000px;
	margin:0 auto;
}
.navLogo {
	padding:10px;
	height:60px;
	float:left;
	cursor:pointer;
}
.navTitle {
	float:left;
	padding:10px;
	font-weight:700;
	-webkit-font-smoothing:antialiased;
	color:#333;
	font-size:18px;
	line-height:60px;
}
.navLinks {
	float:right;
	display:block;
}
.navLink {
	display:inline-block;
	color:#333;
	text-decoration:none;
	font-size:16px;
	padding:28px;
	line-height:24px;
	margin-left:10px;
	letter-spacing:0.2px;
}
.navLink:hover {
	background:#EEE;
	colour:#222;
}
#miniMenuBtn {
	background:url('menu.png');
	background-size:32px 32px;
	background-position:center;
	width:80px;
	height:80px;
	float:right;
	background-repeat:no-repeat;
	display:none;
}

/* MAIN */
.main {
	width:100%;
	min-height:350px;
	background:#f3f3f3;
	overflow:auto;
}
.mainInner {
	width:100%;
	max-width:960px;
	padding:0 0 20px 0;
	min-height:350px;
	margin:20px auto 50px auto;
}
.box {
	background:#fff;
	margin-bottom:40px;
	padding:10px 0;
}
.box p {
	color:#333;
	font-size:14px;
	padding:10px 10px 15px 20px;
	display:block;
}
.box p.pageHeader {
	padding:0 0 15px 15px;
	font-size:20px;
	font-weight:700;
	color:#444;
}
.boxDivideText {
	font-weight:700;
	color:#bbb;
	text-transform:uppercase;
	padding:0 0 20px 13px;
	display:block;
	font-size:14px;
	letter-spacing:0.5px;
}
.boxFull {
	width:100%;
	background:#fff;
	min-height:500px;
}
.boxSidebarLeft {
	width:250px;
    float:left;
	background:#fff;
	min-height:100px;
	padding:10px 0;
}
.boxContentRight {
	margin-left:275px;
	background:#fff;
	min-height:200px;
    padding:10px 0;
}
.boxContainerRight {
	margin-left:275px;
	min-height:500px;
}
.boxContentLeft {
	margin-right:275px;
	background:#fff;
	min-height:200px;
}
.boxContainerLeft {
	margin-right:275px;
	min-height:500px;
}
.boxSidebarRight {
	width:250px;
    float:right;
	background:#fff;
	min-height:100px;
	padding:15px 0;
}
.boxSidebarNumber {
	display:none;
	font-size:20px;
	font-weight:600;
	color:#fff;
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
}
.boxTitle {
	font-weight:700;
	color:#444;
	text-transform:uppercase;
	display:block;
	font-size:14px;
	-webkit-font-smoothing:antialiased;
	letter-spacing:0.5px;
	line-height:40px;
	height:40px;
	padding:0px 0 0px 15px;
}
.boxSubTitle {
	font-weight:700;
	color:#999;
	text-transform:uppercase;
	display:block;
	font-size:12px;
	-webkit-font-smoothing:antialiased;
	letter-spacing:0.5px;
	line-height:16px;
	height:16px;
	padding:0px 0 0px 20px;
}
.boxText {
	color:#333;
	font-size:14px;
	padding:10px 20px;
	display:block;
}
.boxImg {
	padding:10px 0;
	max-width:100%;
	display:block;
}

.foot {
	width:100%;
	background:#222;
}
.footInner {
	margin:0 auto;
	width:100%;
	max-width:1000px;
}
.footNote {
	width:100%;
	max-width:700px;
	border-bottom:1px solid #444;
	color:#BBB;
	-webkit-font-smoothing:antialiased;
	text-decoration:none;
	font-size:14px;
	text-align:center;
	padding:15px 0 10px 0;
	margin:0 auto;
	line-height:40px;
}
.footLinks {
	display:inline-block;
	margin:20px 0;
	width:100%;
	text-align:center;
}
.footLink {
	display:inline-block;
	color:#BBB;
	text-decoration:none;
	font-size:14px;
	letter-spacing:1px;
	line-height:40px;
	-webkit-font-smoothing:antialiased;
	margin:0 20px;
}
.footLink:hover {
	color:#FFF;
}

/* CLASS COVER */
.classCover {
	height:250px;
	width:100%;
}
.classCoverOverlay {
	background: rgba(0,0,0,0.3);
	height:100%;
	width:100%;
}
.classCoverInner {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	padding:20px 0;
	position:relative;
	top:50%;
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
	color:#fff;
}
.classCoverTitle {
	line-height:80px;
	font-size:50px;
	font-weight:700;
	letter-spacing:2px;
	text-align:center;
}
.classCoverAdmin {
	line-height:25px;
	-webkit-font-smoothing:antialiased;
	font-size:16px;
	text-align:center;
}

/* CLASS NAV */
.classNav {
	height:60px;
	width:100%;
}
.classNavInner {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	text-align:center;
}
.classNavLink {
	color:#fff;
	text-decoration:none;
	line-height:20px;
	font-size:16px;
	letter-spacing:0.5px;
	padding:20px 30px;
	display:inline-block;
}

.classNavLink:hover {
	background:rgba(255,255,255,0.1);
}


/* BUTTONS */
.button {
	color:#ffffff;
	cursor:pointer;
	margin:20px;
	font-size:14px;
	line-height:16px;
	text-align:center;
	padding:12px 30px;
	letter-spacing:0.5px;
	-webkit-font-smoothing:antialiased;
	display:inline-block;
	-webkit-appearance:none;
	border-radius:0;
}
.blueButton {
	background:#233C7B;
}
.redButton {
	background:#83171A;
}
.blueButton:hover {
	background:#1A3371;
}
.redButton:hover {
	background:#731114;
}

.subtleLink {
	color:#999;
	font-size:12px;
	display:block;
	margin:5px 20px;
	text-decoration:none;
}


/* CLASSES */
.classes {
	width:100%;
	min-height:400px;
	background:#eeeeee;
	padding:15px 0;
}
.classesInner {
	width:100%;
	max-width:960px;
	padding:0;
	margin:0 auto;
}
.classBox {
	display:inline-block;
	margin:20px;
	background:#111;
	width:280px;
	height:200px;
	overflow:hidden;
	cursor:pointer;
}
.classBoxCover {
	background-repeat:no-repeat;
	height:120px;
	width:280px;
}
.classBoxInfo {
	height:60px;
	width:260px;
	padding:10px;
	color:#fff;
}
.classBox:hover .classBoxInfo {
	opacity:0.9;
}
.classBoxInfoTitle {
	line-height:35px;
	font-size:30px;
	font-weight:700;
	max-width:100%;
	white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.classBoxInfoAdmin {
	line-height:25px;
	-webkit-font-smoothing:antialiased;
	font-size:16px;
	max-width:100%;
	white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* INPUTS */
.input {
	font-size:14px;
	padding:8px;
	color:#333;
	border:1px solid #ccc;
	letter-spacing:0.3px;
	margin:5px;
	width:200px;
	max-width:100%;
	-webkit-appearance:none;
	border-radius:0;
}
input:focus {
	outline:none;
}
.input:focus {
	outline:none;
	border-left:1px solid #83171A;
}
.box .input {
	margin-left:20px;
}
.box .inputLabel {
	padding:10px 0 5px 20px;
}
#loginError {
	display:none;
	padding:11px 20px;
	background:#E74C3C;
	color:#fff;
	font-size:15px;
	border-radius:0 5px 5px 0;
	font-family:inherit;
	border:none;
	letter-spacing:0.5px;
	width:220px;
	margin:10px 0 15px 0px;
}

/* REMINDERS */
.reminderBox {
	padding: 0 15px;
}
.reminderItem {
	background:#fff;
}
.reminderItem:hover {
	background:#f6f6f6;
}
.reminderTitle {
	padding:2px 5px 2px 10px;
	margin:3px 0;
	font-size:16px;
	color:#333;
	border-left:5px solid #ccc;
	display:block;
}
.reminderText {
	padding:0 5px 10px 15px;
	display:block;
	color:#999;
	font-size:14px;
	font-weight:400;
}

/* PHOTOS */
.albumsBox {
	border-bottom:1px solid #eee;
	margin: 10px 0;
}
.albumItem {
	height:50px;
	border-top:1px solid #eee;
}
.albumItem:hover {
	background:#f6f6f6;
	cursor:pointer;
}
.albumImg {
	width:50px;
	height:50px;
}
.albumTitle {
	display:inline-block;
	line-height:40px;
	vertical-align:top;
	padding:5px 5px 5px 10px;
	color:#666;
	font-size:14px;
	letter-spacing:0.2px;
	width:calc(100% - 65px);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.boxSubtitle {
	color:#666;
	display:block;
	font-size:12px;
	-webkit-font-smoothing:antialiased;
	letter-spacing:0.2px;
	padding:0px 0 0px 15px;
}
.photoBox {
	font-size:0;
	padding:0 5px;
	margin:10px 0;
}
.photoItem {
	margin:5px;
	display:inline-block;
	width:125px;
	height:125px;
	position:relative;
}
.photo {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
.photoOverlay {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	transition:ease all 0.2s;
	background:rgba(0,0,0,0.7);
	font-size:18px;
	font-weight:700;
	color:#fff;
	line-height:125px;
	text-align:center;
	letter-spacing:0.5px;
	text-transform:uppercase;
}
.photoOverlay:hover {
	opacity:1;
	cursor:pointer;
}


.box p b, .box p i, .box p em, .box p u, .box p del, .box p strong, .box p br {
	font-size:14px !important;
}
.box ul, .box ol {
	margin:0px 20px;
}
.box li {
	font-size:14px;
	margin-left:20px;
	color:#333;
}
.box a {
	font-size:14px;
	line-height:22px;
	text-decoration:underline;
	color:#34495E;
}


.classNavOverflow {
	display:none;
	position:absolute;
	background:#333;
	width:100%;
	z-index:999;
}
.classNavOverflow a.classNavLink {
	display:block;
	text-align:center;
	border-top:1px solid #fff;
}
iframe {
    margin: 20px;
}
#lightbox {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.6);
}
#lightboxHolder {
	position: relative;
	height: 100%;
	width: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
#lightboxContent {
	max-width: 90%;
	max-height: 90%;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	display: inline-block;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	background: #fff;
}
#lightboxImageBox {
	width:calc(100% - 300px);
	display: inline-block;
	vertical-align: top;
	position: relative;
}

#lightboxImage {
	max-height: 100%;
	max-width: 100%;
	max-height: calc(100vh - (100vh * 0.1));
}

#lightboxDetails {
	width: 300px;
	height: 100%;
	display: inline-block;
	vertical-align: top;
}
#lightboxDetailsTitle {
	font-size: 16px;
	color: #333;
	font-weight: 700;
	padding: 10px 5px 0 15px;
}
#lightboxDetailsSubtitle {
	font-size: 12px;
	color: #999;
	padding: 2px 5px 0 15px;
}
#lightboxDetailsDescription {
	font-size: 12px;
	color: #333;
	padding: 5px 5px 0 16px;
}
#lightboxImageBack {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 30%;
	cursor: pointer;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEHRSTlMAECAwYICQn6CvsMDP0O/wNO8ACAAAALpJREFUeAHt1DFuxDAMRNGhyFhKbEu8/2mDxQLccqspBM8/AKd6xNeUcgc1mzOo96/MDPL9zA5WPd91497PPMHoJysHocgqdrzvs+4f5PuDA7ju/xGBvbqNfZ8LbDXyfRdgARZgARbgHQALsAALsAC3zQHD7hq4DIzaqoVfUPLPQqcvHAAfGn+B/+wYjRqY/IUGPrhNFx5DWqRFWqRFWqRFWqRFWqRPcBeGAUxwA5RqIUDM1gpQc4d6ev+lojSx/012HwAAAABJRU5ErkJggg==);
	background-position: 20% 50%;
	background-repeat: no-repeat;
	background-size: 50px;
	opacity: 0.2;
}
#lightboxImageNext {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 30%;
	cursor: pointer;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEHRSTlMAECAwYICQn6CvsMDP0O/wNO8ACAAAALpJREFUeAHt2sENwyAUg+ECaaFNwnv7T9tDJXeCXxGKPYB9gI8TD+f2aY3t3+YsaH9mHuBCzyQXSs9fOjSwZ7ILLZUndcTKturCSwMTAjfwhY8WINLl1MKx6kINHFzchrRJm7RJm7RJm7RJm7RJ1zXBlUMDJzLwVn9Uor//+xt7TaPR0Fbspx+7NtU/iP4K9DPArgcM9BuwARuwARuwARuwARswkB0CppRB9SuDAqZsWL8WIsrlnwYc5wttBTSxCx7/ZAAAAABJRU5ErkJggg==);
	background-position: 80% 50%;
	background-repeat: no-repeat;
	background-size: 50px;
	opacity: 0.2;
}
#lightboxImageNext:hover, #lightboxImageBack:hover {
	opacity: 1;
}
#lightboxDetailsCancel {
	position: absolute;
	top: 6px;
	right: 9px;
	font-size: 14px;
	color: #ccc;
	font-weight: 700;
	cursor: pointer;
}

@media (max-width:980px) {
	.navTitle {
		width:150px;
		line-height:20px;
	}
	.mainInner {
		max-width:640px;
	}
	.boxContentRight, .boxContainerRight {
		margin-left:0;
	}
	.boxContentLeft, .boxContainerLeft {
		margin-right:0;
	}
	.boxSidebarLeft, .boxSidebarRight {
		width:auto;
		float:none;
		margin-bottom:40px;
		min-height:50px;
	}
	.boxSidebarContent {
		display:none;
	}
	.boxSidebarNumber {
		display:inline-block;
	}
	.reminderBox {
		padding:0;
	}
	.reminderItem {
		border-left:0;
		background:#fff;
		padding:10px 0 5px 5px;
		border-top:1px solid #ddd;
	}
	.reminderItem:hover {
		border-left:0;
		background:#f6f6f6;
		cursor:pointer;
	}
	.boxTitle {
		display:inline-block;
		line-height:40px;
		height:40px;
		display:inline-block;
		padding:0px 0 0 15px;
		vertical-align:top;
	}
	#expandReminders {
		cursor:pointer;
		padding:0;
	}
	#expandReminders .boxTitle {
		padding:5px 13px;
	}
	.photoBox {
		margin:10px auto;
		display:block;
		width:540px;
	}
}
@media (max-width:750px) {
	.navLinks {
		position:absolute;
		top:80px;
		z-index:9999;
		width:100%;
		border-top:1px solid #333;
		display:none;
	}
	.navLink {
		background:#eee;
		width:100%;
		text-align:center;
		padding:15px 0;
		border-bottom:1px solid #333;
		margin-left:0px;
	}
	.navLink:hover {
		background:#ddd;
	}
	#miniMenuBtn {
		display:block;
		cursor:pointer;
	}
	.classCover {
		height:200px;
	}
	.classNavLink {
		padding:20px 20px;
	}
	.classCoverTitle {
		font-size:30px;
	}
	#lightboxContent {
		max-width:100%;
	}
	#lightboxImageBox {
		width:auto;
		max-width:100%;
		display:block;
	}
	#lightboxDetails {
		width:100%;
		height:auto;
		display:block;
	}
	#lightboxImage {
		max-height:calc(90vh - 60px);
	}
	#lightboxDetails {
		height:60px;
	}
	#lightboxDetailsDescription {
		display:none;
	}
}
@media (max-width:665px) {
	.classBox {
		margin:20px auto 30px auto;
		display:block;
	}
}
@media (max-width:580px) {
	.photoBox {
		margin:10px auto;
		display:block;
		width:405px;
	}
}
@media (max-width:430px) {
	.photoBox {
		margin:10px auto;
		display:block;
		width:270px;
	}
}
@media (max-width:350px) {
	.navTitle {
		display:none;
	}
}