/*-----------------------------------------------------------

	JERICHO TENNIS CLUB - SCREEN STYLES
	Author: npcairns@niccai.com 

------------------------------------------------------------*/

* { /* remove all the padding and margins from every page element */
	margin: 0;
	padding: 0;
} 
html {	/* Fixes page shift problem in Safari and Firefox when the page is shorter than the browser window - forces scrollbars to be visible */
	min-height: 100%;
	margin-bottom: 1px;
}
body {
	font-size: x-small; /* for all browsers except IE */
	font-family:  Arial, Verdana, Helvetica, sans-serif;
	color: #444;
	background-color: #e4e0c7;
	text-align: center;  /* center the page in IE5/Win */
}
* html body {
	font-size: xx-small; /* for IE 5x */
	f\ont-size: x-small; /* for other IE */
}
a {
	color: #494907;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:visited {
	color: #000;
}
a.linkPDF {
	padding: 2px 0 4px 20px;
	line-height: 22px;
	background: url(../images/icon-pdf.gif) top left no-repeat;
}
.error {
	color: #800000;
}


/*-----------------------------------------------------------

	Behaviors

------------------------------------------------------------*/
.show {
	display: block;
}
.hide {
	display: none;
}
.visible {
	visibility: visible;
}
.invisible {
	visibility: hidden;
}

/* Clearing ---------------------*/

.clearer:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearer {
	display: inline-table;
}

/* Hides from IE-mac \*/
* html .clearer {
	height: 1%;
}
.clearer {
	display: block;
}
/* End hide from IE-mac */


/*-----------------------------------------------------------

	Page Layout

------------------------------------------------------------*/

#pageFrame { /* fixed page width and centering within the browser window */
	width: 760px;
	margin: 0 auto;
	text-align: left; /* counteract the IE5/Win page center above  */
	background-color: #fff;
}
#header {
	padding-bottom: 4px;
}
#header img {
	float: left;
}
.headerImgFlash {
	height: 252px;
	float: right;
}
#pageBody {
	background: url(../images/column_bg-subpage.gif) repeat-y top left;
}
#sideBar {
	width: 165px;
	float: left;
	padding-bottom: 20px;
}
#contentWell {
	width: 594px;
	margin-left: 1px solid;
	float: right;
}
#logoBar {
	background: #6d6d49 url(../images/logo-subpage.gif) no-repeat top left;
	height: 88px;
	overflow: hidden;
}
#logoBar a {
	display: block;
	padding-top: 106px;
}
#bodyCopy {
	font-size: 120%;
	margin: 18px 30px 25px 108px;	
}
#footer {
	background-color: #6d6d49;
	border-top: 1px solid #fff;
	padding: 10px 40px 11px 26px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #fdfcfc;
	clear: both;
	_height: 1%;		
}


/*-----------------------------------------------------------

	Homepage Layout & Styles

------------------------------------------------------------*/
body.home #pageBody {
	background: url(../images/column_bg-home.gif) repeat-y top left;
}
body.home #sideBar {
	width: 232px;
}
body.home #memberLogin {
		_width: 210px
}
body.home #contentWell {
	width: 527px;
		_width: 527px;
}
body.home #logoBar {
	background: #6d6d49 url(../images/logo-home.gif) no-repeat top left;
	height: 106px;
}
body.home #bodyCopy {
	font-size: 120%;
	margin: 15px 12px 20px 15px;
}
body.home #mainNav {
	padding-right: 30px;
}
body.home #bodyCopy div {
	float: left;
}
.homeEvents {
	width: 320px;
	padding-right: 20px;
	margin-bottom: 20px;
	border-right: 1px solid #6d6d49;
}
.homeNews {
	width: 140px;
	padding-left: 15px;
	margin-bottom: 15px;
}
body.home #bodyCopy h1 {
	margin: 0;
}
body.home #sideBarTabs a {
	background: #999 url(../images/sidebar-tab-right_side.gif) no-repeat -268px bottom;
}
body.home #sideBarTabs a:hover {
	background-position: -768px bottom;
}


#announcementBox { float: right !important; margin: 10px; padding: 3px; width: 200px; text-align: center; background-color: #cdcca0; }

#announcementBox a { border: 1px dashed #fff; display: block; padding: 10px; text-decoration: none !important; }
#announcementBox a,
#announcementBox a:visited { color: #494907; }
#announcementBox a:hover { background-color: #d8d7b3; }

