/* Style Sheet for PRO-Padres Use this sheet used for left aligned pages. Note: Each block of code styles a different section of the HTML that calls on it. Look at the HTML code to see the sections. They will be labeled with the same name. For example, one section in the CSS is labeled #main-title. In the HTML, you will then find a tag matching it labeled
NOTE: em's and %s are the recommended styling measurements for accessibility since they are based on proportions. NOTE: CSS has no "tables". However, when you see terms such as padding and margins their meanings are similar to those cell elements in tables. */ /* This is the basic style for the body of the page. It defaults all margins to 0, defaults the fonts to sans-serif, trying verdana first, arial second, helvetica third, and if none are found, it will default to the browser's default sans-serif font. It sets the font color to dark blue (#0f01a5) and the background color to light blue (#d5dbff).*/ body { margin: 0; font-family: verdana, arial, helvetica, sans-serif; color: #0f01a5; } /* This creates the small light blue portion at the top of the page. */ #headline { padding: .5em; /* This sets the left margin to .3% it pulls up all the way to the left of the edge. */ margin-left: .3%; /* This sets the right margin to .3% so it pulls up all the way to the right of the edge. */ margin-right: .3%;} /* This styles the banner near top of page that contains the "Skip to Main Content" and "En Espanol" links. */ #main-title { /* This sets the font size. */ font-size: .7em; /* This sets the font color to white. */color: #ffffff; /* This makes the text in this section bold. */ font-weight: bold; /* This sets the left margin to .3% it pulls up all the way to the left of the edge. */ margin-left: .3%; /* This sets the right margin to .3% so it pulls up all the way to the right of the edge. */ margin-right: .3%; /* This sets the padding above and below this section so the text doesn't run too close to the border. */ padding-bottom: .75em; padding-top: .75em; /* This gives a little padding to the left of the text so it's not right up on the left edge of the page. */padding-left: 1em; /* This gives a little padding to the right of the text so it's not right up on the right edge of the page. */padding-right: 1em; /* This sets the banner's backround to dark blue. */ background-color: #0f01a5;} /* This styles the links in the main title (top banner). */#main-title a:link, #main-title a:visited { /* This sets the link text to be bold. */ font-weight: bold; /* This sets the font size. */ font-size: 1em; /* This sets the link color to white. */color: #ffffff; } /* Styles for the main image near the top of the page where the logo and phrase go. */#header-image { /* This sets the background color to white. */ background-color: #ffffff; /* This adds some space above and below the section so it doesn't sit too close to the navigation bar or the banner. */ padding-bottom: .5%; padding-top: 1%; /* This sets the text color to dark blue. */color: #0f01a5;} /*This styles the paragraph (

) tags that are located in the section labeled "header-image". */ #header-image p { /* This sets all text in the header-image section to be aligned in the center. */ text-align: center; /* This sets the text color to dark blue. */ color: #0f01a5; /* This sets the font-weight to be normal (as opposed to bold or italicized). */ font-weight: normal;} /* This styles the text within a paragraph tag that is also labeled with emphasis (). This is how you style fonts to be bold in text with CSS. */ #header-image em {/*This sets the font to be bold*/ font-weight: bold; /* This sets the font color to be dark blue. */ color: #0f01a5;} /* This styles the main navigation bar for the site, which contains all of the main links. */ #navbar, #navbar2 { /* This sets the font size. */ font-size: .8em; /* This centers the text in this section. */ text-align: center; /* This sets the padding above and below this section so the text doesn't run too close to the border. */ padding-bottom: .3em; padding-top: .3em; /* This sets the padding left and right of this section so the text doesn't run too close to the border. */ padding-left: .1em; padding-right: .1em; /* This sets the left margin so it pulls up all the way to the left of the edge. */ margin-left: .3%; /* This sets the right margin so it pulls up all the way to the right of the edge. */ margin-right: .3%; /* This sets the font to be bold. */ font-weight: bold; /* This sets the background color to dark blue color. */ background-color: #0f01a5; /* This sets the font color to white. */ color: #ffffff; /* This sets the spacing between line to be a little wider than normal for a different visual effect. */ line-height: 165%; /* This sets the spacing between words so they don't run too close together. */ word-spacing: .6em;} /* This sets the style for everything in the HTML that is labeled . */span.accesskey { /* This tells the browser to underline the accesskeys on the links so that it is visually apparent to sighted users. For example, the access key on the "home" link is H, so the H will be underlined on the home link in the navigation bar. Screen readers will automatically tell a user what the access key is. NOTE: Access keys allow a user to hold ALT + whicheveraccesskey to point the curser to the specific link. This is especially helpful to users who find using a mouse difficult. */ text-decoration: underline;} /* The styles the links in the navigation bar. */#navbar a:link, #navbar a:visited { /* This sets the color of the links to be white whether they are visitied or not. */ color: #ffffff; } #navbar a:hover { /*This sets the link to be underlined while the curser is pointing at it. */ text-decoration: underline; /* This sets the style of the link while its current page is up. In the HTML, it is searching for a link tag () within the navbar section that is also labeld as */ } #navbar a.current {/* This sets the color of this link to white. */color: #ffffff;} /* The styles the links in the navigation bar. */#navbar2 a:link, #navbar2 a:visited { /* This sets the color of the links to be white whether they are visitied or not. */ color: #ffffff; } #navbar2 a:hover { /*This sets the link to be underlined while the curser is pointing at it. */ text-decoration: underline; /* This sets the style of the link while its current page is up. In the HTML, it is searching for a link tag () within the navbar section that is also labeld as */ } #navbar2 a.current {/* This sets the color of this link to white. */color: #ffffff;} /* This styles the page name banner. */ #page-name { /* This aligns the text to the center. */text-align: center; /* This sets the top margin of the header 1 content to 2% to give it a little space away from the navigation bar . */ margin-top: 2%; /* This sets the font size for everything in the HTML that is labeled as header 1. */ font-size: 1.1em; /* This sets the background color of the h1 element to dark blue. */background-color: #0f01a5; /* This sets the left margin to .3% it pulls up all the way to the left of the edge. */ margin-left: .3%; /* This sets the right margin to .3% so it pulls up all the way to the right of the edge. */ margin-right: .3%; /* This sets the font color of the h1 element to white. */ color: #ffffff; /* This sets the spacing between letter to be a little wider than normal for a different visual effect. */ letter-spacing: .3em; /* This sets the font to be bold. */ font-weight: bold; } /* This styles the tags labeled as header 1 tags (

). */h1 { /* This aligns the text to the center. */text-align: center; /* This sets the bottom margin to have some space below it so it doesn't run into the main text or the header 2 sections of the page. */ margin-bottom: 2%; /* This sets the padding above and below of the h1 text so it doesn't run all the way to the margin. */ padding-bottom: .3em; padding-top: .3em; /* This sets the font size for everything in the HTML that is labeled as header 1. */ font-size: 1.1em; /* This sets the background color of the h1 element to dark blue. */background-color: #0f01a5; /* This sets the left margin to .3% it pulls up all the way to the left of the edge. */ margin-left: .3%; /* This sets the right margin to .3% so it pulls up all the way to the right of the edge. */ margin-right: .3%; /* This sets the font color of the h1 element to white. */ color: #ffffff; /* This sets the spacing between letter to be a little wider than normal for a different visual effect. */ letter-spacing: .3em; /* This sets the font to be bold. */ font-weight: bold; } /* Styles all the main body of text on the page, including the h2 elements. */ #main-text { /* This sets the top margin of this HTML section to zero. */ margin-top: 0; /* This sets the bottom margin of this HTML section to 3% so it doesn't run into the banner at the bottom of the page. */ margin-bottom: 3%; /* This sets the left and right margins of this HTML section to 10% so they don't run all the way across the page. Instead, the contents are centered in the middle. */ margin-left: 10%; margin-right: 10%; /* This sets the font size in this section at .9em. */ font-size: .9em; /* This sets the line height in this section to be slightly larger than the size of the font. */ line-height: 1.4em; /* This sets the background color to transparent so the background color of the page (which was set in the body section above) shows through (light blue). */ background-color: transparent; } /* This styles the emphasis elements in the main-text section. */#main-text b {font-weight: bold;} /* This styles elements labeled as level 2 headings. */h2 { /* This sets the font size for these elements. */ font-size: 1em; /* This gives the section a dark blue border at the bottom (accounts for the blue line underneath level 2 headings). */ border-bottom: 1px #0f01a5 solid; /* This sets the padding of this element to .5% so the text doesn't sit directly on the bottom border. */ padding-bottom: .5%; /* This sets the background color to transparent so that the background color specified in the body section shows through. */ background-color: transparent; /* This sets the text color to dark blue. */ color: #0f01a5; /* This sets the spacing between letters--a simple visual effect. */ letter-spacing: .1em; /* This makes the text bold. */ font-weight: bold; } /* This styles all of the paragraph (

), unordered and ordered lists (

    and
      ), and any tables contained in the main text section of the HTML code. */ p, ul, ol, table { /* This sets the top margin to zero so it pulls up all the way to the bottom of the previous sections. NOTE: Sections above these may already have bottom margins set, so setting the top margin here would only expand this space. */ margin-top: 0; /* This sets the bottom margin to these sections to .5em. As noted above, adding a top margin to this element would add to the bottom margin of, say, an unordered list if one list was above the other. */ margin-bottom: .5em; /* This aligns the text to the left. */ text-align: left; } /* This styles the links in the main-text section of the HTML. */ a:link, a:visited { /* This tells the browser NOT to underline links in this section. */ text-decoration: none; /* This makes the text a little bolder than the "bold" specification. */ font-weight: bolder; /* This again sets the background color to be transparent so the color specified in the body section shows through (light blue). */ background-color: transparent;} /* This sets the color of the links to a dark red color. */ color: #6a0a3c; } a:hover { /* This makes the text a little bolder than the "bold" specification. */ font-weight: bolder; /* This tells the browser to underline a link in this section when the curser is pointing to it. */ text-decoration: underline; /* This sets the link color to stay dark red while the curser is pointing to it. */color: #6a0a3c; } /* This styles all headings of level 3. */h3 { /* This sets the font size of this element. */font-size: 1.2em; /* This sets the bottom margin of this heading level to .3em. */margin-bottom: .3em; /* This sets the font style to be sans-serif (starting with verdana and moving toward the browser's default if none of the specified ones are found). */ font-family: verdana, arial, helvetica, sans-serif; } /* This styles all headings of level 4. */h4 { /* This sets the font size of this element. */font-size: 1em; /* This sets the bottom margin of this heading level to .3em. */margin-bottom: .3em; /* This sets the font style to be sans-serif (starting with verdana and moving toward the browser's default if none of the specified ones are found). */ font-family: verdana, arial, helvetica, sans-serif; } /* This styles all headings of level 5. */h5 { /* This sets the font size of this element. */font-size: 1.5em; /* This sets the line height of this element. */line-height: 1.4em; /* This sets the bottom margin of this heading level to .3em. */margin-bottom: .3em; /* This sets the font style to be sans-serif (starting with verdana and moving toward the browser's default if none of the specified ones are found). */ font-family: verdana, arial, helvetica, sans-serif; } /* This styles all headings of level 6. */h6 { /* This sets the font size of this element. */font-size: 1.2em; /* This sets the line height of this element. */line-height: 1.1em; /* This sets the bottom margin of this heading level to .3em. */margin-bottom: .3em; /* This sets the font style to be sans-serif (starting with verdana and moving toward the browser's default if none of the specified ones are found). */ font-family: verdana, arial, helvetica, sans-serif; } /* This styles all headings of level 7. */h7 { /* This sets the font size of this element. */font-size: .8em; /* This sets the line height of this element. */line-height: .8em; /* This sets the bottom margin of this heading level to .3em. */margin-bottom: .3em; /* This sets the font style to be sans-serif (starting with verdana and moving toward the browser's default if none of the specified ones are found). */ font-family: verdana, arial, helvetica, sans-serif; } /* This styles the links within the footer section. */#footer a:link, #footer a:visited { /* This allows the background color specified in the #footer section above to show through (dark blue). */ background-color: transparent; /* This sets the link color to white. */ color: #ffffff; } #footer a:hover { /* This sets the link to become underlined when the curser is pointing to it. */ text-decoration: underline; /* This sets the link color to white. */ color: #ffffff; } /* This styles the bottom of the page (currently the light blue line below the footer that contains the copyright information). */ #page-bottom, #page-bottom p { /* This sets the font size in this section. */font-size: .8em; /* This sets the padding in this section so the text doesn't bump into the bottom of the page or the footer (blue bar containing Webmaster link). */ padding-top: .5em; padding-bottom: .5em; /* This aligns the text in the center. */text-align: center;}