/* Element Styles
***********************************/
body {
	background: url(../img/bg_texture.jpg) center top;
	color: black;
	font-family: "Georgia", serif;
	font-size: 10pt;
	margin: 0; padding: 0;
	}

/* acronym, abbr {font-variant: small-caps; text-transform: lowercase;} */

h1, h2, h3, h4 {font-weight: normal; text-align: center; margin: 1em;}
h1 {font-size: 12pt;}
h2 {font-size: 14pt; margin: .5em;}
h3 {font-size: 11pt; margin: .5em 0 .25em 0;}
h4 {font-size: 10pt;}

a, a:link {color: black; text-decoration: underline;}
a:focus {color: #666;}
a:active {color: black;}
a img {border: none;}
a:hover {text-decoration: none;}

hr {border: none; border-top: 1px solid black; margin: 1em;}

p, ul {margin: .25em 0 .75em 0;}
dt {font-style: italic; margin: 0; padding: 0 0 .5em 0;}
dd {margin: 0; padding: 0 0 1em 1em;}

ul {list-style: square inside;}
ul, ol {margin-left: 0; padding-left: 1em;} 
li {margin-left: 0; padding-left: 0; text-indent: 0;}

/*
ul {list-style: square outside; margin-left: 0; padding-left: 1em;} 
li {margin-left: 0; padding-left: 0;}
*/

/* Form Styles
***********************************/
form div {clear: both;}
select, option, optgroup {text-align: left;}

select, input, label, textarea {color: black; margin: 2px;}
select, input[type="text"], input[type="password"], textarea {
	background: white;
	border: 1px solid #444;
	font-family: "Lucida Grande", "Helvetica", "Arial", sans-serif;
	font-size: 8pt;
	}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {background: #EEE;}
select.setwidth, input[type="file"] {width: 150px;}
/* input[type="submit"],  input[type="button"], button {
	border: 2px outset #999;
	margin: 0 auto;
	}
	input[type="submit"]:hover,  button:hover, button a:hover, input[type="button"]:hover {border-style: inset;}*/
input[type="checkbox"], input[type="radio"], input.checkbox, input.radio {margin: 5px;}

.buttons {display: block; height: 40px; padding-left: 110px;}

.button {color: white; display: inline;}
.button .left, .button .right {
	background: url(../img/bg_button.png) no-repeat;
	border: none;
	cursor: pointer;
	display: block;
	font-family: "Lucida Grande", "Helvetica", "Arial", sans-serif;
	font-weight: bold;
	font-size: 8pt;
	text-decoration: none;
	text-shadow: 0px 1px 1px #ffffff;
	line-height: 30px;
	margin: 0;
	height: 30px;
	float: left;
	}
.button .left {background-position: 0px 0px; padding: 0 0 0 14px;}
.button .right {background-position: -362px 0px; width: 18px; text-indent: -10000px;}
.button:hover .left {background-position: 0px -30px;}
.button:hover .right {background-position: -362px -30px;}
.button:active .left {background-position: 0px -60px;}
.button:active .right {background-position: -362px -60px;}

.alert .buttons, .popup .buttons, .alert .buttons, noscript .buttons {padding: 0; font-weight: normal;}


label, .hspace {
	display: block;
	float: left;
	clear: left;
	padding: 2px 15px;
	text-align: right;
	width: 80px;
	background-position: right;
	background-repeat: no-repeat;
	}
label.inline {display: inline; clear: none; float: none; padding: 0;}

.hspace {padding-right: 19px;}
label[for="name"] {background-image: url(../img/icn_name.gif);}
label[for="event"] {background-image: url(../img/icn_event.gif);}
label[for="email"] {background-image: url(../img/icn_email.gif);}
label[for="phone"] {background-image: url(../img/icn_phone.gif);}
label[for="password"] {background-image: url(../img/icn_password.gif);}
label[for="delete"] {background-image: url(../img/icn_delete.gif);}

fieldset {border: none; margin: 0; padding: 0;}

/* navigation Styles
***********************************/
#nav {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	display: block;
	font-size: 12pt;
	margin: auto;
	padding: .4em;
	list-style: none;
	text-align: center;
	}
#nav li {display: inline; margin: 0; padding: 0; text-indent: 0;}
#nav li a {
	display: inline-block;
	color: black;
	padding: .3em 0;
	text-decoration: none;
	}
