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

html,body { margin:0;padding:0;border:0;height:100%; } 
body { background: #fff  }  /* url(../img/bg_pattern.gif); */  

body, input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	line-spacing:1;
}

a { outline:none; }
a img { border:0; }

.left { float:left; }
.right { float:right; }
.clear { clear:both; }
.hide { display:none; }
.small { font-size:.7em; }

sup {font-size: smaller;}


/* LOP Container 

#main-section {
	background: #fff url(../img/bg_pattern.gif);
	width:960px;
	padding-top: 0px;
	float:left;
}
*/
/* #container { position:relative; width:850px; margin:0; padding:0 27px 0 0; background: transparent url(../img/bg_main.png) repeat-y; } */
#container { position:relative; width:850px; padding:0 27px 0 0; background: transparent url(../img/bg_main.png) repeat-y; }

#header { position:relative; z-index:10; width:850px; }

#header .logo { margin:0; padding:0; border:0; text-indent:-10000px;  width:850px; height:117px; background-position:top left; background-repeat:no-repeat; }
/*#header .lang { position:absolute; top:10px; right:0;}
#header .book { position:absolute; top:106px; right:10px; }
#header .book .tooltip { position:absolute; top:-5px; right:85px; z-index:10; }*/
#header .lang { position:absolute; top:10px; right:-26px;}
#header .book {
	position:absolute;
	top:108px;
	right:-12px;
}
#header .book .tooltip { position:absolute; top:-5px; right:85px; z-index:10; }

#menu { background: transparent url(../img/bg_menu_x.png) repeat-x; height:67px; }
.menuHome {padding-left:83px}
#menu a { position:relative; float:left; }
#menu .tooltip { position:absolute; bottom:-33px; z-index:1000; }
#menu .time-travel .tooltip { left:43px; }
#menu .inside-view .tooltip { left:34px; }
#menu .touchpoints .tooltip { left:27px; }

#inner-content { position:relative; padding: 50px 82px; background: transparent url(../img/bg_shadow_top.png) no-repeat top left; min-height:160px; width:686px; }

#main { margin:-25px -17px; background-color:#fff; }

#main p {padding:0 20px 10px 20px; margin:0}

#puzzle-wrapper { position:relative; background: url('../img/_puzzle/bg.jpg') no-repeat scroll top left; width:720px; height:742px; }
#puzzle-wrapper .puzzle { position: absolute; z-index:100; }

#puzzle { position:absolute; top:32px; right:24px; width:450px; height:450px; }
#puzzle .droppable { position:absolute; width:150px; height:150px; }

#footer { padding-bottom:40px; background-color:#434441; font-family:"Trebuchet MS", Helvetica, verdana, serif; color:#7d7d72 }
#footer a {color:#7d7d72}
#footer .one { margin:40px 0 0 20px; width:10px; padding-right:40px; }
#footer .two { margin-top:40px; width:580px; padding-right:50px; }
#footer .two p {font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:120%; margin-top:0; color:#bbb}
#footer .two p a {color:#bbb}
#footer .three { margin-top:40px; }

/* template specific for (time-travel, inside-view and touchpoints) -------- */

body.home-page #content { background: #1C96A6 url(../img/bg_home.jpg) no-repeat; width:850px; min-height:552px; _height:552px; }
body.time-travel #content { background: #8C20B0 url(../img/bg_timeline.jpg) no-repeat bottom left; width:850px; min-height:1018px; _height:1018px; }
body.inside-view #content { background: #8C20B0 url(../img/bg_inside_view.jpg) repeat-y top left; width:850px; min-height:391px; _height:391px; }
body.touchpoints #content { background: #EAC34F url(../img/bg_touchpoints.jpg) no-repeat top left; width:850px; min-height:952px; _height:952px; }

/* English headers */
body.home-page #header .logo { background-image:url(../img/how_canadians_govern_themselves_blue-e.png); }
body.time-travel #header .logo { background-image:url(../img/how_canadians_govern_themselves-e.png); }
body.inside-view #header .logo { background-image:url(../img/how_canadians_govern_themselves_orange-e.png); }
body.touchpoints #header .logo { background-image:url(../img/how_canadians_govern_themselves_yellow-e.png); }

/* French headers */
body.home-page #header.fr .logo { background-image:url(../img/how_canadians_govern_themselves_blue-f.png); }
body.time-travel #header.fr .logo { background-image:url(../img/how_canadians_govern_themselves-f.png); }
body.inside-view #header.fr .logo { background-image:url(../img/how_canadians_govern_themselves_orange-f.png); }
body.touchpoints #header.fr .logo { background-image:url(../img/how_canadians_govern_themselves_yellow-f.png); }


