/* List of section names:
 *
 * All
 * Header
 * Breadcrumb
 * Content
 * Side Navigation
 * Footer
 *
 * Print
   
   
   LAYOUT STYLES FOR THE MASTER PAGE - INITIATING ALL AT 0 now in a separate file "Initialization.css"
 *
 * Note:  I am prefixing each major section's heading with a '/', like so:  '/My Heading'.
 * This is so you can easily get to the section of the stylesheet that you want by typing 
 * Ctrl+F and "/name of section" in the search field from anywhere in the stylesheet. */

 
	body {
		background-color:#555555;   /* affects html, aspnetForm and wrap definitions */
		margin-top:10px;
		margin-bottom: 10px;
		background-image: url('../images/master_page/bg_logo_tile.gif');
	}

		
	/* #bodywrap {
		background-color: #666;
		margin: auto;
		width: 957px;
		overflow: hidden;
		padding: 0px;
	} */
	
	
	#wrap {
		/*border-top: 1px solid #ACACAC;
	    border-right: 1px solid #ACACAC;
	    border-left: 1px solid #ACACAC;
	    border-bottom: 5px solid #ACACAC; */
	    
	    background-color: #E1E1Df;
		margin: auto;
		width: 955px;
		overflow:hidden; 	   /* must add this to show body bg color */
	}
	
	#b-wrap {
		background-color: #E1E1Df;
		background-image:url('../images/master_page/BG_wrapper_bottom.jpg');
		background-repeat: no-repeat;
		height: 19px;
		margin: auto;
		width: 955px;
		overflow:hidden;
	}
		
	#aspnetForm /* required by .net */ {
	/*	background-color: White; remove this if body background color is white */
		width: 955px;
		margin: auto;
	}

	/*Make skip content link only appear to screen readers*/
	#skip_to_content {
		display: block;
		font-size: 1%;
		height: 0px;
		left: -10px;
		position: absolute;
		text-indent: -999em;
		top: -10px;
	}

	a img, a:hover img {
		border: 0px;
		background: transparent;
	}
	
	:focus
	{
		-moz-outline-style: none;
	}


	/*================================
	 /Emergency message block styles
	==================================*/	
	.emergency
    {	
		position: fixed;
		top: 140px;
		left: 50%;
		border: 10px #990000 solid;
		margin-left: -150px;
    	width: 300px;
    	padding: 5px;
    	line-height: 130%;
    	background-color: #FFF;
    	background-image: url('../images/emer_bg.gif');
		background-position: bottom right;
		background-repeat:no-repeat;
		overflow:hidden;
	}
	
	    

	/*=================
		/Header
	=================*/
	
	#header {
		width: 955px;
		margin: 0px 0px 0px 0px;
		padding: 0;
		height: auto;
z-index: 20;
position:absolute;		
	}
	
	#header img {
		border: 0px;
		margin-top: 20px;
		margin-bottom: 20px;
		}
	
	#header .logo a:link, #header .logo a:hover, #header .logo a:active, #header .logo a:visited {
		background-color: transparent;
		border: none;
	}
	
	#header .logo 
	{
		padding-left: 5px;
		background: #FFF;		
	}
	
	#header .txtfloat {
		width: 500px;
		float: right;
		padding-right:12px;
	}
	
	#main_phone
	{
		font-size: 120%;
		font-weight: bold;
		float:right;
		margin-top: 5px
	}
	
	#quick_links
	{
		font-size: 93%;
		margin-top:5px;
		margin-bottom:15px;
		color: #444da0;
		text-align:right;
	}
	
	


#header ul{margin:0px;padding:0px;}
/* ----------------------------- start #top_nav ----------------------------- */

#top_nav {margin:0px;padding:0px;}
#top_nav {background:#000 url('../images/navigation/topbar/blue_background.gif') top left;background-repeat: repeat-x;}
#top_nav img { border: none; }
#top_nav {height:35px;}
#top_nav li { margin-left:0px;padding-left:0px;display: inline; list-style:none; }
#top_nav li a {padding:0px;margin:0px; float: left; display:block;  height:35px }
#top_nav li a img {padding:0px;margin:0px;  border:none; vertical-align:bottom; /* for IE6 */}
#top_nav li a:hover {padding:0px;margin:0px; visibility:visible; }
#top_nav li a:hover img {padding:0px;margin:0px; visibility:visible; }
#top_nav li a:hover img/**/ {padding:0px;margin:0px; visibility:hidden; /* hide from IE5.0/win */}
/* ----------------------------- end #top_nav ----------------------------- */


