/* --------------------------------------------------------------------- */
/* This file contains the CSS properties for the layout and presentation */
/* of the MHCyr.com website contents.                                    */
/* Version: 4.5.0                                                        */
/* NOTE: This file is used for all browsers except IE.                   */
/* --------------------------------------------------------------------- */

/* -------------------------------------------------------- */
/* <<<<<<<<<<<<<<<<<<<< Color Glossary >>>>>>>>>>>>>>>>>>>> */
/*      Dominant Dark Blue  =  #025075 (2,80,117)           */
/*      Dominant Light Blue =  #D8E4EA (216,228,234)        */
/*		Font Light Blue     =  #D8E4EA (216,228,234)        */
/*		TOC Background Blue =  #CEDDE4 (206,221,228)		*/
/*		Orange			    =  #FF6600 (255,102,0)		    */
/* -------------------------------------------------------- */

/* Erase the built-in browser formatting - CSS reset - before anything else */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
	font-size: 100%;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------- */
/* <<<<<<<<<<<<<<<<<<<< HTML Elements >>>>>>>>>>>>>>>>>>>> */
/* ------------------------------------------------------- */
html {
	overflow-y: scroll;
}

body {
	background-color: #D8E4EA;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 62.5%; /* Gives a base of 10px */
	margin: 20px auto;
	padding: 0;
	width: 950px;
}

/* ------------------------------------------------------------------------- */
/* <<<<<<<<<<<<<<<<<<<<< IDs & Classes Used For Layout >>>>>>>>>>>>>>>>>>>>> */
/* ------------------------------------------------------------------------- */

/* Whole page (except footer) */
#page {
	background-color: #025075;
	border: 1px solid #025075;
	float: left;
	width: 100%;
}

/* Picture box container (one for each section because of different pictures) */
#logoMain, #logoChirurgie , #logoBonJovi, #logoLiterature, #logoMoi, #logoContact, #logoMap, #logo404 {
	clear: both;
	float: left;
	font-size: 1.2em;
	height: 160px;
	margin-bottom: 30px;
	width: 100%;
}

	#logoMain {
		background: #025075 url(../common/images/logo_chutes_1024x160_gradient_90.jpg) no-repeat left top;   
	}

	#logoChirurgie {
		background: #025075 url(../common/images/logo_pont_1024x160_gradient_90.jpg) no-repeat left top;
	}

	#logoBonJovi {
		background: #025075 url(../common/images/logo_jon20110219_1024x160_gradient_90.jpg) no-repeat left top;
	}

	#logoLiterature {
		background: #025075 url(../common/images/logo_ocean_1024x160_gradient_90.jpg) no-repeat left top;
	}

	#logoMoi {
		background: #025075 url(../common/images/logo_fleurs_1024x160_gradient_90.jpg) no-repeat left top;
	}

	#logoContact {
		background: #025075 url(../common/images/logo_montagnes_1024x160_gradient_90.jpg) no-repeat left top;
	}

	#logoMap {
		background: #025075 url(../common/images/logo_banff_1024x160_gradient_90.jpg) no-repeat left top;
	}

	#logo404 {
		background: #025075;
	}

/* Navigation buttons -- Main Section */
/* IMPORTANT NOTE: Everything used to format the navigation drop-down menu is in "dropdown_x_x_x.css"
     where "x_x_x" is the current file version */
#mainNavigation {
	background-color: #025075;
	border: 2px solid #D8E4EA;
	float: left;
	font-size: 1.4em;
	margin-left: 2px;
	width: 237px; /* About 25% of total width */
}

/* List of hyperlinks - "You are here" style */
#URHere {
	border-bottom: 1px solid #D8E4EA;
	border-top: 1px solid #D8E4EA;
	color: #D8E4EA;
	float: left;
	font-size: 1.1em;
	margin-bottom: 5px;
	margin-top: 5px;
	width: 100%;
}

/* Text (main contents) */
#text {
	background-color: #D8E4EA;
	color: #025075;
	float: right;
	font-size: 1.2em;
	margin-right: 2px;
	padding: 0 19px;
	width: 664px; /* About 70% of total width */
}

/* Picture container (includes image and caption) when pictures are defined for a row */
.figure, .singleFigure, .figure310Wide {
	float: left;
	margin: 10px 2px 0 9px;
	width: 320px;
}

/* Picture container (includes image and caption) when only one picture is defined for a row */
.singleFigure, .single400WideFigure, .single427WideFigure, .single450WideFigure, .single500WideFigure,
.single520WideFigure, .single570WideFigure, .single600WideFigure {
	clear: both;
	float: none;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
}

.figure200Wide {
	float: left;
	margin: 10px 2px 0 8px;
	padding-top: 10px;
	width: 210px;
}

