@charset "UTF-8";
/* CSS Document */
/* Global preset by Paul Jones - That's right no funny stuff
 ============================================================================== */
html, body, div, span, applet, object, iframe, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, tt, var, center, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    list-style: none;
    quotes: none;
    text-decoration: none;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: "Arial Narrow";
}:focus {
    outline: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 5px 0;
}

/*-------------------------------------   End of presets   -----------------------*/
a:link, a:visited {
    color: #96520E;
}

a:hover {
    color: #C67C33;
}

body {
    background-color: #000000;
    font-size: 12px;
}

/*************   Main Wrappers   **************/
#page {
    height: 500px;
    width: 683px;
    margin: 0 auto;
}

#header {
    height: 135px;
    width: 683px;
    background: url("../images/header.jpg") no-repeat bottom;
    position: relative;
}

#content {
    height: 305px;
    width: 683px;
}

#content .pic {
    float: left;
    width: 240px;
    height: 340px;
    background-repeat: no-repeat;
}

#content .info {
    float: left;
    height: 260px;
    padding: 15px 50px 70px 0;
    width: 393px;
    background: url(../images/body-content.jpg) no-repeat;
}

#content .info .wrapper {
    float: left;
    height: 180px;
    width: 350px;
    padding-right: 20px;
    overflow: auto;
}

#content .event {
    width: 300px;
}

#content .event hr {
    border-color: #BA9F85;
    width: 100%;
}

#content .event h3 {
    width: 100%;
}

#content .event h5 {
    width: 40%;
}

#content .event p {
    width: 100%;
}

#logoArea {
    bottom: 23px;
    height: 70px;
    left: 30px;
    position: absolute;
    width: 264px;
}

#footer {
    height: 45px;
    width: 683px;
    padding: 30px 0;
}

/*************   End of Main Wrappers   **************/
/* for old title on header
 #header .pageTitle {
 width: 318px;
 position: absolute;
 right: 50px;
 top: 73px;
 height: 27px;
 }*/
#content .pageTitle {
    width: 315px;
    padding: 0 78px 10px 0;
    font-size: 20px;
    font-weight: bold;
    color: #362D24;
    text-align: center;
}

.info li {
    float: none;
    list-style: disc;
    margin-left: 20px;
}

/*************   What ARCH Does? -&&- Donate-Volunteer   *************/
#nav1 li a, #nav2 li a, #nav3 li a, #nav4 li a, #nav5 li a {
    display: block;
    height: 26px;
    cursor: pointer;
}

li {
    float: left;
}

/*------   Nav 1 links   ------
 #nav4 li {
 margin-top: 10px;
 }*/
#nav1 .contact {
    width: 56px;
    background-image: url(../images/nav1-contact.jpg)
}

#nav1 .comCalendar {
    width: 120px;
    background-image: url(../images/nav1-calendar.jpg);
}

/* ------   Nav 3 links   ------*/
#nav3 {
    float: right;
    padding-right: 15px;
}

#nav2 {
    float: right;
    padding-right: 10px;
}

/* ------   Nav 4 links   ------*/
#nav4 .whatIsArch, #nav4 .whatCanIDo {
    width: 94px;
}

#nav4 .whatIsArch {
    background-image: url(../images/nav4-whatIsArch.jpg);
}

#nav4 .whoAreTheHomeless {
    width: 136px;
    background-image: url(../images/nav4-whoAreHomeless.jpg);
}

#nav4 .needHelp {
    width: 110px;
    background-image: url(../images/nav4-needHelp.jpg);
}

#nav4 .whatCanIDo {
    background-image: url(../images/nav4-whatCanIDo.jpg)
}

/* ------   Facebook link   ------*/
#facebook {
    width: 29px;
    height: 28px;
    float: right;
    margin-right: 20px;
    background: url(../images/navFacebook.jpg) no-repeat;
}

#watchVid {
    width: 90px;
    height: 28px;
    float: right;
    margin-right: 13px;
    background: url(../images/WatchVid.jpg) no-repeat;
}

#usdaLogo {
    width: 58px;
    height: 28px;
    float: right;
    margin-right: 13px;
    background: url(../images/usda.jpg) no-repeat;
}