.sidebarBox { float: right; margin: 20px 0 30px; padding: 6px; max-width: 135px; font-size: 120%; border: 1px dashed #cdcca0; border-right: 0; background: #fff; }
.sidebarBox h3 { margin-top: 10px; }

.programSidebar { clear: right; margin: 25px 12px 0 10px; padding: 5px 5px 4px; font-size: 120%; border: 1px solid #f9f9f9; border-left: 2px solid #800000; background: #fff; }
.programSidebar a { margin-top: 2px; }


/*-----------------------------------------------------------

	Body Copy

------------------------------------------------------------*/

#bodyCopy p {
	margin-bottom: 15px;
	line-height: 140%;
}
#bodyCopy p.aboveTable {
	margin-bottom: 3px;
}
#bodyCopy p.mission {
	font-size: 120%;
	font-style: italic;
}
p.homeIntro {
	font-style: italic;
	font-weight: bold;
}
h1 {
	font-size: 120%;
	font-weight: bold;
	color: #969695;
	text-transform: uppercase;
	margin-bottom: 25px;
}
h2 {
	font-size: 140%;
	font-weight: bold;
	color: #6d6d49;
	margin-bottom: 10px;
}
h3 {
	font-size: 110%;
	font-weight: bold;
	color: #ba6f23;
	margin: 20px 0 5px 0;
	border-bottom: 1px solid #e2e1dd;
}
h4 {
	font-size: 100%;
	font-weight: bold;
	margin: 6px 0 2px 0;
}
#bodyCopy ul {
	list-style-type: square;
	margin: 0 0 15px 15px;
}
#bodyCopy ul.pdfList {
	margin: 0;
	list-style-type: none;
}
#bodyCopy ul ul {
	margin: 0 0 0 15px;
}
#bodyCopy ol {
	margin: 0 0 15px 15px;
}
#bodyCopy .reciprocalClub p {
	float: left;
	width: 50%;
}
#bodyCopy a {
	text-decoration: underline;
}
#bodyCopy a:hover {
	text-decoration: none;
}
#bodyCopy .alphabet a {
	background-color: #d8d7b3;
	display: block;
	width: 1.2em;
	float: left;
	font-size: 90%;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	padding: 3px 0px 2px 1px;
	border: 1px solid #c7bfac;
	border-top: 0;
	border-left: 0;
	margin-right: 1px;
}
#bodyCopy .alphabet a:hover, #bodyCopy .alphabet a.selected {
	background-color: #6d6d49;
	color: #fdfcfc;
}

.history img { display: block; margin-top: 40px; margin-bottom: 10px; border: 2px solid #ccc; }
.history p.first img { margin-top: 0; }
/*** Events ***************/
.event {
	padding: 15px 0;
	border-bottom: 1px solid #cdcca0;	
	width: 100%;
}
#bodyCopy a.eventTitle, #bodyCopy a:visited .eventTitle {
	color: #494907;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}
#bodyCopy a:hover .eventTitle {
	text-decoration: underline;
}
#bodyCopy a.eventTitle span {
	color: #ba6f23;
}
#bodyCopy .soldOut {
	color: #800000;
	font-weight: bold;
	text-transform: uppercase;
	padding-top: 5px;
}
#bodyCopy .event p {
	margin: 0;
}
.homeEvents .more {
	margin-top: 15px;
	float: left;
}

/*** News ***************/
.news {
	padding: 15px 0;	
	border-bottom: 1px solid #cdcca0;
	width: 100%;
}
body.home .news {
	border-bottom: 0;
}
#bodyCopy a.newsTitle, #bodyCopy a:visited .newsTitle {
	color: #ba6f23;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}
#bodyCopy a:hover .newsTitle {
	text-decoration: underline;
}
#bodyCopy .news p {
	margin: 0;
}
#bodyCopy .news .date {
	margin-bottom: 10px;
	font-size: 90%;
	text-transform: uppercase;
}
#bylaws ol {
	list-style-type: lower-alpha;
	margin-top: 10px;
}
#bylaws li {
	margin-bottom: 5px;
}
#bylaws ol ol {
	list-style-type: lower-roman;
	margin-top: 10px;
}
#bylaws ol ol li {
	margin-bottom: 5px;
	margin-left: 5px;
}

