/* 
  Common Style Sheet
  insert common rules here
  please use soft tabs with tab size 2 when editing
*/


/* = Reset
=========================================================================== */
body,
button, 
dd, 
dl, 
dt, 
fieldset, 
form, 
html,
p, 
ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

.bullet-list li {
  background: url(/img/v/spr_icons_vertical_r7.png) no-repeat 0 -595px;
  display: list-item;
  margin: 0;
  padding: 0 0 1px 12px;
}

.bullet-link-list li,
.bullet-link {
  background: url(/img/v/spr_icons_vertical_r7.png) no-repeat 0 -895px; 
  display: list-item;
  margin: 0 0 0 1px;
  padding: 0 0 4px 17px;
}

.bullet-link {
  background-position: 0 -896px;
  display: inline;
  padding: 0 0 0 17px;
}

abbr, 
button,
fieldset, 
img {
  border: 0;
}

/* = Initial values
=========================================================================== */

html { /* shows the right scrollbar in ff, regardless of the length of the page */
  overflow-y: scroll;
}

body {
  min-width: 985px;
  text-align: center;
}

p {
  margin: 0 0 10px;
}

button {
  background: none;
  cursor: pointer;
}

/* = defs for the columns in the content section
=========================================================================== */

.col_one, .col_two, .col_three, .col_5050 {
  display: inline;
  float: left;
  overflow: hidden;
}
.col_one {
  width: 315px;
}
.col_two {
  width: 650px;
}
.col_three {
  width: 985px;
}
.col_5050 {
  width: 482px;
}
.col_margin {
  margin-right: 20px;
}


/* = Float Classes
=========================================================================== */

.fl {
  float: left;
}
.fr {
  float: right;
}
.fn {
  float: none;
}

/* = Float Clearing and Containing Classes
=========================================================================== */
.clr {
  clear: both;
}
.clfx:after,
.col_one:after, .col_two:after, .col_three:after, .col_5050:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.overflow {
  overflow: hidden;
}
.avoid-overflow {
  overflow: visible !important;
}

/* = Position Classes
=========================================================================== */
.pos-rel {
  position: relative;
}
.pos-abs {
  position: absolute;
}
.pos-stat {
  position: static;
}

/* = text color Classes
=========================================================================== */

.disabled {
  color: #A0A0A0;
}

.grey {
  color: #808080;
}

.green, .status-color {
  color: #360;
}

h2.green,
h3.green,
h4.green {
  color: #006567;
}

.pending {/* CSS Document with additional/changed styles for new invitation page colors*/
  color: #ee7700;
}
.accepted {
  color: #aabb00;
} 
.following {
  color: #bcbcbc;
}

/* color defintions for normal text and headlines, do not use if possible */
.c333 {
  color: #333;
}
.c330 {
  color: #330;
}

/* = aligns cells and inline boxes
=========================================================================== */
.valign, .middle { /* TODO: merge */
  vertical-align: middle;
}

.valign_t {
  vertical-align: top;  
}

.valign_b {
  vertical-align: bottom; 
}

/* = display settings
=========================================================================== */
.block {
  display: block;
}
.hidden {
  display: none;
}
.inline {
  display: inline;
}
.force-inline {
  display: inline !important;
}

/* = border settings
TODO: merge!
=========================================================================== */
.no_border {
  border: none;
}

.noborder {
  border: 0 !important;
}

/* = text-align settings
=========================================================================== */
.center {
  text-align: center !important;
}
.right {
  text-align: right !important;
}

.text-align-left {
  text-align: left !important;
}

/* = margin and padding settings
=========================================================================== */

/* test class for indent left */
.indent-left {
  margin-left: 8px !important;
}

.mp0 {
  margin: 0 !important;
  padding: 0 !important;
}
.ml {
  margin-left: 8px;
}

