/******************************************************
	$GENERAL
******************************************************/
body {	
	background-color:#ddd;
	color:#333;
	font-family:Helvetica, sans-serif;
	font-size:12px;
	line-height:1.3;
	letter-spacing:1.2;
	padding:10px;
}

a {color:#00b4e6; cursor:pointer;}
a:hover {text-decoration:none;}
a:focus {text-decoration:none;}


/*== SPACERS ==*/
.clear {clear:both;}
[class^="spacer"] {display:block; clear:both;}
.spacer-xsmall {height:5px;}
.spacer-small {height:10px;}
.spacer {height:20px;}
.spacer-large {height:40px;}
.spacer-xlarge {height:60px;}
.spacer-xxlarge {height:100px;}
.h-pad {padding-left:15px; padding-right:15px;}
.v-pad {padding-top:15px; padding-bottom:15px;}
.h-pad-xs {padding-left:5px; padding-right:5px;}
.v-pad-xs {padding-top:5px; padding-bottom:5px;}
.h-pad-small {padding-left:10px; padding-right:10px;}
.v-pad-small {padding-top:10px; padding-bottom:10px;}
.h-pad-large {padding-left:30px; padding-right:30px;}
.v-pad-large {padding-top:30px; padding-bottom:30px;}

.relative {position:relative;}


/* == FONT STYLES == */
.normal {font-weight:normal;}
.bold {font-weight:bold;}
.italic {font-style:italic;}
.underline {text-decoration:underline;}
.uppercase {text-transform:uppercase;}
.capitalize {text-transform:capitalize;}
.lowercase {text-transform:lowercase;}
.text-center, td.text-center, th.text-center {text-align:center;}
.text-right, td.text-right, th.text-right {text-align:right;}
.text-left, td.text-left, th.text-left {text-align:left;}


/* == FONT SIZES ==*/
.size10 {font-size:10px;}
.size12 {font-size:12px;}
.size14 {font-size:14px;}
.size16 {font-size:16px;}
.size18 {font-size:18px;}
.size20 {font-size:20px;}
.size22 {font-size:22px;}
.size24 {font-size:24px;}
.size26 {font-size:26px;}
.size28 {font-size:28px;}
.size30 {font-size:30px;}
.size35 {font-size:35px;}
.size40 {font-size:40px;}
.size45 {font-size:45px;}
.size50 {font-size:50px;}
.size55 {font-size:55px;}
.size60 {font-size:60px;}
.size70 {font-size:70px;}
.size80 {font-size:80px;}
[class*=size] {line-height:1.3;}


/* === COLORS === */
.white {color:#fff;}
.black {color:#000;}
.red {color:#b40101;}
.blue {color:#428bca;}
.darkblue {color:#190FAB;}
.green {color:#398600;}
.yellow {color:#BBC714;}
.light-gray {color:#ccc;}
.gray {color:#999;}
.dark-gray {color:#666;}

.bg-light-grey {background-color:#eee;}
.bg-grey {background-color:#ccc;}
.bg-dark-grey {background-color:#777;}
.bg-green {background-color:#398600;}
.bg-red {background-color:#f00;}
.bg-yellow {background-color:#ebd412;}
.bg-darkblue {background-color: #190FAB;}




/* == DESIGN ELEMENTS == */
.cursor {cursor:pointer;}
hr {
	border-top:1px solid #e5e5e5;
	height:1px;
	margin:20px auto;
	width:100%;
	clear:both;
}
hr.half {width:50%;}
hr.third {width:33.333%;}
hr.quarter {width:25%;}
hr.no-margin {margin:0 auto;}
hr.margin-small {margin:10px auto;}
img.limit {max-width:180px;}
.row.no-margin {margin-left:0; margin-right:0;}
.pointer {cursor:pointer;}
.word-wrap-break {white-space: normal;}
.inline {display:inline;}
.inline-block {display:inline-block;}

.rounded {border-radius:5px;}
.rounded-top {border-top-right-radius: 5px; border-top-left-radius: 5px;}
.rounded-bottom {border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;}
.rounded-left {border-top-left-radius:5px; border-bottom-left-radius:5px;}
.rounded-right {border-top-right-radius:5px; border-bottom-right-radius:5px;}

.box-shadow {box-shadow:0 0 5px 0 rgba(0,0,0,0.15); -webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.15);}

.loading {max-width:30px; max-height:30px;}

.v-align-middle {vertical-align: middle;}

.modal-body {max-height:430px; overflow: auto;}
.modal-xlg { width:1200px; }

.grey-bottom-border {border-bottom:1px solid #ccc;}
.grey-top-border {border-top:1px solid #ccc;}
.grey-right-border {border-right:1px solid #ccc;}
.grey-left-border {border-left:1px solid #ccc;}









/******************************************************
	$HEADER
******************************************************/
header {
	background-color:#fff;
	border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
	display:block;
	width:100%;
	padding:10px 0;
}









/******************************************************
	$EVENTS
******************************************************/
.events {
	bottom:10px;
	left:10px;
	position:absolute;
	right:10px;
	top:60px;
}

.events .lists {
	background-color:#fff;
	bottom:0;
	left:0;
	position:absolute;
	right:60%;
	top:0;
}

.events .details {
	background-color:#fff;
	bottom:0;
	left:40%;
	margin-left:10px;
	position:absolute;
	right:0;
	top:0;
}

.events .tabs {
	background-color:#ddd;
}
.events .tabs div {
	background-color:#ccc;
	border-radius:3px 3px 0 0;
	-webkit-border-radius:3px 3px 0 0;
	cursor:pointer;
	display:inline-block;
	margin-right:7px;
	padding:5px 15px;
}

.events .tabs div.active {
	background-color:#fff;
}

.events .event-list {
	bottom:0;
	left:0;
	max-height:100%;
	overflow:auto;
	position:absolute;
	right:0;
	top:30px;
}

.events .event-list .event {
	cursor:pointer;
	transition:background-color 300ms;
	-webkit-transition:background-color 300ms;
}
.events .event-list .event:hover {
	background-color:#EFF7FD;
}

.events .event-list .event .form-inline .form-control {
	height:25px;
	padding:0 10px;
}











/******************************************************
	$RESPONSIVE
******************************************************/



/* === Large Desktops === */
@media (min-width: 1200px) {}




/* === Medium Desktops === */
@media (max-width: 1199px) {
}




/* === Medium Devices === */
@media (max-width: 991px) {
	.events .lists {
		right:0;
	}
	.events .details {
		display:none;
	}
}




/* === Larger Than Small Devices === */
@media (min-width: 768px) {
}





/* === Small Devices === */
@media (max-width: 767px) {
}




/* === iPhone Level Width === */
@media (max-width: 479px) {
	.events .tabs div {
		font-size:12px;
		margin-right:3px;
		padding:5px 5px;
	}
}

