@charset "UTF-8";
/* CSS Document */

html body {
margin:0 auto;
padding:0;
height:100%;
width:100%;
vertical-align:top;
font-family:Calibri,Verdana,Tahoma,Helvetica,Arial,sans-serif;
font-size:90%;
text-align:left;
color:black;
background-color:#fff;
/*background-image:url(http://www.c3f.ca/multimedia/interface/tile-diagonal-grey.png);
background-repeat:repeat;
background-attachment:fixed;
background-position:center;*/
/* CSS3 only : background-size:100%;*/
/* CSS3 only : word-wrap: break-word;*/
}

/*Color Palette*/
.primary-1 {background-color:#3f0000; color:#fff;}
.primary-2 {background-color:#7f0000; color:#fff;}
.primary-3 {background-color:#bf2600; color:#fff;}
.primary-4 {background-color:#e67517; color:#000;}
     .primary-4 a {color:#fff; text-decoration:none;}
     .primary-4 a:visited {color:#fff; text-decoration:none;}
     .primary-4 a:hover {color:#fff; text-decoration:underline;}
.primary-5 {background-color:#ffa53f; color:#000;}
.primary-6 {background-color:#ffe57f; color:#000;}
.primary-7 {background-color:#ffffbf; color:#000;}

.complementary-1 {background-color:#00003f; color:#fff;}
.complementary-2 {background-color:#00197f; color:#fff;}
.complementary-3 {background-color:#0059bf; color:#fff;}
.complementary-4 {background-color:#0099ff; color:#000;}
.complementary-5 {background-color:#3fd8ff; color:#000;}
.complementary-6 {background-color:#7fffff; color:#000;}
.complementary-7 {background-color:#bfffff; color:#000;}

.neutral-1 {background-color:#000; color:#fff;}
.neutral-2 {background-color:#333; color:#fff;}
.neutral-3 {background-color:#666; color:#000;}
.neutral-4 {background-color:#999; color:#000;}
.neutral-5 {background-color:#ccc; color:#000;}
     .neutral-5 a {color:#000; text-decoration:none;}
     .neutral-5 a:visited {color:#000; text-decoration:none;}
     .neutral-5 a:hover {color:#000; text-decoration:underline;}
.neutral-6 {background-color:#eee; color:#000;}
.neutral-7 {background-color:#fff; color:#000;}

.bkg-context-title {background-color:#e67517; color:#fff; text-decoration:none;}
.bkg-context-title a {background-color:#e67517; color:#fff; text-decoration:none;}
.bkg-context-title a:visited {background-color:#e67517; color:#fff; text-decoration:none;}
.bkg-context-title a:hover {background-color:#e67517; color:#ccc; text-decoration:none;}

.bkg-fader-left {
background-image:url(http://www.c3f.ca/multimedia/interface/gradient-white-horizontal-left.png);
background-repeat:repeat-y;
background-position:left;
}
.bkg-fader-right {
background-image:url(http://www.c3f.ca/multimedia/interface/gradient-black-horizontal-right.png);
background-repeat:repeat-y;
background-position:right;
}

.bkg-opticfiber {
background-image:url(http://www.c3f.ca/multimedia/backgrounds/C3F-IMAGES-BACKGROUND-OPTIC-WAVES.jpg);
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}

/*Links, Lists*/

a {color:#e67517; text-decoration:none; font-weight:bold;}
a:active {color:#e67517; text-decoration:none; font-weight:bold;}
a:visited {color:#e67517; text-decoration:none; font-weight:bold;}
a:hover {color:#666; text-decoration:underline; font-weight:bold;}

/*Images*/

img {border:0;}
a img {border:1px solid transparent;}
a:hover img {border:1px solid transparent;}

.logo {border:0px solid;}
a .logo {border:0px solid;}
a:visited .logo {border:0px solid;}
a:hover .logo {border:0px solid;}

.align-left {align:left;}
.align-right {align:right;}

.img-title { /** Used in template pages - See if pages still needed **/
font-size:95%;
font-weight:bold;
text-align:center;
border:none;
background-color:transparent;
}

.icons {
	margin:5px;
}

.opacity-50 {zoom: 1; filter: alpha(opacity=50); opacity: 0.5;}
a .opacity-50 {zoom: 1; filter: alpha(opacity=50); opacity: 0.5;}
a:visited .opacity-50 {zoom: 1; filter: alpha(opacity=50); opacity: 0.5;}
a:hover .opacity-50 {zoom: 1; filter: alpha(opacity=100); opacity: 1.0;}

.border-zero {border-collapse:collapse; border:0px solid;}
.border-white {border-collapse:collapse; border:1px solid white;}
.border-red {border-collapse:collapse; border:1px solid red;}
.border-black {border-collapse:collapse; border:1px solid black;}
.border-grey {border-collapse:collapse; border:1px solid #ccc;}
.border-orange {border-collapse:collapse; border:1px solid #e67517;}
.border-left {border-collapse:collapse; border-left:1px solid #333;}
.border-right {border-collapse:collapse; border-right:1px solid #333;}
.border-top {border-collapse:collapse; border-top:1px solid #333;}
.border-top-light {border-collapse:collapse; border-top:1px solid #888;}
.border-bottom {border-collapse:collapse; border-bottom:1px solid #333;}
.border-design-top {border-collapse:collapse; border-top:25px solid #e67517; padding-top:30px;}
.border-design-bottom {border-collapse:collapse; border-bottom:25px solid #e67517; padding-bottom:30px;}
.border-design-right {border-collapse:collapse; border-right:25px solid #e67517; padding-right:30px;}
.border-design-left {border-collapse:collapse; border-left:25px solid #e67517; padding-left:30px;}
.border-design-left-light {border-collapse:collapse; border-left:25px solid #e67517; padding-left:30px;}

.outline-grey {outline: #ccc solid 1px;}

/* DIVs */

.div-container {
margin:0 auto;
padding:0px;
width:100%;
height:100%;
vertical-align:top;
text-align:center;
clear:both;
background-image:url(http://www.c3f.ca/multimedia/interface/gradient-vertical.jpg);
background-repeat:repeat-x;
background-attachment:fixed;
/*background-position:center;*/
}

.div-general {
margin:0 auto;
padding:0px;
vertical-align:top;
/*min-width:200px;*/
margin-bottom:5px;
clear:both;
}

div {
margin:0;
padding:0;
vertical-align:top;
text-align:left;
border-collapse:collapse;
border:0px solid black;
}

.div-center {margin:0 auto;}
.float-left {float:left;}
.float-right {float:right;}
.vertical-top {vertical-align:top;}
.vertical-middle {vertical-align:middle;}
.vertical-bottom {vertical-align:bottom;}

.display-inline {display:inline;}
.display-block {display:block;}
.display-inline-block {display:inline-block;}
.display-table {display:table;}

.clear-both-all {clear:both; text-align:center; margin:0; padding:0; font-size:0; line-height:0; border:0; height:0;}
.clear-both {clear:both;}
.clear-left {clear:left;}
.clear-right {clear:right;}

.overflow-scroll {overflow:scroll;}
.overflow-auto {overflow:auto;}
.overflow-hidden {overflow:hidden;}

.position-relative {position:relative;}
.position-absolute {position:absolute;}
.position-thumbnail {left: 0;top: 0;}

/* Margins, Paddings */

.margin-auto {margin:auto;}
.margin-0 {margin:0;}
.margin-5 {margin:5px;}
.margin-right-5 {margin-right:5px;}
.margin-10 {margin:10px;}
.margin-bottom-5 {margin-bottom:5px;}
.margin-bottom-10 {margin-bottom:10px;}
.margin-left-5 {margin-left:5px;}
.margin-left-10 {margin-left:10px;}

.padding-0 {padding:0;}
.padding-5 {padding:5px;}
.padding-10 {padding:10px;}

.padding-bottom-0 {padding-bottom:0px;}
.padding-bottom-5 {padding-bottom:5px;}
.padding-top-5 {padding-top:5px;}
.padding-right-5 {padding-right:5px;}
.padding-right-10 {padding-right:10px;}
.padding-left-5 {padding-left:5px;}
.padding-left-25 {padding-left:25px;}
.padding-left-50 {padding-left:50px;}
.padding-left-75 {padding-left:75px;}
.padding-left-100 {padding-left:100px;}
.padding-left-125 {padding-left:125px;}

/*Texts, Formatting, Paragraphs*/

.font-calibri {font-family:Calibri,Verdana,Tahoma,Helvetica,Arial,sans-serif;}
.font-century {font-family:"Century Gothic",Arial,Helvetica,sans-serif;}

.ul-text { /** See if it can be normalized (Dropdown menu conflict) **/
	list-style-type:square;
    list-style-position:outside;
	overflow: hidden;
}

ul { /** See if it can be normalized (Dropdown menu conflict) **/
	list-style-type:square;
}

.text-left {text-align:left;}
.text-center {text-align:center;}
.text-right {text-align:right;}
.text-justify {text-align:justify;}

.text-uppercase {text-transform: uppercase;}
.text-lowercase {text-transform: lowercase;}
.text-capitalize {text-transform: capitalize;}

.font-percent-10 {font-size:10%;}
.font-percent-20 {font-size:20%;}
.font-percent-30 {font-size:30%;}
.font-percent-40 {font-size:40%;}
.font-percent-50 {font-size:50%;}
.font-percent-60 {font-size:60%;}
.font-percent-70 {font-size:70%;}
.font-percent-75 {font-size:75%;}
.font-percent-80 {font-size:80%;}
.font-percent-90 {font-size:90%;}
.font-percent-100 {font-size:100%;}
.font-percent-110 {font-size:110%;}
.font-percent-125 {font-size:125%;}

h1,h2,h3,h4,h5,h6,h7 { 
     font-family:"Century Gothic",Arial,Helvetica,sans-serif;
     font-weight:bold;
	 color:#444444;
	 text-align:left;
	 /* CSS 3 only : word-wrap: break-word;*/
}

h3 {
	border-top:1px solid #aaa;
	/*line-height:5%;*/
	padding:5px 0px 0px 0px;
	clear:both;
}

h1 {font-size:150%;}
h2 {font-size:130%;}
h3 {font-size:120%;}
h4 {font-size:110%;}
h5 {font-size:100%;}

.header-pale {
font-family:"Century Gothic",Arial,Helvetica,sans-serif;
font-weight:bold;
font-size:150%;
color:#888;
}

/*Widths, Heights, Margins, Padding, etc*/

.width-0 {width:0;}

.width-percent-5 {width:5%;}
.width-percent-10 {width:10%;}
.width-percent-15 {width:15%;}
.width-percent-20 {width:20%;}
.width-percent-25 {width:25%;}
.width-percent-30 {width:30%;}
.width-percent-33 {width:33%;}
.width-percent-35 {width:35%;}
.width-percent-40 {width:40%;}
.width-percent-45 {width:45%;}
.width-percent-50 {width:50%;}
.width-percent-55 {width:55%;}
.width-percent-60 {width:60%;}
.width-percent-65 {width:65%;}
.width-percent-70 {width:70%;}
.width-percent-75 {width:75%;}
.width-percent-80 {width:80%;}
.width-percent-85 {width:85%;}
.width-percent-90 {width:90%;}
.width-percent-95 {width:95%;}
.width-percent-99 {width:99%;}
.width-percent-100 {width:100%;}

.min-percent-width-10{min-width:10%;} /** See if used**/
.min-percent-width-15{min-width:15%;}
.min-percent-width-20{min-width:20%;}
.min-percent-width-60{min-width:60%;}
.min-percent-width-70{min-width:70%;}

.min-width-15{min-width:15px;}
.min-width-20{min-width:20px;}
.min-width-25{min-width:25px;}
.min-width-50{min-width:50px;}
.min-width-100{min-width:100px;}
.min-width-125{min-width:125px;}
.min-width-150{min-width:150px;}
.min-width-175{min-width:175px;}
.min-width-200{min-width:200px;}
.min-width-300{min-width:300px;}
.min-width-400{min-width:400px;}

.height-percent-10 {height:10%;}
.height-percent-20 {height:20%;}
.height-percent-30 {height:30%;}
.height-percent-40 {height:40%;}
.height-percent-50 {height:50%;}
.height-percent-60 {height:60%;}
.height-percent-70 {height:70%;}
.height-percent-80 {height:80%;}
.height-percent-90 {height:90%;}
.height-percent-100 {height:100%;}

.min-height-15{min-height:15px;}
.min-height-20{min-height:20px;}
.min-height-25{min-height:25px;}
.min-height-30{min-height:30px;}
.min-height-40{min-height:40px;}
.min-height-50{min-height:50px;}
.min-height-75{min-height:75px;}
.min-height-100{min-height:100px;}
.min-height-125{min-height:125px;}
.min-height-200{min-height:200px;}
.min-height-250{min-height:250px;}
.min-height-300{min-height:300px;}
.min-height-350{min-height:350px;}
.min-height-400{min-height:400px;}
.min-height-450{min-height:450px;}
.min-height-500{min-height:500px;}
.min-height-600{min-height:600px;}

.max-width-100{max-width:100px;}
.max-width-125{max-width:125px;}
.max-width-150{max-width:150px;}
.max-width-320{max-width:320px;}
.max-width-700{max-width:700px;}

.max-height-200{max-height:200px;}
.max-height-250{max-height:250px;}

.height-0 {height:0;}
.height-5 {height:5;}
.height-10 {height:10;}
.height-video {height:320px;}

/* Menus */
.menu-top{font-size:75%;}
.menu-footer{font-size:90%;}

/*Columns and Boxes*/ /**See if it can be transformed **/

.boxes {
    margin:2px;
	padding:10px;
	text-align:left;
    vertical-align:top;
    display:inline-block;
	font-size:85%;
}

.boxes-odd {
    background:#ddd
}
.boxes-even {
    background:#eee
}


/*Banners*/
  #mybanner{position:relative;} 
  #mybanner0, #mybanner1, #mybanner2, #mybanner3, #mybanner4, #mybanner5{position:absolute;top:0;left:0;display:none;} 
  #mybanner0 {display:block;} 

FORM {
padding:10px;
}

.forms {
font-size:85%;
}


/*Youtube / Iframes*/

  IFRAME {
border:1px solid #e67517;
} 

/*---- CROSS BROWSER DROPDOWN MENU ----*/
ul#nav {
width:100%;
margin:0 auto;
font-weight:bold;
display: inline-block;
background:#e67517;
}

.drop li {
min-width:125px;
font-size:90%;
text-align:left;
}

ul.drop a {
display:block;
color:#fff;
text-decoration:none;
}

ul.drop,ul.drop li,ul.drop ul {
list-style:none;
/*border:1px solid #fff;*/
/*background:#e67517;*/
color:#fff;
margin:0;
padding:0;
}

ul.drop {
position:relative;
z-index:597;
/*float:left;*/
}

ul.drop li {
/*float:left;*/
display: inline-block;
vertical-align:middle;
padding:4px; padding-left:10px;
}

ul.drop li.hover,ul.drop li:hover {
position:relative;
z-index:599;
cursor:pointer;
background:#222;
}

ul.drop ul {
visibility:hidden;
position:absolute;
top:100%;
left:0px;
z-index:598;
/*width:100%;*/
background:#444;
border:0 solid #000;
}

ul.drop ul li {
float:none;
}

ul.drop ul ul {
top:10px;
left:125px;
}

ul.drop li:hover > ul {
visibility:visible;
}

/* Google Map */
#map-canvas {
text-align:center;
width: 90%;
height: 500px;}