#facebook a:link, #facebook a:visited, #facebook a:hover,
#watchVid a:link, #watchVid a:visited, #watchVid a:hover {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/*********   End of What ARCH Does? -&&- Donate-Volunteer   *********/
/*************   What ARCH Does?   *************/
/* ------   Nav 2 links   ------*/
.wia-nav #nav2 .elh {
    width: 29px;
    background: url(../images/wia-nav2-elh.jpg) no-repeat;
}

.wia-nav #nav2 .netnrc {
    width: 51px;
    background: url(../images/wia-nav2-netnrc.jpg) no-repeat;
}

.wia-nav #nav2 .coc {
    width: 34px;
    background: url(../images/wia-nav2-coc.jpg) no-repeat;
}

.wia-nav #nav2 .pitCount {
    width: 31px;
    background: url(../images/wia-nav2-pit.jpg) no-repeat;
}

.wia-nav #nav2 .hmis {
    width: 37px;
    background: url(../images/wia-nav2-hmis.jpg) no-repeat;
}

.wia-nav #nav2 .housing {
    width: 51px;
    background: url(../images/wia-nav2-housing.jpg) no-repeat;
}

/* ------   Nav 3 links   ------*/
.wia-nav #nav3 .whatArchDoes {
    width: 95px;
    background: url(../images/wia-nav3-whatArchDoes.jpg) no-repeat;
}

.wia-nav #nav3 .organizations {
    width: 80px;
    background: url(../images/wia-nav3-organizations.jpg) no-repeat;
}

/*************   End of What ARCH Does?   *************/
/*************   Donate-Volunteer   *************/
/* ------   Nav 3 links   ------*/
.wath-nav #nav3 .vet {
    width: 56px;
    background: url(../images/wath-nav3-vet.jpg) no-repeat;
}

.wath-nav #nav3 .fam {
    width: 55px;
    background: url(../images/wath-nav3-fam.jpg) no-repeat;
}

.wath-nav #nav3 .facts {
    width: 84px;
    background: url(../images/wath-nav3-factsMyths.jpg) no-repeat;
}

.wath-nav #nav3 .homeVoices {
    width: 100px;
    background: url(../images/wath-nav3-homelessVoices.jpg) no-repeat;
}

/*********   End of Donate-Volunteer   *********/
/*************   Donate-Volunteer   *************/
/* ------   Nav 3 links   ------*/
.wcid-nav #nav3 .donateNow {
    width: 86px;
    background: url(../images/wcid-nav3-donateNow.jpg) no-repeat;
}

.wcid-nav #nav3 .volunteerOpp {
    width: 137px;
    background: url(../images/wcid-nav3-volunteerOpp.jpg) no-repeat;
}

/*********   End of Donate-Volunteer   *********/
/*************   Admin   *************/
#nav1 .viewWebSite {
    width: 85px;
    background: url(../images/admin_viewWebSite.jpg) no-repeat;
}

#nav3 .editPage {
    width: 58px;
    background: url(../images/admin_editPage.jpg) no-repeat;
}

#nav3 .editCalendar {
    width: 76px;
    background: url(../images/admin_editCalendar.jpg) no-repeat;
}

.admin p {
    padding: 0;
    margin: 0;
}

.admin .header {
    height: 40px;
    width: 683px;
    background: url("../images/admin_top.jpg") no-repeat;
}

.admin .calendarContent, .admin .pageContent {
    height: 320px;
    width: 641px;
    margin-left: 15px;
    margin-right: 27px;
    background-color: #D4CFBC;
    position: relative;
}

.admin .calendarContent {
    height: 480px;
}

.admin .footer {
    height: 45px;
    width: 683px;
    background: url("../images/admin_btm.jpg") no-repeat 14px top;
}

/* ------   Form   ------*/
#editPage {
    margin: 0 auto;
    width: 350px;
}

#editPage select {
    float: left;
}

#editPage textarea {
    width: 300px;
    height: 200px;
    float: left;
    clear: both;
}

#editPage .options {
    padding-bottom: 30px;
}

