/**************************************************************
   AUTHOR:  Francois Embit (eyka.com)
   DATE:    2006.09
   LAYOUT
 **************************************************************/

/**************************************************************
   #content: Sets the width of the site.  Make changes here
             to convert to a fixed width site.
 **************************************************************/


#content {  
/*height: 100%;
min-height: 100%;*/
text-align: left;
}

#white {
float: left;
width: 100%;
clear: both;
background: #FFF;
/*background: #FFF url(./images/bg/bg-mindmap.gif) no-repeat top center;*/
}

#content, #widthmore, #width {
/* max-width hack for IE since it doesn't understand the valid css property */
width: expression(document.body.clientWidth > 1100 ? "960px" : "90%");  
max-width: 960px;
margin: 0 auto;
text-align: left;
}

#widthheader, #widthmenu{
/* max-width hack for IE since it doesn't understand the valid css property */
width: expression(document.body.clientWidth > 960 ? "960px" : "100%");  
max-width: 960px;
margin: 0 auto;
text-align: left;
}

.visuel100 {
position: relative;
margin: 14px auto 0px auto;
text-align: left;
width: 100%;
height: 210px;
overflow: hidden ;
background: #000 url(../images/visuel-right.jpg) no-repeat top right;
z-index: 1;
}

.visuel100 .rightbg {
position: absolute;
text-align:left;
background-color: #FFF;
filter:alpha(opacity=80);   /* Internet Explorer       */
-moz-opacity:0.80;           /* Mozilla 1.6 and below   */
opacity: 0.80;               /* newer Mozilla and CSS-3 */
top: 0px;right: 0px;
padding:0 10px 0 10px;margin:0px;
border-left:1px solid #EEE;
height: 240px;
width:60%;
z-index: 50;
}

.visuel100 .rightbg h1{
font: 700 2.4em "arial",trebuchet ms, serif;
color:#000;
}

.visuel100 .right {
position: absolute;
text-align:right;
color:#FFF;
/*background-color:#7cbb00;*/
/*background-color:#D69C21;*/
background-color: #444;
bottom: 0px;
right: 0px;
font-size:1.1em;
padding:0px 10px;
margin:0 10px 0 0;
z-index: 60;
}

span.highlighted {
padding-top: 2px;
padding-right: 0pt;
padding-bottom: 2px;
padding-left: 0pt;
color: #ffffff;
background-color: #333;
line-height: 180%;
}

.text{
font: 700 1em "arial",trebuchet ms, serif;
color: #F4F4F4;color: #FFF;
filter:alpha(opacity=100);  /* discarded */
-moz-opacity:1.0;           /* discarded */
opacity: 1.0;               /* discarded */
padding: 1px 0;
line-height: 170%;
}

#textcredits{
text-align:left;
font: 0.85em "arial",trebuchet ms, serif;
color: #999;
padding: 0px;
}

#textcredits a {
color: #999;
text-decoration:none;
}

#textcredits a:hover {
color: #333;
background: none;
text-decoration:underline;
}

