/* ------------------------------------------------------------------
	MAIN STYLESHEET
	
	Project: eLearn Campus Website 2008
	Created: 2008-10-24
	Created by: RKD Web Studios info@rkd.ca
	
	COLOUR SCHEME
	
	Lt. Grey 	#787c84
	Dk. Grey 	#404245
	Lt. Blue 	#659BD2
	Dk. Blue 	#32507d
	Orange 		#ff8a00
	
------------------------------------------------------------------- */


 
html { 
	overflow-y: scroll; /* keeps vertical scroll bar in firefox at all times so page doesn't jump around */
	height: 100%;
	}

body {
	background: #FFF;  /* background colour should be same as content area background colour to ensure WYSIWYG looks same as website */
	margin: 0;
	padding: 0;
	top: 0;
	left: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #404245;
	line-height: 20px;
	}

img, form { /* removes all default formatting on images and forms */
	margin: 0;
	padding: 0;
	border: 0;
	}

:focus { outline: none; } /* removes dotted outline from links */

.Clear { clear: both; } /* clears all floats; apply to empty divs */


/* ---------------------
	GLOBAL STYLES - style as necessary
--------------------- */

a:link { color: #32507d; text-decoration: underline; }
a:visited { color: #32507d; text-decoration: underline; }
a:hover { color: #ff8a00; text-decoration: underline; }
a:active { color: #ff8a00; text-decoration: underline; }

p, td, div { 
	font-size: 12px;
	line-height: 20px;
	}

strong, b {
	font-weight: bold;
	color: #32507d;
	}

em, i {
	font-style: italic;
	}

h1 { 
	color: #32507d;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 22px;
	line-height: 28px;
	}
h2 {
	color: #659BD2;
	font-size: 16px;
	font-family: Helvetica, Arial, sans-serif;
	margin:20px 0 0 0;
	padding-bottom: 0;
	padding-top: 10px;
	}
	h2 a:link { color: #659BD2; text-decoration: underline; }
	h2 a:visited { color: #659BD2; text-decoration: underline; }
	h2 a:hover { color: #ff8a00; text-decoration: underline; }
	h2 a:active { color: #ff8a00; text-decoration: underline; }
h3 {
	color: #ff8a00;
	font-size: 14px;
	font-family: Helvetica, Arial, sans-serif;
	margin:20px 0 0 0;
	padding-bottom: 0;
	}
h4 {
	color: #ff8a00;
	font-size: 14px;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	}
h5 {
	font-size: 13px;
	}
h6 {
	font-size: 12px;
	}

ul { 
	color: #32507d;
	font-size: 14px;
	list-style: none;
	}
	ul li {
		background: url(../../images/bullet_list.gif) no-repeat left 4px;
		padding-left: 17px;
		}
	ul li span {
		font-size:12px; 
		color:#787c84;
		}

ol { 
	color: #32507d;
	font-size: 14px;
	}

hr {
	background: #32507d;
	border: none;
	color: #32507d;
	height: 1px;
	width: 100%;
	}
	
.required {
	color: #ff8a00;
	font-size: 15px;
	font-family: Helvetica, Arial, sans-serif;
	}

/* styles used by WYSIWYG - style as necessary */
pre { }

address { }


/* ---------------------
	STRUCTURE
--------------------- */

#Container {
	margin: 0 auto;
	width: 924px;
	}

#PrintHeader { display: none; }
#Header { }
	#Header #Logo {
		float: left;
		background: url(../../images/logo.gif) no-repeat left top;
		height: 102px;
		text-indent: -9999px;
		width: 326px;
		}
	#Header #Phone {
		float: right;
		background: url(../../images/phone.gif) no-repeat right top;
		height: 52px;
		text-indent: -9999px;
		width: 123px;
		margin-top: 50px;		
		}


/* Menu */

#Menu { 
	background: #d7dbe2;
	clear: both;
	width: 924px;
	height: 48px;
	z-index:5;
	}

	#nav, #nav ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		line-height: 1;
		z-index:5;
		}
		#nav li { /* all list items */
			float: left;
			padding-left: 0;
			background: url(none);
			z-index:5;
			}
		#nav a {
			background-position: left top;
			background-repeat: no-repeat;
			display: block;
			height: 48px;
			text-indent: -9999px;
			z-index:5;
			}
		#nav a:hover { background-position: left bottom; z-index:5; }

			#nav li ul { /* second-level lists */
				/*background: #a2b7d7;*/
				position: absolute;
				left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
				margin-top: -3px;
				padding: 10px 0;
				z-index:5;
				}
				#nav li ul a { 
					/*background-color: #a2b7d7;*/
					color: #FFF;
					font-size: 12px;
					height: 31px;
					line-height: 13px;
					padding: 4px 5px 0px 20px;
					text-indent: 0;
					text-decoration: none;
					z-index:5;
					}
					#nav li ul a:hover { color: #32507d; z-index:5; }
			#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
				left: auto;
				z-index:5;
				}
				
			#nav li:hover, #nav li.hover {  
   			position: static;  
			 }  
		
		/* Custom stuff */
		#nav #NavHome a {
			background-image: url(../../images/nav_home.gif);
			width: 99px;
			}
		#nav #NavDesign a {
			background-image: url(../../images/nav_design.gif);
			width: 196px;
			}
		#nav #NavConsulting a {
			background-image: url(../../images/nav_consulting.gif);
			width: 209px;
			}
		#nav #NavCapacity a {
			background-image: url(../../images/nav_capacity.gif);
			width: 215px;
			}
			#nav #NavCapacity ul { 
				width: 215px;
				background: url(../../images/subnav_capacity_bg.gif) no-repeat left bottom;
				}
			#nav #NavCapacity ul li a { 
				width: 190px;
				background-image: url(../../images/nav_bullet.gif); 
				background-position: 9px 6px;
				}
		#nav #NavClients a {
			background-image: url(../../images/nav_clients.gif);
			width: 96px;
			}
			#nav #NavClients ul { 
				width: 96px;
				background: url(../../images/subnav_clients_bg.gif) no-repeat left bottom;
				}
			#nav #NavClients ul li a { 
				width: 75px;
				background-image: url(../../images/nav_bullet.gif); 
				background-position: 9px 6px;
				}
		#nav #NavAbout a {
			background-image: url(../../images/nav_about.gif);
			width: 109px;
			}
			#nav #NavAbout ul { 
				width: 100px;
				background: url(../../images/subnav_about_bg.gif) no-repeat left bottom;
				}
			#nav #NavAbout ul li a { 
				width: 75px;
				background-image: url(../../images/nav_bullet.gif); 
				background-position: 9px 6px;
				}
		/* */

