@import url(reset.css); @font-face { font-family: 'District Thin'; src: url('../fonts/district_thin.eot'); src: local('District Thin'), url('../fonts/district_thin.ttf') format('truetype') } #orangeoasis { background: url(../img/aggregate/background.png) #fff repeat-x; overflow-y: scroll; } #aggregate { background: url(../img/aggregate/background.png) #fff repeat-x; overflow-y: scroll; } a:link, a:active, a:visited { text-decoration: none; } /* OrangeOasis */ #orangeoasis #wrapper { width: 960px; margin-left: auto; margin-right: auto; padding: 0px; } #orangeoasis #wrapper-top { background: url(../img/aggregate/wrapper-top.png) center top no-repeat; width: 960px; height: 80px; margin-top: 10px; } #orangeoasis #wrapper-main { background: url(../img/aggregate/wrapper-main.png) center top repeat-y; width: 840px; min-height: 300px; padding: 0px 60px; } #orangeoasis #wrapper-bottom { background: url(../img/aggregate/wrapper-bottom.png) center top no-repeat; width: 960px; height: 30px; } #orangeoasis h2 { font: 18px 'Ave Light', arial; color: #9a9a9a; border-bottom: 1px dashed #9a9a9a; position: relative; top: -20px; } #orangeoasis p { font: 18px 'Crimson Text', arial; letter-spacing: -1px; color: #7a7a7a; line-height: 1.2; text-shadow: #fff 1px 1px 1px; padding-bottom: 15px; text-align: justify; } #orangeoasis #logo { position: relative; top: 14px; left: 50px; } #orangeoasis #navigation { float: right; margin-top: 12px; margin-right: 30px; font: 16px 'Ave Light', arial; letter-spacing: -1px; color: #5a5a5a; } #orangeoasis #footer { text-align: center; font: 14px 'Ave Light', Helvetica; color: #7a7a7a; text-shadow: #fff 1px 1px 1px; margin-bottom: 20px; } #orangeoasis #footer a { color: #d75b00; text-decoration: none; } #orangeoasis #footer a:hover { text-decoration: underline; } /* Aggregate */ #aggregate #wrapper { width: 960px; margin-left: auto; margin-right: auto; padding: 0px; } #aggregate #wrapper-top { background: url(../img/aggregate/wrapper-top.png) center top no-repeat; width: 960px; height: 80px; margin-top: 30px; } #aggregate #wrapper-main { background: url(../img/aggregate/wrapper-main.png) center top repeat-y; width: 840px; min-height: 300px; padding: 0px 60px; } #aggregate #wrapper-bottom { background: url(../img/aggregate/wrapper-bottom.png) center top no-repeat; width: 960px; height: 30px; } #aggregate #logo { position: relative; top: 24px; left: 50px; } #aggregate #browser { float: right; position: relative; top: -60px; right: 30px; } #aggregate #navigation { float: right; margin-top: 24px; margin-right: 40px; font: 14px 'Ave Light', arial; color: #5a5a5a; } #aggregate #navigation img { width: 24px; height: 24px; margin-bottom: -6px; margin-right: 4px; } #aggregate #index { position: relative; top: -40px; } #aggregate #index #slogan { } #aggregate #index #slogan { font: 56px 'Josefin Sans Std Light', 'District Thin', helvetica neue; margin-bottom: 40px; letter-spacing: -5px; } #aggregate #index #tagline { margin-top: 50px; padding-bottom: 20px; } #aggregate #index #tagline p { font: 22px 'Ave Light', helvetica neue; padding-bottom: 10px; line-height: 1.2; color: #9a9a9a; } #aggregate #index #tagline #get-started { width: 300px; margin-left: auto; margin-right: auto; } #aggregate #index #tagline #get-started #facebook-connect { float: left; margin-right: 5px; } #aggregate #index #tagline #get-started h4 { float: left; font: 16px 'Crimson Text', arial; letter-spacing: -1px; color: #7a7a7a; line-height: 1.2; text-shadow: #fff 1px 1px 1px; } #aggregate #index #more-info { display: none; margin-top: 20px; } #aggregate #index #more-info .feature { float: left; width: 182px; padding: 10px; margin-right: 10px; background: #efefef; } #aggregate #index #more-info .feature h1 { font: 20px 'Ave Light', helvetica neue; padding-bottom: 10px; color: #3a3a3a; text-shadow: #fff 1px 1px 1px; } #aggregate #index #more-info .feature p { font: 18px 'Crimson Text', arial; letter-spacing: -1px; color: #7a7a7a; line-height: 1.2; text-shadow: #fff 1px 1px 1px; } #aggregate #index #more-info .feature img { width: 24px; height: 24px; margin-bottom: -3px; margin-right: 3px; } #aggregate #learn-more{ margin-top: -40px; margin-left: 25px; cursor: pointer; } #aggregate #profile h1 { font: 28px 'Ave Light', Helvetica; color: #5a5a5a; position: relative; top: -40px; } #aggregate #profile h2 { font: 18px 'Ave Light', arial; color: #9a9a9a; border-bottom: 1px dashed #9a9a9a; position: relative; top: -20px; } #aggregate #profile th { font: 16px 'Ave Light', arial; color: #5a5a5a; text-align: left; vertical-align: middle; text-shadow: #fff 1px 1px 1px; height: 29px; width: 150px; padding-bottom: 10px; } #aggregate #profile td { font: 14px 'Ave Light', arial; color: #aaa; vertical-align: top; text-shadow: #fff 1px 1px 1px; } #aggregate #profile td ul li { line-height: 1.8; border-top: 1px solid #fff; border-bottom: 1px solid #eaeaea; padding-right: 35px; } #aggregate #profile td ul li:hover { background: #efefef; border-top: 1px solid #dadada; } #aggregate #profile .nusnet input[type=text] { background: url(../img/aggregate/form/module-textbox.png) no-repeat; width: 105px; height: 17px; border: 0px; padding: 5px; color: #7a7a7a; text-shadow: #fff 1px 1px 1px; text-align: right; } #aggregate #profile .matric-year .select-close { background: url(../img/aggregate/form/select-close.png) no-repeat; height: 23px; width: 82px; text-align: right; color: #7a7a7a; padding-top: 6px; padding-right: 35px; cursor: pointer; } #aggregate #profile .matric-year .select-open { background: url(../img/aggregate/form/select-open-ay.png) no-repeat; height: 142px; position: absolute; top: 226px; width: 117px; text-align: right; color: #7a7a7a; padding-top: 2px; cursor: pointer; display: none; } #aggregate #profile .faculty .select-open { background: url(../img/aggregate/form/select-open-faculty.png) no-repeat; height: 302px; width: 187px; position: absolute; top: 267px; text-align: right; display: none; cursor: pointer; } #aggregate #profile .faculty .select-close { background: url(../img/aggregate/form/select-close-faculty.png) no-repeat; height: 23px; width: 152px; text-align: right; color: #7a7a7a; padding-top: 6px; padding-right: 35px; cursor: pointer; } #aggregate #goal h1 { font: 28px 'Ave Light', Helvetica; color: #5a5a5a; position: relative; top: -40px; } #aggregate #goal h2 { font: 18px 'Ave Light', arial; color: #9a9a9a; border-bottom: 1px dashed #9a9a9a; position: relative; top: -20px; } #aggregate #goal th { font: 16px 'Ave Light', arial; color: #5a5a5a; text-align: left; vertical-align: middle; text-shadow: #fff 1px 1px 1px; height: 29px; width: 250px; padding-bottom: 10px; } #aggregate #goal td { font: 14px 'Ave Light', arial; color: #aaa; vertical-align: top; text-shadow: #fff 1px 1px 1px; } #aggregate #goal input[type=text] { background: url(../img/aggregate/form/module-textbox.png) no-repeat; width: 105px; height: 17px; border: 0px; padding: 5px; color: #7a7a7a; text-shadow: #fff 1px 1px 1px; text-align: right; } #aggregate .exclamation { float: right; border: 1px dashed #cfcfcf; padding: 15px; } #aggregate .exclamation img { float: left; margin-right: 10px; } #aggregate .exclamation p { float: left; width: 320px; margin-top: -2px; font: 16px 'Crimson Text', arial; line-height: 1.2; } #aggregate .exclamation p a { color: #d75b00; text-decoration: none; } #aggregate .exclamation p a:hover { text-decoration: underline; } #aggregate #dashboard h2 { font: 18px 'Ave Light', arial; color: #9a9a9a; border-bottom: 1px dashed #9a9a9a; position: relative; top: -20px; } #aggregate #dashboard a { text-decoration: none; } #aggregate #dashboard h3 { font: 18px 'Ave Light', helvetica neue; padding-bottom: 20px; color: #5a5a5a; text-shadow: #fff 1px 1px 1px; } #aggregate #dashboard h3 img { width: 24px; height: 24px; margin-bottom: -3px; margin-right: 8px; } #aggregate #create-transcript-form #total-modules { visibility: hidden; } #aggregate #create-transcript-form h2 { font: 18px 'Ave Light', arial; color: #9a9a9a; border-bottom: 1px dashed #9a9a9a; position: relative; top: -20px; } #aggregate #create-transcript-form .single-module { border-bottom: 1px solid #eee; padding: 3px 0px; display: none; float: left; position: absolute; width: 840px; } #aggregate #create-transcript-form .single-module .unselected { height: 23px; width: 82px; text-align: right; color: #7a7a7a; padding-top: 6px; padding-right: 35px; } #aggregate #create-transcript-form .single-module .select-close { background: url(../img/aggregate/form/select-close.png) no-repeat; height: 23px; width: 82px; text-align: right; color: #7a7a7a; padding-top: 6px; padding-right: 35px; cursor: pointer; } #aggregate #create-transcript-form .single-module .select-close:hover { opacity: 0.6; filter: alpha(opacity=60);} #aggregate #create-transcript-form .single-module .select-open { width: 117px; text-align: right; color: #7a7a7a; padding-top: 2px; cursor: pointer; display: none; } #aggregate #create-transcript-form td { font: 14px 'Ave Light', arial; color: #aaa; vertical-align: top; text-shadow: #fff 1px 1px 1px; text-align: center; } #aggregate #create-transcript-form td ul li { line-height: 1.8; border-top: 1px solid #fff; border-bottom: 1px solid #eaeaea; padding-right: 35px; } #aggregate #create-transcript-form td ul li:hover { background: #efefef; border-top: 1px solid #dadada; } #aggregate #create-transcript-form td.code { width: 122px; text-align: left; } #aggregate #create-transcript-form td.code input[type=text] { background: url(../img/aggregate/form/module-textbox.png) no-repeat; width: 105px; height: 17px; border: 0px; padding: 5px; color: #7a7a7a; text-shadow: #fff 1px 1px 1px; text-transform: uppercase; } #aggregate #create-transcript-form td.code input[type=text]:hover, #aggregate #create-transcript-form td.code input[type=text]:focus { opacity: 0.7; filter: alpha(opacity=70);} #aggregate #create-transcript-form td.mc { width: 122px; font: 14px 'Ave Light', arial; letter-spacing: -1px; color: #9a9a9a; } #aggregate #create-transcript-form td.mc .select-open { background: url(../img/aggregate/form/select-open-mc.png) no-repeat; height: 165px; } #aggregate #create-transcript-form td.mc select { width: 75px; } #aggregate #create-transcript-form td.academic-year { width: 122px; } #aggregate #create-transcript-form td.academic-year .select-open { background: url(../img/aggregate/form/select-open-ay.png) no-repeat; height: 142px; } #aggregate #create-transcript-form td.academic-year .select-close { opacity: 0.75; filter: alpha(opacity=75); } #aggregate #create-transcript-form td.academic-year .select-close:hover { opacity: 0.95; filter: alpha(opacity=95);} #aggregate #create-transcript-form td.semester { width: 122px; } #aggregate #create-transcript-form td.semester .select-open { background: url(../img/aggregate/form/select-open-sem.png) no-repeat; height: 84px; } #aggregate #create-transcript-form td.grade { width: 122px; } #aggregate #create-transcript-form td.grade .select-open { background: url(../img/aggregate/form/select-open-grade.png) no-repeat; height: 300px; } #aggregate #create-transcript-form td.grade .select-open ul li { text-align: left; padding-left: 67px; } #aggregate #create-transcript-form td.grade .unselected { text-align: left; padding-left: 67px; padding-right: 0px; width: 50px; } #aggregate #create-transcript-form td.grade .select-close { text-align: left; padding-left: 67px; padding-right: 0px; width: 50px; opacity: 0.75; filter: alpha(opacity=75); } #aggregate #create-transcript-form td.grade .select-close:hover { opacity: 0.95; filter: alpha(opacity=95); } #aggregate #create-transcript-form td.su { width: 122px; } #aggregate #create-transcript-form td.su .select-open { background: url(../img/aggregate/form/select-open-su.png) no-repeat; height: 60px; } #aggregate #create-transcript-form td.remove { padding: 0px 10px; } #aggregate #create-transcript-form td.remove p { background: url(../img/aggregate/icon/remove.png) no-repeat; width: 24px; height: 24px; cursor: pointer; display: none; margin-top: 3px; } #aggregate #create-transcript-form td.remove p:hover { background-position: 0 -24px; } #aggregate #create-transcript-form .single-module:hover td.remove p { display: block; } #aggregate #create-transcript-form select { font: 16px arial; letter-spacing: -1px; color: #5a5a5a; text-align: right; } #aggregate #create-transcript-form #tip { font: 14px 'Crimson Text', helvetica neue; color: #9a9a9a; text-shadow: #fff 1px 1px 1px; line-height: 1.2; margin-bottom: 20px; } #aggregate input[type=submit] { background: url(../img/aggregate/form/button.png) no-repeat; width: 117px; height: 29px; border: 0px; float: left; font: 14px 'Ave Light', arial; letter-spacing: -1px; color: #8a8a8a; text-shadow: #fff 1px 1px 1px; margin-top: 10px; margin-bottom: 20px; cursor: pointer; } #aggregate input[type=submit]:hover { opacity: 0.7; filter: alpha(opacity=70);} #aggregate input[type=submit]:active { background: url(../img/aggregate/form/module-textbox.png) no-repeat; } #aggregate #title { position: relative; top: -40px; } #aggregate #transcript h2 { font: 28px 'Ave Light', Helvetica; letter-spacing: -2px; color: #5a5a5a; margin-bottom: 20px; } #aggregate #transcript .info th { font: 18px 'Ave Light', arial; color: #5a5a5a; text-align: right; padding-right: 20px; width: 80px; } #aggregate #transcript .info td { font: 18px 'Ave Light', arial; color: #7a7a7a; text-align: left; } #aggregate #transcript .info .lighter { color: #aaaaaa; } #aggregate #transcript #heading { border-bottom: 4px double #dadada; position: relative; top: -12px; } #aggregate #transcript #heading h1 { font: 18px Palatino Linotype; color: #8a8a8a; position: relative; top: -24px; float: left; } #aggregate #transcript #heading a { text-decoration: none; } #aggregate #transcript #heading h2 { font: 14px Palatino Linotype; color: #cacaca; position: relative; top: -18px; float: right; margin-right: 30px; letter-spacing: 0px; } #aggregate #transcript #heading h2:hover { color: #9a9a9a; } #aggregate #transcript #cap-score { border-bottom: 4px double #dadada; margin: 20px 0px; padding-bottom: 40px; } #aggregate #transcript #cap-score #cap-bar { margin-left: auto; margin-right: auto; width: 710px; } #aggregate #transcript #cap-score #cap-graph { background: url(../img/aggregate/transcript/cap-background.png) no-repeat; width: 500px; height: 60px; float: left; margin-bottom: 20px; } #aggregate #transcript #cap-score #cap-graph #cap-main { float: left; height: 47px; margin-top: 13px; } #aggregate #transcript #cap-score #cap-graph #cap-main.white { background: url(../img/aggregate/transcript/white.png) repeat-x; } #aggregate #transcript #cap-score #cap-graph #cap-main.green { background: url(../img/aggregate/transcript/green.png) repeat-x; } #aggregate #transcript #cap-score #cap-graph #cap-main.lime { background: url(../img/aggregate/transcript/lime.png) repeat-x; } #aggregate #transcript #cap-score #cap-graph #cap-main.yellow { background: url(../img/aggregate/transcript/yellow.png) repeat-x; } #aggregate #transcript #cap-score #cap-graph #cap-main.red { background: url(../img/aggregate/transcript/red.png) repeat-x; } #aggregate #transcript #cap-score #cap-value { float: left; font: 48px 'District Thin'; letter-spacing: -3px; margin-top: 10px; margin-left: 20px; display: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop); zoom: 1; } #aggregate #transcript #cap-score .info { margin-left: 70px; float: left; } #aggregate #transcript #cap-score #goal { margin-left: 80px; float: left; margin-top: 10px; text-align: center; } #aggregate #transcript #cap-score #goal a { color: #d75b00; text-decoration: none; } #aggregate #transcript #cap-score #goal a:hover { text-decoration: underline; } #aggregate #transcript #cap-score #goal h3 { font: 16px 'Ave Light', helvetica neue; color: #5a5a5a; text-shadow: #fff 1px 1px 1px; line-height: 1.2; } #aggregate #transcript #cap-score #goal h4 { font: 16px 'Crimson Text', helvetica neue; color: #5a5a5a; text-shadow: #fff 1px 1px 1px; line-height: 1.2; } #aggregate #transcript #cap-score #goal #goal-info { width: 260px; padding: 20px 30px; background: #efefef; margin-bottom: 5px; } #aggregate #transcript #cap-score #goal #goal-info #target { margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 15px; width: 140px; } #aggregate #transcript #cap-score #goal #goal-info #target img { float: left; margin-top: -1px; margin-right: 5px; } #aggregate #transcript #cap-score #goal #goal-info #target h4 { font: 24px 'Ave Light', helvetica neue; color: #2a2a2a; text-shadow: #fff 1px 1px 1px; line-height: 1.2; float: left; } #aggregate #transcript #breakdown { border-bottom: 4px double #dadada; padding-top: 30px; padding-bottom: 40px; } #aggregate #transcript #breakdown .info { float: right; width: 260px; text-align: center; padding-right: 20px; } #aggregate #transcript #breakdown .info td { width: 40px; } #aggregate #transcript #progress { border-bottom: 4px double #dadada; padding-top: 30px; padding-bottom: 40px; } #aggregate #transcript #progress .info { float: right; width: 260px; text-align: center; padding-right: 20px; margin-top: 10px; } #aggregate #transcript #progress .info td { width: 30px; } #aggregate #transcript #progress .info .arrow { position: relative; top: 2px; margin-right: 4px; } #aggregate #transcript #progress .graph { min-width: 450px; margin-top: 30px; text-align: center; float: left; } #aggregate #transcript #sap { padding-top: 30px; padding-bottom: 40px; } #aggregate #transcript #sap .info { float: right; width: 260px; text-align: center; padding-right: 20px; margin-top: 10px; } #aggregate #transcript #sap .info td { width: 30px; } #aggregate #transcript #sap .info .arrow { position: relative; top: 2px; margin-right: 4px; } #aggregate #transcript #sap .graph { min-width: 450px; margin-top: 30px; text-align: center; float: left; } #aggregate #footer { text-align: center; font: 14px 'Ave Light', Helvetica; color: #7a7a7a; text-shadow: #fff 1px 1px 1px; margin-bottom: 20px; } #aggregate #footer a { color: #d75b00; text-decoration: none; } #aggregate #footer a:hover { text-decoration: underline; } /* Avenir fonts */ @font-face { font-family: 'Ave Medium'; src: url('../fonts/avemedium.otf') format("opentype"); } @font-face { font-family: 'Ave Light'; src: url('../fonts/avelight.otf') format("opentype"); } @font-face { font-family: 'Ave Heavy'; src: url('../fonts/aveheavy.otf') format("opentype"); } @font-face { font-family: 'Ave Black'; src: url('../fonts/aveblack.otf') format("opentype"); } @font-face { font-family: 'Ave Book'; src: url('../fonts/avebook.otf') format("opentype"); }