@charset "UTF-8"; /**This CSS file needs to be followed in the by MASRespweb_CSS in order to adapt to smaller screens **/ html, body { height:100%; min-height: 100%; width: 100%; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: 0px solid transparent; font-size: 0.9em; /* Ideal: 16px */ overflow: hidden; } img, object, embed, canvas, video, audio, picture { max-width: 100%; height: auto; } .layout-header { position: relative; box-sizing: border-box; /*includes content, padding and border, but not the margin*/ height: 4em; min-height:4em; width: 100%; /* max-width:calc(1280px + 12em + 10em); /*defines the max width of the workspace*/ margin: 0px auto 0px auto; background:linear-gradient(to left, #ffffff 3%, #FFA500 10%, #FFA500 90%, #ffffff 97%); } .header { position:absolute; box-sizing: border-box; /*includes content, padding and border, but not the margin*/ height:100%; width:100%; border-bottom:2px solid grey; background-image:url('/MAS_MGT/IMAGES/Logo_MAS.png'); background-repeat:no-repeat; background-size:contain; background-position:center; border-bottom:solid 1px #99A9BF; } .layout-current-user { display:visible; position: absolute; height:3.5em; width: 9.1em; /*important to position right and left radius*/ top:0; float: left; margin-left:15%; background-color: lightblue; } .left-radius, .current-user, .right-radius { display:inline-block; vertical-align:top; height: 3.5em; border-color: grey; } /***********************************Styling current user display*****************************/ .left-radius { width: 1em; border-radius: 0 1em 0 0; background-color:#FFA500; } .current-user { margin: 0 -0.25em 0 -0.25em; padding: 0em 0em 0em 0em; width: 7em; background-color: lightblue; border: 0px 1px 1px 1px; border-radius: 0 0 1em 1em; text-align: center; color:grey; } .right-radius { width: 1em; border-radius: 1em 0 0 0; background-color:#FFA500; } /*##############################MODAL POP UP WINDOW ##############################################*/ /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ z-index:7;/*Above the error message (z=5)*/ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } div#close-help-box { position:relative; display:inline-block; height:2em; width:12em; left:15%; top:1em; margin:6px auto 0 auto; visibility:hidden; } button.close-help { background-color: #C0C0C0; width: 12em; height: 2em; border: solid #DCDCDC; font-weight: bold; font-size: 1em; cursor: pointer; display: block; margin: 0 auto; z-index:20; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } /***********************************Styling searchbox display*****************************/ #layout-searchbox, #layout-yr-selectbox { position:relative; display:none;/*inline-block*/ height:2em; width:12em; left:70%; margin:20px auto 0 auto; } #layout-yr-selectbox { left:70%; } input#searchbox[type=text] { width: 75%; height:100%; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 0.8em; background-color: white; background-image: url('/MAS_MGT/IMAGES/search_icon.png'); background-repeat: no-repeat; background-size:contain; background-position: right; padding:0.25em; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } input#searchbox[type=text]:focus { width: 100%; } /***************************************Layout Main container and its contents*****************/ .layout-main { height: calc(100% - 4em); /*100% - height of the header*/ min-height: calc(100% - 4em); width: 100%; /* max-width:calc(1280px + 12em + 10em); /*total screen plus layout-menu plus layout-link, defines the max width of the workspace*/ margin: 0px auto 0px auto; background:linear-gradient(to left, #ffffff 3%, #E6E6E6 10%, #DCDCDC 90%, #ffffff 97%); } .main { height: 100%; min-height: 100%; width:100%; } .layout-menu, .layout-content, .layout-lnk { box-sizing: border-box; /*includes content, padding and border, but not the margin*/ display: inline-block; height: 100%; min-height: 100%; vertical-align: top; } .layout-menu { width: 18em; color: white; /*#DCDCDC;*/ background-color: #6A5ACD; margin-right:-4px; /*in order to take out 4px margin between menu and content*/ } .layout-content { height:100%; width: calc(100% - 18em); color: #000000; background-color: #FFFFFF; background-repeat: no-repeat; background-position: left top; background-attachment: fixed; background-size: 100% 100%; } .layout-lnk { display:none; width: 10em; min-width: 10em; color: #000000; background-color: #DCDCDC; } .menu, .content, .lnk { box-sizing: border-box; /*includes content, padding and border, but not the margin*/ padding: 0px 0px 0px 0px; font-family: Arial; font-size: 1.1em; overflow:auto; } .menu h1 { margin-bottom: -1em; } .content { width: 100%; height:100%; clear: both; margin: 0px auto 0px auto; padding: 0px 0px 0px 0px; border-top: 1px solid #36393D; font-size: 1em; /* Ideal: 12px */ text-align: center; overflow:auto; } .content h2 { font-size: 1.5em; /* Ideal: 24px */ text-align: center; margin-top: 2em; } .content h3 { text-align: center; } /*************************************Command Bar an it's FORM*************************************/ /**************************************************************************************************/ form#cmd_bar { box-sizing:border-box; position:relative; /*in order to center the cmd bar in the form*/ height:; width:; } #layout-cmdbar { box-sizing:border-box; position:absolute; height:3em; min-height:3em; width:100%; max-width:100%; bottom:0; } #command-bar { box-sizing:border-box; position:relative; height: 100%; border-top: 3px solid grey; border-right: 1px solid grey; border-left: 0.5px solid grey; border-radius: 0.5em 0.5em 0 0; text-align:center; font-size:1em; background-color:#FFA500; } div#cmd-left { display:inline-block; float:left; width: 10.1em; margin: 5px 0px 0px 10%; } div#cmd-center { display:inline-block; width: 10.1em; margin:5px auto 0 auto; } div#cmd-right { display:inline-block; float:right; width: 10.1em; margin: 5px 10% 0px 0px; } .cmd-button { width: 10em; border: 1px solid #A9A9A9;/*DarkGrey*/ padding:0.25em; border-radius: 0.3em; background: #77a9db; background-image: -webkit-linear-gradient(top, #77a9db, #626e75); background-image: -moz-linear-gradient(top, #77a9db, #626e75); background-image: -ms-linear-gradient(top, #77a9db, #626e75); background-image: -o-linear-gradient(top, #77a9db, #626e75); background-image: linear-gradient(to bottom, #77a9db, #626e75); text-decoration: none; font-size:1.0em; font-weight:bold; } .cmd-button:hover { background-image: -webkit-linear-gradient(top, #8a9096, #626e75); background-image: -moz-linear-gradient(top, #8a9096, #626e75); background-image: -ms-linear-gradient(top, #8a9096, #626e75); background-image: -o-linear-gradient(top, #8a9096, #626e75); background-image: linear-gradient(to bottom, #8a9096, #626e75); text-decoration: none; } /************************************Right column Links*************************************/ /*************************************************************************************/ .lnk .lnk-item { width: 85%; margin: 0px auto 0px auto; padding: 15px 0px 15px 0px; border-top: 1px solid #36393D; text-align: center; } .lnk .lnk-item:first-child { border: 0px solid transparent; } .lnk .lnk-item a { color: #000000; font-style: italic; } /************************************************INPUT VALIDATION***************************************/ .errorClass { background-color:#FFA500; } #errorDiv { position:absolute; color:red; text-align:center; margin-left:-15em; left:50%; top:1em; z-index:5; background-color:white; } .onOpen { width: 30em; height:4em; padding-top:1em; margin:0 auto; } .errorSpan { visibility: visible; color:red; } .errorFeedback { visibility:hidden; }