/* HTML Text and Read more in the book links */
a.readMore, a.htmlText { font-size: 100%; font-weight:bold; text-decoration:none; padding-bottom:5px;}
a.readMore:hover, a.htmlText:hover { text-decoration: underline;}
a.readMore { padding-left: 10px;}
a.htmlText { padding-left: 30px;}

body.time-travel a.readMore, body.time-travel .moreChapters a, body.time-travel a.htmlText {color: #8b11ae;}
body.inside-view a.readMore, body.inside-view .moreChapters a, body.inside-view a.htmlText {color:#C60;}
body.touchpoints a.readMore, body.touchpoints .moreChapters a, body.touchpoints a.htmlText {color:#9e7919;}

.moreChapters a { display:block;  padding-left: 10px;}


/* Home specific */
.bigIconMenu {float:left; position:relative; display:inline; width:157px; height:221px; 
			  padding:0px 35px; color:#777;}
.bigIconMenu h2 {color:#555; font-size:130%; padding:0; margin:0 0 10px 0}
.bigIconMenu p {margin-top:10px !important; padding:5px 0 !important; font-size:90%; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}

/* Overlays */

#overlay {
	display:none;
	position:fixed;
	_position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: #000;
	z-index:9997;
	filter:alpha(opacity=50); -khtml-opacity:.5; -moz-opacity:.5; opacity:.5;
}
/* #popups { display:none; position:absolute; top:209px; left:65px; height: 100%;z-index:9998; } */
#popups { display:none; position:absolute; top:100px; left:20%; height: 100%;z-index:9998; }
#popups .popup { display: none; margin: 0 auto;}
#popups .general { position: absolute; }
#popup_touchpoint { width: 930px; height: 650px; background-color:#000;border:1px solid white }


#popup_congratulation_puzzle,
#popup_congratulation_touchpoint { width: 470px; /*height: 250px;*/ background: #fff; text-align:center; padding: 40px; top: 400px; left: 160px; z-index:9999; }
#popup_congratulation_touchpoint_solve { width: 390px; /*height: 200px;*/ background: #fff; text-align:center; padding: 40px; top: 400px; left: 160px; z-index:9999; }

/* #popup_congratulation_touchpoint { width: 470px; background: #fff; text-align:center; padding: 40px; top: 400px; left: 160px; z-index:9999; } */
/* #popup_congratulation_touchpoint_solve { width: 390px; background: #fff; text-align:center; padding: 40px; top: 400px; left: 160px; z-index:9999; } */

/*#popup-queen, #popup-senate, #popup-hoc, #popup-pm_and_cabinet { width: 470px; background: #fff; text-align:center; padding: 40px; top: 400px; left: 160px; z-index:9999; }*/
.puzzle-extra-info { width: 470px; /*height: 250px;*/ background: #fff; text-align:left; padding: 40px; top: 400px; left: 160px; z-index:9999; }

#popup_congratulation_puzzle .popup_content,
#popup_congratulation_touchpoint .popup_content, 
#popup_congratulation_touchpoint_solve .popup_content { padding-left:80px;text-align: left; } /* margin: 30px 0 30px 20px; text-align: left; */
.puzzle-extra-info .popup_content {padding-left:130px;}

#popup_congratulation_puzzle .popup_content img,
#popup_congratulation_touchpoint .popup_content img,
#popup_congratulation_touchpoint_solve .popup_content img{ margin-left:-80px;float:left; }  /* margin-bottom: 10px; */
.puzzle-extra-info .popup_content img { float:left; margin-left:-130px }

.popup .close_popup { cursor:pointer; position:absolute; top: 0; right:0; }

#popups #popup_congratulation_touchpoint,
#popups #popup_congratulation_touchpoint_solve { top: 150px; }

#close_popup { cursor:pointer; position:absolute; top: -22px; right:0; }

#quiz-end a, #popups a {font-weight:bold; text-decoration:none; color:#6e6e6e; line-height:1.5}
#quiz-end a:hover, #popups a:hover {color:#af4201}
#quiz-end a img, #popups a img {margin:0 20px 0 0; vertical-align:middle;}

/* Time travel specific - for each date */
#gallery { height:160px; width:240px; overflow:hidden }



/*utility*/
span.externalLink {height:10px; width:10px; background:url(../img/icon_external_link.gif) no-repeat; display:inline-block}
span.externalLinkFooter {height:10px; width:10px; background:url(../img/icon_external_link_footer.gif) no-repeat; display:inline-block}