/*
Title:  NJCIE - New Jersey Coalition for Inclusive Education, Inc.
Author:  Tome Wilson - tome@creativewebgroup.net
Last Updated:  March 3, 2010
*/

/* ---[ css reset ]--------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline}
/* remember to define focus styles! */
:focus {outline: 0}
body {line-height: 1; color: #000}
ol, ul {list-style: none}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0}
td {padding: 6px; border: 1px solid #ccc}
caption, th, td {text-align: left; font-weight: normal}
em, .em {font-style: italic}
strong, .strong {font-weight: bold}
.l {float: left}
.r {float: right}
.big {font-size: 1.35em}
.clear {clear: both}


/* ---[ link styles ]--------------------- */
a {color: #d58817; text-decoration: none}
a:hover {color: #254b32; text-decoration: underline}


/* ---[ structure ]--------------------- */
html, body {background: #3a5d46 url(images/shell/background.png) repeat-x; min-width: 760px; text-align: center}
#container {margin: 0 auto; width: 760px; display: block}

#header {width: 760px; height: 74px; background: transparent url(images/shell/logo.png) no-repeat; display: block}
	#logo {width: 188px; height: 74px; display: block}
	#flash {width: 572px; height: 74px; display: block}

#main {margin: 9px 0}
	#left {width: 187px; display: block; float: left}
		#search, #conference, #events-and-news, #donate, #newsletter {margin-top: 9px}


		/* ---[ search ]--------------------- */
		#search {width: 187px; height: 66px; display: block; background: #fff url(images/shell/search.png) no-repeat}
			.search-form {display: block; background: transparent !Important; height: 14px; width: 111px; float: left; margin: 35px 0 0 17px; border: 0 !Important; font: normal 12px/1em Arial, Helvetica, sans-serif; color: #000}
			.search-button {width: 28px; height: 20px; float: left; display: block; margin: 32px 0 0 2px}


		/* ---[ events and news ]--------------------- */
		#events-and-news {width: 173px; height: 94px; display: block; background: #fff url(images/shell/events-and-news.png) no-repeat; padding-top: 39px; padding-left: 14px}
			#ticker {width: 159px; height: 78px; overflow: hidden; font: normal 13px/1em Calibri, Tahoma, Arial, Helvetica, sans-serif}
			#ticker .eventwrap {padding: 1em 0; border-bottom: 1px dotted #d58817}
			#ticker .headline {font-size: 17px; font-weight: bold; color: #254b32; padding-bottom: .75em}
			#ticker .date {font-size: 15px; font-weight: bold; color: #254b32}
			#ticker .title {line-height: 1em; padding: .25em 0}


	#right {width: 564px; display: block; float: right}
		#content-top {width: 564px; height: 20px; background: transparent url(images/shell/content-top.png) no-repeat}
		#content {width: 524px; display: block; background: #fff url(images/shell/content-background.png) repeat-y; padding: 0 20px}
		#content-bottom {width: 564px; height: 20px; background: transparent url(images/shell/content-bottom.png) no-repeat}

#address {margin: 18px 0 9px 0}
#footer {width: 738px; padding: 10px; background: #fff; border: 1px solid #d58817; border-bottom: 0; font: normal 13px/1em Calibri, Tahoma, Arial, Helvetica, sans-serif}
	#footer-left {float: left; text-align: left; width: 548px; border-right: 1px solid #254b32}
		.copyright {font-weight: 800; color: #254b32}
	#footer-right {float: right; width: 170px; padding-top: 10px}


/* ---[ roll-over navigation ]--------------------- */
#navigation {width: 187px; height: 272px; display: block; background: transparent url(images/shell/navigation.png) no-repeat}

	#navigation ul {list-style: none}
	#navigation li {float: left}

	#navigation a.home,
	#navigation a.about-njcie,
	#navigation a.njcie-events,
	#navigation a.services,
	#navigation a.resources,
	#navigation a.tools,
	#navigation a.contact-njcie,
	#navigation a.join-njcie {display: block; height: 34px; width: 187px; text-indent: -999999px; background: transparent url(images/shell/navigation.png) no-repeat}
	
	#navigation a.home {background-position: 0 0}
	#navigation a.home:hover {background-position: -187px 0}

	#navigation a.about-njcie {background-position: 0 34px}
	#navigation a.about-njcie:hover {background-position: -187px -34px}

	#navigation a.njcie-events {background-position: 0 68px}
	#navigation a.njcie-events:hover {background-position: -187px -68px}

	#navigation a.services {background-position: 0 102px}
	#navigation a.services:hover {background-position: -187px -102px}

	#navigation a.resources {background-position: 0 136px}
	#navigation a.resources:hover {background-position: -187px -136px}

	#navigation a.tools {background-position: 0 170px}
	#navigation a.tools:hover {background-position: -187px -170px}

	#navigation a.contact-njcie {background-position: 0 204px}
	#navigation a.contact-njcie:hover {background-position: -187px -204px}

	#navigation a.join-njcie {background-position: 0 238px}
	#navigation a.join-njcie:hover {background-position: -187px -238px}


/* ---[ fly-out navigation - based on Son of Suckerfish ]--------------------- */

/* all list items */
#drops, #drops ul {padding: 0; margin: 0; clear: both; float: left; list-style: none; font: bold 14px/1em Calibri, Tahoma, Arial, Helvetica, sans-serif}
	#drops a {display: block; width: 187px}
	#drops li {float: left; /*width: 187px*/ /* width needed or else Opera goes nuts */}

	/* second-level lists */
	#drops li ul {height: 33px; color: #254b32; position: absolute; left: -9999px}
	#drops ul.drop {color: #254b32; width: 224px; display: block; float: left; margin: -33px 0 0 186px}
	#drops ul.drop li {border: 0}
	#drops ul.drop a {border: 1px solid #d58817; background: #fff; color: #231f20; padding: 7px; width: 200px; height: 19px; text-decoration: none; float: left; margin-top: -1px}
	#drops ul.drop a:hover {background: #fff url(images/shell/suckerfish.png) repeat-x; color: #fff; position: static}

	/* third-and-above-level lists */
	#drops li:hover ul ul, #drops li:hover ul ul ul, #drops li:hover ul ul ul ul, #drops li.sfhover ul ul, #drops li.sfhover ul ul ul, #drops li.sfhover ul ul ul ul {margin-top: 0; position: absolute; width: inherit; left: -9999px}
	#drops li:hover ul, #drops li li:hover ul, #drops li li li:hover ul, #drops li li li li:hover ul, #drops li.sfhover ul, #drops li li.sfhover ul, #drops li li li.sfhover ul, #drops li li li li.sfhover ul {left: 160px; /*width: 160px;*/}

	/* lists nested under hovered list items */
	#drops li:hover ul, #drops li.sfhover ul {left: auto}



/* ---[ content-area ]--------------------- */

#content {text-align: left; font: normal 13px/1.45em Arial, Helvetica, sans-serif}

	em, .em {font-style: italic}
	strong, .strong {font-weight: bold; color: #333}
	.big {font-size: 110%}
	.small {font-size: 75%}
	.l {float: left}
	.r {float: right}
	.clear {clear: both}
	.center {text-align: center}
	small {font-size: 9px}
	
	p {padding: .5em 0}

	#content ul {padding: .35em 0 .35em .25em; margin-left: 10px; list-style-type: none; text-align: left}
	#content li {padding: .15em 0 .35em 1.5em; background: transparent url(images/icons/bullet.gif) 0 5px no-repeat}

	.hr {width: auto; height: 1px; font-size: 1px; display: block; border-top: 1px solid #254b32; margin: 10px 0}

	.column1, .column2 {float: left; width: 245px; display: block; margin-right: 10px}
	.column2 {margin-right: 0}

	.pdf {background: transparent url(images/icons/pdf.gif) no-repeat right top; padding-right: 12px}
	.email {background: transparent url(images/icons/email.gif) no-repeat right top; padding-right: 16px}
	.check {background: transparent url(images/icons/check.gif) no-repeat left top; padding-left: 16px}
	.question {background: transparent url(images/icons/question.gif) no-repeat left top; padding-left: 12px}
	.green-bg {background: #254b32; padding: 3px 0 3px 7px; color: #fff; border-left: 4px double #fff}

	#biographies .name {font-size: 1.15em; font-weight: bold; line-height: 1em; color: #d58817}

	.quote {font-style: italic; margin: 1em 0; line-height: 1.5em; font-size: .9em}
	.quote p {display: inline}
	.startquote {display: inline; background: transparent url('images/icons/quotes1.gif') no-repeat 0 .5em; height: 14px; width: 10px; padding: 7px 5px}
	.endquote {display: inline; background: transparent url('images/icons/quotes2.gif') no-repeat right center; height: 14px; width: 10px; padding: 7px 5px}

	#calendar .event {padding: .75em; margin-top: 1em; border: 1px solid #000}
	#calendar .date {font-size: 16px; font-weight: bold; color: #254b32}
	#calendar .title {font-size: 19px; font-weight: bold; color: #3c3c3c; line-height: 1.5em}
	#calendar .location {font-size: 13px; font-weight: bold; line-height: 1.5em}
	#calendar .details {line-height: 1.5em; border-top: 1px solid #d58817; margin-top: .5em; padding-top: .5em}
	#calendar .register {line-height: 1.5em}

	.photoL {float: left; margin: 3px 8px 0 0}
	.photoR {float: right; margin: 3px 0 0 10px}


	/* ---[ font colors ]--------------------- */
	.g {color: #254b32 !Important}
	.grey {color: #666 !Important}
	.y {color: #d58817 !Important} 
	.k {color: #000 !Important}
	.w {color: #fff !Important}


	/* ---[ headings ]--------------------- */
	h1 {font: bold 1.9em/1em Calibri, Tahoma, Arial, Helvetica, sans-serif; color: #254b32; padding-bottom: .25em; margin-bottom: .25em; border-bottom: 1px solid #254b32}
	h2 {font: bold 1.5em/1.25em Calibri, Tahoma, Arial, Helvetica, sans-serif; color: #d58817; padding: .35em 0}
	h3 {font: bold 1.25em/1.25em Calibri, Tahoma, Arial, Helvetica, sans-serif; padding: .7em 0 .35em 0}
	h4 {font: bold 1.25em/1.25em Calibri, Tahoma, Arial, Helvetica, sans-serif; color: #254b32}
	h5 {font: bold 1.1em/1.25em Calibri, Tahoma, Arial, Helvetica, sans-serif; padding-bottom: .25em; color: #d58817}
	h6 {font: bold 1em/1.25em Calibri, Tahoma, Arial, Helvetica, sans-serif; padding-bottom: .25em; color: #d58817}



/* ---[ contact form ]--------------------- */

form {margin: 0; padding: 0; font-size: 100%; width: auto}
form fieldset {clear: both; font-size: 100%; border-color: #000; border-width: 1px 0 0 0; border-style: solid none none none; padding: 10px; margin: 0}
form fieldset legend {font-size: 16px; font-weight: bold; color: #254b32; margin: 0; padding: 0 .25em;}
label {font-size: 100%}
label u {font-style: normal; text-decoration: underline}
input, select, textarea {font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif; font-size: .9em; color: #000}
textarea {overflow: auto}
form div {clear: left; display: block; width: 440px; height: 1%; margin: 5px 0 0 0; padding: 1px 3px}
form div fieldset {clear: none; border: 1px solid #666; margin: 0 0 0 144px; padding: 0 5px 5px 5px; width: 197px}
form div fieldset legend {font-size: 100%; padding: 0 3px 0 9px}
form div.required fieldset legend {font-weight: bold; color: #d58817}
form div label {display: block; float: left; width: 130px; padding: 3px 5px; margin: 0 0 5px 0; text-align: right}
form div.optional label, label.optional {font-weight: normal}
form div.required label, label.required {font-weight: bold; color: #d58817}
form div label.labelCheckbox, form div label.labelRadio {float: none; display: block; width: 200px; height: 1%; padding: 0; margin: 0 0 5px 142px; text-align: left}
form div fieldset label.labelCheckbox, form div fieldset label.labelRadio {margin: 0 0 5px 0; width: 170px}
form div img {border: 1px solid #000}
p.error {background-color: #f00; background-image: url(images/form/icon_error.gif); background-repeat: no-repeat; background-position: 3px 3px; color: #fff; padding: 3px 3px 5px 27px; border: 1px solid #000; margin: auto 100px}
form div.error {background-color: #ffffe1; background-image: url(images/form/required_bg.gif); background-repeat: no-repeat; background-position: top left; color: #666; border: 1px solid #f00}
form div.error p.error {background-image: url(images/form/icon_error.gif); background-position: top left; background-color: transparent; border-style: none; font-size: 88%; font-weight: bold; margin: 0 0 0 118px; width: 200px; color: #f00}
form div input, form div select, form div textarea {width: 200px; padding: 1px 3px; margin: 0}
form div input.inputFile {width: 211px}
form div select.selectOne {width: 211px; padding: 1px 3px}
form div select.selectMultiple {width: 211px}
form div input.inputCheckbox, form div input.inputRadio, input.inputCheckbox, input.inputRadio {display: inline; height: 14px; width: 14px; background-color: transparent; border-width: 0; padding: 0; margin: 0 0 0 140px}
form div input.inputSubmit, form div input.inputButton, input.inputSubmit, input.inputButton {background-color: #cccccc; color: #000; width: auto; padding: 0 6px; margin: 0}
form div.submit div input.inputSubmit, form div.submit div input.inputButton {float: right; margin: 0 0 0 5px}
form div small {display: block; margin: 0 0 5px 142px; padding: 1px 3px; font-size: .75em; height: 1%}
form fieldset legend {line-height: 150%}
form input, form select, form textarea {background-color: #fff}
/* form textarea.expanding {overflow: auto; overflow-x: auto; overflow-y: visible} */
div.optional label:before {content: ''}
div.required label:before {content: ''}
form div label.labelCheckbox, form div label.labelRadio, label.labelCheckbox, label.labelRadio {display: block; width: 190px; height: 1%; padding: 4px 0 0 18px; text-indent: -18px; line-height: 120%}
form div label.labelCheckbox input.inputCheckbox, form div label.labelRadio input.inputRadio, label.labelCheckbox input.inputCheckbox, label.labelRadio input.inputRadio {margin: 0}
form div fieldset input.inputText, form div fieldset input.inputPassword, form div fieldset input.inputFile, form div fieldset textarea.inputTextarea {width: 160px; margin: 0 0 0 18px; margin: 0 0 0 -124px}
form div label.compact {display: inline; width: auto; padding: 4px 10px 0 0; text-indent: 0; margin: 0}
form div.wide label {float: none; display: block}
form div label.wide {width: 348px}
form div.wide input.inputText, form div.wide input.inputPassword, form div.wide input.inputFile, form div.wide select, form div.wide textarea {width: 344px; margin: 0}
form div.notes p, form div small {line-height: 125%}
form div.wide small {margin: 0 0 5px 0}