In the screenstyles.css file, create a media query for a tablet viewport and use min-width: 481px.

7. Add the following style rules to the tablet media query and include comments for each.

img {

width: 80%;

}

nav li {

display: inline;

float: left;

margin-left: 1%;

margin-right: 1%;

padding-left: 0;

padding-right: 0;

width: 18%;

}

main {

clear: left;

}

.mobile {

display: none;

}

.desktop {

display: inline;

}

8. In the screenstyles.css file, create a media query for a desktop viewport and use min-width: 769px.

9. Add the following styles to the desktop media query and include comments for each.

#container {

width: 80%;

}

img {

width: 60%;

}

nav ul {

margin: 0;

padding-left: 0.50%;

padding-right: 0.50%;

}

nav li {

border-radius: 0;

margin-left: 0;

margin-right: 0;

padding: 0;

width: 20%;

white-space: nowrap;

}

nav li a {

display: inline-block;

padding: 0.7em;

font-size: 1.25em;

}

main {

border: none;

border-radius: 1em;

box-shadow: 1em 1em 1em #331400;

margin-top: 1em;

}

10. In the screenstyles.css file, add the following pseudo-classes:

nav li a:link {

color: #FFFFFF;

}

nav li a:hover {

color: #CCFFCC;

font-size: 1.5em;

}

11. In the screenstyles.css file, add a style rule to the desktop viewport to apply the following linear gradient to the background. Insert additional properties and values required to accommodate all major browsers. Include comments for all.

background: linear-gradient(#FFFFFF, #3366CC);

12. In the screenstyles.css file, add a style rule to hide the desktop class for the mobile layout and include a comment.

Update the source code below:

/* Style sheet created by: name*/

/* Style for body specifies a background color */ body { background-color: #3366CC; }

img { max-width: 80%; }

/* Styles for Mobile Layout */

/* Style for the container centers the page and specifies the width */ #container { width: 100%; margin-left: auto; margin-right: auto; }

/* Style for the header specifies top margin, background color, rounded corners, and center align content */ header { font-family: Verdana, Arial, serif; font-size: 2em; margin-top: 0.2em; margin-bottom: 0.3em; text-align: center; padding: 0.2em; color: #000066; }

#banner { text-align: center; }

/* Style for nav specifies text properties */ nav { font-family: Lucida, "Times New Roman", serif; font-size: 1em; font-weight: bold; text-align: center; }

/* Style specifies padding and margins for unordered list */ nav ul { padding: 0; margin-top: 0.5em; margin-bottom: 0.5em; }

/* Style for nav li specifies the background color, rounded corners, removes bullet style, and applies margins and padding for list items within the navigation */ nav li { background-color: #000066; list-style-type: none; margin: 0.4em; padding: 0.5em; }

/* Style changes navigation link text color to white and removes the underline */ nav li a { color: #FFFFFF; text-decoration: none; }

/* Style for the main specifies a block display, text properties, margins, padding, rounded corners, and borders */ main { display: block; font-family: Georgia, "Times New Roman", sans-serif; font-size: 1em; margin-top: 0.5em; padding: 0.5em; border-radius: 1em; background-color: #FFFFFF; }

/* Style for the footer specifies font size, text alignment, and top margin */ footer { font-size: .70em; text-align: center; margin-top: 2em; }

/* Style displays the mobile class */ .mobile { display: inline; }