| Line 1: | Line 1: | 
|  | {{#css: |  | {{#css: | 
|  | + |  | 
|  | + | <!-- Styling for the columns --> | 
|  | .row{ |  | .row{ | 
|  | 	display:flex; |  | 	display:flex; | 
| Line 10: | Line 12: | 
|  |     background-color:#F5F5F5; |  |     background-color:#F5F5F5; | 
|  | } |  | } | 
| − | 
 |  | 
|  | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, |  | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, | 
|  | .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, |  | .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, | 
| Line 23: | Line 24: | 
|  |    padding-left: 15px;   |  |    padding-left: 15px;   | 
|  | } |  | } | 
|  | + |  | 
|  | + | <!-- Mobile UI styling --> | 
|  | @media (max-width: 576px) { |  | @media (max-width: 576px) { | 
|  |    .col-sm-12 { |  |    .col-sm-12 { | 
| Line 28: | Line 31: | 
|  |      max-width: 100%; } |  |      max-width: 100%; } | 
|  |     .section{ |  |     .section{ | 
| − |     padding: 10px 0 20px 0; | + |     padding: 6px 0 20px 0; | 
|  |     } |  |     } | 
|  |     .navContainer{ |  |     .navContainer{ | 
| Line 34: | Line 37: | 
|  |     } |  |     } | 
|  | } |  | } | 
|  | + |  | 
|  | + | <!-- Tablet UI styling --> | 
|  | @media screen and (min-width: 576px) { |  | @media screen and (min-width: 576px) { | 
|  |     .col-md-6 { |  |     .col-md-6 { | 
| Line 43: | Line 48: | 
|  |      max-width: 30%; } |  |      max-width: 30%; } | 
|  |    .section{ |  |    .section{ | 
| − |     padding: 10px 0 20px 20px; | + |     padding: 6px 0 20px 20px; | 
|  |     } |  |     } | 
|  |      .col-md-8{ |  |      .col-md-8{ | 
| Line 50: | Line 55: | 
|  |     } |  |     } | 
|  | } |  | } | 
|  | + |  | 
|  | + | <!-- Desktop UI styling --> | 
|  | @media screen and (min-width: 992px) { |  | @media screen and (min-width: 992px) { | 
|  |    .col-lg { |  |    .col-lg { | 
| Line 71: | Line 78: | 
|  |     } |  |     } | 
|  | } |  | } | 
|  | + |  | 
|  | + | <!-- Font styling --> | 
|  | h1,h2{ |  | h1,h2{ | 
|  |     font-family: 'Helvetica', sans-serif !important; |  |     font-family: 'Helvetica', sans-serif !important; | 
| Line 84: | Line 93: | 
|  |     font-weight: 700; |  |     font-weight: 700; | 
|  | } |  | } | 
| − | .mw-collapsible{
 | + |   | 
| − |    margin-bottom: 5px;
 | + | <!-- Nav Menu Styling --> | 
| − | }
 |  | 
| − | .checkbox{
 |  | 
| − |    display:inline-block;
 |  | 
| − |    width: 1rem;
 |  | 
| − |    height: 1rem !important;
 |  | 
| − |    border: solid 1px black;
 |  | 
| − |    margin-right: 10px;
 |  | 
| − | }
 |  | 
| − | .floatL{
 |  | 
| − |   float:left;
 |  | 
| − | }
 |  | 
|  | .navMenu{ |  | .navMenu{ | 
|  |     list-style:none; |  |     list-style:none; | 
| Line 106: | Line 104: | 
|  |     background-color: #F5F5F5; |  |     background-color: #F5F5F5; | 
|  |     border-bottom: 5px solid #AF3C43; |  |     border-bottom: 5px solid #AF3C43; | 
| − |    padding-bottom: 0 !important;
 |  | 
|  | } |  | } | 
|  | .navContainer::-webkit-scrollbar, .tabContainer::-webkit-scrollbar{ |  | .navContainer::-webkit-scrollbar, .tabContainer::-webkit-scrollbar{ | 
| Line 117: | Line 114: | 
|  |     padding-bottom:0px !important; |  |     padding-bottom:0px !important; | 
|  | } |  | } | 
| − | 
 |  | 
