/*
Main Blue: #0E6BAF
Main Green: #B3C234
*/

/* 
This is a little goofy, but it's an afterthought. To use these same styles
in the newsletter templates without including the entire structure below, I 
separated the default element styles and imported them. This allows me to 
link to the default styles in the newsletter without including all the rest
of this document.
*/
@import url('free_arts_default.css');

/* ----------------
    MAIN STRUCTURAL ELEMENTS
    ------------- */
#floor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}
#logo {
    position: absolute;
    top: 10px;
    left: -50px;
    z-index: 99;
}
body#home #logo {
    top: 0;
    left: -30px;
    width: 960px;
}
#wrapperOutter {
    position: relative;
    width: 910px;
    margin: 0 auto;
    z-index: 99;
    background: transparent url(../images/bg_shadow_vert.png) 0 50% repeat-y;
    _background: transparent url(../images/bg_shadow_vert_ie.gif) 0 50% repeat-y; /* for IE */
}
#wrapperInner {
    width: 890px;
    margin: 0 10px; 	   
    background-color: #fff;   
}
#header {
    background-color: #0E6BAF;
}
#headerContent {
    position: relative;
    height: 300px; /* temporary */
    background: #0E6BAF url(../images/bg_header_fade.jpg) 0 0 repeat-x;
    font-size: 1px; /* another declaration for IE. Fixes the whitespace bug below images */
}
body#oneColumn #headerContent,
body#twoColumn #headerContent,
body#threeColumn #headerContent {
    height: 150px;
}
#footer {
    position: relative;
    width: 910px;
    margin: 0 auto;
    z-index: 99;
}
#footerContent {
    padding: 0 25px;
    background-color: #fff;
    background: transparent url(../images/bg_shadow_vert.png) 0 50% repeat-y;
    _background: transparent url(../images/bg_shadow_vert_ie.gif) 0 50% repeat-y; /* for IE */
}
#footerContent p {
    text-align: right;
    padding: 15px 0;
    color: #0E6BAF;
    background-color: #fff; /* TODO: Test this in IE 6 */
    border-top: 4px solid #B3C234;
}
#footerBottom {
    height: 8px;
    background: transparent url(../images/bg_shadow_bottom.png) 0 0 no-repeat;
    _background: transparent url(../images/bg_shadow_bottom_ie.gif) 0 0 no-repeat; /* for IE */
}
body#home .column,
body#threeColumn .column {
    float: left;
    margin: 15px;
    width: 266px;
    _width: 240px; /* for IE */
}
body#oneColumn .columnSub,
body#twoColumn .columnSub {
    float: left;
    margin: 15px;
    _margin: 8px;
    width: 210px;
    _width: 200px; /* for IE */
}
.columnMain {
    padding-top: 25px;
}
body#oneColumn .columnMain,
body#threeColumn .columnMain {
    margin: 15px;
    width: 860px;
}
body#twoColumn .columnMain {
    float: right;
    margin: 15px;
    width: 620px;
    _width: 600px;
}

/* Two and Three column .lbi assets */
table.twoColumn,
table.threeColumn,
table.fourColumn {
	width: 100%;
}
table.twoColumn td {
    width: 50%;
    vertical-align: top;
}
table.threeColumn td {
    width: 33%;
    vertical-align: top;
}
table.fourColumn td {
    width: 25%;
    vertical-align: top;
}
table.twoColumn td table td,
table.threeColumn td table td,
table.fourColumn td table td {
    width: auto;
}
table.twoColumn td h1,
table.threeColumn td h1,
table.fourColumn td h1 {
    margin-right: 10px;
}
table.staff tr {
    border-bottom: 1px dotted #F0F3D6;
}
table.staff td { 
    vertical-align: top; 
}

table th {
    text-align: left;
    font-weight: bold;
    padding: 5px;
}


.column,
.columnMain {
    margin-bottom: 15px;
}
.pageFooter {
    clear: both;
    margin: 15px 15px 0 15px;
}

/* ----------------
    END MAIN STRUCTURAL ELEMENTS
    ------------- */


/* ----------------
    NAVIGATION
    ------------- */

