/* Select All Elements */ *, *::before, *::after { /* Set box-sizing to `border-box` - Padding and Border count as part of the Width */ box-sizing: border-box; } /* Select the Element */ body { /* Remove the margin */ margin: 0; } /* Select Elements with any Class containing "col-" */ /* This is for Columns when the Screen is the Size of a Small- to Regular-Sized Mobile Device */ [class*="col-"] { /* Set width to fill the parent element */ width: 100%; /* Set the floating position to the left of the screen */ float: left; /* Remove the padding from the element */ padding: 0px; /* Give the grid items a transparent border to show their positions, like an uneven table */ border: 1px solid transparent; } /* Select any Element that is the child of an Element with both the .row Class and the .finished Class, and that has any Class containing "col-" */ .row.finished [class*="col-"] { /* Remove the border */ border: 0px none transparent; } /* Select any Element with the .header Class */ .header { /* Pad the header `30px` on the top and bottom and `50px` on the sides */ padding: 30px 50px; } /* Select any Element with the .sidebar Class */ .sidebar { /* Set the font-size to be larger */ font-size: 18pt; /* Remove bullet points if it's a list */ list-style-type: none; /* Set width to fill the parent element */ width: 100%; /* Pad the sidebar `15px` on the top and bottom and `0px` on the sides */ padding: 15px 0px; /* Remove the margin from the sidebar */ margin: 0; } /* Select any

Elements in a Parent Element with the .sidebar Class */ .sidebar li { /* Pad the items `5px` on the top and bottom and `20px` on the sides */ padding: 5px 20px; /* Set the cursor to be a pointer when hovering */ cursor: pointer; } /* Select any Element with the .content Class */ .content { /* Pad the content `20px` on the top and bottom and `90px` on the sides */ padding: 20px 10%; } /* Select any specified Elements when the Screen Width is at least `600px` */ /* This is for Portrait Tablet and Large Phone Screen Sizes */ @media only screen and (min-width: 600px) { /* Columns are split into 12ths of the Viewport's Width */ .col-s-0 { width: 0%; } .col-s-1 { width: 8.33%; } .col-s-2 { width: 16.66%; } .col-s-3 { width: 25.00%; } .col-s-4 { width: 33.33%; } .col-s-5 { width: 41.66%; } .col-s-6 { width: 50.00%; } .col-s-7 { width: 58.33%; } .col-s-8 { width: 66.66%; } .col-s-9 { width: 75.00%; } .col-s-10 { width: 83.33%; } .col-s-11 { width: 91.66%; } .col-s-12 { width: 100.00%; } } /* Select any specified Elements when the Screen Width is at least `768px` */ /* This is for Landscape Tablet Screen Sizes */ @media only screen and (min-width: 768px) { .col-m-0 { width: 0%; } .col-m-1 { width: 8.33%; } .col-m-2 { width: 16.66%; } .col-m-3 { width: 25.00%; } .col-m-4 { width: 33.33%; } .col-m-5 { width: 41.66%; } .col-m-6 { width: 50.00%; } .col-m-7 { width: 58.33%; } .col-m-8 { width: 66.66%; } .col-m-9 { width: 75.00%; } .col-m-10 { width: 83.33%; } .col-m-11 { width: 91.66%; } .col-m-12 { width: 100.00%; } .sidebar { /* Set the height to be the same as the Viewport Height */ height: 100vh; } } /* Select any specified Elements when the Screen Width is at least `992px` */ /* This is for Laptop, Desktop and other Large Screen Sizes */ @media only screen and (min-width: 992px) { .col-0 { width: 0%; } .col-1 { width: 8.33%; } .col-2 { width: 16.66%; } .col-3 { width: 25.00%; } .col-4 { width: 33.33%; } .col-5 { width: 41.66%; } .col-6 { width: 50.00%; } .col-7 { width: 58.33%; } .col-8 { width: 66.66%; } .col-9 { width: 75.00%; } .col-10 { width: 83.33%; } .col-11 { width: 91.66%; } .col-12 { width: 100.00%; } } /* The above Media Queries are separated for the sake of giving the HTML file the capacity for specify different Widths for Tablet Screens to the Widths specified for Larger Screens. */ /* Select