@import "colors.less";

@font-face {
	font-family: Cubano;
	src: url("../fonts/Cubano-Regular.otf");
}



body {
	margin: 0px;
	background: white;
	font-family: 'Raleway', 'sans-serif';
}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	/* color: @dark_gray; YEN: To fixed contrast errors */

	a {
		font-weight: normal;
		color: @dark_gray; 
	}

	a:hover {
		color: @magenta; /* Changed by Kate */
	}
}

h1 {
	font-size: 36px;
	font-family: 'Cubano';
    margin-top: 10px;

	span.headerTag {
		font-family: 'Raleway', 'sans-serif';
		font-size: 10px;
		background: @red;
		color: white;
		padding: 3px 5px;
		border-radius: 8px;
		position: relative;
		top: -4px;
		text-transform: uppercase;
	}
}

a {
	text-decoration: none;
	font-weight: bold;
	color: @main_color;
}

a.button {
	background: @main_color;
	color: white;
	border-radius: 8px;
	padding: 5px 8px;
	cursor: pointer;
}

a:hover {
	text-decoration: underline;
		color: @magenta; /* Changed by Kate */
}

span.toggle {
	border: 2px solid @main_color;
	color: @main_color;
	padding: 3px 5px;
	cursor: pointer;
	text-align: center
}

span.toggleLeft {
	border-right-width: 1px;
	border-radius: 8px 0px 0px 8px;;
}

span.toggleCenter {
	border-left-width: 1px;
	border-right-width: 1px;
	border-radius: 0px;
}

span.toggleRight {
	border-left-width: 1px;
	border-radius: 0px 8px 8px 0px;
}

span.toggleOn {
	background: @main_color;
	color: white;
}

span.bullet {
	color: @dark_gray; /* changed by jiwon */
}

span.answerYes {
	color: @green;
	font-weight: bold;
}

span.answerNo {
	color: @red;
	font-weight: bold;
}

input,select,textarea {
	font-family: 'Raleway', 'sans-serif';
	font-size: 16px;
}

input[type=text],input[type=password],textarea,select {
	border-radius: 6px;
	padding: 3px 8px;
	border: 2px solid @light_gray;
	background: white;
}

input[type=submit],input.button,button {
	font-family: 'Raleway', 'sans-serif';
	font-size: 16px;
	font-weight: bold;
	background: @red;
	/* color: white; Yen: fix contrast */
	border-radius: 8px;
	padding: 5px 8px;
	margin: 0px;
	border: 0px;
}

hr {
	border: 0px;
	border-top: 2px solid @light_yellow;
	clear: both;
}

div.clear {
	clear: both;
}

div.header {
	background: @menu_background_color;

	div.headerInner {
		max-width: 1024px;
		margin: 0px auto;
	}

	h1 {
		font-family: 'Cubano';
		font-weight: normal;
		margin: 0px 0px 0px 25px;
		font-size: 36px;
		float: left;
		height: 70px;
		line-height: 70px;
        overflow: visible;
        
        img {
            position: relative;
            left: -25px;
            top: -5px;
        }

		a {
			color: white;
			font-weight: normal;
		}
	}

	ul {
		float: right;
		margin: 0px 25px 0px 0px;
		height: 70px;
		line-height: 70px;
		white-space: nowrap;

		li {
			display: inline;
			background: white;
			border-radius: 8px;
			padding: 5px 8px;
			margin: 0px;
		}

		li.signIn {
			background: @dark_gray; /* Changed by Kate */
			padding: 5px 0px 5px 5px;

			input[type=text],input[type=password] {
				border: 0px;
			}
            
            button {
                background-color: @main_color; /* changed by jiwon */
            }
		}
	}
}

div.submenu {
	background: @menu_background_color;
	padding: 10px 0px;

	div.submenuInner {
		max-width: 900px;
		margin: 0px auto;
        padding-left: 124px;
	}

	ul {
		margin: 0px 0px 0px 50px;
		padding: 0px;
		float: left;


		li {
			display: inline;
			margin: 0px;

			a {
				background: white;
				border-radius: 8px;
				padding: 5px 8px;
			}

			a:hover {
				background: @main_color; /* changed by jiwon */
                color: white; /* changed by jiwon */
			}

			a.attend {
				background: @yellow;
				color: @red;
			}

			a.attend:hover {
				background: @light_green;
			}
		}
	}

	ul.rightMenu {
		float: right;
		margin: 0px 50px 0px 0px;
	}
}

