/***************************************************************************************
	Feb 2010 - Paul DiMarco
****************************************************************************************/



*
{	/* All elements inherit these common properties.  You may overide in later declarations */

	margin:  0px;
	padding: 0px;
	font-family: verdana, tahoma, "trebuchet ms", arial, sans-serif;
	line-height: 150%;			/* this controls the line spacing for the entire site */
}


body 
{
	font-size: 11px;   /*used to be 70% -  This controls the font size for the entire site.  Also need to change the td tag to match this value */
	color: 	#2a3751;  /*Navy Blueish*/
	margin:  0px;
	padding: 0px;
	text-align: center;
	background: url('../graphics/backblueboxes.gif') repeat left top;
}


p
{
	padding: 0px 0px 10px 0px;		/* This controls the spacing for new paragraphs */
}


h2 
{
	font-size: 12px; /* used to be 120% */
	font-variant: small-caps;
	letter-spacing: -1px;
}


td
{
	vertical-align: top; 
	padding: 0px 3px 0px 3px;
	font-size: 11px;		/*used to be 70% - This controls the font size for the entire site.  Also need to change the body tag to match this value */
}


ul
{
	list-style-type: disc;
	list-style-position: outside;
	margin-left: 	35px;
	margin-top:  	3px; 
	margin-bottom: 	15px; 
}


li, li a
{
	margin-top: 	.3em;
	margin-bottom: 	.3em;
	list-style-image: url(/graphics/arrow.gif);
}


img
{
	border: none;
}

a:link    {    } 
a:visited {    }
a:hover   
{ 
	color: #ff9900;   		/*Orangy color*/
	/*background:#ffffff;		/*BG color is a must for IE6 - needed for tooltip*/
	/*text-decoration:none; 	/*needed for tooltip*/
}  




a 
{
	text-decoration: none;
	color: #5b8fbe; 		/* light blue color*/
}


a.underline
{
	border-bottom: 1px dotted #5b8fbe;	/* light blue color*/
	/* Remember that inheritance is happening from the a tag above */	
}


a.underline:hover   
{ 
	border-bottom: 1px dotted #ff9900;   	/*Orangy color*/
	/* Remember that inheritance is happening from the a tag above */
} 



/* Added as a special case when you do not want to click on the box.  The box is faded and does nothing */
a.imgopacity img
{
	filter:alpha(opacity=99);
	-moz-opacity: 0.99;
	opacity: 0.99;
}
a.imgopacity:hover img
{
	filter:alpha(opacity=55);
	-moz-opacity: .55;
	opacity: .55;
}
img.imgopacity
{
	filter:alpha(opacity=99);
	-moz-opacity: 0.99;
	opacity: 0.99;
}



.icon
{
	vertical-align: middle;
}



/***************************************************************************************
	Custom Color Defenitions
****************************************************************************************/


.pastelblue2
{
	background-color: #F3F5F7;
	padding: 5px;
}                      


.pastelforms
{
	background-color: #FAFAFA;
	padding: 5px;
}   


.ditherblue
{
	background: #E5F2FF url('../graphics/dither-blue.gif') repeat-x;
	border: 1px solid #E6E4D8;
}

.ditherblue2
{
	background: #F3F5F7 url('../graphics/dither-blue2.gif') repeat-x;
	border: 1px solid #E6E4D8;
}


.headerkids
{
	background: #FFF url('../graphics/dither-header-kids.gif') no-repeat;		/*pic with kid shadows */
	height: 36px;
	border-bottom: 1px solid #E6E4D8;
	/*padding-left: 10px;*/
}
.headerkids h2
{
	font-size: 14px;
	font-weight: bold;
	padding-top: 14px;
	padding-left: 10px;
	color: #79b161;
}




.ditheryellow
{
	background: #FFFFCC url('../graphics/dither-yellow.gif') repeat-x;
	border: 1px solid #E6E4D8;
	padding: 2px;
}


.ditheryellow2
{
	background: #FFFFE5 url('../graphics/dither-yellow2.gif') repeat-x;
	border: 1px solid #E6E4D8;
}