/*-----------------------------------------------------------

	Data Table

------------------------------------------------------------*/
.dataTable {
	width: auto; 	/* for ie5*/
  	w\idth: 100%; 	/* for ie6 and others */
	background-color: #eae9d4;
	margin-bottom: 15px;
}
.small {
	width: 65%;
}
.medium {
	width: 75%;
}
.dataTable th {
	text-align: left;
	border: 1px solid #c7bfac;
	border-top: 0;
	border-left: 0;
	padding: 6px;
}
.dataTable td {
	border: 1px solid #c7bfac;
	border-top: 0;
	border-left: 0;
	padding: 6px;
	vertical-align: top;
}
.small th {
	width: 45%;
}
.medium th {
	width: 34%;
}
.levels th {
	width: 35%;
}
.daysOfWeek th {
	text-align: center;
	width: 12%;
}
.atAGlance th {
	width: 50%;
	font-weight: normal;
}
td.hours {
	background-color: #cdcca0;
	border-bottom: 0;
}
td.splitter {
	border-left: 1px dashed #6d6d49;
}
td.splitterTop {
	border-top: 1px dashed #6d6d49;
}
td.message {
	text-align: center;
	font-size: 120%;
	font-weight: bold;
	vertical-align: middle;
}
.messageSmall {
	font-size: 70%;
	font-weight: normal;
	display: block;
}
.filter {
	text-align: right;
	margin-bottom: 5px;
}


/*-----------------------------------------------------------

	Main Navigation

------------------------------------------------------------*/
#mainNav {
	background-color: #cdcca0;
	list-style-type: none;
	text-align: right;
	padding: 24px 15px 22px 5px;
	border-bottom: 1px solid #fff;
}
#mainNav li {
	background: url(../images/bullet-main_nav.gif) no-repeat right;
	padding-right: 14px;
	margin-bottom: 10px;
	text-transform: uppercase;
}
#mainNav li.selected {
	background: none;
}
#mainNav a {
	color: #676767;
	font-size: 120%;
	font-weight: bold;
}
#mainNav a:hover {
	color: #f8f8f8;
	text-decoration: none;
}
#mainNav li.selected a {
	color: #f8f8f8;
}


/*-----------------------------------------------------------

	Secondary Navigation

------------------------------------------------------------*/
#secNavPanel {
	padding: 5px 0 40px 7px;
}
#secNavPanel .title {
	color: #bbba90;
	font-size: 230%;
	text-transform: lowercase;
	margin-bottom: 7px;
}
#secNav {
	list-style-type: none;
	text-align: right;
	position: relative;
}
#secNav li {
	padding-right: 11px;
	margin-bottom: 4px;
	text-transform: uppercase;
}
#secNav li.selected {	
	background: url(../images/bullet-sec_nav.gif) no-repeat right;
}
#secNav a {
	color: #373634;
	font-size: 100%;
}
#secNav a:hover {
	color: #fdfcf7;
	text-decoration: none;
	font-weight: bold;
}
#secNav li.selected a {
	color: #fdfcf7;
	font-weight: bold;
}


/*-----------------------------------------------------------

	Tertiary Navigation

------------------------------------------------------------*/
#tertNav {
	list-style-type: none;
	text-align: left;
	width: 75px;
	position: absolute;
	top: 0;
	right: -84px;
		_right: -86px;
	border: 1px solid #deddbe;
	border-width: 1px 0;
	padding-top: 4px;
}
#tertNav li {
	padding-right: 0px;
	margin-bottom: 4px;
	text-transform: uppercase;
}
#secNav li.selected li a {
	font-weight: normal;
	color: #6d6d49;
}
#secNav li.selected li a:hover {
	font-weight: normal;
	color: #222;
}
#secNav li.selected li.selected {
	background: none;
}
#secNav li.selected li.selected a {
	color: #000;
}


/*-----------------------------------------------------------

	Sidebar Tabs

------------------------------------------------------------*/
#sideBarTabs {
	list-style-type: none;
	text-align: right;
}
#sideBarTabs li {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid #d8d7b3;	
}
#sideBarTabs a {
	background: #999 url(../images/sidebar-tab-right_side.gif) no-repeat -335px bottom;
	padding: 3px 56px 4px 10px;
	border-top: 1px solid #fff;
	color: #fff;
	display: block;
}
#sideBarTabs a:hover {
	background-position: -835px bottom;
	background-color: #6d6d49;
	text-decoration: none;
}


/*-----------------------------------------------------------

	Footer Navigation

------------------------------------------------------------*/
#footerNav {
	list-style-type: none;
	float: right;
}
#footerNav li {	
	display: inline;
}
#footerNav li a {
	color: #fdfcfc;
	border-left: 1px solid #fdfcfc;
	padding: 0 14px;
}
#footerNav li a.first {
	border: 0;
}


/*-----------------------------------------------------------

	Forms - General

------------------------------------------------------------*/


