/* page general layout font + color */
html { font : normal small/1.8em "georgia","trebuchet ms",sans-serif; text-align : justify; }
body { width : 780px; margin : 0 .5em; padding : 0; background : #398adc url('/tutorial/images/zeng/aigle.jpg') right bottom no-repeat fixed; }
/* basic text presentation */
h1      { margin : 0; padding : 0; background : transparent; color : #059; }
h2      { margin-top : 0; background : transparent; color : #059; font-size : large; }
hr      { display : none; }
p       { padding : 0 .3em; }
address { font-style : normal; }
/* basic list presentation */
dl { margin  : 0;  padding : 0; }
dt { margin  : 0 0 .5em 0; padding : 0; font-weight : bold; text-decoration : underline; }
dd { margin  : 0 0 .5em 0; padding : 0; }
ul { margin : 0; list-style : none; }
ol { list-style-type : lower-roman; }
/* basic table presentation */
table    { width : auto; margin : 0 auto 1em auto; padding : 0; border : 1px solid #000; border-collapse : collapse; }
td, th   { padding : .3em; border : 1px solid #000; border-collapse : collapse; background : #fff; color : #000; vertical-align : top; text-align : left; }
thead th, 
tfoot th { background : #ddd; color : #000; }
th       { text-align : center; }
caption  { margin : 0 auto; background : transparent; color : #059; font-variant : small-caps; font-weight : bold; font-size : medium; text-transform : capitalize; }
/* basic links presentation */
a       { background : transparent; color : #ffc; text-decoration : none; }
a:hover { background : transparent; color : #059; }
a em    { font-style : normal; text-decoration : underline; }
/* basic form presentation */
form             { margin : 0; padding : 0; }
fieldset         { margin : .5em 0; border : 1px solid #059; }   
legend           { background : transparent;  color : #059;  font-weight : bold; }
input            { width : 250px; border : 1px solid #059; font : normal small "georgia","trebuchet ms",sans-serif; }
select           { width : 250px; border : 1px solid #059; font : normal small"georgia","trebuchet ms",sans-serif; }
textarea         { width : 350px; height : 150px; border : 1px solid #059; font : normal small/1.8em "georgia","trebuchet ms",sans-serif; }
optgroup         { margin : 0; padding : 0; background : #000; color : #fff; font : normal small"georgia","trebuchet ms",sans-serif; text-indent : .3em; }
option           { margin : 0; padding : 0 .2em; background : #fff; color : #000; }
form div         { width : 100%; overflow : hidden; margin : .3em 0; }
form label       { float : left; width : 30%; text-align : right;}
form span        { float : right; width : 69%; text-align : left; }
form span label  { float : none; width : auto; display : inline;	font-style : italic; text-align : left;}
input.checkbox   { width : auto; border : none; }
input.button     { width : auto; border : 1px solid #059; background : #8db8e4; color : #000; font-family : sans-serif; cursor : pointer; }
input.text:focus { background : #8db8e4; color : #000; } 
/* basic layouts */
div#header     { margin : .5em auto 0 auto; text-align : center; }
div#navigation { float : left; width : 190px; padding : 0; border : 1px solid #059;  background : #369;   color : #666; }
div#contenu    { float : right; width : 570px; margin : 0 0 1em 0; padding : .5em; }
div#footer     { clear : both; width : 300px; margin : .5em auto; border-top : 1px solid #fff; background : transparent; color : #fff; font-style : normal; text-align : center; }
/*W3C basic layouts */
body > div#header     { margin : .3em auto 0 auto; }
body > div#navigation { position : fixed; left : 10px;	top : 80px; width : 190px; padding : 0; border : 1px solid #059;  background : #369; color : #666; }
body > div#contenu    { position : absolute; left : 200px; top : 80px; width : 570px; margin : 0 0 1em 0; padding : .5em; }
body > div#footer     { position : fixed; right : 1px; bottom : 0; width : 190px; margin : .5em auto; border : none; background :  #bdd9f5;  color : #369; text-align : center; }
/* footer */
div#footer address > a       { background : transparent; color:#999; }
div#footer address > a:hover { background : transparent; color:#333; }
/* header */
div#header p  { margin : 0; background : transparent; color : #fff; text-transform : capitalize; }
div#reference { display : none; }
/* main menu */
div#navigation h2         { margin : 0; padding : 0 .5em; background : #369; color : #fff; }
div#navigation ul         { padding : .3em; border-top : 1px solid #059; background : #fff; color : #666; }
div#navigation ul li      { margin : .3em 0; padding : 0; }
div#navigation ul a       { display : block; height : 1.8em; padding : 0 .3em; background : #bdd9f5;  color : #369; text-decoration : none; }
div#navigation ul a:hover { background : #8db8e4; color : #000; }
/* section */
div.section                    { margin-bottom : 1em; }
div.section h2                 { border-bottom : none; background : transparent; color : #059; text-transform : capitalize; }
div.section p img              { float : left; margin : .3em; padding : .2em; border : 1px solid #059; background : #fff; color : #000; }
div.section h2 img             { margin : 0; padding : 0; text-align:left; }
div.section ul                 { padding : 0; }
div.section ul li              { margin : 0; padding : 0 .3em 0 2em; background : transparent url('/tutorial/images/zeng/listbutton.gif') no-repeat 0 .3em scroll; }
div.section div.refs           { padding : 0 .3em; background : #8db8e4; color : #000;  text-align : right; }
div.section div.refs a         { background : transparent; color : #369; font-variant : small-caps; font-size : .9em; text-decoration : none; text-transform : capitalize; text-align : right; }
div.section div.refs a:hover   { background : transparent; color : #000; }