#eventlist, #changeEvent {
    height: 440px;
}

#changeEvent {
    float: right;
    width: 250px;
    margin-right: 40px;
}

#eventlist {
    float: left;
    width: 300px;
    margin-left: 40px;
    overflow: scroll;
}

#eventlist .event {
    margin-right: 20px;
    margin-bottom: 10px;
}

#changeEvent div {
    position: relative;
    float: left;
    width: 100%;
    margin: 2px;
}

#changeEvent #addNewEvent {
    float: right;
    width: 100px;
}

#changeEvent #updateEvent {
    float: left;
    display: none;
    width: 100px;
}

#changeEvent input {
    float: right;
    width: 200px;
}

#changeEvent textarea {
    width: 244px;
    height: 120px;
    padding: 2px;
}

#changeEvent #txArea {
    margin: 4px auto;
    width: 250px;
}

#changeEvent #txArea div {
    float: left;
    clear: both;
}

/*
 #changeEvent #txArea span {
 margin-bottom: 5px;
 }
 */
#editPage input {
    clear: right;
    float: right;
}

#changeEvent #title span {
    float: left;
}

#changeEvent span {
    float: left;
}

.editEvents {
    margin: 5px 0;
}

.editEvents input {
    font-size: 10px;
}

/*-----   Volunteer Form   -----*/
.wrapper #volForm .formRow {
    width: 100%;
    padding: 0;
    margin: 0;
}

.wrapper #volForm {
    width: 100%;
    height: 300px;
}

#name, #email, #address, #city, #state, #zip, #phone, div.txArea, #contactType, #submit {
    float: left;
}

#name, #zip {
    width: 130px;
}

#name input, #zip input {
    width: 100px;
}

#email, #city {
    width: 170px;
}

#email input, #city input {
    width: 150px;
}

#address {
    width: 300px;
}

#address input {
    width: 280px;
}

#city {
    width: 140px;
}

#city input {
    width: 110px;
}

#state {
    width: 70px;
}

#state input {
    width: 40px;
}

#zip {
    width: 100px;
}

#zip input {
    width: 70px;
}

.txArea {
    width: 300px;
}

.txArea textarea {
    width: 280px;
    height: 80px;
}

#contactType {
    width: 200px;
}

#submit {
    width: 100px;
    padding: 10px 0;
}

/*-----   Flexscroll Scroll bar   -----*/
/*  scrollgeneric is used for corrective styling of elements, and should not be modified or removed */
.scrollgeneric {
    line-height: 1px;
    font-size: 1px;
    position: absolute;
    top: 0;
    left: 0;
}

.vscrollerbar {
    background: url(../images/scrollbar-handle.png) no-repeat center;
    height: 15px !important;
    width: 35px;
    cursor: pointer;
}

.vscrollerbase {
    background: url(../images/scrollbar.png) no-repeat;
    width: 35px;
}* html .vscrollerbar {
    /* IE6 alpha png trick */
    /* IE7 is not affected by this trick, as it perfectly handles the normal png */
    filter: progid:

DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='scrollbar.png');
background-image: none;
}

/* do not forget to give horizontal scrollbars some color properties even if you don't plan on using them */
.hscrollerbase {height: 22px;}
.hscrollerbar {height: 22px; background-color: #84ADD6;}

.vscrollerbar, .hscrollerbar {
/* paddings of these elements will decide how far the scrollbar will stop in both ends, and are not actually
used for styling, and are set to 0 by the script, here we will set them the size of our faux arrows */
padding: 0px;
z-index: 2;
}

/* properties for scroller jog box, just in case */
.scrollerjogbox {
width: 22px;
height: 22px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background: #698AAA;
}

/*************   End of Admin   ********* ****/

.highslide-container table, .highslide-container tr, .highslide-container td, .highslide-container th, .highslide-html, .highslide-wrapper, .highslide-outline {
    background-color: transparent;
}

.highslide-wrapper {
	overflow:hidden;
}

.highslide-html-content {
    padding: 0;
	margin: 0;
	background-color: #000;
}

.vidLinks li {
	list-style: none;
}

.popup {
	background-color: #000;
}