/* ********************************************************** 
 * File type: 		Front-End View							*
 * Coded by:		Yann Lorber								*
 * 					Freelance Web Developer 				*
 *					http://www.yannlorber.fr				*
 * Date:			November 2009							*
 * ******************************************************* */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronymess, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border : 0 none;
font-family : Georgia;
font-weight : normal;
margin : 0;
outline-style : none;
outline-width : 0;
padding : 0;
vertical-align : baseline;
}
html{
font-size: 100%;
} 
:focus {
outline-style : none;
outline-width : 0;
}
ol, ul {
list-style-image : none;
list-style-position : outside;
list-style-type : none;
}
table {
border-collapse : separate;
border-spacing : 0;
}
caption, th, td {
font-weight : normal;
text-align : left;
}
blockquote:before, blockquote:after, q:before, q:after {
content : "";
}
blockquote, q {
quotes : "" "";
}
em {
font-style : italic;
}
p{
margin: 15px 0px;
font-size:0.9em;
}
a {
color:black;	
}
a:hover {
text-decoration:none;	
}
hr {
background:black; color:black;
border:0 none;
height:1px;
}
/*
*
Basic styles 
*
*/
body{
background: #000 url() no-repeat center top;
font-size: 1em;
color: #000;
}
#wrapper{
position:relative;
width:980px;
margin:0px auto;
background:url(../img/loader.gif) no-repeat 0px -100px;
}
.separator{
clear: both;
float:left;
height: 20px;
width: 100%;
}
.bigseparator{
clear: both;
float:left;
height: 40px;
width: 100%;
}
.right {
float:right;	
}

/*
*
Custom Boxes 
*
*/

#header{
float:left;
position:relative;
display:block;
height:106px;
width:980px;
border-bottom:1px solid #ffffff;
background:#88aaac;
}

.menu {
clear:both;
float:left;
height:38px;
width:980px;
background:#000000;
border-bottom:1px solid #ffffff;
}

.menu ul {
float:left;
height:38px;
width:auto;
}

.content {
clear:both;
float:left;
width:980px;
border-bottom:1px solid #ffffff;
background:#efe200 url(../img/bg_yellow.png) repeat-x;
}
.plus {
clear:both;
float:left;
width:980px;
background: url(../img/plus.gif) 16px 16px;	
}

#page{
clear:both;
float:left;
width:936px;	
margin:22px 22px 40px 22px;
}

#page-interviews, 
#page-conversations,
#page-articles{
clear:both;
float:left;
display: inline;
width:792px;	
margin:94px;	
}
#page-interview{
clear:both;
display: inline;
float:left;
margin:0px 27px 0px 57px;	
}
#page-contests{
clear:both;
display: inline;

float:left;
margin:32px 32px 40px 32px;	
}
#page-glossary{
clear:both;
display: inline;
float:left;
position:relative;
width:936px;	
margin:22px 22px 40px 22px;
height:480px;
}


.main {
width:505px;	
float:left;
margin-right:50px;
}
.sidebar {
width:290px;	
float:left;
}

.interview {
width:495px;	
margin-left:10px;
float:left;
clear:both;
}


.col {	
float:left;
padding:0px;
width:412px;	
}



/*
*
Custom Content 
*
*/


.bg-glossary, .bg-comic {
background:#88c1c8 url(../img/bg_blue.png) repeat-x;
}
.bg-contests {
background:#c07268 url(../img/bg_pink.png) repeat-x;
}
.bg-articles {
background:#74b0b7 url(../img/bg_blue2.png) repeat-x;
}
.bg-conversations, .bg-events {
background:#c1cc69 url(../img/bg_green.png) repeat-x;
}



h1 {
float:left;
clear:both;
color:#fff;
background: #000000;
width:495px;
font-weight:normal;
text-transform:uppercase;
font-size:1.05em;
line-height:30px;
padding-left:10px;
}

h2 {
float:left;
clear:both;	
color:#fff;
background: #000000;
width:290px;
/*height:30px;*/
font-weight:normal;
text-transform:uppercase;
font-size:1.05em;
line-height:30px;
text-indent:10px;
}

