/* ------------------------- 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(http://mentornet.org/core/iepngfix.htc) } /* 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} .green {color:#BBCF2F} .pink {color:#E80088!important} .blue {color:#00A8FF} .darkgray {color:#4D4D4D} .olddarkgray {color:#655B4F} .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} .bigcolor1 {font:21px/36px "Avenir", "Nunito", Arial, Helvetica, sans-serif; color:#BBCF2F} /* green */ .bigcolor2 {font:21px/36px "Avenir", "Nunito", Arial, Helvetica, sans-serif; color:#D90D80} /* pink */ .bigcolor3 {font:21px/36px "Avenir", "Nunito", Arial, Helvetica, sans-serif; color:#29A5FC} /* blue */ ::selection, ::-moz-selection {background: #DBE999; } body { background:#fff; -webkit-text-size-adjust:none; font:12px/16px Arial, Helvetica, sans-serif; color:.darkgray;} /* body { background:#fff; -webkit-text-size-adjust:none; font:12px/16px Arial, Helvetica, sans-serif; color:#000000;} */ hr {border:0; color:#E2E2E2; background-color:#E2E2E2; height:1px; width:70%; position:relative; margin:3px auto} /* LINKS */ a { color: #0061f2; } a:link, a:visited, a:active { text-decoration: none; } a:visited {color: #33cc33;} a:hover {color:#0061f2; text-decoration: none; } /* TOP MENU */ #header { width: 100%; height: 90px; background: #000; float: left; border-bottom: 4px solid #0061f2; } a.homelink {display:block; text-indent:-9999px; background:url(/assets/mentornet.png) no-repeat; height:50px; width:201px; position:absolute; top:12px; left:86px } a:hover.homelink {background-position:0 -50px} #tagline {display:block; text-indent:-9999px; position:absolute; top:66px; left:146px; background:url(/assets/gmis-tagline.jpg) no-repeat; height:12px; width:145px;} #header #menuholder {height:40px; position: absolute; top:20px; right:200px; margin-left:300px} #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 .menucolor2 { color:#33cc33 } #header .menu a:hover, #header .menu a:hover .menucolor2, #header .menu li.selected a, #header .menu li.selected a .menucolor2 { color:#0061f2 } #header #submenuholder {height:40px; position: absolute; top:40px; right:200px; 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:#0061f2 } #social {position:absolute; top:18px; right:77px} a.menu-facebook, a.menu-youtube, a.menu-twitter, a.menu-google, a.menu-linkedin {display:block; text-indent:-9999px; background:url(/assets/social.png) no-repeat; height:15px;width:17px; float:left; margin:0 5px} a.menu-twitter {background-position:0 0} a.menu-facebook {background-position:-20px 0} a.menu-youtube {background-position:-40px 0} a.menu-linkedin {background-position:-60px 0} a:hover.menu-twitter {background-position:0 -20px} a:hover.menu-facebook {background-position:-20px -20px} a:hover.menu-youtube {background-position:-40px -20px} a:hover.menu-linkedin {background-position:-60px -20px} #donate-box { position:absolute; right:80px; top:94px; padding-top:2px; background-color:#0061f2; border-left:solid #0061f2 3px; border-bottom:solid #bbcf2f 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:#33cc33!important } #leftbarmenu {width:425px; height:26px; position:absolute; top:74px; left:86px; background:#E50C88} .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} #rightbarmenu {width:464px; height:26px; position:absolute; right:80px; top:74px; background:#29A5FC} .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:#29A5FC; border-right:none} /* MAIN CONTENT */ #container {width:100%; height:667px; float:left; } .bgimage {width:100%; height:667px; position:absolute; z-index:-11;} .bgimage img {visibility:hidden; position:absolute; } .topcolorbar {width:100%; height:10px; position:absolute; top:0;} .botcolorbar {width:100%; height:10px; position:absolute; bottom:0;} .barcolor1 { background:#33cc33;} /* green */ .barcolor2 {background:#0061f2;} /* pink */ .barcolor3 { background:#33cc33;} /* blue */ .boxleft {width:421px; height:472px; position:absolute; top:185px; left:86px; background:url(/assets/bg_white85.png)} .boxfull {width:1125px; height:540px; position:relative; top:75px; margin:0 auto; background:url(/assets/bg_white85.png)} /* .boxfull {width:1125px; height:540px; position:relative; top:75px; margin:0 auto; background:url(/assets/bg_black45plus.png)} */ /* HOME */ .homeherotext {font:19px/28px "Avenir", "Nunito", Arial, Helvetica, sans-serif; letter-spacing:-1px; color:#000; position:relative; left:80px; top:100px; width:500px} .homeherotext h1 {font-size:44px; letter-spacing:-2px; padding-bottom:50px} .homeherotext h2 {font-family:"sugoregular", "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:110px; color:#0061f2; text-transform:uppercase; padding-bottom:40px} .homelinkbox {width:500px; position:relative; left:0; top:140px; border-top:1px solid #fff; padding-left:80px} .homelinkbox li a {display:block; width:188px; border-bottom:1px solid #fff; font-family:"sugoregular", "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:19px; letter-spacing:1px; color:#77AE00; text-transform:uppercase; padding:12px 0; background:url(/assets/exclamation_point_bubble_pink.png) no-repeat 150px 10px} .homelinkbox li a:hover { color:#D90D80; background:url(/assets/exclamation_point_bubble_green.png) no-repeat 150px 10px} .homelinkbox li.last a {text-transform:none; border-bottom:none; background:none; color:#D90D80; font-size:18px } .homelinkbox li.last a:hover {color:#77AE00} .homelinkbox h1 {padding-top:16px} .homelinkbox h1 a {font-size:32px; font-family:"sugoregular", "Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#33cc330; text-transform:uppercase; padding: 0px 0px; } .homelinkbox li a:hover { color:#D90D80; background:url(/assets/exclamation_point_bubble_green.png) no-repeat 150px 10px} .homelinkbox h1 a:hover { color:#D90D80; no-repeat 150px 10px} a.homevideopreview {display:block; background:url(/assets/watch_video.png) no-repeat; position:absolute; left:80px; top:40px; padding:5px 0 10px 50px; font:18px/28px "Avenir", "Nunito", Arial, Helvetica, sans-serif; letter-spacing:-1px; color:#000;} a.homevideopreview strong {color:#33cc33} /* 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:#33cc33; 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} li.pag-prev a, li.pag-next a {display:block; text-indent:-9999px; width:44px; height:45px; background:url(/assets/arrows.png) no-repeat; position:absolute; top:245px} li.pag-prev a {left:-20px} li.pag-next a {right:-20px; background-position:-50px 0} li.pag-prev a:hover {background-position:0 -60px} li.pag-next a:hover {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:.darkgray; width:175px; position:absolute; top:0; left:120px } /* .advisoryinfo {font:13px/16px Arial, Helvetica, sans-serif; color:#fff; width:175px; position:absolute; top:0; left:120px } */ .advisoryinfo h1 {color:#33cc33; 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:#655B4F; font:16px/25px "Times New Roman", Times, serif; font-style:italic} /* .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:.darkgray; } /* #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:.darkgray} /* #privacyscroll {width:995px; height:400px; margin:70px 0 0 65px; padding-right:10px; color:#fff} */ #privacyscroll h1 {color:#0061f2; font:14px Arial, Helvetica, sans-serif} #privacyscroll h1.formhead { font-size:20px; } #privacyscroll h2 {color:#0061f2; font:12px 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: #0061f2; } /* OTHER SECONDARY PAGES */ .pageheading {color:#0061f2; 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:.darkgray} /* #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:#A8C308} #betabubble p {color:#A8C308; font:20px/18px "Avenir", "Nunito", Arial, Helvetica, sans-serif; padding:20px} #betabubble em {color:#E80088; font:21px/18px "Times New Roman", Times, serif; font-style:italic} #betainfo {z-index:5; font:11px/14px Arial, Helvetica, sans-serif; color:#fff; background:#B0D236; width:591px; height:76px; padding:10px 70px 10px 30px; position:absolute; bottom:10px; right:0; display:none;} #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:#E80088} .boxleftwide {width:694px; height:490px; position:absolute; top:185px; left:86px; background:url(/assets/bg_white70.png)} .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 #BBCF2F; background:#E00F84; height:23px} .accountmanagesubnavlast { background:#BBCF2F; } .accountmanagesubnav a {display:block; padding: 5px 13px 0 13px; color:#fff; float:left; height:18px; background:#E00F84; border-right:1px solid #fff; font:12px/12px "Avenir", "Nunito", Arial, Helvetica, sans-serif} .accountmanagesubnav a.last {border:none!Important} .accountmanagesubnav a:hover {color:#BBCF2F} .accountmanagesubnav a.on {background:#BBCF2F; color:#fff; cursor:default} .accountsetup h1 {font:25px/26px "Avenir", "Nunito", Arial, Helvetica, sans-serif; color:#BBD92F; margin:30px 0 40px 0} .accountsetup h1 strong {color:#D51180; font-weight:normal} .accountsetup tr {color:#4D4E4E; font:12px Arial, Helvetica, sans-serif} .accountsetup input, .accountsetup select {width:290px; height:16px; border:1px solid #C8C8C8; margin:5px 0; background:transparent; -webkit-appearance: none; border-radius: 0; color:#969696} .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:160px;} .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:#A8C308; 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; float:left; color:#4D4E4E} #savebtn, #nextbtn, #backbtn {text-indent:-9999px; border:none; display:block; background:url(/assets/colorbuttons.png) no-repeat; cursor:pointer} #savebtn { width:67px; height:30px; background-position:-120px 0} #savebtn:hover {background-position:-120px -60px} #nextbtn { width:51px; height:51px; position:absolute; bottom:-21px; right:-25px} #nextbtn:hover {background-position:0 -60px} #backbtn {background-position:-60px 0; width:51px; height:51px; position:absolute; bottom:-21px; left:-25px} #backbtn:hover {background-position:-60px -60px} .questions {margin:20px 40px 0 30px; font-size:13px } .questions h1 {color:#D51180; font:34px/36px "Avenir", "Nunito", Arial, Helvetica, sans-serif; margin:0 0 15px 0} .questions h2 {color:#A6C239; 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; color:#4D4E4E; } .questions td em {font:11px Arial, Helvetica, sans-serif; color:#959595; font-style:italic} .questions input {width:290px; height:16px; border:1px solid #C8C8C8; margin:5px 0; color:#969696} .questions textarea {width:460px; height:52px; border:1px solid #C8C8C8; margin:5px 0; color:#969696} .questions select { border:1px solid #C8C8C8; margin:5px 0; background:transparent; -webkit-appearance: none; border-radius: 0; color:#969696; 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: #349CCC; } .questions a:hover {color:#D90D80; } .liveprogress {background:url(/assets/circle_blank.png) no-repeat; text-align:center; font:23px/23px "Avenir", "Nunito", Arial, Helvetica, sans-serif; color:#8C8C8C; right:-65px!important; top:-50px!important} .liveprogress h1 {font-size:30px; font-weight:bold; margin-top:48px} .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 {width:139px; height:139px; position:absolute;top:-50px; right:-63px} .boxleft h1 {font:31px/36px "Avenir", "Nunito", Arial, Helvetica, sans-serif; margin:10px 0; color:#BBD92F} .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; color:#000; vertical-align:middle } .boxleft table input {width:175px; height:18px; background:#fff; border:1px solid #f1f1f1; margin:6px 0 } .nextarrow {position:absolute; bottom:-18px; left:185px; z-index:999} .joinbox p {margin:0 30px 0 30px} .joinbox h1 {color:#D80D80; font:36px/36px "Avenir", "Nunito", Arial, Helvetica, sans-serif; margin:40px 0 5px 30px} .joinbox h2 {color:#AAC508; font:23px/26px "Avenir", "Nunito", Arial, Helvetica, sans-serif; margin:0 0 22px 30px} .joinbox h3 {color:#00AAFF; font:18px/23px "Avenir", "Nunito", Arial, Helvetica, sans-serif; font-style:italic; margin:0 0 0 30px} .joinbox h3 a:hover {color:#AAC508} 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_white70.png)!important} .community-web-hero {width:273px; height:354px; background:#fff; position:relative; top:59px; left:49px; float:left; clear:both} .community-web-hero h1 {color:#BBD92F; font:14px Arial, Helvetica, sans-serif; margin:10px 0 0 15px} .community-web-hero h2 {color:#00A3FF; font:11px/12px "Times New Roman", Times, serif; font-style:italic; margin:0 0 10px 15px} .community-web-hero p {color:#655B4F; font:10px/12px Arial, Helvetica, sans-serif; margin:0 10px 10px 15px; } .community-web1, .community-web2, .community-web3 {position:absolute; } .community-web1 {width:320px; top:69px; left:380px;} .community-web2 {width:225px; top:69px; left:780px;} .community-web3 {width:653px; top:69px; left:380px;} /* to change layout and have the web1 and web2 up top, change this top to 275px */ .community-web-title {font:22px Arial, Helvetica, sans-serif; height:26px; border-bottom:1px solid #BEBFBE; margin-bottom:20px } .community-web1 .community-web-title { color:#B0D143;} .community-web2 .community-web-title { color:#DB0080; } .community-web3 .community-web-title {color:#00B6ED; } .community-web-holder {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-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-web1 .community-name {background:#B0D143} .community-web2 .community-name {background:#DB0080} .community-web3 .community-name {background:#29A5FC; font-size:12px} .namegreen {background:#B0D143} .nameblue {background:#29A5FC} .namepink {background:#DB0080} .community-name 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:#29A5FC; font-style:italic} .profileleft {width:273px; background:#F0F0F0; position:relative; top:59px; left:49px; float:left; clear:both} .profileleft img {margin:4px} .profileleft h1 {color:#BBD92F; font:16px Arial, Helvetica, sans-serif; margin:10px 0 0 15px} .profileleft h2 {color:#00A3FF; font:12px/12px "Times New Roman", Times, serif; font-style:italic; margin:0 0 10px 15px} .profileleft p {color:#655B4F; font:11px/14px Arial, Helvetica, sans-serif; margin:0 15px 10px 15px } .profileright { width:652px; position:absolute; top:79px; left:381px; } .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:#00A8FF} .profileright td {border-bottom:solid 1px #B0B0B0; font:11px/14px Arial, Helvetica, sans-serif; color:#4D4D4D; padding:4px 0} .profileright td strong {font-size:10px} .profileright .noborder {border:none} a.sayyes, a.sayno {display:block; background:url(/assets/yesnobubbles.png) no-repeat; height:20px; padding-left:28px; float:left; font:12px "Avenir", "Nunito", Arial, Helvetica, sans-serif} a.sayyes { margin-right:30px; color:#A8C308} a.sayno {background-position:0 -20px} a:hover.sayyes, a:hover.sayno { color:#00A8FF} 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} .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:#0061f2} .rightinfobox em {color:#0061f2; 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:15px} .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(http://mentornet.org/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(http://mentornet.org/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(http://mentornet.org/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(http://mentornet.org/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:#29A5FC; color:#fff; font-weight:bold} .contenttable .tableheadercolor2 { background:#BBCF2F; 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:#D90D80; margin-bottom:20px} .chatter img {float:right; clear:both} .chattername {width:119px; height:27px; padding-top:8px; text-align:center; background:#BBCF2F; 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_black45plus.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:#fff; 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; border:1px solid #797979; color:#000; background:#F0F0EF; width:350px; } /* Variant : for left positioned triangle ------------------------------------------ */ .triangle-border.left { margin-left:30px; } /* Variant : for right positioned triangle ------------------------------------------ */ .triangle-border.right { margin-right:30px; } /* Variant : for intro ------------------------------------------ */ .triangle-border.intro { margin-right:30px; background:#2AACFC; color:#ffffff } /* 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 #797979; } /* 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 #F0F0EF; } /* 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 #797979; } /* 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 #2AACFC; } /* FOOTER */ #footer {width:100%; height:20px; padding:15px 0; background:#000000; float:left; text-align:center; font:13px Arial, Helvetica, sans-serif; color:#B3B3B3; } #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} /* 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; } /* ACCORDION */ #accordion {padding-top: 20px;} .accordion { margin-bottom: 20px;} .accordion h3 { font-size:14px; color:#B0D235; font-weight: bold;} /* HOW IT WORKS */ .howitworkstextboxes {position:absolute; top:466px; left:0;} .howitworkstextbox {width:408px; height:160px; padding:88px 94px 0 48px; background:url(../assets/howitworks_textbox.png) no-repeat; display:none; font:14px/18px Arial, Helvetica, sans-serif; color:#000000} #howitworkstextbox0 {display:block;} #howitworkstextbox1 {background-position:0 -250px} #howitworkstextbox2 {background-position:0 -500px} #howitworkstextbox3 {background-position:0 -750px} #howitworkstextbox4 {background-position:0 -1000px} #howitworkstextbox5 {background-position:0 -1250px} #howitworkstextbox6 {background-position:0 -1500px} #howitworkstextbox7 {background-position:0 -1750px} #howitworksarrow {width:106px; height:78px; background:url(../assets/click_cycle.png) no-repeat; position:absolute; top:81px; left:467px} #howitworkschart {width:483px; height:598px; position:absolute; top:108px; right:59px;} #howitworkschart div {float:left;} #howitworkscharttop {width:483px; height:268px; background:url(../assets/howitworks_top_base.png) no-repeat} #howitworkscharttoptop {z-index:3; position:absolute} #hiwcircle1 {width:93px; height:95px; position:absolute; top:12px; left:199px; } #hiwcircle2 {width:93px; height:95px; position:absolute; top:61px; left:295px;} #hiwcircle7 {width:93px; height:95px; position:absolute; top:61px; left:100px;} #hiwcircle3 {width:141px; height:142px; position:absolute; top:126px; left:173px;} .hwcircleoffsm {background:url(../assets/howitworks_top_sm_off.png) no-repeat; } .hwcircleofflg {background:url(../assets/howitworks_top_lg_off.png) no-repeat; } .hwcircleoversm {background:url(../assets/howitworks_top_sm_over.png) no-repeat; } .hwcircleoverlg {background:url(../assets/howitworks_top_lg_over.png) no-repeat; } #hiwcircle1.active, #hiwcircle2.active, #hiwcircle7.active {background:url(../assets/howitworks_top_sm_on.png) no-repeat; cursor:default } #hiwcircle3.active {background:url(../assets/howitworks_top_lg_on.png) no-repeat; cursor:default } #howitworkschart6 {width:154px; height:141px} #howitworkschart6 a {width:154px; height:141px; display:block; background:url(../assets/howitworks_6.png) no-repeat} #howitworkschart6 a:hover {background-position:0 -150px} #howitworkschart6 a.active {background-position:0 -300px; cursor:default} #howitworkschartcycle {width:168px; height:141px; background:url(../assets/howitworks_cycle.png) no-repeat; cursor:pointer} #howitworkschart4 {width:161px; height:141px} #howitworkschart4 a {width:161px; height:141px; display:block; background:url(../assets/howitworks_4.png) no-repeat} #howitworkschart4 a:hover {background-position:0 -150px} #howitworkschart4 a.active {background-position:0 -300px; cursor:default} #howitworkschartstripe {width:483px; height:29px; background:url(../assets/howitworks_stripe.png) no-repeat} #howitworkschartleft {width:175px; height:160px; background:url(../assets/howitworks_left.png) no-repeat} #howitworkschart5 {width:143px; height:160px} #howitworkschart5 a {width:143px; height:160px; display:block; background:url(../assets/howitworks_5.png) no-repeat} #howitworkschart5 a:hover {background-position:0 -160px} #howitworkschart5 a.active {background-position:0 -320px; cursor:default} #howitworkschartright {width:165px; height:160px; background:url(../assets/howitworks_right.png) no-repeat} @media screen and (max-width: 1033px) { #howitworkschart {right:0px;} .howitworkstextboxes {left:-30px} }