/* CSS Document */

/* HTML */
body {
	margin: 0;
	padding: 0;
	background-color: #333;
	background-image: url(../images/body_bg.gif);
	background-repeat: repeat-y;
	background-position: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	line-height: 1em;
}

.clear {
	clear: both;
	margin: 0;
	padding: 0;
	line-height: 0;
}

form {
	margin: 0;
	padding: 0;
}

input, textarea {
	margin: 0;
	padding: 2px 5px;
	border: 0px Solid #333;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

p {
	margin: 0 0 1em 0;
}

.transparent {
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;	
}

/* Layout */
#base {
	display: block;
	width: 776px;
	margin: 0 Auto;
	padding: 0;
	background-color: #FFF;
	background-image: url(../images/base_bg.gif);
	background-position: top;
	background-repeat: no-repeat;
}

.header {
	position: relative;
	display: block;
	width: 776px;
	background-position: top;
	background-repeat: no-repeat
}

.mainnavi {
	clear: both;
	display: block;
	margin: 0 0 0 16px;
	padding: 0;
}

.mainbody {
	clear: both;
	display: block;
	width: 744px;
	margin: 0 0 0 16px;
	padding: 0;
	background-color: #CCC;
	background-repeat: repeat;
}

.moduletable_navi2 {
	clear: both;
	display: block;
	width: 744px;
	height: 15px;
	margin: 5px 0 5px 16px;
	padding: 0;
	background-color: #FFF;
	border-top: 7px Solid #DDD;
	border-bottom: 7px Solid #DDD;
}

.categorynavi {
	clear: both;
	display: block;
	width: 744px;
	height: 18px;
	margin: 0 0 15px 0;
	padding: 0;
	border-top: 7px Solid #000;
	border-bottom: 7px Solid #000;
}

.footer {
	clear: both;
}

.joomlafooter {
	display: none;
}