/* TOP NAV */
#topNav {
    border-bottom: 4px solid #B3C234;
}
#topNav ul {
    margin: 0;
    padding: 0;
    position: relative;
    width: 890px;
    height: 33px;
    background: #0E6BAF url(../images/top_nav.gif) 0 0 no-repeat;
	list-style: none;
}
#topNav li {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
}
#topNav li, #topNav li a {
    height: 33px;
    display: block;
}
#topNav li a {
    background-image: url(../images/top_nav.gif);
}

#tn01 {width: 113px; left: 65px;}
#tn02 {width: 52px; left: 201px;}
#tn03 {width: 145px; left: 277px;}
#tn04 {width: 86px; left: 445px;}
#tn05 {width: 110px; left: 557px;}
#tn06 {width: 135px; left: 688px;}

#tn01 a {background-position: -65px 0;}
#tn02 a {background-position: -201px 0;}
#tn03 a {background-position: -277px 0;}
#tn04 a {background-position: -445px 0;}
#tn05 a {background-position: -557px 0;}
#tn06 a {background-position: -688px 0;}

#tn01 a:hover {background-position: -65px -33px;}
#tn02 a:hover {background-position: -201px -33px;}
#tn03 a:hover {background-position: -277px -33px;}
#tn04 a:hover {background-position: -445px -33px;}
#tn05 a:hover {background-position: -557px -33px;}
#tn06 a:hover {background-position: -688px -33px;}

#tn01.active a,
#tn01.active a:hover {background-position: -65px -33px;}
#tn02.active a,
#tn02.active a:hover {background-position: -201px -33px;}
#tn03.active a,
#tn03.active a:hover {background-position: -277px -33px;}
#tn04.active a,
#tn04.active a:hover {background-position: -445px -33px;}
#tn05.active a,
#tn05.active a:hover {background-position: -557px -33px;}
#tn06.active a,
#tn06.active a:hover {background-position: -688px -33px;}

#topNav a {
    text-indent: -9999px;
}


/* MAIN  NAV */
#mainNav {
    border-top: 4px solid #B3C234;
    border-bottom: 4px solid #B3C234;
}
#mainNav ul {
    margin: 0;
    padding: 0;
    position: relative;
    width: 890px;
    height: 46px;
    background: #0E6BAF url(../images/main_nav.gif) 0 0 no-repeat;
	list-style: none;
}
#mainNav li {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
}
#mainNav li, #mainNav li a {
    height: 46px;
    display: block;
}
#mainNav li a {
    background-image: url(../images/main_nav.gif);
}

#mn01 {width: 129px; left: 11px;}
#mn02 {width: 180px; left: 158px;}
#mn03 {width: 75px; left: 356px;}
#mn04 {width: 100px; left: 448px;}
#mn05 {width: 95px; left: 565px;}
#mn06 {width: 82px; left: 677px;}
#mn07 {width: 105px; left: 776px;}

#mn01 a {background-position: -11px  0;}
#mn02 a {background-position: -158px 0;}
#mn03 a {background-position: -356px 0;}
#mn04 a {background-position: -448px 0;}
#mn05 a {background-position: -565px 0;}
#mn06 a {background-position: -677px 0;}
#mn07 a {background-position: -776px 0;}

#mn01 a:hover {background-position: -11px  -46px;}
#mn02 a:hover {background-position: -158px -46px;}
#mn03 a:hover {background-position: -356px -46px;}
#mn04 a:hover {background-position: -448px -46px;}
#mn05 a:hover {background-position: -565px -46px;}
#mn06 a:hover {background-position: -677px -46px;}
#mn07 a:hover {background-position: -776px -46px;}

#mn01.active a,
#mn01.active a:hover {background-position: -11px -46px;}
#mn02.active a,      
#mn02.active a:hover {background-position: -158px -46px;}
#mn03.active a,      
#mn03.active a:hover {background-position: -356px -46px;}
#mn04.active a,      
#mn04.active a:hover {background-position: -448px -46px;}
#mn05.active a,      
#mn05.active a:hover {background-position: -565px -46px;}
#mn06.active a,      
#mn06.active a:hover {background-position: -677px -46px;}
#mn07.active a,      
#mn07.active a:hover {background-position: -776px -46px;}