.visuel100 h1 a{color: #000;text-decoration:none;}
.visuel100 h1 a:hover {color: #FFF;background: #333;}
.visuel100 span.highlighted a{color: #FFF;text-decoration:none;}
.visuel100 span.highlighted a:hover {color: #FFF;background: #000;}
.visuel100 a.category{color: #FFF;text-decoration:none;}
.visuel100 a.category:hover {color: #FFF;background:none;}
.mainContent a.category {color: #FFF;text-decoration: none;background:none;}
.mainContent a.category:visited {color: #FFF;text-decoration:none;background:none;}
.mainContent a.category:hover {color: #FFF;background:none;}

.mainContent a.home {color: #333;text-decoration: none;background:none;}
.mainContent a.home:visited {color: #333;text-decoration:none;background:none;}
.mainContent a.home:hover {color: #333;text-decoration:underline;background:none;}

h2 a.normal {color: #C00;text-decoration: none;background:none;}
h2 a.normal:visited {text-decoration: none;background: url(images/link_dotted.png) repeat-x bottom;}
h2 a.normal:hover {color: #FFF;background: #C00;text-decoration:none;}

.visuel50 {
position: relative;
float: left;
margin: 0 10px 10px 0;  text-align: left;
width: 200px;
height: 200px;
overflow: hidden ;
background: #EEE url(../images/visuel--right.jpg) no-repeat top right;
z-index: 1;
border-bottom:1px solid #EEE;
}

.visuel33 {
position: relative;
margin: 0px;
text-align: left;
width: 96%;
height: 80px;
overflow: hidden ;
background: #EEE url(../images/visuel--right.jpg) no-repeat top right;
border-bottom:1px solid #999;
z-index: 1;
}

.visuel25 {
float: left;
margin: 0 8px 0 0;
text-align: left;
width: 80px;
height: 80px;
overflow: hidden ;
background: #EEE url(../images/visuel--right.jpg) no-repeat top right;
z-index: 1;
}

.visuel50 .right,  .visuel33 .right, .visuel25 .right {
position: absolute;
text-align:right;
color: #FFF;
/*background-color: #7CBB00;*/
/*background-color:#D69C21;*/
/*background-color: #444;*/
background-color: #444;
bottom: 0px;
right: 0px;
padding:0px 10px;
margin:0 10px 0 0;
font-size:0.9em;
z-index: 60;
}



#widthstart {
/* max-width hack for IE since it doesn't understand the valid css property */
width: 100%;
margin: 10px auto 0px auto;
height: 16px;
background: #F4F4F4 url(images/bg/bgwidthstart.gif) repeat-x top;
border-top: 1px solid #EEE;
}

.break {
clear:both;
width: 100%;
margin: 0px auto 0px auto;
height: 16px;
background: #F4F4F4 url(images/bg/bgwidthstart.gif) repeat-x top;
border-top: 1px solid #EEE;
}

#content[id], #widthmore[id], #width[id] {
width: 90%;
height: auto;
}

/**************************************************************
   #header: Holds the site title and header images
 **************************************************************/

#header {
position: relative;
background: #000 url(images/bg/bgheader2.gif) no-repeat top center;
overflow: hidden ;
height: 102px;
}


/* Holds the site title and subtitle */

#header #title {
position: absolute;
z-index: 3;
top: 10px;
left: 130px;
padding: 5px;
text-align: right;
}

#header h1 {
margin: 0;
padding: 0;
font: 700 4em "arial",trebuchet ms, serif;
letter-spacing: -3px;
text-transform: lowercase;
color: #FFF;
}

#header h2 {
position: absolute;
top: 10px;
right: 5px;
margin: 0;
padding: 0;
font: 700 1em "arial",trebuchet ms, serif;
text-transform: lowercase;
color: #00F0EC;
}


/* Sets where the header images will go */

#header img.left {
float: left;
z-index: 1;
top: 0;
left: 0;
}

#header img.right {
position: absolute;
z-index: 0;
top: 0;
right: 0;
}

#accessibility {
float: right;
text-align: right;
color: #666;
font-size: 0.75em;
background: #000 url(images/---.png) no-repeat top left;
height: 20px;
/*width: 460px;*/
margin: 0 0 0 0;
padding: 0px 10px 0 10px;
display: inline;
}

#accessibility a {
color: #999;
text-decoration:none;
}

#accessibility a:hover {
color: #EEE;
background: none;
text-decoration:underline;
}

#header .right {
float: right;
clear:right;
z-index: 0;
color: #FFF;
margin: 15px 16px 0 0;
display: inline;
}

#search {
/*padding: 0px;*/
height: 18px;
width: 190px;
background: url(images/search_input_bg.png) no-repeat top right;
float: left;
display: inline;
}

#search input, #search form {
margin: 0px;
padding: 0px;
}

#search .searchField {
/*display: block;*/
/*background: #FFF url(images/search_input_bg.png) no-repeat;*/
background:transparent;
color: #999;
padding: 1px 0px 0px 5px;
width: 157px;
height: 16px;
border: none;
float: left;
display: inline;
}

#search .searchButton {
padding-right: 3px;
margin: 0px;
width: 23px;
height: 18px;
border: none;
float: right; 
display: inline;
}

/**************************************************************
   #mainMenu: The top level site menu
 **************************************************************/

#mainMenu { 
float: left;
width: 100%;
background: #EEE url(images/bg/bgmainmenu.gif) repeat-x bottom;
/*border-bottom: 6px solid #F4F4F4;*/
margin-bottom: 0px;
clear: both;
}

#mainMenu ul {
margin: 0;
padding: 0;
}

#mainMenu li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}

#mainMenu li a {
float: left;
margin: 0px;
padding: 4px 0.9em 10px 0.9em;
font: 700 1.2em "arial",trebuchet ms, serif;
text-decoration: none;
color: #999;
}

#mainMenu li a:hover {
color: #EEE;
background: #000 url(images/bg/here.gif) no-repeat bottom right;
}

