/* 

STYLE SHEET FOR Bishop's Peak PTA
Created by Anne Stahl
www.annestahldesign.com

ToC

	1. reset defaults
	2. structure
	3. links and navigation
	4. fonts
	5. images
	6. lists
	7. tables and forms 
	
Notes

*/

/* --------- 1. reset defaults  --------- */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,em,img,ul,li,fieldset,form,label,table,tr,th,td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; vertical-align: baseline; }
body { color: #3A4855; margin:0; padding:0; font: 62.5% Tahoma, Arial, sans-serif; }
/*  --------- 2. structure  --------- */
body { background: #B3AC8B url(/images/bg.gif) repeat-x; width: 100%; }
#wrapper { text-align: center; width: 705px; margin-right: auto; margin-left: auto; }
#main { width: 527px; background: url(/images/bg-mainContent_top.gif) no-repeat 11px 0px; float: left; padding: 0px; overflow: hidden; font-size: 1.2em; }
#sidebar { width: 178px; float: left; position: relative; top: 28px; left: -8px; text-align: left; font-size: 1.1em; overflow: hidden; }
#sidebar h2 { text-transform: uppercase; background: url(../images/bg_sidebarTop1.gif) no-repeat; padding-top: 20px; text-align: left; text-indent: 60px; font: bold 1em Verdana, Arial, Helvetica, sans-serif; padding-bottom: 5px; height: 15px; border-style: none; margin: 0px; }
#sidebar .sidebarContent { padding: 5px 15px; background: url(../images/bg_sidebarMid.gif); margin: 0px; overflow: hidden; }
#sidebar .sidebarEnd { background: url(../images/bg_sidebarEnd.gif) no-repeat left bottom; margin: 0px; padding: 0px; height: 5px; }
#logo { width: 300px; height: 35px; }
#logo a { width: 100%; height: 100%; text-indent: -999em; display: block; }
#footer {background:url(/images/bg-mainContent_bottom.gif) no-repeat 11px 0; text-align: left; width:525px; padding:130px 0 0 15px; margin:0; clear:both; float:left;}
.separator { clear: both; }
.separatorInvisible { clear: both; height: 1px; }
.clearFix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear { clear:both; }
.clear25 { clear:both; display:block; height:25px; }
.left { float:left; }
.right { float:right; }
.inner { padding:25px 25px 0px 40px; text-align: left; background: url(/images/bg-mainContent_middle.gif) repeat-y 11px 0px; overflow: hidden; }
.red {color: red;}
.twocols { width: 48%; }
.col40 { width:40%; }
.col60 { width:60% }
.twocols.large { width:60%; }
/* ---------- 3. links and navigation  ---------- */
a { text-decoration:none; font-weight:bold; color:#167589; }
a:hover { color:#000; text-decoration: underline; }
a.callToAction { width: 110px; background: #CCC url(/images/arrows.gif) no-repeat 113px center; display: block; padding-right: 10px; text-transform: uppercase; border: 2px solid #999; margin-right: 10px; padding-left: 3px; }
a.callToAction:hover { text-decoration:none; background-color:#D6D6D6; }
p.readMore a { text-indent: -9999px; display: block; background: url(/images/read_more.gif) no-repeat; height: 8px; width: 52px; margin:0 0 10px 0; }
p.download a { text-indent: -9999px; display: block; float: right; background: url(/images/download.gif) no-repeat; height: 8px; width: 72px; clear: right; margin:0 0 10px 0; }
p.readMore,
p.download { display:block; }
ul#gnav { position: ralative; top: 0; left: 25px; margin:0; }
ul#gnav li { float: left; display: inline-block; margin:0 5px; }
ul#gnav a { border-bottom: 3px solid #999; text-decoration: none; margin: 1px; color: #033; width: auto; display: block; }
#mainNav { width: 515px; background: url(../images/bg-menu.gif) no-repeat 2px bottom; display: block; clear: both; float: left; height: 30px; margin-left: 10px; }
ul#gnav a:hover { border-bottom-color:#99CC33; color: #066; }
ul#menu { list-style: none; z-index: 200; height: 20px; margin-top:0; display: block; }
ul#menu li { float: left; position: relative; z-index: 200; padding: 0px; list-style-type: none; }
.mainitems { width: auto; text-align: center; position: relative; font-size: 1.2em; }
#menu li a { display: block; padding: 1px 20px; color: #4A5D73; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; margin-right: 1px; margin-left: 1px; }
#menu li a:hover { color: #000; }
.subuls { display: none; position: absolute; top: 20px; float: left; left: -20px; width:200px; }
#menu ul.subuls li { display: block; width: 100%; text-align: left; float: none; background: #E7DFB5; border-right: 3px solid #B5B2B5; border-left: 3px solid #B5B2B5; border-bottom-style: none; border-top: 1px solid #666; }
#menu ul.subuls li.last { border-right: 3px solid #B5B2B5; border-bottom: 3px solid #B5B2B5; border-left: 3px solid #B5B2B5; border-top: 1px solid #666666; }
#menu ul.subuls li.first { border-right: 3px solid #B5B2B5; border-left: 3px solid #B5B2B5; border-top: 3px solid #B5B2B5; }
#menu ul.subuls li a:hover { background-color:#DEDAAE; }
#menu li>ul { top: auto; position: absolute; text-decoration: none; left: 0px; width:auto; }
#menu li:hover ul,
li.over ul { display: block; min-width: 150px; width:150px; }
#menu li .subuls li a { display: block; height: 14px; text-decoration: none; margin: 0px; padding: 1px 4px 1px 20px; font-weight: normal; white-space: nowrap; border-style: none; background: url(../images/arrows.gif) no-repeat 5px center; }
/* ---------- 4. fonts ---------- */
html { font-size: 100%; }
h1 { color: #6d8338; border-bottom: 2px solid #CCC; margin-bottom: 8px; font: bold 1.5em Verdana, Arial, Helvetica, sans-serif; }
h2 { color: #666; text-transform: uppercase; border-bottom: 1px solid #CCC; margin-top: 2px; margin-bottom: 5px; font-size: 1.2em; font-style: italic; font-weight: bold; }
h3 { color: #666; margin: 6px 0px 3px; border-bottom: 1px solid #CCC; font: italic bold 13px Verdana, Arial, Helvetica, sans-serif; }
h4 { font-size:12px; font-weight: bold; margin-top: 8px; margin-bottom: 5px; color: #5f5a46; }
p { margin-top: 2px; margin-bottom: 8px; line-height: 16px; }
ul { margin:0em 0 2em }
blockquote { }
/* ---------- 5. images ---------- */
a img { border: 0; }
div.photo { border: solid 1px #ccc; padding:5px; float: right; text-align: center; margin: 5px; }
div.photo p.caption { font-size:10px; color:#666; }
img.thumb { background: #FFF; padding: 1px; border: 3px solid #999; margin-bottom: 5px; }
img.thumb:hover { background:#ccc; border-color:#ccc; }

/* ---------- 6. lists ---------- */
ul { list-style: none; }
ul.arrow li { color:#333333; background: url(/images/singleArrow.jpg) no-repeat 0px 4px; padding-left: 8px; }
ul.options {
	list-style:upper-alpha;
	margin: 5px 0px 5px 25px;
}
ul.options li { padding: 2px; }
/* --------7.  tables and forms --------*/
/* still need 'cellspacing="0"' in the markup */
table, td, th { border-collapse: collapse; border-spacing: 0; border:solid 1px #CCC; }
caption,
th,
td { text-align: left; font-size: 1.em; color: #333; padding: 1px 10px 1px 3px; }
th { font-weight:bold; white-space:nowrap; }

/* misc styles */
#sidebar p { color:#333; }
.contactTable td,.budgetTable td { border: 1px solid #666; }
.contactTable tr,budgetTable tr { border-collapse: collapse; }
.total { font-weight: bold; color: #000000; border-top: 1px double #000000; }
.budgetTable td { font-size:1em; }
.textIcon { float:left; margin-top: -3px; margin-right: 3px; }
.box { padding:5px; border:solid 1px #9C3; margin-top: 2px; margin-bottom: 3px; }