/**
 * General HTML styles
 */
body {
  font-size: 100%;
  line-height: 1.5em; /* 16x1.125 = 18px */
  margin: 0px;
  padding: 0px;
  background: #efede7 url('../images/grad_back.jpg') repeat-x scroll top left;
	color: #333333;
}

body, a, table, input, select, textarea {
  font-family: Verdana, Verdana, Geneva, sans-serif;
}

img {
  border: none;
}

#page-wrapper {
  font-size: 0.75em; /* 16x0.75 = 12px */
}

p {
  margin: 0px 0px 1em 0px;
  padding: 0px;
}

/* Link styles */
a {
  color: #00b6f1;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a.link-italic {
  font-style: italic;
}

#header a {
  color: #636467;
  font-size: 10px;
}

#footer a {
  color: #0191a5;
  font-size: 10px;
}

/* Header styles */
h2 {
  font-size: 1.67em; /* 12x1.67 = 20px */
  line-height: 1em;
  color: #7bc143;
  margin: 0px 0px 1em 0px;
  font-weight: normal;
}

#main-content h3 {
  margin: 0px 0px 1em 0px;
  background: #f37421 url('../images/left_orange.gif') no-repeat scroll top left;
  padding: 0px 0px 0px 30px;
}

#main-content h3 a {
  display: block;
  background: transparent url('../images/right_orange.gif') no-repeat scroll top right;
  padding: 0px 30px 0px 0px;
  color: #fff;
  font-weight: normal;
  font-size: 16px; /* 12*1.33 = 16px */
  text-align: center;
  line-height: 33px; /* 12*2.75 = 33px */
}

#right-sidebar h2 {
  font-size: 1.8em; /* 12x2.08 = 25px */
  line-height: normal;
  color: #008c99;
  margin: 0px 0px 0px 0px;
  font-weight: normal;
}

#right-sidebar h3 {
  font-weight: bold;
  font-size: 1em;
  margin: 0px 0px 1em 0px;
  padding: 0px 30px 0px 0px;
}

/**
 * Positioning and Layout
 */
#page-wrapper {
  padding: 15px 0px 0px 0px;
}

#main-wrapper {
  width: 960px;
  margin: 0px auto;
  background: #fff url('../images/banner.jpg') no-repeat scroll top left;
}

#header {
  padding: 35px 45px 65px 0px;
  text-align: right;
	position: relative;
}

#header #logo_link {
	position: absolute;
	top: 16px;
	left: 20px;
	display: block;
	width: 270px;
	height: 105px;
}

#right-sidebar {
  float: right;
  width: 270px;
  margin: 0px;
}

#content-wrapper {
  position: relative;
  margin-right: 270px;
}

#find-ccac {
  position: absolute;
  z-index: 100;
  left: 600px;
  top: 5px;
}

#find-ccac a {
	display: block;
	width: 132px;
  height: 130px;
	background: transparent url('../images/find_ccac_blue.png') top left no-repeat;
}

#find-ccac a:hover,
#find-ccac a.active {
	background: transparent url('../images/find_ccac_over.png') top left no-repeat;
}

#main-content {
  padding: 30px 70px 30px 30px;
}



#footer {
  background-color: #e8f8f9;
  border-top: 1px solid #a7e8ee;
}

#on-logo {
  float: right;
  padding: 12px 10px 10px 0px;
}

#footer-links {
  padding:10px 140px 10px 0;
}

#footer-links div {
  text-align: right;
}

/**
 * Navigation bar
 */
#nav-bar {
  padding-top: 25px;
}

ul#navigation, 
ul#navigation li {
  margin: 0px;
  padding: 0px;
  list-style: none;
  list-style-image: none;
}

ul#navigation {
  margin: 0px 0px 0px 25px;
  position: relative;
  z-index: 5;
}

ul#navigation li {
  float: left;
  background: transparent url('../images/tab.gif') no-repeat scroll top left;
  width: 105px;
  line-height: 30px;
  padding: 0px 8px 0px 0px;
  text-align: center;
  color: #fff;
	font-family: Arial, Helvetica, sans-serif;
}

ul#navigation li.selected {
  background-image: url('../images/tab_selected.gif');
}

ul#navigation li a {
  color: #fff;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	text-decoration: none;
}

ul#navigation li:hover,
ul#navigation li.sfhover {
	background-image: url('../images/tab_selected.gif');
}

ul#navigation li li:hover,
ul#navigation li li.sfhover {
	background-image: none;
}

/* Level 2 */
ul#navigation ul {
  visibility: hidden;
  position: absolute;
  top: 100%; 
  left: 0px;
  margin: 0px;
  padding: 0px;
	border-bottom: solid 3px white;
	width: 105px;
}

ul#navigation ul li {
  background: none;
  background-color: #2a9faa;
	border-style: solid;
	border-color: white;
	border-width: 2px 3px 0px 3px;
  line-height: 1.5em;
  padding: 5px 0px;
	width: 99px;
}

