body {
  /*min-height: 2000px;*/
  padding-top: 70px;
  background-color: #EEEEEE;

   /* Margin bottom by footer height */
  margin-bottom: 30px;
}


.playBTN {
	padding: 8px;
	display: block;
  float: right;
}

.cm_table {
  width: 100%;
}

.upcomingevents .badge {
  margin-left: 10px;
}


.containerBG {
	background-color: #EEEEEE;
}

.form-signin, .form-signup, .form-makeEvent {
    margin: 0 auto;
    max-width: 330px;
    padding: 15px;
}

.loginTools {
    margin: 0 auto;
    max-width: 330px;
    padding: 0 15px;
    cursor: pointer;
}

.form-signin input {
  margin: 6px 0;
}

.form-signup input, .form-signup select, form-makeEvent select{
	margin: 7px;
}

.calendarButton {
  margin-top: 0px !important;
}

.form-signup .well {
	margin-top: 10px;
}

.form-signup button {
	width: 50%;
	margin: 11px auto 0 auto;

}

.form-makeEvent label {
  margin-top: 6px;
}

.loading {
  display: inline-block;
  margin: 5em;
  border-width: 30px;
  border-radius: 50%;
  -webkit-animation: spin 1s linear infinite;
     -moz-animation: spin 1s linear infinite;
       -o-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  }


.style-1 {
  border-style: solid;
  border-color: #444 transparent;
  }



.navbar-alwaysbuttons {
  float: right;
}

.navbar-header {
  float: left;
}

.navbar-toggle {
  float: left;
}

.navbar-collapse.in, .navbar-collapse.collapsing {
  margin-top: 50px;
}

#navBreak {
  clear:both;
  width: 0px;
  height: 0px;
  margin: 0;
  padding: 0;
}


#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 30px;
  background-color: #444444;
  border-color: #080808;
  z-index: 10;
}


#footer .footButt {
  padding-top: 5px;
  width: 50%;
  float: left;
}

.footlogout {
  float:right;
}

.page-header {
  border-bottom: 1px solid #BBBBBB;
  margin: 0px 0 10px;
  padding-bottom: 17px;
}

.page-header h1 {
  margin-top: 0px;
  display: inline;
}

.topRightButon {
  float: right;
  margin-bottom: 10px;
}

.topRightButon .butGroup span {
  padding: 12px 10px 0;
  float: left;
}


.eventType .clanName {
  color: #555555;
  font-style: italic;
}

.event-title {
  font-size: 24px;
  display: inline;
}
.event-label {
  float: right;
  font-size: 20px;
}

.event-label .badge {
  background-color: #DDDDDD;
  color: #000000;
}

.addFriendButton {
  float: right;
  /*margin-top:-40px;*/
}

.fName {
  float: left;
}

.isPending {
  float: left;
  margin: 0 0 0 10px;
  color: #357EBD;
}

.fStatus {
  clear: both;
}
.badge-success {
  background-color: #3C763D;
}

.yesnoRequestButtons {
  float: right;
}

.nowFriends {
  color: #888888;
}

.nowNotFriends {
  color: #990000;
}

.inviteToClan {
  float: right;
  display: inline-block;
  margin-top: -23px;
  position: relative;
}

.editPugButton {
  /*float: right;*/
  display: inline-block;
  margin-top: 6px;
  position: relative;
}

.createpugbutton {
  float: right;
}


.inviteUser {
  float: right;
  margin-top: -6px;
}

span.inviteUser {
  margin-top: 1px;
  font-size: 12px;
  color: #888888;
}



.inviteSelected {
  float: right;
  margin-bottom: 10px;
}




.modal-body .loadingCenter {
  text-align: center;
}




.statusButtons {
  position: absolute;
  top: 5px;
  right: 5px;
}

.myListItem {
  background-color: #f0f3ff;
  border: 1px solid #999999;
}


.createPugDiv {
  text-align: center;
  display: block;
  margin-top: 10px;
}


#whoBox {
  padding-top: 10px;
}

.scheduleClan {
  text-align: center;
  margin-top: -10px;
}

.eventMemberList {
  background-color: #101010;
  padding: 10px;
  margin-top: 10px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}



h3.pugPanel  {
  font-size: 12px;
  font-weight: bold;
  margin: 0px 0px 8px 15px;
}


.pugGroup .list-group-item {
  background-color: #f1f1f1;
}

.pugGroup .list-group-item:hover, .pugGroup .list-group-item:focus {
  background-color: #cccccc;
}




.pugEventPanel h6, .eventPanel h6 {
  margin-bottom: 0px;
  color: #888888;
}

.pugGameData {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
}

.pugData {
  position: relative;
  display: block;
  /*padding-bottom: 10px;
  border-bottom: 1px dotted #CCCCCC;*/
}


.comsts {
  /*float: left;*/
  margin-left: 10px;
}



.joinPugButton {
  display: block;
  position: absolute;
  right: 0px;
  bottom: 10px;
}



.clickablePugRow {
  cursor: pointer;
}

.clickablePugRow:hover {
  background-color: #cccccc;
}


#alertHolder {
  display: block;
  height: 0px;
  position: relative;
  overflow: hidden;
}