/* ----------------------------- start #top_nav ids ----------------------------- */

#programs {width:185px; background:url(../images/navigation/topbar/programs_highlight.gif) no-repeat left bottom; }
#students {width:162px; background:url(../images/navigation/topbar/students_highlight.gif) no-repeat left bottom; }
#services {width:154px; background:url(../images/navigation/topbar/services_highlight.gif) no-repeat left bottom; }
#community {width:200px; background:url(../images/navigation/topbar/community_highlight.gif) no-repeat left bottom; }
#about_us {width:88px; background:url(../images/navigation/topbar/about_us_highlight.gif) no-repeat left bottom; }

#programs_selected {width:185px; background:url(../images/navigation/topbar/programs_selected_highlight.gif) no-repeat left bottom; }
#students_selected {width:162px; background:url(../images/navigation/topbar/students_selected_highlight.gif) no-repeat left bottom; }
#services_selected {width:154px; background:url(../images/navigation/topbar/services_selected_highlight.gif) no-repeat left bottom; }
#community_selected {width:200px; background:url(../images/navigation/topbar/community_selected_highlight.gif) no-repeat left bottom; }
#about_us_selected {width:88px; background:url(../images/navigation/topbar/about_us_selected_highlight.gif) no-repeat left bottom; }
/* ----------------------------- end #top_nav ids ----------------------------- */

/* ----------------------------- start #cluster_nav ----------------------------- */
#cluster_nav {width:100%; height:35px;}
#cluster_nav {background-image: url('../images/navigation/topbar/cluster_nav/bg.gif'); background-repeat: repeat;}
#cluster_nav img { border: none; }
#cluster_nav li { display: inline; list-style:none; margin:0px;}
#cluster_nav li a { float: right; display:block;  height:35px; padding:0px;margin:0px; border:none; }
#cluster_nav li a img {padding:0px;margin:0px;  border:none; vertical-align:bottom; visibility:hidden; /* for IE6 */}
#cluster_nav li a:hover {padding:0px; margin:0px; visibility:hidden; }
#cluster_nav li a:hover img { visibility:hidden; }
#cluster_nav li a:hover img/**/ { visibility:visible; /* hide from IE5.0/win */}
/* ----------------------------- end #cluster_nav ----------------------------- */


/* ----------------------------- start #cluster_nav ids ----------------------------- */
#upgrading {width:78px; background:url(../images/navigation/topbar/cluster_nav/upgrading.gif) no-repeat left bottom; }
#business {width:65px; background:url(../images/navigation/topbar/cluster_nav/business.gif) no-repeat left bottom; }
#community_care {width:123px; background:url(../images/navigation/topbar/cluster_nav/community_care.gif) no-repeat left bottom; }
#fine_arts_and_design {width:68px; background:url(../images/navigation/topbar/cluster_nav/fine_arts_and_design.gif) no-repeat left bottom; }
#health_care {width:55px; background:url(../images/navigation/topbar/cluster_nav/health_care.gif) no-repeat left bottom; }
#trades_and_technology {width:146px; background:url(../images/navigation/topbar/cluster_nav/trades_and_technology.gif) no-repeat left bottom; }
#tourism_and_hospitality {width:66px; background:url(../images/navigation/topbar/cluster_nav/tourism_and_hospitality.gif) no-repeat left bottom; }
#university_transfer {width:130px; background:url(../images/navigation/topbar/cluster_nav/university_transfer.gif) no-repeat left bottom; }
#cluster_more {width:53px; background:url(../images/navigation/topbar/cluster_nav/more.gif) no-repeat left bottom; }
/* ----------------------------- end #cluster_nav ids ----------------------------- */
		
	
	
		/* Search box in top menu and search button - original code*/
	
	.search {
		float: right;
		font-size: 93%;
		font-family: Arial, Geneva, Helvetica, sans-serif;
		color: #000;
		margin: 7px 5px 0px 5px;
		background: #FFF;
		border: 1px solid #CCC;
		height: 16px;
		padding:2px;
		*padding-top: 3px;
		*padding-right: 0px;
		line-height: 130%;
		white-space:nowrap;
		}
	
	.searchbox {

		width: 120px;
		border: 0;
		border: none;
		height: 15px;
		
}
	
	.searchbutton 
	{
		margin:1px 1px 0px 0px;
		

}
	

