@charset "UTF-8";
/* ======================================================================================================*/
/*
-- GCABC - GIFTED CHILDREN'S ASSOCIATION OF BC
-- WEBSITE MADE BY THE INSTITUTE OF ADVANCED MEDIA - WWW.IAMTRAINING.COM
-- VANCOUVER, BC, CANADA
-- AUTHOR: CAIO PREZIA - PREZIA@YAHOO.CA
-- DATE: 05 JAN 2009
*/


#loginbox img, div { behavior: url(http://studyinvancouver.com/linh_nguyen/gcabc/webroot/iepngfix.htc) }

body{
background-image:url(http://www.gcabc.ca/layout/background_repeat.jpg);
background-repeat:repeat-x;
background-color:#67aaa3;
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
}
#wide{
background-image:url(http://www.gcabc.ca/layout/background.jpg);
background-repeat:no-repeat;
width:100%;
position:absolute;
z-index:1;

}

#loginbox input{
border:0px;
height:14px;
background:#CAE8F7;
z-index:35;
}
#loginbox input.bot{
border:0px;
color:#FFFFFF;
background:#999999;
font-size:9px;
width:20px;
font-weight:bold;
margin-left:3px;
padding:2px;
z-index:37;
}

#loginbox{

width:222px;
height:103px;
float:right;
margin-right:10px;
margin-top:10px;
background-image:url(http://www.gcabc.ca/layout/loginbox.png);
background-repeat:no-repeat;
z-index:15;

padding:8px;
font-size:11px;
}

/*#content_corner_top{
position:relative;
width:862px;
z-index:10;
}*/

#main{
position:relative;
width:865px;
margin-left:70px;
margin-top:54px;

}

#imgtop1{
float:left;
position:relative;
width:850px;
height:210px;
margin-top:5px;
margin-left:4px;
background-image:url(http://www.gcabc.ca/layout/logo01.jpg);
background-repeat:no-repeat;

}

#imgtop2{
float:left;
position:relative;
width:850px;
height:210px;
margin-top:5px;
margin-left:4px;
background-image:url(http://www.gcabc.ca/layout/logo02.jpg);
background-repeat:no-repeat;

}
#imgtop3{
float:left;
position:relative;
width:850px;
height:210px;
margin-top:5px;
margin-left:4px;
background-image:url(http://www.gcabc.ca/layout/logo03.jpg);
background-repeat:no-repeat;

}
#imgtop4{
float:left;
position:relative;
width:850px;
height:210px;
margin-top:5px;
margin-left:4px;
background-image:url(http://www.gcabc.ca/layout/logo04.jpg);
background-repeat:no-repeat;

}


#mainmenu{
float:left;
position:relative;
width:815px;
margin-left:15px;
margin-top:12px;
z-index:20;
}



#content_corner_bottom{
position:relative;
width:862px;
}

#content{
position:relative;
width:862px;
background-color:#FFF;
background:#FFF;
height:auto;
overflow:auto;
}

#content input{
padding:3px;
border:0px;
height:20px;
color:#669966;
font-weight:bold;
font-size:16px;
background:#EDF8FE;
}
#content textarea{
padding:3px;
border:0px;
background:#EDF8FE;
}
#content input.bot{
border:0px;
color:#FFFFFF;
background:#999999;
font-size:12px;
width:140px;
height:24px;
font-weight:bold;
margin-left:3px;
padding:2px;
}



#footer{
margin-left:15px;
margin-top:20px;
width:860px;
font-size:12px;
color:#FFFFFF;

background-image:url(http://www.gcabc.ca/layout/background_footer.jpg);
background-repeat:no-repeat;
}

#footer a{
color:#FFF;
text-decoration:none;
}

#footer ul {
list-style: none;
list-style-type:circle;
}

.footer_title{
margin-left:-15px;
font-family:georgia;
font-size:19px;
color:#003300;
}

#footer01{
position:relative;
float:left;
width:150px;
height:150px;
}

#footer02{
float:left;
position:relative;
width:150px;
height:150px;
margin-left:15px;
}

#footer03{
float:left;
position:relative;
width:150px;
height:150px;
margin-left:15px;
}

#footer04{
float:left;
position:relative;
width:150px;
height:145px;
margin-left:15px;
}

#footer05{
float:left;
position:relative;
width:145px;
height:150px;
margin-left:15px;
}

#credits{
margin-left:auto;
margin-right:auto;
color:#FFFFFF;
width:600px;
margin-top:20px;
text-align:center;
height:60px;
}

#content_left{
margin-top:8px;
width:530px;
float:left;
margin-left:15px;
-moz-margin-left:15px;

font-size:14px;
line-height:16px;
}
#boardofdirectors{
width:360px;
margin-left:40px;
}

#main_headline{
width:500px;
height:150px;
background-image:url(http://www.gcabc.ca/layout/background_headline.jpg);
background-repeat:no-repeat;
padding:8px;
}
#headline_photo{
width:130px;
height:100px;
float:left;
margin-top:10px;
}
#headline_text{
position:relative;
float:right;
width:350px;
font-size:12px;
margin-right:5px;
margin-top:10px;
}

#news{
width:510px;
margin-top:10px;
font-size:12px;
}

#locations{
width:510px;
height:100px;
margin-top:10px;
font-size:12px;
}

#events_topcorner{
position:relative;
float:right;
width:254px;
height:12px;
margin-right:17px;
background-image:url(http://www.gcabc.ca/layout/events_top.jpg);
background-repeat:no-repeat;
}