#Footer {
	clear: both;
	color: #787c84;
	padding: 0 5px 10px; 
	}
	#Footer div { 
		font-size: 11px;
		line-height: 18px;
		}
	#Footer a:link { color: #787c84 ; text-decoration: none; }
	#Footer a:visited { color: #787c84 ; text-decoration: none; }
	#Footer a:hover { color: #32507d; text-decoration: underline; }
	#Footer a:active { color: #32507d; text-decoration: underline; }
	
	#Footer .Copyright, #Footer .LegalHome {
		float: left;
		clear: left;
		}
	#Footer .Links { 
		float: right;
		clear: right;
		}
	#Footer .RkdLink {
		float: left;
		clear: left;
		}

#FlashBanner { 
	padding-top: 10px;
	z-index: 1; 
	overflow:hidden;
	}
	#HomeContent #FlashBanner { 
		padding: 0;
		margin: 0 -5px;
		overflow:hidden;
		}
#RightCol {
	width: 224px;
	float: right;
	padding: 10px 0;
	}
	#RightCol .CaseStudy {
		margin-top: 20px;
		}
#Content {
	clear: both;
	float: left;
	padding: 10px 5px;
	width: 690px;
	}

#HomeLeft {
	float: left;
	width: 204px;
	padding: 10px 0;
	margin: 0 auto;
	}
	#PanelClients, #PanelMeet { margin-bottom: 10px; }
		#PanelClients .Bottom {
			background: url(../../images/panel_client_bg.jpg) no-repeat left bottom;
			height: /*124px*/ 109px;
			padding: 0 auto;
			margin: 0 auto;
			}