div.notification {
	background: @yellow;
	padding: 10px 0px;

	div.notificationInner {
		max-width: 1024px;
		margin: 0px auto;

		p {
			text-align: center;
			margin: 5px 100px;
		}
	}
}

div.content {
	max-width: 924px;
	margin: 0px auto;
	padding: 60px 50px;

	div.bigAlert {
		border: 2px solid @dark_gray; /* Changed by Kate */
		border-radius: 30px;
		text-align: center;
		padding: 5px 30px;
        margin-top: 20px;

		p.applyButton a {
			background: @green;
			color: white;
			border-radius: 20px;
			font-size: 16px;
			padding: 5px 12px;
		}
	}

	div.campEnded {
		background: @light_yellow;
		border-radius: 4px;
		text-align: center;
		padding: 5px 10px;
		margin-bottom: 10px;

		p {
			margin: 0px;
		}
	}

	div.leftContent {
		float: left;
		width: 650px;
		margin-bottom: 100px;

		h1 {
			font-size: 30px;
			font-family: 'Raleway', 'sans-serif';
		}

		p.averageRating {
			font-size: 18px;

			span.rating {
				font-size: 36px;
			}
		}

		span.rating {
			color: @red;
			font-weight: bold;
		}

		p.searchBar {
			width: 650px;
			margin-top: 0px;

			input {
				width: 630px;
			}

			input.calendar {
				width: 510px;
			}

			span.listGridToggle {
				position: relative;
				width: 100px;
				margin-left: 20px;
				display: inline-block;
			}
		}

		div.sessionInfo {
			background: #ffeecc;
			padding: 5px 10px;
			margin-bottom: 30px;
			font-size: 13px;

			p {
				margin: 0px;
			}

			p.sessionLeaders {
				span.delete {
					display: inline-block;
					text-align: center;
					vertical-align: center;
					position: relative;
					width: 15px;
					height: 15px;
					font-weight: bold;
					color: @red;
					background: white;
					border-radius: 10px;
					line-height: 15px;
					cursor: pointer;
					margin-left: 2px;
				}

				span.delete:hover {
					color: white;
					background: @red;
				}
			}

			hr {
				border-top: 1px solid white;
				margin: 5px -10px;
			}
		}

		div.blogPost {
			margin-bottom: 50px;

			h2 {
				margin-bottom: 2px;
			}

			p.blogPostInfo {
				margin-top: 0px;
				font-size: 13px;
			}

			p.blogComments {
				font-size: 12px;
			}
		}

		div.feedbackItem {
			border: 2px solid @sky_blue;
			padding: 5px 8px;
			border-radius: 12px;
			margin-bottom: 10px;

			p {
				margin: 0px;
			}

			p.rating {
				font-size: 16px;
				font-weight: bold;
				color: @red;
			}

			p.feedback {
				font-size: 16px;

				a {
					font-weight: normal;
					color: black;
				}

				a:hover {
					color: @main_color;
				}
			}

			p.info {
				font-size: 12px;
			}

			p.feedbackComments {
				margin: 8px 0px;
				font-size: 12px;
			}
		}

		div.expandableHints {
			border: 2px solid @dark_gray; /* Changed by Kate */
			border-radius: 16px;
			padding: 0px 15px;
			margin-bottom: 10px;
			font-size: 12px;

			h2 {
				margin: 5px 0px 0px 0px;
			}

			div.expandableContent {
				display: none;
			}
		}

		img.aboutProfileImage {
			float: right;
			border: 2px solid @light_gray;
			border-radius: 8px;
			margin: 0px 0px 10px 10px;
		}

		img.sessionImage {
			float: right;
			border: 2px solid @light_gray;
			border-radius: 8px;
			margin: 0px 0px 10px 10px;
		}

		img.projectImage {
			float: right;
			border: 2px solid @light_gray;
			border-radius: 8px;
			margin: 0px 0px 10px 10px;
		}

		div.rateSession {
			border: 2px solid @red;
			border-radius: 16px;
			padding: 8px 15px 0px 15px;
			margin-bottom: 10px;
			font-size: 12px;

		}
	}

	div.rightSidebar {
		float: right;
		width: 250px;
		font-size: 13px;

		div.sidebarBlock {
			border: 2px solid @dark_gray; /* Changed by Kate */
			border-radius: 16px;
			padding: 0px 15px;
			margin-bottom: 10px;

			h2 {
				font-size: 16px;
				font-weight: bold;

				a {
					font-weight: bold;
					color: @main_color;
				}
			}

			li {
				margin-bottom: 10px;
			}

			p.notes {
				font-size: 10px;
				color: @dark_gray;
			}

			p {
				input {
					width: 196px;
				}
			}

			form {
				p {
					input {
						width: 216px;
					}
				}
			}

			img {
				max-width: 216px;
			}
		}

		div.locationMapBlock {
			border: 0px;
			padding: 0px;
			height: 240px;
			border-radius: 0px;

			p {
				margin: 0px;

				img {
					border-radius: 16px;
					border: 5px solid @dark_gray; /* Changed by Kate */
				}
			}
		}

		div.sidebarUserProfile {
			padding: 3px;
			margin-bottom: 5px;

			p {
				margin: 0px;
				line-height: 25px;
			}

			img {
				vertical-align: middle;
				margin-right: 5px;
				border-radius: 8px;
			}

			span.delete {
				display: inline-block;
				text-align: center;
				vertical-align: center;
				position: relative;
				width: 15px;
				height: 15px;
				font-weight: bold;
				color: @red;
				background: white;
				border-radius: 10px;
				line-height: 15px;
				cursor: pointer;
				margin-left: 2px;
			}

			span.delete:hover {
				color: white;
				background: @red;
			}
		}

		p.sidebarHeader {
			font-size: 22px;
			font-family: 'Cubano';
			margin: 20px 0px 3px 0px;
			text-align: center;
			color: @dark_gray;
		}

		p.button {
			text-align: center;
			margin: 0px 0px 10px 0px;

			a {
				background-color: @main_color;
				border-radius: 16px;
				padding: 10px 15px;
				display: block;
				font-size: 20px;
				color: white;
			}
		}

		div.buttonWithoutAnchor {
			text-align: center;
			margin: 0px 0px 10px 0px;
			background-color: @main_color;
			border-radius: 16px;
			padding: 10px 15px;
			display: block;
			font-size: 20px;
			color: white;
			cursor: pointer;
			font-weight: bold;

			p.small {
				font-size: 12px;
				margin: 0px;
			}

			a {
				color: white;
			}
		}

		div.disabledButtonWithoutAnchor {
			text-align: center;
			margin: 0px 0px 10px 0px;
			background-color: @light_gray;
			border-radius: 16px;
			padding: 10px 15px;
			display: block;
			font-size: 20px;
			color: white;
			cursor: pointer;
			font-weight: bold;

			p.small {
				font-size: 12px;
				margin: 0px;
			}
		}

		div#cancelRSVP {
			background: @red;
		}

		div#cancelRSVPWaitlist {
			background: @magenta; /* Changed by Kate */
		}
	}
}



