/*========================================================*/
/*    Cascading Style Sheet for TOWNLIFE TEMPLATE         */
/*========================================================*/

/*========================================================*/
/*                  Table of Contents                     */
/*========================================================*/
/*  1. UNIVERSAL THINGS                                   */
/*  2. MAIN HEADER                                        */
/*  3. BREADCRUMBS                                        */
/*  4. SYSTEM MESSAGE                                     */
/*  5. ORGANIZATION HEADER                                */
/*  6. SITE TITLE HEADER                                  */ 
/*  7. WRAP                                               */
/*  8. SIDEBAR                                            */
/*  9. MAIN                                               */
/*  10. FOOTER                                            */
/*  10. SOCIAL FOOTER                                     */
/*  11. ECOFOOTER                                         */
/*  12. CALENDAR TABLE                                    */
/*  13. EDIT                                              */
/*  14. CLEARFIX                                          */
/*  15. MAP                                               */
/*  16. IE   */
/*========================================================*/


/* =============================================== */
/*            1. UNIVERSAL THINGS                  */
/* =============================================== */

body{
color:#222;
font-size:62.5%;
}

p{
margin:10px 0;
font-style:normal;
}

a{color:#222;}

a:hover{ color:#000001;/**/}

li.NoBorder a{border:none!important;}

hr {display:block}


#MainBody {	
margin:0 auto;
width:770px;}

a.hoverable {
	position:relative;
	z-index:10;
}
a.hoverable span {
	display:none;
	background-color:#DCE9E9;
}

a.hoverable span{color:#000001 !important;/**/}

a.hoverable:hover {
	z-index:11;
}
a.hoverable:hover span {
	display:block;
	position:absolute;
	top:100%;
	left:0px;
	width:300px;
	padding:5px;
	border:1px solid #000;
	z-index:11;
}




/* =============================================== */
/*            2. list category  FIX                      */
/* =============================================== */

#ListCategories ul{margin-top:0px;}
#ListCategories h3{margin-bottom:0px;}

/* =============================================== */
/*             3. BREADCRUMBS                      */
/* =============================================== */

#breadcrumb{
background:#000 url(/images/breadcrumb/bg_breadcrumb_black.gif) repeat-x top left ;
/*border-bottom:1px solid #000;
border-top:1px solid #000;*/
padding:0px 5px;
}

#breadcrumb li{
float:left;
font-size:1.2em;
color:#fffffe;/**/
line-height:20px;
padding:0px 5px;
background:url(/images/breadcrumb/bullet.gif) no-repeat left center;
}

#breadcrumb li.site {
background:url(/images/breadcrumb/bullet-site.gif) no-repeat left center;
padding-left:13px;}


#breadcrumb li:first-child, #breadcrumb li.root {background:none;
padding-left: 0;}

#breadcrumb li a{
color:#fffffe;/**/
padding:1px;
}

#breadcrumb li a:hover{
color:#000001;/**/
text-decoration:none;
background:#fff;}

/* =============================================== */
/*             4. SYSTEM MESSAGE                   */
/* =============================================== */

#SystemMessage{
	clear:both;
	background:#ffffe0;
	border:2px solid #fec400;
	padding:5px 20px;
	color:#000001;/**/
	margin:10px auto;
	width:726px;

}

#SystemMessage h3{
font-size:1.2em;
padding-bottom:5px;
border-bottom:1px solid #fef1b5;}

/* =============================================== */
/*        5. ORGANIZATION HEADER                   */
/* =============================================== */


#SiteHeader p{margin:0px;}

#SiteHeader table{clear:both;}	/* fix for table width=100% */

#SiteHeader img { max-width: 770px;}


/* =============================================== */
/*          6. SITE TITLE HEADER                   */
/* =============================================== */



/* =============================================== */
/*                   7. WRAP                       */
/* =============================================== */
#wrap{
clear:both;
border-bottom:1px solid #999;
/*overflow:hidden;*/
}


/* =============================================== */
/*                8. SIDEBAR                       */
/* =============================================== */




/* -- MEMBER COUNT --*/


#MemberCount{
background: url(/images/structure/stamp.gif);
line-height:48px;
text-align:center;
margin-bottom:10px;
}

#MemberCount a{
color:#fffffe;/**/
font-size:1.2em;
text-decoration:none;
}

#MemberCount a:hover{text-decoration:underline}



/* -- Business banners --*/

#BusinessBanners{
color:#cccccd;/**/
padding:5px 0;
margin:10px 0;
text-align: center;}


#BusinessBanners h3{line-height:0;}

