#goalsWrapper {   
   width:100%;   
   margin: 12px;
}

.profile #goalsWrapper{
   margin: 0;
}

iframe #goalsWrapper{
   margin: 0;
}

/** Logged out goals page only **/
.goal_landing #goalsWrapper,
.goal_landing #goalsWrapper #goalUpperBox,
.goal_landing #goalsWrapper #goalUpperBox #curGoalArea,
.goal_landing #goalsWrapper #goalUpperBox #curGoalArea #graphArea,
.goal_landing #goalsWrapper #goalUpperBox #curGoalArea #graphArea .chartBox,
.goal_landing #goalsWrapper #goalUpperBox #curGoalArea #graphArea .chartBox.tripDistance,
.goal_landing #goalsWrapper #goalUpperBox #curGoalArea #graphArea .chartBox.weight,
.goal_landing #goalsWrapper #goalUpperBox #curGoalArea #graphArea .chartBox.area {   
   width: 575px;   
}

.goal_landing #goalsWrapper #goalUpperBox #curGoalArea #graphArea .chartBox.area {
   width: 560px;
}

.goal_landing .countdownTimer.large {
   position: relative;
   margin: 0 AUTO;
   padding-bottom: 45px;
   top: 0;
   right: 0;
}

.goal_landing #goalsWrapper #curGoalArea #graphArea .raceInfo {
   margin: 0 auto;
   padding: 15px 0;
   width: 300px;
}

.goal_landing #goalsWrapper #curGoalArea #graphArea .raceInfo .racePageButton {
   margin: 10px 0 0 138px;
}

.goal_landing #goalsWrapper #curGoalArea #graphArea .raceInfo .raceName {
   padding-top: 12px;
}


/** END Logged out goals page only **/

#curGoalOuterContainer
{
   white-space: nowrap;
   overflow: hidden;
   background-color:#fff;
}

#goalsWrapper #goalsBottomBox
{
   margin:30px 0 20px 0;   
}

#goalsWrapper #goalsBottomBox #goalsComments
{
   width:409px;
   border-right: 1px solid #CCC;
   float: left;
   margin-right: 20px;
   min-height:109px;
}

#goalsWrapper #goalsBottomBox #goalsSocial
{
   width:300px;    
   float:left;
}

#goalsWrapper #goalUpperBox #goalheader
{
   position: relative;    
}


#goalsWrapper #goalUpperBox #goalheader #nextGoalTitle
{
   float:right;
   height:65px;
   width:100px;
}
#goalsWrapper #goalUpperBox #goalheader #addGoalTitle {
   float:right;
   width:100px;
}
#goalsWrapper #goalUpperBox #goalheader #addGoalTitle {
   margin: 17px 10px 18px 0;
}
#goalsWrapper #goalUpperBox #goalheader #nextGoalTitle .nextGoal {
   float:right;
   display:block;
   height:65px;
   width:50px;
   background:url('../../oceanus/images/blue_arrow_right.png') no-repeat center center;
}

#goalsWrapper #goalUpperBox #goalheader #prevGoalTitle
{
   float:left;
   height:65px;
   width:100px;
}
#goalsWrapper #goalUpperBox #goalheader #prevGoalTitle .prevGoal
{
   float:left;
   display:block;
   height:65px;
   width:50px;  
   background:url('../../oceanus/images/blue_arrow_left.png') no-repeat center center;
}

#goalsWrapper #goalUpperBox #goalheader #currentGoalTitle
{
   margin-bottom: 0;
   text-align:center;
}

#goalsWrapper #goalUpperBox #goalheader #currentGoalTitle .goalTitleText
{
   padding: 8px 8px 8px 8px;
   margin: 0 auto;
}

#goalsWrapper #goalUpperBox #curGoalArea #graphArea #deleteGoal
{   
   margin-left: 5px;
   cursor: pointer;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   position: absolute;
   height: 15px;
   width: 15px;
   top: 13px;
   right: 6px;
   margin-top: -7px;
   padding: 1px 2px 4px 3px;
   z-index: 10;
}

#goalsWrapper #goalUpperBox #curGoalArea #titleBar
{
   height:30px;
}

#goalsWrapper #goalUpperBox #curGoalArea #graphArea
{
   position: relative;
}

#goalsWrapper #goalUpperBox #curGoalArea #graphArea .chartBox
{
   float: left;
}

/*
If this width is adjusted you will have to adjust the associated js that resizes the graph manually
*/
#goalsWrapper #goalUpperBox #curGoalArea #graphArea .chartBox.tripDistance,
#goalsWrapper #goalUpperBox #curGoalArea #graphArea .chartBox.weight,
#goalsWrapper #goalUpperBox #curGoalArea #graphArea .chartBox.area
{
   width: 650px;
   height: 250px;
   float: left;   
   margin: 10px 0 10px 10px;
}