div.sessionInfoBlock {
	border-radius: 16px;
	margin-bottom: 10px;
	border: 5px solid @dark_gray; /* Changed by Kate */
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;

	p {
		margin: 2px 0px;
	}

	p.sessionDay {
		font-weight: bold;
		font-size: 18px;
	}

	p.sessionTime {
		font-size: 16px;
	}

	p.sessionLocation {
		font-size: 16px;
	}

	p.sessionRSVPs {
		font-size: 11px;
	}
}



div.contentTabs {
	border-bottom: 2px solid @main_color;

	div.tab {
		display: inline-block;
		border: 2px solid @main_color;
		border-bottom-width: 0px;
		color: @main_color;
		border-radius: 8px 8px 0px 0px;
		font-size: 12px;
		font-weight: bold;
		padding: 3px 7px;
		cursor: pointer;
	}

	div.activeTab {
		background: @main_color;
		color: white;
	}
}



div.sessionList {
	h2 {
		font-size: 22px;
		font-family: 'Cubano';
		color: @dark_gray;
		margin-bottom: 2px;
	}

	p.note {
		margin-top: 50px;
		font-size: 11px;
		opacity: 0.35;
	}
}

div.sessionListItem {
	border: 2px solid @sky_blue;
	border-radius: 16px;
	padding: 3px 10px 5px 10px;
	margin-bottom: 10px;
	overflow-x: hidden;

	div.sessionVoteButton {
		float: left;
		width: 50px;
		background: @red;
		border-radius: 10px;
		color: white;
		cursor: pointer;
		text-align: center;
		margin-right: 5px;
		margin-top: 2px;
		margin-left: -3px;
		font-size: 11px;
		font-weight: bold;
		position: relative;
		vertical-align: middle;
		padding-top: 14px;
		height: 30px;
	}

	div.votedFor {
		background: @main_color;
	}

	div.sessionLeftColumn {
		float: left;
		width: 405px;
	}

	div.sessionVoteLeftColumn {
		float: left;
		width: 350px;
	}

	div.sessionRightColumn {
		float: right;
		width: 220px;
		margin-top: 3px;

		p {
			text-align: right;
		}
	}

	h3 {
		margin: 0px;

		span.sessionTime {
			color: black;
			font-size: 13px;
		}
	}

	p {
		margin: 0px;
		font-size: 12px;
	}

	p.sessionTime {
		font-weight: bold;
	}

	p.sessionLeaders {
	}

	p.sessionInfo {
		b.overlapping {
			color: @red;
		}
	}

	p.sessionTags {
	}

	p.sessionRSVPs {
	}

	p.sessionVotes {
		color: @red;
		font-size: 15px;
	}

	p.rateSession {
		padding: 10px 0px;
	}
}

