/*	centennialsolar.com :: main style sheet
	tab = 4 spaces. see annotations at end of file.
	------------------------------------------------------------------------ */
	
/*	primary block & table elements :: general themes and identity.
	------------------------------------------------------------------------ */

body, div, p, th, td {
	font-family:		"Trebuchet MS", trebuchet, "Lucida Grande", "Lucida Sans", sans-serif;
	font-size:		13px;
	color:			#000;
}
body {
	background: 		#cedcec url(../img/layout/bg_page.jpg) repeat-x;
	margin: 		0px;
	padding:		0px;
	text-align:		center; /* concession for ie5 */
}
div, p, th, td {
	text-align:		justify;
}

/*	headings :: ensure appropriate scaling.
	------------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
	font-family:		"Trebuchet MS", trebuchet, "Lucida Grande", "Lucida Sans", sans-serif;
	color:			#0a50a0;
	background:		transparent;
	clear:			both;
}
h1 {font-size:			200%;}
h2 {font-size:			180%;}
h3 {font-size:			160%;}
h4 {font-size:			140%;}
h5 {font-size:			120%;}
h6 {font-size:			100%;}

/*	anchors :: these are modified below in some contexts (footer, etc.).
	------------------------------------------------------------------------ */

a {
	color:			#0a50a0;
	background:		transparent;
	text-decoration:	none;
}
a:hover {
	background:		#cedcec;
}

/*	logical inline elements :: ensure standard rendering. modify as needed.
	------------------------------------------------------------------------ */

abbr, acronym {
	border-bottom:		1px dashed;
}
dfn, em, var {
	font-style:		italic;
}
code, kbd, samp {
	font-family:		monospace;
}
strong {
	font-weight:		bold;
}
del {
	text-decoration:	line-through;
}
ins {
	text-decoration:	underline;
}
	

/*	non-textual elements :: 
	------------------------------------------------------------------------ */

img {
	border:			0px !important;
}
hr {
	height:			2px;
	width:			100%;
	color:			#fff;
	background-color:	#fff;
	border-top:		2px solid #0a50a0;
	padding:		0px;
}
body > * hr {
	height:			0px;
}

/*	normal page divisions :: layout and look & feel.
	------------------------------------------------------------------------ */

#wrapper {
	width:			756px;
	margin:			auto;
	background:		url(../img/layout/bg_content.gif) repeat-y;
}
#banner {
	width:			756px; 
	height:			104px;
	background:		url(../img/layout/bg_banner.jpg) no-repeat center;
	vertical-align:		middle;
}
#stock {
	position:		absolute;
	top:			21px;
	padding-left:		549px;
	text-align:		right;
}
#menu {
	width:			756px; 
	height:			39px;
	background:		url(../img/layout/bg_menu.jpg) no-repeat;
	font-size:		11px;
}
#captop {
	width:			756px; 
	height:			5px;
	background:		url(../img/layout/ct_content.jpg) no-repeat;
	clear:			both;
}
#content {
	float:			left;
	width:			756px;
	background:		url(../img/layout/bg_content.gif) repeat-y;
	line-height:		125%;
}
#main {
	float:			left;
	width:			498px;
}
#sidebar {
	float:			right;
	width:			194px;
}
#main, #sidebar {
	padding:		0px 16px;
	vertical-align:		top;
}
#slogan {
	clear:			both;
	text-align:		right;
	margin:			16px 15px 10px 546px;
}
#capbot {
	width:			756px; 
	height:			8px;
	clear:			both;
	background:		#cedcec url(../img/layout/cb_content.gif) no-repeat;
}
#footer {
	width:			756px;
	margin:			auto;
	text-align:		center;
	background:		#cedcec none !important;
	font-size:		11px;
	line-height:		125%;
	color:			#0a50a0;
	padding-bottom:		1em;
}

/*	unique pages :: splash page, etc.
	------------------------------------------------------------------------ */

#splash, #splash object, #splash embed {
	margin:			0px;
	padding:		0px;
	width:			100%;
	height:			100%;
	vertical-align:		middle;
	background:		#003366 none;
	color:			#fff;
}