/* Header */
.header h1 {display: block; width: 776px;}
.header h1 span {display: none;}
.header h3 {position: absolute; z-index: 2; left: 578px; top: 0px;}
.header h3 a {display: block; width: 144px; height: 144px;}
.header h3 span {display: none;}
.header .title {display: block; width: 537px; height: 64px; background-image: url(../images/header_title_bg.gif); background-repeat: no-repeat; float: left;}
.header .title span {display: none;}
.header .search {margin-top: 4px;}
.header .search .inputbox {border: 1px Solid #999; width: 210px; margin-top: 5px; margin-right: 5px; float: left;}

/* Main Menu */
.mainnavi UL {margin: 0; padding: 0; list-style-type: none;}
.mainnavi LI {float: left; margin-right: 6px; background-repeat: repeat-x;}
.mainnavi LI a {display: block; width: 144px; height: 20px; background-repeat: repeat-x; color: #FFF; text-decoration: none; font-size: 0.9em; font-weight: bold; padding-top: 7px;}
.mainnavi LI a.on {display: block; height: 26px; color: #FFF;}
.mainnavi LI a.of span {padding-left: 12px; background-image: url(../images/mainnavi_li_bg_arrow_of.gif); background-repeat: no-repeat; background-position: 5px 4px;}
.mainnavi LI a.on span {padding-left: 12px; background-image: url(../images/mainnavi_li_bg_arrow_on.gif); background-repeat: no-repeat; background-position: 5px 4px;}
.mainnavi #home {background-image: url(../images/mainnavi_li_bg_home.gif); background-color: #00949F;}
.mainnavi #festival {background-image: url(../images/mainnavi_li_bg_festival.gif); background-color: #FA624D;}
.mainnavi #outreach {background-image: url(../images/mainnavi_li_bg_outreach.gif); background-color: #E98D22;}
.mainnavi #essentials {background-image: url(../images/mainnavi_li_bg_essentials.gif); background-color: #906EAD;}
.mainnavi #activities {background-image: url(../images/mainnavi_li_bg_activities.gif); background-color: #79A40C;}
.mainnavi #home a.of {color: #80BAC0;}
.mainnavi #festival a.of {color: #FC9A91;}
.mainnavi #outreach a.of {color: #FFCB80;}
.mainnavi #essentials a.of {color: #B19FC1;}
.mainnavi #activities a.of {color: #B3CD80;}
.mainnavi #home a.of:hover {color: #FFF;}
.mainnavi #festival a.of:hover {color: #FFF;}
.mainnavi #outreach a.of:hover {color: #FFF;}
.mainnavi #essentials a.of:hover {color: #FFF;}
.mainnavi #activities a.of:hover {color: #FFF;}

/* Bottom Navi */
.moduletable_navi2 UL {margin: 0; padding: 0; list-style-type: none;}
.moduletable_navi2 LI {float: left;}
.moduletable_navi2 LI a {margin: 7px 16px; padding-left: 7px; background-color: #FFF; background-image: url(../images/subnavi_li_bg.gif); background-repeat: no-repeat; background-position: 0px 4px; color: #999; text-decoration: none; font-size: 0.9em; font-weight: bold;}
.moduletable_navi2 LI a:hover {color: #000;}

/* Content Navi */
.categorynavi {clear: both; list-style-type: none;}
.categorynavi LI {float: left; line-height: 17px;}
.categorynavi LI a {margin: 7px 12px; padding-left: 9px; background-image: url(../images/categorynavi_li_bg_of.gif); background-repeat: no-repeat; background-position: 0px 4px; text-decoration: none; font-size: 0.9em; font-weight: bold;}

.pagenavi {clear: both; margin: 0 0 15px 0; padding: 0; padding-left: 302px; list-style-type: none;}
.pagenavi LI a {margin: 7px 0; padding-left: 9px; background-image: url(../images/categorynavi_li_bg_of.gif); background-repeat: no-repeat; background-position: 0px 4px; text-decoration: none; font-size: 0.9em; font-weight: bold;}
.pagenavi LI a.on {color: #FFF; background-image: url(../images/categorynavi_li_bg_on.gif);}

/* Dropdown Menu */
.dropdown {
	position: absolute;
	z-index: 99;
}

.dropdown UL {
	margin: 0;
	padding: 10px 0 0 0;
	display: block;
	width: 144px;
	height: 230px;
	list-style-type: none;
	background-color: #333;
}

.dropdown LI {
	display: inline;
	width: 144px;
}

.dropdown LI a {
	display: block;
	padding: 0 10px 7px 10px;
	color: #FFF;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
}

.dropdown span {}

#festival_list UL {background-color: #AE0303;}
#outreach_list UL {background-color: #C83504;}
#essentials_list UL {background-color: #351C53;}
#activities_list UL {background-color: #244E01;}

#festival_list a:hover {color: #FA624D;}
#outreach_list a:hover {color: #E98D22;}
#essentials_list a:hover {color: #8E6EA8;}
#activities_list a:hover {color: #79A40C;}

/* Footer */
.footer {
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 70px;
	font-size: 0.8em;
	text-align: center;
	color: #666;
	background-image: url(../images/footer_bg_logo.gif);
	background-position: center top;
	background-repeat: no-repeat;
}

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

.footer a {color: #666; text-decoration: underline;}

.footer a:hover {color: #007986; text-decoration: none;}


/* Content */
.categorytitle {padding-left: 302px; font-size: 1em; line-height: 1em; font-weight: bold;}
.contentheading {padding-left: 300px; font-size: 2em; line-height: 0.75em; padding-bottom: 10px;}
.componentheading {font-size: 2em; line-height: 0.75em; padding: 14px 0 10px 13px;}

#contentholder{display: block; width: 735px;}
.contentpicture {display: block; width: 300px; float: left; text-align: center;}
.contentpicture h4 {color: #000; font-size: 12pt; font-weight: normal; text-align: left; padding-left:20px; padding-bottom: 0.1em;}
.contentpicture .preview {display: block; margin-top: 18px;}
.contenttext {display: block; width: 400px; float: left; color: #FFF;}
.contenttext .separator {border-bottom: 2px dotted #333; margin: 18px 0 18px 0; padding: 0;}
.contenttext OL, .contenttext UL {margin: 12px 0 0 0; padding-left: 30px;}
.contenttext OL LI, .contenttext UL LI {padding-bottom: 1em;}
.contenttext h4 {color: #000; font-size: 12pt; font-weight: normal; padding-bottom: 0.1em;}

#thumbnail {display: block; margin-top: 18px;}
#thumbnail table {border: 0px Solid #000; width: 100%;}
#thumbnail table td {padding: 13px 15px 13px 0;}

.table_info {display: block; margin-top: 35px; margin-bottom: 35px; padding: 0;}
.table_info table {border: 0px Solid #000; width: 100%;}
.table_info table th {padding: 6px 0 6px 6px; background-color: #000; text-align: left; font-weight: normal; color: #FFF;}
.table_info table td {margin: 0; padding: 6px 0 6px 6px; vertical-align: top; border-bottom: 1px Solid #333;}
.table_info .col_1 {width: 35%;}
.table_info UL, table_info OL {margin-left: 25px; padding: 0;}
.table_info UL LI, table_info OL LI {padding-bottom: 0.5em; padding-top: 0.5em;}

.table_info_no_space {display: block; margin-bottom: 35px; padding: 0;}
.table_info_no_space table {border: 0px Solid #000; width: 100%;}
.table_info_no_space table th {padding: 6px 0 6px 6px; background-color: #000; text-align: left; font-weight: normal; color: #FFF;}
.table_info_no_space table td {margin: 0; padding: 6px 0 6px 6px; vertical-align: top; border-bottom: 1px Solid #333;}
.table_info_no_space .col_1 {width: 35%;}
.table_info_no_space UL, table_info_no_space OL {margin-left: 25px; padding: 0;}
.table_info_no_space UL LI, table_info_no_space OL LI {padding-bottom: 0.5em; padding-top: 0.5em;}

/* Section */
/* 
Festival - 6
Outreach - 4
Essential - 7
Activities - 8
General - 10
*/
.homepg .header {height: 380px;}
.homepg .header h1 {height: 316px;}
.homepg .contentheading {padding-top: 14px;}

.contentpg .header {height: 276px;}
.contentpg .header h1 {height: 206px;}

#section6 .categorynavi {border-top: 7px Solid #75002E; border-bottom: 7px Solid #75002E;}
#section6 .categorynavi LI a {color: #FFEA00;}
#section6 .categorynavi LI a:hover, #section6 .categorynavi LI a.on {color: #FFF; background-image: url(../images/categorynavi_li_bg_on.gif);}

#section6 .pagenavi LI a {color: #FFEA00;}
#section6 .pagenavi LI a:hover, #section6 .pagenavi LI a.on {color: #FFF;}

#section4 .categorynavi {height: 35px; 	border-top: 7px Solid #A20F00; border-bottom: 7px Solid #A20F00; background-image: url(../images/categorynavi_li_line_outreach.gif); background-repeat: repeat-x;}
#section4 .categorynavi LI a {color: #074B37;}
#section4 .categorynavi LI a:hover, #section4 .categorynavi LI a.on {color: #FFF; background-image: url(../images/categorynavi_li_bg_on.gif);}

#section4 .pagenavi LI a {color: #074B37;}
#section4 .pagenavi LI a:hover, #section4 .pagenavi LI a.on {color: #FFF;}

#section7 .categorynavi {border-top: 7px Solid #08185E; border-bottom: 7px Solid #08185E;}
#section7 .categorynavi LI a {color: #FFD800;}
#section7 .categorynavi LI a:hover, #section7 .categorynavi LI a.on {color: #FFF; background-image: url(../images/categorynavi_li_bg_on.gif);}

#section7 .pagenavi LI a {color: #FFD800;}
#section7 .pagenavi LI a:hover, #section7 .pagenavi LI a.on {color: #FFF;}

#section8 .categorynavi {border-top: 7px Solid #255200; border-bottom: 7px Solid #255200;}
#section8 .categorynavi LI a {color: #F7FF26;}
#section8 .categorynavi LI a:hover, #section8 .categorynavi LI a.on {color: #FFF; background-image: url(../images/categorynavi_li_bg_on.gif);}

#section8 .pagenavi LI a {color: #F7FF26;}
#section8 .pagenavi LI a:hover, #section8 .pagenavi LI a.on {color: #FFF;}

#section10 .categorynavi,#section0 .categorynavi  {border-top: 7px Solid #47422B; border-bottom: 7px Solid #47422B;}
#section10 .categorynavi LI a , #section0 .categorynavi LI a {color: #A9E4FF;}
#section10 .categorynavi LI a:hover, #section10 .categorynavi LI a.on, #section0 .categorynavi LI a:hover, #section0 .categorynavi LI a.on {color: #FFF; background-image: url(../images/categorynavi_li_bg_on.gif);}

#section10 .pagenavi LI a , #section0 .pagenavi LI a {color: #A9E4FF;}
#section10 .pagenavi LI a:hover, #section10 .pagenavi LI a.on , #section0 .pagenavi LI a:hover, #section0 .pagenavi LI a.on {color: #FFF;}

#section .mainbody {background-color: #00949F; background-image: url(../images/mainbody_bg_home.gif); background-position: bottom; background-repeat: repeat-x;}
#section6 .mainbody {background-color: #FA624D; background-image: url(../images/mainbody_bg_festival.gif);}
#section4 .mainbody {background-color: #E98D22; background-image: url(../images/mainbody_bg_outreach.gif);}
#section7 .mainbody {background-color: #906EAD; background-image: url(../images/mainbody_bg_essentials.gif);}
#section8 .mainbody {background-color: #79A40C; background-image: url(../images/mainbody_bg_activities.gif);}
#section10 .mainbody {background-color: #958956; background-image: url(../images/mainbody_bg_general.gif); position: relative; top: 7px;}
#section0 .mainbody  {background-color: #958956; background-image: url(../images/mainbody_bg_general.gif); position: relative; top: 7px;}
#section0 .moduletable_navi2 {position: relative; top: 7px;}
#section10 .moduletable_navi2 {display: none;}

/* Header Image
Category ID
Main Exhibition - 38
Cultural Performance - 22
Kids Zone - 23
Fun on Foot - 13
Expedition H - 16
Culture by the Bay - 17
Founding Years - 21
Vintage Cars - 19
Heritage on the Move - 20
Culture 101 - 18
Sound Stories - 43
Festival Hotline - 24
Downloads - 25
Festival Calendar - 26
*/
#section .header {background-image: url(../images/header_bg_home.jpg);}
#section7 .header { background-image: url(../images/header_bg_festivalessentials.jpg);}
#section8 .header { background-image: url(../images/header_bg_activities.jpg);}
#section10 .header { background-image: url(../images/header_bg_general.jpg);}
#section0 .header  { background-image: url(../images/header_bg_home.jpg);}

#cat13 {background-image: url(../images/header_bg_outreach_fof.jpg);}
#cat16 {background-image: url(../images/header_bg_outreach_expedition_h.jpg);}
#cat17 {background-image: url(../images/header_bg_outreach_culturebythebbay.jpg);}
#cat18 {background-image: url(../images/header_bg_outreach_culture101.jpg);}
#cat19 {background-image: url(../images/header_bg_outreach_vintagecars.jpg);}
#cat20 {background-image: url(../images/header_bg_outreach_hotm.jpg);}
#cat21 {background-image: url(../images/header_bg_outreach_foundingyears.jpg);}
#cat43 {background-image: url(../images/header_bg_outreach_soundstories.jpg);}
#cat22 {background-image: url(../images/header_bg_festivalhub_culturalperformance.jpg);}
#cat23 {background-image: url(../images/header_bg_festivalhub_kidszone.jpg);}
#cat38 {background-image: url(../images/header_bg_festivalhub_main.jpg);}

/* Search Items */
.homepg .search_header {padding-left: 13px; display: block; width: 300px;}
.homepg .search_items {border: 0px solid #000;}
.homepg td fieldset {margin-left: 11px; border: 0px solid #000; display: block; width: 700px;}
.homepg .search_header input {border: 0px solid #ccc;}

/* Links within content area */
.contentpaneopen a:link, .contentpaneopen a:active, .contentpaneopen a:visited {font-weight: bold; color: #000;}
.contentpaneopen a:hover {text-decoration: none; color: #eee;}
.contenttext table {margin:0 0 0 -3px; padding: 0;}

.highlights {margin: 10px 0 0 16px; padding: 15px 0 15px 15px; display: block; width: 729px; background-color:#e5e5e5;}
.highlights h2 {font: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: normal; color: #000; padding-bottom: 0.1em;}
.highlights_content {padding-top: 20px; font: Arial, Helvetica, sans-serif; font-size: 9pt; color: #000;}
.highlights_content h4 {font: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight:bold; color: #000; padding-bottom: 0.1em;}
.highlights_content ol {margin: 0; padding: 0; list-style-position: inside;}
.highlights_content .col {display: block; width: 340px; padding-right: 20px; padding-bottom: 10px; float: left;}
.highlights_content a:link, .highlights_content a:active, .highlights_content a:visited {font-weight: bold; color: #00949F;}
.highlights_content a:hover {text-decoration: none; color: #005D69;}

/* Wiki */
#div_today ul, #div_popular ul {margin: -10px 0 0 0; padding: 6px 0 0 0; list-style-position: inside;}
#div_gallery {text-align: center;}
#div_gallery .wiki_pic img {border: 0px solid #255200; padding-bottom: 12px; width: 240px;}

/* Forms */
#regform table {width: 100%; margin-top: 5px; margin-bottom: 5px;}
#regform th {padding: 6px 0 6px 6px; background-color: #000; text-align: left; font-weight: normal; color: #FFF;}
#regform td {padding: 6px 0 6px 6px;}
#regform td span {display: block; width: 140px;}
#regform .f_input {display: block; width: 250px; border: 1px solid #999; margin: 0;}
#regform .f_select {border: 1px Solid #CCC;}
#regform .f_submit {border: 1px Solid #333; margin-top: 20px; margin-left: 143px;}
#regform .f_default_button {border: 1px Solid #333;}
#regform .regform_separator {border-bottom: 2px dotted #333; margin: 18px 0 18px 0; padding: 0;}

/* Nostalgic Photo Fun */
.photo_preview {margin-right: 8px; margin-bottom:8px;}
.photo_preview img {padding: 3px; background-color:#BBCF8D; width:66px; height:66px;}