div.sessionListItemNew {
	border: 2px solid @aqua; /* Changed by Kate */
}

div.sessionListItemRsvp {
	border: 2px solid @magenta; /* Changed by Kate */
}

div.sessionListItemWaitlist {
	border: 2px solid @spring_green; /* Changed by Kate */
}

div.projectListItem {
	border: 2px solid @sky_blue;
	border-radius: 12px;
	padding: 3px 4px 5px 9px;
	margin-bottom: 5px;

	h3 {
		margin: 0px;

		a {
			color: @main_color;
		}
	}

	p {
		margin: 0px;
		font-size: 11px;
	}
}

div.userListItem {
	border: 2px solid @sky_blue;
	border-radius: 12px;
	padding: 5px 4px 3px 4px;
	margin-bottom: 5px;
	background-color: white;
	z-index: -100;

	p.profileImage {
		margin: 0px;
		float: left;
	}

	p.profileInfo {
		margin: 0px 0px 0px 5px;
		line-height: 100%;
		position: relative;
		top: 2px;

		span.shortAbout {
			color: @dark_gray;
			font-size: 11px;
		}
	}

	img {
		border-radius: 8px;
		position: relative;
		top: -1px;
		vertical-align: middle;
		margin-right: 5px;
	}

	a.button {
		font-size: 11px;
		padding: 2px 5px;
		display: inline-block;
		margin: 3px 0px;
	}
}

div.comments {

	div.addCommentWrapper {
		min-height: 40px;
	}

	a.button {
		background: @main_color;
		border-radius: 8px;

		color: white;
		padding: 3px 5px;
		font-size: 12px;
		cursor: pointer;
	}

	a.cancelButton {
		background: @light_gray;
		border-radius: 8px;
		color: white;
		padding: 3px 5px;
		font-size: 12px;
		cursor: pointer;
	}

	p.addComment {
	}

	div.commentForm {
		display: none;

		p {
			margin: 0px;
		}

		textarea {
			width: 630px;
			font-size: 14px;
			height: 100px;
		}
	}

	div.commentListItem {
		margin-top: 30px;
		margin-bottom: 30px;

		a.atReply {
			font-weight: normal;
			font-size: 12px;
			text-transform: uppercase;
		}

		p {
			margin: 0px;
			font-size: 14px;
		}

		p.commentInfo {
			font-size: 12px;
			margin-bottom: 2px;
			color: @dark_gray; /* changed by jiwon */
		}

		div.commentForm {
			margin-top: 10px;
		}

		p.addComment {
			margin-top: 5px;
		}
	}
}