.dithernews
{
	margin: 2px 2px 10px 2px;
	padding: 3px 5px 10px 5px;
	background: #F3F5F7 url('../graphics/dither-blue2.gif') repeat-x;
	border: 1px solid #E6E4D8;
}


.dithernews img.icon-news
{
	width:  32px;
	height: 32px;
	margin: 1px 5px 10px 1px;
	float: left;
}


.dithernews p
{
	font-size: 11px; /* used to be 90% */
}

.dithernews p b
{
	/*color: #777;*/
	line-height: 100%;
	text-transform: uppercase;
}



.ditherimgnowrap
{
	margin: 4px 2px 6px 2px;
	padding: 8px;
	background: #fafafa; 
	border-right:	#d8d8d8 1px solid;
	border-bottom:	#d8d8d8 1px solid;
	border-top:	#ebebeb 1px solid;
	border-left:	#ebebeb 1px solid;
	width: 315px;
	overflow: hidden;		/* Need this to prevent the ie bug where a big line of text will cause the width of a container to expand and then cause all sorts of problems. */
}


.ditherimgnowrap img
{
	float: left;
	border:	#d8d8d8 1px solid; 
}


.ditherimgnowrap p
{
	text-align: left;
	margin-left: 60px;
	line-height: 1.3em;
	color: #777;		/* grayish color */
}


.ditherimgnowrap p b
{
	color: #777;
	line-height: 100%;
	text-transform: uppercase;
}



.ditherimgnowrapportal
{
	margin: 4px 2px 6px 2px;
	padding: 8px;
	background: #fafafa; 
	border-right:	#d8d8d8 1px solid;
	border-bottom:	#d8d8d8 1px solid;
	border-top:	#ebebeb 1px solid;
	border-left:	#ebebeb 1px solid;
	/*width: 315px;*/
	overflow: hidden;		/* Need this to prevent the ie bug where a big line of text will cause the width of a container to expand and then cause all sorts of problems. */
}


.ditherimgnowrapportal img
{
	float: left;
	border:	#d8d8d8 1px solid;
}


.ditherimgnowrapportal p
{
	text-align: left;
	margin-left: 60px;
	line-height: 1.3em;
	color: #777;		/* grayish color */
}


.ditherimgnowrapportal p b
{
	color: #777;
	line-height: 100%;
	text-transform: uppercase;
}



.ditherimgnowrapindex
{
	margin: 1px 1px 1px 5px;
	padding: 1px;
	/*background: #fafafa;
	border-right:	#d8d8d8 1px solid;
	border-bottom:	#d8d8d8 1px solid;
	border-top:	#ebebeb 1px solid;
	border-left:	#ebebeb 1px solid;*/
	/*width: 315px;*/
	overflow: hidden;		/* Need this to prevent the ie bug where a big line of text will cause the width of a container to expand and then cause all sorts of problems. */
}


.ditherimgnowrapindex img
{
	float: left;
	/*border:	#d8d8d8 1px solid; */
}


.ditherimgnowrapindex p
{
	text-align: left;
	margin-left: 1px;
	line-height: 1.3em;
	color: #777;		/* grayish color */
}


/***************************************************/
/* This is all the new css for the new look & feel */
/***************************************************/

/* Rounded corners sample from http://www.alistapart.com/articles/mountaintop/ */
dl {
	width: 240px;
	margin: 0 0 20px -1px;
	padding: 0;
	/*background: #ccc url(/graphics/box_bottom.gif) no-repeat bottom left;*/
	/*background: #f4fdee url(/graphics/box_bottom.gif) no-repeat bottom left;*/
	}

dt {
	margin: 0 0 1px 0;
	padding: 10px;
	font-size: 16px;
	color: #fff;
	border-bottom: 1px solid #fff;
	background: #999 url(/graphics/box_top.gif) no-repeat top left;
	}

dd {
	margin: 0 0 0 10px;
	padding: 0 10px 6px 10px;
	color: #666;
	font-family: Verdana, sans-serif;
	font-size: 98%;
	background: url(/graphics/arrow.gif) no-repeat 0 3px;
	}

.dd-noarrow {
	margin:0;
	background: #99cc66;
}

dl a 
{
	text-decoration: none;
	color: #297519; 		
}

