/*
 * CSS style sheet for AFNOG Workshop
 */

body {
    color: black;
    background-color: white;
    font-family: Helvetica, Arial, sans-serif;
}

/*
 * Lazy people can change nonstandard <foo align="center"> to
 * standard <foo class="center"> (assuming that foo is a valid
 * element name).
 */
.center { text-align: center; }

/*
 * <img class="floatright"> makes a right-aligned image with text free
 * to flow around it.  This is like <img align="right" border="0">,
 * but we also add padding and a margin, to prevent the text from
 * bumping into the image, and we set a maximum width.
 */
.floatright {
    float: right;
    clear: both;
    margin: 0;
    border: 0;
    padding: 15px 10px 15px 20px; /* top, right, bottom, left */
    max-width: 49%;
}
/* Special case for img inside div.floatright, whether or not the
 * img has class=floatright:  float the div, but do not float the img.
 * The expected use case is to have multiple images inside a single div,
 * with a small vertical space separating the images.
 */
div.floatright > img.floatright,
div.floatright > img {
    float: none;
    clear: both;
    margin: 5px 0; /* top and bottom only, not left and right */
    border: 0;
    padding: 0;
    max-width: 100%;
}

/*
 * Logo in top right near header.
 */
.topheader-logo {
    float: right;
    padding: 0;
    border: 0;
    margin: 20px;
}

/*
 * <div class="arrowlinks"> is for links at the top of a page, saying
 * stuff like "AFNOG > Workshop > 2004 > Track > Topic".
 */
.arrowlinks {
    text-align: left;
    font-size: small; /* absolute size */
}
/* do not display in printed version */
@media print {
    .arrowlinks {
	display: none;
    }
}

/*
 * <div class="sectionjumps"> is used for links at the
 * top of a page like "[ Jump within this page: A | B | C ]"
 */
.sectionjumps {
    font-size: small;
    text-align: center;
}
/* do not display in printed version */
@media print {
    .sectionjumps {
	display: none;
    }
}

/*
 * <div class="bottomlinks"> is for links at the bottom of a page, saying
 * stuff like "Return to AFNOG Workshop Main Page".
 */
.bottomlinks {
    text-align: center;
    font-size: medium; /* absolute size */
}
/* do not display in printed version */
@media print {
    .bottomlinks {
	display: none;
    }
}

/*
 * <div class="bottombuttons"> is for buttons at the bottom of a page, saying
 * stuff like "Valid HTML", Valid CSS", "Best viewed with any browser".
 */
.bottombuttons {
    text-align: center;
    font-size: medium; /* absolute size */
}
/* do not display in printed version */
@media print {
    .bottombuttons {
	display: none;
    }
}

/*
 * <div class="copyright"> is used for copyright notices.
 */
.copyright {
    font-size: medium;
    font-weight: bold;
}

/*
 * We want to centre <h1> and left-alight <h2>, <h3>, etc.
 */
h1 { text-align: center; }
h2, h3, h4, h5, h6 { text-align: left; }

/*
 * The really important top level headers are marked with
 * <h1 class="topheader">.
 *
 * Sometimes there are some less-important headers above them, to set
 * the context.  These are marked with <h1 class="topcontext">.
 *
 * Sometimes there are some less-important subheaders below them,
 * which we nevertheless want to mark with <h1> rather than <h2>.
 * These are marked with <h1 class="topsubhead">.
 *
 * We render the "topcontext" and "topsubhead" in a smaller font
 * than we use for "topheader".
 */
h1.topcontext, h1.topheader, h1.topsubhead {
    text-align: center;
    font-weight: bold;
}
h1.topcontext { font-size: large; }
h1.topheader { font-size: xx-large; }
h1.topsubhead { font-size: x-large; }

/*
 * class="todo" is used to mark things that need to be changed.
 *         The result will be rendered with a reddish background.
 * class="todo-note" is used to mark notes about things to do.
 *         The result will be rendered as a block of red text.
 * class="fixme" is the same as class="todo-note".
 *
 * Usage: <div class="todo-note">THIS IS OLD INFORMATION FROM 2003</div>
 */
.todo {
    color: black;
    background-color: #ff88ff;
}
.todo-note, .fixme {
    color: black;
    background-color: #ff88ff;
    font-size: large;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    border: thick solid red;
    margin: 10px;
}

/* do not underline links in printed media */
@media print {
    a {
	text-decoration: none;
    }
}