| /* CSS Reset */ |
| 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, 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, |
| article, aside, canvas, details, embed, |
| figure, figcaption, footer, header, hgroup, |
| menu, nav, output, ruby, section, summary, |
| time, mark, audio, video { |
| margin: 0; |
| padding: 0; |
| border: 0; |
| font-size: 100%; |
| font: inherit; |
| vertical-align: baseline; |
| } |
| /* HTML5 display-role reset for older browsers */ |
| article, aside, details, figcaption, figure, |
| footer, header, hgroup, menu, nav, section { |
| display: block; |
| } |
| body { |
| line-height: 1; |
| } |
| ol, ul { |
| list-style: none; |
| } |
| blockquote, q { |
| quotes: none; |
| } |
| blockquote:before, blockquote:after, |
| q:before, q:after { |
| content: ''; |
| content: none; |
| } |
| table { |
| border-collapse: collapse; |
| border-spacing: 0; |
| } |
| |
| /* Import fonts */ |
| @font-face { |
| font-family: 'texgyre-italic'; |
| src: url('../fonts/texgyreschola-italic-webfont.eot'); |
| src: url('../fonts/texgyreschola-italic-webfont.eot?#iefix') format('embedded-opentype'), |
| url('../fonts/texgyreschola-italic-webfont.woff') format('woff'), |
| url('../fonts/texgyreschola-italic-webfont.ttf') format('truetype'), |
| url('../fonts/texgyreschola-italic-webfont.svg#texgyrescholaitalic') format('svg'); |
| font-weight: normal; |
| font-style: normal; |
| } |
| |
| @font-face { |
| font-family: 'montserrat-bold'; |
| src: url('../fonts/Montserrat-Bold.otf') format('opentype'); |
| } |
| |
| @font-face { |
| font-family: 'montserrat-light'; |
| src: url('../fonts/Montserrat-Light.otf') format('opentype'); |
| } |
| |
| @font-face { |
| font-family: 'montserrat-reg'; |
| src: url('../fonts/Montserrat-Regular.otf') format('opentype'); |
| } |
| |
| /* Stout-specific styles */ |
| body, |
| html { |
| font-family: 'montserrat-light', 'texgyre-italic', 'Arial'; |
| color: #191919; |
| height: 100%; |
| min-height: 700px; |
| min-width: 1000px; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| background-image: url('../images/background.jpg'); |
| background-repeat: repeat; |
| } |
| |
| p { |
| font-family: 'montserrat-light'; |
| font-size: 19px; |
| line-height: 22px; |
| margin-top: 1em; |
| margin-bottom: 1em; |
| } |
| |
| h1 { |
| font-family: 'montserrat-bold'; |
| font-size: 28px; |
| margin-bottom: 20px; |
| } |
| |
| h2 { |
| font-family: 'montserrat-reg'; |
| font-size: 28px; |
| } |
| |
| h3 { |
| font-family: 'montserrat-light'; |
| font-size: 18px; |
| } |
| |
| h4 { |
| font-family: 'montserrat-bold'; |
| font-size: 20px; |
| } |
| |
| .main-header { |
| height: 50px; |
| background-color: #ff4611; |
| line-height: 50px; |
| } |
| |
| #header-title { |
| font-family: 'montserrat-bold'; |
| font-size: 26px; |
| color: #ffffff; |
| margin: 0 14px; |
| display: inline-block; |
| } |
| |
| #header-navbar { |
| font-family: 'montserrat-reg'; |
| font-size: 18px; |
| color: #ffffff; |
| margin: 0 14px; |
| float: right; |
| display: inline-block; |
| } |
| |
| .header-navbar-link { |
| text-decoration: none; |
| color: #ffffff; |
| border: none; |
| } |
| |
| .header-navbar-link:hover { |
| color: #4577b8; |
| } |
| |
| .container { |
| min-height: calc(100% - 50px); |
| min-width: 100%; |
| margin-bottom: -25px; |
| padding-top: 30px; |
| padding-bottom: 30px; |
| } |
| |
| .main-footer, .container:after { |
| height: 25px; |
| } |
| |
| .main-footer { |
| background-color: #ff4611; |
| } |
| |
| .pane { |
| height: 100%; |
| min-height: 100%; |
| width: 100%; |
| margin: 0; |
| padding: 0; |
| } |
| |
| #landing-header { |
| height: 400px; |
| background-color: #ff4611; |
| color: #ffffff; |
| text-align: center; |
| padding: 40px auto; |
| width: 100%; |
| display: table; |
| } |
| |
| #landing-container { |
| display: table-cell; |
| text-align: center; |
| vertical-align: middle; |
| padding: 0 40px; |
| } |
| |
| #landing-title { |
| font-family: 'montserrat-bold'; |
| font-size: 76px; |
| max-width: 1200px; |
| margin: 0 auto 40px auto; |
| } |
| |
| #landing-subtitle { |
| font-family: 'montserrat-light'; |
| font-size: 28px; |
| max-width: 1000px; |
| margin: 0 auto; |
| } |
| |
| #landing-login { |
| height: calc(100% - 400px); |
| padding: 40px; |
| text-align: center; |
| } |
| |
| .btn-bordered { |
| display: inline-block; |
| padding: 6px 12px; |
| border: 4px solid #ff4611; |
| border-radius: 2px; |
| font-family: 'montserrat-reg'; |
| font-size: 22px; |
| text-align: center; |
| line-height: 22px; |
| } |
| |
| a.btn-bordered, a.btn-bordered:hover { |
| text-decoration: none; |
| color: black; |
| height: 100%; |
| width: 100%; |
| } |
| |
| #landing-button { |
| width: 192px; |
| height: 65px; |
| line-height: 45px; |
| margin: 20px; |
| } |
| |
| #recruitment-header { |
| height: 300px; |
| background-color: #ff4611; |
| color: #ffffff; |
| text-align: center; |
| padding: 40px auto; |
| width: 100%; |
| display: table; |
| } |
| |
| #recruitment-header-container { |
| display: table-cell; |
| text-align: center; |
| vertical-align: middle; |
| padding: 0 40px; |
| } |
| |
| #recruitment-title { |
| font-family: 'montserrat-light'; |
| font-size: 68px; |
| max-width: 1200px; |
| margin: 0 auto; |
| } |
| |
| #recruitment-title b { |
| font-family: 'montserrat-bold'; |
| } |
| |
| #recruitment-info-container { |
| text-align: center; |
| width: 100%; |
| padding: 40px; |
| } |
| |
| #recruitment-text { |
| width: 80%; |
| margin: 0 auto; |
| } |
| |
| .login-section { |
| margin: 50px; |
| } |
| |
| .login-title { |
| font-family: 'montserrat-reg'; |
| font-size: 48px; |
| color: #ff4611; |
| } |
| |
| .form-signin { |
| max-width: 500px; |
| padding: 30px; |
| } |
| |
| .form-signin-heading { |
| margin-bottom: 20px; |
| font-family: 'texgyre-italic'; |
| font-size: 24px; |
| } |
| |
| .form-control { |
| margin-bottom: 20px; |
| background-color: #e5e6e8; |
| } |
| |
| .btn-login { |
| background: transparent; |
| width: 200px; |
| height: 50px; |
| margin-bottom: 10px; |
| } |
| |
| .login-forgot { |
| width: 200px; |
| text-align: center; |
| } |
| |
| .reset-title { |
| margin-bottom: 30px; |
| } |
| |
| .btn-reset { |
| margin-top: 30px; |
| } |
| |
| #consent-title { |
| font-family: 'montserrat-bold'; |
| font-size: 26px; |
| text-align: center; |
| margin-bottom: 20px; |
| } |
| |
| .consent-details { |
| font-family: 'montserrat-reg'; |
| font-size: 16px; |
| line-height: 20px; |
| } |
| |
| .btn-consent-form-accept, .btn-consent-form-reject { |
| height: 50px; |
| width: 500px; |
| margin: 0 auto; |
| } |
| |
| .btn-consent-form-reject { |
| line-height: 35px; |
| } |
| |
| .panel { |
| background-color: #e5e6e8; |
| } |
| |
| .panel-heading { |
| background-color: #e5e6e8 !important; |
| } |
| |
| .panel-title { |
| font-family: 'montserrat-bold'; |
| } |
| |
| .navigation-list { |
| list-style-type: disc; |
| list-style-position: inside; |
| } |
| |
| .navigation-item { |
| color: #4577b8; |
| font-family: 'montserrat-reg'; |
| font-size: 16px; |
| line-height: 20px; |
| } |
| |
| .status-bar-title { |
| font-family: 'montserrat-reg'; |
| font-size: 24px; |
| margin-bottom: 10px; |
| } |
| |
| .instructions { |
| margin: 0px 0px 20px 8px; |
| } |
| |
| .task-list-text { |
| font-family: 'montserrat-reg'; |
| font-size: 20px; |
| } |
| |
| .task-list-subtext { |
| font-family: 'montserrat-light'; |
| font-size: 18px; |
| } |
| |
| .task-list-item{ |
| |
| } |
| |
| .carousel-inner { |
| height: 520px; |
| } |
| |
| .modal-dialog { |
| width: 80%; |
| height: 80%; |
| } |
| |
| .modal-content { |
| width: 100%; |
| height: 100%; |
| } |
| |
| .modal-body { |
| width: 100%; |
| height: calc(100% - 65px); |
| } |
| |
| #intake-button { |
| text-align: center; |
| } |
| |
| |
| /* old css */ |
| |
| #content { |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| top: 0px; |
| } |
| |
| |
| |
| #tab { |
| /*float:left;*/ |
| list-style:none outside none; |
| margin:0; |
| padding:0; |
| /*position:relative;*/ |
| z-index:999 |
| } |
| |
| #tab li span { |
| display: block; |
| /*padding: 0 5px;*/ |
| position: relative; |
| } |
| |
| #arrow { |
| cursor: pointer; |
| } |
| |
| /*.opaque { |
| opacity: 0.4; |
| filter: alpha(opacity=40); |
| }*/ |
| |
| /*.btn { |
| margin: 2px; |
| }*/ |
| |
| |
| |
| |
| |
| .form-signin, |
| .form-signin .checkbox { |
| margin-bottom: 10px; |
| } |
| |
| .form-signin .checkbox { |
| font-weight: normal; |
| } |
| |
| .form-signin .form-control { |
| position: relative; |
| height: auto; |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| box-sizing: border-box; |
| padding: 10px; |
| font-size: 16px; |
| } |
| |
| .form-signin .form-control:focus { |
| z-index: 2; |
| } |
| |
| .head { |
| text-align: center; |
| border-bottom: 1px solid #e5e5e5; |
| } |
| |
| .signin { |
| text-align: center; |
| } |
| |
| .head h1{ |
| font-size: 63px; |
| } |
| |
| .register { |
| margin-top: 40px; |
| margin-bottom: 40px; |
| } |
| |
| div.list-group-item.list-group-item-disabled { |
| color: #949494; |
| background-color: #D8D8D8; |
| } |
| |
| .ot-list-item { |
| position: relative; |
| display: block; |
| |
| margin-bottom: -1px; |
| background-color: #fff; |
| border: 1px solid #ddd; |
| } |
| |
| .ot-list-item > div { |
| padding: 10px 15px; |
| } |
| |
| .ot-task-exit { |
| float: right; |
| border-left: 1px solid #ddd; |
| } |
| |
| .ot-task-name { |
| float: left; |
| } |
| |
| .ot-task-name .heading { |
| color: #333; |
| font-size: 18px; |
| } |
| |
| table.ot-list { |
| background-color: white; |
| } |
| |
| a:hover, a:focus { |
| color: #2a6496; |
| text-decoration: none; |
| } |
| |
| tr.ot-disabled { |
| background-color: #e5e6e8; |
| color: #a5a6a8; |
| } |
| |
| div.status { |
| margin: 10px 10px 0 0; |
| font-size: 40px; |
| } |
| |
| |
| td.status { |
| /*padding-top: 30px !important;*/ |
| vertical-align: middle !important; |
| font-size: 20px; |
| width: 30px; |
| } |
| |
| .task-current { |
| color: #54A81C; |
| } |
| |
| .task-current a{ |
| color: #54A81C; |
| } |
| |
| .task-current a:hover { |
| color: #2A530F; |
| } |
| |
| .disabled { |
| color: #aaa; |
| } |
| |
| div.product-instructions { |
| margin: 10px 15px; |
| } |
| |
| div.product-instructions a{ |
| color: #666; |
| } |
| |
| div.product-instructions a:hover{ |
| color: #000; |
| } |
| |
| div.product-instructions .glyphicon{ |
| margin-right: 5px; |
| } |
| |
| |
| /* EXPERIMENT STATUS PORTAL */ |
| |
| #expStatusHeader { |
| float: left; |
| width: 100%; |
| } |
| |
| .experimentStatusRow { |
| float: left; |
| height: 100px; |
| margin: 15px 0; |
| position: relative; |
| width: 98%; |
| } |
| |
| .expShelf { |
| background: #fff; |
| border: 1px solid #ccc; |
| border-radius: 4px; |
| box-shadow: 0 0 6px #ccc; |
| cursor: pointer; |
| float: left; |
| height: 100px; |
| left: 0; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| z-index: 1000; |
| } |
| |
| .topShelf { |
| background: #f5f5f5; |
| border-bottom: 1px solid #ddd; |
| height: 47px; |
| width: 100%; |
| } |
| |
| .expName { |
| float: left; |
| font-size: 24px; |
| /*font-weight: bold;*/ |
| margin: 8px 2%; |
| width: 50%; |
| } |
| |
| .expDates { |
| float: left; |
| font-size: 14px; |
| margin-top: 18px; |
| width: 40%; |
| } |
| |
| .expDate { |
| float: left; |
| margin: 10 8px; |
| width: 150px; |
| } |
| |
| .expDate:first-child { |
| margin-right: 20px; |
| } |
| |
| .expDateLabel { |
| float: left; |
| color: #999; |
| font-size: 12px; |
| margin: 4px 8px 0 0; |
| text-transform: uppercase; |
| } |
| |
| .expDateValue { |
| float: left; |
| } |
| |
| .expStatsWrapper { |
| float: left; |
| margin: 10px 2%; |
| width: 96%; |
| } |
| |
| .expStat { |
| float: left; |
| margin-right: 10px; |
| width: 90px; |
| } |
| |
| .expStatsWrapper:last-child { |
| margin-right: 0; |
| } |
| |
| .expStatsImg { |
| float: left; |
| margin-right: 18px; |
| width: 20px; |
| } |
| |
| .expStatsValue { |
| float: left; |
| font-size: 22px; |
| margin-top: -2px; |
| width: 15px; |
| } |
| |
| .expTray { |
| background: #fff; |
| border: 1px solid #ccc; |
| border-top: none; |
| bottom: 0px; |
| box-shadow: 0 0 6px #ccc; |
| display: none; |
| float: left; |
| height: 500px; |
| left: 0; |
| margin: 0 2%; |
| position: absolute; |
| top: 100px; |
| width: 96%; |
| z-index: 1; |
| } |
| |
| .expTrayNav { |
| background: #222; |
| float: left; |
| height: 50px; |
| width: 100%; |
| } |
| |
| .expTrayNavBtn { |
| cursor: pointer; |
| float: left; |
| padding: 6px 10px; |
| text-align: center; |
| width: 60px; |
| } |
| |
| .expTrayNavBtn:hover { |
| background: #000; |
| } |
| |
| .expTrayNavBtn.active { |
| background: #000; |
| } |
| |
| #expTrayNavBtnLabels { |
| background: #000; |
| float: right; |
| height: 50px; |
| position: relative; |
| text-align: center; |
| width: 150px; |
| } |
| |
| .expTrayNavBtnLabel { |
| color: #ddd; |
| display: none; |
| font-size: 12px; |
| float: left; |
| margin-top: 17px; |
| text-transform: uppercase; |
| text-align: center; |
| width: 150px; |
| } |
| |
| .expTrayNavBtnLabel.active { |
| display: block; |
| } |
| |
| .expTrayNavBtnImg { |
| float: left; |
| height: 25px; |
| margin: 8px; |
| width: 25px; |
| } |
| |
| .expTrayBody { |
| background: #444; |
| float: left; |
| height: 450px; |
| width: 100%; |
| } |
| |
| .expTraySection { |
| color: #eee; |
| display: none; |
| float: left; |
| width: 100%; |
| } |
| |
| .expTraySection.active { |
| display: block; |
| } |
| |
| .expTraySection tr:hover { |
| color: #444; |
| } |
| |
| .expTraySection a { |
| color: #eee; |
| } |
| |
| .expTraySection a:hover { |
| color: #428bca; |
| } |
| |
| .expTraySection ul { |
| float: left; |
| margin: 0; |
| width: 100%; |
| } |
| |
| .expTraySection li { |
| float: left; |
| list-style-type: none; |
| } |
| |
| .trayTableHeader { |
| background: #333; |
| color: #fff; |
| height: 40px; |
| padding: 10px 2%; |
| } |
| |
| .trayTableHeader li { |
| float: left; |
| } |
| |
| .trayTableBody { |
| margin: 0; |
| padding: 0; |
| max-height: 410px; |
| overflow: auto; |
| } |
| |
| .trayTableBody li { |
| padding: 12px 2%; |
| width: 100%; |
| } |
| |
| .trayTableBody li:nth-child(even) { |
| background: #555; |
| } |
| |
| .trayTableBody>li>div { |
| float: left; |
| } |
| |
| .username { |
| margin-right: 1%; |
| width: 40%; |
| } |
| |
| .progressBar { |
| margin-right: 1%; |
| width: 25%; |
| } |
| |
| .expTray .progress { |
| margin-bottom: 0; |
| width: 75%; |
| } |
| |
| .lastLogin { |
| margin-right: 1%; |
| width: 25%; |
| } |
| |
| .productActive { |
| text-align: center; |
| margin-right: 2%; |
| width: 6%; |
| } |
| |
| .productName { |
| width: 30%; |
| } |
| |
| .productTeam { |
| width: 15%; |
| } |
| |
| .productVersion { |
| text-align: center; |
| width: 10%; |
| } |
| |
| .productDataset { |
| width: 20%; |
| } |
| |
| .productURL { |
| text-align: center; |
| width: 6%; |
| } |
| |
| .productInst { |
| text-align: center; |
| width: 10%; |
| } |
| |
| .taskActive { |
| text-align: center; |
| margin-right: 2%; |
| width: 6%; |
| } |
| |
| .taskName { |
| margin-right: 2%; |
| width: 30%; |
| } |
| |
| .taskSurvey { |
| text-align: center; |
| width: 15%; |
| } |
| |
| .taskExit { |
| text-align: center; |
| width: 15%; |
| } |
| |
| .taskCompletedUser { |
| width: 30% |
| } |
| |
| .taskCompletedName { |
| width: 30% |
| } |
| |
| .taskCompletedDateCompleted { |
| width: 25% |
| } |
| |
| .taskCompletedActCount { |
| text-align: center; |
| width: 15% |
| } |
| |
| .taskIncompleteUser { |
| width: 35%; |
| } |
| |
| .taskIncompleteName { |
| width: 35%; |
| } |
| |
| .taskIncompleteDateAssigned { |
| width: 25%; |
| } |
| |
| #metricsNav { |
| float: left; |
| margin-top: 40px; |
| width: 17%; |
| } |
| |
| .metricsNavBtn { |
| background: #666; |
| color: #ccc; |
| cursor: pointer; |
| float: left; |
| padding: 8px 12px; |
| width: 95%; |
| } |
| |
| .metricsNavBtn:hover, .metricsNavBtn.active { |
| color: #eee; |
| background: #428bca; |
| } |
| |
| .metricsBody { |
| float: left; |
| margin-left: 2%; |
| margin-top: 30px; |
| width: 70%; |
| } |
| |
| .selectTitle { |
| float: left; |
| margin-right: 8px; |
| } |
| |
| .metricsBody select { |
| color: #000; |
| float: left; |
| margin-right: 18px; |
| } |
| |
| .metricsSection { |
| display: none; |
| float: left; |
| margin: 20px 0 0 20px; |
| width: 100%; |
| } |
| |
| .metricsSection.active { |
| display: block; |
| } |
| |
| .chart rect { |
| fill: #428bca; |
| } |
| |
| .chart text { |
| fill: white; |
| font: 10px sans-serif; |
| text-anchor: end; |
| } |
| |
| .emailRow { |
| float: left; |
| margin-bottom: 20px; |
| width: 800px; |
| } |
| |
| .emailLabel { |
| float: left; |
| margin-top: 7px; |
| width: 100px; |
| } |
| |
| .emailInput { |
| border: 1px solid #ccc; |
| border-radius: 4px; |
| box-shadow: none; |
| float: left; |
| height: 34px; |
| padding: 4px 8px; |
| width: 400px; |
| } |
| |
| #email-to { |
| border-radius: 4px 0 0 4px; |
| } |
| |
| #email-subject { |
| width: 450px; |
| } |
| |
| .emailRow .input-group-btn { |
| width: 1px; |
| } |
| |
| #contacts { |
| margin: 0; |
| padding: 0; |
| } |
| |
| #contacts li { |
| cursor: pointer; |
| padding: 6px 0 6px 10px; |
| } |
| |
| #contacts li:hover { |
| background: #39f; |
| color: #fff; |
| } |
| |
| .emailRow textarea { |
| border-color: #ccc; |
| border-radius: 4px; |
| height: 500px; |
| padding: 8px; |
| resize: none; |
| width: 690px; |
| } |
| |
| #emailSubmit { |
| clear: both; |
| float: left; |
| margin: -5px 0 0 100px; |
| } |
| |
| #emailSubmit input { |
| background-color: #777; |
| color: #fff; |
| font-size: 18px; |
| height: 50px; |
| /*text-transform: uppercase;*/ |
| width: 150px; |
| } |
| |
| #emailSubmit input:hover { |
| background-color: #39f; |
| color: #fff; |
| } |
| |
| #statusMessage { |
| float: left; |
| font-size: 18px; |
| margin: 8px 0 0 40px; |
| } |