/*** INPUTS ***********************************/
form input, select, textarea {
	font-size: 100%;
}
form input {
	width: 200px;
	padding: 1px 2px;
}
form input.small {
	width: 43px;
}
form input.medium {
	width: 112px;
}
form input.large {
	width: 320px;
}
form select {
	width: 198px;
		_margin-top: 1px; /* fixes margin bug in IE */
		_margin-bottom: 1px; /* fixes margin bug in IE */
}
form select.small {
	width: 50px;
}
form select.medium {
	width: 119px;
}
form textarea {
	width: 300px;
	height: 8.0em;
	padding: 1px 2px;
	font-family:  Arial, Verdana, Helvetica, sans-serif;
}
form textarea.mediumHeight {
	height: 16.0em;
}
form textarea.largeHeight {
	height: 26.0em;
}
form fieldset {
	border: 0;
	margin-top: 15px;
}
form legend {
	font-size: 110%;
	padding: 2px 20px 3px 10px;
	background-color: #d8d7b3;
	border-width: 1px 1px 0 1px;
	border-color: #c7bfac;
	border-style: solid;
		_margin-left: -0.7em;
}
form input.checkbox {
	width: auto;
}
form input.radio {
	width: auto;
	margin-left: 2px;
}
.required {
	font-size: 110%;
	position: relative;
	top: 1px;
	left: 3px;
	line-height: 80%;
	color: #800000;
}
p .required {
	padding-right: 3px;
}
.buttonRow {
	padding: 8px 0 40px 130px;
}
.listButtonRow {
	padding: 8px 0px 40px 0px;
}
form input.button {
	background-color: #6d6d49;
	color: #fdfcfc;
	width: auto;
	padding: 3px 4px;
	margin-left: 3px;
	border-width: 1px;
	border-style: solid;
	float: left;
		_overflow: visible; /* fixes IE button padding issue */
}

/*** FORM TABLE ***********************************/
.formTable {
	width: auto; 	/* for ie5*/
  	w\idth: 100%; 	/* for ie6 and others */
	border-width: 1px 0px;
	border-style: solid;
	border-color: #c7bfac;
	background-color: #eae9d4;
}
.formTable th {
	text-align: left;
	font-weight: normal;
	width: 115px;
	vertical-align: top;
}
.formTable th, td {
	border-style: solid;
	border-width: 0 0 1px 0;
	border-color: #c7bfac;
}
.formTable th {
	padding: 7px 6px 4px 6px;
}
.formTable td {
	padding: 4px 6px;
}
.formTable td div {
	margin: 2px 3px 6px 0;
}
.formTable td div.nowrap {
	float: left;
	margin-top: 0;
}
.formTable td div label {
	display: block;
}
.formTable td .note {
	margin-left: 3px;
}
.formTable td .denomination {
	position: relative;
	left: -125px; /* the width of a normal input + padding */
		left: -133px; 
}
.formTable td label {
	margin-right: 5px;
}

/*-----------------------------------------------------------

	Member Login

------------------------------------------------------------*/
#memberLogin {
	margin: 20px 7px 5px 14px;
	color: #6d6d49;
	overflow: hidden;
		_width: 142px;
}
#memberLogin fieldset {
	position: relative;
	float: left;
	border: 0;
	margin: 0;
	width: 100%;
	padding-bottom: 20px;
}
#memberLogin legend {
	font-size: 110%;
	font-weight: bold;
	text-transform: uppercase;
	border: 0;
	padding: 0;
	margin: 0;	
		_margin-left: -0.7em;
}
#memberLogin label {
	font-size: 110%;
	font-weight: bold;
	width: 62px;
	margin-top: 10px;
	float: left;
}
#memberLogin input {
	width: 100px;
		_width: 98px;
	margin-top: 7px;
	margin-right: 5px;
	float: left;
}
#memberLogin a {
	font-weight: bold;
	color: #6d6d49;
	display: block;
	text-align: right;
	text-transform: uppercase;
	background: url(../images/bullet-member_login.gif) no-repeat right;
	padding-right: 12px;
	margin-top: 11px;
	float: left;
}
#memberLogin a:hover {
	text-decoration: none;
}
#memberLogin .error {
	margin-bottom: 10px;
}
#memberLogin .loginHelp {
	background: none;
	color: #a45c15;
}
#memberLogin .loginHelp:hover {
	text-decoration: underline;
}
#loginInstructions {
	font-size: 110%;	
}
#loginInstructions h4 {
	text-transform: uppercase;
}
#loginInstructions a:hover {
	text-decoration: none;	
}
#loginInstructions ol {
	margin: 5px 5px 10px 15px;
		_margin-left: 22px;
}
#loginInstructions p {
	text-transform: uppercase;
}