#mainMenu li a.here, #mainMenu li.current_page_item a{
color: #FFF;
font: 700 1.2em "arial",trebuchet ms, serif;
background: #000 url(images/bg/here.gif) no-repeat bottom center;
}

#mainMenu li a.here:hover {
color: #FFF;
font: 700 1.2em "arial",trebuchet ms, serif;
text-decoration: none;
background: #000 url(images/bg/here.gif) no-repeat bottom center;
}

#mainMenu li a.last {
margin-right: 0;
}


/**************************************************************
   .sideMenu: The side bar menu
 **************************************************************/

ul.sideMenu {
  margin: 0;
  padding: 0;
}

.sideMenu li {
  display: inline;
  /* Needed since IE fails when you give it list-style: none; */  
  list-style-image: url(foo.gif);
  font: 700 1.4em "arial",trebuchet ms, serif;
}


.sideMenu h2.tag, .sideMenu li a {
  display: block;
  margin: 0.2em 0;
  padding: 3px 5px;    
  text-decoration: none;
  color: #7CBB00;
} 


.sideMenu li a:hover {
  color: #FFF;
  background: #7CBB00;
}

.leftColumn a.t1 {
  color: #7CBB00;
}

.leftColumn a:hover.t1 {
  color: #FFF;
  background: #7CBB00;
}

/* Active menu item */

.sideMenu li.here {
  display: block;  
  padding: 5px;
  color: #FFF;
  background: #7CBB00;
}

/* Submenu of active menu item */

.sideMenu li.here ul {
  margin: 0;
  padding: 0;
}

.sideMenu li.here ul li a {
  padding-left: 30px;
  font: 400 0.55em verdana, arial, sans-serif; 
  color: #FFF;  
  background: url(images/bg/bullet_white.gif) no-repeat 10px 0px;
}

.sideMenu li.here ul li a:visited  {
  /*padding-left: 30px;
  font: 400 0.55em verdana, arial, sans-serif; 
  color: #FFF;  
  background: url(images/bg/bullet_white.gif) no-repeat 10px 0px;*/
}

.sideMenu li.here ul li a:hover {
  color: #FFF;
  background: #9C3 url(images/bg/bullet_white.gif) no-repeat 10px 0px;
}

.leftColumn a {
  color: #360;
}

.leftColumn a:visited {
  /*text-decoration: none;
  background: url(images/link_dottedcolumn.png) repeat-x bottom;*/
}

.leftColumn a:hover {
  color: #FFF;
  background: #9C3;
  text-decoration:none;
}

.leftColumn h2.tag {
  color: #7CBB00;
  padding: 5px;
}

/**************************************************************
   #page: Holds the main page content.
 **************************************************************/

#page {
  float: left;
  width: 100%;
  clear: both;
  padding-bottom: 3em;
}

/**************************************************************
   #more
 **************************************************************/

#more {
  float: left;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  clear: both;
  color: #999;
  background: #444;
  border-top: 1px solid #444;
  padding-bottom: 1em;
}


/**************************************************************
   #footer: The page footer - will stick to the bottom if not

            enough content.
 **************************************************************/

#footer {
  float: left;
  width: 100%;
  clear: both;
  border-top: 0.1em solid #444;
  /*height: 100%;*/
  /*margin-top: -4.1em;*/
  background: #000;
  padding: 0px 0 26px 0;
  color: #999;
}

/* Sets the width of the footer content */

#footer #width {
  position: relative;
  z-index: 3;
  font-size: 0.85em;
  padding: 16px 0 0 0;
}

#footer a, #more a.suite {
  color: #999;
  text-decoration:none;
}

#footer a:hover, #more a:hover.suite {
  color: #EEE;
  background: none;
  text-decoration:underline;
}

/**************************************************************
   Width classes used by the site columns
 **************************************************************/

.width100 {width: 100%;}
.width75 {width: 74%;}
.width70 {width: 65.5%;}
.width50 {width: 49.7%;}
.width33 {width: 32.7%;}
.width30 {width: 31.5%;}
.width25 {width: 24.7%;}

/**************************************************************
   Alignment classes
 **************************************************************/
 
.floatLeft {float: left;}
.floatRight {float: right;}

.alignLeft {text-align: left;}
.alignRight {text-align: right;}

/**************************************************************
   Generic display classes
 **************************************************************/
.clear {clear: both;}
.block {display: block;}
.small {font-size: 0.8em;}

