and

elements element element div p selects all

elements inside

elements :link a:link slects all unvisited link :visited a:visited selects all visited links :active a:active selects all active link Use clear Both to fit div below div */ /*------------------------------------------------------------------------------ PAGE BODY ------------------------------------------------------------------------------*/ html { background-color: #CCCCCC; height: 100%; width: 99%; margin: auto; overflow: hidden; /* Hides scrollbar in IE */ font-family: Verdana,Arial,sans-serif ; font-size: 14px; } body { width: 100%; height: 100%; font-family: Verdana,Arial,sans-serif ; font-size: 100%; line-height: normal; margin: auto; } form { width: 100%; height: 100%; overflow: auto; margin: auto; border: 1px solid black; background-color:gainsboro; font-size: 100%; } /* This is the header bar */ #header { clear: both; width: 100%; height: 11%; margin: auto; background-color:#980000; } /* This is the footer bar */ #footer { clear: both; height: 3%; margin: auto; background-color: gainsboro; border-top: 1px solid black; } /*------------------------------------------------------------------------------ GENERAL LAYOUT ------------------------------------------------------------------------------*/ /* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { width: 100%; } } .column { float: left; } .left { width: 33.33%; } .right { width: 33.33%; } .middle { width: 33.33%; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } div.topbox, div.bottombox { margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; } div.leftbox { width: 20%; float: left; /*background-color: #CCCC9A;*/ background-color:gainsboro; border-right: 1px solid black; overflow: auto; } div.rightbox { width: 79.0%; float: left; background-color:white; } div.leftbox, div.rightbox { margin-top: 0; margin-bottom: 0; overflow: auto; } div.topbox { float: left; vertical-align: top; overflow: auto; clear: both; width: 100%; } div.bottombox { clear: both; overflow: auto; float: left; vertical-align: top; width: 100%; } div.gap { width: 100%; height: 15px; clear: both; float: left; } #divViewer { clear: both; } .viewer { margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; height: auto; width: 100%; } .hide /*Selects all elements with class=hide*/ { display: none; } .gridHyperLink { text-decoration: underline; } tr.header td { border-top: 1px solid black; border-bottom: 1px solid black; background: #FFFFFF; /*font-family: Arial, Verdana, sans-serif;*/ font-weight: bold; } .disabledbutton { cursor: not-allowed; /*font-family: Arial,sans-serif, Verdana;*/ font-weight: normal; background-color: lightgray; color: red; border: 1px solid lightgray; /* css3 implementation :) */ /* rounded corner */ border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .btnNav { background-color:yellow; /*background-color: gainsboro;*/ border: 1px solid black; color: black; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; /*min-height: 24px;*/ line-height: 1.5; vertical-align: middle; font-size: 100%; font-weight:bold; } .btnNav:hover, .btnNav:focus, .btnNav:active { background-color: black; border: 1px solid white; color: white; cursor: pointer; } .btnNav:disabled { background: #ccc; color: red; cursor: not-allowed; } .btn { border: 1px solid Black; background-color: #768d87; background-color: gainsboro; color: black; line-height: 1.5; /*min-height: 24px;*/ vertical-align: middle; /* css3 implementation :) */ /* rounded corner */ border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 100%; } .btn:hover, .btn:focus, .btn:active { background-color: black; border: 1px solid white; color: white; cursor: pointer; } .btn:disabled { background: #ccc; color: red; cursor: not-allowed; } .btnExit { text-overflow: initial; white-space: normal; text-wrap: normal; /*background-color: #8b181b;*/ background-color: rgb(202,60,60); border: 1px solid black; color: white; border-radius: 3px; -webkit-border-radius: 3px; /*min-height: 24px;*/ line-height: 1.5; margin-bottom: 0px; vertical-align: middle; font-size: 100%; } .btnExit:hover, .btnExit:focus, .btnExit:active { background-color: black; border: 1px solid white; color: white; cursor: pointer; } .btnWrap { text-overflow: initial; cursor: pointer; white-space: normal; text-wrap: normal; background-color: #768d87; background-color: gainsboro; border: 1px solid Black; color: black; /*min-height: 24px;*/ line-height: 1.5; vertical-align: middle; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 100%; } .btnWrap:hover, .btnWrap:focus, .btnWrap:active { background-color: black; border: 1px solid white; color: white; cursor: pointer; } .btnWrap:disabled { background: #ccc; color: red; cursor: not-allowed; } .btnHelp { text-overflow: initial; cursor: pointer; white-space: normal; text-wrap: normal; background-color: #E7B947; border: 1px solid black; border-radius: 3px; -webkit-border-radius: 3px; color: black; /*min-height: 24px;*/ line-height: 1.5; vertical-align: middle; font-size: 100%; } .btnHelp:hover, btnhelp:focus, btnhelp:active { background-color: black; border: 1px solid white; color: white; cursor: pointer; vertical-align: middle; } .txtBxCenter { text-align: center; border: 1px solid gainsboro; background-color: lightyellow; min-height: 20px; font-size: 100%; } .txtBxCenter:focus { background-color: #333333; color: white; } .txtBx { border: 1px solid rgb(128,128,128); /*background-color: lightyellow;*/ background-color: White; /*min-height: 20px;*/ font-size: 100%; } .txtBx:focus { background-color: #333333; color: white; } .txtBxReadOnly { border: 1px solid rgb(128,128,128); background-color: White; /*min-height: 20px;*/ color: red; cursor: not-allowed; font-size: 100%; } .ddl { border: 1px solid rgb(128,128,128); background-color: white; min-width: 100px; /*min-height: 20px;*/ vertical-align: middle; font-size: 100%; } .ddl:focus { background-color: #333333; background-color:lightgray; color: white; color:black; } .ddlBold { border: 1px solid rgb(128,128,128); background-color: lightyellow; font-weight: bold; min-width: 100px; vertical-align: middle; /*min-height: 20px;*/ font-size: 100%; } .lblBorderCenter { border: 1px solid rgb(128,128,128); text-align: center; /*min-height: 20px;*/ font-size: 100%; } .lblMedium { /*font-size: 1.0em;*/ font-size: 125%; /*min-height: 20px;*/ } .lblBold { font-weight: bold; /*min-height: 20px;*/ font-size: 100%; } .lblBoldCenter { font-weight: bold; text-align: center; /*min-height: 20px;*/ } .lblBorder { text-align: left; margin-top: 5px; margin-bottom: 5px; /*min-height: 20px;*/ font-size: 100%; } .lbl { margin: auto; /*min-height: 20px;*/ font-size: 100%; } .lblRight { text-align: right; display: block; /*min-height: 20px;*/ font-size: 100%; } .pnl { display: block; } .chk { background-color: white; font-size: 100%; } .chkBold { font-weight: bold; background-color: white; font-size: 100%; } .lst { background-color: white; font-size: 100%; } .lst:focus { background-color: #333333; color: white; } .chkBoxList { vertical-align: top; display: block; background-color: lightyellow; border: 1px solid rgb(128,128,128); } .rbList { vertical-align: top; display: block; background-color: lightyellow; border: 1px solid rgb(128,128,128); font-size: 100%; } .mGrid { margin: 0 auto; border-collapse: collapse; font-size: 100%; } .mGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #000000; } .HeaderStyle { padding: 4px 2px; color: #fff; background: #424242; } .ReportHeaderStyle { padding: 4px 2px; color: #000; background: #DEDFDE; } .AlternatingRowStyle { background-color: #E3E8E4; /*background-color:#C2D69B;*/ color: #333333; border: thin; vertical-align: middle; } .RowStyle { /*background-color: #E0E0E0;*/ background-color: #FAF5F9; color: #333333; border: thin; vertical-align: middle; } .ControlStyle { color: #5D7B9D; } .objViewer { width: 100%; height: 100%; } .modalPopup { background-color: #F2FAA0; background-color: lightyellow; border-width: 1px; border-style: solid; border-color: black; padding-top: 10px; padding-left: 2px; } .modal { position: fixed; top: 0; left: 0; background-color: gainsboro; z-index: 99; opacity: 0.75; filter: alpha(opacity=75); -moz-opacity: 0.75; min-height: 100%; width: 100%; } .loading { font-weight: bold; border: 1px solid black; border-radius: 5px; width: 200px; height: 100px; display: none; position: fixed; background-color: white; background-color: lightyellow; z-index: 999; margin-top: 0; text-align: center; } /* HELP */ .pic { color: #000000; outline: none; text-decoration: none; position: relative; } .pic span { margin-left: -999em; position: absolute; } .pic:hover span { border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-decoration: none; position: absolute; left: 1em; top: 1em; z-index: 99; margin-left: 0; } /*.pic:hover img {*/ /*border: 0; margin: -10px 0 0 -40px;*/ /*text position from image*/ /*float: left;*/ /*position: absolute;*/ /*}*/ .pic:hover em { /*font-size: 1.2em;*/ font-size: 150%; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; } .classic { padding: 0.9em 1em; } .custom { padding: 0.5em 0.75em 0.75em 2em; } .classic { background: #FFFFAA; border: 1px solid #FFAD33; } .critical { background: #FFCCAA; border: 1px solid #FF3334; } .help { background: #9FDAEE; border: 1px solid #2BB0D7; } .info { background: #9FDAEE; border: 1px solid #2BB0D7; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); width: 200px; text-wrap: normal; } .warning { background: #FFFFAA; border: 1px solid #FFAD33; } /*------------------------- Inline help tip --------------------------*/ /*.help-tip{ position: absolute; top: 18px; right: 18px; text-align: center; background-color: #BCDBEA; border-radius: 50%; width: 24px; height: 24px; font-size: 14px; line-height: 26px; cursor: default; } .help-tip:before{ content:'?'; font-weight: bold; color:#fff; } .help-tip:hover p{ display:block; transform-origin: 100% 0%; -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } .help-tip p{ display: none; text-align: left; background-color: #1E2021; padding: 20px; width: 300px; position: absolute; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); right: -4px; color: #FFF; font-size: 13px; line-height: 1.4; } .help-tip p:before{ position: absolute; content: ''; width:0; height: 0; border:6px solid transparent; border-bottom-color:#1E2021; right:10px; top:-12px; } .help-tip p:after{ width:100%; height:40px; content:''; position: absolute; top:-40px; left:0; } @-webkit-keyframes fadeIn { 0% { opacity:0; transform: scale(0.6); } 100% { opacity:100%; transform: scale(1); } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:100%; } }*/ /*.gvControlStyle { color: #333333; font-size: 90%; padding: 5px; }*/ /*CSS for enlarged image*/ /*.pic span{ position:absolute; background-color: white; padding: 5px; border: 1px solid gray; visibility: hidden; text-decoration: none; }*/ /*.pic:hover span{ visibility: visible; z-index: 50; right:0px; left: 120px; }*/ /* TABS */ /*------------------------------------------------------------------------------ NAVIGATION Styles for navigation lists. Markup should be formed so that nested ULs are contained in their parent LI element. ------------------------------------------------------------------------------*/ ul.nav { margin: 0; padding: 0; font-size: 100%; font-weight: normal; line-height: normal; background: url("../images/menu-back8.gif") repeat-y 0 0; } ul.nav li { display: inline; margin: 0; padding: 0; list-style: none; } ul.nav li a { display: block; padding: 5px 12px 4px 54px; border-top: 1px solid #d1d1d1; /*border-bottom: 1px solid #990000;*/ border-left: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; } ul.nav a:link, ul.nav a:visited { text-decoration: none; color: #000; } ul.nav a:hover { background-color: #fff; } /* parent classes define which indicator image is shown */ /* for non-parent links that are on */ ul.nav li a.on { background-color: #fff; } /* for parent links not open/on */ ul.nav li a.active { /*background-color: #FF0;*/ font-weight: bold; } ul.nav li a.parent { font-weight: bold; } ul.nav li a.parent:hover{ font-weight: bold; background-color: #fff; } /* for parent links that have a child element with on state */ ul.nav li a.parent-open { background: url("~/images/arrow.gif") no-repeat 7px 6px; font-weight: bold; } ul.nav li a.parent-open:hover { background: url("~/images/arrow.gif") no-repeat 7px 6px; font-weight: bold; background-color: #fff; } /* for parent links that are on */ ul.nav li a.parent-on { } ul.nav ul.nav { margin: 0; border: 0; } ul.nav ul.nav li a { padding-left: 36px; background-position: 25px 50%; } ul.nav ul.nav ul.nav li a { padding-left: 48px; background-position: 37px 50%; } /* Rounded corners at gridview .rounded_corners { border: 1px solid #A1DCF2; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; overflow: hidden; } .rounded_corners td, .rounded_corners th { border: 1px solid #A1DCF2; font-family: Arial; font-size: 10pt; text-align: center; } .rounded_corners table table td { border-style: none; } *************/ .lt-nav-tbl { width: 100%; border:none; border-collapse:collapse; border-spacing:10px; } .ltnavdiv { border-bottom: #005F29 thin solid; border-top: #005F29 thin solid; } .ltnavlink { CURSOR: pointer; COLOR:black; FONT-FAMILY:Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none } .ltnavlink:hover { FONT-WEIGHT: bold; font-size: 100%; COLOR: #005F29;LINE-HEIGHT: 15px; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none } .lt-lbl-tbl { width: 100%; border:none; border-collapse:collapse; border-spacing:10px; } .ltlbldiv { height:25px; border-bottom: 1px solid #d1d1d1; }