img {
    margin: 0;
}

body {
    background-color: white;
    background-image: url('../images/PageBackground.jpg');
    background-position: top center;
    background-repeat: no-repeat;
}

#pagecontainer {
    /* 
        You might think that the following line should be 960px, and you would be right!
        The problem is that, if you make the width exactly 960px, your background alignment
        will sometimes be off by one pixel depending on the width of the window.
        This is called the 1px background shift.  Google it.
        Basically, the way CSS rounds the widths for "background-position: top center"
        is different from the way it rounds "margin: 0 auto"
    */
    width: 961px;
    margin: 0 auto;   
}

#masthead {
    height: 70px;   
}

#sidepanel {
    width: 300px;
    float: left;   
}

#contentpanel {
    width: 660px;
    float: left;   
}

#footer {
    clear: both;   
}

ul.leftnav {
    margin-left: 40px;
    list-style-image: url('../images/LittleGreenCircle.gif');
    font-size: 1.2em;
}

ul.leftnav li {
    margin-top: 5px;
    margin-bottom: 5px;   
    color: white;
}

ul.leftnav li a {
    color: white;
    text-decoration: none;
}

ul.leftnav li a:hover {
    text-decoration: underline;
    color: white;
}

li.sel {
    list-style-image: url('../images/LittleWhiteArrows.gif');
}

h2.toppostit {
    margin: 0;
    padding-left: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 65px;
    background-image: url('../images/TopPostIt.gif');
    background-position: top left;
    background-repeat: no-repeat;   
    width: 570px;
    height: 100px;
}

a.HowManyOnGradeLevel {
    background-image: url('../images/HowManyOnGradeLevelButton.gif');
    background-position: top left;
    background-repeat: no-repeat;
    display: block;
    width: 300px;
    height: 70px;
}

a.HowManyOnGradeLevel:hover {
    background-image: url('../images/HowManyOnGradeLevelButtonHover.gif');
}

div.Slide {
    width: 640px;
    background-image: url('../images/slides/SlideBackground.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    padding: 10px;
}

div.Slide h2 {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
}

div.Slide p {
    font-size: 18px;   
}

div.Slide ul {
    font-size: 18px;   
}

div.Slide li {
    font-size: 18px;   
}

span.SlideLINote {
    font-size: 16px;
    color: #666666;
}

p.SlideNotes {
    padding: 10px 30px;   
}

div.SlidinationContainer {
    /* (35 * NumSlides) + 120 */
    width: 520px;
    margin: 10px auto;
}

a.SlidinationPrev, a.SlidinationNext {
    display: block;
    width: 50px;
    height: 20px;
    float: left;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 5px;   
}

a.SlidinationPrev {
    background-image: url('../images/slides/PrevButton.gif');   
}

a.SlidinationNext {
    background-image: url('../images/slides/NextButton.gif');   
}

a.SlidinationPrev:hover {
    background-image: url('../images/slides/PrevButtonHover.gif');   
}

a.SlidinationNext:hover {
    background-image: url('../images/slides/NextButtonHover.gif');   
}

a.SlidinationCell, a.SlidinationCellSel {
    display: block;
    width: 20px;
    height: 20px;
    float: left;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 5px;
}

a.SlidinationCell {
    background-image: url('../images/slides/SlidinationA.gif');
}

a.SlidinationCellSel {
    background-image: url('../images/slides/SlidinationSel.gif');
}

a.SlidinationCell:hover {
    background-image: url('../images/slides/SlidinationHover.gif');
}

a.MoreLinkForSlides {
    margin-left: 5px;
    padding: 1px 5px;
    background-color: #0072bb;   
    color: white;
    text-decoration: none;
}

a.MoreLinkForSlides:hover {
    background-color: #dddddd;   
    color: #0072bb;
    text-decoration: none;
}

div.YellowPanel {
    width: 620px;
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ffff99;
    background-image: url('../images/YellowPanel.gif');
    background-position: top center;
    background-repeat: no-repeat;
    margin: 30px auto 10px auto;
}

b {
    font-weight: bold;
    color: #333333;   
}

div.FeaturesPanel, div.FeaturesPanelShort {
    width: 290px;
    padding: 20px;
    margin: 10px 0;
    float: left;
    background-position: top center;   
    background-repeat: no-repeat;
}

div.FeaturesPanel {
    background-image: url('../images/FeaturesPanel.jpg');
}

div.FeaturesPanelShort {
    background-image: url('../images/FeaturesPanelShort.jpg');
}

a.BigBlueLink {
    padding: 10px 30px;
    font-size: 14px;
    background-color: #0072bb;   
    color: white;
    text-decoration: none;
    font-weight: bold;
}

a.BigBlueLink:hover {
    border: 2px solid #0072bb;
    background-color: #eeeeee;   
    color: #0072bb;
    text-decoration: none;
    font-weight: bold;
}

div.FormOneColumn, div.FormTwoColumn {
    width: 180px;
    padding: 10px;
    float: left;
}

div.FormOneColumn {
    width: 180px;
}

div.FormTwoColumn {
    width: 380px;
}

input.FormOneColumn {
    width: 170px;   
}

input.FormTwoColumn {
    width: 370px;   
}

label.chkTrial {
    padding-right: 20px;   
}

div.PaginationInstructions {
    padding: 0 30px 10px 30px; 
    color: #333;
}

div.PaginationInstructions strong {
    font-weight: bold;
    color: #333;   
}

h1.SlideTitle {
    font-size: 2em;
    padding: 0;
    margin: 10px 30px 0px 30px;
}

h2.SlideTitle {
    padding: 10px 30px;   
    border-bottom: 1px solid #333;   
}