dl a:link    {    } 
dl a:visited {    }
dl a:hover   
{ 
	color: #297519;   		
	/*text-decoration: underline;*/
	/*border-bottom: 1px dashed #ff9900;*/
	font-weight: bold;
}  

.tab {
	background-color: #fafafa;
	border:1px solid #ebebeb;
}

.blue dt {
	background-color: #6699cc;
	}

.blue {
	/*background-color: #9cf;*/
	background-color: #f4fdee;
	}

.red dt {
	/*background-color: #993333;*/
	background-color:#c04f4f;
	}

.red {
	/*background-color: #c99;*/
	background-color: #f4fdee;
	}

.green dt {
	background-color: #99cc66;
	}

.green {
	/*background-color: #cf9;*/
	background-color: #f4fdee;
	}

.wecdsb-body 
{
	font-size: 11px;   /*used to be 70% -  This controls the font size for the entire site.  Also need to change the td tag to match this value */
	color: 	#2a3751;  /*Navy Blueish*/
	margin:  0px;
	padding: 0px;
	text-align: center;
	background: #d6e4ee url('/graphics/wecdsb-bg.gif') repeat-x left top;
}

.wecdsb-header 
{
	background: url('../graphics/wecdsb-header.jpg') no-repeat top center;
	height: 300px;
}

.wecdsb-footer
{
	background:  #6699cc;  
	font-size: 12px;
	color: #fff;
	letter-spacing: -1px;
	padding: 25px 15px 5px 5px;
	text-align: right;
	height: 80px;
	line-height: 100%;
	clear: both;
}

.wecdsb-green
{
	background: #f0f8ea;
	border: 1px solid #e3f3d8;
	padding: 10px 18px 10px 18px;
}
.wecdsb-green img
{
	margin: 6px;
}

.container-new-menu 
{
	width:860px;
	background: #6699cc;
	height: 29px;
	/*border:1px solid #ccc;*/
	margin: 0 auto; 
	text-align:left;
}

.wecdsb-title 
{
	font-size: 14px; 
	font-variant:normal;
	color: #1f93d0;
	letter-spacing:normal;
}


.wecdsb-portal-item
{
	margin: 4px 2px 6px 2px;
	padding: 8px;
	background: #fafafa; 
	border-right:	#d8d8d8 1px solid;
	border-bottom:	#d8d8d8 1px solid;
	border-top:	#ebebeb 1px solid;
	border-left:	#ebebeb 1px solid;
	/*width: 315px;*/
	overflow: hidden;		/* Need this to prevent the ie bug where a big line of text will cause the width of a container to expand and then cause all sorts of problems. */
}


.wecdsb-portal-item img
{
	float: left;
	/*border:	#d8d8d8 1px solid;*/
}


.wecdsb-portal-item p
{
	text-align: left;
	line-height: 1.3em;
	color: #777;		/* grayish color */
	margin-left:140px;
	min-height:110px;
	height:auto !important;
	height:110px; 
}


.wecdsb-portal-item h2
{
	margin-left:140px;
	font-size: 14px; 
	font-variant:normal;
	color: #1f93d0;
	letter-spacing:normal;
}


/***************************************************/
/***************************************************/
/***************************************************/





/***************************************************************************************
	Main DIV sections
****************************************************************************************/

.container-main
{
	width: 860px;
	margin: 0 auto; 
	background-color: #ffffff;
}


.container-main-popup
{
	width: 500px;
	margin: 0 auto; 
	/*background-color: #ffffff;*/
}

.header 
{
	background: url('../graphics/header-index.jpg') no-repeat top center;
	height: 119px;
}


.header-hide
{
	display: none;
}


.breadcrumbs 
{
	background: green url('../graphics/breadcrumbs.gif') no-repeat top center;
	font-size: 12px; /* used to be 100% */
	text-align: right;
	font-variant: small-caps;
	letter-spacing: -1px;
	color: #FFFFFF;
	padding-right: 15px;
	height: 32px;
	line-height: 32px;
}


.content
{
	padding: 15px 0px 15px 0px;		/* This controls the top right bottom left padding for the contect section */
}


