/* Custom styles must be written one property per line. Personal opinions about CSS formatting aside, this is for ease of viewing changes in diffs. http://coding.smashingmagazine.com/2011/08/26/writing-css-for-others/
 *
 * ID's will be avoided when possible. Classes only. This is a cascading issue and a maintenance issue. http://oli.jp/2011/ids
 *
/* ========================== Global styles ========================== */


h1,
h2,
h3,
h4,
h5,
h6 {
    color: rgb(51, 51, 51);
    color: #333;
    font-family: "Open Sans", "Lucida Grande", Tahoma, Arial, sans-serif;
    line-height: 125%;
}
h1 {
  font-size: 18px;
}
h2 {
  font-size: 15px;
}
h3,
h4,
h5,
h6 {
  font-size: 12px
}
hr {
  margin: 0;
}
label {
    color: #666;
}
.importWaiting {
  filter: alpha(opacity = 80) !important;
  filter: progid:  DXImageTransform.Microsoft.Alpha(opacity=80) !important;
  -moz-opacity: 0.8 !important;
  -khtml-opacity: 0.8 !important;
  opacity: 0.8 !important;
  background-color: #000;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  margin: -75px 0 0 -100px;
  padding: 10px 30px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #FFFFFF;
  text-align: center;
  z-index: 500;
}

.importWaiting img {
  margin: 5px auto;
}
.filter {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 10;
  opacity: 0.5;
  filter: alpha(opacity = 50);
}
.flowerRight {
  position: absolute;
  bottom: -16px;
  left: 50%;
  margin-left: 470px
}
.flowerLeft {
  position: absolute;
  bottom: -16px;
  left: 50%;
  margin-left: -620px;
}
.container {
  border-bottom: 1px solid #F1F1F1;
    border-top: 1px solid #F1F1F1;
    position: relative;
    width: 100%;
}

/* ========================== Header ========================== */


.alreadyRegistered {
  background-color: #FFFFFF;
  float: right;
  width: auto;
  padding: 3px 10px 5px;
  margin: 3px 0 0 0;
  border: 1px solid #DEDEDE;
  border-bottom: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 0;
}
.networkText {
    color: #666;
}
.joinText {
    color: #F90;
    font-size: 16px;
}
.currentLanguage,
.currentLanguage li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    float: right;
    width: auto;
    max-width: 100px;
}
.currentLanguage {
  background: url("/v_img/arrowBottom.gif") no-repeat right 6px;
  padding: 1px 12px 0 0;
}
.languageList {
  padding: 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100px;
  margin-top: -3px;
  list-style-type: none;
}
.ie7 .languageList {
  margin-left: 50px;
}
.languageList li {
  padding: 0;
  margin: 0;
  margin: 2px 5px;
  text-align: left;
  list-style-type: none;
}
.languageList a:hover {
  color: #666;
  text-decoration: none;
}



/* ========================== Footer ========================== */


footer {
    width: 100%;
    text-align: center;
}
footer p,
.debug {
    width: 850px;
    margin: 0 auto;
    text-align: center;
}


/* ========================== Registration ========================== */


.registrationHome h2 {
    border-bottom: 1px solid #ccc;
}
.signupWrapper {
    border-right: 1px solid #ccc;
}
.signup {
  margin-right: 80px;
}
.ie7 .signup label,
.signup label{
  line-height:115%;
  padding-top:7px;
  display:block;
}
.signup h2 span{
  font-weight:normal;
}
.community span{
  font-size:14px;
}
.signup .btn,
.signup .btn input {
  padding: 3px 0 3px;
  font-size: 16px;
  width: 100%;
}
.gigyaContainer {
    margin-left: 80px;
  display: inline;
}
.gigyaContainer p {
    font-size: 12px;
    color: #888;
}
.affiliate{
  margin: 0 !important;
}


/* ========================== Social Registration ========================== */


