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

Stylesheet for CCBA draft site
Fixed width, two column, static design
1/12/2010; revised 04/22/2011

--------------------------------------------*/body{font-family: Arial, Helvetica, Verdana, sans-serif;color: #000;font-size: 100%;text-align: left;background-color: #fff;}*{margin: 0;padding: 0;}/* Basic styles for the whole site */h1, h2, h3, h4, h5, h6, th{font-family: "Times New Roman", Times, serif;text-transform: capitalize;color: maroon;line-height: 1em;}h1{font-size: 2em;}h2{font-size: 1.6em;}h3{font-size: 1.2em;margin: 1em 0;}#public_services h3{color: #fff;text-align: center;letter-spacing: 1px;text-shadow: 0 -1px 0 #666;padding: 8px;margin-bottom: 0;background-image: url('images/gradient-3.gif');background-repeat: repeat-x;background-position: bottom;}h4, h5, h6{font-size: 1em;margin: 0 0 1em 0;}h4{letter-spacing: 1px;border-top: 1px #1e71b8 dotted;padding: 1em 0 0 0;}h4:first-child{border-top: none;padding: 0;}h5{}h6{text-align: center;border-top: 1px maroon dotted;padding: 10px 0 0 0;}blockquote{margin: 0 2em;}p, li{font-size: .85em;text-align: left;margin: 1em 0;line-height: 1.7em;}p:first-child{margin-top: 0;}.bio{}.bio + p{clear: both;padding-top: 20px;}/* Styles for lists */ul, ol{margin: 0 0 0 2em;}ol li{}ul li{}ul{}ol{}.linklist{margin: 0 0 1em 1em;}.linklist li{margin: 0;padding: 0;list-style-type: none;}.linklist li li{font-size: 100%;/* If I do not set this, the font size scales. 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 100% or 1em, the font size is correct across the board-- logically, I suspect this means the same as inherit. Why I should have to do this at all, however, escapes me. */}a:link, a:visited{text-decoration: none;color: #1e71b8;}a:hover{text-decoration: underline;color: maroon;}a:active{text-decoration: none;}a:link img, a:visited img{border: 2px #fff solid;/* set an invisible border -- matches background color -- so the image does not move when hovering -- the hover border shows without moving the image the width of the border */}a:hover img{opacity: 0.5;border: 2px solid;}a:active img{}acronym, abbr{cursor: pointer;}acronym{border-bottom: none;}abbr{border-bottom: 1px #1e71b8 dotted;}#directory table{width: 100%;margin-bottom: 1em;border-collapse: collapse;}#directory tr{border-bottom: 1px #1e71b8 dotted;height: 2em;}#directory th, #directory td{text-align: left;}#directory th{font-size: 1em;letter-spacing: 1px;border-bottom: 2px #1e71b8 solid;}#directory td{font-size: .85em;}#advertising table{border-collapse: collapse;margin: 1em 0;}#advertising tr{border: 2px #1e71b8 solid;}#advertising td{vertical-align: top;padding: 10px;}/* Wraps the whole page, sets the page width, and centers the page in the window. */#page-wrapper{width: 721px;margin: 0 auto;}/* A box for the graphics and text common to every page.  */#masthead, #masthead h1{height: 125px;}#masthead{background-image: url(images/Judge-1.jpg);background-repeat: no-repeat;background-position: 0px -15px;/* The background graphic for the masthead */}#masthead h1{text-indent: -1600px;background-image: url(images/CCBA-banner.gif);background-repeat: no-repeat;background-position: 0px 65px;/* The name of the site. Uses a negative margin to push the text out of view and replaces the text with a graphic. */}/* A box for the header text and graphics that are unique to each page. Contains a background graphic that is a continuation of the graphic in the masthead. */#header{background-image: url(images/Judge-1.jpg);background-repeat: no-repeat;background-position: 0px -170px;border-bottom: 1px #ccc solid;margin: 0 0 12px 0;height: 130px;/* reset to 80 for old dimensions*/
     clear: both;}#header h2{line-height: 1em;position: relative;top: 40px;/*reset to 30 for old dimensions*/}/* The main navigation. */#menubar{width: 100%;float: left;margin: 0;background-image: url(images/gradient-1.gif);background-repeat: repeat-x;background-position: center;background-color: #1e71b8;}#menubar li{font-size: .7em;letter-spacing: 1px;list-style-type: none;text-align: center;display: block;width: 102px;border-left: 1px #999 solid;float: left;line-height: 30px;margin: 0;}#menubar li:first-child{border-left: none;}#menubar a{display: block;border-left: 1px #999 solid;text-decoration: none;}#menubar a:link, #menubar a:visited{color: #fff;}#menubar a:hover{color: #000;background-image: url(images/gradient-2.gif);background-repeat: repeat-x;background-position: center;}#menubar a:active{color: maroon;background-image: none;background-color: #1e71b8;}#menubar a.current{color: maroon;background-image: none;}/* Secondary navigation */#navbar{width: 100%;/* 10px less than width of space to account for the 10px left padding. If I just set this at 100%, then it runs wider than the container*/
	float: left;margin: 0 0 20px 0;background-image: url(images/gradient-4.gif);background-repeat: repeat-x;background-position: top;background-color: #ccc;border-top: 2px #fff solid;/* added invisible border to top to  account for border to the ad image links */
	/*padding-left: 10px;*/}#navbar li{font-size: .7em;letter-spacing: 1px;list-style-type: none;display: block;float: left;/* Hmmm. This seems to reverse the order of the list if I float right... need to look at this */
	line-height: 18px;margin: 6px 0;/* line height and margin ned to add to 30 px */
	/* set line height to 30 and top ad bottom margin to 0 to make borders and link display cover the whole block */}#navbar li:first-child{margin-left: 10px;}#navbar a{display: block;padding: 0 10px;text-decoration: none;}#navbar a:link, #navbar a:visited{color: #000;}#navbar a:hover{color: #fff;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}#navbar a:active{color: maroon;}#navbar a.current{color: #fff;background-color: #999;/* set this to none for no background if background highlighting is eliminated in hover state*/
	-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;border: 1px #ccc solid;}#navbar .menutitle{border-right: 1px #666 solid;margin-right: 10px;padding: 0 10px;font-weight: bold;letter-spacing: 0;}/* Footer navigation */#footer-nav{text-align: center;margin: 0;}#footer-nav li{font-size: .7em;display: inline;margin: 0;padding: 0 3px 0 6px;border-left: 1px #999 solid;background-image: none;}#footer-nav li:first-child{border-left: 1px #999 none;/* 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. */}#footer-nav a:link, #navbar a: visited{}#footer-nav a:hover{}#footer-nav a.current{text-decoration: none;color: gray;}/*Styles for the index box*/.index{width: 200px;margin: 0 0 0 10px;padding: 10px;float: right;border: 2px #1e71b8 solid;-webkit-box-shadow: 3px 3px 3px #ccc;-moz-box-shadow: 3px 3px 3px #ccc;box-shadow: 3px 3px 3px #ccc;-webkit-border-radius: 1.5em 1.5em;-moz-border-radius: 1.5em 1.5em;border-radius: 1.5em 1.5em;}.index h5{margin: 0;padding-bottom: 10px;text-align: center;border-bottom: 1px #1e71b8 solid;}.index li{line-height: 1em;list-style-type: square;margin-left: 0;}/* A box that contains the two content columns. */#container{width: 100%;float: left;}/* Styles for boxes and columns */#content-1{width: 480px;float: left;/* The main content column and styles unique to the main column. */}#content-2{width: 220px;float: right;background-color: #fff;/* The secondary content area and the styles unique to the column. */}#column-1, #column-2{width: 230px;/* Two columns in the main content area for pages that use it */}#column-1{float: left;}#column-2{float: right;}/* Styles for the footer */#footer{clear: both;border-top: 1px #ccc solid;padding-bottom: 10px;}#footer p{font-size: .7em;text-align: center;margin: 0em;line-height: 2em;}#footer a:link, #footer a:visited{}#footer a:hover{}/* Styles to deal with images. */img[alt |="picture"]{float: left;margin: 5px 25px 5px 0;/* an attribute selector. Selects images where the alt is the word "picture" before the hyphen */
	-webkit-box-shadow: 4px 4px 4px #bbb;-moz-box-shadow: 4px 4px 4px #bbb;box-shadow: 4px 4px 4px #bbb;border: 1px #666 solid;}img[alt |="portrait"]{float: left;margin: 5px 25px 5px 0;/* an attribute selector. Selects images where the alt is the word "picture" before the hyphen */
	-webkit-box-shadow: 4px 4px 4px #bbb;-moz-box-shadow: 4px 4px 4px #bbb;box-shadow: 4px 4px 4px #bbb;border: 1px #666 solid;}.icon{display: block;margin: 1em auto;}.left{float: left;margin: 5px 10px 5px 0;}.right{float: right;margin: 5px 0 5px 10px;}#content-2 img{margin: 0 0 5px 0;}img.construction{float: left;margin: 0 20px 0 0;}/* Styles for the event list */.eventbox{border: 4px #1e71b8 solid;padding: 10px 20px;/* note that setting the top padding affects the position of the .eventbox h3 element -- need to adjust that if I change this */
	margin: 30px 0 1em 0;/*-webkit-border-top-right-radius: 1.5em 1.5em;-moz-border-topright- radius: 1.5em 1.5em;border-top-right-radius: 1.5em 1.5em;-webkit-border-bottom-left-radius: 1.5em 1.5em;-moz-border-radius-bottonleft: 1.5em 1.5em;border-bottom-left-radius: 1.5em 1.5em;-webkit-box-shadow: 3px 3px 6px #999;-moz-box-shadow: 3px 3px 6px #999;box-shadow: 3px 3px 6px #999;*/
	/* A box that takes up the entire width of a a content area */}.eventbox h5{margin-bottom: 0;padding: 0 10px;background-color: #fff;float: left;display: block;font-family: Arial, Helvetica, Verdana, sans-serif;letter-spacing: 1px;position: relative;top: -21px;/* note that this is affected by the top padding setting in the containing box -- .eventbox */}.eventlist{margin: 1em 0;}.eventlist img{float: left;margin-right: 1em;border: 1px gray solid;}.eventlist a img{border: 1px #fff solid;}.eventlist a:hover img{border: 1px maroon solid;}/* Styles for the classified ad boxes*/.adbox{border: 1px #1e71b8 solid;padding: 0px 20px;/* note that setting the top padding affects the position of the .eventbox h5 element -- ned to adjust that if I change this */
	margin: 30px 0;}.adbox h5{margin-bottom: -10px;margin-left: -10px;padding: 0 10px;background-color: #fff;float: left;display: block;font-family: Arial, Helvetica, Verdana, sans-serif;position: relative;top: -9px;/* note that this is affected by the top padding setting in the containing box -- .adbox */}.adbox p{line-height: 1.2em;}/* styles for the biographies*/.biography{float: left;border-top: 1px #1e71b8 dotted;padding: 1em 0 0 0;}.biography h4{clear: both;}.biography p{width: 480px;}.biography img{float: left;margin: 0 20px 20px 0;border: 3px #1e71b8 ridge;}/* styles for  miscellaneous classes */.green{color: green;font-weight: bold;text-shadow: 1px 1px 2px #bbb;}.calendar_icon{margin: 0 3px 3px 0;}a:link .calendar_icon{border: 1px #ccc solid;}a:hover .calendar_icon{border: 1px maroon solid;}