/* --------------------------------------------------

Style sheet for Washington School For The Blind Foundation.
11/15/08
J. D. Nellor

-------------------------------------------------- */body{font-size: 100%;font-family: Helvetica, Arial, sans-serif;}*{margin: 0;padding: 0;}/* Page Elements */#masthead{padding: 15px 0 25px 0;border-bottom: 25px #99dd00 solid;background-color: #000066;/* The banner or masthead for the whole site. It is positioned outside the page wrapper so the bordrs will fill the width of the browser window */}#masthead h1{text-indent:-1600px;background-image: url('images/logo.gif');background-repeat: no-repeat;background-position: left bottom;height: 115px;margin: 0 auto;}#masthead h1 img{position: relative;height: 113px;width: 141px;left: 760px;top: 28px;}#page-wrapper, #masthead h1{width: 900px;/* Set the width of the wrapper and the header content to be the same, so they line up and so I don't have to set it in two places */}#page-wrapper{margin: 0 auto;/* The wrapper for the whole page. Note that the header is not inside the page wrapper, but everything else is. The header extends across the width of the window and has no margins */}#header{padding: 30px 0;/* The header or banner specific to each page. */}#column-container{width: 690px;float: right;/* The wrapper around the two columns on the right side of the page. This is so I can order the columns in the xhtml with the main content column first. */}#middle-column{width: 450px;float: left;padding: 1em 0 30px 0;/* This is a bad name. This is the main content area. Might change the name one of these days.  */
	border-top: 1px #000066 solid;}#left-column{width: 180px;float: left;/* This is a bad name. Secondary content goes here. Might change change the name one of these days.  */}#right-column{float: right;margin: 0 0 1em 0;width: 210px;/* This is a bad name. The main use of this column is for navigation, but may put news and simlar content there. Might change the name one of these days.  */}#footer{clear: both;text-align: center;padding: 30px 0;background-color: #000066;}/* Boxes */blockquote{padding: 20px;border: 2px #99cc00 solid;/*-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;*/}.sidebar{border: 1px #99cc00 solid;margin: 1em 0;}/* Styles for the Donate Now button */input[type="submit"]{/* an attribute selector to style the submit button*/
	width: 180px;color: #b00;font-size: 1em;}input[type="submit"]:hover{color: #00b;}#left-column input[type="submit"]{margin: 30px 0;}#right-column input[type="submit"]{margin: 0 0 20px 15px;}/* Text Styles */p, li, caption, th, td{font-size: .9em;}p, li{margin: 0 0 1em 0;line-height: 1.5em;}.sidebar p, .sidebar li{font-size: .8em;line-height: 1.4em;margin: 1em 20px;color: #444;}blockquote p{font-family: Georgia, Times, "Times New Roman", serif;font-style: italic;color: #000066;line-height: 1.7em;margin: 0;text-indent: 1em;font-size: 1.1em;text-shadow: 3px 3px 3px silver;}blockquote p:last-child{font-size: .9em;text-align: right;}#footer p{font-size: .6em;color: #ffffff;margin: 0;}acronym{border-bottom: 1px #999 dotted;}strong{font-weight: bold;}em{font-style: italic;}/* List styles*/ul{margin: 1em 2em;}.sidebar ul{margin: 1em;}ul li{list-style-type: square;margin: 1em;}.linklist li{list-style-type: none;margin: 0em;}.linklist ul{margin: 0 0 0 2em;}.linklist li li{font-size: 1em;/* If I do not set this, the font size scales to .8 em of .8em. If I set this to inherit, the font size is correct in Safari, Firefox, Opera and Camino, but still scales in IE Win 6. If I set this to 1em, the font size is correct across the board-- logically, I suspect this means the same as inherit--1em of .8em should equal .8em. Why I should have to do this at all, however, escapes me. */}ol{margin: 1em 0 1em 3em;}ol li{list-style-type: decimal;margin: 1em 0;}ol li li{list-style-type: lower-alpha;margin: 1em 0;font-size: 1em;}/* Heading Styles */h1, h2, h3, h4, h5, h6{text-transform: capitalize;}h1, h2{font-weight: normal;}h1{font-size: 1.6em;}h2{font-size: 1.2em;}h3{font-size: 1em;margin: 1em 0;}h4, h5, h6{color: #000066;font-size: .8em;}h4, h5{}h4{margin: 0 0 1em 0;letter-spacing: 1px;text-decoration: underline;}h5{line-height: 2.4em;text-indent: 20px;margin: 0;background-color: #99cc00;}h6{margin: 1em 0;text-align: center;}/* Link styles */a:link, a:visited{text-decoration: none;color: #00b;}a:hover, a:active{color: #b00;text-decoration: underline;}a.current{color: #444;}/* The main navigation */#navbar{margin: 0;}#navbar li{font-size: .8em;text-indent: 10px;line-height: 2.4em;letter-spacing: .1em;margin: 0;list-style-type: none;}#navbar a{color: #fff;text-decoration: none;display: block;width: 100%;/* A hack for IE Win so that the entire width of the button responds. */
    	 border-top: 1px #fff solid;background-color: #000066;background-image: url('images/gradient-1.gif');background-repeat: repeat-x;background-position: top;}#navbar a:hover{color: #000;background-color: #99dd00;background-image: url('images/gradient-2.gif');background-repeat: repeat-x;background-position: center;}#navbar a:active{color: #000;}#navbar a.current{color: #99dd00;background-color: #000066;background-image: url('images/gradient-1.gif');background-repeat: repeat-x;background-position: top;}/* Secondary navigation */.menubar{margin: 3px}.menubar li{font-size: .6em;display: inline;margin: 0;padding: 0 6px;border-right: 1px #fff solid;}.menubar li:first-child{border-left: 1px #fff solid;/* Does not work in IE Win. Could mess around with this, use the star hack and set a border on the left of the containing element, but I used the ul as the containing element and it spans the entire width of the page, and it is not a big enough deal to change the xhtml and the css. */}.menubar a{color: #fff;text-decoration: none;display: inline;}.menubar a:hover{color: #b00;text-decoration: underline;}.menubar a.current{text-decoration: none;color: #99cc00;}/* Catalog boxes*/.catalog{width: 450px;/* The catalog and biography classes are nearly identical: They both break the middle column into two columns. Catalog class makes two equal columns, biography class makes the left column 1/3 the width of the right column. */
     float: left;}.catalog p{width: 210px;float: right;line-height: 1.2em;clear: right;}.catalog h3, .catalog h4{color: #000066;clear: both;border-top: 1px #ccc solid;margin: 0 0 1em 0;padding: 1em 0 0 0;}.catalog img{border: 1px #444 solid;width: 210px;margin: 0 0 1em 0;}/* Biography boxes*/.biography{float: left;width: 450px;/* The catalog and biography classes are nearly identical: They both brak the middle column into two columns. Catalog class makes two equal columns, biography class makes the left column 1/3 the width of the right column. */}.biography p{width: 270px;float: right;line-height: 1.2em;clear: right;}.biography h3, .biography h4{color: #000066;clear: both;border-top: 1px #ccc solid;margin: 0;padding: 1em 0;}.biography img{width: 150px;height: 188px;margin: 0 0 1em 0;border: 3px #999 ridge;}/* Signature block */p.signature{margin: 0;}img.signature{margin: 1em 0 0 0;border: none;float: none;}/* Styles for images */img{float: left;/* Set the default float for all images to the left side. I change this by setting the align attribute in the markup to left or right. */
     border: none;}img.portrait, img.landscape, img.snapshot{border: 3px #999 double;}img.drawing{margin: 10px 20px 0 0;}img.portrait{margin: 0px 20px 0 0;height: 225px;width: 180px;/* Set portrait dimensions to a 4 x 5 aspect ratio */}img.landscape{margin: 10px 20px 0 0;width: 210px;height: 150px;/* Set landscape dimensions to 7 x 5 aspect ration -- the opposite of portrait */}img.snapshot{margin: 10px 20px 0 0}img[alt |="picture"]{margin: 5px 20px 0 0}img[alt |="photo"]{float: right;margin: 5px 0 0 20px;/* An attribute selector. Need to set the alt attribute to "photo", or the letters before the a hyphen to "photo- " in the markup to place the image on the right side of the column. Setting the class to portrait or ladscape sets the size and dimensions of the picture. */}#right-column img{float: none;margin: 1em auto 0 auto;display: block;}a:hover img{opacity: 0.5;}/* Style for the map page. To center the image on the page. */#map img{float: none;margin: 30px auto;display: block;}