#goalsWrapper #goalUpperBox #curGoalArea .topText
{
   padding-top:25px;  
}
#goalsWrapper #goalUpperBox #curGoalArea .middleButton
{
   width: 100%;
   height: 30px;
}
#goalsWrapper #goalUpperBox #curGoalArea .middleButton .createGoalButton,
#goalsWrapper #goalUpperBox #curGoalArea .middleButton .joinRaceButton
{
   margin: 20px auto 0;
   width: 300px;
}
.createGoalButton button#createGoalBtn {
   float:right;
}

#goalsWrapper #goalUpperBox #curGoalArea .middleButton .createGoalButton .blueButton-large,
#goalsWrapper #goalUpperBox #curGoalArea .middleButton .joinRaceButton .blueButton-large
{
   float: none;
}

#goalsWrapper #goalUpperBox #curGoalArea .bottomText
{
   padding-top:25px;
}
#goalsWrapper #curGoalArea #completionData .completionGraphOuter
{
   height: 39px;
   width: 711px;
   position: absolute;
   left: 13px;
}
.goal_landing #goalsWrapper #curGoalArea #completionData .completionGraphOuter{
   width: 547px;
}

#goalsWrapper #curGoalArea #completionData .completionGraphInner
{
   background-color:#31a4d9;
   height:39px;
   float: left;
}

#goalsWrapper #curGoalArea #completionData .completionTextBox
{
   position: relative;
   float: left;
   line-height:39px;
}

#goalsWrapper #curGoalArea #completionData .completionTextBox.left
{
   position: absolute;
   color:#fff;
}

#goalsWrapper #curGoalArea #completionData .completionTextBox .rkicon.arrow
{
   padding-right: 6px;
   position: relative;
}

#goalsWrapper #curGoalArea #completionData .rkicon
{
   padding-left: 6px;
   position: relative;
   line-height:39px;
   font-size:20px;
   float: left;
}

 #goalsWrapper #goalsBottomBox #goalsSocial #shareSection
{
   border-top: 1px solid #CCC;
   margin-top:15px;
   padding-top: 15px;
}

 #goalsWrapper #goalsBottomBox #goalsSocial .sectionTitle
{
   margin-bottom:8px;
}
 #goalsWrapper #goalsBottomBox #goalsSocial .updatesButton
{
   border: 1px solid #CCC;
   padding: 10px;
   width: 288px;
}

 #goalsWrapper #goalsBottomBox #goalsSocial .updatesButton .checker
{
   top: -4px;
}

 #goalsWrapper #goalsBottomBox #goalsSocial .updatesButton .checker .checked .checker
{
   top: 0;
}

#goalsWrapper #goalsBottomBox #goalsSocial .likeSection
{
   margin-bottom:15px
}
#goalsWrapper #goalsBottomBox #goalsSocial .likeSection .showSupport
{
   float: left;
   position: relative;
   top: 11px;
   margin-left: 5px;
   width: 185px;
}

#goalsWrapper #goalsBottomBox #goalsSocial .likeSection .showSupport .rkicon
{
   position: relative;
   top: -2px;
   margin-right: 6px;
}

#goalsWrapper #goalsBottomBox #goalsSocial .likeSection .rk-like
{
   float: left;
}

#goalSClbStorage .title
{
   margin-top: 20px;
}

#goalSClbStorage .inlineOption
{
   width: 240px;
   margin: 20px auto 20px;
}

#goalSClbStorage .inlineOption label
{
   position: relative;
   top: 5px;
}

#goalSClbStorage #ShareSection
{
   margin-left:auto;
   margin-right:auto;   
   width: 210px;
}
#goalSClbStorage #ShareSection .shareBoxContainer
{
   width:150px;
}

#goalSClbStorage .doneButton
{
   margin: 20px auto;
   width: 70px;
}


#loginlbStorage .logoBackground
{
   background-color:#eee;
}
#loginlbStorage .logoBackground img
{
   height: 84px;
   width: 300px;
   margin: 12px auto;
}

#goalsWrapper #curGoalArea #graphArea .raceInfo
{
   margin-left:30px;
   padding:35px 0;
   width: 280px;
}

#goalsWrapper #curGoalArea #graphArea .raceInfo .upperText
{
   padding-bottom: 15px;
}

#goalsWrapper #curGoalArea #graphArea .raceInfo img
{
   width:100px;
   float:left;   
}

#goalsWrapper #curGoalArea #graphArea .raceInfo .raceName
{
   margin-left: 113px;
   width: 167px;
   word-wrap: break-word;
   white-space: normal;
}

#goalsWrapper #curGoalArea #graphArea .raceInfo .raceDetails
{
   width: 280px;
   word-wrap: break-word;
}

#goalsWrapper #curGoalArea #graphArea .raceInfo .raceDate
{
   margin: 10px 0 0 113px;
}
#goalsWrapper #curGoalArea #graphArea .raceInfo .racePageButton
{
   margin: 10px 0 0 110px;
}