a#recodelogo{
position:absolute;
top:0px;
left:106px;
display:block;
background: transparent url(../img/recodelogo.gif) no-repeat left center;
width:266px;
height:106px;	
}
.mainicon {
position:absolute;
top:0px;
left:0px;
display:block;
height:106px;	
width:106px;
background:url(../img/icons/icons_big_21.png) no-repeat center center ;	
}
a#poweredby{
position:absolute;
top:0px;
right:25px;
display:block;
background: transparent url(../img/powered_by.gif) no-repeat left center;
width:190px;
height:106px;	
}

.footer {
border-bottom:none;	
}
.menu ul li{
float:left;
height:38px;
color:#fff;
line-height:38px;
font-weight:bold;
font-family:Arial;
}
.menu ul li a{
float:left;
display:block;
height:38px;
position:relative;
margin:0px 14px;
}
* html .menu ul li a {margin:0px 6px;}

.menu ul li a span{
position:absolute;
top:14px;
left:0px;
display:block;
height:10px;
width:100%;
background-image:url(../img/menu.gif);
background-repeat:no-repeat;
}
* html .menu ul li a span {line-height: 1px; font-size:4px}

.menu a#menu_interviews{
width:124px;
}
.menu a#menu_interviews span{
background-position:0px 0px;
}
.menu a#menu_interviews:hover span,.menu a#menu_interviews span.current{
background-position:0px -10px;
}

.menu a#menu_conversations{
width:103px;
}
.menu a#menu_conversations span{
background-position:-124px 0px;
}
.menu a#menu_conversations:hover span,.menu a#menu_conversations span.current{
background-position:-124px -10px;
}

.menu a#menu_articles{
width:59px;
}
.menu a#menu_articles span{
background-position:-227px 0px;
}
.menu a#menu_articles:hover span,.menu a#menu_articles span.current{
background-position:-227px -10px;
}

.menu a#menu_posts{
width:39px;
}
.menu a#menu_posts span{
background-position:-286px 0px;
}
.menu a#menu_posts:hover span,.menu a#menu_posts span.current{
background-position:-286px -10px;
}

.menu a#menu_contests{
width:65px;
}
.menu a#menu_contests span{
background-position:-325px 0px;
}
.menu a#menu_contests:hover span,.menu a#menu_contests span.current{
background-position:-325px -10px;
}

.menu a#menu_events{
width:45px;
}
.menu a#menu_events span{
background-position:-390px 0px;
}
.menu a#menu_events:hover span,.menu a#menu_events span.current{
background-position:-390px -10px;
}

.menu a#menu_glossary{
width:113px;
}
.menu a#menu_glossary span{
background-position:-435px 0px;
}
.menu a#menu_glossary:hover span,.menu a#menu_glossary span.current{
background-position:-435px -10px;
}

.menu a#menu_clearvillage{
width:141px;
}
.menu a#menu_clearvillage span{
background-position:-548px 0px;
}
.menu a#menu_clearvillage:hover span,.menu a#menu_clearvillage span.current{
background-position:-548px -10px;
}

.menu a#menu_contact{
width:59px;
}
.menu a#menu_contact span{
background-position:-689px 0px;
}
.menu a#menu_contact:hover span,.menu a#menu_contact span.current{
background-position:-689px -10px;
}

.menu a#menu_comic{
width:40px;
}
.menu a#menu_comic span{
background-position:-748px 0px;
}
.menu a#menu_comic:hover span,.menu a#menu_comic span.current{
background-position:-748px -10px;
}



.interview .interview-header{
width:100%;	
float:left;
clear:both;	
margin-top:5px;
} 
.interview-header img.portrait{
margin:18px 15px 0 0;
float:left;
width:90px;	
height:135px;
}
.interview-header .interview-info{
float:left;
width:390px;
position:relative;	
}

.interview-header .interview-info p{
font-size:0.8em;
font-weight:bold;
margin:0px;
}

.interview-info .interview-subtitle{
float:left;
clear:both;
font-style:italic;
margin:15px 0;
padding:5px 0 20px;
width:100%;
background: url(../img/dotted.png) repeat-x 0px 52px;

}
.interview-info .interview-intro{
font-size:1.1em;
float:left;
clear:both;
width:100%;

}
.interview-info .interview-intro p {
font-weight:bold;
text-transform:uppercase;
}
.interview-info .icon {
position:absolute;
top:7px;
right:10px;
display:block;
width:50px;
height:50px;	
}