.figure290Wide {
	float: left;
	margin: 10px 2px 0 25px;
	padding-top: 10px;
	width: 300px;
}

.single400WideFigure {
	width: 410px;
}

.single427WideFigure {
	width: 437px;
}

.single450WideFigure {
	width: 461px;
}

.single500WideFigure {
	width: 510px;
}

.single520WideFigure {
	width: 530px;
}

.single570WideFigure {
	width: 580px;
}

.single600WideFigure {
	width: 610px;
}

/* Picture container (includes image only) */
.picture, .profile {
	background: url(../common/images/css/drop_shadow_1000x1000.jpg) right bottom no-repeat;
}

.profileFigure {
	float: left;
	margin: 0 0 0 9px;
	width: 320px;
}

.nutshell {
	float: right;
	margin: 0;
	padding: 0;
	width: 290px;
}

.youppido {
	display: none;
}

	/* Form button to center the button in the page*/
	#formButton  {
		clear: both;
		width: 55%;
	}

/* Bottom navigation box */
#bottomNavigation {
	clear: both;
}

/* Footer including copyrights */
#footer {
	color: #025075;
	float: left;
	font-size: 1.0em;
	padding: 20px 40px;
	text-align: center;
	width: 100%;
}
	
/* ---------------------------------------------------- */
/* <<<<<<<<<<<<<<<<<<<< Headings 1 >>>>>>>>>>>>>>>>>>>> */
/* ---------------------------------------------------- */

/* General properties for all headings 1 of the website */
h1 {
	color: #D8E4EA;
	font-size: 2em; /* As if we specified 20px */
	font-style: italic;
	font-weight: bold;
	margin-top: 160px;
	text-align: center;
	text-transform: uppercase;
}

/* ---------------------------------------------------- */
/* <<<<<<<<<<<<<<<<<<<< Headings 2 >>>>>>>>>>>>>>>>>>>> */
/* ---------------------------------------------------- */

/* General properties for all headings 2 of the website */
h2 {
	font-size: 1.8em; /* As if we specified 18px */
}

#text h2 {
	border-bottom: 1px solid #025075;
	font-weight: bold;
	padding: 15px 0 10px 0;
	text-align: center;
	text-transform: uppercase;
}

#text h2.siteMap {
	border: none;
	clear: both;
	padding: 10px 0;
	text-align: left;
	text-transform: none;
}

/* ---------------------------------------------------- */
/* <<<<<<<<<<<<<<<<<<<< Headings 3 >>>>>>>>>>>>>>>>>>>> */
/* ---------------------------------------------------- */

/* General properties for all headings 3 of the website */
h3 {
	clear: both; /* To make sure that headings don't try to wrap around floats */
	font-size: 1.6em; /* As if we specified 16px */
	font-weight: bold;
	padding: 20px 0;
	text-align: center;
}

/* ---------------------------------------------------- */
/* <<<<<<<<<<<<<<<<<<<< Headings 4 >>>>>>>>>>>>>>>>>>>> */
/* ---------------------------------------------------- */

/* General properties for all headings 4 of the website */
h4 {
	clear: both; /* To make sure that headings don't try to wrap around floats */
	font-size: 1.6em; /* As if we specified 16px */
	font-weight: bold;
	padding: 20px 0;
}

/* ---------------------------------------------------- */
/* <<<<<<<<<<<<<<<<<<<< Headings 5 >>>>>>>>>>>>>>>>>>>> */
/* ---------------------------------------------------- */

/* General properties for all headings 5 of the website */
h5 {
	clear: both; /* To make sure that headings don't try to wrap around floats */
	font-size: 1.2em; /* As if we specified 12px */
	font-weight: bold;
	padding: 20px 0;
}

/* ---------------------------------------------------- */
/* <<<<<<<<<<<<<<<<<<<< Paragraphs >>>>>>>>>>>>>>>>>>>> */
/* ---------------------------------------------------- */

/* General properties for all paragraphs of the website */
p {
	clear: both;
	line-height: 1.7em;
	margin: 0 0 10px 0;
	padding: 0 0 6px 0;
}

#URHere p {
	margin: 0;
	padding: 2px 0 2px 15px;
}

#text p {
	padding-bottom: 6px;
	text-align: justify;
}

#text p.toc {
	text-align: left;
}

#text p.newsComment {
	margin: 0 20px;
}

