/* 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;}

/* Table Styles
************************************/
table.membership {
    border-width: 1px;
    border-spacing: 0px;
    border-style: solid;
    border-color: gray;
    border-collapse: collapse;
}
table.membership td, table.membership th {
    white-space: nowrap;
    border-width: 1px;
    padding: 3px;
    border-style: solid;
    border-color: gray;
}
table.membership th {
    font-weight: bold;
}