#goalsWrapper #curGoalArea #graphArea .raceInfo .racePageButton .blueButton-small
{
   float: none;
   width: 110px;
}

#goalsWrapper #curGoalArea #graphArea .raceGoalAdditionalFunctions {
   width: 100%;
   height:50px;
   position:relative;
}
#goalsWrapper #curGoalArea #graphArea .raceGoalAdditionalFunctions .changeButton {
   position:absolute;
   bottom:10px;
   right:10px;
}

.replacableInnerContainer.slideFromLeft {
   float: right;
   left: -750px;
 }
.replacableInnerContainer.slideFromRight {
   float: right;
   left: 750px;
}

.replacableInnerContainer
{
   width:100%;
   position: relative;
   display: inline-block;   
}

#pastGoallbContents #graphArea .chartBox
{
   width: 750px;
   height: 250px;  
}

#completionData {
   position: relative;
   border: 1px solid #CCC;
   height: 39px;
}

#completionData {
   position: relative;
   border: 1px solid #CCC;
   border-top: none;
   height: 39px;
}

#completionData .startLine {
   background: url(../images/startLine.jpg) no-repeat 0 0;
   height: 39px;
   width: 13px;
   position: absolute;
   top: 0;
   left: 0;
}

#completionData .finishLine {
   background: url(../images/finishLine.jpg) no-repeat 0 0;
   height: 39px;
   width: 13px;
   position: absolute;
   top: 0;
   right: 0;
   border-left: 1px solid #CCC;
}



/*
If this width is adjusted you will have to adjust the associated js that resizes the graph manually
*/
#pastGoallbContents #graphArea .chartBox.tripDistance
{
   height:250px;
   width:675px;
}

/*Goals achieved */
.goalListWidget .listItem.collapsed,
.goalListWidget .divider.collapsed
{
   display:none;
}

.component.infoBox#goalsAchieved .boxContent,
.component.infoBox#goalsFailed .boxContent {
   padding:0;
}
#goalsAchieved .boxContent .listItem,
#goalsFailed .boxContent .listItem {
   padding:7px;
}

#goalsAchieved .listItem .goalCompletedIcon,
#goalsFailed .listItem .goalCompletedIcon
{
   background: url(../images/goals/icon-heart-large.png) no-repeat 0 -20px;
   height: 20px;
   float: left;
   width: 20px;
   margin-right: 5px;
   margin-top: 5px;
}

#goalsAchieved .listItem .goalText,
#goalsFailed .listItem .goalText
{
   margin: 0 20px 0 30px;
}

#goalsAchieved .listItem .completedText,
#goalsFailed .listItem .completedText
{
   margin-top: 6px;
   margin-left: 30px;
}

#goalsAchieved .deleteAchieved,
#goalsFailed .deleteFailed
{
   
   margin-left: 5px;
   cursor: pointer;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   position: absolute;
   height: 15px;
   width: 15px;
   top: 13px;
   right: 6px;
   margin-top: -7px;
   padding: 1px 2px 4px 3px;
   z-index: 10;
}

.goalListWidget .title {text-align: center;}

.goalListWidget .title .rkicon
{   
   margin-right:8px;
}

.goalListWidget .endCap
{
   height: inherit;
   text-align: center;
}

#goalCreationWidgetSpinner.spinner
{
   width:615px;
   height:550px;
}

.emailTagEntryContainer .button
{
   float:left;
}

#goalBox .noGoal
{
   height: 175px;
}

#goalSClbContents #nonFriendSupportLB
{
   margin-left:15px;
   margin-top:20px;
}

.hideGoalText
{
   padding-bottom: 35px;
}

.deleteAchieved .rkicon,
.deleteFailed .rkicon
 {
   position: relative;
   display: none;
}

#goalsAchieved .listContainer .listItem:hover .rkicon,
#goalsFailed .listContainer .listItem:hover .rkicon
{
   display: block;
   cursor: pointer;
}

.goals_graph{
   width: 600px;
   height: 600px;
   float: left;
}

.facebookConnectionText {
   line-height:34px;
}
#facebookSection button {
   float:right;
}
.goalItem {
   position:relative;
}
.goalItem .completeGoal,
.goalItem .deleteGoal {
   display:block;
   font-family:'runkeeper';
   position:absolute;
   top:0;
   right:0;
   width:25px;
   height:25px;
   font-size:12px;
   line-height:25px;
   -webkit-border-radius:4px;
   border-radius:4px;
   text-align: center;
   color:#888;
   cursor:pointer;cursor:hand;
}
.goalItem .completeGoal {
   right:25px;
}
.goalItem .completeGoal:hover, 
.goalItem .deleteGoal:hover {
   background-color:#e9e9e9;
}