#mainNav a {
    text-indent: -9999px;
}

#currentSection { display: none; }

/* First Tier */
.subNav ul {
    margin: 50px 0;
	padding: 0;
    font-size: .95em;
    color: #0E6BAF;
    text-transform: uppercase;
    font-family: helvetica, arial, sans-serif;
    border-top: 4px solid #B3C234;
	list-style: none;
}
.subNav li {
    margin: 0;
    padding: 0;
    border-bottom: 4px solid #B3C234;
}
.subNav li.active {
    background-color: #F0F3D6;
}
.subNav a {
    display: block;
    font-weight: bold;
    padding: 10px 0 6px 15px;
    text-decoration: none;
}
/* Second Tier */
.subNav li ul {
	padding: 0;
    margin: 0 0 5px 10px;
    border-top: none;
}
.subNav li ul li {
    font-weight: normal;
    text-transform: none;
    border-bottom: none;
}
.subNav a.activeLink {
    color: #B3C234;
}



/* VOLUNTEER LOGIN */
#topNav form {
    display: inline;
}
#topNav form input[type=text],
#topNav form input[type=password] {
    width: 65px;
    height: 14px;
    font-size: 10px;
    border: 1px solid #ccc;
}
#topNav form input[type=submit]{
    font-size: 10px;
}
#topNav form {
    position: absolute;
    top: 8px;
    right: 15px;
}
/* ----------------
    END NAVIGATION
    ------------- */
.callOuts {
	margin: 0;
	padding: 0;
	list-style: none;
}
.callOuts li {
    padding: 10px 0 5px 0;
   	margin: 0;	
}
.callOuts h1 { font-size: 1.4em; }
.columnMain .callOuts {
    width: 200px;
    float: right;
    margin: 0;
    border: 1px solid #B3C234;
    /*background: transparent url(../images/hand_light_green_on_white.gif) 90% 50% no-repeat;*/
}
body#home .column .callOuts {
    border: 1px solid #B3C234;
}
.columnSub .callOuts {
    margin: 0;
    border: 1px solid #B3C234;
    /*background: transparent url(../images/hand_light_green_on_white.gif) 90% 50% no-repeat;*/
}
.columnMain .callOuts h1,
.columnSub .callOuts h1 {
    border: none;
    margin-bottom: 0;
}
.columnMain .callOuts p,
.columnSub .callOuts p {
    border: none;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
}

.pageFooter .callOuts .borderBottomLight { border: none; }

.pageFooter .callOuts li { 
    width: 172px;
    min-height: 15em; 
    height: auto;
    _height: 15em;
    float: left;
}

.events {
	margin: 0;
	padding: 5px 10px 10px 10px;
	list-style: none;
	width: 100%;
}  
body#home .events {
    border-bottom: 4px solid #B3C234;
    width: auto;
}
.events li {
    margin: 0;
    padding: 5px 0;
}
.events li p {
    padding: 0;
}
.events .date {
    display: block;
    margin-top: 5px;
}
.events .readMore {
    display: none;
}
body#home .events .readMore {
    display: inline;
}
body#home .events .fullDescription {
    display: none;
}

body#oneColumn .events li {
    float: left;
    margin-right: 20px;
    width: 30%;
}

.youCanHelp {
    font-size: 1.8em;
    text-align: center;
    padding: 10px;
    margin: 0;
    color: #fff;
    background-color: #B3C234; /* url(../images/hand_light_green_on_green.gif) 10% 50% no-repeat; */
    border: 1px solid #B3C234;
}

#FreeArtsVideo { 
    float: right; 
    margin: 0 0 1em 1em;
}


    
/* ----------------
    CLEAR FLOATS WITHOUT EXTRA HTML MARKUP
    ------------- */
