/* tedfelix.com CSS */ /* TODO - Move classes to elements. E.g. make the "code" class style the style for the

 element.  We'll need to make sure this doesn't
    break anything in each page that uses main.css.  Perhaps come
    up with a gradual approach to introducing this.  E.g. use a
    main2.css and then bring that into each page and test/modify.
    Then get rid of main.css.
*/

body {
  /* This looks good on a cellphone, but bad on a desktop.
     For the desktop the left/right margins need to be bigger. */
  margin: 20px 20px;
}

/* Why not make this the  style? */
.body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
}

/* Make links look like Google. */
a:visited {
  color: #609;
  text-decoration: none;
}
a:link {
  color: #1a0dab;
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

img {
  /* On mobile browsers, shrink images as needed. */
  max-width: 100%;
}

footer {
	font-size: small;
	font-style: italic;
}

code {
  background-color: #E0E0E0;
}

/* Why not make this the 
 style? */
.code {
  font-family: "Courier New", Courier, monospace;
  /* Make it act like 
 */
  white-space: pre;
  outline-style: solid;
  outline-color: lightgray;
  /* Only show a horizontal scrollbar when needed. */
  overflow-x: auto;
  padding: 10px;
}

/* My first attempt at a button link.  This is pretty bad. */
/*
a.large {
    font-size: 25px;
    text-decoration: none;
    color: black;
    padding: 5px 15px 5px 15px;
}

a.large:link {
    background-color: LightGray;
}

a.large:visited {
    background-color: LightGray;
}

a.large:hover {
    background-color: GhostWhite;
}

a.large:active {
    background-color: GhostWhite;
}
*/

/*
.topbanner {
	white-space: nowrap;
}
*/

/*
.navbar {
	white-space: nowrap;
}
*/

/* Why not make this the h1 style? */
.header-1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 50px;
    margin: 5px 0px 5px 0px;
}

/* Why not make this the h2 style? */
.header-2 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 40px;
    margin: 5px 0px 5px 0px;
}

.content-box {
    background-color: #eee;
    margin: 10px 0px 10px 0px;
    padding: 10px 30px 10px 30px;
}

a.button {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #777;
    border: 1px solid black;
    border-radius: 10px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
}

a.button:hover {
    background-color: #555;
}

/* Click */
a.button:active {
    background-color: #aaa;
}

.menu-item {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 15px;
    text-decoration: none;
    color: black;
    /* This lets you expand the space between lines when using 
. */
    line-height: 1.4;
}

/*
.menu-item:link {
    color: black;
}

.menu-item:visited {
    color: black;
}
*/

.menu-item:hover {
    color: blue;
}

.menu-item:active {
    color: blue;
}

/* Finally...  The byline immediately under the title. */

.article-title {
    /* We want the byline immediately under the title. */
    margin-bottom: 0;

}

.article-byline {
    /* We want the byline immediately under the title. */
    margin-top: 0;
    font-size: 90%;
}

.article-date {
    margin-left: 10px;
    color: #aaa;
}