/* CSS Document */
/* modified from original CSI1 and MM5 stylesheets by DH. This needs to be stripped and rebuilt for CSI3 */

.photo {
	float:left;
	padding:0 20px 20px 0;
	margin:0;
	border:0;
}

#CTTLSiteDimensions {
    position: relative;
	margin: 0 auto;
	width: 1000px;
	padding: 0px;
	font-size: 1em;
	z-index:1;
}

body {
  	float: none !important;
  	width: auto !important;
  	margin: 0 auto !important;
  	padding: 0 !important;
	background-image: url(../images/main_background.jpg);
	background-position:top;
	background-repeat:repeat-x;
}

#CTTLPlayArea{
   color:white;
   float:right;
   font-size:18px;
   height:65px;
   left:575px;
   margin:0;
   padding:0;
   position:absolute;
   top:15px;
   width:200px;
   z-index:5;	     	
}

#CTTLLanguage{
   color:white;
   float:right;
   font-size:13px;
   font-family:verdana;
   height:15px;
   left:580px;
   margin:0;
   padding:0;
   position:absolute;
   top:45px;
   width:200px;
   z-index:5;           
}


#CTTLLoginArea{
   color:white;
   float:right;
   font-size:18px;
   height:65px;
   left:785px;
   margin:0;
   padding:0;
   position:absolute;
   top:10px;
   width:200px;
   z-index:5;	     	
}


#CTTLLoginArea div{
   width:140px;
   margin-bottom:3px;
   background-color:#008C00;
   border:1px solid #FFFFFF;  
   font-family:verdana, arial;
   color:#FFFFFF;
   font-size:13px;
   text-decoration: none; 
   font-variant:small-caps;
   z-index:6;  
}


#CTTLLoginArea a{
   text-decoration: none;
   color:#FFFFFF; 
   padding:5px 0px 0px 5px;   
}

#homeIcon{
   width:45px;
   height:63px;
   position: absolute;
   top:0px;
   left:145px; 
}

#playing_as{
   text-decoration: none;
   color:#FFFFFF; 
   padding:5px 0px 0px 5px;   
   font-style:italic;   
   font-variant:normal;     
}

#CTTLSiteContent {
	float: left;
	width: 1000px;
	padding: 0;
	margin: 0;
	z-index:1;
}

#CTTLTopBlankArea {
	text-align:right;
	height: 18px;
	width: 1000px;
	padding: 0;
	margin: 0;
}

#CTTLHeaderArea {
	float:left;
	height: 110px;
	width: 1000px;
	padding: 0;
	background: url(../images/top_curve.gif) no-repeat;
}

#CTTLHeaderAreaSmall {
   position:relative;
	float:left;
	height: 75px;
	width: 1000px;
	padding: 0;
	background: url(../images/top_curve.gif) no-repeat;
   z-index:2;
}

#CTTLHeaderAreaLogo {
	float:left;
	height: 100px;
	width: 970px;
	padding: 10px 15px 0px 15px;
	margin: 0;
}

#CTTLHeaderAreaLogoSmall {
   position:absolute;
	float:left;
	height: 65px;
	width: 970px;
	padding: 10px 15px 0px 15px;
	margin: 0;
	z-index:2;
}

#CTTLHeaderAreaLargeFlashAll {
	float:left;
	height: 455px;
	width: 970px;
	padding: 10px 15px 0px 15px;
	margin: 0;
}

#CTTLTopNavArea {
	float:left;
	height: 30px;
	width: 1000px;
	padding: 0;
	margin: 0;
	background:url(../images/middle_lines.gif) repeat-y;
}

#CTTLTopNavAreaGraphic {
	float:left;
	height: 30px;
	width: 970px;
	padding: 0px 15px;
	margin: 0;
}

#CTTLMiddleArea {
	float:left;
	height: 355px;
	width: 1000px;
	padding-left: 15px;
	background:url(../images/middle_lines.gif) repeat-y;
	position:relative;
}

#CTTLMiddleArea2tier {
	float:left;
	width: 970px;
	padding: 0px 15px;
	margin: 0;
/*	border:#00CC66 1px solid;*/
	background:url(../images/middle_lines_2tier2.jpg) repeat-y;
}

#CTTLMiddleArea2tierFlash {
	float:left;
	width: 960px;
	padding: 0px 20px;
	margin: 0;
	background:url(../images/middle_lines_2tier2.jpg) repeat-y;
}

#CTTLMiddleArea2tierFlashGame {
	float:left;
	width: 960px;
	height:495px;
	padding: 0px 20px;
	margin: 0;
	background:url(../images/middle_lines_2tier3.jpg) repeat-y;
}

#CTTLMiddleArea2tierFlashContainer {
	float:left;
	width: 920px;
	padding:20px;
	margin: 0;
  /* background:url(images/middle_lines_2tier2.jpg) repeat-y; */
