/* Resets */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
font-family: 'Lato', Arial, Helvetica, Verdana;
border: 0;
margin: 0;
padding: 0;
outline: 0;
font-size: 15px;
vertical-align: top;
}
/* General */
html, body {background: #43494c; height: 100%}
p, ul {color: #444; padding-bottom: 14px; line-height: 20px}
ul {margin-left:20px; padding-bottom: 14px}
h1, h2, h3, h4 {color: #6ea08e; padding: 10px 0}
h1 {font-size: 28px}
h2 {font-size: 20px; text-transform: uppercase}
h3 {font-size: 16px}
a {color: #ca4230; text-decoration: none}
a:hover {text-decoration: underline}
.text-center {text-align: center}
.text-right {text-align: right}
/* Common */
.orange {color: #ca4230}
.orangeBG {background: #ca4230}
.clearboth {clear: both}
.hotspot {display: block; width:100%; height:100%}
.overlayMask {position: fixed; display: table; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden; background-color: rgba(0,0,0,0.6); text-align: center; z-index: 100}
.overlayMask .popupVCenter {#position: absolute; display: table-cell; #top: 50%; vertical-align: middle; text-align: center}
.popupVCenter .popup {#position: relative; display: inline-block; #top: -50%; text-align: left; padding: 5px; background: #fff}
/* Structure */
.main {display: block; width: 100%; height: 100%; text-align: center; background: #43494c}
.center-home, .center {position: relative; display: block; min-height: 100%; width: 970px; margin: 0 auto; text-align: left}
.center-home {background: #43494c}
.center {background: #fff url(images/main-bg.jpg) no-repeat 0 0; background-size: 100% auto}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {float: left}
.col-md-1 {width:8.333333333333332%}
.col-md-2 {width:16.666666666666664%}
.col-md-3 {width:25%}
.col-md-4 {width:33.33333333333333%}
.col-md-5 {width:41.66666666666667%}
.col-md-6 {width:50%}
.col-md-7 {width:58.333333333333336%}
.col-md-8 {width:66.66666666666666%}
.col-md-9 {width:75%}
.col-md-10 {width:83.33333333333334%}
.col-md-11 {width:91.66666666666666%}
.col-md-12 {width:100%}
.col-md-offset-0 {margin-left:0} .col-md-offset-1 {margin-left:8.333333333333332%} .col-md-offset-2 {margin-left:16.666666666666664%} .col-md-offset-3 {margin-left:25%} .col-md-offset-4 {margin-left:33.33333333333333%} .col-md-offset-5 {margin-left:41.66666666666667%} .col-md-offset-6 {margin-left:50%} .col-md-offset-7 {margin-left:58.333333333333336%} .col-md-offset-8 {margin-left:66.66666666666666%} .col-md-offset-9 {margin-left:75%} .col-md-offset-10 {margin-left:83.33333333333334%} .col-md-offset-11 {margin-left:91.66666666666666%}
/* Nav */
.nav {height: 60px; padding-top: 10px}
.nav ul {list-style: none; margin-left: 20px}
.nav li {color: #fff; float: left; padding: 0 10px}
.nav li a {color: #fff; font-size: 17px; text-decoration: none; padding-bottom: 4px}
.nav li.home a:hover, .nav li.homeSel a {border-bottom: solid 5px #ca4230}
.nav li.about a:hover, .nav li.aboutSel a {border-bottom: solid 5px #6ea08a}
.nav li.getInvolved a:hover, .nav li.getInvolvedSel a {border-bottom: solid 5px #3599cd}
.nav li.research a:hover, .nav li.researchSel a {border-bottom: solid 5px #ccc}
.nav li.events a:hover, .nav li.eventsSel a {border-bottom: solid 5px #895e84}
.nav li.news a:hover, .nav li.newsSel a {border-bottom: solid 5px #895e84}
.nav li.ecml a:hover, .nav li.ecmlSel a {border-bottom: solid 5px #ca4230}
.nav li.partnersTeam a:hover, .nav li.partnersTeamSel a {border-bottom: solid 5px #ca4230}
.nav li.people a:hover, .nav li.peopleSel a {border-bottom: solid 5px #ca4230}
.nav li.contact a:hover, .nav li.contactSel a {border-bottom: solid 5px #ff9}
.nav-first, .nav-item {border-right: solid 1px}
.nav-last {}
.ecmlDD {position: absolute; display: inline-block; margin-left: -11px; margin-top: 20px; z-index: 1}
.ecmlDD ul {position: relative; padding: 12px 12px 12px 0; list-style: none; margin-left: 0; background: #43494c; border-left: 1px solid #fff; color: #fff}
.ecmlDD li {display: block; float: none; line-height: 36px}
.peopleDD {position: absolute; display: inline-block; margin-left: -11px; margin-top: 20px; z-index: 1}
.peopleDD ul {position: relative; padding: 12px 12px 12px 0; list-style: none; margin-left: 0; background: #43494c; border-left: 1px solid #fff; color: #fff}
.peopleDD li {display: block; float: none; line-height: 36px}
/* Header */
.social {float: right; position: relative; padding-right: 25px}
.social a {padding: 0 4px}
/* Content */
.content {margin: 0 auto; padding: 0 30px 50px 30px}
.content-top-margin {margin-top: 60px}
/* Home Page */
.home-container p {color: #fff}
.home-container a {color: #fff; font-weight: 700}
.home-container a:hover {text-decoration: underline}
.homeCircle {transition: opacity 0.2s ease-in-out}
.borderRadiusImg {border-radius: 200px} /* Note: was using 50%, but didn't work on Safari 4, so set a large fixed number */
.top-left-thumbnail {position: absolute; top: 73px; left: 82px; height:191px; width:191px; border: 1px solid #fff; border-radius: 200px}
.top-left-thumbnail-img {position: absolute; top: 8px; left: 8px; height:175px; width:175px}
.home-sphere-logo {position: absolute; top: 73px; left: 358px; height:260px; width:322px; background: url(/images/sphere.gif) no-repeat}
.facebook-icon-homepage {position: absolute; top: 114px; left: 766px; height:57px; width:57px; background: url(/images/facebook.gif) no-repeat}
.home-twitter-icon {position: absolute; top: 66px; left: 844px; height:78px; width:78px; background: url(/images/twitter.gif) no-repeat}
.about-us {position: absolute; top: 284px; left: 37px; height:370px; width:348px; background: url(/images/about-us-bg.gif) no-repeat}
.suited-man-talking {position: absolute; top: 393px; left: 407px; height:105px; width:105px}
.suited-man-talking-img {height:105px; width:105px}
.news-and-events {position: absolute; top: 184px; left: 601px; height:391px; width:332px; background: url(/images/news-events.gif) no-repeat}
.three-hands {position: absolute; top: 660px; left: 91px; height:160px; width:160px}
.three-hands-img {height:160px; width:160px}
.our-partners {position: absolute; top: 602px; left: 264px; height:144px; width:144px; background: url(/images/our-partners.gif) no-repeat}
.home-tweets {position: absolute; top: 499px; left: 426px; height:213px; width:214px; background: url(/images/latest-tweets-bg.gif) no-repeat}
.contact-sphere {position: absolute; top: 733px; left: 582px; height:130px; width:130px; background: url(/images/contact-us.gif) no-repeat}
.woman-runway {position: absolute; top: 602px; left: 731px; height:200px; width:200px}
.woman-runway-img {height:200px; width:200px}
.homeNewsSlideText {position: absolute; display: inline-block; width: 160px; padding: 10px 20px; bottom: 10px; font-size: 12px; background: #895e84; color: #fff; text-align: center}
/* About */
.about {padding-top: 100px}
/* News and Events */
.news-events {padding-top: 155px}
/* Tweets*/
.tweets {padding-top: 80px}
/* Footer */
.footer, .footer-home {margin-left: 30px; padding-bottom: 20px; color: #222}
.footer-home {margin-top: 800px}
.cmsImgControls {position: absolute; top: 50%; left: 50%; margin-top: -15px; margin-left: -37px; z-index: 1}
.cmsImgControls img {cursor: pointer}
.playButton {position: absolute; top: 50%; left: 50%; margin-top: -14px; margin-left: -21px; cursor: pointer; z-index: 1}
/* Mobile */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
p, a, b, strong, li, .content div, .footer, .footer-home {font-size: 10px; padding-bottom: 10px; line-height: 14px}
h1 {font-size: 14px}
h2 {font-size: 22px}
h3 {font-size: 11px}
.hotspot, .overlayMask, .main, .center-home, .center {width: 100%}
.center {background: #fff url(images/main-mobile-bg.jpg) no-repeat 0 0; background-size: 100% auto}
.nav ul {margin-left: 5px}
.nav li {display: block; float: none; padding-bottom: 0}
.nav li a {font-size: 12px}
.nav li.home a:hover, .nav li.homeSel a, .nav li.about a:hover, .nav li.aboutSel a, .nav li.getInvolved a:hover, .nav li.getInvolvedSel a, .nav li.research a:hover, .nav li.researchSel a, .nav li.events a:hover, .nav li.eventsSel a, .nav li.news a:hover, .nav li.newsSel a, .nav li.partnersTeam a:hover, .nav li.partnersTeamSel a, .nav li.people a:hover, .nav li.people a, .nav li.contact a:hover, .nav li.contactSel a {border-bottom: 0}
.nav li.home a:hover, .nav li.homeSel a {color: #ca4230}
.nav li.about a:hover, .nav li.aboutSel a {color: #6ea08a}
.nav li.getInvolved a:hover, .nav li.getInvolvedSel a {color: #3599cd}
.nav li.research a:hover, .nav li.researchSel a {color: #ccc}
.nav li.events a:hover, .nav li.eventsSel a {color: #895e84}
.nav li.news a:hover, .nav li.newsSel a {color: #895e84}
.nav li.ecml a:hover, .nav li.ecmlSel a {color: #ca4230}
.nav li.partnersTeam a:hover, .nav li.partnersTeamSel a {color: #ca4230}
.nav li.people a:hover, .nav li.peopleSel a {color: #ca4230}
.nav li.contact a:hover, .nav li.contactSel a {color: #ff9}
.nav li.homeSel a {color: #ca4230}
.nav-first, .nav-item {border-right: 0}
.ecmlDD {left: 115px; margin-top: 5px}
.ecmlDD ul {padding: 8px 8px 8px 0}
.ecmlDD li {line-height: 20px}
.peopleDD {left: 70px; margin-top: 5px}
.peopleDD ul {padding: 8px 8px 8px 0}
.peopleDD li {line-height: 20px}
.top-left-thumbnail {top: 180px; left: 13px; width:89px; height:79px}
.top-left-thumbnail-img {top: 5px; left: 5px; width:79px; height:79px}
.home-sphere-logo {top: 29px; left: 110px; width:223px; height:178px; background-size: 223px 178px}
.facebook-icon-homepage {top: 17px; left: 264px; width:28px; height:28px; background-size: 28px 28px}
.home-twitter-icon {top: 17px; left: 305px; width:28px; height:28px; background-size: 28px 28px}
.facebook-icon-homepage .hotspot, .home-twitter-icon .hotspot {width:28px; height:28px}
.about-us {top: 222px; left: 78px; width:238px; height:226px; background-size: 238px 226px}
.suited-man-talking {display: none}
.suited-man-talking-img {display: none}
.news-and-events {top: 407px; left: 8px; width:226px; height:267px; background-size: 226px 267px}
.three-hands {top: 841px; left: 201px; width:79px; height:79px}
.three-hands-img { width:79px; height:79px}
.our-partners {top: 695px; left: 72px; width:74px; height:74px; background-size: 74px 74px}
.home-tweets {top: 653px; left: 168px; width:147px; height:147px; background-size: 147px 147px}
.contact-sphere {top: 448px; left: 234px; width:75px; height:75px; background-size: 75px 75px}
.woman-runway {top: 778px; left: 19px; width:139px; height:139px}
.woman-runway-img { width:139px; height:139px}
.about {padding-top: 70px}
.news-events {padding-top: 105px}
.tweets {padding-top: 55px}
.social {position: absolute; float: none; top: 17px; left: 235px; white-space: nowrap}
.social img {width: 28px; height: 28px; margin-right: 3px}
.content {margin: 0 auto; padding: 0 10px 50px 10px}
.content-top-margin {margin-top: 90px}
.footer, .footer-home {margin-left: 15px}
}