/*
-------------------------
MentorNet
design by twist
css by mottomo
-------------------------

 */

 /* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; }
/*ul,ol { list-style: none; }*/
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
 * :focus { outline: 0; }
 /* TRANSPARENT PNG FIX */
img, div { behavior: url(core/iepngfix.htc) }
/* The url is relative to the document, not to the css file! */
/* Prefer absolute urls to avoid confusion */
/* This goes for all htc files (search and replace) */
    
/* GLOBAL */
@font-face {
    font-family: 'sugoregular';
    src: url('sugo-webfont.eot');
    src: url('sugo-webfont.eot?#iefix') format('embedded-opentype'),
         url('sugo-webfont.woff') format('woff'),
         url('sugo-webfont.ttf') format('truetype'),
         url('sugo-webfont.svg#sugoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
strong { font-weight:bold;  }
em, i { font-style:italic; }
.boldital { font-style:italic; font-weight:bold; }
.allcentered {text-align:center}
p {padding:3px 0}
.white {color:#ffffff}
.subtitle {color:#666666}
.title {color:#C43A31!important}
.link {color:#CC9F3B}
.small {font:10px Arial, Helvetica, sans-serif}
.big {font:15px/20px "Avenir", "Nunito", Arial, Helvetica, sans-serif; }
.bigitalic {color:#E80088; font:37px/45px "Times New Roman", Times, serif; font-style:italic}
::selection, ::-moz-selection {background: #DBE999; }

body { -webkit-text-size-adjust:none; font:12px/16px Arial, Helvetica, sans-serif; color:#404041;}
hr {border:0; color:#E2E2E2; background-color:#E2E2E2; height:1px; width:70%; position:relative; margin:3px auto}

/* LINKS */
a { color: #CC9F3B; }
a:link, a:visited, a:active { text-decoration: none; }
a:hover {color:#666666; text-decoration: none; }


/* TOP MENU */
#header {
    width:100%;
    height:80px;
    background:#FFFFFF;
    border-bottom:4px solid #C43A31;
    position: fixed;
    z-index: 10;
    top: 0;
}

a.homelink {display:block; text-indent:-9999px; no-repeat; height:60px; width:420px; position:absolute; top:12px; left:86px }

a.rightlogo {display:block; text-indent:-9999px; height:66px; width:201px; position:absolute; top:12px; right:100px }

#header #menuholder {height:40px; position: relative; top:20px; width: 500px; margin-left: 400px;}
#header #menuholder ul {list-style:none; float:right; }
#header .menu li {float:left; }
#header .menu a {color:#b9b9b9; text-decoration:none; text-transform:uppercase; padding:0px 10px; font-family:"sugoregular", "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:15px; letter-spacing:0.06em }
#header .menu a span { color:#666666 }
#header .menu a:hover, #header .menu a:hover span, #header .menu li.selected a, #header .menu li.selected a span  { color:#C43A31 }

#header .menu li ul { display: none; }
#header .menu li:hover ul {
    display: block;
    position: absolute;
    font-family: "sugoregular", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 15px;
}
#header .menu li ul {
    background: #FFFFFF;
    box-shadow: 0px 5px 3px #000;
    margin-left: 5px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 5px;
    padding-top: 10px;
    margin-top: 0;
}
#header .menu li ul li {
    float: none;
    display: block;
    padding-bottom: 3px;
    padding-top: 3px;
}
#header .menu li ul li:hover {
    background: #666666;
}

#header #submenuholder {height:40px; position: absolute; top:40px; right:400px; margin-left:300px}
#header #submenuholder ul {list-style:none; float:right; }
#header .submenu li {float:left; }
#header .submenu a {color:#b9b9b9; text-decoration:none; padding:0px 10px; font-family:"sugoregular", "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:15px; letter-spacing:0.06em }
#header .submenu a:hover { color:#656565 }
#header .submenu li.selected a { color:#C43A31 }

#social {position:absolute; top:18px; right:77px}
a.menu-facebook, a.menu-youtube, a.menu-twitter, a.menu-google, a.menu-linkedin {display:block; float:left; margin:0 5px}

#donate-box { dispaly: none; position:absolute; right:80px; top:74px; padding-top:2px; background-color:#C43A31; border-left:solid #C43A31 3px; border-bottom:solid #C43A31 3px; text-align:center; width:74px; height:22px; z-index:99 }
#donate-boxBLUESAMPLE { position:absolute; right:80px; top:74px; padding-top:2px; background-color:#004a8d; border-left:solid #6dd0f7 3px; border-bottom:solid #6dd0f7 3px; text-align:center; width:74px; height:22px; z-index:99 }
#donate-button { height:21px; margin:0 auto; padding:0px; color:#ffffff; background:none; border:none; text-transform:uppercase; font-family:"sugoregular", "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:19px; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; display:block; font-weight:normal; line-height:12px; text-decoration:none; -webkit-font-smoothing:antialiased; text-shadow:#000 0 1px 0; cursor:pointer }
#donate-button:hover { color:#666666!important }

#leftbarmenu { height:26px; position:absolute; top:84px; left:86px; background:#C43A31; display: none;}
.leftbarmenu1, .leftbarmenu2, .leftbarmenu3, .leftbarmenu4, .leftbarmenu5 {height:20px; float:left; text-align:center; padding:5px 11px 1px 11px; color:#fff; border-right:1px solid #fff}
.leftbarmenu4 {padding:2px 18px 0 18px; height:22px; width:21px; background:url(../assets/tinybubble.png) no-repeat center; font-size:9px; color:#000; font-weight:bold}
.leftbarmenu5 {padding:4px 18px 0 18px; border:none}

.leftbarmenu4 a {color:#000}
.leftbarmenu4 a:hover {color:#fff}

/*
  *  Chat bubble dropdown stuff
*/
.bubble_box a:hover {color:#CC9F3B;}

.leftbarmenu4 .bubble_box {
  width: 300px;
  background: #fff;
  margin: 0 auto;
  position: relative;
  top:14px; 
  left: -17px;
  z-index: 99998;
  display: none;
}
.bubble_box header {
  background: #333333;
  height: 19px;
  padding: 5px 10px;
}
.bubble_box .menu-icon {
  background: #C43A31;
  padding: 5px 10px;
  float: left;
  font-size: 3em;
  line-height: 0.5em;
  color: #fff;
  border-radius: 3px;
}
.bubble_box .menu-icon:hover {
  background: #C43A31;
  cursor: pointer;
}
.bubble_box h1 {
  float: right;
  color: #fff;
  margin: 5px;
  font-weight: 300;
  font-size: 1.3em;
}
.bubble_box .new {
  background: rgb(57, 202, 173);
  color: #fff;
  text-align: center;
  padding: 20px;
}
.bubble_box .new:hover {
  cursor: pointer;
  background: rgba(57, 202, 173, 0.9);
}
.bubble_box .messages {
  padding: 10px;
  background: #DCDCDC;
}
.bubble_box .message {
  float: left;
  width: 93%;
  margin: 10px 0;
  border-bottom: 1px solid #ccc;
}
.bubble_box .message p {
  font-size: 1.3em;
  width: 90%;
  margin: 5px 0;
}
.bubble_box img {
  border-radius: 100%;
  float: left;
  margin: 0 10px 15px 0;
}
.bubble_box p.time {
  color: rgba(0,0,0,0.5);
  font-weight: 400;
}
.bubble_box h2 {
  font-size: 1em;
  font-weight: 400;
}
.bubble_box h2:after {
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  background: #C43A31;
  border-radius: 100%;
  margin-left: 5px;
}
.bubble_box footer {
 /*  width: 100%; */
  background: #DCDCDC;
  padding: 10px;
  text-align: center;
  font-size: 0.8em;
}
.bubble_box footer p:before,
.bubble_box footer p:after {
  content: ' - ';
}


#rightbarmenu {width:464px; height:26px; position:absolute; right:80px; top:74px; background:#CC9F3B}
.rightbarmenu1, .rightbarmenu2, .rightbarmenu3, .rightbarmenu4 {height:20px; width:114px; float:left; text-align:center; padding:5px 0 1px 0; color:#fff; border-right:1px solid #fff}
.rightbarmenu4 {border-right:none}
#rightbarmenu .selected {background:#000; color:#CC9F3B; border-right:none}

/* MAIN CONTENT */
.container {
    width: 100%;
    height: auto;
    min-height: 100%;
}

.bgimage {
   display: block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 10% 0 0 0;
    z-index: -11;
    height:500px;
}

img.bgM { 
   display: block;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

.footer {
  width:100%; 
  height:20px; 
  padding:15px 0; 
  background:#FFFFFF;
  position: fixed;
  bottom: 0;
  left: 0;
  text-align:center;
  font:13px Arial, Helvetica, sans-serif; 
  color:#B3B3B3;
  z-index: 10;

}
.footer a, .footer a:visited { color:#B3B3B3; margin:0 10px}
.footer a:hover { color:#DCDCDC}
.footer a.selected, #footer a:hover.selected {color:#E80088; cursor:default}



/* .bgimage img {visibility:hidden; position:absolute; } */
.topcolorbar {width:100%; height:10px; position:absolute; top:0;}    
.botcolorbar {width:94%; height:10px; position:absolute; bottom:0;} 
.barcolor1 { background:#666666;}    /* default green  */
.barcolor2 {background:#C43A31;} /* default pink */
.barcolor3 { background:#666666;} /* default blue  */
.boxleft {
    min-height:492px;
    width:421px;
    height:auto;
    position:relative;
    top:125px;
    left:86px;
    background:url(../assets/bg_white85.png);
    margin-bottom: 200px;
}
.boxfull {
    width:1125px;
    height:540px;
    position:relative;
    left:15px;
    top:150px;
    margin:0 auto;
    margin-bottom: 200px;
    background:url(../assets/bg_white85.png);
}


/* PREVIEW PLATFORM (mostly unchanged) */
#previous-link, #next-link { position:fixed; top:360px }
#previous-link { left:8px }
#next-link { right:8px }
.jcarousel-skin-tango .jcarousel-direction-rtl { direction:rtl }
.jcarousel-skin-tango .jcarousel-container-horizontal { width:780px; margin-left:auto; margin-right:auto }
.jcarousel-skin-tango .jcarousel-container-vertical { width:75px; height:245px; padding:40px 20px }
.jcarousel-skin-tango .jcarousel-clip { overflow:hidden }
.jcarousel-skin-tango .jcarousel-clip-horizontal { width:467px; height:270px; margin-left:auto; margin-right:auto }
.jcarousel-skin-tango .jcarousel-clip-vertical { width:75px; height:245px }
.jcarousel-skin-tango .jcarousel-item-horizontal { margin-left:0; margin-right:10px }
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal { margin-left:10px; margin-right:0 }
.jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom:10px }
.jcarousel-skin-tango .jcarousel-item-placeholder { background:#fff; color:#000 }
.jcarousel-skin-tango .jcarousel-next-horizontal { position:absolute; top:110px; right:5px; width:32px; height:32px; cursor:pointer; background:transparent url("../assets/next-horizontal.png") no-repeat 0 0 }
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal { left:5px; right:auto; background-image:url("../assets/prev-horizontal.png") }
.jcarousel-skin-tango .jcarousel-next-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-horizontal:focus { background-position:-32px 0 }
.jcarousel-skin-tango .jcarousel-next-horizontal:active { background-position:-64px 0 }
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { cursor:default; background-position:-96px 0 }
.jcarousel-skin-tango .jcarousel-prev-horizontal { position:absolute; top:110px; left:5px; width:32px; height:32px; cursor:pointer; background:transparent url("../assets/prev-horizontal.png") no-repeat 0 0 }
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal { left:auto; right:5px; background-image:url("../assets/next-horizontal.png") }
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-horizontal:focus { background-position:-32px 0 }
.jcarousel-skin-tango .jcarousel-prev-horizontal:active { background-position:-64px 0 }
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active { cursor:default; background-position:-96px 0 }
#demo-computer { text-align:center; padding-top:10px; position:relative; width:840px; margin-left:auto; margin-right:auto }
#demo-computer .demo-slideshow { text-align:center; top:173px; width:100%; position:absolute }
#demo-computer .caption { display:none }
#demo-computer #current-caption-wrapper { text-align:center; width:100%; position:absolute; bottom:70px }
#demo-computer #current-caption-wrapper #current-caption { margin:0px auto 0px auto; width:900px; font-size:14px; line-height:21px }
#demo-computer #current-caption-wrapper #current-caption .emphasis { color:#bbcf2f; font-size:18px }

/* OUR MISSION */
img.missionbubbles {margin:0 0 20px 110px}
.whitebox {width:987px; height:250px; background:#fff; position:relative; margin:0 auto}
#missionbox1 {width:262px;  margin:0 67px 0 48px; float:left}
#missionbox2 {width:585px;  margin:0; float:left}
.missionbox h1 {color:#BBD92F; font:23px/40px Arial, Helvetica, sans-serif; border-bottom:1px solid #BBD92F; display:block; margin:10px 0}
#missionbox2 p {display:block; float:left; width:268px; padding-right:24px}

/* OUR BOARD */
.boardphoto {position:absolute; left:69px; top:36px}
.boardphoto h1 {color:#B0D235; font:22px/33px Arial, Helvetica, sans-serif}
.boardphoto img {border:5px solid #a1a1a1; border-bottom:none}
.boardnav {position:absolute; top:45px; right:10px; font:14px Arial, Helvetica, sans-serif}
.boardnav a, .boardnav a:visited {color:#B0D235; margin:0 10px }
.boardnav a:hover {color:#ACACAC; }
.boardnav a.selected {color:#fff; }
.boardbox {position:absolute; top:262px; left:69px; background:#fff; width:987px; height:270px; }
.boardbox  h1 {color:#B0D235; font:18px Arial, Helvetica, sans-serif}
.boardbox  h2, .boardbox  h2 a, .boardbox  h2 a:visited {color:#009CFF; font:18px "Times New Roman", Times, serif; font-style:italic!important}
.boardbox  h2 {padding-bottom:10px}
a.backlink, a.nextlink {display:block; text-indent:-9999px; width:44px; height:45px; background:url(../assets/arrows.png) no-repeat; position:absolute; top:245px}
a.backlink {left:-20px}
a.nextlink {right:-20px; background-position:-50px 0}
a:hover.backlink {background-position:0 -60px}
a:hover.nextlink {background-position:-50px -60px}

/* ADVISORY BOARD  */
.topbanner {background:#B0D142; height:45px; padding-top:5px; width:100%; text-align:center; font:16px Arial, Helvetica, sans-serif; color:#fff; position:absolute; top:10px;}
.advisoryheader {font:22px Arial, Helvetica, sans-serif; color:#B0D235; position:absolute; left:80px; top:85px}
#advisoryscroll {width:1000px; height:350px; margin:120px 0 0 60px; padding-right:10px}
.advisorholder {position:relative}
.advisoryphoto img {border:3px solid #838383; margin:0 10px 60px 9px} 
.advisoryphoto a {display:block; text-indent:-9999px; background:url(../assets/linkedin_btn.png) no-repeat; width:20px; height:20px; position:relative; top:-73px; left:0; z-index:99} 
.advisoryphoto a:hover {background-position:0 -20px}
.advisoryinfo {font:13px/16px Arial, Helvetica, sans-serif; color:#fff; width:175px; position:absolute; top:0; left:120px }
.advisoryinfo h1 {color:#B0D235; font:16px Arial, Helvetica, sans-serif}
.advisoryinfo em {font:13px/16px "Times New Roman", Times, serif; font-style:italic; }

/* COUNCIL */
.council {margin:100px 47px 0 100px; font:16px/35px Arial, Helvetica, sans-serif; color:#BBD92F} 
.council span {color:#E80088} 
.council em {color:#fff; font:16px/25px "Times New Roman", Times, serif; font-style:italic}
.council a, .council a:visited { color:#BBD92F} 
.council a:hover {color:#E80088} 

/* SUPPORTERS */
.supporterbars div {width:1px; height:100%; background:#808080; position:absolute; top:0; z-index:-1}
.supportbar1 {left:280px}
.supportbar2 {left:490px}
.supportbar3 {left:798px}
.supportheadings {color:#B0D235; font:22px Arial, Helvetica, sans-serif; position:relative; top:40px; left:50px}
#supporterslist {width:1010px; height:400px; margin:70px 0 0 50px; padding-right:10px; color:#fff; }
#supporterslist h1 {color:#B0D235; font:14px Arial, Helvetica, sans-serif; padding-bottom:5px} 
#supporterslist img {border:4px solid #A0A1A0; margin-bottom:7px} 
#supporterslist ul {margin:0 0 25px 12px} 
#supporterslist li {text-indent:-11px; padding-right:30px}
#supporterslist li:before {content: "\2022"; padding-right:.5em; color: #B0D235; }

/* PRIVACY */
#privacyscroll {width:995px; height:400px; margin:70px 0 0 65px; padding-right:10px; color:#fff}
#privacyscroll h1 {color:#B0D235; font:14px Arial, Helvetica, sans-serif}
#privacyscroll ul {margin:10px 22px}
#privacyscroll li {text-indent:-11px; padding-right:30px}
#privacyscroll  li:before {content: "\2022"; padding-right:.8em; color: #B0D235; }

/* OTHER SECONDARY PAGES */
.pageheading {color:#B0D235; font:22px Arial, Helvetica, sans-serif; position:absolute; top:40px; left:80px}
#pagescroll {width:1010px; height:400px; margin:70px 0 0 50px; padding-right:10px; color:#fff}

/* TOOL PAGES */
#betabubble { width:122px; height:122px; background:url(../assets/side_bubble.png) no-repeat; text-align:center; position:absolute; right:-67px; bottom:8px; z-index:7; cursor:pointer}
#betabubble a {color:#666666}
#betabubble p {color:#666666; font:20px/18px "Avenir", "Nunito", Arial, Helvetica, sans-serif; padding:20px}
#betabubble em {color:#C43A31; font:21px/18px "Times New Roman", Times, serif; font-style:italic}
#betainfo { z-index:5; font:11px/14px Arial, Helvetica, sans-serif; color:#656565; background:#f0f0f0; width:591px; height:100px; padding:10px 70px 10px 30px; position:absolute; bottom:10px; right:0;  border-block-start: #E2E2E2; border-width: 1px;
    border-style: inset;
    border-color: #ffffff;
    border-block-right-color: #E2E2E2;}
/* #betainfo {z-index:5; font:11px/14px Arial, Helvetica, sans-serif; color:#fff; background:#C43A31; width:591px; height:100px; padding:10px 70px 10px 30px; position:absolute; bottom:10px; right:0;} */
#betainfo strong {font-size:16px; font-weight:normal}
#betainfo .big {font-size:13px; line-height:14px}

a#betafeedback {font:11px Arial, Helvetica, sans-serif; color:#fff; background:#29A9FC; height:10px; width:330px; padding:3px 0; position:relative; margin:111px auto 0 auto; text-align:center; display:block}
a#betafeedback:hover {background:#C43A31}

.boxleftwide {
    width:694px;
    position:relative;
    top:185px;
    left:80px;
    margin-bottom: 250px;
    padding-bottom: 30px;
    min-height: 490px;
    background:url(../assets/bg_white85.png);
}
.boxleftwide h2 {color:#666666; font:18px/20px "Avenir", "Nunito", Arial, Helvetica, sans-serif; margin:20px 0 10px 0 }

/*
.button {
    background: #666666;
    border-color: #C8C8C8;
    border-width: 1px;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 6px 6px 4px;
    margin-top: 7px;
    font: 12px;
    width: 70px;
    height:28px;
}
*/
.boxleftwide .button:hover {
    background: #666666;
}
.groupchat .button {
    background: #ABABAB;
    border-color: #C8C8C8;
    border-width: 1px;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 6px 6px 4px;
    margin-top: 7px;
    font: 12px;
    width: 150px;
    height:28px;
}

.groupchat .button:hover {
    background: #666666;
}
.topcolorbartall {height:24px}
.botcolorbarnavfull {width:634px; height:10px; position:absolute; bottom:0; left:30px}
.botcolorbarnavleft {width:664px; height:10px; position:absolute; bottom:0; left:30px}
.botcolorbarnavright {width:664px; height:10px; position:absolute; bottom:0; left:0}

.accountmanagesubnav {border-top:23px solid #666666; background:#C43A31; height:23px}
.accountmanagesubnavlast { background:#666666; }
.accountmanagesubnav a {display:block; padding: 5px 13px 0 13px; color:#fff; float:left; height:18px; background:#C43A31; border-right:1px solid #fff; font:12px/12px "Avenir", "Nunito", Arial, Helvetica, sans-serif}
.accountmanagesubnav a.last {border:none!Important}
.accountmanagesubnav a:hover {color:#666666}
.accountmanagesubnav a.on {background:#666666; color:#fff; cursor:default}


.accountsetup h1 {font:25px/26px "Avenir", "Nunito", Arial, Helvetica, sans-serif; color:#666666; margin:35px 0 10px 0}
.accountsetup h1 strong {color:#666666; font-weight:normal}
.accountsetup h2 {font:18px/21px "Avenir", "Nunito", Arial, Helvetica, sans-serif; color:#666666; margin:0px 0 10px 0} /* BBD92F - green */

.accountsetup h2 strong {color:#C43A31; font-weight:normal}
.accountsetup tr {color:#4D4E4E; font:12px Arial, Helvetica, sans-serif}
.accountsetup td {width:59px; font:12px Arial, Helvetica, sans-serif}
.accountsetup input, .accountsetup select {width:190px; height:16px; border:1px solid #C8C8C8; margin:15px 0; background:transparent; border-radius: 0; color:#5C5C5C}
.accountsetup select {background:url(../assets/select_drop_arrow.png) no-repeat right; height:18px; width:292px; padding-left:5px}
.narrowerinputs input {width:230px;}
.narrowerinputs select {width:232px;}
.evennarrowerinputs input {width:220px;}
.evennarrowerinputs select {width:162px;}
input.datefield {width:60px;}
.bottompagenav {font:14px Arial, Helvetica, sans-serif; color:#B0B0B0; text-align:center; position:absolute; width:100%; bottom:30px}
.bottompagenav a, .bottompagenav a:visited {color:#B0B0B0}
.bottompagenav a:hover, .bottompagenav a.on {color:#666666; font-weight:bold}
.bottompagenav a.on {cursor:default}
.infoleft {width:244px; min-height:233px; margin:0 20px 0 34px; float:left; border-right:1px solid #4D4E4E; color:#4D4E4E}
.infoleft strong {color:#00A8FF}
.inforight {width:346px; min-height:233px;  float:left; color:#4d4d4d; border-right:1px solid #4D4E4E;}
#savebtn, #nextbtn, #backbtn {
    padding: 0;
    display:block;
    background: #C43A31;
    cursor:pointer;
    border-radius: 100px;
    border: 8px solid rgba(90,90,90,0.3);
    -moz-background-clip: padding;     /* Firefox 3.6 */
    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
    background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
    z-index: 2;
    color: white;
    font-size: 13px;
    font-weight: bold;
    box-sizing: content-box;
    box-shadow: inset 0px 0px 10px 1px rgba(255,255,255,0.8);
}
#savebtn span, #nextbtn span, #backbtn span {
    display: block;
    margin-top: 17px;
    width: 100%;
    text-align: center;
}

input#nextbtn {
    text-align: center;
}

#nextbtn:hover, #backbtn:hover {
    background: #666666;
    border: 8px solid rgba(90,90,90,0.3);
    -moz-background-clip: padding;     /* Firefox 3.6 */
    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
    background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

#savebtn {
    width:67px;
    height:30px;
    background-position:-120px 0;
    border-radius: 3px;
    border: 3px solid rgba(90,90,90,0.3);
    -moz-background-clip: padding;     /* Firefox 3.6 */
    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
    background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}
#savebtn:hover {
    background: #666666;
    border: 3px solid rgba(90,90,90,0.3);
    -moz-background-clip: padding;     /* Firefox 3.6 */
    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
    background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

#nextbtn {
    width:51px;
    height:51px;
    position:absolute;
    bottom:-27px;
    right:-25px;
}

#backbtn {
    background-position:-60px 0;
    width:51px;
    height:51px;
    position:absolute;
    bottom:-27px;
    left:-25px;
}

.questions {margin:20px 40px 0 30px; font-size:13px }
.questions h1 {color:#C43A31; font:34px/36px "Avenir", "Nunito", Arial, Helvetica, sans-serif; margin:0 0 15px 0}
.questions h2 {color:#666666; font:18px/20px "Avenir", "Nunito", Arial, Helvetica, sans-serif; margin:20px 0 10px 0 }
.questions h2 em {font:12px/20px Arial, Helvetica, sans-serif; color:#4D4D4D; font-style:italic}
.questions td  {font:12px Arial, Helvetica, sans-serif;  }
.questions td em {font:11px Arial, Helvetica, sans-serif; font-style:italic}
.questions input {width:395px; height:16px; border:1px solid #C8C8C8; margin:6px 0; color:#5C5C5C}
.questions textarea {width:460px; height:80px; border:1px solid #C8C8C8; margin:5px 0; color:#5C5C5C}
.questions select { border:1px solid #C8C8C8; margin:5px 0; background:transparent; -webkit-appearance: none; border-radius: 0; color:#5C5C5C; background:url(../assets/select_drop_arrow.png) no-repeat right; height:18px; width:150px; padding-left:5px}
.photoupload {width:55px; height:60px; border:1px solid #C8C8C8; float:left; margin-right:10px}
.questions a, .questions a:visited { color: #CC9F3B; }
.questions a:hover {color:#666666;  }


.aboutquestion {display:block; cursor:pointer; position:absolute; top:31px; color: #aaa; font-size: 16px; }
.aboutquestion:hover, .aboutquestion:hover i { color: #C43A31; }
.aboutquestion i { font-size: 22px; position: relative; top: 2px; color: #999; }
.aboutboxquestion {width:139px; height:40px;}

.leftboxprogress .progress_inner h3 {
    font-size:28px;
    font-weight:bold;
    margin: 0;
    margin-top:20px;
    position:relative;
    color: #666666;
}
.leftboxprogress .progress_inner em {
    font-size:22px;
    color: #666666;
}
.titlebar {height:27px; width:649px; top:-22px; text-transform:uppercase; color:#fff; padding:5px 0 0 45px; font:17px "Avenir", "Nunito", Arial, Helvetica, sans-serif;}
.doubleselection input, .doubleselection select {width:90%}
.doubleselection select {height:80px; background:#fff}

.leftboxprogress {

    background: #C43A31;
    box-shadow: inset 0px 0px 8px 0px #FFFFFF;
    border-radius: 100px;
    text-align:center;
    font:23px/23px "Avenir", "Nunito", Arial, Helvetica, sans-serif;
    color:#8C8C8C;
    position:absolute;
    top:-75px;
    right:-65px;
    border: 8px solid rgba(0,0,0,0.3);
    padding: 15px;
    -moz-background-clip: padding;     /* Firefox 3.6 */
    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
    background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}
.progress_inner {
    display: block;
    width: 90px;
    height: 90px;
    border: 5px solid #666666;
    border-radius: 100px;
    background: #FFFFFF;
}

.boxleft h1 {font:31px/36px "Avenir", "Nunito", Arial, Helvetica, sans-serif; margin:10px 0; color:#C43A31} /* BBD92F - pink */
.boxleft h2 {font:21px/26px "Avenir", "Nunito", Arial, Helvetica, sans-serif; margin:10px 0; color:#ffffff}
.boxleft table {width:340px; margin:3px 0 20px 30px  }
.boxleft td {font:12px Arial, Helvetica, sans-serif; vertical-align:middle }
.boxleft table input {width:222px; height:18px; background:#fff; border:1px solid #f1f1f1; margin:7px 0; border: 1px solid #dcdcdc;}
.nextarrow {position:absolute; bottom:-18px; left:185px; z-index:999}
.joinbox {padding-bottom:15px; top: 160px; margin-bottom: 300px;}
.joinbox p {margin:0 30px 0 30px}
.joinbox h1 {color:#C43A31; font:26px/26px "Avenir", "Nunito", Arial, Helvetica, sans-serif; margin:40px 0 5px 30px} /* D80D80 - pink */
.joinbox h2 {color:#666666; font:23px/26px "Avenir", "Nunito", Arial, Helvetica, sans-serif; margin:0 0 22px 30px} /*  AAC508 - green */
.joinbox h3 {color:#CC9F3B; font:18px/23px "Avenir", "Nunito", Arial, Helvetica, sans-serif; font-style:italic; margin:0 0 0 30px}
.joinbox h3 a:hover {color:#C43A31}
.joinbox h4 {color:#666666; font:14px/18px "Avenir", "Nunito", Arial, Helvetica, sans-serif; font-style:italic; margin:0 0 0 30px}
a.loginlinkgmail {background:url(../assets/loginlinks.png) no-repeat; display:block; height:17px; padding:5px 0 0 30px; font-style:italic}
a.loginlinklinkedin {background:url(../assets/loginlinks.png) no-repeat 0 -26px; display:block; height:21px; padding:5px 0 0 30px; font-style:italic}
a:hover.loginlinkgmail {background-position:0 -55px;}
a:hover.loginlinklinkedin {background-position:0 -81px;}
#joinbutton {width:31px; height:31px; text-indent:-99999px; background:url(../assets/next_arrow2.png) no-repeat; border:none; cursor:pointer; margin-left:8px}
#joinbutton:hover {background-position:0 -40px}

.whitebgbox {background:url(../assets/bg_white85.png)!important}
.community-web-hero {width:275px; height:276px; background:#F0F0F0; position:relative; top:29px; left:49px; float:left; clear:both}
.community-web-hero h1 {color:#666666; font:14px Arial, Helvetica, sans-serif; margin:10px 0 0 15px}
.community-web-hero h2 {color:#666666; font:11px/12px "Times New Roman", Times, serif; font-style:italic; margin:0 0 10px 15px} /*  00A3FF - light blue */
.community-web-hero p {color:#656565; font:10px/12px Arial, Helvetica, sans-serif; margin:0 10px 10px 15px; }
.community-web-hero img { width: 200px; }
.community-web-hero .img-wrapper {height: 200px; width: 200px;}


.community-web-hero1 {width:275px; height:174px; background:#F0F0F0; position:relative; top:10px; left:0px; float:left; overflow-y:scroll; clear:both}
.community-web-hero1 h1 {color:#666666; font:14px Arial, Helvetica, sans-serif; margin:10px 0 0 15px}
.community-web-hero1 h2 {color:#666666; font:11px/12px "Times New Roman", Times, serif; font-style:italic; margin:0 0 10px 15px}
.community-web-hero1 p {color:#656565; font:11px/14px Arial, Helvetica, sans-serif; margin:0 10px 10px 15px; }
.community-web-hero1 img { width: 273px; }
.community-web-hero1 .img-wrapper { height: 180px; overflow: hidden;}

.little-img-wrapper img { width: 77px;}
.little-img-wrapper { height: 80px;  overflow: hidden; }
.community-web1, .community-web2, .community-web3, .community-web4, .community-group-web1 {position:absolute; }
.community-web1 {width:320px; top:79px; left:380px;} /* web1: My Mentors/Mentees */
.community-group-web1 {width:620px; top:79px; left:380px;}
.community-web2 {width:225px; top:79px; left:780px;} /* web2: My Mentoring Circle */
.community-web3 {width:653px; top:79px; left:380px;}  /* web3: Pending Responses/Recommendations */
/* to change layout and have the web1 and web2 up top, change this top to 275px */
.community-web4 {width:653px; top:250px; left:380px;}  /* web4 : My Network */

.community-web-title {font:22px Arial, Helvetica, sans-serif; height:26px; border-bottom:1px solid #BEBFBE; margin-bottom:5px  }
.community-web-title em  { color:#C43A31; }
.community-web1 .community-web-title  { color:#666666;}
.community-group-web1 .community-web-title { color:#C43A31; }
.community-web2 .community-web-title { color:#C43A31; }
.community-web3 .community-web-title {color:#666666; }
.community-web4 .community-web-title {color:#666666; }

.community-web-holder {position:relative; float:left; }
.community-web-holder-group {position:relative; float:left;}

.community-web-photo {width:81px; height:95px; padding:7px; float:left; margin:0 10px 10px 0; background:url(../assets/bg_white20.png)}
.community-web-photo-group {width:81px; height:95px; padding:7px; float:left; margin:0 -10px 10px 0; background:url(../assets/bg_white20.png)}

.community-web-recommendation {width:183px; height:101px; padding:7px 13px 3px 4px; float:left; margin:0 10px 10px 0; background:url(../assets/web_community_recommendation_bg.png) no-repeat}
.community-name {width:183px; height:17px; margin:0; padding:5px 0 0 8px; position:relative; top:-5px; font:10px Arial, Helvetica, sans-serif; color:#fff  }
.community-name-matched {width:80px; height:17px; margin:0; padding:5px 0 0 0px; position:relative; font:12px Arial, Helvetica, sans-serif; color:#fff  }

/*
.community-web1 .community-name {background:#666666}
.community-web1 .community-name-matched {background:#666666}
.community-group-web1 .community-name {background:#666666}
.community-group-web1 .community-name-matched {background:#666666}
.community-web2 .community-name {background:#C43A31}
.community-web2 .community-name-matched {background:#C43A31}
.community-web4 .community-name-matched {background:#F0F0F0}
.community-web4 .community-name-matched a:hover {color:#fff; font-style:italic}
.community-web4 .community-name-matched a {color:#CC9F3B;}
.community-web3 .community-name {background:#666666; font-size:12px}
.community-web4 .community-name {background:#666666; font-size:12px}
*/

.community-web1 .community-name {background:#F0F0F0;}
.community-web1 .community-name-matched {background:#F0F0F0:}
.community-group-web1 .community-name {background:#F0F0F0}
.community-group-web1 .community-name-matched {background:#F0F0F0}
.community-web2 .community-name {background:#F0F0F0}
.community-web2 .community-name-matched {background:#F0F0F0}
.community-web3 .community-name {background:#666666; font-size:12px}
.community-web3 .community-name-matched {background:#666666; font-size:12px}

.community-web4 .community-name {background:#F0F0F0; font-size:12px}
.community-web4 .community-name-matched {background:#F0F0F0}
.community-web4 .community-name-matched a:hover {color:#666666;}
.community-web4 .community-name-matched a {color:#CC9F3B;}

.namegreen {background:#666666}
.nameblue {background:#CC9F3B}
.namepink {background:#C43A31}
.community-name img {position:absolute; right:4px}
.community-name-matched img {position:absolute; right:4px}
.community-web-recommendation-text {font:10px/11px Arial, Helvetica, sans-serif; color:#655B4F; width:98px; position:relative; top:-98px; left:91px}
.community-web-recommendation-text a {color:#CC9F3B; font-style:italic}
.flexslider .slides .community-web-recommendation img {
    width: 77px;
}
.flex-direction-nav a {
    overflow: visible;
}
.flex-direction-nav a::before {
    color: #C43A31;
}
.flex-control-nav {
    bottom: 0;
}
.community-web-recommendation:hover {
    background: #666666;
    color: white;
}

.community-web-recommendation:hover .community-web-recommendation-text {
    color: white;
}

.community-web-recommendation:hover .namegreen {
    background: white;
    color: #666666;
}


.groupchatbutton {position:absolute; bottom:8px; left: 570px;}
.groupchatbutton button{width:88px; background:#C43A31;}

.profileleft {width:275px; height:288px; background:#F0F0F0; position:relative; top:49px; left:49px; float:left; clear:both}
.profileleft img {margin:4px; height:200px;}
.profileleft h1 {color:#666666; font:14px Arial, Helvetica, sans-serif; margin:10px 15px 0 15px}
.profileleft h2 {color:#C43A31; font:12px Arial, Helvetica, sans-serif; margin:0 5px 0px 15px}
.profileleft p {color:#656565; font:12px/14px Arial, Helvetica, sans-serif; margin:0 15px 10px 15px }
.profileleft img { width: 200px; }
.profileleft .img-wrapper {height: 200px; width: 200px; position: relative; left: 33px; top: 10px;}

.profileright { width:652px; position:absolute; top:115px; left:381px; height:270px; overflow-x:hidden; overflow-y:scroll;}
.profilerightheader { width:652px; position:absolute; top:79px; left:381px; height:110px; overflow-x:hidden; overflow-y:hidden;}
.profileright table {margin:30px 0}
.profileright h1 {font:23px/23px "Avenir", "Nunito", Arial, Helvetica, sans-serif; color:#4D4D4D; width:652px; border-bottom:1px solid #B0B0B0 }
.profileright h1 strong {font-weight:normal; color:#666666}
.profilerightheader h1 {font:23px/23px "Avenir", "Nunito", Arial, Helvetica, sans-serif; color:#4D4D4D; width:652px; border-bottom:1px solid #B0B0B0 }
.profilerightheader h1 strong {font-weight:normal; color:#666666}
.profileright td {border-bottom:solid 1px #B0B0B0; font:12px/14px Arial, Helvetica, sans-serif; color:#4D4D4D; padding:5px 0}
.profileright td strong {font-size:11px}
.profileright .noborder {border:none}
.profileright ul {  list-style-type: none; }

.profilerightbottom {position:absolute; top:395px; left:380px; height:110px;}
.profilerightbottom h1 {font:23px/23px "Avenir", "Nunito", Arial, Helvetica, sans-serif; color:#4D4D4D; width:652px; border-bottom:1px solid #B0B0B0 }
.profilerightbottom h1 strong {font-weight:normal; color:#666666}

.sayyes {display:block; height:20px; padding-left:28px; float:left; font:14px "Avenir", "Nunito", Arial, Helvetica, sans-serif}
a.sayyes, a.sayno {display:block; background:url(../assets/yesnobubbles.png) no-repeat; height:20px; padding-left:28px; float:left; font:14px "Avenir", "Nunito", Arial, Helvetica, sans-serif}
a.sayyes { margin-right:30px; color:#666666}
a.sayno {background-position:0 -20px; color:#C43A31}
a:hover.sayyes, a:hover.sayno { color:#CC9F3B}
a.sayyes:hover {background-position:0 -40px}
a.sayno:hover {background-position:0 -60px}
.waystoconnect a {display:block; text-indent:-9999px; width:26px; height:22px; background:url(../assets/waystoconnect.png) no-repeat; float:left; margin-right:14px}
a.waystoconnect2 {background-position:-40px 0}
a.waystoconnect3 {background-position:-80px 0}
a.waystoconnect4 {background-position:-114px 0}
a:hover.waystoconnect1 {background-position:0 -30px}
a:hover.waystoconnect2 {background-position:-40px -30px}
a:hover.waystoconnect3 {background-position:-80px -30px}
a:hover.waystoconnect4 {background-position:-114px -30px}

#question_holder h5 { position:relative; top:47px;}
#question_holder .question_drop { position:relative; top:35px;}


.rightinfoboxholder {width:454px; height:112px; position:absolute; right:0; top:558px; border-top:1px solid #fff; border-bottom:1px solid #fff}
.rightinfobox {width:356px; height:95px; padding:17px 0 0 30px; background:url(../assets/bg_white60.png); font:12px/16px Arial, Helvetica, sans-serif; color:#000 }
.rightinfobox strong {font-size:14px; color:#C43A31}
.rightinfobox em {color:#D90D80; font-weight:bold; line-height:20px}
#homerightinfobox {width:100%}
#homerightinfobox .rightinfobox {width:424px; position:absolute; right:0}
#homerightinfobox .rightinfobox p { padding-right:68px}

.boxpair {width:1150px; position:relative; margin:100px auto 0 auto}
.boxpair .boxleft {width:391px; height:456px; position:absolute; top:0; left:0; padding:40px 0 0 0; background:url(../assets/bg_black45plus.png)}
.boxpair .boxright {width:724px; height:456px; position:absolute; top:0; left:426px; padding:40px 0 0 0; background:url(../assets/bg_black45plus.png)}
.boxcontents {padding-right: 15px; padding-left: 15px; padding-top: 1px;}
.boxcontents h6 {color: #666666; font: 18px/20px 'Avenir','Nunito',Arial,Helvetica,sans-serif;}
.boxcontents h5 {color: #404041; font: 10px/15px Arial,Helvetica,sans-serif; font-size:12px;}
.boxpair .boxleft td {font:18px Arial, Helvetica, sans-serif; color:#000; text-align:left;  }
.boxpair .boxleft table input {width:218px; height:30px; background:#BFBFBF; margin:3px 0  }
a.buttonchoice {display:block; font:16px Arial, Helvetica, sans-serif; color:#666; background:#ACACAD; width:80px; height:25px; float:left; margin:5px 10px 0 0; text-align:center; padding:4px 0 0 0;  border:1px solid #ACACAD; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; behavior: url(core/PIE.htc)}
a.buttonchoice-on {display:block; font:16px Arial, Helvetica, sans-serif; color:#fff; background:#BBCF2F; width:80px; height:25px; float:left; margin:5px 10px 0 0; text-align:center; padding:4px 0 0 0;  border:1px solid #BBCF2F; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; behavior: url(core/PIE.htc); cursor:default}
a.bigbuttonchoice {display:block; font:21px Arial, Helvetica, sans-serif; color:#666; background:#ACACAD; width:80px; height:30px; float:left; margin:5px 10px 0 0; text-align:center; padding:7px 0 0 0;  border:1px solid #ACACAD; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; behavior: url(core/PIE.htc)}
a.bigbuttonchoice-on {display:block; font:21px Arial, Helvetica, sans-serif; color:#fff; background:#BBCF2F; width:80px; height:30px; float:left; margin:5px 10px 20px 0; text-align:center; padding:7px 0 0 0;  border:1px solid #BBCF2F; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; behavior: url(core/PIE.htc); cursor:default}

.boxpair .boxright .boxcontents {margin:0 35px}
.contenttable tr {font:10px/18px Arial, Helvetica, sans-serif; color:#333; background:url(../assets/bg_white60.png); border-bottom:1px solid #7E7F7B; }
.contenttable td {padding-left:5px}
.contenttable .tablealtcolor {background:url(../assets/bg_white30.png)}
.contenttable .tableheadercolor1 { background:#CC9F3B; color:#fff; font-weight:bold}
.contenttable .tableheadercolor2 { background:#666666; color:#fff; font-weight:bold}

.chatters {width:265px; position:absolute; top:230px; left:86px; text-align:right}
.chatters h1 {font:23px Arial, Helvetica, sans-serif; color:#C43A31; margin-bottom:20px}
.chatter img {float:right; clear:both}
.chattername {width:120px; height:27px; padding-top:8px; text-align:center; background:#CC9F3B; font:14px Arial, Helvetica, sans-serif; color:#fff; float:right; clear:both; margin-bottom:17px}
.chatterpartner {width:120px; height:27px; padding-top:8px; text-align:center; background:#C43A31; font:14px Arial, Helvetica, sans-serif; color:#fff; float:right; clear:both; margin-bottom:17px}
.chatwindow { width:700px; height:473px; position:absolute; top:183px; left:375px; background:url(../assets/bg_white70.png) }
.chatcontents {width:568px; height:320px; margin:50px 0 0 70px; padding-right:10px}
.chatinput {height:52px; width:100%; position:absolute; bottom:10px; background:url(../assets/bg_white60.png); }
.chatinput input {width:530px; height:24px; padding-left:3px; border:1px solid #797979; background:#fffff; margin:13px 27px 0 24px;}
.chatinput img {position:absolute; top:5px; left:586px}

.chatintro, .chat1, .chat2 {float:left; width:350px; position:relative}
.chat1 .triangle-border {left:100px}
.chatternameintro { width:30px;  text-align:left; font-weight:bold; color:#000; position:absolute; top:30px; right:-100px}
.chattername1 {width:100px;  text-align:right; font-weight:bold; position:absolute; top:30px; left:0; }
.chattername2 { width:30px;  text-align:left; font-weight:bold; position:absolute; top:30px; right:-100px}

/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE (modded from http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ )
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:#353535;
    background:#dddddd;
    width:350px;
    border-radius: 15px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
    margin-left:30px;
    border:2px solid #C43A31;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
    margin-right:30px;
}
/* Variant : for intro
------------------------------------------ */

.triangle-border.intro {
    margin-right:30px;
    border:2px solid #CC9F3B;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

#.triangle-border:before {
#    content:"";
#    position:absolute;
#    bottom:-20px; /* value = - border-top-width - border-bottom-width */
#    left:40px; /* controls horizontal position */
#    border-width:20px 20px 0;
#    border-style:solid;
#    border-color:#797979 transparent;
#    /* reduce the damage in FF3.0 */
#    display:block; 
#    width:0;
#}
#
#/* creates the smaller  triangle */
#.triangle-border:after {
#    content:"";
#    position:absolute;
#    bottom:-13px; /* value = - border-top-width - border-bottom-width */
#    left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
#    border-width:13px 13px 0;
#    border-style:solid;
#    border-color:#fff transparent;
#    /* reduce the damage in FF3.0 */
#    display:block; 
#    width:0;
#}
#
#
#/* Variant : left
#------------------------------------------ */
#
#/* creates the larger triangle */
#.triangle-border.left:before {
#    top:10px; /* controls vertical position */
#    bottom:auto;
#    left:-3px; /* value = - border-left-width - border-right-width */
#    border-width:1px 3px 1px 0;
#    border-color:transparent #F0F0EF;
#}
#
#/* creates the smaller  triangle */
#.triangle-border.left:after {
#    top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
#    bottom:auto;
#    left:-21px; /* value = - border-left-width - border-right-width */
#    border-width:9px 21px 9px 0;
#    border-color:transparent #C43A31;
#}
#
#/* Variant : right
#------------------------------------------ */
#
#/* creates the larger triangle */
#.triangle-border.right:before {
#    top:10px; /* controls vertical position */
#    bottom:auto;
#    left:auto;
#    right:-3px; /* value = - border-left-width - border-right-width */
#    border-width:1px 0 1px 3px;
#    border-color:transparent #797979;
#}
#
#/* creates the smaller  triangle */
#.triangle-border.right:after {
#    top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
#    bottom:auto;
#    left:auto;
#    right:-21px; /* value = - border-left-width - border-right-width */
#    border-width:9px 0 9px 21px;
#    border-color:transparent #F0F0EF;
#}
#
#/* Variant : intro
#------------------------------------------ */
#/* creates the larger triangle */
#.triangle-border.intro:before {
#    top:10px; /* controls vertical position */
#    bottom:auto;
#    left:auto;
#    right:-3px; /* value = - border-left-width - border-right-width */
#    border-width:1px 0 1px 3px;
#    border-color:transparent #F0F0EF;
#}
#
#/* creates the smaller  triangle */
#.triangle-border.intro:after {
#    top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
#    bottom:auto;
#    left:auto;
#    right:-21px; /* value = - border-left-width - border-right-width */
#    border-width:9px 0 9px 21px;
#    border-color:transparent #CC9F3B;
#}
#

/*---------------------------------------------------------------------------------------
MentorNet Message Triangle Bubble
----------------------------------------------------------------------------------------*/
.triangle-borderM {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:#353535;
    background:#dddddd;
    width:455px;
    border:2px solid #ABABAB;
    border-radius: 15px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-borderM.left {
    margin-left:30px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-borderM.right {
    margin-right:30px;
}
/* Variant : for intro
------------------------------------------ */

.triangle-borderM.intro {
    margin-right:30px;
}




/* jscrollpane */
.jspContainer { overflow: hidden; position: relative; }
.jspPane { position: absolute; }
.jspVerticalBar { position: absolute; top: 0; right: 0; width: 10px; height: 100%;  } 
.jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 16px; background: red; }
.jspCap { display: none; }
.jspHorizontalBar .jspCap { float: left; }
.jspTrack { background:url(../assets/scrollertrack.png) repeat-y; position: relative; } 
.jspDrag { background:url(../assets/scrollerhandle.png) no-repeat; position: relative; top: 0; left: 0; cursor: pointer; } 
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float: left; height: 100%; }
.jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; padding: 0; margin: 0; }
.jspArrow.jspDisabled { cursor: default; background: #80808d; }
.jspVerticalBar .jspArrow { height: 16px; }
.jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100%; }
.jspVerticalBar .jspArrow:focus { outline: none; }
.jspCorner { background: #eeeef4; float: left; height: 100%; }
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner { margin: 0 -3px 0 0; }


/* generic page stuffs */
.errortext { font-size: 110%; font-weight: bold; color: #F92A2A; }
p.errortext { border: 1px solid red; background: #fea; padding: 3px; }

/* You can customize to your needs  */

#mask {
    display: none;
    background: #000; 
    position: fixed; left: 0; top: 0; 
    z-index: 10;
    width: 100%; height: 100%;
    opacity: 0.8;
    z-index: 999;
}

.invite-popup {
    display: none;
    width:794px; 
    /*height:400px; */
    height:auto;
    position: fixed;
    top: 50%;
    left: 50%;
    background: #F0F0F0;
    z-index: 9999;
    box-shadow: 0px 0px 20px #999;
    /* CSS3 */
        -moz-box-shadow: 0px 0px 20px #999;
    /* Firefox */
        -webkit-box-shadow: 0px 0px 20px #999;
    /* Safari, Chrome */
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px;
    /* Firefox */
        -webkit-border-radius: 3px;
    /* Safari, Chrome */
}
.invite-popup p {
    color:#353535;
}
img.btn_close {
    float: right;
    margin: -24px -28px 0 0;
    z-index:99999;
}

fieldset {
    border: none;
    position: relative; top:40px; left:5%;
    width:700px;
}

form.signin .textbox label {
    display: block;
    padding-bottom: 7px;
}

form.signin .textbox span {
    display: block;
}

form.signin p, form.signin span {
    color: #999;
    font-size: 11px;
    line-height: 18px;
}

form.signin .textbox input {
    background: #666666;
    border-bottom: 1px solid #333;
    border-left: 1px solid #000;
    border-right: 1px solid #333;
    border-top: 1px solid #000;
    color: #fff;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font: 13px Arial, Helvetica, sans-serif;
    padding: 6px 6px 4px;
    width: 200px;
}

form.signin input:-moz-placeholder {
    color: #bbb;
    text-shadow: 0 0 2px #000;
}

form.signin input::-webkit-input-placeholder {
    color: #bbb;
    text-shadow: 0 0 2px #000;
}

.invite-popup .button {
    background: #666666;
    border-color: #C8C8C8;
    border-width: 1px;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 6px 6px 4px;
    margin-top: 10px;
    font: 12px;
    width: 60px;
    height: 30px;
}

.invite-popup .button:hover {
    background: #666666;
}

/*
  *  /chat_messages UI
*/

.messages_box a:hover {color:#CC9F3B;}

.messages_container {
	height: 400px;
	background:url(../assets/bg_white85.png);
    width: 100%;
  	overflow:scroll;
}

.messages_box {
    top: 150px;
    left: 86px;
    position: relative;
    width: 680px;
    margin-bottom: 300px;
}
.messages_box header {
  background: #29a5fc;
  height: 24px;
  padding: 1px 10px;
  font-size:0.7em;
}

.messages_box .menu-icon {
  background: #C43A31;
  padding: 5px 10px;
  float: left;
  font-size: 3em;
  line-height: 0.5em;
  color: #fff;
  border-radius: 3px;
}
.messages_box .menu-icon:hover {
  background: #C43A31;
  cursor: pointer;
}
.messages_box h1 {
  float: right;
  color: #fff;
  margin: 5px;
  font-weight: 300;
  font-size: 1.3em;
}
.messages_box .new {
  /*background: rgb(57, 202, 173);*/
  background: #84CA56;
  color: #fff;
  text-align: center;
  padding: 20px;
}
.messages_box .new:hover {
  cursor: pointer;
  background: #29a5fc;
}
.messages_box .messages {
  padding: 10px;
  background:url(../assets/bg_white85.png);
}
.messages_box .message {
  float: left;
  width: 93%;
  margin: 10px 0;
  border-bottom: 1px solid #ccc;
}
.messages_box .message p {
  font-size: 1.3em;
  width: 90%;
  margin: 5px 0;
}
.messages_box img {
  border-radius: 100%;
  float: left;
  margin: 0 10px 15px 0;
}
.messages_box p.time {
  color: rgba(0,0,0,0.5);
  font-weight: 400;
}
.messages_box h2 {
  font-size: 1em;
  font-weight: 400;
  color: #000;
}
.messages_box h2:after {
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  /*background: #CE0000;*/
  border-radius: 100%;
  margin-left: 5px;
}
.messages_box footer {
 /*  width: 100%; */
  background: #C43A31;
  padding: 1px;
  height:10px;
}
.messages_box footer p:before,
.messages_box footer p:after {
}
/*
---------------------------
Chat stuff from Miguel
---------------------------
*/

.bubble_right_triangle
{
position: relative;
width: 250px;
/*
padding: 0px;
background: gray;
margin-left:50px;
*/
padding:15px;
margin:1em 0 3em;
border:1px solid #F0F0EF;
color:#000;
background:#CC9F3B;
width:350px;
}

.bubble_right_triangle:after
{
content: "";
position: absolute;
top: 17%;
bottom: 50%;
left: 380px;
border-style: solid;
border-width: 15px 0px 15px 15px;
border-color: transparent #CC9F3B;
display: block;
width: 0;
z-index: 1;
}

.bubble_left_triangle:after
{
content: "";
position: absolute;
top: 40%;
bottom: 50%;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0px;
border-color: transparent gray;
display: block;
width: 0;
z-index: 1;
}

#training_link {
    width: 200px;
    padding-top: 50px;
    margin: auto;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    color: #CC9F3B;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    color: #656565;
#    color: #C43A31;
    border: 1px solid #CC9F3B;
    background: #E2E2E2 url(images/ui-bg_highlight-soft_25_0073ea_1x100.png) 50% 50% repeat-x;
#    background: #CC9F3B url(images/ui-bg_highlight-soft_25_0073ea_1x100.png) 50% 50% repeat-x;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    color: #C43A31;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #C43A31;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    border: 1px solid #C43A31;
}