ul#navigation li:hover,
ul#navigation li.sfhover {
  position: relative;
}

ul#navigation li:hover ul,
ul#navigation li.sfhover ul{
  visibility: visible;
}

/**
 * Color bar
 */
#color-bar {
  height: 15px;
}

#color-bar div.part {
  float: left;
  height: 15px;
}

div.blue {
  background-color: #008c99;
  width: 466px;
}

div.dark-green {
  background-color: #078844;
  width: 47px;
}

div.light-green {
  background-color: #7bc143;
  width: 45px;
}

div.brown {
  background-color: #89663b;
  width: 10px;
}

div.orange {
  background-color: #f37421;
  width: 100px;
}

/**
 * Main content area
 */
#billboard {
	line-height:normal;
}

.large-green {
  color: #7bc143;
  font-size: 1.5em; /* 12x1.5 = 18px */
}

/**
 * Rounded grey block
 */
.rounded-grey {
  background: #f1f1f2 url('../images/top_round.gif') no-repeat scroll top left;
  margin: 0px 6px 20px 0px;
}

.rounded-grey-bottom {
  padding: 10px 15px;
  background: transparent url('../images/bottom_round.gif') no-repeat scroll bottom left;
}

/**
 * Colored square bullets
 */
#right-sidebar p.subtitle {
  font-style: italic;
	line-height: normal;
	font-size: .9em;
	margin-top: 6px;
}

ul.color-bullets, 
ul.color-bullets li {
  margin: 0px;
  padding: 0px;
  list-style: none;
  list-style-image: none;
	line-height: normal;
}

ul.color-bullets li {
  padding: 0px 0px 10px 20px;
  background: transparent no-repeat scroll 0px 2px;
	font-size: 10px;
	line-height: normal;
}

ul.color-bullets a,
.rounded-grey a {
	color: #666666;
	line-height: normal;
}

ul.color-bullets a:hover {
	color: #008c99;
	text-decoration: none;
}

ul.color-bullets li.waterloo {
  background-image: url('../images/waterloo.gif');
}

ul.color-bullets li.central {
  background-image: url('../images/central.gif');
}

ul.color-bullets li.central-west {
  background-image: url('../images/central_west.gif');
}

ul.color-bullets li.central-east {
  background-image: url('../images/central_east.gif');
} 

ul.color-bullets li.toronto {
  background-image: url('../images/toronto.gif');
}

ul.color-bullets li.champlain {
  background-image: url('../images/champlain.gif');
}

ul.color-bullets li.hamilton {
  background-image: url('../images/hamilton.gif');
}

/**
 * Rounded green bubble
 */
.rounded-green {
  background: #7bc143 url('../images/top_green.gif') no-repeat scroll top left;
  margin-bottom: 1em;
  font-size: 1.67em; /* 12x1.67 = 20px */
  line-height: 1.5em;
  color: #fff;
  width: 489px;
}

.rounded-green-bottom {
  background: transparent url('../images/bottom_green.gif') no-repeat scroll bottom left;
  padding: 17px 30px;
}

/**
 * Border block
 */
.border-block {
  border-left: 1px solid #51b1ba;
  padding-left: 40px;
  margin-right: 20px;
	line-height: 1.3em;
	margin-top: 30px;
}

.border-block p {
	font-size: 0.9em;
	font-style: italic;
	margin-top: 8px;
}

 
/**
 * Folder block
 */
.folder {
  background: transparent url('../images/folder.png') no-repeat scroll top left;
  width: 264px;
  height: 385px;
  margin: 16px 6px 1em 0px;
  position: relative;
  overflow: hidden;
}

.folder-collapsed {
  height: 90px;
}

.folder #expand {
  display: none;
}

.folder-collapsed #expand {
  display: block;
  text-align: right;
  padding: 0px 10px 0px 0px;
}

#folder-files {
  position: absolute;
  left: 20px;
  top: 145px;
}

#jessica, #dan, #angie, #karen {
  margin: 0px 0px 25px 0px;  
  width: 231px;
  height: 50px;
}

#folder-overlay {
	display: block;
	width: 264px;
	height: 70px;
}
#folder-overlay:hover,
#folder-overlay.active {
	background: transparent url('../images/folder_over.png') top left no-repeat;
}

#jessica {
  background: transparent url('../images/file_jessica.png') no-repeat scroll top left;
}

#karen {
  background: transparent url('../images/file_karen.png') no-repeat scroll top left;
}

#dan {
  background: transparent url('../images/file_dan.png') no-repeat scroll top left;
}

#angie {
  background: transparent url('../images/file_angie.png') no-repeat scroll top left;
}

#folder-files a {
  display: block;
  width: 100%;
  height: 100%;
}

#folder-files a:hover,
#folder-files a.selected {
  background: transparent url('../images/file_over.png') no-repeat scroll 3px 7px;
}

#copyright {
  width: 960px;
  margin: 0px auto;
	font-size: 10px;
	color: #999;
	text-align:center;
}