#HomeContent { 
	float: right;
	padding: 10px 5px;
	width: 692px;
	}
	#CtaDesign,
	#CtaConsulting,
	#CtaCapacity { 
		float: right;
		clear: right;
		margin-top: 10px
		}

/* ---------------------
	CONTENT
--------------------- */

.PhotoFloatLeft img, img.PhotoFloatLeft {
	float: left;
	border: 1px solid #404245;
	margin: 5px 15px 10px 0;
	}
.PhotoFloatRight img, img.PhotoFloatRight {
	float: right;
	border: 1px solid #404245;
	margin: 5px 0 10px 15px;
	}
.FloatLeft {
	float: left;
	margin: 5px 15px 10px 0;
	}
.FloatRight {
	float: right;
	margin: 5px 0 10px 15px;
	}
.Quote { 
	width: 600px;
	font-size: 12px;
	line-height:16px;
	color: #32507d;
	}

.Note {
	font-size: 11px;
	line-height:14px;
	color: #787c84;
	}
.NoTop, ul.NoTop, ul.NoTop li {
	margin-top: 0;
	padding-top: 0;
	}
.NoBottom {
	margin-bottom: 0;
	padding-bottom: 0;
	}
.Error {
	font-size: 11px;
	line-height:14px;
	color: #900;
	}
	span.Error { display: block; }

.Sitemap {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	}
	.Sitemap td {
		width: 50%;
		vertical-align: top;
		}
	.Sitemap ul { font-size: 12px; }
	
/* ---------------------------------------- Accordian */

#accordion {
	padding-bottom:15px;
	}

.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 0; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; padding: 10px 10px 10px 45px; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left:12px; margin-top: 23px; }
.ui-accordion .ui-accordion-content { margin:5px 0 40px 0; padding-left:45px; border-top: 0; position: relative; overflow: auto; display: none; }
.ui-accordion .ui-accordion-content-active { display: block; overflow:hidden;}


#accordion .ui-icon-plus {background:url(../../images/accordian-arrow-close.png) top left no-repeat; width: 22px; height:22px;}
#accordion .ui-icon-minus {background: url(../../images/accordian-arrow-open.png) top left no-repeat; width: 22px; height:22px;}

	
	#accordion h4 img {vertical-align:middle; padding-right:15px;}
	
	#accordion h4 a:link, #accordion h4 a:visited {
		text-decoration: none;
		border-bottom:1px solid #ddd;
		}
		#accordion h4 a:hover, #accordion h4 a:active {
		text-decoration: none;
			}
#accordion div img { margin:10px 0;}
	
/* ---------------------
	Homepage Rotator
--------------------- */

.psizer {
		font-size: 12px;
		line-height: 20px;
		margin: 3px 0 0 0;
		padding-bottom: 10px;
		overflow: hidden;

}

.sizer {
	height:151px;
	width:702px;
	padding: 0;
	margin: 0;
	overflow: hidden;

}

.prevnext {
	overflow: hidden;
	height: 34px;
}

.bg1 {
	width:702px;
	height:151px;
	background: url(../../images/rotate_bg1.jpg) top left no-repeat;
}

.bg2 {
	width:702px;
	height:151px;
	background: url(../../images/rotate_bg2.jpg) top left no-repeat;
}

.bg3 {
	width:702px;
	height:151px;
	background: url(../../images/rotate_bg3.jpg) top left no-repeat;
}
	.text{
		padding: 5px 200px 5px 5px;
	}
	
/*FADER */

#imageContainer {
	position: relative;
	left: 5px; top: 0px;
	height: 109px;
	
}

#imageContainer img {
	display:none;
	left: 5px; top: 0px;
	position:absolute;

}