a#showHidePreviousSessions {
	display: block;
	text-align: center;
	font-size: 11px;
	color: @main_color;
	background: #eeeeee;
}

table.calendar {
    border-spacing: 1px;
    border-collapse: separate;
    font-size: 12px;

	td {
		width: 92px;
		padding: 0px;
		border-radius: 4px;
		border: 1px solid black; /* Changed by Kate */
		vertical-align: top;
		height: 60px;

		p.date {
			margin: 0px;
			background: black; /* Changed by Kate */
			color: white;
			font-size: 10px;
			text-transform: uppercase;
			text-align: center;
			padding: 3px 0px;
		}

		div.sessionGridItem {
			position: relative;
			font-size: 10px;
			max-height: 64px;
			margin: 2px;
			overflow: hidden;

			div.sessionGridItemInner {
				border-radius: 4px;
				border: 2px solid @aqua; /* Changed by jiwon */
				padding: 2px 4px;
				background: white;
				max-height: 56px;
				max-width: 76px;
				overflow-x: hidden;

				b.overlapping {
					color: @red;
				}

				a.sessionGridLocation{
					color: @dark_gray; /* Changed by Kate */
					font-weight: normal;
				}
			}
		}

		div.sessionGridItemNew {
			div.sessionGridItemInner {
				border: rgba(0, 255, 255, 0.5) /* changed by jiwon */
			}
		}

		div.sessionGridItemRsvp {
			div.sessionGridItemInner {
				border: 2px solid @magenta; /* Changed by Kate */
			}
		}

		div.sessionGridItemWaitlist {
			div.sessionGridItemInner {
				border: 2px solid @spring_green; /* Changed by Kate */
			}
		}

		div.sessionGridItem:hover {
			z-index: 100;
			overflow: visible;

			div.sessionGridItemInner:hover {
				max-height: 1000px;
			}
		}
	}

	td.grayDay {
		border: 1px solid white;

		p.date {
			background: white;
		}
	}

	tr.dayOfWeek {
		td {
			border: 1px solid @main_color; /* changed by jiwon */
			background: transparent; /* changed by jiwon */
			color: @main_color; /* Changed by Kate */
			text-align: center;
			padding: 3px 0px;
			height: auto;
		}

		td.currentDay {
			background: @aqua; /* Changed by Kate */
			color: white; /* Changed by Kate */
		}
	}
}

div.noneFound {
	display: none;
}

div.deletedObject {
	color: white;
	background: @red;
	border-radius: 4px;
	padding: 3px 5px;
	margin-bottom: 10px;

	p {
		margin: 0px;
	}
}

form {

	p.label {
		font-weight: bold;
		margin-bottom: 3px;

		span.required {
			color: @red;
			font-size: 14pt; /* YEN: from 10px to 14pt for contrast*/
			font-weight: bold;
		}
	}

	p.formElement {
		margin: 1px 0px;

		input {
			width: 630px;
		}

		input.datePicker {
			width: 300px;
			margin-right: 10px;
			display: inline-block;
		}

		input.timePicker {
			width: 300px;
			display: inline-block;
		}

		textarea {
			margin: 0px;
			width: 630px;
			height: 200px;
			font-size: 16px;
		}

		select {

		}
	}

	p.formElementDateTimeDate {
		display: inline-block;
	}

	p.formElementDateTimeTime {
		display: inline-block;
	}

	p.note {
		font-size: 12px;
		/* color: @dark_gray; Yen: to fix contrast*/
		margin-top: 1px;
	}

	p.submit {

		a.cancel {
			margin-left: 20px;
		}
		small {
			font-size: 10px;
			color: @dark_gray;
		}
	}
}