.contentright 
{
	width: 699px;		/*  860 - 160(left menu) = 700 - 1 for good luck.    DO NOT USE percentages.  SEEMS TO CAUSE PROBLEMS */
	float: left;
	padding-bottom: 15px;

	/* Remember that the padding of the parent container 'content' is inherited here. */
}
 

.footer
{
	background:  url('../graphics/footer.gif') no-repeat bottom center;  
	font-size: 10px;
	color: #DEE0E5;
	letter-spacing: -1px;
	padding: 15px 15px 0px 5px;
	text-align: right;
	height: 60px;
	line-height: 100%;
	clear: both;
}



.table1
{
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;

	/* NOTE: There is a nasty ie centering bug when you have a div container and then try centering a table.  
	Also put <table align="center" class="table1"> on the html code.  align="center" works for ie and class="table" works for FF

	ALso it that IE calculates the 100% width before
	the vertical scrollbar has been added, so it makes the table 500px (the
	width of its containing div).  Then, when the vertical scrollbar is
	added, it takes up about 18px of space, so the 500px wide table no
	longer has room to display completely horizontally.  So IE has to add a
	horizontal scrollbar.
	*/
}






/* *************************************************************************************
	Menu - www.cssplay.co.uk - I like Stu's way of doing this. 
****************************************************************************************/


.menu
{
	background:   url('../graphics/blue-menu-background.gif') no-repeat top center;
	height: 35px;
}


a.menu, a.menu:link, a.menu:visited 
{
	display: block; 
	height: 35px;
	line-height: 35px;	/* this allows to center the text vertically.  Keep the same value as the height. */
	margin: 0px;
	padding-left:  6px;
	padding-right: 6px;
	text-align: center;
	text-decoration: none;
	font-family: verdana, arial, sans-serif;
	letter-spacing: -1px;
	font-size: 10px;
	color: #DEE0E5;     
	border-bottom: none; 
	border-left:  1px solid #576178;
	border-right: 1px solid #1F2635;
	/*overflow:hidden;*/
	float: right;
	
} 


a.menu:hover 
{
	color: #ffffff;
	background: #475470;
	height: 35px;
} 



/* *************************************************************************************
   Used on Calendar pages to control fonts
**************************************************************************************** */

.calendar h1
{
	font-size: 24px;
	color: #000;
}


/* *************************************************************************************
   Used on Main page for news tickers
**************************************************************************************** */

.newsticker ul
{
	/*list-style-type: circle;*/
	margin-top: -12px;
	margin-right: 14px;
	margin-left: 32px;
	font-size: 10px;
}



#SmartBoardNewsTicker{
	width:376px;
	height:205px;
	margin: 25 0 0 8;
}

#TickerVertical {
	width: 376px;
	height: 205px;
	list-style: none;
	margin: 0;
	padding: 0;
}
#TickerVertical li {
	width: 370px;
	padding: 0 0 1 12;
}
#TickerVertical li .NewsTitle{
	font-size: 11px;
}

#TickerVertical li .NewsTitle a:hover {
	text-decoration:underline;
}



/* *************************************************************************************
   Left Menu - Used on Calendar and Board pages
**************************************************************************************** */


.menuleft 
{
	background: url('../graphics/menuleft-body.gif') top left repeat-y;
	width: 160px;
	margin-top:  -16px;
	margin-bottom: 16px;
	padding-top:    15px;
	padding-bottom: 15px;	
	font-size: 10px;
	color: #DEE0E5;  
	letter-spacing: -1px;
	text-align: left;
	float: left;
}                      


.menuleft-header
{
	background: url('../graphics/menuleft-header.gif') top left no-repeat;
	width: 160px;
	margin-top:  -16px;
}                      


.menuleft-footer
{
	background: url('../graphics/menuleft-footer.gif') bottom left no-repeat;
	width: 160px;
	margin-bottom: -16px;
}                      



.menuleft span
{
	display: block;
	padding-left: 8px;	
	font-weight: bold;
	color: #E6E4D8;
}


.menuleft a, .menuleft a:link, .menuleft a:visited 
{
	display: block;
	margin-left:  5px;	
	margin-right: 15px;	
	padding: 3px 2px 3px 2px;	
	color: #DEE0E5; 
} 


.menuleft a:hover
{
	display: block;
	color: #ffffff;
	background: #475470;
}