#nav li a:hover, #nav li a.here, #nav li a:focus {background: url(../img/bg_arrow-bottom.gif) bottom center no-repeat;}

#subnav {
	border-bottom: 1px solid black;
	padding: .3em;
	text-align: left;
	}
	#subnav a {
	display: inline-block;
	color: black;
	padding: .25em 0;
	text-decoration: none;
	}
	#subnav a:hover, #subnav a.here {background: url(../img/bg_arrow-bottom.gif) bottom center no-repeat;}



/* Reusable Styles
********************************************/


/* h3.here {background: url(../img/bg_arrow-left.gif) left no-repeat; padding-left: 6px;} */
h3.here, h3 a:hover {background: url(../img/bg_arrow-bottom.gif) bottom center no-repeat; padding-bottom: 6px;}

.break {clear: both; height: 0px;}
.clear {clear: both;}
.hidden {display: none;}
.visible {display: block;}
.center {display: block; margin: auto; text-align: center;}
.highlight {background: #dddddd; margin: 0 -5px; padding: 0 5px;}
.smalltext {text-transform: uppercase; font-size: 8pt;}
.smaller {font-size: 8pt;}

.fixed {position: fixed; z-index: 100;}


.left {float: left;}
.right {float: right;}

.leftpad {padding-left: 1em;}

.column {float: left; padding: 10px; width: 270px;}
	.column h3 {padding-bottom: 6px;}
	.thinner {width: 200px;}
	.third {width: 170px;}
	.quarter {width: 125px;}
	.wider {width: 340px;}

	
.popup, .alert {z-index: 100;}
.popup {
	background: url(../img/bg_popup.gif) no-repeat center top;
	margin: 0;
	padding: 20px 0 0 0;
	width: 200px;
	position: fixed;
	}
.popup .content {background: #ff9797; border: 1px solid #FF0000; border-top: none; padding: 4px;}
.wide {width: 350px;}

.alert {
	background: #ff9797 url(../img/bg_alertloading.gif) bottom center no-repeat;
	padding: 5px 5px 25px 5px;
	border: 1px solid #FF0000;
	width: 190px;
	position: fixed;
	top: 50%;
	left: 40%
	}

.note {
	background: #ff9797;
	border: 1px solid #FF0000;
	/* margin: 10px; */
	padding: 5px;
	position: absolute; top: 25px; right: 50px;
	width: 250px;
	z-index: 100;
	}

	.note a.close {
		background: url(../img/icn_close.gif) center no-repeat;
		cursor: pointer;
		float: right;
		font-size: 0;
		height: 10px;
		padding: 1px;
		margin: 0 0 10px 10px;
		text-decoration: none;
		width: 10px;
		}
		.note a.close:hover {}

div.email {
	background: #ddd;
	padding: 1em;
	}
	
/* Link styles
*****************************/


a.rss {background: url(../img/icn_rss.gif) no-repeat right; padding-right: 14px;}

a.rsvp {
	background: url(../img/icn_rsvp.gif) right center no-repeat;
	padding-right: 12px;
	font-weight: bold;
	}
a.file-word {display: inline-block; background: url(../img/tn_word.png) left center no-repeat; height: 64px; line-height: 64px; padding-left: 55px; overflow: hidden;}
a.file-pdf {display: inline-block; background: url(../img/tn_pdf.png) left center no-repeat; height: 64px; line-height: 64px; padding-left: 55px; overflow: hidden;}
a.file-excel {display: inline-block; background: url(../img/tn_excel.png) left center no-repeat; height: 48px; line-height: 48px; padding-left: 55px; overflow: hidden;}
a.delete, a.edit, a.expand, a.shrink, a.up, a.email, a.down {
	background: no-repeat left;
	margin-left: .5em;
	padding-left: 12px;
	}
	a.delete {background-image: url(../img/icn_delete.gif);}
	a.edit {background-image: url(../img/icn_edit.gif);}
	a.expand, a.down {background-image: url(../img/icn_down.gif);}
	a.shrink, a.up {background-image: url(../img/icn_up.gif);}
	a.email {background-image: url(../img/icn_email.gif); margin: 0;}

/* Layout Styles
***********************************/
#header {}
#header .left, #header .middle, #header .right {float: left; display: block; text-align: center;}
#header .middle {width: 220px;}
#header .left, #header .right {width: 175px;}
	
#header a {padding-bottom: 6px;}
#header a:hover {background: url(../img/bg_arrow-bottom.gif) bottom center no-repeat;}

#page, #footer {
	margin: 0 auto;
	position: relative;
	width: 580px;
	}
#page {
	background: url(../img/bg_paper.png) left repeat-y;
	min-height: 650px;
	margin-top: -595px;
	padding: 10px 40px 10px 40px;
	width: 580px;
	}
