@charset "UTF-8";
/* CSS Document */


/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 

body{
	font-family: Arial,sans-serif;
	font-size: 13px
	color: #000000;
	line-height: 1.166;	
	margin: 0px;
	padding: 0px;
}

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 120%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

h2{
 font-family: Arial,sans-serif;
 font-size: 14px;
 color: #7E0000;
 margin: 0px;
 padding: 0px;
}

h3{
 font-family: Arial,sans-serif;
 font-size: 14px;
 color: #7E0000;
 margin: 0px;
 padding: 0px;
 text-align: left;
 font-weight: bold;
}

h4{
 font-family: Arial,sans-serif;
 font-size: 16px;
 font-weight: bold;
 color: #7E0000;
 margin: 0px;
 padding: inherit;
 text-align: center;
}

h5{
 font-family: Verdana,Arial,sans-serif;
 font-size: 14px;
 color: #7E0000;
 margin: 0px;
 padding: 0px;
 text-align: center;
}

h6{
 font-family: Arial,sans-serif;
 font-size: 18px;
 font-weight: bold;
 color: #7E0000;
 margin: 0px;
 padding: inherit;
 text-align: center;
}

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: bold;
 color: #CCCCCC;
}

td.column{
	vertical-align: top;
}

img.floatLeft { 
    float: left; 
    margin: 4px; 
}
img.floatRight { 
    float: right; 
    margin: 4px; 
}


/**********************************************/
/* Link tag styles                             */
/*********************************************/ 

a:link{
	color: #336666;
	text-decoration: none;
}

a:visited{
	color: #336666;
	text-decoration: none;
}

a:hover{
	color: #336666;
	text-decoration: underline;
}

a img, a:link img { border: none;
}

/***********************************************/
/* Components                                  */
/***********************************************/

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

/************** .story styles *****************/

.story{
	clear: both;
	padding: 15px 5px 0px 30px;
	font-size: 12px;
	text-align:left
}

.story p{
	padding: 0px 0px 10px 0px;
}

/************** .popup styles *****************/

.popup{
	clear: both;
	padding: 12px 5px 0px 12px;
	font-size: 12px;
	text-align:left
}

.popup p{
	padding: 0px 0px 10px 0px;
}

/************** .story2 styles *****************/

.story2{
	clear: both;
	padding: 15px 0px 0px 0px;
	text-align:left
}


/************** .feature styles *****************/

.feature{
	font-family:Verdana, Arial, Helvetica, sans-serif
	clear: both;
	padding: 15px 30px 0px 30px;
	font-size: 12px;
	text-align:left
}

.feature p{
	padding: 0px 0px 10px 0px;
}

/************** .holiday styles *****************/

.holiday{
	clear:both;
	background-image:url(http://www.peacenetwork.ca/images/xmas-card-2.png);
	padding: 2px, 2px, 2px, 2px;
	text-align: left
}

.holidaythanks{
	width: 540px;
	clear:both;
	background-image:url(http://www.peacenetwork.ca/images/xmas-card-3.png);
	padding: 0px, 0px, 0px, 0px;
	text-align: left;
	display:block
}


/************** #sidefeature styles ***************/

#sidefeature{
	clear: both;
	padding: 0px 0px 0px 0px;
	font-size: 12px;
	text-align:left
}

#sidefeature h2{
	color: #000000;
	background-color: #FFFFFF;
	padding: 5px 3px 5px 3px;
	display: block;
	border-top: 2px solid #336666;
	border-right: 2px solid #336666;
	border-left: 2px solid #336666;
}

/************** #sidefeature2 styles ***************/

#sidefeature2{
	clear: both;
	padding: 0px 3px 5px 3px;
	font-size: 12px;
	text-align:left
	display: block;
	border-right: 2px solid #336666;
	border-bottom: 2px solid #336666;
	border-left: 2px solid #336666;
}

/************* .sidefeature3 styles (23,000 messages sent...)***************/

