/*
 * CSS style sheet for AFNOG Workshop
 */

body {
    /*
     * To force colours or fonts, uncomment some of the following.
     * (But I prefer not to force colours or fonts; let the user
     * configure their preferences in their browser.)
     */
    /*
    color: black;
    background-color: white;
     */
    /*
    font-family: Arial, Helvetica, sans-serif;
     */
    /*
    font-family: Times new roman, Times, 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; }

/*
 * <xxx 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 a margin, to prevent the text from bumping into the
 * image.
 */
.floatright {
    float: right;
    padding: 0;
    border: 0;
    margin: 20px;
}

/*
 * 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; }

/*
 * <div class="fixme"> is used to mark stuff that needs to be changed.
 *
 * Usage: <div class="fixme">THIS IS OLD INFORMATION FROM 2003</div>
 */
.fixme {
    font-size: large;
    font-weight: bold;
    color: red;
    background-color: white;
    text-align: center;
    padding: 10px;
    border: thick solid red;
    margin: 10px;
}

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