|  | .navMenu li{ |  | .navMenu li{ | 
|  |     border: solid 1px #002D42; |  |     border: solid 1px #002D42; | 
| Line 138: | Line 134: | 
|  |    color: white !important; |  |    color: white !important; | 
|  |     text-decoration:none; |  |     text-decoration:none; | 
| − | }
 |  | 
| − | .mw-parser-output .external{
 |  | 
| − |    background:none;
 |  | 
| − |    padding-right:0;
 |  | 
|  | } |  | } | 
|  | .primary-btn{ |  | .primary-btn{ | 
| Line 159: | Line 151: | 
|  |    color: black !important; |  |    color: black !important; | 
|  | } |  | } | 
|  | + |  | 
|  | + | <!-- Checklist styling --> | 
|  | .checklistCont{ |  | .checklistCont{ | 
|  |    border: 1px solid black; |  |    border: 1px solid black; | 
| − |    padding: 1.5rem 0 1.5rem 0; | + |    margin: 1.5rem 0 1.5rem 0; | 
|  |    border-radius: 10px; |  |    border-radius: 10px; | 
|  | + | } | 
|  | + | .mw-parser-output .external{ | 
|  | + |    background:none; | 
|  | + |    padding-right:0; | 
|  | + | } | 
|  | + | .mw-collapsible{ | 
|  | + |    margin-bottom: 5px; | 
|  | + | } | 
|  | + | .checkbox{ | 
|  | + |    display:inline-block; | 
|  | + |    width: 1rem; | 
|  | + |    height: 1rem !important; | 
|  | + |    border: solid 1px black; | 
|  | + |    margin-right: 10px; | 
|  | } |  | } | 
|  | .card { |  | .card { | 
| Line 176: | Line 184: | 
|  |    flex: 1 1 auto; |  |    flex: 1 1 auto; | 
|  |    padding: 12px; } |  |    padding: 12px; } | 
|  | + |  | 
|  | + | <!-- Back to top Button styling --> | 
|  | .btn-backtotop { |  | .btn-backtotop { | 
|  |    border: 1px solid #CECECE; |  |    border: 1px solid #CECECE; | 
| Line 191: | Line 201: | 
|  |    color: white; |  |    color: white; | 
|  |    text-decoration: none; |  |    text-decoration: none; | 
|  | + | } | 
|  | + | .fixed{ | 
|  | + |   position:fixed; | 
|  | + |   bottom:5px; | 
|  | + |   right:5px; | 
|  | + | } | 
|  | + | .arrow { | 
|  | + |   border: solid black; | 
|  | + |   border-width: 0 3px 3px 0; | 
|  | + |   display: inline-block; | 
|  | + |   padding: 3px; | 
|  | + | } | 
|  | + | .up { | 
|  | + |   transform: rotate(-135deg); | 
|  | + |   -webkit-transform: rotate(-135deg); | 
|  | } |  | } | 
|  |  |  |  | 
|  | + | <!-- More Button styling --> | 
|  | .btn { |  | .btn { | 
|  |    display: inline-block; |  |    display: inline-block; | 
| Line 222: | Line 248: | 
|  |      border-color: #F5F5F5;   |  |      border-color: #F5F5F5;   | 
|  |      margin-bottom: 12px; |  |      margin-bottom: 12px; | 
| − | }
 |  | 
| − | .fixed{
 |  | 
| − |   position:fixed;
 |  | 
| − |   bottom:5px;
 |  | 
| − |   right:5px;
 |  | 
| − | }
 |  | 
| − | .arrow {
 |  | 
| − |   border: solid black;
 |  | 
| − |   border-width: 0 3px 3px 0;
 |  | 
| − |   display: inline-block;
 |  | 
| − |   padding: 3px;
 |  | 
| − | }
 |  | 
| − | .up {
 |  | 
| − |   transform: rotate(-135deg);
 |  | 
| − |   -webkit-transform: rotate(-135deg);
 |  | 
|  | } |  | } | 
|  | }} |  | }} |