.interview-text{
width:100%;	
float:left;
clear:both;	
margin-top:20px;	
}
.interview-text p{
font-size:0.9em;
line-height:1.5em;
}

.sidebar .text {
float:left;
clear:both;	
width:280px;	
margin:10px 0px 0px 10px;
}
.sidebar .text a {
text-decoration:none;
}
.sidebar .text a:hover {
text-decoration:underline;
}


ul#iconlist {
float:left;
width:100%;	
}
ul#iconlist li{
float:left;
width:50px;
height:50px;
padding:11px;
}
ul#iconlist li a{
display:block;
width:50px;
height:50px;
}

.illustration img {
clear:both;
float:left;
width:495px;	
padding:0px;
margin:0px;
}
.illustration p {
clear:both;
margin:0px;
background:white;
padding:5px;
}

.plusline{
clear: both;
float:left;
height: 47px;
width: 100%;
}
.pluscols{
clear:both;
float:left;
width:980px;
background: url(../img/pluscols.gif) repeat-y 16px 41px;
}
.pluscols2{
clear:both;
float:left;
width:980px;
background: url(../img/pluscols2.gif) repeat-y 16px 41px;
}


/*.flip_gallery {
float:left;
width:539px;	
margin: 0px 50px 0 42px;
}*/
.flip_gallery {
float:right;
width:539px;	
height:731px;
margin: 0px 0px 5px 20px;
background:white url(../img/loader.gif) no-repeat 30px 30px;
}
.introtext {
display:none;	
}

#tooltippp {
position: absolute;
display: none;
z-index: 9000;	
color:black;
width:280px;
background:url(../img/tooltiptop.png) no-repeat 60px 0px;
}

#tooltippp .zone {
margin-top:12px;
background: white;
padding: 20px;
}
#tooltippp .intro {
text-transform:uppercase;	
padding-bottom:7px;
}

#tooltippp .signature {
font-size:0.8em;
}

#glossarytooltippp {
position: absolute;
display: none;
z-index: 9000;	
color:black;
width:auto;
background:url(../img/tooltiptop.png) no-repeat 22px 0px;
}

#glossarytooltippp .zone {
float:left;
margin-top:12px;
padding: 25px 30px 25px 70px;
}
#glossarytooltippp .desc {
text-transform:uppercase;
}

#glossarytooltippp2 {
position: absolute;
display: none;
z-index: 9000;	
color:black;
width:auto;
background:url(../img/tooltiptop.png) no-repeat 22px 0px;
}

#glossarytooltippp2 .zone {
float:left;
margin-top:12px;
padding: 25px 30px 25px 70px;
}
#glossarytooltippp2 .desc {
text-transform:uppercase;
}


#glossarytooltippp3 {
position: absolute;
display: none;
z-index: 9000;	
color:black;
width:auto;
background:url(../img/tooltiptop.png) no-repeat 22px 0px;
}

#glossarytooltippp3 .zone {
float:left;
margin-top:12px;
padding: 25px 30px 25px 70px;
}
#glossarytooltippp3 .desc {
text-transform:uppercase;
}
.colmargin{
margin-right:92px;	
}
.col h1{
width:402px;	
}

.col img {
width:380px;	
}
.col .colcontent {
float:left;
clear:both;
padding:16px;	
width:380px;
}

#contest-list {
clear:both;
float:left;
background:url(../img/bg_contests.gif) repeat-y 0px 0px;	
}

.glossaryiconlist_child{
display:block;	
position:relative;	
float:left;
}
.glossaryiconlist_parent{
float:left;
position:relative;	
left:504px;
width:288px;		
}
.glossaryiconlist_child li{
position:absolute;
width:50px;	
height:50px;
padding:11px;
}
.glossaryiconlist_child  li a{
display:block;
width:50px;
height:50px;
}
.glossaryiconlist_parent li{
position:absolute;
width:50px;
height:50px;
padding:11px;
}
.glossaryiconlist_parent li a{
display:block;
width:50px;
height:50px;
}