/*	border:#00CC66 1px solid;*/
}

#CTTLMiddleArea2tierFlashContainerGame {
	float:left;
	width: 960px;
	height: 495px !important;
	padding:0;
	margin: 0;
	border-top:#00CC66 1px solid;
}

#CTTLMiddleAreaLeftFlash {
	float:left;
	height: 355px;
	width: 330px;
	padding: 0;
	margin: 0;
}

#CTTLMiddleAreaRightFlash {
	float:left;
	height: 355px;
	width: 640px;
	padding: 0;
	margin: 0;
}

#CTTLMiddleNavArea {
	float:left;
	height: 35px;
	width: 1000px;
	padding: 0;
	margin: 0;
	background:url(../images/middle_lines.gif) repeat-y;
}

#CTTLMiddleNavAreaGraphic {
	float:left;
	height: 35px;
	width: 970px;
	padding: 0px 15px;
	margin: 0;
}

#CTTLLowerArea {
	float:left;
	height: 150px;
	width: 970px;
	padding: 0px 15px;
	margin: 0;
	background:url(../images/middle_lines.gif) repeat-y;
}

#CTTLLowerAreaFlash {
	float:left;
	height: 150px;
	width: 970px;
	padding: 0;
	margin: 0;
}

#CTTLLowerAreaQuote {
	float:left;
	height: 50px;
	width: 970px;
	padding: 0px 15px;
	margin: 0;
	background:url(../images/middle_lines.gif) repeat-y;
}

#CTTLLowerAreaQuoteFlash {
	float:left;
	height: 50px;
	width: 970px;
	padding: 0;
	margin: 0;
}

#CTTLLowerAreaSupport {
	float:left;
	height: 70px;
	width: 970px;
	padding: 0px 15px;
	margin: 0;
	background: url(../images/bottom_curve.gif) no-repeat;
}

#CTTLLowerAreaSupportGame {
	float:left;
	height: 20px;
	width: 970px;
	padding: 0px 15px;
	margin: 0;
	background: url(../images/bottom_curve3.gif) no-repeat;
}

#CTTLLowerAreaSupportText {
	float:left;
	height: 30px;
	width: 910px;
	padding: 5px 30px 20px 30px;
	margin: 0;
	text-align:center;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
}

#CTTLLowerAreaSupportText a {
   color:#66FF00;
   font-weight:bold;   
   text-decoration:underline;
}

#CTTLLowerAreaSupportText a:hover {
   color:#66FF00;
   font-weight:bold;   
   text-decoration:underline;
}

#CTTLLowerAreaSupportText a:visited {   
   text-decoration:none;
}

#CTTLBottomArea {
	float:left;
	height: 60px;
	width: 966px;
	padding: 0px 15px;
	margin-top:10px;
	border: #00892e 2px solid;
	background-color:#000000;
}

#CTTLBottomAreaLogos  {
	text-align: center;
}

#CTTLnoFlash  {
	float:left;
	padding:10px;
	margin: 0;
}

/* 2Tier Area */

#wrapper {
/*	float:left;*/
	text-align: left;
	margin: 0px auto;
	padding: 0px;
/*	border:#00CC66 1px solid;*/
	width: 970px;
}

#containall {
	float:left;
	background:url(../images/2tier_middle_graphic.jpg) repeat-x;
	padding:0;
	margin:0;
}

#header {
	margin: 0 0 15px 0;
	background: yellow;
}

#side-a {
	float: left;
	width: 195px;

}

#side-a-contain {
	float: left;
/*	background: #009933;*/
}

#side-a-graphic {
	float: left;
	width: 194px;
	height:128px;
	background:url(images/2tier_sidenav_top_graphic.jpg) no-repeat;
}


/*#side-a-graphic-bottom {
	float: left;
	width: 194px;
	height:210px;
	background: url(images/2tier_sidenav_bottom_graphic.jpg) no-repeat;
}
*/
#side-b { 
	margin: 0;
	float: left;
/*	background-color:#00FF00;*/
	width: 775px;
	height: 1% /* Holly hack for Peekaboo Bug */
}

#side-b-contain {
	float: left;
}

#side-b-content {
	float: left;
	width: 675px;
	min-height: 400px;
	margin:0;
	padding:50px;
	color:#000000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: .8em;
	font-weight:normal;
}

#footer {
	clear: both;
	background: #A2A2A2;
}


<!-- 
/* CSS issu des tutoriels www.alsacreations.com/articles */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative;
top: 0;
left: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.7em;
}
dl#menu {
width: 194px;

}
dl#menu dt {
margin-bottom: 20px;
border-top: 1px solid #009900;
border-bottom: 1px solid #009900;
padding:0;
height: 24px;
line-height: 24px;
text-align: center;
font-weight: bold;
background: url(images/2tier_nav_00.jpg) repeat-x;
color:#FFFFFF;
}
dl#menu dd {
border: 1px solid #009900;

}
dl#menu li {
text-align: center;
padding: 5px;

}
dl#menu li a{
color: #fff;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

