/***********/
/* general */
/***********/

/*

to center a <table> properly on windows ie5, use a combination of:
div.xxx {text-align:center;} for ie5
table.yyy {margin:auto;} for newer navigator

to center a <table> properly on windows ie6, use a combination of:
table.xxx {margin:auto;}
and <!DOCTYPE ... XHTML 1.0 Strict ...>
and be sure that the <table> is not larger than its enclosing block

to retrieve img, give path from _css to _img

*/

/*table, td, h1, div, form {border:1px solid;}*/

html
{
height:100%; /* to avoid the scroll bar bad effect */
}

body
{
text-align: center; /* bug ie : help to center */
background: url(../_img/zoo/tatami-3s.gif);
/* background-color: #3973AD; */
font-family: arial, sans-serif;
height: 100%;; /* to avoid the scroll bar bad effect */
padding: 8px;
margin:0px;
}

.moving {text-align:center;}

img {border: 0px;}

p, th, td, li, div, span, a
{
color: #000000;
}

p, th, td, li, div
{
text-align: justify;
}

ul {list-style-image: url(../_img/zoo/bullet-white-05.png);}

a {text-decoration: none;font-weight: normal;}

a:link {color: #009900;}
a:visited {color: #009900;}
a:active {color: #009900;}
a:focus {color: #990000;}
a:hover {color: #990000;}

h1
{
color: #990000;
/* padding-left: 50px; and padding-right: 50px; to prevent <h1> covering go-tampon.gif */
padding-left: 50px;
padding-right: 50px;
/* padding-top: 4px; padding-bottom: 4px; margin-top: 0px; to reduce blank arround h1 */
padding-top: 4px;
padding-bottom: 4px;
margin: 0px;
font-weight: normal;
text-decoration: none;
font-size: 160%;
text-align: center;
}
h2 {color: #990000; font-weight: normal; text-align: left; text-decoration: none; font-size: 140%;} /* 660000 */
h3 {color: #990000; font-weight: normal; text-align: left; text-decoration: none; font-size: 120%;} /* 660000 */
h4 {color: #990000; font-weight: normal; text-align: left; text-decoration: none; font-size: 100%;} /* 660000 */

span.important {font-weight: bold; color: #000000;}

span.definition {font-weight: normal; color: #990000;}

div.page
{
width: 780px;
margin-left: auto;
margin-right: auto;
background: #eeeebb;
}

div.content
{
border-left: 1px solid #777777;
border-right: 1px solid #777777;
padding: 4px;
margin:0px;
background: url(../_img/zoo/go-tampon.gif) no-repeat top right;
text-align:center; /* to center tables on windows ie5 */
}

div.header
{
background: #777777;
margin:0px;
padding:0px;
height:77px;
}

div.menu
{
text-align: center;
padding: 4px;
margin:0px;
color: #eeeeee;
background: #777777;
}

div.menu a:link {color: #eeeeee;padding:2px;}
div.menu a:visited {color: #eeeeee;padding:2px;}
div.menu a:active {color: #eeeeee;padding:2px;}
div.menu a:focus {color: #eeeeee;border:1px solid #ffffff;background:#111111;padding:1px;}
div.menu a:hover {color: #eeeeee;border:1px solid #ffffff;background:#990000;padding:1px;}

div.navigation
{
text-align:center;
color: #777777;
padding: 4px;
margin:0px;
}

div.navigation a:link {color: #009900;}
div.navigation a:visited {color: #009900;}
div.navigation a:active {color: #009900;}
div.navigation a:focus {color: #990000;}
div.navigation a:hover {color: #990000;}

div.navigation a, div.navigation span
{
padding:1px;
}

div.navigation span
{
color: #777777;
}

div.navigation a:before, div.navigation span:before
{
content:"";
}

div.navigation a:after, div.navigation span:after
{
content:"";
}

div.navigation a.first:before, div.navigation span.first:before
{
content:"";
}

div.navigation a.first:after, div.navigation span.first:after
{
content:"";
}

div.navigation a.last:before, div.navigation span.last:before
{
content:"";
}

div.navigation a.last:after, div.navigation span.last:after
{
content:"";
}

div.summary
{
text-align:center;
padding: 0px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 4px;
}

div.summary a, div.summary span
{
border-left: 1px solid #777777;
border-right: 0px solid #777777;
border-top: 1px solid #777777;
border-bottom: 1px solid #777777;
padding: 1px;
margin: 0px;
background: #ffffff;
}

div.summary a.last, div.summary span.last
{
border-left: 1px solid #777777;
border-right: 1px solid #777777;
border-top: 1px solid #777777;
border-bottom: 1px solid #777777;
}

div.backLink
{
text-align: right;
color: #777777;
}

div.backLink a:link {color: #009900;}
div.backLink a:visited {color: #009900;}
div.backLink a:active {color: #009900;}
div.backLink a:focus {color: #990000;}
div.backLink a:hover {color: #990000;}

p.copyright
{
color: #777777;
text-align:center;
}

p.gosSign
{
color: #777777;
text-align:right;
}

p.homepage
{
color: black;
text-align:center;
}

div.important
{
border: 1px black solid;
font-weight: bold;
padding: 4px;
}

/* warning: don't use p.important if block tags such as <ul> have to be in it */
/* use div.important instead because <ul> may be understand as </p><ul> */
p.important
{
padding: 4px;
border-style: solid;
border-width: 1px;
font-weight: bold;
}

table.doubleEntry
{
background: #ffffff;
border-collapse: collapse;
}

table.doubleEntry th
{
background: #cccccc;
color: #000000;
text-align: center;
border: 1px solid #777777;
}

table.doubleEntry td
{
background: #ffffff;
text-align: center;
vertical-align: middle;
border: 1px solid #777777;
}

table.summary
{
border-collapse: collapse;
}

table.summary th
{
background: #cccccc;
color: black;
border:1px solid #777777;
}

table.summary td
{
background: #ffffff;
text-align: center;
border: 1px solid #777777;
}

table.summary th.empty
{
color: #eeeebb;
background: #eeeebb;
border:0;
}

table.summary td.empty
{
color: #eeeebb;
background: #eeeebb;
border:0;
}

table.summary td.special
{
color: #eeeebb;
background: #eeeebb;
/* use the trick below to enlarge empty column of 1 px */
/* without erasing other borders */
border-left: 1px solid #eeeebb;
border-top: 0;
border-right: 0;
border-bottom: 0;
}

table.navigation
{
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}

table.navigation td
{
background: #ffffff;
text-align: center;
border: 1px solid #777777;
}

div.noscript
{
color:red;
font-size:200%;
margin:auto;
padding:100px;
}

div.noscript p
{
color:red;
}

/***********/
/* accueil */
/***********/

p.mainNewLink
{
text-align: center;
font-size: 145%;
}

div.poem {
width: 470px;
margin-left: auto;
margin-right: auto;
}

p.poem {text-align: center;}

p.poetSign {text-align: right;}

p.dialog {text-align: center;}

p.ring {text-align: center;}

/********/
/* rule */
/********/

/*
div.figure is for diagram(s) with text below them
- when text below the diagram, and no <p> used, text is centered
- when text below the diagram, and <p> used, text is jutified
- diagram and text are top aligned
- text is top aligned
- "plus" is middle aligned
when only one diagram with a centered text, just use div.figure
when text beside diagram, just use a simple table
when main text beside diagram and small text under diagram, use td.diagram
*/

div.figure
{
/* center image, text, and table in old navigators as ie5 for windows */
text-align:center;
}

div.figure table
{
/* to center table in newer navigators */
margin-left: auto;
margin-right: auto;
}

div.figure td
{
text-align:center;
vertical-align:top; /* in case of several td on the same line */
padding-left:6px;
padding-right:6px;
padding-top:0px;
padding-bottom:0px;
}

div.figure td.plus
{
vertical-align:middle;
}

div.figure td p
{
/* remember that p is justified */
padding-top:0px; /* to get similar result as when just a div and no table */
margin-top:0px; /* to get similar result as when just a div and no table */
}

td.diagram
{
/* when no div.figure, with a small text in the same td */
text-align:center;
}

/***********/
/* curious */
/***********/

table.curious h2 {text-align:center;}

table.curious td.diagram
{
width: 385px;
height: 435px;
text-align: center;
}

/*************/
/* problemes */
/*************/

table.problemSummary
{
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}

table.problemSummary th
{
background: #cccccc;
color: #000000;
border: 1px solid #777777;
}

table.problemSummary td
{
background: #ffffff;
text-align: center;
border: 1px solid #777777;
}

table.probleme td.diagram
{
width: 385px;
height: 435px;
text-align:center;
}

table.probleme h1
{
text-align:left;
padding-left:0px;
}

div.solution
{
height: 435px;
vertical-align: top;
}

table.solution
{
margin-left: auto;
margin-right: auto;
}

table.solution td.diagram
{
text-align: center;
vertical-align: top;
}

table.solution td.content
{
padding: 4px 8px;
vertical-align: top;
}

p.solutionNote
{
padding: 4px 8px;
}

/********/
/* yose */
/********/

table.yose
{
	border-collapse: collapse;
}

table.yose td {padding:8px;}

table.yose td.diagram {text-align:center;}

/********/
/* yogo */
/********/

table.yogo td.diagram
{
width: 385px;
height: 435px;
text-align: center;
}

table.yogo td.content div.kanji {text-align:center;}

table.yogo td.content div.kana {text-align:center;}

.yogoKanji {text-align: center;font-size:160%;margin-bottom:0px;margin-top:0px;}
.yogoKana {text-align: center;font-size:130%;margin-bottom:0px;margin-top:0px;}

/************/
/* japonais */
/************/

div.kanjis {text-align: center;padding:12px;}

div.kanas {text-align: center;padding:12px;}

div.kanjiList {text-align: center;padding:12px;}

/************/
/* joseki */
/************/
/* add h1 porperties below to counter what i call a bug */
/* whithout this, h1 margin is added outside div.joseki!!! */
div.joseki h1 {margin-top:0px;padding-top:4px;}
div.joseki
{
text-align: center;
height: 330px;
width: 330px;
padding: 2px;
border:1px solid #000000;
background:white;
margin-left: auto;
margin-right:auto;
margin-top:51px;
margin-bottom:51px;
}

/**********/
/* photos */
/**********/

p.photos {text-align: center;}
p.photosSign  {text-align: left;}
table.photos {margin-left:auto;margin-right:auto;}

/********/
/* quiz */
/********/

table.quiz
{
margin: auto;
width:600px;
border-collapse: collapse;
}

table.quiz td
{
border:1px solid black;
padding:2px;
}

table.quiz td.radio
{
text-align: center;
}

p.quizScoreButton {text-align: center;}

/*******/
/* new */
/*******/

table.newSummary
{
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}

table.newSummary th
{
background: #cccccc;
color: black;
border:1px solid #777777;
}

table.newSummary td
{
background: #ffffff;
border:1px solid #777777;
}

/************/
/* Simon Hi */
/************/

p.simonHi {text-align: center;}
h1.svetlana {text-align: center;color:black;}
p.simonHi img {border: 1px solid;}

/********/
/* talk */
/********/

table.talkGlobalBox {
margin: auto;
padding: 0px;
}

table.talkGlobalBox td.talkSpeakerBox { 
vertical-align:bottom;
padding: 8px;
text-align: center;
}

table.talkGlobalBox td.talkGridBox { 
vertical-align:middle;
}

div.roundcont {
background-color: #eeeebb;
color: #000000;
}

div.roundcont p {
margin: 0 10px;
}

div.roundtop {
background: url(../_img/zoo/_cr/cc.gif) no-repeat top right;
}

div.roundbottom {
background: url(../_img/zoo/_cr/cc.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}