.socialRegistrationHome h2 {
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    padding-bottom: 3px;
}
.socialRegistrationHome h2 span {
    font-size: 14px;
    font-weight: 100;
}
.lifted::before, .lifted::after {
  bottom: 13px;
  left: 0;
  width: 48%;
  height: 15%;
  max-width: 181px;
  -webkit-box-shadow: 0 15px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 15px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0 15px 4px rgba(0, 0, 0, 0.4);
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.lifted::after {
  right: 0;
  left: auto;
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  transform: rotate(8deg);
}
.drop-shadow {
  position: relative;
  width: 79%;
  _width: 0;
}
.drop-shadow::before, .drop-shadow::after {
  content: "";
  position: absolute;
  z-index: -2;
}
.socialRegistrationHome .photowrapper {
  float: right;
  margin-top: 10px;
  background-color: #FDF7DD;
  padding: 2px 9px 2px 3px;
  border: 3px solid #EEE6C3;
}
.oldie .socialRegistrationHome .photowrapper {
  padding: 2px;
}
.ie6 .socialRegistrationHome .photowrapper {
  margin: -48px 0 0 -450px;
}
.socialRegistrationHome .btn,
.socialRegistrationHome .btn input {
  font-size: 16px;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.ie6 .socialRegistrationHome .btn,
.ie6 .socialRegistrationHome .btn input {
  width: 99%;
}
.socialMediaIcon {
  float: left;
  margin-top: 2px;
}
.socialMediaIconNoAvatar {
  float: left;
  margin-top: 2px;
}
.regSocialAvatar {
  float: right;
  background: #fff;
  border: 1px solid #ccc;
  margin-top: -100px;
  z-index: 2;
}
.regSocialAvatar img {
  padding: 3px;
}
.avatar {
  width: 245px;
  z-index: 1;
}
.ie7 .socialRegistrationHome .personForm label,
.socialRegistrationHome .personForm label {
  line-height:115%;
  padding-top:7px;
  display:block;
}
.ie7 .socialRegistrationHome input[type=text] {
  width: 97%;
}


/* ========================== Import ========================== */

.ie7 .importHome header img {
  margin-top: 0 !important; /* important to override oocss stuff for IE */
  padding-top: 0 !important; /* important to override oocss stuff for IE */
}

.importHome .btn {
  font-size: 15px;
}
.importProviderMessage {
  font-size: 12px;
}
.provider {
  text-decoration:none;
}
.activeXHelpPopup {
  position: absolute;
  top: 0;
  left: 20px;
  font-size: 14px;
  color: #666;
  width: 400px;
  float: left;
}
.arrowIE8 {
  position: absolute;
  top: 0;
  left: 20px;
}
.provider:hover,
.provider a:hover {
  text-decoration: none;
}
.importForm {
  background: #f0f0f0;
  border-top: solid 3px #dddddd;
}

/* ========================== Profile ========================== */


.profileHome header {
  border-bottom: 1px solid #ccc;
}
.profileHome .btn,
.profileHome .btn input {
  font-size: 16px;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.ie6 .profileHome .btn {
  width: 99%;
}
.ie7 .profileHome .btn,
.ie7 .profileHome input {
  padding:0 0 5px 0;
}
.ie7 .profileHome header img {
  margin-top: 0 !important; /* important to override oocss stuff for IE */
  padding-top: 0 !important; /* important to override oocss stuff for IE */
}
.firstJob {
  line-height: 17px;
}
.ie7 .profileForm label,
.profileForm label {
  line-height:115%;
  padding-top:7px;
  display:block;
}


/* ========================== Invitation / Notification ========================== */


/* ==== infinite scrolling styles ==== */


.spinner .ajaxloader { /** This class is important, it sets the spinner graphic **/
  background: transparent url('/v_img/ajax-loader.gif') center 10px no-repeat;
  display: block;
  width: 100%;
  height: 35px;
}
.inProgress { /** This is the spinner shown during the initial page load **/
  background: transparent url('/v_img/load.gif') center center no-repeat;
}
#imgloader { /** This is the spinner shown after the submit button is clicked **/
  height: 16px;
  width: 16px;
  background: transparent url('/v_img/loaderbtn.gif') left top no-repeat;
}
.nocontacts, .endoflist { /** 'No contacts' message formatting **/
  text-align: center;
  padding: 10px;
}
.containerMembers .member { /** For browsers that can handle it, we add a little fade effect as contacts are loaded **/
  -webkit-transition: opacity 1.2s;
  -moz-transition: opacity 1.2s;
  -o-transition: opacity 1.2s;
  transition: opacity 1.2s;
}
.containerMembers .newContact {
  opacity: 0;
}
.member {
  display: block;
}
.member:hover {
  border-radius: 4px;
  cursor: pointer;
  background: #F5F5F5;
}
.ie6 .member:hover {
  cursor: pointer;
  background: 0;
}
.ie6 .invitationCheck,
.ie6 .firstExperience,
.ie6 .sendReminder {
  width: auto;
}
.containerContactsListBox {
  background-color: white;
  overflow: auto;
  position: relative;
  padding: 0;
}
.sendingContactsOverlay { /** Styles for the overlay that is shown during the form submission **/
  position: absolute;
  top: 0;
}
.sendingContactsOverlayBackground {
  background: white;
  opacity: 0.6;
}
.ie6 .sendingContactsOverlay,
.ie6 .sendingContactsOverlayBackground,
.ie7 .sendingContactsOverlay,
.ie7 .sendingContactsOverlayBackground { /** Styles for the overlay that is shown during the form submission **/
  background: none;
  z-index: -999;
}
.sendingContactsMessage {
  background: transparent url('/v_img/ajax-loader.gif') center center no-repeat;
}
.ie6 .sendingContactsMessage,
.ie7 .sendingContactsMessage {
  background: none;
}
.toggleReflow  {/** Forces a browser reflow, in cases where the overlay was shown then hidden again (for example, if the form submission fails, this might happen). This is because otherwise, the scrollbar leaves an ugly white space when its removed. Toggling this class forces a repaint. **/
  width: 100%;
}
.members,
.nonmembers {
  border: 1px solid #ccc;
  border-radius: 3px 0 0 3px;
  overflow: hidden;
}
.memPhoto {
  width: 26px;
  height: 35px;
  background-color: #fff;
  border: 1px solid #CCC;
  padding: 1px;
}
.invitationWrapper ul,
.invitationWrapper li {
  list-style: none;
}
.viadeoContact {
  height: 55px;
}
.otherContact {
  width: 97%;
}
.invitationHome .memInfo {
  line-height: 110%
}
.messageAboutMembers,
.messageAboutContacts {
  background-color: #F1F1F1;
  width: 180px;
  border-right: 1px solid #CCC;
  border-top: 1px solid #FFF;
  text-align: center;
  display: table-cell;
  border-radius: 3px 0 0 3px;
}
.ie6 .membersMessage,
.ie6 .nonmembersMessage {
  height: inherit;
}
.membersMessage,
.nonmembersMessage {
  width: 135px;
  margin: 0 auto;
  font-size: 14px;
  color: #333;
}
.messageAboutMembers .inviteArrow,
.messageAboutContacts .inviteArrow {
  float: right;
  vertical-align: center;
  margin-right: -11px;
}
.messageAboutContacts .inviteArrow {
  margin-top: -42px
}
.sendToAllBox {
  height: 23px;
  border-bottom: 1px solid #CCCCCC;
}
.sendToAllBox ul {
  float: right;
  margin: 0;
  padding-left: 0;
}
.sendToAllBox li {
  float: right;
  margin: 0 10px 0 0;
  padding: 0;
}
.sendToAllBox label {
  width: auto;
  line-height: 17px;
}
.containerContactsListBox label,
.containerContactsListBox label {
  color: #666;
}
.invitationHome strong {
  color: #2F2F2F
}
.invitationHome .btn {
  font-size: 16px;
}
.invitationHome li .btn {
  font-size: 13px;
  font-weight: bold;
  height: 18px;
  padding: 2px 10px;
}
.invitationHome .btn .socialAction span {
  color: white;
  text-shadow:0 -1px 0 #70841A;
}
.invitationHome li .socialAction a {
  color: white;
}
.memberName {
  color: #333;
  display: block;
}
.optionalMsg {
  cursor: pointer;
}
.optionalMsgText {
  height: 100px;
  clear: both;
}
.ie6 .optionalMsgText {
  width: 100%;
}
.ie7 .optionalMsgText {
  margin-left: -50px;
  width: 850px;
  height: 100px !important;
}
.ie7 .btn span input{
  height: 22px;
}
#optionalMsg {
  clear: both;
}
.optionalLang span {
  padding: 8px 12px 0 0
}
.optionalLang select {
  width: 150px
}
#stillChar {
  font-weight: bold;
  color: #A4BB35;
}
.ie6 .nonmembersOuterWrapper,
.ie7 .nonmembersOuterWrapper {
  width: 654px;
  position: static;
}
.ie6 .nonmembersWrapper li,
.ie7 .nonmembersWrapper li {
  width:92%;
}
.ie6 .membersWrapper li,
.ie7 .membersWrapper li {
  width: 47%;
}
.ie6 .membersWrapper .member {
  display: inline;
}
.sendToAllBox a {
  color: #333;
  text-decoration: none;
}
.sendToAllBox a.toggleListSelection:hover {
  text-decoration: none;
}
.sendToAllBox a.toggleListSelection {
  text-decoration: underline;
  color: #000;
}
.reminderWrapper label {
  line-height: 15px;
}
/* --- classes for invite page container resizing --- */