#text .figure p, #text .profileFigure p, #text .singleFigure p, #text .figure200Wide p, #text .figure290Wide p, #text .figure310Wide p,
#text .single400WideFigure p, #text .single427WideFigure p, #text .single450WideFigure p, #text .single500WideFigure p,
#text .single520WideFigure p, #text .single570WideFigure p, #text .single600WideFigure p {
	background-color: #CEDDE4;
	border: 1px dotted #025075;
	height: 3em;
	left: -8px; /* To make sure that the caption is under the picture itself, not the drop shadow */
	line-height: normal;
	font-size: 95%;
	font-weight: bold;
	padding: 2px 5px 0 5px;
	position: relative; /* To make sure that the caption is under the picture itself, not the drop shadow */
	text-align: center;
	width: 310px;
}

#text .figure200Wide p {
	width: 200px;
}

#text .figure290Wide p {
	height: 4em;
	width: 290px;
}

#text .figure310Wide p {
	height: 5em;
	width: 310px;
}

#text .single400WideFigure p {
	width: 400px;
}

#text .single427WideFigure p {
	width: 427px;
}

#text .single450WideFigure p {
	width: 450px;
}

#text .single500WideFigure p {
	width: 500px;
}

#text .single520WideFigure p {
	width: 520px;
}

#text .single570WideFigure p {
	width: 570px;
}

#text .single600WideFigure p {
	width: 600px;
}

#text .poem p {
	text-align: center;
}

#bottomNavigation p {
	background-color: #025075;
	color: #D8E4EA;
	margin: 0;
	padding: 5px 10px 7px 0;
	text-align: right;
}

/* --------------------------------------------------------- */
/* <<<<<<<<<<<<<<<<<<<< Unordered Lists >>>>>>>>>>>>>>>>>>>> */
/* --------------------------------------------------------- */

/* General properties for all unordered lists of the website */
ul {
	list-style-type: none;
	margin-left: 1.4em;
}

ul.topNavigation {
	float: right;
	margin: 0;
	padding: 0;
}

#text ul, #text ul.nutshell {
	margin: 0 20px 20px 20px;
	padding: 0;
	text-align: justify;
}

#text ul {
	float: left;
}

#text ul li ul {
	float: none;
	margin: 10px 15px 5px 15px;
}

#text ul.answerList {
	margin-bottom: 0;
	padding-bottom: 20px;
}

#text ul.siteMapContents {
	margin-bottom: 0;
}

/* ---------------------------------------------------- */
/* <<<<<<<<<<<<<<<<<<<< List Items >>>>>>>>>>>>>>>>>>>> */
/* ---------------------------------------------------- */
ul.topNavigation li {
	display: inline;
}

#text li {
	background: url(../common/images/css/1329791339_arrow-single-right-025075.png) no-repeat 0 5px;
	line-height: 1.7em;
	margin-bottom: 10px;
	padding-left: 15px;
}

#text ul li ul li {
	background: url(../common/images/css/1329791339_arrow-single-right-D8E4EA.png) no-repeat 0 5px;
}

#text ul.nutshell li {
	margin-bottom: 0;
}

#text ul.answerList li {
	background: url(../common/images/css/1329791339_arrow-single-right-D8E4EA.png) no-repeat 0 5px;
	margin-bottom: 0;
}

#text li.setlist {
	margin: 0 15px;
	text-transform: uppercase;
}

#text li.longList {
	background: none;
	float: left;
	line-height: 1.7em;
	margin: 0;
	padding: 0;
	width: 300px;
}

/* ---------------------------------------------------- */
/* <<<<<<<<<<<<<<<<<<<< Hyperlinks >>>>>>>>>>>>>>>>>>>> */
/* ---------------------------------------------------- */

/* General properties for all hyperlinks of the website */
a {
	color: #FF6600;
	font-weight: bold;
	text-decoration: none;
}

/* General behavior for all hyperlinks when the mouse cursor is over the hyperlinks */
a:hover, a.externalSite:hover, a.pdf:hover, ul.topNavigation li a.contact:hover {
	background-color: #025075;
	color: #D8E4EA;
	text-decoration: none;
}

#URHere a {
	font-weight: normal;
}

ul.topNavigation li a {
	background: none;
}

ul.topNavigation li a.language, ul.topNavigation li a.contact {
	font-size: 1.5em;
	margin: 0;
	padding: 0 0 0 20px;
}

ul.topNavigation li a.language {
	background: url(../common/images/css/arrow-right-FF6600.png) no-repeat left 20%;
}

ul.topNavigation li a.contact {
	background: url(../common/images/css/email.gif) no-repeat left 45%;
	margin-left: 0.3em;
	margin-right: 1.0em;
}

ul.topNavigation li a.language:hover {
	background: #025075 url(../common/images/css/arrow-right-D8E4EA.png) no-repeat left 20%;
}

a.externalSite {
	background: url(../common/images/css/globe.png) no-repeat right top;
	padding-bottom: 1px;
	padding-right: 20px;
}

a.pdf {
	background: url(../common/images/css/acrobat.png) no-repeat right top;
	padding-bottom: 1px;
	padding-right: 20px;
}

