body { margin: 0.7em; box-sizing: border-box; display: grid; grid-template-columns: 1fr 6fr; grid-template-rows: 5em 100%; grid-gap: 20px; font-family: Georgia, Garamond, serif; font-style: normal; } #header { grid-column: 1/3; width: 100%; /* background: cyan; */ padding-top: 0.5em; border-radius: 0.5em; background-color: #336699; border-color: #080808; color: #FFFFFF; background-image: none; } #header .header { font-size: 2em; display: inline-block; text-align: start; } #header .header-nav { display: inline-block; color: #FFFFFF; } #header .header-nav li { border-width: 1px; border-color: #FFFFFF; vertical-align: middle; margin: 0.2em; border-style: solid; border-width: 2px; border-radius: 0.5em; text-align: center; } #header .header-nav a { color: #FFFFFF; text-decoration: none; } #nav-sidebar { grid-column: 1/2; /* background: #e5e5ff; */ padding-top: 0.5em; border-radius: 0.5em; font-size: 1.2em; } #main { grid-column: 2/3; width: 100%; /* background: gray; */ border-radius: 0.5em; } .pagetitle { padding-top: 0.5em; /* background: pink; */ border-radius: 0.5em; /* background-color: #6699CC; */ /* background-color: #77AADD; */ background-color: #88BBEE; } .pagetitle h1 { text-align: start; text-transform: capitalize; padding-left: 0.25em; } .pagetitle .breadcrumb { background: none; } .pagetitle .breadcrumb .active a { color: #333333; } .pagetitle .breadcrumb a { color: #666666; } .main-content { font-size: 1.275em; } .breadcrumb { text-transform: capitalize; } dd { margin-left: 3em; font-size: 0.88em; padding-bottom: 1em; } input[type="submit"], .btn { text-transform: capitalize; } .card { margin-top: 0.3em; border-width: 1px; border-style: solid; border-radius: 0.3em; border-color: #AAAAAA; padding: 0.5em; } .activemenu { border-style: solid; border-radius: 0.5em; border-color: #AAAAAA; background-color: #EFEFEF; } .danger { color: #A94442; border-color: #DCA7A7; background-color: #F2DEDE; }