#mmbr {
	background: transparent url(/images/icons/fff/key.png) left center no-repeat;
	padding:5px 0 5px 20px ;
	font-size:1em;
}
/* =============================================== */
/*                   9. MAIN                       */
/* =============================================== */

.main_style a:hover{ color:#fffffe;/**/ text-decoration:none;}
#main a[target="_blank"]{
  background-image:url(/images/link_new_window.gif);
  background-repeat:no-repeat;
  background-position:right center;
  /*background-attachment:fixed;*/
  padding-right:16px;
}

#PageContent h4 a {color:#000001;/**/}

#PageContent h4 a:hover {color:#FFFFFE;/**/}
/* --- Banner --- */

#banner{padding:0px 0 0px 0; margin:10px 0;}


#banner img{
max-width: 550px;
}

#banner p{
margin:0px;
}


/* --- Action Box --- */

#ActionBox{
width:180px;
padding-top:5px;
}

#ActionBox dl{
border:1px solid #999;
padding:5px;
margin:0px 0 10px 0px;
background:#fff;
}

#ActionBox dt{
background:#999;
color:#fffffe;/**/
padding:2px 5px;
font-weight:bold;
margin-bottom:2px;
}

#ActionBox dd{padding:1px; line-height:16px;}

#ActionBox dd a:hover{color:#fffffe;/**/}

#ActionBox dd a{color:#222; text-decoration:none;}

#SideBar #ActionBox {font-size: 1.2em;}


.main_style{font-size: 1.2em;}

.main_style p{font-size: 1em;}

.main_style h1{font-size:2.2em;}
.main_style h2{font-size:2em;}
.main_style h3{font-size:1.6em;}

.main_style h1, .main_style h2, .main_style h3{ margin:10px 0}

.main_style h4{
  margin:10px 0;
  color:#000;
  padding:2px;
  font-size:1.2em;
  background-color:#e3e3e3;
  border:1px solid #bbb;
}

.main_style h4 a {
	color: #fffffe;/**/
}
.main_style h5{
padding:2px;
background:none;
font-size:1.4em;
border-bottom-width:1px;
border-bottom-style:solid;
}

.main_style h6{
background:#fffedb;
border-bottom:1px dotted #b0aea2;
padding:5px 2px;
font-size:1.2em;
color:#000001;/**/
text-align:left;
margin:10px 0;}

.main_style ul, .main_style ol{
padding-left:25px;
margin:10px 0;}

.main_style ul li, .main_style ol li{
list-style:disc outside;
padding:2px 0;
}

.main_style ol li{list-style:decimal outside;}
#main li ul, #main li ol{margin:0} 

.main_style ul li {list-style:disc outside;}

.main_style ul ul, .main_style ol ol{margin:5px 0;}
.main_style ul ul li, .main_style ol ol li{font-size:1em;}
.main_style ul ul li {list-style:circle outside;}


#BoxSet{
	clear: right;
	margin-right:-10px;}

.ResourceBox{
background:#fff;
float:left;
width:174px;
margin:5px 5px 5px 0;
border:1px solid #999;
}

#main .ResourceBox h4{
background-image:url(/images/resourcebox/bg_header.png);
background-repeat:repeat-x;
background-position:0 0;
padding:5px;
color:#fffffe;/**/
font-weight:bold;
font-size:1em;
margin:0;
display:block;
}

#main .ResourceBox h4 a{ color: #fffffe;/**/}

.ResourceBox h4 span{font-weight:normal;}

.ResourceBox .site_reference { padding-left: 1em; font-size: .8em;}

#main .ResourceBox ul{
height:200px;
overflow:auto;
position:relative;
margin:0;
padding:5px;
font-size:1em;
}

#main .ResourceBox ul li{
padding:5px 0;/* resets */
list-style:none outside;
border-bottom:1px solid #f1f1f1;
}

#main .ResourceBox ul li:first-child{padding-top:0;}

#main .ResourceBox ul li:last-child{
border-bottom:none;
padding-bottom:0;}

#main .ResourceBox ul li a{display:inline-table; color:#222; padding:0; margin:0}

#main .ResourceBox ul li a:hover{color:#fffffe/**/;}

#main .ResourceBox ul li a img{
border:1px solid #ccc;
padding:1px;
}

#main .ResourceBox ul li a:hover img{border:1px solid #333;}

#main .more{
padding:0;
margin:0;
border:none;
background:#999;
text-align:right;
display:block;
padding:2px 5px;
/*color:#fff;*/
font-weight:bold;
font-size: .9em;
}

#main .more a{
color:#fffffe;/**/
text-decoration:none;
margin:0px 0 0 0;
font-weight:bold;
}

#main .more a:hover{text-decoration:underline;}