.header_space {
	height: 155px;
 background-color: #ffffff;
}
		/*Fix some parsing inconsistancies in IE*/
	* html .header_space {
	height: 149px;		}

		/* end of IE6 fix */
	
	
	/*=================
		/Breadcrumbs
	=================*/

	#breadcrumb { /*div that HOLDS asp.net breadcrumb control*/
		float: left;
		margin-top: 0px;
		padding: 0px 0px 7px 15px;
		display: block;
		width: 100%;
		background-color:#FFF;
		border-bottom: none;
	}

	.breadcrumb_text { /*all text inside the breadcrumb*/
		font-family: Arial, Helvetica, Geneva, sans-serif;
		font-size: 93%; /*12px*/
	}

	#breadcrumb a { /*breadcrumb link style */
		color: #444da0;
		text-decoration: none;
	}

	#breadcrumb a:hover {
		color: #444da0;
		text-decoration: underline;
	}

	#aspnetForm div.no_breadcrumb {
		border-bottom:none;
		display:none;
	}

	/*=================
		/Content   (the detailed content styles are in content_presentation.css)
	=================*/

	#content {
	    font-size: 100%;  /* 13 px */
		float: right;  /*was float:left*/
		line-height: 130%;
	    background-color:#FFF; 
		/*	width: 703px;  (total width) - (sidebar) - (margin) = 955 - 230 - 5px margin-right (side menu)  = 715px + 5px margin-left */
		PADDING: 0px; MARGIN: 0px; WIDTH: 720px;
	height:100%;		
		
	}
	
	
	/* this setting must be as long as the longest left menu (currently services) */
	#content {
		min-height:750px;
		height: auto !important;
		height: 750px;
}


	/*adjust the content for when the sidebar disappears, e.g. home page*/
	#aspnetForm div.no_sidebar_content {
		width:100%;
		margin: 0px;
	/*	margin-left:5px; */
}
	
	
	/* flippy corners */
	.frame_s {
		background-color: transparent;
		background-image: url(../images/master_page/frame_se_corner.gif);
		background-position: 100% 100%; 
		background-repeat: no-repeat;
		float:left;
		width: inherit;
		min-height:750px;
		height: auto !important;
		height: 750px;
}

	.frame_w {
		background-image: url(../images/master_page/frame_w_border.gif);
		background-repeat: repeat-y;		
		float:left;
		width: inherit;		
		min-height:750px;
		height: auto !important;
		height: 750px;

}

	.frame_nw {
		background-image: url(../images/master_page/frame_nw_corner.gif);
		background-repeat: no-repeat;
		width: 715px;
		float:left;
}

	#frame_w_img {
		float:left		
}

	.frame_n {
		float:right;
		background-color: transparent;
		background-image: url(../images/master_page/frame_ne_corner.gif);
		background-position: 100% 0%; 
		background-repeat: no-repeat;
		height: 5px;
		width: 89px;
}



	/*===============================================================================
	/Side Navigation - careful, any changes in padding/margins slips the content down
	=================================================================================*/

	#side_nav {
		float: left;
		width: 215px; /*changed from 175px + 5px margin-right */;
		padding: 0px;
		margin: 29px 0px 0px 10px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 100%; /*13px*/
		display: inline;
}

		/*Fix some parsing inconsistancies in IE6*/
		* html #side_nav li {
			width: 90%;
		}
		
		* html #side_nav li a {
			min-height: 1%;
		}
		
		/* end of IE6 fix */
		 
	#side_nav div ul { /*first list*/
		margin-left: 15px;
		margin-top: 0px;
		margin-bottom: 0px;
		padding-left: 0px;
		line-height: 130%;
		}

	#side_nav div ul ul { /*all nested lists*/
		margin-left: 15px;
		margin-top: 0px;
		//margin-top: -17px; /*hack for IE*/
		margin-bottom: 0px;
		line-height: 130%;	

		}
		
		
	#side_nav li {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		}		
		
		

	/* how to style current node, nodes with children, nodes with the current node as their child etc.*/

	#side_nav a {
		display: block;
		padding: 6px 5px; 
		border-bottom: 1px solid silver;
		color: #444da0;
		text-decoration: none;	
	}
	
	#side_nav span.selected_page_has_sub_span {
		display: block;
		padding: 6px 5px; 
		border-bottom: 1px solid silver;
		text-decoration: none;	
	}
	

	#side_nav a:hover {
		display: block;
		padding: 6px 5px;
		text-decoration: underline;		
		background-color: silver;
	}

	#side_nav .selected_page {
		color: #000;
		display: block;
		padding: 6px 5px; 
		font-weight: normal;
		border-bottom: 1px solid silver;	

		}

	#side_nav .closed_submenu {
		list-style-image: url(../images/navigation/sidebar/clear_right_arrow.gif); 
		}

	#side_nav .selected_page_has_submenu {
		color: #000;
		font-weight: normal;
		list-style-image: url(../images/navigation/sidebar/clear_down_arrow.gif); 			
				}

	#side_nav .open_submenu {
		list-style-image: url(../images/navigation/sidebar/clear_down_arrow.gif); 
	}

	#side_nav .active_section {
		color: #000;
		display: block;
		padding: 5px;
		text-decoration: none;
		}
	
	.side_menu_title
	{
		padding-left:5px;
		padding-bottom:5px;
		font-size:116%;
		font-weight:bold;
		line-height:130%;
		border-bottom:1px solid silver;
		
		
	}
	
	.side_menu_title a
	{
		padding:0px;
	}

	/*=================
		/Footer
	=================*/
	#wrapfooter {                       /* placement of footer */
		width: 955px;
		margin: auto;
		}
	
	#footer {							/* placement of text in footer */
		margin-top: 15px;
		clear: both;
		padding-top: 5px;
		padding-bottom: 5px;
		width: 955px;
		background: transparent;
	}
	
	#footer {	
		font-size: 100%;
		color: #CCCCCC;
		text-align:center;
		line-height: 130%;
		}

	#footer a {
		color: #CCCC00;
	}
	
	#footer a:hover {
		color: #CCCCCC;
		}	

	#footer div { /*gray bar with home and top links*/
		float: left;
		margin: 10px 5px;
		padding: 3px 0px 3px 0px;
		border-top: 1px dotted #ACACAC;
		border-bottom: 1px dotted #ACACAC;
		width: 100%;
	}
	
	#footer .footertxt {
		font-size:9px;
		line-height: 130%;
		letter-spacing:.1em;
	}

	#footer div a { /* to overrule color:#2a2a2a; in this bar only*/
		float: left;
		color: #333;
	}

	#footer div a.top { /*link to the top of the page*/
		float: right;
	}

	#footer div span { /*this is the little phrase */
		float: left;
		margin-left: 20px;
		padding-left: 20px;
		border-left: 1px dotted #CCCCCC;
	}

	#footer .footer sup {
		font-size: 6px;
	}

	#skip_navigation {
		display:block;
		font-size:1%;
		height:0;
		left:-10px;
		position:absolute;
		text-indent:-999em;
		top:-10px;
	}


/*=================
      /Print   needs more work and a logo added
=================*/

@media print
{
	#header {
		display: none;
	}

	#sidebar {
		display: none;
	}

	#content {
		margin-left: 0px;
		padding-top: 20px;
		font-family: Arial, Geneva, Helvetica, sans-serif;
		font-size: 100%;
	}

	#footer {
		display: none;
	}

	#content a:link:after, #content a:visited:after {
		content: " (" attr(href) ") ";
		font-size: 90%;
	}

	#content a[href^=" /"]
	:after {
		content: " (http://www.cvcnt16.nic.bc.ca/" attr(href) ") ";
	}

	ul {
		font-size: inherit;
		list-style-type: square;
	}
	
	
	
}