.mb0 {
  margin-bottom: 0 !important;
}
.mb3 {
  margin-bottom: 3px !important;
}
.mb5 {
  margin-bottom: 5px !important;
}
.mb8 {
  margin-bottom: 8px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb15 {
  margin-bottom: 15px !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.ml0{
  margin-left:0 !important;
}
.ml5 {
  margin-left: 5px !important;
}
.ml10 {
  margin-left: 10px !important;
}
.ml15 {
  margin-left: 15px !important;
}
.ml20 {
  margin-left: 20px !important;
}
.mr0 {
  margin-right: 0 !important;
}
.mr5 {
  margin-right: 5px !important;
}
.mr10 {
  margin-right: 10px !important;
}
.mr15 {
  margin-right: 15px !important;
}
.mt5 {
  margin-top: 5px !important;
}
.mt10 {
  margin-top: 10px !important;
}
.mt15 {
  margin-top: 15px !important;
}
.mt20 {
  margin-top: 20px !important;
}

.p10 {
  padding: 10px !important;
}
.pb0 {
  padding-bottom: 0 !important;
}
.pb5 {
  padding-bottom: 5px !important;
}
.pb10 {
  padding-bottom: 10px !important;
}
.pl0 {
  padding-left: 0 !important;
}
.pl0{
  padding-left: 0 !important;
}
.pl10{
  padding-left: 10px !important;
}
.pl20 {
  padding-left: 20px !important;
}
.pl15 {
  padding-left: 15px !important;
}
.pr5 {
  padding-right: 5px !important;
}
.pr10 {
  padding-right: 10px !important;
}
.pt0 {
  padding-top: 0 !important;
}
.pt5 {
  padding-top: 5px !important;
}
.pt10 {
  padding-top: 10px !important;
}

/* = width settings
=========================================================================== */
.bw300 {
  width: 300px;
}
.bw285 {
  width: 285px;
}

/* = definition list table
=========================================================================== */

dl.dl-table {
  clear: both;
  margin: 0;
}
dl.dl-table dt {
  clear: left;
  float: left;
  margin: 0;
  padding: 0;  
  width: 100px; /* to be adjusted*/
}
dl.dl-table dd {
  display: block;
  margin: 0;
  padding: 0;
}
dl.dl-table dd:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

/* = icons for  official-events, ambassadors, moderators, xperts and premium members
  see ie_lte_7.css
=========================================================================== */

.icn-official-event,  
.icn-ambassador, 
.icn-moderator,
.icn-premium,
.icn-xpert {
  background: url(/img/v/spr_icons_r11.png) no-repeat;
  display:-moz-inline-box; /* first (do not change the order of these display values because it is a fallback for Fx 2) */
  display: inline-block; /* second */
  font-size: 100px; /* Fx2 does not play well with text-indent here, so font-size moves the character out of view */
  height: 10px;
  margin: 0 0 0 5px;
  outline: none;
  overflow: hidden;
  text-decoration: none;
  text-indent: -9999px;
  vertical-align: text-top;
  width: 9px;
}
a.icn-premium {
  background-position: -54px -161px;
}
a.icn-moderator {
  background-position: -72px -161px;
}
a.icn-ambassador {
  background-position: -90px -161px;
}
a.icn-xpert {
  background-position: -18px -254px;
}
a.icn-official-event {
  background-position: -198px -162px;
  height: 16px;
  width: 16px;
  margin: 0;
  vertical-align: top;
}


/* = Form Elements
=========================================================================== */

form, fieldset {
  width: auto;
}

input.text, 
textarea, 
select {
  font-family: Arial, Helvetica, sans-serif;
  border-color: #BFBFBF #E0E0E0 #E0E0E0 #BFBFBF;
  border-style: solid;
  border-width: 2px 1px 1px 2px;
  font-size: 12px;
}

.error-form-field {
  border-color: #BC100E #BC100E #FE9999 #FE9999 !important;
}

fieldset input,
fieldset select {
  width: 99%;
}

fieldset label {
  display: block;
  font-weight: bold;
  width: 100%;
}

/* = Links that point outside/inside the site, used on Rails side
=========================================================================== */
a.link-icon,
a.link-icon-external,
a.link-icon-internal {
  padding-left: 13px;
  background-repeat: no-repeat;
  background-position: center left;
  background-image: url(/img/n/outlink.gif);
}

a.link-icon[href^='https://www.xing.com'],
a.link-icon-internal {
  background-image: url(/img/n/inlink.gif);
}

/* =BOXES (flexible heigth, fixed width)
    when IE6 support drops, rewrite the CSS 'class element.adjacent-element'
    to 'class + element' and remove the 'class="adjacent-element"' from the
    elements.
    On top you can split the css selectors to use something like
    '.content-box.one-column', which will make the CSS way prettier.
=========================================================================== */
/*  IF the advertising on the search-page will no longer exist, please delete
    everything, that relates to .three-column-info-box-ad !
=========================================================================== */

.one-column-content-box, .two-column-content-box, .three-column-content-box,
.one-column-info-box, .two-column-info-box, .three-column-info-box,
.one-column-teaser-box, .two-column-teaser-box, .three-column-teaser-box,
.one-column-rounded-box, .two-column-rounded-box, .three-column-rounded-box,
.three-column-info-box-ad {
  background-color: #F0F6F5;
  border-color: #CEE2DC;
  border-style: solid;
  border-width: 1px;
  margin: 0 0 10px;
  padding: 7px 10px;
  position: relative;
}

.two-column-empty-box {
  margin: 0 0 10px;
  padding: 3px 0;
  position: relative;
}

.one-column-content-box:after, .two-column-content-box:after, .three-column-content-box:after,
.two-column-empty-box:after,
.one-column-info-box:after, .two-column-info-box:after, .three-column-info-box:after,
.one-column-teaser-box:after, .two-column-teaser-box:after, .three-column-teaser-box:after,
.one-column-rounded-box:after, .two-column-rounded-box:after, .three-column-rounded-box:after,
.three-column-info-box-ad:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.one-column-content-box b, .two-column-content-box b, .three-column-content-box b,
.one-column-info-box b, .two-column-info-box b, .three-column-info-box b,
.one-column-teaser-box b, .two-column-teaser-box b, .three-column-teaser-box b,
.one-column-rounded-box b, .two-column-rounded-box b, .three-column-rounded-box b,
.three-column-info-box-ad b {
  background: url(/img/v/spr_box_border_r3.png) no-repeat;
  bottom: -1px;
  display: block;
  font-size: 1px; /* IE6 needs that */
  height: 4px;
  left: -1px;
  position: absolute;
  top: auto;
}
.one-column-content-box,
.one-column-info-box,
.one-column-teaser-box,
.one-column-rounded-box {
  width: 293px;
}
.two-column-content-box,
.two-column-info-box,
.two-column-teaser-box,
.two-column-rounded-box {
  width: 628px;
}
.two-column-empty-box {
  width: 650px;
}
.three-column-content-box,
.three-column-info-box,
.three-column-teaser-box,
.three-column-rounded-box {
  width: 963px;
}
.three-column-info-box-ad {
  width: 833px;
}
.one-column-content-box b,
.one-column-info-box b,
.one-column-teaser-box b,
.one-column-rounded-box b {
  width: 315px;
}
.two-column-content-box b,
.two-column-info-box b,
.two-column-teaser-box b,
.two-column-rounded-box b {
  width: 650px;
}
.three-column-content-box b,
.three-column-info-box b,
.three-column-teaser-box b,
.three-column-rounded-box b {
  width: 985px;
}
.three-column-info-box-ad b {
  width: 855px;
}
.one-column-content-box b.adjacent-element, .two-column-content-box b.adjacent-element, .three-column-content-box b.adjacent-element,
.two-column-empty-box b.adjacent-element,
.one-column-info-box b.adjacent-element, .two-column-info-box b.adjacent-element, .three-column-info-box b.adjacent-element,
.one-column-teaser-box b.adjacent-element, .two-column-teaser-box b.adjacent-element, .three-column-teaser-box b.adjacent-element,
.one-column-rounded-box b.adjacent-element, .two-column-rounded-box b.adjacent-element, .three-column-rounded-box b.adjacent-element,
.three-column-info-box-ad b.adjacent-element {
  bottom: auto;
  top: -1px;
}

.one-column-content-box b.adjacent-element {
  background-position: 0 -24px;
}
.one-column-content-box b {
  background-position: 0 -28px;
}
.two-column-content-box b.adjacent-element {
  background-position: -315px -24px;
} 
.two-column-content-box b {
  background-position: -315px -28px;
}
.three-column-content-box b.adjacent-element {
  background-position: -965px -24px;
}
.three-column-content-box b {
  background-position: -965px -28px;
}

.one-column-info-box, .two-column-info-box, .three-column-info-box, .three-column-info-box-ad {
  background: #FFF url(/img/v/spr_box_border_right_r1.png) repeat-y top right;
  border-color: #BDBDBD #646464 #646464 #BDBDBD;
}
.one-column-info-box b, .two-column-info-box b, .three-column-info-box b, .three-column-info-box-ad b {
  /* normally -1px would be enough, but IE6 has sometimes odd rendering... */
  bottom: -2px;
}
.one-column-info-box b.adjacent-element {
  background-position: 0 -14px;
}
.one-column-info-box b {
  background-position: 0 -19px;
  height: 5px;
}
.two-column-info-box b.adjacent-element {
  background-position: -315px -14px;
} 
.two-column-info-box b {
  background-position: -315px -19px;
  height: 5px;
}
.three-column-info-box b.adjacent-element {
  background-position: -965px -14px;
}
.three-column-info-box b {
  background-position: -965px -19px;
  height: 5px;
}
.three-column-info-box-ad b.adjacent-element {
  background-position: -1950px -14px;
  height: 5px;
}
.three-column-info-box-ad b {
  background-position: -1950px -19px;
  height: 5px;
}

.one-column-teaser-box, .two-column-teaser-box, .three-column-teaser-box {
  background:  #F0F0F0;
  border-color: #D2D2D2;
}
.one-column-teaser-box b.adjacent-element {
  background-position: 0 0;
}
.one-column-teaser-box b {
  background-position: 0 -4px;
}
.box-triangle {
  background: url(/img/triangle.gif) no-repeat;
  height: 6px;
  left: 0;
  position: absolute;
  top: -6px;
  width: 11px;
}
.two-column-teaser-box b.adjacent-element {
  background-position: -315px 0;
} 
.two-column-teaser-box b {
  background-position: -315px -4px;
}
.three-column-teaser-box b.adjacent-element {
  background-position: -965px 0;
}
.three-column-teaser-box b {
  background-position: -965px -4px;
}

.one-column-rounded-box, .two-column-rounded-box, .three-column-rounded-box {
  background: #F0F0F0;
  border-color: #F0F0F0;
}
.one-column-rounded-box b.adjacent-element {
  background-position: 0 -8px;
}
.one-column-rounded-box b {
  background-position: 0 -11px;
  height: 3px;
}
.two-column-rounded-box b.adjacent-element {
  background-position: -315px -8px;
} 
.two-column-rounded-box b {
  background-position: -315px -11px;
  height: 3px;
}
.three-column-rounded-box b.adjacent-element {
  background-position: -965px -8px;
}
.three-column-rounded-box b {
  background-position: -965px -11px;
  height: 3px;
}


/* For example: You can use this class to set another background for the one-column-content-box */

.box-white {
  background-color: #fff !important;
}

/*  =ONE COLUMN INFO BOXES THAT CONTAIN START PAGE INFO BOXES
----------------------------------------------------------------------------*/
.one-column-info-box .grey-headline-short {
  background: none;
  font-size: 1em;
  height: auto;
  margin-bottom: 10px;
}

.one-column-info-box .grey-headline-short span {
  padding: 0;
}

/* SPRITE: big icons used e.g. in right column boxes at Groups or CP
================================================================================== */
.big-icon-follow,
.big-icon-unfollow,
.big-icon-recommend,
.big-icon-rss,
.big-icon-joingroup,
.big-icon-bookmarkgroup,
.big-icon-aboutgroup {
  background: url(/img/s/spr_big_icons_vertical_r4.png) no-repeat center 0;
}

.big-icon-follow {
  background-position: center -270px;
}

.big-icon-unfollow  {
  background-position: center -315px;
}

.big-icon-recommend {
  background-position: center -90px;
}

.big-icon-rss {
  background-position: center -485px;
}

.big-icon-joingroup {
  background-position: center -350px;
}

.big-icon-bookmarkgroup {
  background-position: center -395px;
}

.big-icon-aboutgroup {
  background-position: center -438px;
}

/* box containing big icons and links below icons */
.action-list {
  border-bottom: 1px dotted #9a9a9a;
  margin-bottom: 5px;
  overflow: hidden;
  padding-bottom: 5px;
}

.two-cols div {
  width: 49.5%;
}

.three-cols div {
  overflow: hidden;
  width: 32.9%;
}

.three-cols div.middle {
  margin: 0 10px;
  width: 27%;
}

.action-list a {
  display: block;
  padding-top: 37px;
}

.action-list strong {
  background-color: #FFF;
  display: block;
}

/* positions the X-button in the mymk- and mysk-template in ie6, ie7, ff2 and ff3
================================================================================== */
.postr {
  position: absolute;
  right: 5px;
  text-decoration: none;
  top: 2px;
}

/* retrieved from stylesheet.css
================================================================================== */
a.underline {
  text-decoration: underline;
}
.nobr {
  white-space: nowrap;
}
.b {
  font-weight: bold;
}

.pointer {
  cursor: pointer;
}

.inline-hint {
  color: #a6a6a6;
}

/* greybar
--------------------------------------------------------------------------- */

h2.list-headline,
h2.list-headline span {
  background: url(/img/v/spr_button_r5.png) no-repeat;
  border: 0;
  color: #333;
  display: block;
  white-space: nowrap;
}

.settings h2.list-headline,
.settings h2.list-headline span {
  background: url(/img/xing/bg_hl_col_three.gif);
}

h2.list-headline {
  background-position: right -181px;
  font-size: 12px;
  margin: 0 0 10px;
  padding: 0 8px 0 0;
  position: relative;
  text-decoration: none;
}

h2.list-headline img.loading-indicator {
  position: absolute;
  right: 8px;
  top: 5px;
}

h2.list-headline span {
  background-position: left -181px;
  display: inline-block;
  height: 27px;
  line-height: 27px;
  margin: 0;
  max-width: 885px;
  padding: 0 0 0 10px;
}