#events{
position:relative;
float:right;
width:236px;
padding:10px;
margin-right:16px;
overflow:visible;
background-image:url(http://www.gcabc.ca/layout/events_middle.jpg);
background-repeat:repeat-y;
font-size:12px;
}

#events_list{
width:220px;
margin-left:auto;
margin-right:auto;
}

#events_bottomcorner{

float:right;
width:254px;
height:30px;
margin-right:17px;
background-image:url(http://www.gcabc.ca/layout/events_bottom.jpg);
background-repeat:no-repeat;
}

h2{
font-family:Georgia;
font-size:22px;
color:#009999;
width:530px;
height:35px;
background-image:url(http://www.gcabc.ca/layout/linestar_orange.jpg);
background-repeat:no-repeat;
font-weight:normal;
line-height:20px;
}
.whatsnew_seeall{
font-family:Georgia;
font-size:12px;
color:#6633CC;
width:530px;
height:35px;
font-weight:normal;
}


.login_title{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#6633CC;
font-weight:bold;
padding:10px;
padding-top:8px;
}

.headline_title{
font-size:22px;
font-family:Georgia;
color:#009999;
}

.events_title{
font-size:22px;
font-family:Georgia;
color:#009999;
margin-left:8px;
margin-top:-5px;
width:230px;
border-bottom:#F0f0f0 1px solid;
}
.events_date{
font-size:12px;
color:#009999;
}
.events_location{
font-size:9px;
color:#CC9900;
}

.news_title{
font-size:18px;
color:#666666;

font-family:trebuchet;
}
.news_readmore{
font-size:12px;
font-weight:bold;
color:#CC6600;
}
#title02{
font-size:16px;
font-weight:bold;
color:#0099FF;
margin-left:-15px;
margin-bottom:5px;
}

/* ======================================================================================================*/
/* START MENU CSS 
Im using Dreamweaver TabbedPanels component for the menu
*/

.TabbedPanels {

	margin: 0px;
	padding: 0px;
	float: left;
	clear: none;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

/* This is the selector for the TabGroup. The TabGroup container houses
 * all of the tab buttons for each tabbed panel in the widget. This container
 * does not contribute anything visually to the look of the widget for our
 * default style.
 *
 * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabGroup container.
 */
.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the TabbedPanelsTab. This container houses
 * the title for the panel. This is also the tab "button" that the user clicks
 * on to activate the corresponding content panel so that it appears on top
 * of the other tabbed panels contained in the widget.
 *
 * For our default style, each tab is positioned relatively 1 pixel down from
 * where it wold normally render. This allows each tab to overlap the content
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom
 * border that has a color that matches the top border of the current content
 * panel. This gives the appearance that the tab is being drawn behind the
 * content panel.
 *
 * The name of the class ("TabbedPanelsTab") used in this selector is not
 * necessary to make the widget function. You can use any class name you want
 * to style this tab container.
 */
.TabbedPanelsTab {

	position: relative;
	top: 1px;
	float: left;
	padding: 4px 10px;
	margin: 0px 1px 0px 0px;
	font: bold 0.8em sans-serif;
	list-style: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
}

/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.TabbedPanelsTabHover {
color:#666666;

}

/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.TabbedPanelsTabSelected {
color:#336633;
background-color:#b8d7d4;


}

/* This selector is an example of how to make a link inside of a tab button
 * look like normal text. Users may want to use links inside of a tab button
 * so that when it gets focus, the text *inside* the tab button gets a focus
 * ring around it, instead of the focus ring around the entire tab.
 */
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
	font-family:Trebuchet,arial;
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
 * all of the content panels for each tabbed panel in the widget. For our
 * default style, this container provides the background color and borders that
 * surround the content.
 *
 * The name of the class ("TabbedPanelsContentGroup") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the ContentGroup container.
 */
.TabbedPanelsContentGroup {
	clear: both;
	
}

/* This is the selector for the Content panel. The Content panel holds the
 * content for a single tabbed panel. For our default style, this container
 * provides some padding, so that the content is not pushed up against the
 * widget borders.
 *
 * The name of the class ("TabbedPanelsContent") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the Content container.
 */
.TabbedPanelsContent {
	padding: 4px;
}
.TabbedPanelsContent a {
text-decoration:none;
color:#333333;
}

/* This selector is an example of how to change the appearnce of the currently
 * active container panel. The class "TabbedPanelsContentVisible" is
 * programatically added and removed from the content element as the panel
 * is activated/deactivated.
 */
.TabbedPanelsContentVisible {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

/* Vertical Tabbed Panels
 *
 * The following rules override some of the default rules above so that the
 * TabbedPanels widget renders with its tab buttons along the left side of
 * the currently active content panel.
 *
 * With the rules defined below, the only change that will have to be made
 * to switch a horizontal tabbed panels widget to a vertical tabbed panels
 * widget, is to use the "VTabbedPanels" class on the top-level widget
 * container element, instead of "TabbedPanels".
 */

/* This selector floats the TabGroup so that the tab buttons it contains
 * render to the left of the active content panel. A border is drawn around
 * the group container to make it look like a list container.
 */
.VTabbedPanels .TabbedPanelsTabGroup {
	float: left;
	width: 10em;
	height: 20em;
	position: relative;
	
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTab {
	float: none;
	margin: 0px;
	border-top: none;
	border-left: none;
	border-right: none;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTabSelected {

}

/* This selector floats the content panels for the widget so that they
 * render to the right of the tabbed buttons.
 */
.VTabbedPanels .TabbedPanelsContentGroup {
	clear: none;
	float: left;
	padding: 0px;
	width: 30em;
	height: 20em;
}