dl#menu dt a {
color: #FFF;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}


dl#menu li a:hover{
background:  #00CC66;
color:#000;
}

#menu dt a:hover {
background: url(images/2tier_nav_01.jpg) repeat-x;
color:#ffffff;
}


#content {
	color:#ffffff; !important
}

#content h1 {
	font-size:18px;
	font-weight:bold;
	font-family:"Courier New", Courier, monospace;
}

#content h2 {
	font-size:18px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	font-style:italic;
}

#content p {
	font-family:"Courier New", Courier, monospace;
}

#left_panel {
	width:600px;
	float:left;	
	margin-right: 10px;
}

#right_panel {
	width:300px !important;
	float:left;
	margin-left: 25px;
}

#right_panel a, #right_panel a:link, #right_panel a:visited { 
	display:block;
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration: none;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	height: 45px;
	width: 200px;
	background-image: url(../images/button.jpg);
	background-position: 0px 94px;
	margin-bottom:0px;
	margin-top:0px;
	line-height: 45px;
}

#right_panel a:hover {
	background-image: url(../images/button.jpg);
	background-position: 0px 0px;
}

#right_panel a:active {
	background-position: 0px 47px;
}

#right_panel td {

}

#loginInterface, #guestInterface, #signingInterface, #walkthroughInterface {
   display: none;
   position:absolute;
   top:50px;
   left:275px;
   z-index:3;
}

#signingTable{
   color:white;
   float:right;
   font-size:18px;
   height:65px;
   margin:0;
   padding:0;
   position:absolute;
   width:200px;
   z-index:100;	
   text-align:left;     	
}


#signingTable div{
   width:140px;
   margin-bottom:3px;
   background-color:#008C00;
   border:1px solid #FFFFFF;  
   font-family:verdana, arial;
   color:#FFFFFF;
   font-size:13px;
   text-decoration: none; 
   font-variant:small-caps;  
}

#signingTable a{
   text-decoration: none;
   color:#FFFFFF; 
   padding:5px 0px 0px 5px;   
}

#loginTable, #logoutTable, #registerTable, #guestTable, #walkthroughTable{
   color:#FFFFFF;
   font-family:verdana,arial;
   font-size:12px;
   background-color:#008C00;
   border:1px solid #FFFFFF;
}

#loginTable td, #logoutTable td, #registerTable td, #guestTable td{
   padding: 5px 1px 1px 5px;
}

#poll_container {
   display: none;
}

#register-container {
   display: none;
}

#logoutInterface {
   display: none;
   
}

#caction_box {
   color:#FFFFFF;
   font-family:verdana,arial;
   font-size:14px;
   background-color:#008C00;
   border:1px solid #FFFFFF;
   font-variant:small-caps;
   padding: 0px 15px 0px 15px; 
   text-align:center; 
   width:200px;
}

#cuserbox {
   color:#FFFFFF;
   font-family:verdana,arial;
   font-size:14px;
   background-color:#008C00;
   border:1px solid #FFFFFF;
   font-variant:small-caps;
   padding: 0px 15px 0px 15px;      
   text-align:center; 
   width:140px;  
}

#cregister_box {
   color:#FFFFFF;
   font-family:verdana,arial;
   font-size:14px;
   background-color:#008C00;
   border:1px solid #FFFFFF;
   font-variant:small-caps;
   padding: 0px 15px 0px 15px;
   text-align:center; 
}

#case2{
   width:300px;
   height:300px;
}
   
#case3{
   width:300px;
   height:300px;
}

#logo_case_one {
   border: 3px solid #333333;
   position: absolute;
   top:0px;
   left:15px;     
}

#logo_case_two {
   border: 3px solid #333333;
   position: absolute;
   top:0px;
   left:341px;     
}

#logo_case_three {
   border: 3px solid #333333;
   position: absolute;
   top:0px;
   left:658px;     
}

#login_message, #register_message{
   color:#FF1A00;
}

#saveokInterface, #savenoInterface{
   display: none;
   position:absolute;
   z-index:3;   
}

#saveokTable, #savenoTable{
   background-color:#008C00;   
   color:white;
   float:right;
   font-size:22px;
   height:150px;
   margin:0;
   padding:0;
   position:absolute;
   width:330px;
   z-index:100;   
   text-align:center;
   border:1px solid #FFFFFF;
   padding: 0px 15px 0px 15px;
   line-height:30px;
   left:0px;       
   top:27px;    
}

#saveokTable span, #savenoTable span{
   background-color:#008C00;   
   color:blue;
   font-size:11px; 
   text-align:right;   
}