.green {color: #A1FF45;}
.red {color: #EA1B00;}
.grey {color: #777;}
.grey a {color: #999;}
.grey a:hover {color: #EEE;}

.gradient {
margin-bottom: 2em;
background: url(images/bg/-gradient.jpg) repeat-x bottom left; 
}

/**************************************************************
   AUTHOR:  Fran�ois Embit (eyka.com)
   DATE:    2006.09
   HTML ELEMENTS
 **************************************************************/

html {height: 100%;}

body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
font: 400 0.75em verdana, arial, sans-serif;
line-height: 150%;
background: #000 url(images/bg/-bg.gif) no-repeat top left;
color: #333;
}



h1 {   
clear: both;
font: 700 2em "arial",trebuchet ms, serif;
color: #C00;
}


h1 a{
text-decoration:none;
}

h2 {
font: 400 1.5em "arial",trebuchet ms, serif;
font: 700 1.3em "arial",trebuchet ms, serif;
color: #333;
}
h2 a {color: #333;}
h2 a:hover {color: #FFF;}
h3 {font: 400 1.3em "arial",trebuchet ms, serif;color: #333;}
h4 {font: 700 1.2em "arial",trebuchet ms, serif;color: #333;}
h5 {font: 700 1.1em "arial",trebuchet ms, serif;color: #333;}
h6 {font: 700 1em "arial",trebuchet ms, serif;color: #333;}
h1, h2, h3, h4, h5, h6, p, dl {margin: 0;padding: 10px 15px 10px 0px;}

.entry h1 {margin: 0;padding: 10px 15px 0px 0px;}

/* Done so the leftmost column aligns properly with the header.
   If the leftmost column has class gradient applied to it, 
   this class isn't required. */

.leftColumn h1, .leftColumn h2, .leftColumn h3, .leftColumn h4, .leftColumn h5, .leftColumn h6, .leftColumn p, .leftColumn dl {padding-left: 0;}

#more h1, #more h2, #more h3, #more h4 {color: #DDD;}

a.link {
display: block;  
padding: 10px;
background: inherit;
text-decoration: none;
color: #999;
border-top: 1px solid #555;
}

a:hover.link { 
color: #DDD;
background: #525252;
border-top: 1px solid #555;
}

.leftColumn h1{
/*font: 700 2em "arial",trebuchet ms, serif;*/
/*border-right: 2px solid #FFF;*/
color: #9C3;
background: #FFF url(images/bg/sidemenu.gif) repeat-x bottom right;;
}

.leftColumn h2.revue{
font-size:1.1em;
margin:20px 0 0 5px;
padding:2px 0 2px 22px;
background: url(images/icons/revue.png) no-repeat 0px 2px ;
}
.leftColumn h2.rss{
color: #CC0000;
font-size:1.1em;
margin:20px 0 0 5px;
padding:2px 0 2px 22px;
background: url(images/icons/feed-icon-16x16.jpg) no-repeat 0px 2px ;
}
.leftColumn h2.podcast{
color: #CC0000;
font-size:1.1em;
margin:6px 0 0 5px;
padding:2px 0 2px 22px;
background: url(images/icons/podcast-icon-16x16.jpg) no-repeat 0px 2px ;
}

.leftColumn h2.revue a{color: #336600;text-decoration:none;}
.leftColumn h2.revue a:hover{color: #FFF;background: #336600;}

.leftColumn h2.rss a, .leftColumn h2.podcast a{color: #CC0000;text-decoration:none;}
.leftColumn h2.rss a:hover, .leftColumn h2.podcast a:hover{color: #FFF;background: #CC0000;}

a {color: #C00;}

.mainContent a:visited {
text-decoration: none;
background: url(images/link_dotted.png) repeat-x bottom;
}

a:hover {
color: #FFF;
background: #C00;
text-decoration:none;
}

.mainContent h3 {
font-weight:bold;
}


.mainContent a:hover {
color: #FFF;
background: #C00;
text-decoration:none;
}

b {color: #333;}
strong {color: #555;}

ol, ul {margin: 10px 30px;padding: 0 30px;}
ol {color: #666;}
ol span {color: #EEE;}
ul {list-style-image: url(images/bg/bullet.gif);}

del {color: #AAA;}

code {
margin: 10px 15px;padding: 10px;
display: block;
overflow: auto;
font: 400 1em courier, monospace;
line-height: 120%;
white-space: pre;
background: #444;
}

.leftColumn {color: #690;}
.leftColumn b {color: #690;}
.leftColumn code {margin-left: 0;}

acronym {cursor: help;border-bottom: 1px dashed #777;}
dt {font-weight: bold;color: #FFB323;}
dd {margin-left: 0;padding-left: 45px;}

/**************************************************************
   Form Elements
 **************************************************************/
 
label {display: block;}

input, textarea, select {
 /* padding: 2px;
font: 400 1em verdana, sans-serif;
color: #999;
background: #EEE;
border: 1px solid #444;*/
}

input:focus, input:hover, textarea:focus, textarea:hover, select:focus, select:hover {
/*color: #000;
background: #FFF;
border: 1px solid #00DFFF;*/
}

input.button {
/*padding: 2px 5px;
font: 400 1.1em "arial",trebuchet ms, serif;
color: #555;
background: #9FF3FF;
border-width: 1px;
border-style: solid;
border-color: #FFF #00DFFF #00DFFF #FFF;*/
}

/**************************************************************
   Blockquote and included icons
 **************************************************************/

blockquote {
margin: 10px 30px 10px 20px;
padding-left: 42px;
color: #FFF;  
background: #444 url(images/icons/quote.gif) no-repeat 5px 5px;
border-bottom: 1px solid #FFF;
}

blockquote.exclamation {
background-image: url(images/icons/exclamation.gif);
background-position: 5px 50%;
}

blockquote.stop {
background-image: url(images/icons/stop.gif);
background-position: 5px 50%;
}

blockquote.go {
background-image: url(images/icons/go.gif);
background-position: 5px 50%;
}

blockquote a {
color: #EEE;
}

.mainContent blockquote a:visited{
text-decoration: none;
background: url(images/link_dottedquote.png) repeat-x bottom;
}

.mainContent blockquote a:hover {
color: #FFF;
background: #C00;
text-decoration:none;
}

/**************************************************************
   Images
**************************************************************/

img.floatRight {
margin: 5px 0px 10px 15px;  
}

img.floatLeft {
margin: 5px 15px 10px 0px;
}

a img {  
/*border: 1px solid #CCC;*/
border: 0px;
}

a:hover img {  
/* Fixes IE bug - IE doesn't correctly apply the style on a:hover so need to mask it */
/*border: 1px solid #C00 !important;
border: 1px solid #C00;*/
border: 0px;
}

.hide{
display:none;
}

.boxcomments h1, .boxcomments h2, .boxcomments h3, .boxcomments h4, .boxcomments h5, .boxcomments h6, .boxcomments p, .boxcomments dl {
  margin: 0;
  padding: 2px 10px 6px 0px;
}

h2#comments, h3#respond {
font-weight:bold;
font-size:14px;
}

.postmetadata{border-top:1px #eee solid;font-size:10px;margin:20px 0 30px 0;padding:5px;}

.boxcomments{border-bottom:1px solid #ddd;margin-bottom:20px;width:600px;}

#commentform{margin:30px 0 0 0;padding:15px 15px 1px;background:#F6F6F6;}
#commentform label{display:block;margin:0;}
#commentform input{width:170px;margin:0 5px 10px 0;padding:1px;}
#commentform textarea{width:400px;margin:0 0 10px;padding:0;}
#commentform #submit{margin:0 0 20px;}
#commentform p{margin:1px 0;}

ol.commentlist{margin:0 0 1px;padding:0 0 2px 0;}
ol.commentlist :hover{background:#F6F6F6;}
ol.commentlist li{border-top:1px solid #eee;display:block;list-style:none;margin:0;padding:15px 15px 1px;}
ol.commentlist li :hover{background:none;}
ol.commentlist li.commenthead{display:block;list-style:none;margin:30px 0 0 0;padding:5px 15px 0px 15px;}
ol.commentlist li.commenthead h2{margin:0;}
ol.tblist{border-top:1px solid #fff;list-style:none;margin:0 0 1px;padding:15px;}
ol.tblist li{display:block;list-style:none;background:transparent url(images/c.gif) 0 2px no-repeat;padding-left:15px;margin:0 0 5px;}

#footer a.cc {
width:24px;
height:24px;
margin:35px 0 5px 5px;
padding:3px 0 7px 22px;
background: url(images/icons/cc.gif) no-repeat 0px 0px ;
}

#issue {width:100%;margin:6px 0 0 0;font-size:1em;color:#DDD;font-weight:bold;border-top:1px solid #DDD;}
#issue a{color:#DDD;text-decoration:none;background:none;/*font-weight:bold;*/}
#issue a.here{color:#666;text-decoration:none;background:none;}
#issue a:hover{color:#666;text-decoration:none;background:none;}