#footer {
	background: url(../img/bg_paper-bottom.png) bottom left no-repeat;
	font-size: 9pt;
	padding: 10px 40px 30px 40px;
	text-align: center;
	}
#footer, #footer a {color: #666;}

/* Calendar Styles
***********************************/	
.calendar {
	border: 1px solid #666;
	border-collapse: collapse;
	/* font-family: "Lucida Grande", "Arial", sans-serif; */
	font-size: 10pt;
	margin: auto;
	text-align: center;
	width: 11em;
	}
.calendar thead td {background: #333; border: none; color: #999;}
.calendar td {border: 1px solid #666; height: 1.5em; line-height: 1.5em; padding: 0px; width:1.75em;}
.calendar td.here {border: 2px solid black;}
.calendar td a {
	background: #777;
	display: block;
	height: 100%;
	text-decoration: none;
	width: 100%;
	}
.calendar td a:hover {background: #aaa;}
.calendar td a.here {background: #222;}
.calendar td a.here:hover {background: #222;}


.month {clear: both;}
.month h3 {padding: .5em 0 0 0; width: 150px;}
.month .calendar {float: left;}
.month ul {float: right; width: 175px;}

#date h4 {font-size: 11pt; font-style: oblique;}
#date .outdent {text-indent: -20px; padding: 0 0 0 20px; margin: 0; width: 180px;}

/* Picture Styles
***********************************/
.pictures {text-align: center; margin: .5em 0; font-size: 75%;}
.pictures img {background: white; border: 1px solid #999; padding: 3px; width: 80px; height: 60px;}

div.albums {text-align: center; margin: .5em auto; width: 480px;}
div.albums .album, div.albums div {float: left; width: 120px; height: 120px;}

div.albums .new {height: 32px; width: 32px; margin: 0 88px 98px 0; position: absolute; z-index: 10; text-indent: -10000px; background: url(../img/icn_new.png) top left no-repeat; margin-top: -10px;}

div.albums a {clear: both;}
.albums a img {background: url(../img/bg_album.gif); margin: auto; padding: 4px 16px 16px 4px; width: 80px; height: 60px;}


.thinner .albums {width: 200px;}
.thinner .albums .album {float: none; margin: .5em auto;}

/* Officer Styles
***********************************/
.officer {clear: both; padding-bottom: 1em;}
.officer h4, .officer h3 {margin: 0; padding: 0; text-align: center;}
.officer img {background: white; border: 1px solid #999; float: left; padding: 3px;}
.officer ul {margin: 0 0 0 90px;}

/* Background Styles
***********************************/
#background {width: 100%; height: 595px; overflow: hidden;}
#starbursts {margin: 0 auto; width: 660px;}
#starburst-left, #starburst-right {height: 595px; width: 300px;}
#starburst-left {background: url(../img/bg_starburst-left.png); float: left; margin-left: -250px;}
#starburst-right {background: url(../img/bg_starburst-right.png); float: right; margin-right: -250px;}


/* Members Page Styles
***********************************/
.star {/* position: absolute; padding-left: .15em; */}

/* Picture Edit Styles
************************************/
ul.albums, ul.pictures {text-align: left;}
ul.albums li, ul.pictures li {padding-left: 0; clear: both; padding-bottom: 2em; margin-top: -2em;}
	ul.albums li {height: 90px;}
	ul.pictures li {height: 70px; list-style: none;}
	ul.pictures li.regular {padding-top: 2em;}

ul.albums li span, ul.pictures {display: block; margin-top: -1em; clear: both;}
	ul.albums li span {margin-left: 120px;}
	ul.pictures li span {margin-left: 90px;}
ul.albums .album {position: relative; top: 35px;}
ul.pictures img {position: relative; top: 25px;}


/* Attendance Edit Styles
************************************/
ul.attendance {list-style: none;}
ul.attendance input, ul.attendance label {display: inline; float: none; width: auto;}
ul.attendance label {padding: 0;}