.main { margin:10px; padding:4px; display:grid; grid-template-columns: 50% 50% ; gap:4px; grid-template-rows: 48px 64px auto 32px; font-family: sans-serif; font-weight: lighter; font-size:18px; line-height: 1.5; justify-items: normal; ; } .main .header { grid-row:1; grid-column: 1 / span 2; display:grid; grid-template-columns: 50px auto; gap:4px; line-height: 1; } .main .header .title {font-size:28px; text-transform: capitalize; font-weight:bold} .main .header .subtitle {font-size:14px} .main .header img { width:44px; height:44px;} .main .menu { grid-row:2; grid-column: 1 / span 2; background-color: #FFFFFF; display:grid; grid-template-columns: 75px repeat(3,250px) ; gap:4px; align-items: left; border:0px; padding:4px; border-bottom:3px dotted darkgray; } .main .menu img { width:28px; height:28px;} .main .menu .icon .button { border:1px solid #CAD5E0; border-radius:4px; padding:4px; background-color:#f3f3f3; height:100%; ; } .main .content { grid-row:3; grid-column: 1 ; text-wrap: wrap; height:100%; display:grid; align-content: start; } .main .content #index { text-align: left; text-wrap: wrap; } /* .main .content #index{ text-align:left; align-content:normal; display:grid; background-color: green; } */ .main .pane { border-left:3px dotted gray; grid-column: 2; font-family: sans-serif; padding-left: 10px; } .pane iframe { border:1px solid transparent; width:99%; height:100%; } .main .footer {grid-row:4; grid-column: 1 / span 2; font-size:13px; font-weight: lighter;} blockquote { border-left:8px solid GRAY;margin-right:8px} blockquote .code {padding:10px; font-size:16px; font-family: courier; background-color:black; color: #d3d3d3} /** * styling tables here */ p { margin-top:22px; } table { width:99%; border: 1px solid #CAD5E0; } table td {padding:4px; margin:4px;} table thead { font-weight:bold; background-color:#f3f3f3; } /* table tbody tr:hover { background-color: #4682B4; color:white ; cursor:pointer; } */ #gallery img { justify-content: left; width:70px; } #gallery table {width:100%;}