.notificationHolder{
	/*background: #419fc5;*/
    width: 100%;
    height: 0px;
    overflow: hidden;
    transition:height 300ms ease;
    border-bottom: 3px solid #247292;
    -webkit-overflow-scrolling: touch;
}
#homeScreenHolder.homePage .notificationHolder{
	height:503px;
	transition:height 300ms ease;
}
.notificationHolder .tabHeaders{
    height: 37px;
    width: 363px;
    background: #47abd2;
    border-radius: 5px;
    margin: 0px auto 14px;
    border: 1px solid #3e9abf;
    overflow: hidden;
}
.notificationHolder .title{
    font-size: 20px;
    color: #6ed5ff;
    float: left;
    width: 121px;
    text-align: center;
    line-height: 37px;
}
.notificationHolder .title.selected{
    color: #ddf5ff;
    background: #5ac2eb;
}
.notificationHolder .notificationBoxes{
    height:100%;
    width:300%;
    position:relative;
    left:0%;
    transition:left 300ms ease;
}
.notificationHolder.weeklyScores .notificationBoxes{
    left:0%;
    transition:left 300ms ease;
}
.notificationHolder.monthlyScores .notificationBoxes{
    left:-100%;
    transition:left 300ms ease;
}
.notificationHolder.notifications .notificationBoxes{
    left:-200%;
    transition:left 300ms ease;
}
.notificationHolder .notificationBoxes .box{
    width:33%;
    height:100%;
    /*display:none;*/
    float:left;
    -webkit-overflow-scrolling: touch;
    overflow:auto;
}



/* --- Weekly Scores --- */

.notificationHolder .weeklyScoresHolder{
    /*background:red;*/

}

/* -- Weekly Scores Graph -- */

.notificationHolder .weeklyScoresHolder .weeklyScoresGraphHolder{
    height: 150px;
    width: 90%;
    margin: 0px auto 12px;
    margin-bottom: 17px;
}
.notificationHolder .weeklyScoresGraphHolder .graphPath{
    fill: none;
    stroke: #fff;
    stroke-width: 4px;
}
.notificationHolder .weeklyScoresGraphHolder .graphCircles{
    fill: white;
}
.notificationHolder .weeklyScoresGraphHolder .graphCircles.selected{
    fill: #00ff34;
    stroke: #000;
    stroke-width: 2px;
}

.notificationHolder.weeklyScores .weeklyScoresHolder{
    display:block;
}
.notificationHolder .weeklyScore{
    position: relative;
    clear: both;
    margin-bottom: 8px;
    min-height: 70px;
    border-bottom: 1px solid #53acd0;
    overflow: auto;
    padding-bottom:7px;
}
.notificationHolder .weeklyScore .userImgHolder{
    float: left;
    margin-left: 6px;
    width: 60px;
}
.notificationHolder .weeklyScore .userImg{
    width: 40px;
    height: 40px;
    border-radius: 35px;
    border: 3px solid #3486a9;
    margin: auto;
    display: block;
}
.notificationHolder .weeklyScore .userName{
    color: #3187ab;
    font-size: 13px;
    text-align: center;
}
.notificationHolder .weeklyScore .scoreHolder{
    float:left;
    margin-left:6px;
    position:relative;
}
.notificationHolder .weeklyScore .scoreBar{
    height: 55px;
    background: #fff;
    width: 190px;
    border: 2px solid #3993b7;
    border-radius: 5px;
    display:none;
}
.notificationHolder .weeklyScore.zeroPoints .scoreBar{
    opacity:0;
}
.notificationHolder .weeklyScore .scoreText{
    position: absolute;
    top: 14px;
    font-family: candal;
    color: #3188ab;
    left: 8px;
    font-size: 20px;
}
.notificationHolder .weeklyScore .workoutsCompletedHolder{
    right: 5px;
    width: 212px;
    display: block;
    float: right;
    margin-right: 6px;
}
.notificationHolder .weeklyScore .workoutsCompletedHolder .workoutPackImg{
    float:right;
    margin-left: 3px;
    margin-bottom:3px;
    position: relative;
}
.notificationHolder .weeklyScore .workoutsCompletedHolder .workoutPackImg .packImgHolder{
    width:30px;
    height:30px;
    position:relative;
    overflow:hidden;
    border-radius: 40px;
    border: 3px solid #3f82a0;
}
.notificationHolder .weeklyScore .workoutPackImg .workoutCount{
    position: absolute;
    top: -4px;
    right: -1px;
    background: #5ac1eb;
    width: 14px;
    height: 18px;
    border-radius: 10px;
    line-height: 17px;
    text-align: center;
    color: #246e8c;
    opacity:0;
    z-index: 2;
}
.notificationHolder .weeklyScore .workoutPackImg.multiple .workoutCount{
   opacity:1;
}

.notificationHolder .weeklyScore .workoutPackImg .shineOverlay{
    height: 100%;
    width: 100%;
    position: absolute;
    top:0px;
    left:0px;
    display:none;
}
.notificationHolder .weeklyScore .workoutPackImg .packImg{
    
    height: 100%;
    width:100%;
    /*
    height: 30px;
    width: 30px;
    border-radius: 40px;
    border: 3px solid #3f82a0;
    */
}








.notificationHolder .monthlyScoresHolder{
    /*background:blue;*/
}
.notificationHolder.monthlyScores .monthlyScoresHolder{
    display:block;
}
.notificationHolder .notifications{
    /*background:green;*/
}
.notificationHolder.notifications .notifications{
    display:block;
}
.notificationHolder .notification{
	position: relative;
    clear: both;
    border-bottom: 2px solid #47aed6;
    min-height: 78px;
    overflow: auto;
    font-family:candal;
    padding: 10px 0px;
}
.notificationHolder .notification.invite{
    background:#4397b9;
}

/* Left Box */
.notificationHolder .notification .leftBox{
	float:left;
	width:75px;
}
.notificationHolder .notification .packImgHolder{
	width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 60px;
    border: 3px solid #27799a;
    position: relative;
    left: 8px;
}
.notificationHolder .notification .packImgHolder .shineOverlay{
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    display:none;
}
.notificationHolder .notification .date{
    color: #2e7896;
    font-size: 14px;
    width: 72px;
    text-align: center;
}
.notificationHolder .notification .packImgHolder .packImg{
	height:100%;
	width:100%;
}

/* Middle Box */
.notificationHolder .notification .middleBox{
    float:left;
    width:290px;
}

.notificationHolder .notification.invite .middleBox{
	width:228px;
}

.notificationHolder .notification .text{
	color: #276f8c;
}
.notificationHolder .notification.invite .text{
    color:white;
}



/* Right Box */
.notificationHolder .notification .rightBox{
	position: absolute;
    top: 6px;
    right: 7px;
}	
.notificationHolder .notification .acceptBtn, .notificationHolder .notification .declineBtn{
	background: #3fc13f;
    text-align: center;
    color: #fff;
    line-height: 31px;
    font-size: 12px;
    border-radius: 8px;
    border: 3px solid #1e9a1d;
    width: 61px;
}
.notificationHolder .notification .declineBtn{
	background: #fb7c7c;
    border: 3px solid #c34241;
    margin-top: 5px;
}