div.noPermission {
	margin-top: 100px;
	margin-bottom: 250px;
	text-align: center;

	h1 {
		color: @red;
		font-size: 150px;
		margin: 0px;
	}

	p {
		margin: -30px 0px 0px 0px;
	}
}

div.notFound {
	margin-top: 100px;
	margin-bottom: 250px;
	text-align: center;

	h1 {
		color: @red;
		font-size: 150px;
		margin: 0px;
	}

	p {
		margin: -30px 0px 0px 0px;
	}
}

p.userDidDoThings {
	font-size: 10px;
}

span.userDidPay, span.userDidDoThing {
	background: @main_color;
	color: white;
	border-radius: 8px;
	padding: 2px 5px;
	font-size: 10px;
	font-weight: bold;
}

span.userDidNotPay, span.userDidNotDoThing {
	background: @red;
	color: white;
	border-radius: 8px;
	padding: 2px 5px;
	font-size: 10px;
	font-weight: bold;
}



span.sessionTag {
	color: white;
	border-radius: 8px;
	padding: 3px 4px;
	font-size: 10px;
	font-weight: bold;
	position: relative;
	top: -2px;
	font-family: 'Raleway', 'sans-serif';
}

span.sessionNew {
	background: @yellow;
	color: @red;
}

span.sessionRSVPed {
	background: @magenta; /* Changed by Kate */
}

span.sessionWaitlisted {
	background: @spring_green; /* Changed by Kate */
}



span.userTag {
	color: white;
	border-radius: 8px;
	padding: 3px 4px;
	font-size: 10px;
	font-weight: bold;
	position: relative;
	top: -2px;
	font-family: 'Raleway', 'sans-serif';
	white-space: nowrap;
}

span.userCamper {
	background: @aqua; /* Changed by Kate */
}

span.userLeader {
	background: @spring_green; /* Changed by Kate */
}

span.userCounselor {
	background: @magenta; /* Changed by Kate */
}

span.userStaff {
	background: black; /* Changed by Kate */
}

span.userInstigator {
	background: @redorange; /* Changed by Kate */
}



hr.footer {
	margin-top: 100px;
	border-top: 2px solid @menu_background_color;
}

div.footer {
	p {
		text-align: center;
		/* color: #999999; YEN: To fixed contrast errors*/
	}
}

div.footerFeedback {
	text-align: center;
	margin-top: 25px;
	margin-bottom: 100px;

	div.footerFeedbackInner {
		display: none;
		text-align: left;
		background: #eeeeee;
		border-radius: 12px;
		max-width: 700px;
		padding: 20px 40px 20px 40px;
		margin: 0px auto;

		textarea {
			width: 680px;
			height: 100px;
		}

		p.note {
			font-size: 12px;
		}
	}
}

div.stats {
	color: #cccccc;
	max-width: 924px;
	margin: 0px auto;
	padding: 20px 50px;
}



ul.applications {
	li {
		margin-bottom: 20px;

		small {
			color: #888888;
			font-size: 10px;
			padding-left: 20px;
		}
	}
    
    span.instigator {
        font-size: 10px;
        font-weight: bold;
        color: @aqua; /* Changed by Kate */
    }
}

span.applicationStatusButton {
	background: black; /* Changed by Kate */
	color: rgba(255, 255, 255, 0.75);
	border-radius: 12px;
	font-size: 13px;
	font-weight: bold;
	padding: 5px 8px;
	cursor: pointer;
	display: block;
	text-align: center;
	margin-bottom: 10px;
}

span.applicationStatusButtonActive {
	background: @spring_green; /* Changed by Kate */
	color: white;
}

span.paymentModeButton {
	background: @red;
	color: rgba(255, 255, 255, 0.75);
	border-radius: 12px;
	font-size: 13px;
	font-weight: bold;
	padding: 5px 8px;
	cursor: pointer;
	display: block;
	text-align: center;
	margin-bottom: 10px;
}

span.paymentModeButtonActive {
	background: @spring_green; /* Changed by Kate */
	color: white;
}