.noflash {
	width:			400px;
	text-align:		center;
	margin:			auto;
	padding-top:		200px;
}
.noflash, .noflash p, .noflash a {
	background:		#003366 none;
	color:			#fff;
	font-size:		16px;
	font-weight:		bold;
	text-decoration:	none;
}
.noflash a:hover {
	background:		#003366 none;
	color:			#ffa033;
}
.noflash p {
	margin-top:		2px;
}
.noflash .left {
	text-align:		left;
	float:			left;
}
.noflash .right {
	text-align:		right;
	float:			right;
}

/*	inside the banner ::
	------------------------------------------------------------------------ */
#banner h1 {
	height:			66px;
	vertical-align:		middle;
	background:		url(../img/id/logo0.jpg) left no-repeat;
	margin:			20px 14px 0px;
	padding:		0px;	
}
#banner>h1 {			
	margin:			0px 14px;
	padding-top:		40px;
}
#banner h1 span {		/* "logo" for non-visual & print */
	visibility:		hidden;
}

/*	inside the menu ::
	------------------------------------------------------------------------ */

#menu ul {
	margin:			0px;
	padding-top:		11px;
}
#menu li {
	display:		inline;
	vertical-align:		middle;
	list-style:		none;
	padding:		0px 6px;
}
#menu li a {
	padding:		0px 4px;
}
#menu ul#level1 {
	float:			left;
	padding-left:		10px;
}
#menu ul#lang {
	float:			right;
	padding-right:		10px;
}
#menu ul#level1 li {
	border-right:		1px solid #0a50a0;
}
#menu ul#lang li {
	border-left:		1px solid #0a50a0;
}
#menu > ul#level1 > li {
	padding-left:		4px;
}
#menu > ul#lang > li {
	padding-right:		4px;
}

/*	inside the content area ::
	------------------------------------------------------------------------ */

#main > *:first-child, #sidebar > *:first-child {
	margin-top:		16px;
}
#sidebar h1 {
	font-size:		120%;
}
#sidebar h2 {
	font-size:		110%;
}
#sidebar h3 {
	font-size:		100%;
}
#slogan p {
	width:			194px;
	border-top:		2px solid #0a50a0;
	color:			#0a50a0;
	font-weight:		bold;
	background:		transparent url(../img/id/glyph0.jpg) bottom right no-repeat;
	padding-top:		4px;
	text-align:		left;
	margin-bottom:		0px;
}

/*	lists inside the content area ::
	------------------------------------------------------------------------ */

#content ul, #content ul ul ul {
	list-style:		url(../img/deco/bullet_l1.jpg) outside;
	margin-left:		16px;
}
#content ul ul {
	list-style:		url(../img/deco/bullet_l2.jpg) outside;
}
#content > * ul {
	padding-left:		16px;
	margin-left:		inherit;
}
.listcap {
	color:			#0a50a0;
	background-color:	inherit;
	font-weight:		bold;
	margin-bottom:		0em;
}

/*	flowed descriptions ::
	------------------------------------------------------------------------ */

.desc-tl img { 			/*	unfortunately still requires the align="left" html attrib. */
	padding-right:		1em;
	margin-bottom :		1em;
}
.desc-tl > img {
	margin-right:		1em;
	padding-right:		inherit;
}
.desc-tl li {
	margin-left:		1.25em;
}
.desc-tr img { 			/*	unfortunately still requires the align="left" html attrib. */
	padding-left:		1em;
	margin-bottom :		1em;
}
.desc-tr > img {
	margin-left:		1em;
	padding-left:		inherit;
}
.desc-tr li {
	margin-right:		1.25em;
}

/*	ie/win fixes for peekaboo bullets in flowed descriptions
	[this comment line ends with an escape char] -------------------------- \*/

* html .desc-tl ul {
	height:			1%;
}

/*	end peekaboo, margin fix */

/*	inside the footer ::
	-------------------------------------------------------------------------*/

#footer p {
	text-align:		center;
	background:		#cedcec none !important;
	font-size:		11px;
	line-height:		125%;
	color:			#0a50a0;

}
#footer a:hover {
	background:		inherit;
	text-decoration:	underline;
}

/*	tables (yes, tables.) ::
	-------------------------------------------------------------------------*/