.ResourceBoxPhotoAlbum {
  width: 550px;
}

#main .ResourceBoxPhotoAlbum ul {
  height: 155px;
}

.ResourceBoxPhotoAlbum .album {
    padding-left: 5px;
}

.ResourceBoxPhotoAlbum .album dl{
  width: 165px;
}

/* image reisze */

#main img {
max-width:550px;
}

/* -- back to top -- */

h6#topper {
clear:both;
text-align:right;
padding-top:5px;
font-size:1em;
border-bottom:none;
background:none;
margin:10px 0 0 0;
}

.main_style h6#topper a{
padding:0 0 0 16px;
background:url(/images/icons/bullet_arrow_top.gif) no-repeat left center;
text-decoration:none;
font-size:.9em;
color:#999998;/**/
}
.main_style h6#topper a:hover{background:url(/images/icons/bullet_arrow_top.gif) no-repeat left center;color:#555;/**/background-color:transparent; text-decoration:underline}


/* -- regular table -- */

table.RegularTable{
width:100%;
font-size:1.2em;
}


#PageContent caption {
color:#fffffe;/**/
padding:2px;
font-size:1.4em;
font-weight:bold;
}

table.RegularTable caption{
font-weight:bold;
padding:5px 0;
border-top:2px solid #999;
text-align:left;
}

table.RegularTable, table.RegularTable td, table.RegularTable th{
border-collapse:collapse;
border:1px solid #999;
}

table.RegularTable td{padding:2px 5px;}

table.RegularTable th{
color:#fffffe;/**/
text-align:left;
padding:5px;
border-left-color:#fff;
border-right-color:#fff;}


table.RegularTable tr.alt{}

.regional_photo
{
  padding: 8px;
  float: left;
  width: 200px;
  height: 200px;
}

/* =============================================== */
/*                  9-1. SOCIAL FOOTER             */
/* =============================================== */

div.social_bookmark{
	float:left;
}
div.social_bookmark p{
	margin-top:0px;padding-top:0px;
}
div.topper_container{
	float:right;
}
div.social_footer{
	border-top:1px solid #CCCCCC;
}
h6#topper{
	margin-top:0px;border:none;
}





/* =============================================== */
/*                  10. FOOTER  		           */
/* =============================================== */

#footer{
font-size:1.2em;
clear:both;
padding:0px;
}




/* =============================================== */
/*                  11. ECOFOOTER                  */
/* =============================================== */


#EcoFooter{
font-size:1.2em;
clear:both;
padding:10px 0;
}

#EcoFooter a{text-decoration:none;}

#EcoFooter ul{
float:right;
}

#EcoFooter ul li{
float:left;}

#EcoFooter ul li a{
display:block;
position:relative;
padding:2px 10px 2px 10px;
border-left:1px solid #000;
color:#000001;/**/}

#EcoFooter ul li.NoBorder a img {
/*	position:absolute;
	top:0;
	left:-15px;*/
}
#EcoFooter ul li a:hover{
background:#000;
color:#fffffe;/**/
text-decoration:none;}

#EcoFooter ul li:first-child a{
border-left:none;}

#EcoFooter p {
	font-size: 1em;
	margin-top: 5px;
}
#EcoFooter ul, #EcoFooter p {
	float: right;
	clear: right;
}

#EcoFooter ul li#login a{
display: block;
background-color: transparent;
background-image: url(/images/icons/fff/lock.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 20px;
}

* html #EcoFooter ul li#login a{background-image: url(/images/icons/fff/lock.gif);}

#EcoFooter ul li#login a:hover{
background-color: #000;}



#EcoFooter a {padding:2px;}

#EcoFooter a:hover{
background:#000;
color:#fffffe;/**/
text-decoration:none;}

p#hostnote {
	float:left;
	text-align:left;
	width: auto;
	}

p#hoston {
	clear:both;
	text-align:right;
	white-space:nowrap;
}

/* =============================================== */
/*             12. CALENDAR TABLE                  */
/* =============================================== */

table#calendar{
width:100%;
}

table#calendar caption{
font-size:1.4em;
font-weight:bold;
padding:5px 0;
border-top:2px solid #999;
text-align:left;
}

table#calendar, table#calendar th, table#calendar tr, table#calendar td{
border-collapse:collapse;
border:1px solid #999;
vertical-align:top;
}

table#calendar th, table#calendar td{padding:5px;}
table#calendar td{width:14%; font-weight:bold;}
table#calendar td#today{background:#ffffe0;}

table#calendar td ul {
margin:5px 0 0 0;
padding:0;
border-top:1px solid #ccc;
}