.sidefeature3{
	padding: 2px 2px 4px 4px;
	font-size: 11px;
	text-align:left;
	font-weight: 500;
	color: #ffffff;
}

.sidefeature3 h1{
	padding: 0px 0px 0px 8px;
	font-size: 12px;
	text-align:left;
	font-weight: 500;
	color: #ffffff;
}

.sidefeature3 h2{
	padding: 2px 0px 0px 0px;
	font-size: 12px;
	text-align:left;
	color: #ffffff;
}

.sidefeature3 h3{
	padding: 0px 0px 1px 2px;
	font-size: 12px;
	text-align:left;
	font-weight: 500;
	color: #ffffff;
}

.sidefeature3 p{
	line-height: 1.466;
	margin: 0px;
	font-size: 11px;
	padding: 0px 0px 0px 0px;
}

.sidefeaturecounter{
	padding: 10px 0px 0px 19px;
}

/************* .sidefeaturewrapper styles (green border)***************/

.sidefeaturewrapper{
	border-right: 2px solid #2c5b65;
	border-bottom: 2px solid #2c5b65;
	border-left: 2px solid #2c5b65;
	border-top: 2px solid #2c5b65;
}


/************** .sidebar styles *****************/

.sidebar{
	font-size: 12px;
	font-weight: bold;

}

/************* recent news ****************/

#newsPreview {
	font-size: 12px;
	font-family: Arial;
	border: 2px solid #336666;
	color: #000000;
	background-color: #FFFFFF;
	padding: 5px 3px 5px 3px;
}

/*************** 'pop-up' and translucent curtain ***************/

#translucentCURTAIN {       /*    The number sign means that you are creating a unique "ID" for a div with the name 'translucentCURTAIN */
display: none;           /*    This is the setting that will make sure normally your "cover-all" div is not shown until you click the trigger link */
z-index: 15;             /*    Ensures that when the trigger link is clicked, the div shows up above all others except the popup */ 
position: absolute;           /*    Makes sure that the cover all div is absolutely positioned, instead of appearing below the preceding div by default */
top: 0px;           /*    positions the div in the top left corner so it extends down and across */
left: 0px;           /*    positions the div in the top left corner so it extends down and across */
height: 1200px;           /*    Unless you position the div in a larger container, specifying the height is necessary.  Older versions of IE  do not interpret undefined and relative height values like '100%'. */
width: 100%;            /*    ensures the cover all div stretches across the entire page */
background-color: #666;           /*    Change color to whatever you want.  30% opacity on a white background looks pretty good.  Kayak.com has 40% opacity on color labeled "#666" */
opacity: .30;             /*    *Sets CSS3 opacity to 30% */
-moz-opacity: .30;          /*    Sets opacity to 30% for Mozilla-based browsers */
-khtml-opacity: .30;          /*    Sets opacity to 30% for KDE based browsers (Conquerer, Safari, the  new Google Chrome, etc) */
filter: Alpha(opacity=30);          /*    Sets opacity to 30% using IE filters */
}

#popup {         /* Whatever name you want to assign to the "pop-up" div */
position: absolute;       /*   Absolutely positions the pop up, giving you full control over where it appears */
top: 60px;       /* The popup div will start 100 pixels from the top of the page */
left: 30%;          /* The popup div will start 20% of the way in from the left */
padding: 10px;       /* Gives the popup 10 pixels space all around between the border and the text */
width: 550px;       /* the div will be 400 pixels wide */
height: 490px;       /* sets the height to 300 pixels tall */
background-color: #F0F0F0;    /* Sets the background color to a smooth and very light grey */
border: 1px solid black;       /* Gives the div a small black border */
display: none;       /* Again, same as with the previous div, hides the div until it is triggered */
z-index:20;         /* Sets the div above everything, INCLUDING the coverall div above, which has a z-index of 15 */
text-align: left;    /* aligns text to the left.  This is a default setting, but I thought I would include it anyway */
color: #484848;   /* the color of the text inside the div is set to a few shades lighter then solid black */
}