* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body {
    background: #fafafa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}

#contentDiv {
	margin-left: 15px !important;	
}
.hero-unit {
    margin: 50px auto 0 auto;
    width: 300px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    background-color: #eee;
    border-radius: 6px;
    padding: 60px;
}

.hero-unit h1 {
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1px;
}

.savedBox
{
	position: fixed; 
	top: 1em; 
	padding-left: 1em;
	margin: 10px;
	background-color: white;
    border-radius: 6px;
	z-index: 105;
	box-shadow : inset 0px 0px 2px 2px #44c767;
	width: 120px;
	height: 22px;
}
/** TODO: Might have to be cleaned up...? **/
.sectionLeft,
.sectionMiddle,
.sectionRight {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.sectionLeft {
    width: 5%;
}

.sectionMiddle {
    width: 80%;
    min-width: 700px;
}

.sectionRight {
    width: 15%;
}

/*
 *  Calendar styles
 */

.calendar {
	border-collapse: separate;
	border-spacing: 1;
	width: 900px;
}


.calendar td{
	border: 1px solid #ddd;
	height: 80px;
}

.calendar .week-number{
	position: relative;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ddd;
    color: #000;
    font-size: 1.2em;
    height: 130px;
    text-align: right;
	vertical-align: top;
    padding: 7px;
	width: 78px;

	position: relative;
	background-color: #f0f0f0;
	border-bottom: 1px solid #ddd;
	color: #000;
	font-size: 1.2em;
	height: 140px;
	text-align: right;
	vertical-align: top;
	padding: 7px;
	width: 85px;

}

.calendar .day {
	position: relative;
	width: 8em;
}

.calendar .day time {
	position: absolute;
	top: 0.5em;
	top: 0.5rem;
	right: 0.5em;
	right: 0.5rem;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1em;
    font-size: 1rem;
}

.calendar .day .availability {
    position: absolute;
		left: 0.5em;
		right: 0.5em;
    bottom: 3.0em;
		text-align:center;
}


.calendar .day .availability,
.calendar .day .availability button {
    font-size: .8em;
    padding-left: 0px;
    padding-right: 0px;
}

.calendar .day .bottom {
		position: absolute;
		left: 0.5em;
		right: 0.5em;
		bottom: 0.5em;
		text-align:center;
}

.calendar .day .bottom button {
		width: 100%;
		font-size: 1em;
		font-size: 1rem;
}

.calender .day .availability button.avilable {
    background-color: rgb(150, 220, 150);
}
.calendar td.odd-month {
    background-color: #f0f0f0;
}

.calendar .day.today {
    background-color: rgb(184, 222, 247);
}

.calendar .day time .month {
    margin-right: 2em;
}

.calendar tr.current-week td {
    background-color: rgb(217, 237, 247);
}

.calendar button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#ffffff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:arial;
	font-weight:bold;
	width: 3.6em;
	padding:0.3em 0.4em;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
	text-align: center;
}
.calendar button:hover {
	background-color:#f6f6f6;
}
.calendar button.available,
.calendar button:active {
	-moz-box-shadow:inset 0px 1px 0px 0px #3dc21b;
	-webkit-box-shadow:inset 0px 1px 0px 0px #3dc21b;
	box-shadow:inset 0px 1px 0px 0px #44c767;
	background-color:#44c767;
	border:1px solid #18ab29;
	cursor:pointer;
	color:#ffffff;
	font-weight:normal;
	text-shadow: none;
}

.calendar button.disabled{
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
	background-color:#599bb3;
	border:1px solid #599bb3;
	color: #fff;
	cursor:wait;
	font-weight:normal;
	text-shadow: none;
}


.calendar button.small{
	width: 75px;
	font-size: 0.5em;
	padding: 0.5em;
}

.calendar .week-number .bottom{
	position: absolute;
	bottom: 0.5em;
	left: 5px;
}

.calendar .week-number .middle{
	position: absolute;
	bottom: 2em;
	left: 5px;
}

.calendar .week-number .top{
	position: absolute;
	bottom: 70px;
	left: 5px;
}
/*
 * Side Panel
 */
.side-panel h3 small {
    margin-left: -20px;
    display: inline-block;
    width: 100%;
}

.side-panel .panel-title {
    display: inline-block;
    width: 100%;
}

.side-panel .info-box {
    overflow-y: auto;
}

.flash {
    width: 240px;
}

.flash ul { 
    padding-left: 0px;
    list-style: none;
}

.alert-box {
    color:#555;
    border-radius:7px;
    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
    padding:10px 10px 10px 10px;
    margin:7px;
}

.type {
    text-transform: uppercase;
    font-weight: bold;
    padding-left: 1px;
    padding-right: 1px;
}

.alert-box.ng-enter,
.alert-box.ng-leave {
    -webkit-transition: 1s linear all; /* Chrome */
    transition: 1s linear all;
}
.alert-box.ng-move,
.alert-box.ng-enter,
.alert-box.ng-leave {
    -webkit-transition:all linear 0.1s;
    transition:all linear 0.1s;
}

.alert-box.ng-leave.ng-leave-active,
.alert-box.ng-move,
.alert-box.ng-enter {
    opacity:0;
    max-height:0;
}

.alert-box.ng-leave,
.alert-box.ng-move.ng-move-active,
.alert-box.ng-enter.ng-enter-active {
     opacity:1;
}

html {
	height: 105%;
}

.availability-nav-container {
	padding: 2%;
}