table#calendar td ul li{
font-weight: normal;
list-style:none;
border-bottom:1px solid #ccc;
padding:2px 0;
margin:0;
}

table#calendar td ul li a{display:block;}

/* Event Table */

table.event_table { border: 1px solid #808080; border-spacing: 0px; width: 100%;}
/*
table.event_table th { padding: 5px 3px 5px 3px; border-width: 0px; text-align: left; }
table.event_table td { padding: 5px 3px 5px 3px; border-width: 0px; }
*/
table.event_table tr.even { background-color: #dce9e9;}

table.monthly_event_table { border: 1px solid #808080; border-spacing: 0px; width: 100%;}
/*
table.monthly_event_table th { padding: 5px 3px 5px 3px; border-width: 0px; text-align: left; }
table.monthly_event_table td { padding: 5px 0px ; border-width: 0px; border-top: 1px dashed #aaa; padding-left: 5px;}
*/
table.monthly_event_table tr.month td { color: #000; font-weight: bold; background-color: #bfbfbf;  padding: 6px 4px; border-top: none;}

table.site_table th a { color:#fffffe !important;/**/}
table.regional_table { border: 1px solid #808080; border-spacing: 0px; width: 100%;}
table.regional_table th { padding: 5px 3px 5px 3px; border-width: 0px; text-align: left;}
table.regional_table td { padding: 5px 3px 5px 3px; border-width: 0px; vertical-align:top;}
tr.even { background-color: #dce9e9;}
tr.odd {}

/* =============================================== */
/*                13. EDIT                         */
/* =============================================== */

#edit_container
{
	width:100%;
	margin: 0px;
	padding: 0px;
}

#edit_sidebar
{
	margin: 0px;
	padding: 5px;
	width: 300px;
	float: left;
}

#edit_main
{
	margin-left:300px;
}

#edit_content
{
  margin: 0pt auto;
  width: 570px;
  text-align: left;
  font-size: 1.2em;
}

.edit_section 
{
	float: left;
	border: 1px solid #808080;
  margin: 3px;
	width: 300px;
	background-color: #f9f9f9;
	
}

.edit_section .title
{
	background-image: url(/images/site/section.png);
	color: #fffffe;/**/
  text-align: center;
  margin: 3px;
	letter-spacing: 2px;
}

.edit_section .body
{
  font-size: 9pt;
	margin: 3px;
}

.edit_section td
{
  white-space: nowrap;
  text-align: left;
}

.edit_section td.page_stats_head
{
  font-weight: bold; 
  text-align: right;
}

.pagination {
	padding: 3px;
	margin: 3px;
	clear: both;
}
.pagination a {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	border: 1px solid #aaaadd;
	text-decoration: none;
	color: #000001;/**/
}
.pagination a:hover, .pagination a:active {
	/*border: 1px solid #000000;*/
	color: #ffffff;
	background-color:#000000;
}
.pagination span.current {
	padding: 2px 5px 2px 5px;
	margin: 2px;
	/*border: 1px solid #2f2f2f;*/
	font-weight: bold;
	background-color: #2f2f2f;
	color: #FFF;
}
.pagination span.disabled {
	display:none;
}

/* =============================================== */
/*                14. CALENDAR VIEW                */
/* =============================================== */

#calendars_show #main{
  width:750px;
  float:none;
}
#calendars_show #CalendarViewing .calendar {
  clear:both;
}
#calendars_show tr.monthName th {
  color:#FFFFFE;/**/
  font-size:1.4em;
  font-weight:bold;
  text-align:center;
  padding:10px 0 5px 0;
  text-transform:uppercase;
}
#calendars_show td.day{
  vertical-align:top;
  padding:0;
}
#calendars_show td.day a {
  clear:both;
  display:block;
  padding:2px 5px;
  font-size:.9em;
  text-decoration:none;
  border-bottom:1px solid #e3e3e3;
}
span.CalendarDay {
  display:block;
  font-weight:bold;
	background-color: #cacaca;
	color: #000000;
	float:left;
	height:1.8em;
	line-height:1.8em;
  width:1.8em;
  text-align:center;
  margin-bottom:4px;
}
#calendars_show td.EventToday span.CalendarDay {
  background-color: #6a6a6a;
	color: #FFFFFF;
}
.otherMonth {
  border-bottom:1px dotted #BBBBBB;
  padding:0;
}
#calendars_show .otherMonth span.CalendarDay {
  background-color:transparent;
  font-weight:normal;
  color:#afafaf;
}
.FilterResults form {
  float:left;
}
ul.CalendarViewOptions {
  background:none repeat scroll 0 0 #efefef;
  height:29px;
  padding:0;
  width:60px;
  border: 1px solid #5f5f5f;
  float:right;
}
.main_style ul.CalendarViewOptions li {
  list-style:none;
  float:left;
  padding:5px;
}
.main_style ul.CalendarViewOptions li a, .main_style ul.CalendarViewOptions li span {
  height:17px;
  width:18px;
  text-indent:-10000px;
  display:block;
}
.main_style ul.CalendarViewOptions li#CalendarViewLink a {
  background:#afafaf url(/images/icons/calendar_view.png) -2px -3px no-repeat;
  border:1px solid #ffffff;
}

