/* */ /* CSS for Metafour Teamwork App */ /* Mark Rogers */ /* February 2015 */ /* */ @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); /* Overall styles */ body { margin: 0; padding: 0; } body { font-family: 'Muli', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; } html { overflow-y: scroll; } div.container { position: relative; top: 0; left: 0; min-width: 600px; max-width: 1200px; margin: 0 auto; padding: 15px; clear: both; } .center { display: block; margin-left: auto; margin-right: auto; } .textcenter { text-align: center; } .rotate { transform: rotate(270deg); } .rup { -webkit-transform:rotate(330deg); transform:rotate(330deg);} .rdown { -webkit-transform:rotate(30deg); transform:rotate(30deg);} .relative { position: relative; } .left { text-align: left; } .right { text-align: right; } .floatright { float: right; } .floatleft { float: left; } .clearboth { clear: both; } .border { border: 1px solid #00b2db; box-shadow: 3px 3px 4px 0 rgba(50, 50, 50, 0.26); border-radius: 5px; } .bold { font-weight: bold; } h1 { font-weight: 300; font-size: 36px; color: #007ebd; margin: 60px 0 0 0; } h2 { font-weight: 300; font-size: 28px; color: #007ebd; margin: 30px 0 5px 0; } h3 { font-weight: 700; font-size: 17px; color: gray; margin: 8px 0 8px 0; } h5 { font-family: 'Muli', serif; font-weight: 400; font-size: 18px; color: #EA9319; font-style: italic; margin: 10px 0 5px 0; } em { font-weight: 500; font-style: normal; color: #007ebd; } ul { margin: 0 20px 5px 0; padding: 0 0 0 20px; } li { margin: 0 0 5px 0; padding: 0; } table { border-collapse: collapse; } table, tr, td { margin: 0; padding: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } a { color: #10448f; } /* Google Auth button */ #maincontent, #navigate { display: none; } #loginbox { width: 500px; height: 300px; border: 1px solid lightgray; border-radius: 5px; margin: 50px auto; background-color: #f8f8f8; box-shadow: 5px 5px 10px 0 #f0f0f0; display: none; } #googlebutton { display: block; background: #4285f4; color: white; border-radius: 5px; white-space: nowrap; width: 230px; margin: 125px auto 0 auto; } #googlebutton:hover { cursor: pointer; } #googlebutton span.icon { background: url('googlelogo.png') transparent 5px 50% no-repeat; display: inline-block; vertical-align: middle; width: 48px; height: 42px; border-right: #2265d4 1px solid; } #googlebutton span.buttonText { display: inline-block; vertical-align: middle; margin: 0 30px; font-size: 16px; font-weight: bold; } .g-signin2 { position: absolute; top: 45%; left: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } /* Flexbox for newspaper columns */ div.flex { display: flex; flex-direction: row; flex-wrap: wrap;} div.flexbetween { display: flex; justify-content: space-between; } div.flex33 { width: 360px; margin: 0 30px 20px 0; } div.flex50 { width: 550px; margin: 0 25px 20px 0; } div.flex66 { width: 720px; margin: 0 30px 20px 0; } div.flex100 { width: 100%; margin: 0 20px 0 0; } p.emphasise { font-weight: 600; line-height: 160%; } div.flex b { font-weight: normal; color: #007ebd; } .w700c { width: 700px; margin-left: auto; margin-right: auto; } .w900c { width: 900px; margin-left: auto; margin-right: auto; } /* Header bar */ div.headercontainer { height: 90px; min-width: 650px; max-width: 1200px; margin: 0 auto; padding: 0; background: url(metafour.png); background-size: 174px 80px; background-repeat: no-repeat; } div.headerbar { height: 80px; margin: 0 0 2px 0; padding: 5px; background-color: #f0f0f0; border-bottom: 1px solid #aaa; box-shadow: 0 3px 3px 0 rgba(220, 220, 220, 0.75); } div.menubar { float: right; } div.menubar div { display: inline-block; } span.splash { float: left; color: #EA9319; font-size: 24px; font-weight: bold; line-height: 25px; margin-left: 190px; text-align: center; margin-top: 12px; font-style: normal; } div.button { color: white; background-color: #10448f; border: 1px solid #204D74; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.125) 0 3px 5px 0 inset; font-size: 14pt; margin: 0 5px 5px 5px; padding: 3px 7px 3px 7px; text-align: center; cursor: pointer; } div.midbutton { width: 150px; font-size: 12pt; margin: 1px 5px 3px 5px; padding: 3px 5px 3px 5px; } div.smallbutton { font-size: 12pt; margin: 1px 5px 3px 5px; padding: 3px 5px 3px 5px; } div.smallerbutton { display: inline-block; font-size: 11pt; margin: 0 5px 3px 5px; padding: 1px 4px; color: #10448f; background-color: lightgray; border: 1px solid gray; border-radius: 6px; text-align: center; cursor: pointer; } div.menubar div.button { vertical-align: top; margin-top: 25px; } div.withtext { min-width: 180px; } ul.menudropdown { display: none; position: absolute; z-index: 1000; width: 220px; padding: 0; margin: 10px 0 0 -10px; list-style: none; text-align: left; color: #22537c; background-color: #eee; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 6px 12px rgba(0,0,0,.175); } ul.menudropdown li { margin: 0; padding: 3px 6px; } ul.menudropdown li:hover { background-color: rgba(209,171,20,.2); } #usermenubutton { display: inline-block; border-radius: 50%; overflow: hidden; width: 50px; height: 50px; margin: 15px 5px 0 5px ; padding: 0; } #usermenubutton img { max-width: 50px; } #userdetails div.button#logout a { color: #fff; text-decoration: none; } /* Decoration for company plan */ table.first td { line-height: 19px; padding : 6px 20px 0 0; } table.first td:first-child:first-letter { font-weight: bold; font-size: 20px; color: #EA9319; margin: 0 1px 0 0; } .smile:before { font-weight: normal; font-size: 20px; color: #EA9319; font-family: FontAwesome; content: "\f118\00a0"; } .thumbsup:before { font-weight: normal; font-size: 20px; color: #EA9319; font-family: FontAwesome; content: "\f164\00a0"; } .thumbsdown:before { font-weight: normal; font-size: 20px; color: #EA9319; font-family: FontAwesome; content: "\f165\00a0"; } /* Table with headers and grey borders */ table.simple { width: 100%; margin: 25px 0 50px 0; } table.simple td { font-weight: 400; padding: 6px 10px; border: 1px solid lightgray; } table.simple thead td { color: #007ebd; font-size: 16px; font-weight: 600; text-align: center ; } /* Table centered with col 1 left justified and remainder centered */ table.center { width: 750px; margin: 25px auto 35px auto; } table.center td { font-weight: 400; padding: 6px 10px; border: 1px solid lightgray; } table.center td { text-align: center; } table.center td:nth-child(1) { width: 180px; text-align: left; color: #007ebd; } /* Table with striped rows */ table.stripe tr:nth-child(odd) { background-color: #f0f4fe; } table.stripe tr:nth-child(even) { background-color: ghostwhite; } table.stripe tr:nth-child(1) td { font-size: 20px; font-weight: 300; text-align: center; color: #007ebd; background-color: #f0f0f0; padding-top: 12px; padding-bottom: 12px; } /* Table for sprint planning */ #sprint { border: 1px solid lightgray; background-color: #f8f8f8; padding: 20px 5px 20px 5px; } #sprint label { color: dimgray; font-size: 11pt; font-weight: 600; width: 100px; margin: 4px 5px 4px 0; text-align: right; vertical-align: top; display: inline-block; } #sprint .editlong, #sprint .editshort { background-color: white; } #head { font-size: 16px; font-weight: 300; text-align: center; color: #007ebd; background-color: #f0f0f0; } #project tr:nth-child(odd) { background-color: #f0f4fe; } #project tr:nth-child(even) { background-color: ghostwhite; } #dummy { display: none; } /* Table for timesheet */ table.time { width: 100%; margin: 25px 0 50px 0; font-weight: 400; } table.time tr td { font-size: 16px; text-align: left; border: 1px solid #aaa; height: 25px; padding: 0 5px; } table.time tr th { font-size: 16px; font-weight: 600; text-align: center ; border: 1px solid #aaa; height: 25px; padding: 0 5px; } table.time tr th { font-weight: 600; background-color: #eee; text-align: center; padding: 0 3px; border: 1px solid #aaa; } #ssbody tr td:first-child { width: 180px; } #ssbody tr td:nth-child(2) { width: 250px; } #ssbody tr td:nth-child(n+3) { min-width: 45px; } #ssbody tr td:hover { background-color: #eee; } #ssbody tr td:not(:focus) { text-align: right; } #ssbody tr.subtot { font-weight: 600; background-color: #eee; } table.time .error { background-color: pink; } #sstoolbar { width: 100%; font-weight: 300; font-size: 0; color: #007ebd; text-align: center; } #sstoolbar #ssprev { font-size: 20px; text-align: left; margin-left: 0; cursor: pointer; } #sstoolbar #ssnext { font-size: 20px; text-align: right; margin-right: 0; cursor: pointer; } #sstoolbar div.tbutton { font-size: 18px; color: #007ebd; background-color: #f4f4f4; border: 1px solid #d0d0d0; display: inline-block; margin: 0; padding: 2px 6px 2px 6px; text-align: center; cursor: pointer; } #sstoolbar div.tleft { border-radius: 5px 0 0 5px; margin-left: 8px; } #sstoolbar div.tmid { border-radius: 0; } #sstoolbar div.tright { border-radius: 0 5px 5px 0; margin-right: 8px; } #sstoolbar div.selected { background-color: #e4e4e4; } #sstoolbar div.tbutton:hover { border: 1px solid #00b2db; } /* Benchmark */ table.bmtoolbar { width: 100%; font-weight: 300; font-size: 0; color: #007ebd; text-align: center; margin: 40px 0 20px 0; } table.bmtoolbar div.tbutton { font-size: 16px; color: #007ebd; background-color: #f4f4f4; border: 1px solid #d0d0d0; display: inline-block; margin: 0; padding: 2px 6px 2px 6px; text-align: center; cursor: pointer; } table.bmtoolbardiv.tleft { border-radius: 5px 0 0 5px; margin-left: 8px; } table.bmtoolbar div.tmid { border-radius: 0; } table.bmtoolbar div.tright { border-radius: 0 5px 5px 0; margin-right: 8px; } table.bmtoolbar div.selected { background-color: #e4e4e4; } table.bmtoolbar div.tbutton:hover { border: 1px solid #00b2db; } /* Whoami */ #whotable { width: 100%; } #whotable td { border: 1px solid #ccc; padding: 2px 6px; vertical-align: top; } #whotable tr td:nth-child(1) { min-width: 20px; } #whotable tr td:nth-child(2) { min-width: 180px; } #whotable tr td:nth-child(n+3) { min-width: 300px; } #whotable td.gap { border: none; } #whotable i { color: #007ebd; } #whotable tr.editable td { background-color: #aaa; text-align:center; } #whotable p { margin: 7px; line-height: 1.35; } #whotable th { font-weight: 300; font-size: 22px; color: #007ebd; text-align: center; padding: 10px; border: 1px solid #ccc; } #whotable table.whoinfo td { border: none; } #whotable td.whofull { text-align: center; font-weight: 300; font-size: 20px; color: #007ebd; } #whotable td.whoimage { text-align: center; width: 220px; } #whotable td.whoimage img { width: 200px; } #whotable td.whoshort { text-align: center; font-style: italic; padding: 0 0 4px 0; } #whotable td.whodata { padding: 1px; text-align: left; max-width: 215px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } #whotable td.whoicon { padding: 1px; width: 24px; } #whotable a.button { height: 18px; width: 18px; padding: 0; margin: 2px; background-color: #ddd; border-width: 1px; border-style: solid; border-color: gray; border-radius: 3px; display: inline-block; text-align: center; } #whotable a.button:hover { margin: 1px; border: 2px solid #007ebd;} #whotable a.button i { font-size: 14px; vertical-align: text-top; color: #333; } #whotable h1 { font-weight: 500; font-size: 22px; color: #007ebd; margin: 40px 0 9px 0; } #whotable h2 { font-weight: 500; font-size: 18px; color: #007ebd; margin: 20px 0 9px 0; } #whotable h3 { font-weight: 500; font-size: 16px; color: #007ebd; margin: 10px 0 9px 0; } #blogtable { width: 100%; } #blogtable td { border: 1px solid #ccc; padding: 6px 10px; vertical-align: top; } #blogtable td.gap { border: none; text-align: left !important; background-color: white; min-height: 35px;} #blogtable td.gap div.button { margin: 20px 5px 0 5px; } #blogtable td.gap img { vertical-align: bottom; } #blogtable tr:nth-child(even) { background-color: #fcfcfc; } #blogtable tr:nth-child(odd) { background-color: #f8f8f8; } #blogtable tr td:nth-child(1) { width: 120px; text-align: center; } #blogtable tr td:nth-child(2) { border-right: none; } #blogtable tr td:nth-child(3) { width: 80px; text-align: right; vertical-align: bottom; border-left: none; } #blogtable i { color: #007ebd; } #blogtable tr.editable td { background-color: #aaa; text-align:center; } #blogtable p { line-height: 1.35; } #blogtable div.button { padding: 2px 6px; color: #000000; font-size: 12px; background-image: linear-gradient(to bottom, #fafafa, #d9d9d9); border: 1px solid #a7a7a7; border-radius: 5px; min-height: 20px; line-height: 20px !important; display: inline-block; cursor: pointer; white-space: nowrap;} #blogtable div.button:hover { color: #333333; background-image: linear-gradient(to bottom, #dadada, #c9c9c9); border: 1px solid #a7a7a7; } #blogtable div.disabled { color: #999999; background-image: linear-gradient(to bottom, #dadada, #c9c9c9); border: 1px solid #dddddd; cursor: none; pointer-events: none; } #blogtable div.disabled i { color: #999999; } #blogtable div.placeholder { font-size: 12px; margin-bottom: 0; color: #007ebd; font-style: italic; } #blogtable h1 { font-weight: 500; font-size: 22px; color: #007ebd; margin: 40px 0 9px 0; } #blogtable h2 { font-weight: 500; font-size: 18px; color: #007ebd; margin: 20px 0 9px 0; } #blogtable h3 { font-weight: 500; font-size: 16px; color: #007ebd; margin: 10px 0 9px 0; } #blogtable div.myedit img { max-width: 600px; height:auto; } .blogmyimage { width: 100px; } .bloglikeimage { width: 35px; } /* Team 2017 */ #teamtable { width: 100%; } #teamtable td { border: 1px solid #ccc; padding: 2px 6px; vertical-align: top; min-width: 100px; min-height: 50px; } #teamtable td.gap { border: none; height: 60px; } #teamtable p { margin: 10px 0; } #teamtable div.h3 { font-weight: 500; font-size: 20px; color: #007ebd; text-align: center; } #teamtable div.placeholder { font-size: 12px; margin-bottom: 0; color: #007ebd; font-style: italic; } /* Chat window */ div.chat { width: 100%; border: 1px solid lightgray; background-color: #f8f8f8; } div.chatgroup { position: relative; } div.chatpeople { margin: 0 0 6px 0; padding: 3px 6px 1px 3px; background-color: #f0f0f0; box-shadow: 0 5px 5px -2px lightgray; } #chatcontainer { max-height: 400px; overflow-y: scroll; } div.chathistory { min-height: 50px; margin: 4px; padding: 3px; border: #e0e0e0 solid 1px; background-color: white; border-radius: 5px; position: relative; } div.chatstamp { font-size: 10px; font-style: italic; color: gray; margin: -5px 0 6px 6px; } div.chatleft { margin-right: 60px; } div.chatleft:after { content: ''; position: absolute; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; margin-top: -10px; right: -10px; top: 20%; } div.chatleft:before { content: ''; position: absolute; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent #e0e0e0; display: block; width: 0; z-index: 0; margin-top: -10px; right: -11px; top: 20%; } div.chatright { margin-left: 60px; } div.chatright:after { content: ''; position: absolute; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #FFFFFF; display: block; width: 0; z-index: 1; margin-top: -10px; left: -10px; top: 80%; } div.chatright:before { content: ''; position: absolute; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #e0e0e0; display: block; width: 0; z-index: 0; margin-top: -10px; left: -11px; top: 80%; } #chattext { min-height: 80px; border: 1px solid lightgray; background-color: white; margin: 4px 60px 4px 4px; padding: 3px; } #chatbutton { color: white; background-color: #10448f; border: 1px solid #204D74; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.125) 0 3px 5px 0 inset; font-size: 14pt; padding: 3px 1px 3px 1px; text-align: center; cursor: pointer; position: absolute; bottom: 3px; right: 3px; width: 47px; } img.who { height: 40px; width: 40px; border-radius: 50%; } img.whoright { position: absolute; top: 5px; right: 5px; height: 40px; width: 40px; } img.wholeft { position: absolute; bottom: 20px; left: 5px; height: 40px; width: 40px; } /* Table for company plan */ table.plan { min-width: 65px; } table.plan tr:last-child td { color: #007ebd; padding-top: 9px; padding-bottom: 9px; text-align: center; } table.plan td:nth-child(n+3) { text-align: center; } /* Flowchart in company plan */ div.flowchart { width: 360px; margin: 0 auto; text-align: center; } div.flowchart i { color: #EA9319; } /* Table for change teams */ #teambubbles { width: 100%; text-align: center; vertical-align: middle; } #teambubbles i { color: #EA9319; } div.flow { font-weight: 400; display: inline-block; border: 2px solid #EA9319; margin: 6px 0 4px 0; padding: 5px; text-align: center; border-radius: 25px; width: 100%; } div.bubble p { text-align: left; margin: 4px 0 1px 0; } div.bubble { font-weight: 400; display: inline-block; border: 2px solid #EA9319; min-height: 180px; margin: 6px 2px 4px 2px; padding: 10px; text-align: center; vertical-align: center; border-radius: 25px; } div.circle { width: 400px; height: 100px; text-align: center; border: 2px solid #EA9319; background: white; border-radius: 80px; transform-style: preserve-3d; margin: 15px auto; } div.circle div { font-size: 26px; color: #007ebd; position: relative; top: 50%; transform: translateY(-50%); } .w20p { width: 15%; } .w7p { width: 4%; text-align: center; } .minw100 { min-width: 100px; } .minh100 { min-height: 100px; } .w300 { width: 300px } .w600 { width: 600px } /* Table for scorecard */ table.map { width: 100%; border-collapse: collapse; } table.map td { font-weight: 300; font-size: 20px; color: #007ebd; text-align: center; vertical-align: top; padding: 5px 2px; border: 1px solid lightgray; } table.map td:nth-child(1) { vertical-align: middle; } table.map tr:nth-child(odd) { background-color: #f0f0f0; } table.map tr:nth-child(even) { background-color: #f8f8f8; } table.map div.bubble { color: black; font-size: 16px; font-weight: normal; display: inline-block; border: 2px solid #EA9319; margin: 6px 2px 4px 2px; width: 110px; height: 55px; padding: 8px; border-radius: 100px; } table.map div.planbox { background-color: #fff4d6; border: 1px solid #fffaeb; padding: 7px; border-radius: 3px; box-shadow: 4px 4px 11px 0 rgba(50, 50, 50, 0.25); } table#score { display: table; border-collapse: collapse; border: 1px solid gray; margin-bottom: 30px; } table#score tr { display: table-row; height: 50px; border: 1px solid lightgray; } table#score th { font-weight: 300; font-size: 20px; color: #007ebd; text-align: center; height: 35px; min-width: 75px; } table#score td { text-align: center; } table#score tr.header { background-color: #e0e0e0; } table#score th.w125 { width: 125px; } div.one { font-weight: 300; font-size: 20px; color: #007ebd; } div.gauge { width:125px; height:100px; display: block; } div.ganttcontain { height: 20px; width: 50%; margin: 1px 0 2px 10%; padding: 0; text-align: center; position: relative; overflow: hidden; cursor: pointer; } div.gantttext { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; font-size: 12px; font-weight: 600; } div.ganttgreen { width: 30%; height: 100%; position: absolute; top: 0; left: 0; background-color: #44ff44; border-radius: 10px 0 0 10px; display: inline-block; } div.ganttred { width: 400px; height: 100%; position: absolute; top: 0; left: 30%; background-color: #ff4444; border-radius: 0 10px 10px 0; display: inline-block; } div.ganttadd { font-size: 12px; font-weight: 600; height: 20px; width: 100%; margin: 1px 0 2px 0; padding: 0; text-align: center; background-color: ghostwhite; cursor: pointer; } /* Table for teamplan */ .datecell { font-family: 'Muli', sans-serif; font-size: 16px; font-weight: 400; width: 170px; display: inline-block; text-align: center; vertical-align: middle; padding: 0; margin: 0; border: none; } .headrow td { font-size: 18px; font-weight: 300; text-align: center; color: #007ebd; background-color: #f0f0f0; padding-top: 10px; padding-bottom: 10px; } .headrow i { font-size: 14px; float: left; color: #505050; margin-top: 2px; padding: 2px; border: 1px solid gray; border-radius: 4px; } .headrow .selected { color: chocolate; } .addrow td { text-align: center; background-color: #e0e0e0; padding: 0; color: gray; } #dropdown { width: 200px; position: absolute; margin: 0; padding: 0; list-style: none; text-align: left; color: #22537c; background-color: #eee; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 6px 12px rgba(0,0,0,.175); } #dropdown li { margin: 0; padding: 3px 6px; cursor: pointer; } #dropdown li:hover { background-color: rgba(209,171,20,.2); } /* Menu tiles */ #navtiles { margin: 40px 0 0 0; } div.tile { color: white; width: 280px; height: 170px; text-align: center; margin: 0 10px 10px 0; cursor: pointer; } div.tile:hover { box-shadow: 0 0 12px 0 rgba(209,171,20,1); } div.tile h3 { color: white; font-size: 26px; font-weight: 300; margin: 7px 3px 5px 3px;} div.tile p { font-size: 14px; font-weight: 300; margin: 3px 3px 5px 3px; } /* Popup forms for help project, sprint etc. */ .spinner { position: relative; top: 200px; right: 300px; } #help { display: none; position: fixed; top: 30%; left: 30%; width: 40%; min-width: 400px; padding: 10px; background-color: white; border: 1px solid dimgray; box-shadow: 3px 3px 4px 0 rgba(50, 50, 50, 0.26); border-radius: 5px; z-index: 100; } .close { display: inline-block; float: right; } .form { left: 50%; width: 600px; margin-left: -300px; padding: 10px; background-color: white; border: 1px solid dimgray; box-shadow: 3px 3px 4px 0 rgba(50, 50, 50, 0.26); border-radius: 5px; display: none; z-index: 123; } .form { position: fixed; top: 20%; } /* If on a screen, keep in centre */ @media screen and (max-height:700px) { .form { position: absolute; top: 10px; } /* If on a mobile, allow it to scroll */ } .form label { color: dimgray; font-size: 11pt; font-weight: 600; width: 135px; margin: 4px 5px 4px 0; text-align: right; vertical-align: top; display: inline-block; } div.link { color: #10448f; background-color: white; display: inline-block; font-size: 14pt; margin: 0 8px 0 2px; padding: 0; text-align: center; cursor: pointer; position: relative; top: -8px; } div.l-on { color: #10448f; cursor: pointer; } div.l-off { color: gray; cursor: auto; } div.editlong { width: 400px; margin: 3px 10px 3px 3px; padding: 1px 3px 1px 3px; border: 1px solid lightgray; display: inline-block; } div.editlonger { width: 600px; margin: 3px 10px 3px 3px; padding: 1px 3px 1px 3px; border: 1px solid lightgray; display: inline-block; } div.editshort { width: 100px; margin: 3px 0 3px 3px; padding: 1px 3px 1px 3px; border: 1px solid lightgray; display: inline-block; text-align: center; } div.editcheck { width: 400px; margin: 3px 10px 3px 3px; padding: 1px 3px 1px 3px; border: 1px solid lightgray; display: inline-block; } .editdate { font-family: 'Muli', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; width: 170px; margin: 3px 0 3px 3px; padding: 1px 3px 1px 3px; border: 1px solid lightgray; display: inline-block; text-align: center; vertical-align: middle; } div.editbuttons { display: inline-block; } div.editurl { width: 366px; margin: 3px 10px 3px 3px; padding: 1px 3px 1px 3px; border: 1px solid lightgray; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } div.editlong:before, div.editlonger:before, div.editshort:before, div.editurl:before { content: "\feff "; } div.typebutton { background-color: ghostwhite; border: 1px solid lightgray; border-radius: 9px; display: inline-block; font-size: 14px; margin: 4px 7px 4px 0; padding: 2px 10px; text-align: center; cursor: pointer; } div.typeactive, div.typebutton:hover { color: white; background-color: #10448f; border: 1px solid #204D74; } #p-small, #p-medium, #p-large { color: white; background-color: #10448f; border: 1px solid #204D74; border-radius: 6px; display: inline-block; margin: 3px 2px 5px 2px; padding: 2px 7px 2px 7px; text-align: center; cursor: pointer; } #colours { display: inline-block; } #colours { height: 20px; margin: 4px 4px 0 2px; border: 1px solid lightgray; cursor: pointer; display: inline-block; } /* General colours */ .green { color: green; } .red { color: red; } .orange { color: #EA9319; } /* Scorecard rows */ .financial { background-color: #EAF7FB; } .customer { background-color: #EAFFEF; } .business { background-color: #FFFFE3; } .learning { background-color: #FAF0E6; } /* Pastal backgrounds */ .c-blue { background-color: #D1E2F4; } .c-green { background-color: #CCE6BF; } .c-red { background-color: #FFE4B7; } .c-gray { background-color: #ECEBE6; } .c-yellow { background-color: #FDFBC2; } .c-purple { background-color: #E9D0E5; } .c-ivory { background-color: #E8EFE8; } .c-cyan { background-color: #DBF2F8; } /* Menu tile backgrounds */ .b-green { background-color: #008A00; } .b-blue { background-color: #007ebd; } .b-orange { background-color: #D24726; } .b-purple { background-color: #8C0095; } .b-cyan { background-color: #00b2db; } .b-gray { background-color: #aaaaaa; } /* Menu appmenu */ #appmenu { position: absolute; top: 5px; right: 5px; background-color: white; border: 1px solid dimgray; box-shadow: 3px 3px 4px 0 rgba(50, 50, 50, 0.26); border-radius: 5px; display: none; z-index: 102; } #appmenu table { border-spacing: 30px; border-collapse: separate; } #appmenu td { font-size: 11pt; text-align: center; line-height: 95%; cursor: pointer; } #usermenu { position: absolute; top: 5px; right: 5px; background-color: white; border: 1px solid dimgray; width: 400px; box-shadow: 3px 3px 4px 0 rgba(50, 50, 50, 0.26); border-radius: 5px; display: none; z-index: 102; padding: 20px 20px 0 20px; } #userdetails img { height: 100px; width: 100px; float: left; margin: 0 20px 0 0; } #userdetails div { display: block; overflow: hidden; text-overflow:ellipsis; } #userdetails div.button { float: right; } .arrow1 { position: absolute; top: -16px; right: 70px; width: 0; height: 0; border-style: solid; border-width: 0 16px 16px 16px; border-color: transparent transparent black transparent; } .arrow2 { position: absolute; top: -15px; right: 70px; width: 0; height: 0; border-style: solid; border-width: 0 16px 16px 16px; border-color: transparent transparent white transparent; } .right70 { right: 70px; } .right20 { right: 20px; } /* Project and sprint display */ div.projects { margin: 0 auto; } div.fifth { width: 19.4%; margin-top: 20px; display: inline-block; vertical-align: top; } div.box { background-color: white; border: 1px solid dimgray; vertical-align: top; min-height: 120px; margin: 9px 3px; border-radius: 5px; box-shadow: 2px 2px 2px 0 rgba(50, 50, 50, 0.25); } .boxdrop { background-color: white; border: 1px solid dimgray; vertical-align: top; height: 150px; margin: 9px 3px; border-radius: 5px; opacity: 0; } div.boxdropactive { opacity: 0.7; } div.boxdrophover { box-shadow: 0 0 20px chocolate; } div.boxhead { text-align: center; color: white; background-color: #10448f; border-bottom: 1px solid dimgray; border-radius: 5px 5px 0 0; padding: 2px 0 3px 0; } img.arrow { width: 70px; display: block; margin: 80px auto 20px auto; } div.project { max-height: 90px; border: 1px solid dimgray; font-size: 11pt; padding: 2px 4px 2px 4px; margin: 2px; border-radius: 12px; text-overflow: ellipsis; overflow: hidden; } div.businesscase { font-size: 8px; color: white; background-color: chocolate; text-align: center; border-radius: 0; padding: 0; } div.helper { width: 17%; } span.phaseof { font-style: italic; font-size: 10pt; border: 1px solid #EA9319; background-color: white; padding: 0 2px 1px 2px; border-radius: 16px; display:inline-block; float: right; } span.phaseof:empty { display: none; } div.progressbar { height: 10px; background: #2a2b2f; border: none; border-radius: 7px; box-shadow: 0 1px 0 rgba(0, 0, 0, .3) inset, 0 1px 0 rgba(255, 255, 255, .15); } div.progressbar-value { height: 6px; width: 50%; margin: 3px; background: chocolate; border: none; border-radius: 3px; position: relative; top: 2px; z-index: 1; } /* visitors */ #visitordetails, #visitorpolicy { padding: 10px; border: 1px solid dimgray; box-shadow: 3px 3px 4px 0 rgba(50, 50, 50, 0.26); border-radius: 5px; } #visitordetails label { color: dimgray; font-size: 11pt; font-weight: 600; width: 135px; margin: 4px 5px 4px 0; text-align: right; vertical-align: top; display: inline-block; } #visitordetails .selected { border: 1px solid red; } #visitoroffice, #visitorposition { display: inline-block; } #visitoroffice div, #visitorposition div { height: 20px; margin: 4px 4px 0 2px; padding: 0 5px 1px 5px; border: 1px solid lightgray; cursor: pointer; display: inline-block; } .rowofbuttondivs { display: inline-block; } .rowofbuttondivs div { height: 20px; margin: 4px 4px 0 2px; padding: 0 5px 1px 5px; border: 1px solid lightgray; cursor: pointer; display: inline-block; border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .3); } .rowofbuttondivs div.selected { border: 1px solid red; } #visitorlist table { width: 100%; border: 1px solid dimgray; box-shadow: 3px 3px 4px 0 rgba(50, 50, 50, 0.26); border-radius: 5px; } #visitorlist tr:nth-child(odd) { background-color: #f0f4fe; } #visitorlist tr:nth-child(even) { background-color: ghostwhite; } #visitorlist tr:nth-child(1) td { font-size: 16px; font-weight: 300; text-align: center; color: #007ebd; background-color: #f0f0f0; padding-top: 12px; padding-bottom: 12px; } #visitorlist td { border: 1px solid dimgray; padding: 5px; } #visitorlist td[colspan]:not([colspan="1"]) { font-size: 20px; font-weight: 300; padding: 10px 0 10px 20px; background-color: #94d0ee; } .date.editshort.visitorLog { width: 100px; margin: 3px 0 3px 3px; padding: 1px 3px 1px 3px; border: 1px solid lightgray; display: inline-block; text-align: center; height: 24px; } /* Bottom navigation */ #navigate { font-weight: 300; font-size: 24px; color: #007ebd; text-align: right; margin: 30px 0 10px 0; cursor: pointer; } #navigate:after { font-family: FontAwesome; content: "\00a0\f0a4"; } /* Responsive */ @media screen and (max-width: 750px) { .option { display:none } div.container { padding: 2px; } table.teams i { transform: scale( 0.7 ); } .w7p { width: 4%; } } /* Print */ @media print { div.headerbar {display: none;} }