#mainContent:after,
.pageFooter:after,
dd:after,
.events:after { 
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; 
}
#mainContent,
.pageFooter,
dd,
.events { 
	display: inline-block; 
	_height: 1%;
}
/* Hides from IE-mac \*/
#mainContent,
.pageFooter,
dd,
events { display: block; }
/* ----------------
    END CLEAR FLOATS WITHOUT EXTRA HTML MARKUP
    ------------- */
    
 
.form {
    width: 100%;
}
fieldset {
    padding: 0 1em 1em 1em;
}
legend {
    margin: 1em;
}

.hide {
    display: none;
}

div.success {
    border: 1px solid #36BF23;
    background-color: #D7FFB0;
    color: #36BF23;
    font-size: 1.2em;
}
div.success p {
    padding: .5em;
    margin: 0;
}

.tip {
    font-size: .9em;
    color: #999;
}

p.submit {
    text-align: center;
    margin: 1em;
}  
.form table {
    margin: 0 50px;
    border-spacing: 0;
	border-collapse: collapse;
}
.form.noMargin table,
.form table td table {
    margin: 0;
}
table.twoColumn .form fieldset {
    width: 80%;
}
table.twoColumn .form table {
    width: 100%;
}
.form td {
	padding: 5px;
	vertical-align: top;
}
.form input[type=text],
.form input[type=password],
.form select {
	min-width: 175px;
	width: auto;
	padding: 3px;
	_width: 175px;
	border: 1px solid;
	border-color: #999 #efefef #efefef #999;
}
.form select.small {
    min-width: 0;
    width: auto;
}
.form input[type=text].small {
    min-width: 40px;
    width: 40px;
}
.form select {
    padding: 0;
}
.form textarea {
	min-width: 80%;
	width: auto;
	_width: 80%;
	height: 100px;
	margin-top: 5px;
	border: 1px solid;
	border-color: #999 #efefef #efefef #999;
	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
}
.form span {
	color: #c2c2c2;
}
.formExample {
	margin: 0;
	font-size: .8em;
	color: #999999;
}

/* error handling */
.error td {
	background-color: #FDF9C8;
}
.error {
	background-color: #FDF9C8;
}
div.error {
    border: 1px solid #FDF063;
    padding: 1em 0;
    margin-bottom: 1em;
}
div.error li,
div.success li {
    margin: 0 2em;
}
select.error {
    padding: 0;
}




.galleryWidget li {
    margin: 0;
    padding: 0;
}
.galleryWidget.jcarousel-container-horizontal {
    width: 200px;
    padding: 0 25px 0 35px;
    margin: 10px auto;
}
.galleryWidget .jcarousel-clip-horizontal {
    width:  200px;
    height: 50px;
}
.galleryWidget .jcarousel-item-horizontal {
}
.galleryWidget .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}
/**
 *  Horizontal Buttons
 */
.galleryWidget .jcarousel-next-horizontal {
    position: absolute;
    top: 10px;
    right: 5px;
    width: 16px;
    height: 24px;
    cursor: pointer;
    background: transparent url(../images/next-horizontal.gif) no-repeat 0 0;
}
.galleryWidget .jcarousel-next-horizontal:hover {
    background-position: -16px 0;
}
.galleryWidget .jcarousel-next-horizontal:active {
    background-position: -32px 0;
}
.galleryWidget .jcarousel-next-disabled-horizontal,
.galleryWidget .jcarousel-next-disabled-horizontal:hover,
.galleryWidget .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -48px 0;
}
.galleryWidget .jcarousel-prev-horizontal {
    position: absolute;
    top: 10px;
    left: 5px;
    width: 16px;
    height: 24px;
    cursor: pointer;
    background: transparent url(../images/prev-horizontal.gif) no-repeat 0 0;
}
.galleryWidget .jcarousel-prev-horizontal:hover {
    background-position: -16px 0;
}
.galleryWidget .jcarousel-prev-horizontal:active {
    background-position: -32px 0;
}
.galleryWidget .jcarousel-prev-disabled-horizontal,
.galleryWidget .jcarousel-prev-disabled-horizontal:hover,
.galleryWidget .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -48px 0;
}

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}
.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}
.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 75px;
    height: 75px;
}
/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}
.jcarousel-prev {
    z-index: 3;
    display: none;
}