.main_style ul.CalendarViewOptions li#CalendarViewLink a:hover {
background-color: #6A6A6A;
}

.main_style ul.CalendarViewOptions li#CalendarViewLink span {
background:#6A6A6A url(/images/icons/calendar_view.png) -22px -2px no-repeat;
  padding:1px;
}

.main_style ul.CalendarViewOptions li#TableViewLink a {
  background:#afafaf url(/images/icons/list_view.png) -2px -3px no-repeat;
  border:1px solid #ffffff;
}
.main_style ul.CalendarViewOptions li#TableViewLink a:hover {
background-color: #6A6A6A;
}
.main_style ul.CalendarViewOptions li#TableViewLink span {
background:#6A6A6A url(/images/icons/list_view.png) -22px -2px no-repeat;  
  padding:1px;
}

.main_style ul.CalendarViewOptions li.ActiveCalendarLink  {
  background: #6A6A6A;
}
.main_style ul.CalendarViewOptions li.HoverLink {
  background:#afafaf;
  cursor:pointer;
}
/* =============================================== */
/*                15. CLEARFIX                     */
/* =============================================== */

.clearfix:after, #breadcrumb:after, #CommunityHeader:after, #SiteHeader:after, #wrap:after, #BoxSet:after, #BoxSetBg:after, #TopBar:after, .ModuleBox:after, .ModuleBox form:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, #breadcrumb, #CommunityHeader, #SiteHeader, #wrap, #BoxSet, #BoxSetBg, #TopBar, .ModuleBox, .ModuleBox form {display: inline-table;}

/* Hides from IE-mac \*/
.clearfix, #breadcrumb, #CommunityHeader, #SiteHeader, #wrap, #BoxSet, #BoxSetBg, #TopBar, .ModuleBox, .ModuleBox form {height: 1%;}
.clearfix, #breadcrumb, #CommunityHeader, #SiteHeader, #wrap, #BoxSet, #BoxSetBg, #TopBar, .ModuleBox, .ModuleBox form {display: block;}
/* End hide from IE-mac */

/* =============================================== */
/*                15. MAP                          */
/* =============================================== */
div#map_div_id h5 {
	padding-top:0;
}

div#map_div_id p {
	padding-top:5px;
	padding-bottom:0px;
}
ul.map_category_list, ul.map_category_list li {
	list-style:none;
	padding-left:0;
}

ul#map_locations {
	padding-left:5px;
}

/* ========== Abuse  ============*/
div#abusediv li { list-style:none !important; }





/* =============================================== */
/*                18. IE <li><a href="http://www.townlife.com/authenticate/login">Log In</a></li>  */
/* =============================================== */


* html table.RegularTable{width:99%;}
* html .SearchBox input{width:81px}
* html #NavBar li a, * html #SiteNavBar li a, * html #main{height:1%;}
* html #SiteNavBar li{display: inline;}/* strange gap bug on IE6 */ 


* html .SearchBox {margin:0;}

* html .ResourceBox{margin:0 7px 10px 0;}

/* html #main{padding:0px 10px 10px 17px;}*/

* html #BusinessBanners img{

}

* html #SiteHighlight img{

}

#SiteHighlight img{
max-width: 180px;
}

* html #banner img{

}

* html .main_style img{

}

* html #SiteHeader img{

}

/* Fix for IE : before LOCATION */
#breadcrumb li#nobg, .nobg {background:none !important;}

/* ============================================== */
/*              11. Alphabetic Navigation         */
/* ============================================== */

  ul.alphaNav{
    height:32px;
    padding:0px;
  }
  .alphaNav li{
    float:left;border:1px solid #888;margin:2px;
    padding:3px!important;
    list-style-type:none!important;
  }
  .alphaNav li.selected{
    background-color: #888;    
  }
  .alphaNav li.selected a{
    color:#fff;
    text-decoration:none;
  }

/* ==================================================== */
/*          12. PDF display on Document + Bylaw         */
/* ==================================================== */
.pdfFrame{
  width:100%;height:500px;
}