/* ------------------------------------------------ */
/* <<<<<<<<<<<<<<<<<<<< Images >>>>>>>>>>>>>>>>>>>> */
/* ------------------------------------------------ */
img {
	background-color: white;
	border: 1px solid #025075;
	display: block;
	margin: 5px auto 5px auto;
	padding: 5px;
}

ul.topNavigation img {
	background: none;
	border: none;
	display: inline;
	margin: 0;
	padding: 0 5px 5px 5px;
	vertical-align: middle;
}

.picture img, .profile img {
	left: -8px;
	position: relative; 
	top: -5px; 
}

img.noDropShadow {
	background: none;
	border: none;
}

img.width600px {
	width: 600px;
}

img.width450px {
	width: 450px;
}

/* ------------------------------------------------ */
/* <<<<<<<<<<<<<<<<<<<< iFrames >>>>>>>>>>>>>>>>>>> */
/* ------------------------------------------------ */
iframe {
	border: none;
	height: 350px;
	margin: 10px 0 20px 25px;
	padding: 0;
	width: 600px;
}

/* ------------------------------------------------ */
/* <<<<<<<<<<<<<<<<<<<< Tables >>>>>>>>>>>>>>>>>>>> */
/* ------------------------------------------------ */
table {
	border-collapse: collapse;
	border: 1px solid #025075;
	margin: 0 20px 15px 20px;
}

table.news {
	width: 94%; /* To make sure that small table contents expand the whole defined width */
}

table.listInText {
	border: none;
	margin: 0 auto 15px auto;
}

caption {
	font-size: 75%;
	text-align: right;
	visibility: hidden;
}

th {
	border-bottom: 2px solid #025075;
	padding: 5px 0;
	text-align: center;
	text-transform: uppercase;
}

th.dateColumn {
	width: 22%;
}

th.sectionColumn {
	width: 25%;
}

th.stepColumn {
	width: 22%;
}

td {
	padding: 5px 10px;
	text-align: center;
	vertical-align: top;
}

td.tableParagraph {
	line-height: 1.7em;
	padding-bottom: 15px;
	padding-top: 2px;
	text-align: justify;
}

.listInText td {
	text-align: left;
}

/* ------------------------------------------------ */
/* <<<<<<<<<<<<<<<< Special Styles >>>>>>>>>>>>>>>> */
/* ------------------------------------------------ */
#text .feedback, #text .title {
	text-align: center;
}

#text .sidenote {
	font-style: italic;
}

#text .question {
	background: url(../common/images/css/1329791339_arrow-single-right-025075.png) no-repeat 0 5px;
	font-weight: bold;
	padding-left: 20px;
}

#text .answer {
	margin-left: 20px;
}

#text .lyrics {
	font-style: italic;
	text-align: center;
}

#text .quote {
	font-style: italic;
	text-align: right;
}

#text .subtitle, .emphasis {
	font-weight: bold;
	text-decoration: underline;
}

#text .newsTitle {
	background-color: #025075;
	border: 2px solid #025075;
	color: #D8E4EA;
	font-weight: bold;
	margin: 0 20px;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
}

#text .newsSubtitle {
	border-bottom: 1px dotted #025075;
	font-weight: bold;
	margin: 0 20px 0 20px;
	padding: 0;
	text-align: center;
}

#text .toc {
	background-color: #CEDDE4;
	border: 1px dotted #025075;
	font-size: 87%;
	margin: 0 auto 10px auto;
	padding: 15px;
	width: 50%;
}

#text .showDetails {
	background-color: #CEDDE4;
	border: 1px solid #025075;
	margin: 0 auto 10px auto;
	padding: 15px;
	width: 50%;
}

#text .summary {
	font-size: 113%; /* To show the text as 100% based on the 87% reduction in class .toc */
	font-weight: bold;
}

#text .warning {
	border: 2px solid red;
	color: red;
	padding: 5px 10px;
}

#text .error {
	color: red;
}

sup {
	font-size: 60%;
	position: relative;
	top: 2px;
}

object {
	clear: both;
	height: 18px;
	margin: 5px 0 10px 0;
	padding: 0;
	width: 100%;
}

/* Class used instead of input[type="text"] to accommodate older browsers' limitation on CSS properties */
form textarea, form input.textStyled  {
	border: 1px solid #68909F;
	color: #025075;
	float: left;
	display: block;
	font-size: 1.2em;
	margin: 0 0 20px 0;
	padding: 2px;
	width: 75%;
}

form input.buttonStyled {
	color: #025075;
	float: right;
	margin: 0 0 20px 0;
	padding: 2px;
}

form textarea {
	overflow-y: scroll;
}

label {
	display: inline;
	float: left;
	width: 80px;
}