ms_layout.css

@charset "utf-8";
/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 1
   Case Problem 2
   Filename: ms_layout.css
   This file contains the layout styles used at Math Strings
*/

/* =============================================
	Base layout styles used by mobile devices
	up to 480px and cascaded to larger devices 
	unless superceded by other styles.
   =============================================
*/

html {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: white;
}

body {
  margin: 0px auto auto auto;
  width: 100%;
  min-width: 320px;
  background-color: white;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana,
    sans-serif;
  font-size: 16px;
}

body header {
  width: 100%;
  height: 50px;
  overflow: hidden;
}

body header img {
  width: 100%;
}

nav h1 {
  font-size: 0.9em;
  text-align: center;
  border-top: 1px solid rgb(151, 151, 151);
  width: 75%;
  margin: auto;
}

nav ul {
  font-size: 0.85em;
}

nav ul li {
  text-align: center;
}

nav ul li a,
nav ul li a:visited {
  color: #505050;
  text-decoration: none;
}

nav ul li a:hover,
nav ul li a:active {
  text-decoration: underline;
  color: black;
}

article,
aside {
  width: 92%;
  margin: 0 4%;
}

article h1,
aside h1,
nav h1 {
  font-size: 1.1em;
  margin-bottom: 3px;
}

article img {
  width: 100%;
}

article p,
aside p {
  font-size: 0.85em;
}

code {
  display: block;
  font-size: 0.9em;
  font-family: Baskerville, "Palatino Linotype", Palatino,
    "Century Schoolbook L", "Times New Roman", serif;
  text-indent: 10px;
}

var {
  font-family: Baskerville, "Palatino Linotype", Palatino,
    "Century Schoolbook L", "Times New Roman", serif;
}

footer {
  clear: both;
  font-size: 0.9em;
  color: white;
  background-color: #383838;
  text-align: center;
  padding: 5px 0px;
  border-top: 2px solid #282828;
  margin-top: 30px;
}

/* =============================================
	Tablet layout styles used by devices
	481px to 768px and cascaded to larger 
	devices.
   =============================================
*/

@media only screen and (min-width: 481px) {
  body {
    font-size: 18px;
    min-height: 100%;
  }

  body header {
    width: 100%;
    height: auto;
    overflow: auto;
  }

  nav,
  aside {
    width: 34%;
    float: left;
    margin: 0px 2% 0px 4%;
  }

  article {
    float: left;
    width: 58%;
    margin: 0px 0px 30px 2%;
  }

  article p {
    font-size: 1em;
  }

  article h1 {
    font-size: 1.3em;
    margin-bottom: 0px;
  }

  aside h1 {
    font-size: 1em;
  }

  aside p {
    font-size: 0.95em;
  }

  aside code {
    font-size: 1.1em;
    background-color: rgb(231, 231, 231);
  }

  nav {
    background-color: #c0c0c0;
  }

  nav h1 {
    font-size: 1em;
    text-align: left;
    border-top: none;
    margin: 5px;
  }

  nav ul {
    font-size: 0.9em;
  }

  nav ul li {
    text-align: left;
    margin: 10px 10px;
  }
}

/* =============================================
	Desktop layout styles used by  devices
	769px and larger.
   =============================================
*/

@media only screen and (min-width: 769px) {
  html {
    background-color: #828282;
  }

  body {
    width: 90%;
    max-width: 1020px;
    -moz-box-shadow: rgba(61, 61, 61, 0.9) 20px 0px 25px,
      rgba(61, 61, 61, 0.9) -20px 0px 25px;
    -webkit-box-shadow: rgba(61, 61, 61, 0.9) 20px 0px 25px,
      rgba(61, 61, 61, 0.9) -20px 0px 25px;
    box-shadow: rgba(61, 61, 61, 0.9) 20px 0px 25px,
      rgba(61, 61, 61, 0.9) -20px 0px 25px;
  }
}