.smallBox {
  height: 110px;
}
.smallContainer {
  height: 140px;
}
.mediumBox {
  height: 200px;
}
.mediumContainer {
  height: 230px;
}
.fullBox {
  height: 365px;
}
.fullContainer {
  height: 395px;
}
.sidebarMedium {
  margin: 80px auto 0;
}
.sidebarSmall {
  margin: 40px auto 0;
}
.sidebarFull {
  margin: 150px auto 0;
}

/* --- END classes for invite page container resizing --- */


/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */

.preload {
  display: none;
}
.shadowBottom {
  border-bottom: 1px solid #DDD;
  -webkit-box-shadow: 0 0 5px #cccccc;
  -moz-box-shadow: 0 0 5px #cccccc;
  -o-box-shadow: 0 0 5px #cccccc;
  box-shadow: 0 0 5px #cccccc;
}
.small {
  font-size: 12px;
}
.smaller {
    font-size: 11px;
}
.bigger {
  font-size: 16px;
}
.blue {
    color: #327999;
}
.grey {
    color: #666;
}
.lightGrey {
  color: #aaa;
}
.green {
  color: #A4BB35;
}
/* Centers given element as long as width is provided */
.center {margin-left:auto;margin-right:auto;}
/* For image replacement */
.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr;}
.ir br{display:none;}
/* Hide for both screenreaders and browsers:css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden{display:none;visibility:hidden;}
/* Hide only visually,but have it available for screenreaders:by Jon Neal.
www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard:drupal.org/node/897638 */
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;}
/* Hide visually and from screenreaders,but maintain layout */
.invisible{visibility:hidden;}
/* "Not allowed" cursor style. !important included to override any other set cursor styles*/
.notAllowed { cursor: not-allowed !important; }
/* Contain floats:nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,.cf:after{content: ""; display: table; }
.cf:after{clear: both; }
.cf {zoom: 1; }
.tac { text-align: center; }
.tal { text-align: left; }
.tar { text-align: right; }
.fl  { float: left; }
.fr  { float: right; }