#clanmate-alert {
  border-radius: 0;
  margin-bottom: 0;
}


#clanmate-alert #theMessage {
  cursor: pointer;
}

#clanmate-alert #theMessage:hover {
  text-decoration: underline;
}


.list-group {
  margin-bottom: 0px;
}

.whoForm {
  margin-top: 10px;
}

.whoList {
  border: 1px solid #777777;
  margin-top: 10px;
}

.clanInfo-option {
  max-width: 330px;
  float: left;
}

.clanInfo-label {
  float: left;
  margin-right: 10px;
}

.userInfo-option {
  width: 265px;
  float: left;
}


.cm_2col {
  width: 50%;
}


.worldFilter-label {
  float: left;
  margin-right: 10px;
  margin-top: 6px;
}

input[type="checkbox"].worldFilter-checkbox {
  float: left;
  margin-top: 11px;
}



#leftSide {
  width: 74%;
  float: left;
}

#rightSide {
  width: 24%;
  float: right;
}



.clanMeta {
  margin-left: 10px;
  color: #707070;
}




.tableSorter {
  cursor: pointer;
}

.tableSorter.up span, .tableSorter.down span{
  
  width: 9px;
  height: 8px;
  display: inline-block;
  margin-left: 4px;
}

.tableSorter.up span{
  background: url("../img/sortUpArrow.png") no-repeat;
}

.tableSorter.down span{
  background: url("../img/sortDownArrow.png") no-repeat;
}





table tbody.openedPugRow {
  background-color: #d4e3ef;
  border: none;
}



#searchResults .noResults {
  margin-top: 10px;
  text-align: center;
}




#comments .comment {
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
  padding: 8px 8px 5px;
}

#comments .comment.odd {
  background-color: #eeeeee;
}


#comments .comment .avatar {
  display: inline-block;
  padding: 0;
  vertical-align: top;
  width: 40px;
  box-sizing: border-box;
}

#comments .comment .avatar .avatar-holder {
  height: 38px;
  position: relative;
  width: 38px;
}

#comments .comment .avatar .avatar-holder a {
  border-radius: 26px;
  display: block;
  height: 38px;
  overflow: hidden;
  position: absolute;
  width: 38px;
  z-index: 2;
}


#comments .comment .avatar .avatar-holder a img {
  height: 100%;
  width: 100%;
}



#comments .comment .text {
  box-sizing: border-box;
  color: #333;
  display: inline-block;
  font-size: 1em;
  line-height: 1.2em;
  padding: 4px 0 0 8px;
  vertical-align: top;
  width: 90%;
}

#comments .comment .text .meta {
  color: #a9a9a9;
  font-size: 0.8em;
  margin-top: 2px;
}

#comments .input {
  box-sizing: border-box;
  padding: 8px 8px 26px;
  display:none;
}

#comments .input textarea {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
  box-sizing: border-box;
  color: #333;
  display: block;
  font-size: 16px;
  height: 54px;
  margin-bottom: 8px;
  outline: medium none;
  padding: 8px;
  resize: none;
  width: 100%;
}

#comments .input .commentButton {
  display: block;
  float: right;
  /*margin-bottom: 12px;
  padding: 8px 40px;
  position: relative;
  text-align: center;*/
}

#comments .input .counter {
  color: #ccc;
  padding-left: 15px;
}






.notificationTable .middleCol {
  background-color: #dddddd;
}

.notificationTable .oddRow {
  background-color: #eeeeee;
}

.notificationTable .oddRow .middleCol {
  background-color: #cccccc;
}



/* TYPEAHEAD LAYOUT STUFF */
.typeahead, .tt-query, .tt-hint {
    /*border: 2px solid #CCCCCC;
    border-radius: 8px;*/
    /*font-size: 24px;*/
    height: 34px;
    line-height: 30px;
    outline: medium none;
    padding: 8px 12px;
    width: 300px;
}
.typeahead {
    background-color: #FFFFFF;
}
.typeahead:focus {
    border: 2px solid #0097CF;
}
.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
    color: #999999;
}
.tt-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 8px 0;
    width: 300px;
}
.tt-suggestion {
    font-size: 18px;
    line-height: 24px;
    padding: 3px 20px;
}
.tt-suggestion.tt-cursor {
    background-color: #0097CF;
    color: #FFFFFF;
}
.tt-suggestion p {
    margin: 0;
}






@media (max-width: 700px) {
  .page-header h1 {
    margin-top: 0px;
    margin-bottom: 5px;
    font-size: 23px;
  }

  .topRightButon {
    margin-bottom: 0px;
    display: block;
  }  

  .topRightButon button {
    border-radius: 4px;
    font-size: 14px;
    padding: 6px 12px;
  }




  .event-title {
    display: block;
    text-align: center;
  }


    .event-label {
      float: none;
      display: block;
      margin: 6px 0;
      white-space: normal;
  }

  .eventPanel .createdby {
    width: 100%;
    display: block;
    margin-top: 4px;
  }


  #comments .comment .text {
    width: 80%;
  }

  .pugGameData {
    margin-bottom: 4px;
  }

  .pugGameData h4 {
    font-size: 14px;
    margin-top: 4px; 
  }



}