table#contact, table#contact td {
	margin:			0px;
	padding:		0px;
	vertical-align:		top;
}
table#contact td.addr {
	padding-left:		1em;
	text-align:		right;
}
table.prodshot {		
	margin:			0px;
	padding:		0px;
	vertical-align:		top;
	text-align:		center;
}
table.prodshot td {
	margin:			0px;
	padding:		0px;
}
table.prodshot tr.cap td {
	text-align:		center;
	font-size:		11px;
}
table.prodshot td.mid {
	font-size:		11px;
	padding:		0px 6px;
}
table.download {
	margin:			0px;
	padding:		0px;
	vertical-align:		top;
	margin-bottom:		1em;
}
table.download th {
	padding-top:		1em;
	color:			#0a50a0;
}
table.download td.pdf {
	background: 		transparent url(../img/deco/pdf16.jpg) right no-repeat;
}
table.download td.html {
	background: 		transparent url(../img/deco/bullet_l1.jpg) top right no-repeat;
} 
table.download td.pdf span, table.download td.html span {
	visibility:		hidden;
}
table.download td.filelink {
	padding-left: 		4px;
}

/*	miscellaneous :: 
	-------------------------------------------------------------------------*/

.mark {
	font-size:		75%;
	vertical-align:		text-top;
}
.atoms {
	font-size:		75%;
	vertical-align:		baseline;
}
.clear {			/* place after float elements inside main & sidebar */
	clear:			both;
}
br.clear {
	height:			1px;
}
#filler	{			/* place this empty div in sidebar (at end) on short pages,
				   to compensate for the lack of min-height support in ie.
				   remember to remove it from the html when content is added. */
	width:			1px;
	height:			300px;
	visibility:		hidden;
}
#filler-large {			/* place this empty div in main (at end) on empty pages,
				   (example, french under-construction pages) to compensate 
				   for the lack of min-height support in ie. 
				   remember to remove it from the html when content is added. */
	width:			1px;
	height:			400px;
	visibility:		hidden;
}

/*	orphaned and/or for future use :: 
	-------------------------------------------------------------------------*/

.col2 {				/* two-column content inside main or sidebar 
				   requires the <br class="clear"> below it.
				   currently orphaned */
	width:			45%;
	float:			left;
}
#doctree {				
	margin:			0px;
	padding:		0px;
	font-size:		11px;
	padding-left:		3px;
	line-height:		125%;
}
.highlight {			/* text for review and/or notes in template files */
	background-color:	#ff0;
}

/*	annotations :: 
	-------------------------------------------------------------------------
	
	There are a few hacks in place, to make up for browser inconsistencites:
	- CSS1 selector (nothing fancy, but use decendants)
		- Understood by most modern browsers, so this is how selectors are 
		  formed unless browser-specific devaitions are required.
	- CSS2 child (ex: "#somediv > #childdiv")
		- Hide from IE <= 6.0. Usually used this to make up for box model 
		  problems in IE.
	- in a few cases for ie/win only, we use the holly hack instead:
		- wrap selectors in comments, the first with an escape character.
		- assign specific styles for ie/win (usually height and margin 
		  fixes).
		- if later work is done, the holly hack will be applied in more
		  cases where appropriate, since it is a light & elegant fix.
	
	Content notes:
	- The splash page has no <!DOCTYPE>, This is intentional.
	- Make sure all content is wrapped in an appropriate logical tag (ex: 
	  regular text should be wrapped inside a <p>), and the stylesheet should
	  take care of formatting.
	- div nesting is required as illustrated in the template file to 
	  accomodate browser inconsistencies.
	- some filler elements are used on light pages: simpler than height/min-
	  height & will be replaced with actual text at some future date.

*/


/* ma partie test -- Nabil, friday nov 19, 2004 10am --		*/

input.bordure {
	border:	1px solid orange;
}

/* before it was in the bottom of web page. I just add sidebar2 to replace it where i want (used only for sondage.html)*/
td.lbl {
	font-weight: normal; 
	text-align: left;
}

div#sidebar2 {
	padding-top: 4px;
	padding-right: 16px;
	float: right;
	width: 194px;
	z-index: 11;	
}

div#sidebar2 h1 {
	font-size: 120%; 
}

div#deco {
	text-align: left; 
	margin: 0;
}

#Q_list	{ 
	background: 		transparent url(../img/deco/bullet_l1.jpg) top left no-repeat;
	/*margin-left:		16px;*/
}